/* ==========================================================================
   SPRiCH — chrome.css   (Lane B · Kopfleiste, Eilmeldungsleiste, Navigation, Fuss)
   Enqueue-Reihenfolge: tokens -> base -> components -> CHROME -> landing -> kurs

   Diese Datei ergaenzt, sie wiederholt nicht. Die Bausteine .topbar, .ticker,
   .footer, .brandmark und .livedot stehen vollstaendig in components.css
   (Lane A, §1 MARKE / §2 CHROME / §6 HALTEPUNKTE) — hier steht nur:

     1. WordPress-Klempnerei, die es im Prototyp nicht gab
     2. der Sprunglink, weil der Elternteil einen eigenen mitbringt
     3. die Verbindungsregeln, die im Prototyp in landing.css unter .l-topbar,
        .l-lang, .l-ticker und .l-foot__* standen und dort Lane C gehoeren
     4. zwei bewusste Abweichungen vom Prototyp fuer Mobil, unten begruendet

   Kein einziges !important: diese Datei wird mit 'arneiron-ds' als Abhaengigkeit
   NACH dem Design-System des Elterntheme und nach components.css geladen, also
   genuegt gleiche Spezifitaet. Alle Regeln lesen die semantischen Variablen
   (--fg, --line, --surface) bzw. die Token aus tokens.css — nie Rohfarben.
   ========================================================================== */

/* ==========================================================================
   1. TEMPLATE-PART-HUELLEN
   `render_block_core_template_part()` legt um jeden Teil ein Element. Welches,
   entscheidet inc/blocks.php: fuer 'header' und 'footer' erzwingen wir <div>,
   damit das <header>/<footer> aus dem Teil selbst das einzige seiner Art bleibt
   (Abnahmekriterium: genau EIN <header> im mobilen DOM).

   Diese Huelle muss danach verschwinden — nicht aus Kosmetik: `position: sticky`
   bewegt sich nur innerhalb des eigenen Containing Block. Bliebe die Huelle ein
   Kasten, waere sie genau so hoch wie die Kopfleiste, und die Leiste koennte
   nirgendwohin kleben. `display: contents` loest den Kasten auf; .topbar und
   .ticker werden damit direkte Flex-Kinder von .wp-site-blocks (Elterntheme,
   ds.css §… — Flex-Spalte mit min-height 100dvh), und das Kleben funktioniert.

   Ein generisches <div> aufzuloesen kostet semantisch nichts. Genau deshalb
   traegt die Huelle das <div> und nicht das <header>.
   ========================================================================== */
.wp-block-template-part:has(> .topbar),
.wp-block-template-part:has(> .footer) {
	display: contents;
}

/* ==========================================================================
   2. SPRUNGLINK
   Das Elterntheme druckt seinen eigenen auf wp_body_open Prioritaet 1; er wird
   in inc/detach-parent-header.php durch den deutschen mit Ziel #inhalt ersetzt.
   Sichtbar wird er nur bei Tastaturfokus, dann oben links ueber allem.

   Die Spezifitaet ist Absicht: ds.css versteckt .skip-link mit
   `.skip-link:not(:focus):not(:active)` (0-3-0). Eine Regel mit `.skip-link`
   allein (0-1-0) wuerde verlieren, egal in welcher Reihenfolge geladen wird.
   ========================================================================== */
.skip-link:not(:focus):not(:active) {
	position: fixed;
	left: var(--s2);
	top: var(--s2);
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	transform: translateY(calc(-100% - var(--s6)));
}

.skip-link,
.skip-link:focus,
.skip-link:active {
	position: fixed;
	left: var(--s2);
	top: var(--s2);
	z-index: 1000;
	padding: var(--s2) var(--s3);
	border-radius: var(--r-control);
	background: var(--c-orange);
	color: var(--c-ink);
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: var(--fs-small);
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
	transition: transform .18s ease;
}

.skip-link:focus,
.skip-link:active {
	transform: none;
}

/* ==========================================================================
   3. KOPFLEISTE
   .topbar / .topbar__* kommen aus components.css §2. Hier nur die Anordnung,
   die im Prototyp in landing.css stand.
   ========================================================================== */
.sp-topbar__inner {
	min-height: var(--topbar-h);
}

.sp-topbar__brand {
	display: inline-flex;
	align-items: center;
	margin-right: auto;      /* schiebt Navigation, Sprache und CTA nach rechts */
	color: inherit;
	text-decoration: none;
}

/* Nur Desktop. Unterhalb von 900px ist .topbar__nav die Schublade und bekommt
   ihre Ausrichtung aus components.css §6 — diese Regel wuerde sie zerlegen. */
