:root{
  /* ============================================================
     DESIGN TOKENS -- siehe DESIGN_DECISIONS.md fuer Herkunft,
     Begruendung und Accessibility-Nachweis jedes Wertes. Neue
     Tokens NIE direkt hier einfuegen, ohne zuerst einen Diff an
     DESIGN_DECISIONS.md Abschnitt 7/10 vorzuschlagen (Governance).

     Stand "Fintech Precision" (Richtung A, Owner-Entscheidung) --
     Uebernahme aus design_handoff_fintech_precision/
     tokens-fintech-precision.css, Diff siehe DESIGN_DECISIONS.md
     Abschnitt 7/10.
     ============================================================ */

  /* ---- Primitive: Farbe (Light) — verfeinerte Navy-Rampe ---- */
  --color-indigo-900:#101B3D;   /* war #16204d */
  --color-indigo-700:#1F3270;   /* war #2b3b82 */
  --color-indigo-500:#3B57B8;   /* war #5670c4 */
  --color-indigo-100:#E7ECFA;   /* war #e8ecf9 */
  --color-copper-700:#8A5A22;   /* war #6b4e1e — Kontrast auf Weiss 5.4:1 */
  --color-copper-100:#F6EDE0;
  --color-ink-900:#0C1222;
  --color-ink-700:#303A4D;
  --color-ink-500:#64708A;
  --color-ink-200:#D6DAE2;      /* Haarlinie */
  --color-ink-100:#F7F8FA;
  --color-white:#ffffff;
  --color-focus:#2F6FED;

  /* ---- Linienhierarchie (3 Gewichte statt einem) ---- */
  --rule-hairline:#EDEFF3;      /* Trennung innerhalb einer Karte */
  --rule-base:#D6DAE2;          /* Kartenkontur, Sektionsgrenze */
  --rule-strong:#0C1222;        /* Abschnittsanfang, Tabellenkopf */

  /* ---- Segmentfarben der IBAN-Positionsskala ---- */
  --seg-country:#101B3D;        /* Stelle 1-2  */
  --seg-checkdigit:#8A5A22;     /* Stelle 3-4  */
  --seg-bankcode:#3B57B8;       /* Stelle 5-12 */
  --seg-account:#64708A;        /* Stelle 13-n */

  /* ---- Semantisch: Zustand (Light) ---- */
  --color-success-fg:#0F6B44;
  --color-success-bg:#E6F3EC;
  --color-warning-fg:#7A5D00;
  --color-warning-bg:#FCF3D6;
  --color-error-fg:#A81F1A;
  --color-error-bg:#FBEAE8;

  /* ---- Spacing: striktes 8-pt-Raster, 4px nur fuer Icon-Optik ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px;               /* Sektionsabstand */
  --grid-unit:8px;              /* Basiseinheit, dokumentarisch */
  --measure-max:1200px;         /* max. Inhaltsbreite, 12 Spalten */
  --measure-text:66ch;          /* Zeilenlaenge Fliesstext */

  /* ---- Radius: Praezision = fast keine Rundung ---- */
  --radius-sm:2px;              /* war 8px  */
  --radius-md:6px;              /* war 12px */
  --radius-lg:6px;              /* war 20px */
  --radius-pill:999px;          /* nur Statusmarken */

  /* ---- Schatten: stark reduziert, Haarlinie traegt die Trennung ---- */
  --shadow-1: 0 1px 0 rgba(12,18,34,0.04);
  --shadow-2: 0 8px 28px rgba(12,18,34,0.08);

  /* ---- Motion: kuerzer und sachlicher als bisher ---- */
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-proof:    cubic-bezier(.2,0,0,1);
  --duration-fast:  120ms;      /* war 150ms */
  --duration-base:  200ms;      /* war 250ms */
  --duration-proof: 260ms;      /* war 400ms */

  /* ---- Primitive: Typografie-Skala ---- */
  --font-size-xs:12px; --font-size-sm:14px; --font-size-base:16px;
  --font-size-md:18px; --font-size-lg:24px; --font-size-xl:32px;
  --font-size-2xl:56px;         /* war 44px — Hero traegt mehr Gewicht */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", "SFMono-Regular", Menlo, monospace;
  --tracking-display:-.03em;
  --tracking-label:.14em;       /* gesperrte Mono-Labels */

  /* ---- Semantisch: Oberflaeche (Light, Default) ---- */
  --color-bg: var(--color-white);
  --color-panel: var(--color-ink-100);
  --color-text-primary: var(--color-ink-900);
  --color-text-body: var(--color-ink-700);
  --color-text-muted: var(--color-ink-500);
  --color-border: var(--color-ink-200);
  --color-brand: var(--color-indigo-700);
  --color-brand-strong: var(--color-indigo-900);
  --color-brand-tint: var(--color-indigo-100);
  --color-accent: var(--color-copper-700);
}

/* ============================================================
   SCHRIFTEN -- selbst gehostet unter public/fonts/, KEIN
   Google-Fonts-CDN (eine CDN-Einbindung wuerde die
   Datenschutzerklaerung aendern -- Owner-Entscheidung, siehe
   design_handoff_fintech_precision/README.md).
   ============================================================ */
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/IBMPlexSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}

