/*
 * bd-sections.css - nur die Luecken, die theme.json nicht schliesst.
 * Regel: keine Hexwerte, keine freien Pixelzahlen. Jeder Wert kommt aus
 * --wp--preset--* (Palette, Groessen, Abstaende) oder --wp--custom--* (Layout,
 * Radius, Schatten, Motion aus theme.json settings.custom). Jede Gruppe traegt
 * den Grund, warum sie hier steht.
 *
 * Aufbau: erst wiederverwendbare Bausteine (Kontext auf dunklem Grund, Stack,
 * Kartengroessen, Haken-Icon, Link-Linie, Platzhalter), dann die Sektionen, die nur
 * noch ihr eigenes Raster mitbringen, dann Motion, dann Mobil.
 *
 * Herkunft: projects/lp-audit-funnel/design-outputs/homepage.css und
 * homepage-v2-additions.css (entschiedener Entwurf vom 08.09.2026).
 */

/* ===== 1. Grundlagen: was theme.json nicht kann (Zeilenhoehe je Groesse, Umbruch, Fokus) ===== */
h1, h2, h3, h4, h5, h6 { text-wrap: pretty; margin: 0; }
.has-display-1-font-size { line-height: var(--wp--custom--line-height--display-1); letter-spacing: var(--wp--custom--letter-spacing--display-1); }
.has-display-2-font-size { line-height: var(--wp--custom--line-height--display-2); letter-spacing: var(--wp--custom--letter-spacing--display-2); }
.has-heading-1-font-size, .has-heading-2-font-size { letter-spacing: -0.02em; }
html { scroll-behavior: smooth; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--wp--preset--color--sage); outline-offset: 3px; border-radius: var(--wp--custom--radius--sm); }

/* ===== 2. Kontext hell oder dunkel: vier lokale Variablen, die jede Regel unten liest. Ein Block auf Navy (Karte, Split-Seite, Leiste, Abschluss, Footer) schaltet sie um, danach braucht kein Element eine eigene Farbregel. ===== */
:root { --bd-hairline: var(--wp--preset--color--line); --bd-ink: var(--wp--preset--color--charcoal); --bd-ink-muted: var(--wp--preset--color--muted); --bd-ink-strong: var(--wp--preset--color--navy); }
.is-style-card-navy, .is-style-bar-navy, .is-navy, .has-navy-background-color { --bd-hairline: var(--wp--custom--on-dark--line); --bd-ink: var(--wp--custom--on-dark--text); --bd-ink-muted: var(--wp--custom--on-dark--text-muted); --bd-ink-strong: var(--wp--preset--color--white); color: var(--bd-ink); }
:is(.is-style-card-navy, .is-navy, .has-navy-background-color) :is(h1, h2, h3, h4, h5, h6, .is-style-number) { color: var(--bd-ink-strong); }
:is(.is-style-card-navy, .is-navy, .has-navy-background-color) :is(.is-style-caption, .bd-dark__cap) { color: var(--bd-ink-muted); }
:is(.is-style-card-navy, .is-navy, .has-navy-background-color) .is-style-lead { color: var(--bd-ink); }
:is(.is-style-card-navy, .is-navy, .has-navy-background-color) .is-style-label { color: var(--wp--preset--color--sand); }
.bd-split__side:not(.is-navy) .is-style-label { color: var(--wp--preset--color--sage); }
.has-navy-background-color :is(.wp-block-site-title, .wp-block-site-title a) { color: var(--bd-ink-strong); }

/* ===== 3. Stack: zentrierter Kopf aus Label, Ueberschrift, Lead, Buttons (Sektionskoepfe, Hero, Abschluss). Abstaende kommen aus dem blockGap des Blocks, hier nur Breiten und zwei Ausnahmen. ===== */
.bd-stack > .is-style-label + * { margin-block-start: var(--wp--preset--spacing--20); }
.bd-stack > .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--32); }
.bd-stack > .has-display-1-font-size, .bd-stack > .has-heading-1-font-size { max-width: var(--wp--custom--measure--heading); }
.bd-stack > .has-display-2-font-size { max-width: var(--wp--custom--content); }
.bd-stack > .is-style-lead { max-width: var(--wp--custom--measure--lead); }
.bd-head { margin-bottom: var(--wp--custom--gap--heading-lg); }

