@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-700.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plexmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plexmono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plexmono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ================================================================
   RENDITEX DESIGN-SYSTEM — EIN ZENTRALER TOKEN-BLOCK
   ================================================================
   Alles hier drin ist eine Variable. Willst du eine Farbe, einen
   Abstand oder eine Rundung ändern: hier suchen, einmal anpassen,
   wirkt auf der ganzen Seite. Siehe README "Bedienungsanleitung"
   für eine Erklärung, wofür jede Variable zuständig ist.

   FARBSYSTEM DER 5 ZONEN — bitte beim Anpassen beachten:
   --z0…--z4 sind bewusst so gewählt, dass sie GLEICHZEITIG
   funktionieren als (a) farbiger Text auf hellem Grund, (b) weißer
   Text auf einer Fläche in dieser Farbe, (c) Rahmenfarbe. Alle 5
   Werte sind gegen Weiß (#FFFFFF) UND gegen die Papierfarbe (--bg)
   auf mindestens 4.5:1 Kontrast geprüft (WCAG AA für Fließtext).
   Wenn du diese Farben veränderst: kräftiger machen ist meist okay,
   heller/pastelliger machen reißt den Kontrast — im Zweifel eher
   dunkler/gesättigter statt heller.
   ================================================================ */
:root{
  /* ---------- Fläche & Text ----------
     CLEAN-FINTECH-UMBAU: hell ist jetzt die Standard-Spielregel statt
     die Ausnahme. --text/--muted/--muted-2/--line/--line-soft sind
     hier direkt die früheren "Karten-Tinte"-Werte (unten weiterhin als
     --ink-* verfügbar, unverändert) — auf Weiß AA-geprüft, jetzt einfach
     überall Standard statt nur innerhalb einer Karte.
     Das dunkle Marken-Navy bleibt als bewusster Anker erhalten: Header,
     Footer und die Hero-Bänder (.hub-hero / .hero) sind "Dark Islands",
     die --text/--muted/--muted-2/--line/--line-soft lokal wieder auf
     die --dark-* Werte umschalten (siehe Regel weiter unten). Jede Karte
     (siehe großer Selektor-Block) schaltet innerhalb eines Dark Island
     wieder zurück auf die --ink-* Tinte, exakt wie zuvor bei .pill-live —
     dasselbe Prinzip, nur jetzt in beide Richtungen einsetzbar. */
  --bg:#F6F7FB;             /* Seitenhintergrund: sehr helles Kühlgrau statt Navy */
  --bg-2:#EDF0F7;           /* etwas dunklerer Hellton für abwechselnde Abschnittsflächen (.tint) */
  --surface:#FFFFFF;        /* Karten, Panels — bleiben hell, heben sich per Rand/Schatten von --bg ab */
  --surface-2:#F6F1E5;      /* leicht abgesetzte Fläche innerhalb einer Karte (Stat-Kacheln etc.) */
  --line:rgba(34,26,16,.14);       /* Trennlinie — vormals --ink-line, jetzt Standard */
  --line-soft:rgba(34,26,16,.085); /* dezente Trennlinie — vormals --ink-line-soft, jetzt Standard */
  --text:#221A10;           /* Haupttext — 17:1 auf Weiß */
  --muted:#6B6152;          /* Fließtext, sekundär — 6.1:1 auf Weiß */
  --muted-2:#756B5B;        /* Meta/Mono-Beschriftung, tertiär — 5.2:1 auf Weiß */

  /* ---------- Karten-Tinte (unverändert) ----------
     Dieselben fünf Rollen, hart kodiert für den Einsatz INNERHALB
     einer weißen Karte — auch wenn die Karte in einem Dark Island
     (Header/Footer/Hero) verschachtelt liegt. Siehe Karten-Selektor
     weiter unten, der lokal genau hierauf zurückschaltet. */
  --ink-text:#221A10;      /* — 17:1 auf Weiß */
  --ink-muted:#6B6152;     /* — 6.1:1 auf Weiß */
  --ink-muted-2:#756B5B;   /* — 5.2:1 auf Weiß */
  --ink-line:rgba(34,26,16,.14);
  --ink-line-soft:rgba(34,26,16,.085);

  /* ---------- Dark Islands: Navy als Marken-Anker ----------
     Header, Footer und die Hero-Bänder bleiben dunkles Navy. Diese
     Werte sind die frühere globale Hell-auf-Navy-Tinte, jetzt lokal
     über den Dark-Island-Selektor eingesetzt (weiter unten, nach dem
     Karten-Block). */
  --dark-bg:#0B1638;             /* Navy für Header, Hub-Hero, Hero */
  --dark-bg-2:#101D4A;           /* etwas hellere Navy-Fläche, für den Footer */
  /* Etwas Leben im Navy-Anker statt Vollton: dezentes Blau-Glühen oben
     links (Marke), Rot-Glühen unten rechts (Zweitakzent), ein Hauch
     heller Schimmer oben — alles moderat genug, damit heller Text
     weiterhin gut lesbar bleibt. */
  --hero-gradient:
    radial-gradient(ellipse 65% 55% at 6% -6%, rgba(46,105,255,.5) 0%, transparent 62%),
    radial-gradient(ellipse 55% 48% at 102% 108%, rgba(217,27,38,.34) 0%, transparent 65%),
    radial-gradient(ellipse 42% 30% at 65% -12%, rgba(255,255,255,.10) 0%, transparent 72%),
    var(--dark-bg);
  --dark-text:#EAF0FF;           /* — 14.9:1 auf Navy */
  --dark-muted:#B7C4E8;          /* — 10.2:1 auf Navy */
  --dark-muted-2:#8695C2;        /* — 6.0:1 auf Navy */
  --dark-line:rgba(255,255,255,.20);
  --dark-line-soft:rgba(255,255,255,.12);

  /* ---------- Marke ----------
     --brand/--red sind die FIXE Markenfarbe (Button-Flächen, Ränder,
     Badges) — ändern sich NICHT mit dem Theme, sonst verlieren gefüllte
     Flächen mit weißer Schrift (.btn.primary etc.) ihren Kontrast.
     Für Marken-Text (Links, Akzent-Wörter) gibt es --brand-text: im
     Hellen identisch mit --brand, im Dunklen ein helleres Blau, sonst
     reißt der Kontrast auf einer dunklen Kartenfläche.
     --brand-onDark bleibt speziell für Text DIREKT auf Navy (Dark
     Islands, z. B. das hervorgehobene Wort in einer Hero-Überschrift). */
  --brand:#0052FF;         /* RenditeX-Blau, textsicher auf Weiß — 5.75:1, auch als Fläche mit weißem Text */
  --brand-text:var(--brand); /* Marken-Text auf der aktuellen Kartenfläche — im Dunklen unten überschrieben */
  --brand-onDark:#7EB2FF;  /* helles Blau für Text/Akzente direkt auf Navy — 8.2:1 */
  --brand-vivid:#2A7BFF;   /* helleres Blau, NUR dekorativ (Glow, Logo-Strich, dünne Linien) — nie als Text */
  --red:#D91B26;           /* RenditeX-Rot, textsicher — 5.1:1 auf Weiß */
  --red-vivid:#E4212B;     /* helleres Rot, NUR dekorativ */

  /* ---------- Fünf Zonen (Angst↔Gier / günstig↔teuer) ----------
     Ein Wert pro Zone, überall wiederverwendet: als Text, als
     Rahmen und als Flächenfarbe (dann immer mit weißer Schrift).
     Gegen Weiß auf ≥4.5:1 geprüft — die Zonen kommen praktisch nur
     innerhalb heller Karten vor. */
  --z0:#D91B26;   /* Extreme Angst / stark unterbewertet — Rot */
  --z1:#C24A0A;   /* Angst / unterbewertet — Orange */
  --z2:#8F6A00;   /* Neutral / fair bewertet — Gold */
  --z3:#0C7A3A;   /* Gier / überbewertet — Grün */
  --z4:#04806A;   /* Extreme Gier / stark überbewertet — Petrol */
  --spectrum: linear-gradient(90deg, var(--z0) 0%, var(--z1) 27%, var(--z2) 50%, var(--z3) 73%, var(--z4) 100%);

  /* ---------- Typografie ---------- */
  --font-display:"Montserrat","Segoe UI Semibold","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  /* ---------- Abstand & Form ----------
     Etwas großzügiger als zuvor (Radien + Innenabstand), passend zum
     luftigeren Clean-Fintech-Stil auf hellem Grund. */
  --radius-sm:10px;
  --radius:18px;
  --radius-lg:28px;
  --pad: clamp(20px, 4vw, 38px);
  --maxw: 1120px;

  /* ---------- Tiefe statt Farbrahmen ----------
     Karten heben sich jetzt von einer hellen (statt dunklen) Fläche ab,
     deshalb minimal kräftigerer Schatten als zuvor für saubere Kontur. */
  --shadow-sm: 0 1px 2px rgba(17,15,10,.07), 0 1px 1px rgba(17,15,10,.05);
  --shadow-md: 0 12px 30px -10px rgba(17,15,10,.14);
  --shadow-lg: 0 28px 56px -18px rgba(17,15,10,.18);

  /* ---------- Bewegung ---------- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ================================================================
   DARK THEME — per Umschalter in der Kopfzeile (siehe site.js
   RX.theme), gespeichert in localStorage, Vorbelegung nach
   prefers-color-scheme. Da praktisch die gesamte Seite über die
   Rollen --bg/--surface/--surface-2/--text/--muted/--muted-2/--line/
   --line-soft/--ink-* läuft, reicht es, genau diese Rollen hier neu
   zu belegen — kein Bauteil (Karten, Dark Islands, Zonen-System)
   muss dafür angefasst werden.
   Die Dark Islands (Header/Footer/Hero) bleiben unverändert Navy in
   beiden Themes — --dark-* wird hier bewusst NICHT überschrieben.
   Die Zonenfarben (--z0…--z4) und --red bleiben ebenfalls unverändert:
   sie sind auf beiden Kartenflächen ausreichend kräftig und werden an
   mehreren Stellen 1:1 aus JS gespiegelt (Fear-&-Greed-/Heatzone-
   Rechner), ein Theme-Split hätte dort keine Wirkung.
   ================================================================ */
:root[data-theme="dark"]{
  --bg:#0A1220;
  --bg-2:#0E1728;
  --surface:#141D33;
  --surface-2:#1C2740;
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.09);
  --text:#E9EEF9;
  --muted:#A6B1CC;
  --muted-2:#7B87A3;

  --ink-text:#EDF1FA;
  --ink-muted:#ABB6CF;
  --ink-muted-2:#7F8AA6;
  --ink-line:rgba(255,255,255,.14);
  --ink-line-soft:rgba(255,255,255,.09);

  --brand-text:var(--brand-onDark);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.62;
  transition:background var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto}
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,28px)}
h1,h2,h3{font-family:var(--font-display); font-weight:800; letter-spacing:-.012em; line-height:1.14; margin:0; color:var(--text)}
h1{font-weight:800}
h2{font-weight:800}
p{margin:0 0 1em}
a{color:var(--brand-text); text-decoration:none; border-bottom:1px solid rgba(0,82,255,.3)}
a:hover{border-bottom-color:var(--brand)}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:6px}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

/* ============ Header ============ */
header.top{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(14px); background:rgba(11,22,56,.97);
  border-bottom:1px solid rgba(255,255,255,.12);
}
header.top::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--brand-vivid) 0%, transparent 46%, transparent 54%, var(--red-vivid) 100%);
  opacity:.85;
}
.top-in{display:flex; align-items:center; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:2px; text-decoration:none; border:0; color:var(--text)}
.brand .wm{
  font-family:var(--font-display); font-weight:900; font-size:18px; letter-spacing:.03em;
  line-height:1;
}
.brand .xmark{height:20px; width:auto; display:block; margin-left:1px; color:var(--text)}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--z1); box-shadow:0 0 0 4px rgba(168,84,26,.16); margin-left:12px}
footer .brand .wm{font-size:22px}
footer .brand .xmark{height:24px}
nav.top-nav{margin-left:auto; display:flex; gap:4px; align-items:center}
.nav-item{position:relative}
nav.top-nav a, .dd-toggle{
  color:var(--muted); font-size:13.5px; border:0; text-decoration:none;
  display:flex; align-items:center; gap:6px; padding:9px 10px; border-radius:8px;
  background:none; cursor:pointer; font-family:var(--font-body);
}
nav.top-nav a:hover, .dd-toggle:hover{color:var(--text)}
.dd-toggle svg{width:9px; height:9px; flex:none; transition:transform var(--dur-fast)}
.nav-item.open .dd-toggle svg{transform:rotate(180deg)}
.dd-panel{
  position:absolute; top:calc(100% + 8px); left:0; z-index:5; min-width:230px;
  display:none; flex-direction:column; gap:1px; padding:7px;
}
.nav-item.open .dd-panel{display:flex}
.dd-panel a{
  color:var(--text); font-size:13.5px; padding:9px 11px; border-radius:8px; border:0;
  text-decoration:none; white-space:nowrap;
}
.dd-panel a:hover{background:var(--surface-2)}
.dd-panel a[aria-current="page"]{color:var(--brand-text); font-weight:600}
.nav-toggle{
  display:none; width:34px; height:34px; flex:none; place-items:center;
  border:1px solid var(--line); border-radius:999px; background:transparent;
  color:var(--muted); cursor:pointer; margin-left:4px;
}
.nav-toggle svg{width:16px; height:16px; display:block}
.pill-live{
  display:none; align-items:center; gap:8px; font-family:var(--font-mono); font-size:13px;
  padding:5px 11px; border:1px solid var(--ink-line); border-radius:999px; background:var(--surface);
  color:var(--ink-text); box-shadow:var(--shadow-sm);
  --text:var(--ink-text); --muted:var(--ink-muted); --muted-2:var(--ink-muted-2);
}
.pill-live.show{display:flex}
.pill-live b{font-weight:600}
.cur-toggle{
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:transparent;
  color:var(--muted); cursor:pointer; transition:color .15s, border-color .15s;
}
.cur-toggle:hover{color:var(--text); border-color:var(--brand)}
.theme-toggle{
  display:grid; place-items:center; width:32px; height:32px; flex:none;
  border:1px solid var(--line); border-radius:999px; background:transparent;
  color:var(--muted); cursor:pointer; transition:color .15s, border-color .15s;
}
.theme-toggle:hover{color:var(--text); border-color:var(--brand)}
.theme-toggle svg{width:16px; height:16px; display:block}
.theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:block}
@media(max-width:820px){
  nav.top-nav{
    display:none; position:absolute; left:0; right:0; top:100%; z-index:59;
    flex-direction:column; align-items:stretch; gap:2px; padding:10px 14px 16px;
    background:var(--dark-bg); border-bottom:1px solid var(--dark-line-soft);
    max-height:calc(100vh - 64px); overflow-y:auto;
  }
  header.top.nav-open nav.top-nav{display:flex}
  .cur-toggle{margin-left:auto}
  .nav-toggle{display:grid}
  nav.top-nav .nav-item{width:100%}
  nav.top-nav a, nav.top-nav .dd-toggle{width:100%; justify-content:space-between; padding:13px 8px; font-size:15px}
  nav.top-nav .dd-panel{
    position:static; display:none; background:none; border:0; box-shadow:none;
    padding:0 0 4px 14px; min-width:0;
    --text:var(--dark-text); --muted:var(--dark-muted); --muted-2:var(--dark-muted-2);
  }
  nav.top-nav .nav-item.open .dd-panel{display:flex}
  nav.top-nav .dd-panel a{padding:11px 8px; font-size:14px; width:auto}
}

