/* ═══════════════════════════════════════════════════════════════════════
   Analyse-Cockpit — Tokensystem (Auslegung A „Leitstand")
   Zwei Register, ein Absender (Anhang C). Selbst gehostet, keine Fremd-CDN.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Redesign „Belegwerk" (Lovable-Referenz referenz-lovable/styles.css,
     1:1 in oklch übernommen): Blau als Marke, eigener Krypto-Ton,
     Funktionsfarben für Fakten (Kurs/Kill/Anker-Zustand), feste linke
     Navigation im Produkt-Register. Beleglage-Score/-Band bleiben
     achromatisch (I-1) — einzige Grenze, sonst unverändert. */
  --marke:oklch(0.488 0.221 264.4); --marke-druck:oklch(0.42 0.221 264.4);
  --marke-flaeche:oklch(0.955 0.025 264.4);
  --schrift:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --schrift-gross:"Inter Display","Inter",system-ui,sans-serif;
  --schrift-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",monospace;
  --fokus:2px solid var(--marke);
  --nav-breite:288px; --nav-breite-schmal:72px;

  /* ── Register PRODUKT — warmes Papier, Haarlinien statt Kartenschatten
     (Redesign entwuerfe/entwurf-uebersicht-neu.html, Werte 1:1 übernommen;
     gilt auch für Zugang/Anmelden/Registrieren/Passwort — eigener Absender
     als die öffentliche Landeseite, die ihre --l-* Tokens unverändert behält). ── */
  --p-grund:#fbfaf7; --p-flaeche:#f7f6f2; --p-flaeche-2:#efeee7;
  --p-linie:rgb(21 20 15 / .10); --p-linie-stark:rgb(21 20 15 / .18);
  --p-tinte:#15140f; --p-tinte-2:#6d6c62; --p-tinte-3:#a9a79a;
  --p-aktion:var(--marke); --p-aktion-druck:var(--marke-druck);
  --p-fehler:#B4232A;

  --k-aktie:#1D4ED8; --k-aktie-flaeche:#EDF2FE;
  --k-krypto:oklch(0.436 0.226 296.5); --k-krypto-flaeche:oklch(0.955 0.03 296.5);
  /* E-22: ETF — eigener, disjunkter Ton (kein Rot/Amber, keine Kollision mit
     Sektor-/Kategoriefarben oder den Funktionsfarben). Rohstoff folgt mit
     der Rohstoff-Seite. */
  --k-etf:oklch(0.52 0.135 185); --k-etf-flaeche:oklch(0.955 0.03 185);
  --k-rohstoff:oklch(0.5 0.14 45); --k-rohstoff-flaeche:oklch(0.955 0.03 45);

  /* Nav-Icon-Töne je Bereich (Belegwerk-Referenz AppShell.tsx) — rein
     dekorativ zur Wiedererkennung in der Sidebar, keine Sektorfarbe. */
  --nav-aktien:oklch(0.55 0.16 200); --nav-aktien-flaeche:oklch(0.96 0.03 200);
  --nav-rueckschau:oklch(0.55 0.13 60); --nav-rueckschau-flaeche:oklch(0.96 0.04 70);
  --nav-blog:oklch(0.55 0.15 340); --nav-blog-flaeche:oklch(0.96 0.03 340);
  --nav-methodik:oklch(0.52 0.12 160); --nav-methodik-flaeche:oklch(0.96 0.04 160);

  /* Beleglage AKTIE — achromatisch, dunkler = mehr Belege (I-1). */
  --beleg-1:#ECECEC; --beleg-2:#C9C9C9; --beleg-3:#9E9E9E;
  --beleg-4:#5F5F5F; --beleg-5:#242424;

  /* Beleglage KRYPTO — eigene, disjunkte Tokens (Korrektur zu E-09). */
  --band-1:#E6E6E6; --band-2:#C2C2C2; --band-3:#969696;
  --band-4:#585858; --band-5:#1E1E1E;

  /* Score-Ring (Aktien-Detailseite, Belegwerk-Referenz) — bewusst
     achromatisch, niemals rot/grün/gelb (I-1). */
  --score:var(--p-tinte); --score-muted:var(--p-tinte-2); --score-track:var(--p-linie-stark);

  /* Funktionsfarbe für FAKTEN, nie für den Score/das Band (Status-Skala:
     fest, nie als Kategoriefarbe wiederverwendet — I-1). */
  --gut:oklch(0.58 0.15 152); --kritisch:oklch(0.57 0.21 26); --ernst:#ec835a;
  --warnung:oklch(0.72 0.16 78); --neutral-status:#898781;
  --ernst-flaeche:oklch(0.96 0.04 26);
  --gut-flaeche:oklch(0.95 0.05 152); --kritisch-flaeche:oklch(0.96 0.04 26);

  --pt-13:14px; --pt-14:15px; --pt-15:16px; --pt-16:17px;
  --pt-score:72px;
  --p-zeile:1.6;
  --p-mass-lese:800px; --p-mass-weit:1100px;

  --a-1:4px; --a-2:8px; --a-3:12px; --a-4:16px;
  --a-5:24px; --a-6:32px; --a-7:48px; --a-8:64px;
  --radius-basis:0.625rem; --radius-sm:calc(var(--radius-basis) - 4px);
  --radius-md:calc(var(--radius-basis) - 2px); --radius:calc(var(--radius-basis) - 2px);
  --radius-lg:var(--radius-basis); --radius-xl:calc(var(--radius-basis) + 4px);
  --radius-gross:calc(var(--radius-basis) + 8px);
  --schatten:0 0 0 1px var(--p-linie);
  --schatten-hover:0 0 0 1px var(--p-linie-stark);

  /* ── Register LANDESEITE — Apple / ethereum.org ── */
  --l-grund:#FBFBFC; --l-flaeche:#F2F3F5; --l-linie:#E7E9ED;
  --l-tinte:#101216; --l-tinte-2:#4E5560; --l-tinte-3:#7B8290;
  --l-akzent:var(--marke);
  --l-d-grund:#0F1216; --l-d-flaeche:#181C22; --l-d-linie:#2A2F37;
  --l-d-tinte:#F4F5F7; --l-d-tinte-2:#9AA3B0;

  /* Argos-Hero-Prototyp, 1:1 übernommene Werte (auf Wunsch, statt der
     l-d-* Näherung oben) — vom .arg-* Landeseiten-Block und den dunklen
     .met-* Methodik-Sektionen genutzt. */
  --bg:#0a0a0b; --bg-soft:#111113; --fg:#f2f1ec; --fg-dim:#8f8e88; --fg-schwach:#4d4c48;
  --dunkel-linie:rgb(242 241 236 / .09); --dunkel-linie-stark:rgb(242 241 236 / .16);

  --illu-papier:#EAEDF3; --illu-papier-2:#DDE2EC; --illu-papier-3:#E3E9FB;
  --illu-linie:#C3C9D6;
  --illu-warm:#C2660E; --illu-warm-flaeche:#FCEBD8; --illu-warm-linie:#E7B278;
  --illu-blau-flaeche:#EAF0FE;

  --lt-display:clamp(38px,9vw,76px);
  --lt-h2:clamp(30px,5.6vw,58px);
  --lt-lede:clamp(17px,2.4vw,21px);
  --lt-stat:clamp(48px,9vw,92px);
  --l-abschnitt:clamp(56px,9vh,108px);
  --l-container:1200px;
  --l-mass:62ch;
}

/* Dunkelmodus, Register PRODUKT (interner Bereich) — überschreibt nur die
   --p-* Oberflächen-/Text-Tokens, dieselben Werte wie die schon vorhandene
   dunkle Landeseite/Methodik nutzt (--bg/--fg-* Familie oben), damit beide
   Register denselben Dunkel-Ton teilen. Kategorie- und Status-Farben (k-*,
   gut/kritisch/warnung, Beleglage) bleiben unverändert (Chips bleiben
   pastellfarbene Flächen, auf hell wie dunkel gleich gut lesbar). Umschalter
   siehe /statisch/thema.js. */
html[data-modus="dunkel"]{
  --p-grund:var(--bg); --p-flaeche:var(--bg-soft); --p-flaeche-2:#1c1c1f;
  --p-linie:var(--dunkel-linie); --p-linie-stark:var(--dunkel-linie-stark);
  --p-tinte:var(--fg); --p-tinte-2:var(--fg-dim); --p-tinte-3:var(--fg-schwach);
  --p-fehler:#E5484D;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--schrift);font-size:var(--pt-16);line-height:var(--p-zeile);
  color:var(--p-tinte);background:var(--p-grund);
}
a{color:var(--p-aktion);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:var(--fokus);outline-offset:2px;border-radius:2px}
/* Interner Bereich + Zugang: Fokusring auf Ink statt Marken-Blau (Tokenwechsel
   Entwurf entwuerfe/entwurf-uebersicht-neu.html hatte das Feld-Fokus übersprungen). */