/* ===== 4. Sektionen und Seiten: Abstand oben und unten aus dem Layout-Token, mobil die Mobil-Stufe (theme.json kennt keine Media-Queries) ===== */
.bd-section { padding-top: var(--wp--custom--section--y-lg); padding-bottom: var(--wp--custom--section--y-lg); }
.bd-section--tight { padding-top: 0; }
.bd-page { padding-top: var(--wp--custom--section--y); padding-bottom: var(--wp--custom--section--y); }

/* ===== 5. Karten: Farbe und Rand sind Block Styles (card, card-navy in theme.json), die Groesse ein Zusatz. Karten in Spalten fuellen die Hoehe, Hover hebt sie an. ===== */
.bd-card--sm { border-radius: var(--wp--custom--radius--lg); padding: var(--wp--preset--spacing--24); }
.bd-card--lg { border-radius: var(--wp--custom--radius--xxl); padding: var(--wp--preset--spacing--40); }
.wp-block-column > :is(.is-style-card, .is-style-card-navy) { height: 100%; box-sizing: border-box; }
.is-style-card, .is-style-card-navy { transition: transform var(--wp--custom--motion--dur-card) var(--wp--custom--motion--ease), box-shadow var(--wp--custom--motion--dur-card) var(--wp--custom--motion--ease), border-color var(--wp--custom--motion--dur-card) var(--wp--custom--motion--ease); }
.is-style-card:hover, .is-style-card-navy:hover { transform: translateY(calc(-1 * var(--wp--custom--motion--lift-distance))); box-shadow: var(--wp--custom--shadow--card); }
.is-style-card:hover { border-color: color-mix(in srgb, var(--wp--preset--color--navy) 18%, transparent); }
.is-style-tag { display: inline-block; }

/* ===== 6. Haken-Icon: eine Zeichnung (Kreis plus Winkel) fuer Listen, Band und Kacheln. Groesse und Lage ueber --bd-icon, --bd-icon-x, --bd-icon-y, der Winkel skaliert mit. ===== */
.bd-icon-check, .is-style-check li, .is-style-cross li { --bd-icon: var(--wp--preset--spacing--20); --bd-icon-x: 0px; --bd-icon-y: 0.2em; position: relative; }
:is(.bd-icon-check, .is-style-check li, .is-style-cross li)::before { content: ""; position: absolute; left: var(--bd-icon-x); top: var(--bd-icon-y); width: var(--bd-icon); height: var(--bd-icon); border-radius: 50%; border: 2px solid var(--wp--preset--color--sage); box-sizing: border-box; }
:is(.bd-icon-check, .is-style-check li)::after { content: ""; position: absolute; left: calc(var(--bd-icon-x) + var(--bd-icon) * 0.36); top: calc(var(--bd-icon-y) + var(--bd-icon) * 0.18); width: calc(var(--bd-icon) * 0.22); height: calc(var(--bd-icon) * 0.44); border-right: 2px solid var(--wp--preset--color--sage); border-bottom: 2px solid var(--wp--preset--color--sage); transform: rotate(45deg); }
/* Kreuz-Variante (Vorher-Seite): gleicher Kreis in der Hairline-Farbe, statt Winkel ein Kreuz */
.is-style-cross li::before { border-color: var(--bd-hairline); }
.is-style-cross li::after { content: "\00d7"; position: absolute; left: var(--bd-icon-x); top: var(--bd-icon-y); width: var(--bd-icon); height: var(--bd-icon); line-height: var(--bd-icon); text-align: center; font-family: var(--wp--preset--font-family--heading); color: var(--bd-ink-muted); }
/* Listen-Stile (Block Styles check, cross, inline-dots): Icon links, Titel fett in der Ueberschriftschrift */
.is-style-check, .is-style-cross, .is-style-inline-dots { list-style: none; padding-left: 0; margin: 0; }
.is-style-check li, .is-style-cross li { padding-left: calc(var(--wp--preset--spacing--24) + var(--wp--preset--spacing--12)); }
:is(.is-style-check, .is-style-cross) li strong { font-family: var(--wp--preset--font-family--heading); font-weight: 600; color: var(--bd-ink-strong); }
.is-style-inline-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--12); }
.is-style-inline-dots li + li::before { content: ""; display: inline-block; width: var(--wp--preset--spacing--4); height: var(--wp--preset--spacing--4); border-radius: 50%; background: var(--wp--preset--color--sand); vertical-align: middle; margin-right: var(--wp--preset--spacing--12); }
/* Zeilen-Variante (Vorher/Nachher): Hairline zwischen den Eintraegen, Icon rueckt mit dem Innenabstand */
.bd-rows li { padding-top: var(--wp--preset--spacing--16); padding-bottom: var(--wp--preset--spacing--16); border-top: 1px solid var(--bd-hairline); --bd-icon-y: calc(var(--wp--preset--spacing--16) + 0.2em); }