/* ============ Breadcrumb ============
   Eigene, ruhige Zeile direkt unter dem Header — nicht sticky, damit
   sie nicht mit der Kopfzeile um Platz konkurriert. Zeigt Pfad
   (Start › Kategorie › aktuelle Seite) und optional Pillen zu
   Geschwister-Seiten (z. B. den anderen Tools). */
.breadcrumb{padding:14px 0; border-bottom:1px solid var(--line-soft)}
.breadcrumb .trail{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12.5px; color:var(--muted-2);
}
.breadcrumb .trail a{color:var(--muted-2); border:0}
.breadcrumb .trail a:hover{color:var(--text)}
.breadcrumb .trail .sep{opacity:.5}
.breadcrumb .trail .current{color:var(--text); font-weight:600}
.breadcrumb .pills{display:flex; gap:7px; flex-wrap:wrap; margin-top:9px}
.breadcrumb .pills a{
  font-family:var(--font-mono); font-size:12px; text-decoration:none; color:var(--muted);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:8px; padding:5px 11px;
  transition:color var(--dur-fast), border-color var(--dur-fast);
}
.breadcrumb .pills a:hover{color:var(--text); border-color:var(--brand)}
.breadcrumb .pills a[aria-current="page"]{background:var(--surface-2); color:var(--text); border-color:var(--line); font-weight:600}

/* ============ Hero (Tool-Seiten) ============
   Dark Island: dasselbe dunkle Navy wie der Header, als abgesetzte,
   gerundete Fläche statt Vollbild-Band (siehe Dark-Island-Regel unten
   für die Text-Tinte). So bleibt die Markenfarbe als Anker erhalten,
   ohne dass Tool-Seiten strukturell angefasst werden müssen. */
.hero{
  padding:clamp(34px,6vw,64px) clamp(20px,4vw,38px) clamp(28px,5vw,48px);
  margin-top:clamp(14px,2.4vw,22px); margin-bottom:clamp(28px,4vw,44px); position:relative;
  background:var(--hero-gradient); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
  color:var(--muted-2); display:flex; align-items:center; gap:9px; margin-bottom:16px;
}
.eyebrow .beat{width:6px;height:6px;border-radius:50%;background:var(--brand-onDark);animation:beat 2.8s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:.4;transform:scale(.88)}50%{opacity:1;transform:scale(1)}}
h1{font-size:clamp(30px,5.4vw,52px); max-width:18ch; letter-spacing:-.02em}
h1 em{font-style:normal; color:var(--brand-onDark); font-weight:900}
.hero-sub{color:var(--muted); font-size:clamp(15px,1.6vw,18px); max-width:60ch; margin-top:16px}

/* ================================================================
   DARK ISLANDS — Navy bleibt als Marken-Anker: Header, Footer und die
   Hero-Bänder schalten --text/--muted/--muted-2/--line/--line-soft
   lokal auf die --dark-* Werte um. Alles andere auf der Seite nutzt
   ab hier direkt die (hellen) Standardwerte aus :root.
   ================================================================ */
header.top, footer, .hub-hero, .hero{
  --text:var(--dark-text); --muted:var(--dark-muted); --muted-2:var(--dark-muted-2);
  --line:var(--dark-line); --line-soft:var(--dark-line-soft);
}

/* ================================================================
   KARTEN-BASIS — helle Fläche, die sich per Rand + Schatten von der
   Seite absetzt. Jeder Selektor hier ist ein "Land der Karten-Tinte":
   --text/--muted/--muted-2/--line/--line-soft werden lokal (wieder)
   auf die Karten-Tinte umgeschaltet — wichtig, sobald eine Karte
   innerhalb eines Dark Island liegt (z. B. .hero-quote oder .btn im
   Hero), sonst würde sie die helle Navy-Tinte erben. Gilt automatisch
   für ALLE Kind-Elemente (Vererbung von CSS-Variablen) — darum reicht
   die Umschaltung hier am äußeren Karten-Rahmen. Neue Karten-
   Komponenten also hier mit eintragen.
   ================================================================ */
.gauge-card, .chart-card, .panel, .result, .zones, .factors, .tl,
.multibars, .pr-ticker, .bt, .acc details, .princ .card, .tool,
.channel, .plat, .note, .guide, .facts, .cta-band, .hero-quote,
.usehint, .callout, .adnotice, .legal-note, .btn, .legal-page, .limit, .stat, .dd-panel, .pdb-card{
  background:var(--surface); border:1px solid var(--ink-line-soft); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); color:var(--ink-text);
  --text:var(--ink-text); --muted:var(--ink-muted); --muted-2:var(--ink-muted-2);
  --line:var(--ink-line); --line-soft:var(--ink-line-soft);
}
.dd-panel{border-radius:var(--radius-sm); box-shadow:var(--shadow-md)}

/* Signature: Stimmungsband */
.gauge-card{margin-top:clamp(24px,4vw,40px); padding:var(--pad)}
.gauge-top{display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(18px,3vw,40px)}
.bignum{display:flex; align-items:baseline; gap:14px}
.bignum .v{
  font-family:var(--font-display); font-weight:800; font-size:clamp(64px,11vw,116px);
  line-height:.86; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.bignum .of{font-family:var(--font-mono); font-size:14px; color:var(--muted-2)}
.verdict{flex:1; min-width:250px; padding-bottom:6px}
.verdict .label{font-family:var(--font-display); font-weight:800; font-size:clamp(21px,3vw,28px); letter-spacing:-.015em}
.verdict .en{font-family:var(--font-mono); font-size:12px; color:var(--muted-2); letter-spacing:.06em; text-transform:uppercase; margin-top:3px}
.verdict p{color:var(--muted); font-size:15px; margin:10px 0 0; max-width:44ch}
.delta{font-family:var(--font-mono); font-size:13px; color:var(--muted); margin-top:10px}
.delta b{color:var(--text); font-weight:600}

.band-wrap{margin-top:clamp(24px,4vw,38px)}
.band{
  position:relative; height:14px; border-radius:999px; background:var(--spectrum);
  box-shadow:inset 0 0 0 1px rgba(34,20,10,.08);
}
.band .seg{position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.5)}
.trail{position:relative; height:34px; margin-top:9px}
.trail .t{
  position:absolute; top:0; width:2px; height:9px; border-radius:2px; background:var(--muted-2);
  transform:translateX(-1px);
}
.marker{
  position:absolute; top:-10px; width:2px; height:34px; background:var(--text);
  transform:translateX(-1px); transition:left .8s var(--ease-out);
}
.marker::before{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%; background:var(--text);
  box-shadow:0 0 0 4px var(--surface), 0 2px 8px rgba(34,20,10,.3);
}
.band-scale{display:flex; justify-content:space-between; margin-top:14px; font-family:var(--font-mono); font-size:11px; color:var(--muted-2); letter-spacing:.04em}
.band-scale span{flex:1; text-align:center}
.band-scale span:first-child{text-align:left}
.band-scale span:last-child{text-align:right}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:clamp(20px,3vw,28px)}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:14px 15px}
.stat .k{font-family:var(--font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted-2)}
.stat .n{font-family:var(--font-display); font-weight:800; font-size:25px; margin-top:6px; font-variant-numeric:tabular-nums}
.stat .s{font-size:12.5px; color:var(--muted)}
.src-note{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2); margin-top:16px}

/* ============ Sections ============
   Rhythmus statt Trennlinie: statt jeden Abschnitt mit einer Haarlinie
   abzugrenzen, wechselt bei Bedarf die Flächenfarbe (Klasse .tint nutzt
   --bg-2) — ruhiger und typischer für einen hellen Clean-Fintech-Look. */
section{padding:clamp(48px,7vw,88px) 0}
section.tint{background:var(--bg-2)}
.sec-head{margin-bottom:clamp(22px,3.4vw,34px); max-width:70ch}
h2{font-size:clamp(24px,3.4vw,34px)}
.sec-head p{color:var(--muted); margin-top:12px; font-size:15.5px}
.intro{max-width:74ch}
.intro p{font-size:15.5px; line-height:1.72}
.intro p + p{margin-top:.9em}

/* Chart */
.chart-card{padding:clamp(14px,2.4vw,22px)}
.chart-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.rangebtns{display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:10px; padding:4px}
.coinbar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(16px,2.4vw,26px)}
.coinbar button{
  font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--muted);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:11px; padding:11px 20px;
  cursor:pointer; box-shadow:var(--shadow-sm); transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.coinbar button:hover{color:var(--text); border-color:var(--brand)}
.coinbar button[aria-pressed="true"]{color:#fff; background:var(--brand); border-color:var(--brand)}
.rangebtns button{
  font-family:var(--font-mono); font-size:12.5px; color:var(--muted); background:transparent;
  border:0; padding:6px 13px; border-radius:7px; cursor:pointer; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rangebtns button[aria-pressed="true"]{background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm)}
.chart-legend{margin-left:auto; display:flex; flex-wrap:wrap; row-gap:6px; gap:14px; font-family:var(--font-mono); font-size:11px; color:var(--muted-2)}
.chart-hint{margin:12px 2px 0; font-size:12.5px; color:var(--muted-2)}

/* Chart-Einstellungen: Zahnrad + Popover */
.chart-settings{position:relative; margin-left:8px}
.chart-gear{
  display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border:1px solid var(--line-soft); border-radius:8px; background:var(--surface-2); color:var(--muted);
  cursor:pointer; transition:color .15s, border-color .15s;
}
.chart-gear:hover, .chart-gear[aria-expanded="true"]{color:var(--text); border-color:var(--line)}
.chart-settings-panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:20; width:230px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:14px 16px;
}
.csp-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; font-size:13.5px; color:var(--text)}
.csp-row + .csp-row{border-top:1px solid var(--line-soft)}
.csp-toggle{display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:8px; padding:2px}
.csp-toggle button{
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted); background:transparent; border:0;
  padding:5px 10px; border-radius:6px; cursor:pointer;
}
.csp-toggle button[aria-pressed="true"]{background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm)}
.csp-switch{
  width:36px; height:20px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2);
  position:relative; cursor:pointer; flex:none;
}
.csp-switch::before{
  content:""; position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%;
  background:var(--muted-2); transition:transform .15s, background .15s;
}
.csp-switch.on{background:color-mix(in srgb, var(--brand) 20%, var(--surface-2)); border-color:var(--brand)}
.csp-switch.on::before{transform:translateX(16px); background:var(--brand)}
.chart-legend i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; border:1px solid var(--line)}
.chart-host{
  position:relative; height:clamp(260px,38vw,360px);
  border:1px solid var(--line-soft); border-radius:var(--radius-sm); overflow:hidden;
}
.chart-host > div:first-child{width:100%; height:100%}
.tip{
  position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-118%);
  background:var(--dark-bg); border:1px solid var(--dark-bg); border-radius:10px; padding:8px 11px;
  font-family:var(--font-mono); font-size:12px; white-space:nowrap; transition:opacity .12s; z-index:5;
  box-shadow:var(--shadow-md); color:#FAF6EE;
}
.tip .tv{font-size:15px; font-weight:600}
.tip .td{color:#C9BEA9; font-size:11px}

/* Zonen (Liste, anklickbar) */
.zones{display:grid; gap:8px; background:none; border:0; box-shadow:none; padding:0}
.zone{
  position:relative; display:grid; grid-template-columns:minmax(112px,max-content) 1fr auto; gap:16px; align-items:center; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:16px 18px 16px 32px; cursor:pointer; color:inherit; font:inherit;
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.zone::before{
  content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--zc);
}
.zone:hover{transform:translateX(3px); box-shadow:var(--shadow-md)}
.zone[data-active="true"]{border-color:var(--zc); box-shadow:var(--shadow-md)}
.zone .rng{font-family:var(--font-mono); font-weight:600; font-size:15px; color:var(--zc)}
.zone .nm{font-size:12.5px; color:var(--muted); font-family:var(--font-mono)}
.zone .ttl{font-family:var(--font-display); font-weight:700; font-size:16.5px}
.zone .mini{color:var(--muted); font-size:14px; margin-top:2px}
.zone .mult{font-family:var(--font-mono); font-size:13px; color:var(--zc); white-space:nowrap}
.zone .now{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--zc); color:#fff; padding:2px 7px; border-radius:5px; margin-left:8px; font-weight:600;
}
.zone-detail{
  display:none; background:var(--surface-2); border:1px solid var(--line-soft); border-left:3px solid var(--zc);
  border-radius:var(--radius); padding:18px 20px 18px 30px; margin-top:-2px; color:var(--muted); font-size:15px;
}
.zone-detail.open{display:block; animation:slide var(--dur-slow) var(--ease-out)}
@keyframes slide{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.zone-detail b{color:var(--text)}
@media(max-width:700px){
  .zone{grid-template-columns:1fr auto; row-gap:8px}
  .zone .rngbox{grid-column:1/-1}
  .zone .rngbox{display:flex; align-items:baseline; gap:9px}
}

/* Scam-Check: ankreuzbare Warnsignal-Liste (Scam-Check-Seite) */
.scam-list{display:grid; gap:8px}
.scam-item{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:12px;
  padding:13px 16px; cursor:pointer; color:inherit; font:inherit;
  transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.scam-item:hover{border-color:var(--line)}
.scam-item .box{
  width:22px; height:22px; border-radius:6px; border:2px solid var(--line); flex:none;
  display:grid; place-items:center; transition:background var(--dur-fast), border-color var(--dur-fast);
}
.scam-item .box::after{content:""; width:11px; height:7px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px); opacity:0}
.scam-item .txt b{font-family:var(--font-display); font-weight:700; font-size:14.5px; line-height:1.4}
.scam-item .weight{margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2); flex:none}
.scam-item[data-checked="true"]{background:var(--surface); border-color:var(--red)}
.scam-item[data-checked="true"] .box{background:var(--red); border-color:var(--red)}
.scam-item[data-checked="true"] .box::after{opacity:1}
.score-meta{font-family:var(--font-mono); font-size:12.5px; color:var(--muted); margin-top:10px}
.score-meta b{color:var(--text); font-weight:700}

