/* ═══════════════════════════════════════════════════════════════
   NadirAlpha Website — Mockup-Stylesheet
   White-Label-Prinzip: ALLES Markenspezifische liegt in CSS-Variablen
   (im echten Build aus site.config.yaml generiert). Struktur ist
   markenneutral wiederverwendbar.
   Themes: data-theme="neutral" | "brand" | "dark"  (Umschalter unten rechts)
   ═══════════════════════════════════════════════════════════════ */

:root, [data-theme="neutral"] {
  color-scheme: light;   /* native Widgets hell (2026-09-05) */
  /* Variante A — „Neutral Light": Slate + Blau, maximal seriös */
  --bg: #f7f8f9;
  --surface: #ffffff;
  --surface-2: #f1f3f5;
  --ink: #182230;
  --ink-muted: #51606f;
  --ink-faint: #5c6b7d;   /* Audit P4: 2,9→5,1:1 */
  --border: #e3e7ec;
  --border-2: #cdd5dd;
  --accent: #2458b3;
  --accent-dim: rgba(36, 88, 179, 0.07);
  --up: #187a45;
  --dn: #b3282d;
  --warn: #9a6a00;
  --shadow: 0 1px 3px rgba(24, 34, 48, 0.08);
  /* Logo-Wortmarke: „Nadir" dunkelgrau · „Alpha" dunkelblau (Vorgabe 2026-07-26).
     Eigene Tokens, damit das Logo unabhängig von ink/accent stimmbar bleibt
     (White-Label: kommt später aus site.config.yaml → brand). */
  --brand-gray: #454e59;
  --brand-blue: #1e3f8c;
}

[data-theme="brand"] {
  /* Variante B — „Brand Light": hell, App-Orange als Akzent (abgetönt) */
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface-2: #f4f0ea;
  --ink: #241c14;
  --ink-muted: #6a5c4a;
  --ink-faint: #776a55;   /* Audit P4: 2,8→5,0:1 */
  --border: #ece5da;
  --border-2: #d8cdbd;
  --accent: #d9531e;
  --accent-dim: rgba(255, 107, 53, 0.08);
  --up: #1e7d4f;
  --dn: #c02940;
  --warn: #9a6a00;
  --shadow: 0 1px 3px rgba(36, 28, 20, 0.08);
}

