/*
Theme Name: SABTEC
Theme URI: https://sabtec.info
Description: FSE-Block-Theme fuer sabtec.info — SABTEC GmbH, modulare Raumsysteme
Author: myKaiserstuhl GmbH
Version: 1.6.2
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sabtec
*/

/* ================================================================
   Basis-Styles. Design-Tokens kommen aus theme.json (--wp--preset--*).
   Nur was der Block-Editor nicht abbildet, gehört hierher:
   Full-Width-Layout, Fokus-States (BFSG), kleine Sektions-Helfer.
   HINWEIS: Nach dem Anlegen/Ändern von Patterns die "Version:" oben
   UND SABTEC_THEME_VERSION in functions.php hochzählen,
   sonst cacht WordPress die alte Pattern-Liste.
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Sichtbarer Fokus für Tastaturnutzer (WCAG 2.4.7 / 2.4.11, BFSG)

   19.08.2026 — zwei Fehler auf einmal behoben:

   1. Der Ring war einfarbig blau und verschwand auf jeder blauen Fläche
      vollständig. Nachgewiesen über einen Pixelvergleich mit und ohne
      Tastaturfokus: identische Aufnahme, Kontrast 1,0 : 1. Betroffen waren
      alle CTA-Bänder, die blauen Seitenköpfe, die Anfrage-Pille im Kopf,
      die Hero-Knöpfe und die Katalog-Knöpfe.
      Jetzt zweifarbig: weißer Ring direkt am Element, blauer Saum außen.
      Auf Weiß trägt der blaue Saum, auf Blau der weiße Ring — beide Fälle
      erfüllen die geforderten 3 : 1 gegen die angrenzende Fläche.

   2. `:where()` hat Spezifität NULL. Jede Regel eines Plugins oder des
      Navigationsblocks schlug diese hier, ohne dass es auffiel — der
      Hamburger, alle Mega-Menü-Verweise, sämtliche Formular-Chips und die
      Datenschutz-Einwilligung hatten dadurch gar keinen Fokusring
      (gemessen: `outline-style: none`). Die Nachträge dazu stehen am Ende
      von `assets/css/system.css`. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--wp--preset--color--primary);
	border-radius: 3px;
}

/* Skip-Link (in header.html eingebunden) */
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white);
	padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Full-Width-Modell: randlose Sektionen, Inhalt zentriert über die
   Layout-Größen aus theme.json. .alignfull dehnt sich über den Viewport,
   der innere .wp-block-group hält contentSize. */
.wp-site-blocks { overflow-x: clip; }

/* ----------------------------------------------------------------
   Formensystem (Figma-Kommentare #12/#13, Manifest-Hinweise):
   Flaechen eckig, Interaktives als Pill, Overlays weich.
   Radien nur ueber diese Tokens setzen, nie frei waehlen.
   ---------------------------------------------------------------- */
.wp-block-image img,
figure.wp-block-image,
.wp-block-cover,
.wp-block-group.is-flaeche { border-radius: var(--wp--custom--radius--flaeche); }

.is-control { border-radius: var(--wp--custom--radius--control); }
.is-pill    { border-radius: var(--wp--custom--radius--pill); }
.is-overlay { border-radius: var(--wp--custom--radius--overlay); }

/* ================================================================
   HEADER — Topline + Sticky-Nav (Frame index.png, Spec Sektion 1,
   Figma-Kommentare #7 sticky, #8 Anrufen-Feld, #9 Dropdowns).
   Das Menue ist ein Core-Navigation-Block, damit es im Site-Editor
   pflegbar bleibt; die Klassen unten ziehen ihn aufs Design.
   ================================================================ */
.sabtec-topline {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12.5px;
	color: var(--wp--preset--color--soft);
	padding: 10px var(--wp--custom--gutter);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--white);
}
.sabtec-topline__r { display: flex; gap: 18px; }
.sabtec-topline a {
	display: flex; gap: 6px; align-items: center;
	color: var(--wp--preset--color--muted); font-weight: 700;
}
.sabtec-topline svg { width: 15px; height: 15px; }

.sabtec-nav {
	position: sticky; top: 0; z-index: 80;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding: 0;
}