/* ============================================================
   DARK MODE -- ausschliesslich ueber Umdefinition der semantischen
   Tokens oben, keine Duplikate von Komponentenregeln (Phase 6).
   Werte sind eigenstaendig gestaltet (siehe DESIGN_DECISIONS.md
   4.4), nicht simpel invertiert.

   --color-brand-strong bleibt in Dark Mode absichtlich dunkel
   (nicht aufgehellt wie --color-brand): es dient als Hintergrund
   fuer weissen Text (Button-Hover, Verlaeufe), --color-brand ist
   dagegen Text auf der Seite selbst und muss zum Lesen aufhellen.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    --color-bg:#0B0E14;
    --color-panel:#12161F;
    --color-text-primary:#E8EBF0;
    --color-text-body:#B4BCC9;
    --color-text-muted:#8D97A8;
    --color-border:#232A38;
    --color-brand:#93A8F0;
    --color-brand-strong:#1B2A5C;
    --color-brand-tint:#1B2A5C;
    --color-accent:#D9A45C;
    --rule-hairline:#1A1F2A;
    --rule-base:#232A38;
    --rule-strong:#E8EBF0;
    --seg-country:#93A8F0;
    --seg-checkdigit:#D9A45C;
    --seg-bankcode:#7FA0F5;
    --seg-account:#8D97A8;
    --color-success-fg:#4FBE8B;
    --color-success-bg:#14251D;
    --color-warning-fg:#D9B44A;
    --color-warning-bg:#2E2810;
    --color-error-fg:#E8938C;
    --color-error-bg:#2A1618;
    --color-focus:#6E9BFF;
    --shadow-1: 0 1px 0 rgba(0,0,0,0.4);
    --shadow-2: 0 8px 28px rgba(0,0,0,0.45);
  }
}
:root[data-theme="dark"]{
  --color-bg:#0B0E14;
  --color-panel:#12161F;
  --color-text-primary:#E8EBF0;
  --color-text-body:#B4BCC9;
  --color-text-muted:#8D97A8;
  --color-border:#232A38;
  --color-brand:#93A8F0;
  --color-brand-strong:#AEBBF0;
  --color-brand-tint:#1B2A5C;
  --color-accent:#D9A45C;
  --rule-hairline:#1A1F2A;
  --rule-base:#232A38;
  --rule-strong:#E8EBF0;
  --seg-country:#93A8F0;
  --seg-checkdigit:#D9A45C;
  --seg-bankcode:#7FA0F5;
  --seg-account:#8D97A8;
  --color-success-fg:#4FBE8B;
  --color-success-bg:#14251D;
  --color-warning-fg:#D9B44A;
  --color-warning-bg:#2E2810;
  --color-error-fg:#E8938C;
  --color-error-bg:#2A1618;
  --color-focus:#6E9BFF;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4);
  --shadow-2: 0 8px 28px rgba(0,0,0,0.45);
}
:root[data-theme="light"]{
  --color-bg: var(--color-white);
  --color-panel: var(--color-ink-100);
  --color-text-primary: var(--color-ink-900);
  --color-text-body: var(--color-ink-700);
  --color-text-muted: var(--color-ink-500);
  --color-border: var(--color-ink-200);
  --color-brand: var(--color-indigo-700);
  --color-brand-strong: var(--color-indigo-900);
  --color-brand-tint: var(--color-indigo-100);
  --color-accent: var(--color-copper-700);
  --rule-hairline:#EDEFF3;
  --rule-base:#D6DAE2;
  --rule-strong:#0C1222;
  --seg-country:#101B3D;
  --seg-checkdigit:#8A5A22;
  --seg-bankcode:#3B57B8;
  --seg-account:#64708A;
  --color-success-fg:#0F6B44; --color-success-bg:#E6F3EC;
  --color-warning-fg:#7A5D00; --color-warning-bg:#FCF3D6;
  --color-error-fg:#A81F1A;  --color-error-bg:#FBEAE8;
  --color-focus:#2F6FED;
  --shadow-1: 0 1px 0 rgba(12,18,34,0.04);
  --shadow-2: 0 8px 28px rgba(12,18,34,0.08);
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
@media (prefers-contrast: more){
  :root{
    --color-border: var(--color-text-muted);
  }
  .search-card, .field input, .tool-card, .btn-secondary{
    border-width:2px;
  }
}
/* Demo-Banner (test-and-demo-plan.md Abschnitt 7) -- nur auf der per
   DEMO_MODE gesteuerten Demo-Instanz sichtbar, siehe views/layout.js
   demoBanner() und die Injektions-Middleware in server.js. */
.demo-banner{
  background:var(--color-warning-bg);
  color:var(--color-warning-fg);
  text-align:center;
  font-size:13px;
  font-weight:600;
  padding:8px 16px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--color-text-body);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
}

/* Alle Zahlenkolonnen tabellarisch: IBAN, BIC, BLZ, Kennzahlen. */
.bd-seg, .len-label, .bank-result-iban, .bank-result-meta,
code, pre, .code-block, input[inputmode="numeric"]{
  font-variant-numeric: tabular-nums;
}

/* Nur fuer Screenreader sichtbar (z. B. aria-live-Ansagen ohne
   sichtbares Duplikat des bereits visuell vorhandenen Textes). */
.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;
}

/* Sichtbarer Fokusring -- Pflicht, nie nur Farbwechsel (WCAG 2.4.7). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--color-focus);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* ---------- Skip-Link (WCAG 2.4.1 Bypass Blocks) ---------- */
/* Erster fokussierbarer Punkt der Seite, ausserhalb des sichtbaren
   Bereichs bis zum Fokus -- so koennen Tastatur-/Screenreader-Nutzer die
   Kopfnavigation ueberspringen und direkt zu #main springen. */
.skip-link{
  position:absolute;
  top:-48px;
  left:8px;
  z-index:100;
  background:var(--color-brand-strong);
  color:var(--color-white);
  padding:12px 20px;
  border-radius:var(--radius-sm);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus{top:8px;}

/* ---------- Header ---------- */
header.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-5) var(--space-7);
  border-bottom:1px solid var(--color-border);
  position:sticky;
  top:0;
  /* color-mix statt rgba(255,255,255,...): folgt --color-bg in beide
     Themes, statt in Dark Mode weiss zu bleiben (echter, vorher
     unbemerkter Dark-Mode-Fehler, siehe IMPLEMENTATION_PLAN.md). */
  background:color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter:blur(8px);
  z-index:10;
  gap:var(--space-5);
  flex-wrap:wrap;
}
/* Markenzeichen "Bogenskala" (logo-spec.md, Owner-Entscheidung Vorschlag 18):
   ersetzt das bisherige Euro-Zeichen-Quadrat. --logo-*-Variablen gelten
   AUSSCHLIESSLICH fuer dieses Zeichen und duerfen nicht in UI-Komponenten
   wandern -- dort bleiben --color-brand/--color-accent massgeblich. */
:root{
  --logo-arc-outer:#101B3D;
  --logo-arc-inner:#6E8CFF;
  --logo-dot:#E08A4A;
}
@media (prefers-color-scheme: dark){
  :root{ --logo-arc-outer:#93A8F0; --logo-arc-inner:#B4C4FF; --logo-dot:#D9A45C; }
}
:root[data-theme="dark"]{
  --logo-arc-outer:#93A8F0; --logo-arc-inner:#B4C4FF; --logo-dot:#D9A45C;
}
:root[data-theme="light"]{
  --logo-arc-outer:#101B3D; --logo-arc-inner:#6E8CFF; --logo-dot:#E08A4A;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; flex:none; }
.brand-mark{ width:30px; height:30px; flex:none; }
.brand-text{ font-family:var(--font-sans); font-weight:600; font-size:17px; letter-spacing:-.01em; color:var(--color-text-primary); }
@media (max-width:600px){ .brand-mark{ width:26px; height:26px; } .brand-text{ font-size:15px; } }
.top-nav{
  display:flex;
  align-items:center;
  gap:26px;
  font-size:14px;
  font-weight:700;
  color:var(--color-text-muted);
  flex-wrap:wrap;
}
.top-nav a{
  color:var(--color-text-muted);
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.top-nav a:hover, .top-nav a.active{color:var(--color-brand);}
/* Aktiver Link: Farbe + 2px-Unterstrich statt Farbe allein (components-spec.md
   Abschnitt 0.2). currentColor statt --color-brand-strong, weil letzteres im
   Dark Mode absichtlich dunkel bleibt (Button-Flaechenfarbe) und als
   Textfarbe/Linie dort unsichtbar waere. */
.top-nav a.active{border-bottom-color:currentColor;}
/* Letzter Nav-Punkt "API & Einbindung": eigenstaendiger Rahmenbutton statt
   Textlink (README.md Abschnitt 0.2 / pages-spec.md Abschnitt 0.2). */
.top-nav a:last-child{
  color:var(--color-brand);
  border:1px solid var(--color-brand);
  border-radius:var(--radius-sm);
  padding:8px 14px;
  font-weight:600;
}
.top-nav a:last-child:hover, .top-nav a:last-child.active{
  color:var(--color-white);
  background:var(--color-brand);
  border-bottom:1px solid var(--color-brand);
}

/* ---------- Mobile navigation toggle (P1, DUX-01) ---------- */
.nav-toggle{
  display:none;
  align-items:center;
  gap:var(--space-2);
  background:var(--color-bg);
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4);
  font-size:14px;
  font-weight:700;
  font-family:inherit;
  color:var(--color-text-primary);
  cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.nav-toggle:hover{border-color:var(--color-brand); color:var(--color-brand);}
.nav-toggle:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px;}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--color-brand),var(--color-brand-strong));
  z-index:100; transition:width .1s linear;
}