.rahmen :focus-visible{outline-color:var(--p-tinte)}
.zugang-rahmen :focus-visible{outline-color:var(--fg)}
.zahl{font-variant-numeric:tabular-nums}
.mono{font-family:var(--schrift-mono);font-size:.86em}
button,input,textarea,select{font:inherit;color:inherit}
img,svg{max-width:100%}
.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* ═══ Register PRODUKT — feste linke Navigation (Belegwerk-Referenz AppShell) ═══ */
.rahmen{display:flex;min-height:100vh;background:var(--p-flaeche);position:relative;z-index:0}
.produkt-wasserzeichen{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.produkt-wasserzeichen svg{
  position:absolute;right:-10%;bottom:-5%;width:min(68vw,1300px);height:auto;
  fill:var(--marke);opacity:.04;
}
.seiten-nav{
  width:var(--nav-breite);flex:none;background:var(--p-grund);
  border-right:1px solid var(--p-linie);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;z-index:10;
}
.seiten-nav .marke{
  display:flex;align-items:center;gap:12px;flex:none;flex-wrap:wrap;
  padding:28px var(--a-4) 24px;border-bottom:1px solid var(--p-linie);font-weight:700;font-size:18px;color:var(--p-tinte);
}
.seiten-nav .marke .marke-wort{font-size:28px}
.seiten-nav .marke .marke-tag{font-size:11px}
.marke-abzeichen{
  width:32px;height:32px;border-radius:var(--radius-lg);background:var(--bg);color:var(--fg);
  display:grid;place-items:center;flex:none;line-height:1;
}
.marke-abzeichen svg{width:18px;height:auto;fill:currentColor}
.marke-wort{font-family:var(--schrift-gross);font-weight:800;letter-spacing:.02em}
.marke-tag{font-family:var(--schrift-mono);font-size:.62em;letter-spacing:.12em;margin-left:3px;opacity:.55}
/* Sidebar-Marke: bloße Kontur (Entwurf .brand), kein dunkles Abzeichen —
   der Balken ist ohnehin schon papierfarben, kein zweiter Farbfleck nötig. */
.seiten-nav .marke .marke-abzeichen{width:40px;height:38px;background:none;color:var(--p-tinte)}
.seiten-nav .marke .marke-abzeichen svg{width:100%}
.seiten-nav nav{display:flex;flex-direction:column;gap:1px;padding:var(--a-3);flex:1;overflow-y:auto}
.seiten-nav nav a,.seiten-nav nav button{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:7px;
  color:var(--p-tinte-2);font-size:16px;font-weight:550;transition:background .12s,color .12s;
  border-left:2px solid transparent;width:100%;
}
.seiten-nav nav button{background:none;border-top:0;border-right:0;border-bottom:0;font-family:inherit;text-align:left;cursor:pointer}
.seiten-nav nav a:hover,.seiten-nav nav button:hover{background:var(--p-flaeche);color:var(--p-tinte);text-decoration:none}
.seiten-nav nav a[aria-current="page"]{
  background:var(--p-flaeche-2);color:var(--p-tinte);border-left-color:var(--p-tinte);font-weight:650;
}
.seiten-nav nav form{margin:0}
.seiten-nav .abschnitt{
  font-family:var(--schrift-mono);font-size:12px;letter-spacing:.1em;
  color:var(--p-tinte-3);padding:16px 10px 6px;
}
.nav-chip{
  width:23px;height:23px;border-radius:999px;flex:none;
  display:grid;place-items:center;
}
.nav-chip .ic{width:13px;height:13px}
.nav-chip-uebersicht{background:var(--marke-flaeche);color:var(--marke)}
.nav-chip-aktien{background:var(--nav-aktien-flaeche);color:var(--nav-aktien)}
.nav-chip-krypto{background:var(--k-krypto-flaeche);color:var(--k-krypto)}
.nav-chip-etf{background:var(--k-etf-flaeche);color:var(--k-etf)}
.nav-chip-rohstoff{background:var(--k-rohstoff-flaeche);color:var(--k-rohstoff)}
.nav-chip-rueckschau{background:var(--nav-rueckschau-flaeche);color:var(--nav-rueckschau)}
.nav-chip-blog{background:var(--nav-blog-flaeche);color:var(--nav-blog)}
.nav-chip-methodik{background:var(--nav-methodik-flaeche);color:var(--nav-methodik)}
.nav-chip-konto{background:var(--p-flaeche);color:var(--p-tinte-3)}
.nav-chip-admin{background:var(--p-flaeche);color:var(--p-tinte-3)}
.nav-chip-abmelden{background:var(--p-flaeche);color:var(--p-tinte-3)}
.nav-chip-termine{background:var(--nav-aktien-flaeche);color:var(--nav-aktien)}
.nav-chip-analysen{background:var(--marke-flaeche);color:var(--marke)}
.nav-chip-fristen{background:var(--nav-rueckschau-flaeche);color:var(--nav-rueckschau)}
.nav-chip-dringend{background:var(--ernst-flaeche);color:var(--ernst)}
.nav-chip-thema{background:var(--p-flaeche);color:var(--p-tinte-3)}
.thema-ic-dunkel{display:none}
html[data-modus="dunkel"] .thema-ic-hell{display:none}
html[data-modus="dunkel"] .thema-ic-dunkel{display:block}
.seiten-nav .datenlieferung{
  margin-top:auto;padding:var(--a-4) var(--a-3) var(--a-4);
  font-size:10px;color:var(--p-tinte-3);flex:none;line-height:1.5;
}
.seiten-nav .datenlieferung p:last-child{font-family:var(--schrift-mono)}
.seiten-nav .cta-analyse{
  display:inline-flex;align-items:center;align-self:flex-start;gap:6px;
  width:max-content;max-width:calc(100% - 2 * var(--a-3));
  margin:var(--a-3) var(--a-3) 0;padding:6px 12px;
  background:none;border:1px solid var(--p-linie-stark);border-radius:6px;
  color:var(--p-tinte-2);font-family:var(--schrift-mono);font-size:12px;letter-spacing:.03em;
  text-decoration:none;transition:color .15s,border-color .15s;
}
.seiten-nav .cta-analyse:hover{color:var(--p-tinte);border-color:var(--p-tinte-3);text-decoration:none}
.seiten-nav .cta-analyse svg{width:12px;height:12px;flex:none;stroke:currentColor;fill:none;stroke-width:2.4}
@media (max-width:860px){
  .seiten-nav{width:var(--nav-breite-schmal)}
  .seiten-nav .marke span:not(.marke-abzeichen),.seiten-nav nav a span.label,.seiten-nav nav button span.label{display:none}
  .seiten-nav .datenlieferung{display:none}
  .seiten-nav .cta-analyse{display:none}
  .inhalt-kopf .such{display:none}
}

.inhalt{flex:1;min-width:0;display:flex;flex-direction:column}
.inhalt-kopf{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--a-4);
  flex:none;padding:26px var(--a-5);border-bottom:1px solid var(--p-linie);
  background:color-mix(in oklch,var(--p-grund) 85%,transparent);backdrop-filter:blur(8px);
  /* Volle Breite der Inhaltsspalte (Anfrage: Kopfzeile wirkte auf breiten
     Bildschirmen mittig statt bis zum Rand zu reichen, Profil-Icon nicht
     rechtsbündig) — dieselbe Breite wie .rumpf/.fuss unten, kein eigener
     Höchstwert mehr. */
  box-sizing:border-box;width:100%;
}
.inhalt-kopf .titel-block{min-width:0;flex:1}
.inhalt-kopf h1{font-family:var(--schrift-gross);font-size:32px;font-weight:650;letter-spacing:-.015em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inhalt-kopf .untertitel{font-size:17px;color:var(--p-tinte-2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inhalt-kopf .such{position:relative;flex:none}
.inhalt-kopf .such input{
  width:220px;border:1px solid var(--p-linie);border-radius:var(--radius-lg);
  padding:7px 12px;font-size:var(--pt-14);background:var(--p-flaeche);
  transition:background .15s,border-color .15s;
}
.inhalt-kopf .such input:focus{background:var(--p-grund);border-color:var(--p-tinte)}
.inhalt-kopf .such-ergebnisse{
  position:absolute;right:0;top:calc(100% + 8px);width:320px;max-width:80vw;
  background:var(--p-grund);border:1px solid var(--p-linie);border-radius:var(--radius-gross);
  box-shadow:var(--schatten-hover);z-index:20;max-height:70vh;overflow-y:auto;
}
.inhalt-kopf .such-ergebnisse:empty{display:none}
.such-gruppe{padding:var(--a-2) 0}
.such-gruppe h3{
  font-size:var(--pt-13);text-transform:uppercase;letter-spacing:.06em;
  color:var(--p-tinte-3);padding:4px var(--a-4);
}
.such-treffer{
  display:flex;gap:10px;align-items:baseline;padding:6px var(--a-4);
  transition:background .1s;
}
.such-treffer:hover{background:var(--p-flaeche)}
.such-treffer .tk{font-family:var(--schrift-mono);font-weight:650;color:var(--p-tinte);min-width:52px}
.such-treffer .name{color:var(--p-tinte-2);flex:1}
.such-leer{padding:var(--a-3) var(--a-4);color:var(--p-tinte-3);font-size:var(--pt-14)}
.konto-abzeichen{
  width:32px;height:32px;border-radius:999px;background:var(--marke-flaeche);color:var(--marke);
  display:grid;place-items:center;flex:none;
}
.konto-abzeichen .ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

.kennlinie{height:3px;flex:none}
.kennlinie-aktie{background:var(--k-aktie)}
.kennlinie-krypto{background:var(--k-krypto)}
.kennlinie-etf{background:var(--k-etf)}
.kennlinie-rohstoff{background:var(--k-rohstoff)}
.kennlinie-neutral{background:var(--p-linie)}

/* ═══ Seitenkopf / Rumpf ═══ */
.rumpf{padding:0 var(--a-5) var(--a-8)}
.rumpf-schmal{max-width:920px;margin:0 auto}
.brotkrume{padding:var(--a-4) 0 0;font-size:var(--pt-14)}
.brotkrume a{color:var(--p-tinte-3)}
.seitentitel{padding:var(--a-4) 0 var(--a-5)}
.seitentitel h1{font-family:var(--schrift-gross);font-size:26px;letter-spacing:-.015em;line-height:1.2}
.seitentitel .unter{color:var(--p-tinte-2);margin-top:4px;max-width:var(--p-mass-lese)}

/* Abstands-Hilfsklassen (a-Skala oben). Nicht inline schreiben: die meisten
   geschützten Routen fahren `style-src 'self'` ohne `unsafe-inline`
   (haupt.py — nur /uebersicht, /aktien, /etf, /asset/* lockern das für
   TradingView-Widgets) — ein `style="margin-top:…"` wird dort vom Browser
   still verworfen, keine Fehlermeldung, keine Wirkung. Echte Klasse aus dem
   Stylesheet greift überall. */
.mt-2{margin-top:var(--a-2)} .mt-3{margin-top:var(--a-3)} .mt-4{margin-top:var(--a-4)}
.mt-5{margin-top:var(--a-5)} .mt-7{margin-top:var(--a-7)}
.mt-null{margin-top:0}
.mt-mini{margin-top:2px}
.mb-3{margin-bottom:var(--a-3)} .mb-4{margin-bottom:var(--a-4)}
.mb-5{margin-bottom:var(--a-5)} .mb-6{margin-bottom:var(--a-6)}
.mb-7{margin-bottom:var(--a-7)}
.kopf{display:flex;align-items:flex-start;gap:var(--a-4);padding:var(--a-3) 0 var(--a-5);flex-wrap:wrap}
.asset-logo{
  width:40px;height:40px;border-radius:8px;flex:none;object-fit:contain;
  background:var(--p-flaeche);
}
.asset-logo-platzhalter{display:grid;place-items:center;color:var(--p-tinte-3)}
.asset-logo-platzhalter svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.kopf h1{font-family:var(--schrift-gross);font-size:28px;letter-spacing:-.015em;line-height:1.2}
.kopf h1 .tk{font-family:var(--schrift-mono);font-size:22px;color:var(--p-tinte-2);font-weight:600;margin-right:6px}
.kopf .satz{flex-basis:100%;max-width:var(--p-mass-lese);color:var(--p-tinte-2);margin-top:2px}
.kopf .meta{flex-basis:100%;font-size:var(--pt-14);color:var(--p-tinte-3);margin-top:2px}
/* E-35-Test: Symbol-Info im Seitenkopf — noch keine Höhe erzwungen, erst
   live prüfen (Widget vermutlich kompakt, kein Canvas-Chart wie bei
   Symbol Overview/Advanced Chart, also evtl. kein .chart-innen-Fix nötig). */
.tv-info-test{flex-basis:100%;margin-top:var(--a-3)}
/* Symbol-Info-Widget ist fest auf colorTheme "light" konfiguriert
   (tradingview.py symbol_info_konfig(), isTransparent:true) — im Dunkelmodus
   scheint sonst der dunkle .kopf-Grund durch, der Widget-Text bleibt aber
   unverändert dunkel eingefärbt → Kurs/Ticker unlesbar. Container bekommt
   deshalb wie das Timeline-Widget (.ue-fremdinhalt oben) einen fest hellen
   Fleck, unabhängig vom App-Thema, bis das Widget selbst mitschalten kann. */
html[data-modus="dunkel"] .tv-info-test{
  background:#fbfaf7;border-radius:var(--radius);padding:var(--a-2) var(--a-3);
}

.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:var(--pt-13);font-weight:600;
  padding:4px 10px;border-radius:999px;white-space:nowrap;border:0;cursor:default;
}
.chip-klasse-aktie{background:var(--k-aktie-flaeche);color:#173FA8}
.chip-klasse-krypto{background:var(--k-krypto-flaeche);color:#4C1D95}
.chip-klasse-etf{background:var(--k-etf-flaeche);color:oklch(0.4 0.135 185)}
.chip-klasse-rohstoff{background:var(--k-rohstoff-flaeche);color:oklch(0.38 0.14 45)}
.chip-neutral{background:var(--p-flaeche);color:var(--p-tinte-2);font-weight:500}
.chip-kontur{border:1px solid var(--p-linie);color:var(--p-tinte-2);background:var(--p-grund);font-weight:500}
.chip-voll{background:var(--beleg-5);color:#FFF;font-weight:500}
.chip-verworfen{border:1px dashed var(--p-linie-stark);color:var(--p-tinte-3);background:transparent;font-weight:500}
.chip-schraffur{
  border:1px solid var(--p-tinte-3);color:var(--p-tinte);font-weight:500;
  background:repeating-linear-gradient(45deg,transparent 0 3px,#B9BEC6 3px 4.5px);
}
.chip-dringend{background:var(--p-tinte);color:var(--p-grund);font-weight:650}
.chip-tint{background:var(--p-flaeche-2);color:var(--p-tinte-2);font-weight:650}
/* E-57: interessenlage bei Recherche/Short-Report ist immer sichtbar, nie nur
   im Tooltip — eigener Warnfarbton, damit sie zwischen den übrigen Chips
   auffällt statt unterzugehen. */
.chip-warnung{background:color-mix(in oklch,var(--warnung) 22%,var(--p-grund));color:#7A4B00;font-weight:600}
.archiv-link{font-size:var(--pt-13);color:var(--p-tinte-2);text-decoration:underline;margin-left:6px}
.fundstelle{font-size:var(--pt-13);color:var(--p-tinte-3)}
.ursache-chip{margin-left:6px}
.zusagen-liste{list-style:none;margin:var(--a-3) 0 0;padding:0}
.zusagen-liste li{padding:var(--a-2) 0;border-top:1px solid var(--p-flaeche-2)}
.zusagen-liste li:first-child{border-top:0;padding-top:0}
.zusagen-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--a-3);margin-bottom:4px}
.zusagen-datum{font-size:var(--pt-13);color:var(--p-tinte-3);white-space:nowrap}
.zusagen-liste .text{display:block;font-size:var(--pt-14);color:var(--p-tinte-2);line-height:1.5}
.zusagen-liste .fundstelle{display:block;margin-top:2px}

/* ═══ Farbcode je Sektor/Kategorie (`oberflaeche/sektorfarben.py`) — Farbe
   nie allein: Sektor-/Kategoriename steht immer als Text/Titel daneben. ═══ */
.sektor-chip{
  display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:650;
  padding:5px 12px 5px 8px;border-radius:999px;background:var(--p-flaeche-2);color:var(--p-tinte-2);
}
.sektor-chip i{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--sektor-farbe,var(--p-tinte-3))}
.sektor-punkt{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block;background:var(--sektor-farbe,var(--p-tinte-3))}
.sektor-swatch{width:30px;height:30px;border-radius:9px;flex:none;background:var(--sektor-farbe,var(--p-flaeche-2))}
.katalog-logo{width:30px;height:30px;border-radius:9px;flex:none;object-fit:contain;background:var(--p-flaeche-2)}

/* ═══ Funktionsfarbe für Fakten — Kurs, Kill-Status, Anker-Zustand ═══
   Nie für den Score/das Band (I-1); immer Punkt/Chip + sichtbarer Text. */
.status-punkt{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:650}
.status-punkt i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.status-frisch i{background:var(--gut)}
.status-ueberholt i{background:var(--warnung)}
.status-zurueckgezogen i{background:var(--neutral-status)}
.status-fehlt i{background:var(--neutral-status)}
.status-ausgeloest{color:#9A3412}
.status-ausgeloest i{background:var(--ernst);box-shadow:0 0 0 4px rgb(236 131 90 / .18)}
.kurs-positiv{color:var(--gut)}
.kurs-negativ{color:var(--kritisch)}

/* ═══ Merkliste-Knopf ═══ */
.merk-knopf{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--p-linie);
  background:var(--p-grund);border-radius:var(--radius);padding:5px 10px;
  font-size:var(--pt-14);color:var(--p-tinte-2);cursor:pointer;
  transition:border-color .12s,background .12s,color .12s;
}
.merk-knopf:hover{border-color:#C7CBD2;box-shadow:var(--schatten-hover)}
.merk-knopf .stern{width:12px;height:12px;flex:none}
.merk-knopf[data-gemerkt="1"]{background:var(--p-tinte);color:var(--p-grund);border-color:var(--p-tinte)}
.merk-knopf[data-gemerkt="1"] .stern{fill:var(--p-grund)}
.merk-knopf .stern{fill:none;stroke:currentColor;stroke-width:1.5}
.merk-stern-zeile{
  border:0;background:transparent;cursor:pointer;padding:4px;color:var(--p-tinte-3);
  display:inline-flex;border-radius:var(--radius);
}
.merk-stern-zeile:hover{color:var(--p-tinte);background:var(--p-flaeche)}
.merk-stern-zeile[data-gemerkt="1"]{color:var(--p-tinte)}
.merk-stern-zeile[data-gemerkt="1"] svg{fill:currentColor}
.merk-stern-zeile svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}

/* ═══ Notiz ═══ */
.notiz-baustein{border-top:1px solid var(--p-flaeche-2);padding-top:var(--a-3);margin-top:var(--a-3)}
.notiz-baustein textarea{
  width:100%;min-height:88px;border:1px solid var(--p-linie);border-radius:var(--radius);
  padding:var(--a-2) var(--a-3);font-size:var(--pt-14);resize:vertical;
}
.notiz-baustein .zeile{display:flex;justify-content:space-between;align-items:center;gap:var(--a-3);margin-top:6px}
.notiz-baustein .stand{font-size:var(--pt-13);color:var(--p-tinte-3)}

/* ═══ Formulare & Knöpfe (Zugang/Konto) — Argos-Stil, dunkel ═══ */
.formular{display:flex;flex-direction:column;gap:var(--a-3);max-width:420px}
.formular label{font-size:var(--pt-14);font-weight:600;color:var(--fg-dim);margin-bottom:2px;display:block}
.formular input[type=text],.formular input[type=email],.formular input[type=password],
.formular textarea{
  width:100%;border:1px solid var(--dunkel-linie-stark);border-radius:var(--radius);
  padding:9px 11px;font-size:var(--pt-16);background:#1c1c1f;color:var(--fg);
  transition:border-color .12s,box-shadow .12s;
}
.formular input:-webkit-autofill,.formular input:-webkit-autofill:hover,
.formular input:-webkit-autofill:focus,.formular input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--fg);caret-color:var(--fg);
  box-shadow:0 0 0 1000px #1c1c1f inset;-webkit-box-shadow:0 0 0 1000px #1c1c1f inset;
  transition:background-color 9999s ease-in-out 0s;
}
.formular input:focus,.formular textarea:focus{border-color:var(--fg-dim);box-shadow:0 0 0 3px var(--dunkel-linie-stark)}
.formular .feld{display:flex;flex-direction:column;gap:4px}
.formular .feld[hidden]{display:none}
.formular .hinweis{font-size:var(--pt-13);color:var(--fg-dim)}
.formular .fehler{color:#ff6b6b;font-size:var(--pt-14)}
.formular select{
  width:100%;border:1px solid var(--dunkel-linie-stark);border-radius:var(--radius);
  padding:9px 11px;font-size:var(--pt-16);background:#1c1c1f;color:var(--fg);
  transition:border-color .12s,box-shadow .12s;
}
.formular select:focus{border-color:var(--fg-dim);box-shadow:0 0 0 3px var(--dunkel-linie-stark)}
.formular .mono-eingabe{font-family:var(--schrift-mono);text-transform:uppercase}
.formular .popup-erfolg{font-size:var(--pt-15);color:var(--p-tinte)}

/* Anfrage-/Support-Popup (E-29/E-30) — natives <dialog>, keine Bibliothek.
   Helle Kartenoptik wie die übrige Produkt-Oberfläche (--p-*), die
   Formularfelder darin bleiben in der bestehenden dunklen .formular-Optik
   (siehe /konto — dieselbe Kombination gibt es dort schon). */
dialog.popup{
  border:none;border-radius:var(--radius-gross);padding:0;
  width:min(480px, calc(100% - 2 * var(--a-5)));
  background:var(--p-grund);box-shadow:var(--schatten-hover);
  color:var(--p-tinte);
  /* globaler Reset (`*{margin:0}`) killt sonst die native
     dialog:modal-Zentrierung des Browsers (margin:auto) — hier zurückholen. */
  margin:auto;
  max-height:calc(100vh - 2 * var(--a-5));
}
dialog.popup::backdrop{background:rgb(21 20 15 / .45)}
.popup-kopf{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--a-4) var(--a-5);border-bottom:1px solid var(--p-linie);
}
.popup-kopf h2{font-size:var(--pt-16);font-weight:650;margin:0}
.popup-schliessen{
  background:none;border:none;padding:4px;cursor:pointer;
  color:var(--p-tinte-2);display:grid;place-items:center;border-radius:6px;flex:none;
}
.popup-schliessen:hover{background:var(--p-flaeche-2);color:var(--p-tinte)}
.popup-schliessen svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.popup-inhalt{padding:var(--a-5);max-height:70vh;overflow-y:auto}
/* .knopf-primaer ist weiß-auf-weiß für die dunklen Auth-Seiten gebaut
   (siehe .formular oben) — auf hellem Grund (--p-grund/--p-flaeche, Popup
   wie Konto-Karten) praktisch unsichtbar. */
.popup-inhalt .formular button[type=submit],
.popup-inhalt .knopf-primaer,
.karte .formular button[type=submit],
.karte .knopf-primaer{background:var(--p-tinte);color:var(--p-grund)}
.popup-inhalt .formular button[type=submit]:hover,
.popup-inhalt .knopf-primaer:hover,
.karte .formular button[type=submit]:hover,
.karte .knopf-primaer:hover{opacity:.86}
.cta-support{margin-top:var(--a-3)}
.status-formular{display:flex;gap:var(--a-2);align-items:center}
.knopf-primaer,.formular button[type=submit]{
  background:#fff;color:#000;border:0;border-radius:5px;
  padding:10px 18px;font-family:var(--schrift-mono);font-size:13px;letter-spacing:.06em;
  cursor:pointer;transition:opacity .12s,transform .12s;align-self:flex-start;
}
.knopf-primaer:hover,.formular button[type=submit]:hover{opacity:.86}
.knopf-primaer:active,.formular button[type=submit]:active{transform:translateY(1px)}
.knopf-gefahr{
  background:#452a2a;color:#ff6b6b;border:1px solid rgb(255 107 107 / .35);border-radius:5px;
  padding:10px 18px;font-family:var(--schrift-mono);font-size:13px;letter-spacing:.06em;
  cursor:pointer;transition:background .12s,border-color .12s,transform .12s;align-self:flex-start;
}
.knopf-gefahr:hover{background:#4f3232;border-color:rgb(255 107 107 / .55)}
.knopf-gefahr:active{transform:translateY(1px)}
.knopf-sekundaer{
  background:var(--p-grund);color:var(--p-tinte);border:1px solid var(--p-linie);
  border-radius:var(--radius);padding:9px 16px;font-weight:600;cursor:pointer;
  transition:border-color .12s,box-shadow .12s;
}
.knopf-sekundaer:hover{border-color:#C7CBD2;box-shadow:var(--schatten-hover)}

/* ═══ Raster / Karten ═══ */
.raster{display:grid;grid-template-columns:minmax(0,1fr) 276px;gap:var(--a-5);align-items:start}
.seitenspalte{position:sticky;top:var(--a-4);display:flex;flex-direction:column;gap:var(--a-4)}
@media (max-width:960px){
  .raster{grid-template-columns:minmax(0,1fr)}
  .seitenspalte{position:static}
}
.karte{
  border-radius:var(--radius-gross);
  background:var(--p-grund);box-shadow:var(--schatten);
  transition:box-shadow .15s;
}
.karte:hover{box-shadow:var(--schatten-hover)}
/* E-35: TradingView-Bundle überschreibt .tv-chart-rahmen beim Mounten selbst
   mit style="width:100%;height:100%" (Inline-Style, JS-gesetzt — schlägt
   jede externe Regel auf demselben Element, auch mit höherer Spezifität).
   Die 100% brauchen daher eine ECHTE feste Höhe auf dem ELTERN-Element
   (.chart-innen), nicht auf .tv-chart-rahmen selbst — sonst bricht die
   Prozent-Kette nach oben (.karte/.hauptspalte/... sind alle auto/
   content-getrieben, keine davon hat eine explizite Höhe) und der Chart-
   Canvas kollabiert auf ~0px. Per echtem Browser-Test verifiziert (nicht nur
   Code-Analyse): Canvas 526×2px vorher, 530×166px danach — siehe BAUAUFTRAG-2
   E-35. .tv-chart-rahmen{height:480px} bleibt als Fallback, falls das Bundle
   mal nicht lädt (dann bleibt unser Inline-Override aus, diese Regel greift). */
.chart-innen{height:480px}
.tv-chart-rahmen{height:480px}
.tv-chart-rahmen .tradingview-widget-container__widget{height:100%}

/* Timeline-Widget (testweise, /uebersicht): dieselbe Höhen-Vererbungslücke
   wie beim Symbol-Overview-Chart oben — width/height:100% im Bundle greift
   nur mit einer echten Pixelhöhe auf einem Vorfahren, sonst kollabiert der
   Container. .karte/.innen sind beide content-getrieben, keine feste Höhe. */
.ue-fremdinhalt .innen{padding-top:var(--a-3)}
.ue-fremdinhalt-hinweis{font-size:var(--pt-14);color:var(--p-tinte-3);margin-bottom:var(--a-3)}
.timeline-innen{height:560px}
.timeline-innen .tradingview-widget-container__widget{height:100%}
/* TradingView-Timeline-Widget ist fest auf colorTheme "light" konfiguriert
   (uebersicht.html) — im Dunkelmodus bliebe die Karte dunkel, das Widget
   selbst (isTransparent, dunkler Text) aber unverändert hell-thematisiert →
   unlesbar. Karte bleibt deshalb bewusst auf den hellen Tokens fixiert,
   unabhängig vom App-Thema, bis das Widget selbst mitschalten kann. */
html[data-modus="dunkel"] .ue-fremdinhalt{
  --p-grund:#fbfaf7; --p-tinte:#15140f; --p-tinte-2:#6d6c62; --p-tinte-3:#a9a79a;
  --p-linie:rgb(21 20 15 / .10); --p-linie-stark:rgb(21 20 15 / .18);
}
.karte>header{
  display:flex;align-items:baseline;gap:var(--a-3);flex-wrap:wrap;
  padding:var(--a-3) var(--a-4);border-bottom:1px solid var(--p-linie);
}
.karte>header h2{font-size:var(--pt-15);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--p-tinte-2)}
.karte>header .neben{font-size:var(--pt-14);color:var(--p-tinte-3);margin-left:auto}
.karte .innen{padding:var(--a-4)}
.konto-karte{margin-bottom:var(--a-7)}
.konto-karte:last-child{margin-bottom:0}

/* Kommentare (E-32) — ein Fragment für Blog und alle vier Anlageklassen. */
.kommentare{margin-top:var(--a-6)}
.kommentar-formular{margin-bottom:var(--a-5);max-width:none}
.kommentar-formular textarea,.kommentar-antwort-formular textarea{width:100%}
.kommentar-zeile{
  padding:var(--a-4) 0;border-top:1px solid var(--p-linie);
}
.kommentar-zeile:first-of-type{border-top:none;padding-top:0}
.kommentar-zeile .kommentar-zeile{border-top:1px dashed var(--p-linie)}
.kommentar-antwort{margin-left:var(--a-5);padding-left:var(--a-4);border-left:2px solid var(--p-linie)}
.kommentar-kopf{display:flex;gap:var(--a-2);align-items:baseline;font-size:var(--pt-14)}
.kommentar-kopf b{color:var(--p-tinte)}
.kommentar-kopf .datum{color:var(--p-tinte-3)}
.kommentar-text{margin-top:4px;white-space:pre-wrap;color:var(--p-tinte-2)}
.kommentar-aktionen{display:flex;gap:var(--a-3);margin-top:8px}
.kommentar-aktionen form{display:inline-flex}
.knopf-mini{
  background:none;border:1px solid var(--p-linie);border-radius:6px;
  padding:3px 10px;font-size:var(--pt-13);color:var(--p-tinte-2);cursor:pointer;
  transition:border-color .12s,color .12s;
}
.knopf-mini:hover{border-color:var(--p-tinte-3);color:var(--p-tinte)}
.knopf-mini[aria-pressed=true]{border-color:var(--p-tinte);color:var(--p-tinte)}
.kommentar-antwort-formular{margin-top:var(--a-3);margin-left:var(--a-5);gap:6px;max-width:none}
.kommentar-antwort-formular textarea{min-height:44px}
.konto-karte .innen{padding:var(--a-5)}
.karte .formular{gap:var(--a-4)}
.karte .formular .feld{gap:8px}
.hauptspalte{display:flex;flex-direction:column;gap:var(--a-5)}

/* ═══ Beleglage ═══ */
.beleglage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--a-5);align-items:start}
@media (max-width:700px){.beleglage{grid-template-columns:minmax(0,1fr)}}
.score-block .zahl-gross{font-size:var(--pt-score);font-weight:750;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.score-block .von{font-size:var(--pt-14);color:var(--p-tinte-3);margin-top:2px}

/* Score-Ring (Belegwerk-Referenz) — ersetzt zahl-gross auf der Detailseite,
   Farbe bewusst achromatisch (I-1), keine Prozentangabe im Ring selbst. */
.score-ring{position:relative;width:128px;height:128px;flex:none}
.score-ring svg{width:100%;height:100%}
.score-ring-zahl{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:36px;font-weight:750;letter-spacing:-.02em;color:var(--score);
}

/* Skala statt Ladebalken: feste Segmente in den fünf Beleg-Stufen (immer
   dieselbe Farbe, unabhängig vom Wert — eine gedruckte Skala, kein
   Fortschritt) plus ein Positionsmarker an der exakten Stelle. Nie eine
   durchgehende Füllung, die als „62 % fertig" gelesen werden könnte. */
.dichte{margin-top:var(--a-3);width:248px;max-width:100%}
.dichte .spur{position:relative;height:18px;display:flex;gap:2px}
.dichte .spur i{display:block;height:100%;border-radius:3px}
.dichte .marker{
  position:absolute;top:-5px;width:4px;height:28px;border-radius:2px;
  background:var(--p-tinte);box-shadow:0 0 0 2px var(--p-grund),0 1px 3px rgb(0 0 0 / .25);
  transform:translateX(-50%);
}
.dichte .striche{position:relative;height:14px;margin-top:6px}
.dichte .striche span{position:absolute;transform:translateX(-50%);font-size:12px;color:var(--p-tinte-3);font-variant-numeric:tabular-nums}
.dichte figcaption{font-size:var(--pt-14);color:var(--p-tinte-3);margin-top:6px;max-width:248px}

/* Kompakte Fassung (Katalogzeile): keine Strichbeschriftung, kleinere Maße. */
.dichte-mini{width:108px}
.dichte-mini .spur{position:relative;height:12px;display:flex;gap:1.5px}
.dichte-mini .spur i{display:block;height:100%;border-radius:2px}
.dichte-mini .marker{
  position:absolute;top:-3px;width:3px;height:18px;border-radius:1.5px;
  background:var(--p-tinte);box-shadow:0 0 0 1.5px var(--p-grund);transform:translateX(-50%);
}
.band-block .band-wort{font-size:22px;font-weight:650;letter-spacing:-.01em}
.band-stufen{display:flex;gap:4px;margin-top:var(--a-3)}
.band-stufen i{width:28px;height:12px;border-radius:2px;background:var(--band-1);display:block}
.band-stufen i.voll{background:var(--band-5)}
.bereich-satz{font-size:var(--pt-14);color:var(--p-tinte-2);max-width:260px;margin-top:var(--a-3)}
.begrenzung{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--a-3);
  padding-top:var(--a-3);border-top:1px solid var(--p-linie);font-size:var(--pt-13);
}
.begrenzung .bg-label{color:var(--p-tinte-3)}
.begrenzung b{font-family:var(--schrift-mono);font-size:.9em;color:var(--p-tinte)}
.begrenzung-satz{margin-top:4px;font-size:var(--pt-14);color:var(--p-tinte-2)}
.laufzeit{margin-top:var(--a-4)}
.laufzeit .beschr{display:flex;justify-content:space-between;font-size:var(--pt-14);color:var(--p-tinte-3);margin-bottom:4px}
.urteil{margin-top:var(--a-4);font-size:var(--pt-16);color:var(--p-tinte-2);max-width:var(--p-mass-lese)}
.urteil b{color:var(--p-tinte)}
/* ETF/Rohstoff (E-22): kein Score-Ring, die Kernaussage trägt die Karte —
   deshalb größer/kräftiger als die normale Einschätzungszeile. */
.kernaussage-text{font-size:var(--pt-16);font-weight:560;color:var(--p-tinte);line-height:var(--p-zeile)}

/* Cockpit-Variante: luftigeres, kartenartiges Layout für die Beleglage auf der
   Detailseite (rein visuell — Struktur/Inhalte bleiben unverändert). */
.beleglage-cockpit{gap:var(--a-6)}
.beleglage-cockpit .cockpit-score,
.beleglage-cockpit .band-block{
  padding:var(--a-5);border-radius:var(--radius-gross);
  background:var(--p-flaeche);display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.cockpit-stack{display:flex;flex-direction:column;gap:var(--a-5)}
.cockpit-panel{
  padding:var(--a-4) var(--a-5);border-radius:var(--radius-lg);
  background:var(--p-flaeche);border:1px solid var(--p-linie);
}
.beleglage-cockpit .laufzeit.cockpit-panel{margin-top:0}
.beleglage-cockpit .urteil.cockpit-panel-urteil{
  margin-top:0;max-width:none;background:var(--p-grund);
  border-left:3px solid var(--p-tinte);
}
.cockpit-panel-begrenzung{background:var(--p-flaeche-2);display:flex;flex-direction:column;gap:0}
.cockpit-panel-begrenzung .begrenzung{padding-top:0;border-top:none}
.cockpit-panel-begrenzung .begrenzung-satz{margin-top:6px}
@media (max-width:700px){
  .beleglage-cockpit .cockpit-score,.beleglage-cockpit .band-block{padding:var(--a-4)}
}
.luecke{color:var(--p-tinte-3);border-bottom:1px solid var(--p-linie);padding-bottom:2px;display:inline-block}
.luecke-block{
  padding:var(--a-4);border:1px dashed var(--p-linie);border-radius:var(--radius);
  color:var(--p-tinte-3);font-size:var(--pt-14);
}

/* ═══ These ═══ */
.these-raster{display:grid;grid-template-columns:1fr 1fr;gap:var(--a-4)}
@media (max-width:820px){.these-raster{grid-template-columns:minmax(0,1fr)}}
.these-raster header{display:flex;align-items:center;gap:10px}
.these-raster header .anzahl{margin-left:auto;font-family:var(--schrift-mono);font-size:var(--pt-13);color:var(--p-tinte-3)}
.nav-chip-pro{background:var(--gut-flaeche);color:var(--gut)}
.nav-chip-contra{background:var(--kritisch-flaeche);color:var(--kritisch)}
.punkt{padding:var(--a-3) var(--a-4);display:flex;flex-direction:column;gap:4px;transition:background .12s}
.punkt:hover{background:var(--p-flaeche)}
.punkt+.punkt{border-top:1px solid var(--p-flaeche-2)}
.punkt .text{font-size:var(--pt-16);font-weight:500}
.punkt .quelle-chip{
  display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:4px 8px;
  border-radius:var(--radius-md);background:var(--p-flaeche);font-size:var(--pt-13);color:var(--p-tinte-3);width:fit-content;
}
.punkt .quelle-chip .ic{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* ═══ Tabellen ═══ */
.tab-umbruch{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--pt-16)}
th,td{text-align:left;padding:10px var(--a-3);vertical-align:top}
thead th{
  font-size:var(--pt-13);letter-spacing:.06em;text-transform:uppercase;
  color:var(--p-tinte-3);border-bottom:1px solid var(--p-linie);
  background:var(--p-flaeche);font-weight:650;white-space:nowrap;
}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--p-flaeche)}
tbody td{border-bottom:1px solid var(--p-flaeche-2)}
tbody tr:last-child td{border-bottom:0}
td.mono-zelle{font-family:var(--schrift-mono);font-size:var(--pt-14);color:var(--p-tinte-2);white-space:nowrap}
th a{color:inherit}
th a[aria-current="true"]{text-decoration:underline}