/* 19.08.2026 — das Mobilmenue war unbedienbar.
   `backdrop-filter` erzeugt fuer positionierte Nachfahren einen neuen
   Bezugsrahmen. Das Menue-Overlay ist `position: fixed; top: 0; bottom: 0`
   und loeste damit nicht gegen den Viewport auf, sondern gegen die 81 px
   hohe Navigationsleiste: gemessen bei 390 x 844 px eine Overlay-Hoehe von
   **80 px** bei 676 px Inhalt. Sichtbar waren das Schliessen-Kreuz und ein
   angeschnittenes „Mieten" — mehr nicht, auf allen 21 Ansichten unter
   1120 px.
   Der Weichzeichner ist bei aufgeklapptem Menue ohnehin wirkungslos, weil
   das Overlay deckend darueberliegt. Unter 1120 px entfaellt er deshalb;
   der Frame ist nur fuer 1440 px definiert und bleibt unberuehrt. */
@media (max-width: 1120px) {
	.sabtec-nav {
		backdrop-filter: none;
		background: var(--wp--preset--color--white);
	}
}
.sabtec-nav__in {
	display: flex; align-items: center; justify-content: space-between;
	gap: 18px; height: 80px;
	padding: 0 var(--wp--custom--gutter);
}
.sabtec-logo img { height: 31px; width: auto; display: block; }
.sabtec-nav__right { display: flex; gap: 10px; align-items: center; }

.sabtec-navcall,
.sabtec-navcta {
	display: inline-flex; align-items: center; gap: 8px;
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 900; font-size: 14px; white-space: nowrap;
	padding: 11px 20px;
}
.sabtec-navcall {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1.5px var(--wp--custom--ui--line-strong);
}
.sabtec-navcall:hover,
.sabtec-navsearch:hover { background: var(--wp--custom--ui--hover-soft); }

/* Suchlupe (Jour fixe 31.07., Kommentar #76). Steht links der Anrufen-Pill.
   42px Kantenlaenge — ueber der 24px-Mindestgroesse fuer Bedienelemente. */
.sabtec-navsearch {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1.5px var(--wp--custom--ui--line-strong);
}
.sabtec-navsearch svg { width: 18px; height: 18px; color: var(--wp--preset--color--primary); }
.sabtec-navcall svg { width: 16px; height: 16px; }
.sabtec-navcta {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding: 11px 22px;
}

/* Core-Navigation-Block auf das Design ziehen.
   HINWEIS Spezifitaet: Core setzt die Linkfarbe ueber
   .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   (Klasse bewusst doppelt, 0-3-0). Farbregeln brauchen hier deshalb einen
   Vorfahren mehr — kein !important. */
.sabtec-nav__menu .wp-block-navigation__container { gap: 30px; }
.sabtec-nav__menu .wp-block-navigation-item__content {
	font-size: 15px; font-weight: 700;
	display: flex; align-items: center; gap: 5px;
}
.sabtec-nav .sabtec-nav__menu .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--custom--ui--ink-nav);
}
.sabtec-nav .sabtec-nav__menu .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.sabtec-nav .sabtec-nav__menu .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}
.sabtec-nav__menu .wp-block-navigation-item {
	height: 80px; display: flex; align-items: center;
}
.sabtec-nav__menu .wp-block-navigation__submenu-icon { width: 13px; height: 13px; color: var(--wp--custom--ui--icon-soft); }

.sabtec-nav__menu .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--overlay);
	box-shadow: 0 18px 50px rgba(22, 24, 45, 0.12);
	padding: 12px; min-width: 230px;
}
.sabtec-nav__menu .wp-block-navigation__submenu-container .wp-block-navigation-item {
	height: auto; display: block;
}
.sabtec-nav__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block; padding: 10px 14px; border-radius: 24px;
	font-weight: 700; font-size: 14.5px;
}
.sabtec-nav .sabtec-nav__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--custom--ui--ink-2);
}
.sabtec-nav .sabtec-nav__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.sabtec-nav .sabtec-nav__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}

/* ----------------------------------------------------------------
   MEGA-MENUE (Entscheid Jakob 28.07.2026, Vorbild V4/V5-Entwuerfe).
   Panel liegt im Original-<ul> von Core, deshalb greifen Core-JS,
   aria-expanded und Tastaturbedienung unveraendert.
   Formensystem: Panel ist ein Overlay (20px), die Promo-Flaeche ist
   eine Bildflaeche und damit eckig (Kommentar #12).
   ---------------------------------------------------------------- */