[data-theme="brand"] { --brand-gray: #4a4034; --brand-blue: #1e3f8c; }
[data-theme="dark"] {
  color-scheme: dark;    /* native Widgets dunkel (2026-09-05) */
  /* Variante C — „App Dark": 1:1 die App-Tokens (tamagui.config.ts) */
  --brand-gray: #c8ccd2; --brand-blue: var(--accent); /* Dark: Wortmarke im Akzent-Orange (User 2026-08-22) */
  --bg: #0a0806;
  --surface: #141008;
  --surface-2: #1c160c;
  --ink: #f0ece4;
  --ink-muted: #a89878;
  --ink-faint: #93836a;   /* Audit P4: 3,0→5,4:1 */
  --border: rgba(255, 180, 80, 0.08);
  --border-2: rgba(255, 180, 80, 0.18);
  --accent: #ff6b35;
  --accent-dim: rgba(255, 107, 53, 0.07);
  --up: #3ddc84;
  --dn: #ff4560;
  --warn: #f5c518;
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* P10: iOS bläst Text in breiten Scroll-Containern sonst automatisch auf
   (Produkte-/M&A-Tabellen wirkten mobil „zu groß") */
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  /* Schrift besitzt report.css (IBM Plex Sans, laedt auf jeder Seite) */
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.mono, td.num, .pv {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────────── */
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
main { min-width: 0; }
/* Rail beginnt auf Höhe des Seitenkopfs (report-head liegt IM Grid/main),
   padding-top gleicht das report-head-Padding aus, damit die Anzeige oben bündig sitzt */

/* ── Header / Nav ───────────────────────────────────────────── */
header.site {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
/* Header auf Inhaltsbreite (wie der Content, max 1140px) — Entscheid E12:
   eine schlanke Zeile à la „Slim", Suche rechts */
header.site .wrap {
  display: flex; align-items: center; gap: 16px; min-height: 56px;
}
.brand { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--brand-gray, var(--ink)); white-space: nowrap; }
.b-short { display: none; } /* Kurzmarke „NA": nur mobil im Header (brand_html liefert beide Spans) */
.brand b { color: var(--brand-blue, var(--accent)); }
a.brand:hover { text-decoration: none; } /* Logo = immer Link zur Startseite */
nav.main { display: flex; gap: 18px; font-size: 0.9rem; color: var(--ink-muted); }
nav.main a { color: var(--ink-muted); font-weight: 600; white-space: nowrap; }
nav.main a:hover { color: var(--accent); text-decoration: none; }
.lang-switch { margin-inline-start: auto; font-size: 0.82rem; color: var(--ink-faint); white-space: nowrap; }
.lang-switch b { color: var(--ink); }
/* P9-B1 (User-Entscheid 2026-09-01): mobil kompakter Sprach-Knopf
   (aktuelles Kürzel), die 8er-Zeile wird zum aufklappbaren Panel;
   Desktop unverändert. Gilt für Site-Shell UND Report-Chrome (beide
   Header tragen dasselbe Markup, style.css ist geteilt). */
.lang-btn { display: none; }
@media (max-width: 760px) {
  .lang-switch { position: relative; }
  .lang-btn { display: inline-flex; align-items: center; gap: 4px;
    font: inherit; color: var(--ink); background: none;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 5px 10px; cursor: pointer; }
  .lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .lang-switch .lang-row { display: none; }
  /* P10: alles auf EINER Zeile (User-Entscheid) — nowrap + kompaktere
     Schrift; bei extrem schmalen Geräten scrollt das Panel horizontal */
  .lang-switch.open .lang-row { display: block; position: absolute;
    top: calc(100% + 6px); inset-inline-end: 0; z-index: 80;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow);
    white-space: nowrap; font-size: 0.78rem; line-height: 2;
    max-width: calc(100vw - 24px); overflow-x: auto; text-align: center; }
  .lang-switch.open .lang-row a, .lang-switch.open .lang-row b {
    display: inline-block; padding: 2px 4px; }
}

/* Burger-Menü (nur mobil sichtbar) */
.burger {
  display: none; border: 1px solid var(--border-2); background: var(--surface);
  color: var(--ink); border-radius: 8px; width: 38px; height: 38px;
  font-size: 1.05rem; cursor: pointer; align-items: center; justify-content: center;
}

/* ── Header mobil: Suche rutscht in eigene volle Zeile, Nav ins Burger-Menü ── */
@media (max-width: 760px) {
  header.site .wrap { flex-wrap: wrap; row-gap: 10px; padding-top: 10px; padding-bottom: 10px; }

  header.site nav.main { display: none; }
  header.site nav.main.open {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 10px 20px 14px; box-shadow: var(--shadow);
  }
  header.site nav.main.open a { padding: 8px 0; border-bottom: 1px solid var(--border); }
  header.site nav.main.open a:last-child { border-bottom: none; }
  .burger { display: inline-flex; }
  .lang-switch { margin-inline-start: 0; }
  /* Aktionen (Lupe + Sprache) rechtsbündig — die versteckte Nav nimmt
     ihren flex:1-Platz mit, daher schiebt die Lupe per auto-Margin */
  header.site .icon-btn { margin-inline-start: auto; }
  /* Mobil (Entscheid 2026-07-27): Burger links · Kurzmarke „NA" daneben ·
     Aktionen rechts — die zentrierte Vollmarke kollidierte mit der iPhone-Notch.
     NUR im Header — Footer-Copyright behält die Vollmarke */
  header.site .brand .b-full { display: none; }
  header.site .brand .b-short { display: inline; }
  header.site .brand { margin-inline-start: 6px; }
  /* Fußzeilen-Schlussleiste mobil: gestapelt statt gequetscht —
     Copyright · Links · Land/Sprache je als eigene Zeile, Links ohne Hänge-Umbruch */
  .foot-bottom { display: block; }
  .foot-bottom .legal { margin: 8px 0; gap: 4px 18px; }
  /* nav.legal = höhere Spezifität als die Basis-Regeln, die später in der Datei stehen */
  .foot-bottom nav.legal a { padding: 0; border-right: none; } /* keine Pipe-Trenner beim Umbruch */
  .foot-bottom .right { margin-inline-start: 0; }
}

/* ── Hero (Hauptseite) — zentriert, Apple-artig ruhig ───────── */
.hero { padding: 52px 0 30px; text-align: center; }
.hero h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; }


/* ── Tabellen-Header: Sortierung + Spalten-Filter (statt Chip-Leiste) ── */
thead th { position: relative; }
th.sortable { cursor: pointer; user-select: none; }
/* Label = zentrierte Einheit; Pfeil + ▾ hängen absolut rechts dran und
   verschieben das Label nicht aus der Spaltenmitte */
.th-lab { position: relative; display: inline-block; }

.col-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(24, 34, 48, 0.15); padding: 6px; min-width: 175px;
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.82rem;
}
.col-menu.open { display: block; }
/* Stabile Spaltenbreiten: Layout ändert sich beim Filtern/Sortieren NICHT
   (sonst berechnet der Browser die Breiten aus dem sichtbaren Inhalt neu) */
table.fixed { table-layout: fixed; min-width: 960px; }
/* Index-Tabelle: alles außer der Aktien-Spalte zentriert (Kopf + Inhalt);
   .dots ist inline-flex und zentriert dadurch mit */
table.fixed th:not(:first-child), table.fixed td:not(:first-child) { text-align: center; }
/* Zeilen-Schrift vereinheitlicht (außer Aktien-Spalte): Mono-Zellen (Periode/Datum) und
   Länder-Kürzel auf optisch gleiche Größe wie Index/Sektor (0.88rem Manrope ≈ 0.85rem Mono)
   statt der globalen 0.86em-Inline-Verkleinerung */
table.fixed td:not(:first-child) { font-size: 0.84rem; }
table.fixed td.mono { font-size: 0.81rem; }
table.fixed td .cc { font-size: 0.81rem; }
/* Vertikal mittig: Zellinhalt sitzt auf halber Zeilenhöhe (statt oben angeschlagen),
   einheitliche Zeilenhöhe über etwas mehr symmetrisches Padding */
table.fixed td { vertical-align: middle; padding-top: 14px; padding-bottom: 14px; }
/* Mobil: nur Aktie · Aktualisiert · Update-Tags (Markt + Periode ausgeblendet);
   Layout auf auto + col-Breiten neutralisiert (!important schlägt die Inline-Prozente),
   damit die 3 Spalten die volle Breite ohne Querscrollen nutzen.
   P9-A1 (User-Sichtung 2026-09-01): die alte nth-child(2..5)-Liste stammte
   aus der 7-Spalten-Ära und blendete seit Startseite v4 (5 Spalten) auch
   Aktualisiert + Tags aus — nur die Aktien-Spalte blieb übrig. */
@media (max-width: 760px) {
  /* Audit P1-5: Selektor war table.fixed — die Klasse fiel beim
     Schlank-Umbau weg; jetzt direkt an #idxtab */
  /* P10b: width 100% — mit table-layout:auto schrumpfte die Tabelle auf
     Inhaltsbreite (halber Bildschirm, gestutzte Köpfe); Datums-Spalte
     fest+nowrap, Aktie nimmt den Rest */
  /* P10d (finale Form nach drei Anläufen, dokumentiert als Lehre):
     (1) fixed + display:none — versteckte Spalten reservieren Breite
     (weißes Feld rechts); (2) auto + nowrap-Namenszelle — Spalte 1
     explodiert auf Inhaltsbreite; (3) fixed + col-Breite 0 — Safari
     deutet 0 als auto. LÖSUNG: auto-Layout (!important gegen den
     späteren Basis-Block '#idxtab{table-layout:fixed}') und die
     NAMENSZELLE DARF UMBRECHEN — dann kann sie schrumpfen, Datum ist
     fest+nowrap, Tags behalten ihre Punktbreite, Summe = volle Breite. */
  #idxtab { min-width: 0; width: 100%; table-layout: auto !important; }
  #idxtab col { width: auto !important; }
  #idxtab th:nth-child(2), #idxtab td:nth-child(2),
  #idxtab th:nth-child(3), #idxtab td:nth-child(3) { display: none; }
  #idxtab td:first-child { white-space: normal; }
  #idxtab th:nth-child(4), #idxtab td:nth-child(4) {
    width: 7.2em; white-space: nowrap; }
  #idxtab th { overflow: visible; text-overflow: clip; }
  #idxtab td { padding-left: 10px; padding-right: 10px; }
  #idxtab th { padding-left: 10px; padding-right: 10px; }
  /* Sortier-/Filter-Hinweis neben der Überschrift ist mobil verzichtbar —
     der Coverage-Zähler (.cov) bleibt sichtbar */

  /* Aktien-Spalte mobil: Name + ISIN — Ticker und Währung ausblenden */
  #idxtab td:first-child .mono, #idxtab td:first-child .meta .cur { display: none; }
  /* Hero kompakter, mehr Tabelle im ersten Viewport */
  .hero { padding: 34px 0 22px; }
  .hero h1 { font-size: 1.7rem; }
}
tr.seg-hidden { display: none; } /* Zeilen künftiger „Mehr anzeigen"-Segmente — nahtlos in derselben Tabelle */
/* Gestufte Sichtbarkeit (Report-Seiten, v12-Umbau): versteckte Einträge liegen IM DOM
   (SEO), „+ n weitere/ältere" klappt sie nahtlos auf — Tabellenzeilen UND Karten-Listen */

