/* ===== Figtree (self-hosted, DSGVO - kein Google-CDN) · OFL ===== */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('../assets/fonts/figtree-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('../assets/fonts/figtree-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:italic;font-weight:300 900;font-display:swap;src:url('../assets/fonts/figtree-latin-wght-italic.woff2') format('woff2')}
/* Fraunces ist am 18.08.2026 entfallen: Die Akzentschrift lag seit dem ersten
   Commit im Bestand, ihre beiden Klassen (.hl-serif, .hl-highlight) standen
   aber auf keiner der 48 Seiten und in keiner Generator-Quelle. Geladen hat
   ein Browser sie nie - eine @font-face-Regel allein loest kein Laden aus -,
   sie kostete also keine Ladezeit, wohl aber 146 KB im Repo und auf dem
   Server. Figtree ist damit die einzige Schrift des Systems. */

/* ============================================================
   ASSET AVENUE - Website-Basisstile (AVENUE Design System v1.0)
   Konsumiert ausschließlich Tokens aus tokens.css.
   Diese Datei ist eine Quelle, kein Ergebnis: Der Generator baut
   website/ bei jedem Lauf neu, css/ bleibt dabei unangetastet.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--aa-font-family);
  background:var(--aa-bg-canvas);
  color:var(--aa-text-primary);
  font-size:18px;line-height:28px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--aa-action-primary)}

/* ---------- Typografie (Kap. 8 des Design Systems) ---------- */
/* Fluide Rampen (390px Mobilwert -> 1440px Desktopwert) statt Breakpoint-
   Spruenge - Kundenwunsch "stufenlos wie im Hero". Werte gespiegelt im
   SHARED_STYLE des Generators. */
.display{font-size:clamp(36px,26.4px + 2.47vw,56px);line-height:1.12;letter-spacing:-.02em;font-weight:700}
h1,.h1{font-size:clamp(42px,30.9px + 2.86vw,72px);line-height:clamp(49px,39.7px + 2.38vw,74px);letter-spacing:-.015em;font-weight:700}
h2,.h2{font-size:clamp(42px,32.3px + 2.48vw,68px);line-height:clamp(49px,40.8px + 2.10vw,71px);letter-spacing:-.01em;font-weight:700}
h3,.h3{font-size:28px;line-height:36px;letter-spacing:-.005em;font-weight:600}
h4,.h4{font-size:22px;line-height:30px;letter-spacing:-.0025em;font-weight:600}
h5,.h5{font-size:18px;line-height:26px;font-weight:600}
h6,.h6{font-size:16px;line-height:24px;font-weight:600}
.body-xl{font-size:20px;line-height:30px}
.body-lg{font-size:20px;line-height:30px}
.small{font-size:14px;line-height:20px}
.caption{font-size:12px;line-height:16px;color:var(--aa-text-muted)}
/* Die Grundform des Kickers steht in build_pages.py (Pille mit Logo-Maske)
   und kommt spaeter im Dokument - eine zweite Fassung hier waere toter Code. */
.kicker.on-dark{color:var(--aa-primary-300)}
.text-secondary{color:var(--aa-text-secondary)}
.text-muted{color:var(--aa-text-muted)}


/* ---------- Layout: Section / Row / Column (Divi-Analogie) ---------- */
.section{padding:var(--aa-space-24) 0}
.section.tight{padding:var(--aa-space-16) 0}
.section.surface{background:var(--aa-bg-surface)}
.section.subtle{background:var(--aa-bg-surface-subtle)}
.section.brand-tint{background:var(--aa-primary-50)}
@media(max-width:767px){.section{padding:var(--aa-space-20) 0}.section.tight{padding:var(--aa-space-12) 0}}
.row{max-width:1200px;margin:0 auto;padding:0 var(--aa-space-6)}
.row.narrow{max-width:840px}
.row.text{max-width:720px}
.grid{display:grid;gap:var(--aa-space-6)}
/* Grid-Kinder duerfen schmaler werden als ihr Inhalt (Standard waere
   min-width:auto) - sonst sprengt z. B. ein breites Diagramm bei 320px
   die einspaltige Ansicht. */
.grid>*,.split>*,.q-list>*,.q-bubble>*{min-width:0}
/* Deutsche Komposita ("Unternehmensfinanzierung") sprengen bei 320px sonst
   die Spalte - auf sehr schmalen Geraeten trennen duerfen. */
/* Huelle um lange Woerter in Ueberschriften (Build-Schritt 4u,
   tools/silbentrennung). Passt das Wort auf eine Zeile, rutscht es als
   Ganzes in die naechste - keine Trennung (Kundenwunsch 24.09.2026). Passt
   es nicht, wird die Huelle zeilenbreit und das Wort bricht an einem
   weichen Trennstrich um, statt rechts aus dem Bild zu laufen. */
.wt{display:inline-block;max-width:100%;text-decoration:inherit}
@media(max-width:479px){h1,h2,h3,p,li{hyphens:auto;-webkit-hyphens:auto}
  p,li{overflow-wrap:break-word}
  /* Letzte Sicherung, falls ein Wort trotz weicher Trennstriche (Build-
     Schritt 4u) nicht passt: lieber hart umbrechen als aus dem Bild laufen.
     "anywhere" statt "break-word", weil nur diese Variante auch die
     Mindestbreite der Wort-Bloecke der Einblend-Animation verkleinert. */
  h1,h2,h3,h4,summary{overflow-wrap:anywhere}}
/* Einwort-Kicker ("Unternehmensfinanzierung") in gepolsterten Kaesten:
   Pille darf umbrechen statt ueberzulaufen. Die Klasse steht doppelt, weil
   der Pill-Stil aus dem inlinierten SHARED_STYLE kommt und damit hinter
   dieser Datei liegt - gleiche Spezifitaet wuerde verlieren. */
@media(max-width:479px){
  .kicker.kicker{max-width:100%;hyphens:auto;-webkit-hyphens:auto;letter-spacing:.05em;line-height:1.4}}
.grid.gap-lg{gap:var(--aa-space-8)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--aa-space-16);align-items:center}
.split.narrow-gap{gap:var(--aa-space-12)}

/* Bild/Text-Sektionen: das Bild laeuft bis an den Rand, der Text bleibt stehen.
   Die Aufteilung 1:1 verschenkt bei einem Foto Wirkung - der gesamte frei
   werdende Platz geht deshalb ans Bild, waehrend die Textspalte Breite (544px)
   UND Position exakt behaelt. Beides zaehlt: eine Textspalte, die von Sektion
   zu Sektion um ein paar Pixel wandert, faellt beim Scrollen sofort auf.

   Die beiden Randformeln sind der ganze Trick:

   margin fuer die Bildseite  = max(24px, 50% - 632px)
     Legt die Bildkante auf die Linie der 1520px-Karte plus 128px Fuge - und
     zwar UNABHAENGIG davon, ob die Sektion gerade eine Karte ist.

     Warum 128px und nicht die sonst uebliche 24px-Fuge (Kundenentscheidung
     20.08.2026, Variante F aus sieben vorgelegten): Am Fensterrand sind 24px
     richtig, INNERHALB der Karte sind sie es nicht. Die Karte traegt oben und
     unten 128px Polsterung (main>section.section); links dann 24px zu lassen
     ergibt ein Verhaeltnis von gut 5:1 - das Bild klebt an der Kante, statt in
     der Karte zu liegen. 128px ist derselbe Wert wie oben und unten, das Bild
     sitzt damit in einem gleichmaessigen Rahmen.

     Die 632 sind 760 - 128 (bei 24px Fuge waeren es 736). Unterhalb von
     1568px, wo es keine Karte gibt, waechst die Fuge mit dem Platz von 24px
     mit und erreicht 128px genau dort, wo die Karte einsetzt - die Kante
     laeuft ueber die Umschaltschwelle hinweg stetig durch, weil die Karte
     selbst 24px vom Fensterrand einrueckt (24 + 128 = 152 = 50% - 632 bei
     1568px). Der Boden von 24px sorgt dafuer, dass bei 1200px alles genau so
     steht wie vor der Verbreiterung, statt schmaler zu werden. Dunkel- und Grausektionen werden ab 1568px zu 1520px-Karten, helle
     laufen randlos durch. Ohne die Formel begaenne das Bild bei 1920px in der
     einen Sektion bei 224px, in der naechsten bei 24px - untereinander ein
     sichtbares Zickzack. Rechnung: bei randloser Sektion (Elternbreite = W)
     ergibt 50% - 736px genau (W - 1520)/2 + 24px; bei der Karte (Elternbreite
     1520px) ergibt dieselbe Formel 760 - 736 = 24px. Eine Formel, zwei Faelle.

   margin fuer die Textseite  = max(24px, 50% - 576px)
     Haelt die aeussere Textkante auf der Linie des 1152px-Textspiegels
     (1152/2 = 576), solange das mehr als die 24px-Fuge sind.

   Erst ab 1200px. Darunter bleibt die Halbierung und ab 1023px das
   einspaltige Layout unveraendert - dort ist kein Platz zu verteilen. */
