/* ============================================================
   RentenCheck prototype (extraETF-Variante) — shared design system
   Tokens + base + components. Consumed by EVERY screen.
   Never add per-page <style>; pages only compose these classes.

   Derived from the extraETF SingleFile snapshots in
   `extraetf_design_input/` (start.html, depot.html — Angular +
   Bootstrap 5 with a Material-derived custom-property layer,
   635 tokens, Montserrat webfonts).

   Brand: extraETF blue #2196f3 · action green #4caf50 · Montserrat.
   Was in dieser Variante anders ist als in der extraETF-Variante:
   see ../DESIGN-EXTRAETF.md

   ZWEI Akzente, und das ist Absicht. Bei extraETF ist Blau die
   Markenfarbe (Navigation, Links, Auswahl, Fortschritt, Slider) und
   Grün ausschließlich die Handlungsfarbe (jeder primäre Button).
   Deshalb bleibt `--rc-brand` = Blau — damit alle bestehenden
   Akzent-Regeln unverändert korrekt sind — und die Buttons ziehen
   ihre Farbe aus dem neuen `--rc-cta`. Wer einen Button umfärbt,
   greift zu --rc-cta; wer Auswahl/Aktivität markiert, zu --rc-brand.

   Klassennamen sind 1:1 identisch mit der extraETF-Variante:
   dasselbe Markup, dieselben Screens, nur andere Tokens/Formen.
   ============================================================ */

