/* ============================================================================
   FKT DESIGN LAYER
   ----------------------------------------------------------------------------
   Alles, was das CrocoBuilder-Design-System strukturell NICHT kann:
   @keyframes, Pseudo-Elemente, Kontext-Selektoren (.on-dark ...).
   Der CSS-Sanitizer des Builders entfernt ausserdem `;` `<` `>` `"` aus Werten.

   Ladet NACH dem Theme-Stylesheet (siehe sandbox/fkt-design-css.php).
   Tokens kommen aus dem Design-System - hier stehen nur Zuweisungen.
   ============================================================================ */

/* ============================================================================
   1 - BUTTON-SYSTEM MIT GLOW-RING
   ----------------------------------------------------------------------------
   Adaptiert von aaroniker "Glow Button" (codepen XWYpyNM). Mechanik im Original:
   ein grosser, rotierender Kreis mit Linear-Gradient wird vom soliden Inneren
   ueberdeckt, sodass nur der Rand animiert leuchtet, dazu ein cursor-folgender
   Blur-Spot ueber --pointer-x/y (getrieben von GSAP).

   Unsere Umsetzung weicht bewusst ab:
   - Kein GSAP, kein zusaetzliches DOM. Das Original braucht <span> + <div>
     im Button. Unsere Buttons sind link-Elemente ohne Kinder, deshalb laufen
     beide Ebenen ueber ::before (Ring) und ::after (Fuellung + Cursor-Glow)
     mit negativem z-index plus `isolation:isolate`, damit der Text oben bleibt.
   - CI-Farben statt Lila/Magenta.
   - Der Ring rotiert nur im Hover. Dauerhafte Rotation ist auf einer
     Unternehmensseite zu unruhig und kostet ohne Not GPU-Zeit.
   ============================================================================ */

/* ZURUECKGEFAHREN 2026-08-04 (Kundenfeedback: "zu krass", besonders Secondary).
   Der rotierende conic-Ring aus dem Original ist ENTFERNT - auf einer
   Unternehmensseite wirkt er wie ein Gaming-Interface. Geblieben ist die
   ruhige Haelfte des Effekts: ein weicher, cursor-folgender Lichtspot im
   Button plus eine minimale Anhebung. Kein Glow-Ring, kein Spin. */

.btn-primary,
.btn-outline,
.btn-dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 0;
	background: transparent;
	-webkit-tap-highlight-color: transparent;
	transition: transform .2s ease, box-shadow .25s ease, color .2s ease;
}

/* Eine Ebene: Fuellung + cursor-folgender Lichtspot. --px/--py setzt das
   pointermove-Snippet in sandbox/fkt-design-css.php. */
.btn-primary::after,
.btn-outline::after,
.btn-dark::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: inherit;
	background-image: radial-gradient(
		120px circle at var(--px, 50%) var(--py, 130%),
		var(--spot, rgba(255, 255, 255, .18)) 0%,
		transparent 60%
	);
	background-color: var(--fill, var(--primary));
	transition: background-color .2s ease;
}

/* --- Variante HELL (gefuellt) --- */
.btn-primary {
	--fill: var(--primary);
	--spot: rgba(255, 255, 255, .22);
	color: #ffffff;
}
.btn-primary:hover {
	--fill: var(--primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(30, 113, 184, .28);
}

/* --- Variante OUTLINE --- */
.btn-outline {
	--fill: transparent;
	--spot: rgba(54, 169, 225, .10);
	color: var(--primary-dark);
	box-shadow: inset 0 0 0 1.5px var(--primary);
}
.btn-outline:hover {
	--fill: var(--primary-tint);
	transform: translateY(-1px);
	box-shadow: inset 0 0 0 1.5px var(--primary-dark);
}

/* --- Variante DUNKEL --- */
.btn-dark {
	--fill: var(--navy);
	--ring-a: rgba(54, 169, 225, .95);
	--ring-b: #ffffff;
	--spot: rgba(54, 169, 225, .45);
	color: #ffffff;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	border-radius: var(--radius-pill);
	padding: 0.9rem 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
}
.btn-dark:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 0 8px rgba(54, 169, 225, .16), 0 14px 30px rgba(23, 63, 99, .5);
}
a.btn-dark, a.btn-dark:visited, a.btn-dark:hover { color: #ffffff; text-decoration: none; }

/* ============================================================================
   2 - DUNKLER HERO MIT LICHTSPOTS
   ----------------------------------------------------------------------------
   Referenz: Pereira & Associados - tiefes Navy mit hellem Lichtspot.
   Navy ist aus --primary-dark abgeleitet (das CI hatte kein eigenes Navy).
   Die Spots driften langsam. Bei prefers-reduced-motion stehen sie still,
   verschwinden aber nicht - sie tragen die Gestaltung, nicht die Information.
   ============================================================================ */

@keyframes fkt-glow-drift-a {
	0%,100% { transform: translate3d(0, 0, 0) scale(1); }
	50%     { transform: translate3d(6%, 4%, 0) scale(1.12); }
}
@keyframes fkt-glow-drift-b {
	0%,100% { transform: translate3d(0, 0, 0) scale(1.05); }
	50%     { transform: translate3d(-7%, -3%, 0) scale(1); }
}

.hero-dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--navy-deep);
	background-image:
		radial-gradient(120% 90% at 50% -20%, rgba(30, 113, 184, .55) 0%, rgba(23, 63, 99, 0) 60%),
		linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
}