@media(min-width:1200px){
  .split-bild-breit,.split-bild-breit-r{max-width:none;padding-left:0;padding-right:0}
  /* Bild links */
  .split-bild-breit{grid-template-columns:1fr 544px;
    margin-left:max(24px,calc(50% - 632px));
    margin-right:max(24px,calc(50% - 576px))}
  /* Bild rechts - gespiegelt */
  .split-bild-breit-r{grid-template-columns:544px 1fr;
    margin-left:max(24px,calc(50% - 576px));
    margin-right:max(24px,calc(50% - 632px))}
}
@media(max-width:1023px){
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:var(--aa-space-10)}
  .split .media-first{order:-1}
}
@media(max-width:639px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
/* Kennzahlen-Raster (z. B. Frühstart-Rente auf Asset Kids): auf dem Handy 2x2 statt vier Karten untereinander */
@media(max-width:639px){.cols-4.stat-grid{grid-template-columns:repeat(2,1fr);gap:var(--aa-space-3)}.stat-grid .card{padding:var(--aa-space-4)!important}.stat-grid .stat .value{font-size:30px;line-height:36px}}
/* Schmale Kartenspalte neben Text (Baufinanzierung, "Bundesweit & vor Ort").
   Stand bis 05.10.2026 als Inline-Stil am Element - und galt damit auch
   mobil: 300px Karte plus Textspalte auf 390px Breite, die Sektion lief
   rechts aus dem Bildschirm. Als Klasse greift der Einspalter wieder.
   Zwei Klassen, damit die Regel .split-bild-breit (ab 1200px) schlaegt. */
.split.split-karte{grid-template-columns:300px minmax(0,1fr);gap:var(--aa-space-6)}
@media(max-width:1023px){.split.split-karte{grid-template-columns:minmax(0,1fr)}}
.section-head{max-width:720px;margin-bottom:var(--aa-space-12)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{margin-top:var(--aa-space-4);color:var(--aa-text-secondary);
  font-size:18px;line-height:28px}

/* ---------- Buttons (Kap. 14.1) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--aa-space-2);
  height:48px;padding:0 var(--aa-space-5);border-radius:var(--aa-radius-md);
  font:600 16px/24px var(--aa-font-family);border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:background var(--aa-duration-fast) var(--aa-ease-standard),
  border-color var(--aa-duration-fast) var(--aa-ease-standard),
  box-shadow var(--aa-duration-fast) var(--aa-ease-standard),
  color var(--aa-duration-fast) var(--aa-ease-standard),
  transform var(--aa-duration-fast) var(--aa-ease-standard)}
.btn:focus-visible{outline:2px solid var(--aa-focus-ring);outline-offset:2px;box-shadow:var(--aa-shadow-focus)}
/* ---------- Rueckmeldung: der Knopf antwortet, er ruft nicht ----------
   Beratung laeuft ueberwiegend digital und mobil, und dort gibt es keinen
   Hover. Der Druck ist der einzige Moment, in dem ein Knopf antworten kann -
   und ausgerechnet dort lag bisher nur ein Farbwechsel, den der Finger
   verdeckt. Das eine Pixel Weg ist am Rand ablesbar, also neben dem Finger.
   Ohne Schatten: Ein gedrueckter Knopf liegt nicht ueber der Seite
   (Ein-Erhebung-Regel), und flach im Grundzustand bleibt flach. */
.btn:active{transform:translateY(1px);transition-duration:var(--aa-duration-instant)}
/* Der Ruf-Knopf wird beim Zeigen heller. In 80 ms liest sich das als
   Flackern, in 200 ms als Aufwaermen. Zurueck geht es schneller als hin -
   ein Zustand, der laenger verschwindet als er kommt, fuehlt sich nach
   Verzoegerung an. Der Druck bleibt in jedem Fall sofort. */
.btn-primary.is-cta:hover{transition-duration:var(--aa-duration-base)}
.btn-primary.is-cta:active{transition-duration:var(--aa-duration-instant)}
.btn.m{height:40px;padding:0 var(--aa-space-4);font-size:14px;line-height:20px}
.btn-primary{background:var(--aa-action-primary);color:var(--aa-text-on-primary)}
.btn-primary:hover{background:var(--aa-action-primary-hover)}
.btn-primary:active{background:var(--aa-action-primary-active)}
/* ---------- Signalfarbe fuer Conversion-Buttons ---------- */
/* Die Signalfarbe markiert genau eine Sorte Handlung: ein Gespraech
   vereinbaren. Navigierende Buttons ("Mehr erfahren", "Karriere entdecken")
   bleiben markenblau, sonst verliert das Signal seine Bedeutung.
   Amber statt Apricot (Kundenentscheidung 17.08.2026): Apricot musste dunkel
   sein, um mit weisser Schrift 4,5:1 zu erreichen - und eine dunkle Farbe
   kann nicht rufen. Amber mit dunkler Schrift dreht das um und leuchtet auf
   hellem wie auf dunklem Grund. */
.btn-primary.is-cta{background:var(--aa-cta);color:var(--aa-cta-text)}
.btn-primary.is-cta:hover{background:var(--aa-cta-hover);color:var(--aa-cta-text)}
.btn-primary.is-cta:active{background:var(--aa-cta-aktiv);color:var(--aa-cta-text)}
/* Die Weiss-Regeln der Dunkel-Sektionen und des CTA-Bandes wuerden das sonst
   ueberschreiben - der CTA soll aber ueberall dieselbe Farbe tragen. Amber ist
   hell genug, dass er auf Navy nicht gedreht werden muss. */
main>section.section.sec-dark .btn-primary.is-cta{background:var(--aa-cta);color:var(--aa-cta-text)}
main>section.section.sec-dark .btn-primary.is-cta:hover{background:var(--aa-cta-hover);color:var(--aa-cta-text)}
.cta-band .btn-primary.is-cta{background:var(--aa-cta);color:var(--aa-cta-text)}
.cta-band .btn-primary.is-cta:hover{background:var(--aa-cta-hover);color:var(--aa-cta-text)}
/* Hover-Bewegung (Kundenentscheidung 17.08.2026, Variante A): aufhellen und
   3,5 % wachsen - der Knopf kommt entgegen. Der Druckzustand bleibt davon
   unberuehrt, er setzt das Wachsen im selben transform zurueck. Bei weniger
   Bewegung bleibt die Farbe, der Weg faellt weg. */
@media(prefers-reduced-motion:no-preference){
  .btn-primary.is-cta:hover{transform:scale(1.035)}
  .btn-primary.is-cta:active{transform:scale(1.035) translateY(1px)}
}
/* Formular-Submits tragen bewusst NICHT die Signalfarbe (Kundenentscheidung
   14.08.2026). Apricot ist der Ruf ins Formular; im Formular selbst ist der
   Nutzer schon da und hat genau einen Knopf vor sich - das Signal hat dort
   nichts mehr zu lenken und wirkt nur noch laut. Die Submits laufen deshalb
   ueber die normale .btn-primary-Regel in Markenblau. */
.btn-secondary{background:var(--aa-bg-surface);border-color:var(--aa-border-default);color:var(--aa-text-primary)}
.btn-secondary:hover{background:var(--aa-bg-surface-subtle);border-color:var(--aa-border-strong)}
.btn-ghost{background:transparent;color:var(--aa-action-primary)}
.btn-ghost:hover{background:var(--aa-action-primary-subtle)}
/* Rueckmeldung gehoert auf den Druck, nicht auf das Loslassen. Primaer und
   is-cta hatten sie schon, die beiden anderen Varianten nicht - auf Touch,
   wo es gar keinen Hover gibt, fuehlten sie sich dadurch tot an. Die
   Dunkel- und Bandvarianten weiter unten brauchen denselben Zustand,
   sonst faellt er genau dort wieder weg, wo sie ueberschrieben werden. */
.btn-secondary:active{background:var(--aa-neutral-200);border-color:var(--aa-border-strong)}
.btn-ghost:active{background:var(--aa-primary-100)}
/* Der Hero der Startseite bringt eine eigene Glasvariante mit - sie hatte
   Hover, aber keinen Druck. Die Klasse steht doppelt, weil die Hover-Regel
   aus dem eingebetteten Stilblock kommt und bei gleicher Spezifitaet
   spaeter in der Kaskade stuende. */
.feuer-hero .btn.btn-secondary:active{background:rgba(255,255,255,.3);
  border-color:rgba(255,255,255,.62)}
.btn-row{display:flex;gap:var(--aa-space-3);flex-wrap:wrap;align-items:center}

/* ---------- Absenden: der einzige Knopf mit einer Dauer ----------
   Zwischen Klick und Weiterleitung auf /danke/ liegt der Versand ueber
   Brevo. Bisher sah der Knopf in dieser Zeit unveraendert aus - die Seite
   stand, und der zweite Klick lag nahe. Jetzt sagt der Knopf, dass er
   arbeitet, und nimmt keinen zweiten mehr an. Der Balken laeuft, statt zu
   fuellen: Wir wissen nicht, wie lange der Versand dauert, und ein
   Fortschritt, der eine Dauer vortaeuscht, waere gelogen. */
.btn.is-sending{position:relative;overflow:hidden;cursor:progress;pointer-events:none}
.btn.is-sending::after{content:"";position:absolute;left:var(--aa-space-4);right:var(--aa-space-4);
  bottom:7px;height:2px;border-radius:2px;opacity:.6;
  background:linear-gradient(90deg,transparent,currentColor 38%,currentColor 62%,transparent);
  animation:btn-senden 1.15s var(--aa-ease-standard) infinite}
/* Weiche Enden statt eines harten Stummels: Der Balken laeuft ueber die
   Rundung hinaus, und ein Rechteck wuerde dort abgeschnitten aussehen. */
@keyframes btn-senden{from{transform:translateX(-62%)}to{transform:translateX(62%)}}

/* Weniger Bewegung heisst weniger, nicht nichts: Der Druck bleibt als
   Farbwechsel lesbar, der Absendezustand als Beschriftung und ruhender
   Balken - nur die Wege fallen weg. Die Dauern stehen in tokens.css unter
   derselben Abfrage ohnehin auf 0. */
@media(prefers-reduced-motion:reduce){
  .btn:active,.wa-fab:hover,.wa-fab:active{transform:none}
  .btn.is-sending::after{animation:none;transform:none;opacity:.38}
}

/* ---------- Header (Kap. 14.4) ---------- */
/* Die Kante entsteht erst, wenn Inhalt unter die schwebende Leiste laeuft -
   am Seitenanfang gibt es nichts zu trennen. Statt des harten 1px-Strichs
   eine weiche Schattenkante; die Linie bleibt als duenner Rest darunter,
   damit die Trennung auch ohne Schattenwiedergabe erkennbar ist.
   Der Grund bleibt hier deckend als Rueckfallebene - die Glasflaeche setzt
   der eingebettete Stilblock der Seiten (rgba(255,255,255,.72) + Blur). */
/* Die Servicezeile faehrt beim Scrollen nach oben aus dem Bild, statt ihre
   Hoehe auf 0 zu animieren. Der klebende Versatz erledigt das ohne eine
   einzige Layout-Neuberechnung und ohne JavaScript: die Kopfzeile klebt um
   die Hoehe der Servicezeile hoeher, die Hauptzeile kommt dadurch genau auf
   die Fensterkante zu liegen. 38px ist die Gesamthoehe der Servicezeile -
   die Trennlinie steckt wegen box-sizing:border-box bereits darin. */
.site-header{position:sticky;top:calc(var(--aa-metabar,38px) * -1);z-index:1100;
  background:var(--aa-bg-surface);
  border-bottom:1px solid transparent;
  transition:border-color var(--aa-duration-base) var(--aa-ease-standard),
             box-shadow var(--aa-duration-base) var(--aa-ease-standard)}
.site-header.scrolled{border-bottom-color:var(--aa-divider);
  box-shadow:0 8px 20px -14px rgba(15,33,45,.42)}
/* Breite B (Kundenentscheidung): Kopfzeile so breit wie die Hero-Karte,
   gleiche Formel wie dort - Logo und CTA fluchten mit deren Kanten.
   Polsterung 0, der Seitenrand steckt in der Breitenangabe. */
/* Feste Hoehe (Kundenentscheidung 11.08.2026): 64px statt 72px im Ruhe-
   zustand und 58px gescrollt. Eine Hoehe, die sich beim Scrollen aendert,
   laesst sich nicht ohne Layout-Neuberechnung animieren - und die trifft
   nicht nur die Kopfzeile, sondern schiebt den ganzen Seiteninhalt. */
.site-header .row{display:flex;align-items:center;gap:var(--aa-space-6);height:64px;
  width:min(100% - 48px,1520px);max-width:none;margin:0 auto;padding:0}
.logo{font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--aa-text-primary);
  text-decoration:none;white-space:nowrap}
.logo .dot{color:var(--aa-action-primary)}
.main-nav{display:flex;gap:var(--aa-space-2);margin-left:auto}
.main-nav a{font:500 14px/20px var(--aa-font-family);color:var(--aa-text-secondary);
  text-decoration:none;padding:10px 12px;border-radius:var(--aa-radius-md)}
.main-nav a:hover{background:var(--aa-bg-surface-subtle);color:var(--aa-text-primary)}
.main-nav a[aria-current="page"]{color:var(--aa-primary-700);background:var(--aa-action-primary-subtle)}
.header-cta{margin-left:var(--aa-space-2)}
@media(max-width:1023px){.main-nav{display:none}.header-cta{margin-left:auto}}

/* ---------- Hero ---------- */
.hero{padding:var(--aa-space-24) 0 var(--aa-space-20);
  background:linear-gradient(180deg,var(--aa-primary-50) 0%,var(--aa-bg-canvas) 70%)}
.hero .split{gap:var(--aa-space-16)}
.hero .lede{margin:var(--aa-space-5) 0 var(--aa-space-8);color:var(--aa-text-secondary);
  font-size:22px;line-height:33px;max-width:56ch}
.trust-inline{display:flex;gap:var(--aa-space-6);flex-wrap:wrap;margin-top:var(--aa-space-8)}
.trust-inline span{display:inline-flex;align-items:center;gap:var(--aa-space-2);
  font-size:14px;line-height:20px;color:var(--aa-text-secondary)}
.trust-inline svg{color:var(--aa-success-600);flex:none}
@media(max-width:767px){.hero{padding:var(--aa-space-16) 0 var(--aa-space-12)}}

/* ---------- Bilder ---------- */
.img-frame{border-radius:var(--aa-radius-xl);overflow:hidden;box-shadow:var(--aa-shadow-xl);
  background:linear-gradient(135deg,var(--aa-primary-100),var(--aa-primary-200) 55%,var(--aa-mint-100));
  position:relative}
.img-frame::before{content:"";display:block}
.img-frame.r-4x3::before{padding-top:75%}
.img-frame.r-3x4::before{padding-top:133%}
.img-frame.r-16x9::before{padding-top:56.25%}
.img-frame.r-1x1::before{padding-top:100%}
.img-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.img-frame.soft{box-shadow:var(--aa-shadow-md)}
.img-caption{margin-top:var(--aa-space-3)}

/* ---------- Finanz-Rechner: Teaser-Karte ----------
   Steht hier und nicht im Rechner-Modul, weil die Karte auch auf Produkt-
   seiten erscheint, die dieses Modul nicht laden. Geteilter Baustein, also
   Stil zentral - dieselbe Aufteilung wie beim Info-Stoerer. */
.fr-karte{width:min(100% - 48px,1152px);margin:0 auto;display:grid;
  grid-template-columns:1fr auto;gap:var(--aa-space-10);align-items:center;
  padding:var(--aa-space-10)}
/* min-width:0 auf die Gridkinder: Eine 1fr-Spalte hat von Haus aus
   min-width:auto und waechst damit ueber den Container hinaus, sobald ein
   unteilbares Wort breiter ist als die Spalte. Bei 320px und einer
   42px-Ueberschrift passiert das mit "Rentenluecken-Rechner". Die
   Silbentrennung faengt denselben Fall auf, bevor er entsteht. */
.fr-karte>*{min-width:0}
.fr-txt{max-width:56ch;min-width:0}
.fr-txt h2{overflow-wrap:break-word;hyphens:auto}
.fr-txt h2{margin:var(--aa-space-3) 0 0}
/* font-weight ausdruecklich: die globale Regel h2 + p setzt sonst 700. */
.fr-txt p{margin:var(--aa-space-4) 0 var(--aa-space-8);color:var(--aa-text-secondary);
  font-size:17px;line-height:27px;font-weight:400}
.fr-txt .btn{margin:0}
.fr-bild{flex:none;display:flex;align-items:center;justify-content:center}
.fr-svg{display:block}
@media(max-width:859px){
  .fr-karte{grid-template-columns:1fr;gap:var(--aa-space-8);padding:var(--aa-space-8)}
  .fr-bild{order:-1;justify-content:flex-start}
  .fr-svg{height:210px!important}
}
/* Zwei Rechner auf einer Seite (Kundenentscheidung 25.09.2026): Desktop
   nebeneinander und nicht hoeher als die einzelne Karte - deshalb kleinere
   Zeichnung (200 statt 340 px) und Ueberschrift. Die Buttons stehen auf
   gleicher Hoehe, auch wenn die Texte verschieden lang sind. Zwischen 860
   und 1099 px faellt die Zeichnung weg, sonst bleibt fuer den Text zu
   wenig Breite. Mobil untereinander. */
.fr-paar{width:min(100% - 48px,1152px);margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:var(--aa-space-6)}
.fr-paar .fr-karte{width:auto;margin:0;padding:var(--aa-space-8);gap:var(--aa-space-6);
  align-items:stretch}
.fr-paar .fr-txt{display:flex;flex-direction:column;align-items:flex-start}
.fr-paar .fr-txt h2{font-size:28px;line-height:36px}
.fr-paar .fr-txt p{font-size:16px;line-height:25px;margin:var(--aa-space-3) 0 var(--aa-space-6)}
.fr-paar .fr-txt .btn{margin-top:auto}
@media(max-width:1099px){
  .fr-paar .fr-karte{grid-template-columns:1fr}
  .fr-paar .fr-bild{display:none}
}
@media(max-width:859px){
  .fr-paar{grid-template-columns:1fr}
  .fr-paar .fr-bild{display:flex}
  .fr-paar .fr-svg{height:150px!important}
}

/* ---------- Trust-Bar / Logos ---------- */
.trustbar{background:var(--aa-bg-surface);border-top:1px solid var(--aa-divider);
  border-bottom:1px solid var(--aa-divider);padding:var(--aa-space-6) 0}
.trustbar .row{display:flex;gap:var(--aa-space-8);flex-wrap:wrap;justify-content:center;align-items:center}
.trustbar .item{display:inline-flex;align-items:center;gap:var(--aa-space-2);
  font:500 14px/20px var(--aa-font-family);color:var(--aa-text-secondary)}
.trustbar svg{color:var(--aa-action-primary)}
.logo-strip{display:flex;gap:var(--aa-space-10);flex-wrap:wrap;justify-content:center;align-items:center}
.logo-strip .partner{font:600 15px/20px var(--aa-font-family);color:var(--aa-neutral-400);
  letter-spacing:.02em;text-transform:uppercase}

/* ---------- Stats / Kennzahlen ---------- */
.stat{text-align:center}
.stat .value{font-size:44px;line-height:52px;font-weight:700;letter-spacing:-.015em;
  color:var(--aa-primary-700);font-variant-numeric:tabular-nums}
.stat .label{margin-top:var(--aa-space-2);font-size:14px;line-height:20px;color:var(--aa-text-secondary)}

/* ---------- Cards & Blurbs (Kap. 14.3) ---------- */
.card{background:var(--aa-bg-surface);border:1px solid var(--aa-border-default);
  border-radius:var(--aa-radius-lg);box-shadow:var(--aa-shadow-xs);padding:var(--aa-space-6)}
a.card{display:block;text-decoration:none;color:inherit;
  transition:box-shadow var(--aa-duration-instant) var(--aa-ease-standard),
  border-color var(--aa-duration-instant) var(--aa-ease-standard),
  transform var(--aa-duration-instant) var(--aa-ease-standard)}
a.card:hover{box-shadow:var(--aa-shadow-sm);border-color:var(--aa-border-strong);transform:translateY(-2px)}
a.card:focus-visible{outline:2px solid var(--aa-focus-ring);outline-offset:2px}
.blurb .icon{width:48px;height:48px;border-radius:var(--aa-radius-lg);
  background:var(--aa-action-primary-subtle);color:var(--aa-primary-700);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--aa-space-4)}
.blurb .icon.mint{background:var(--aa-mint-50);color:var(--aa-mint-700)}
.blurb .icon.violet{background:var(--aa-violet-50);color:var(--aa-violet-700)}
.blurb .icon.coral{background:var(--aa-coral-50);color:var(--aa-coral-700)}
.blurb .icon.apricot{background:var(--aa-apricot-50);color:var(--aa-apricot-700)}
.blurb .icon.sky{background:var(--aa-info-50);color:var(--aa-info-700)}
/* Gewicht 700 ausdruecklich: .h5 vererbt 600, damit fiel der Blurb-Titel aus
   der Zwischenebene (20-24px/700) heraus - gleiche Groesse wie FAQ-Frage und
   Schritt-Titel, aber eine Stufe leichter. */