/* ===== 7. Link-Linie: Navigationslinks bekommen beim Hover eine Linie von links. Farbe, Staerke und Abstand als Variablen, der Footer stellt sie um. ===== */
.wp-block-navigation-item__content { position: relative; --bd-underline: var(--wp--preset--color--sage); --bd-underline-h: 2px; --bd-underline-y: -6px; }
.wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--bd-underline-y); height: var(--bd-underline-h); background: var(--bd-underline); transform: scaleX(0); transform-origin: left; transition: transform var(--wp--custom--motion--dur-card) var(--wp--custom--motion--ease); }
.wp-block-navigation-item__content:hover::after { transform: scaleX(1); }
.bd-footer .wp-block-navigation-item__content { --bd-underline: var(--wp--preset--color--sand); --bd-underline-h: 1px; --bd-underline-y: -4px; color: var(--bd-ink); }

/* ===== 8. Platzhalter bis V7 (Foto, Siegel): gestrichelter Sand-Rahmen ===== */
.bd-placeholder { border: 1px dashed var(--wp--preset--color--sand); background: repeating-linear-gradient(135deg, var(--wp--preset--color--sand-bg) 0 12px, var(--wp--preset--color--bg) 12px 24px); display: flex; align-items: center; justify-content: center; font-family: ui-monospace, Menlo, monospace; font-size: var(--wp--preset--font-size--label); color: var(--wp--preset--color--muted); border-radius: var(--wp--custom--radius--md); }

/* ===== 9. Buttons: Lichtlauf und Schatten (Hover-Farben stehen in theme.json), kleine Variante, Textlink mit Pfeil ===== */
.wp-block-button__link { position: relative; overflow: hidden; transition: background var(--wp--custom--motion--dur-card) var(--wp--custom--motion--ease), color var(--wp--custom--motion--dur-card) var(--wp--custom--motion--ease), transform var(--wp--custom--motion--dur-hover) var(--wp--custom--motion--ease), box-shadow var(--wp--custom--motion--dur-card) var(--wp--custom--motion--ease); }
.wp-block-button:not(.is-style-text-link) .wp-block-button__link:hover { box-shadow: var(--wp--custom--shadow--button-hover); }
.wp-block-button:not(.is-style-text-link) .wp-block-button__link::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--wp--preset--color--white) 45%, transparent) 50%, transparent 100%); transform: skewX(-18deg); transition: left var(--wp--custom--motion--dur-sheen) var(--wp--custom--motion--ease); pointer-events: none; }
.wp-block-button:not(.is-style-text-link) .wp-block-button__link:hover::after { left: 130%; }
.wp-block-button__link:active { transform: translateY(1px); }
.bd-button-sm .wp-block-button__link { padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--small); }
.is-style-text-link .wp-block-button__link { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--8); }
.is-style-text-link .wp-block-button__link::after { content: "\2192"; color: var(--wp--preset--color--sage); transition: transform var(--wp--custom--motion--dur-hover) var(--wp--custom--motion--ease); }
.is-style-text-link .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--navy); box-shadow: none; }
.is-style-text-link .wp-block-button__link:hover::after { transform: translateX(4px); }

/* ===== 10. Navigation: sticky mit Blur, Schatten nach dem ersten Scrollen (Klasse aus bd-motion.js) ===== */
.bd-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--wp--preset--color--white) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--bd-hairline); transition: box-shadow var(--wp--custom--motion--dur-card) var(--wp--custom--motion--ease); }
.bd-nav.is-scrolled { box-shadow: var(--wp--custom--shadow--nav); }
.bd-nav__row { min-height: calc(var(--wp--preset--spacing--64) + var(--wp--preset--spacing--4)); }

/* ===== 11. Sektionen: nur noch das eigene Raster je Sektion ===== */