/* Zwei weiche Lichtspots als eigene Ebenen, damit sie unabhaengig driften. */
.hero-dark::before,
.hero-dark::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform;
}
.hero-dark::before {
	top: -28%;
	left: -6%;
	width: 62%;
	aspect-ratio: 1;
	background: radial-gradient(circle at 50% 50%, rgba(54, 169, 225, .55) 0%, rgba(54, 169, 225, .18) 42%, rgba(54, 169, 225, 0) 70%);
	filter: blur(38px);
	animation: fkt-glow-drift-a 18s ease-in-out infinite;
}
.hero-dark::after {
	top: -34%;
	right: -12%;
	width: 54%;
	aspect-ratio: 1;
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .30) 0%, rgba(54, 169, 225, .22) 38%, rgba(54, 169, 225, 0) 68%);
	filter: blur(46px);
	animation: fkt-glow-drift-b 24s ease-in-out infinite;
}

/* Weicher Uebergang in die naechste, helle Sektion */
.hero-dark > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.hero-dark::before,
	.hero-dark::after { animation: none; }
	.btn-primary:hover,
	.btn-outline:hover,
	.btn-dark:hover { transform: none; }
}

/* Video im dunklen Hero so gross wie moeglich: es traegt die Sektion, die
   Kennzahlen sitzen darunter. Reihenfolge explizit ueber grid-row, weil die
   Auto-Platzierung eines spannenden Elements sonst umsortiert. */
.hero-dark .fkt-video { width: 100%; }

/* ============================================================================
   3 - KONTEXT "AUF DUNKEL"
   ----------------------------------------------------------------------------
   Der Kunde hatte in einer frueheren Runde zurecht kritisiert, dass dunkles
   Blau auf dunklem Grund unlesbar war. Ursache damals: dunkelblauer TEXT auf
   dunkelblauer FLAECHE. Hier ist der Text konsequent weiss bzw. weiss-transparent,
   damit der Kontrast hoch bleibt.
   ============================================================================ */