.blurb h3,.blurb .h5{margin-bottom:var(--aa-space-2);font-size:20px;line-height:28px;font-weight:700}
.blurb p{color:var(--aa-text-secondary);font-size:16px;line-height:25px}
.blurb .more{display:inline-block;margin-top:var(--aa-space-3);font:500 14px/20px var(--aa-font-family)}
/* Media-Karte: Foto-Kopf + Textkörper (Foto ersetzt das Icon) */
.media-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.media-card .mc-img{aspect-ratio:3/2;overflow:hidden;background:linear-gradient(135deg,var(--aa-primary-100),var(--aa-mint-100))}
.media-card .mc-img img{width:100%;height:100%;object-fit:cover;display:block}
.media-card .mc-body{padding:var(--aa-space-6)}
.media-card .mc-body h3{font-size:22px;line-height:29px;font-weight:700;letter-spacing:-.01em;color:var(--aa-text-primary);margin-bottom:var(--aa-space-3)}
.media-card .mc-body p{color:var(--aa-text-secondary);font-size:15px;line-height:24px}
@media(min-width:768px){.media-card .mc-body{padding:var(--aa-space-8)}.media-card .mc-body h3{font-size:24px;line-height:31px}}
.card .prod-kicker{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--aa-text-muted);display:block;margin-bottom:var(--aa-space-1)}

/* ---------- Checkliste ---------- */
.checklist{list-style:none;display:grid;gap:var(--aa-space-3)}
.checklist li{display:flex;gap:var(--aa-space-3);align-items:flex-start;
  font-size:16px;line-height:24px;color:var(--aa-text-secondary)}
.checklist li strong{color:var(--aa-text-primary)}
.checklist svg{color:var(--aa-success-600);flex:none;margin-top:2px}

/* ---------- Merkliste (fruehere Karte im Textfluss) ----------
   Der Rahmen liess den Block wie einen Fremdkoerper in der Textspalte wirken
   und drueckte die Schrift auf 14px. Ohne Rahmen traegt die Typografie: Titel
   als Lead-in in Normalgroesse, Liste wie in der Nachbarspalte. Beide Spalten
   eines Splits lesen sich damit gleich. */
.merkliste{margin-top:var(--aa-space-6)}
.merkliste-titel{font-size:16px;line-height:24px;font-weight:700;
  color:var(--aa-text-primary);margin-bottom:var(--aa-space-4)}
.merkliste .checklist{gap:var(--aa-space-4)}

/* ---------- Prozess / Stepper (Kap. 14.4) ---------- */
.process{counter-reset:step;display:grid;gap:var(--aa-space-8)}
.process .step{display:flex;gap:var(--aa-space-5);position:relative}
.process .num{flex:none;width:44px;height:44px;border-radius:var(--aa-radius-full);
  background:var(--aa-action-primary);color:var(--aa-text-on-primary);
  font:600 18px/44px var(--aa-font-family);text-align:center}
.process .step:not(:last-child)::before{content:"";position:absolute;left:21px;top:52px;
  bottom:calc(-1 * var(--aa-space-8) + 8px);width:2px;background:var(--aa-primary-200)}
.process h3{margin-bottom:var(--aa-space-1)}
.process p{color:var(--aa-text-secondary)}
.process .meta{margin-top:var(--aa-space-2);font-size:12px;line-height:16px;color:var(--aa-text-muted)}

/* ---------- Accordion (nativ, Divi: Accordion-Modul) ---------- */
.accordion{display:grid;gap:var(--aa-space-3)}
.accordion details{background:var(--aa-bg-surface);border:1px solid var(--aa-border-default);
  border-radius:var(--aa-radius-lg);overflow:hidden}
.accordion summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:var(--aa-space-4);padding:var(--aa-space-5) var(--aa-space-6);
  font:600 16px/24px var(--aa-font-family)}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";font-size:22px;font-weight:400;color:var(--aa-action-primary);
  transition:transform var(--aa-duration-base) var(--aa-ease-standard)}
.accordion details[open] summary::after{transform:rotate(45deg)}
.accordion summary:hover{background:var(--aa-bg-surface-subtle)}
.accordion summary:focus-visible{outline:2px solid var(--aa-focus-ring);outline-offset:-2px}
.accordion .a-body{padding:0 var(--aa-space-6) var(--aa-space-5);color:var(--aa-text-secondary)}

/* ---------- Testimonials ---------- */
.quote-card{display:flex;flex-direction:column;gap:var(--aa-space-4);height:100%}
/* Bewertungssterne: EIN Ort fuer alle Vorkommen. Das Google-Abzeichen hatte
   seine Regel bisher nur im Seitenmodul von "Immobilie als Kapitalanlage" -
   auf Edelmetalle erbten dieselben Sterne deshalb das Grau des Fliesstextes. */
.quote-card .stars{color:var(--aa-stern);letter-spacing:2px;font-size:14px}
.g-badge .stars{color:var(--aa-stern)}
/* Sterne auf dunklem Grund. Die Klasse setzt der Build auf jeden Stern in
   einer Dunkelsektion, im CTA-Band und im Info-Stoerer (Schritt 4o1) - von
   Hand vergeben werden muss sie nur, wenn ein Modul eine eigene dunkle
   Flaeche mitbringt. Zwei Klassen im Selektor, damit sie die Regeln von
   .quote-card und .g-badge schlaegt.
   Ausgenommen bleibt das weisse Google-Abzeichen: Es liegt zwar in einer
   Dunkelsektion, ist selbst aber hell - dort gilt weiter der dunkle Ton. */
.stars.stars-dunkel{color:var(--aa-stern-dunkel)}
.quote-card blockquote{font-size:16px;line-height:24px;color:var(--aa-text-primary)}
.quote-card .who{display:flex;align-items:center;gap:var(--aa-space-3);margin-top:auto}
.quote-card .avatar{width:40px;height:40px;border-radius:var(--aa-radius-full);
  background:var(--aa-primary-100);color:var(--aa-primary-700);
  font:600 14px/40px var(--aa-font-family);text-align:center;flex:none}

/* Live-Bewertungen als Karussell (Kundenwunsch 25.09.2026): bis zu neun
   Karten, drei je Ansicht auf dem Desktop, zwei auf dem Tablet, eine mobil -
   dieselben Stufen wie .cols-3. Die Spur scrollt waagerecht mit scroll-snap,
   Wischen geht damit auch ohne Pfeile.
   Das Innenpolster haelt die Kartenschatten frei - ein Scroll-Container
   schneidet alles an seinem Rand ab, der Schatten stand sonst als hartes
   Rechteck unter den Karten. Oben/unten gleicht ein negativer Aussenabstand
   das Polster wieder aus. Seitlich bleibt es bewusst kleiner als der
   Kartenabstand (22 < 24 px): So schaut im Polster nie eine Nachbarkarte
   hervor, nur deren auslaufender Schatten. scroll-padding sorgt dafuer, dass
   die Karten an der Innenkante einrasten und nicht im Polster. */
.rev-karussell{display:flex;align-items:center}
.rev-karussell[hidden]{display:none}
.rev-spur{--rev-rand:22px;flex:1;min-width:0;display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * var(--aa-space-6)) / 3);gap:var(--aa-space-6);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--rev-rand);scrollbar-width:none;
  padding:24px var(--rev-rand) 32px;margin:-24px 0 -32px;
  /* Die seitlichen Polsterstreifen weich ausblenden: Dort ragt der Schatten
     der naechsten, noch verdeckten Karte hinein und stand an der Kante der
     Spur als harte senkrechte Linie (Kundenmeldung 25.09.2026). Die Karten
     selbst liegen innerhalb des Polsters und bleiben voll sichtbar. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--rev-rand),#000 calc(100% - var(--rev-rand)),transparent);
  mask-image:linear-gradient(to right,transparent,#000 var(--rev-rand),#000 calc(100% - var(--rev-rand)),transparent)}
.rev-spur::-webkit-scrollbar{display:none}
.rev-spur>.quote-card{scroll-snap-align:start}
.rev-spur:focus-visible{outline:2px solid var(--aa-focus-ring);outline-offset:4px;border-radius:var(--aa-radius-md)}
/* Die Randmaske wuerde den Fokusrahmen der Spur seitlich mit ausblenden -
   wo :has() verfuegbar ist, traegt ihn deshalb das Karussell selbst. */
@supports selector(:has(*)){
  .rev-spur:focus-visible{outline:none}
  .rev-karussell:has(>.rev-spur:focus-visible){outline:2px solid var(--aa-focus-ring);outline-offset:6px;border-radius:var(--aa-radius-lg)}
}
.rev-pfeil{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;
  border-radius:var(--aa-radius-full);border:1px solid var(--aa-border-default);
  background:var(--aa-bg-surface);color:var(--aa-text-primary);cursor:pointer;
  transition:opacity .2s,background-color .2s}
.rev-pfeil:hover:not(:disabled){background:var(--aa-bg-surface-subtle)}
.rev-pfeil:disabled{opacity:.3;cursor:default}
.rev-pfeil:focus-visible{outline:2px solid var(--aa-focus-ring);outline-offset:2px}
/* Passen alle Karten in eine Ansicht (etwa nur drei Bewertungen mit Text),
   braucht es keine Pfeile. */
.rev-alle-sichtbar .rev-pfeil{visibility:hidden}
/* Ab 1440 px vier Karten (Kundenentscheidung 25.09.2026). In der normalen
   Textbreite waeren sie zu schmal - lange Bewertungen liefen zu hohen,
   duennen Spalten aus. Das Karussell greift deshalb ueber die Zeile hinaus
   bis fast an den Rand der dunklen Box: 1400 px hoechstens, 80 px Luft je
   Seite. margin-inline mit 50 % zentriert unabhaengig von der Zeilenbreite. */
@media(min-width:1440px){
  .rev-karussell{--rev-breite:min(100vw - 160px,1400px);width:var(--rev-breite);
    margin-inline:calc(50% - var(--rev-breite) / 2)}
  .rev-spur{grid-auto-columns:calc((100% - 3 * var(--aa-space-6)) / 4)}
}
@media(max-width:1023px){.rev-spur{grid-auto-columns:calc((100% - var(--aa-space-6)) / 2)}}
/* Mobil: Karte in voller Breite, Pfeile darunter mittig - neben einer
   einzelnen Karte wuerden sie ihr ein Viertel der Breite nehmen. */
@media(max-width:639px){
  .rev-karussell{flex-wrap:wrap;justify-content:center;column-gap:var(--aa-space-4)}
  .rev-spur{--rev-rand:18px;order:-1;flex-basis:calc(100% + 36px);grid-auto-columns:100%;
    margin:-24px -18px calc(var(--aa-space-4) - 32px)}
}
@media(prefers-reduced-motion:reduce){.rev-spur{scroll-behavior:auto}}

/* Produktmarken-Logo (ASSET for KIDS / for HER) als Absender im Kontakt-
   bereich (Kundenwunsch 25.09.2026): bewusst am Rand und klein, nicht im
   Hero - es soll dem Asset-Avenue-Logo in der Kopfzeile keine Konkurrenz
   machen. Hoehe statt Breite fest, weil die beiden Logos sehr
   unterschiedliche Formate haben (Kids fast quadratisch, Her quer). */
.marken-absender{display:flex;align-items:center;gap:var(--aa-space-4);margin-top:var(--aa-space-8)}
.marken-absender img{height:64px;width:auto;flex:none}
.marken-absender p{margin:0;font-size:14px;line-height:20px;color:var(--aa-text-secondary)}

/* ---------- Formular (Kap. 14.2) ---------- */
.form-grid{display:grid;gap:var(--aa-space-5)}
.form-grid .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--aa-space-4)}
@media(max-width:639px){.form-grid .pair{grid-template-columns:1fr}}
.field label{display:block;font:500 14px/20px var(--aa-font-family);margin-bottom:var(--aa-space-1)}
.field .optional{color:var(--aa-text-muted);font-weight:400}
.input{width:100%;padding:11px 12px;font:400 16px/24px var(--aa-font-family);
  color:var(--aa-text-primary);background:var(--aa-bg-surface);
  border:1px solid var(--aa-border-default);border-radius:var(--aa-radius-md)}
.input::placeholder{color:var(--aa-text-placeholder)}
.input:hover{border-color:var(--aa-border-strong)}
.input:focus-visible{outline:none;border-color:var(--aa-focus-ring);box-shadow:var(--aa-shadow-focus)}
textarea.input{min-height:120px;resize:vertical}
.consent{display:flex;gap:var(--aa-space-3);align-items:flex-start;font-size:14px;
  line-height:20px;color:var(--aa-text-secondary)}
.consent input{margin-top:1px}
/* Rueckrufwunsch: steht in der Zelle des Telefonfeldes, direkt unter dem
   Eingabefeld - deshalb enger und mittig ausgerichtet, anders als die
   Einwilligung, die mehrzeilig laeuft. Der Rand war negativ, solange die
   Checkbox hinter der ganzen Zeile stand und die Rasterluecke ausglich; im
   Feld selbst gibt es keine Luecke, die abzuziehen waere. */
/* Der Selektor nennt das Feld mit, weil .field label die Beschriftungen auf
   display:block setzt - im Feld haette das die Checkbox ueber den Text
   gestellt statt daneben. */
.wunsch,.field label.wunsch{display:flex;gap:var(--aa-space-3);align-items:center;font-size:14px;
  line-height:20px;font-weight:400;color:var(--aa-text-secondary);cursor:pointer;
  margin-top:var(--aa-space-2);margin-bottom:0}
/* ---------- Auswahlfelder selbst gezeichnet ----------
   Die native Darstellung haengt am Farbschema des Geraets: Steht das System
   auf Dunkelmodus, zeichnen mehrere Browser das LEERE Kaestchen als gefuellte
   Flaeche. Das liest sich wie "schon angehakt" - ausgerechnet bei der
   Einwilligung, wo ein vorangekreuztes Kaestchen die Einwilligung unwirksam
   machen wuerde (Kundenbeobachtung 14.08.2026).
   Selbst gezeichnet sieht das Feld ueberall gleich aus: leer = weiss mit Rand,
   angehakt = markenblau mit weissem Haken. accent-color faellt damit weg, es
   wirkt nur auf die native Darstellung. */
form :is(input[type=checkbox],input[type=radio]){
  appearance:none;-webkit-appearance:none;margin:0;flex:none;cursor:pointer;
  width:18px;height:18px;
  border:1px solid var(--aa-border-strong);background:#fff;
  display:grid;place-content:center;
  transition:background var(--aa-duration-fast) var(--aa-ease-standard),
             border-color var(--aa-duration-fast) var(--aa-ease-standard)}
form input[type=checkbox]{border-radius:4px}
form input[type=radio]{border-radius:50%}
form :is(input[type=checkbox],input[type=radio])::before{
  content:"";width:10px;height:10px;background:#fff;transform:scale(0);
  transition:transform var(--aa-duration-fast) var(--aa-ease-standard)}