/* ═══ Katalog ═══ */
.katalog-werkzeuge{
  display:flex;gap:var(--a-3);flex-wrap:wrap;align-items:center;
  padding:var(--a-3) 0;border-bottom:1px solid var(--p-linie);margin-bottom:var(--a-4);
}
.katalog-werkzeuge select,.katalog-werkzeuge input[type=search]{
  border:1px solid var(--p-linie);border-radius:var(--radius);padding:7px 10px;
  font-size:var(--pt-14);background:var(--p-grund);
}
.katalog-werkzeuge .sortierung{margin-left:auto;display:flex;gap:var(--a-2);align-items:center;font-size:var(--pt-14);color:var(--p-tinte-2)}
.katalog-werkzeuge .sortierung a{padding:4px 8px;border-radius:var(--radius);color:var(--p-tinte-2)}
.katalog-werkzeuge .sortierung a[aria-current="true"]{background:var(--p-flaeche);color:var(--p-tinte);font-weight:600}
.katalog-zahl{font-size:var(--pt-14);color:var(--p-tinte-3);margin-bottom:var(--a-2)}

/* Kartenförmige Katalogtabelle, dichter befüllt (Nachschärfung 2): feste
   Spaltenbreiten statt Browser-Autostretch, farbiger Zeilenrand, größere
   Sektor-Kachel, Beleglage mit Zahl + Mini-Skala statt nackter Bar. */