.on-dark { color: #ffffff; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #ffffff; }
.on-dark p { color: rgba(255, 255, 255, .82); }
.on-dark a:not([class*="btn-"]) { color: #9BD5F2; }
.on-dark a:not([class*="btn-"]):hover { color: #ffffff; }

/* Badge auf dunkel: Glas statt weisser Pille */
.on-dark .badge-pill {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .34);
	color: #ffffff;
	backdrop-filter: blur(6px);
}

/* Outline-Button auf dunkel.
   Ruhe: weisser Text auf transparent. Hover: UMKEHRUNG - weisse Flaeche,
   blauer Text. Eine hellere transparente Fuellung mit weiterhin weissem Text
   liess den Text im Hover praktisch verschwinden.
   `a` mitselektiert, weil das Theme-Stylesheet `a.btn-outline:hover` faerbt
   (Spezifitaet 0,2,1) - ohne das Element hier waere es ein Wettlauf. */
.on-dark a.btn-outline,
.on-dark .btn-outline {
	color: #ffffff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
	--spot: rgba(255, 255, 255, .12);
}
.on-dark a.btn-outline:hover,
.on-dark a.btn-outline:focus-visible,
.on-dark .btn-outline:hover,
.on-dark .btn-outline:focus-visible {
	--fill: #ffffff;
	--spot: rgba(30, 113, 184, .14);
	color: var(--primary-dark);
	box-shadow: inset 0 0 0 1.5px #ffffff;
}
.on-dark .btn-primary:hover {
	--fill: var(--primary);
	box-shadow: 0 6px 18px rgba(6, 15, 26, .5);
}

/* ----------------------------------------------------------------------------
   Kompakte Stat-Karten (Variante fuer die Reihe unter dem Video)
   Die schwebende Variante auf Fotos darf gross sein - in einer Reihe unter dem
   Video wirkte sie zu dominant. Deshalb eine eigene Variante statt die
   Basisklasse zu aendern (die nutzen die anderen Seiten weiter).
   ---------------------------------------------------------------------------- */
.stat-card-inline {
	width: auto;
	padding: 0.7rem 1rem;
}
.stat-card-inline > :first-child { line-height: 1.1; }
.stat-card-inline > :last-child { opacity: .88; }

/* Stat-Karten auf dunkel.
   ACHTUNG: diese Karten schweben ueber FOTOS, nicht nur ueber dem Navy.
   Eine weiss-transparente Glasflaeche (rgba(255,255,255,.10)) hat ueber einem
   hellen Bildbereich fast keinen Kontrast - der weisse Text verschwindet.
   Deshalb ein halbdeckendes Navy als Grund: es haelt den Kontrast unabhaengig
   davon, was darunter liegt, und wirkt trotzdem wie Glas. */
.on-dark .stat-card-dark {
	background: rgba(23, 63, 99, .74);
	border: 1px solid rgba(255, 255, 255, .20);
	backdrop-filter: blur(10px) saturate(140%);
	box-shadow: 0 12px 32px rgba(6, 15, 26, .5);
}
.on-dark .stat-card-primary {
	box-shadow: 0 12px 32px rgba(6, 15, 26, .45), 0 0 0 1px rgba(255, 255, 255, .12) inset;
}

/* Highlight-Wort auf dunkel: erbt die Unterstreichung, Text bleibt weiss */
.on-dark .mark-brush {
	color: #ffffff;
	background-image: none;
}

/* Fokus-Ring auf dunkel muss hell sein */
.on-dark :where(a, button, [tabindex]):focus-visible { outline-color: #ffffff; }

/* ----------------------------------------------------------------------------
   WEISSE KARTEN IN EINER DUNKLEN SEKTION
   Ohne diese Regeln erben Kartentexte die weisse .on-dark-Schrift und stehen
   weiss auf weissem Kartengrund. `:not(:hover)` statt hoeherer Spezifitaet,
   damit der Flood-Hover (der die Karte blau flutet und die Texte bewusst weiss
   macht) weiterhin gewinnt - sonst waeren beide Regeln gleich spezifisch und
   die Reihenfolge wuerde entscheiden.
   ---------------------------------------------------------------------------- */
.on-dark .card:not(:hover) h3 { color: var(--ink); }
.on-dark .card:not(:hover) p { color: var(--ink-soft); }
.on-dark .card:not(:hover) span { color: var(--primary-dark); }

/* Video-Facade im dunklen Hero: Rahmen etwas heller absetzen */
.on-dark .fkt-video { box-shadow: 0 20px 50px rgba(6, 15, 26, .55), 0 0 0 1px rgba(255, 255, 255, .10); }

/* ============================================================================
   3b - HIGHLIGHT-WORT
   ----------------------------------------------------------------------------
   Vorher lag ein SVG-Pinselstrich hinter dem Wort. Ersetzt durch eine echte
   Unterstreichung im hellen CI-Blau: ruhiger, skaliert mit der Schriftgroesse,
   bricht bei Zeilenumbruch korrekt und kommt ohne Grafikdatei aus.

   Die Klasse mark-brush bleibt namentlich bestehen (sie sitzt schon im Markup),
   traegt aber keinen Hintergrund mehr - hier neutralisiert, weil die Deklaration
   im Design-System liegt und dieses Stylesheet danach laedt.
   ============================================================================ */

.mark-brush {
	background-image: none;
	padding-inline: 0;
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: var(--primary);
	text-decoration-thickness: 0.09em;
	text-underline-offset: 0.16em;
	text-decoration-skip-ink: none;
}

/* ============================================================================
   3d - LEISTUNGS-KARTEN MIT FLOOD-FILL
   ----------------------------------------------------------------------------
   Adaptiert von Uiverse.io / Prince4fff (card1 + go-corner). Mechanik im
   Original: ein 32px-Kreis in der oberen rechten Ecke wird im Hover auf
   scale(21) gezogen und flutet die Karte mit der Akzentfarbe, Texte werden
   weiss. Dazu ein Eck-Badge mit Pfeil.

   Unsere Abweichungen:
   - Eigene Klasse `card-flood` statt `.card`. Die Format-Karten nutzen
     dieselbe Basisklasse, haben aber ein Bild am Kartenkopf - dort wuerde die
     Flutung hinter dem Bild verschwinden und nur halb wirken.
   - CI-Blau statt Petrol. Fliesstext im Hover auf VOLLES Weiss, nicht wie im
     Original auf rgba(255,255,255,.8): gemessen ergibt Weiss auf #1E71B8
     5.11:1, bei .92 Deckung sind es nur noch 4.29:1 - unter der AA-Grenze
     von 4.5:1. Die Hierarchie kommt hier ueber font-weight, nicht Deckkraft.
   - Textfarben im Hover brauchen Spezifitaet 0,2,1 (`.card-flood:hover h3`),
     weil die Per-Node-Styles (`.cb-p1_h`, 0,1,0) ZULETZT laden.
   - Kein `box-shadow: 0 0 999px 999px` (card3) - das legt einen Schleier
     ueber die gesamte Seite.
   ============================================================================ */

.card-flood {
	position: relative;
	z-index: 0;
	overflow: hidden;
}

/* Der flutende Kreis */
.card-flood::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-pill);
	background: var(--primary-dark);
	transform: scale(1);
	transform-origin: 50% 50%;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.card-flood:hover::before,
.card-flood:focus-visible::before {
	transform: scale(26);
}

/* Eck-Badge mit Pfeil */
.card-flood::after {
	content: "→";
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-size: 0.9rem;
	line-height: 1;
	color: #ffffff;
	background: var(--primary-dark);
	border-radius: 0 var(--radius) 0 var(--radius);
	transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.card-flood:hover::after,
.card-flood:focus-visible::after {
	background: #ffffff;
	color: var(--primary-dark);
	transform: translate(2px, -2px);
}

/* Texte im Hover. Spezifitaet 0,2,1 - schlaegt die Per-Node-Farben. */
.card-flood:hover h3,
.card-flood:focus-visible h3 { color: #ffffff; }
.card-flood:hover p,
.card-flood:focus-visible p { color: #ffffff; }
.card-flood:hover span,
.card-flood:focus-visible span { color: #ffffff; }

/* Rand im Hover zuruecknehmen, sonst liegt eine graue Linie auf dem Blau */
.card-flood:hover,
.card-flood:focus-visible { border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
	.card-flood::before { transition: none; }
	.card-flood:hover::before,
	.card-flood:focus-visible::before { transform: scale(26); }
	.card-flood::after { transition: none; }
	.card-flood:hover::after { transform: none; }
}

/* ============================================================================
   3c - LOGO-SLIDER (Marquee)
   ----------------------------------------------------------------------------
   Endlos-Laufband. Der Track enthaelt den Logo-Satz ZWEIMAL; die Animation
   verschiebt um exakt -50%, dadurch ist der Sprung unsichtbar.
   Kanten werden per mask ausgeblendet, damit Logos nicht hart abgeschnitten
   wirken. Hover pausiert, prefers-reduced-motion stoppt komplett - ein
   dauerlaufendes Band ist sonst ein Barriere-Problem (WCAG 2.2.2).
   ============================================================================ */

@keyframes fkt-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.logo-marquee {
	overflow: hidden;
	width: 100%;
	/* Hoehe reservieren: die Logos laden lazy und haben bis dahin KEINE
	   Layout-Box (gemessen 0x0). Ohne min-height klappt das Band zusammen
	   und springt beim Laden auf - vermeidbarer Layout-Shift. */
	min-height: clamp(30px, 3vw, 40px);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.logo-track {
	display: flex;
	align-items: center;
	width: max-content;
	/* CrocoBuilder setzt `:where(.crocoblocks-document .cb-el){max-width:100%}`.
	   Das kappt den Track auf Containerbreite und der Marquee laeuft ins Leere -
	   width:max-content allein genuegt NICHT. */
	max-width: none;
	flex-shrink: 0;
	gap: clamp(40px, 6vw, 88px);
	animation: fkt-marquee 38s linear infinite;
	will-change: transform;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }

/* Wortmarken-Fallback (nur noch fuer Kunden ohne Logo-Datei) */
span.logo-item {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	white-space: nowrap;
	color: var(--ink-soft);
	opacity: .72;
	transition: opacity .25s ease;
}
.logo-marquee:hover span.logo-item { opacity: .9; }

/* Echte Logo-Bilder.
   ACHTUNG: die Klasse sitzt DIREKT am <img> (das image-Element rendert
   <img class="... logo-item">), nicht an einem Wrapper. Ein Selektor
   `.logo-item img` greift deshalb NIE - genau daran lagen die
   unterschiedlichen Groessen.

   Normalisiert wird ueber eine gemeinsame BOUNDING BOX, nicht ueber eine
   feste Hoehe: Logos haben verschiedene Seitenverhaeltnisse und internen
   Weissraum. Breite Wortmarken (Engelbert Strauss) begrenzt die max-width,
   quadratische Marken (equi-com) die max-height - dadurch wirken sie
   optisch gleich gewichtet statt mathematisch gleich hoch. */
img.logo-item {
	/* FESTE Box statt max-* mit auto.
	   Grund: WordPress kann SVG-Dimensionen nicht auslesen - die drei SVG-Logos
	   werden OHNE width/height-Attribute ausgeliefert. Mit `width:auto` hat der
	   Browser vor dem Laden und Parsen des viewBox keine Box, das Logo ist 0x0.
	   Zusammen mit loading="lazy" im Marquee (die duplizierten Elemente gelten
	   nie als sichtbar) erschienen sie deshalb nur manchmal.

	   Mit fester Box + object-fit:contain haengt die Darstellung an nichts
	   Intrinsischem mehr - und alle Logos sitzen garantiert im gleichen Rahmen. */
	/* Box absichtlich BREITER als das breiteste Logo, damit ueberall die HOEHE
	   limitiert und nicht die Breite. Sonst wird eine breite Wortmarke
	   (Bechtle ~199px bei 40px Hoehe) in der Breite beschnitten und verliert
	   Hoehe - dann sind die Logos wieder unterschiedlich gross.
	   Einheitliche Hoehe ist das, was das Auge als "gleich gross" liest. */
	width: clamp(150px, 15vw, 205px);
	height: clamp(30px, 3vw, 40px);
	object-fit: contain;
	object-position: center;
	flex: 0 0 auto;
	display: block;
	filter: grayscale(1);
	opacity: .68;
	transition: filter .25s ease, opacity .25s ease;
}
.logo-marquee:hover img.logo-item { filter: grayscale(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.logo-track {
		animation: none;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: var(--space-md);
	}
	.logo-marquee { mask-image: none; -webkit-mask-image: none; }
}

/* ============================================================================
   3e - MOBILE NAVIGATION: NUR AUSSEHEN, NIE SICHTBARKEIT
   ----------------------------------------------------------------------------
   CrocoBuilders nav-menu-frontend.css steuert die mobile Navigation ueber
   eigene Zustandsklassen:
       .pb-nav.is-collapsed .pb-nav__mobile-panel { position: fixed … }
       .pb-nav.is-collapsed.is-open .pb-nav__mobile-panel { transform: … }
   und die Runtime setzt `hidden` auf .pb-nav__collapse-toggle, solange sie
   NICHT im Collapse-Modus ist.

   FEHLER, DEN ICH HIER GEMACHT HABE: ein `display: flex` auf den Toggle im
   mobile-Breakpoint ueberschreibt dieses `hidden` - dadurch standen Burger UND
   volle Menueliste gleichzeitig im Header (Hoehe 104px statt 77px).

   REGEL: an dieser Komponente NUR Aussehen setzen (Farbe, Rahmen, Radius) und
   ausschliesslich innerhalb von CrocoBuilders Zustandsklassen. `display`,
   `position`, `transform` und `visibility` gehoeren der Runtime.
   ============================================================================ */

.pb-nav.is-collapsed .pb-nav__collapse-toggle {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--gray-medium);
	border-radius: 12px;
	background-color: #ffffff;
	color: var(--ink);
	cursor: pointer;
}
.pb-nav.is-collapsed .pb-nav__mobile-panel {
	background-color: #ffffff;
	padding: var(--space-lg);
	box-shadow: var(--shadow);
}
.pb-nav.is-collapsed .pb-nav__mobile-panel .pb-nav__link {
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	padding-block: 12px;
	display: block;
}
.pb-nav.is-collapsed .pb-nav__mobile-close {
	background: none;
	border: 0;
	font-size: 2rem;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
	align-self: flex-end;
}
/* Die frueher hier stehende Burger-Regel fuer den transparenten Header ist
   ENTFERNT: der Header ist seit 2026-08-06 durchgehend weiss, ein weisser
   Burger waere darauf unsichtbar. Es gilt jetzt die Grundregel oben. */

/* ============================================================================
   3g - FAQ ALS ZWEISPALTIGES GRID
   ----------------------------------------------------------------------------
   Referenz: inspo-04 (Finexa) - nummerierte, gerahmte Zeilen in zwei Spalten
   mit +/- Toggle. Vorher: einspaltiges Accordion ohne Rahmen.

   Gebaut auf dem NATIVEN collection-Element (behavior: accordion), nicht
   nachgebaut: die Runtime liefert aria-expanded, Panel-Toggle und
   Tastaturbedienung. Das Grid sitzt auf `.cb-collection__items--accordion`
   (dem inneren Container), NICHT auf dem Collection-Root - der Root ist nur
   ein Wrapper.

   Nummerierung ueber CSS-Counter statt im Text: bleibt beim Umsortieren oder
   Loeschen einer Frage automatisch korrekt und haelt den Inhalt sauber.
   ============================================================================ */

/* GEAENDERT 2026-08-05 (Kundenfeedback: "das zweispaltige gern einspaltig ueber
   die volle Breite"). Zwei Spalten waren das Problem: FAQ-Antworten sind
   unterschiedlich lang, dadurch entstanden ungleiche Kartenhoehen und ein
   unruhiges, luckenhaftes Raster. Einspaltig ueber die volle Containerbreite
   liest sich ruhiger und laesst die Antworten atmen. */
.faq-grid .cb-collection__items--accordion {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm, 1rem);
	align-items: start;
	counter-reset: fktfaq;
}

.faq-grid .cb-collection__accordion-item {
	counter-increment: fktfaq;
	background: #ffffff;
	border: 1px solid var(--gray-medium);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .3s ease;
}
/* Geoeffneter Zustand wird ueber den Header abgeleitet, nicht ueber eine
   eigene Klasse - die Runtime setzt nur aria-expanded. */
.faq-grid .cb-collection__accordion-item:has(> [aria-expanded="true"]) {
	border-color: var(--primary);
	box-shadow: var(--shadow);
}

.faq-grid .cb-collection__accordion-header {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	padding: var(--space-md);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: var(--text-base);
	line-height: 1.35;
	color: var(--ink);
	transition: color .2s ease;
}
.faq-grid .cb-collection__accordion-header:hover { color: var(--primary-dark); }

/* Nummer */
.faq-grid .cb-collection__accordion-header::before {
	content: counter(fktfaq) ".";
	flex: 0 0 auto;
	min-width: 1.5em;
	color: var(--primary-dark);
	font-weight: 800;
}
/* Toggle-Indikator.
   BEWUSST als Zeichen statt als zwei uebereinanderliegende Gradient-Striche:
   die Variante mit `background-size`-Wechsel + transform-Transition auf einem
   Pseudo-Element liess sich hier nicht zuverlaessig umschalten (Selektor
   matchte, berechneter Stil blieb im Ruhezustand). `content` ist nicht
   animierbar und schaltet daher hart und verlaesslich. */
.faq-grid .cb-collection__accordion-header::after {
	content: "+";
	flex: 0 0 auto;
	margin-left: auto;
	font-family: var(--font-body);
	font-size: 1.5em;
	font-weight: 400;
	line-height: .9;
	color: var(--primary-dark);
}
.faq-grid .cb-collection__accordion-header[aria-expanded="true"]::after {
	content: "\2013"; /* Halbgeviertstrich - optisch ruhiger als ein Minuszeichen */
}

.faq-grid .cb-collection__accordion-panel {
	padding: 0 var(--space-md) var(--space-md);
}
.faq-grid .cb-collection__accordion-panel p { margin: 0; }

/* Auf dunkler Sektion (falls eine FAQ dort landet) */
.on-dark .faq-grid .cb-collection__accordion-item { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.on-dark .faq-grid .cb-collection__accordion-header { color: #ffffff; }
.on-dark .faq-grid .cb-collection__accordion-header::before,
.on-dark .faq-grid .cb-collection__accordion-header::after { color: var(--primary); }

/* ============================================================================
   3f - FOOTER
   ----------------------------------------------------------------------------
   Gleiche Farbwelt wie der dunkle Hero, damit die Seite oben und unten
   zusammengehalten wird. BEWUSST ohne Glow-Drift-Animation: der Footer ist
   dauerhaft im Viewport erreichbar, eine Endlos-Animation dort kostet ohne
   Gestaltungsgewinn GPU-Zeit.

   Der .on-dark-Kontext liefert die Linkfarbe (#9BD5F2) - ohne ihn stuenden die
   Footer-Links im Theme-Blau #1E71B8 auf dunklem Grund und waeren unlesbar.
   ============================================================================ */

.footer-dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--navy-deep);
	background-image:
		radial-gradient(90% 55% at 50% -8%, rgba(30, 113, 184, .40) 0%, rgba(23, 63, 99, 0) 62%),
		radial-gradient(40% 40% at 88% 8%, rgba(54, 169, 225, .16) 0%, rgba(54, 169, 225, 0) 70%);
}
.footer-dark > * { position: relative; z-index: 1; }

/* Spaltenueberschriften: kleine Labels, nicht Ueberschriften-Optik */
.footer-dark h4 {
	font-size: var(--text-sm);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
	font-weight: 600;
}

/* Linklisten */
.footer-dark a:not([class*="btn-"]) {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	transition: color .2s ease;
}
.footer-dark a:not([class*="btn-"]):hover {
	color: #ffffff;
	text-decoration: underline;
	text-decoration-color: var(--primary);
	text-underline-offset: .2em;
}

/* Logo weiss ueberlagern statt in eine weisse Box zu setzen */
.footer-dark .cb-ft_logo {
	filter: brightness(0) invert(1);
	background: none;
	padding: 0;
	border-radius: 0;
	opacity: .92;
}

/* ============================================================================
   4 - HEADER: OBEN TRANSPARENT, BEIM SCROLLEN SCHWEBENDE GLASPILLE
   ----------------------------------------------------------------------------
   GEAENDERT 2026-08-06 (Kundenwunsch). Am Seitenanfang ist der Header komplett
   transparent und randlos, damit der Glow des Heros durchlaeuft. Erst beim
   Scrollen erscheint eine schwebende Glaspille auf Containerbreite, mit
   Abstand nach oben und Pill-Radius wie bei den Buttons.

   WARUM DIE PILLE AUF .cb-header_inner LIEGT und nicht auf .cb-header_root:
   `.cb-header_inner` traegt bereits `.container`, ist also exakt containerbreit.
   Waere die Pille am Root, muesste `max-width` von `none` auf `var(--container)`
   wechseln - und `max-width: none` laesst sich nicht animieren, der Uebergang
   wuerde springen statt zu gleiten.

   STICKY LIEGT AM WRAPPER, nicht am Root: CrocoBuilder verschachtelt
   <header id="crocoblocks-theme-builder-header"> > .__inner > .crocoblocks-document
   > .cb-header_root. Sticky klebt nur innerhalb des Elternelements, und
   `.crocoblocks-document` ist exakt so hoch wie der Header - dort klebte er
   ueber null Pixel. Der Wrapper ist direktes Kind von <body>, dort traegt es.

   Die Template-CSS laedt NACH dieser Datei, deshalb der ID-Selektor.
   ============================================================================ */

#crocoblocks-theme-builder-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* Zustand OBEN: der Header ist da, aber unsichtbar. */
/* Zustand OBEN: weisser Balken mit feiner hellblauer Trennlinie.
   GEAENDERT 2026-08-06 (Kundenwunsch) - vorher war der Header oben komplett
   transparent. Die Linie sitzt am Root (volle Breite), nicht an der Pille,
   damit sie durchlaeuft und nicht auf Containerbreite abbricht. */
#crocoblocks-theme-builder-header .cb-header_root {
	position: static;
	background-color: #ffffff;
	backdrop-filter: none;
	border: 0;
	border-bottom: 1px solid var(--primary);
	box-shadow: none;
	transition: background-color .3s ease, border-color .3s ease;
}

/* Zustand GESCROLLT: der Balken tritt zurueck, die schwebende Pille uebernimmt.
   Ohne das haette man Balken UND Pille gleichzeitig. */
#crocoblocks-theme-builder-header .cb-header_root.is-scrolled {
	background-color: transparent;
	border-bottom-color: transparent;
}

#crocoblocks-theme-builder-header .cb-header_root .cb-header_inner {
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	margin-top: 0;
	transition:
		background-color .3s ease,
		border-color .3s ease,
		box-shadow .3s ease,
		margin-top .3s ease;
}

/* Zustand GESCROLLT: schwebende Pille in Reinweiss.
   GEAENDERT 2026-08-06 (Kundenwunsch): vorher Glaseffekt mit
   `rgba(255,255,255,.72)` + `backdrop-filter`. Jetzt deckendes Weiss - dadurch
   entfaellt auch der @supports-Fallback fuer Browser ohne backdrop-filter, denn
   ohne Transparenz gibt es kein Lesbarkeitsrisiko mehr. */
#crocoblocks-theme-builder-header .cb-header_root.is-scrolled .cb-header_inner {
	margin-top: 0.75rem;
	background-color: #ffffff;
	border-color: var(--gray-medium);
	box-shadow: 0 10px 34px rgba(31, 41, 55, .14);
}

@media (prefers-reduced-motion: reduce) {
	#crocoblocks-theme-builder-header .cb-header_root .cb-header_inner { transition: none; }
}

/* ----------------------------------------------------------------------------
   ADMIN-BAR-VERSATZ
   Die WP-Admin-Bar ist `position: fixed; top: 0` mit z-index 99999 und wuerde den
   Header sonst verdecken. Der Versatz sitzt am Wrapper, weil dort das sticky liegt.
   ---------------------------------------------------------------------------- */
body.admin-bar #crocoblocks-theme-builder-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar #crocoblocks-theme-builder-header { top: 46px; }
}

/* Der Hero wird unter den Header gezogen, damit man durch den oben transparenten
   Header hindurch den Glow des Heros sieht. Ohne diesen Versatz beginnt der Hero
   erst unterhalb des Headers - dann liegt hinter dem transparenten Header nichts
   ausser der weissen Seitenflaeche, und der Effekt geht verloren.
   `--header-h` misst das Skript in sandbox/fkt-design-css.php aus; das
   padding-top gleicht den Versatz wieder aus, damit der Text nicht unter dem
   Header klemmt. */
.hero-offset {
	margin-top: calc(-1 * var(--header-h, 78px));
	padding-top: calc(var(--space-section) + var(--header-h, 78px));
}

/* Der frueher hier stehende Mega-Menue-Block (zweispaltiges Seminare-Dropdown
   mit Trust-Block) ist ENTFERNT: "Ueber uns" ist auf Kundenwunsch eigener
   Top-Level-Menuepunkt geworden, damit gibt es im Seminare-Dropdown kein
   verschachteltes Submenue mehr. Der strukturelle Selektor haette ins Leere
   gezeigt - toter CSS-Code, der eine nicht existierende Struktur beschreibt. */

/* ============================================================================
   SEMINAR-LAUFBAND (Startseite, Sektion "Fuenf Seminare")
   ----------------------------------------------------------------------------
   Drei Karten sichtbar, automatisch durchlaufend.

   WARUM `!important`: CrocoBuilder schreibt das Spalten-Layout des query-loop
   als INLINE STYLE-ATTRIBUT an den Items-Container:
       style="display: grid; grid-template-columns: repeat(3, minmax(0px,1fr));"
   Ein Inline-Attribut schlaegt JEDEN Selektor, unabhaengig von Spezifitaet und
   Ladereihenfolge. Der erste Versuch mit `.cb-el.seminar-laufband` (0,3,0) war
   deshalb wirkungslos - gemessen im Browser: `display` blieb `grid`.
   `!important` ist hier keine Abkuerzung, sondern das einzige Mittel.
   Bewusst nur auf den drei Eigenschaften, die gegen das Attribut kaempfen.

   WARUM NICHT DER NATIVE collection-SLIDER: der kann Autoplay, aber nur mit
   manuell angelegten Items. Die Seminare kommen aus dem CPT - statische Kopien
   haetten doppelte Pflege bedeutet.
   ============================================================================ */

.seminar-laufband > .cb-collection__items--columns {
	display: flex !important;
	grid-template-columns: none !important;
	flex-wrap: nowrap !important;
	gap: var(--space-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	align-items: stretch;
	padding-bottom: 0.5rem;
}
.seminar-laufband > .cb-collection__items--columns::-webkit-scrollbar { display: none; }

/* Drei gleichzeitig sichtbar: Breite = (100% - 2 Luecken) / 3 */
.seminar-laufband > .cb-collection__items--columns > .cb-collection-item {
	flex: 0 0 calc((100% - 2 * var(--space-gap)) / 3);
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
}
@media (max-width: 1024px) {
	.seminar-laufband > .cb-collection__items--columns > .cb-collection-item {
		flex-basis: calc((100% - var(--space-gap)) / 2);
	}
}
@media (max-width: 767px) {
	.seminar-laufband > .cb-collection__items--columns > .cb-collection-item {
		flex-basis: 86%;
	}
}

/* --- Karte ---------------------------------------------------------------
   Die Sektion traegt `.on-dark`. Dort faerbt
   `.on-dark a:not([class*="btn-"])` jeden Link hellblau (Spezifitaet 0,2,1) -
   auf der weissen Karte war der Text dadurch fast unsichtbar. Gemessen:
   color = rgb(155,213,242). Deshalb hier 0,3,0 ueber `.seminar-karte.card`.
   ------------------------------------------------------------------------ */
.on-dark a.seminar-karte.card,
.on-dark .seminar-karte.card h3,
.on-dark .seminar-karte.card span { color: var(--ink); }
.on-dark .seminar-karte.card p { color: var(--ink-soft); }
.on-dark a.seminar-karte.card:hover { color: var(--ink); }

a.seminar-karte.card {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
}
a.seminar-karte.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* Bild randfluessig oben. `display:block` gegen das Inline-Default des img. */
.seminar-karte .cb-pill_img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	flex: 0 0 auto;
}

/* ============================================================================
   HERO: HAKEN-LISTE + H1-ALS-BADGE
   ----------------------------------------------------------------------------
   NEU 2026-08-06 (Kundenwunsch). Die zwei Stat-Karten im Hero ("95%
   Weiterempfehlung", "10+ Jahre Erfahrung") sind entfernt; an ihre Stelle
   tritt im Textblock eine Haken-Liste mit drei Aussagen.

   ZUR UEBERSCHRIFTEN-VERTAUSCHUNG:
   Die semantische H1 ist jetzt das kleine Badge ganz oben - es traegt den
   SEO-Titel und die Klassen `badge-pill badge-h1`. Die optische Ueberschrift
   darunter ist ein H2 mit der Klasse `looks-like-h1`. BEIDE Klassen liegen im
   CrocoBuilder-Designsystem, NICHT hier - damit sie im Builder auswaehlbar
   bleiben und auf den anderen Heros wiederverwendet werden koennen. Hier
   stehen nur Regeln, die eine Design-System-Klasse nicht ausdruecken kann
   (Kindselektoren, Kontextfarben).
   ============================================================================ */

.hero-usp {
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.hero-usp > li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--ink);
}