/* ---------- TOKENS (light) ---------- */
:root{
  color-scheme:light;

  /* type */
  --rc-font:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Kein Schmalschnitt bei extraETF: die Display-Größen sind dieselbe
     Montserrat in 800 (ExtraBold) und — anders als bei extraETF —
     NICHT in Versalien. Siehe EXTRAETF LAYER §2. */
  --rc-font-display:'Montserrat',system-ui,sans-serif;
  /* Ziffern-Familie (siehe fonts.css): das extraETF-Subset hat kein
     `tnum`, deshalb liegen die Tabellenziffern in einer eigenen Familie.
     Nur zahlenführende Klassen benutzen sie. */
  --rc-font-num:'Montserrat Tab','Montserrat',system-ui,sans-serif;
  --rc-font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* surfaces — extraETF ladder: lower < low < default < high < higher.
     Das Seiten-Grau ist bei extraETF leicht blaustichig (--bs-light). */
  --rc-bg:#f9fcfe;                      /* --bs-body-bg */
  --rc-bg-low:#f5f5f5;                  /* --bs-gray-200 */
  --rc-bg-lower:#eeeeee;                /* --bs-gray-300 */
  --rc-surface:#ffffff;                 /* cards */
  --rc-surface-high:#fafafa;            /* --bs-tertiary-bg, nested block */
  --rc-surface-sunken:#f5f5f5;          /* --bs-secondary-bg, table heads */

  /* neutral alpha fills (tracks, chips) — auf dem Slate-Ton, nicht auf Schwarz */
  --rc-neutral:rgba(50,65,72,.05);
  --rc-neutral-hover:rgba(50,65,72,.09);
  --rc-neutral-high:rgba(50,65,72,.14);

  /* text */
  --rc-text:#324148;                    /* --bs-body-color */
  --rc-text-strong:#263238;             /* --color-slate-900 */
  --rc-text-subdued:rgba(50,65,72,.75); /* --bs-secondary-color */
  --rc-text-muted:rgba(50,65,72,.55);
  --rc-text-disabled:rgba(50,65,72,.32);
  --rc-text-inverted:#ffffff;
  --rc-on-brand:#ffffff;                /* Weiß liegt auf Blau UND auf Grün */

  /* brand = extraETF-Blau (Identität, Links, Auswahl, Fortschritt) */
  --rc-brand:#2196f3;                   /* --color-primary-500 */
  --rc-brand-hover:#1976d2;             /* --color-primary-700 */
  --rc-brand-disabled:#a6d5fa;
  --rc-brand-vibrant:#1e88e5;           /* --color-primary-600 */
  --rc-brand-vivid:#0d47a1;             /* --color-primary-900 */
  --rc-brand-subdued:#8fcaf8;           /* --color-primary-200 */
  --rc-brand-muted:#e4f4fe;             /* --color-primary-50, Icon-Chips */
  --rc-brand-tint:rgba(33,150,243,.08);
  --rc-brand-text:#1976d2;              /* lesbares Blau auf Weiß (4.6:1) */

  /* cta = extraETF-Grün. NUR primäre Buttons. */
  --rc-cta:#4caf50;                     /* --bs-success */
  --rc-cta-hover:#43a047;               /* --color-success-600 */
  --rc-cta-disabled:#b7dfb9;
  --rc-on-cta:#ffffff;

  /* secondary (solid ink) action — Slate statt Schwarz */
  --rc-action-2:#37474f;                /* --color-slate-800 */
  --rc-action-2-hover:#263238;          /* --color-slate-900 */

  /* status */
  --rc-positive:#4caf50;
  --rc-positive-muted:#dbefdc;          /* --bs-success-bg-subtle */
  --rc-positive-text:#2e7d32;           /* --color-success-800 */
  --rc-info:#00bcd4;
  --rc-info-muted:#ccf2f6;              /* --bs-info-bg-subtle */
  --rc-info-text:#00838f;               /* --color-info-800 */
  /* extraETF fährt Warnungen in Deep Orange, nicht in Gelb */
  --rc-warning:#ff5722;                 /* --bs-warning */
  --rc-warning-muted:#ffddd3;           /* --bs-warning-bg-subtle */
  --rc-warning-text:#bf360c;            /* --color-warning-900, 4.9:1 */
  /* eigene Ampel-Mitte: Deep Orange wäre in einer Ampel nicht als "gelb"
     lesbar, deshalb hier das echte Gelb aus deren Palette */
  --rc-ampel-gelb:#fdd835;              /* --color-yellow-600 */
  /* „Vorsicht" ist nicht „Warnung": das Konfidenz-Badge „Sicherheit: mittel"
     ist eine Einordnung, kein Alarm. In extraETFs Deep Orange las es sich wie
     ein Fehler. Deshalb ein eigenes Bernstein aus derselben Palette. */
  --rc-caution-muted:#fff3e0;           /* --color-orange-50 */
  --rc-caution-text:#e65100;            /* --color-orange-900, 4.6:1 */
  --rc-negative:#c62828;                /* --bs-danger */
  --rc-negative-strong:#b71c1c;         /* --color-danger-800 */
  --rc-negative-hover:#a42330;          /* --color-danger-900 */
  --rc-negative-muted:#f4d4d4;          /* --bs-danger-bg-subtle */
  --rc-negative-text:#b71c1c;
  --rc-negative-border:#e8a9a9;         /* --bs-danger-border-subtle */

  /* borders — extraETF zeichnet Kanten sichtbar, nicht als Alpha-Hauch */
  --rc-border:#dddddd;                  /* --bs-border-color */
  --rc-border-emphasized:#cccccc;       /* --bs-gray-500 */
  --rc-border-moderate:#c9c9c9;         /* --color-light-grey-400 */
  --rc-border-strong:#324148;
  --rc-border-selection:rgba(33,150,243,.25); /* --bs-focus-ring-color */
  --rc-blanket:rgba(38,50,56,.6);

  /* radii — 5px ist Bootstraps --bs-border-radius und damit extraETFs Grundmaß.
     Keine Pillen außer bei Chips/Tracks. */
  --rc-r-sm:.25rem; --rc-r-md:.3125rem; --rc-r-lg:.375rem;
  --rc-r-card:.5rem; --rc-r-modal:1rem; --rc-r-full:50rem;

  /* control heights — dichter als extraETF (Bootstrap-Formate), aber
     --rc-ctl-md bleibt bei 42px statt Bootstraps 38px: dies ist ein
     Funnel, der zu >50 % auf dem Telefon geklickt wird. */
  --rc-ctl-xs:1.5rem; --rc-ctl-sm:2rem; --rc-ctl-md:2.625rem; --rc-ctl-lg:3rem;
  --rc-ctl-cta:48px;

  /* spacing-ui — unverändert; Abstände sind nicht das, was die beiden
     Designs unterscheidet, und jede Änderung hier verschiebt alle 39 Seiten */
  --rc-sp-xs:.5rem; --rc-sp-sm:.75rem; --rc-sp-md:1rem;
  --rc-sp-lg:1.25rem; --rc-sp-xl:1.5rem; --rc-sp-2xl:2rem;

  /* elevation + motion — Bootstrap-Schattenleiter, kurze ease-in-Übergänge.
     --rc-shadow-card ist die Ruhelage einer Karte: extraETF stellt Karten
     mit Hairline UND leichtem Schatten ab (anders als die extraETF-
     Variante, die den Schatten bewusst gestrichen hat). */
  --rc-shadow-sm:0 .125rem .25rem rgba(0,0,0,.075);
  --rc-shadow-card:0 1px 3px rgba(50,65,72,.08);
  --rc-shadow-md:0 .5rem 1rem rgba(0,0,0,.15);
  --rc-shadow-xl:0 1rem 3rem rgba(0,0,0,.175);
  --rc-tap:all .15s ease-in;

  /* Signatur-Verlauf: 1:1 aus `.landing-container.theme-gradient-dark` */
  --rc-hero-grad:linear-gradient(153deg,#2196f3 15.44%,#16416a,#111827 85.45%);
  --rc-on-hero:#ffffff;
  /* Kopfleiste = extraETFs --color-theme-dark. Absichtlich NICHT im
     Dunkelmodus überschrieben, siehe EXTRAETF/REDESIGN LAYER §1. */
  --rc-header-bg:#324148;

  /* layout */
  --rc-container:87.5rem; /* 1400px, extraETFs xxl-Container */
  --rc-text-w:720px;      /* max-w-text */
  --rc-wizard-w:640px;
}

/* ---------- TOKENS (dark) ----------
   ACHTUNG: die beiden Blöcke unten sind absichtlich wortgleich. Reines CSS
   kann eine Selektorliste nicht über eine Media-Query hinweg bilden, also
   braucht der explizite Umschalter (`[data-theme="dark"]`) und die
   System-Präferenz je einen. Wer hier einen Wert ändert, ändert BEIDE. */
[data-theme="dark"]{
  color-scheme:dark;
  /* extraETF selbst hat keinen Dunkelmodus — der Umschalter ist aber eine
     gesetzte Projektentscheidung. Diese Palette ist deshalb aus deren
     EIGENER Slate-Rampe (--color-slate-*) und den hellen Enden ihrer
     Primary-/Success-Rampen abgeleitet, nicht frei erfunden:
     Flächen = slate-900/800, Blau = primary-300, Grün = success-400. */
  --rc-bg:#1b2429; --rc-bg-low:#151c20; --rc-bg-lower:#0f1518;
  --rc-surface:#263238; --rc-surface-high:#32434b; --rc-surface-sunken:#1d272c;
  --rc-neutral:rgba(236,239,241,.07); --rc-neutral-hover:rgba(236,239,241,.12); --rc-neutral-high:rgba(236,239,241,.18);
  --rc-text:rgba(236,239,241,.9); --rc-text-strong:#eceff1; --rc-text-subdued:rgba(236,239,241,.72);
  --rc-text-muted:rgba(236,239,241,.52); --rc-text-disabled:rgba(236,239,241,.3); --rc-text-inverted:#263238;
  /* dunkle Tinte, weil Blau UND Grün hier die helleren Rampenenden sind */
  --rc-on-brand:#10191d;
  --rc-brand:#64b5f6; --rc-brand-hover:#8fcaf8; --rc-brand-disabled:#1e4a6b;
  --rc-brand-vibrant:#42a5f5; --rc-brand-vivid:#bde0fc; --rc-brand-subdued:#1565c0;
  --rc-brand-muted:#14293a; --rc-brand-tint:rgba(100,181,246,.14); --rc-brand-text:#64b5f6;
  --rc-cta:#66bb6a; --rc-cta-hover:#81c784; --rc-cta-disabled:#2e4a30; --rc-on-cta:#10191d;
  --rc-action-2:#eceff1; --rc-action-2-hover:#cfd8dc;
  --rc-positive:#66bb6a; --rc-positive-muted:#1b3320; --rc-positive-text:#a5d6a7;
  --rc-info:#26c6da; --rc-info-muted:#0d2f36; --rc-info-text:#4dd0e1;
  --rc-warning:#ff8a65; --rc-warning-muted:#3a1a10; --rc-warning-text:#ffab91;
  --rc-ampel-gelb:#fdd835; --rc-caution-muted:#3a2a10; --rc-caution-text:#ffcc80;
  --rc-negative:#ef5350; --rc-negative-strong:#e53935; --rc-negative-hover:#c62828;
  --rc-negative-muted:#3a1414; --rc-negative-text:#ef9a9a; --rc-negative-border:#7f2020;
  --rc-border:rgba(236,239,241,.16); --rc-border-emphasized:rgba(236,239,241,.24);
  --rc-border-moderate:rgba(236,239,241,.34); --rc-border-strong:#eceff1;
  --rc-border-selection:rgba(100,181,246,.35);
  --rc-blanket:rgba(15,21,24,.7);
  --rc-shadow-sm:0 .125rem .25rem rgba(0,0,0,.4);
  --rc-shadow-card:0 1px 3px rgba(0,0,0,.35);
  --rc-shadow-md:0 .5rem 1rem rgba(0,0,0,.5);
  --rc-shadow-xl:0 1rem 3rem rgba(0,0,0,.6);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    /* extraETF selbst hat keinen Dunkelmodus — der Umschalter ist aber eine
       gesetzte Projektentscheidung. Diese Palette ist deshalb aus deren
       EIGENER Slate-Rampe (--color-slate-*) und den hellen Enden ihrer
       Primary-/Success-Rampen abgeleitet, nicht frei erfunden:
       Flächen = slate-900/800, Blau = primary-300, Grün = success-400. */
    --rc-bg:#1b2429; --rc-bg-low:#151c20; --rc-bg-lower:#0f1518;
    --rc-surface:#263238; --rc-surface-high:#32434b; --rc-surface-sunken:#1d272c;
    --rc-neutral:rgba(236,239,241,.07); --rc-neutral-hover:rgba(236,239,241,.12); --rc-neutral-high:rgba(236,239,241,.18);
    --rc-text:rgba(236,239,241,.9); --rc-text-strong:#eceff1; --rc-text-subdued:rgba(236,239,241,.72);
    --rc-text-muted:rgba(236,239,241,.52); --rc-text-disabled:rgba(236,239,241,.3); --rc-text-inverted:#263238;
    /* dunkle Tinte, weil Blau UND Grün hier die helleren Rampenenden sind */
    --rc-on-brand:#10191d;
    --rc-brand:#64b5f6; --rc-brand-hover:#8fcaf8; --rc-brand-disabled:#1e4a6b;
    --rc-brand-vibrant:#42a5f5; --rc-brand-vivid:#bde0fc; --rc-brand-subdued:#1565c0;
    --rc-brand-muted:#14293a; --rc-brand-tint:rgba(100,181,246,.14); --rc-brand-text:#64b5f6;
    --rc-cta:#66bb6a; --rc-cta-hover:#81c784; --rc-cta-disabled:#2e4a30; --rc-on-cta:#10191d;
    --rc-action-2:#eceff1; --rc-action-2-hover:#cfd8dc;
    --rc-positive:#66bb6a; --rc-positive-muted:#1b3320; --rc-positive-text:#a5d6a7;
    --rc-info:#26c6da; --rc-info-muted:#0d2f36; --rc-info-text:#4dd0e1;
    --rc-warning:#ff8a65; --rc-warning-muted:#3a1a10; --rc-warning-text:#ffab91;
    --rc-ampel-gelb:#fdd835; --rc-caution-muted:#3a2a10; --rc-caution-text:#ffcc80;
    --rc-negative:#ef5350; --rc-negative-strong:#e53935; --rc-negative-hover:#c62828;
    --rc-negative-muted:#3a1414; --rc-negative-text:#ef9a9a; --rc-negative-border:#7f2020;
    --rc-border:rgba(236,239,241,.16); --rc-border-emphasized:rgba(236,239,241,.24);
    --rc-border-moderate:rgba(236,239,241,.34); --rc-border-strong:#eceff1;
    --rc-border-selection:rgba(100,181,246,.35);
    --rc-blanket:rgba(15,21,24,.7);
    --rc-shadow-sm:0 .125rem .25rem rgba(0,0,0,.4);
    --rc-shadow-card:0 1px 3px rgba(0,0,0,.35);
    --rc-shadow-md:0 .5rem 1rem rgba(0,0,0,.5);
    --rc-shadow-xl:0 1rem 3rem rgba(0,0,0,.6);
  }
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
/* 14px/1.6568 ist extraETFs echte Grundschrift (--bs-body-font-size).
   Kein globales `font-feature-settings:"tnum"` mehr: das Montserrat-Subset
   kennt kein tnum (siehe fonts.css), die Deklaration wäre eine Lüge. Ziffern-
   führende Klassen holen sich stattdessen `--rc-font-num`. */
body{margin:0;background:var(--rc-bg);color:var(--rc-text);
  font-family:var(--rc-font);font-size:.875rem;line-height:1.6568;
  -webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
img,svg{max-width:100%}
/* Default size for app.js-injected inline icons (<span data-icon="…">).
   QA: this rule LIVES IN THE BASE LAYER on purpose. It used to sit down in the
   portal block, where — being equally specific (0,1,1) — it beat every component
   icon size (.btn svg, .icon-lg svg, .upload-drop svg). Base position = every
   component override below wins by source order. Do not move it back down. */
[data-icon] svg,.rc-icon{width:1.125rem;height:1.125rem;display:block}
/* extraETF-Links sind blauer Text OHNE Unterstreichung
   (--bs-link-decoration:none), unterstrichen erst im Hover. Das ersetzt die
   grüne Unterstreichungs-Konvention der extraETF-Variante. */
a{color:var(--rc-brand-text);text-decoration:none;border-bottom:0;padding-bottom:0}
a:hover{color:var(--rc-brand-hover);text-decoration:underline}
/* Undo the link underline on components. `padding-bottom:0` only exists to undo
   the 1px the underline adds on plain links — but on components that own their
   own box it wiped their real bottom padding, so an <a class="btn"> rendered
   with padding-bottom:0 and its label sat ~5px below centre while the identical
   <button class="btn"> was fine. Components now reset only the border. */
a.plain,a.btn,a.option-tile,a.list-row{border-bottom:0}
/* :not(...) matters — page authors write `class="btn plain"` (redundant, since
   .btn already drops the underline). Without the guard those buttons kept
   padding-bottom:0 and their label sat ~10px low. */
a.plain:not(.btn):not(.option-tile):not(.list-row){padding-bottom:0}
:focus-visible{outline:2px solid var(--rc-brand);outline-offset:2px}
hr,.divider{border:0;height:1px;background:var(--rc-border);margin:var(--rc-sp-xl) 0}
code,.mono{font-family:var(--rc-font-mono);font-size:.85em}
::selection{background:var(--rc-border-selection)}

/* ---------- TYPE SCALE (aus den extraETF-Snapshots) ----------
   Zwei Unterschiede zur extraETF-Variante, beide substanziell:
   1. KEINE Versalien. extraETF setzt große Typo als gemischtschriftliche
      Montserrat 800 („Wir helfen dir, finanziell zu wachsen"). Die
      extraETF-Variante fuhr hier Montserrat ExtraBold in Großbuchstaben.
   2. Die Fließtext-Stufen liegen eine Sprosse tiefer (14px Basis statt 16px),
      weil extraETF ein Datenportal ist und entsprechend dichter setzt. */
.display1,.display2,.display3{font-family:var(--rc-font-display);font-weight:800;
  letter-spacing:-.02em;margin:0}
.display1{font-size:2.75rem;line-height:2.875rem}
.display2{font-size:2.25rem;line-height:2.375rem}
.display3{font-size:1.875rem;line-height:2.125rem}
@media (min-width:48rem){
  .display1{font-size:4.5rem;line-height:4.5rem;letter-spacing:-.025em}
  .display2{font-size:3.5rem;line-height:3.5rem;letter-spacing:-.025em}
  .display3{font-size:2.625rem;line-height:2.75rem}
}
/* Überschriften: Montserrat 700. Es gibt alle Schnitte 300-800, faux-bold
   ist hier — anders als bei Montserrat — also kein Thema. */
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:2rem;line-height:2.375rem}
h2{font-size:1.625rem;line-height:2rem}
h3{font-size:1.3125rem;line-height:1.625rem}
h4{font-size:1.125rem;line-height:1.5rem}
h5,h6{font-size:1rem;line-height:1.375rem}
b,strong{font-weight:700}
.h2{font-size:1.625rem;font-weight:700;line-height:2rem;letter-spacing:-.0075em}
@media (min-width:48rem){.h2{font-size:2rem;line-height:2.375rem;letter-spacing:-.015em}}
.h3{font-size:1.3125rem;font-weight:700;line-height:1.625rem;letter-spacing:-.005em}
.h4{font-size:1.125rem;font-weight:600;line-height:1.5rem}
.h5{font-size:1rem;font-weight:600;line-height:1.375rem}
.h6{font-size:.75rem;font-weight:600;line-height:1rem}
.copy-lg{font-size:1rem;font-weight:400;line-height:1.625rem}
.copy-md{font-size:.875rem;font-weight:400;line-height:1.4571rem}
.copy-sm{font-size:.8125rem;font-weight:400;line-height:1.25rem}
.copy-xs{font-size:.75rem;font-weight:400;line-height:1.125rem;letter-spacing:.01rem}
.label-md{font-size:.875rem;font-weight:500;line-height:1.25rem}
.label-sm{font-size:.8125rem;font-weight:500;line-height:1.125rem}
.label-xs{font-size:.75rem;font-weight:600;line-height:1rem;letter-spacing:.02rem}
/* extraETFs Kapitälchen-Label („ANZEIGE", „SORTIEREN NACH") — enger gespurt
   als die extraETF-Variante, dafür fetter */
.eyebrow{font-size:.75rem;font-weight:700;line-height:1rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--rc-text-muted);margin:0 0 var(--rc-sp-md)}
.h2,.h3,.h4,.h5,.h6,.copy-lg,.copy-md,.copy-sm,.copy-xs,
.label-md,.label-sm,.label-xs{font-family:var(--rc-font);margin:0}
.semibold{font-weight:600}
.light{font-weight:300}
/* Tabellenziffern kommen hier aus der Schriftfamilie, nicht aus einem
   OpenType-Feature — siehe fonts.css. `font-variant-numeric` bleibt stehen,
   damit die Regel auch dann korrekt ist, wenn jemand die Familie ersetzt. */
