/* ==========================================================================
   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 —
   SEIT 23.09.2026 ECHT. Hier stand bis dahin eine ATTRAPPE: drei <button>, von
   denen zwei `disabled` waren, weil es weder Polylang noch eine Uebersetzung
   gab. Jetzt sind es drei <a> auf die Uebersetzung DERSELBEN Seite; die aktive
   traegt aria-current="true". Markup: inc/i18n.php::sprich_i18n_switcher(). */
.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] ist entfallen: es gibt keinen deaktivierten Schalter mehr.
   Die Regel stehen zu lassen waere eine Einladung, wieder einen zu bauen. */
.sp-lang:hover,
.sp-lang:focus-visible {
	color: var(--fg-strong);
}

/* 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);
	}

	/* 🔴 DER SPRACHUMSCHALTER BLEIBT JETZT STEHEN — Aenderung vom 23.09.2026.
	   Hier stand `.sp-topbar__lang { display: none; }`. Das war richtig, solange
	   es nichts zu wechseln GAB: ein Schalter mit zwei toten Knoepfen kostete auf
	   360px nur Platz. Mit drei echten Sprachen ist dieselbe Zeile ein Defekt —
	   sie war die EINZIGE Stelle, an der man die Sprache wechseln kann, und sie
	   ist weder in der Leiste noch in der Schublade (der Umschalter ist ein
	   Geschwister von .sp-topbar__nav, nicht sein Kind). Ueber 80% der
	   Ads-Klicks landen mobil (handoff/copy/mobile.txt) — eine dreisprachige
	   Seite, auf der 80% der Besucher die Sprache nicht wechseln koennen, ist
	   nicht dreisprachig.

	   In die Leiste und nicht in die Schublade, weil das EIN Tippen ist statt
	   zwei, und weil jemand, der die Seite in der falschen Sprache oeffnet, sie
	   sofort wechseln koennen muss — nicht erst ein Menue in einer Sprache
	   bedienen, die er nicht liest.

	   Der Platz reicht, weil die CTA hier ohnehin in die Schublade zieht.
	   Gemessen bei 360px: Wortzeichen 107 + Umschalter 112 + Burger 44 +
	   2 x 20 Gutter = 303 von 360. Die Trefferflaeche bleibt 44px hoch
	   (WCAG 2.5.8); nur die Breite schrumpft von 44 auf 36, und die drei
	   Flaechen beruehren sich nicht. */
	.sp-topbar__lang {
		display: flex;
		order: 2;
	}

	.sp-lang {
		min-width: 36px;
		padding: 0 4px;
	}

	/* Der Abstand der Leiste kommt aus components.css §2:
	       .topbar > .wrap { gap: var(--s3) }   — das sind 24px
	   GEMESSEN bei 360px, als der Umschalter zurueckkam:
	       Wortzeichen 110 + 24 + Umschalter 112 + 24 + Burger 44 + 2 x 20 Gutter
	       = 334, plus 8px Eigenabstand am Umschalter = 362 auf 360px.
	   Zwei Pixel. `flex-wrap: wrap` weiter oben fing das ab, indem es den Burger
	   in eine ZWEITE Zeile schob: die Leiste wurde von 60px auf 112px hoch, auf
	   genau dem Geraet mit dem wenigsten Platz, ohne eine einzige Fehlermeldung.

	   🔴 UND DIE ERSTE FASSUNG DIESER REGEL WAR WIRKUNGSLOS. Sie lautete
	   `.sp-topbar__inner { gap: 12px; }` — eine Klasse, Spezifitaet 0-1-0 —
	   gegen `.topbar > .wrap` mit ZWEI Klassen, 0-2-0. Spaeter zu laden hilft
	   dagegen nicht. Nachgemessen gab getComputedStyle weiterhin 24px aus,
	   waehrend die Leiste aus einem anderen Grund schon wieder einzeilig war
	   (der entfernte 8px-Eigenabstand). Eine stille Regel, die nichts trifft,
	   und daneben ein Effekt, der von woanders kommt — genau die Kombination,
	   die als "behoben" durchgeht.

	   Deshalb ein Selektor derselben Spezifitaet. 12px ergibt gemessen 322 von
	   360 und traegt auch eine laengere Marke. Das `wrap` bleibt stehen: es ist
	   weiterhin der richtige Ausgang, falls jemand spaeter etwas hinzustellt. */
	.topbar > .sp-topbar__inner { gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVIEW 21.09.2026 — Sprachumschalter (T015) — ERLEDIGT 23.09.2026
   Die Notiz lautete: "EN und UA sind noch nicht uebersetzt, ein deaktivierter
   Schalter liest sich als Fehler". Beide sind jetzt uebersetzt, der Schalter
   traegt drei echte Links, und die Klasse .sp-lang--soon wird von
   sprich_i18n_switcher() nicht mehr vergeben. Die Regel ist deshalb ersatzlos
   entfernt statt auskommentiert: toter Stil, der nichts mehr trifft, sieht bei
   der naechsten Durchsicht wie eine Absicht aus.
   ═══════════════════════════════════════════════════════════════════════════ */

/* === SPRiCH Handoff v2 header — BEGIN =======================================
   Quelle: SPRiCH-Web-Handoff-v2-logo.zip
           web/css/components.css (.brandlogo, .topbar__brand)
           web/README.md, Abschnitt "Logo & Kopfleiste (2026-10-03)"
   Eingebracht: 2026-10-03.

   Bewusst als GESCHLOSSENER BLOCK am Dateiende: so laesst sich der ganze
   Zukauf in einem Schnitt wieder entfernen, und er kaempft nicht mitten in
   der Datei gegen §3 KOPFLEISTE. Die Regeln unten stehen NACH
   `.sp-topbar__brand` (§3) und gewinnen daher bei gleicher Spezifitaet.

   EINZIGE ABWEICHUNG vom Handoff: `margin-right` bleibt `auto`.
   Im Prototyp traegt die Platte `margin-right: calc(var(--plate-slant) + var(--s3))`,
   weil die Leiste dort ein eigenes Layout hat. Hier schiebt `margin-right:auto`
   aus §3 Navigation, Sprachumschalter und CTA nach rechts; wird das
   ueberschrieben, kollabiert die Leiste. Der Schraegschnitt braucht den Platz
   nicht, weil er als ::after AUSSERHALB der Box sitzt.
   ========================================================================== */
.brandlogo {
	display: block;
	width: auto;
	height: 50px;
	aspect-ratio: 733 / 313;
	flex: none;
}
.brandlogo--sm   { height: 36px; }
.brandlogo--lg   { height: 80px; }
.brandlogo--foot { height: 44px; margin-bottom: var(--s2); }
.brandlogo--side { height: 46px; }
.brandlogo--bar  { height: 50px; }

/* Rote Platte, bundig zum linken Rand und nahtlos in die Eilmeldungsleiste.
   box-shadow: -100vw zieht das Rot bis zum Viewport-Rand, auch wenn .wrap
   zentriert ist - billiger als ein zweites Element. */
.topbar__brand {
	--plate-slant: 18px;
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	flex: none;
	margin-left: calc(var(--gutter) * -1);
	margin-right: auto;                 /* ABWEICHUNG, siehe Blockkopf */
	padding-inline: min(var(--gutter), var(--s3)) var(--s3);
	background: var(--c-red);
	box-shadow: -100vw 0 0 var(--c-red);
	text-decoration: none;
}

/* Schraege rechte Kante. */
.topbar__brand::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: var(--plate-slant);
	background: var(--c-red);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Beide Hoehen stehen so auch im Handoff; die zweite ueberschreibt die erste.
   Unveraendert uebernommen, damit ein spaeterer Abgleich mit der Quelldatei
   nicht ueber eine "fehlende" Regel stolpert. 76px * .62 = 47px -> 40px. */
.topbar__brand .brandlogo { height: calc(var(--topbar-h) * .62); }
.topbar__brand .brandlogo { height: 40px; }

.topbar__brand:focus-visible { outline-offset: -4px; outline-color: var(--c-white); }

/* Auf schmalen Leisten darf die Platte nicht die halbe Breite fressen. */
@media (max-width: 480px) {
	.topbar__brand { --plate-slant: 12px; }
	.topbar__brand .brandlogo { height: 32px; }
}
/* === SPRiCH Handoff v2 header — END ====================================== */

/* === SPRiCH Konto (Anmelden / Registrieren / Mein Konto) — BEGIN ===========
   Eingebracht 2026-10-05. Markup der Kopfleisten-Links: mu-plugins/sprich-account.php
   (sprich_account_header_links). Die WooCommerce-Seiten (/my-account/ samt
   lost-password) bekommen hier nur Anordnung und Farben aus den semantischen
   Variablen; keine Rohfarben. Als geschlossener Block, damit er in einem Schnitt
   wieder entfernt werden kann.
   ========================================================================== */

/* — Kopfleiste: Konto-Link — */
.sp-account {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 var(--s1);
	border-radius: var(--r-control);
	color: var(--fg-strong);
	font: 700 var(--fs-label)/1 var(--f-ui);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.sp-account svg { flex: none; }
.sp-account:hover,
.sp-account:focus-visible,
.sp-account[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
}

/* Leiste ab 901px, Schublade bis 900px — nie beides gleichzeitig. Bei 360px
   ist in der Leiste kein Platz mehr (siehe §6: 322 von 360px belegt). */
@media (min-width: 901px) {
	/* Gegen `header.topbar.sp-topbar .sp-topbar__nav .topbar__link { display:flex }`
	   (Spezifitaet 0-4-1) braucht es mindestens 0-5-1. */
	header.topbar.sp-topbar .sp-topbar__nav .topbar__link.sp-nav__account { display: none !important; } /* die v2-Schicht setzt display mit !important */
	/* Die Leiste ordnet per `order`: Sprache 2, CTA 3 (Kopfleisten-Schicht v2).
	   Ohne eigene Ordnung (0) sprang der Link an den Anfang und lag UNTER der
	   absolut positionierten Logo-Platte (z-index 120). 2 + DOM-Reihenfolge
	   = direkt nach dem Sprachumschalter, vor der CTA. */
	header.topbar.sp-topbar .sp-account--bar {
		position: relative;
		order: 2;
		width: 44px;
		margin-left: 4px;
		padding: 0;
		justify-content: center;
	}
	/* Nur das Symbol in der Leiste; der Text bleibt fuer Screenreader (aria-label
	   + title am Link). GEMESSEN 2026-10-05: die mittig absolut gesetzte
	   Navigation (423px) und die rechte Gruppe Sprache+CTA passen erst ab
	   ~1271px nebeneinander; ein Text-Link ("Anmelden", 120px) haette bis
	   1440px ueberlappt. Symbol (44px) + Navigation 56px nach links = passt ab
	   ~1287px, bei 1440px mit 90px Luft. Unter ~1270px ueberlappten Navigation
	   und Sprachumschalter schon VOR dieser Aenderung (offener Punkt). */
	header.topbar.sp-topbar .sp-account--bar span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	header.topbar.sp-topbar .sp-account--bar svg { width: 22px; height: 22px; }
	header.topbar.sp-topbar .sp-account--in::after {
		content: "";
		position: absolute;
		top: 6px;
		right: 8px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--c-orange);
		box-shadow: 0 0 0 2px var(--c-red);
	}
}
/* (Hier stand bis 2026-10-05 die Verschiebung der absolut zentrierten Navigation
   um -56px ab 1100px. Ersetzt durch den Block "KOPFLEISTE 901+" am Dateiende.) */
@media (max-width: 900px) {
	.sp-account--bar { display: none; }
	.sp-nav__account--logout { opacity: .8; }
}

/* — Konto-Seiten — */
.woocommerce-account .k-page__wrap { max-width: 1040px; }

.woocommerce-account .woocommerce {
	color: var(--fg);
	font-family: var(--f-ui);
}

/* Anmelden | Registrieren nebeneinander (WooCommerce floatet .col-1/.col-2 auf 48%). */
.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s5);
	align-items: start;
}
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after { display: none; }
.woocommerce-account #customer_login > .u-column1,
.woocommerce-account #customer_login > .u-column2 {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