.karte-tabelle{background:var(--p-grund);border-radius:var(--radius-gross);box-shadow:var(--schatten);overflow:hidden}
.karte-tabelle table{table-layout:fixed}
.karte-tabelle col.c-titel{width:32%} .karte-tabelle col.c-klass{width:16%}
.karte-tabelle col.c-beleg{width:22%} .karte-tabelle col.c-stichtag{width:12%}
.karte-tabelle col.c-frist{width:14%} .karte-tabelle col.c-aktion{width:4%}
.karte-tabelle thead th{padding:14px 18px;background:transparent}
.karte-tabelle tbody td{padding:14px 18px}
.karte-tabelle tbody tr{border-left:3px solid transparent}
.titel-zelle{display:flex;align-items:center;gap:12px}
/* Fixe Breite für Logo/Tag-Slot: tv-ticker-tag (E-35) ist von Natur aus
   unterschiedlich breit (Ticker + Kursänderung als Text), dadurch stand
   der Titeltext sonst je Zeile an anderer x-Position. Slot so breit wie
   der größte realistische Tag; table-layout:fixed schneidet Inhalte
   nicht automatisch ab, ein selten breiterer Tag ragt dann minimal über
   den Slot hinaus statt den Titeltext zu verschieben. */
.titel-logo{width:150px;flex:none;display:flex;align-items:center}
.titel-zelle .tk{font-size:15px}

/* Admin-Tabellen (anfragen/support): generische Breiten-Utilities statt
   tabellenspezifischer c-*-Klassen — mehrere Admin-Tabellen mit ganz
   unterschiedlichen Spalten teilen sich dieselbe .karte-tabelle-Basis
   (table-layout:fixed erzwingt sonst gleich breite Spalten, das drückt
   E-Mail/ISO-Zeitstempel ineinander). */
.karte-tabelle col.w-10{width:10%} .karte-tabelle col.w-12{width:12%}
.karte-tabelle col.w-15{width:15%} .karte-tabelle col.w-18{width:18%}
.karte-tabelle col.w-20{width:20%} .karte-tabelle col.w-22{width:22%}
.karte-tabelle col.w-25{width:25%} .karte-tabelle col.w-30{width:30%}
.karte-tabelle col.w-35{width:35%}
.zelle-kuerzen{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Gegenstück zu `zelle-kuerzen`: Freitext, der vollständig lesbar sein muss,
   weil eine Entscheidung daran hängt (z. B. der Kontext einer Kontoanfrage).
   Umbricht statt zu kürzen, `overflow-wrap` fängt Bandwurm-Eingaben ohne
   Leerzeichen ab, die die Spalte sonst sprengen würden. */
.zelle-fliesstext{white-space:pre-line;overflow-wrap:anywhere;line-height:1.45}
.admin-aktionen{
  display:flex;flex-direction:column;gap:var(--a-2);align-items:flex-end;
}
/* Ohne feste Breite wächst <select> mit der längsten Option
   ("in-bearbeitung") über die feste Spaltenbreite hinaus und überlappt die
   Nachbarspalte (table-layout:fixed schneidet Inhalte nicht automatisch ab). */
.status-formular select{width:130px;flex:none}
.status-formular{flex-wrap:wrap;max-width:100%}
.admin-aktionsleiste{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:var(--a-3);margin-top:var(--a-4);margin-bottom:var(--a-5);
}
.admin-aktionsleiste .brotkrume{padding:0}
.admin-aktionsleiste form{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.titel-zelle .tk a,.karte-tabelle .tk a{color:var(--p-tinte);font-weight:700}
.titel-zelle .name,.karte-tabelle .name{color:var(--p-tinte-2);font-size:14px;margin-top:1px;font-weight:400}
.titel-zelle .name a,.karte-tabelle .name a{color:var(--p-tinte-2)}
.beleg-zelle{display:flex;align-items:center;gap:10px}
.beleg-zelle .zahl-mini{font-weight:750;font-size:17px;min-width:26px}
.umschalter{display:inline-flex;border:1px solid var(--p-linie);border-radius:999px;overflow:hidden;font-size:var(--pt-14);margin-top:var(--a-5);margin-bottom:var(--a-6)}
.umschalter a{padding:10px 20px;color:var(--p-tinte-2);display:block}
.umschalter a[aria-current="true"]{background:var(--p-tinte);color:var(--p-grund);font-weight:600}
.umschalter-leer{font-size:var(--pt-14);color:var(--p-tinte-3)}

/* ═══ Belegfelder (aufklappbar) ═══ */
details.feld{border-top:1px solid var(--p-flaeche-2)}
details.feld:first-of-type{border-top:0}
details.feld summary{
  display:flex;align-items:center;gap:var(--a-3);list-style:none;cursor:pointer;
  padding:var(--a-3) var(--a-4);transition:background .12s;
}
details.feld summary::-webkit-details-marker{display:none}
details.feld summary:hover{background:var(--p-flaeche)}
details.feld summary .dreieck{
  width:8px;height:8px;border-right:1.5px solid var(--p-tinte-3);
  border-bottom:1.5px solid var(--p-tinte-3);transform:rotate(-45deg);
  transition:transform .12s;flex:none;
}
details.feld[open] summary .dreieck{transform:rotate(45deg)}
details.feld summary .titel{font-weight:600;font-size:var(--pt-16)}
details.feld summary .titel .m{font-family:var(--schrift-mono);color:var(--p-tinte-3);font-weight:500;margin-right:6px}
details.feld summary .konf{margin-left:auto;flex:none}
details.feld .inhalt{padding:0 var(--a-4) var(--a-4) 34px;color:var(--p-tinte-2);font-size:var(--pt-16);max-width:var(--p-mass-lese)}
.inhalt p+p, .inhalt p+ul, .inhalt ul+p, .inhalt .tab-umbruch+p, .inhalt p+.tab-umbruch{margin-top:var(--a-3)}
.inhalt h2,.inhalt h3,.inhalt h4{margin-top:var(--a-3);margin-bottom:var(--a-1);font-weight:650}
.inhalt ul,.inhalt ol{padding-left:18px;display:flex;flex-direction:column;gap:6px}
.inhalt blockquote{
  border-left:3px solid var(--p-linie);padding:var(--a-2) var(--a-3);
  background:var(--p-flaeche);border-radius:0 var(--radius) var(--radius) 0;
  font-size:var(--pt-16);margin-top:var(--a-3);
}

/* ═══ Diagramme ═══ */
.diagramme{display:flex;flex-direction:column;gap:var(--a-4)}
/* Textur (Punkt 4): gepunktetes Hintergrundraster statt Leerfläche. */
.diagramm{
  border:1px solid var(--p-flaeche-2);border-radius:var(--radius);padding:var(--a-3);
  background:
    radial-gradient(circle, var(--p-linie) 1px, transparent 1.4px) 0 0/16px 16px,
    var(--p-grund);
}
.diagramm h3{font-size:var(--pt-16);font-weight:650;margin-bottom:2px}
.diagramm .unter{font-size:var(--pt-14);color:var(--p-tinte-3);margin-bottom:var(--a-2)}
.diagramm svg{display:block;width:100%;height:auto}
.diagramm .fuss{font-size:var(--pt-14);color:var(--p-tinte-3);margin-top:6px}
.diagramm-hinweis{
  font-size:var(--pt-14);color:var(--p-tinte-3);text-align:center;
  padding:14px 16px;border:1px dashed var(--p-linie);border-radius:var(--radius);
}
.svg-achse{stroke:var(--p-linie);stroke-width:1}
.svg-text{font-family:var(--schrift);font-size:12px;fill:var(--p-tinte-3)}
.svg-text-mono{font-family:var(--schrift-mono);font-size:12px;fill:var(--p-tinte-2)}
/* Markenfarbe statt Schwarz/Grau, Verlaufsfläche unter der Linie. */
.svg-linie{fill:none;stroke:var(--marke);stroke-width:2.5}
.svg-flaeche{fill:var(--marke)}
/* E-49: Kennzahl-Zeitreihen als Kachel-Grid statt volle Bildschirmhöhe je
   Kennzahl untereinander — so viele Spalten wie Platz erlaubt, nicht fest
   erzwungen. */
.kennzahl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--a-4)}
/* Dezente Y-Gitterlinien im Hintergrund (wenige Ticks, keine Beschriftung). */
.svg-gitter{stroke:var(--p-linie);stroke-width:1;opacity:.5}
/* Nahtstelle zwischen aggregierten (ältesten) und einzelnen (jüngsten)
   Punkten in der Kennzahl-Zeitreihe — nur gezeichnet, wenn beide Typen
   vorkommen (schlafender Pfad, siehe kennzahl_zeitreihen()). */
.svg-trennlinie{stroke:var(--p-tinte-3);stroke-width:1;stroke-dasharray:3 3}
/* ═══ Seitenspalte ═══ */
.sk{border-radius:var(--radius-gross);background:var(--p-grund);box-shadow:var(--schatten);transition:box-shadow .15s}
.sk:hover{box-shadow:var(--schatten-hover)}
.sk>h2{font-size:var(--pt-13);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--p-tinte-3);padding:10px var(--a-4) 0}
.sk .innen{padding:var(--a-2) var(--a-4) var(--a-4)}
.sk .luecke-block{margin:0}
.sk ul{list-style:none;display:flex;flex-direction:column}
.sk li{padding:8px 0;border-top:1px solid var(--p-flaeche-2);font-size:var(--pt-14)}
.sk li:first-child{border-top:0}
.sk .datum{font-size:var(--pt-13);color:var(--p-tinte-3);font-variant-numeric:tabular-nums}
.sk .host{font-size:var(--pt-13);color:var(--p-tinte-3)}
.sk>h2 .chip{text-transform:none;letter-spacing:normal;vertical-align:middle;margin-left:4px}
/* Rohstoff-Quellentypen (Statistik-Amtlich, Marktbericht-Verband, Anhang
   ROHSTOFF-FRAMEWORK §4) sind deutlich länger als die kurzen Aktien-Codes,
   für die flex:none/min-width:64px ursprünglich gedacht war — ohne Erlaubnis
   zu schrumpfen/umzubrechen sprengte das den schmalen Seitenspalten-Rahmen
   (.sk), statt innerhalb der Karte zu umbrechen. */
.quelle-zeile{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.quelle-zeile .typ{font-family:var(--schrift-mono);font-size:var(--pt-14);color:var(--p-tinte-2);min-width:64px}
.quelle-zeile a{color:var(--p-tinte);font-family:var(--schrift-mono);font-weight:600}
.sk li > a{color:var(--p-tinte);font-weight:600}

/* ═══ Fassungen / IK / Fuß (Produkt) ═══ */
.fassungen .zeile{display:flex;gap:var(--a-3);align-items:center;font-size:var(--pt-16);flex-wrap:wrap;padding:6px 0}
.ik{font-size:var(--pt-14);color:var(--p-tinte-2);border:1px solid var(--p-linie);border-radius:var(--radius-gross);padding:var(--a-3) var(--a-4);background:var(--p-flaeche)}
.fuss{padding:var(--a-5);border-top:1px solid var(--p-linie)}
.fuss .marke{color:var(--p-tinte)}
.fuss .footer-nav a{color:var(--p-tinte-2)}
.fuss .footer-nav a:hover{color:var(--p-aktion);border-bottom-color:var(--p-aktion)}
.fuss .footer-trenner{background:var(--p-linie-stark)}
.fuss .kuendigen-link,.fuss .social-link{border-color:var(--p-linie-stark);color:var(--p-tinte-2)}
.fuss .kuendigen-link:hover,.fuss .social-link:hover{color:var(--p-aktion);border-color:var(--p-aktion);background:var(--marke-flaeche)}
.fuss .footer-fusszeile{border-color:var(--p-linie)}
.fuss .footer-hinweis,.fuss .footer-copyright{color:var(--p-tinte-3)}
.fuss .footer-copyright a{color:inherit}

/* ═══ Übersicht — Kennzahlen-Kacheln + Aktivitätsschiene (Entwurf) ═══ */
.kpis{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--p-linie);
  border:1px solid var(--p-linie);border-radius:10px;overflow:hidden;
  margin-top:var(--a-5);margin-bottom:var(--a-6);
}
@media (max-width:700px){.kpis{grid-template-columns:1fr}}
.kpi{background:var(--p-grund);padding:18px 20px}
.kpi .label{font-family:var(--schrift-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--p-tinte-3);margin-bottom:8px}
.kpi .wert{font-family:var(--schrift-mono);font-size:30px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi .fein{font-size:13px;color:var(--p-tinte-2);margin-top:3px}
.kpi.score{display:flex;align-items:center;gap:14px}
.kpi.score .wert{font-size:22px}
.mini-ring{width:44px;height:44px;flex:none}

.ue-merkhinweis{font-size:var(--pt-14);color:var(--p-tinte-2);padding:var(--a-3) 0}

.schiene{position:relative;padding-left:34px}
.schiene::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:1px;background:var(--p-linie-stark)}
.abschnitt-block{position:relative;margin-bottom:var(--a-6)}
.abschnitt-block:last-child{margin-bottom:0}
.abschnitt-titel{display:flex;align-items:baseline;gap:8px;margin-bottom:var(--a-3)}
.abschnitt-titel h2{font-size:15px;font-weight:700;margin:0}
.abschnitt-titel .anzahl{font-family:var(--schrift-mono);font-size:12px;color:var(--p-tinte-3)}
.abschnitt-block .knoten{position:absolute;left:-38px;top:0;width:27px;height:27px}
.abschnitt-block .knoten .ic{width:15px;height:15px}

.schiene .zeile{
  display:flex;align-items:center;gap:var(--a-3);padding:11px var(--a-3);
  border:1px solid var(--p-linie);border-radius:9px;background:var(--p-grund);
}
.schiene a.zeile{color:inherit}
.schiene .zeile+.zeile{margin-top:6px}
.schiene .zeile .tk{font-family:var(--schrift-mono);font-weight:700;font-size:13.5px;min-width:40px}
.schiene .zeile .text{flex:1;font-size:15px;color:var(--p-tinte)}
.schiene .zeile .text small{display:block;color:var(--p-tinte-2);font-size:12.5px;margin-top:1px}
.schiene .zeile .abstand{font-family:var(--schrift-mono);font-size:12.5px;color:var(--p-tinte-2);white-space:nowrap}
.schiene .zeile .chevron{width:16px;height:16px;flex:none;stroke:var(--p-tinte-3);fill:none;stroke-width:2}
.schiene a.zeile:hover{background:var(--p-flaeche);text-decoration:none}
.ue-leer{color:var(--p-tinte-3);font-size:var(--pt-15);padding:var(--a-4);border:1px dashed var(--p-linie);border-radius:var(--radius-gross)}