/* Hero: Punktraster, Halo, Berichtsfenster 12a (eigene Grafik, kein Google-Interface). Akzentfarbe je Kachel und Linie ueber --bd-accent. */
.bd-hero { position: relative; overflow: hidden; padding-top: calc(var(--wp--preset--spacing--80) + var(--wp--preset--spacing--8)); background: var(--wp--preset--color--white); }
.bd-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--bd-hairline) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%); pointer-events: none; }
.bd-hero::after { content: ""; position: absolute; left: 50%; bottom: -520px; width: 1100px; height: 1100px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--wp--preset--color--sand) 42%, transparent), color-mix(in srgb, var(--wp--preset--color--sand) 12%, transparent) 55%, transparent 72%); pointer-events: none; }
.bd-hero__stack { position: relative; z-index: 1; }
.bd-hero__trust { margin-block-start: var(--wp--preset--spacing--28); }
.bd-window { position: relative; z-index: 1; max-width: var(--wp--custom--measure--window); margin: var(--wp--preset--spacing--56) auto -1px; background: var(--wp--preset--color--white); border-radius: var(--wp--custom--radius--xl) var(--wp--custom--radius--xl) 0 0; border: 1px solid var(--bd-hairline); border-bottom: 0; box-shadow: var(--wp--custom--shadow--window); overflow: hidden; }
.bd-window__bar { padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24); border-bottom: 1px solid var(--bd-hairline); background: var(--wp--preset--color--bg); }
.bd-window__bar p { margin: 0; }
.bd-window__title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--label); font-weight: 600; color: var(--bd-ink-strong); }
.bd-window__body { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--24) var(--wp--preset--spacing--4); text-align: left; font-family: var(--wp--preset--font-family--heading); }
.is-accent-navy { --bd-accent: var(--wp--preset--color--navy); }
.is-accent-sage { --bd-accent: var(--wp--preset--color--sage); }
.is-accent-amber { --bd-accent: var(--wp--preset--color--warning); }
.is-accent-sand { --bd-accent: var(--wp--preset--color--sand); }
.bd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--12); margin-bottom: var(--wp--preset--spacing--16); }
.bd-kpi { position: relative; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--lg); padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--16) var(--wp--preset--spacing--12); display: grid; gap: var(--wp--preset--spacing--4); overflow: hidden; background: var(--wp--preset--color--white); color: var(--wp--preset--color--charcoal); }
.bd-kpi::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--bd-accent); }
.bd-kpi span { font-size: var(--wp--preset--font-size--label); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.bd-kpi b { font-size: var(--wp--preset--font-size--number); font-weight: 700; color: var(--wp--preset--color--navy); letter-spacing: var(--wp--custom--letter-spacing--number); line-height: 1; font-variant-numeric: tabular-nums; }
.bd-kpi small { font-size: var(--wp--preset--font-size--label); color: var(--wp--preset--color--muted); }
.bd-kpi small.is-good { color: var(--wp--preset--color--sage); font-weight: 600; }
.bd-chart { border-top: 1px solid var(--bd-hairline); padding-top: var(--wp--preset--spacing--12); }
.bd-chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
.bd-chart__grid { stroke: var(--bd-hairline); stroke-width: 1; }
.bd-chart__line { fill: none; stroke: var(--bd-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bd-chart__dot { fill: var(--bd-accent); stroke: var(--wp--preset--color--white); stroke-width: 2; }
.bd-chart__axis { display: flex; justify-content: space-between; font-size: var(--wp--preset--font-size--label); color: var(--bd-ink-muted); margin-top: var(--wp--preset--spacing--4); }
.bd-chart__legend { display: flex; gap: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--label); color: var(--bd-ink-muted); margin: var(--wp--preset--spacing--8) 0 var(--wp--preset--spacing--4); }
.bd-chart__legend span { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--8); }
.bd-chart__legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--bd-accent); }