.col-menu .opt { padding: 7px 10px; border-radius: 7px; cursor: pointer; color: var(--ink); white-space: nowrap; }
.col-menu .opt:hover { background: var(--accent-dim); }
.col-menu .opt.on { color: var(--accent); font-weight: 700; }

/* ── Update-Feed / Tabellen ─────────────────────────────────── */
section { margin: 30px 0; }


table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th {
  text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); font-weight: 600; padding: 12px 14px 9px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr.row-link { cursor: pointer; }
tr.row-link:hover { background: rgba(24, 34, 48, 0.025); }
td.num { text-align: right; white-space: nowrap; }
td .name { font-weight: 700; }
td .meta { font-size: 0.76rem; color: var(--ink-faint); }


/* Tags — neutral ohne Wertung (Entscheid 2026-08-03): EIN Grauton, keine Farb-/
   Punkt-Semantik; einheitliche Höhe über feste Typo/Padding */
.tag {
  display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 3px 10px;
  border-radius: 6px; background: var(--surface-2); color: var(--ink-muted);
  margin: 1px 4px 1px 0; white-space: nowrap;
}
/* Pill-Identitäts-Punkt: Farbe je Tag-TYP via --tc (gesetzt im Markup, tag_color) */
.tag::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tc, var(--ink-faint)); margin-right: 6px; vertical-align: 1px;
}
/* Tag-Punkte (Index-Tabelle): nur Dots, Farbe = Tag-Identität (inline gesetzt);
   Legende als fixed-Tooltip #dot-tip (JS-positioniert, clipping-frei) */
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint);
}
.dots {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 6px 2px; cursor: default; outline: none;
}
.dots:focus-visible { border-radius: 6px; outline: 2px solid var(--accent); }
.dots .dot-legend { display: none; } /* nur Vorlage für #dot-tip — Labels crawlbar im DOM */
#dot-tip {
  display: none; position: fixed; z-index: 80;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(24, 34, 48, 0.15); padding: 8px 12px;
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}
#dot-tip .dl-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--ink); }

/* Länderkürzel statt Flaggen-Emoji (keine Emojis im Produkt) */
.cc {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.66em; font-weight: 600; letter-spacing: 0.05em;
  color: var(--ink-faint); border-radius: 4px; padding: 0;
  vertical-align: 1px; white-space: nowrap;
}

/* ── Rechts-/Dokumentseiten (Apple-Legal-Stil: KEINE Karten,
      fließender Text, nummerierte Abschnitte, ruhige Lesespalte) ── */
.legal-doc { max-width: 76ch; margin: 0 auto; font-size: 0.92rem; line-height: 1.65; } /* Titel/Breadcrumbs zentriert über der Lesespalte */
.legal-doc h2 {
  font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em;
  margin: 30px 0 8px; color: var(--ink);
}
.legal-doc h2:first-child { margin-top: 6px; }
.legal-doc p { margin: 0 0 12px; color: var(--ink-muted); }
.legal-doc p b, .legal-doc p strong { color: var(--ink); }
.legal-doc ul { margin: 0 0 12px 20px; color: var(--ink-muted); }
.legal-doc li { margin-bottom: 4px; }
.legal-doc .addr { color: var(--ink); line-height: 1.5; }
.legal-doc .note {
  font-size: 0.8rem; color: var(--warn); border-left: 2px solid var(--warn);
  padding-left: 12px; margin: 0 0 20px;
}
.legal-doc .stand { margin-top: 26px; font-size: 0.78rem; color: var(--ink-faint); }
/* Glossar-Kapitel: klar größer als die Begriffs-Zeilen (1.05rem) + Linie + Luft,
   damit die Kapiteltrennung sofort erkennbar ist */


/* ── Einklappbare Sektionen (native <details>) ──────────────── */
details.fold { margin: 28px 0; }
details.fold > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: baseline; gap: 10px;
  font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary small { font-weight: 500; color: var(--ink-faint); font-size: 0.76rem; }
