/*
 * Qualitypack – Responsive-Erweiterung
 *
 * Wird NACH style.css geladen (siehe header.php). Alle Regeln, die das
 * Layout ändern, stehen in einer Media Query unter 980px. Darüber (Desktop,
 * fixes 980px-Layout) bleibt das Design unverändert.
 */

/* Menü-Button: auf dem Desktop nie sichtbar */
.nav-toggle { display: none; }

/* =====================================================================
   DESKTOP-KORREKTUREN (gelten auf allen Breiten)
   Der Inhaltsbereich (#content) ist 595px breit + 15px Innenabstand und
   ragt damit 15px über die weiße Karte (960px, 5px eingerückt) hinaus.
   Die Absätze hatten dafür padding-right:20px, alles andere (Überschriften,
   Tabellen, Listen, Links) nicht -> Überlauf rechts über den Rand.
   ===================================================================== */

/* Seiteninhalt: rechts 20px Luft, damit nichts über die Karte hinausläuft */
.entry-content {
	box-sizing: border-box;
	padding-right: 20px;
}
.entry-content p { padding-right: 0; }

/* lange Wörter und Links umbrechen statt aus dem Rahmen zu laufen */
#content a, #content p, #content li, #content td, #content th,
#content h1, #content h2, #content h3, #content h4, #content h5 {
	overflow-wrap: anywhere;
	word-wrap: break-word;
}

/* Bilder, Medien und Tabellen dürfen den Container nicht sprengen */
#content img,
.entry-content img {
	max-width: 100%;
	height: auto;
}
#content iframe, #content embed, #content video, #content object {
	max-width: 100%;
}
div.wp-caption { max-width: 100%; }

/* Kontaktformular: feste 600px waren breiter als der Inhaltsbereich */
#FSContact1, #FSContact1 div { max-width: 100%; box-sizing: border-box; }

/* =====================================================================
   AUFKLAPPBARE UNTERMENÜS (Ebene 1 weiß, Ebene 2 grau, Ebene 3 dunkel –
   die Farben bleiben wie im Original). Nur aktiv, wenn JS läuft.
   ===================================================================== */
.nav-sub-toggle { display: none; }

.js li.has-sub:not(.open) > ul { display: none; }

.js li.has-sub > .nav-sub-toggle {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 44px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #000;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.js ul.menu-mainnav-container li ul li.has-sub > .nav-sub-toggle { color: #fff; }

.nav-sub-toggle:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -70%) rotate(45deg);
	transition: transform .2s;
}
li.has-sub.open > .nav-sub-toggle:before {
	transform: translate(-50%, -30%) rotate(-135deg);
}
.nav-sub-toggle:focus { outline: none; }
.nav-sub-toggle:focus-visible { outline: 2px solid #d50025; outline-offset: -2px; }

/* Link darf nicht unter den Pfeil laufen */
.js li.has-sub > a { display: block; padding-right: 36px; }

/* Tabellen-Wrapper (wird per js/mobile.js um Tabellen gelegt) */
.table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* kleiner Abstand, damit Spalten nach dem Umbruch nicht zusammenkleben */
.table-scroll td, .table-scroll th { padding-right: 8px; }
.table-scroll table { max-width: none; }

/* Roter Trennbalken: die Float-/214%-Lösung machte die Tabelle breiter
   als den Inhaltsbereich. Jetzt: normale Tabellenzeile in voller Breite. */
tr.border {
	float: none;
	width: auto;
	margin: 0;
	display: table-row;
}
tr.border td {
	padding: 0 !important;
	height: 12px;
	line-height: 0;
	font-size: 0;
	background: #d3011d;
}

/* Roter Balken über dem Footer: passt jetzt in die 960px-Karte
   (vorher 980px breit = 5px links / 15px rechts über den Rand) */
#wrapcontent > .teaser {
	box-sizing: border-box;
	max-width: 960px;
	margin-left: 5px;
	margin-right: 0;
}

/* Navigation: Unterpunkte waren 340px breit (+80px Einzug) in einem
   351px-Container mit overflow:hidden -> Text wurde rechts abgeschnitten */
ul.menu-mainnav-container li ul li { width: 302px; }
ul.menu-mainnav-container li ul li ul li { width: 282px; }
ul.menu-mainnav-container li ul li ul li ul li { width: 262px; }