.tnum{font-family:var(--rc-font-num);font-variant-numeric:tabular-nums}
.subdued{color:var(--rc-text-subdued)}
.muted{color:var(--rc-text-muted)}
.brand-text{color:var(--rc-brand-text)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.block{display:block}

/* ---------- LAYOUT ---------- */
.section-container{width:100%;max-width:var(--rc-container);margin-inline:auto;
  padding-inline:calc(.5rem + 2rem)}
@media (min-width:64rem){.section-container{padding-inline:2rem}}
.max-w-text{max-width:var(--rc-text-w);text-wrap:pretty}
/* RD: vertical rhythm up (REDESIGN "generous whitespace"). Nested-in-.frame case
   is re-balanced in the REDESIGN LAYER so pages don't stack 2rem+2.5rem. */
.wizard-shell{width:100%;max-width:var(--rc-wizard-w);margin-inline:auto;
  padding:2.5rem var(--rc-sp-lg) 6rem}
.section{padding-block:3rem}
@media (min-width:48rem){.section{padding-block:5rem}}
.stack{display:flex;flex-direction:column}
.gap-xs{gap:var(--rc-sp-xs)}.gap-sm{gap:var(--rc-sp-sm)}.gap-md{gap:var(--rc-sp-md)}
.gap-lg{gap:var(--rc-sp-lg)}.gap-xl{gap:var(--rc-sp-xl)}.gap-2xl{gap:var(--rc-sp-2xl)}
.row{display:flex;align-items:center;gap:var(--rc-sp-sm)}
.row-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rc-sp-sm)}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--rc-sp-md)}
.grow{flex:1;min-width:0}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--rc-sp-md)}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- BUTTONS (extraETF: grün, 5px, nicht rund) ----------
   Der primäre Button ist bei extraETF GRÜN, nicht blau — Blau ist Navigation
   und Auswahl, Grün ist „hier geht es weiter" („Jetzt kostenlos anmelden",
   „Zum Angebot"). Deshalb zieht `.btn` aus --rc-cta und nicht aus --rc-brand.
   Radius 5px (--bs-border-radius), Schrift 1rem/600 — deutlich kleiner als die
   1.1875rem der extraETF-Variante. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--rc-font);font-size:1rem;line-height:1.5rem;font-weight:600;
  min-height:var(--rc-ctl-cta);padding:.625rem var(--rc-sp-xl);
  border:1px solid transparent;border-radius:var(--rc-r-md);cursor:pointer;
  background:var(--rc-cta);color:var(--rc-on-cta);text-align:center;
  transition:var(--rc-tap);transform-origin:center}
.btn:hover{background:var(--rc-cta-hover);color:var(--rc-on-cta);text-decoration:none}
.btn:active{transform:scale(.975);transition-duration:.2s}
.btn svg{width:1.25rem;height:1.25rem;flex:none}
.btn[disabled],.btn.is-disabled{background:var(--rc-cta-disabled);color:#fff;
  cursor:not-allowed;pointer-events:none}
.btn-secondary{background:var(--rc-action-2);color:var(--rc-text-inverted)}
.btn-secondary:hover{background:var(--rc-action-2-hover);color:var(--rc-text-inverted)}
.btn-ghost{background:var(--rc-neutral);color:var(--rc-text)}
.btn-ghost:hover{background:var(--rc-neutral-hover);color:var(--rc-text)}
/* extraETFs Zweitaktion ist ein weißer Button mit blauem Rand und blauer
   Schrift („Live-Demo", „Demo ansehen") — nicht der graue Umriss von extraETF */
.btn-outline{background:var(--rc-surface);color:var(--rc-brand-text);border-color:var(--rc-brand)}
.btn-outline:hover{background:var(--rc-brand-muted);color:var(--rc-brand-hover);
  border-color:var(--rc-brand-hover)}
.btn-critical{background:var(--rc-negative);color:#fff}
.btn-critical:hover{background:var(--rc-negative-hover);color:#fff}
.btn-secondary[disabled],.btn-ghost[disabled],.btn-outline[disabled],.btn-critical[disabled]{
  background:var(--rc-neutral);color:var(--rc-text-disabled);border-color:transparent}
.btn-lg{min-height:3.25rem;font-size:1.0625rem;padding-inline:var(--rc-sp-2xl)}
.btn-md{min-height:var(--rc-ctl-md);font-size:.875rem;padding-inline:var(--rc-sp-md)}
.btn-sm{min-height:var(--rc-ctl-sm);font-size:.8125rem;padding-inline:var(--rc-sp-sm)}
.btn-block{width:100%}
.tap-effect{transition:var(--rc-tap);transform-origin:center}
.tap-effect:active{transform:scale(.975);transition-duration:.2s}
/* text-only link button */
.btn-link{display:inline-flex;align-items:center;gap:.375rem;background:none;border:0;
  padding:0;font:inherit;font-size:.875rem;font-weight:600;color:var(--rc-brand-text);
  cursor:pointer}
.btn-link:hover{color:var(--rc-brand-hover);text-decoration:underline}

/* ---------- CARDS ----------
   Hier weicht die extraETF-Variante bewusst von REDESIGN.md ab: extraETF
   stellt Karten mit Hairline UND einem flachen Schatten ab (siehe die
   Anbieterkarten im Depot-Vergleich). Der Schatten ist Teil ihrer
   Designsprache, nicht das „visuelle Rauschen", das die extraETF-Variante
   gestrichen hat. `.card-flat` nimmt ihn wieder weg, `.card-quiet` alles. */
.card{background:var(--rc-surface);border:1px solid var(--rc-border);
  border-radius:var(--rc-r-card);box-shadow:var(--rc-shadow-card)}
.card.pad,.pad{padding:var(--rc-sp-xl)}
/* in dieser Variante wieder eine echte API (in der extraETF-Variante ein
   No-op, weil dort ohnehin keine Karte einen Schatten hat) */
.card-flat{box-shadow:none}
.card-brand{border-color:var(--rc-brand)}
.card-tint{background:var(--rc-surface-high)}
.card-modal{border-radius:var(--rc-r-modal)}
.card-head{padding:var(--rc-sp-lg) var(--rc-sp-xl);border-bottom:1px solid var(--rc-border);
  display:flex;align-items:center;justify-content:space-between;gap:var(--rc-sp-md)}
/* divided row list inside a card */
.card-divided>*{padding:var(--rc-sp-md) var(--rc-sp-xl);border-top:1px solid var(--rc-border)}
.card-divided>*:first-child{border-top:0}
.dl{display:grid}
.dl>div{display:flex;justify-content:space-between;gap:var(--rc-sp-md);
  padding:var(--rc-sp-sm) 0;border-bottom:1px solid var(--rc-border);font-size:.875rem}
.dl>div:last-child{border-bottom:0}
.dl dt,.dl>div>span:first-child{color:var(--rc-text-muted)}
.dl dd,.dl>div>span:last-child{margin:0;font-weight:600;text-align:right;
  font-family:var(--rc-font-num);font-variant-numeric:tabular-nums}

/* ---------- FORMS ---------- */
.field{display:flex;flex-direction:column;gap:.25rem;margin-bottom:var(--rc-sp-md)}
.field>label,.flabel{font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--rc-text-subdued)}
/* extraETF/Bootstrap-Felder: WEISS mit sichtbarer Kante, nicht grau getönt.
   Fokus = blaue Kante plus 3px-Ring (--bs-focus-ring). Das ist der auffälligste
   Formular-Unterschied zur extraETF-Variante. Zahlenfelder bekommen die
   Tabellenziffern-Familie, damit Beträge beim Tippen nicht springen. */
.input,.field input,.field select,.field textarea{width:100%;font:inherit;font-size:.875rem;
  font-family:var(--rc-font-num);
  color:var(--rc-text);background:var(--rc-surface);border:1px solid var(--rc-border);
  border-radius:var(--rc-r-md);min-height:var(--rc-ctl-md);padding:var(--rc-sp-sm) var(--rc-sp-md);
  transition:border-color .15s ease-in,box-shadow .15s ease-in}
.field textarea{min-height:6rem;resize:vertical;line-height:1.5;font-family:var(--rc-font)}
.input:hover,.field input:hover,.field select:hover{border-color:var(--rc-border-emphasized)}
.input::placeholder,.field input::placeholder{color:var(--rc-text-muted);opacity:.7}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--rc-surface);border-color:var(--rc-brand);
  box-shadow:0 0 0 .25rem var(--rc-border-selection)}
.field-lg .input,.field-lg input{min-height:var(--rc-ctl-cta);font-size:1.0625rem}
.field-hint{font-size:.75rem;line-height:1rem;letter-spacing:.02rem;color:var(--rc-text-muted)}
.field.is-error input,.field.is-error select,.field.is-error .input{
  border-color:var(--rc-negative);background:var(--rc-negative-muted)}
.field.is-error .field-hint{color:var(--rc-negative-text)}
.field-suffix{position:relative;display:flex;align-items:center}
.field-suffix>.input{padding-right:3rem}
.field-suffix>span{position:absolute;right:var(--rc-sp-md);color:var(--rc-text-muted);pointer-events:none}
select.input,.field select{appearance:none;cursor:pointer;padding-right:2.5rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 55%,calc(100% - .8rem) 55%;
  background-size:.35rem .35rem;background-repeat:no-repeat}