details.fold > summary .cnt { font-weight: 600; color: var(--ink-faint); font-size: 0.76rem; }
details.fold > summary::after {
  content: "+"; margin-inline-start: auto; color: var(--ink-faint);
  font-weight: 500; font-size: 1.2rem; line-height: 1;
}
details.fold[open] > summary::after { content: "−"; }
details.fold > summary:hover { color: var(--accent); }
details.fold > .fold-body { margin-top: 14px; }
/* Fold-Titel im Dokument-Kontext (Glossar/FAQ): eine Stufe kleiner als auf Report-Seiten,
   identisch mit .legal-doc h2 (Methodik) — Doku-Typo-Treppe: Kapitel 1.3 › Titel 0.98 › Text 0.92 */
.legal-doc details.fold > summary { font-size: 0.98rem; font-weight: 700; }
/* Text-Inhalt in Aufklappern (Glossar/FAQ): schlicht, ohne doppelte Karten-Rahmung */
.fold-body .fold-text {
  font-size: 0.92rem; line-height: 1.65; color: var(--ink-muted);
  max-width: 76ch; padding: 2px 2px 8px;
}


/* ── KPI-Hero (Stat-Kacheln, dataviz-Regeln: Wert in Ink, Delta mit Vorzeichen) ── */


/* ── Kapitel-Gruppierung (Muster A): h2 = Kapitel, h3.sec = Sektion ── */

h3.sec {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em;
  margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px;
}
h3.sec small { font-weight: 500; color: var(--ink-faint); font-size: 0.78rem; }

/* ── Sticky-TOC im Rail (ersetzt Ad-Monokultur) ── */


/* ── Summary-Karte (Muster C): KPIs links, Fakten-Bullets rechts ── */


/* End-of-Content Multiplex-Slot */


/* ── Werbe-Slots (im Mockup gestrichelt markiert) ───────────── */
.ad-slot {
  border: 2px dashed var(--border-2); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 0.78rem; text-align: center; gap: 4px;
  background: var(--surface-2); padding: 12px;
}
.ad-slot b { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }


.ad-label {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); margin-bottom: 4px; text-align: center;
}

/* Hauptpartner-Slot (strategischer Werbepartner, config-gesteuert) */


/* Affiliate-Block */


.btn {
  display: inline-block; font-size: 0.82rem; font-weight: 700; padding: 8px 14px;
  border-radius: 9px; border: 1px solid var(--border-2); color: var(--ink);
  background: var(--surface-2);
}
.btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { opacity: 0.9; color: #fff; }

/* ── Report-Unterseite ──────────────────────────────────────── */
.report-head { padding: 34px 0 6px; }

.report-head h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }

.updated {
  margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 0.82rem; color: var(--ink-muted);
}
.updated .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); }
.badges { margin-top: 12px; }

/* Karten sind IMMER volle Spaltenbreite; nur der Text darin ist
   auf lesbare Zeilenlänge begrenzt (einheitliche Kasten-Breite). */
.prose { font-size: 0.94rem; }
.prose p { max-width: 80ch; }
.prose p + p { margin-top: 10px; }
/* .pad liegt auf demselben Element wie .card (class="card pad") —
   Standalone-Klasse, kein Nachfahren-Selektor */


/* Provenance-Popover (Muster aus s09_render) */
.pv { border-bottom: 1px dotted var(--accent); cursor: pointer; }
.pv:hover { background: var(--accent-dim); }


/* Update-Historie */


/* ── Footer — Apple-Stil: Spalten-Verzeichnis, Hinweis, Legal-Zeile ── */
footer.site {
  margin-top: 64px; border-top: 1px solid var(--border);
  background: var(--surface-2); padding: 36px 0 26px;
  font-size: 0.76rem; color: var(--ink-muted);
}
footer.site a { color: var(--ink-muted); }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
.foot-cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  padding-bottom: 26px;
}
.foot-cols h4, .foot-cols .foot-h { font-size: 0.76rem; font-weight: 700; color: var(--brand-gray, var(--ink)); margin-bottom: 12px; }
.foot-cols h4 b, .foot-cols .foot-h b { color: var(--brand-blue); } /* Wortmarke im Footer wie im Header */
.foot-cols ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
@media (max-width: 760px) { .foot-cols { grid-template-columns: repeat(2, 1fr); } }
.foot-note {
  border-top: 1px solid var(--border-2); padding-top: 14px;
  color: var(--ink-faint); line-height: 1.65; max-width: 100ch; font-size: 0.72rem;
}
.foot-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;  /* User 2026-08-22: Abstand Copyright ↔ Impressum */
  border-top: 1px solid var(--border-2); margin-top: 16px; padding-top: 14px;
  color: var(--ink-faint); font-size: 0.72rem;
}
.foot-bottom .legal { display: flex; flex-wrap: wrap; }
.foot-bottom .legal a { padding: 0 12px; border-right: 1px solid var(--border-2); }
.foot-bottom .legal a:first-child { padding-inline-start: 0; }
.foot-bottom .legal a:last-child { border-right: none; }
.foot-bottom .right { margin-inline-start: auto; }

/* H2 — Slim mit Suche RECHTS: Brand + Nav links, Suchfeld rechtsbündig */


.btn.small { font-size: 0.78rem; padding: 6px 12px; }

/* H4 — „Apple": schmale Leiste (44px), Nav gleichmäßig über die Breite verteilt,
   Suche als Lupen-Icon → aufklappendes Suchpanel unter dem Header */

header.site.apple .wrap { min-height: 44px; gap: 8px; }
header.site.apple .brand { font-size: 0.98rem; }
/* Gleichmäßige Nav-Verteilung NUR Desktop — mobil greift die generische
   Regel (Nav versteckt → Burger). Ohne min-width schlug die höhere
   Spezifität dieser Regel die Mobile-Ausblendung (Burger + Nav doppelt). */