/* USP-Band: drei Zusagen, Hairlines zwischen den Spalten, Icon mittig links */
.bd-band { border-top: 1px solid var(--bd-hairline); border-bottom: 1px solid var(--bd-hairline); background: var(--wp--preset--color--white); }
.bd-band__items { gap: 0; }
.bd-band__item { --bd-icon: var(--wp--preset--spacing--28); --bd-icon-y: calc(50% - var(--bd-icon) / 2); padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20) calc(var(--bd-icon) + var(--wp--preset--spacing--16)); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--caption); color: var(--bd-ink-muted); }
.bd-band__item + .bd-band__item { --bd-icon-x: var(--wp--preset--spacing--32); border-left: 1px solid var(--bd-hairline); padding-left: calc(var(--bd-icon-x) + var(--bd-icon) + var(--wp--preset--spacing--16)); }
.bd-band__item p { margin: 0; line-height: 1.45; }
.bd-band__item strong { display: block; font-weight: 600; color: var(--bd-ink-strong); font-size: var(--wp--preset--font-size--small); }

/* Problem: Karten im Sand-Panel mit Sand-Rand, Navy-Leiste darunter */
.bd-pcard { border-color: color-mix(in srgb, var(--wp--preset--color--sand) 35%, transparent); }
.bd-wende { margin-top: var(--wp--preset--spacing--24); }
.bd-wende__text { margin: 0; max-width: var(--wp--custom--content); letter-spacing: -0.01em; }

/* Vorher und Nachher: Split, linke Seite Navy (der Kontext oben schaltet Farben und Hairlines) */
.bd-split { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--wp--custom--radius--xxl); overflow: hidden; border: 1px solid var(--bd-hairline); }
.bd-split__side { padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--48) var(--wp--preset--spacing--40); background: var(--wp--preset--color--white); }
.bd-split__side.is-navy { background: var(--wp--preset--color--navy); }
.bd-split__side > .is-style-label + * { margin-block-start: var(--wp--preset--spacing--16); }
.bd-split__side > h3 + * { margin-block-start: var(--wp--preset--spacing--20); }

/* Der Weg: Linie mit nummerierten Punkten aus CSS-Zaehlern, kein Markup */
.bd-rail { position: relative; counter-reset: bd-step; gap: var(--wp--preset--spacing--28); }
.bd-rail::before { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 1px; background: var(--wp--preset--color--sand); transform-origin: left; }
.bd-rail__step { position: relative; padding-top: calc(var(--wp--preset--spacing--48) + var(--wp--preset--spacing--4)); }
.bd-rail__step::before { counter-increment: bd-step; content: counter(bd-step); position: absolute; left: 0; top: 0; width: var(--wp--preset--spacing--28); height: var(--wp--preset--spacing--28); border-radius: 50%; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); font: 700 var(--wp--preset--font-size--label) var(--wp--preset--font-family--heading); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--wp--preset--color--white); }
.bd-rail__step:last-child::before { background: var(--wp--preset--color--sage); }
.bd-rail__step h3 { margin-bottom: var(--wp--preset--spacing--8); }
.bd-rail__step p { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: var(--wp--custom--line-height--small); }

/* Warum wir: Bento-Raster, Fotokachel ueber zwei Reihen, Haken oben links in den Kacheln, Siegelraster */
.bd-bento { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: var(--wp--preset--spacing--20); }
.bd-bento__person { grid-row: span 2; padding: var(--wp--preset--spacing--20); }
.bd-photo { border-radius: var(--wp--custom--radius--lg); min-height: 300px; overflow: hidden; transition: transform var(--wp--custom--motion--dur-hero-rise) var(--wp--custom--motion--ease); }
.bd-bento__person:hover .bd-photo { transform: scale(1.025); }
/* Portraet als Bildblock: Hoehe und Zoom sitzen am Bild, die Bildunterschrift (KI-Kennzeichnung) steht darunter und wird nie beschnitten */
.wp-block-image.bd-photo { min-height: 0; overflow: visible; border-radius: 0; margin: 0; transition: none; }
.bd-bento__person:hover .wp-block-image.bd-photo { transform: none; }
.wp-block-image.bd-photo img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: 50% 30%; border-radius: var(--wp--custom--radius--lg); transition: transform var(--wp--custom--motion--dur-hero-rise) var(--wp--custom--motion--ease); }
.bd-bento__person:hover .wp-block-image.bd-photo img { transform: scale(1.025); }
.wp-block-image.bd-photo figcaption { margin: var(--wp--preset--spacing--8) 0 0; font-size: var(--wp--preset--font-size--caption); color: var(--bd-ink-muted); text-align: left; }
.bd-bento__ptxt { padding: 0 var(--wp--preset--spacing--8) var(--wp--preset--spacing--8); }
.bd-bento__tile { --bd-icon: var(--wp--preset--spacing--28); --bd-icon-x: var(--wp--preset--spacing--28); --bd-icon-y: var(--wp--preset--spacing--28); padding-top: calc(var(--wp--preset--spacing--28) + var(--wp--preset--spacing--40)); }
.bd-badges { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--8); }
/* Google-Partner-Siegel: offizielles Snippet, Groesse hier statt inline. 96 px hoch, zentriert im freien Raum der Kachel.
   Google verlangt Freiraum von mindestens der halben Siegelhoehe: die 48 px Innenabstand halten ihn auch dort, wo die Kachel keine freie Hoehe hat (Mobil). */