/* option tiles — one question per screen, big tappable answers */
.tile-grid{display:grid;gap:var(--rc-sp-sm)}
.tile-grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.option-tile{display:flex;align-items:flex-start;gap:var(--rc-sp-md);width:100%;
  text-align:left;font:inherit;cursor:pointer;background:var(--rc-surface);
  color:var(--rc-text);border:1px solid var(--rc-border);border-radius:var(--rc-r-card);
  padding:var(--rc-sp-md) var(--rc-sp-lg);min-height:var(--rc-ctl-lg);
  transition:var(--rc-tap);transform-origin:center}
/* Hover läuft ins Markenblau, nicht ins Grau — Auswahl ist bei extraETF blau */
.option-tile:hover{border-color:var(--rc-brand-subdued);background:var(--rc-brand-muted)}
.option-tile:active{transform:scale(.99);transition-duration:.2s}
.option-tile input[type=radio],.option-tile input[type=checkbox]{flex:none;margin:.2rem 0 0;
  width:1.25rem;height:1.25rem;accent-color:var(--rc-brand)}
.option-tile .t{display:block;font-size:1rem;font-weight:600;line-height:1.375rem}
.option-tile .s{display:block;font-size:.8125rem;line-height:1.25rem;color:var(--rc-text-muted);margin-top:.15rem}
.option-tile .ic{flex:none;width:2.5rem;height:2.5rem;border-radius:var(--rc-r-md);
  display:grid;place-items:center;background:var(--rc-brand-muted);color:var(--rc-brand-text)}
/* Anbieterlogo statt Monogramm (r30). Weißes Feld mit fester Breite: die Logos
   sind farbig bis dunkel und würden auf dunklem Grund verschwinden — deshalb
   dieselbe Lösung wie bei Vergleichsportalen, ein heller Chip. `contain` hält
   Seitenverhältnisse, die von 3:1 bis 16:5 reichen. */
/* Logo-Chip: flex statt grid und feste Grenzen in rem statt Prozent.
   Warum nicht `max-height:100%`: in einem Grid mit auto-Zeile ist die Zeilenhöhe
   vom Element selbst abhängig — die Prozentangabe wird dadurch unbestimmt und von
   Chrome wie `none` behandelt. Das fast quadratische Zurich-Logo (1,6:1) ragte
   deshalb 12 px unten heraus, während die breiten Wortmarken zufällig passten.
   Absolute Obergrenzen können nicht zirkulär werden: Chip 2.75rem hoch, minus
   2×.3rem Innenabstand und Rahmen → 2rem bleiben fürs Bild. */
.option-tile .ic.logo{width:6rem;height:2.75rem;background:#fff;
  border:1px solid var(--rc-border);padding:.3rem .45rem;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.option-tile .ic.logo img{max-width:5.1rem;max-height:2rem;width:auto;height:auto;
  object-fit:contain;display:block}
@media (max-width:26rem){
  .option-tile .ic.logo{width:4.75rem}
  .option-tile .ic.logo img{max-width:3.85rem}
}
.option-tile.is-selected,.option-tile:has(input:checked){
  border-color:var(--rc-brand);background:var(--rc-brand-tint);box-shadow:0 0 0 1px var(--rc-brand)}
.option-tile[disabled],.option-tile.is-disabled{opacity:.5;pointer-events:none}

/* checkbox / consent row */
.check{display:flex;align-items:flex-start;gap:var(--rc-sp-sm);font-size:.875rem;
  line-height:1.25rem;cursor:pointer;padding:.25rem 0}
.check input{flex:none;width:1.25rem;height:1.25rem;margin:0;accent-color:var(--rc-brand)}

/* toggle */
.toggle{display:inline-flex;align-items:center;gap:var(--rc-sp-sm);cursor:pointer;font-size:.875rem}
.toggle input{appearance:none;margin:0;flex:none;width:2.75rem;height:1.5rem;
  border-radius:var(--rc-r-full);background:var(--rc-neutral-high);position:relative;
  cursor:pointer;transition:background .2s}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:1.25rem;height:1.25rem;
  border-radius:50%;background:var(--rc-surface);box-shadow:var(--rc-shadow-sm);transition:transform .2s}
.toggle input:checked{background:var(--rc-brand)}
.toggle input:checked::after{transform:translateX(1.25rem)}

/* ---------- SLIDER (extraETF calculator pattern) ---------- */
.slider-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--rc-sp-sm);margin-bottom:var(--rc-sp-md)}
.slider-head .v{font-size:1rem;font-weight:700;color:var(--rc-brand-text);
  font-family:var(--rc-font-num);font-variant-numeric:tabular-nums}
input[type=range].slider{-webkit-appearance:none;appearance:none;width:100%;height:2rem;
  background:transparent;cursor:pointer;display:block}
input[type=range].slider::-webkit-slider-runnable-track{height:8px;border-radius:var(--rc-r-full);
  background:linear-gradient(var(--rc-brand),var(--rc-brand)) 0/var(--pct,50%) 100% no-repeat,var(--rc-neutral-high)}
input[type=range].slider::-moz-range-track{height:8px;border-radius:var(--rc-r-full);background:var(--rc-neutral-high)}
input[type=range].slider::-moz-range-progress{height:8px;border-radius:var(--rc-r-full);background:var(--rc-brand)}
/* blauer Griff auf blauer Spur — vgl. den „Dein Ordervolumen"-Slider im
   Depot-Vergleich; die extraETF-Variante hatte hier einen schwarzen Griff */
input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;
  margin-top:-.375rem;border-radius:50%;background:var(--rc-brand);
  border:2px solid var(--rc-surface);box-shadow:var(--rc-shadow-sm)}
input[type=range].slider::-moz-range-thumb{width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--rc-brand);border:2px solid var(--rc-surface);box-shadow:var(--rc-shadow-sm)}
input[type=range].slider:focus-visible{outline:none}
input[type=range].slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--rc-border-selection)}
input[type=range].slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--rc-border-selection)}
.slider-foot{display:flex;justify-content:space-between;gap:var(--rc-sp-sm);margin-top:.25rem;
  font-size:.75rem;line-height:1rem;color:var(--rc-text-muted);
  font-family:var(--rc-font-num);font-variant-numeric:tabular-nums}
.slider-foot .mark{color:var(--rc-brand-text)}

/* ---------- WIZARD CHROME ---------- */
/* extraETF zeigt Chrome, statt es zu verstecken: 6px hohe Spur auf getönter
   Fläche, Füllung im Markenblau (vgl. Bootstraps `.progress`). Die
   extraETF-Variante fährt hier bewusst 3px. */
.wizard-progress{height:6px;background:var(--rc-neutral-high);border-radius:var(--rc-r-full);overflow:hidden}
.wizard-progress>i{display:block;height:100%;width:0;background:var(--rc-brand);
  border-radius:var(--rc-r-full);transition:width .4s cubic-bezier(.25,1,.5,1)}
.wizard-step-label{font-size:.75rem;line-height:1rem;letter-spacing:.02rem;font-weight:600;
  color:var(--rc-text-muted);font-family:var(--rc-font-num);font-variant-numeric:tabular-nums}
.why-box{background:var(--rc-brand-muted);border-radius:var(--rc-r-card);
  padding:var(--rc-sp-md) var(--rc-sp-lg);color:var(--rc-text)}
.why-box>.t{font-size:.875rem;font-weight:600;line-height:1.25rem;color:var(--rc-brand-text);
  margin-bottom:.25rem}
.why-box>p{margin:0;font-size:.875rem;line-height:1.25rem;color:var(--rc-text-subdued)}
.find-hint{display:flex;gap:var(--rc-sp-sm);align-items:flex-start;
  background:var(--rc-neutral);border-radius:var(--rc-r-lg);
  padding:var(--rc-sp-sm) var(--rc-sp-md);font-size:.875rem;line-height:1.25rem;color:var(--rc-text-subdued)}
.find-hint b{color:var(--rc-text);font-weight:600}
.info-link{display:inline-flex;align-self:flex-start;align-items:center;gap:.375rem;
  font-size:.875rem;color:var(--rc-text-subdued);border-bottom:1px solid var(--rc-brand)}
.info-link:hover{color:var(--rc-text)}
.wizard-nav{display:flex;align-items:center;gap:var(--rc-sp-sm);margin-top:var(--rc-sp-xl)}

/* ---------- BADGES / PILLS ----------
   extraETFs Signatur-Badge ist das „KOSTENFREI"-Label aus dem Depot-Vergleich:
   Versalien, 5px Radius, gespurt, fett, hellgrüner Grund. Deshalb hier
   `text-transform:uppercase` — in der extraETF-Variante sind Badges
   gemischtschriftlich. */
.badge{display:inline-flex;align-items:center;gap:.375rem;min-height:var(--rc-ctl-xs);
  padding:.3rem var(--rc-sp-xs);border-radius:var(--rc-r-md);
  font-size:.6875rem;font-weight:700;line-height:1rem;letter-spacing:.04em;
  text-transform:uppercase;
  background:var(--rc-neutral);color:var(--rc-text-subdued);white-space:nowrap}
.badge .dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex:none}
.badge-brand{background:var(--rc-brand);color:var(--rc-on-brand)}
.badge-ok,.badge-hoch{background:var(--rc-positive-muted);color:var(--rc-positive-text)}
/* Bernstein statt Deep Orange: Einordnung, kein Alarm (siehe --rc-caution-*).
   Die lauten Warnungen (.warn-box/.warn-quiet) behalten --rc-warning. */
.badge-warn,.badge-mittel{background:var(--rc-caution-muted);color:var(--rc-caution-text)}
.badge-bad{background:var(--rc-negative-muted);color:var(--rc-negative-text)}
.badge-info{background:var(--rc-info-muted);color:var(--rc-info-text)}
.badge-neutral,.badge-niedrig{background:var(--rc-neutral);color:var(--rc-text-muted)}
.pill{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem var(--rc-sp-sm);
  border-radius:var(--rc-r-full);border:1px solid var(--rc-border);background:var(--rc-surface);
  font-size:.75rem;line-height:1rem;letter-spacing:.02rem;color:var(--rc-text-subdued);white-space:nowrap}
.pill-brand{border-color:var(--rc-brand);color:var(--rc-brand-text);background:var(--rc-brand-tint)}