@media (min-width: 761px) {
  header.site.apple nav.main {
    flex: 1; display: flex; justify-content: space-evenly; gap: 0;
  }
}
header.site.apple nav.main { font-size: 0.8rem; }
header.site.apple nav.main a { font-weight: 500; padding: 4px 8px; }
header.site.apple .lang-switch { font-size: 0.74rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ink); cursor: pointer;
  width: 34px; height: 34px; border-radius: 8px; padding: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--accent); }
/* P10: Theme-Knopf als SVG-Paar (CSS-getrieben) — das ☀-Text-Glyph saß
   schief und rendert auf iOS als Emoji; jetzt exakt zentriert wie die
   übrigen Icon-Knöpfe */
#themebtn .ic-sun { display: none; }
[data-theme="dark"] #themebtn .ic-sun { display: block; }
[data-theme="dark"] #themebtn .ic-half { display: none; }
/* Such-Overlay (Apple-Muster): KEINE Trennlinie — Panel und Header sind eine
   durchgehende Fläche; Abgrenzung nach unten macht der Schatten, der
   Seiteninhalt wird beim Öffnen abgedunkelt (body.search-open) */
.search-panel {
  display: none; background: var(--surface);
  box-shadow: 0 16px 32px rgba(24, 34, 48, 0.10);
}
.search-panel.open { display: block; animation: spanel-in 0.18s ease; }
@keyframes spanel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
body.search-open::before {
  content: ""; position: fixed; inset: 0; z-index: 40;
  background: rgba(24, 34, 48, 0.28);
}
/* WICHTIG: header.site .wrap setzt display:flex — für das Panel-Innere
   mit höherer Spezifität auf Block zurück, sonst stehen Feld und
   Ergebnisse nebeneinander statt untereinander */
header.site .search-panel .wrap, .search-panel .wrap {
  max-width: 860px; margin: 0 auto; padding-top: 12px; padding-bottom: 14px;
  min-height: 0; display: block;
}
.search-box { position: relative; }
.search-box > svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); pointer-events: none;
}
.search-box input {
  width: 100%; padding: 8px 14px 8px 40px; font: inherit; font-size: 0.95rem;
  border: none; border-radius: 10px;
  background: var(--surface-2); color: var(--ink);
}
.search-box input::placeholder { color: var(--ink-faint); }
.search-box input:focus { outline: 2px solid var(--accent); }
.search-results { margin-top: 12px; display: flex; flex-direction: column; }
.search-results .l {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); padding: 4px 12px 6px;
}
/* Vorschlag = 2 Zeilen: oben Name + Ticker + Land, darunter Sektor · Datum —
   kein Umbruch-Chaos mehr, mobil wie Desktop identisch ruhig */
.search-results a {
  display: block; padding: 9px 12px; border-radius: 10px; color: var(--ink);
}
.search-results a .top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 0.95rem; }
.search-results a .top b { font-weight: 700; }
.search-results a .meta { display: block; margin-top: 1px; font-size: 0.74rem; color: var(--ink-faint); }
.search-results a:hover, .search-results a.sel { background: var(--accent-dim); text-decoration: none; }
.search-results .empty { padding: 10px 12px; font-size: 0.86rem; color: var(--ink-faint); }
/* Mobil greift die allgemeine Header-Regel: Nav → Burger-Menü, Suchpanel bleibt */

/* H3 — Zweizeilig: Utility-Bar oben (Partner/Sprache), Hauptzeile darunter */


/* Ad-Stil-Varianten
   A1 „Boxed"    (Default): gestrichelt/abgesetzt — klar getrennt, unauffälligst, niedrigste CTR
   A2 „Native"   : Anzeige sitzt in einer Karte wie der Content (AdSense In-Article,
                   Schrift/Farben angepasst) — fügt sich in den Lesefluss, beste CTR bei Konformität
   A3 „Seamless" : randlos auf dem Seitenhintergrund, nur Label — minimal sichtbar */


/* ── TradingView-Chart: Click-to-Load-Fassade (DSGVO + Ladezeit) ──
   Startet SCHMAL (eine Zeile), wächst erst beim Laden auf Chart-Höhe */


/* Design-Lab-Umschalter (unten links, nur Mockup) */


/* AP-S5 (PLAN_STARTSEITE): Startseiten-Tabelle im Report-Design */
.hero .sub { color: var(--ink-muted); margin: 12px auto 0; max-width: 640px; font-size: 1.02rem; }
.hero .sub p { margin: 0 0 8px; }
/* A11y/Mobile-Runde 2026-08-30: .tbl-Wrapper scrollt selbst — die
   ktab-Tabellen (Meldungen, Such-Panel) erzeugen sonst mobilen
   Body-Querscroll (Spiegel von .tscroll der Reports) */
.tbl { overflow-x: auto; }
.tbl-hint { color: var(--ink-faint); font-size: 0.78rem; margin: 6px 0 10px;
  text-align: center; }
.tbl-mehr { text-align: center; margin: 18px 0 6px; display: flex; gap: 10px; justify-content: center; }
#sfeld, #ksuche-feld { width: 100%; padding: 8px 12px; display: block;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
  color: var(--ink); font: inherit; }
#sfeld:focus, #ksuche-feld:focus { outline: none; border-color: var(--accent); }
/* Nativer Loesch-Knopf der Suchfelder (Fund 2026-09-05, Dark-Modus): Chrome/Safari
   zeichnen ihn systemfarbig (blau) und ohne Theme-Bezug. Eigenes X in Tinte, als
   Maske aus currentColor, folgt allen drei Themes; Firefox kennt den Knopf nicht. */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none;
  appearance: none; width: 14px; height: 14px; margin-left: 6px; cursor: pointer;
  color: var(--ink-muted); background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }


/* Wissens-Werke (AP-W): Luft auf den Handbuch-Seiten (User 2026-08-22).
   .report besitzt das Grund-Layout (report.css) — .werk gibt den
   Themen-Karten Abstand und trennt die Themen sichtbar voneinander. */