.woocommerce-account .woocommerce h2 {
	margin: 0 0 var(--s2);
	color: var(--fg-strong);
	font-family: var(--f-display);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

.woocommerce-account form.login,
.woocommerce-account form.register,
.woocommerce-account form.lost_reset_password,
.woocommerce-account form.woocommerce-ResetPassword,
.woocommerce-account .woocommerce-EditAccountForm {
	margin: 0;
	padding: var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
}
.woocommerce-account form.lost_reset_password,
.woocommerce-account form.woocommerce-ResetPassword { max-width: 560px; }

.woocommerce-account .woocommerce form .form-row {
	margin: 0 0 var(--s3);
	padding: 0;
}
.woocommerce-account .woocommerce form .form-row label {
	display: block;
	margin-bottom: 8px;
	color: var(--fg-strong);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
}
.woocommerce-account .woocommerce form .form-row .required { color: var(--c-orange); text-decoration: none; }

.woocommerce-account .woocommerce form .input-text,
.woocommerce-account .woocommerce form input[type="email"],
.woocommerce-account .woocommerce form input[type="text"],
.woocommerce-account .woocommerce form input[type="password"] {
	width: 100%;
	min-height: 48px;
	padding: 12px var(--s2);
	border: 1px solid var(--line);
	border-radius: var(--r-control);
	background: var(--bg);
	color: var(--fg-strong);
	font-family: var(--f-display);
	font-size: var(--fs-body);
	line-height: 1.4;
	box-shadow: none;
}
.woocommerce-account .woocommerce form .input-text:hover { border-color: var(--fg-muted); }
.woocommerce-account .woocommerce form .input-text:focus {
	outline: none;
	border-color: var(--c-orange);
	box-shadow: 0 0 0 1px var(--c-orange);
}
.woocommerce-account .woocommerce form .password-input { display: block; position: relative; }
.woocommerce-account .woocommerce form .show-password-input { color: var(--fg-muted); }

/* Passwortstaerke: die Anzeige ("Stark") wird von WooCommerce erst beim Verlassen
   des Feldes eingefuegt, wenn das Passwort eingefuegt statt getippt wurde
   (Passwort-Manager). Sie schob dann alles darunter um eine Zeile nach unten —
   GEMESSEN 2026-10-05: genau zwischen mousedown und mouseup des ersten Klicks
   auf die AGB-Checkbox, der Klick ging dadurch verloren. Platz vorhalten statt
   schieben. Der lange Hinweistext bei schwachen Passwoertern bleibt im Fluss. */
.woocommerce-account form.register .form-row:has(#reg_password) {
	position: relative;
	padding-bottom: 30px;
}
.woocommerce-account form.register .woocommerce-password-strength {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 2px 10px;
	border-radius: var(--r-control);
	font-size: 13px;
	font-weight: 600;
	line-height: 22px;
}
.woocommerce-account form.register .woocommerce-password-strength:has(+ .woocommerce-password-hint) { position: static; margin-top: 8px; }
.woocommerce-account .woocommerce-password-hint { display: block; margin-top: 6px; color: var(--fg-muted); font-size: 13px; }

/* Checkboxen: Einwilligungen (sprich-consent.php) und "Angemeldet bleiben". */
.woocommerce-account .woocommerce input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--c-orange);
}
.woocommerce-account .sprich-consent { margin: var(--s3) 0 !important; }
.woocommerce-account .sprich-consent__row label,
.woocommerce-account .sprich-consent__row label span {
	color: var(--fg);
	font-weight: 400 !important;
	font-size: 14px;
	line-height: 1.5;
}
.woocommerce-account .sprich-consent__row a { color: var(--fg-strong); }
.woocommerce-account .woocommerce-privacy-policy-text p {
	margin: 0 0 var(--s2);
	color: var(--fg-muted);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 var(--s2) 0 0;
	font-weight: 400;
}
.woocommerce-account .woocommerce-form-login .form-row:last-of-type {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
}
.woocommerce-account .woocommerce .lost_password { margin: var(--s2) 0 0; font-size: var(--fs-small); }
.woocommerce-account .woocommerce .lost_password a,
.woocommerce-account .woocommerce-MyAccount-content a:not(.btn):not(.button) { color: var(--fg-strong); text-underline-offset: 3px; }