/* ---------- STEPPER (register.html pattern) ---------- */
.stepper{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.step{display:flex;gap:var(--rc-sp-lg);padding-bottom:var(--rc-sp-lg);position:relative}
.step:last-child{padding-bottom:0}
.step>.n{flex:none;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--rc-border-moderate);color:var(--rc-text-muted);background:transparent;
  font-size:1.125rem;font-weight:700;z-index:1;
  font-family:var(--rc-font-num);font-variant-numeric:tabular-nums}
.step:not(:last-child)::before{content:"";position:absolute;left:calc(1.5rem - 1px);top:3rem;
  bottom:0;width:2px;background:var(--rc-border-moderate)}
.step>.tx{display:flex;flex-direction:column;padding-top:.6rem;min-width:0}
.step>.tx>.t{font-size:1rem;font-weight:700;line-height:1.375rem}
.step>.tx>.s{margin-top:.25rem;font-size:.8125rem;line-height:1.25rem;color:var(--rc-text-muted)}
/* erledigt = grün, aktiv = blau. Vorher war „erledigt" cyan (--rc-info), was in
   extraETFs Palette mit dem Info-Ton kollidiert und nichts abgeschlossenes sagt. */
.step.is-done>.n{background:var(--rc-positive);border-color:transparent;color:#fff}
.step.is-active>.n{background:var(--rc-brand);border-color:transparent;color:var(--rc-on-brand)}
.step.is-active>.tx>.t{color:var(--rc-text-strong)}
.step.is-todo>.n{border-color:var(--rc-border-moderate);color:var(--rc-text-muted)}
/* compact horizontal variant for narrow screens / headers */
.stepper-h{flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--rc-sp-sm)}
.stepper-h .step{flex-direction:row;align-items:center;gap:var(--rc-sp-sm);padding:0}
.stepper-h .step::before{display:none}
.stepper-h .step>.n{width:2rem;height:2rem;font-size:.875rem}
.stepper-h .step>.tx{padding:0}
.stepper-h .step>.tx>.t{font-size:.875rem}

/* ---------- RESULT HERO (one big number) ---------- */
.result-hero{text-align:center;padding-block:var(--rc-sp-2xl)}
.result-hero .kicker{font-size:.875rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--rc-text-muted);margin-bottom:var(--rc-sp-md)}
.result-hero .num{font-family:var(--rc-font-num);font-weight:800;
  font-size:clamp(3rem,12vw,5.5rem);line-height:1;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;color:var(--rc-text-strong);
  display:block;overflow-wrap:anywhere}
.result-hero .num em{font-style:normal;color:var(--rc-brand-text)}
.result-hero .unit{font-size:.45em;vertical-align:.25em;margin-left:.1em}
.result-hero .sub{margin:var(--rc-sp-md) auto 0;max-width:var(--rc-text-w);
  font-size:1rem;line-height:1.625rem;color:var(--rc-text-subdued)}
.result-figure{font-family:var(--rc-font-num);font-weight:800;letter-spacing:-.02em;
  font-size:2.25rem;line-height:2.375rem;font-variant-numeric:tabular-nums;color:var(--rc-text-strong)}

/* ---------- AMPEL (traffic light) ---------- */
.ampel{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .45rem;
  border-radius:var(--rc-r-full);background:var(--rc-neutral);vertical-align:middle}
.ampel i{width:.6rem;height:.6rem;border-radius:50%;background:var(--rc-text-disabled);display:block}
.ampel[data-ampel="rot"] i:nth-child(1){background:var(--rc-negative)}
/* eigenes Gelb: --rc-warning ist bei extraETF ein Deep Orange und wäre in
   einer Ampel nicht von Rot zu unterscheiden */
.ampel[data-ampel="gelb"] i:nth-child(2){background:var(--rc-ampel-gelb)}
.ampel[data-ampel="gruen"] i:nth-child(3){background:var(--rc-positive)}
.ampel-row{display:inline-flex;align-items:center;gap:var(--rc-sp-xs);font-size:.875rem}

/* ---------- CALLOUTS ---------- */
/* QA: .ok-box joined the base group — r40/r42 use it WITHOUT .note-box, and on
   its own it only ever set colours, so those boxes had no padding/flex/radius. */
.note-box,.warn-box,.crit-box,.ok-box{display:flex;gap:var(--rc-sp-md);align-items:flex-start;
  border-radius:var(--rc-r-card);padding:var(--rc-sp-md) var(--rc-sp-lg);
  border:1px solid var(--rc-border);background:var(--rc-surface-high)}
/* Icon slot. Two shapes occur: a literal <svg>/emoji child, or app.js's
   <span data-icon="…"> wrapper (QA: the old `> svg` child selector never matched
   the wrapper case, so injected icons fell back to the 1.125rem base size). */
.note-box>svg,.warn-box>svg,.crit-box>svg,.ok-box>svg,
.note-box>[data-icon],.warn-box>[data-icon],.crit-box>[data-icon],.ok-box>[data-icon]{
  flex:none;margin-top:.1rem}
.note-box>svg,.warn-box>svg,.crit-box>svg,.ok-box>svg,
.note-box>[data-icon]>svg,.warn-box>[data-icon]>svg,.crit-box>[data-icon]>svg,.ok-box>[data-icon]>svg{
  width:1.5rem;height:1.5rem}
.note-box>[data-icon]{color:var(--rc-text-muted)}
/* .find-hint has the same shape; without flex:none its icon span shrank to ~4px
   (svg{max-width:100%} then clamped the icon itself). */
.find-hint>svg,.find-hint>[data-icon]{flex:none;margin-top:.1rem;color:var(--rc-text-muted)}
.find-hint>svg,.find-hint>[data-icon]>svg{width:1.125rem;height:1.125rem}
.warn-box>[data-icon]{color:var(--rc-warning-text)}
.crit-box>[data-icon]{color:var(--rc-negative-text)}
.ok-box>[data-icon]{color:var(--rc-positive-text)}
.note-box .t,.warn-box .t,.crit-box .t,.ok-box .t{font-size:1rem;font-weight:600;line-height:1.25rem;margin-bottom:.25rem}
.note-box p,.warn-box p,.crit-box p,.ok-box p{margin:0;font-size:.875rem;line-height:1.25rem;color:var(--rc-text-subdued)}
/* mandatory Zulagen-Rückzahlung warning */
.warn-box{background:var(--rc-warning-muted);border-color:var(--rc-warning);color:var(--rc-text)}
.warn-box .t{color:var(--rc-warning-text)}
.crit-box{background:var(--rc-negative-muted);border-color:var(--rc-negative-border)}
.crit-box .t{color:var(--rc-negative-text)}
.ok-box{background:var(--rc-positive-muted);border-color:var(--rc-positive)}
.ok-box .t{color:var(--rc-positive-text)}

/* ---------- TABLES (dashboard) ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rc-border);border-radius:var(--rc-r-card);
  background:var(--rc-surface)}
table.tbl{width:100%;min-width:38rem;border-collapse:collapse;font-size:.875rem}
table.tbl th,table.tbl td{text-align:left;padding:var(--rc-sp-sm) var(--rc-sp-md);
  border-bottom:1px solid var(--rc-border);vertical-align:top}
table.tbl thead th{background:var(--rc-surface-sunken);font-size:.6875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--rc-text-muted);white-space:nowrap}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--rc-brand-muted)}
table.tbl td.num,table.tbl th.num{text-align:right;
  font-family:var(--rc-font-num);font-variant-numeric:tabular-nums}
table.tbl td.strong{font-weight:600}

/* ---------- UPLOAD DROPZONE ---------- */
.upload-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--rc-sp-sm);text-align:center;width:100%;min-height:12rem;cursor:pointer;
  border:2px dashed var(--rc-border-moderate);border-radius:var(--rc-r-card);
  background:var(--rc-surface-high);color:var(--rc-text-subdued);
  padding:var(--rc-sp-xl);transition:var(--rc-tap)}
.upload-drop:hover,.upload-drop.is-over{border-color:var(--rc-brand);background:var(--rc-brand-tint)}
.upload-drop .t{display:block;font-size:1rem;font-weight:700;line-height:1.5rem;color:var(--rc-text)}
.upload-drop .s{display:block;max-width:26rem;font-size:.8125rem;line-height:1.25rem;color:var(--rc-text-muted)}
.upload-drop svg{width:2.5rem;height:2.5rem;color:var(--rc-brand-text)}
.file-row{display:flex;align-items:center;gap:var(--rc-sp-sm);padding:var(--rc-sp-sm) var(--rc-sp-md);
  border:1px solid var(--rc-border);border-radius:var(--rc-r-lg);background:var(--rc-surface);font-size:.875rem}
.file-row .ic{flex:none;width:2rem;height:2rem;border-radius:var(--rc-r-md);display:grid;
  place-items:center;background:var(--rc-neutral);color:var(--rc-text-subdued)}

/* ---------- LIST ROWS (dashboard / documents) ---------- */
/* `list-style/margin/padding` reset so .list also works on <ul>/<ol> — without
   it the browser's default 40px list indent pushed every row's text inward. */
.list{display:flex;flex-direction:column;border:1px solid var(--rc-border);
  border-radius:var(--rc-r-card);overflow:hidden;background:var(--rc-surface);
  list-style:none;margin:0;padding:0}
.list-row{display:flex;align-items:center;gap:var(--rc-sp-md);padding:var(--rc-sp-md) var(--rc-sp-lg);
  border-bottom:1px solid var(--rc-border);color:inherit;text-decoration:none}
.list-row:last-child{border-bottom:0}
.list-row:hover{background:var(--rc-neutral)}
.list-row .ic{flex:none;width:2.5rem;height:2.5rem;border-radius:var(--rc-r-md);display:grid;
  place-items:center;background:var(--rc-brand-muted);color:var(--rc-brand-text)}
.list-row .tt{display:block;font-size:.9375rem;font-weight:600;line-height:1.375rem}
.list-row .ss{display:block;font-size:.8125rem;line-height:1.25rem;color:var(--rc-text-muted)}
.list-row .chev{margin-left:auto;color:var(--rc-text-muted);flex:none}

/* ---------- MISC ---------- */
.skeleton{background:linear-gradient(90deg,var(--rc-neutral) 25%,var(--rc-neutral-high) 50%,var(--rc-neutral) 75%);
  background-size:200% 100%;animation:rc-sk 1.3s infinite;border-radius:var(--rc-r-md)}
@keyframes rc-sk{to{background-position:-200% 0}}
.spinner{width:2.75rem;height:2.75rem;border:3px solid var(--rc-neutral-high);
  border-top-color:var(--rc-brand);border-radius:50%;animation:rc-sp 1s linear infinite}
