/* =====================================================================
   SCHUTZ FÜR DIE STEHENDE KOPFZEILE — 1.16.0
   =====================================================================

   Die Kopfzeile ist seit jeher position:sticky. Sticky wird aber im
   gesamten Teilbaum stillschweigend abgeschaltet, sobald ein Vorfahre
   overflow: hidden (oder overflow-x: hidden) trägt — eine Absicherung
   gegen waagerechtes Scrollen, die viele Themes auf html/body setzen.

   overflow-x: clip klemmt genauso ab, erzeugt aber KEINEN Scroll-Container
   und lässt sticky damit am Leben. !important, weil die Regel eine fremde
   Themeregel überschreiben soll; nur die x-Achse, damit die Sperre des
   mobilen Menüs (overflow: hidden per Inline-Stil beim Öffnen) auf der
   y-Achse unberührt bleibt.
   ===================================================================== */
html,
body {
	overflow-x: clip !important;
}

/* ===== HEADER ===== */
.mb-site-header {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 20px var(--edge);
	background: var(--wp--preset--color--weiss);
	border-bottom: 1px solid #e1e4e7;
	position: sticky; top: 0; z-index: 50;
}
/* aspect-ratio zusätzlich zu den width/height-Attributen: "width: auto"
   überschreibt das Breiten-Attribut, und Chrome wertet das Seitenverhältnis
   dann nicht mehr zuverlässig aus (Issues-Panel: "Lazy-loaded images should
   have explicit dimensions"). Mit aspect-ratio steht das Verhältnis auch im
   CSS und der Platz ist vor dem Laden reserviert. Werte = Maße der Datei. */
.mb-logo img { height: 52px; width: auto; aspect-ratio: 413 / 156; display: block; }
.mb-main-nav { display: flex; gap: 32px; font-size: 0.92rem; font-weight: 500; }
.mb-main-nav ul { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; }
.mb-main-nav a { text-decoration: none; opacity: 0.75; transition: opacity 0.15s; color: inherit; }
.mb-main-nav a:hover { opacity: 1; }

/* Untermenü (z. B. Servicewissen -> Methoden & Grundlagen / Serviceglossar) */
.mb-main-nav li.menu-item-has-children { position: relative; }
.mb-main-nav ul.sub-menu {
	display: none; position: absolute; top: 100%; left: 0; background: var(--wp--preset--color--weiss);
	border: 1px solid #e1e4e7; border-radius: 8px; padding: 8px 0; min-width: 264px;
	box-shadow: 0 12px 24px rgba(14, 27, 38, 0.1); z-index: 60;
}
/* Bewusst KEIN margin-top mehr: Ein Abstand zwischen Menüpunkt und
   Untermenü erzeugt eine Lücke, in der die Maus beide Hover-Bereiche
   verlässt — das Menü klappt dann zu, bevor man es erreicht (siehe
   Chat-Verlauf, mit echter Maussimulation reproduziert und bestätigt). */
/* Der Kindkombinator ">" ist hier entscheidend und fehlte bis 1.12.2.
   Ohne ihn ist das ein Nachfahren-Selektor: Beim Überfahren von "Für wen"
   wurde JEDES sub-menu im gesamten Teilbaum sichtbar — also auch die
   dritten Ebenen beider Unterpunkte gleichzeitig, die sich dann gegenseitig
   überlagerten. Mit ">" öffnet ein Menüpunkt nur noch seine unmittelbar
   eigene Ebene; die dritte Ebene hängt an ihrer eigenen Regel weiter unten
   und erscheint erst beim Überfahren ihres Elternpunkts. */
