/*
 * Mein Abrufschein — Gestaltung
 * Übernommen aus dem Klick-Dummy (vorlage/mein-abrufschein-dummy.html) und für ein
 * Block-Theme angepasst. Die Farb- und Größen-Token kommen aus theme.json; die
 * :root-Variablen hier bilden sie nur auf die kurzen Namen des Dummys ab, damit
 * Klassennamen und Werte aus der Vorlage unverändert weiterverwendbar bleiben.
 *
 * Nicht übernommen: die .page{display:none}-Seitenumschaltung des Dummys. Die war
 * nur nötig, weil der Dummy alle Seiten in einer Datei hielt — in WordPress sind
 * das echte Seiten.
 */

:root {
	--navy: var(--wp--preset--color--navy, #0F2C4C);
	--navy2: var(--wp--preset--color--navy-dark, #163a63);
	--blue: var(--wp--preset--color--blue, #1B63C4);
	--blue-soft: var(--wp--preset--color--blue-soft, #eaf1fb);
	--gold: var(--wp--preset--color--gold, #D98A1F);
	--gold-soft: var(--wp--preset--color--gold-soft, #fbf1e2);
	--green: var(--wp--preset--color--green, #12A150);
	--ink: var(--wp--preset--color--ink, #17222f);
	--muted: var(--wp--preset--color--muted, #5b6b7e);
	--bg: var(--wp--preset--color--base, #ffffff);
	--alt: var(--wp--preset--color--alt, #f5f8fc);
	--line: var(--wp--preset--color--line, #e4eaf1);
	--shadow: 0 10px 30px rgba(15, 44, 76, .08);
	--shadow-lg: 0 20px 50px rgba(15, 44, 76, .14);
	--radius: 14px;
	--maxw: 1140px;
}

html { scroll-behavior: smooth; }

/* Schrift laut Vorlage/frontend-styleguide.md: Fraunces fuer H1/H2,
   IBM Plex Sans fuer alles andere. Selbst gehostet, kein Google-CDN.
   Die Familien selbst registriert theme.json - hier nur der Feinschliff. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Tabellenziffern ueberall dort, wo Zahlen untereinander stehen. Sonst
   springen die Spalten, weil Proportionalziffern verschieden breit sind. */
.savings-card, .price-anchor, table.rate, .amt, .big,
.savings-card .row, .price-box, .disc {
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

/* Der Dummy-Wrapper. Blöcke nutzen stattdessen .wp-block-group.alignwide. */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.gold { color: var(--gold); }

/*
 * Hier standen `section.block { padding: 76px 0 }` und
 * `section.block.alt { background: var(--alt) }` aus dem Klick-Dummy. Beide
 * haben nie gegriffen: Der Dummy baute `<section class="block">`, die
 * Blockmuster rendern `<div class="wp-block-group … block">`. Gemessen sind es
 * 45 solcher Elemente pro Seite und null Treffer für den Selektor.
 *
 * Sie sind entfernt statt korrigiert, weil ein blosses Anpassen des Selektors
 * die Seiten sichtbar umbauen würde: Alle Abschnitte bekämen 76px Polsterung
 * (heute trägt sie der Blockabstand von 24px), und jeder zweite einen grauen
 * Hintergrund. Das ist eine Gestaltungsentscheidung, keine Fehlerbehebung —
 * sie steht als offener Punkt im Projektgedächtnis.
 */

.eyebrow {
	display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .13em;
	text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.lead { font-size: 1.18rem; color: var(--muted); max-width: 640px; }
.sec-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }

/* ---------- Schaltflächen ----------
   Gilt für eigene .btn-Elemente UND für Gutenberg-Buttons, damit im Editor
   gesetzte Buttons ohne Zusatzklasse schon richtig aussehen. */
.btn,
.wp-block-button__link {
	display: inline-flex; align-items: center; gap: .5em; border-radius: 10px;
	padding: 14px 26px; font-weight: 700; font-size: 1rem; cursor: pointer;
	border: 2px solid transparent; text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary,
.wp-block-button:not(.is-style-outline):not(.is-gold):not(.is-ghost):not(.is-light) .wp-block-button__link {
	background: var(--navy); color: #fff;
}
.btn-primary:hover,
.wp-block-button:not(.is-style-outline):not(.is-gold):not(.is-ghost):not(.is-light) .wp-block-button__link:hover {
	background: var(--navy2); transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none;
}
.btn-gold, .wp-block-button.is-gold .wp-block-button__link { background: var(--gold); color: #fff; }
.btn-gold:hover, .wp-block-button.is-gold .wp-block-button__link:hover { background: #c2760f; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost, .wp-block-button.is-ghost .wp-block-button__link { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover, .wp-block-button.is-ghost .wp-block-button__link:hover { border-color: var(--navy); transform: translateY(-2px); }
.btn-light, .wp-block-button.is-light .wp-block-button__link { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); }
.btn-light:hover, .wp-block-button.is-light .wp-block-button__link:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); }

/* ---------- Kopfbereich ----------

   Der Template-Part-Block legt um jeden Part noch einen eigenen Kasten:
   <div class="wp-block-template-part"><header class="site-header">.
   Dieser Kasten ist exakt so hoch wie der Kopf - und damit war
   `position:sticky` am Kopf wirkungslos, weil ein klebendes Element
   nur innerhalb seines Elternkastens wandern kann. Es sah aus wie ein
   fehlendes Sticky, war aber ein zu enger Rahmen.

   `display:contents` nimmt dem Wrapper seinen Kasten, ohne ihn zu
   entfernen: Kopf und Fuss werden damit direkte Kinder von
   .wp-site-blocks, und der Kopf klebt ueber die ganze Seitenlaenge.
   Die Landmarken <header>/<footer> stecken im Part selbst, deshalb geht
   dabei keine verloren. */
.wp-block-template-part { display: contents; }

header.site, .site-header {
	position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
	transition: box-shadow .2s ease;
}

/* Der Milchglas-Effekt gilt erst ab der Breite, ab der es kein
   Ueberlagerungsmenue mehr gibt.

   Grund ist kein Geschmack, sondern eine Regel des Browsers: `backdrop-filter`
   macht das Element zum Bezugsrahmen fuer `position:fixed` seiner Nachfahren.
   Das Ueberlagerungsmenue des Navigationsblocks ist genau so ein fixiertes
   Kind - es war dadurch im Kopfkasten gefangen statt bildschirmfuellend.
   Sichtbar war das als weisser Streifen am oberen Rand, in dem nur der erste
   Menuepunkt und das Schliesskreuz standen.

   600px ist die Schwelle, ab der der Navigationsblock von "Ueberlagerung" auf
   "Reihe" umschaltet. Darueber gibt es kein fixiertes Kind mehr, und der
   Effekt kann bleiben. */
@media (min-width: 600px) {
	header.site, .site-header { backdrop-filter: blur(10px); }
}

/* Die Trennlinie unter der Navigation ist weg: auf weissem Grund wirkte sie
   wie ein versehentlich stehen gebliebenes <hr>. Abgesetzt wird der Kopf
   stattdessen erst, wenn wirklich Inhalt darunter durchlaeuft - dann traegt
   ihn ein weicher Schatten statt einer harten Kante. */
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(15, 44, 76, .10); }
.nav { display: flex; align-items: center; gap: 18px; min-height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--navy); font-size: 1.15rem; }
.brand img { max-height: 44px; width: auto; display: block; }
.brand small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }

.nav-links, .site-header .wp-block-navigation__container { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav-links a, .site-header .wp-block-navigation-item__content {
	color: var(--ink); font-weight: 600; font-size: .93rem; padding: 9px 12px; border-radius: 8px; text-decoration: none;
}
.nav-links a:hover, .site-header .wp-block-navigation-item__content:hover { background: var(--blue-soft); color: var(--navy); text-decoration: none; }
.nav-links a.active,
.site-header .current-menu-item > .wp-block-navigation-item__content { color: var(--navy); background: var(--blue-soft); }

/* Das Logo ist ein Querformat-Schriftzug (867x210). Die Blockangabe `width`
   steuert nur die Breite; ohne Höhendeckel wird der Kopf sonst so hoch wie
   das Bild. */
.site-header .wp-block-site-logo img { max-height: 44px; width: auto; }

/* Die Kopf-Schaltfläche ist kompakter als eine Schaltfläche im Fließtext,
   sonst passt die Zeile bei 1140px nicht mehr in eine Reihe. */
.site-header .nav-cta .wp-block-button__link { padding: 10px 18px; font-size: .93rem; }

@media (max-width: 1200px) {
	.site-header .wp-block-navigation-item__content { padding: 9px 8px; font-size: .89rem; }
}

/* ---------- Überlagerungsmenü ----------
   Im geöffneten Vollbildmenü gelten die Regeln der Kopfzeile nicht mehr:
   Dort schiebt `margin-left:auto` die Liste nach rechts, was in einer
   bildschirmfüllenden Überlagerung wie ein Fehler aussieht. Hier stehen die
   Einträge linksbündig, größer und mit Zeilen, die man mit dem Daumen trifft. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 84px 26px 40px;
}

/* Die Liste ist im Überlagerungsmenü ein Flex-Element und damit nur so breit
   wie ihr längster Eintrag — sie hing deshalb am rechten Rand, obwohl die
   Ausrichtung schon zurückgesetzt war. Sie braucht ausdrücklich die volle
   Breite, sonst nützt die Ausrichtung nichts. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	margin-left: 0;
	gap: 2px;
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 14px 12px;
	font-size: 1.1rem;
	font-weight: 600;
	border-radius: 10px;
	border-bottom: 1px solid var(--line);
}

.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--navy);
	background: var(--blue-soft);
}

/* ---------- Hero ---------- */
.hero { position: relative; background: linear-gradient(160deg,#0d2745,#17406f); color: #fff; overflow: hidden; }
.hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(600px 300px at 85% 10%, rgba(217,138,31,.22), transparent 60%),
		radial-gradient(500px 300px at 10% 90%, rgba(27,99,196,.35), transparent 60%);
}
.hero > .wrap, .hero > .wp-block-group { position: relative; }
.hero .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; padding: 84px 0 90px; }
.hero h1, .hero h2 { color: #fff; }
.hero .lead { color: #d7e3f2; }
.hero .badge {
	display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.22); border-radius: 100px; padding: 7px 15px; font-size: .85rem; margin-bottom: 22px;
}
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.hero .subnote { margin-top: 18px; font-size: .85rem; color: #a9bdd6; }

/* Die Ersparnis-Karte steht auf dunkelblauem Grund. Der uebliche Schatten
   (--shadow-lg) ist selbst navy-getoent und damit dort schlicht unsichtbar -
   die Karte klebte flach im blauen Raum. Sie braucht deshalb einen echten
   schwarzen Schatten und eine helle Haarlinie als Kante. */
.savings-card {
	background: #fff; color: var(--ink); border-radius: 18px; padding: 30px;
	box-shadow: 0 26px 60px rgba(0,0,0,.34), 0 4px 14px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.14);
}
.savings-card .big { font-size: 3.6rem; font-weight: 800; color: var(--navy); line-height: 1; }
/* Beim Hochzaehlen wechselt die Zeichenzahl - Tabellenziffern halten die
   Grundlinie ruhig, damit nichts zappelt. */
.savings-card .big span { font-variant-numeric: tabular-nums; }
.savings-card .big span { color: var(--gold); }
.savings-card .row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.savings-card .row:last-child { border-bottom: 0; }
.savings-card .row b { color: var(--navy); }
.disc { font-size: .72rem; color: var(--muted); margin-top: 12px; }

/* ---------- Vertrauensleiste ---------- */
.strip { background: var(--navy); color: #cfe0f2; }
.strip .wrap { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; padding: 18px 22px; font-size: .92rem; font-weight: 600; }
.strip .wrap span { display: flex; align-items: center; gap: 8px; }

/* ---------- Karten-Raster ----------

   Der Spalten-Block von WordPress bringt sein eigenes `display:flex` mit, und
   zwar aus einer Regel derselben Stärke wie `.grid` — welche gewinnt, hing
   damit an der Ladereihenfolge, und es gewann WordPress. Folge: Ein Raster mit
   18 Modellen stand als EINE Flex-Zeile da, jede Karte 102px breit und
   unlesbar. `grid-template-columns` war gesetzt und wirkungslos, weil das
   Element gar kein Raster war.

   Die doppelte Klasse hebt die Stärke an; damit gewinnt die Absicht des
   Themes unabhängig von der Reihenfolge. */
.wp-block-columns.grid { display: grid; }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #cfe0f5; }
.ico { width: 52px; height: 52px; border-radius: 12px; background: var(--blue-soft); display: grid; place-items: center; margin-bottom: 16px; }
.ico.gold { background: var(--gold-soft); }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 1.15rem; margin-bottom: 14px; }

/* ---------- Zwei Wege ---------- */
.way { border-radius: var(--radius); padding: 30px; border: 1px solid var(--line); background: #fff; }
.way.b { background: var(--navy); color: #fff; border-color: var(--navy); }
.way.b h2, .way.b h3 { color: #fff; }
.way .tag {
	display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	padding: 5px 11px; border-radius: 100px; background: var(--blue-soft); color: var(--navy); margin-bottom: 14px;
}
.way.b .tag { background: rgba(255,255,255,.16); color: #fff; }
.waylist { list-style: none; padding: 0; margin: 16px 0 0; }
.waylist li { position: relative; padding: 8px 0 8px 32px; }
.waylist li::before {
	content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--green); box-shadow: 0 0 0 4px rgba(18,161,80,.15);
}
.way.b .waylist li::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(217,138,31,.25); }

/* ---------- Häkchenlisten ---------- */
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding: 9px 0 9px 34px; }
.checks li::before {
	content: "✓"; position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--green); color: #fff; font-size: .8rem; font-weight: 800; display: grid; place-items: center;
}
.checks.warn li::before { content: "!"; background: var(--gold); }

/* ---------- Marken-Pillen ---------- */
.brands { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.brand-pill { padding: 12px 22px; border: 1px solid var(--line); border-radius: 100px; font-weight: 700; color: var(--navy); background: #fff; transition: .15s; }
.brand-pill:hover { border-color: var(--navy); transform: translateY(-2px); }
.brand-pill.soon { color: var(--muted); font-weight: 600; border-style: dashed; }

/* ---------- Tabelle ---------- */
table.rate { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.rate th, table.rate td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); }
table.rate th { background: var(--navy); color: #fff; font-size: .9rem; }
table.rate td b { color: var(--gold); font-size: 1.05rem; }
table.rate tr:last-child td { border-bottom: 0; }
table.rate td:first-child { font-weight: 600; color: var(--navy); }
.pramie { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--green); background: #e7f7ee; padding: 4px 11px; border-radius: 100px; white-space: nowrap; }

/* ---------- Formulare ----------

   Ohne `box-sizing: border-box` rechnet der Browser Innenabstand und Rahmen
   ZUSÄTZLICH zur Breite. Ein Feld mit `width:100%`, 14px Innenabstand und 1px
   Rahmen wurde damit 30px breiter als sein Kasten.

   Sichtbar war das gleich dreifach: Die Felder standen rechts über den
   Formularrand hinaus; in zweispaltigen Zeilen ragte das linke Feld hinter
   den Anfang des rechten, sodass die Spalten aneinanderzukleben schienen,
   obwohl zwischen den Kästen 20px Abstand lagen; und das Textfeld für das
   Anliegen stiess rechts an den Rand. Eine Ursache, drei Fehlerbilder.

   Bewusst auf Formularelemente begrenzt statt als globaler Reset: Die
   restlichen Abstände des Klick-Dummys sind auf `content-box` gerechnet. */
input, select, textarea, button { box-sizing: border-box; }

.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--navy); }
.field input, .field select, .field textarea {
	width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px;
	font-size: 1rem; font-family: inherit; background: #fbfdff; transition: .15s;
}

/* Ankreuzfelder sind keine Textfelder. `width:100%` traf sie mit — das
   Kästchen wurde formularbreit und stand dadurch scheinbar mittig in der
   Zeile. Beschriftung und Kästchen stehen jetzt als Zeile nebeneinander,
   linksbündig, und eine zweite Textzeile rückt nicht unter das Kästchen. */
.field input[type="checkbox"],
.field input[type="radio"] {
	width: auto;
	flex: none;
	margin: 4px 0 0;
}

.field label:has(> input[type="checkbox"]),
.field label:has(> input[type="radio"]) {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	color: var(--ink);
}

/* Die Absendeschaltfläche steht am Ende des Formulars rechts — dort, wo der
   Blick nach dem Ausfüllen der letzten Zeile ohnehin ankommt. */
.form > button[type="submit"],
.form > .wp-element-button {
	display: block;
	margin-left: auto;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.field .hint { font-size: .78rem; color: var(--muted); margin-top: 5px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #b32d2e; }
.field .err { font-size: .8rem; color: #b32d2e; margin-top: 5px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.upload { border: 2px dashed var(--line); border-radius: 11px; padding: 22px; text-align: center; color: var(--muted); cursor: pointer; transition: .15s; }
.upload:hover { border-color: var(--blue); background: var(--blue-soft); color: var(--navy); }
.notice { background: var(--gold-soft); border: 1px solid #efd7ad; border-radius: 10px; padding: 14px 16px; font-size: .9rem; color: #7a5410; margin-bottom: 18px; }
.price-box { background: var(--blue-soft); border-radius: 11px; padding: 18px 20px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.price-box .amt { font-size: 1.8rem; font-weight: 800; color: var(--navy); }

/* Unterschriftenfeld */
.sigpad { border: 1px solid var(--line); border-radius: 9px; background: #fbfdff; touch-action: none; width: 100%; height: 180px; display: block; cursor: crosshair; }
.sigpad-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 12px; }

/* ---------- Händlerverzeichnis ---------- */
.finder-bar { display: flex; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); }
.finder-bar input { flex: 1; min-width: 180px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; font-size: 1rem; }
.dealer { display: flex; justify-content: space-between; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; transition: .15s; }
.dealer:hover { border-color: #cfe0f5; box-shadow: var(--shadow); }
.dealer .badge2 { font-size: .72rem; font-weight: 700; color: var(--green); background: #e7f7ee; padding: 4px 10px; border-radius: 100px; }

/* Karten-Platzhalter bis zur Einwilligung */
.map-consent { background: var(--alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; text-align: center; }
.map-consent p { max-width: 520px; margin: 0 auto 18px; color: var(--muted); font-size: .93rem; }
.map-frame { width: 100%; min-height: 420px; border: 0; border-radius: var(--radius); }

/* ---------- FAQ ----------

   Zwei Bauformen, dieselbe Optik. Der Klick-Dummy brachte ein handgebautes
   Akkordeon aus <button class="faq-q"> und <div class="faq-a"> mit; die Muster
   des Themes nutzen dagegen den nativen Details-Block, weil der ohne
   JavaScript funktioniert und im Editor pflegbar ist.

   Gestaltet war bisher nur die erste Bauform. Auf /abrufschein/ und /faq/ stand
   deshalb ein nackter <details>-Block: Kasten ja, aber ohne Innenabstand, ohne
   Trennung, ohne Pfeil - genau das "hier fehlt das Layout". */
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }

/* -- Native Details-Variante -- */
details.faq-item { padding: 0; }
details.faq-item > summary {
	padding: 18px 22px; font-weight: 700; color: var(--navy); cursor: pointer;
	font-size: 1rem; list-style: none; position: relative; padding-right: 54px;
	transition: background .15s ease;
}
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary:hover { background: var(--alt); }
details.faq-item > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

/* Pfeil aus zwei Strichen statt eines Zeichens - so trifft er in jeder
   Schrift dieselbe Groesse und dreht sauber um seinen Mittelpunkt. */
details.faq-item > summary::after {
	content: ""; position: absolute; right: 22px; top: 50%;
	width: 10px; height: 10px; margin-top: -7px;
	border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
	transform: rotate(45deg); transition: transform .2s ease;
}
details.faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: -3px; }
details.faq-item[open] > summary { background: var(--alt); }

details.faq-item > :not(summary) { padding-left: 22px; padding-right: 22px; }
details.faq-item > summary + * { margin-top: 16px; }
details.faq-item > :last-child { margin-bottom: 18px; }
details.faq-item p { color: var(--muted); }
.faq-q { padding: 18px 22px; font-weight: 700; color: var(--navy); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; background: none; border: 0; text-align: left; font-size: 1rem; font-family: inherit; }
.faq-q:hover { background: var(--alt); }
.faq-q .chev { transition: .2s; flex: none; color: var(--gold); font-size: 1.3rem; }
.faq-item.open .chev { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; padding: 0 22px; }
.faq-item.open .faq-a { max-height: 340px; padding-bottom: 20px; }

/* ---------- SEO-Landingpage ---------- */
.door-hero { background: linear-gradient(160deg,#17406f,#0d2745); color: #fff; border-radius: var(--radius); padding: 44px; position: relative; overflow: hidden; }
.door-hero .eyebrow { color: #ffd79a; }
.door-hero h1, .door-hero h2 { color: #fff; }

/* ---------- CTA-Band ---------- */
.cta-band { background: linear-gradient(135deg,var(--navy),var(--blue)); color: #fff; border-radius: 20px; padding: 52px; text-align: center; box-shadow: var(--shadow-lg); }
.cta-band h2 { color: #fff; }
.cta-band p { color: #d7e3f2; max-width: 560px; margin: 0 auto 26px; }

/* ---------- Seitenkopf ---------- */
.pagehead { background: var(--alt); border-bottom: 1px solid var(--line); padding: 52px 0; }
.breadcrumb { font-size: .83rem; color: var(--muted); margin-bottom: 10px; }

/* ---------- Fußbereich ---------- */
footer.site, .site-footer { background: var(--navy); color: #b9cbe1; padding: 56px 0 26px; font-size: .92rem; }
.site-footer h4, footer.site h4 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.site-footer a, footer.site a { color: #b9cbe1; text-decoration: none; }
.site-footer a:hover, footer.site a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 34px; }
.legal { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; font-size: .8rem; color: #8ba3c0; line-height: 1.7; }

/* Die Spalten-Navigationen im Fuß stehen untereinander; der Navigationsblock
   bringt keine eigenen Abstände mit. */
.site-footer .wp-block-navigation { font-size: .92rem; }
.site-footer .wp-block-navigation__container { gap: 8px; }
.site-footer .wp-block-navigation-item__content { text-decoration: none; }
.site-footer .wp-block-navigation-item__content:hover { color: #fff; text-decoration: underline; }
.site-footer .current-menu-item > .wp-block-navigation-item__content { color: #fff; }

/* Branchen-Streifen: eine breite, umbrechende Linkreihe als Abschluss des
   Fusses. Der Rechtshinweis darueber ist entfallen; damit ist dies die
   letzte Reihe und braucht keinen Abstand nach unten mehr. */
.foot-branchen { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; }
/* Zentriert: Die Reihe bricht je nach Breite auf zwei oder drei Zeilen um.
   Linksbündig endete die letzte Zeile dann irgendwo in der Mitte und sah aus
   wie abgeschnitten. */
.foot-branchen .wp-block-navigation__container { gap: 6px 20px; flex-wrap: wrap; justify-content: center; }
.foot-branchen .wp-block-navigation-item__content { font-size: .86rem; }
.foot-branchen h4 { text-align: center; }

/* ---------- Einblenden beim Scrollen ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Wer Bewegung reduziert haben will, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	.btn:hover, .card:hover, .wp-block-button__link:hover { transform: none; }
}

/* ---------- Umbruch ---------- */
@media (max-width: 900px) {
	.hero .hero-grid { grid-template-columns: 1fr; gap: 34px; padding: 56px 0 62px; }
	.g2, .g3, .g4, .row2, .foot-grid { grid-template-columns: 1fr; }
	.cta-band, .door-hero { padding: 32px 22px; }
}

/* ---------- Duotone-Icons ----------
   Gold-Fläche und Navy-Kontur stecken im SVG; die Kontur nutzt currentColor,
   damit ein Icon auf dunklem Grund einfach hell wird. */
.ico-svg { width: 1.15em; height: 1.15em; vertical-align: -0.18em; color: var(--navy); flex: none; }
.ico .ico-svg { width: 26px; height: 26px; }
.way.b .ico-svg,
.cta-band .ico-svg,
.door-hero .ico-svg,
.hero .ico-svg { color: #fff; }

/* ---------- Bildstrecke Händler-Walkthrough ----------
   Grundzustand ist die Ansicht OHNE JavaScript: alle Schritte untereinander,
   Bedienelemente unsichtbar. Erst .is-enhanced (gesetzt von slideshow.js)
   schaltet auf Einzelschritt um. So sieht niemand einen leeren Kasten,
   wenn das Skript nicht lädt. */
/* Container */
.wt { border: 1px solid var(--line); border-radius: var(--radius);
      background: #fff; padding: 22px; box-shadow: var(--shadow); }

/* Die Karte ist 1096px breit, ihre Kinder waren es nicht: `.wt` ist eine
   verschachtelte Gruppe mit "constrained"-Layout ohne eigene Breitenangabe,
   und damit deckelt WordPress alles darin auf die globale Lesebreite von
   760px. Sichtbar wurde das an der Reiterleiste — sie braucht 940px und
   bekam eine Bildlaufleiste, obwohl im Kasten 1096px zur Verfuegung standen.
   Die Aufnahmen waren aus demselben Grund kleiner als noetig.

   Aufgehoben wird der Deckel nur dort, wo Breite etwas bringt. Der
   Fliesstext in den Schritten behaelt seine Lesebreite; ueber 1000px lange
   Zeilen liest niemand gern. */
.wt > .wt-nav,
.wt > .wt-controls,
.wt > .wt-slide,
.wt .wt-slide > .wt-shot { max-width: none; }
.wt:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Punktnavigation und Bedienleiste: ohne JS unsichtbar */
.wt-nav, .wt-controls { display: none; }
/* Die Reiter stehen in EINER Reihe. Vorher durften sie umbrechen und
   schrumpfen — dadurch brach der Text innerhalb eines Reiters um
   ("Abrufschein / anfordern"), und die Leiste las sich nicht mehr als Reihe
   von fünf Schritten. Passt sie nicht, wird waagerecht gescrollt; das ist
   auf schmalen Geräten das übliche und erwartete Verhalten. */
.wt.is-enhanced .wt-nav { display: flex; flex-wrap: nowrap; gap: 8px;
      overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
      border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 20px; }
.wt.is-enhanced .wt-controls { display: flex; align-items: center; gap: 14px;
      justify-content: space-between; margin-top: 20px; }

/* Reiter/Punkte */
.wt-dot { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
      border: 1px solid var(--line); border-radius: 100px; background: #fff;
      color: var(--muted); font-weight: 600; font-size: .9rem; cursor: pointer;
      white-space: nowrap; flex: none; }
.wt-dot .n { width: 22px; height: 22px; border-radius: 50%; background: var(--blue-soft);
      color: var(--navy); display: grid; place-items: center; font-size: .78rem; font-weight: 800; }
.wt-dot.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.wt-dot.is-active .n { background: var(--gold); color: #fff; }

/* Schritt */
.wt-slide + .wt-slide { margin-top: 34px; }            /* nur ohne JS relevant */
.wt.is-enhanced .wt-slide + .wt-slide { margin-top: 0; }
.wt-slide:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.wt-step { font-size: .78rem; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }

/* Aufnahme */
.wt-shot img { display: block; width: 100%; height: auto; border-radius: 10px;
      border: 1px solid var(--line); background: var(--alt); }

/* Bedienleiste */
.wt-arrow { padding: 10px 18px; border-radius: 9px; border: 1px solid var(--navy);
      background: #fff; color: var(--navy); font-weight: 700; cursor: pointer; }
.wt-arrow[disabled] { opacity: .4; cursor: default; }
.wt-status { margin: 0; font-size: .88rem; color: var(--muted); text-align: center; flex: 1; }

/* Einblenden beim Schrittwechsel, nur wenn erwünscht */
.wt.is-enhanced .wt-slide.is-active { animation: wt-fade .25s ease both; }
.wt.is-static .wt-slide.is-active { animation: none; }
@keyframes wt-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wt .wt-slide.is-active { animation: none; } }

@media (max-width: 720px) {
  .wt { padding: 16px; }
  .wt.is-enhanced .wt-controls { flex-wrap: wrap; }
  .wt-status { order: 3; flex-basis: 100%; }
}