@media (max-width: 979px) {

	/* ---------- Grundlagen ---------- */
	body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }

	/* ---------- Seitenrahmen ---------- */
	#wrap {
		width: auto;
		max-width: 760px;
		top: 0;
		margin: 0 auto;
	}

	/* ---------- Kopfbereich: Logo links, Suche rechts ---------- */
	#wrapheader {
		height: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		padding: 12px 0 0 12px;
		box-sizing: border-box;
	}
	#logo {
		position: static;
		float: none;
		order: 1;
	}
	#logo img {
		display: block;
		width: 150px;
		max-width: 42vw;
		height: auto;
	}
	/* Die Info-Box (Kundenstimmen / Artikel) ist im Original ausgeblendet */
	#infobox { display: none; }

	#suche {
		position: static;
		float: none;
		order: 2;
		margin-top: 18px;
		max-width: 100%;
	}

	/* Oberer Kartenrand */
	.begin {
		width: 100%;
		margin: 6px 0 0 0;
		background-size: 100% 100%;
	}

	/* ---------- Weiße Inhaltskarte ---------- */
	#wrapcontent {
		background: #fff;
		display: flow-root;
	}

	/* ---------- Navigation ---------- */
	#navigation {
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	/* Menü-Button (nur mit JS; ohne JS bleibt das Menü einfach sichtbar) */
	.js .nav-toggle {
		display: flex;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		margin: 0;
		padding: 14px 15px;
		border: 0;
		border-radius: 0;
		background: #d50025;
		color: #fff;
		font: bold 16px/1.2 Titillium, Arial, sans-serif;
		text-transform: uppercase;
		text-align: left;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}
	.nav-toggle-icon,
	.nav-toggle-icon:before,
	.nav-toggle-icon:after {
		display: block;
		width: 20px;
		height: 2px;
		background: #fff;
		content: "";
		position: relative;
	}
	.nav-toggle-icon:before { position: absolute; top: -6px; }
	.nav-toggle-icon:after  { position: absolute; top: 6px; }
	.nav-toggle-icon { margin-right: 12px; }

	.js #navigation:not(.nav-open) > .menu,
	.js #navigation:not(.nav-open) > ul.kontakt,
	.js #navigation:not(.nav-open) > ul.impressum { display: none; }

	#navigation .menu { padding: 0; }

	/* Ebene 1 */
	#navigation ul.menu-mainnav-container li {
		width: auto;
		min-height: 0;
		box-sizing: border-box;
		padding: 14px 15px 14px 29px;
		line-height: 1.3;
		overflow-wrap: anywhere;
	}
	#navigation ul.menu-mainnav-container li:has(> ul) { padding-bottom: 0; }
	#navigation ul.menu-mainnav-container li.has-sub:not(.open) { padding-bottom: 14px; }

	/* Ebene 2 */
	#navigation ul.menu-mainnav-container li ul {
		margin: 12px -15px 0 -29px;
	}
	#navigation ul.menu-mainnav-container li ul li,
	#navigation ul.menu-mainnav-container li ul li ul li,
	#navigation ul.menu-mainnav-container li ul li ul li ul li {
		width: auto;
		margin: 0;
		min-height: 0;
		padding: 12px 15px 12px 30px;
	}
	#navigation ul.menu-mainnav-container li ul li:has(> ul) { padding-bottom: 0; }
	#navigation ul.menu-mainnav-container li ul li.has-sub:not(.open) { padding-bottom: 12px; }

	/* Ebene 3 */
	#navigation ul.menu-mainnav-container li ul li ul {
		margin: 12px -15px 0 -30px;
	}
	#navigation ul.menu-mainnav-container li ul li ul li {
		margin: 0;
		padding: 11px 15px 11px 45px;
		font-size: 14px;
	}

	#navigation .kontakt li,
	#navigation .impressum li {
		width: auto;
		box-sizing: border-box;
		padding: 14px 15px 14px 30px;
		line-height: 1.3;
	}

	/* ---------- Inhalt ---------- */
	.entry-content { padding-right: 0; }
	#wrapcontent > .teaser { max-width: none; margin-left: 0; }
	#content {
		float: none;
		width: auto;
		margin: 0;
		padding: 18px 15px 8px 15px;
		box-sizing: border-box;
	}
	#content h2 { font-size: 22px; line-height: 1.2; }
	#content h3 { line-height: 1.25; }
	#content p {
		padding-right: 0;
		font-size: 14px;
		line-height: 1.5;
	}
	#content ul { margin: 15px 0 15px 22px; padding-right: 0; }
	#content ul li { font-size: 14px; line-height: 1.45; }

	/* lange Links / Wörter dürfen umbrechen (statt aus dem Rahmen zu laufen) */
	#content a, #content p, #content li,
	#content h1, #content h2, #content h3, #content h4 {
		overflow-wrap: anywhere;
		word-wrap: break-word;
	}

	/* Teaser-Kacheln: untereinander, volle Breite */
	.teaser, .teaser.left {
		float: none;
		width: auto !important;
		margin-right: 0;
	}
	.teaser p { width: auto; margin-top: 0; }
	.entry-content-start { margin: 0; }
	.entry-content-start p img { margin: 15px 0 !important; }

	/* Bilder / Medien */
	#content img,
	.entry-content img {
		max-width: 100%;
		height: auto !important;
	}
	#content iframe, #content embed, #content video, #content object {
		max-width: 100%;
	}
	.entry-content p img { margin: 0 0 15px 0; }

	.alignleft, .alignright,
	#content img.alignleft, #content img.alignright {
		float: none;
		display: block;
		margin: 10px auto 15px auto !important;
	}
	div.wp-caption {
		margin: 0 0 20px 0;
		max-width: 100%;
		width: auto !important;
	}
	.wp-caption-text { text-align: left; }

	/* Inline-Breiten aus dem Editor begrenzen */
	#content div[style*="width"],
	#content p[style*="width"],
	#content span[style*="width"] {
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* Tabellen: horizontal scrollbar statt Überlauf */
	.table-scroll { margin-bottom: 20px; }
	#content td, #content th { padding-right: 8px; }

	/* Slider (Easing Slider / jQuery Tools) */
	.scrollable { max-width: 100%; }
	[class*="easingslider"], [class*="easing-slider"] { max-width: 100% !important; }

	/* Kontaktformular */
	#FSContact1,
	#FSContact1 div { width: auto; max-width: 100%; }
	#FSContact1 label {
		float: none;
		display: block;
		width: auto;
		padding: 8px 0 3px 0;
	}
	#FSContact1 input,
	#FSContact1 textarea {
		width: 100%;
		box-sizing: border-box;
	}
	#fsc-submit { margin: 20px 0 0 0 !important; }

	/* ---------- Roter Balken über dem Footer ---------- */
	.teaser h3 { font-size: 15px; line-height: 1.3; }

	/* ---------- Footer ---------- */
	#footer {
		width: auto;
		height: auto;
		margin: 0;
		padding-bottom: 15px;
		background: none;
		display: flex;
		flex-wrap: wrap;
	}
	.footer-box {
		float: none;
		width: 50%;
		box-sizing: border-box;
		border-right: 0;
		border-bottom: 1px solid #f3f3f3;
		padding-bottom: 12px;
	}
	.footer-box h4 {
		height: auto;
		min-height: 15px;
		margin-bottom: 12px;
		background: #8aa9c5;
	}
	.footer-box-last {
		float: none;
		width: 100%;
		box-sizing: border-box;
		padding: 60px 15px 10px 15px;
	}
	.ende {
		width: 100%;
		margin-left: 0;
		background-size: 100% 100%;
	}
}