.mb-main-nav > ul > li.menu-item-has-children:hover > ul.sub-menu { display: flex; flex-direction: column; gap: 0; }
.mb-main-nav ul.sub-menu li { width: 100%; }
/* 1.14.0 — flex statt block: Der Pfeil der dritten Ebene lag als
   float:right im Textfluss. Bei einer kurzen Beschriftung fiel das nicht
   auf; „Interne Serviceabteilungen" füllt die Zeile aber aus, und der
   Float rutschte auf eine zweite Zeile unter den Text. Mit flex und
   space-between sitzt der Pfeil immer rechts und senkrecht mittig,
   unabhängig davon, wie lang und wie mehrzeilig die Beschriftung ist. */
.mb-main-nav ul.sub-menu a {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 20px; opacity: 1; color: var(--wp--preset--color--ink); font-size: 0.88rem;
}
.mb-main-nav ul.sub-menu a:hover { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--rot); }

/* ===== DRITTE MENÜEBENE (ab 1.12.1) =====
   Bis hierher gab es nur Regeln für EINE Untermenü-Ebene. Die dritte Ebene
   (Für wen -> Interner Service -> Interne IT) erbte dieselben Werte —
   `position:absolute; top:100%; left:0` — und legte sich damit exakt über
   ihr eigenes Elternmenü. Im Ergebnis standen alle Einträge scheinbar
   gleichrangig übereinander, obwohl die Hierarchie in WordPress korrekt
   angelegt war.

   Die dritte Ebene klappt jetzt seitlich aus, wie bei Dropdowns üblich.
   `top: -9px` gleicht das `padding: 8px 0` des Elternmenüs aus, damit der
   erste Eintrag auf einer Linie mit seinem Elternpunkt sitzt.

   Kein margin-left: Dieselbe Falle wie bei Ebene 2 — ein Abstand erzeugt
   eine Lücke, in der die Maus beide Hover-Bereiche verlässt. */