/* Das SVG bringt keine eigene Groesse mit. Ohne feste Box wuerde es als
   Flex-Item auf die volle Spaltenbreite wachsen - genau der Fehler, der die
   Seminarkarten aufgeblasen hat. Deshalb Fixmass plus `flex: 0 0 auto`.
   Der Selektor greift sowohl direkt als auch ueber einen Wrapper. */
.hero-usp li svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 0.2em;
	color: var(--primary);
}

.hero-usp li > *:not(span) { flex: 0 0 auto; line-height: 0; }
.hero-usp li > span { flex: 1 1 auto; }

/* Auf dunklem Grund (andere Heros, falls die Liste dort spaeter genutzt wird) */
.on-dark .hero-usp > li { color: rgba(255, 255, 255, .88); }
.on-dark .hero-usp li svg { color: #ffffff; }

/* ============================================================================
   HERO-UMBAU 2026-08-06 (Kundenwunsch, zweite Runde)
   ----------------------------------------------------------------------------
   Der Hero beantwortet jetzt WAS wir machen und FUER WEN, nicht mehr eine Frage.
   Die Frage ist eine Sektion tiefer gewandert und traegt dort die Pain-Sektion.

   Aufbau links: Eyebrow > H1 > Schlagwort-Pillen > drei Haken > zwei Buttons.
   Aufbau rechts: Video > Google-Bewertung > Zielgruppen-Karte.

   Die Zielgruppen-Karte sitzt bewusst UNTER DEM VIDEO und nicht als eigenes
   Band unter dem Hero: die rechte Spalte hatte dort ohnehin Leerraum, und die
   Frage "Bin ich hier richtig?" wird damit beantwortet, ohne dass man scrollen
   muss. Ein eigenes Band haette den Hero verlaengert statt ihn zu fuellen.
   ============================================================================ */

/* ---- Schlagwort-Pillen: die fuenf Themen als interne Links ---------------- */

.hero-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin: 0 0 var(--space-md);
}