/* Haltefrist-Tracker: Eingabeformular + Übersichtstabelle */
.hf-form{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr auto; gap:16px; align-items:end}
@media(max-width:900px){.hf-form{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hf-form{grid-template-columns:1fr}}
.hf-field input[type="text"], .hf-field input[type="date"], .hf-field input[type="number"]{
  width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; color:var(--text); font-family:var(--font-body); font-size:15px;
}
.hf-field input:focus{outline:2px solid var(--brand); outline-offset:1px}
.hf-field .opt{color:var(--muted-2); font-weight:400; text-transform:none; letter-spacing:0}
.hf-field .quick{margin-top:8px}
#hfAdd{white-space:nowrap}
.hf-err{color:var(--red); font-size:13.5px; margin:12px 0 0}

.table-scroll{overflow-x:auto}
.holdings-table{width:100%; border-collapse:collapse; font-size:14px; min-width:640px}
.holdings-table th{
  text-align:left; font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted-2); font-weight:600; padding:14px 16px; border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
.holdings-table td{padding:13px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle; white-space:nowrap}
.holdings-table tbody tr:last-child td{border-bottom:0}
.hf-badge{
  display:inline-block; font-family:var(--font-mono); font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:999px; color:var(--bc); background:color-mix(in srgb, var(--bc) 14%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, white)){ .hf-badge{background:var(--surface-2)} }
.hf-del{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--line-soft); background:transparent;
  color:var(--muted-2); cursor:pointer; font-size:13px; line-height:1;
  transition:color var(--dur-fast), border-color var(--dur-fast);
}
.hf-del:hover{color:var(--red); border-color:var(--red)}
.hf-empty{padding:34px 20px; text-align:center; color:var(--muted); font-size:14.5px}
.hf-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px}
.hf-status{font-family:var(--font-mono); font-size:12px; color:var(--muted-2)}

/* Rechner */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px); align-items:start}
@media(max-width:860px){.calc{grid-template-columns:1fr}}
.panel{padding:var(--pad)}
label.fl{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:9px}
.inputrow{display:flex; align-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:0 15px}
.inputrow span{font-family:var(--font-mono); color:var(--muted-2); font-size:15px}
.inputrow input{
  flex:1; background:transparent; border:0; color:var(--text); padding:14px 10px;
  font-family:var(--font-display); font-weight:700; font-size:24px; width:100%;
}
.inputrow input:focus{outline:none}
.quick{display:flex; gap:7px; margin-top:11px; flex-wrap:wrap}
.quick button{
  font-family:var(--font-mono); font-size:12.5px; background:var(--surface-2); color:var(--muted);
  border:1px solid var(--line-soft); border-radius:8px; padding:6px 11px; cursor:pointer;
  transition:color var(--dur-fast), border-color var(--dur-fast);
}
.quick button:hover{color:var(--text); border-color:var(--line)}

.sliderblock{margin-top:26px}
.slidertop{display:flex; align-items:baseline; gap:10px; margin-bottom:12px}
.slidertop .cur{font-family:var(--font-display); font-weight:800; font-size:26px}
.slidertop .cl{font-family:var(--font-mono); font-size:13px}
.slidertop button{
  margin-left:auto; font-family:var(--font-mono); font-size:11.5px; background:transparent;
  border:1px solid var(--line); color:var(--muted); border-radius:7px; padding:5px 10px; cursor:pointer;
}
.slidertop button:hover{color:var(--text); border-color:var(--brand)}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:12px; border-radius:999px;
  background:var(--spectrum); box-shadow:inset 0 0 0 1px rgba(34,20,10,.08); cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--text);
  border:4px solid var(--surface); box-shadow:0 2px 10px rgba(34,20,10,.35);
}
input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--text); border:4px solid var(--surface);
}
.rangelabels{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--muted-2); margin-top:9px}

.result{
  padding:var(--pad); box-shadow:var(--shadow-md);
  background:linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
}
.result .out{font-family:var(--font-display); font-weight:800; font-size:clamp(38px,6.6vw,56px); line-height:1; letter-spacing:-.03em; color:var(--rc,var(--z1)); font-variant-numeric:tabular-nums}
.result .outsub{font-family:var(--font-mono); font-size:13px; color:var(--muted); margin-top:10px}
.resgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px}
.resgrid div{background:var(--surface); border:1px solid var(--line-soft); border-radius:11px; padding:12px 14px}
.resgrid .k{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2)}
.resgrid .v{font-family:var(--font-display); font-weight:700; font-size:20px; margin-top:4px}
.advice{margin-top:20px; font-size:14.5px; color:var(--muted); background:var(--surface); border:1px solid var(--line-soft); border-radius:10px; padding:13px 16px}
.disclaimer{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2); margin-top:18px; line-height:1.6}

/* Backtest */
.bt{margin-top:clamp(16px,2.4vw,26px); padding:var(--pad)}
.bt-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px}
@media(max-width:640px){.bt-grid{grid-template-columns:1fr}}
.bt-col{background:var(--surface-2); border:1px solid var(--line-soft); border-radius:13px; padding:16px 17px}
.bt-col.win{border-color:rgba(31,122,68,.45)}
.bt-col h4{margin:0 0 12px; font-family:var(--font-display); font-size:15px; font-weight:700}
.bt-row{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:13px; padding:5px 0; color:var(--muted)}
.bt-row b{color:var(--text); font-weight:600}
.bt-note{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2); margin-top:14px}

/* Faktoren — bewusst EINFARBIG: die sechs Faktoren stehen nicht mit
   den fünf Zonen in Beziehung, ein Regenbogen pro Zeile wäre nur
   Dekoration. Unterschieden wird über Gewicht % und Balkenlänge. */
.factors{display:grid; gap:9px; background:none; border:0; box-shadow:none; padding:0}
.factor{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm)}
.factor-top{display:flex; align-items:baseline; gap:12px}
.factor-top .fn{font-family:var(--font-display); font-weight:700; font-size:16px}
.factor-top .fw{margin-left:auto; font-family:var(--font-mono); font-size:14px; color:var(--brand-text)}
.factor .fd{color:var(--muted); font-size:14px; margin-top:5px}
.fbar{height:5px; border-radius:3px; background:var(--surface-2); margin-top:11px; overflow:hidden}
.fbar i{display:block; height:100%; background:var(--brand); width:0; transition:width 1s var(--ease-out)}

/* Timeline — bewusst als Karten-Raster statt als weitere Zeilenliste
   (davon gibt es auf der Seite schon genug): jede Karte bekommt eine
   farbige Kopfleiste in der Zonenfarbe (--tc) und stapelt Datum, Wert
   und Text vertikal, statt sie in feste Spalten zu zwängen — dadurch
   passen auch längere Wörter (Zonen-Namen) ohne Überlappung.
   Layout wird sowohl von Fear-&-Greed als auch Heatzone-Chart genutzt. */
.tl{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.tl-item{
  display:flex; flex-direction:column; gap:9px;
  background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow-sm);
  border-radius:var(--radius); border-top:3px solid var(--tc); padding:18px 20px;
}
.tl-item .d{font-family:var(--font-display); font-weight:700; font-size:15px}
.tl-item .btc{font-family:var(--font-mono); font-size:12px; color:var(--muted-2); margin-top:1px}
.tl-item .val{font-family:var(--font-display); font-weight:800; font-size:23px; color:var(--tc); font-variant-numeric:tabular-nums}
.tl-item .txt{color:var(--muted); font-size:13.5px; line-height:1.55}

/* Fehler / FAQ — Accordion */
.acc{display:grid; gap:8px}
.acc details{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm)}
.acc details[open]{box-shadow:var(--shadow-md)}
.acc summary{
  list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; gap:13px;
  font-family:var(--font-display); font-weight:700; font-size:16px;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary .no{font-family:var(--font-mono); font-size:12px; color:var(--muted-2); font-weight:400}
.acc summary .plus{margin-left:auto; color:var(--muted-2); font-family:var(--font-mono); transition:transform var(--dur-base) var(--ease-out)}
.acc details[open] summary .plus{transform:rotate(45deg)}
.acc .body{padding:0 18px 18px; color:var(--muted); font-size:15px}
.acc .fix{margin-top:11px; padding:11px 14px; background:var(--surface-2); border-radius:9px; color:var(--text); font-size:14.5px}
.acc .fix b{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--z3); display:block; margin-bottom:3px; font-weight:600}

/* Grenzen: nummerierte Liste statt Karten-Raster — passt zum
   Nummerierungsmotiv der Accordions, bricht das Grid-Muster auf. */
.limits{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden}
.limit{
  display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start;
  background:var(--surface); padding:18px 20px; border:0; border-radius:0; box-shadow:none;
  counter-increment:limitno;
}
.limit::before{
  content:counter(limitno,decimal-leading-zero); font-family:var(--font-mono); font-size:13px;
  color:var(--muted-2); padding-top:2px;
  grid-column:1; grid-row:1/-1;
}
.limits{counter-reset:limitno}
.limit h3{grid-column:2; font-size:15.5px; font-weight:700; margin-bottom:5px}
.limit p{grid-column:2; color:var(--muted); font-size:14px; margin:0}

/* Callout — ruhige Randnotiz, keine Farb-Leiste. Unterschieden wird
   über die fette Anmoderation im Text, nicht über eine Zonenfarbe. */
.callout{
  margin-top:clamp(20px,3vw,30px); background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:19px 22px; color:var(--muted); font-size:15px;
}
.callout b{color:var(--text)}

/* Footer — Dark Island (Navy als Anker, siehe Regel weiter oben),
   ein Tick heller als Header/Hero (--dark-bg-2) für eine ruhige
   Abgrenzung vom hellen Seiteninhalt darüber. */
footer{
  background:var(--dark-bg-2); border-top:1px solid var(--line-soft);
  padding:clamp(38px,5.5vw,58px) 0; font-size:13.5px; color:var(--muted-2);
}
.foot-grid{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start}
footer .legal{max-width:62ch; font-size:12.5px; line-height:1.7}
.foot-links{display:flex; flex-wrap:wrap; gap:18px; margin-top:18px}
.foot-links button, .foot-links a{
  background:none; border:0; padding:0; cursor:pointer; color:var(--muted);
  font-family:var(--font-body); font-size:13.5px; border-bottom:1px solid transparent;
}
.foot-links button:hover, .foot-links a:hover{color:var(--text); border-bottom-color:var(--brand-onDark)}
.foot-links a{color:var(--muted)}