.sabtec-nav__in { position: relative; }

/* Bezugsrahmen fuer das Panel ist .sabtec-nav__in, nicht das Menue-<ul>.
   Core setzt sowohl den Navigation-Wrapper als auch den Container auf
   position:relative — beide muessen static werden, sonst ist das Panel nur
   so breit wie die Menueleiste (gemessen 667px statt 1284px).
   Die einfachen Dropdowns bleiben davon unberuehrt, die haengen an ihrem <li>. */
.sabtec-nav__menu,
.sabtec-nav__menu .wp-block-navigation__container,
.sabtec-nav__menu .wp-block-navigation__responsive-container:not(.is-menu-open),
.sabtec-nav__menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog {
	position: static;
}

/* Traeger-<li> auf static, damit das Panel ueber die Nav-Breite laeuft */
.sabtec-nav__menu .wp-block-navigation-item:has(> .sabtec-mega__container) { position: static; }

.sabtec-nav__menu .wp-block-navigation__submenu-container.sabtec-mega__container {
	/* Buendig zum Seiteninhalt, nicht bis an den Viewport-Rand:
	   absolute Kinder beziehen sich auf die Padding-Box, deshalb den
	   Seitenrand hier explizit setzen. */
	left: var(--wp--custom--gutter); right: var(--wp--custom--gutter);
	width: auto; min-width: 0;
	/* Der Versatz von 8px gehoert als padding INS Element, nicht als margin
	   davor. Als margin entstuende zwischen Navigationsleiste und Panel eine
	   echte Luecke: Die Maus verlaesst auf dem Weg nach unten das <li>, der
	   Hover bricht ab und das Panel schliesst wieder. Mit padding bleibt die
	   Hoverflaeche durchgehend, der sichtbare Abstand bleibt gleich. */
	top: 100%; margin-top: 0;
	padding: 8px 0 0; border: 0; background: none; box-shadow: none;
	/* Nachlauf beim Schliessen: Verlaesst die Maus den Menuepunkt kurz — etwa
	   auf einem schraegen Weg ins Panel oder ueber eine Kante —, bleibt das
	   Panel 250ms offen und faengt die Bewegung wieder ein. Ohne diesen
	   Nachlauf schnappt es sofort zu und man landet auf der Seite dahinter. */
	transition: opacity 0.12s ease 0.25s, visibility 0s linear 0.37s;
}
.sabtec-mega__item { display: block; width: 100%; list-style: none; }

/* Offen-Zustand explizit gesetzt. Core deckt das bereits ab; wir pinnen die
   drei Wege trotzdem selbst, damit ein Core-Update die Sichtbarkeit des
   Panels nicht still veraendert: Maus (hover), Tastatur (focus-within) und
   Klick auf den Toggle (aria-expanded). Ohne den Tastaturweg waere das
   Menue fuer Tastaturnutzer nicht erreichbar (BFSG). */
.sabtec-nav__menu .wp-block-navigation-item.has-child:hover > .sabtec-mega__container,
.sabtec-nav__menu .wp-block-navigation-item.has-child:focus-within > .sabtec-mega__container,
.sabtec-nav__menu .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .sabtec-mega__container {
	opacity: 1;
	visibility: visible;
	height: auto;
	width: auto;
	overflow: visible;
	/* Oeffnen ohne Verzoegerung — der Nachlauf gilt nur fuers Schliessen. */
	transition: opacity 0.12s ease 0s, visibility 0s linear 0s;
}

.sabtec-mega {
	display: grid;
	grid-template-columns: 1.1fr 1.1fr 1.1fr 1.3fr;
	gap: 26px;
	padding: 30px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--overlay);
	box-shadow: 0 18px 50px rgba(22, 24, 45, 0.14);
}
.sabtec-mega__titel {
	font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--wp--preset--color--soft); font-weight: 900;
	margin: 0 0 14px; line-height: 1.4;
}
.sabtec-nav .sabtec-nav__menu .sabtec-mega__link {
	display: flex; align-items: center; gap: 11px;
	padding: 9px 0; font-weight: 700; font-size: 14.5px;
	color: var(--wp--custom--ui--ink-2); background: none; border-radius: 0;
}
.sabtec-nav .sabtec-nav__menu .sabtec-mega__link:hover,
.sabtec-nav .sabtec-nav__menu .sabtec-mega__link:focus-visible {
	color: var(--wp--preset--color--primary); background: none;
}
.sabtec-mega__link svg {
	width: 22px; height: 22px; flex: none;
	color: var(--wp--preset--color--primary);
}