.report .werk h3 { margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.report .werk h3:first-of-type { border-top: none; padding-top: 6px; }
.report .werk p { margin: 7px 0; line-height: 1.6; }
.report .werk p.lead { margin: 14px 0 22px; }
.report .werk h2 { margin-top: 30px; }
.report .werk ul { margin: 10px 0 16px; }
.report .werk li { margin: 7px 0; line-height: 1.55; }
.report .werk li ul { margin: 6px 0 6px 8px; }
.report .werk .werk-zurueck { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Header-Suche: Schließen-Knopf im Panel (User 2026-08-22) */
.search-box .search-x { position: absolute; inset-inline-end: 8px; top: 50%;
  transform: translateY(-50%); border: none; background: none; cursor: pointer;
  color: var(--ink-faint); padding: 6px; border-radius: 7px; display: flex; }
.search-box .search-x:hover { color: var(--accent); background: var(--surface-2); }


/* Wissen & Tools: Werk-Kacheln auf der Index-Seite (User 2026-08-22) */
.wt-grid { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin: 16px 0; }
@media (max-width: 700px) { .wt-grid { grid-template-columns: 1fr; } }
.wt-karte { display: block; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); padding: 16px 18px; text-decoration: none; color: var(--ink); }
.wt-karte:hover { border-color: var(--accent); text-decoration: none; }
.wt-karte .wt-titel { display: block; font-weight: 700; font-size: 1rem; color: var(--accent); }
.wt-karte .wt-text { display: block; margin-top: 6px; font-size: 0.85rem;
  color: var(--ink-muted); line-height: 1.55; }


/* Sticky Footer (User 2026-08-22): auf kurzen Seiten sitzt der Footer am
   unteren Viewport-Rand — main dehnt sich, Footer wird nie hochgezogen. */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }
body > footer.site { margin-top: auto; }
.wt-karte.wt-bald { opacity: 0.75; cursor: default; }
.wt-karte.wt-bald:hover { border-color: var(--border); }
.wt-karte.wt-bald .wt-titel { color: var(--ink); }

/* Startseiten-Tabelle: NUR das feste Spaltenraster (stabile Breiten beim
   Nachladen) — Optik bleibt das schlanke Report-Tabellen-Idiom, bewusst
   OHNE die table.fixed-Archiv-Polster (User 2026-08-22) */
#idxtab { table-layout: fixed; }
/* Zu lange Werte: einzeilig mit Ellipsis abschneiden (User 2026-08-22);
   der volle Wert steht im title-Attribut (Hover) */
#idxtab td, #idxtab td .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* User 2026-08-30: EIN +/−-Design site-weit — Spiegel der Report-Knöpfe
   (.more-btn in report.css): Accent-Farbe, Ghost-Stil, Radius 6px */
.tbl-mehr .tbl-knopf { width: 32px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 400; line-height: 1; border-radius: 6px;
  background: none; border: none; color: var(--accent); }
.tbl-mehr .tbl-knopf:hover:not(:disabled) { background: none;
  text-decoration: underline; }
.tbl-mehr .tbl-knopf:disabled { opacity: 0.35; cursor: default;
  color: var(--accent); background: none; }

/* Startseiten-Tabelle: Kopfzeile mit Label oben + Kontroll-Ebene darunter
   (Sortier-Pfeil und Filter IMMER sichtbar, dick wenn aktiv — User 2026-08-22) */
#idxtab th { vertical-align: middle; position: relative; }
#idxtab .th-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#idxtab .th-lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#idxtab .th-ctl { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
#idxtab .sortpf { font-size: 0.82rem; color: var(--ink-faint); line-height: 1; }
#idxtab th.asc .sortpf, #idxtab th.desc .sortpf { color: var(--accent); font-weight: 800; }
#idxtab th.sortable { cursor: pointer; }

/* Filter-Menü: Checkboxen zeigen die Auswahl (User 2026-08-22) */
.col-menu .opt { display: flex; align-items: center; gap: 8px; }
.col-menu .opt::before { content: ""; width: 14px; height: 14px; flex-shrink: 0;
  border: 1.5px solid var(--border-2); border-radius: 4px; display: flex;
  align-items: center; justify-content: center; font-size: 10px; line-height: 1; }
.col-menu .opt.on::before { content: "✓"; color: #fff;
  background: var(--accent); border-color: var(--accent); }
/* Filter-Auffüllung: Nicht-Treffer ausgegraut (Tabelle hält Mindesthöhe) */
#stockrows tr.dimm td { opacity: 0.35; }
#stockrows tr.dimm:hover td { background: none; }
/* Abschluss-Strich unter der Tabelle, vor der Anzeige (User 2026-08-22) —
   gleiche Linie wie unter den Kapitel-Überschriften */
.tbl-schluss { border: none; border-top: 1px solid var(--border); margin: 18px 0 6px; }
/* Filter-Menü: eigener Scroll + fixed-Positionierung (nie mehr vom
   Tabellen-Scroll-Container abgeschnitten — User 2026-08-22) */
.col-menu { overflow-y: auto; overscroll-behavior: contain; }

/* Seitenwechsel-Ruhe (User 2026-08-22):
   1) scrollbar-gutter stable — kurze und lange Seiten haben dieselbe
      Inhaltsbreite, kein horizontales Zucken beim Kapitelwechsel
   2) Cross-Document View Transitions — sanfter Übergang statt Weiß-Blitz
      (progressive enhancement; Browser ohne Support ignorieren es) */
html { scrollbar-gutter: stable; }
@view-transition { navigation: auto; }

/* Audit P4-13b: Dark — dunkle Textfarbe auf Akzent-Flächen (weiß war 2,84:1;
   --bg auf Akzent = 7,05:1) */
[data-theme="dark"] .btn.primary, [data-theme="dark"] .btn.primary:hover { color: var(--bg); }
[data-theme="dark"] .col-menu .opt.on::before { color: var(--bg); }