/* ---------- Hero (split) ---------- */
.hero{
  /* 1100px, nicht 1180px: main{} (jede Sektion unterhalb der Hero,
     inkl. .tool-card) rechnet mit derselben Innenbreite. Beide Werte
     sind border-box max-width inkl. der 40px-Seitenpadding, muessen
     also identisch sein, sonst laufen H1/CTA und die Rechnerkarte
     20px pro Seite auseinander (Redesign-QA 2026-08-02). */
  max-width:1100px;
  margin:0 auto;
  padding:56px 40px 12px;
  display:flex;
  align-items:center;
  gap:48px;
}
.hero-text{flex:1 1 460px; min-width:280px;}
/* UX-Sprint 2026-07-23: seit Entfernung der dekorativen Hero-Bankkarte
   (siehe docs/decisions/2026-07-23-interactive-bank-result-card.md)
   ist .hero-text die einzige Spalte -- zentriert, mit bewusst mehr
   Weissraum statt der frueheren Zwei-Spalten-Aufteilung. */
.hero-centered{justify-content:center; text-align:center; padding:76px 40px 32px;}
.hero-centered .hero-text{flex:0 1 720px;}
.hero-centered .hero p{margin:0 auto;}
.hero-centered .cta-row{justify-content:center;}
.hero h1{
  font-size:clamp(34px,4.6vw,54px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 16px;
  color:var(--color-text-primary);
}
.hero h1 .hl{
  background:linear-gradient(90deg,var(--color-brand),var(--color-brand-strong));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{
  font-size:18px;
  color:var(--color-text-muted);
  max-width:520px;
  margin:0;
  line-height:1.55;
}
.cta-row{
  display:flex;
  gap:14px;
  margin:28px 0 0;
  flex-wrap:wrap;
}
@media (max-width:860px){
  .hero{flex-direction:column; text-align:center; padding-top:40px;}
  .hero p{margin:0 auto;}
  .cta-row{justify-content:center;}
}

/* Redesign-Abgleich mit A Fintech Precision.dc.html Abschnitt 02:
   zweispaltiger Hero mit Kennzahlspalte statt zentriertem Layout. Nutzt
   die bestehende .hero-Basis (Flex, zwei Spalten) -- .hero-centered bleibt
   fuer andere Seiten unveraendert verfuegbar. Anders als die 2026-07-23
   entfernte Hero-Bankkarte zeigt die rechte Spalte keine erfundene
   IBAN/kein Ergebnis, nur reale Kennzahlen (0 Serveraufrufe usw.). */
.hero-split{align-items:flex-start; padding-top:64px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:20px;
}
.hero-stats{
  flex:0 0 320px;
  border-left:1px solid var(--rule-base);
  padding-left:32px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.hero-stat + .hero-stat{border-top:1px solid var(--rule-hairline); padding-top:24px;}
.hero-stat-num{
  font-family:var(--font-mono);
  font-size:34px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--color-text-primary);
  line-height:1;
}
.hero-stat-lbl{font-size:13px; color:var(--color-text-muted); margin-top:6px; line-height:1.4;}
@media (max-width:860px){
  .hero-split{padding-top:36px;}
  .hero-stats{border-left:none; border-top:1px solid var(--rule-base); padding-left:0; padding-top:24px; width:100%;}
}
/* Redesign-Abgleich mit A Fintech Precision.dc.html Abschnitt 08
   (Mobile 390x844): kuerzere Unterzeile, volle-Breite-Buttons statt
   nebeneinander. Zwei Absaetze statt bedingtem Text, damit kein
   JavaScript fuer reine Darstellungslogik noetig ist -- fuer
   Screenreader nur einer der beiden gleichzeitig sichtbar/vorgelesen. */
.hero-lead-mobile{display:none;}
@media (max-width:640px){
  .hero-split .hero-text > p:not(.hero-lead-mobile){display:none;}
  .hero-lead-mobile{display:block;}
  .hero-split .cta-row{flex-direction:column; align-items:stretch;}
  .hero-split .cta-row a{text-align:center;}
}

/* "Wissen, das zur Prüfung gehört" (Homepage-Cluster-Teaser) */
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;}
.section-head-link{font-size:14px; font-weight:500; color:var(--color-brand);}
.cluster-teaser-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--rule-base);
  border:1px solid var(--rule-base);
  margin-top:28px;
}
.cluster-teaser-card{
  background:var(--color-bg);
  padding:24px;
  text-decoration:none;
  color:inherit;
  display:block;
  transition:background var(--duration-fast) var(--ease-standard);
}
.cluster-teaser-card:hover{background:var(--color-panel);}
.cluster-teaser-count{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-accent);
}
.cluster-teaser-title{font-size:19px; font-weight:600; color:var(--color-text-primary); margin:10px 0 8px;}
.cluster-teaser-desc{font-size:14px; line-height:1.6; color:var(--color-text-muted);}
@media (max-width:900px){ .cluster-teaser-grid{grid-template-columns:1fr;} }

/* ---------- Tool card ---------- */
.tool-card{
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  box-shadow:var(--shadow-2);
  background:var(--color-bg);
  margin-top:var(--space-2);
}
@media (max-width:640px){ .tool-card{padding:var(--space-5) var(--space-4);} }

/* ---------- IBAN-Segmentierung: Positionsskala ("Das Lineal") ----------
   Vier Felder in einem 1-px-Gitter, je Feld mit Stellenangabe (Mono 10px)
   und Wert (Mono 20px, tabular-nums). Farbcodierung ist nie das einzige
   Unterscheidungsmerkmal -- jedes Feld traegt zusaetzlich sichtbaren Text
   (Stellenangabe + Wert) und im Fehlerzustand ein ✓/✕-Zeichen. */