/* ============ Contrarian-/Vergleichs-Erklärung ============ */
.princ{display:grid; grid-template-columns:1fr 1fr; gap:10px; position:relative}
@media(max-width:800px){.princ{grid-template-columns:1fr}}
.princ .card{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-sm)}
.princ .card.accent{background:linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%); box-shadow:var(--shadow-md)}
.princ .tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:10px;
}
.princ .card.accent .tag{color:var(--brand-text)}
.princ h3{font-size:17px; font-weight:800; letter-spacing:0}
.princ p{color:var(--muted); font-size:14.5px; margin:8px 0 0}
.princ .formula{
  font-family:var(--font-mono); font-size:13px; color:var(--text); margin-top:14px;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:9px; padding:10px 13px;
}
.princ .card.accent .formula{background:var(--surface)}
.princ .formula span{color:var(--muted-2)}

.multibars{margin-top:10px; padding:22px clamp(14px,3vw,26px) 18px}
.mb-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:24px}
.mb-head .t{font-family:var(--font-display); font-weight:700; font-size:15px}
.mb-head .s{font-family:var(--font-mono); font-size:12px; color:var(--muted-2); margin-left:auto}
.mb-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(6px,1.4vw,14px); align-items:end}
.mb-col{text-align:center}
.mb-bar{
  height:120px; display:flex; align-items:flex-end; justify-content:center;
  border-bottom:1px solid var(--line); margin-bottom:11px;
}
.mb-bar i{
  display:block; width:100%; max-width:54px; border-radius:6px 6px 0 0; background:var(--mc);
  height:0; transition:height .7s var(--ease-out); position:relative; opacity:.92;
}
.mb-bar i::after{
  content:attr(data-amt); position:absolute; top:-21px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:11.5px; color:var(--text); white-space:nowrap;
}
.mb-zone{font-family:var(--font-mono); font-size:11px; color:var(--mc); font-weight:600}
.mb-range{font-family:var(--font-mono); font-size:10.5px; color:var(--muted-2); margin-top:2px}
@media(max-width:560px){
  .mb-bar{height:86px}
  .mb-zone{font-size:9.5px} .mb-range{display:none}
  .mb-bar i::after{font-size:10px; top:-18px}
}

/* Multiplikatoren anpassen */
.multiedit{margin-top:24px; border-top:1px solid var(--line-soft); padding-top:18px}
.multiedit summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2);
}
.multiedit summary::-webkit-details-marker{display:none}
.multiedit summary:hover{color:var(--text)}
.multiedit summary .plus{margin-left:auto; transition:transform var(--dur-base) var(--ease-out)}
.multiedit[open] summary .plus{transform:rotate(45deg)}
.me-rows{display:grid; gap:7px; margin-top:16px}
.me-row{display:grid; grid-template-columns:1fr 92px; gap:12px; align-items:center}
.me-row .lbl{font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:9px}
.me-row .lbl i{width:8px; height:8px; border-radius:50%; background:var(--mc); flex:none}
.me-row input{
  width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; color:var(--text); font-family:var(--font-mono); font-size:14px; text-align:right;
}
.me-row input:focus{outline:none; border-color:var(--brand)}
.me-foot{display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap}
.me-foot button{
  font-family:var(--font-mono); font-size:12px; background:var(--surface-2); color:var(--muted);
  border:1px solid var(--line); border-radius:8px; padding:7px 12px; cursor:pointer;
}
.me-foot button:hover{color:var(--text); border-color:var(--brand)}
.me-foot span{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2)}
.linky{
  background:none; border:0; padding:0; cursor:pointer; color:var(--brand-text);
  font-family:var(--font-mono); font-size:11.5px; border-bottom:1px solid rgba(0,82,255,.4);
}
.linky:hover{border-bottom-color:var(--brand)}

/* ============================================================
   EINBLENDEN BEIM SCROLLEN
   Kein einzelner pauschaler Effekt: der Hero unterscheidet sich
   bewusst von den Sections darunter (siehe body.home/.hero-Regeln),
   und Karten-Reihen blenden gestaffelt statt als Block ein.
   ================================================================ */
.reveal{opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out)}
html.js .reveal:not(.in){opacity:0; transform:translateY(10px)}

.tools-live.reveal .tool,
.notes.reveal .note,
.channels.reveal .channel,
.plats.reveal .plat,
.tools-soon.reveal .soon-row{
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
html.js .tools-live.reveal:not(.in) .tool,
html.js .notes.reveal:not(.in) .note,
html.js .channels.reveal:not(.in) .channel,
html.js .plats.reveal:not(.in) .plat,
html.js .tools-soon.reveal:not(.in) .soon-row{
  opacity:0; transform:translateY(8px);
}
.tools-live .tool:nth-child(1), .notes .note:nth-child(1), .channels .channel:nth-child(1), .plats .plat:nth-child(1), .tools-soon .soon-row:nth-child(2){transition-delay:0ms}
.tools-live .tool:nth-child(2), .notes .note:nth-child(2), .channels .channel:nth-child(2), .plats .plat:nth-child(2), .tools-soon .soon-row:nth-child(3){transition-delay:60ms}
.notes .note:nth-child(3), .channels .channel:nth-child(3), .plats .plat:nth-child(3), .tools-soon .soon-row:nth-child(4){transition-delay:120ms}
.notes .note:nth-child(4), .channels .channel:nth-child(4), .plats .plat:nth-child(4), .tools-soon .soon-row:nth-child(5){transition-delay:180ms}
.notes .note:nth-child(5), .channels .channel:nth-child(5), .plats .plat:nth-child(5), .tools-soon .soon-row:nth-child(6){transition-delay:240ms}
.notes .note:nth-child(n+6), .channels .channel:nth-child(n+6), .plats .plat:nth-child(n+6), .tools-soon .soon-row:nth-child(n+7){transition-delay:300ms}

/* ================================================================
   STARTSEITE
   ================================================================ */
.hub-hero{
  padding:clamp(40px,7vw,84px) clamp(20px,4vw,40px) clamp(30px,5vw,52px);
  margin-top:clamp(14px,2.4vw,22px); margin-bottom:clamp(28px,4vw,44px); position:relative;
  background:var(--hero-gradient); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
}
.hub-hero h1{font-size:clamp(30px,5.6vw,54px); max-width:23ch}
.hub-hero h1 em{font-style:normal; color:var(--brand-onDark); font-weight:900}
.hub-hero .lead{color:var(--muted); font-size:clamp(15px,1.7vw,18.5px); max-width:58ch; margin-top:18px}
.hub-cta{display:flex; flex-wrap:wrap; gap:11px; margin-top:26px}
.trust-line{
  margin-top:16px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em;
  color:var(--muted-2);
}
.trust-line span{margin:0 8px}

.btn{
  display:inline-flex; align-items:center; gap:9px; border-radius:12px; padding:12px 20px;
  font-family:var(--font-display); font-weight:700; font-size:14.5px; cursor:pointer;
  text-decoration:none; border:1px solid var(--line); background:var(--surface); color:var(--text);
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover{border-color:var(--brand); transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.btn:active{transform:scale(.97); transition-duration:.08s}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.primary:hover{background:#0044D1; border-color:#0044D1}
.btn.red{background:var(--red); border-color:var(--red); color:#fff}
.btn.red:hover{background:#B8151F; border-color:#B8151F}


.usehint{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:13px 17px; margin-bottom:16px;
  font-size:14.5px; color:var(--text);
}
.usehint .tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--brand); color:#fff; padding:3px 9px; border-radius:5px; font-weight:600; flex:none;
}
.usehint span{color:var(--muted)}

.tools-live{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px}
.tools-soon{margin-top:22px; border-top:1px solid var(--line-soft)}
.tools-soon .soon-head{
  display:flex; align-items:baseline; gap:10px; padding-top:20px; margin-bottom:2px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2);
}
.soon-row{
  display:grid; grid-template-columns:1fr auto; gap:6px 20px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--line-soft);
}
.soon-row h4{font-family:var(--font-display); font-weight:700; font-size:15.5px; margin:0}
.soon-row p{grid-column:1/-1; color:var(--muted); font-size:13.5px; margin:0}
.soon-row .tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-2); border:1px solid var(--line-soft); border-radius:5px; padding:3px 8px; white-space:nowrap;
}
.tool{
  position:relative; display:flex; flex-direction:column; gap:8px; text-decoration:none; border:1px solid var(--line-soft);
  background:var(--surface); border-radius:var(--radius); padding:21px 22px; color:var(--text); box-shadow:var(--shadow-sm);
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.tool:hover{border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--shadow-md)}
.tool.soon{color:var(--muted); cursor:default}
.tool.soon h3{color:var(--muted)}
.tool .badge, .note .badge{
  position:absolute; top:16px; right:17px; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:5px; font-weight:600;
}
.tool .badge.live, .note .badge.live{background:var(--z3); color:#fff}
.tool .badge.soon, .note .badge.soon{background:var(--surface-2); color:var(--muted-2); border:1px solid var(--line)}
.tool h3{font-size:17px; font-weight:800; letter-spacing:-.01em; padding-right:70px}
.tool p{color:var(--muted); font-size:14px; margin:0; line-height:1.6}
.tool .foot{
  margin-top:auto; padding-top:14px; font-family:var(--font-display); font-weight:700; font-size:13.5px;
  color:var(--brand-text); display:flex; align-items:center; gap:8px;
}
.tool .foot .arr{transition:transform var(--dur-base) var(--ease-out)}
a.tool:hover .foot .arr{transform:translateX(4px)}
.tool .live-val{
  font-family:var(--font-display); font-weight:800; font-size:29px; line-height:1;
  font-variant-numeric:tabular-nums; margin-top:4px;
}
.tool .live-val small{font-family:var(--font-mono); font-size:12px; font-weight:400; color:var(--muted); margin-left:9px}

/* Kanal / Community */
.channels{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:11px}
.channel{
  display:flex; flex-direction:column; gap:7px; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:20px 21px;
  box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.channel:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.channel .head{display:flex; align-items:center; gap:11px; margin-bottom:2px}
.channel .ic{
  width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:color-mix(in srgb, var(--ch) 14%, white); border:1px solid color-mix(in srgb, var(--ch) 30%, white);
}
@supports not (background: color-mix(in srgb, red 10%, white)){
  .channel .ic{background:var(--surface-2); border-color:var(--line)}
}
.channel .ic svg{width:19px; height:19px; display:block; fill:var(--ch)}
.channel .ic img{width:100%; height:100%; object-fit:contain; display:block; padding:3px}
.channel .k{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ch,var(--brand-text))}
.channel h3{font-size:16.5px; font-weight:800}
.channel p{color:var(--muted); font-size:13.5px; margin:0}

/* Plattformen */
.plat-group{margin-top:30px}
.plat-group:first-child{margin-top:0}
.plat-group > h3{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); font-weight:500; margin-bottom:12px; display:flex; align-items:center; gap:12px;
}
.plat-group > h3::after{content:""; flex:1; height:1px; background:var(--line-soft)}

.plats{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:9px}
.plat{
  display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:15px;
  text-decoration:none; color:var(--text); background:var(--surface);
  border:1px solid var(--line-soft); border-radius:13px; padding:14px 16px; box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.plat:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.plat .logo{
  position:relative; width:46px; height:46px; border-radius:12px; overflow:hidden;
  background:var(--lb,#FFFFFF); flex:none; border:1px solid var(--line-soft);
}
.plat .logo i{
  position:absolute; inset:0; z-index:0; display:grid; place-items:center; font-style:normal;
  font-family:var(--font-display); font-weight:900; font-size:19px; color:var(--lt,#0B1B38);
  background:var(--lc,#E8EDF5);
}
.plat .logo img{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  object-fit:contain; padding:6px; background:var(--lb,#FFFFFF); display:block;
}
.plat .body{min-width:0}
.plat .n{font-family:var(--font-display); font-weight:700; font-size:15.5px; display:block; line-height:1.25}
.plat .d{color:var(--muted); font-size:13px; margin-top:3px; line-height:1.5; display:block}
.plat .ad{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); border:1px solid var(--line); border-radius:4px; padding:2px 6px;
  align-self:flex-start; flex:none;
}
@media(max-width:520px){
  .plats{grid-template-columns:1fr}
  .plat{grid-template-columns:40px 1fr auto; gap:12px; padding:13px 14px}
  .plat .logo{width:40px; height:40px}
  .plat .d{font-size:12.5px}
}

.adnotice{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:16px 19px; color:var(--muted); font-size:14px; margin-bottom:22px;
}
.adnotice b{color:var(--text)}

/* Wissensartikel */
.notes{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:11px}
.note{
  position:relative; display:flex; flex-direction:column; gap:9px; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:22px 23px;
  box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.note:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.note.soon{color:var(--muted)}
.note.soon h3{color:var(--text)}
.note .kicker{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); display:flex; align-items:center; gap:9px;
}
.note h3{font-size:17.5px; font-weight:800; letter-spacing:-.012em; line-height:1.25; padding-right:52px}
.note p{color:var(--muted); font-size:14px; margin:0; line-height:1.6}
.note.feature{
  grid-column:span 2; background:linear-gradient(155deg,var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:var(--shadow-md);
}
@media(max-width:700px){.note.feature{grid-column:span 1}}

/* Guide-Karte */
.guide{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3.5vw,40px); align-items:center;
  background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow-md);
  border-radius:var(--radius-lg); padding:clamp(20px,3.5vw,36px);
}
@media(max-width:720px){.guide{grid-template-columns:1fr; text-align:left}}
.guide .cover{
  width:clamp(140px,17vw,196px); border-radius:10px; display:block; height:auto;
  box-shadow:0 16px 36px rgba(34,20,10,.22); border:1px solid var(--line);
}
.guide .kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--z3); margin-bottom:12px;
}
.guide h3{font-size:clamp(21px,3vw,29px); font-weight:800; letter-spacing:-.015em; line-height:1.18}
.guide p{color:var(--muted); font-size:15.5px; margin:13px 0 0; max-width:52ch}
.guide .meta{
  display:flex; flex-wrap:wrap; gap:16px; margin-top:16px;
  font-family:var(--font-mono); font-size:12px; color:var(--muted-2);
}
.guide .actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.freebadge{
  display:inline-flex; align-items:center; gap:8px; background:var(--z3); color:#fff;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; padding:5px 11px; border-radius:6px; margin-bottom:14px;
}

/* Über mich */
.about{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(16px,3vw,30px); align-items:start}
@media(max-width:820px){.about{grid-template-columns:1fr}}
.about .text p{color:var(--muted); font-size:15.5px; line-height:1.72}
.about .text p:first-child{font-size:17px; color:var(--text)}
.facts{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow-sm)}
.facts .row{
  display:flex; justify-content:space-between; gap:14px; padding:11px 0;
  border-bottom:1px solid var(--line-soft); font-size:14px;
}
.facts .row:last-child{border-bottom:0}
.facts .row span{color:var(--muted-2); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase}
.facts .row b{font-weight:600; text-align:right}
.about-photo{
  display:block; width:100%; max-width:220px; aspect-ratio:1/1; margin:0 auto 16px;
  border-radius:50%; object-fit:cover; box-shadow:0 12px 26px rgba(34,20,10,.18);
}
@media(max-width:820px){.about-photo{max-width:170px}}