/* Promo: bis zum Shooting eine Farbflaeche statt eines Platzhalterfotos */
.sabtec-nav .sabtec-nav__menu .sabtec-mega__promo {
	display: flex; flex-direction: column; justify-content: flex-end;
	gap: 6px; min-height: 160px; padding: 22px;
	background: var(--wp--preset--color--primary-deep);
	border-radius: var(--wp--custom--radius--flaeche);
	color: var(--wp--preset--color--white);
}
.sabtec-mega__promo-eyebrow {
	font-size: 11px; font-weight: 900; letter-spacing: 2px;
	text-transform: uppercase; color: var(--wp--preset--color--accent);
}
.sabtec-mega__promo-titel {
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px; font-weight: 900; letter-spacing: -0.5px; line-height: 1.15;
}
.sabtec-mega__promo-text { font-size: 13.5px; line-height: 1.5; opacity: 0.82; }
.sabtec-mega__promo-cta {
	margin-top: 6px; font-size: 13px; font-weight: 900;
	text-decoration: underline; text-underline-offset: 3px;
}

/* ================================================================
   FOOTER — vier Spalten + Fussleiste (Frame index.png, Spec Sektion 14)
   ================================================================ */
.sabtec-foot {
	border-top: 1px solid var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--white);
	padding: 72px var(--wp--custom--gutter) 40px;
	margin: 0;
}
.sabtec-foot__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	max-width: 1280px;
	margin: 0 auto;
}
.sabtec-foot__marke img { height: 30px; width: auto; }
.sabtec-foot__marke p {
	color: var(--wp--preset--color--muted);
	margin-top: 16px;
	max-width: 280px;
	font-size: 14.5px;
}
.sabtec-foot__titel {
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 12px;
	font-weight: 900;
	line-height: 1.4;
	margin: 0 0 14px;
}
.sabtec-foot__spalte a {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: 14.5px;
	margin-bottom: 9px;
}
.sabtec-foot__spalte a:hover { color: var(--wp--preset--color--primary); }

.sabtec-foot__leiste {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 1280px;
	margin: 44px auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--hairline);
	font-size: 13px;
	color: var(--wp--preset--color--soft);
}
/* Trenner eng am Text wie im Frame: „Impressum · Datenschutz · AGB · …" */
.sabtec-foot__recht { display: flex; gap: 5px; flex-wrap: wrap; }
.sabtec-foot__recht a:hover { color: var(--wp--preset--color--primary); }

/* Sektionsraster und Eyebrow stehen im Designsystem
   (assets/css/system.css) — dort ist die einzige Quelle. */

/* Seitenrand: 48px Desktop, 22px Mobil (Prototyp .wrap) */
@media (max-width: 1120px) {
	.sabtec-foot__grid { grid-template-columns: 1fr 1fr; }
}
/* Unter 600px eine Spalte (29.08.2026).
   Die Fusszeile blieb bis dahin bis hinunter zu 320px zweispaltig. Gemessen
   bei 390px: je Spalte rund 155px. Darin steht „container@sabtec.info" (143px)
   knapp in einer Zeile, „Leistungen & Expertise" bricht um, und die Anschrift
   „Falkensteinerstrasze 2, 79189 Bad Krozingen" braucht drei Zeilen fuer zwei
   Angaben. Eine Verweisliste mit 155px Satzbreite liest sich nicht, und die
   Verweise stehen mit 33px Abstand bei 22px Zeilenhoehe so dicht, dass der
   Daumen den Nachbarn trifft.
   Vier von acht Pruefern haben das in der Handyansicht unabhaengig gemeldet.
   Einspaltig wird die Fusszeile hoeher — das ist auf dem Handy normal und
   allemal besser als vier gequetschte Spalten. */