.breakdown{
  display:grid;
  grid-template-columns:80px 80px 1fr 1fr;
  gap:1px;
  background:var(--rule-base);
  border:1px solid var(--rule-base);
  margin-top:16px;
}
.bd-seg{
  background:var(--color-bg);
  padding:var(--space-4);
  border-top:3px solid transparent;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.bd-seg .bd-pos{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--color-text-muted);
  display:flex;
  align-items:center;
  gap:4px;
}
.bd-seg .bd-val{
  font-family:var(--font-mono);
  font-size:20px;
  font-variant-numeric:tabular-nums;
  color:var(--color-text-primary);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bd-seg[data-role="bd-country"]{border-top-color:var(--seg-country);}
/* Kupfer-Akzent bewusst hier: die Pruefziffer IST der "Beweis-Moment"
   der Markenthese (siehe DESIGN_DECISIONS.md 4.3) -- kein beliebiger
   Datenfarbwert, sondern die einzige inhaltlich passende Verwendung. */
.bd-seg[data-role="bd-check"]{border-top-color:var(--seg-checkdigit);}
.bd-seg[data-role="bd-bank"]{border-top-color:var(--seg-bankcode);}
.bd-seg[data-role="bd-acct"]{border-top-color:var(--seg-account);}
.bd-seg.bd-empty{background:var(--color-panel); border-top-color:transparent;}
.bd-seg.bd-empty .bd-val{color:#A8B0BE;}
.bd-seg.bd-ok .bd-pos .bd-mark{color:var(--color-success-fg);}
.bd-seg.bd-error{background:var(--color-error-bg); border-top-color:var(--color-error-fg);}
.bd-seg.bd-error .bd-val{color:var(--color-error-fg);}
.bd-seg.bd-error .bd-pos .bd-mark{color:var(--color-error-fg);}
.bd-labels{
  display:grid;
  grid-template-columns:80px 80px 1fr 1fr;
  gap:1px;
  margin-top:8px;
}
.bd-labels span{
  font-family:var(--font-mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--color-text-muted);
}
@media (max-width:640px){
  .breakdown{grid-template-columns:1fr 1fr;}
  .bd-labels{display:none;}
  .bd-seg .bd-label-inline{
    font-family:var(--font-mono);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--color-text-muted);
    order:-1;
  }
}
@media (min-width:641px){ .bd-label-inline{display:none;} }

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ---------- Numbered steps (components-spec.md Abschnitt 11) ---------- */
.steps-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--rule-base);
  border:1px solid var(--rule-base);
  margin:34px 0;
}
.step-card{
  padding:var(--space-5);
  background:var(--color-bg);
}
.step-num{
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:var(--color-brand-strong);
  color:var(--color-white); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:14px; margin-bottom:var(--space-4);
}
.step-card h3{font-size:17px; font-weight:600; color:var(--color-text-primary); margin:0 0 8px;}
.step-card p{font-size:14px; color:var(--color-text-muted); line-height:1.6; margin:0;}
@media (max-width:800px){ .steps-grid{grid-template-columns:1fr;} }

main{
  max-width:1100px;
  margin:0 auto;
  padding:36px 40px 100px;
}

/* ---------- Segmented tabs (ARIA-Tab-Pattern, "Das Lineal") ----------
   Kein gleitender Slider mehr -- der aktive Zustand ist ausschliesslich
   Flaeche + Text + aria-selected, nie Bewegung allein. */
.segmented{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border:1px solid var(--rule-base);
  margin:0 0 var(--space-7);
}
.segmented button{
  position:relative;
  background:none;
  border:none;
  border-left:1px solid var(--rule-base);
  padding:16px 20px;
  font-size:14px;
  font-weight:500;
  color:var(--color-text-muted);
  cursor:pointer;
  transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
}
.segmented button:first-child{border-left:none;}
.segmented button .tab-num{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--color-text-muted);
}
.segmented button[aria-selected="true"]{
  background:var(--color-brand-strong);
  color:var(--color-white);
  font-weight:600;
}
.segmented button[aria-selected="true"] .tab-num{color:var(--color-white);}
@media (max-width:640px){ .segmented button{padding:14px 10px;} }

.panel{animation:fadein var(--duration-fast) var(--ease-standard);}
.panel[hidden]{display:none;}
@keyframes fadein{ from{opacity:0;} to{opacity:1;} }

.row-title{
  font-size:30px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--color-text-primary);
  margin:0 0 8px;
}
.row-title .hl{color:var(--color-brand);}
.row-sub{
  font-size:15px;
  color:var(--color-text-muted);
  margin:0 0 28px;
}

/* ---------- Sichtbares Label vor einer Search-Card (P1, A11Y-01) ---------- */
.field-label{
  display:block;
  font-size:12.5px;
  font-weight:800;
  color:var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0 0 8px;
}

/* ---------- Search card ---------- */
.search-card{
  display:flex;
  gap:var(--space-4);
  align-items:center;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  box-shadow:var(--shadow-1);
  transition:border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
  background:var(--color-bg);
}
.search-card:focus-within{
  border-color:var(--color-focus);
  box-shadow:0 0 0 4px var(--color-brand-tint), var(--shadow-1);
}
.search-card .icon{color:var(--color-text-muted); font-size:20px;}
.search-card input{
  flex:1;
  border:none;
  outline:none;
  font-size:20px;
  font-weight:600;
  color:var(--color-text-primary);
  padding:var(--space-3) 0;
  letter-spacing:.02em;
  font-family:var(--font-mono);
  background:transparent;
}
.search-card input::placeholder{color:var(--color-text-muted); font-family:inherit; font-weight:400;}
/* Buttons (components-spec.md Abschnitt 15): Primaer = --color-brand-
   strong-Flaeche, kein Rahmen; Sekundaer = transparent mit 1px-Kontur.
   --color-brand-strong bleibt in Dark Mode dunkel (siehe Token-Block
   oben), daher Primitiv statt Semantik-Token fuer den Hintergrund. */
.search-card button, .btn-primary{
  background:var(--color-brand-strong);
  color:var(--color-white);
  border:none;
  border-radius:var(--radius-sm);
  padding:14px 24px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-standard);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
}
/* components-spec.md Abschnitt 2: Button rechts in der IBAN-Eingabe hat
   volle Hoehe statt eigenem vertikalen Padding, 0 32px seitlich. */