form input[type=checkbox]::before{
  clip-path:polygon(14% 44%,0 60%,39% 100%,100% 18%,84% 0,39% 68%)}
form input[type=radio]::before{width:8px;height:8px;border-radius:50%}
form :is(input[type=checkbox],input[type=radio]):checked{
  background:var(--aa-action-primary);border-color:var(--aa-action-primary)}
form :is(input[type=checkbox],input[type=radio]):checked::before{transform:scale(1)}
form :is(input[type=checkbox],input[type=radio]):hover{border-color:var(--aa-action-primary)}
form :is(input[type=checkbox],input[type=radio]):focus-visible{
  outline:2px solid var(--aa-focus-ring);outline-offset:2px}
.form-note{font-size:12px;line-height:16px;color:var(--aa-text-muted);
  display:flex;gap:var(--aa-space-2);align-items:center}
/* Honigtopf gegen Formular-Spam: fuer Menschen unsichtbar, fuer Bots
   verlockend. Bewusst NICHT display:none - das ueberspringen viele Bots.
   Aus dem Tastaturfluss und der Vorlese-Reihenfolge ist das Feld ueber
   tabindex="-1" und aria-hidden am Wrapper heraus. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- CTA-Band ---------- */
/* TEST 14.08.2026: dieselbe Farbwelt wie die Dunkel-Sektionen statt des
   eigenen, helleren Blaus (--aa-primary-700 / #315064). Die beiden Toene lagen
   zu nah beieinander - das las sich nicht als Kontrast, sondern als
   Ungenauigkeit, seit beide denselben Radius tragen. Erkennbar bleibt das Band
   ueber die Breite: 1152px gegen 1520px der Dunkelkarten. */
.cta-band{border-radius:var(--aa-radius-2xl);
  background:
    radial-gradient(90% 70% at 14% 6%, rgba(74,116,150,.66), transparent 60%),
    radial-gradient(84% 78% at 90% 94%, rgba(52,88,116,.56), transparent 58%),
    var(--aa-primary-900);
  padding:var(--aa-space-16) var(--aa-space-8);text-align:center;color:#fff}
.cta-band h2{color:#fff}
.cta-band p{color:var(--aa-primary-100);max-width:56ch;margin:var(--aa-space-4) auto var(--aa-space-8);
  font-size:18px;line-height:28px}
.cta-band .btn-primary{background:#fff;color:var(--aa-primary-700)}
.cta-band .btn-primary:hover{background:var(--aa-primary-50)}
.cta-band .btn-ghost{color:#fff}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.1)}
.cta-band .kicker{color:var(--aa-primary-200)}
@media(max-width:767px){.cta-band{padding:var(--aa-space-12) var(--aa-space-5)}}

/* ---------- Footer (Kap. 14.4) ---------- */
.site-footer{background:var(--aa-bg-surface);border-top:1px solid var(--aa-divider);
  padding:var(--aa-space-16) 0 var(--aa-space-8);margin-top:var(--aa-space-24)}
.site-footer .grid{gap:var(--aa-space-10)}
.site-footer .col-title{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--aa-text-muted);margin-bottom:var(--aa-space-4)}
.site-footer ul{list-style:none;display:grid;gap:var(--aa-space-2)}
.site-footer a{font-size:14px;line-height:20px;color:var(--aa-text-secondary);text-decoration:none}
.site-footer a:hover{color:var(--aa-text-primary);text-decoration:underline}
.site-footer .about{font-size:14px;line-height:20px;color:var(--aa-text-secondary);max-width:36ch}
.footer-bottom{display:flex;gap:var(--aa-space-4);flex-wrap:wrap;justify-content:space-between;
  align-items:center;margin-top:var(--aa-space-12);padding-top:var(--aa-space-6);
  border-top:1px solid var(--aa-divider);font-size:12px;line-height:16px;color:var(--aa-text-muted)}
/* Umbruch erlauben und Links zusammenhalten (Kundenmeldung 18.08.2026):
   Ohne flex-wrap schrumpften die vier Rechtslinks auf schmalen Geraeten,
   statt umzubrechen - "Cookie-Einstellungen" riss dabei am Bindestrich in
   zwei Zeilen. Mit wrap wandert der Link als Ganzes in die naechste Zeile,
   nowrap verhindert das Aufbrechen innerhalb eines Links. */
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:var(--aa-space-4)}
.footer-bottom a{color:var(--aa-text-muted);text-decoration:none;white-space:nowrap}
.footer-bottom a:hover{text-decoration:underline}

/* ---------- Sonstiges ---------- */
.badge-soft{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:var(--aa-radius-full);font:500 12px/16px var(--aa-font-family);
  background:var(--aa-mint-50);color:var(--aa-mint-700)}
.divider-soft{border:none;border-top:1px solid var(--aa-divider);margin:var(--aa-space-8) 0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--aa-bg-surface);
  color:var(--aa-primary-700);padding:12px 16px;z-index:1700;border-radius:0 0 var(--aa-radius-md) 0;
  font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
/* .problem-list ist am 18.08.2026 entfallen. Die beiden Legacy-Seiten
   /baufinanzierung und /altersvorsorge waren die letzten Traeger; sie
   nutzen jetzt .q-bubble wie alle uebrigen Seiten. Die Regeln standen
   danach ohne Markup da. */

/* Sanfte Eintritts-Animation (Divi: Scroll-Effekt "Fade + 8px", 300ms) */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(8px);
    animation:reveal var(--aa-duration-slow) var(--aa-ease-decelerate) forwards}
  @keyframes reveal{to{opacity:1;transform:none}}
}


/* ============================================================
   Light/Dark Section Alternation  (freigegeben 2026-07-24)
   Nach dem Hero abwechselnd HELL / DUNKEL (einheitliches Navy),
   START mit HELL. Letzte Sektion (CTA) = Hellgrau.
   Scope: nur direkte <section.section> in <main>.
   Edelmetalle (main>.em-scope>section) bleibt ausgenommen -
   dort nur der hardcodierte Dark-Hero + Dark-FAQ (Störer-Regel).
   ============================================================ */
body{background:var(--aa-bg-surface)}
/* Sektionsabstand: EINE Regel fuer jede Grenze (Kundenbefund 03.11.2026).
   --aa-sektion-luft ist das Polster je Seite. Zwischen zwei Inhaltsbloecken
   steht damit immer 2 x Luft - egal ob Sektion an Sektion, Sektion an
   Info-Stoerer oder Foto-Hero an erste Sektion. Der Stoerer haelt dafuer
   denselben Wert als Aussenabstand, der Foto-Hero rechnet sein eigenes
   Polster heraus (build_pages.py).
   Vorher: 128px je Seite (256px Grenze), neben Stoerern nur 96px, unter dem
   Hero 128px. Auf Altersvorsorge stand das direkt untereinander, und die
   normale Grenze las sich als Loch.
   Wert aendern = nur hier. Die Pruefung tools/abstaende_pruefen.py liest ihn
   aus der gerenderten Seite und misst jede Grenze dagegen. */
:root{--aa-sektion-luft:80px;--aa-cta-zuschlag-oben:40px;--aa-cta-zuschlag-unten:32px}
@media(max-width:1023px){:root{--aa-sektion-luft:64px;--aa-cta-zuschlag-oben:32px;--aa-cta-zuschlag-unten:24px}}
@media(max-width:767px){:root{--aa-sektion-luft:56px;--aa-cta-zuschlag-oben:24px;--aa-cta-zuschlag-unten:20px}}
@media(max-width:479px){:root{--aa-sektion-luft:48px;--aa-cta-zuschlag-oben:20px;--aa-cta-zuschlag-unten:16px}}
main>section.section,main>section.section.tight{padding-top:var(--aa-sektion-luft);padding-bottom:var(--aa-sektion-luft)}
/* HELL (gerade nach Hero) */
main>section.section:nth-of-type(even){background:var(--aa-bg-surface)}
/* HELLGRAU (freigegeben 2026-08-14): jede zweite HELLE Sektion, damit auch an
   der Grenze zwischen zwei hellen Sektionen ein Farbwechsel steht. Ohne ihn
   lesen sich die 2x128px Abstand auf Mobile als ein leerer Block. Verteilt
   wird die Klasse im Generator (build_new.py, _dark_verteilen) - dort steht
   auch, warum vor einem Info-Stoerer immer Weiss liegen muss.
   Muss HINTER der nth-of-type-Regel stehen: gleiche Herkunft, hoehere
   Spezifitaet - beides spricht fuer diese Regel, aber die Reihenfolge macht
   es eindeutig. */
main>section.section.sec-grau{background:var(--aa-bg-surface-subtle)}
/* DUNKEL (ungerade, außer Hero + letzter CTA): Navy mit organischem Verlauf */
main>section.section.sec-dark{color:rgba(255,255,255,.82);
  background:
    radial-gradient(90% 70% at 14% 6%, rgba(74,116,150,.66), transparent 60%),
    radial-gradient(84% 78% at 90% 94%, rgba(52,88,116,.56), transparent 58%),
    var(--aa-primary-900)}
/* jede zweite Dunkel-Sektion gespiegelter Verlauf -> wirkt "random" */
main>section.section.sec-dark:nth-of-type(4n+1){
  background:
    radial-gradient(88% 72% at 90% 8%, rgba(72,114,148,.64), transparent 60%),
    radial-gradient(82% 78% at 8% 95%, rgba(50,86,114,.54), transparent 58%),
    var(--aa-primary-900)}
/* Dunkel-Sektionen folgen dem Hero: unterhalb von 1568px randlos ueber die
   volle Breite, ab 1568px (1520px Karte + 2x24px Fuge) als Karte auf der
   Canvas. EINE Umschaltschwelle fuer die ganze Website - Hero und
   Dunkelflaechen wechseln gemeinsam den Zustand. Wo es eng ist, traegt die
   volle Breite die Buehnenwirkung; wo Platz im Ueberfluss ist, wirkt die
   begrenzte Karte souveraener als eine endlos laufende Flaeche.
   Voriger Stand: Karte schon ab 861px (Historie). */