.abschnitt-block.warnung .zeile{
  border-color:color-mix(in oklch,var(--kritisch) 32%,transparent);
  background:color-mix(in oklch,var(--kritisch) 6%,var(--p-grund));
}

/* ═══════════════════════════════════════════════════════════════════════
   Register LANDESEITE — Apple / ethereum.org
   ═══════════════════════════════════════════════════════════════════════ */
.land-body{
  font-family:var(--schrift);color:var(--l-tinte);background:var(--l-grund);
  line-height:1.55;overflow-x:hidden;
}
.land-body a{color:inherit;text-decoration:none}

.l-leiste{max-width:var(--l-container);margin:0 auto;width:100%;display:flex;align-items:center;gap:8px;padding:18px 20px}
.l-leiste .marke{display:flex;align-items:baseline;gap:9px;font-weight:650;font-size:16px;letter-spacing:-.01em;color:var(--l-tinte)}
.l-leiste .marke .marke-abzeichen{width:28px;height:28px;align-self:center}
.l-leiste .marke .marke-abzeichen svg{width:16px}
.l-leiste nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.l-leiste nav form{margin:0}
.l-leiste nav a{color:var(--l-tinte-2);font-size:14px;padding:8px 12px;border-radius:8px;transition:background .15s,color .15s}
.l-leiste nav a:hover{background:var(--l-flaeche);color:var(--l-tinte)}
.l-leiste nav .anmelden{font:inherit;border:none;cursor:pointer;font-size:14px;padding:8px 12px;border-radius:8px;color:#FFF;background:var(--l-tinte);margin-left:6px;transition:transform .15s,background .15s}
.l-leiste nav .anmelden:hover{background:#000;color:#FFF}
.l-leiste nav .anmelden:active{transform:translateY(1px)}
@media (max-width:559px){.l-leiste{padding:16px 20px}.l-leiste nav a:not(.anmelden){display:none}}
@media (min-width:640px){.l-leiste{padding:22px 28px}.l-leiste .marke{font-size:17px}.l-leiste nav a{font-size:15px;padding:8px 14px}}

.bildschirm{padding:var(--l-abschnitt) 20px}
.bildschirm-1{padding-top:clamp(28px,5vh,64px)}
.bs-innen{max-width:var(--l-container);margin:0 auto;width:100%}
.kicker{
  font-family:var(--schrift-mono);font-size:12.5px;letter-spacing:.09em;
  color:var(--l-tinte-2);text-transform:uppercase;margin-bottom:20px;
  display:flex;align-items:center;gap:11px;
}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.kicker::after{content:"";flex:1;height:1px;background:currentColor;opacity:.22;min-width:32px}
.bs-dunkel .kicker{color:var(--l-d-tinte-2)}
@media (min-width:640px){.bildschirm{padding:var(--l-abschnitt) 28px}.kicker{font-size:13px;margin-bottom:24px}}

.bs-tint-blau{background:linear-gradient(180deg,var(--illu-blau-flaeche) 0%,var(--l-grund) 78%)}
.bs-tint-warm{background:linear-gradient(180deg,var(--illu-warm-flaeche) 0%,var(--l-grund) 78%)}

.l-h1{font-family:var(--schrift-gross);font-size:var(--lt-display);line-height:1.06;letter-spacing:-.022em;font-weight:650}
.lede{font-size:var(--lt-lede);line-height:1.55;color:var(--l-tinte-2);max-width:var(--l-mass);margin-top:24px}
.lede b{color:var(--l-tinte);font-weight:600}
.handlung{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.knopf{font-size:16px;font-weight:600;padding:13px 26px;border-radius:11px;transition:transform .15s,box-shadow .15s,background .15s;display:inline-block}
.knopf:active{transform:translateY(1px);box-shadow:none}
.knopf-voll{background:var(--marke);color:#FFF;box-shadow:0 1px 2px rgb(16 18 22 / .10)}
.knopf-voll:hover{background:var(--marke-druck);box-shadow:0 4px 14px rgb(124 58 237 / .30)}
.knopf-kontur{border:1.5px solid #D6D9DE;color:var(--l-tinte)}
.knopf-kontur:hover{border-color:var(--l-tinte);background:#FFF}
@media (max-width:559px){.handlung .knopf{width:100%;text-align:center}}

.l-h2{font-family:var(--schrift-gross);font-size:var(--lt-h2);line-height:1.08;letter-spacing:-.018em;max-width:22ch}

/* Hero zentriert (Belegwerk-Referenz index.tsx) */
.bildschirm-zentriert .bs-innen{display:flex;flex-direction:column;align-items:center;text-align:center}
.bildschirm-zentriert .kicker{justify-content:center}
.bildschirm-zentriert .kicker::after{display:none}
.bildschirm-zentriert .lede{margin-left:auto;margin-right:auto}
.bildschirm-zentriert .handlung{justify-content:center}
.knopf-pille{border-radius:999px}
.hero-illu{margin-top:56px;width:100%;max-width:880px;height:auto}

.bs-dunkel{background:var(--l-d-grund);color:var(--l-d-tinte)}
.bs-dunkel .bs-innen{max-width:var(--l-mass);text-align:center;display:flex;flex-direction:column;align-items:center}
.bs-dunkel .lede{color:var(--l-d-tinte-2)}
.score-schild{
  margin-top:48px;width:fit-content;border-radius:var(--radius-gross);
  border:1px solid rgb(255 255 255 / .12);padding:32px 48px;
}
.score-schild .wert{font-family:var(--schrift-mono);font-size:64px;font-weight:650;letter-spacing:-.02em;color:rgb(255 255 255 / .88)}
.score-schild .label{margin-top:8px;font-family:var(--schrift-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgb(255 255 255 / .55)}

.gruende-raster{display:grid;grid-template-columns:1fr;gap:44px;margin-top:0}
@media (min-width:640px){.gruende-raster{grid-template-columns:repeat(3,1fr);gap:48px}}
.grund-icon{width:40px;height:40px;border-radius:var(--radius-lg);background:var(--marke-flaeche);color:var(--marke);display:grid;place-items:center;flex:none}
.grund-icon .ic{width:20px;height:20px}
.grund h3{margin-top:20px;font-size:18px;font-weight:650;letter-spacing:-.01em}
.grund p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--l-tinte-2)}

.abschluss-cta{max-width:var(--l-mass);margin:0 auto;text-align:center}
.abschluss-cta .grund-icon{margin:0 auto;background:var(--k-krypto-flaeche);color:var(--k-krypto)}
.abschluss-cta h2{margin-top:24px}
.abschluss-cta .lede{margin-left:auto;margin-right:auto;font-size:var(--pt-16)}

.kennzahlen{display:flex;flex-direction:column;gap:36px;margin-top:40px;position:relative}
.kz-punkt{display:block;width:9px;height:9px;border-radius:50%;background:var(--l-tinte);margin-bottom:16px}
.kennzahl--blau .kz-punkt{background:var(--marke)}
.kennzahl--warm .kz-punkt{background:var(--illu-warm)}
.kennzahl .wert{font-family:var(--schrift-mono);font-weight:700;font-size:var(--lt-stat);line-height:1;letter-spacing:-.02em;color:var(--l-tinte)}
.kennzahl--blau .wert{color:var(--marke)}
.kennzahl--warm .wert{color:var(--illu-warm)}
.kennzahl .label{font-size:13.5px;color:var(--l-tinte-2);margin-top:10px;max-width:30ch}
.rueckschau-hinweis{margin-top:44px;padding-top:28px;border-top:1px solid var(--l-linie);font-size:14.5px;color:var(--l-tinte-2);max-width:var(--l-mass)}
.rueckschau-hinweis a{color:var(--l-tinte);text-decoration:underline;text-underline-offset:3px;font-weight:600}
@media (min-width:860px){
  .kennzahlen{flex-direction:row;gap:0;justify-content:space-between}
  .kennzahlen::before{content:"";position:absolute;top:4px;left:0;right:0;height:1px;background:var(--l-linie)}
  .kennzahl{flex:1;padding-right:24px}
}
@media (min-width:1100px){.kennzahl .wert{font-size:clamp(64px,6.6vw,104px)}}

.beitrag-karte{margin-top:40px;padding-top:28px;border-top:1px solid var(--l-linie);display:grid;grid-template-columns:1fr;gap:18px}
.beitrag-meta{position:relative;padding-left:20px;display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.beitrag-meta::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;background:var(--l-tinte)}
.beitrag-meta .sorte{font-family:var(--schrift-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--l-tinte-3)}
.beitrag-meta .beitrag-datum,.beitrag-meta .beitrag-autor{font-family:var(--schrift-mono);font-size:12px;color:var(--l-tinte-3)}
.beitrag-karte h3{font-family:var(--schrift-gross);font-size:clamp(26px,4.6vw,42px);font-weight:650;letter-spacing:-.018em;line-height:1.12;max-width:22ch}
.beitrag-karte h3 a{color:var(--p-tinte)}
.beitrag-karte h3 a:hover{opacity:.68;text-decoration:underline;text-underline-offset:4px}
.beitrag-karte .vorspann{font-size:15.5px;color:var(--l-tinte-2);line-height:1.6;margin-top:16px;max-width:60ch}
.beitrag-karte .bezug{font-size:12.5px;color:var(--l-tinte-3);margin-top:14px}
.beitrag-karte .bezug b{color:var(--l-tinte);font-weight:600}
.beitrag-mehr{margin-top:32px;font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;color:var(--l-tinte)}
.beitrag-mehr:hover{text-decoration:underline;text-underline-offset:3px}
@media (min-width:760px){
  .beitrag-karte{grid-template-columns:160px 1fr;gap:0 44px;padding-top:36px}
  .beitrag-meta{flex-direction:column;align-items:flex-start;gap:8px;padding-left:18px;border-left:2px solid var(--l-linie)}
}

/* ═══ Blog-Liste: Zähler, Sorte-Filter, gestaffeltes Einblenden ═══
   --i kommt aus data-i, per blog.js auf --i gesetzt (kein inline style=,
   siehe tests/test_kein_safe.py). */
.beitrag-liste-kopf{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--a-3);margin-top:var(--a-5)}
.beitrag-anzahl{font-family:var(--schrift-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--l-tinte-3);display:flex;align-items:center;gap:8px}
.beitrag-anzahl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--l-tinte-3)}
.sorte-filter{display:flex;flex-wrap:wrap;gap:6px}
.sorte-filter__btn{
  font-family:var(--schrift-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--p-tinte-2);background:none;border:1px solid var(--p-linie-stark);border-radius:var(--radius-sm);
  padding:7px 13px;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s;
}
.sorte-filter__btn:hover{color:var(--p-tinte);border-color:var(--p-tinte-3);background:var(--p-flaeche)}
.sorte-filter__btn.is-active{color:var(--p-tinte);background:var(--p-flaeche-2);border-color:var(--p-tinte-3);font-weight:650}

.beitrag-karte{
  position:relative;opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
.beitrag-karte.ist-sichtbar{opacity:1;transform:none}
.beitrag-pfeil{position:absolute;top:2px;right:0;opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .25s ease;color:var(--l-tinte-3)}
.beitrag-karte:hover .beitrag-pfeil{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .beitrag-karte,.beitrag-pfeil{transition:none !important;opacity:1 !important;transform:none !important}
}

/* Beitragskörper (Blog-Einzelseite) */
.beitrag-koerper{max-width:var(--l-mass);margin-top:var(--a-6);font-size:var(--lt-fliess,18px);line-height:1.65}
.beitrag-koerper h2{font-family:var(--schrift-gross);font-size:28px;margin-top:var(--a-7);margin-bottom:var(--a-3);letter-spacing:-.01em}
.beitrag-koerper h3{font-size:22px;margin-top:var(--a-6);margin-bottom:var(--a-2);font-weight:650}
.beitrag-koerper p{margin-top:var(--a-4)}
.beitrag-koerper p:first-child{margin-top:0}
.beitrag-koerper ul,.beitrag-koerper ol{margin-top:var(--a-4);padding-left:22px;display:flex;flex-direction:column;gap:8px}
.beitrag-koerper blockquote{border-left:3px solid var(--l-linie);padding-left:var(--a-4);margin-top:var(--a-4);color:var(--l-tinte-2)}
.beitrag-koerper table{margin-top:var(--a-4);border-collapse:collapse;width:100%;font-size:15px}
.beitrag-koerper th,.beitrag-koerper td{border-bottom:1px solid var(--l-linie);padding:8px 10px;text-align:left}
.beitrag-ik{margin-top:var(--a-7);padding-top:var(--a-4);border-top:1px solid var(--l-linie);font-size:14px;color:var(--l-tinte-2);max-width:var(--l-mass)}
.beitrag-ik a{color:var(--p-tinte);font-weight:600}

/* Methodik-Tabelle: Regel/Beleg */
.methodik-regel{
  display:grid;grid-template-columns:1fr;gap:var(--a-2);
  padding:var(--a-5) 0;border-top:1px solid var(--l-linie);
}
.methodik-regel:first-of-type{border-top:0}
.methodik-regel .regel{font-size:17px;font-weight:600;max-width:52ch}
.methodik-regel .beleg{font-family:var(--schrift-mono);font-size:15px;color:var(--l-tinte-2)}
.methodik-regel .beleg b{color:var(--l-tinte);font-size:20px}
@media (min-width:760px){.methodik-regel{grid-template-columns:1.3fr 1fr;align-items:baseline;gap:var(--a-5)}}

/* Rückschau-Seite (nur intern, hinter dem Login — Anhang H) — Split-View Aktien/Krypto,
   heller Stil des Produkt-Registers (--p-*-Tokens, keine --l-*-Landing-
   Werte hier, damit es zum Sidebar-Rahmen passt). */
/* Echtes Grid statt zweier unabhängiger Flex-Spalten: .rs-spalte/.rs-karten
   lösen sich per display:contents auf, Kopf + je 3 Karten werden direkte
   Grid-Kinder von .rueckschau-split und über grid-column/-row Zeile für
   Zeile den beiden Seiten zugeordnet — dadurch matcht Grids Default
   align-items:stretch gleiche Zeilen (v.a. Trefferquote/Beleglage) auf
   exakt dieselbe Höhe, nicht nur bündig unten. */
.rueckschau-split{
  display:grid;grid-template-columns:1fr 1fr;column-gap:var(--a-6);row-gap:var(--a-6);
  margin-top:var(--a-6);max-width:var(--p-mass-weit);
}
@media (max-width:820px){.rueckschau-split{grid-template-columns:1fr}}
.rs-spalte,.rs-karten{display:contents}
.rs-spalte-aktie{--rs-col:1}
.rs-spalte-krypto{--rs-col:2}
.rs-spalte-etf{--rs-col:1}
.rs-spalte-rohstoff{--rs-col:2}
.rueckschau-block-titel{
  font-family:var(--schrift-gross);font-size:22px;font-weight:700;letter-spacing:-.01em;
  margin-top:52px;padding-top:28px;border-top:1px solid var(--l-linie);
}
.rueckschau-block-titel + .lede{margin-top:10px}
.rs-spalte-kopf{grid-column:var(--rs-col);grid-row:1}
.rs-karten>.rs-karte:nth-child(1){grid-column:var(--rs-col);grid-row:2}
.rs-karten>.rs-karte:nth-child(2){grid-column:var(--rs-col);grid-row:3}
.rs-karten>.rs-karte:nth-child(3){grid-column:var(--rs-col);grid-row:4}
.rs-spalte-kopf{display:flex;align-items:center;gap:12px;margin-bottom:0}
.rs-spalte-kopf h2{font-family:var(--schrift-gross);font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1}
.rs-spalte-kopf .nav-chip{width:36px;height:36px}
.rs-spalte-kopf .nav-chip .ic{width:20px;height:20px}
.rs-karte{
  background:var(--p-grund);border:1px solid var(--p-linie);border-radius:var(--radius-gross);
  padding:var(--a-5);box-shadow:var(--schatten);
}
.rs-karte .wert{font-family:var(--schrift-mono);font-weight:700;font-size:40px;letter-spacing:-.01em;line-height:1;color:var(--p-tinte)}
.rs-karte .label{font-size:var(--pt-14);color:var(--p-tinte-2);margin-top:8px;max-width:34ch}
.rs-karte-ring,.rs-karte-baender{display:flex;flex-direction:column;gap:var(--a-3)}
.rs-karte-ring{flex-direction:row;align-items:center}
.rs-ring{position:relative;width:76px;height:76px;flex:none}
.rs-ring svg{width:100%;height:100%}
.rs-ring-zahl{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--schrift-mono);font-size:16px;font-weight:700;color:var(--p-tinte);
}
.rs-baender{display:flex;align-items:flex-end;gap:9px;height:76px}
.rs-band{width:24px;height:100%;border-radius:3px 3px 0 0;background:var(--p-flaeche-2);position:relative;overflow:hidden}
.rs-band i{
  position:absolute;bottom:0;left:0;width:100%;border-radius:3px 3px 0 0;
  background:var(--p-linie-stark);display:block;
}
.rs-band[data-stufe="1"] i{height:20%}
.rs-band[data-stufe="2"] i{height:40%}
.rs-band[data-stufe="3"] i{height:60%}
.rs-band[data-stufe="4"] i{height:80%}
.rs-band[data-stufe="5"] i{height:100%}
.rs-band.voll i{background:var(--p-tinte)}

.l-fuss{border-top:1px solid var(--l-linie);padding:28px 20px}
.zugang-rahmen .l-fuss{background:var(--l-grund)}
.l-fuss .footer-innen{max-width:var(--l-container);margin:0 auto}
.l-fuss .marke{color:var(--l-tinte)}
.l-fuss .footer-nav a{color:var(--l-tinte-2)}
.l-fuss .footer-nav a:hover{color:var(--l-akzent);border-bottom-color:var(--l-akzent)}
.l-fuss .footer-trenner{background:var(--l-linie)}
.l-fuss .kuendigen-link,.l-fuss .social-link{border-color:var(--l-linie);color:var(--l-tinte-2)}
.l-fuss .kuendigen-link:hover,.l-fuss .social-link:hover{color:var(--l-akzent);border-color:var(--l-akzent)}
.l-fuss .footer-fusszeile{border-color:var(--l-linie)}
.l-fuss .footer-hinweis,.l-fuss .footer-copyright{color:var(--l-tinte-3)}
.l-fuss .footer-copyright a{color:inherit}
@media (min-width:640px){.l-fuss{padding:32px 28px}}

/* ═══ Footer-Baustein (bausteine/fuss.html) — Layout geteilt, Farben je
   Register oben bei .fuss/.l-fuss (Muster wie .marke). ═══ */
.footer-hauptzeile{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--a-3) var(--a-4)}
.footer-hauptzeile .marke{display:flex;align-items:center;gap:8px}
.footer-hauptzeile .marke-abzeichen{width:20px;height:19px}
.footer-hauptzeile .marke-wort{font-size:12.5px}
.footer-hauptzeile .marke-tag{font-size:9px}
.footer-aktionen{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.footer-nav{display:flex;align-items:center;flex-wrap:wrap}
.footer-nav a{
  text-decoration:none;font-size:13.5px;padding:6px 10px;border-bottom:1px solid transparent;
  transition:color 120ms ease,border-color 120ms ease;
}
.footer-trenner{width:1px;height:16px;margin:0 6px}
.kuendigen-link{
  display:inline-flex;align-items:center;gap:6px;font-size:13.5px;text-decoration:none;
  padding:6px 12px;border:1px solid;border-radius:var(--radius-sm);
  transition:color 120ms ease,border-color 120ms ease,background 120ms ease;
}
.kuendigen-link svg{flex-shrink:0}
.social-link{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:8px;
  border:1px solid;border-radius:var(--radius-sm);
  transition:color 120ms ease,border-color 120ms ease,background 120ms ease;
}
.social-link svg{width:16px;height:16px;fill:currentColor}
.footer-nav a:focus-visible,.kuendigen-link:focus-visible,.social-link:focus-visible{outline:var(--fokus)}
.footer-fusszeile{margin-top:var(--a-4);padding-top:var(--a-4);border-top:1px solid}
.footer-hinweis{margin:0;font-size:var(--pt-13);line-height:1.6}
.footer-copyright{margin:10px 0 0;font-family:var(--schrift-mono);font-size:11px;letter-spacing:.01em}
.footer-copyright a{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.footer-nav a,.kuendigen-link,.social-link{transition:none}}
.impr-linkedin{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:20px;height:20px;margin-left:6px;color:inherit;transition:color 120ms ease}
.impr-linkedin svg{width:16px;height:16px;fill:currentColor}
.impr-linkedin:hover,.impr-linkedin:focus-visible{color:var(--l-akzent,var(--p-aktion))}
@media (max-width:640px){.footer-hauptzeile{align-items:flex-start}.footer-aktionen{width:100%;justify-content:space-between}}

/* ═══════════════════════════════════════════════════════════════════════
   Landeseite „Argos" — Nav/Ticker/Hero, dunkel und Mono-lastig.
   Hintergrund-Verlauf mit background-attachment:fixed auf jedem der vier
   Blöcke: dadurch wird der Verlauf viewport-relativ berechnet und wirkt
   über Nav/Ticker/Hero/Mythos hinweg wie ein einziger body-Verlauf, ohne
   den globalen `body`-Selektor (und damit alle anderen Seiten) anzufassen.
   ═══════════════════════════════════════════════════════════════════════ */
.arg-nav{
  background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 40%);background-attachment:fixed;
  color:var(--fg);border-bottom:1px solid var(--l-d-linie);
}
.arg-nav-innen{
  max-width:var(--l-container);margin:0 auto;width:100%;padding:22px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.arg-brand{display:flex;align-items:baseline;gap:8px}
.arg-brand-wort{font-weight:800;font-size:24px;letter-spacing:.06em;color:var(--fg)}
.arg-brand-tag{
  font-family:var(--schrift-mono);font-size:16px;letter-spacing:.14em;color:var(--fg-dim);
  border:1px solid var(--l-d-linie);border-radius:3px;padding:3px 9px;
}
.arg-nav-links{display:flex;align-items:center;gap:28px}
.arg-nav-links a{
  font-family:var(--schrift-mono);font-size:17px;letter-spacing:.1em;color:var(--fg-dim);
}
.arg-nav-links a:hover{color:var(--fg)}
.arg-nav-links a[aria-current="page"]{color:var(--fg)}
.arg-nav-links a.arg-nav-cta{
  color:var(--fg);border:1px solid var(--l-d-linie);border-radius:4px;
  padding:11px 20px;transition:border-color .15s;
}
.arg-nav-links a.arg-nav-cta:hover{border-color:var(--fg-dim)}
@media (max-width:559px){.arg-nav-links a:not(.arg-nav-cta){display:none}}

.arg-ticker{
  background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 40%);background-attachment:fixed;
  color:var(--fg-dim);border-bottom:1px solid var(--l-d-linie);
  padding:13px 0;text-align:center;font-family:var(--schrift-mono);font-size:16px;letter-spacing:.28em;
}

.arg-hero{
  position:relative;background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 40%);
  background-attachment:fixed;color:var(--fg);min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;padding:60px 20px 40px;
}
.arg-eyebrow{
  font-family:var(--schrift-mono);font-size:17px;letter-spacing:.22em;color:var(--fg-dim);
  margin-bottom:28px;opacity:0;transform:translateY(10px);
}
.arg-mark-wrap{width:clamp(420px,60vw,760px);aspect-ratio:599/557;margin:-120px auto 8px;transform-origin:center}
.arg-mark-wrap svg{width:100%;height:auto;display:block}
.arg-mark-wrap model-viewer{width:100%;height:100%;display:block}
.arg-mark-3d{--poster-color:transparent;background:transparent}
.arg-headline{margin:6px 0 0;display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap}
.arg-headline .wort{
  font-family:var(--schrift-gross);font-weight:800;font-size:clamp(56px,9.36vw,94px);
  letter-spacing:-.03em;line-height:1;opacity:0;transform:translateY(14px);color:var(--fg);
}
.arg-tag{
  font-family:var(--schrift-mono);font-size:18px;letter-spacing:.16em;color:var(--fg-dim);
  border:1px solid var(--l-d-linie);border-radius:4px;padding:6px 11px;opacity:0;transform:translateY(-6px);
}
.arg-tagline{
  max-width:560px;margin:22px auto 0;color:var(--fg-dim);font-size:25px;line-height:1.6;
  opacity:0;transform:translateY(12px);
}
.arg-cta-zeile{margin-top:34px;opacity:0;transform:translateY(12px)}
a.arg-cta-primaer{
  font-family:var(--schrift-mono);font-size:15px;letter-spacing:.16em;color:#000;
  background:#fff;border-radius:4px;padding:18px 31px;display:inline-flex;
  align-items:center;gap:8px;
}
a.arg-cta-primaer:hover{opacity:.88}
.arg-mythos{
  background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 40%);background-attachment:fixed;
  color:var(--fg-dim);border-bottom:1px solid var(--l-d-linie);
  padding:20px 0 34px;text-align:center;font-size:var(--pt-16);font-family:var(--schrift-mono);letter-spacing:.04em;
}