/* Abschluss-Band */
.cta-band{
  background:linear-gradient(150deg, rgba(0,82,255,.14), rgba(217,27,38,.06)), var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,4vw,44px);
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
  box-shadow:var(--shadow-sm);
}
.cta-band h2{font-size:clamp(21px,3vw,30px); max-width:18ch}
.cta-band p{color:var(--muted); font-size:15px; margin:12px 0 0; max-width:46ch}
.cta-band .actions{display:flex; flex-wrap:wrap; gap:10px}

/* ============================================================
   RECHTSTEXT-SEITEN
   ================================================================ */
.legal-page{max-width:820px; margin:clamp(30px,6vw,64px) auto; padding:clamp(24px,4.5vw,44px) clamp(20px,4vw,40px)}
.legal-page h1{font-size:clamp(26px,4.2vw,38px); margin-bottom:8px}
.legal-page h3{
  font-family:var(--font-display); font-weight:700; font-size:17px;
  margin:30px 0 9px; color:var(--text); letter-spacing:0;
}
.legal-page p, .legal-page li{color:var(--muted); font-size:15px; line-height:1.7}
.legal-page ul{padding-left:20px}
.legal-page b{color:var(--text)}
.legal-page address{font-style:normal; color:var(--muted); font-size:15px; line-height:1.85}
.legal-stamp{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  color:var(--muted-2); display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.legal-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:28px 0 0}
.legal-tabs a{
  font-family:var(--font-mono); font-size:12.5px; text-decoration:none; color:var(--muted);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:9px; padding:8px 14px;
}
.legal-tabs a:hover{color:var(--text); border-color:var(--brand)}
.legal-tabs a[aria-current="page"]{background:var(--surface-2); color:var(--text); border-color:var(--line)}
.legal-note{
  margin-top:26px; padding:14px 16px; background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:10px; font-size:13px; color:var(--muted-2); line-height:1.65;
}

/* ============ Heatzone Chart: eigene Bausteine ============ */
.pr-ticker{
  margin-top:clamp(24px,4vw,36px); display:flex; align-items:center; flex-wrap:wrap; gap:18px 26px;
  padding:18px clamp(18px,3vw,28px);
}
.pr-price{display:flex; align-items:baseline; gap:10px}
.pr-price span{font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3.4vw,32px); letter-spacing:-.02em}
.pr-price small{color:var(--muted-2); font-size:12.5px}
.pr-sep{width:1px; height:28px; background:var(--line-soft)}
.pr-zone{display:flex; align-items:center; gap:9px; font-size:15px}
.pr-dot{width:11px; height:11px; border-radius:50%; background:var(--muted-2); box-shadow:0 0 0 4px var(--surface-2)}
.pr-mini{color:var(--muted); font-size:14px}
.pr-mini b{color:var(--text)}
@media(max-width:640px){.pr-sep{display:none}}

.chart-card.big .chart-host{height:clamp(320px,52vw,540px)}

.zone-strip{display:flex; border-radius:11px; overflow:hidden; margin-top:16px; gap:1px}
.zone-strip a{flex:1; min-width:88px; text-align:center; padding:11px 6px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.04em; text-transform:uppercase; color:#fff; font-weight:700; text-decoration:none; opacity:.94; transition:opacity var(--dur-fast)}
.zone-strip a:hover{opacity:1}

/* ============ Halving-Countdown: eigene Bausteine ============
   Nur mit .pg-halving gescoped (Body-Klasse dieser Seite), damit die
   geteilten Klassen .bignum/.tl-item auf Fear & Greed und Heatzone
   Chart unangetastet bleiben — die setzen dort teils per JS eigene
   Farben (z.B. Zonen-Farbe auf #bigVal), die eine globale Änderung
   hier überschreiben würde. */
.pg-halving .bignum .v{
  background:linear-gradient(100deg, var(--brand-vivid) 0%, #A82F6E 55%, var(--red-vivid) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pg-halving #epochBar{background:linear-gradient(90deg, var(--brand-vivid), var(--red-vivid))}
.pg-halving .tl-item.next-halving{
  background:linear-gradient(155deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:var(--shadow-md);
}
.pg-halving .gauge-card{position:relative; overflow:hidden}
.pg-halving .gauge-card::before{
  content:""; position:absolute; z-index:0; top:-40%; right:-15%; width:60%; aspect-ratio:1;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(217,27,38,.16) 0%, rgba(46,105,255,.10) 45%, transparent 72%);
}
.pg-halving .gauge-card > *{position:relative; z-index:1}

/* ============ Sparplan-Rechner: eigene Bausteine ============
   Zweispaltiges App-Layout (schmale Eingabe-Spalte links, breite
   Ergebnis-Spalte rechts) statt des generischen .calc-1fr-1fr-Rasters —
   dafür hier ein eigenes Raster statt die geteilte .calc-Klasse
   umzubauen (würde die anderen Rechner-Seiten mitbetreffen). */
.sp-layout{display:grid; grid-template-columns:340px 1fr; gap:16px; align-items:start}
@media(max-width:900px){.sp-layout{grid-template-columns:1fr}}
.sp-side{display:flex; flex-direction:column; gap:22px; position:sticky; top:80px}
@media(max-width:900px){.sp-side{position:static}}
.sp-main{display:flex; flex-direction:column; gap:16px}

.sp-field{display:flex; flex-direction:column; gap:9px}
.sp-field + .sp-field{margin-top:20px}
.sp-field-head{display:flex; justify-content:space-between; align-items:baseline}
.sp-field-head b{font-family:var(--font-display); font-weight:700; font-size:20px; font-variant-numeric:tabular-nums}

.seg{display:flex; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:11px; padding:4px; gap:2px}
.seg button{
  flex:1; font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--muted);
  background:transparent; border:0; border-radius:8px; padding:9px 10px; cursor:pointer;
  transition:background var(--dur-fast), color var(--dur-fast);
}
.seg button[aria-pressed="true"]{background:var(--brand); color:#fff}

.coinpicker{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:clamp(20px,3vw,30px)}
@media(max-width:720px){.coinpicker{grid-template-columns:repeat(2,1fr)}}
.coinpicker button{
  display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; font-size:14.5px;
  color:var(--muted); background:var(--surface); border:1px solid var(--line-soft); border-radius:13px;
  padding:17px 18px; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:border-color var(--dur-fast), color var(--dur-fast);
}
.coinpicker button:hover{color:var(--text); border-color:var(--brand)}
.coinpicker button[aria-pressed="true"]{color:var(--text); border-color:var(--brand); box-shadow:0 0 0 1px var(--brand)}
.coinpicker .ic{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:11.5px; font-weight:800; flex:none}

.exchbtns{display:flex; flex-wrap:wrap; gap:7px}
.exchbtns button{
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted); background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:9px; padding:7px 11px; cursor:pointer; text-align:left; line-height:1.4;
  transition:color var(--dur-fast), border-color var(--dur-fast);
}
.exchbtns button b{display:block; color:var(--text); font-family:var(--font-body); font-size:12.5px}
.exchbtns button:hover{border-color:var(--brand)}
.exchbtns button[aria-pressed="true"]{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand)}

/* Ergebnis-Header: großes Icon + große Zahl + Delta-Pille, mehr Wumms
   als das bisherige reine .result-Textfeld. */
.sp-hero-result{
  padding:var(--pad); box-shadow:var(--shadow-md); position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
}
.sp-hero-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.sp-hero-left{display:flex; align-items:center; gap:16px}
.sp-hero-left .ic{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:17px; font-weight:800; flex:none; box-shadow:0 6px 16px rgba(0,0,0,.18)}
.sp-hero-left .num{font-family:var(--font-display); font-weight:800; font-size:clamp(32px,5vw,46px); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums}
.sp-hero-left .sub{font-family:var(--font-mono); font-size:12px; color:var(--muted-2); margin-top:5px}
.delta-pill{
  font-family:var(--font-mono); font-size:13px; font-weight:700; padding:6px 13px; border-radius:999px;
  display:flex; align-items:center; gap:5px; flex:none;
}
.delta-pill.up{background:color-mix(in srgb, var(--z3) 16%, transparent); color:var(--z3)}
.delta-pill.down{background:color-mix(in srgb, var(--red) 14%, transparent); color:var(--red)}
@supports not (background: color-mix(in srgb, red 10%, white)){
  .delta-pill.up{background:var(--surface-2)} .delta-pill.down{background:var(--surface-2)}
}

.sp-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media(max-width:640px){.sp-stats{grid-template-columns:repeat(2,1fr)}}

.sp-row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(max-width:640px){.sp-row2{grid-template-columns:1fr}}
.sp-callout{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:15px 17px;
  box-shadow:var(--shadow-sm); font-size:13.5px;
}
.sp-callout .k{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:6px}
.sp-callout .v{font-family:var(--font-display); font-weight:700; font-size:19px}
.sp-callout p{color:var(--muted); margin:6px 0 0; font-size:13px; line-height:1.55}

.sp-cta{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:linear-gradient(120deg, rgba(0,82,255,.08), rgba(217,27,38,.06)); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:18px 20px;
}
.sp-cta p{margin:0; font-size:14px; color:var(--muted); max-width:44ch}
.sp-cta p b{color:var(--text)}

/* Zukunftsszenario */
.scenbtns{display:grid; grid-template-columns:1fr; gap:7px}
.scenbtns button{
  display:flex; align-items:center; justify-content:space-between; gap:10px; box-sizing:border-box;
  text-align:left; background:var(--surface); border:1px solid var(--line-soft); border-radius:11px;
  padding:12px 14px; cursor:pointer; box-shadow:var(--shadow-sm); transition:border-color var(--dur-fast);
}
.scenbtns button:hover{border-color:var(--brand)}
.scenbtns button[aria-pressed="true"]{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); background:var(--surface-2)}
.scenbtns .t{font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--text)}
.scenbtns .p{flex:none; font-family:var(--font-mono); font-size:12.5px; color:var(--muted-2); white-space:nowrap}

.hintbox{
  margin-top:9px; font-size:12.5px; line-height:1.55; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:9px; padding:10px 12px;
}
.sp-explain{color:var(--muted); font-size:13px; line-height:1.6; margin:-6px 0 0}

/* ================================================================
   PROJEKTSEITEN (Bitopex & Co.) — ein wiederverwendbares System für
   YouTube-Companion-Seiten zu einzelnen Projekten/Plattformen. Nutzt
   bewusst so viel wie möglich vom bestehenden Baukasten (.hero,
   .stats/.stat, .limits/.limit, .princ, .acc, .note, .callout,
   .disclaimer) statt ein zweites Designsystem aufzumachen — nur die
   Bausteine, die es wirklich noch nicht gibt, kommen hier neu dazu.
   ================================================================ */

/* Status-Pille — dezent (Punkt + Text), keine ganze Karte in Ampelfarbe. */
.proj-pill{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px;
  color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:6px 13px;
}
.proj-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--sc,var(--z3)); flex:none}

/* Hero: Text links, Dashboard-Card rechts (Desktop) / untereinander (Mobile) */
.proj-hero-grid{display:grid; grid-template-columns:1fr 380px; gap:clamp(24px,4vw,44px); align-items:start; margin-top:clamp(20px,3vw,30px)}
@media(max-width:860px){.proj-hero-grid{grid-template-columns:1fr}}

/* Dashboard-Card — helle Karte im dunklen Hero, wie .gauge-card */
.pdb-card{padding:22px 24px}
.pdb-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px}
.pdb-name{font-family:var(--font-display); font-weight:800; font-size:17px; letter-spacing:-.01em}
.pdb-sub{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2)}
.pdb-rows{display:grid; gap:9px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft)}
.pdb-row{display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px}
.pdb-row span{color:var(--muted)}
.pdb-row b{font-weight:700}
.pdb-metrics{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft)}
.pdb-metric{display:flex; flex-direction:column; gap:4px}
.pdb-metric .l{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2)}
.pdb-metric .v{font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.01em; font-variant-numeric:tabular-nums}