.search-card button{align-self:stretch; padding:0 32px;}
.search-card button:hover, .btn-primary:hover{background:var(--color-indigo-900); color:var(--color-white);}
.search-card button:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px;}
.btn-secondary{
  background:transparent;
  color:var(--color-text-primary);
  border:1px solid var(--color-ink-200);
  border-radius:var(--radius-sm);
  padding:14px 24px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  transition:border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.btn-secondary:hover{border-color:var(--color-brand); color:var(--color-brand);}

/* progress bar under IBAN input -- Pille statt Radius-Stufe, da ein
   duenner Fortschrittsbalken (5px) funktional ein Kapselelement ist. */
.len-track{
  height:5px;
  border-radius:var(--radius-pill);
  background:var(--color-border);
  margin-top:var(--space-4);
  overflow:hidden;
}
.len-fill{
  height:100%;
  width:0%;
  background:var(--color-brand);
  border-radius:var(--radius-pill);
  transition:width var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.len-label{
  display:flex; justify-content:space-between;
  font-size:12.5px; color:var(--color-text-muted); margin-top:var(--space-2); font-weight:600;
}

.fields{
  display:flex;
  gap:var(--space-4);
  flex-wrap:wrap;
  margin-bottom:var(--space-2);
}
.field{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  flex:1;
  min-width:220px;
}
.field label{
  font-size:12.5px;
  font-weight:800;
  color:var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.field input{
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  font-size:18px;
  font-weight:600;
  outline:none;
  font-family:var(--font-mono);
  color:var(--color-text-primary);
  background:var(--color-bg);
  transition:border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.field input:focus{border-color:var(--color-focus); box-shadow:0 0 0 4px var(--color-brand-tint);}

.feature-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--color-panel);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-6);
  margin:var(--space-6) 0;
  flex-wrap:wrap;
  gap:var(--space-4);
}
.feature-bar .title{font-size:14px; font-weight:800; color:var(--color-text-primary);}
.chips{display:flex; gap:var(--space-3); flex-wrap:wrap;}
.chip{
  display:flex;align-items:center;gap:7px;
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4);
  font-size:13px;
  font-weight:600;
  color:var(--color-text-body);
  transition:transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.chip:hover{transform:translateY(-2px); box-shadow:var(--shadow-1);}
.chip .dot2{width:7px;height:7px;border-radius:50%;background:var(--color-brand);}

/* ---------- Result row ---------- */
.result{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-5) var(--space-2);
  border-bottom:1px solid var(--color-border);
  gap:var(--space-4);
  flex-wrap:wrap;
  /* Beweis-Moment: eigene Easing-Kurve, siehe DESIGN_DECISIONS.md 9. */
  animation:slidein var(--duration-proof) var(--ease-proof);
}
@keyframes slidein{ from{opacity:0; transform:translateX(-8px);} to{opacity:1; transform:translateX(0);} }
.result:last-child{border-bottom:none;}
.result-left{display:flex; align-items:center; gap:var(--space-4); min-width:0;}
.avatar{
  width:46px;height:46px;border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--color-brand),var(--color-brand-strong));
  color:var(--color-white);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;flex:none;
  box-shadow:var(--shadow-1);
}
.avatar.err{background:linear-gradient(135deg,var(--color-error-fg),var(--color-ink-900));}
.result-text .name{
  font-size:19px;font-weight:800;color:var(--color-text-primary);
  font-family:var(--font-mono);
  letter-spacing:.02em;
  word-break:break-all;
}
.result-text .sub{font-size:13.5px;color:var(--color-text-muted); margin-top:5px; font-weight:500;}
/* Badges: Farbe + Icon + Text zusammen -- niemals Farbe allein (WCAG
   1.4.1, siehe DESIGN_DECISIONS.md 4.4/8). Icon per ::before, damit
   er untrennbar am Zustand haengt, unabhaengig vom aufrufenden Markup. */
.badge{
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-pill);
  font-size:13.5px;
  font-weight:800;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.badge.ok{background:var(--color-success-bg); color:var(--color-success-fg);}
.badge.ok::before{content:"✓"; font-weight:800;}
.badge.err{background:var(--color-error-bg); color:var(--color-error-fg);}
.badge.err::before{content:"✕"; font-weight:800;}
.badge.neutral{background:var(--color-panel); color:var(--color-text-muted);}
.badge.neutral::before{content:"–"; font-weight:800;}

.empty{
  color:var(--color-text-muted);
  font-size:15px;
  padding:34px 8px;
  text-align:center;
  font-weight:500;
}
/* ---------- Fehlerzustand (ungueltige IBAN) ----------
   components-spec.md Abschnitt 6: Farbe + Marke + Text zusammen, kein
   Shake/Blinken; der Fehlertext liegt im Fokuspfad (kein separates
   Live-Announcement noetig, aria-live="polite" auf dem Ergebniscontainer
   traegt bereits vor). */
.error-block{
  border:1px solid var(--color-error-fg);
  background:var(--color-error-bg);
  padding:var(--space-6);
  animation:fadein var(--duration-fast) var(--ease-standard);
}
.error-block .error-head{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
}
.error-block .error-badge{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--color-error-fg);
  background:var(--color-bg);
  border:1px solid var(--color-error-fg);
  padding:4px 10px;
}
.error-block h3{
  font-size:17px;
  font-weight:600;
  color:var(--color-error-fg);
  margin:0;
}
.error-block p{
  font-size:14px;
  color:var(--color-text-body);
  line-height:1.6;
  margin:0 0 var(--space-5);
}
.error-block .error-actions{
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap;
}
.error-block .error-actions button, .error-block .error-actions a{
  font-size:13px;
  padding:8px 14px;
}

/* ---------- Pruefweg (Modulo-97-Rechenweg) ----------
   components-spec.md Abschnitt 7: echte <table>, Werte in Mono/
   tabular-nums, Auslöser mit aria-expanded. */
.pruefweg{
  margin-top:var(--space-5);
  border:1px solid var(--rule-base);
}
.pruefweg table{
  width:100%;
  border-collapse:collapse;
}
.pruefweg tr{border-bottom:1px solid var(--rule-hairline);}
.pruefweg tr:last-child{border-bottom:none;}
.pruefweg th, .pruefweg td{
  text-align:left;
  padding:var(--space-3) var(--space-4);
  vertical-align:top;
}
.pruefweg th{
  font-weight:500;
  font-size:13px;
  color:var(--color-text-body);
  width:45%;
}
.pruefweg td{
  font-family:var(--font-mono);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--color-text-primary);
  word-break:break-all;
}
.pruefweg .pruefweg-link{
  display:block;
  padding:var(--space-3) var(--space-4);
  font-size:13px;
  border-top:1px solid var(--rule-hairline);
}

.hint{font-size:13px; color:var(--color-text-muted); margin-top:22px; line-height:1.6;}
.copybtn{
  background:none;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-4);font-size:12.5px;font-weight:700;color:var(--color-text-muted);cursor:pointer;
  transition:all var(--duration-fast) var(--ease-standard);
}
.copybtn:hover{border-color:var(--color-brand); color:var(--color-brand);}
.copybtn.copied{border-color:var(--color-success-fg); color:var(--color-success-fg); background:var(--color-success-bg);}
.actions{display:flex; gap:10px; align-items:center;}

/* ---------- Bank Result Card ----------
   components-spec.md Abschnitt 5: kein Schatten, Kontur statt Flaeche,
   Metazeile als 1px-Gitter, Fusszeile mit Panel-Hintergrund. Erscheint
   ausschliesslich bei einer echten, gueltigen Eingabe -- siehe
   docs/decisions/2026-07-23-interactive-bank-result-card.md. */