@media (min-width: 901px) {
	.sp-topbar__nav {
		display: flex;
		align-items: center;
		gap: var(--s1);
	}
}

/* — Sprachumschalter —
   ATTRAPPE. Im Entwurf (und hier) ohne Ziel: es gibt kein Polylang, keine EN-
   und keine UK-Uebersetzung. DE ist aktiv, EN und UA sind `disabled` — damit
   sind sie aus der Tabreihenfolge draussen und versprechen nichts. Der Schalter
   bleibt sichtbar, weil das Wortzeichen mehrsprachig gedacht ist (BRAND.md §5)
   und die Leiste sonst beim Aktivieren umspringt. */
.sp-topbar__lang {
	display: flex;
	align-items: center;
	gap: 2px;
}

.sp-lang {
	min-height: 44px;
	min-width: 44px;
	padding: 0 var(--s1);
	border: 0;
	border-radius: var(--r-control);
	background: none;
	color: var(--fg-muted);
	font: 700 var(--fs-label)/1 var(--f-ui);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	cursor: pointer;
}

.sp-lang.is-active,
.sp-lang[aria-pressed="true"] {
	color: var(--fg-strong);
}

.sp-lang[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

/* Der Burger traegt drei leere <span> (components.css §2 zeichnet und animiert
   sie). `order` erst ab 900px, siehe §6. */
.sp-topbar__burger {
	flex: none;
}

/* Die CTA in der Schublade ist bis 640px ausgeblendet — bis dahin steht sie in
   der Leiste selbst. Siehe die Begruendung in §6. */
.sp-nav__cta {
	display: none;
}

/* ==========================================================================
   4. EILMELDUNGSLEISTE
   Die einzige Stelle im Produkt, an der Rot Flaeche ist (BRAND.md §2/§6:
   Ebene LAUT). Ueberall sonst ist Rot Punkt oder Linie — nicht "aufraeumen".

   Der Text steht als eigener Absatz-Block im Template-Teil und ist damit im
   Site-Editor redigierbar, ohne dass jemand HTML anfassen muss.
   ========================================================================== */
.ticker > .sp-ticker__inner {
	gap: var(--s5);
	min-height: var(--ticker-h);
}

.sp-ticker .ticker__label {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
}

.sp-ticker .ticker__text {
	margin: 0;
	white-space: nowrap;
}

/* ==========================================================================
   5. FUSS
   .footer, .footer__cols, .footer__col, .footer__head und .footer__bottom
   kommen aus components.css §2.
   ========================================================================== */
.sp-foot__claim {
	margin: 0;
	color: var(--fg-muted);
	font: 400 13px/1.5 var(--f-ui);
}

/* Impressum, Datenschutz, AGB, WhatsApp, Instagram: die Ziele existieren nicht
   (README §8). Sie stehen deshalb als Text da, nicht als Link — ein href="#"
   sieht aus wie ein Link, springt aber still nach oben. Der Zusatz
   "— Seite folgt" steht in .visually-hidden und wird vorgelesen. */
.sp-foot__pending {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	color: var(--fg-muted);
	font-size: var(--fs-small);
	cursor: default;
}

/* ==========================================================================
   6. HALTEPUNKTE  1200 / 900 / 640
   ========================================================================== */

@media (max-width: 1200px) {
	.ticker > .sp-ticker__inner { gap: var(--s3); }
}

@media (max-width: 900px) {
	/* — Schublade —
	   ABWEICHUNG 1 vom Prototyp: dort ist die Schublade `position: fixed` mit
	   `top: var(--topbar-h)`, also an eine ANGENOMMENE Leistenhoehe geheftet.
	   Sobald die Leiste umbricht oder --topbar-h nicht passt, liegt die
	   Schublade ueber der Leiste statt darunter. Hier haengt sie mit
	   `position: absolute; top: 100%` an der Leiste selbst (die ist sticky,
	   also positioniert) und sitzt damit per Definition direkt darunter,
	   unabhaengig von jeder Zahl. left/right: 0 gilt gegenueber .topbar, die
	   volle Fensterbreite hat.

	   max-height bleibt eine Schaetzung, aber sie deckelt nur — ein zu kleiner
	   Wert scrollt, er verschiebt nichts. */
	.sp-topbar__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100dvh - var(--topbar-h));

		/* — und die Sichtbarkeit NICHT mitanimieren —
		   components.css §6 schreibt `transition: opacity .2s ease, transform
		   .2s ease, visibility .2s`. `visibility` ist zwar animierbar, aber
		   diskret: beim Wechsel hidden -> visible gilt am Fortschritt 0 noch
		   HIDDEN. Genau in diesem Augenblick ruft ui.js focus() auf das erste
		   Element der Schublade — und ein Browser fokussiert nichts, was
		   unsichtbar ist. Er meldet das nicht, er tut es einfach nicht.

		   GEMESSEN (375px, Chromium, focus()-Mitschnitt):
		     focus() called on A.topbar__link|Methode -> active is now BUTTON
		   Der Aufruf kam an, der Fokus blieb auf dem Burger. Weder ein
		   requestAnimationFrame noch ein erzwungener Layout-Flush half — der
		   Fehler liegt nicht im Timing des Skripts, sondern in dieser Zeile.

		   Deshalb: beim OEFFNEN `visibility 0s 0s` (sofort sichtbar, kein
		   Fortschritt-0-Fenster), beim SCHLIESSEN `visibility 0s .2s` (erst
		   ausblenden, wenn die Blende durch ist). Das ist das uebliche Muster
		   und macht das Fokussieren deterministisch statt glueckabhaengig. */
		transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
	}

	body[data-nav-open="true"] .sp-topbar__nav {
		transition: opacity .2s ease, transform .2s ease, visibility 0s 0s;
	}

	/* Reihenfolge in der Leiste: Marke | Sprache | CTA | Burger.
	   Ohne `order` stuende der Burger nach DOM-Reihenfolge vor Sprache und CTA,
	   also mitten in der Zeile. Die DOM-Reihenfolge bleibt wie sie ist, weil der
	   Burger direkt nach der Marke auch fuer die Tastatur die richtige Stelle
	   ist: erst Marke, dann das Bedienelement, das das Menue oeffnet. */
	.sp-topbar__lang   { order: 2; }
	.topbar__cta       { order: 3; }
	.sp-topbar__burger { order: 4; margin-left: 0; }

	/* Sicherheitsnetz aus dem Prototyp (.l-topbar @900). Gemessen laeuft hier
	   nichts ueber — aber deutsche Beschriftungen werden laenger, nicht kuerzer.
	   Umbrechen ist der harmlose Ausgang: die Leiste wird hoeher, und weil die
	   Schublade an `top: 100%` haengt statt an einer festen Hoehe, folgt sie.

	   OHNE das padding-block des Prototyps: gemessen machte es die Leiste bei
	   375px von 60px auf 76px hoch, obwohl dort gar nichts umbricht. Die
	   Zeilenluft beim Umbruch liefert bereits `gap: var(--s3)` aus
	   components.css — Polster fuer einen Fall, der meistens nicht eintritt,
	   kostet sonst auf jedem Telefon 16px Bildschirm. */
	.sp-topbar__inner {
		flex-wrap: wrap;
	}

	.sp-ticker .ticker__text { white-space: normal; }
}