@keyframes rc-sp{to{transform:rotate(360deg)}}
.icon-lg{width:3.5rem;height:3.5rem;border-radius:var(--rc-r-card);display:grid;place-items:center;flex:none}
.icon-lg svg{width:1.75rem;height:1.75rem}
.icon-lg.brand{background:var(--rc-brand-muted);color:var(--rc-brand-text)}
.icon-lg.ok{background:var(--rc-positive-muted);color:var(--rc-positive-text)}
.icon-lg.warn{background:var(--rc-warning-muted);color:var(--rc-warning-text)}
.icon-lg.bad{background:var(--rc-negative-muted);color:var(--rc-negative-text)}
.footer-mini{color:var(--rc-text-muted);font-size:.75rem;text-align:center;padding:var(--rc-sp-2xl) 0}
.modal-backdrop{position:fixed;inset:0;background:var(--rc-blanket);display:grid;place-items:center;
  z-index:200;padding:var(--rc-sp-lg)}
.modal{background:var(--rc-surface);border-radius:var(--rc-r-modal);box-shadow:var(--rc-shadow-xl);
  max-width:32rem;width:100%;padding:var(--rc-sp-2xl)}

/* ---------- PROTOTYPE TOOLBAR (injected by app.js) ---------- */
/* RD: reads as a dev strip now, not as product chrome — it sits BELOW the
   injected `.rc-header` (see REDESIGN LAYER) and is tinted to the sunken
   surface so the eye skips it. Heights are unchanged on purpose: the
   `.portal nav.side{top:3.125rem}` sticky offset below is measured off it. */
#proto-bar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:var(--rc-sp-sm);
  padding:.5rem var(--rc-sp-md);background:var(--rc-surface-sunken);
  border-bottom:1px solid var(--rc-border);font-size:.75rem;line-height:1rem}
#proto-bar .pb-brand{display:flex;align-items:center;gap:.4rem;color:var(--rc-text-muted);
  font-size:.8125rem;border-bottom:0;padding-bottom:0}
#proto-bar .pb-brand b{color:var(--rc-brand-text);font-weight:600}
#proto-bar .pb-scr{color:var(--rc-text-muted);font-family:var(--rc-font-mono);font-size:.6875rem}
#proto-bar .pb-sp{flex:1}
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--rc-neutral);
  border:1px solid var(--rc-border);border-radius:var(--rc-r-full)}
.seg button{border:0;background:none;font:inherit;font-size:.6875rem;font-weight:600;
  color:var(--rc-text-muted);padding:.25rem .6rem;border-radius:var(--rc-r-full);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--rc-surface);color:var(--rc-brand-text);
  box-shadow:var(--rc-shadow-sm)}

/* ---------- PAGE FRAME (index / simple screens) ---------- */
.frame{width:100%;max-width:72rem;margin-inline:auto;padding:var(--rc-sp-2xl) var(--rc-sp-lg) 5rem}
body.frame-mobile .frame{max-width:430px}
body.frame-embed .frame{max-width:var(--rc-wizard-w)}

/* ---------- BRAND LOCKUP (sidebar / mobile topbar) ---------- */
.rc-head{display:flex;align-items:center;gap:.6rem}
.rc-mark{flex:none;width:1.75rem;height:1.75rem;border-radius:var(--rc-r-md);
  background:var(--rc-brand);position:relative}
.rc-mark::after{content:"";position:absolute;inset:.45rem;border-radius:2px;
  background:var(--rc-on-brand);clip-path:polygon(0 60%,35% 100%,100% 12%,100% 40%,35% 100%,0 85%)}
.rc-name{font-size:1rem;font-weight:600;letter-spacing:-.01em}

/* ---------- PORTAL SHELL (client area, r50+) ---------- */
.portal{display:grid;grid-template-columns:15rem 1fr;min-height:calc(100vh - 2.5rem)}
.portal nav.side{display:flex;flex-direction:column;gap:2px;padding:var(--rc-sp-lg) var(--rc-sp-sm);
  background:var(--rc-surface);border-right:1px solid var(--rc-border)}
.portal nav.side .rc-head{margin:.25rem .5rem var(--rc-sp-lg)}
.portal nav.side a{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;
  border-radius:var(--rc-r-lg);border-bottom:0;color:var(--rc-text-muted);
  font-size:.9375rem;font-weight:600}
.portal nav.side a:hover{background:var(--rc-neutral);color:var(--rc-text)}
.portal nav.side a.active{background:var(--rc-brand-tint);color:var(--rc-brand-text)}
.portal .main{min-width:0;padding:var(--rc-sp-xl) var(--rc-sp-2xl) 4rem}
.portal-topbar,.side-backdrop{display:none}
.portal nav.side a svg{flex:none}
/* group heading between nav sections (design-system.html) — align with the links */
.portal nav.side>.label-xs{padding:var(--rc-sp-sm) .75rem .25rem}

/* Desktop-only sidebar behaviour. Guarded on purpose: below 48rem the nav is an
   off-canvas drawer (position:fixed) and `sticky` would fight it. */
@media (min-width:48.0625rem){
  /* 3.125rem = measured height of the sticky #proto-bar (49px at desktop widths).
     Sticking at 0 instead would slide the brand lockup under the toolbar. */
  /* RD fix: with .rc-header injected above the bar, a viewport-clamped nav item
     can no longer paint the full column (align-self:start stops it stretching,
     and the clamp made the surface/border end mid-page). The column visual now
     lives on the grid container; the nav is only the sticky content. */
  .portal{background:linear-gradient(to right,
    var(--rc-surface) 15rem,
    var(--rc-border) 15rem,var(--rc-border) calc(15rem + 1px),
    transparent calc(15rem + 1px))}
  .portal nav.side{background:transparent;border-right:0;
    position:sticky;top:3.125rem;align-self:start;
    max-height:calc(100dvh - 3.125rem);overflow-y:auto}
  /* RD: the injected .rc-header sits directly above and already carries the
     brand — a second lockup here made the mark appear three times per screen.
     Kept in the DOM for the mobile drawer, where it is an overlay and the
     header is not visible. */
  .portal nav.side .rc-head{display:none}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:48rem){
  .section-container{padding-inline:var(--rc-sp-lg)}
  .wizard-shell{padding-inline:var(--rc-sp-md)}
  .card.pad,.pad{padding:var(--rc-sp-md)}
  .card-divided>*,.card-head,.list-row{padding-inline:var(--rc-sp-md)}
  .btn{font-size:1rem;width:100%}
  .btn.btn-inline{width:auto}
  .wizard-nav{flex-direction:column-reverse;align-items:stretch}
  .step>.n{width:2.5rem;height:2.5rem;font-size:1rem}
  .step:not(:last-child)::before{left:calc(1.25rem - 1px);top:2.5rem}
  .frame{padding:var(--rc-sp-lg) var(--rc-sp-md) 4rem}
  /* portal: off-canvas drawer + hamburger topbar (chrome injected by app.js) */
  #proto-bar{position:static}
  .portal{display:block;min-height:0}
  .portal-topbar{display:flex;align-items:center;gap:var(--rc-sp-sm);position:sticky;top:0;z-index:40;
    padding:.5rem var(--rc-sp-md);background:var(--rc-surface);border-bottom:1px solid var(--rc-border)}
  .portal-topbar .nav-toggle{flex:none;width:2.5rem;height:2.5rem;display:grid;place-items:center;
    background:var(--rc-surface);border:1px solid var(--rc-border);border-radius:var(--rc-r-lg);
    color:var(--rc-text);cursor:pointer}
  .portal-topbar .nav-toggle svg{width:1.375rem;height:1.375rem}
  .portal nav.side{position:fixed;top:0;left:0;z-index:120;height:100dvh;width:17rem;max-width:82vw;
    overflow-y:auto;transform:translateX(-100%);transition:transform .25s cubic-bezier(.25,1,.5,1)}
  body.nav-open .portal nav.side{transform:none;box-shadow:var(--rc-shadow-xl)}
  .side-backdrop{display:block;position:fixed;inset:0;z-index:110;background:var(--rc-blanket);
    opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  body.nav-open .side-backdrop{opacity:1;visibility:visible}
  .portal .main{padding:var(--rc-sp-lg) var(--rc-sp-md) 4rem}
}
@media (max-width:35rem){
  #proto-bar{flex-wrap:wrap;row-gap:.35rem}
  #proto-bar .pb-scr{display:none}
  .display1{font-size:3rem;line-height:2.75rem}
}

/* ============================================================
   QA ADDITIONS
   Collected from the page-builder reports in ../../QA-TODO.md and
   patched centrally here (never per-page <style>). Everything below
   is additive. The fixes that could only be made in place are marked
   "QA:" at their original location: the base icon size (moved into
   BASE), the callout + .find-hint icon slots, .ok-box joining the
   callout base group, the nav.side group-label padding, and the new
   ≥48rem media branch that carries the sticky sidebar.
   ============================================================ */

/* ---------- Long German compounds must never overflow ----------
   „ALTERSVORSORGEDEPOT", „rentenversicherungspflichtiges" et al. break the
   390px viewport in the display face. lang="de" on <html> gives the browser a
   hyphenation dictionary, so hyphens:auto breaks at real syllables; break-word
   is only the fallback for words with no legal break point. */
h1,h2,h3,h4,h5,h6,
.h2,.h3,.h4,.h5,.h6,
.display1,.display2,.display3{overflow-wrap:break-word;hyphens:auto}

/* ---------- Legal hooks (CONTENT.md §0.3) ----------
   Both classes are always co-applied with a type utility (copy-xs/copy-sm) that
   owns size and line-height — these rules deliberately only add what the
   utilities do not, plus one unification: fine print is always `muted`. */
.rc-legal-short{max-width:var(--rc-text-w);text-wrap:pretty;color:var(--rc-text-muted)}
.rc-legal-short b,.rc-legal-short strong{color:var(--rc-text-subdued);font-weight:600}
.rc-legal-block{background:var(--rc-surface-high);box-shadow:none;color:var(--rc-text-muted)}
.rc-legal-block>summary{color:var(--rc-text-subdued);font-weight:600}
.rc-legal-block p{color:var(--rc-text-muted)}
.rc-legal-block a{color:inherit}

/* ---------- Accordion (<details>) ----------
   Replaces index.html's glyph-swap script: the chevron is a rotating CSS box, so
   no JS keeps a ▸/▾ character in sync. Summaries come in two shapes in this
   prototype — `summary.card-head` (already a flex header) and a bare
   `summary.h5` inside `details.card.pad`. Making every summary a flex row gives
   both the chevron on the right without touching either one's padding. */
summary{display:flex;align-items:center;gap:var(--rc-sp-md);cursor:pointer;
  list-style:none;transition:color .15s ease-out}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--rc-text-strong)}
summary::after{content:"";flex:none;margin-left:auto;width:.5rem;height:.5rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-.1rem,-.1rem);opacity:.55;
  transition:transform .2s cubic-bezier(.25,1,.5,1)}