/* Audit C-9: generische Kleintext-Klasse (Werk-Seiten nutzen span.small) */
.small { font-size: 0.78rem; color: var(--ink-muted); }


/* ── Earnings-Kalender v2 (2026-08-25): Einheits-Tabellen im Startseiten-
   Idiom — feste Spalten, feste Zeilenhöhe, Kopf-Filter, +/−-Nachladen ── */
.ktab { table-layout: fixed; width: 100%; }
.ktab col.kc-t { width: 108px; }
.ktab col.kc-s { width: 118px; }
/* Markt-Spalte breit genug für den Sektor (User-Entscheid 2026-08-26:
   volle Sektornamen behalten). Gemessen an 413 Zellen der Kalender-Seite:
   ohne Sektor ist die Zelle im Median 8 Zeichen lang, mit Sektor 21, im
   90. Perzentil 43 und maximal 57 ('AU · ASX · Pharmaceuticals,
   Biotechnology & Life Sciences'). 32 % fassen rund 50 Zeichen und decken
   damit gut 90 % ab; der Rest kürzt mit Ellipsis und steht vollständig im
   title-Hover der Zelle. */
.ktab col.kc-m { width: 32%; }
.ktab td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-top: 7px; padding-bottom: 7px; }
.ktab th { vertical-align: middle; position: relative; }
.ktab .th-kopf { display: flex; align-items: center;
  justify-content: space-between; gap: 6px; }
.ktab .th-lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Status-Links (Link-Paket 2026-08-28): Badge fuehrt zur amtlichen
   Quelle des Dokuments; gepunktet = dezent, Farbe erbt das Theme */
.ktab a.stlink { color: inherit; text-decoration: underline dotted;
  text-underline-offset: 2px; }
.ktab a.stlink:hover { text-decoration: underline solid; }
tr.khide { display: none; }
/* Mobil bleibt es bei 26 %: dort ist die Aktien-Spalte ohnehin der Engpass
   (kc-t und kc-s sind feste Pixel), mehr Markt-Breite ginge direkt von ihr
   ab. Der Sektor bleibt über den Hover erreichbar.
   P9-A4 (User-Sichtung 2026-09-01): min-width — bei width:100% auf 375 px
   quetschte das fixe Raster alle Zellen zu Ellipsen; jetzt scrollt die
   Tabelle echt im .tbl-Wrapper und die Spalten behalten Luft. */
@media (max-width: 760px) {
  .ktab col.kc-m { width: 26%; }
  .tbl .ktab { min-width: 640px; }
}
/* Schnell-Tooltip der Kalender-Tabellen (User 2026-08-26). Liegt bewusst am
   body und nicht in der Zelle: die Zellen haben overflow:hidden fuer die
   Ellipsis und wuerden jeden Tooltip abschneiden. */
.ktip { position: fixed; z-index: 60; display: none; pointer-events: none;
  max-width: min(440px, 88vw); padding: 6px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); font-size: 0.78rem; line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.col-menu { max-height: 340px; overflow-y: auto; }

/* ── Suchzeile mit Steuerung (User-Entscheid 2026-08-26) ──────────────────
   Suche, Sortieren und Filter stehen NEBENEINANDER in einer Zeile und
   tragen dieselbe Form: gleiche Höhe, gleicher Radius, gleicher Rahmen.
   Die Filter lagen vorher in den Spaltenköpfen — Filter und Spalten waren
   damit fest verheiratet, und auf schmalen Geräten kollidierten die
   Klappmenüs mit den Nachbarlabels. */
/* Abstand oben = Abstand unten (User 2026-08-26): report.css gibt h2
   36px Vorlauf, die Suchzeile bekam nur 14px — sie klebte am Einleitungs-
   text und stand einsam vor der ersten Überschrift. Jetzt sitzt sie
   mittig zwischen beidem. */
.suchzeile { max-width: 660px; margin: 36px auto 0; display: flex;
  align-items: stretch; gap: 8px; position: relative; }
.suchzeile input[type="search"] { flex: 1 1 auto; min-width: 0; }
/* static: das Menue misst sich an der .suchzeile, nicht am Knopf */
.fb { position: static; display: flex; }
.fb-btn { display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--ink-muted); font: inherit;
  font-size: 0.88rem; line-height: 1.35; cursor: pointer; white-space: nowrap; }
.fb-btn:hover, .fb-btn[aria-expanded="true"] { border-color: var(--accent);
  color: var(--accent); }