a.arg-cta-sekundaer{
  font-family:var(--schrift-mono);font-size:14px;letter-spacing:.1em;color:var(--fg-dim);
  margin-left:var(--a-5);padding:18px 4px;display:inline-flex;align-items:center;
  border-bottom:1px solid transparent;
}
a.arg-cta-sekundaer:hover{color:var(--fg);border-bottom-color:var(--fg-dim)}

.arg-faq{background:var(--bg);color:var(--fg);padding:var(--a-8) 0;border-bottom:1px solid var(--dunkel-linie)}
/* Gleicher linker Einzug wie .satz (Kolophon/Kapitel-Text) statt der
   generischen 1200px-.bs-innen-Zentrierung — sonst wirkt "Häufige Fragen"
   gegenüber "Zugang auf Anfrage" direkt darüber nach links verrutscht. */
.arg-faq .bs-innen{max-width:68rem;margin-inline-start:max(0px, calc((100% - 68rem) / 2));margin-inline-end:auto}
.arg-faq h2{
  font-family:var(--schrift-gross);font-size:var(--lt-h2);letter-spacing:-.01em;
  margin-bottom:var(--a-6);
}
.arg-faq-liste{max-width:var(--l-mass,720px);display:flex;flex-direction:column;gap:0}
.arg-faq-liste details{border-bottom:1px solid var(--dunkel-linie);padding:var(--a-4) 0}
.arg-faq-liste summary{
  font-family:var(--schrift-gross);font-size:19px;font-weight:600;cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--a-3);
}
.arg-faq-liste summary::-webkit-details-marker{display:none}
.arg-faq-liste summary::after{content:"+";color:var(--fg-dim);font-size:22px;flex:none}
.arg-faq-liste details[open] summary::after{content:"–"}
.arg-faq-liste p{color:var(--fg-dim);margin-top:var(--a-3);line-height:1.6;max-width:64ch}
.arg-faq-liste a{color:var(--fg);text-decoration-color:var(--fg-dim)}

@media (prefers-reduced-motion:no-preference){
  .piece{animation-fill-mode:both;filter:brightness(1)}
  .piece.p1{animation:argInkSettle 1.05s ease-out .12s both}
  .piece.p2{animation:argInkSettle 1.05s ease-out 0s both}
  .piece.p3{animation:argInkSettle 1.05s ease-out .24s both}
  .piece.p4{animation:argInkSettle 1.05s ease-out .36s both}
  .drawrect-p1{animation:argDrawUp1 1.05s cubic-bezier(.65,0,.35,1) .12s both}
  .drawrect-p2{animation:argDrawUp2 1.05s cubic-bezier(.65,0,.35,1) 0s both}
  .drawrect-p3{animation:argDrawDown3 1.05s cubic-bezier(.65,0,.35,1) .24s both}
  .drawrect-p4{animation:argDrawRight4 1.05s cubic-bezier(.65,0,.35,1) .36s both}
  .arg-mark-wrap{
    animation:argAssembleSettle 2s ease-out 1.41s both,
              argIdleBreathe 9s ease-in-out 3.41s infinite alternate;
  }
  .arg-eyebrow{animation:argRevealUp .6s ease-out 2.35s both}
  .arg-headline .wort{animation:argRevealUp .7s ease-out 2.6s both}
  .arg-tag{animation:argRevealUp .5s ease-out 2.95s both}
  .arg-tagline{animation:argRevealUp .6s ease-out 3.15s both}
  .arg-cta-zeile{animation:argRevealUp .5s ease-out 3.45s both}

  /* Strich für Strich enthüllt, in der Reihenfolge einer zeichnenden Hand:
     linker Balken und Hauptdiagonale wachsen aufwärts, der rechte Schenkel
     kommt von der Spitze abwärts, die Basis läuft links nach rechts —
     Vorbild Argos-Hero-Linien-Intro (React-Bundle), hier ohne dessen
     Motion-Engine als reine CSS-Geometrie-Animation auf das clipPath-Rechteck
     nachgebaut (Bounding-Box je Strich s. defs oben). */
  @keyframes argDrawUp1{
    0%{y:482px;height:0px}
    100%{y:40px;height:442px}
  }
  @keyframes argDrawUp2{
    0%{y:516px;height:0px}
    100%{y:53px;height:463px}
  }
  @keyframes argDrawDown3{
    0%{height:0px}
    100%{height:314px}
  }
  @keyframes argDrawRight4{
    0%{width:0px}
    100%{width:218px}
  }
  /* Die frisch gezeichnete Linie startet hell und dunkelt in den
     eigentlichen Signet-Ton ab — "die Zeichenlinien setzen sich in die
     fertige Marke", nicht nur ein Wisch. */
  @keyframes argInkSettle{
    0%{filter:brightness(2.4)}
    60%{filter:brightness(2.4)}
    100%{filter:brightness(1)}
  }
  @keyframes argAssembleSettle{
    0%{transform:scale(1);opacity:1;filter:brightness(1)}
    18%{transform:scale(1.035);filter:brightness(1.25)}
    36%{transform:scale(1);filter:brightness(1)}
    100%{transform:scale(1.08);opacity:.14;filter:brightness(1)}
  }
  @keyframes argIdleBreathe{
    0%{transform:scale(1.08);opacity:.14}
    100%{transform:scale(1.12);opacity:.11}
  }
  @keyframes argRevealUp{
    0%{opacity:0;transform:translateY(14px)}
    100%{opacity:1;transform:translateY(0)}
  }
}
@media (prefers-reduced-motion:reduce){
  .piece{opacity:1}
  .drawrect-p1{y:40px;height:442px}
  .drawrect-p2{y:53px;height:463px}
  .drawrect-p3{height:314px}
  .drawrect-p4{width:218px}
  .arg-mark-wrap{opacity:.14;transform:scale(1.08)}
  .arg-eyebrow,.arg-headline .wort,.arg-tag,.arg-tagline,.arg-cta-zeile{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   Reveal-Einblendung — generisches Fade/Rise, per JS nach Laden ausgelöst
   (kein IntersectionObserver: die Methodik-Seite ist kurz, alles ist beim
   Laden schon im Sichtfeld). .r1…r7 stufen die Verzögerung.
   ═══════════════════════════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease-out,transform .6s ease-out}
.reveal.sichtbar{opacity:1;transform:translateY(0)}
.r1{transition-delay:0s} .r2{transition-delay:.09s} .r3{transition-delay:.18s}
.r4{transition-delay:.27s} .r5{transition-delay:.36s} .r6{transition-delay:.45s}
.r7{transition-delay:.54s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   Methodik (öffentlich) — dunkle Fortsetzung der Landeseite: Ablauf in
   vier Schritten, dann die Gabel (Score-Ring vs. Band-Leiter), die zeigt,
   warum beide Maßstäbe nie in derselben Zahl landen.
   ═══════════════════════════════════════════════════════════════════════ */
.met-kopf,.met-ablauf,.met-grenze{
  background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 40%);background-attachment:fixed;
  color:var(--fg);
}
.met-kopf{border-bottom:1px solid var(--dunkel-linie-stark);padding:64px 20px 56px}
.met-innen{max-width:var(--l-container);margin:0 auto}
.met-eyebrow{
  font-family:var(--schrift-mono);font-size:13px;letter-spacing:.22em;color:var(--fg-dim);
  margin-bottom:20px;
}
.met-titel{font-family:var(--schrift-gross);font-weight:800;font-size:clamp(34px,6vw,58px);letter-spacing:-.02em;line-height:1.08}
.met-lead{margin-top:18px;max-width:640px;color:var(--fg-dim);font-size:18px;line-height:1.6}

.met-ablauf{border-bottom:1px solid var(--dunkel-linie-stark);padding:56px 20px 64px}
.met-ablauf-innen{display:grid;gap:56px}
.met-stamm{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.met-schritt{
  border-top:1px solid var(--dunkel-linie-stark);padding:20px 20px 0 0;
  font-family:var(--schrift-mono);
}
.met-schritt+.met-schritt{border-left:1px solid var(--dunkel-linie);padding-left:20px}
.met-schritt-nr{display:block;font-size:11px;letter-spacing:.16em;color:var(--fg-schwach);margin-bottom:10px}
.met-schritt b{display:block;font-family:var(--schrift-gross);font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.met-schritt p{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--fg-dim)}
@media (max-width:760px){
  .met-stamm{grid-template-columns:1fr;gap:24px}
  .met-schritt+.met-schritt{border-left:0;padding-left:0}
}

.met-gabel{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:start}
@media (max-width:980px){.met-gabel{grid-template-columns:1fr;gap:40px}}
.met-ast-titel{font-family:var(--schrift-gross);font-size:22px;font-weight:700;letter-spacing:-.01em}
.met-ast-satz{margin-top:8px;font-size:14px;color:var(--fg-dim);max-width:34ch}
.met-ast-begruendung{margin-top:16px;font-size:13px;line-height:1.55;color:var(--fg-dim);max-width:42ch}

.met-ring{position:relative;width:148px;height:148px;margin-top:28px}
.met-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.met-ring-spur{fill:none;stroke:var(--dunkel-linie-stark);stroke-width:10}
.met-ring-fortschritt{
  fill:none;stroke:var(--fg);stroke-width:10;stroke-linecap:round;
  stroke-dasharray:433.5;stroke-dashoffset:433.5;
  transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1);
}
.met-ring-zahl{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--schrift-mono);font-size:30px;font-weight:650;letter-spacing:-.02em;color:var(--fg);
  transform:rotate(0deg);
}
/* Ohne Login steht hier die Skala „0–100" statt eines Messwerts (OF-1) —
   fünf Zeichen statt zwei, deshalb kleiner gesetzt, damit sie im Ring
   bleiben. */