.bd-bento__trust { display: flex; flex-direction: column; }
.bd-partner-badge { margin: auto; padding-block: var(--wp--preset--spacing--48); line-height: 0; }
.bd-partner-badge a { display: inline-block; }
.bd-partner-badge img { display: block; height: var(--wp--preset--spacing--96); width: auto; }
.bd-badges p { min-height: var(--wp--preset--spacing--56); padding: var(--wp--preset--spacing--4); }

/* Zusammenarbeit: Zielgruppenzeile, Liste mit Hairline, Einstiege */
.bd-way__for { font-size: var(--wp--preset--font-size--small); color: var(--bd-ink-muted); }
.bd-way__list { padding-top: var(--wp--preset--spacing--16); border-top: 1px solid var(--bd-hairline); }
.bd-offer__extra { max-width: var(--wp--custom--content); margin: var(--wp--preset--spacing--28) auto 0; }
.bd-offer__cta { margin-top: var(--wp--preset--spacing--24); }
.bd-sub { margin-top: var(--wp--preset--spacing--64); padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--bd-hairline); }
.bd-mini { gap: var(--wp--preset--spacing--20); }

/* Fragen: Details-Bloecke als Akkordeon, Plus dreht sich in Sage */
.bd-acc { max-width: var(--wp--custom--measure--heading); margin-left: auto; margin-right: auto; border-top: 1px solid var(--bd-hairline); }
.bd-acc .wp-block-details { border-bottom: 1px solid var(--bd-hairline); padding: var(--wp--preset--spacing--20) 0; margin: 0; }
.bd-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--24); font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: var(--wp--preset--font-size--heading-5); color: var(--bd-ink-strong); transition: color var(--wp--custom--motion--dur-hover) var(--wp--custom--motion--ease); }
.bd-acc summary::-webkit-details-marker { display: none; }
.bd-acc summary:hover { color: var(--wp--preset--color--sage); }
.bd-acc summary::after { content: ""; flex: none; width: var(--wp--preset--spacing--28); height: var(--wp--preset--spacing--28); border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--navy) 25%, transparent); box-sizing: border-box; background: linear-gradient(var(--wp--preset--color--navy), var(--wp--preset--color--navy)) center / 10px 1.5px no-repeat, linear-gradient(var(--wp--preset--color--navy), var(--wp--preset--color--navy)) center / 1.5px 10px no-repeat; transition: border-color var(--wp--custom--motion--dur-hover) var(--wp--custom--motion--ease), transform var(--wp--custom--motion--dur-card) var(--wp--custom--motion--ease), background var(--wp--custom--motion--dur-hover) var(--wp--custom--motion--ease); }
.bd-acc .wp-block-details[open] summary::after { transform: rotate(180deg); border-color: var(--wp--preset--color--sage); background: linear-gradient(var(--wp--preset--color--navy), var(--wp--preset--color--navy)) center / 10px 1.5px no-repeat; }
.bd-acc .wp-block-details p { margin: var(--wp--preset--spacing--12) 0 0; max-width: var(--wp--custom--content); line-height: 1.65; }
.bd-acc .wp-block-details[open] p { animation: bd-acc-in var(--wp--custom--motion--dur-card) var(--wp--custom--motion--ease) both; }
@keyframes bd-acc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Abschluss und Footer auf Navy: Punktraster, Footer mit Hairline als Trenner */
.bd-dark { position: relative; overflow: hidden; }
.bd-dark::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--wp--custom--on-dark--dots) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000 0%, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%); pointer-events: none; }
.bd-dark__in { position: relative; padding: calc(var(--wp--preset--spacing--96) + var(--wp--preset--spacing--8)) 0 calc(var(--wp--preset--spacing--80) + var(--wp--preset--spacing--8)); }
.bd-dark__cap { margin-block-start: var(--wp--preset--spacing--20); }
.bd-footer { position: relative; border-top: 1px solid var(--bd-hairline); padding-top: var(--wp--preset--spacing--32); padding-bottom: var(--wp--preset--spacing--32); }
.bd-footer__row + .bd-footer__meta { margin-block-start: var(--wp--preset--spacing--12); }
.bd-footer .wp-block-navigation { font-size: var(--wp--preset--font-size--caption); }
.bd-footer .wp-block-navigation__container { gap: var(--wp--preset--spacing--28); }
.bd-footer__meta p { margin: 0; color: var(--bd-ink-muted); }