.fb-btn i { font-style: normal; font-size: 0.66rem; color: var(--ink-faint); }
.fb-btn:hover i, .fb-btn[aria-expanded="true"] i { color: var(--accent); }
.fb-btn b { font-weight: 700; font-size: 0.74rem; margin-left: -2px;
  padding: 1px 6px; border-radius: 999px; background: var(--accent);
  color: #fff; line-height: 1.5; }
.fb.aktiv .fb-btn { border-color: var(--accent); color: var(--accent); }

/* EIN Feld über die GANZE Zeile (User-Entscheid 2026-08-26): das Menü
   hängt nicht am Knopf, sondern an der Suchzeile — es geht bündig von der
   linken Kante der Suche bis zur rechten Kante des letzten Knopfs auf.
   Filter und Sortieren teilen sich damit Breite, Rahmen und Raster; beim
   Wechsel bleibt der Block stehen und nur der Inhalt tauscht. */
.fb .col-menu { top: calc(100% + 6px); left: 0; right: 0;
  width: auto; min-width: 0; max-width: none; padding: 0;
  max-height: min(70vh, 440px); transform: none; }
/* Akkordeon (User-Entscheid 2026-08-27, Option A): beim Aufklappen stehen
   nur die Kategorie-Zeilen, alle gleich hoch; ein Klick oeffnet die Werte
   der EINEN Kategorie ueber die volle Breite (exklusiv, das JS schliesst
   die vorige — die Feldhoehe bleibt gedeckelt, nichts springt). */
.fb .col-menu .fbm-grp { border-top: 1px solid var(--border); }
.fb .col-menu .fbm-grp:first-child { border-top: none; }
.fb .col-menu .fbm-akk { display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 8px; border: none; background: none;
  font: inherit; font-size: var(--fs-th, 0.66rem); font-weight: 600;
  color: var(--ink-muted); text-align: start; cursor: pointer;
  border-radius: 7px; }
.fb .col-menu .fbm-akk:hover { background: var(--accent-dim);
  color: var(--accent); }
.fb .col-menu .fbm-akk i { font-style: normal; font-size: 0.6rem;
  color: var(--ink-faint); transition: transform .15s; }
[dir="rtl"] .fb .col-menu .fbm-akk i { transform: scaleX(-1); }
.fb .col-menu .fbm-akk:hover i { color: var(--accent); }
/* offen: der Pfeil zeigt nach unten — in LTR wie RTL dieselbe Drehung */
.fb .col-menu .fbm-grp.offen .fbm-akk i { transform: rotate(90deg); }
.fb .col-menu .fbm-anz { font-weight: 700; font-size: 0.68rem;
  padding: 0 6px; border-radius: 999px; background: var(--accent);
  color: #fff; line-height: 1.5; }
.fb .col-menu .fbm-anz:empty { display: none; }
/* Dark-Theme: Weiss auf Dark-Accent (#ff6b35) traegt nur 2,84:1 — wie
   beim Haekchen (.opt.on::before) uebernimmt --bg die Textfarbe */
[data-theme="dark"] .fb .col-menu .fbm-anz,
[data-theme="dark"] .fb-btn b { color: var(--bg); }
/* Werte: zu, bis die Kategorie-Zeile sie oeffnet; dann volle Breite im
   Raster. Lange Listen scrollen INNEN, damit die Kategorie-Zeilen immer
   sichtbar bleiben. */
.fb .col-menu .fbm-werte { display: none; }
.fb .col-menu .fbm-grp.offen .fbm-werte { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0 14px; padding: 0 2px 8px; max-height: 210px; overflow-y: auto;
  overscroll-behavior: contain; }
/* das flache Sortieren-Feld nutzt dasselbe Raster (Symmetrie der Felder) */
.fb .col-menu .fbm-flach { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 14px; }
/* min-height haelt die Kopfzeile gleich hoch, ob mit Reset (Filter) oder
   ohne (Sortieren) — die beiden Felder duerfen beim Wechsel nicht springen */
.fb .col-menu .fbm-kopf { display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 10px 14px 9px;
  min-height: 36px; box-sizing: border-box;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--surface); border-radius: 10px 10px 0 0; z-index: 1; }
/* Typografie wie in den Tabellen (User 2026-08-26): Werte in --fs-table,
   Gruppen-Überschriften wie ein <th> (--fs-th, 600, ohne Versalien und
   Sperrung — genau wie report.css es für Tabellenköpfe setzt). Die
   Variablen kommen von .report, in dem die Leiste ohnehin liegt. */
.fb .col-menu { font-size: var(--fs-table, 0.72rem); font-weight: 400; }
.fb .col-menu .fbm-titel { font-size: var(--fs-th, 0.66rem); font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--ink-muted); }
.fb .col-menu .fbm-reset { border: none; background: none; padding: 0;
  font: inherit; font-size: var(--fs-th, 0.66rem); font-weight: 600;
  color: var(--accent); cursor: pointer; }
.fb .col-menu .fbm-body { padding: 4px 10px 8px; }
.fb .col-menu .opt { padding: 6px 8px; font-size: var(--fs-table, 0.72rem);
  min-width: 0; }
/* A11y (2026-08-27): die Optionen sind fokussierbare DIVs (role=checkbox/
   radio) — sichtbarer Fokus-Ring Pflicht */
.fb .col-menu .opt:focus-visible { outline: 2px solid var(--accent);
  outline-offset: -2px; }
/* lange Werte (Fund 2026-08-27, Sektor) enden in Ellipsis statt in der
   Nachbarspalte; der volle Text steht im title */
.fb .col-menu .opt .lab { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; }
/* Richtungs-Wahl am Sortier-Eintrag (User 2026-08-27): beide Pfeile
   klickbar, der aktive traegt Akzent; das Feld bleibt dabei offen */
.fb .col-menu .opt .opt-ri { margin-left: auto; display: flex; gap: 2px; }
.fb .col-menu .opt .opt-pf { color: var(--ink-faint); padding: 0 5px;
  border-radius: 5px; cursor: pointer; font-size: var(--fs-table, 0.72rem); }
.fb .col-menu .opt .opt-pf:hover { color: var(--accent);
  background: var(--accent-dim); }
.fb .col-menu .opt .opt-pf.on { color: var(--accent); font-weight: 700; }
.fb .col-menu .opt.on { font-weight: 600; }
.fb .col-menu .opt .cnt { margin-left: auto; color: var(--ink-faint);
  font-size: var(--fs-th, 0.66rem); font-variant-numeric: tabular-nums; }

.fbar-chips { max-width: 660px; margin: 8px auto 0; display: flex;
  flex-wrap: wrap; gap: 6px; }
.fbar-chips:empty { margin: 0; }
.fb-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px;
  border: none; border-radius: 999px; background: var(--accent-dim);
  color: var(--accent); font: inherit; font-size: 0.76rem; cursor: pointer; }
.fb-chip::after { content: "\00d7"; font-size: 1.05em; line-height: 1; opacity: .75; }
.fb-chip:hover::after { opacity: 1; }
@media (max-width: 560px) {
  .suchzeile { flex-wrap: wrap; }
  .suchzeile input[type="search"] { flex: 1 0 100%; }
  .fb { flex: 1; }
  .fb-btn { width: 100%; justify-content: center; }
  .fb .col-menu { left: 0; right: 0; }
}
#kres .meta { color: var(--ink-faint); font-size: .78rem; }