.bank-result{
  border:1px solid var(--rule-base);
  background:var(--color-bg);
  box-shadow:none;
  margin-top:var(--space-4);
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.bank-result.in{opacity:1; transform:translateY(0);}
.bank-result-head{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  flex-wrap:wrap;
  padding:var(--space-5) var(--space-6);
}
.bank-logo{
  flex:none;
  border-radius:var(--radius-sm);
  object-fit:contain;
  background:var(--color-panel);
}
.bank-logo--fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:16px;
  color:var(--color-white);
  background:linear-gradient(135deg,var(--color-brand),var(--color-brand-strong));
}
.bank-result-name{font-size:19px; font-weight:600; color:var(--color-text-primary);}
.bank-result-sub{font-size:13px; color:var(--color-text-muted); margin-top:3px;}
.bank-result-status{
  margin-left:auto;
  background:var(--color-success-bg);
  color:var(--color-success-fg);
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  border-radius:0;
}
.bank-result-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  gap:1px;
  background:var(--rule-hairline);
  border-top:1px solid var(--rule-base);
  border-bottom:1px solid var(--rule-base);
}
.bank-result-meta > div{background:var(--color-bg); padding:var(--space-4);}
.bank-result-meta dt{
  font-family:var(--font-mono);
  font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-text-muted); margin:0 0 4px;
}
.bank-result-meta dd{
  font-size:15px; font-weight:600; color:var(--color-text-primary); margin:0;
  font-family:var(--font-mono);
}
.bank-result-iban{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-4) var(--space-6);
  background:var(--color-panel);
  flex-wrap:wrap;
}
.bank-result-iban .val{
  font-family:var(--font-mono); font-size:17px; font-weight:600; color:var(--color-text-primary);
  letter-spacing:.02em; word-break:break-all;
}
.bank-result-iban .actions{display:flex; gap:var(--space-3); align-items:center;}
@media (max-width:640px){
  .bank-result-head{padding:var(--space-4);}
  .bank-result-status{margin-left:0;}
  .bank-result-iban{padding:var(--space-4);}
}

/* ---------- Ladezustand (nur beim serverseitigen Bankabgleich) ----------
   components-spec.md Abschnitt 10: Skeleton-Flaechen in --rule-hairline,
   erst nach 200ms sichtbar (siehe setTimeout im Skript); die lokale
   Pruefsumme zeigt ihr Ergebnis vorher, dieser Block ergaenzt nur den
   Bankabgleich. */
.bank-result-skeleton{
  margin-top:var(--space-3);
  padding:var(--space-4);
  border:1px solid var(--rule-hairline);
}
.bank-result-skeleton .skel-line{
  height:12px;
  background:var(--rule-hairline);
  margin-bottom:8px;
  width:55%;
}
.bank-result-skeleton .skel-line-b{width:35%;}
.bank-result-skeleton .skel-status{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--color-text-muted);
  margin-top:4px;
}
@media (prefers-reduced-motion: reduce){
  .bank-result-skeleton .skel-line{ animation:none; }
}

/* ---------- Abgrenzungssatz unter der Ergebniskarte ----------
   components-spec.md Abschnitt 5: Pflichttext, nicht kuerzen. */
.result-disclaimer{
  font-size:13px;
  color:var(--color-text-muted);
  margin-top:var(--space-3);
  line-height:1.6;
}

/* ---------- Trust / DSGVO badges (components-spec.md Abschnitt 11) ---------- */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--rule-base);
  border:1px solid var(--rule-base);
  margin:30px 0;
}
.trust-card{
  background:var(--color-bg);
  padding:var(--space-5);
  transition:background var(--duration-fast) var(--ease-standard);
}
.trust-card:hover{background:var(--color-panel);}
.trust-card .ic{font-size:22px; margin-bottom:10px;}
.trust-card .t{font-size:14px; font-weight:600; color:var(--color-text-primary); margin-bottom:4px;}
.trust-card .d{font-size:12.5px; color:var(--color-text-muted); line-height:1.5;}
@media (max-width:900px){ .trust-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .trust-grid{grid-template-columns:1fr;} }

/* ---------- Content pages (FAQ, Glossar, Impressum, etc.) ---------- */
.content{max-width:820px; margin:0 auto;}
.content h1{
  font-size:clamp(32px,5vw,48px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--color-text-primary);
  margin:8px 0 12px;
}
.content .lead{font-size:17px; color:var(--color-text-muted); margin:0 0 36px; line-height:1.6;}
.content h2{
  font-size:24px;
  font-weight:800;
  color:var(--color-text-primary);
  margin:40px 0 14px;
  letter-spacing:-.01em;
}
.content h3{font-size:17px; font-weight:800; color:var(--color-text-primary); margin:22px 0 8px;}
.content p{font-size:15.5px; line-height:1.75; color:var(--color-text-body); margin:0 0 14px;}
.content ul, .content ol{font-size:15.5px; line-height:1.75; color:var(--color-text-body); padding-left:22px;}
.content li{margin-bottom:6px;}
.content a{color:var(--color-brand); font-weight:600;}
.content strong{color:var(--color-text-primary);}
/* overflow-anchor:none (Redesign-QA 2026-08-02, per Nutzer-Screenshot
   gemeldet): Nach dem ersten Rendern laden die selbst gehosteten Schriften
   nach (font-display:swap) und veraendern die Textbreiten in den Zellen.
   Der Browser versucht per Scroll-Anchoring, die sichtbare Position zu
   "retten", und verschiebt dabei scrollLeft eines verschachtelten
   scrollbaren Containers wie diesem -- die Kopfzeile ("Funktion") und der
   Zeilenanfang rutschen dadurch aus dem sichtbaren Bereich, ohne dass der
   Nutzer selbst gescrollt hat. overflow-anchor:none nimmt .table-scroll
   aus diesem Mechanismus heraus, scrollLeft bleibt beim geladenen Wert (0). */
.table-scroll{overflow-x:auto; overflow-anchor:none;}
/* min-width statt width:100%: eine feste width:100% zwingt table-layout:auto
   dazu, jede Spalte auf die Containerbreite zu quetschen (Redesign-QA
   2026-08-02: fuehrte bei code-lastigen Spalten wie der Rueckgabe-Tabelle
   auf api.html zu einer auf wenige Zeichen breit gequetschten Spalte mit
   Wort-fuer-Wort-Umbruch, obwohl .table-scroll eigentlich echtes
   horizontales Scrollen ermoeglichen soll). min-width:100% laesst schmale
   Tabellen weiterhin die volle Breite fuellen, erlaubt aber breiteren
   Tabellen, ueber den Container hinauszuwachsen -- dafuer ist
   .table-scroll da. */