/* Statuskarte im "Mein aktueller Stand"-Bereich */
.proj-assess p{color:var(--muted); font-size:15px; line-height:1.7; margin-top:16px}

/* Performance-Highlight-Karten (2 neueste Werte) */
.proj-perf-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.pcard{
  background:var(--surface); border:1px solid var(--line-soft); border-top:3px solid var(--pc,var(--brand));
  border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px 20px;
}
.pcard-k{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2)}
.pcard-v{font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.4vw,32px); letter-spacing:-.01em; margin-top:6px; font-variant-numeric:tabular-nums}
.pcard-d{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2); margin-top:8px}

/* Vollständige Werte-Liste */
.proj-perf-list{display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden}
.prow{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; background:var(--surface); padding:13px 18px}
.prow-d{font-family:var(--font-mono); font-size:12.5px; color:var(--muted-2); flex:none}
.prow-vals{display:flex; gap:20px; flex-wrap:wrap}
.prow-vals span{font-size:14px}
.prow-vals b{font-variant-numeric:tabular-nums}
.prow-vals i{font-style:normal; color:var(--muted-2); font-size:12px; margin-left:3px}

/* Updates-Timeline: vertikale Linie mit Punkten statt Karten-Raster —
   liest sich chronologisch, funktioniert auf Mobile ohne Umbau. */
.proj-timeline{position:relative; display:flex; flex-direction:column; gap:0}
.proj-update{position:relative; padding:0 0 28px 30px; border-left:2px solid var(--line-soft)}
.proj-update:last-child{border-left-color:transparent; padding-bottom:0}
.proj-update::before{
  content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%;
  background:var(--surface); border:2px solid var(--uc,var(--brand));
}
.proj-update-date{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2); letter-spacing:.04em}
.proj-update h3{font-size:16.5px; font-weight:800; letter-spacing:-.01em; margin-top:5px}
.proj-update p{color:var(--muted); font-size:14.5px; line-height:1.65; margin-top:7px}
.proj-tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px}
.proj-tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted-2); background:var(--surface-2); border:1px solid var(--line-soft); border-radius:6px; padding:3px 8px;
}

/* Videos */
.sec-kicker{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-text); margin-bottom:10px;
}
.proj-video-thumb{
  position:relative; width:100%; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:16/9;
  background:var(--surface-2); display:block; padding:0; border:0; cursor:pointer; font:inherit;
}
.proj-video-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.proj-video-thumb .play{
  position:absolute; inset:0; display:grid; place-items:center; background:rgba(11,22,56,.28);
  transition:background var(--dur-base) var(--ease-out);
}
.proj-video-thumb .play svg{width:56px; height:56px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.proj-video-thumb:hover .play{background:rgba(11,22,56,.42)}

/* Grosses Hauptvideo — bewusst NUR das Thumbnail bekommt Rahmen/Schatten,
   keine zusaetzliche Card drumherum ("Card um eine Card"). */
.proj-video-thumb.big{
  max-width:900px; border-radius:var(--radius); border:1px solid var(--line-soft); box-shadow:var(--shadow-md);
}
.proj-video-thumb.big .play svg{width:72px; height:72px}
.proj-featured-meta{margin-top:18px; max-width:900px}
.proj-featured-meta h3{font-size:clamp(19px,2.6vw,24px); font-weight:800; letter-spacing:-.01em; line-height:1.3}
.proj-featured-meta p{color:var(--muted); font-size:14.5px; line-height:1.65; margin-top:10px}
.proj-video-dates{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:14px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted-2)}
.proj-video-dates b{font-family:var(--font-body); font-weight:600; color:var(--text)}
.proj-fresh{
  font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--brand-text);
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px 11px;
}

/* "Seit diesem Video passiert" — kompakte Bruecke zwischen Hauptvideo und den aktuellen Zahlen */
.proj-since{
  margin-top:28px; padding:20px 24px; background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:var(--radius); max-width:900px;
}
.proj-since-head{font-family:var(--font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px}
.proj-since-row{display:flex; flex-wrap:wrap; align-items:center; gap:20px 30px}
.proj-since-item{display:flex; flex-direction:column; gap:4px}
.proj-since-item .l{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2)}
.proj-since-item .v{font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.proj-since-link{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--brand); text-decoration:none; white-space:nowrap}
.proj-since-link:hover{text-decoration:underline}
@media(max-width:640px){.proj-since-row{gap:14px} .proj-since-link{margin-left:0; width:100%}}

.proj-video-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:16px}
.proj-video-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  overflow:hidden; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.proj-video-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.proj-video-card .proj-video-thumb .play svg{width:38px; height:38px}
.proj-video-card .body{padding:14px 16px}
.proj-video-card h4{font-size:14.5px; font-weight:700; letter-spacing:-.005em; line-height:1.35}
.proj-video-card .date{font-family:var(--font-mono); font-size:11px; color:var(--muted-2); margin-top:6px}
.proj-sub-head{font-size:15.5px; font-weight:700; margin-bottom:14px}

/* ROI-Fortschritt — reine Dashboard-Dokumentation, keine eigene
   Interpretation ("noch X $ bis..."), deshalb bewusst zurueckhaltend. */
.proj-roi{background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px 20px}
.proj-roi-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap}
.proj-roi-top .l{font-size:14px; font-weight:700}
.proj-roi-top .v{font-family:var(--font-mono); font-weight:800; font-size:15px; color:var(--brand-text); font-variant-numeric:tabular-nums}
.proj-roi .fbar{margin-top:12px}
.proj-roi .src-note span{margin:0 8px}

/* Auszahlungen: Gesamtsumme, Balkendiagramm nach Monat, Liste
   (letztere via bestehendes .proj-perf-list/.prow wiederverwendet). */
.wd-total{font-family:var(--font-display); font-weight:800; font-size:clamp(36px,6vw,50px); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.wd-total-meta{font-family:var(--font-mono); font-size:13px; color:var(--muted-2); margin-top:8px}
.wd-total-meta span{margin:0 8px}
.wd-chart{display:flex; align-items:flex-end; gap:clamp(10px,3vw,26px); height:220px; padding:8px 4px 0}
.wd-bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:8px; min-width:0}
.wd-bar-val{font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums}
.wd-bar-track{width:100%; max-width:64px; flex:1; display:flex; align-items:flex-end; background:var(--surface-2); border-radius:8px 8px 4px 4px; overflow:hidden}
.wd-bar-fill{width:100%; background:linear-gradient(180deg, var(--brand-vivid), var(--brand)); border-radius:8px 8px 0 0; min-height:4px; transition:height 1s var(--ease-out)}
.wd-bar-label{font-family:var(--font-mono); font-size:11px; color:var(--muted-2); text-align:center; white-space:nowrap}
@media(max-width:480px){.wd-chart{gap:8px; height:180px} .wd-bar-val{font-size:10.5px} .wd-bar-label{font-size:9.5px}}

/* Anbieterangaben (z. B. HypeRocket-Praesentation): eigener, bewusst
   zurueckhaltender Look — Quellen-Pill (.proj-source-tag nutzt dieselbe
   Optik wie .proj-affiliate-tag, siehe dort) + gedaempfter Balkenchart,
   damit diese Zahlen nie wichtiger wirken als die eigenen Account-Daten. */
.proj-source-tag{display:inline-block; margin-bottom:12px}
.hist-chart-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.hist-chart{display:flex; align-items:flex-end; gap:10px; height:150px; padding:8px 4px 0; min-width:640px}
.hist-bar-col{flex:1; min-width:34px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px}
.hist-bar-val{font-family:var(--font-mono); font-size:10px; color:var(--muted-2); white-space:nowrap}
.hist-bar-track{width:100%; max-width:26px; flex:1; display:flex; align-items:flex-end; background:var(--surface-2); border-radius:5px 5px 3px 3px; overflow:hidden}
.hist-bar-fill{width:100%; background:var(--muted-2); border-radius:5px 5px 0 0; min-height:3px}
.hist-bar-label{font-family:var(--font-mono); font-size:9.5px; color:var(--muted-2); text-align:center; white-space:nowrap}

/* Pro / zu wissen — zwei gleichwertige Spalten, keine Ampel-Tabelle */
.proj-audience{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:720px){.proj-audience{grid-template-columns:1fr}}
.proj-audience h3{font-size:15.5px; font-weight:700; margin-bottom:12px}
.proj-points{display:grid; gap:10px}
.proj-points.grid-2{grid-template-columns:1fr 1fr}
@media(max-width:720px){.proj-points.grid-2{grid-template-columns:1fr}}
.proj-point{
  display:flex; gap:13px; align-items:flex-start; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:15px 17px; box-shadow:var(--shadow-sm);
}
.proj-point .ic{
  flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:13px; color:#fff; background:var(--pc,var(--muted-2));
}
.proj-point h4{font-size:15px; font-weight:700; letter-spacing:-.005em}
.proj-point p{color:var(--muted); font-size:13.5px; line-height:1.6; margin-top:4px}

/* CTA / Partnerlink — bewusst kompakt und zurückhaltend, kein grosser
   Werbeblock. Sitzt spaet auf der Seite, erst nach den Inhalten. */
.proj-cta-card{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:22px 24px;
}
.proj-cta-card .top{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between}
.proj-cta-card p{color:var(--muted); font-size:14px; line-height:1.6; margin-top:12px; max-width:60ch}
.proj-cta-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px}
.proj-affiliate-tag, .proj-source-tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-2); border:1px solid var(--line); border-radius:6px; padding:4px 9px; flex:none;
}

/* Sticky Mobile-CTA */
.proj-sticky{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:var(--dark-bg); border-top:1px solid var(--dark-line-soft);
  padding:12px clamp(14px,4vw,20px); gap:10px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
@media(max-width:720px){.proj-sticky{display:flex} body.has-proj-sticky{padding-bottom:70px}}
.proj-sticky a{flex:1; text-align:center; padding:12px 10px; font-size:14px}

/* Projekt-Übersicht (/projekte/) */
.proj-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}

/* ============================================================
   RenditeX 2.0 — Startseite
   ============================================================ */

/* Wissen: Guide als hochwertige Featured Card, Themen als dezente
   Pills (keine vier separaten, teils unpassenden Kachel-Links —
   die Themen beschreiben, was im Guide steckt). */
.guide-topics{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.guide-topic{
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2);
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:999px; padding:5px 12px;
}

.guide-quiz-cta{
  display:flex; align-items:center; gap:14px; margin-top:16px; padding:14px 18px;
  background:color-mix(in srgb, var(--brand) 8%, var(--surface-2)); border:1.5px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  border-radius:var(--radius); color:inherit; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.guide-quiz-cta:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--brand)}
.guide-quiz-cta .gq-icon{font-size:22px; flex:none}
.guide-quiz-cta .gq-text{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.guide-quiz-cta .gq-text b{font-family:var(--font-display); font-size:15px; font-weight:800}
.guide-quiz-cta .gq-text span{font-family:var(--font-mono); font-size:12px; color:var(--muted-2)}
.guide-quiz-cta .gq-arr{font-size:19px; font-weight:700; color:var(--brand-text); flex:none}

/* Kompakte, redaktionelle Wissens-Cards — bewusst anders als Tool-/
   Projekt-Cards: keine Statuszahlen, kein Live-Wert, nur Kategorie +
   Titel + kurzer Text. */
.article-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.article-card{
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:18px 20px; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.article-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.article-card .kicker{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);
}
.article-card h3{font-size:16px; font-weight:800; letter-spacing:-.008em; line-height:1.3}
.article-card p{color:var(--muted); font-size:13.5px; line-height:1.55; margin:0}

/* Wissen ↔ Tools Cross-Link: kleine, dezente Zeile unter einer
   Tool-/Artikel-Card, die auf das jeweils passende Gegenstueck zeigt. */
.xlink{
  display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  color:var(--brand-text); text-decoration:none; margin-top:2px;
}
.xlink:hover{text-decoration:underline}

/* Meine aktuellen Projekte — grosse, datengetriebene Cards, bewusst
   anders als Tool-/Artikel-Cards (Status, Datum, echte Zahlen, Sparkline). */
.proj-feature-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px}
@media(max-width:860px){.proj-feature-grid{grid-template-columns:1fr}}
.proj-feature-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:clamp(22px,3vw,28px); gap:2px;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.proj-feature-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.pf-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.pf-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2)}
.proj-feature-card h3{font-size:22px; font-weight:800; letter-spacing:-.01em; margin-top:12px}
.pf-sub{font-family:var(--font-mono); font-size:12px; color:var(--muted-2); margin-top:3px}
.proj-feature-card > p{color:var(--muted); font-size:14.5px; line-height:1.6; margin-top:10px}
.pf-metrics{display:flex; gap:26px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft)}
.pf-metric{display:flex; flex-direction:column; gap:4px}
.pf-metric .l{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2)}
.pf-metric .v{font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.pf-spark{display:block; width:100%; height:36px; margin-top:14px}
.pf-meta{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2); margin-top:14px}
.pf-cta{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color:var(--brand-text); margin-top:14px}
.pf-cta .arr{transition:transform var(--dur-base) var(--ease-out)}
a.proj-feature-card:hover .pf-cta .arr{transform:translateX(3px)}