.hero-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1;
	padding: 0.5rem 0.9rem;
	border-radius: var(--radius-pill);
	border: 1px solid var(--gray-medium);
	background: rgba(255, 255, 255, .72);
	color: var(--primary-dark);
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.hero-pill:hover {
	background: #ffffff;
	border-color: var(--primary);
	transform: translateY(-1px);
	text-decoration: none;
}

/* ---- Zielgruppen-Zeile: eigene volle Zeile unter dem Video ---------------
   GEAENDERT 2026-08-06 (Kundenwunsch). Vorher lag der Block in der rechten
   Spalte unter dem Video und war dadurch schmal und leicht zu uebersehen. Er
   liegt jetzt als eigene Zeile IM SELBEN Container unter dem Hero-Raster und
   laeuft ueber die volle Breite - Label oben, darunter drei gleiche Spalten.
   -------------------------------------------------------------------------- */

.hero-zielgruppen {
	width: 100%;
	margin-top: var(--space-xl);
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	backdrop-filter: saturate(160%) blur(10px);
	border: 1px solid var(--gray-medium);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: var(--space-lg);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--space-xl);
	row-gap: var(--space-md);
	align-items: center;
}

/* Das Label laeuft ueber alle drei Spalten, damit die Frage einmal oben steht
   und nicht in jeder Spalte wiederholt werden muss. */