.mb-main-nav ul.sub-menu li.menu-item-has-children > a::after {
	content: "›";
	flex: 0 0 auto;
	color: var(--mb-grau-text, #707070);
	font-weight: 600;
}
.mb-main-nav ul.sub-menu ul.sub-menu {
	top: -9px;
	left: 100%;
}
.mb-main-nav ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu {
	display: flex;
	flex-direction: column;
	/* gap: 0 ist Pflicht, nicht Kosmetik. Zeile 16 setzt für JEDES ul in der
	   Hauptnavigation gap: 32px — gedacht für die waagerechten Hauptpunkte.
	   Sobald ein Untermenü auf display:flex geschaltet wird, greift dieser
	   Wert senkrecht und reißt 32px zwischen die Einträge (gemessen: Ebene 3
	   war 122px hoch statt 90px bei gleicher Eintragshöhe). Die Regel für
	   Ebene 2 eine Zeile höher hat das gap: 0 von Anfang an dabei. */
	gap: 0;
}
/* Nahe am rechten Bildschirmrand nach links ausklappen, damit das Flyout
   nicht aus dem Fenster läuft. Greift ab der vorletzten Spalte — bei sechs
   Hauptpunkten sitzt "Für wen" in der Mitte, "Über uns" und "Kontakt"
   könnten sonst anstoßen. */
.mb-main-nav > ul > li:nth-last-child(-n+2) ul.sub-menu ul.sub-menu {
	left: auto;
	right: 100%;
}
.mb-header-actions { display: flex; align-items: center; gap: 12px; padding-left: 20px; border-left: 1px solid #e1e4e7; margin-left: 6px; }
.mb-nav-cta {
	background: var(--wp--preset--color--blau); color: white !important; padding: 10px 20px; border-radius: 3px;
	font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: background 0.15s;
}
.mb-nav-cta:hover, .mb-nav-cta:focus, .mb-nav-cta:active {
	background: var(--wp--preset--color--rot) !important; color: white !important;
}
.mb-btn-secondary-nav {
	color: var(--wp--preset--color--blau-dunkel) !important; padding: 9px 18px; border-radius: 3px; font-weight: 700; font-size: 0.9rem;
	text-decoration: none; border: 1.5px solid var(--wp--preset--color--blau); background: rgba(0, 76, 153, 0.08);
	transition: background 0.15s, transform 0.15s, border-color 0.15s; white-space: nowrap;
}
.mb-btn-secondary-nav:hover, .mb-btn-secondary-nav:focus, .mb-btn-secondary-nav:active {
	background: rgba(0, 76, 153, 0.16) !important; color: var(--wp--preset--color--blau-dunkel) !important;
	border-color: var(--wp--preset--color--rot); transform: translateY(-1px);
}
/* Ausblenden ab hier: siehe Kopfzeilen-Stufen am Ende dieser Datei. */

/* ===== HAMBURGER / MOBILE NAV ===== */
.mb-hamburger-btn { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.mb-hamburger-btn span { width: 24px; height: 2px; background: var(--wp--preset--color--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.mb-mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(14, 27, 38, 0.4); z-index: 99; }
.mb-mobile-nav-overlay.is-open { display: block; }
.mb-mobile-nav-panel {
	position: fixed; top: 0; right: 0; height: 100%; width: 80%; max-width: 340px; background: white;
	z-index: 100; padding: 28px 26px;
	overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
	display: none;
}
.mb-mobile-nav-panel * { box-sizing: border-box; max-width: 100%; }
.mb-mobile-nav-panel.is-open { display: block; }
.mb-mobile-nav-panel .mb-close-btn { background: none; border: none; font-size: 1.5rem; color: var(--mb-grau-text, #707070); cursor: pointer; margin-bottom: 24px; }
.mb-mobile-nav-panel ul { list-style: none; margin: 0; padding: 0; }
.mb-mobile-nav-panel a {
	display: block; padding: 14px 4px; font-size: 1.05rem; font-weight: 600; color: var(--wp--preset--color--ink);
	text-decoration: none; border-bottom: 1px solid #e1e4e7;
	overflow-wrap: break-word; word-break: break-word; hyphens: auto;
}

/* Untermenüs im mobilen Panel — eigener Aufklapp-Pfeil statt Hover, da
   Touch-Geräte kein Hover kennen. Siehe zugehöriges JS in site-chrome.js. */
.mb-mobile-nav-panel li.menu-item-has-children { position: relative; }
.mb-mobile-nav-panel li.menu-item-has-children > a { padding-right: 44px; }
.mb-mnp-submenu-toggle {
	position: absolute; top: 2px; right: 0; width: 44px; height: 48px;
	background: none; border: none; cursor: pointer; color: var(--mb-grau-text, #707070);
	display: flex; align-items: center; justify-content: center;
	transition: transform 0.2s;
	-webkit-tap-highlight-color: transparent;
	outline: none; box-shadow: none;
}
.mb-mnp-submenu-toggle:focus, .mb-mnp-submenu-toggle:active, .mb-mnp-submenu-toggle:focus-visible {
	outline: none; box-shadow: none;
}
.mb-mnp-submenu-toggle svg { width: 26px !important; height: 26px !important; }
.mb-submenu-open > .mb-mnp-submenu-toggle { transform: rotate(180deg); color: var(--wp--preset--color--blau); }
.mb-mobile-nav-panel ul.sub-menu {
	display: none; padding-left: 18px; border-left: 2px solid var(--wp--preset--color--blau-hell, #EEF4FA);
	margin: 0 0 4px 4px;
}
.mb-submenu-open > ul.sub-menu { display: block; }
.mb-mobile-nav-panel ul.sub-menu a {
	font-size: 0.92rem; font-weight: 500; padding: 12px 4px; color: var(--wp--preset--color--grau-dunkel, #595959);
}
/* Dritte Ebene mobil (ab 1.12.1): Die Einrückung stapelt sich durch die
   Verschachtelung von selbst, die Randlinie wird nur heller, damit die
   Ebenen unterscheidbar bleiben. Der Aufklapp-Pfeil wird vom Skript für
   jedes Element mit Kindern angelegt, also auch hier — ohne Zusatzarbeit. */
.mb-mobile-nav-panel ul.sub-menu ul.sub-menu {
	border-left-color: #e1e4e7;
}
.mb-mobile-nav-panel ul.sub-menu ul.sub-menu a {
	font-size: 0.88rem;
	padding: 10px 4px;
}
.mb-mobile-nav-panel .mb-mnp-cta {
	margin-top: 22px; background: var(--wp--preset--color--rot); color: white; text-align: center; border-radius: 6px;
	padding: 14px; border-bottom: none; font-weight: 600;
	width: 100%;
}
.mb-mobile-nav-panel .mb-mnp-secondary {
	margin-top: 10px; border: 1.5px solid var(--wp--preset--color--blau); background: rgba(0, 76, 153, 0.06);
	width: 100%;
	color: var(--wp--preset--color--blau-dunkel); text-align: center; border-radius: 6px;
	padding: 12.5px; border-bottom-width: 1.5px; font-weight: 600;
}
@media (max-width: 1024px) {
	.mb-main-nav { display: none; }
	.mb-hamburger-btn { display: flex; }
	.mb-header-actions { display: none; }

	/* 1.16.0 — kompakte Kopfzeile auf dem Telefon.
	   Vorher: 20px Innenabstand + 52px Logo = 93px Höhe, also fast ein
	   Achtel eines Telefonbildschirms, dauerhaft belegt. Ruhend 72px,
	   beim Scrollen 56px. */
	.mb-site-header { padding-top: 12px; padding-bottom: 12px; }
	.mb-logo img { height: 44px; }

	.mb-site-header.is-scrolled {
		padding-top: 8px; padding-bottom: 8px;
		box-shadow: 0 6px 18px rgba(14, 27, 38, 0.10);
	}
	.mb-site-header.is-scrolled .mb-logo img { height: 34px; }
}

/* Der Übergang gehört außerhalb der Media Query: Sonst springt die
   Kopfzeile beim Drehen des Geräts. */
.mb-site-header { transition: padding 0.18s ease, box-shadow 0.18s ease; }
.mb-logo img { transition: height 0.18s ease; }

@media (prefers-reduced-motion: reduce) {
	.mb-site-header,
	.mb-logo img { transition: none; }
}

/* ===== FOOTER ===== */
.mb-site-footer { background: var(--wp--preset--color--blau-dunkel); color: rgba(255, 255, 255, 0.85); padding: 0; text-align: left; font-size: 0.9rem; }
.mb-footer-main {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
	padding: 56px var(--edge) 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 900px) { .mb-footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mb-footer-main { grid-template-columns: 1fr; } }
.mb-footer-col h4 {
	font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; text-transform: uppercase;
	letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55) !important; margin-bottom: 16px; font-weight: 500;
}
.mb-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mb-footer-col a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 0.9rem; }
.mb-footer-col a:hover { color: white; text-decoration: underline; }
.mb-footer-brand p { font-size: 0.88rem; color: rgba(255, 255, 255, 0.65); max-width: 32ch; margin: 14px 0 20px; }
.mb-footer-logo { display: block; text-decoration: none; }
.mb-footer-logo img { height: 34px; width: auto; aspect-ratio: 333 / 102; display: block; }
.mb-social-icons { display: flex; gap: 12px; }
.mb-social-icons a {
	width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.1);
	display: flex; align-items: center; justify-content: center; transition: background 0.15s;
	text-decoration: none;
}
.mb-social-icons a:hover { background: var(--wp--preset--color--rot); }
.mb-social-icons svg { width: 16px; height: 16px; fill: white; }
.mb-footer-bottom {
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
	padding: 20px var(--edge); font-size: 0.8rem; color: rgba(255, 255, 255, 0.5);
}
.mb-footer-bottom a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.mb-footer-bottom a:hover { color: white; }
.mb-footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }


/* =====================================================================
   KOPFZEILE: DREI STUFEN — 14.09.2026
   =====================================================================

   GEMESSENER BEFUND (Playwright, lokale Nachbildung mit dem echten CSS):

     Breite   Kopfhöhe   Navigation   CTA-Knopf   scrollWidth
      912px     128px      2 Zeilen    3 Zeilen     970  ← 58px Überlauf
     1024px     128px      2 Zeilen    3 Zeilen    1024
     1180px     106px      2 Zeilen    2 Zeilen    1180
     1280px      93px      1 Zeile     1 Zeile     1280  ← erst hier sauber

   Die Kopfzeile brauchte also rund 1280px, schaltete aber erst bei 900px
   auf das mobile Menü um. Dazwischen lag ein Band von fast 380px, in dem
   Logo, sechs Menüpunkte und zwei Knöpfe nebeneinander gequetscht wurden —
   auf einem Surface Pro (912px) mit 58px Überlauf über den rechten Rand.

   Das Logo selbst war korrekt (138 × 52px bei jeder Breite). Klein wirkte
   es nur neben der umgebrochenen Navigation daneben.

   DREI STUFEN STATT ZWEI:

     bis 1024px    mobiles Menü (Hamburger)
     1025–1099px   Navigation kompakt, ServiceCampus ausgeblendet
     1100–1279px   Navigation kompakt, ServiceCampus sichtbar
     ab 1280px     volle Kopfzeile

   Die mittlere Stufe erhält die Navigation auf Notebooks, statt sie dort
   hinter einem Hamburger zu verstecken. ===================================== */

/* Sicherheitsnetz gegen Zeilenumbrüche in der Kopfzeile — ein Knopf, der
   dreizeilig wird, sieht defekt aus, egal wie schmal es wird. */
.mb-main-nav a,
.mb-nav-cta,
.mb-btn-secondary-nav { white-space: nowrap; }

/* Stufe „volle Kopfzeile" ab 1280px: ServiceCampus sichtbar (Standard). */

/* 1.29.3 — ServiceCampus verschwindet erst unter 1100px, nicht mehr unter 1280px.
   -------------------------------------------------------------------------
   Gemeldet am 02.10.2026: Beim Arbeiten mit halbem Bildschirm (rund 1150px)
   war der Knopf weg. Nachgemessen mit dem echten Kopfzeilen-Markup:

     Breite   Kopfzeile braucht   mit ServiceCampus
     1100px   1018px              passt, 82px Luft
     1279px   1018px              passt, 261px Luft

   Die kompakte Stufe verkleinert Navischrift und Abstände ohnehin schon so
   weit, dass BEIDE Knöpfe ab etwa 1030px hineinpassen. Die Grenze bei 1280px
   stammt aus der Zeit vor dieser Verkleinerung und war seitdem zu streng.

   1100px statt 1030px als neue Grenze: Das lässt rund 80px Reserve für
   längere Menübeschriftungen. Bei 1030px wären es sieben.

   WARUM DAS MEHR IST ALS KOSMETIK: „Service Audit anfragen" blieb stehen,
   „ServiceCampus" verschwand. Auf einem halben Bildschirm — einer sehr
   üblichen Arbeitsweise — war damit der Beratungszweig sichtbar und der
   Trainingszweig nicht. Die Projektregel verlangt beide gleichrangig. */

/* Stufe „kompakt ohne ServiceCampus": 1025 bis 1099px */
@media (min-width: 1025px) and (max-width: 1099px) {
	.mb-btn-secondary-nav { display: none; }
}

/* Stufe „kompakt": 1025 bis 1279px */
@media (min-width: 1025px) and (max-width: 1279px) {
	.mb-main-nav,
	.mb-main-nav ul { gap: 18px; }
	.mb-main-nav { font-size: 0.85rem; }
	.mb-nav-cta { padding: 9px 15px; font-size: 0.85rem; }
	.mb-header-actions { padding-left: 14px; margin-left: 0; }
	.mb-site-header { gap: 12px; }
}