.content table.table-clean{min-width:100%; border-collapse:collapse; margin:18px 0;}
.table-clean th, .table-clean td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--color-border); font-size:14.5px;
}
.table-clean code{white-space:nowrap;}
.table-clean th{color:var(--color-text-muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;}

/* ---------- Accordion (FAQ) ---------- */
.accordion{border-top:1px solid var(--color-border);}
.acc-item{border-bottom:1px solid var(--color-border);}
.acc-q{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:22px 2px; font-size:17px; font-weight:700; color:var(--color-text-primary);
  gap:16px;
}
.acc-q .arrow{
  flex:none; width:28px; height:28px; border-radius:var(--radius-sm); background:var(--color-panel);
  display:flex; align-items:center; justify-content:center; color:var(--color-brand);
  transition:transform var(--duration-base) var(--ease-standard);
  font-size:14px;
}
.acc-item.open .acc-q .arrow{background:var(--color-brand-tint);}
.acc-a{
  max-height:0; overflow:hidden; transition:max-height var(--duration-proof) var(--ease-proof);
}
.acc-item.open .acc-a{max-height:600px;}
.acc-a-inner{padding:0 2px 24px; font-size:15px; line-height:1.7; color:var(--color-text-body);}
.acc-a-inner p{margin:0 0 12px;}

/* ---------- Glossary (Redesign-Abgleich mit A Fintech Precision.dc.html
   Abschnitt 06): 2-Spalten-1px-Gitter statt geschatteter, gerundeter
   Karten. ---------- */
.glossary-search{margin-bottom:28px;}
.term-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--rule-base);
  border:1px solid var(--rule-base);
}
@media (max-width:700px){ .term-grid{grid-template-columns:1fr;} }
.term-card{
  background:var(--color-bg);
  padding:var(--space-5);
  transition:background var(--duration-fast) var(--ease-standard);
}
.term-card:hover{background:var(--color-panel);}
.term-card .term{font-weight:600; color:var(--color-text-primary); font-size:15px; margin-bottom:6px;}
.term-card .def{font-size:13px; color:var(--color-text-muted); line-height:1.55;}
.term-card.hidden{display:none;}

/* ---------- Code blocks ---------- */
.code-block{
  /* Primitiv, nicht Semantik-Token: dunkler Code-Hintergrund bleibt
     in beiden Themes dunkel (siehe .btn-primary-Begruendung oben). */
  background:var(--color-ink-900); color:#dbe6ff; border-radius:var(--radius-md); padding:var(--space-5) var(--space-6);
  font-family:var(--font-mono); font-size:13.5px;
  overflow-x:auto; line-height:1.6; margin:var(--space-4) 0;
}
.code-block .cm{color:#7c8fc4;}
.code-block .kw{color:#7fa8ff;}
.code-block .str{color:#f2c078;}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--color-border);
  margin-top:var(--space-8);
  padding:var(--space-7) var(--space-7) var(--space-6);
}
.footer-cols{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-6);
}
.footer-cols h3{font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); margin:0 0 var(--space-4);}
.footer-cols a{display:block; color:var(--color-text-body); text-decoration:none; font-size:14px; font-weight:600; margin-bottom:var(--space-3);}
.footer-cols a:hover{color:var(--color-brand);}
.footer-cols p{font-size:13.5px; color:var(--color-text-muted); line-height:1.6; max-width:280px;}
.footer-bottom{
  max-width:1100px; margin:var(--space-6) auto 0; padding-top:var(--space-5); border-top:1px solid var(--color-border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2);
  font-size:12.5px; color:var(--color-text-muted); font-weight:500;
}
@media (max-width:800px){ .footer-cols{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){
  header.top{padding:16px 20px;}
  .hero{padding:44px 20px 4px;}
  main{padding:24px 20px 60px;}
  .nav-toggle{display:inline-flex;}
  .top-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    gap:2px;
    background:var(--color-bg);
    border-bottom:1px solid var(--color-border);
    padding:12px 20px 16px;
    box-shadow:var(--shadow-1);
  }
  .top-nav.open{display:flex;}
  .top-nav a{padding:10px 0;}
  /* P1, DUX-02: der Such-/Aktions-Button lief zuvor ueber den rechten
     Viewport-Rand hinaus, weil .search-card nie umbrach. */
  .search-card{flex-wrap:wrap;}
  .search-card input{font-size:16px;}
  /* Pre-Go-live-Accessibility-Reaudit (2026-08-03): sobald der Button per
     flex-wrap in eine eigene Zeile umbricht, greift "align-self:stretch"
     aus der Desktop-Regel (Zeile ~773) nicht mehr - ohne eigenes
     vertikales Padding kollabierte die Tastaturhoehe auf reine Textgroesse
     (~17px, deutlich unter dem WCAG-2.5.8-Zielgroessen-Minimum von 24px).
     Explizites vertikales Padding stellt eine ausreichende Tipp-/Klickzone
     wieder her, seitliches Padding bleibt wie in der Desktop-Regel. */
  .search-card button{width:100%; justify-content:center; margin-top:4px; padding:14px 32px;}
  .footer-cols{grid-template-columns:1fr;}
  .site-footer{padding:36px 20px 24px;}
}

/* Oeffentliche Wissensportal-Basisseite (ADR-0022). */
.breadcrumb{font-size:14px; color:var(--color-text-muted); margin-bottom:var(--space-4);}
.breadcrumb a{color:inherit;}
.knowledge-hero{max-width:100%; height:auto; border-radius:var(--radius-sm); margin:var(--space-4) 0;}
.knowledge-body{margin:var(--space-4) 0; line-height:1.7; max-width:var(--measure-text);}
.knowledge-sources{margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--rule-base);}
.knowledge-meta{margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--rule-base); color:var(--color-text-muted); font-size:14px;}
.knowledge-meta p{margin:var(--space-1) 0;}

/* ---------- Fehlerseiten (404/500) ----------
   design_handoff_fintech_precision/README.md Abschnitt 10: grosse
   Ziffernfolge in --rule-hairline, Ueberschrift, Erklaerung, zwei Buttons.
   Gleiche Struktur fuer 404 und 500 (Bestandsverhalten: neutrale Meldung,
   kein Stacktrace). */
.error-page{
  max-width:560px;
  margin:var(--space-9) auto;
  padding:0 var(--space-4);
  text-align:center;
}
.error-page-code{
  font-family:var(--font-mono);
  font-size:88px;
  font-weight:600;
  color:var(--rule-hairline);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.error-page h1{
  font-size:24px;
  font-weight:600;
  color:var(--color-text-primary);
  margin:var(--space-4) 0 var(--space-3);
}
.error-page p{
  color:var(--color-text-muted);
  line-height:1.6;
  margin:0 0 var(--space-6);
}
.error-page-actions{
  display:flex;
  gap:var(--space-3);
  justify-content:center;
  flex-wrap:wrap;
}

/* Artikel-Template Layout (components-spec.md Abschnitt 14): Inhalt +
   Marginalspalte mit Inhaltsverzeichnis, nur wenn mindestens zwei
   Abschnitte existieren (renderToc() gibt sonst nichts zurueck -- Artikel
   ohne Kernfakten/Tools/FAQ/verwandte Artikel funktionieren unveraendert
   einspaltig). */
.knowledge-layout{display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:start;}
.knowledge-layout.has-toc{grid-template-columns:1fr 220px;}
.knowledge-toc{position:sticky; top:var(--space-5);}
.knowledge-toc-title{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:var(--color-text-muted); margin:0 0 var(--space-3);
}
.knowledge-toc ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2);}
.knowledge-toc a{
  display:block; padding-left:var(--space-3); border-left:2px solid var(--rule-base);
  font-size:13px; line-height:1.4; color:var(--color-text-muted); text-decoration:none;
  transition:border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.knowledge-toc a:hover{color:var(--color-text-primary);}
.knowledge-toc a[aria-current="location"]{
  border-left-color:var(--color-brand-strong); color:var(--color-text-primary); font-weight:600;
}
@media (max-width:900px){
  .knowledge-layout.has-toc{grid-template-columns:1fr;}
  .knowledge-toc{display:none;}
}

/* Mobiles Inhaltsverzeichnis als geschlossenes Akkordeon (Redesign-Abgleich
   mit A Fintech Precision.dc.html Abschnitt 08) statt vollstaendig zu
   verschwinden -- nur <900px sichtbar, spiegelbildlich zu .knowledge-toc. */
.knowledge-toc-mobile{display:none;}
@media (max-width:900px){
  .knowledge-toc-mobile{
    display:block;
    border:1px solid var(--rule-base);
    margin:var(--space-4) 0;
  }
  .knowledge-toc-mobile .acc-q{padding:14px 16px; font-size:14px; font-weight:600;}
  .knowledge-toc-mobile .acc-a-inner{padding:0 16px 16px;}
  .knowledge-toc-mobile .acc-a-inner ul{margin:0; padding-left:var(--space-5);}
  .knowledge-toc-mobile .acc-a-inner li{margin-bottom:8px; font-size:14px;}
}

/* "Passendes Werkzeug"-Kurzkarte in der Marginalspalte (Redesign-Abgleich
   mit A Fintech Precision.dc.html Abschnitt 05). */
.knowledge-toc-tool{margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--rule-hairline);}
.knowledge-toc-tool-card{
  display:block;
  border:1px solid var(--rule-base);
  padding:var(--space-3);
  text-decoration:none;
  color:inherit;
  margin-top:var(--space-3);
  transition:border-color var(--duration-fast) var(--ease-standard);
}
.knowledge-toc-tool-card:hover{border-color:var(--color-brand);}
.knowledge-toc-tool-name{font-size:14px; font-weight:600; color:var(--color-text-primary);}
.knowledge-toc-tool-desc{font-size:12px; line-height:1.5; color:var(--color-text-muted); margin-top:4px;}