.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce .woocommerce-Button,
.woocommerce-account .woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--s4);
	border: 0;
	border-radius: var(--r-pill);
	background: var(--c-orange);
	color: var(--c-ink);
	font: 700 16px/1 var(--f-ui);
	cursor: pointer;
}
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce a.button:hover { box-shadow: var(--ring-strong); }

/* Hinweise (klassisch und Block-Banner). */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account .wc-block-components-notice-banner {
	margin: 0 0 var(--s4);
	padding: var(--s2) var(--s3);
	border: 1px solid var(--line);
	border-left: 4px solid var(--c-orange);
	border-radius: var(--r-control);
	background: var(--surface);
	color: var(--fg-strong);
	list-style: none;
}
.woocommerce-account .woocommerce-error,
.woocommerce-account .wc-block-components-notice-banner.is-error { border-left-color: var(--c-red); }
.woocommerce-account .woocommerce-message,
.woocommerce-account .wc-block-components-notice-banner.is-success { border-left-color: var(--ok); }
.woocommerce-account .wc-block-components-notice-banner svg { fill: currentColor; }
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before { display: none; }

/* Angemeldet: Navigation links, Inhalt rechts. */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
	gap: var(--s5);
	align-items: start;
}
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after { display: none; }
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > :not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: var(--s1);
	list-style: none;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px var(--s2);
	border-radius: var(--r-control);
	color: var(--fg);
	font-weight: 600;
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--fg-strong); background: var(--bg); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--fg-strong);
	background: var(--bg);
	box-shadow: inset 3px 0 0 var(--c-orange);
}
.woocommerce-account .woocommerce-MyAccount-content > p { line-height: 1.6; }