.met-ring-zahl.ist-skala{font-size:19px;letter-spacing:0;color:var(--fg-dim,var(--fg))}

.met-baender{display:flex;align-items:flex-end;gap:8px;height:112px;margin-top:28px}
.met-band{width:30px;height:100%;border-radius:3px 3px 0 0;background:var(--dunkel-linie-stark);position:relative;overflow:hidden}
.met-band i{
  position:absolute;bottom:0;left:0;width:100%;height:100%;border-radius:3px 3px 0 0;
  background:var(--fg);display:block;transform:scaleY(0);transform-origin:bottom;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.met-band[data-stufe="1"] i{height:20%}
.met-band[data-stufe="2"] i{height:40%}
.met-band[data-stufe="3"] i{height:60%}
.met-band[data-stufe="4"] i{height:80%}
.met-band[data-stufe="5"] i{height:100%}
.met-baender-beschriftung{display:flex;gap:8px;margin-top:8px}
.met-baender-beschriftung span{width:30px;text-align:center;font-family:var(--schrift-mono);font-size:10px;color:var(--fg-schwach)}

/* Dritter Ast (ETF/Rohstoff) hat bewusst keinen Ring/keine Bänder — die
   gestrichelte, leere Kreisform ist selbst die Aussage: hier steht absichtlich
   keine Zahl, kein Fortschrittsbalken, nichts zu füllen. */
.met-keinscore{
  width:112px;height:112px;margin-top:28px;border-radius:50%;
  border:1.5px dashed var(--dunkel-linie-stark);
  display:flex;align-items:center;justify-content:center;
}
.met-keinscore svg{width:38px;height:38px;stroke:var(--fg-dim);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.met-keinscore-beschriftung{margin-top:8px;font-family:var(--schrift-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-schwach)}

.reveal.sichtbar .met-ring-fortschritt{stroke-dashoffset:var(--met-ring-ziel,433.5)}
.reveal.sichtbar .met-band i{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){
  .met-ring-fortschritt{stroke-dashoffset:var(--met-ring-ziel,433.5)}
  .met-band i{transform:scaleY(1)}
}

.met-grenze{padding:72px 20px 88px;text-align:center}
.met-marke{
  font-family:var(--schrift-mono);font-size:13px;letter-spacing:.22em;color:var(--fg-dim);
  border:1px solid var(--dunkel-linie-stark);border-radius:999px;padding:8px 18px;display:inline-block;
}
.met-regel-satz{
  margin:24px auto 0;max-width:36ch;font-family:var(--schrift-gross);font-weight:700;
  font-size:clamp(24px,3.6vw,34px);letter-spacing:-.015em;line-height:1.3;
}

/* ═══════════════════════════════════════════════════════════════════════
   Zugang (Anmelden/Registrieren/Passwort/Meldung) — eigene, ruhige Karte
   ═══════════════════════════════════════════════════════════════════════ */
.zugang-rahmen{
  position:relative;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);
  overflow:hidden;
}
.zugang-wasserzeichen{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.zugang-wasserzeichen svg{
  position:absolute;top:50%;right:-10%;width:min(60vw,760px);height:auto;
  transform:translateY(-50%);fill:var(--fg);opacity:.05;
}
.zugang-kopf{position:relative;z-index:1;padding:20px 24px}
.zugang-kopf .marke{display:inline-flex;align-items:baseline;gap:9px;font-weight:650;color:var(--fg)}
.zugang-kopf .marke .marke-abzeichen{width:28px;height:28px;align-self:center;background:var(--fg);color:var(--bg)}
.zugang-kopf .marke .marke-abzeichen svg{width:16px}
.zugang-mitte{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;padding:var(--a-6) var(--a-4)}
.zugang-karte{
  width:100%;max-width:400px;background:var(--bg-soft);border:1px solid var(--dunkel-linie);
  border-radius:var(--radius-gross);padding:var(--a-6) var(--a-5);
}
.zugang-karte h1{font-family:var(--schrift-gross);font-size:22px;letter-spacing:-.01em;margin-bottom:var(--a-4);color:var(--fg)}
.zugang-karte p.hinweistext{color:var(--fg-dim);font-size:var(--pt-15);margin-bottom:var(--a-4)}
.zugang-karte .formular{max-width:none}
.zugang-karte .links{margin-top:var(--a-4);font-size:var(--pt-14);color:var(--fg-dim);display:flex;flex-direction:column;gap:6px}
.zugang-karte .links a{color:var(--fg)}
.zugang-karte [role=alert]{
  background:rgb(255 107 107 / .1);border:1px solid rgb(255 107 107 / .35);color:#ff6b6b;
  border-radius:var(--radius);padding:var(--a-2) var(--a-3);font-size:var(--pt-14);margin-bottom:var(--a-3);
}
.zugang-honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Signet oben in der Karte, zentriert über der Überschrift — bleibt
   innerhalb der Karte, kein Herausragen über die Kante. */
.zugang-signet-schwebe{display:flex;justify-content:center;margin:0 0 var(--a-5)}
.zugang-signet-schwebe img{width:128px;height:auto;display:block}
.zugang-signet-schwebe svg{display:none;width:128px;height:auto;fill:var(--fg)}
@media (prefers-reduced-motion:reduce){
  .zugang-signet-schwebe img{display:none}
  .zugang-signet-schwebe svg{display:block}
}
@media (max-width:480px){
  .zugang-signet-schwebe{margin:0 0 var(--a-4)}
  .zugang-signet-schwebe img,.zugang-signet-schwebe svg{width:92px}
}

/* ═══════════════════════════════════════════════════════════════════════
   /abo — Mitgliedschaft (E-54, Redesign nach Drittanbieter-Screenshot, auf
   ein Produkt/einen Preis angepasst). Ein Element statt Hero-Streifen +
   Karte (Nachtrag zum Feinschliff, auf Wunsch zusammengelegt) — Titel und
   Preis liegen jetzt beide in derselben Karte. Akzent für die Häkchen ist
   --marke (Blau, s. :root) — die violette Vorlagenfarbe ist nicht Argos'
   eigene Akzentfarbe, deshalb nicht übernommen.
   ═══════════════════════════════════════════════════════════════════════ */
.abo-wrap{max-width:440px;margin:var(--a-7) auto 0}
.abo-karte{border:1px solid var(--p-linie-stark)}
.abo-karte .innen{padding:var(--a-6) var(--a-5)}
.abo-titel{
  font-family:var(--schrift-gross);font-weight:800;font-size:clamp(24px,3vw,30px);
  letter-spacing:-.02em;margin:0 0 var(--a-3);color:var(--p-tinte);
}
.abo-preis{
  font-family:var(--schrift-gross);font-weight:800;font-size:44px;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:6px;margin:0;color:var(--p-tinte);
}
.abo-preis-einheit{font-family:var(--schrift);font-weight:500;font-size:var(--pt-15);color:var(--p-tinte-2)}
.abo-merkmale{list-style:none;margin:var(--a-5) 0;padding:0;display:flex;flex-direction:column;gap:var(--a-3)}
.abo-merkmale li{display:flex;align-items:flex-start;gap:10px;font-size:var(--pt-15);color:var(--p-tinte)}
.abo-merkmale svg{flex:none;width:18px;height:18px;stroke:var(--marke);fill:none;stroke-width:2.4;margin-top:2px}
.abo-cta{align-self:stretch;text-align:center;justify-content:center}
.abo-fussnote{margin-top:var(--a-3);font-size:var(--pt-14);color:var(--p-tinte-3);text-align:center}

/* Widerrufsbelehrung + Zustimmung vor dem Kauf (§ 356 Abs. 5 BGB). Bewusst
   ruhig gesetzt und nicht als Warnkasten: Es ist eine Pflichtangabe, kein
   Fehler. Die Zustimmung steht direkt über dem Knopf, damit der Zusammenhang
   zur Handlung sichtbar bleibt. */
.abo-widerruf{margin-top:var(--a-5)}
.abo-widerruf-text{
  font-size:var(--pt-14);color:var(--p-tinte-2);line-height:1.55;
  padding:var(--a-3);border:1px solid var(--p-linie);border-radius:8px;
  background:var(--p-flaeche-2);
}
.abo-widerruf-zustimmung{
  display:flex;gap:10px;align-items:flex-start;
  margin:var(--a-3) 0;font-size:var(--pt-14);line-height:1.5;color:var(--p-tinte-2);
  cursor:pointer;
}
/* Kästchen nicht schrumpfen lassen, wenn der Text mehrzeilig umbricht, und
   auf der ersten Zeile ausrichten statt zentriert im Block. */
.abo-widerruf-zustimmung input{flex:0 0 auto;margin-top:3px;width:16px;height:16px;cursor:pointer}
.abo-karte .knopf-sekundaer{margin-top:var(--a-4)}
.kuendigen-details{
  display:grid;grid-template-columns:auto 1fr;gap:var(--a-2) var(--a-4);
  margin:0 0 var(--a-5);font-size:var(--pt-15);
}
.kuendigen-details dt{color:var(--p-tinte-3)}
.kuendigen-details dd{margin:0;color:var(--p-tinte);font-weight:600}

/* ═════════════ Ohne Inline-Styles (Audit 2026-08, CSP style-src) ═════════════
   Die CSP setzt `style-src 'self'` ohne `'unsafe-inline'`. Das verwirft im
   Browser auch `style="…"`-*Attribute* — die betroffenen Seiten rendern
   sichtbar falsch. Alles, was vorher inline stand, liegt deshalb hier.

   Für die zwei datenabhängigen Werte (Score-Marker, Methodik-Ring) nutzt diese
   Datei dasselbe Muster, das sie für Bandstufen schon verwendet
   (`.met-band[data-stufe="1"]`): ein `data-`Attribut am Element, die Werte als
   Regelsatz hier. Der Score ist eine ganze Zahl 0-100, die Aufzählung also
   vollständig und exakt - keine Rundung, kein Rasterverlust. */

/* Beleglage-Skala: feste Segmentbreiten und -farben (waren fünfmal inline). */
.spur i:nth-child(1){width:29%;background:var(--beleg-1)}
.spur i:nth-child(2){width:19%;background:var(--beleg-2)}
.spur i:nth-child(3){width:19%;background:var(--beleg-3)}
.spur i:nth-child(4){width:14%;background:var(--beleg-4)}
.spur i:nth-child(5){width:15%;background:var(--beleg-5)}
.dichte .striche span:nth-child(1){left:29%}
.dichte .striche span:nth-child(2){left:49%}
.dichte .striche span:nth-child(3){left:69%}
.dichte .striche span:nth-child(4){left:84%}

/* Positionsmarker auf der Skala - `data-score` statt `style="left:…%"`. */
.spur .marker[data-score="0"]{left:0%}
.spur .marker[data-score="1"]{left:1%}
.spur .marker[data-score="2"]{left:2%}
.spur .marker[data-score="3"]{left:3%}
.spur .marker[data-score="4"]{left:4%}
.spur .marker[data-score="5"]{left:5%}
.spur .marker[data-score="6"]{left:6%}
.spur .marker[data-score="7"]{left:7%}
.spur .marker[data-score="8"]{left:8%}
.spur .marker[data-score="9"]{left:9%}
.spur .marker[data-score="10"]{left:10%}
.spur .marker[data-score="11"]{left:11%}
.spur .marker[data-score="12"]{left:12%}
.spur .marker[data-score="13"]{left:13%}
.spur .marker[data-score="14"]{left:14%}
.spur .marker[data-score="15"]{left:15%}
.spur .marker[data-score="16"]{left:16%}
.spur .marker[data-score="17"]{left:17%}
.spur .marker[data-score="18"]{left:18%}
.spur .marker[data-score="19"]{left:19%}
.spur .marker[data-score="20"]{left:20%}
.spur .marker[data-score="21"]{left:21%}
.spur .marker[data-score="22"]{left:22%}
.spur .marker[data-score="23"]{left:23%}
.spur .marker[data-score="24"]{left:24%}
.spur .marker[data-score="25"]{left:25%}
.spur .marker[data-score="26"]{left:26%}
.spur .marker[data-score="27"]{left:27%}
.spur .marker[data-score="28"]{left:28%}
.spur .marker[data-score="29"]{left:29%}
.spur .marker[data-score="30"]{left:30%}
.spur .marker[data-score="31"]{left:31%}
.spur .marker[data-score="32"]{left:32%}
.spur .marker[data-score="33"]{left:33%}
.spur .marker[data-score="34"]{left:34%}
.spur .marker[data-score="35"]{left:35%}
.spur .marker[data-score="36"]{left:36%}
.spur .marker[data-score="37"]{left:37%}
.spur .marker[data-score="38"]{left:38%}
.spur .marker[data-score="39"]{left:39%}
.spur .marker[data-score="40"]{left:40%}
.spur .marker[data-score="41"]{left:41%}
.spur .marker[data-score="42"]{left:42%}
.spur .marker[data-score="43"]{left:43%}
.spur .marker[data-score="44"]{left:44%}
.spur .marker[data-score="45"]{left:45%}
.spur .marker[data-score="46"]{left:46%}
.spur .marker[data-score="47"]{left:47%}
.spur .marker[data-score="48"]{left:48%}
.spur .marker[data-score="49"]{left:49%}
.spur .marker[data-score="50"]{left:50%}
.spur .marker[data-score="51"]{left:51%}
.spur .marker[data-score="52"]{left:52%}
.spur .marker[data-score="53"]{left:53%}
.spur .marker[data-score="54"]{left:54%}
.spur .marker[data-score="55"]{left:55%}
.spur .marker[data-score="56"]{left:56%}
.spur .marker[data-score="57"]{left:57%}
.spur .marker[data-score="58"]{left:58%}
.spur .marker[data-score="59"]{left:59%}
.spur .marker[data-score="60"]{left:60%}
.spur .marker[data-score="61"]{left:61%}
.spur .marker[data-score="62"]{left:62%}
.spur .marker[data-score="63"]{left:63%}
.spur .marker[data-score="64"]{left:64%}
.spur .marker[data-score="65"]{left:65%}
.spur .marker[data-score="66"]{left:66%}
.spur .marker[data-score="67"]{left:67%}
.spur .marker[data-score="68"]{left:68%}
.spur .marker[data-score="69"]{left:69%}
.spur .marker[data-score="70"]{left:70%}
.spur .marker[data-score="71"]{left:71%}
.spur .marker[data-score="72"]{left:72%}
.spur .marker[data-score="73"]{left:73%}
.spur .marker[data-score="74"]{left:74%}
.spur .marker[data-score="75"]{left:75%}
.spur .marker[data-score="76"]{left:76%}
.spur .marker[data-score="77"]{left:77%}
.spur .marker[data-score="78"]{left:78%}
.spur .marker[data-score="79"]{left:79%}
.spur .marker[data-score="80"]{left:80%}
.spur .marker[data-score="81"]{left:81%}
.spur .marker[data-score="82"]{left:82%}
.spur .marker[data-score="83"]{left:83%}
.spur .marker[data-score="84"]{left:84%}
.spur .marker[data-score="85"]{left:85%}
.spur .marker[data-score="86"]{left:86%}
.spur .marker[data-score="87"]{left:87%}
.spur .marker[data-score="88"]{left:88%}
.spur .marker[data-score="89"]{left:89%}
.spur .marker[data-score="90"]{left:90%}
.spur .marker[data-score="91"]{left:91%}
.spur .marker[data-score="92"]{left:92%}
.spur .marker[data-score="93"]{left:93%}
.spur .marker[data-score="94"]{left:94%}
.spur .marker[data-score="95"]{left:95%}
.spur .marker[data-score="96"]{left:96%}
.spur .marker[data-score="97"]{left:97%}
.spur .marker[data-score="98"]{left:98%}
.spur .marker[data-score="99"]{left:99%}
.spur .marker[data-score="100"]{left:100%}

/* Methodik-Ring: Zielwert des Kreisumfangs. Ohne `data-score` (kein Score
   vorhanden, I-3) greift der Vorgabewert 433.5 aus `var(--met-ring-ziel,433.5)`
   - der Ring bleibt dann leer. */
.met-ring[data-score="0"]{--met-ring-ziel:433.5}
.met-ring[data-score="1"]{--met-ring-ziel:429.2}
.met-ring[data-score="2"]{--met-ring-ziel:424.8}
.met-ring[data-score="3"]{--met-ring-ziel:420.5}
.met-ring[data-score="4"]{--met-ring-ziel:416.2}
.met-ring[data-score="5"]{--met-ring-ziel:411.8}
.met-ring[data-score="6"]{--met-ring-ziel:407.5}
.met-ring[data-score="7"]{--met-ring-ziel:403.2}
.met-ring[data-score="8"]{--met-ring-ziel:398.8}
.met-ring[data-score="9"]{--met-ring-ziel:394.5}
.met-ring[data-score="10"]{--met-ring-ziel:390.1}
.met-ring[data-score="11"]{--met-ring-ziel:385.8}
.met-ring[data-score="12"]{--met-ring-ziel:381.5}
.met-ring[data-score="13"]{--met-ring-ziel:377.1}
.met-ring[data-score="14"]{--met-ring-ziel:372.8}
.met-ring[data-score="15"]{--met-ring-ziel:368.5}
.met-ring[data-score="16"]{--met-ring-ziel:364.1}
.met-ring[data-score="17"]{--met-ring-ziel:359.8}
.met-ring[data-score="18"]{--met-ring-ziel:355.5}
.met-ring[data-score="19"]{--met-ring-ziel:351.1}
.met-ring[data-score="20"]{--met-ring-ziel:346.8}
.met-ring[data-score="21"]{--met-ring-ziel:342.5}
.met-ring[data-score="22"]{--met-ring-ziel:338.1}
.met-ring[data-score="23"]{--met-ring-ziel:333.8}
.met-ring[data-score="24"]{--met-ring-ziel:329.5}
.met-ring[data-score="25"]{--met-ring-ziel:325.1}
.met-ring[data-score="26"]{--met-ring-ziel:320.8}
.met-ring[data-score="27"]{--met-ring-ziel:316.5}
.met-ring[data-score="28"]{--met-ring-ziel:312.1}
.met-ring[data-score="29"]{--met-ring-ziel:307.8}
.met-ring[data-score="30"]{--met-ring-ziel:303.4}
.met-ring[data-score="31"]{--met-ring-ziel:299.1}
.met-ring[data-score="32"]{--met-ring-ziel:294.8}
.met-ring[data-score="33"]{--met-ring-ziel:290.4}
.met-ring[data-score="34"]{--met-ring-ziel:286.1}
.met-ring[data-score="35"]{--met-ring-ziel:281.8}
.met-ring[data-score="36"]{--met-ring-ziel:277.4}
.met-ring[data-score="37"]{--met-ring-ziel:273.1}
.met-ring[data-score="38"]{--met-ring-ziel:268.8}
.met-ring[data-score="39"]{--met-ring-ziel:264.4}
.met-ring[data-score="40"]{--met-ring-ziel:260.1}
.met-ring[data-score="41"]{--met-ring-ziel:255.8}
.met-ring[data-score="42"]{--met-ring-ziel:251.4}
.met-ring[data-score="43"]{--met-ring-ziel:247.1}
.met-ring[data-score="44"]{--met-ring-ziel:242.8}
.met-ring[data-score="45"]{--met-ring-ziel:238.4}
.met-ring[data-score="46"]{--met-ring-ziel:234.1}
.met-ring[data-score="47"]{--met-ring-ziel:229.8}
.met-ring[data-score="48"]{--met-ring-ziel:225.4}
.met-ring[data-score="49"]{--met-ring-ziel:221.1}
.met-ring[data-score="50"]{--met-ring-ziel:216.8}
.met-ring[data-score="51"]{--met-ring-ziel:212.4}
.met-ring[data-score="52"]{--met-ring-ziel:208.1}
.met-ring[data-score="53"]{--met-ring-ziel:203.7}
.met-ring[data-score="54"]{--met-ring-ziel:199.4}
.met-ring[data-score="55"]{--met-ring-ziel:195.1}
.met-ring[data-score="56"]{--met-ring-ziel:190.7}
.met-ring[data-score="57"]{--met-ring-ziel:186.4}
.met-ring[data-score="58"]{--met-ring-ziel:182.1}
.met-ring[data-score="59"]{--met-ring-ziel:177.7}
.met-ring[data-score="60"]{--met-ring-ziel:173.4}
.met-ring[data-score="61"]{--met-ring-ziel:169.1}
.met-ring[data-score="62"]{--met-ring-ziel:164.7}
.met-ring[data-score="63"]{--met-ring-ziel:160.4}
.met-ring[data-score="64"]{--met-ring-ziel:156.1}
.met-ring[data-score="65"]{--met-ring-ziel:151.7}
.met-ring[data-score="66"]{--met-ring-ziel:147.4}
.met-ring[data-score="67"]{--met-ring-ziel:143.1}
.met-ring[data-score="68"]{--met-ring-ziel:138.7}
.met-ring[data-score="69"]{--met-ring-ziel:134.4}
.met-ring[data-score="70"]{--met-ring-ziel:130.1}
.met-ring[data-score="71"]{--met-ring-ziel:125.7}
.met-ring[data-score="72"]{--met-ring-ziel:121.4}
.met-ring[data-score="73"]{--met-ring-ziel:117.0}
.met-ring[data-score="74"]{--met-ring-ziel:112.7}
.met-ring[data-score="75"]{--met-ring-ziel:108.4}
.met-ring[data-score="76"]{--met-ring-ziel:104.0}
.met-ring[data-score="77"]{--met-ring-ziel:99.7}
.met-ring[data-score="78"]{--met-ring-ziel:95.4}
.met-ring[data-score="79"]{--met-ring-ziel:91.0}
.met-ring[data-score="80"]{--met-ring-ziel:86.7}
.met-ring[data-score="81"]{--met-ring-ziel:82.4}
.met-ring[data-score="82"]{--met-ring-ziel:78.0}
.met-ring[data-score="83"]{--met-ring-ziel:73.7}
.met-ring[data-score="84"]{--met-ring-ziel:69.4}
.met-ring[data-score="85"]{--met-ring-ziel:65.0}
.met-ring[data-score="86"]{--met-ring-ziel:60.7}
.met-ring[data-score="87"]{--met-ring-ziel:56.4}
.met-ring[data-score="88"]{--met-ring-ziel:52.0}
.met-ring[data-score="89"]{--met-ring-ziel:47.7}
.met-ring[data-score="90"]{--met-ring-ziel:43.4}
.met-ring[data-score="91"]{--met-ring-ziel:39.0}
.met-ring[data-score="92"]{--met-ring-ziel:34.7}
.met-ring[data-score="93"]{--met-ring-ziel:30.3}
.met-ring[data-score="94"]{--met-ring-ziel:26.0}
.met-ring[data-score="95"]{--met-ring-ziel:21.7}
.met-ring[data-score="96"]{--met-ring-ziel:17.3}
.met-ring[data-score="97"]{--met-ring-ziel:13.0}
.met-ring[data-score="98"]{--met-ring-ziel:8.7}
.met-ring[data-score="99"]{--met-ring-ziel:4.3}
.met-ring[data-score="100"]{--met-ring-ziel:0.0}

/* Einzelne Bausteine, die vorher inline gestylt waren. */
.zugang-oder{margin:var(--a-3) 0;text-align:center}
.knopf-block{display:block;text-align:center}
.konto-bestaetigung{display:flex;align-items:center;gap:8px;font-weight:500;font-size:var(--pt-14)}
.konto-bestaetigung input{width:auto}
.formular-innen{padding:var(--a-4)}
.tv-fuellend{width:100%;height:100%}
.chip-reihe{display:flex;gap:var(--a-2);flex-wrap:wrap;align-items:center}
.saeulen-liste{list-style:none;margin:var(--a-2) 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.status-punkt-inaktiv{color:var(--p-tinte-3)}
.status-punkt-inaktiv i{background:var(--p-linie-stark)}
.hinweis-klein{margin-top:var(--a-3);font-size:14px;color:var(--p-tinte-3)}
.karte-titel-mittel{font-size:var(--pt-15);font-weight:650}
.karte-titel-versal{font-size:var(--pt-15);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--p-tinte-2)}
.werkzeuge-innen{padding:var(--a-3) var(--a-4);border-bottom:1px solid var(--p-linie)}
/* Eigene Zeile statt der Karten-Meta: kein ::before-Punkt (überlappte das
   Datum ohne die 20px padding-left der Karte), keine Spalten-Umschaltung ab
   760px (die war für die zweispaltige .beitrag-karte gedacht, nicht für eine
   frei stehende Kopfzeile). */
.beitrag-meta-kopf{
  margin-top:0;padding-left:0;border-left:0;
  flex-direction:row;align-items:center;gap:14px;
}
.beitrag-meta-kopf::before{display:none}

/* Sektor-/Kategoriefarbe über `data-sektor` statt Inline-Style. Beide Paletten
   sind geschlossene Mengen (13 Sektoren, 12 Kategorien, `sektorfarben.py`), die
   Aufzählung hier ist also vollständig. `tests/test_sektorfarben.py` hält
   diese Regeln und `sektorfarben.py` deckungsgleich — die Python-Datei bleibt
   die Quelle, dieser Block ist ihre CSS-Fassung.
   Fehlt ein Schlüssel, greift der Vorgabewert aus `var(--sektor-farbe,…)`. */
[data-sektor="energie"]{--sektor-farbe:#BD7221}
[data-sektor="rohstoffe"]{--sektor-farbe:#AB7E00}
[data-sektor="chemie"]{--sektor-farbe:#918A0A}
[data-sektor="industrie"]{--sektor-farbe:#6E9537}
[data-sektor="transport-logistik"]{--sektor-farbe:#409C5B}
[data-sektor="konsum-zyklisch"]{--sektor-farbe:#009F7E}
[data-sektor="konsum-basis"]{--sektor-farbe:#009D9E}
[data-sektor="gesundheit"]{--sektor-farbe:#0098B9}
[data-sektor="finanzen"]{--sektor-farbe:#218FCB}
[data-sektor="immobilien"]{--sektor-farbe:#5985D4}
[data-sektor="technologie"]{--sektor-farbe:#7D7AD1}
[data-sektor="kommunikation-medien"]{--sektor-farbe:#9970C4}
[data-sektor="versorger"]{--sektor-farbe:#AF68AE}
[data-sektor="l1-basisprotokoll"]{--sektor-farbe:#C48225}
[data-sektor="l2-rollup"]{--sektor-farbe:#AC9016}
[data-sektor="defi-handel"]{--sektor-farbe:#8B9C33}
[data-sektor="defi-kredit"]{--sektor-farbe:#60A659}
[data-sektor="stablecoin"]{--sektor-farbe:#1FAB80}
[data-sektor="rwa-tokenisierung"]{--sektor-farbe:#00ABA4}
[data-sektor="orakel-daten"]{--sektor-farbe:#00A5C2}
[data-sektor="bruecken"]{--sektor-farbe:#2F9CD8}
[data-sektor="staking-infrastruktur"]{--sektor-farbe:#6591E1}
[data-sektor="depin"]{--sektor-farbe:#8C85DE}
[data-sektor="ai-krypto"]{--sektor-farbe:#AB7ACD}
[data-sektor="verwahrung-identitaet"]{--sektor-farbe:#C172B3}
.karte-tabelle tbody tr[data-sektor]{border-left-color:var(--sektor-farbe)}

.cookie-hinweis{
  position:fixed;left:var(--a-4);right:var(--a-4);bottom:var(--a-4);z-index:80;
  max-width:640px;margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--a-3);
  background:var(--bg);color:var(--fg);border:1px solid var(--dunkel-linie-stark);
  border-radius:var(--radius-lg);box-shadow:0 8px 24px rgb(0 0 0 / .25);
  padding:var(--a-3) var(--a-4);font-size:var(--pt-13);
}
.cookie-hinweis[hidden]{display:none}
.cookie-hinweis p{flex:1 1 260px;margin:0;color:var(--fg-dim);line-height:var(--p-zeile)}
.cookie-hinweis a{color:var(--fg)}
.cookie-hinweis button{
  flex:0 0 auto;background:var(--marke);color:#fff;border:none;
  border-radius:var(--radius);padding:8px 16px;font-weight:600;cursor:pointer;
}