details[open]>summary::after{transform:rotate(-135deg) translate(-.1rem,-.1rem)}
/* let the first cell absorb the free space so badges stay right-aligned next to
   the chevron instead of being centred by .card-head's space-between */
summary.card-head>*:first-child{flex:1;min-width:0}
/* a closed card-head must not leave a hairline hanging under itself */
details:not([open])>summary.card-head{border-bottom:0}

/* ---------- Option tiles / grids ---------- */
/* a badge dropped straight into a tile used to stretch and blow up the grid */
.option-tile>.badge{flex:none;align-self:flex-start}
.tile-grid>*{min-width:0}
/* 3-up card grid, same auto-fit idiom as .grid-2 */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  gap:var(--rc-sp-md)}

/* ---------- Forms ---------- */
/* computed / locked fields (r22) must not look editable */
input[readonly],.input[readonly],.field input[readonly],
.input[readonly]:hover,.field input[readonly]:hover,
.input[readonly]:focus,.field input[readonly]:focus{
  background:var(--rc-surface-sunken);color:var(--rc-text-subdued);
  border-color:var(--rc-border);cursor:default}

/* ---------- Flex housekeeping ---------- */
/* .stack stretches its children; a text link must stay as wide as its text */
.stack>.btn-link,.stack>.info-link{align-self:flex-start}
/* heading + action headers squeezed at 390px because .spread never wrapped */
.spread{flex-wrap:wrap}
/* rows inside a .card-divided already get a top border from the parent */
.card-divided .list-row{border-bottom:0}

/* ---------- Anchors under the sticky #proto-bar ---------- */
:target,[id]{scroll-margin-top:3.5rem}

/* ---------- Horizontally scrolling graphics ----------
   Diagrams and charts must scroll on narrow screens instead of shrinking to
   illegibility, so they opt out of the global `svg{max-width:100%}`. */
.diagram-scroll{overflow-x:auto}
.diagram-scroll svg{min-width:38rem;max-width:none}
.rc-chart{overflow-x:auto}
.rc-chart svg{max-width:none}

/* ---------- Small component gaps ---------- */
.pill .dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex:none}
.skeleton{min-height:1rem}

/* ============================================================
   REDESIGN LAYER  (REDESIGN.md, 2026-07-26)
   Apple-style minimalism · progressive disclosure · must read as
   extraETF. Appended so it wins on source order; the handful of
   fixes that could only be made where the value lives are marked
   "RD:" up above (.wizard-shell padding, .card shadow,
   .wizard-progress, #proto-bar tint).

   New public API for page builders — see design-tokens-report.md §8:
     .rc-header + children      injected by app.js, never hand-written
     .rc-mark-plus              real brand "+" glyph (app.js-rendered)
     details.disclose           THE progressive-disclosure component
     .warn-quiet                quiet inline warning (law 3 exception)
     .wizard-q                  the question block (big calm type)
     .card-quiet                borderless/shadowless card
     .option-tile.is-picked     auto-advance affordance
   ============================================================ */

/* ---------- 1 · WHITE-LABEL PRODUCT HEADER (injected by app.js) ----------
   extraETFs Kopfleiste ist eine DUNKLE SLATE-BAR: gemessen an beiden Snapshots
   `background:rgb(50,65,72)` (= #324148, deren --color-theme-dark) bei 50px
   Höhe, darin die weiße Wortmarke. Das ist der auffälligste Unterschied zur
   extraETF-Variante, deren Header randlos auf der Seitenfläche sitzt.

   Die Leiste bleibt in BEIDEN Themes #324148: sie ist Markenfläche, keine
   Oberfläche der Seite — deshalb steht das Token nur in :root und wird im
   Dunkelmodus absichtlich nicht überschrieben.

   LOGO-THEMING (Entscheidung): EIN inline <svg>. Die acht Buchstabenpfade
   liegen in `<g fill="currentColor">` und folgen damit dem `color` der Leiste;
   die rote Scheibe der Bildmarke ist die einzige gebackene Farbe und wird von
   app.js mit `class="ee-disc"` getaggt, damit sie hier an genau einer Stelle
   steht. Kein [data-theme]-Umschalten, kein Flackern, ein Codepfad.
   assets/extraetf-logo.svg / -dark.svg / -mark.svg bleiben als extrahierte
   Quell-Assets (und für <img>-Nutzung, wo currentColor nicht hinreicht). */
