/* tb.css — Fundament fuer das neue Publisher-Frontend (Issue #289, Etappe 2).
   Konsolidiert aus legacy/web/tbfrontend/{index,ressort,artikel}.html (eingefroren,
   nur Muster/CSS kopiert). Design-Tokens ab Design-Refresh D1 (Issue #311, exakte
   Werte aus dem Handoff): Buehne/Flaechen, Ink-Stufen, Akzent, Signal (nur Kicker-Badges
   + Footer-Top-Border, nie dekorativ). D3 (Issue #313): Artikel-Typografie
   (Kicker/h1/Byline-Bar/Dek/Body/Related-Links), `.filter-head`/`.filter-desc`.

   Design-Handoff 03.09.2026 ("Tradingbird.app Webdesign", direkt im Terminal umgesetzt):
   EIN Container `--wrap` 1108px mit 48px Innenabstand (Inhalt 1012px) fuer Header,
   Layout-Grid und Footer -- die Rail (260px) oeffnet INNERHALB des Containers als erste
   Grid-Spalte (`--railw`/`--railgap`), nicht mehr durch Aufweiten des Containers.
   Kachelraster 3 Spalten ohne Rail, 2 mit Rail; Hero 750px/78px ohne, 520px/48px mit Rail.
   Uebergang ALL <-> Ressort animiert: `tb.js` tauscht `main`/Rail per fetch und schaltet
   `.hide-left`, die Grid-Spalte animiert 0 <-> 260px (340ms cubic-bezier(.2,.8,.2,1)),
   `main.is-out` blendet den Inhalt aus/ein, `.rail.rows-out` kaskadiert die Rail-Zeilen. */

/* R15 (Issue #438): Schriften lokal ausgeliefert statt von Google Fonts (IP-Uebertragung
   an Google bei jedem Aufruf) -- Dateien unter fonts/ (woff2, latin-Subset, bezogen ueber
   die Google-Fonts-css2-API), Familiennamen unveraendert. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/montserrat-400.woff2") format("woff2")}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/montserrat-500.woff2") format("woff2")}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/montserrat-600.woff2") format("woff2")}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/montserrat-700.woff2") format("woff2")}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/montserrat-800.woff2") format("woff2")}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url("/assets/fonts/montserrat-900.woff2") format("woff2")}
@font-face{font-family:'Oswald';font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/oswald-300.woff2") format("woff2")}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/oswald-400.woff2") format("woff2")}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/oswald-500.woff2") format("woff2")}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/oswald-700.woff2") format("woff2")}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2")}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/anton-400.woff2") format("woff2")}

*{box-sizing:border-box}
:root{
  --bg:#0b0c0f;
  --surface:#12141a;
  --surface-2:#171a21;
  --surface-2b:#1c2029;
  --accent:#56b8ff;
  --signal:#e3000f;
  --ink-1:#ffffff;
  --ink-2:#a8adb8;
  --ink-3:#6b7080;
  --ink-4:#565b69;
  --ink-5:#3f4450;
  --wrap:1108px;
  --pad:48px;
  --rail:260px;
  --rail-gap:40px;
  --ease-layout:cubic-bezier(.2,.8,.2,1);
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink-1);font-family:'Montserrat',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;cursor:pointer}

/* ════════ Layout: ein Container, Rail als animierte erste Spalte ════════ */
.layout{--railw:var(--rail);--railgap:var(--rail-gap);
  display:grid;grid-template-columns:var(--railw) minmax(0,1fr);column-gap:var(--railgap);
  width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  transition:grid-template-columns 340ms var(--ease-layout),column-gap 340ms var(--ease-layout)}
.layout.hide-left{--railw:0px;--railgap:0px}
.rail{grid-column:1;grid-row:1;padding:0;position:sticky;top:0;align-self:start;min-width:0;overflow:hidden;white-space:nowrap}
.layout.is-moving .rail{position:relative}
.center{grid-column:2;grid-row:1;min-width:0}
.stage{padding:0 0 80px}
main{transition:opacity 200ms ease,transform 200ms ease}
main.is-out{opacity:0;transform:translateY(8px)}