@media(min-width:1568px){
  main>section.section.sec-dark{
    width:min(100% - 48px,1520px);margin:28px auto;border-radius:24px;overflow:hidden}
  /* TEST 14.08.2026: die hellgrauen Sektionen ebenso. Ab 1568px schwimmen die
     Dunkelflaechen als Karten auf weisser Canvas; eine randlose graue Flaeche
     daneben liess die Fuge zwischen beiden wie einen weissen Balken aussehen.
     Als Karte wird aus dem Balken die Canvas, auf der beide liegen.
     Ausgenommen: der abschliessende CTA (:last-of-type), .tight und
     .partners. Die drei setzen weiter unten per !important auf randlos zurueck
     - aber nur max-width und margin-left/right, nicht width. Ohne die
     Ausnahme blieben sie 1520px breit und ruckten an den linken Rand. */
  main>section.section.sec-grau:not(:last-of-type):not(.tight):not(.partners){
    width:min(100% - 48px,1520px);margin:28px auto;border-radius:24px;overflow:hidden}
}
main>section.section.sec-dark :is(h1,h2,h3,h4,.h2,.h3,.h4,.h5,.h6){color:#fff}
main>section.section.sec-dark :is(p,li,.text-secondary,.body-lg,strong){color:rgba(255,255,255,.82)}
main>section.section.sec-dark :is(.kicker,.text-muted,.small,.meta,.caption,.optional){color:rgba(255,255,255,.58)}
/* Logo-Mark im Kicker auf Dunkel weiß einfärben */
/* Kicker-Pill auf Dunkel: transluzent weiss; das Logo ist eine Maske und
   uebernimmt die Textfarbe automatisch - kein Invert-Filter noetig. */
main>section.section.sec-dark .kicker{background:rgba(255,255,255,.14);color:#fff}
/* Fokusring auf Dunkel: Kalt-Akzent statt Slate - der Standardring ist
   auf Navy kaum zu sehen. */
main>section.section.sec-dark :focus-visible{outline-color:var(--aa-akzent-kalt)}
/* Karten / Bubbles auf Dunkel: transluzentes helles Panel */
main>section.section.sec-dark :is(.card,.q-bubble,.join-cta){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
/* Testimonial-Karten auf Dunkel deutlich sichtbar (staerkerer Grund + Rand + Schatten) */
main>section.section.sec-dark .quote-card{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24);box-shadow:0 12px 34px rgba(0,0,0,.30)}
main>section.section.sec-dark .quote-card blockquote{color:rgba(255,255,255,.9)}
main>section.section.sec-dark .quote-card .avatar{background:rgba(255,255,255,.18);color:#fff}
/* Im Karussell ein knapperer Schatten: Der grosse (34px Weichzeichner) reicht
   ueber das Polster der Scroll-Spur hinaus und wuerde dort sichtbar
   abgeschnitten - als feine senkrechte Kanten neben den Karten. */
main>section.section.sec-dark .rev-spur>.quote-card{box-shadow:0 8px 16px rgba(0,0,0,.26)}
main>section.section.sec-dark .rev-pfeil{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);color:#fff}
main>section.section.sec-dark .rev-pfeil:hover:not(:disabled){background:rgba(255,255,255,.18)}
main>section.section.sec-dark .join-cta .join-photo{border-color:rgba(255,255,255,.4);color:#fff}
main>section.section.sec-dark .q-bubble::after{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
main>section.section.sec-dark .blurb p{color:rgba(255,255,255,.72)}
main>section.section.sec-dark .media-card .mc-body :is(h3,p){color:#fff}
main>section.section.sec-dark .media-card .mc-body p{color:rgba(255,255,255,.78)}
main>section.section.sec-dark .checklist svg{color:var(--aa-akzent-kalt)}
main>section.section.sec-dark .checklist span{color:rgba(255,255,255,.86)}
main>section.section.sec-dark .step .num{background:var(--aa-akzent-kalt-flaeche);color:var(--aa-akzent-kalt)}
/* .problem-list .item ist wie .path-card eine HELLE Karte auf dunklem Grund und
   stand ebenfalls nicht in der Karten-Liste - weisse Schrift auf weisser Karte. */
main>section.section.sec-dark .problem-list .item :is(p,li,span){color:var(--aa-text-secondary)}
main>section.section.sec-dark .problem-list .item :is(strong,b,h3,h4){color:var(--aa-text-primary)}
/* Bausteine, die in den Dunkel-Sektionen bisher ihre Hell-Farben behalten haben
   und dadurch fast unsichtbar wurden. */
main>section.section.sec-dark :is(.prod-kicker,.consent,.form-note){color:rgba(255,255,255,.74)}
main>section.section.sec-dark :is(.consent,.form-note) a{color:#fff}
/* .path-card ist bewusst eine HELLE Karte auf dunklem Grund. Sie stand nicht in
   der Karten-Liste oben, ihre Schrift wurde aber von den Textregeln auf Weiß
   gezwungen - weiß auf weiß. Deshalb hier die Textfarben zurückholen. */
main>section.section.sec-dark .path-card{color:var(--aa-text-primary)}
main>section.section.sec-dark .path-card :is(h1,h2,h3,h4,.h2,.h3,.h4,.h5,.h6){color:var(--aa-text-primary)}
main>section.section.sec-dark .path-card p{color:var(--aa-text-secondary)}
main>section.section.sec-dark .path-card .path-sub{color:var(--aa-primary-600)}
/* Die Nummer bekommt hier BEWUSST keinen eigenen Ton mehr: Der Kalt-Akzent
   stand fuer den dunklen Grund - getroffen hat er aber die weisse Karte,
   und dort 1,63:1. Sie behaelt jetzt das Marken-Blau der Grundregel. */
main>section.section.sec-dark .path-card .more{color:var(--aa-action-primary)}
/* FAQ-Accordion bleibt weiße Karte + dunkle Schrift (Lesbarkeit) */
main>section.section.sec-dark .accordion summary{color:var(--aa-text-primary)}
main>section.section.sec-dark .accordion .a-body,
main>section.section.sec-dark .accordion .a-body p{color:var(--aa-text-secondary)}
/* strong/li/em standen nicht in der Zeile darueber und wurden von der
   Textregel der Dunkel-Sektion auf Weiss gezogen - weiss auf weisser Karte. */
main>section.section.sec-dark .accordion .a-body :is(strong,b,em,li,span){color:var(--aa-text-primary)}
main>section.section.sec-dark .accordion .a-body a{color:var(--aa-action-primary)}
/* Gründer-Zitate lesbar auf Dunkel */
main>section.section.sec-dark .fs-quote{color:rgba(255,255,255,.9);border-left-color:rgba(255,255,255,.35)}

/* ---- Buttons: JEDER Button sichtbarer Hintergrund ---- */
.btn-ghost{background:var(--aa-bg-surface-subtle);border:1px solid var(--aa-border-default);color:var(--aa-action-primary)}
.btn-ghost:hover{background:var(--aa-primary-50);border-color:var(--aa-border-strong)}
.btn-ghost:active{background:var(--aa-primary-100);border-color:var(--aa-border-strong)}
/* Ghost auf eigenen Dunkel-CTA-Bändern */
.cta-band .btn-ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);color:#fff}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45);color:#fff}
.cta-band .btn-ghost:active{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.55);color:#fff}
.cta-band .btn-primary:active{background:var(--aa-primary-100)}
/* Dunkel-Alternations-Sektionen: hoher Kontrast */
main>section.section.sec-dark .btn-primary{background:#fff;color:var(--aa-primary-900)}
main>section.section.sec-dark .btn-primary:hover{background:var(--aa-primary-50);color:var(--aa-primary-900)}
main>section.section.sec-dark :is(.btn-secondary,.btn-ghost){background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff}
main>section.section.sec-dark :is(.btn-secondary,.btn-ghost):hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.42);color:#fff}
main>section.section.sec-dark :is(.btn-secondary,.btn-ghost):active{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.55);color:#fff}
main>section.section.sec-dark .btn-primary:active{background:var(--aa-primary-100);color:var(--aa-primary-900)}

/* ---- Vertikaler Rhythmus + Copy ohne Bold (Intro-Ebene) ---- */
/* Der Kicker gehoert zur Ueberschrift, deshalb bestimmt genau EINE Angabe
   den Abstand: sein eigener margin-bottom. Vorher kamen drei zusammen -
   dieser Rand, der margin-top der Ueberschrift und der Durchschuss der
   Textzeile, in der die Pille als inline-flex haengt. Aus 20 px wurden so
   56 px, auf Mobile ein sichtbarer Bruch zwischen Label und Ueberschrift. */
main>section.section .row>div>.kicker + :is(h1,h2,h3,.h1,.h2,.h3){margin-top:0}
main>section.section .row>div>:is(h1,h2,h3,.h1,.h2,.h3) + p{margin-top:var(--aa-space-6)!important;font-weight:400}
main>section.section .row>div>:is(p,ul,ol) + .btn-row{margin-top:var(--aa-space-10)!important}

/* ---- Abschließender CTA: immer Hellgrau ---- */
/* :not(.sec-dark): Die Regel gilt dem hellen Abschluss-CTA. Die Alternations-
   Automatik laesst die letzte Sektion nie dunkel werden - aber eine per
   dunkel-fest gesetzte Sektion kann am Seitenende stehen (Finanz-Quiz).
   Ohne die Ausnahme strich die Regel ihr Hintergrund und Zentrierung:
   ab 1568px war sie 1520px breit, klebte aber am linken Rand, und ihr Grund
   kippte auf Hellgrau - weisser Text auf heller Flaeche. */
main>section.section:last-of-type:not(.sec-dark){background:var(--aa-bg-surface-subtle)!important;max-width:none!important;margin-left:0!important;margin-right:0!important;border-radius:0!important}
/* Tight-Sektionen (Störer o.ä.): keine Navy-Fläche/Rahmung */
main>section.section.tight{background:transparent!important;max-width:none!important;margin-left:0!important;margin-right:0!important;border-radius:0!important;overflow:visible!important}
/* Partner-Logo-Band immer hell (dunkle Logos brauchen weißen Grund) */
main>section.section.partners{background:var(--aa-bg-surface)!important}
/* Abschließender CTA gewinnt zuletzt über .tight/.partners -> immer Hellgrau, keine Lücke */
main>section.section:last-of-type:not(.sec-dark){background:var(--aa-bg-surface-subtle)!important;max-width:none!important;margin-left:0!important;margin-right:0!important;border-radius:0!important;overflow:visible!important}
/* Ausnahme: Steht der Abschluss direkt unter einer dunklen Sektion, liegt
   zwischen beiden die 28px Fläche der Leinwand (der Abstand, der die dunkle
   Karte freistellt). Das Hellgrau setzt dort mitten in diese Fläche eine harte
   waagerechte Kante quer über die Seite. Deshalb bleibt der Abschluss an
   dieser Stelle auf der Leinwand - die Fläche läuft bis zum Fuß durch. */
main>section.section.sec-dark + section.section:last-of-type{background:transparent!important}

/* ---------- Mega-Menue "Alle Loesungen" + mobiles Menue ----------
   Desktop >=1024px: Panel unter dem Header, oeffnet per Klick und per
   Hover-Absicht (kurze Verzoegerung rein, Karenz raus). Links die elf
   Loesungen, rechts eine Vorschau (Bild + Satz), die Hover/Fokus folgt.
   Darunter <1024px: Burger + Vollbild-Sheet, weil .main-nav dort wegfaellt. */
.mega-wrap{position:static}
.meganav-trigger{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:0;
  background:none;font:500 14px/20px var(--aa-font-family);color:var(--aa-text-secondary);
  padding:10px 12px;border-radius:var(--aa-radius-md)}
.meganav-trigger:hover{background:var(--aa-bg-surface-subtle);color:var(--aa-text-primary)}
.meganav-trigger[aria-expanded="true"]{background:var(--aa-action-primary-subtle);color:var(--aa-primary-700)}
.meganav-trigger svg{transition:transform .2s ease;flex:none}
.meganav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
/* Das Panel waechst aus dem Knopf, der es geoeffnet hat. --mega-origin traegt
   die waagerechte Mitte des Ausloesers, in Pixeln vom linken Panelrand; das
   Menue-Skript setzt sie beim Oeffnen und bei Groessenaenderung. Ohne den
   Wert steht die Mitte in der Mitte - das Panel oeffnet dann wie bisher.
   Die Skalierung bleibt bewusst knapp unter 1: mehr wuerde die Schrift
   waehrend der Bewegung sichtbar unscharf zeichnen. */
/* isolation:isolate ist Pflicht, nicht Kosmetik: das Panel haengt (fuer die
   Positionierung) unter .site-header, dessen ::before einen backdrop-filter
   traegt. Sobald das Panel selbst ein transform bekommt (fuer den Ursprung
   oben), zieht Chromium es in dieselbe Compositing-Gruppe wie den Blur - der
   Kopfzeilen-Hintergrund ist halbtransparent (rgba(255,255,255,.72)), also
   schien die Seite darunter durch das ganze Panel hindurch. isolation:isolate
   kappt das: eigener Stacking-Context, das Panel bleibt deckend weiss. */
.mega-panel{position:absolute;top:100%;left:0;right:0;background:var(--aa-bg-surface);
  isolation:isolate;
  border-bottom:1px solid var(--aa-divider);box-shadow:0 32px 48px -28px rgba(15,33,45,.28);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-8px) scale(.985);
  transform-origin:var(--mega-origin,50%) top;
  transition:opacity var(--aa-duration-base) var(--aa-ease-decelerate),
             transform var(--aa-duration-base) var(--aa-ease-decelerate),
             visibility 0s linear var(--aa-duration-base)}
.mega-panel.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.mega-inner{width:min(100% - 48px,1200px);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) 316px;gap:0 44px;padding:26px 0 0}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;align-content:start}
.mega-item{display:flex;align-items:center;gap:14px;padding:8px 10px;border-radius:12px;text-decoration:none}
.mega-item:hover,.mega-item:focus-visible{background:var(--aa-bg-surface-subtle)}
.mega-item[aria-current="page"]{background:var(--aa-action-primary-subtle)}
.mega-item img{width:76px;height:57px;object-fit:cover;border-radius:9px;flex:none;background:var(--aa-primary-50)}
.mi-brand{display:block;font:700 10.5px/14px var(--aa-font-family);letter-spacing:.06em;
  color:var(--aa-primary-700)}
.mi-name{display:block;font:600 15px/20px var(--aa-font-family);color:var(--aa-text-primary)}
.mega-preview{position:relative;min-height:288px}
.mega-preview figure{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;transition:opacity .16s ease}
.mega-preview figure.on{opacity:1}
.mega-preview img{width:100%;height:186px;object-fit:cover;border-radius:14px;display:block}
.mega-preview figcaption{padding-top:12px}
.mega-preview .mi-name{font:600 16px/22px var(--aa-font-family)}
.mega-preview p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--aa-text-secondary)}
.mega-foot{grid-column:1/-1;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--aa-divider);margin-top:20px;padding:12px 0 16px}
.mega-foot .mf-label{font:700 11px/16px var(--aa-font-family);letter-spacing:.08em;
  text-transform:uppercase;color:var(--aa-text-muted);margin-right:6px}
.mega-foot a{font:500 14px/20px var(--aa-font-family);color:var(--aa-text-secondary);
  text-decoration:none;padding:6px 10px;border-radius:8px}
.mega-foot a:hover{background:var(--aa-bg-surface-subtle);color:var(--aa-text-primary)}
/* Unsichtbar, aber fuer Screenreader lesbar (Satz zu jedem Menuepunkt) */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Burger + Sheet */
/* Ohne Rahmen und Flaeche: Das Symbol ist als Menue erkannt, ein Kasten
   drumherum macht es nur schwerer, ohne etwas zu erklaeren. Die Trefferflaeche
   bleibt bei 44px - Rahmen und Trefferflaeche sind zweierlei. */
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border:0;border-radius:10px;background:none;padding:0;
  cursor:pointer;color:var(--aa-text-primary)}
/* Linien deutlicher: das SVG bringt width/height/stroke-width als Attribute
   mit, CSS sticht die aus. */
.nav-burger svg{width:28px;height:28px;stroke-width:2.4}
.nav-burger:active{background:var(--aa-bg-surface-subtle)}
.nav-burger:focus-visible{outline:2px solid var(--aa-focus-ring);outline-offset:2px}
/* Das Blatt kommt von der unteren Kante - dort gehoert ein Sheet hin.
   Ein- und Ausgang laufen denselben Weg mit derselben Kurve.
   Bewegt werden NUR opacity und transform - die beiden Eigenschaften, die
   der Browser auf der Compositor-Ebene abarbeitet, ohne neu zu zeichnen.
   Frueher liefen zusaetzlich filter:blur(6px) und scale(.97) mit. Beide
   sahen am Schreibtisch gut aus und ruckelten auf einem echten Android
   sichtbar (Kundenmeldung 13.08.2026):
     - blur() ist compositorfremd. Der Browser muss das ganze Vollbild in
       jedem Einzelbild neu rastern und falten - das schafft ein
       Mittelklassegeraet in 300ms nicht ohne ausgelassene Bilder.
     - scale() auf vollflaechigem Text rastert die Glyphen bei jedem
       Zwischenschritt neu. Das liest sich genau als das gemeldete Zittern.
   Der Versatz von unten traegt den Eindruck des ankommenden Materials
   allein; Unschaerfe und Skalierung waren dafuer nicht noetig.
   will-change kuendigt die zwei verbliebenen Eigenschaften an, damit die
   Ebene vor dem ersten Bild steht - und bleibt hier bewusst stehen, im
   Unterschied zu .aa-word und .mq-track, wo er entfernt wurde:
   Es ist EIN Element, es animiert genau die zwei Eigenschaften, die der
   Hinweis nennt, und es geht um die Behebung eines gemeldeten Zitterns beim
   Oeffnen. Erst beim Oeffnen zu setzen brächte nichts, weil der Hinweis dann
   im selben Einzelbild wie die Animation kaeme. */
.mobile-sheet{position:fixed;inset:0;z-index:1300;background:var(--aa-bg-surface);
  display:flex;flex-direction:column;opacity:0;visibility:hidden;
  transform:translateY(4vh);
  will-change:transform,opacity;
  transition:opacity var(--aa-duration-slow) var(--aa-ease-standard),
             transform var(--aa-duration-slow) var(--aa-ease-standard),
             visibility 0s linear var(--aa-duration-slow)}
.mobile-sheet.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
html.msheet-open,html.msheet-open body{overflow:hidden}
.ms-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;
  padding:14px 20px;border-bottom:1px solid var(--aa-divider)}