@media (max-width: 640px) {
	/* ABWEICHUNG 2 vom Prototyp, belegt durch das Artboard 11 "Mobile"
	   (handoff/ref/mobile.png): dort traegt die mobile Leiste NUR Wortzeichen
	   und Menue — keine CTA. Der Prototyp laesst sie stehen und faengt den
	   Ueberlauf mit flex-wrap ab; bei 360px ergibt das eine zweizeilige Leiste.
	   Gerechnet: Wortzeichen ~107px + CTA ~222px + Burger 44px + 2 x 20px Gutter
	   = 413px auf einem 360px breiten Geraet.

	   README §10 haelt genau diesen Fehler schon einmal fest (die CTA stand im
	   Prototyp bei 375px ausserhalb des Viewports). Die CTA verschwindet hier
	   nicht, sie zieht in die Schublade — und die Hero-CTA steht ohnehin im
	   ersten Bildschirm. Ueber 80% der Ads-Klicks landen mobil
	   (handoff/copy/mobile.txt), diese Leiste ist also die wichtigste. */
	.topbar__cta { display: none; }

	.sp-nav__cta {
		display: flex;
		margin-top: var(--s2);
	}

	/* components.css §6 blendet .topbar__lang hier aus. Das muss hier WIEDERHOLT
	   werden: `.sp-topbar__lang { display: flex }` steht in §3 ausserhalb jeder
	   Media Query, hat dieselbe Spezifitaet (0-1-0) und laedt spaeter — es wuerde
	   die Ausblendung des Bausteins sonst genau auf den schmalsten Geraeten
	   aufheben, also dort, wo der Platz am knappsten ist. */
	.sp-topbar__lang { display: none; }
}