.hero-zg-label {
	grid-column: 1 / -1;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--primary-dark);
}

a.zielgruppe {
	display: grid;
	grid-template-columns: 34px 1fr;
	align-items: center;
	column-gap: 0.9rem;
	row-gap: 0;
	text-decoration: none;
	color: var(--ink);
	transition: color .2s ease;
}

/* Trennstriche zwischen den Spalten statt Rahmen um jede Spalte - der Block
   soll als eine Einheit lesen, nicht als drei Karten in einer Karte. */
a.zielgruppe + a.zielgruppe {
	border-left: 1px solid var(--gray-medium);
	padding-left: var(--space-xl);
	margin-left: calc(-1 * var(--space-xl) / 2);
}

a.zielgruppe:hover { color: var(--primary-dark); text-decoration: none; }

.zielgruppe svg {
	grid-row: span 2;
	width: 26px;
	height: 26px;
	color: var(--primary);
}

.zielgruppe h3 {
	margin: 0;
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.25;
	color: inherit;
}

.zielgruppe p {
	margin: 0;
	font-size: var(--text-sm);
	line-height: 1.35;
	color: var(--ink-soft);
}

/* ---- Abstaende im Hero-Textblock ---------------------------------------- */

/* Das Eyebrow-Badge stand direkt auf der H1. */
.hero-eyebrow { margin: 0 0 var(--space-lg); }