@media (max-width: 600px) {
	.sabtec-foot__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.sabtec-foot__marke p { max-width: none; }
}
@media (max-width: 700px) {
	body { --wp--custom--gutter: 22px; }
	/* Prototyp: Topline und Anrufen-Pill entfallen mobil, Menue wird Overlay */
	.sabtec-topline { display: none; }
	.sabtec-navcall { display: none; }
	.sabtec-nav__in { padding: 0 20px; }
	/* Im Mobil-Overlay wird aus dem Panel eine einfache Liste */
	.sabtec-mega {
		grid-template-columns: 1fr; gap: 18px; padding: 0;
		border: 0; box-shadow: none; background: none;
	}
	.sabtec-mega__promo { min-height: 0; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ================================================================
   NACHTRAG 15.08.2026 — Befunde aus der Abnahme am laufenden System
   (tools/pruefe-live.js). Beide Fehler stecken schon im Prototyp.
   ================================================================ */

/* Kopfzeile ab Tablet ins Overlay.
   Gemessen bei 768px: das Menue bleibt als Liste stehen, und die Aktionen
   rechts (Lupe, Anrufen, Anfrage) ragen bis 1026px — also 258px aus dem
   Bild. Der Prototyp blendet die Liste erst unter 700px aus und hat denselben
   Fehler. WordPress schaltet den Hamburger von sich aus bei 600px; wir ziehen
   die Grenze auf 1120px hoch, weil das Menue sieben Punkte plus Mega-Panel
   traegt und darunter schlicht nicht mehr passt. */
@media (max-width: 1120px) {
	.sabtec-nav__menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.sabtec-nav__menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	/* ── Das Overlay ist eine Ziehharmonika, kein Mega-Panel ─────────────
	   Neu gebaut am 29.08.2026, nachdem Jakob gefragt hat, ob das
	   Mobilmenue so sauber ist wie das am Schreibtisch. Es war es nicht:

	   Die Regel hier machte ALLE VIER Panels gleichzeitig sichtbar
	   (`opacity: 1; visibility: visible`) — und weil `<li>` weiter oben
	   auf `height: 80px` steht (richtig fuer die 80 px hohe Leiste am
	   Schreibtisch), passten die 725, 641 und 767 px hohen Panels nicht
	   hinein. Sie liefen ueber ihr `<li>` hinaus und lagen uebereinander
	   und ueber den Menuepunkten. Gemessen bei 430 px:

	     Mieten           li  72..152   Panel  97..822
	     Kaufen           li 180..260   Panel 205..846
	     Einsatzbereiche  li 288..368   Panel 313..1080

	   Auf dem Bild war der Punkt „Kaufen" von der Spalte
	   „CONTAINERTYPEN" ueberdruckt. Wer das Menue auf dem Telefon oeffnete,
	   sah drei ineinandergeschobene Listen. Es ist niemandem aufgefallen,
	   weil alle Aufnahmen das Menue GESCHLOSSEN zeigen — die Pruefung
	   klickt es nie auf.

	   Jetzt: `<li>` waechst mit, die Panels sind zu, und ein Tipp auf den
	   Menuepunkt oeffnet genau einen. `assets/js/global.js` schaltet
	   `aria-expanded` und die Klasse `sabtec-mega--auf`; die Knoepfe von
	   Core reagieren im Overlay nicht von selbst (nachgemessen: ein Klick
	   aendert `aria-expanded` nicht). */
	.sabtec-nav__menu .is-menu-open .wp-block-navigation-item {
		height: auto;
		display: block;
	}
	/* Die Zeile als Trefferflaeche.
	   Der Verweis war gemessen 31 px hoch — die Zeilenhoehe der Schrift, sonst
	   nichts. Auf dem Telefon ist das die Haelfte dessen, was ein Daumen
	   sicher trifft. Die Klasse steht doppelt, weil Core seine eigene Regel
	   genauso schreibt (`.wp-block-navigation-item__content.wp-block-navigation-item__content`)
	   und eine einfache sonst verliert — dieselbe Stelle hat schon beim
	   Farbwechsel der Menuepunkte Aerger gemacht, siehe Hinweis weiter oben. */
	.sabtec-nav .sabtec-nav__menu .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		min-height: 52px;
		font-size: 19px;
	}
	/* Das <ul> traegt am Schreibtisch 28 px Abstand zwischen den Punkten —
	   im Overlay stehen sie damit so weit auseinander, dass sechs Punkte den
	   halben Bildschirm brauchen und nicht mehr als Liste zusammengehen.
	   Stattdessen eine Haarlinie zwischen den Zeilen: kuerzer, und man sieht,
	   wo ein Punkt aufhoert und der naechste anfaengt. */
	/* DIE LISTE AUF VOLLE BREITE — und zwar an der Wurzel.
	   Core stellt das Overlay als Flexspalte mit `align-items: flex-start`.
	   Nicht nur die <li> schrumpfen dadurch auf ihre Beschriftung, sondern
	   schon das <ul> selbst: gemessen 191 px in einem 390-px-Fenster. Ein
	   `width: 100%` am <li> half deshalb nichts — es waren 100 % von 191 px.
	   Der Pfeil sasz dadurch mitten im Bildschirm statt am Rand, und die
	   Trennlinien waren unterschiedlich lang.
	   Die Breite muss also am Behaelter gesetzt werden, nicht am Punkt. */
	.sabtec-nav__menu .is-menu-open .wp-block-navigation__responsive-container-content,
	.sabtec-nav__menu .is-menu-open .wp-block-navigation__container {
		width: 100%;
		align-items: stretch;
	}
	.sabtec-nav__menu .is-menu-open .wp-block-navigation__container {
		gap: 0;
	}
	.sabtec-nav__menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		width: 100%;
	}
	.sabtec-nav__menu .is-menu-open > .wp-block-navigation__responsive-dialog .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item,
	.sabtec-nav__menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item {
		border-top: 1px solid var(--wp--preset--color--hairline);
	}

	/* Das Panel liegt im Fluss, nicht darueber — und ist zu, bis jemand
	   den Punkt antippt. `display: none` statt `opacity: 0`, damit die
	   Verweise darin nicht per Tabulator erreichbar sind, solange sie
	   niemand sieht. */
	.sabtec-nav__menu .is-menu-open .sabtec-mega__container {
		position: static;
		opacity: 1;
		visibility: visible;
		padding: 0;
		display: none;
		width: auto;
		height: auto;
		overflow: visible;
		transition: none;
	}
	.sabtec-nav__menu .is-menu-open .wp-block-navigation-item.sabtec-mega--auf > .sabtec-mega__container {
		display: block;
	}

	/* Auch die GEWOEHNLICHEN Untermenues gehoeren in die Ziehharmonika.
	   „Unternehmen" traegt kein Mega-Panel, sondern eine schlichte Liste —
	   und die stand nach dem ersten Umbau immer noch offen als schwebende
	   Karte ueber den Punkten darunter (gemessen: `display: flex`, waehrend
	   die drei Mega-Panels bereits zu waren). Im Overlay soll sie sich genau
	   so verhalten wie die anderen: zu, bis jemand sie antippt, und dann im
	   Fluss statt als Karte. */
	.sabtec-nav__menu .is-menu-open .wp-block-navigation__submenu-container:not(.sabtec-mega__container) {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		width: auto;
		min-width: 0;
		margin-left: 2px;
		padding: 4px 0 14px 14px;
		border: 0;
		border-left: 2px solid var(--wp--preset--color--hairline);
		border-radius: 0;
		box-shadow: none;
		background: none;
	}
	.sabtec-nav__menu .is-menu-open .wp-block-navigation-item.sabtec-mega--auf > .wp-block-navigation__submenu-container:not(.sabtec-mega__container) {
		display: block;
	}

	/* DEN CHEVRON ZURUECKHOLEN.
	   Core blendet ihn im Overlay aus (`display: none`, gemessen 0 px breit),
	   weil dort normalerweise alle Untermenues offen stehen und ein Pfeil
	   nichts anzeigen wuerde. Bei einer Ziehharmonika ist er dagegen das
	   einzige Zeichen, dass sich hinter dem Punkt noch etwas verbirgt — ohne
	   ihn sieht das Menue aus wie eine Liste aus sechs Verweisen, und die
	   Haelfte des Menues findet niemand.
	   Er sitzt in einer 44-px-Flaeche am rechten Rand: der Menuepunkt bleibt
	   ein Verweis auf seine Seite, der Pfeil daneben klappt auf. */
	.sabtec-nav__menu .is-menu-open .wp-block-navigation__submenu-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--wp--preset--color--primary);
		transition: transform 0.18s ease;
	}
	.sabtec-nav__menu .is-menu-open .wp-block-navigation__submenu-icon svg {
		width: 15px;
		height: 15px;
	}
	/* DER PUNKT UND SEIN PFEIL TEILEN SICH DIE ZEILE.
	   Der Umschalter ist bei Core ein GESCHWISTER des Verweises, kein Rahmen
	   darum: <li> enthaelt <a>, <button> und <ul> nebeneinander. Mit
	   `display: block` am <li> standen Beschriftung und Pfeil deshalb
	   untereinander, und der Knopf lief ueber die ganze Breite — beim
	   Tastaturfokus ein Rahmen quer durchs Menue.
	   Also: das <li> als umbrechender Flexcontainer. Beschriftung und Pfeil
	   bilden die erste Zeile, das Untermenue bekommt mit `flex: 1 0 100%`
	   eine eigene. */
	/* DER PFEIL LIEGT ABSOLUT AM RECHTEN RAND — und zwar bewusst.
	   Zwei Anlaeufe ueber Flexbox sind gescheitert: Core stellt das <li> als
	   umbrechenden Flexcontainer, der Verweis und der Umschalter sind
	   Geschwister darin, und die Breiten kommen aus mehreren Core-Regeln, die
	   sich mit jedem WordPress-Update aendern koennen. Gemessen blieb der
	   Pfeil in jeder Variante eine Zeile unter der Beschriftung.
	   Absolut positioniert haengt die Zeile nur noch an zwei eigenen Werten
	   und ist damit unabhaengig davon, wie Core den Fluss gerade auslegt.
	   Der Verweis bekommt rechts Platz, damit eine lange Beschriftung nicht
	   unter dem Pfeil verschwindet. */
	.sabtec-nav__menu .is-menu-open .wp-block-navigation-item.has-child {
		position: relative;
		display: block;
	}
	.sabtec-nav__menu .is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		width: auto;
		max-width: none;
		padding-right: 56px;
	}
	.sabtec-nav__menu .is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
		position: absolute;
		/* Mittig zur ersten Zeile, unabhaengig davon, wie hoch das <li> wird,
		   sobald sein Abschnitt aufklappt. `top: 26px` ist die halbe
		   Zeilenhoehe (52 px), die Verschiebung nimmt die halbe Knopfhoehe
		   wieder weg. */
		top: 26px;
		transform: translateY(-50%);
		right: 0;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		border-radius: 999px;
		cursor: pointer;
	}
	/* Im Knopf braucht der Pfeil keine eigene 44er Flaeche mehr. */
	.sabtec-nav__menu .is-menu-open .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon {
		width: auto;
		height: auto;
		margin-left: 0;
	}
	.sabtec-nav__menu .is-menu-open .sabtec-mega--auf > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
	.sabtec-nav__menu .is-menu-open .sabtec-mega--auf > .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon {
		transform: rotate(180deg);
	}

	/* Im Overlay ist das Mega-Panel eine einfache Liste: eine Spalte,
	   eingerueckt, mit einer Linie links — damit auf einen Blick zu sehen
	   ist, was zum aufgeklappten Punkt gehoert. */
	.sabtec-nav__menu .is-menu-open .sabtec-mega {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 4px 0 14px 14px;
		margin-left: 2px;
		border: 0;
		border-left: 2px solid var(--wp--preset--color--hairline);
		box-shadow: none;
		background: none;
		border-radius: 0;
	}
	.sabtec-nav__menu .is-menu-open .sabtec-mega__spalte { min-width: 0; }

	/* Die Werbekachel am Ende des Abschnitts darf schmaler und flacher
	   sein als am Schreibtisch — sie ist hier der Abschluss einer Liste,
	   nicht die vierte Spalte eines Panels. */
	.sabtec-nav__menu .is-menu-open .sabtec-mega__promo {
		min-height: 0;
		padding: 18px;
	}
}