/* DeFi-Circle-Vorschaukarte auf der Startseite: bewusst keine
   Metrics/Sparkline wie bei den anderen drei Praxistests (dafuer
   gibt es hier keine Zeitreihe) — stattdessen eine kompakte
   Level-Linie, damit auf den ersten Blick klar ist, dass dieses
   Projekt anders funktioniert als Bitopex/HyperRocket/SmartIT. */
.pf-levelline{display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft)}
.pf-levelline .step{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2)}
.pf-levelline .step.is-current{color:var(--brand); font-weight:700}
.pf-levelline .sep{color:var(--muted-2); font-size:10.5px}
.pf-devnote{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2); margin-top:8px}

/* Markt im Blick — kompakt, zahlenzentriert, bewusst anders als
   die groesseren Featured-Tool-Cards weiter unten. */
.market-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.market-card{
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:20px 22px; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.market-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.market-card-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.market-card-top .k{font-weight:700; font-size:15px}
.market-val{font-family:var(--font-display); font-weight:800; font-size:30px; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.market-card p{color:var(--muted); font-size:13.5px; line-height:1.55; margin:0}
.market-card .open{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13.5px; color:var(--brand-text); margin-top:4px}

/* Kompakte Tool-Reihe unterhalb der zwei Featured Tools */
.tools-compact{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.tool-mini{
  display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:16px 18px; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tool-mini:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.tool-mini h4{font-size:14.5px; font-weight:700; letter-spacing:-.005em; margin:0}
.tool-mini h4 a{color:inherit; text-decoration:none}
.tool-mini p{color:var(--muted); font-size:12.5px; line-height:1.5; margin:0}
.tool-mini .open{display:block; font-size:12px; font-weight:700; color:var(--brand-text); margin-top:2px; text-decoration:none}

/* Neu auf RenditeX — kompakte Changelog-Timeline, kein Social-Feed */
.update-feed{display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden}
a.update-row{
  display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:baseline; text-decoration:none; color:var(--text);
  background:var(--surface); padding:15px 18px; transition:background var(--dur-base) var(--ease-out);
}
a.update-row:hover{background:var(--surface-2)}
.update-date{font-family:var(--font-mono); font-size:12px; color:var(--muted-2)}
.update-body h4{font-size:14.5px; font-weight:700; letter-spacing:-.005em}
.update-body p{color:var(--muted); font-size:13px; margin-top:3px}
.update-body p span{margin:0 6px}
@media(max-width:600px){
  a.update-row{grid-template-columns:1fr}
  .update-date{font-size:11px}
}

/* ============================================================
   SmartIT-Projektseite: dezenter warmer Akzent zusaetzlich zum
   RenditeX-Cyan, nur innerhalb dieser Seite gueltig (.pg-smartit auf
   body). Positionsliste als eigene, kompakte Kartenreihe — Aktionen
   und Auszahlungen aehnliche Historien nutzen weiterhin .proj-perf-list/.prow.
   ============================================================ */
.pg-smartit{ --gold:#C9982E; }

.pos-list{display:flex; flex-direction:column; gap:10px}
.pos-row{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:15px 18px;
}
.pos-row-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap}
.pos-plan{font-size:13.5px; font-weight:700}
.pos-unlock{font-family:var(--font-mono); font-size:12px; color:var(--muted-2)}
.pos-row-vals{display:flex; gap:24px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); flex-wrap:wrap}
.pos-metric{display:flex; flex-direction:column; gap:3px}
.pos-metric .l{font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2)}
.pos-metric .v{font-family:var(--font-display); font-weight:700; font-size:14.5px; font-variant-numeric:tabular-nums}
.pos-row-meta{font-family:var(--font-mono); font-size:11px; color:var(--muted-2); margin-top:10px}
@media(max-width:480px){.pos-row-vals{gap:16px}}

/* ============================================================
   Live-Tool-Vorschauen: kompakter Teaser direkt nach dem Hero +
   grosse "produktartige" Featured-Cards in der Tool-Sektion. Beide
   nutzen dieselben von assets/home.js gelieferten Live-Werte.
   ============================================================ */

/* "Live auf RenditeX" — drei kompakte Karten, bewusst kein
   Artikel-Card-Layout (kein Fliesstext, Zahlen zuerst). */
.live-teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media(max-width:760px){.live-teaser-grid{grid-template-columns:1fr}}
.live-card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:16px 18px; min-height:118px; display:flex; flex-direction:column;
  text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.live-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--line)}
.live-card-body{display:flex; flex-direction:column; flex:1}
.live-card-body .lp-name{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2)}
.live-card-body .lp-val{font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-.01em; margin-top:6px; font-variant-numeric:tabular-nums}
.live-card-body .lp-zone{font-size:12.5px; font-weight:600; margin-top:2px}
.live-card-body .pf-spark{height:26px; margin-top:8px}
.live-card-body .lp-cue{font-size:11.5px; font-weight:600; color:var(--muted-2); margin-top:auto; padding-top:8px}
a.live-card:hover .lp-cue{color:var(--brand-text)}
.live-card-skeleton{color:var(--muted-2); font-family:var(--font-mono); font-size:12px}

/* Tool-Sektion (Startseite): 1 grosse (Heatzone) + 2 mittlere
   Featured-Cards. Darunter die kompakte Utility-Reihe (.tools-compact,
   bereits vorhanden) fuer Haltefrist-Tracker/Scam-Check/Halving-Countdown. */
.tools-featured-grid{
  display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:auto auto; gap:16px;
}
.tools-featured-grid .tf-card.tf-primary{grid-row:1 / 3}
@media(max-width:860px){
  .tools-featured-grid{grid-template-columns:1fr; grid-template-rows:none}
  .tools-featured-grid .tf-card.tf-primary{grid-row:auto}
}
/* /tools/-Seite: nur zwei Markt-Karten nebeneinander, kein Row-Span noetig */
.tools-pair-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:16px}
@media(max-width:760px){.tools-pair-grid{grid-template-columns:1fr}}
.tools-pair-grid .tf-card.tf-primary .pf-spark{height:80px}
.tf-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:clamp(20px,2.6vw,26px); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.tf-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.tf-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tf-label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2)}
.tf-card h3{font-size:19px; font-weight:800; letter-spacing:-.01em}

/* Tool-Icons — kleine farbige Badges vor dem Toolnamen, damit Tools auf
   einen Blick wie eigene kleine Apps wirken statt wie Textlinks. Reines
   Inline-SVG, keine Icon-Bibliothek, keine zusaetzliche Abhaengigkeit. */