.hero-pills-lead {
	margin: 0 0 var(--space-2xs);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--ink-soft);
}

@media (max-width: 900px) {
	.hero-zielgruppen {
		grid-template-columns: 1fr;
		row-gap: var(--space-sm);
		padding: var(--space-md);
	}
	a.zielgruppe + a.zielgruppe {
		border-left: 0;
		border-top: 1px solid var(--gray-medium);
		padding-left: 0;
		padding-top: var(--space-sm);
		margin-left: 0;
	}
}

/* ============================================================================
   PAIN-SEKTION: FRAGEN LINKS, ILLUSTRATION RECHTS
   ----------------------------------------------------------------------------
   GEAENDERT 2026-08-06 (Kundenfeedback):
   - Der Strich links vor den Fragen und der Einzug sind RAUS.
   - Die Fragen laufen jetzt in der Body-Schrift wie der Rest der Sektion.
     Vorher standen sie in --font-head, das las sich als Fremdkoerper.
     EINZIGER Schriftwechsel in dieser Sektion ist der Abbinder - der ist
     bewusst als Aussage gesetzt, nicht als Fliesstext.
   - Alle Absaetze tragen dieselbe Farbe (--ink-soft), damit im Textblock
     keine Farbsprünge entstehen. Betonung laeuft ueber Gewicht, nicht Farbe.
   ============================================================================ */