/* ===== 12. Motion (Runde 13): Hero-Staffelung beim Laden, Linien und Zaehler im Fenster, Scroll-Einstieg ===== */
@keyframes bd-rise { from { opacity: 0; transform: translateY(var(--wp--custom--motion--rise-distance)); } to { opacity: 1; transform: none; } }
@keyframes bd-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Linien ziehen von links auf: Maske statt stroke-dasharray, weil Chrome Strichlaengen bei non-scaling-stroke im Bildschirmmass rechnet und die Linie sonst vor dem Ende abbricht (gemessen 08.09.2026) */
@keyframes bd-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.bd-hero__stack > * { animation: bd-rise var(--wp--custom--motion--dur-hero-rise) var(--wp--custom--motion--ease) both; }
.bd-hero__stack > :nth-child(2) { animation-delay: calc(1 * var(--wp--custom--motion--dur-stagger)); }
.bd-hero__stack > :nth-child(3) { animation-delay: calc(2 * var(--wp--custom--motion--dur-stagger)); }
.bd-hero__stack > :nth-child(4) { animation-delay: calc(3 * var(--wp--custom--motion--dur-stagger)); }
.bd-hero__stack > :nth-child(5) { animation-delay: calc(4 * var(--wp--custom--motion--dur-stagger)); }
.bd-window { animation: bd-rise calc(var(--wp--custom--motion--dur-hero-rise) + 100ms) var(--wp--custom--motion--ease) calc(6 * var(--wp--custom--motion--dur-stagger)) both; }
.bd-chart__lines { animation: bd-draw var(--wp--custom--motion--dur-draw) var(--wp--custom--motion--ease) 1000ms both; }
.bd-chart__dot { animation: bd-rise 300ms var(--wp--custom--motion--ease) 2050ms both; }
/* Zahlen zaehlen hoch (Chrome, Edge, Safari 16.4+, sonst steht die Zahl sofort). Ziel als --n im Markup des HTML-Blocks. */
@property --bd-n { syntax: '<integer>'; initial-value: 0; inherits: false; }
@keyframes bd-count { from { --bd-n: 0; } to { --bd-n: var(--n); } }
.bd-kpi b[style*="--n"] { counter-reset: bdn var(--bd-n); animation: bd-count var(--wp--custom--motion--dur-count) var(--wp--custom--motion--ease) 900ms both; }
.bd-kpi b[style*="--n"]::before { content: counter(bdn); }