.tool-badge{
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; color:#fff; box-shadow:0 4px 10px -4px rgb(0 0 0 / .35);
}
.tool-badge svg{width:23px; height:23px}
.tool-badge.sm{width:36px; height:36px; border-radius:10px}
.tool-badge.sm svg{width:18px; height:18px}
.ti-heatzone{background:linear-gradient(135deg,#0052FF,#3D7BFF)}
.ti-feargreed{background:linear-gradient(135deg,#C2410C,#E6802E)}
.ti-sparplan{background:linear-gradient(135deg,#0891A8,#22D3D6)}
.ti-haltefrist{background:linear-gradient(135deg,#0C7A3A,#22A85A)}
.ti-scamcheck{background:linear-gradient(135deg,#6D4AFF,#9B7CFF)}
.ti-halving{background:linear-gradient(135deg,#B4790A,#E0A62E)}
.tf-head-row{display:flex; align-items:center; gap:13px; margin-top:12px}
.tm-head-row{display:flex; align-items:center; gap:10px}
.tf-price{font-family:var(--font-display); font-weight:800; font-size:clamp(30px,4vw,40px); letter-spacing:-.01em; margin-top:12px; font-variant-numeric:tabular-nums}
.tf-zone-badge{
  display:inline-block; align-self:flex-start; font-size:12.5px; font-weight:700; border:1px solid; border-radius:999px;
  padding:3px 12px; margin-top:8px;
}
.tf-card .pf-spark{height:56px; margin-top:16px}
.tf-card.tf-primary .pf-spark{height:80px}
.tf-sub{color:var(--muted); font-size:13px; line-height:1.5; margin-top:12px}
.tf-card .pf-cta, .tf-card .open{margin-top:16px}
.sp-demo-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px}
.sp-demo-row:last-child{border-bottom:0}
.sp-demo-row b{font-variant-numeric:tabular-nums; font-size:15px}

/* Utility-Tier (.tool-mini bereits vorhanden): Beispiel-gekennzeichnete
   Demo-Vorschauen fuer Tools, die zwingend eigene Nutzereingaben
   brauchen (Haltefrist-Tracker, Scam-Check) — nie als echte Live-
   Werte ausgegeben. */
.util-demo{background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:10px 12px; margin:8px 0}
.util-demo-tag{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2)}
.util-demo-row{display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:12.5px; margin-top:4px}
.util-demo-row b{font-variant-numeric:tabular-nums}
.util-val{font-family:var(--font-mono); font-weight:700}

/* Kompaktes Wissen: "Beliebte Themen" als klickbare Pills statt
   weiterer grosser Content-Cards. */
.topic-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.topic-link{
  font-family:var(--font-mono); font-size:12.5px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:999px; padding:7px 14px;
  text-decoration:none; transition:border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.topic-link:hover{border-color:var(--brand); color:var(--brand-text)}
.topic-link.all{font-weight:700}

/* ================================================================
   /links — RenditeX Link-Hub (Ersatz fuer die externe HeyLink-Seite)
   Bewusst ein eigenstaendiger, IMMER dunkler Seiten-Kontext — wie ein
   auf die ganze Seite ausgedehntes "Dark Island" (siehe Regel oben),
   unabhaengig vom Hell/Dunkel-Toggle der restlichen Seite. Link-in-
   Bio-Seiten werden fast nur mobil und meist aus einer dunklen App
   (Instagram/TikTok/YouTube) heraus geoeffnet. Nutzt bewusst die
   bestehenden .plat-group/.plats/.plat- und .tool-badge-Komponenten
   wieder, damit hier keine zweite Design-Sprache entsteht — neu sind
   nur der Seiten-Rahmen und die grossen Ebene-1-Feature-Karten. */
body.links-page, body.admin-page{
  --bg:#0A1220; --bg-2:#0E1728; --surface:#141D33; --surface-2:#1C2740;
  --text:#E9EEF9; --muted:#A6B1CC; --muted-2:#7B87A3;
  --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.09);
  --cyan:#2DD4CF;
  background:var(--bg); color:var(--text); min-height:100vh;
}
.lx-wrap{max-width:640px; margin:0 auto; padding:0 18px clamp(40px,7vw,60px)}

.lx-header{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:clamp(26px,7vw,42px) 0 clamp(22px,4.5vw,30px)}
.lx-avatar{width:76px; height:76px; border-radius:50%; object-fit:cover; object-position:top center; border:2px solid rgba(255,255,255,.16); box-shadow:0 6px 20px -6px rgb(0 0 0 / .55); margin-bottom:10px}
.lx-mark{width:50px; height:auto; color:var(--text); margin-bottom:10px}
.lx-header h1{font-family:var(--font-display); font-weight:800; font-size:21px; letter-spacing:-.01em}
.lx-header p{color:var(--muted); font-size:13.5px; max-width:36ch; line-height:1.5; margin-top:6px}

.links-page .plat-group{margin-top:clamp(22px,4.4vw,30px)}
.links-page .plat-group:first-child{margin-top:0}
.links-page .plats{grid-template-columns:1fr}
.links-page .plat{background:var(--surface); border-color:var(--line-soft)}
.links-page .plat:hover{border-color:rgba(45,212,191,.45)}
.links-page .plat .chev{color:var(--muted-2); flex:none; font-size:16px; font-weight:600}
@media(max-width:520px){
  .links-page .plat{grid-template-columns:46px 1fr auto; padding:14px 16px}
}
.lx-more{display:block; text-align:center; margin-top:11px; font-size:12.5px; font-weight:600; color:var(--cyan); text-decoration:none}
.lx-more:hover{text-decoration:underline}

/* Ebene 1 — die 3 grossen Einstiegspunkte (aktuelles Video, Tools,
   Krypto-Guide). Deutlich groesser/prominenter als die .plat-Reihen
   darunter, damit eine klare visuelle Hierarchie entsteht. */
.lx-features{display:flex; flex-direction:column; gap:10px}
.lx-feature{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:16px;
  padding:15px 17px; box-shadow:0 2px 12px -6px rgb(0 0 0 / .5);
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.lx-feature:hover{transform:translateY(-2px); border-color:rgba(45,212,191,.45)}
.lx-feature .tool-badge{flex:none}
.lx-feature .thumb{flex:none; width:60px; height:60px; border-radius:12px; overflow:hidden; position:relative; background:var(--surface-2)}
.lx-feature .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.lx-feature .thumb .yt{position:absolute; right:3px; bottom:3px; width:18px; height:18px; background:var(--red); border-radius:5px; display:flex; align-items:center; justify-content:center}
.lx-feature .thumb .yt svg{width:9px; height:9px; color:#fff}
.lx-feature .body{flex:1; min-width:0}
.lx-feature .tag{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--cyan)}
.lx-feature h3{font-size:15.5px; font-weight:700; letter-spacing:-.005em; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lx-feature p{font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lx-feature .chev{flex:none; font-size:19px; font-weight:600; color:var(--muted-2)}
.ti-tools-hub{background:linear-gradient(135deg,#0052FF,#5C8CFF)}
.ti-guide{background:linear-gradient(135deg,#0C7A3A,#22A85A)}
.ti-books{background:linear-gradient(135deg,#9A5B2E,#C6874F)}
.ti-platforms{background:linear-gradient(135deg,#3B5BA0,#5C7FD1)}

/* Bücher & Ressourcen (/wissen/ressourcen/) — schlichte Karten,
   keine Cover (keine rechtssicheren Asset vorhanden), sachliche
   Beschreibung statt erfundener persoenlicher Zitate. */
.book-list{display:flex; flex-direction:column; gap:14px}
.book-card{position:relative; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:clamp(18px,2.4vw,24px)}
.book-card h3{font-size:17px; font-weight:800; letter-spacing:-.01em; padding-right:70px}
.book-card p{color:var(--muted); font-size:13.5px; line-height:1.6; margin-top:8px}
.book-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; font-size:12px; color:var(--muted-2)}
.book-meta b{color:var(--text); font-weight:600}
.book-card .actions{margin-top:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.book-card .ad{
  position:absolute; top:18px; right:18px;
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); border:1px solid var(--line); border-radius:4px; padding:3px 7px;
}

/* ================================================================
   /admin — privates Analytics-Dashboard + Login. Gleicher dunkler
   Seiten-Kontext wie /links (body.admin-page, siehe oben), aber
   breiterer Container — hier hat Desktop bewusst Prioritaet.
   Nicht oeffentlich verlinkt, noindex im <head> jeder Admin-Seite.
   ================================================================ */
.admin-shell{max-width:1080px; margin:0 auto; padding:28px 20px 60px}
.admin-topbar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:22px}
.admin-topbar h1{font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.01em}
.admin-topbar .sub{color:var(--muted-2); font-size:12.5px; font-family:var(--font-mono); margin-top:2px}
.admin-logout{background:none; border:1px solid var(--line-soft); color:var(--muted); font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer; transition:border-color .15s ease, color .15s ease}
.admin-logout:hover{border-color:var(--cyan); color:var(--text)}

.admin-range{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px}
.admin-range button{
  background:var(--surface); border:1px solid var(--line-soft); color:var(--muted);
  font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:999px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.admin-range button.active{background:var(--cyan); border-color:var(--cyan); color:#04201F}
.admin-range button:not(.active):hover{border-color:var(--cyan); color:var(--text)}

.admin-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:20px}
.admin-kpi{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:16px 18px}
.admin-kpi .l{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2)}
.admin-kpi .v{font-family:var(--font-display); font-weight:800; font-size:26px; margin-top:6px; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.admin-kpi .h{color:var(--muted-2); font-size:11.5px; margin-top:4px; line-height:1.4}

.admin-card{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:clamp(16px,2.4vw,22px); margin-bottom:20px}
.admin-card h2{font-size:15px; font-weight:800; letter-spacing:-.005em; margin-bottom:14px}
.admin-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.admin-card-head h2{margin-bottom:0}
.admin-toggle{display:flex; gap:6px}
.admin-toggle button{background:none; border:1px solid var(--line-soft); color:var(--muted); font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px; cursor:pointer}
.admin-toggle button.active{border-color:var(--cyan); color:var(--cyan)}

.admin-chart-host{height:220px}
.admin-empty{color:var(--muted-2); font-size:13px; text-align:center; padding:24px 0}

.admin-table{width:100%; border-collapse:collapse; font-size:13.5px}
.admin-table th{text-align:left; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); font-weight:500; padding:0 0 10px; border-bottom:1px solid var(--line-soft)}
.admin-table th.num, .admin-table td.num{text-align:right}
.admin-table td{padding:10px 0; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.admin-table tr:last-child td{border-bottom:0}
.admin-table .bar-track{background:var(--surface-2); border-radius:2px; max-width:220px; height:4px; margin-top:6px; overflow:hidden}
.admin-table .bar{height:100%; background:var(--cyan); border-radius:2px}

.admin-del{
  background:none; border:1px solid var(--line-soft); color:var(--red); font-size:11.5px; font-weight:600;
  padding:5px 11px; border-radius:999px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.admin-del:hover{border-color:var(--red); background:rgba(217,27,38,.1)}
.admin-del:disabled{opacity:.5; cursor:default}

.admin-catlist{display:flex; flex-direction:column; gap:10px}
.admin-catrow{display:flex; align-items:center; gap:12px; font-size:13px}
.admin-catrow .name{width:110px; flex:none; color:var(--muted)}
.admin-catrow .track{flex:1; height:8px; background:var(--surface-2); border-radius:4px; overflow:hidden}
.admin-catrow .fill{height:100%; background:var(--cyan); border-radius:4px}
.admin-catrow .n{width:56px; flex:none; text-align:right; font-variant-numeric:tabular-nums; color:var(--text); font-weight:600}

.admin-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:760px){.admin-grid-2{grid-template-columns:1fr}}

.admin-login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.admin-login-card{width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:32px 28px; box-shadow:0 10px 40px -12px rgb(0 0 0 / .6)}
.admin-login-card h1{font-family:var(--font-display); font-weight:800; font-size:19px; text-align:center; margin-bottom:22px}
.admin-login-card label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:7px}
.admin-login-card input{
  width:100%; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:10px;
  padding:11px 13px; color:var(--text); font-size:14.5px; font-family:var(--font-body); box-sizing:border-box;
}
.admin-login-card input:focus{outline:none; border-color:var(--cyan)}
.admin-login-card button{
  width:100%; margin-top:16px; background:var(--cyan); border:0; border-radius:10px; padding:12px;
  color:#04201F; font-weight:700; font-size:14.5px; cursor:pointer;
}
.admin-login-card button:disabled{opacity:.6; cursor:default}
.admin-login-error{color:var(--red-vivid); font-size:12.5px; margin-top:12px; text-align:center; min-height:1em}

/* ================================================================
   /plattformen — redaktionelle Anbieterseite. Bewusst KEINE
   gleichfoermige Card-Wand: pro Kategorie EIN groesserer, editoriell
   geschriebener "Featured"-Eintrag (.pf-feature) plus die uebrigen
   Anbieter als die bereits bestehenden kompakten .plat-Zeilen
   (Wiederverwendung, siehe Plattformen-Sektion der Startseite) —
   das erzeugt echte Gewichtsunterschiede statt 11 identischer Kacheln.
   ================================================================ */
.pf-feature{
  display:flex; gap:22px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:clamp(20px,2.8vw,28px); margin-bottom:14px; box-shadow:var(--shadow-sm);
  transition:border-color var(--dur-base) var(--ease-out);
}
.pf-feature:hover{border-color:var(--brand)}
.pf-feature .logo{
  position:relative; width:64px; height:64px; border-radius:16px; overflow:hidden; flex:none;
  background:var(--lb,#FFFFFF); border:1px solid var(--line-soft);
}
.pf-feature .logo i{
  position:absolute; inset:0; z-index:0; display:grid; place-items:center; font-style:normal;
  font-family:var(--font-display); font-weight:900; font-size:24px; color:var(--lt,#0B1B38); background:var(--lc,#E8EDF5);
}
.pf-feature .logo img{position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; padding:8px; background:var(--lb,#FFFFFF); display:block}
.pf-feature .body{flex:1; min-width:0}
.pf-feature .eyebrow-tag{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2)}
.pf-feature h3{font-size:19px; font-weight:800; letter-spacing:-.01em; margin-top:5px}
.pf-feature p{color:var(--muted); font-size:14px; line-height:1.65; margin-top:10px; max-width:62ch}
.pf-feature .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.pf-feature .tags span{font-family:var(--font-mono); font-size:11px; color:var(--muted); border:1px solid var(--line-soft); border-radius:999px; padding:4px 11px}
.pf-feature .actions{margin-top:16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.pf-feature .ad{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); border:1px solid var(--line); border-radius:4px; padding:3px 7px}
@media(max-width:600px){
  .pf-feature{flex-direction:column; gap:14px}
  .pf-feature .logo{width:52px; height:52px; border-radius:13px}
}

.pf-catmeta{color:var(--muted); font-size:13.5px; margin-top:6px; margin-bottom:16px; max-width:70ch}

/* Kompakte Plattform-Vorschau auf der Startseite: keine vollen Cards,
   nur Kategorie-Label + kleine Markenlogos + Zaehler. Der Detailgrad
   lebt komplett auf /plattformen/. */
.pf-teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
@media(max-width:760px){.pf-teaser-grid{grid-template-columns:1fr}}
.pf-teaser-cat{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:17px 19px}
.pf-teaser-cat .name{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted-2)}
.pf-teaser-logos{display:flex; align-items:center; gap:8px; margin-top:13px}
.pf-teaser-logos img{width:32px; height:32px; border-radius:9px; object-fit:contain; background:#fff; padding:5px; border:1px solid var(--line-soft)}
.pf-teaser-logos .more{font-family:var(--font-mono); font-size:11px; color:var(--muted-2)}

/* ================================================================
   /projekte/defi-circle/ — bewusst KEINE Kopie der Bitopex-/
   HyperRocket-/SmartIT-Schablone: eigener Schwerpunkt (Lernweg,
   Level, Burn-Mechanismus, Oekosystem) statt Performance/Auszahlung/
   Staking. Wiederverwendet .proj-timeline (Mein Weg), .proj-points
   (Token/Learning/Elite-Listen) und .callout (Holder-Level-Hinweis)
   aus dem bestehenden Projektseiten-System, siehe project.js — neu
   sind nur die Hero-Kennzahlen, die Level-Pipeline und das
   Burn-Diagramm, die es sonst nirgends auf RenditeX gibt.
   ================================================================ */
.dc-stat-trio{display:flex; flex-wrap:wrap; margin-top:24px; border-top:1px solid var(--line-soft); padding-top:18px}
.dc-stat{flex:1 1 130px; padding:0 20px; border-left:1px solid var(--line-soft)}
.dc-stat:first-child{padding-left:0; border-left:0}
.dc-stat .v{font-family:var(--font-display); font-weight:800; font-size:clamp(19px,2.4vw,25px); letter-spacing:-.01em; color:var(--brand-onDark)}
.dc-stat .l{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); margin-top:5px}
@media(max-width:560px){.dc-stat{flex:1 1 45%; padding:0 14px; margin-bottom:14px}}

/* Level-Pipeline Basic -> Fundamentals -> Breakthrough -> Elite.
   Gleiche Grundgrammatik wie .proj-timeline (Linie + Knoten), aber
   mit Status (durchlaufen/aktuell/offen) und Voraussetzungs-Badge,
   damit Burn- und Hold-Stufen auf den ersten Blick unterscheidbar sind. */
.dc-levels{display:flex; flex-direction:column}
.dc-level{position:relative; padding:0 0 30px 32px; border-left:2px solid var(--line-soft)}
.dc-level:last-child{border-left-color:transparent; padding-bottom:0}
.dc-level::before{
  content:""; position:absolute; left:-9px; top:2px; width:16px; height:16px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line);
}
.dc-level.is-done::before{background:var(--brand); border-color:var(--brand)}
.dc-level.is-current::before{background:var(--surface); border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,82,255,.14)}
.dc-level-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.dc-level-name{font-size:18px; font-weight:800; letter-spacing:-.01em}
.dc-level-status{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:3px 10px; border-radius:999px; border:1px solid var(--line-soft); color:var(--muted-2)}
.dc-level-status.is-current{border-color:var(--brand); color:var(--brand)}
.dc-level-req{display:inline-flex; align-items:baseline; gap:6px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted-2); margin-top:8px}
.dc-level-req b{color:var(--text); font-weight:700; font-size:13.5px}
.dc-level p{color:var(--muted); font-size:14px; line-height:1.65; margin-top:10px; max-width:64ch}
.dc-level .proj-tags{margin-top:12px}

/* Burn-Diagramm: bewusst als zwei parallele, kurze Vertikalfluesse
   (Fundamentals/Breakthrough) statt einem breiten Horizontaldiagramm
   — bleibt auf 390px genauso lesbar wie auf Desktop. Elite bekommt
   eine sichtbar andere Kartenfarbe/-beschriftung (HALTEN statt
   BURN), damit der Unterschied nicht ueberlesen werden kann. */
.dc-flow-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px}
@media(max-width:680px){.dc-flow-grid{grid-template-columns:1fr}}
.dc-flow{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:clamp(18px,2.4vw,24px); box-shadow:var(--shadow-sm)}
.dc-flow-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.dc-flow h3{font-size:16px; font-weight:800; letter-spacing:-.005em}
.dc-flow-tag{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); border:1px solid var(--line-soft); border-radius:999px; padding:3px 9px}
.dc-flow-amount{font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-.01em; margin-top:10px; color:var(--brand)}
.dc-flow-steps{margin-top:16px; display:flex; flex-direction:column}
.dc-flow-step{position:relative; padding:0 0 14px 24px; border-left:2px solid var(--line-soft); font-size:13px; color:var(--muted)}
.dc-flow-step:last-child{border-left-color:transparent; padding-bottom:0; color:var(--text); font-weight:700; font-size:13.5px}
.dc-flow-step::before{content:""; position:absolute; left:-6px; top:1px; width:10px; height:10px; border-radius:50%; background:var(--surface); border:2px solid var(--line)}
.dc-flow-step:last-child::before{border-color:var(--brand); background:var(--brand)}
.dc-flow.is-elite{border-color:var(--z2)}
.dc-flow.is-elite .dc-flow-amount{color:var(--z2)}
.dc-flow.is-elite .dc-flow-step:last-child::before{border-color:var(--z2); background:var(--z2)}
.dc-flow-note{color:var(--muted); font-size:13px; line-height:1.6; margin-top:18px; max-width:70ch}