.sp-acct-welcome {
	margin: 0 0 var(--s4);
	padding: var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
}
.woocommerce-account .woocommerce .sp-acct-welcome__title { margin: 0 0 var(--s1); }
.sp-acct-welcome p { margin: 0; }
.sp-acct-welcome__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s3) !important;
}

.woocommerce-account .woocommerce-MyAccount-content table { width: 100%; border-collapse: collapse; }
.woocommerce-account .woocommerce-MyAccount-content th,
.woocommerce-account .woocommerce-MyAccount-content td {
	padding: 10px var(--s1);
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

@media (max-width: 760px) {
	.woocommerce-account #customer_login,
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
	.woocommerce-account form.login,
	.woocommerce-account form.register,
	.woocommerce-account form.lost_reset_password,
	.woocommerce-account form.woocommerce-ResetPassword,
	.sp-acct-welcome { padding: var(--s3); }
	.woocommerce-account .woocommerce button.button { width: 100%; }
	.woocommerce-account .woocommerce-form-login .form-row:last-of-type { flex-direction: column; align-items: stretch; }
}
/* === SPRiCH Konto — END =================================================== */

/* === KOPFLEISTE 901+ und EILMELDUNG — BEGIN (sprich-child 0.3.4, 2026-10-05) ===
   Als geschlossener Block, damit er in einem Schnitt wieder entfernt werden kann.

   WARUM: Die Desktop-Kopfleiste wird seit 2026-10-05 von den Global-Styles-Bloecken
   "arneiron-blog-styling" (Datenbank, wp_global_styles) gesetzt. bs_20261005T131625Z
   zentriert die Navigation ABSOLUT (left:50%, translateX(-50%)); sie weiss deshalb
   nichts von ihren Nachbarn. GEMESSEN vor dieser Aenderung: Navigation ueber dem
   Sprachumschalter bei 901-1180px (DE 152px bei 1024px, EN 54px, UA 110px), dazu
   ueber Konto-Symbol und CTA bei 901px.

   LOESUNG, zwei Stufen:
     901-1199px  Burger. Marke, Sprache, Konto-Symbol und CTA bleiben in der Leiste,
                 die Menuepunkte wandern in die Schublade unter der Eilmeldung.
                 (DE passt bei 1024px auch kompakt nicht: Logo 204 + Menue 383 +
                 Sprache/Konto/CTA ~404px.)
     ab 1200px   Die Navigation ist ein normales Flex-Element, mittig im freien Raum
                 zwischen Logo-Platte und Sprachumschalter. Sie kann nicht mehr
                 ueberlappen; wird es zu eng, schrumpft der Abstand, nicht die Leiste.

   SPEZIFITAET: Die Global-Styles-Regeln haben 0-3-1 bis 0-4-1 mit !important. Jede
   Regel hier traegt deshalb `html body header...` (mind. 0-3-3) plus !important und
   gewinnt unabhaengig von der Ladereihenfolge.

   EILMELDUNG: bs_20261005T135444Z/140951Z/141603Z ersetzen ab 901px den echten Text
   durch ::before/::after-Laufschrift mit FEST eingetipptem deutschem Text und dem
   Wort 'PLATZHALTER' (auch auf /en/ und /ua/) und setzen den echten Text auf
   font-size:0. Die Laufschrift ist die meiste Zeit ausserhalb des Bildes, die
   Zeile wirkte leer. Hier steht wieder der echte, uebersetzte Text aus
   sprich_chrome_ticker() (naechster Kurs + freie Plaetze, sonst Positionierung),
   ruhig und mit Auslassungspunkten, falls er zu lang ist.
   ========================================================================== */

/* — 901-1199px: Burger-Stufe — */
@media (min-width: 901px) and (max-width: 1199px) {
	html body header.topbar.sp-topbar .sp-topbar__inner > .sp-topbar__burger {
		display: inline-flex !important;
		visibility: visible !important;
		order: 4 !important;
		flex: none !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 5px !important;
		width: 44px !important;
		min-width: 44px !important;
		height: 36px !important;
		min-height: 36px !important;
		margin: 0 0 0 6px !important;
		padding: 0 !important;
	}

	/* Die Schublade haengt an .sp-topbar__inner (position:relative, 36px hoch) und
	   faellt UNTER die Eilmeldung: 100% + --ticker-h. */
	html body header.topbar.sp-topbar .sp-topbar__inner > .sp-topbar__nav {
		position: absolute !important;
		top: calc(100% + var(--ticker-h, 36px)) !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 130 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 0 !important;
		width: auto !important;
		height: auto !important;
		max-height: calc(100dvh - 72px) !important; /* Leiste 36 + Eilmeldung 36 */
		overflow-y: auto !important;
		margin: 0 !important;
		padding: var(--s1) var(--gutter) var(--s3) !important;
		background: var(--c-blue-800) !important;
		border-bottom: 1px solid var(--c-blue-600) !important;
		box-shadow: 0 12px 24px rgba(0, 0, 0, .18) !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transform: translateY(-8px) !important;
		/* visibility beim OEFFNEN sofort (siehe §6 oben: sonst greift focus() nicht). */
		transition: opacity .2s ease, transform .2s ease, visibility 0s .2s !important;
	}
	html body[data-nav-open="true"] header.topbar.sp-topbar .sp-topbar__inner > .sp-topbar__nav {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		transition: opacity .2s ease, transform .2s ease, visibility 0s 0s !important;
	}
	html body header.topbar.sp-topbar .sp-topbar__inner > .sp-topbar__nav > .topbar__link {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		max-width: var(--content, 1328px) !important;
		height: 48px !important;
		min-height: 48px !important;
		margin: 0 auto !important;
		padding: 0 var(--s1) !important;
		border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
		font-size: 15px !important;
		line-height: 1.2 !important;
		color: var(--c-white) !important;
		white-space: nowrap !important;
	}
	/* Diese Regel (0-5-3) uebertrifft bewusst `.sp-nav__account { display:none }` (0-5-1,
	   oben): in der Burger-Stufe stehen Konto-Symbol in der Leiste UND "Anmelden oder
	   registrieren" bzw. "Mein Konto" + "Abmelden" in der Schublade. So gibt es auch
	   zwischen 901 und 1199px einen sichtbaren Abmelden-Link. */
}

/* — ab 1200px: kompakter Fluss statt absoluter Zentrierung — */
@media (min-width: 1200px) {
	html body header.topbar.sp-topbar .sp-topbar__inner {
		/* Die Logo-Platte ist absolut gesetzt (left: --gutter, Breite --sprich-logo-span-w)
		   und belegt keinen Platz im Fluss — das Polster haelt ihr den Platz frei. */
		padding-left: calc(var(--gutter) + var(--sprich-logo-span-w, 180px) + 24px) !important;
	}
	html body header.topbar.sp-topbar .sp-topbar__inner > .sp-topbar__nav {
		position: static !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		order: 1 !important;
		flex: 0 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 auto !important;
		gap: clamp(14px, 1.5vw, 22px) !important;
	}
	html body header.topbar.sp-topbar .sp-topbar__inner > .sp-topbar__lang {
		margin-left: 24px !important;
	}
}

/* — Eilmeldung ab 901px: der echte Text, ruhig — */
@media (min-width: 901px) {
	html body .sp-ticker .sp-ticker__inner > .ticker__text {
		display: block !important;
		position: static !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding-left: var(--s2, 12px) !important; /* Luft nach dem Trennstrich des Labels */
		font-size: 11px !important;
		line-height: var(--ticker-h, 36px) !important;
		color: rgba(255, 255, 255, .88) !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		-webkit-mask-image: none !important;
		mask-image: none !important;
		animation: none !important;
		transform: none !important;
	}
	html body .sp-ticker .sp-ticker__inner > .ticker__text::before,
	html body .sp-ticker .sp-ticker__inner > .ticker__text::after {
		content: none !important;
		display: none !important;
		animation: none !important;
	}
}

/* — Fuss: Logo (Handoff v2) statt CSS-Wortzeichen — */
.sp-footer .footer__brand {
	display: inline-flex;
	align-self: flex-start;
	line-height: 0;
	border-radius: var(--r-control);
}
.sp-footer .footer__brand:focus-visible { outline-offset: 4px; }
.sp-footer .brandlogo--foot {
	display: block;
	width: auto;
	height: 56px;
}
@media (max-width: 640px) {
	.sp-footer .brandlogo--foot { height: 48px; }
}
/* === KOPFLEISTE 901+ und EILMELDUNG — END === */

/* === DANKE-SEITE (order-received): Abstand der Aktionen zum Fuss — 0.3.5, 2026-10-05 ===
   sprich-shop.php (thankyou_links) setzt .sp-shop-thanks als letztes Element in den
   Inhalt; ohne Abstand klebten „Meine Buchungen“ / „Zum Konto“ direkt am Fuss. */
.woocommerce-order-received .sp-shop-thanks {
	margin-top: var(--s5, 40px);
	margin-bottom: clamp(var(--s6, 56px), 7vw, var(--s8, 120px));
}
.woocommerce-order-received .sp-shop-thanks__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2, 16px);
	margin-top: var(--s3, 24px);
}
/* === DANKE-SEITE — END === */