/* ════════ Kopf (`.bild-header`, index.html) ════════ */
.bild-header{background:var(--bg);margin-top:0}
.hwrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.header-body{display:grid;grid-template-columns:auto 1fr;grid-auto-rows:auto;column-gap:26px;align-items:center;padding-top:40px}

.logo{grid-column:1;grid-row:1;align-self:center;display:flex;align-items:center;gap:16px;padding:0}
.logo img{height:62px;width:auto;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.logo-bar{flex:none;width:1px;height:70px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.45),transparent)}
.brand-name{display:flex;flex-direction:column;align-items:flex-start;line-height:.86;text-align:left}
.brand-name .t1{font-family:'Oswald',sans-serif;font-weight:300;font-size:19px;letter-spacing:.25em;color:rgba(255,255,255,.78);text-transform:uppercase;padding-left:0}
.brand-name .t2{font-family:'Oswald',sans-serif;font-weight:700;font-size:38px;letter-spacing:.02em;color:var(--ink-1);text-transform:uppercase;margin-left:-2px}

/* Row 1 rechts: Modi + "Sign in" in EINER Zeile, vertikal auf Logo-Mitte; unter 1100px
   rutscht die Gruppe in eine eigene Zeile unter das Logo (Handoff 03.09.). */
.hright{grid-column:2;grid-row:1;min-width:0;align-self:center;display:flex;align-items:center;justify-content:flex-end}
.icon-row{padding:0;width:100%}
.icon-inner{display:flex;align-items:center;justify-content:flex-end;width:100%}
.icr{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:40px;width:100%;flex-wrap:wrap;white-space:nowrap}
.modes{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.util{display:flex;align-items:center;gap:30px}
.mode{display:flex;flex-direction:column;align-items:center;gap:0;color:rgba(255,255,255,.82);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-bottom:2px solid transparent;padding-bottom:4px;position:relative}
.mode.active{color:var(--accent);border-bottom-color:var(--accent)}
a.mode{text-decoration:none}
a.mode:hover{color:var(--accent)}
.mode:not(.disabled):hover{color:var(--accent)}
.mode.disabled{color:#3a3e49;cursor:default;border-bottom:none}
.mode .lbl{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.14em;white-space:nowrap;text-transform:uppercase;color:inherit}
.ic{display:flex;flex-direction:column;align-items:center;gap:0;color:var(--ink-1);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,255,255,.24);padding:7px 13px;cursor:pointer}
.ic:hover{color:var(--accent);border-color:var(--accent)}
.ic .lbl{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.14em;color:inherit;white-space:nowrap;text-transform:uppercase}

/* ════════ Ressort-Zeile (`#catRow`) + Updated-Zeitstempel ════════ */
.nav-row{grid-column:1 / -1;grid-row:2;margin-top:22px;border-top:1px solid rgba(255,255,255,.1);padding:22px 0 20px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
#catRow{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
#catRow a{font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.78);text-decoration:none;transition:color 150ms}
#catRow a:hover{color:var(--accent)}
#catRow a.cat-on{color:var(--accent)}
.updated{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:#565b69;white-space:nowrap}
@media(max-width:1099px){
  .hright{grid-column:1 / -1;grid-row:2;margin-top:18px;justify-content:space-between}
  .icr{justify-content:space-between}
  .nav-row{grid-row:3}
}

/* ════════ Footer ════════ */
.site-footer{margin-top:0;background:#0e0f13}
.site-footer .fgrid{position:relative;max-width:var(--wrap);margin:0 auto;padding:44px var(--pad) 24px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:24px}
.site-footer .fgrid::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:4px;background:var(--signal)}
.site-footer .ftag{margin:20px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:36ch}
.site-footer .fcol h4{margin:0 0 16px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.site-footer .fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.site-footer .fcol li{margin:0}
.site-footer .fcol a{font-size:13.5px;color:var(--ink-2)}
.site-footer .fcol a:hover{color:var(--accent)}
.site-footer .fbar{max-width:var(--wrap);margin:0 auto;padding:16px var(--pad);border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.site-footer .fbar .copy{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-5)}
.site-footer .fbar .updated{color:var(--ink-5)}
@media(max-width:820px){.site-footer .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.site-footer .fgrid{grid-template-columns:1fr}}

/* ════════ Kachel-Card (`.st`, Design-Refresh D2, Issue #312) ════════ */
.st{display:block;background:var(--surface)}
.st .ph{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#17171a}
.st .stx:first-child{padding-top:20px;border-top:2px solid rgba(255,255,255,.14)}
.st .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st .stx{padding:16px 18px 20px}
.st .kick{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.st h3{margin:9px 0 0;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:25px;line-height:1.05;letter-spacing:-.015em;color:var(--ink-1)}
.st .dek{margin:9px 0 0;font-size:14px;line-height:1.45;color:var(--ink-2);max-width:52ch}
.st .stf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}
.st .dt{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.st .cr{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-3)}
.st:hover h3{color:var(--accent)}

/* ════════ Artikelseite (`.artikel`, Issue #290; R35 10.09.2026: volle Containerbreite) ════════
   Der Beitrag stand bis 10.5.31 in einer eigenen 760px-Spalte MITTIG im 1012px-Inhalt --
   Kopf, Text und Related sassen damit 126px eingerueckt gegen Header, Ressortzeile und
   Footer darueber/darunter. Jetzt teilt die Artikelseite den Container aller anderen
   Seiten: Kicker/H1/Byline, Aufmacherbild und die Empfehlungsstrecken spannen ueber die
   volle Breite (`.artikel > *`), der Lesetext bleibt bei 68ch in der linken Spalte
   (Zeilenlaenge 50-75 Zeichen), rechts steht die Meta-Rail in derselben 260px-Breite wie
   die Ressort-Rail der Uebersichtsseiten (`--rail`/`--rail-gap`). Unter 1080px faellt das
   Raster auf eine Spalte, die Rail wandert unter den Text. */
.artikel{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);column-gap:var(--rail-gap);align-items:start}
.artikel > *{grid-column:1 / -1;min-width:0}
.artikel > .lesespalte{grid-column:1}
.artikel > .meta-rail{grid-column:2}
.artikel .kick{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.artikel h1{margin:10px 0 0;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(32px,4.6vw,52px);line-height:1.03;letter-spacing:-.015em;text-wrap:balance;max-width:20ch}
.artikel .by{margin:20px 0 0;padding:12px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.artikel .by a{color:#fff}
.artikel .by a:hover{color:var(--accent)}
.artikel .by .post-updated{color:var(--signal)}
.artikel figure.lead{margin:24px 0 0}
.artikel figure.lead img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center;display:block;background:#17171a}
.artikel figure.lead figcaption{margin-top:8px;font-size:12px;color:rgba(255,255,255,.4)}
.artikel .lesespalte{padding-top:2px}
.artikel .dek{margin:24px 0 0;font-family:'Oswald',sans-serif;font-weight:300;font-size:21px;line-height:1.45;color:rgba(255,255,255,.84);max-width:38ch}
.artikel .body{margin-top:22px;font-size:18px;line-height:1.7;color:rgba(255,255,255,.9);max-width:68ch}
.artikel .body p{margin:0 0 20px}
.artikel .body h2{margin:32px 0 12px;font-family:'Oswald',sans-serif;font-weight:600;font-size:24px;line-height:1.1;text-transform:uppercase;letter-spacing:-.005em;color:var(--ink-1)}
.artikel .quelle{margin-top:30px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:rgba(255,255,255,.45);max-width:68ch}
.artikel .quelle a{color:rgba(255,255,255,.7)}

/* Meta-Rail rechts: Topics + neueste Beitraege des Ressorts. Das Kleben sitzt im INNEREN
   `.rail-innen` und endet damit am Textende -- klebte die Spalte selbst, schob sie sich
   beim Scrollen ueber die Empfehlungen darunter (Jan-Screenshot 10.09.2026). */
.artikel > .meta-rail{align-self:stretch}
.artikel .meta-rail{padding-top:26px}
.artikel .rail-innen{position:sticky;top:16px;display:grid;gap:28px}
.artikel .meta-rail h2{margin:0 0 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.artikel .topics{display:flex;flex-wrap:wrap;gap:8px}
.artikel .topic{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.18);padding:5px 9px}
a.topic:hover{color:var(--accent);border-color:var(--accent)}
.artikel .rail-list{list-style:none;margin:0;padding:0}
.artikel .rail-list li{padding:11px 0;border-top:1px solid rgba(255,255,255,.09)}
.artikel .rail-list li:first-child{border-top:0;padding-top:0}
.artikel .rail-list .tm{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--ink-4);margin-bottom:4px;font-variant-numeric:tabular-nums}
.artikel .rail-list a{font-family:'Oswald',sans-serif;font-weight:500;font-size:15px;line-height:1.2;color:rgba(255,255,255,.86);display:block}
.artikel .rail-list a:hover{color:var(--accent)}

/* Empfehlungen unter dem Text (`section.empfehlungen`, NEBEN dem Artikelraster, nicht darin):
   Kacheln (`.st`) und Mini-Bild-Liste (`.liste`) wie auf den Uebersichtsseiten -- die
   Artikelseite hatte dafuer bis 10.5.31 nur eine nackte Linkliste. */
.empfehlungen{display:block}
.empfehlungen .liste{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.empfehlungen .liste li{border-top:1px solid rgba(255,255,255,.09)}

/* Titel-Liste ohne Bild -- nur noch Desk-Seite (`render.desk_html`), auf der Artikelseite
   ersetzt durch die bebilderten Empfehlungen darueber. */
.verwandte{list-style:none;margin:0;padding:0}
.verwandte li{margin:8px 0}
.verwandte a{font-family:'Oswald',sans-serif;font-weight:500;font-size:19px;color:#fff}
.verwandte a:hover{color:var(--accent)}

/* Live-Ticker: dieselbe Lesespalte, Eintraege statt Absaetze. */
.artikel .ticker-entries{list-style:none;margin:22px 0 0;padding:0;max-width:68ch}
.artikel .ticker-entry{padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.artikel .ticker-entry time{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--accent);font-variant-numeric:tabular-nums}
.artikel .ticker-entry p{margin:8px 0 0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.9)}
.artikel .ticker-entry .src{display:block;margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-4)}
.artikel .live-badge{margin-left:8px;color:var(--signal);font-weight:700}

@media(max-width:1080px){
  .artikel{grid-template-columns:minmax(0,1fr)}
  .artikel > .meta-rail{grid-column:1}
  .artikel .meta-rail{margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
  .artikel .rail-innen{position:static}
  .empfehlungen .liste{grid-template-columns:1fr;column-gap:0}
}
@media(max-width:600px){
  .artikel .body{font-size:16.5px}
  .artikel .dek{font-size:19px;max-width:none}
  .artikel figure.lead img{aspect-ratio:16/9}
}

/* ════════ Trading-Seiten (`redaktion/publisher/trading.py`, R36 10.09.2026) ════════
   Dieselbe Buehne wie die News: Container, Kopf, Footer und `.filter-head` bleiben, statt
   der Ressortzeile stehen oben die Anlageklassen. Symbole haben keine Bilder -- hier zaehlen
   Zahlen, also Tabelle statt Kachelbild. */
.tb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:24px 0 8px}
.tb-tile{display:flex;flex-direction:column;gap:4px;background:var(--surface);padding:14px 16px;border-left:2px solid var(--accent)}
.tb-tile:hover{background:var(--surface-2)}
.tb-tile-count{font-family:'Oswald',sans-serif;font-weight:700;font-size:24px;line-height:1;color:var(--ink-1);font-variant-numeric:tabular-nums}
.tb-tile-name{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

.tb-market-list{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 28px}
.tb-market-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.09)}
.tb-market-list a{font-family:'Oswald',sans-serif;font-weight:500;font-size:15px;color:var(--ink-1)}
.tb-market-list a:hover{color:var(--accent)}
.tb-market-list .tb-count{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-4);font-variant-numeric:tabular-nums}

.tb-table{overflow-x:auto;margin-top:20px}
.tb-table table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.tb-table th{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.tb-table td{padding:9px 10px 9px 0;border-bottom:1px solid rgba(255,255,255,.07);color:var(--ink-2);vertical-align:top}
.tb-table .tb-r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tb-table tr:hover td{background:rgba(86,184,255,.05)}
.tb-sym{white-space:nowrap}
.tb-sym a{font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;color:var(--ink-1)}
.tb-sym a:hover{color:var(--accent)}
.tb-exchange{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-4);margin-top:2px}
.tb-name{color:var(--ink-2);max-width:38ch}
.tb-also{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-4);margin-top:3px}
.tb-market{color:var(--ink-3);white-space:nowrap}
.tb-currency{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-4)}
.tb-up{color:#3fb950}
.tb-down{color:#f85149}
.tb-flat{color:var(--ink-4)}

.tb-figures{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0 24px;margin:22px 0 6px}
.tb-figure{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-top:1px solid rgba(255,255,255,.09)}
.tb-figure-name{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.tb-figure-value{font-family:'Oswald',sans-serif;font-weight:500;font-size:18px;color:var(--ink-1);font-variant-numeric:tabular-nums}
.tb-figure-value a{color:var(--ink-1)}
.tb-figure-value a:hover{color:var(--accent)}

.tb-chart-missing{margin:26px 0 0;padding:18px 20px;background:var(--surface);border-left:2px solid var(--accent);display:flex;flex-direction:column;gap:6px}
.tb-chart-link{font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;color:var(--accent)}
.tb-chart-note{font-size:12.5px;color:var(--ink-4)}
/* Kursverlauf als Inline-SVG (R36 Etappe 2): die Farbe kommt von .tb-up/.tb-down am
   <figure>, Linie und Flaeche erben sie ueber currentColor -- eine Quelle fuer beide. */
.tb-chart{margin:26px 0 4px}
.tb-chart svg{display:block;width:100%;height:auto}
.tb-chart-grid{stroke:rgba(255,255,255,.10);stroke-width:1}
.tb-chart-mark{font-family:'IBM Plex Mono',monospace;font-size:10.5px;fill:var(--ink-4)}
.tb-chart-area{fill:currentColor;opacity:.10;stroke:none}
.tb-chart-line{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.tb-chart figcaption{margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-4)}
.tb-empty{margin:14px 0 0;padding:16px 18px;background:var(--surface);color:var(--ink-4);font-size:13.5px}
@media(max-width:600px){.tb-market-list{grid-template-columns:1fr}.tb-name{display:none}}

/* ════════ Kategorie-Filterseite (`.filter-head`, Design-Refresh D3, Issue #313) ════════ */
.filter-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:4px}
.filter-head .kick{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.filter-head h1{margin:8px 0 0;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:44px;line-height:1.05;letter-spacing:-.015em}
.filter-head .n{white-space:nowrap;padding-bottom:6px;font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
.filter-desc{margin:16px 0 36px;font-size:16px;line-height:1.5;color:var(--ink-2);max-width:64ch}
@media(max-width:600px){.filter-head h1{font-size:32px}}

/* ════════ Rail (`.rail .row`, Issue #291/#312, Werte Handoff 03.09.) ════════ */
.rail .grp{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);padding:0 0 11px;transition:opacity 220ms ease}
.rail .grp2{padding-top:28px}
.rail .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.09);
  transition:opacity 220ms ease,transform 220ms ease,background 150ms}
.rail .row:hover{background:rgba(86,184,255,.06)}
.rail .row.active{background:rgba(86,184,255,.12)}
.rail .row.active .nm{color:var(--accent)}
.rail .row .nm{font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;text-transform:uppercase;line-height:1.1;color:rgba(255,255,255,.74);overflow:hidden;text-overflow:ellipsis}
.rail .row .n{font-size:12.5px;font-weight:800;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
a.row:hover .nm{color:var(--accent)}
.rail.rows-out .row{opacity:0;transform:translateY(-6px)}
.rail.rows-out .grp{opacity:0}

/* ════════ Poster-Hero (`.poster`): 750px/78px ohne Rail, 520px/48px mit Rail.
   `.poster-lg` (Startseite) bleibt als Marker im Markup, die Groesse kommt seit dem
   Handoff 03.09. allein aus dem Layout-Zustand (`.hide-left`). ════════ */
.poster{position:relative;min-height:750px;background:#141416;display:flex;align-items:flex-end;overflow:hidden;margin-bottom:40px;
  transition:min-height 340ms var(--ease-layout)}
.poster .im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster .vg{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(11,12,15,.96) 10%,rgba(11,12,15,.42) 54%,transparent 80%)}
.poster .bd{position:relative;z-index:2;padding:34px 48px 40px;max-width:1000px;display:block}
.poster .bd:hover h1{color:var(--accent)}
.poster .tagline{display:inline-block;background:var(--accent);color:var(--bg);font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px}
.poster h1{margin:22px 0 0;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:78px;line-height:.96;letter-spacing:-.02em;color:var(--ink-1)}
.poster .sub{margin-top:16px;font-size:24px;line-height:1.5;color:#e2e5ea;max-width:46ch}
.poster .cr{margin-top:22px;font-family:'IBM Plex Mono',monospace;font-size:14px;color:#8a8f9c}
.layout:not(.hide-left) .poster{min-height:520px}
.layout:not(.hide-left) .poster h1{font-size:48px}

.sec{display:flex;align-items:baseline;gap:18px;margin:44px 0 20px}
.sec h2{margin:0;font-family:'Oswald',sans-serif;font-weight:700;font-size:28px;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.sec h2 a:hover{color:var(--accent)}
.sec .rule{flex:1;height:2px;background:rgba(255,255,255,.14)}
.sec .all{margin-left:auto;white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.sec .all:hover{color:var(--accent)}

/* Kachelraster: 3 Spalten ohne Rail, 2 mit Rail (>1080px); 2 Spalten 601-1080px; 1 <=600px. */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.layout:not(.hide-left) .trio{grid-template-columns:1fr 1fr}

.liste{list-style:none;margin:0;padding:0}
.liste li{display:flex;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.09)}
.liste li:first-child{border-top:0}
.liste figure.mini{margin:0;flex:none;width:160px}
.liste figure.mini img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#17171a}
.liste figure.mini figcaption{margin-top:4px;font-size:10.5px;color:var(--ink-3)}
.liste .tx{min-width:0}
.liste .tx h3{margin:0;font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;text-transform:none;letter-spacing:0;color:var(--ink-1)}
.liste .tx a{color:var(--ink-1)}
.liste .tx a:hover{color:var(--accent)}
.liste .tx p{margin:6px 0 0;font-size:14px;line-height:1.4;color:var(--ink-2)}
.liste .tx .meta{display:block;margin-top:6px;font-size:11px;color:var(--ink-4)}

/* ════════ Fussnoten ("More from the X Desk", "Back to X"), Desk/Standards (Issue #292) ════════ */
.meta{font-size:12.5px;color:rgba(255,255,255,.35)}
p.meta{margin:24px 0 0}
p.meta a{color:rgba(255,255,255,.35)}
p.meta a:hover{color:var(--accent)}
.artikel .meta{display:block;margin-top:14px}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width:1080px){
  .layout,.layout.hide-left{--railw:0px;--railgap:0px}
  .rail{display:none}
  .trio,.layout:not(.hide-left) .trio{grid-template-columns:1fr 1fr}
  .poster,.layout:not(.hide-left) .poster{min-height:480px}
  .poster h1,.layout:not(.hide-left) .poster h1{font-size:44px}
}
@media (max-width:600px){
  .trio,.layout:not(.hide-left) .trio{grid-template-columns:1fr}
  .poster,.layout:not(.hide-left) .poster{min-height:400px}
  .poster h1,.layout:not(.hide-left) .poster h1{font-size:32px}
  .poster .bd{padding:24px 20px 28px}
  .poster .sub{font-size:17px}
  .liste li{flex-direction:column}.liste figure.mini{width:100%}
}
@media (max-width:520px){
  :root{--pad:14px}
  .stage{padding:0 0 60px}
  .nav-inner{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .layout,main,.rail .row,.rail .grp,.poster,#catRow a{transition:none}
}