/* Trefferflaechen auf die geforderten 24px bringen (BFSG/WCAG 2.5.8).
   Gemessen lagen sie bei 13 bis 23px. Vergroeszert wird ueber ein unsichtbares
   Pseudoelement — die Zeilenhoehe und damit das Layout bleiben unveraendert.
   Anders als eine min-height verschiebt das nichts im Frame. */
.sabtec-topline a,
.sabtec-foot__spalte a,
.sabtec-foot__recht a,
.sabtec-nav__menu .wp-block-navigation-submenu__toggle,
.card .det,
.card .req,
.lnk,
.dl .get,
.stx .links a { position: relative; }

.sabtec-topline a::after,
.sabtec-foot__spalte a::after,
.sabtec-foot__recht a::after,
.sabtec-nav__menu .wp-block-navigation-submenu__toggle::after,
.card .det::after,
.card .req::after,
.lnk::after,
.dl .get::after,
.stx .links a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 50%;
	transform: translateY(-50%);
	min-width: 24px; height: 24px;
}

/* ================================================================
   NACHTRAG 19.08.2026 — A11y-Durchgang, Teil „Wo bin ich?"
   Increment 7 des Bauplans. `assets/css/system.css` ist waehrend des
   Parallelbaus gesperrt, deshalb stehen diese Regeln hier.
   ================================================================ */