.ms-title{font:700 16px/22px var(--aa-font-family);color:var(--aa-text-primary)}
.ms-close{width:44px;height:44px;border:0;border-radius:12px;background:var(--aa-bg-surface-subtle);
  color:var(--aa-text-primary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
/* Zwei Ebenen: Ebene 1 = Hauptlinks gross, Ebene 2 = alle Loesungen mit Bild.
   Die Ebenen schieben sich horizontal (Drilldown), inert nimmt die jeweils
   unsichtbare aus der Tab-Reihenfolge. */
.ms-viewport{flex:1;position:relative;overflow:hidden}
.ms-pane{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:10px 14px 24px;background:var(--aa-bg-surface);transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.ms-lvl2{transform:translateX(100%)}
.mobile-sheet.lvl2 .ms-lvl1{transform:translateX(-24%)}
.mobile-sheet.lvl2 .ms-lvl2{transform:none}
.ms-back{display:none;width:44px;height:44px;border:0;border-radius:12px;flex:none;
  background:var(--aa-bg-surface-subtle);color:var(--aa-text-primary);cursor:pointer;
  align-items:center;justify-content:center}
.mobile-sheet.lvl2 .ms-back{display:inline-flex}
.ms-drill{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
  border:0;background:none;cursor:pointer;text-align:left;padding:14px 10px;border-radius:12px;
  font:600 19px/26px var(--aa-font-family);color:var(--aa-text-primary)}
.ms-drill:active{background:var(--aa-bg-surface-subtle)}
.ms-drill svg{color:var(--aa-text-muted);flex:none}
.ms-item{display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:12px;text-decoration:none}
.ms-item:active{background:var(--aa-bg-surface-subtle)}
.ms-item[aria-current="page"]{background:var(--aa-action-primary-subtle)}
.ms-item img{width:64px;height:48px;object-fit:cover;border-radius:9px;flex:none;background:var(--aa-primary-50)}
.ms-item .mi-name{font:600 17px/23px var(--aa-font-family)}
.ms-link{display:block;padding:14px 10px;border-radius:12px;text-decoration:none;
  font:600 19px/26px var(--aa-font-family);color:var(--aa-text-primary)}
.ms-link:active{background:var(--aa-bg-surface-subtle)}
.ms-foot{flex:none;display:grid;gap:10px;padding:12px 20px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--aa-divider)}
.ms-cta{justify-content:center;text-align:center}
.ms-contact{display:flex;gap:20px;justify-content:center}
.ms-contact a{font:500 14px/20px var(--aa-font-family);color:var(--aa-text-secondary);text-decoration:none}
@media(max-width:1023px){
  .nav-burger{display:inline-flex;margin-left:auto}
  .header-cta{margin-left:0}
}
@media(min-width:1024px){.nav-burger,.mobile-sheet{display:none}}
/* Kopfzeilen-CTA auf schmalen Schirmen: Bei 407px blieb dem Button in der
   Zeile genau seine Breite - jede Abweichung in der Schriftbreite liess ihn
   zweizeilig werden. Unter 520px faellt deshalb das Wort "Kostenloses" weg
   und der Rest steht enger. Der Textinhalt bleibt fuer die CTA-Erkennung im
   Build unveraendert, weil die dort vor dem Vergleich alle Tags entfernt. */
/* Zwei Nachbesserungen am Kopfzeilen-CTA (14.08.2026):
   1. nowrap gilt jetzt in JEDER Breite, nicht erst unter 520px. Der Knopf hat
      genau eine Zeile Platz; bricht der Text um, laeuft er aus dem Knopf
      heraus. Auf welchem Geraet die Schrift breiter ausfaellt als hier
      gemessen, laesst sich nicht vorhersehen - ein Umbruch darf schlicht
      nicht moeglich sein.
   2. Der Knopf ist ein Flex-Container mit 8px Abstand zwischen seinen Teilen.
      Das ist fuer Symbol + Text gedacht; hier stehen aber zwei Woerter
      nebeneinander ("Kostenloses" im span, "Erstgespraech" als Textknoten),
      und 8px sind gut das Doppelte eines Wortzwischenraums. Das Leerzeichen im
      span hilft nicht, es wird an der Kante eines Flex-Elements verworfen.
      Deshalb hier ein Abstand in Schriftbreite statt in Pixeln. */
.header-cta{white-space:nowrap;gap:.3em}
/* "Karriere" hat in der Kopfzeile die niedrigste Prioritaet (Kunden-
   entscheidung 25.09.2026): Wird es eng, verschwindet zuerst dieser Punkt,
   bevor der Knopf "Kostenloses Erstgespraech" gekuerzt wird. Gemessen passte
   die Zeile mit Karriere und vollem Knopf ab etwa 1180px - Schwelle 1200px
   fuer etwas Luft. Darunter bleibt Karriere im Menuefuss "Unternehmen"
   erreichbar, mobil ohnehin in der ersten Menueebene. */
@media(max-width:1199px){
  .main-nav>.nav-karriere{display:none}
}
@media(max-width:519px){
  .header-cta .cta-lang{display:none}
  .header-cta{font-size:13px;padding:0 14px;white-space:nowrap}
  .site-header .row{gap:10px}
}
@media(max-width:479px){
  /* .wa-fab kommt aus dem inlinierten SHARED_STYLE und steht damit hinter
     dieser Datei - gleiche Spezifitaet wuerde verlieren, deshalb doppelt. */
  .wa-fab.header-wa{display:none}
  .site-header .row{gap:12px}}
/* WCAG-Reflow (320px): der Header-CTA ist der breiteste feste Posten -
   unterhalb von 360px kompakter setzen, sonst schiebt er die Seite auf. */
@media(max-width:359px){
  .header-cta{height:36px;padding:0 10px;font-size:13px;letter-spacing:-.01em}
  .site-header .row{gap:8px}}
@media(prefers-reduced-motion:reduce){
  .mega-panel,.mobile-sheet,.mega-preview figure,.meganav-trigger svg,.ms-pane{transition:none}
}

/* ---------- Info-Stoerer (Fakten-Baender auf den Produktseiten) ----------
   Muster von der Edelmetallseite verallgemeinert: Kicker, grosse Zahl,
   Einordnung. Als <div> zwischen den Sektionen, damit die Hell/Dunkel-
   Alternation der <section>-Zaehlung unangetastet bleibt. Animationen
   (Zaehler, Balken, Torte) starten per IntersectionObserver einmalig.
   Farbwelt (Kundenentscheidung): Glow-Verlauf der Dark-Sektionskarten,
   Akzente in Mint - Apricot bleibt den Conversion-Buttons vorbehalten.
   Breite: 1152px, also genau der Textspiegel (.row ist 1200px breit und
   traegt 2x24px Polsterung). Bis zum 18.08.2026 waren es 1520px wie bei den
   Dark-Sektions-Karten. Der Stoerer traegt aber Text - eine Zahl mit ihrer
   Einordnung -, und der lief damit breiter als jeder andere Text der Seite,
   waehrend derselbe Baustein auf /edelmetalle als .stoerer im .row steht und
   buendig mit dem Fliesstext lief. Zwei Breiten fuer dieselbe Aussage sind
   ein Bruch, kein Rhythmus (Kundenentscheidung 18.08.2026). */
/* Hintergrund der Info-Karten: Navy mit Goldschimmer (Kundenentscheidung
   20.08.2026, Variante G aus sieben vorgelegten).
   Bis dahin trug die Karte denselben Schiefer-Verlauf wie die Dunkelsektionen
   und ging darin unter. Das Sterngold steckte bisher nur in den Bewertungs-
   sternen; als warmer Schimmer in der oberen rechten Ecke bekommt die Karte
   einen eigenen Charakter, ohne die Marke zu verlassen.
   Der zweite Verlauf bleibt kuehl - Gold allein waere kippig geworden. */
.info-stoerer{width:min(100% - 48px,1152px);margin:var(--aa-sektion-luft) auto;
  background:radial-gradient(78% 62% at 88% 8%, rgba(232,181,76,.30), transparent 58%),radial-gradient(88% 72% at 10% 92%, rgba(74,116,150,.55), transparent 60%),var(--aa-primary-900);
  border-radius:24px;padding:var(--aa-space-12) var(--aa-space-8);
  opacity:0;transform:translateY(18px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.info-stoerer.is-an{opacity:1;transform:none}
.is-inner{display:grid;grid-template-columns:1.2fr .9fr;gap:var(--aa-space-10);
  align-items:center;max-width:1152px;margin:0 auto}
.info-stoerer h3{font:700 30px/37px var(--aa-font-family);color:#fff;
  margin:12px 0 10px;letter-spacing:-.01em}
.info-stoerer p{color:rgba(255,255,255,.78);font-size:17px;line-height:1.62;margin:0}
/* Mit .info-stoerer davor, sonst sticht die Regel .info-stoerer p (ein Element
   MEHR in der Spezifitaet) diese hier aus und die Quellenzeile kam in voller
   Fliesstextgroesse - als 17px statt der hier gemeinten 13px. */
.info-stoerer .is-fine{font-size:13px;line-height:18px;color:rgba(255,255,255,.55);margin-top:12px}
.info-stoerer .kicker{background:rgba(255,255,255,.1);color:#fff}
.is-zahl{font:800 clamp(56px,50.1px + 1.52vw,72px)/1.05 var(--aa-font-family);color:var(--aa-stern-dunkel);
  letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.is-viz{display:flex;flex-direction:column;align-items:center;gap:10px;justify-content:center}
.is-viz .is-zahl{font-size:clamp(48px,6vw,84px)}
.is-vizlabel{font:600 15px/20px var(--aa-font-family);color:rgba(255,255,255,.7);text-align:center}
/* Duo: zwei Zahlen nebeneinander */
.is-duo{display:flex;gap:var(--aa-space-10);justify-content:center}
.is-duo>div{text-align:center}
.is-duo .is-zahl{font-size:clamp(48px,5vw,68px)}
/* Balken */
.is-balken{display:grid;gap:16px;width:100%}
.is-balrow{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center}
.is-ballabel{font:600 15px/20px var(--aa-font-family);color:rgba(255,255,255,.7)}
.is-baltrack{height:18px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
/* Breite statt transform: scaleX() waere compositorfreundlicher, wuerde aber
   die runden Enden (border-radius:999px) waehrend des Laufs zu Ellipsen
   ziehen, und ein clip-path liesse das rechte Ende die ganze Zeit eckig
   aussehen. Der Balken laeuft einmal, wenn er in den Blick kommt, und liegt
   in einer eigenen Rasterzeile - der Umbruch bleibt auf diese Zeile
   begrenzt. Bewusst so belassen. */
.is-bal{display:block;height:100%;width:0;border-radius:999px;background:var(--aa-stern-dunkel);
  transition:width 1.2s cubic-bezier(.2,.7,.3,1)}
.is-balwert{font:700 17px/22px var(--aa-font-family);color:var(--aa-stern-dunkel);
  white-space:nowrap;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
/* Torte (Donut) */
.is-torte{display:block}
.is-torte-rest{fill:none;stroke:rgba(255,255,255,.14);stroke-width:12}
.is-torte-seg{fill:none;stroke:var(--aa-stern-dunkel);stroke-width:12;stroke-linecap:round}
@media(max-width:860px){
  /* wie die Sektionen: auf Mobile randlos */
  .info-stoerer{width:auto;margin:var(--aa-sektion-luft) 0;border-radius:0;
    padding:var(--aa-space-10) var(--aa-space-6)}
  .is-inner{grid-template-columns:1fr;gap:var(--aa-space-6)}
  /* Reihenfolge auf Mobile: Kicker, Headline, Grafik, Fliesstext.
     Die Grafik traegt die Aussage und soll direkt unter der Headline stehen,
     nicht erst hinter dem Absatz - und auch nicht davor, wie bisher.
     display:contents loest den Textblock auf, damit Kopf, Grafik und Rumpf
     Geschwister im selben Raster werden und per order sortierbar sind.
     Der Rasterabstand greift dadurch zwischen den drei Bloecken; innerhalb
     von Kopf und Rumpf bleiben die gewohnten Innenabstaende erhalten. */
  .is-text{display:contents}
  .is-head{order:1}
  .is-viz{order:2}
  .is-body{order:3}
  .is-balrow{grid-template-columns:86px 1fr auto}
}
@media(prefers-reduced-motion:reduce){
  .info-stoerer{opacity:1;transform:none;transition:none}
  .is-bal{transition:none}
}

/* Edelmetalle: Diagramm skaliert mit der Karte statt fest zu stehen */
.em-chartcard svg{max-width:100%;height:auto}

/* ---------- Jalousie: "Ein Klick pro Thema" (Startseite) ----------
   Elf Bildlamellen, eine offen. Liegt auf derselben Navy-Karte wie die
   uebrigen Dunkel-Sektionen (gleicher Verlauf, gleiche Kartengeometrie) -
   die Sektion zaehlt in der Hell/Dunkel-Verteilung als dunkel (Schritt 4o
   fasst sie nicht an). Akzente aus den Marken-Tokens. */
.sec-jal{position:relative;color:#EDF1F6;overflow:hidden;
  background:
    radial-gradient(90% 70% at 14% 6%, rgba(74,116,150,.66), transparent 60%),
    radial-gradient(84% 78% at 90% 94%, rgba(52,88,116,.56), transparent 58%),
    var(--aa-primary-900)}
/* Umschaltpunkt wie bei den uebrigen Dunkel-Sektionen und dem Hero. */
@media(min-width:1568px){
  main>section.section.sec-jal{
    width:min(100% - 48px,1520px);margin:28px auto;border-radius:24px}
  /* Auf der Karte braucht der Inhalt seitlich mehr Luft als die 24px des
     Standard-Rows - die reichen nur, solange die naechste Kante der
     Bildschirmrand ist. 24 zu 128 (oben/unten) wirkte gequetscht. */
  main>section.section.sec-jal .row{padding:0 clamp(40px,4vw,64px)}
}
.sec-jal::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuNSIvPjwvc3ZnPg==")}
.sec-jal .row{position:relative;z-index:1}
.jal-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--aa-space-6);margin-bottom:clamp(26px,3.4vw,48px)}
.sec-jal .kicker{background:rgba(255,255,255,.14);color:#fff}
/* Groessenverlauf so gewaehlt, dass die Zeile nie dreizeilig wird - per
   Messreihe im Kartenmodus ermittelt (der engere der beiden Zustaende, weil
   dort die Kartenkante zusaetzlich Platz nimmt). Knappste Stelle war ~1000px,
   dort blieben innen nur ~730px, weil der Zaehler rechts steht. Seit der
   Kartenmodus erst ab 1568px greift, ist der Verlauf unterhalb davon
   grosszuegig bemessen - das ist Absicht, nicht Zufall. */
.sec-jal h2{color:#F6F8FB;font-size:clamp(34px,-10px + 5.4vw,80px);line-height:1.06;hyphens:manual;-webkit-hyphens:manual}
.sec-jal h2 em{font-style:normal;color:inherit}
/* font-weight:400 neutralisiert das globale h2 + p{font-weight:700} -
   der Jalousie-Lede soll normal laufen (Kundenentscheidung). */
.jal-sub{max-width:58ch;font-size:clamp(15px,1.25vw,18px);font-weight:400;line-height:1.65;color:rgba(237,241,246,.62);margin-top:var(--aa-space-4)}
.jal-zaehler{flex:none;text-align:right;font-variant-numeric:tabular-nums}
.jal-zaehler b{display:block;font-weight:800;font-size:clamp(30px,3vw,46px);line-height:1;color:#F6F8FB}
.jal-zaehler b i{font-style:normal;color:var(--aa-primary-300)}
.jal-zaehler span{font-weight:600;font-size:11px;letter-spacing:.2em;color:rgba(237,241,246,.45);text-transform:uppercase}

.jal{display:flex;gap:10px;height:min(62vh,560px)}
/* Bedienhinweis unter der Jalousie: Text je nach Eingabegeraet (any-hover),
   dazu blitzt Lamelle 02 beim ersten Hereinscrollen kurz auf (Klasse setzt
   das Skript, einmalig und nur ohne vorherige Interaktion). */
.jal-tipp{display:flex;justify-content:flex-end;align-items:center;gap:8px;
  margin-top:14px;font-size:12.5px;letter-spacing:.02em;color:rgba(237,241,246,.45)}
.jal-tipp svg{flex:none;opacity:.7}
@media(any-hover:hover){.jal-tipp .t-touch{display:none}}
@media(any-hover:none){.jal-tipp .t-maus{display:none}}
@media(min-width:861px) and (prefers-reduced-motion:no-preference){
  .jp.jal-wink{animation:jal-wink 1.6s cubic-bezier(.4,0,.2,1) .4s both}
  @keyframes jal-wink{0%,100%{flex-grow:1}22%,44%{flex-grow:2.1}33%{flex-grow:1.2}}
}
.jp{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:20px;text-decoration:none;color:inherit;
  isolation:isolate;transform:translateZ(0);cursor:pointer;outline-offset:3px;
  transition:flex-grow .72s cubic-bezier(.24,.9,.24,1)}
.jp.is-open{flex-grow:8.5}
.jp>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.92) brightness(.5) contrast(1.02);transform:scale(1.02);
  transition:filter .72s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.jp.is-open>img{filter:none;transform:scale(1.07)}
.jp-shade{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .6s ease;
  background:linear-gradient(to top,rgba(6,10,17,.86) 0%,rgba(6,10,17,.28) 46%,rgba(6,10,17,.12) 100%)}
.jp.is-open .jp-shade{opacity:1}
.jp-rail{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:18px 0;transition:opacity .35s ease}
.jp.is-open .jp-rail{opacity:0;pointer-events:none}
.jp-nr{position:absolute;top:18px;left:50%;transform:translateX(-50%);font-style:normal;font-weight:700;font-size:12px;
  letter-spacing:.14em;color:rgba(246,248,251,.85)}
.jp-vname{writing-mode:vertical-rl;transform:rotate(180deg);font-style:normal;font-weight:650;
  font-size:clamp(15px,1.3vw,19px);letter-spacing:.06em;color:rgba(246,248,251,.92);white-space:nowrap}
.jp-ghost{position:absolute;top:6px;right:16px;z-index:1;font-weight:800;font-size:clamp(88px,9.6vw,150px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(246,248,251,.34);letter-spacing:-.03em;
  opacity:0;transform:translateY(14px);transition:opacity .7s ease .18s,transform .7s cubic-bezier(.2,.7,.2,1) .18s}
.jp.is-open .jp-ghost{opacity:1;transform:none}
.jp-info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(18px,2.2vw,34px);display:flex;flex-direction:column;gap:7px;
  opacity:0;transform:translateY(16px);transition:opacity .5s ease .2s,transform .55s cubic-bezier(.2,.7,.2,1) .2s}
.jp.is-open .jp-info{opacity:1;transform:none}
.jp-brand{font-style:normal;font-weight:700;font-size:11px;letter-spacing:.24em;color:var(--aa-primary-200);min-height:11px}
.jp-name{font-weight:800;font-size:clamp(24px,2.6vw,44px);line-height:1.06;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.jp-satz{max-width:52ch;font-size:clamp(13.5px,1.1vw,16px);line-height:1.55;color:rgba(246,248,251,.78)}
.jp-cta{display:inline-flex;align-items:center;gap:8px;margin-top:10px;align-self:flex-start;
  font-weight:700;font-size:13.5px;line-height:1;color:var(--aa-primary-900);background:#fff;border-radius:99px;padding:12px 18px;
  transition:background .25s ease}
.jp.is-open:hover .jp-cta{background:var(--aa-primary-50)}
.jp-cta svg{transition:transform .3s ease}
.jp.is-open:hover .jp-cta svg{transform:translateX(3px)}
.jp:focus-visible{outline:2.5px solid #fff}
.jal-tipp{margin-top:var(--aa-space-4);font-size:13px;color:rgba(237,241,246,.4)}

@media (max-width:880px){
  .jal-kopf{flex-direction:column;align-items:flex-start}
  .jal-zaehler{display:none}
  .jal{flex-direction:column;height:auto;gap:8px}
  /* Hoehe statt transform: Der Inhalt darf beim Aufklappen nicht verzerren,
     und beide Endwerte stehen fest. Ein Wechsel auf grid-template-rows waere
     der modernere Weg, brauchte hier aber eine zusaetzliche Huelle um jedes
     Panel. Der Umbruch bleibt auf die Jalousie begrenzt. */
  .jp{flex:none;height:60px;border-radius:14px;transition:height .6s cubic-bezier(.24,.9,.24,1)}
  .jp.is-open{height:min(66vh,430px)}
  .jp-rail{flex-direction:row;padding:0 16px;align-items:center;justify-content:flex-start;gap:14px}
  .jp-nr{position:static;transform:none}
  /* Darf zweizeilig werden: "Immobilien als Kapitalanlage" war bei 320px
     einzeilig breiter als die Leiste und wurde am Rand abgeschnitten. */
  .jp-vname{writing-mode:horizontal-tb;transform:none;max-width:82%;font-size:16.5px;
    white-space:normal;line-height:1.2}
  .jp-ghost{font-size:64px;top:12px;right:14px}
  .jp>img{filter:grayscale(.92) brightness(.42)}
  .jp-shade{background:linear-gradient(to top,rgba(6,10,17,.94) 0%,rgba(6,10,17,.4) 55%,rgba(6,10,17,.14) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .jp,.jp>img,.jp-info,.jp-ghost,.jp-shade,.jp-rail{transition:none}
  .jp.is-open>img{transform:none}
}

/* =========================================================================
   Bedienhilfen: Transparenz und Kontrast
   -------------------------------------------------------------------------
   Bisher wertete die Seite nur prefers-reduced-motion aus. Die beiden
   anderen Signale des Betriebssystems blieben unbeantwortet, obwohl es
   drei Glasflaechen gibt: die Kopfzeile, die Auflagen im Feuer-Hero und
   die Lightbox der Profilseiten.

   Zum !important: Diese Regeln sollen genau das tun - eine Nutzer-
   entscheidung setzt sich gegen Gestaltung durch. Die Glasregeln stehen
   im eingebetteten Stilblock der Seiten und damit spaeter in der Kaskade;
   ohne !important gaebe es hier ein Spezifitaets-Wettruesten, das bei
   jeder Generatoraenderung neu zu gewinnen waere.
   ========================================================================= */

/* Wer Transparenz reduziert, tut das in aller Regel aus Lesbarkeits-
   gruenden. Dann darf keine Flaeche milchig bleiben: Grund deckend,
   Weichzeichner aus. */
@media (prefers-reduced-transparency: reduce){
  .site-header{background:var(--aa-bg-surface) !important}
  .site-header::before{-webkit-backdrop-filter:none !important;
    backdrop-filter:none !important}
  .feuer-hero .kicker{background:rgba(6,13,20,.94) !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .feuer-hero .btn-secondary{background:rgba(6,13,20,.88) !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  /* Die Lightbox verdeckt die Seite ohnehin - hier ist der Weichzeichner
     reine Zier und der deckende Grund sogar der ruhigere Hintergrund. */
  .pc-overlay{background:rgba(20,28,34,.96) !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}

/* Erhoehter Kontrast: nahezu deckende Flaechen und eine definierte Kante,
   wo bisher eine zarte Tonwertabstufung die Trennung getragen hat. */
@media (prefers-contrast: more){
  .site-header{background:var(--aa-bg-surface) !important;
    border-bottom-color:var(--aa-neutral-400)}
  .site-header::before{-webkit-backdrop-filter:none !important;
    backdrop-filter:none !important}
  .site-header.scrolled{border-bottom-color:var(--aa-neutral-500);box-shadow:none}
  .feuer-hero .kicker{background:#060D14 !important;
    border-color:rgba(255,255,255,.85) !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .feuer-hero .btn-secondary{background:#060D14 !important;
    border-color:#fff !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .pc-overlay{background:rgba(12,18,24,.98) !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  /* Umrandete Flaechen bekommen eine Kante, die man auch sieht. */
  :is(.btn-secondary,.btn-ghost){border-color:var(--aa-neutral-500)}
  .card,.blurb,.img-frame,input,select,textarea{border-color:var(--aa-neutral-500)}
  /* Sekundaertext tritt eine Stufe naeher an den Fliesstext heran. */
  :root{--aa-text-secondary:var(--aa-neutral-700);
        --aa-text-muted:var(--aa-neutral-600)}
  /* Der Fokusring ist die wichtigste Kante ueberhaupt. */
  .btn:focus-visible,a:focus-visible,input:focus-visible,
  select:focus-visible,textarea:focus-visible{outline-width:3px}
}

/* ======================= Cookie-Consent =======================
   Eigene Loesung im Generator, kein Fremddienst - dieselbe Linie wie bei
   Formularen und Spamschutz. Gesteuert wird darueber der Google Tag Manager
   und alles, was er ausspielt (GA4, Google Ads, Microsoft/Bing UET).
   Gestaltungsvorgaben, die hier baulich abgesichert sind:
   - "Ablehnen" ist auf der ERSTEN Ebene und optisch gleichrangig zu
     "Akzeptieren". Ein versteckter oder schwaecherer Ablehnen-Knopf macht die
     Einwilligung unwirksam.
   - Kein Vorankreuzen: die beiden nicht notwendigen Schalter starten aus.
   - Das Blatt liegt unten und verdeckt die Seite nicht vollflaechig; der
     Inhalt bleibt lesbar, waehrend entschieden wird. */
.cc-sheet{position:fixed;left:0;right:0;bottom:0;z-index:2400;
  background:var(--aa-bg-surface);border-top:1px solid var(--aa-border-default);
  box-shadow:0 -12px 40px rgba(16,24,32,.16);
  padding:var(--aa-space-6) 0 calc(var(--aa-space-6) + env(safe-area-inset-bottom));
  transform:translateY(101%);visibility:hidden;
  transition:transform .32s var(--aa-ease-standard),visibility 0s linear .32s}
.cc-sheet.is-auf{transform:none;visibility:visible;transition-delay:0s}
.cc-inner{width:min(100% - 48px,1100px);margin:0 auto}
/* Titel und Kategorien sind bewusst KEINE Ueberschriften (10.11.2026): Das
   Banner steht auf jeder Seite, und Suchmaschinen wie SEO-Werkzeuge zaehlen
   seine h2/h3 sonst zur Gliederung jeder Seite ("Notwendig", "Statistik" ...).
   Benannt bleibt der Dialog ueber aria-labelledby. */
.cc-titel{margin:0;font:700 20px/26px var(--aa-font-family);color:var(--aa-text-primary);
  margin-bottom:var(--aa-space-2)}
/* Gleiches Schriftbild wie zuvor als h2/h3 (Laufweite, Umbruch, Gewicht) */
.cc-titel{text-wrap:balance;letter-spacing:-.01em}
.cc-zeile p.cc-kat{text-wrap:balance;letter-spacing:-.005em}
@media(min-width:1024px){.cc-titel{letter-spacing:-.028em}.cc-zeile p.cc-kat{font-weight:800;letter-spacing:-.02em}}
.cc-text{font-size:15px;line-height:1.55;font-weight:400;color:var(--aa-text-secondary);max-width:80ch}
.cc-text a{color:var(--aa-action-primary)}
.cc-knoepfe{display:flex;flex-wrap:wrap;gap:var(--aa-space-3);margin-top:var(--aa-space-5)}
/* Gleiches Gewicht fuer Annehmen und Ablehnen - bewusst beide als
   btn-primary-Groesse, nur farblich unterschieden. */
.cc-knoepfe .btn{flex:1 1 200px;min-width:0}
/* "Alle akzeptieren" in Gruen (Kundenwunsch 17.08.2026). Mint-700 statt der
   helleren Stufen, weil weisse Schrift darauf 5,4:1 erreicht - auf Mint-600
   waeren es 3,7:1. Der Ton stammt aus der Marke, es kommt also keine sechste
   Farbe ins Spiel.
   WICHTIG fuer die Wirksamkeit der Einwilligung: "Nur notwendige" behaelt
   dieselbe Groesse, dieselbe Zeile und dieselbe Reihenfolge. Nur die Farbe
   unterscheidet sich. Wer daran weiterdreht - kleiner, blasser, in die zweite
   Ebene - macht die Einwilligung angreifbar. */
.cc-knoepfe .btn[data-cc="alle"]{background:var(--aa-mint-700);color:#fff}
.cc-knoepfe .btn[data-cc="alle"]:hover{background:var(--aa-mint-600);color:#fff}
.cc-knoepfe .btn[data-cc="alle"]:active{background:var(--aa-mint-800);color:#fff}
.cc-knoepfe .cc-mehr{flex:0 0 auto;background:none;border:0;cursor:pointer;
  font:600 15px/48px var(--aa-font-family);color:var(--aa-action-primary);
  padding:0 var(--aa-space-2);text-decoration:underline}
.cc-detail{margin-top:var(--aa-space-5);border-top:1px solid var(--aa-divider);
  padding-top:var(--aa-space-5);display:grid;gap:var(--aa-space-4)}
.cc-detail[hidden]{display:none}
.cc-zeile{display:grid;grid-template-columns:auto 1fr;gap:var(--aa-space-4);
  align-items:start}
.cc-zeile .cc-kat{margin:0;font:700 16px/22px var(--aa-font-family);color:var(--aa-text-primary)}
.cc-zeile p{font-size:14px;line-height:1.5;color:var(--aa-text-secondary);
  margin-top:2px}
.cc-schalter{width:52px;height:30px;border-radius:999px;border:0;padding:0;
  background:var(--aa-neutral-300);position:relative;cursor:pointer;flex:none;
  transition:background .18s ease}
.cc-schalter::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .18s var(--aa-ease-standard)}
.cc-schalter[aria-checked="true"]{background:var(--aa-action-primary)}
.cc-schalter[aria-checked="true"]::after{transform:translateX(22px)}
.cc-schalter[disabled]{background:var(--aa-mint-400);cursor:default;opacity:.7}
.cc-schalter:focus-visible{outline:3px solid var(--aa-focus-ring);outline-offset:2px}
@media(max-width:640px){
  .cc-inner{width:min(100% - 32px,1100px)}
  .cc-sheet{padding-top:var(--aa-space-5);max-height:88svh;overflow-y:auto}
  .cc-knoepfe .btn{flex:1 1 100%}
  .cc-titel{font-size:18px;line-height:24px}
}
@media(prefers-reduced-motion:reduce){
  .cc-sheet{transition:none}
  .cc-schalter,.cc-schalter::after{transition:none}
}

/* Navigation auf Desktop eine Stufe groesser (Kundenentscheidung 15.08.2026).
   Vorher 14px/20px - dieselbe Stufe wie Bildunterschriften und Formular-
   hinweise. Fuer die Hauptnavigation einer Seite, auf der jeder Besuch
   beginnt, ist das die falsche Ebene. Jetzt 16px/24px, also die Groesse des
   Fliesstextes.
   Der Knopf "Alle Loesungen" zieht mit, sonst stehen zwei Groessen in einer
   Zeile - er ist ein <button> und erbt die Schrift nicht von .main-nav a.
   Nur ab 1024px: Darunter ist .main-nav ausgeblendet, das Mobilmenue bringt
   eigene Groessen mit. */
@media(min-width:1024px){
  .main-nav>a,.meganav-trigger{font-size:15px;line-height:22px;white-space:nowrap}
}
/* 16px braucht 1042px Fensterbreite - bei 1024px steht der CTA sonst 17px
   ueber den Rand hinaus. Zwischen 1024 und 1099 bleibt es deshalb bei 15px.
   1100 statt 1042 als Schwelle, damit noch Luft bleibt: Ein Menuepunkt mehr
   oder ein laengeres Wort wuerde die Rechnung sonst sofort kippen. */
@media(min-width:1100px){
  .main-nav>a,.meganav-trigger{font-size:16px;line-height:24px}
}

/* Hauptlinks fett und mittig (Kundenentscheidung 15.08.2026).
   1. Gewicht 700 statt 500. Nebeneffekt, der erwuenscht ist: Die Titel im
      Mega-Menue (.mi-name, 15px/600) standen der Kopfzeile typografisch zu
      nah - eine Ebene hoeher trennt die beiden wieder sichtbar.
   2. Mittig zwischen Logo und WhatsApp-Knopf. Bisher schob margin-left:auto
      aus Zeile 184 die Navigation nach rechts an den Knopf heran; mit auto
      auf BEIDEN Seiten teilt sich der freie Platz gleichmaessig.
   Fett macht die Navigation 10px breiter (593 -> 603). Das aendert nichts an
   der Schwelle von 1100px fuer die 16px, weil dort ohnehin noch rund 100px
   Luft auf jeder Seite stehen. */
@media(min-width:1024px){
  .main-nav{margin-right:auto}
  .main-nav>a,.meganav-trigger{font-weight:700}
}

/* Klickziele in Fusszeile und Meta-Leiste (WCAG 2.2 AA 2.5.8, mindestens
   24x24px). Die Links waren 17px hoch - auf dem Handy trifft man dabei den
   Nachbarn. Betroffen war unter anderem "Cookie-Einstellungen", also der
   Widerrufsweg.
   Geloest ueber die Zeilenhoehe des Links, nicht ueber Innenabstand: Der
   Abstand steht in den Listen als gap, ein zusaetzliches padding wuerde ihn
   verdoppeln. inline-block ist noetig, damit die Hoehe ueberhaupt wirkt.

   Die Selektoren bleiben bewusst bei einer Klasse und einem Element. Ein
   :not(.btn) waere naheliegend gewesen, haette die Spezifitaet aber ueber
   die von .foot-social a, .meta-contact a und .meta-reviews .m-mail
   gehoben - und damit deren Flex-Zentrierung und ihr display:none unter
   768px ausgehebelt. Bei gleicher Spezifitaet entscheidet die Reihenfolge,
   und die Regeln aus build_pages.py stehen spaeter im Dokument. */
.site-footer a{display:inline-block;line-height:26px}
.site-footer ul a{line-height:28px}
.meta-bar a{display:inline-block;line-height:26px}
/* Knoepfe sind die Ausnahme: Sie bringen ihre Hoehe selbst mit, und
   inline-block nimmt ihnen die Flex-Zentrierung - die Beschriftung des
   Planet-Tree-Knopfs klebte dadurch oben statt in der Mitte. Zwei Klassen,
   also staerker als die Regel darueber, und ohne Nebenwirkung, weil kein
   anderes Element beide Klassen traegt. */
.site-footer .btn{display:inline-flex;line-height:24px}

/* ===== FAQ als typografischer Abschnitt (Kundenentscheidung 15.08.2026) =====
   Die FAQ war der einzige Abschnitt ohne eines der starken Mittel des Systems
   - kein Bild, keine Zahl, keine dunkle Buehne. Stattdessen sechs gleich
   grosse Kaesten, deren Fragen in 16px standen: dieselbe Groesse wie
   Fliesstext. Die Fragen SIND hier aber der Inhalt, nicht die Beschriftung.
   Der Zug ist deshalb Hierarchie, nicht Dekor: Kaesten raus, Fragen auf
   Ueberschriftengroesse, Trennung uebernehmen Haarlinien. Kein neues
   Gestaltungsmittel - nur die vorhandene Typoskala auf voller Staerke.
   Gilt nur fuer #faq, das Akkordeon an anderen Stellen bleibt unangetastet. */
#faq .accordion{gap:0;border-top:1px solid var(--aa-border-default)}
#faq .accordion details{background:none;border:0;border-radius:0;
  border-bottom:1px solid var(--aa-border-default)}
#faq .accordion summary{align-items:flex-start;gap:var(--aa-space-6);
  padding:var(--aa-space-6) 0;
  font:700 clamp(19px,15px + 0.55vw,23px)/1.35 var(--aa-font-family);
  letter-spacing:-.01em;color:var(--aa-text-primary);
  transition:color var(--aa-duration-fast) var(--aa-ease-standard)}
#faq .accordion summary:hover{background:none;color:var(--aa-action-primary)}
#faq .accordion summary:focus-visible{outline-offset:2px}
#faq .accordion summary::after{font-size:30px;line-height:.9;flex:none;
  margin-top:.06em}
#faq .accordion details[open] summary{padding-bottom:var(--aa-space-3)}
/* Die Antwort steht unter der Frage, nicht in einem Kasten neben ihr. 62ch
   haelt die Zeile im lesbaren Bereich, auch wenn .row.narrow breiter ist. */
#faq .accordion .a-body{padding:0 var(--aa-space-10) var(--aa-space-8) 0;
  max-width:62ch}
#faq .accordion .a-body p{font-size:17px;line-height:1.68}
@media(max-width:640px){
  #faq .accordion summary{gap:var(--aa-space-4);padding:var(--aa-space-5) 0}
  #faq .accordion .a-body{padding-right:0;padding-bottom:var(--aa-space-6)}
}
/* Auf Edelmetalle liegt die FAQ auf dunklem Grund (.em-faq-dark). Dort trugen
   die Kaesten die Lesbarkeit: weisse Karte, dunkle Schrift. Ohne Kasten muss
   die Schrift selbst wechseln, sonst steht Dunkel auf Dunkel. Dieselbe
   Sprache wie in allen Dunkel-Sektionen: Weiss, transluzente Haarlinien,
   Kalt-Akzent fuer das Plus. */
#faq.em-faq-dark .accordion,#faq.sec-dark .accordion{border-top-color:rgba(255,255,255,.20)}
#faq.em-faq-dark .accordion details,#faq.sec-dark .accordion details{
  border-bottom-color:rgba(255,255,255,.20)}
#faq.em-faq-dark .accordion summary,#faq.sec-dark .accordion summary{color:#fff}
#faq.em-faq-dark .accordion summary:hover,#faq.sec-dark .accordion summary:hover{
  color:var(--aa-akzent-kalt)}
#faq.em-faq-dark .accordion summary::after,#faq.sec-dark .accordion summary::after{
  color:var(--aa-akzent-kalt)}
#faq.em-faq-dark .accordion .a-body,#faq.em-faq-dark .accordion .a-body p,
#faq.sec-dark .accordion .a-body,#faq.sec-dark .accordion .a-body p{
  color:rgba(255,255,255,.82)}

/* ===== Die beiden Teaser der Startseite (Kundenentscheidung 15.08.2026) =====
   Sie sind die zwei Tueren der Startseite - und sahen aus wie eine
   Produktseiten-Einleitung. Nicht die Typo war das Problem (die Ueberschrift
   steht laengst auf 68px/800), sondern das BILD: 544x408 in einem 800px hohen
   Abschnitt, mit toter Flaeche links und darunter. Ein hoeflicher Daumennagel
   an der Stelle, an der sich der Besucher entscheidet.
   Der Zug: Das Bild traegt den Abschnitt, statt darin zu schweben. Es fuellt
   seine Spalte auf volle Hoehe und bekommt mehr Breite als der Text. Kein
   neues Gestaltungsmittel - .img-frame kann object-fit:cover bereits, das
   Seitenverhaeltnis wird nur nicht mehr erzwungen.
   Gilt allein fuer .teaser; alle anderen .split-Abschnitte bleiben. */
@media(min-width:1024px){
  .teaser .split{grid-template-columns:1fr 1.15fr;align-items:stretch;
    gap:var(--aa-space-16)}
  /* Der Text bleibt optisch mittig, das Bild spannt ueber die ganze Hoehe. */
  .teaser .split>div{display:flex;flex-direction:column;justify-content:center}
  /* Blockelemente in einer Flex-Spalte dehnen sich sonst auf volle Breite -
     die Kicker-Pille lief quer durch die halbe Sektion. */
  .teaser .split .kicker{align-self:flex-start}
  .teaser .split>div:has(>.img-frame){justify-content:stretch}
  .teaser .img-frame{height:100%;min-height:520px}
  /* ::before erzwingt sonst 75% Hoehe und schlaegt die volle Hoehe wieder tot. */
  .teaser .img-frame::before{display:none}
}
/* Auf Mobile bleibt das gewohnte Verhaeltnis - dort steht das Bild ohnehin
   ueber dem Text und braucht keine Hoehe, sondern Ruhe. */

/* ===== Die Schrittfolgen (Kundenentscheidung 15.08.2026) =====
   Der Abschnitt schrie oben und fluesterte unten: Ueberschrift 68px,
   Schritt-Titel 18px/600 - kleiner als die FAQ-Fragen und identisch mit
   Fliesstext. Die Nummern sassen als 44px-Kreise in gedaempftem Blau da und
   lasen sich als Dekor.
   Dabei ist das die eine Stelle, an der Zahlen echte Information tragen (die
   Reihenfolge IST der Inhalt), und die Seite besitzt mit den Zaehlern der
   Info-Stoerer bereits ein Zahlenmotiv. Der Zug: Die Ziffern werden zur
   Struktur - gross, blank, ohne Kreis - und die Titel steigen auf dieselbe
   Stufe wie die FAQ-Fragen. Kein neues Mittel, nur die vorhandene Skala. */
.process{gap:var(--aa-space-12)}
.process .step{gap:var(--aa-space-6);align-items:flex-start}
.process .num{width:auto;height:auto;min-width:56px;border-radius:0;
  background:none;color:var(--aa-primary-300);
  font:800 clamp(40px,24px + 2.2vw,56px)/1 var(--aa-font-family);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;text-align:left}
.process h3,.process .h5{font-size:clamp(20px,18px + 0.5vw,24px);line-height:1.3;
  font-weight:700;letter-spacing:-.01em}
.process p{font-size:17px;line-height:1.65}
/* Die Linie folgt der Ziffer: Sie beginnt unter ihr und endet am naechsten
   Schritt. Ohne Kreis braucht sie einen eigenen Anker. */
.process .step:not(:last-child)::before{left:26px;top:64px;
  bottom:calc(-1 * var(--aa-space-12) + 8px);background:var(--aa-border-strong)}
/* Auf Dunkel setzt eine Regel weiter oben Flaeche und Kalt-Akzent auf .num.
   Sie ist spezifischer als .process .num - deshalb hier gleichrangig
   dagegenhalten, sonst kaeme der Kreis auf dunklen Seiten zurueck. */
main>section.section.sec-dark .process .num{background:none;
  color:var(--aa-akzent-kalt)}
main>section.section.sec-dark .process .step:not(:last-child)::before{
  background:rgba(255,255,255,.22)}
@media(max-width:640px){
  .process{gap:var(--aa-space-10)}
  .process .step{gap:var(--aa-space-4)}
  .process .num{min-width:44px}
  .process .step:not(:last-child)::before{left:20px;top:52px;
    bottom:calc(-1 * var(--aa-space-10) + 8px)}
}

/* ---------- Vorteils-Karten auf dem Handy: gruppierte Liste ----------
   Kundenentscheidung 27.08.2026. Unter 768px werden aus den einzeln
   gerahmten .card.blurb Eintraege EINER Flaeche, getrennt durch Haarlinien;
   das Icon steht klein und ohne farbige Kachel daneben.

   Warum: Gestapelt brauchte jede Karte 224px, sechs Stueck also gut 1.400px
   Scrollweg fuer sechs Saetze. Jetzt sind es 899px - ein Drittel weniger,
   und das Bild ist ruhiger.

   NUR MOBIL. Ab 768px bleibt alles, wie es war; das Markup in den elf
   Inhaltsmodulen ist unberuehrt.

   Zu :has() - es macht das Gitter zum Sammelbehaelter. Wo der Browser das
   nicht kennt (vor 2023), faellt der GANZE Block aus und der Abschnitt sieht
   aus wie bisher. Deshalb haengt jede Regel hier an diesem einen Selektor:
   ein halber Zustand waere schlimmer als gar keiner. */
@media(max-width:767px){
  .grid:has(> .card.blurb){display:block;background:var(--aa-bg-surface);
    border:1px solid var(--aa-border-default);border-radius:var(--aa-radius-lg);
    box-shadow:var(--aa-shadow-xs);overflow:hidden}
  .grid:has(> .card.blurb) > .card.blurb{border:0;border-radius:0;box-shadow:none;
    background:transparent;padding:var(--aa-space-5);
    display:grid;grid-template-columns:30px 1fr;column-gap:var(--aa-space-4);
    align-items:start;border-top:1px solid var(--aa-divider)}
  .grid:has(> .card.blurb) > .card.blurb:first-child{border-top:0}
  /* Wie bei Variante 1: unbekannte Zusatzelemente gehoeren in Spalte 2. */
  .grid:has(> .card.blurb) > .card.blurb > *{grid-column:2}
  .grid:has(> .card.blurb) > .card.blurb > .icon{grid-column:1;grid-row:1/span 20;
    width:30px;height:30px;margin:0;background:transparent;border-radius:0;
    align-self:start}
  .grid:has(> .card.blurb) > .card.blurb > .icon svg{width:24px;height:24px}
  .grid:has(> .card.blurb) > .card.blurb :is(h3,.h5,.h6){margin:0;
    font-size:19px;line-height:26px}
  .grid:has(> .card.blurb) > .card.blurb .prod-kicker{margin:0 0 4px}
  .grid:has(> .card.blurb) > .card.blurb p{margin:6px 0 0;font-size:15px;line-height:23px}
  .grid:has(> .card.blurb) > .card.blurb .more{margin-top:var(--aa-space-2)}
  /* Auf dunklem Grund wird der Sammelbehaelter durchsichtig - dieselbe
     Behandlung, die .card dort ohnehin bekommt. Ohne diese Regel stuende
     weisser Text auf weisser Flaeche (Befund /altersvorsorge). */
  main>section.section.sec-dark .grid:has(> .card.blurb){
    background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
  main>section.section.sec-dark .grid:has(> .card.blurb) > .card.blurb{
    border-top-color:rgba(255,255,255,.14)}
  /* Ohne die farbige Kachel traegt nur noch die Strichfarbe. Violett oder
     Mint auf dunklem Blau ist zu schwach - dort faerben die Icons weiss. */
  main>section.section.sec-dark .grid:has(> .card.blurb) > .card.blurb > .icon{
    color:rgba(255,255,255,.88)}
}
/* Zusammengesetzte Woerter, die nicht am Bindestrich umbrechen sollen (z. B. „Google-Rezensionen“) */
.nobr{white-space:nowrap}