.pain-grid { align-items: center; }

.pain-text { max-width: 60ch; }

.wen-lead {
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: var(--lh-body);
	color: var(--ink-soft);
	margin: 0 0 var(--space-sm);
}
.wen-lead strong { font-weight: 600; color: inherit; }

.wen-badge { margin: 0 0 var(--space-sm); }
.wen-h2 { margin: 0 0 var(--space-md); max-width: 22ch; }

.fragen-lead {
	margin: var(--space-lg) 0 var(--space-sm);
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: 600;
	line-height: var(--lh-body);
	color: var(--ink-soft);
}

/* Kein Rahmen, kein Einzug - nur die Fragezeichen als Marke. */
.fragen-liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xs);
	margin: 0 0 var(--space-lg);
}

.fragen-liste p {
	margin: 0;
	position: relative;
	padding-left: 1.5rem;
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: 600;
	line-height: 1.5;
	color: var(--ink);
}

.fragen-liste p::before {
	content: "?";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--primary);
	font-weight: 800;
}

/* ---- Abbinder mit handgezeichnetem Pfeil -------------------------------- */

.abbinder-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	align-items: center;
	column-gap: var(--space-sm);
	margin-top: var(--space-lg);
}

/* Der Pfeil ist so gezeichnet, dass seine Spitze OHNE Drehung nach rechts auf
   den Satz daneben zeigt. Eine Rotation wuerde die Spitze nur verdrehen. */
.abbinder-pfeil {
	width: 120px;
	height: 88px;
	color: var(--primary);
}

a.wen-abbinder {
	display: block;
	margin: 0;
	font-family: var(--font-head);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: var(--lh-snug);
	color: var(--ink);
	text-decoration: none;
	max-width: 24ch;
	transition: color .2s ease;
}
a.wen-abbinder:hover { color: var(--primary-dark); text-decoration: none; }

/* ---- Illustration rechts ------------------------------------------------ */

.pain-bild {
	display: flex;
	justify-content: center;
	align-items: center;
}

.pain-illu {
	width: 100%;
	max-width: 100%;
	height: auto;
	color: var(--primary);
}

@media (max-width: 900px) {
	.pain-illu { max-width: 320px; }
	.abbinder-row { grid-template-columns: 84px 1fr; }
	.abbinder-pfeil { width: 84px; height: 62px; }
}

/* Sanftes Scrollen fuer den Anker-Sprung zu den Seminaren, mit Versatz fuer
   den klebenden Header - sonst verschwindet die Ueberschrift darunter. */
html { scroll-behavior: smooth; }
#seminare { scroll-margin-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================================
   TELEFONNUMMER IM HEADER
   ----------------------------------------------------------------------------
   NEU 2026-08-06 (Kundenwunsch). Steht rechts direkt vor dem Kontakt-Button.
   Unter 900px ausgeblendet: dort gibt es den Burger, und die Nummer wuerde
   Logo und Button auf schmalen Geraeten zusammendruecken.
   ============================================================================ */

.header-tel {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--primary-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}

.header-tel::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.8%2019.8%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.12%204.2%202%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.8%2019.8%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.12%204.2%202%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.header-tel:hover { color: var(--primary); text-decoration: none; }

@media (max-width: 900px) {
	.header-tel { display: none; }
}