/* Aktueller Menuepunkt und Elternpunkt.
   `current-menu-item` gab es schon (oben, Zeile ~186), aber nur fuer die
   Seite selbst. Liegt die Ansicht UNTER einem Menuepunkt — Team unter
   Unternehmen, ein Containerprofil unter Mieten —, war der Kopf bisher
   stumm. Der Elternpunkt bekommt dieselbe Farbe, aber keinen weiteren
   Nachdruck: Er ist nicht die aktuelle Seite, nur der Weg dorthin.
   Ausgezeichnet wird die Stelle in functions.php (sabtec_nav_zustand). */
.sabtec-nav .sabtec-nav__menu .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* Panel-Verweis auf die gerade gezeigte Ansicht. Ohne diese Regel stuende
   die Angabe nur im Screenreader — sichtbar waere sie nicht (WCAG 1.4.1
   verlangt keine Farbe allein, deshalb zusaetzlich das Schriftgewicht). */
.sabtec-nav .sabtec-nav__menu .sabtec-mega__link[aria-current="page"] {
	color: var(--wp--preset--color--primary);
	font-weight: 900;
}

/* Einfache Untermenues gehen bei Tastaturbedienung auf.
   BEFUND 19.08.2026: Die drei Mega-Panels oeffnen sich beim Tabben, weil
   die Regel weiter oben `:focus-within` fuer `.sabtec-mega__container`
   ausdruecklich abdeckt. „Unternehmen" hat kein Panel, sondern das
   gewoehnliche Core-Dropdown — und fuer das gibt es in Core KEINE
   focus-within-Regel, solange der Punkt `open-on-hover-click` traegt.
   Gemessen mit 45 Tab-Anschlaegen: nach dem Umschaltknopf sprang der Fokus
   direkt zur Suchlupe. Die fuenf Eintraege „Ueber uns & Showpark", „Team &
   Ansprechpartner", „Aktuelles", „Downloads" und „FAQ" waren mit der
   Tastatur ueberhaupt nicht erreichbar (WCAG 2.1.1). Die Werte sind
   dieselben, die Core im Offen-Zustand setzt. */
.sabtec-nav__menu .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container:not(.sabtec-mega__container),
.sabtec-nav__menu .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container:not(.sabtec-mega__container) {
	opacity: 1;
	visibility: visible;
	height: auto;
	width: auto;
	min-width: 230px;
	overflow: visible;
}

/* Galerie-Miniaturen im Containerprofil.
   Die Knoepfe tragen seit dem 19.08.2026 `aria-pressed` statt
   `aria-current` (siehe patterns/section-container-profil-hero.php).
   Die alte Regel steht in `assets/css/container-profil.css` und laeuft ins
   Leere — sie gehoert dort entfernt, die Datei ist waehrend des
   Parallelbaus in fremder Hand (siehe Bericht). */
.pgal .thumbs button[aria-pressed="true"] { border-color: var(--blue); }