/* ---------- Kleine Smartphones: Footer einspaltig ---------- */
@media (max-width: 480px) {
	.footer-box { width: 100%; }
	#wrapheader { padding-left: 10px; }
	#suche { transform-origin: top right; }
}

/* =====================================================================
   BREITE BILDSCHIRME (> 1400px): Seitenrahmen 1200px statt 980px
   - #content reicht bis zum rechten Rand von #wrap
   - #suche (Suchband) liegt per js/mobile.js in #content, rechts angeschlagen
   - Hintergrund-/Rand-Bilder (980px breit) werden auf 1200px gestreckt
   ===================================================================== */
@media (min-width: 1401px) {

	#wrap { width: 1200px; }

	/* Karte: Schatten-Bild auf 1200px gestreckt (statt 980px) */
	#wrapcontent {
		background-size: 1200px auto;
		background-position: -5px 0;
	}
	.begin, .ende {
		width: 1200px;
		background-size: 100% 100%;
	}

	/* Inhalt: 356px Navigation + 14px Abstand + 15px Innenabstand
	   -> Inhaltsbreite = 1200 - 370 - 15 = 815px (vorher 595px) */
	#content {
		position: relative;
		width: 815px;
	}

	/* Suchband in #content, rechts angeschlagen (Position wie im Original) */
	#content > #suche {
		position: absolute;
		float: none;
		top: 41px;
		right: 2px;
		left: auto;
		margin: 0;
	}

	/* Roter Balken über dem Footer: Kartenbreite 1180px */
	#wrapcontent > .teaser { max-width: 1180px; }

	/* Footer: die Spalten teilen sich die 1180px gleichmäßig – egal, ob 4 oder 5
	   Widget-Spalten aktiv sind (Anzahl/Reihenfolge kommen aus Design > Widgets:
	   "Footer Adresse", "Seitenfuß 1-4"). Rechts bleibt der dunkle Block. */
	#footer {
		width: 1180px;
		display: flex;
		flex-wrap: nowrap;
		background: none;
	}
	.footer-box {
		float: none;
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		background: url(img/foooter-bg.jpg) 0 0 / 100% 46px no-repeat;
	}
	.footer-box-last {
		float: none;
		flex: 0 0 215px;
		width: 215px;
	}

}