/* Scroll-Einstieg, an den Scrollweg gekoppelt wie in der Claude-Design-Vorschau (Runde 13): Sektionen und Karten steigen ueber eine laengere Strecke ein und laufen beim Hochscrollen zurueck. Nur wo der Browser Scroll-Timelines kann, sonst uebernimmt bd-motion.js mit einem Beobachter, der die Klassen in beide Richtungen setzt. */
@supports (animation-timeline: view()) {
  .bd-head, .bd-pcard, .bd-wende, .bd-split, .bd-rail__step, .bd-bento > *, .bd-duo > .wp-block-column, .bd-offer__extra, .bd-offer__cta, .bd-sub, .bd-mini__card, .bd-acc {
    animation: bd-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 32%;
  }
  .bd-pcard:nth-child(2), .bd-rail__step:nth-child(2), .bd-bento > :nth-child(3), .bd-duo > .wp-block-column:nth-child(2), .bd-mini__card:nth-child(2) { animation-range: entry 8% cover 40%; }
  .bd-pcard:nth-child(3), .bd-rail__step:nth-child(3), .bd-bento > :nth-child(4), .bd-mini__card:nth-child(3) { animation-range: entry 16% cover 48%; }
  .bd-rail__step:nth-child(4), .bd-bento > :nth-child(5) { animation-range: entry 24% cover 56%; }
  .bd-rail__step:nth-child(5) { animation-range: entry 32% cover 64%; }
  /* Letzte Sektion: die Seite endet mit ihr, deshalb nur bis zum vollstaendigen Eintritt, sonst bleibt ein Schleier */
  .bd-dark__in { animation: bd-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .bd-rail::before { animation: bd-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
}
/* Rueckfall ohne Scroll-Timeline: bd-motion.js setzt .bd-rise und --bd-i (Staffelung), .is-in beim Eintritt und nimmt sie beim Austritt wieder weg. Die Transition haengt am Zielzustand, damit der Startzustand ohne sichtbaren Uebergang gesetzt wird. */
.bd-rise { opacity: 0; transform: translateY(var(--wp--custom--motion--rise-distance)); }
.bd-rise.is-in { opacity: 1; transform: none; transition: opacity var(--wp--custom--motion--dur-rise) var(--wp--custom--motion--ease), transform var(--wp--custom--motion--dur-rise) var(--wp--custom--motion--ease); transition-delay: calc(var(--bd-i, 0) * var(--wp--custom--motion--dur-stagger)); }
.bd-rail.bd-rise { opacity: 1; transform: none; }
.bd-rail.bd-rise::before { transform: scaleX(0); }
.bd-rail.bd-rise.is-in::before { transform: scaleX(1); transition: transform calc(2 * var(--wp--custom--motion--dur-rise)) var(--wp--custom--motion--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .bd-chart__lines { clip-path: none; }
  .bd-kpi b[style*="--n"] { counter-reset: bdn var(--n); }
  .bd-rise { opacity: 1; transform: none; }
}

/* ===== 13. Mobil, unterhalb des Breakpoints 780 (Design-System v1.5): stapeln, Mobil-Abstaende ===== */
@media (max-width: 780px) {
  .bd-section { padding-top: var(--wp--custom--section--y-lg-mobile); padding-bottom: var(--wp--custom--section--y-lg-mobile); }
  .bd-section--tight { padding-top: 0; }
  .bd-head { margin-bottom: var(--wp--custom--gap--heading-lg-mobile); }
  .bd-card--lg { padding: var(--wp--preset--spacing--28) var(--wp--preset--spacing--24); }
  .bd-hero { padding-top: var(--wp--preset--spacing--56); }
  .bd-hero__stack .wp-block-buttons { flex-direction: column; gap: var(--wp--preset--spacing--12); }
  .bd-window { margin-top: var(--wp--preset--spacing--40); }
  .bd-window__body { padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--16) var(--wp--preset--spacing--4); }
  .bd-kpis { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--8); }
  .bd-chart svg { height: 110px; }
  .bd-band__item, .bd-band__item + .bd-band__item { --bd-icon-x: 0px; border-left: 0; padding-left: calc(var(--bd-icon) + var(--wp--preset--spacing--16)); }
  .bd-band__item + .bd-band__item { border-top: 1px solid var(--bd-hairline); }
  .is-style-panel.bd-problem__panel { padding: var(--wp--preset--spacing--24); }
  .bd-wende { padding: var(--wp--preset--spacing--24); }
  .bd-split { grid-template-columns: 1fr; }
  .bd-split__side { padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24); }
  .bd-rail { gap: var(--wp--preset--spacing--8); }
  .bd-rail::before { display: none; }
  .bd-rail__step { padding: var(--wp--preset--spacing--12) 0 var(--wp--preset--spacing--12) calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--4)); }
  .bd-rail__step::before { top: var(--wp--preset--spacing--12); }
  .bd-bento { grid-template-columns: 1fr; }
  .bd-bento__person { grid-row: auto; }
  .bd-photo { min-height: 240px; }
  .wp-block-image.bd-photo img { height: 240px; }
  .bd-dark__in { padding: var(--wp--preset--spacing--64) 0 var(--wp--preset--spacing--56); }
  .bd-footer__row, .bd-footer__meta { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--12); }
  .bd-nav__cta { display: none; }
}