.rc-header{display:flex;align-items:center;gap:var(--rc-sp-md);
  min-height:3.5rem;padding:var(--rc-sp-sm) var(--rc-sp-xl);
  background:var(--rc-header-bg);color:#fff}
@media (min-width:48rem){.rc-header{min-height:4rem;padding-inline:var(--rc-sp-2xl)}}
.rc-header a,.rc-header a:hover{border-bottom:0;padding-bottom:0;text-decoration:none}
.rc-header-logo{flex:none;display:flex;align-items:center;color:inherit}
.rc-header-logo svg{display:block;height:1.5rem;width:auto;max-width:none}
.rc-header-logo:hover{opacity:.75}
/* die rote Scheibe der extraETF-Bildmarke — die einzige gebackene Farbe */
.ee-disc{fill:#db0032}
/* quiet product name, hairline-separated from the wordmark */
.rc-header-product{display:flex;align-items:center;gap:var(--rc-sp-md);min-width:0;
  font-size:.8125rem;line-height:1rem;letter-spacing:.02rem;font-weight:500;
  color:rgba(255,255,255,.72);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-header-product::before{content:"";flex:none;width:1px;height:1.25rem;
  background:rgba(255,255,255,.25)}
.rc-header-end{margin-left:auto;display:flex;align-items:center;gap:var(--rc-sp-sm)}
@media (max-width:35rem){
  .rc-header{padding-inline:var(--rc-sp-md);gap:var(--rc-sp-sm);min-height:3.25rem}
  .rc-header-logo svg{height:1.25rem}
  .rc-header-product{gap:var(--rc-sp-sm);font-size:.75rem}
}
/* die kompakte Bildmarke, die app.js in `.rc-head` rendert (Sidebar / mobile
   Topbar). Die nackte `.rc-mark`-Regel weiter oben bleibt als Fallback für
   handgeschriebene Lockups (design-system.html), diese Variante hebt sie nur
   auf. Farbe kommt aus dem Asset (rote Scheibe), nicht von hier. */
.rc-mark-logo{background:none;display:grid;place-items:center;border-radius:0}
.rc-mark-logo::after{display:none}
.rc-mark-logo svg{width:100%;height:100%;display:block}
/* the mobile portal topbar lost its (now duplicated) lockup — it carries the
   hamburger plus the current page title, truncated, as quiet text */
.portal-topbar .portal-title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ---------- 2 · PROGRESSIVE DISCLOSURE — details.disclose ----------
   REDESIGN law 2: every explanation (Warum fragen wir das? / Wo finde ich das? /
   info link / legal line) hides behind ONE quiet affordance per screen.

   Composes with the QA ADDITIONS accordion block above — it already hides the
   native marker and draws the chevron as a rotating CSS box on `summary::after`,
   including the [open] rotation. So there is NO second chevron here: we only
   pull that same pseudo-element back next to the text (the global rule pushes
   it right with `margin-left:auto`, which is right for card headers and wrong
   for a text link) and shrink it. Never add a ▸/⌄ character to a summary. */
.disclose{border:0;background:none;padding:0;margin:0}
.disclose>summary{display:inline-flex;width:auto;gap:.3rem;
  font-size:.875rem;line-height:1.25rem;font-weight:400;color:var(--rc-text-muted);
  padding:.25rem 0;border-radius:var(--rc-r-md)}
.disclose>summary:hover{color:var(--rc-text)}
.disclose>summary::after{margin-left:.15rem;width:.36rem;height:.36rem;
  border-width:1.5px;opacity:.6;transform:rotate(45deg) translate(-.08rem,-.08rem)}
.disclose[open]>summary::after{transform:rotate(-135deg) translate(-.08rem,-.08rem)}
.disclose[open]>summary{color:var(--rc-text)}
/* the open panel: calm, soft, generous — never a bordered box.
   Feedback 26.07.2026 („die Formatierung kann viel besser sein"): the panel read
   as one grey wall. Three changes: a narrower measure (~58 characters, so lines
   stay scannable), more air between paragraphs and a real line-height, and
   `.disclose-body h4` as a block sub-label so „Wo finde ich das?" reads as its
   own section instead of bold text glued to the front of a paragraph. */
.disclose-body{margin-top:var(--rc-sp-sm);padding:var(--rc-sp-lg);
  background:var(--rc-neutral);border-radius:var(--rc-r-card);
  font-size:.875rem;line-height:1.5rem;color:var(--rc-text-subdued);
  max-width:34rem;text-wrap:pretty}
.disclose-body h4{font-size:.8125rem;line-height:1.25rem;font-weight:600;
  color:var(--rc-text);margin:0;letter-spacing:.01em}
.disclose-body h4+p{margin-top:.25rem}
.disclose-body>h4:not(:first-child){margin-top:var(--rc-sp-lg)}
/* glossary aside — the inline "(staatlicher Zuschuss, …)" parentheses made
   sentences unreadable; as a quiet block they stop interrupting the line */
.disclose-body .gloss{display:block;font-size:.8125rem;line-height:1.25rem;
  color:var(--rc-text-muted);padding-left:.7rem;
  border-left:2px solid var(--rc-border);margin-top:.35rem}
.disclose-body>*+*{margin-top:var(--rc-sp-md)}
.disclose-body p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
/* RD fix: the margin:0 above (0,1,1) beats the >*+* sibling rule (0,1,0) —
   restore paragraph rhythm inside disclosures without markup workarounds */
.disclose-body>p+p,.disclose-body>*+p{margin-top:var(--rc-sp-md)}
.disclose-body b,.disclose-body strong{color:var(--rc-text);font-weight:600}
.disclose-body .t{display:block;font-weight:600;color:var(--rc-text);margin-bottom:.2rem}
.disclose-body a{color:inherit}
/* CONTENT.md copy relocated verbatim keeps its old wrappers — inside the panel
   they give up their boxes, so nesting stays flat (no cards-in-cards). */
.disclose-body .why-box,.disclose-body .find-hint,.disclose-body .note-box{
  display:block;background:none;border:0;padding:0;border-radius:0;color:inherit}
.disclose-body .find-hint>svg,.disclose-body .find-hint>[data-icon],
.disclose-body .note-box>svg,.disclose-body .note-box>[data-icon]{display:none}
.disclose-body .why-box>.t{color:var(--rc-text)}
.disclose-body .why-box>p,.disclose-body .note-box p{color:inherit}
.disclose-body .info-link{display:inline-flex;font-size:inherit;color:var(--rc-text)}

/* ---------- 3 · QUIET INLINE NOTICE — .warn-quiet ----------
   REDESIGN: the mandatory Zulagen-Rückzahlung warning must appear wherever
   "kündigen" appears, but as a quiet line — not a shouting box. The loud
   `.warn-box` survives for exactly one place: the actual kündigen choice
   (r52 Weg 4). Works standalone and co-applied with `.warn-box`. */
.warn-quiet,.warn-box.warn-quiet{display:flex;align-items:flex-start;gap:.4rem;
  background:none;border:0;box-shadow:none;padding:0;border-radius:0;
  font-size:.875rem;line-height:1.25rem;color:var(--rc-warning-text);
  max-width:var(--rc-text-w);text-wrap:pretty}
.warn-quiet>svg,.warn-quiet>[data-icon],
.warn-box.warn-quiet>svg,.warn-box.warn-quiet>[data-icon]{
  flex:none;margin-top:.1rem;color:var(--rc-warning-text)}
.warn-quiet>svg,.warn-quiet>[data-icon]>svg,
.warn-box.warn-quiet>svg,.warn-box.warn-quiet>[data-icon]>svg{width:1rem;height:1rem}
.warn-quiet .t,.warn-box.warn-quiet .t{display:inline;font-size:inherit;font-weight:600;
  line-height:inherit;margin:0;color:inherit}
.warn-quiet p,.warn-box.warn-quiet p{margin:0;font-size:inherit;line-height:inherit;color:inherit}

/* ---------- 4 · CALM PASS (wizard + global) ---------- */
/* `.frame > .wizard-shell` would stack 2rem + 2.5rem of top padding; the shell
   owns the rhythm, the frame only keeps a little air. */
.frame>.wizard-shell{padding-top:var(--rc-sp-md)}
@media (min-width:48rem){.wizard-shell{padding-top:3.5rem}}
/* the question block. `.wizard-q` is the class for rebuilt screens; the
   `> header` selector upgrades the screens that already ship the CONTENT.md
   skeleton without touching their HTML. */
.wizard-q,.wizard-shell>header{display:flex;flex-direction:column;gap:var(--rc-sp-sm);
  padding-block:var(--rc-sp-lg) var(--rc-sp-xs);max-width:var(--rc-text-w)}
/* Fragen-Typo: Montserrat 700 statt Montserrat 600, eine Stufe kleiner — bei 800
   würde die Frage wie eine Marketing-Headline schreien, und Montserrat trägt
   bei gleicher Punktgröße optisch weiter als Montserrat. */
.wizard-q>h1,.wizard-q>h2,.wizard-q>.h2,
.wizard-shell>header>h1:not(.sr-only),.wizard-shell>header>h2,.wizard-shell>header>.h2{
  font-size:1.875rem;line-height:2.25rem;font-weight:700;letter-spacing:-.02em}
@media (min-width:48rem){
  .wizard-q>h1,.wizard-q>h2,.wizard-q>.h2,
  .wizard-shell>header>h1:not(.sr-only),.wizard-shell>header>h2,.wizard-shell>header>.h2{
    font-size:2.375rem;line-height:2.625rem;letter-spacing:-.025em}
}
/* one short subline, subdued — no wall of text under the question */
.wizard-q>p,.wizard-shell>header>p{max-width:var(--rc-text-w);color:var(--rc-text-subdued);
  text-wrap:pretty}
/* borderless card for the next wave (whitespace does the structuring) */
.card-quiet{background:none;border-color:transparent;box-shadow:none}
/* nested cards are the main noise source: an inner card never re-borders.
   Kept deliberately narrow — a `.tbl-wrap` / `.list` inside a card still needs
   its hairline, because there the border IS the structure. */
.card .card{border-color:transparent;box-shadow:none}

/* ---------- 5 · AUTO-ADVANCE AFFORDANCE — .option-tile.is-picked ----------
   Set by RC.autoAdvance(): ~250ms of "yes, that one" before the navigation.
   Deliberately stronger than :hover and calmer than a 2px ring on both sides. */
.option-tile.is-picked{border-color:var(--rc-brand);background:var(--rc-brand-tint);
  box-shadow:0 0 0 1px var(--rc-brand);transform:scale(.99);
  transition:transform .12s ease-out,background .12s ease-out,border-color .12s ease-out}
.option-tile.is-picked .ic{background:var(--rc-brand);color:var(--rc-on-brand)}
/* a picked tile is on its way out — no hover/active fighting the state */
.option-tile.is-picked,.option-tile.is-picked:hover{pointer-events:none}

/* ============================================================
   EXTRAETF LAYER
   Bauteile, die es in der extraETF-Variante nicht gibt oder die
   dort anders aussehen müssen. Angehängt, damit sie über Quellordnung
   gewinnen. Die punktuellen Änderungen, die nur dort möglich waren, wo
   der Wert steht, sind oben im Fließtext kommentiert (Tokens, .btn,
   .card-Schatten, .rc-header, Typo-Stufen, Badge-Versalien).

   Neue öffentliche API für Seitenbauer — siehe ../DESIGN-EXTRAETF.md:
     .rc-hero            Signatur-Verlaufsband (Landing)
     .rc-hero-figure     rechte Bildspalte im Hero, optional
     --rc-cta            Handlungsgrün (Buttons)
     --rc-font-num       Tabellenziffern-Familie
     --rc-header-bg      Farbe der dunklen Kopfleiste
   ============================================================ */

/* ---------- 1 · SIGNATUR-HERO ----------
   Das eine Bauteil, an dem extraETF sofort erkennbar ist: ein diagonales
   Blau-nach-Navy-Band mit weißer, fetter Montserrat. Der Verlauf ist 1:1
   `.landing-container.theme-gradient-dark` aus start.html.

   Das Band ist ein Geschwister von `<main class="frame">`, kein Kind — dadurch
   läuft es ohne `vw`-Rechnung und ohne negative Ränder echt randlos, und es
   kann keinen horizontalen Überlauf erzeugen (die QA-Regel dazu ist hart).
   `.rc-hero-inner` hält die Textspalte auf derselben Breite wie `.frame`, also
   fluchtet die Überschrift mit dem Inhalt darunter.

   Höhe: bewusst flacher als bei extraETF. Dort füllt rechts ein Produktbild die
   Fläche; hier ist rechts nichts, und dieselbe Höhe wäre nur ein leeres Feld. */
.rc-hero{background:var(--rc-hero-grad);color:var(--rc-on-hero)}
/* Breite UND seitliche Polsterung spiegeln `.frame` exakt (72rem / --rc-sp-lg,
   darunter --rc-sp-md) — sonst steht die Überschrift 12 px neben dem Inhalt. */
.rc-hero-inner{width:100%;max-width:72rem;margin-inline:auto;
  padding:3.25rem var(--rc-sp-lg) 3.5rem}
@media (max-width:48rem){
  .rc-hero-inner{padding:2.25rem var(--rc-sp-md) 2.5rem}
}
/* Innerhalb des Bandes kehren sich die Textrollen um: „subdued"/„muted" sind
   auf Navy keine Grautöne mehr, sondern abgestuftes Weiß. */
.rc-hero .eyebrow{color:rgba(255,255,255,.72)}
.rc-hero h1,.rc-hero h2,.rc-hero .display1,.rc-hero .display2,.rc-hero .display3{color:#fff}
.rc-hero .subdued,.rc-hero .copy-lg{color:rgba(255,255,255,.88)}
.rc-hero .muted,.rc-hero .copy-sm{color:rgba(255,255,255,.66)}
.rc-hero a:not(.btn){color:#fff;text-decoration:underline}
/* die Zweitaktion auf dem Band ist weiß umrandet, nicht blau (auf Navy wäre
   Blau-auf-Blau unlesbar) — vgl. „Live-Demo" im extraETF-Hero */
.rc-hero .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.rc-hero .btn-outline:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* ---------- 2 · INFO-BANNER ----------
   extraETFs Hinweisband („Nur für kurze Zeit: …") ist hellblau mit blauer
   Haarlinie, nicht grau auf Grau wie in der extraETF-Variante. */
.note-box{background:var(--rc-brand-muted);border-color:var(--rc-brand-subdued)}
.note-box .t{color:var(--rc-brand-text)}
.note-box>[data-icon]{color:var(--rc-brand-text)}

/* ---------- 3 · AUFKLAPPER ----------
   Links im Panel bleiben blau: extraETF markiert jeden Link farbig, und in
   einer Aufklapp-Fläche ist der Link die einzige Aktion. Die extraETF-
   Variante setzt sie hier bewusst auf `inherit`. */
.disclose-body a{color:var(--rc-brand-text);text-decoration:underline}
.disclose-body a:hover{color:var(--rc-brand-hover)}
.disclose-body .info-link{color:var(--rc-brand-text);border-bottom:0}
/* Der Panel-Grund ist bei extraETF leicht blaustichig, nicht neutralgrau. */
.disclose-body{background:var(--rc-bg);border:1px solid var(--rc-border)}

/* ---------- 4 · SEITENNAVIGATION (Portal, r50+) ----------
   extraETF markiert den aktiven Navigationspunkt mit einem 2px-Balken in
   Markenblau (`.navbar .nav-item.active-nav-selected>a:before`). Übertragen
   auf die vertikale Sidebar wird daraus ein Balken links. */
.portal nav.side a{position:relative;font-weight:500}
.portal nav.side a.active{background:var(--rc-brand-muted);color:var(--rc-brand-text);font-weight:600}
.portal nav.side a.active::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;
  width:3px;border-radius:var(--rc-r-full);background:var(--rc-brand)}

/* ---------- 5 · ZIFFERN ----------
   Restliche zahlenführende Stellen auf die Tabellenziffern-Familie ziehen.
   Alles andere bleibt beim Original-Montserrat (proportionale Ziffern), so
   wie extraETF selbst rendert. */
.result-hero .kicker,.file-row,.badge,.pill,#proto-bar .pb-scr{font-variant-numeric:tabular-nums}
.badge,.pill{font-family:var(--rc-font-num)}

/* ---------- 6 · FEINSCHLIFF ---------- */
/* Ein Button im Hover darf nie unterstrichen werden (a:hover setzt das global) */
.btn:hover,.option-tile:hover,.list-row:hover,.rc-header-logo:hover{text-decoration:none}
/* extraETF setzt Trennlinien heller als ihre Kartenkanten */
hr,.divider{background:var(--rc-border);opacity:.7}
/* Tooltip-/Info-Icons sind bei extraETF durchgehend graue Kreise */
.find-hint>[data-icon],.find-hint>svg{color:var(--rc-brand-text)}