/* ---------- Wissenssuche (Redesign-Abgleich mit A Fintech Precision.dc.html
   Abschnitt 06) ---------- */
.search-result-summary{font-family:var(--font-mono); font-size:13px; color:var(--color-text-muted); margin:var(--space-5) 0 var(--space-3);}
.search-result-row{padding:var(--space-4) 0; border-top:1px solid var(--rule-hairline);}
.search-result-title{font-size:16px; font-weight:600; color:var(--color-brand-strong); text-decoration:none;}
.search-result-title:hover{text-decoration:underline;}
.search-result-cluster{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--color-accent); margin:4px 0;}
.search-result-desc{font-size:14px; line-height:1.55; color:var(--color-text-muted);}
.search-no-results{border:1px dashed var(--color-ink-200); padding:var(--space-6); margin-top:var(--space-5);}
.search-no-results-title{font-size:16px; font-weight:600; margin-bottom:8px;}
.search-no-results p{margin:0 0 var(--space-4); color:var(--color-text-muted); font-size:14px;}
.search-no-results-suggestions{display:flex; flex-direction:column; gap:8px;}
.search-no-results-suggestions a{font-size:14px; font-weight:500; color:var(--color-brand);}

/* Kernfaktenbox (ADR-0025, Layout gemaess components-spec.md Abschnitt 12):
   Hervorgehobene Zeile in Kupfer-Akzent, normale Zeilen mit Haarlinie. */
.knowledge-facts{width:100%; border-collapse:collapse; margin:var(--space-4) 0; background:var(--color-bg); border:1px solid var(--rule-base);}
.knowledge-facts th, .knowledge-facts td{padding:var(--space-3) var(--space-4); text-align:left; border-top:1px solid var(--rule-hairline);}
.knowledge-facts tr:first-child th, .knowledge-facts tr:first-child td{border-top:none;}
.knowledge-facts th{
  font-family:var(--font-mono); font-size:12px; font-weight:500; text-transform:uppercase;
  letter-spacing:.06em; color:var(--color-text-muted); white-space:nowrap;
}
.knowledge-facts td{font-variant-numeric:tabular-nums;}
.knowledge-fact-highlight{background:var(--color-copper-100);}
.knowledge-fact-highlight th{color:var(--color-accent);}
.knowledge-fact-highlight td{font-weight:600;}

/* FAQ pro Artikel (ADR-0026) -- Akkordeon (components-spec.md Abschnitt 13),
   nutzt die bestehenden .accordion/.acc-*-Klassen (siehe weiter unten). */
.knowledge-faq{margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--rule-base);}

/* Verwandte Artikel (ADR-0027). */
.knowledge-related{margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--rule-base);}
.knowledge-related ul{margin:0; padding-left:var(--space-5);}
.knowledge-related li{margin-bottom:var(--space-2);}

/* Passende Tools (ADR-0028). */
.knowledge-tools{margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--rule-base);}
.knowledge-tools ul{margin:0; padding-left:var(--space-5);}
.knowledge-tools li{margin-bottom:var(--space-2);}

/* ---------- Master-Hub (Redesign-Abgleich mit A Fintech Precision.dc.html
   Abschnitt 05): zweispaltiger Kopf (Titel + Suche), Themenkacheln als
   1px-Gitter mit echter Artikelzahl. ---------- */
.hub-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:var(--space-8);
  align-items:end;
  padding-bottom:var(--space-6);
  border-bottom:1px solid var(--rule-base);
}
.hub-hero h1{margin:0; font-size:clamp(30px,3.4vw,44px); line-height:1.1; letter-spacing:-.02em;}
.hub-hero-side .lead{margin:0 0 var(--space-4);}
@media (max-width:800px){ .hub-hero{grid-template-columns:1fr; gap:var(--space-5);} }

.cluster-tile-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--rule-base);
  border:1px solid var(--rule-base);
  margin-top:var(--space-7);
}
.cluster-tile{
  background:var(--color-bg);
  padding:var(--space-6);
  text-decoration:none;
  color:inherit;
  display:block;
  transition:background var(--duration-fast) var(--ease-standard);
}
.cluster-tile:hover{background:var(--color-panel);}
.cluster-tile-head{display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3);}
.cluster-tile-title{font-size:19px; font-weight:600; color:var(--color-text-primary);}
.cluster-tile-count{font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--color-accent);}
.cluster-tile-desc{font-size:14px; line-height:1.6; color:var(--color-text-muted); margin-top:10px;}
@media (max-width:900px){ .cluster-tile-grid{grid-template-columns:1fr;} }

/* Cluster-Hub-Artikelliste: nummeriert statt <ul>/<li>. */
.cluster-article-list{border-top:1px solid var(--rule-base);}
.cluster-article-row{
  display:flex;
  gap:var(--space-5);
  padding:var(--space-5) 0;
  border-bottom:1px solid var(--rule-hairline);
}
.cluster-article-num{
  font-family:var(--font-mono);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--color-text-muted);
  flex:none;
  width:28px;
}
.cluster-article-title{font-size:16px; font-weight:600; color:var(--color-brand-strong); text-decoration:none;}
.cluster-article-title:hover{text-decoration:underline;}
.cluster-article-desc{font-size:14px; line-height:1.55; color:var(--color-text-muted); margin-top:4px;}