/* SignalChain v6-Reportlayout, Fassung fuer die Marketing-Homepage: dieselbe
 * CSS wie `executive_v6.py::_V6_STIL()` (ohne die beiden Tabler-Bestandteile),
 * unter .sc-report-demo gescopt und v6d- praefigiert (.claude/scratch/tmp/scope_css.py,
 * 2026-10-28). Aenderung an der echten Reportgestaltung? Dort aendern und dieses File
 * neu erzeugen, nicht hier direkt editieren. */

/* FARBSYSTEM UEBERARBEITET (Kundenauftrag 2026-10-19, Vorgabe eines extern
   erarbeiteten Farb-/Typografie-Briefings -- "nur Farben und Typografie
   ueberarbeiten, keine Layoutaenderungen"): kuehleres, helleres Editorial-System
   statt des bisherigen beige/papierartigen Tons. Werte stammen wortgetreu aus dem
   Briefing; `--sc-navy` war schon identisch (#123a63), `--sc-gold` (Warnstufe Gelb)
   ist NICHT Teil des Briefings (das kennt nur Gruen/Orange/Rot/Cyan als
   Statusfarben) und bleibt deshalb unveraendert -- CLAUDE.md 8.12 fuehrt vier
   Warnstufen, keine darf durch Weglassen auf eine andere Stufe fallen. */
.sc-report-demo{
  --sc-ink:#1f2a37; --sc-muted:#5b6878; --sc-meta:#7c8897;
  --sc-line:#e2e8ef; --sc-line-sekundaer:#d5dde6; --sc-paper:#f5f7fa;
  --sc-navy:#123a63; --sc-navy-dunkel:#0e2e4d; --sc-navy-hell:#2c5a88; --sc-navy-tint:#eef4f9;
  --sc-red:#c7523b; --sc-red-dunkel:#a63e2a; --sc-red-tint:#fbedea;
  --sc-gold:#b8860b;
  --sc-green:#7fb446; --sc-green-dunkel:#5e8e2e; --sc-green-tint:#f3f8ec;
  --sc-orange:#d88a1e; --sc-orange-dunkel:#b66f12; --sc-orange-tint:#fbf4e8;
  --sc-cyan:#2f89a8; --sc-cyan-dunkel:#246a82; --sc-cyan-tint:#edf7fa;
  --sc-schatten:0 4px 14px rgba(18,58,99,.05);
  /* MONOSPACE FUER MESSWERTE (Kundenauftrag 2026-10-25: "optisch mehr
     Monitoring-Effekte... technischere Typografie" statt mehr Inhalt/Daten --
     reine Stilfrage, keine Abweichung von Prinzip 1). Systemschriftarten,
     kein neues Font-Loading (CLAUDE.md 12.4-Disziplin, dieselbe wie beim
     bisherigen Sans-Stack). Nur auf echten MESSWERTEN (Zahlen, Einheiten),
     nicht auf Fliesstext -- ein monospacer Absatz waere schwerer lesbar,
     keine "Monitoring"-Assoziation. */
  --sc-mono:ui-monospace,'SF Mono','Cascadia Code','Roboto Mono',Consolas,monospace;
}
.sc-report-demo *{box-sizing:border-box}
/* NUR NOCH SANS, UEBERALL (Kundenauftrag 2026-10-23): Zwischenzeitlich (Kunden-
   auftrag 2026-10-19) war Sans die Grundschrift, Georgia/Serif blieb explizit auf
   den beiden Headline-Elementen (`.schlagzeile`, `.aha-headline`) stehen -- im
   Live-Review auf dem Pro-Entwurf-Pfad wirkte genau das als Schriftmix und wurde
   zurueckgenommen. Seither traegt kein Element mehr eine eigene Serif-Deklaration. */
.sc-report-demo{margin:0;background:var(--sc-paper);color:var(--sc-ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  line-height:1.5}
.sc-report-demo .v6d-sans{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
.sc-report-demo main.v6d-report{max-width:66rem;margin:0 auto;padding:0 1.2rem 2rem}
/* Generelle Linkfarbe statt Browser-Blau (Kundenauftrag 2026-10-16) -- einzelne
   Bausteine (Footer, Strassenkarte) setzen ihre eigene Farbe schon gezielt; dies
   faengt jede sonst uebersehene Stelle auf (Quellen-Akkordeon, verlinkte Befunde). */
.sc-report-demo main.v6d-report a{color:var(--sc-navy)}
.sc-report-demo .v6d-section-gap{margin-top:2rem}
/* GLEICHE KARTENHOEHE IN EINER ZEILE (Kundenauftrag 2026-10-26, Screenshot: "Beide
   Boxen sollten die gleiche Hoehe haben"). Tablers `.row-cards` regelt nur den
   Zeilenabstand, nicht die Hoehe -- das eingebaute Hoehen-Stretching
   (`.card-group>.card{flex:1 0 0}`) gilt nur fuer `.card-group`, nicht fuer Karten
   in einem normalen Bootstrap-`.row`. Die SPALTE (`.col-*`) wird durch Bootstraps
   Standard-`align-items:stretch` auf dem Row-Flexcontainer zwar schon auf die
   Zeilenhoehe gestreckt, die `.card` DARIN bleibt aber bei `height:auto` (Tablers
   `--tblr-card-height` ist leer). `.row-cards` wird in dieser Datei ausschliesslich
   fuer die beiden Leitartikel-Zeilen verwendet (Haupttext+Faktenbox, Regionen+
   Aenderung) -- die Regel darf deshalb pauschal fuer jede `.row-cards`-Spalte
   gelten, ohne andere Kartenraster (KPI-Leiste, Ressorts, Zahlen des Tages) zu
   beeinfluessen, die keine `.row-cards`-Klasse tragen. */
.sc-report-demo .v6d-row-cards>[class*="col-"]>.v6d-card{height:100%}

/* ---------- Masthead (Kundenauftrag 2026-10-26: "zu hoch, zu zentriert, wirkt wie
   eine Landingpage-Ueberschrift" -- zweizeiliger, linksbuendiger Report-Masthead statt
   grossem zentriertem Hero. Gesamthoehe ca. 45 % geringer als zuvor (3rem-Titel plus
   zentrierte Unterzeile entfallen). Derselbe 66rem-Rasterblock wie `.kpi-leiste`/
   `.tagesleiste-markt` -- linke Kante von "SignalChain" liegt dadurch exakt auf der
   linken Kante der Kennzahlenzeile darunter, keine eigene Breite erfunden. Der
   bisherige Claim ("Erkennen Sie heute...") steht unveraendert im Footer
   (`footer.brand.headline`, dieselbe Textquelle) -- im Header bewusst weggelassen,
   keine Information geht verloren. */
.sc-report-demo .v6d-masthead{padding:1rem 1.2rem .8rem;margin-bottom:0;max-width:66rem;margin-left:auto;
  margin-right:auto;border-bottom:1px solid var(--sc-line-sekundaer)}
.sc-report-demo .v6d-masthead-zeile1{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:.1rem}
.sc-report-demo .v6d-masthead-marke{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:2rem;font-weight:700;letter-spacing:-.01em;color:var(--sc-ink);margin:0}
.sc-report-demo .v6d-masthead-datum{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:.78rem;color:var(--sc-ink)}
.sc-report-demo .v6d-masthead-zeile2{display:flex;justify-content:space-between;align-items:baseline}
.sc-report-demo .v6d-masthead-branche{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:1rem;font-weight:600;color:var(--sc-ink)}

/* ---------- Tagesleiste: statische Markt-Box (Handelsblatt-Layoutbrief 2026-10-16) */
.sc-report-demo .v6d-tagesleiste-markt{border-top:1px solid var(--sc-line);border-bottom:1px solid var(--sc-line);
  padding:.7rem 1.2rem .5rem;max-width:66rem;margin:0 auto;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
.sc-report-demo .v6d-tagesleiste-reihe{display:flex;gap:1.6rem;flex-wrap:wrap}
.sc-report-demo .v6d-tagesleiste-zelle{flex:1;min-width:8rem;border-top:3px solid;padding-top:.4rem}
.sc-report-demo .v6d-tagesleiste-name{font-size:.68rem;font-weight:700;letter-spacing:.02em;
  color:var(--sc-muted);margin-bottom:.2rem;white-space:normal}
.sc-report-demo .v6d-tagesleiste-wert{font-size:.92rem;font-weight:700;color:var(--sc-ink);
  font-family:var(--sc-mono);font-variant-numeric:tabular-nums}

/* ---------- Lageleiste ---------- */
.sc-report-demo .v6d-lageleiste{display:flex;align-items:center;gap:.8rem;background:#fff;
  border:1px solid var(--sc-line);border-left:5px solid var(--sc-gold);
  padding:.7rem 1rem;margin:1.4rem 1.2rem 0;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  flex-wrap:wrap;max-width:66rem;margin-left:auto;margin-right:auto}
.sc-report-demo .v6d-lageleiste.v6d-gruen{border-left-color:var(--sc-green)}
.sc-report-demo .v6d-lageleiste.v6d-gelb{border-left-color:var(--sc-gold)}
.sc-report-demo .v6d-lageleiste.v6d-orange{border-left-color:var(--sc-orange);background:var(--sc-orange-tint)}
.sc-report-demo .v6d-lageleiste.v6d-rot{border-left-color:var(--sc-red);background:var(--sc-red-tint)}
.sc-report-demo .v6d-lageleiste b{font-size:.92rem}
.sc-report-demo .v6d-lageleiste span{color:var(--sc-muted);font-size:.82rem}
.sc-report-demo .v6d-lageleiste .v6d-badge{margin-left:auto;font-size:.68rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:.25rem .6rem;border-radius:999px;color:#fff}
.sc-report-demo .v6d-lageleiste .v6d-badge.v6d-gruen{background:var(--sc-green)}
.sc-report-demo .v6d-lageleiste .v6d-badge.v6d-gelb{background:var(--sc-gold)}
.sc-report-demo .v6d-lageleiste .v6d-badge.v6d-orange{background:var(--sc-orange)}
.sc-report-demo .v6d-lageleiste .v6d-badge.v6d-rot{background:var(--sc-red)}

/* ---------- KPI-Leiste (Kundenauftrag 2026-10-22, loest .lageleiste als oberer
   Bereich ab): fuenf kompakte Kacheln statt eines Fliesstext-Streifens. Bullet-/
   Threshold-Darstellung bleibt Kartenebene (Trends & Fristen) vorbehalten -- hier
   nur Zahl, Richtung, Status, exakt wie Abschnitt 3 des Briefings verlangt
   ("sehr kompakt, weisse Flaeche, feine Border, kleines Icon, kleine Bezeichnung,
   grosse Zahl/Status, ggf. kleine Veraenderungsangabe"). */
.sc-report-demo .v6d-kpi-leiste{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem;
  max-width:66rem;margin:1.4rem auto 0;padding:0 1.2rem}
@media (max-width:64rem){.sc-report-demo .v6d-kpi-leiste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:30rem){.sc-report-demo .v6d-kpi-leiste{grid-template-columns:1fr}}
.sc-report-demo .v6d-kpi-kachel{background:#fff;border:1px solid var(--sc-line);border-radius:10px;
  box-shadow:var(--sc-schatten);padding:.85rem .9rem;min-width:0}
/* TABLER-AVATAR STATT HANDGEZEICHNETEM SVG (ADR 0056, 2026-10-25): `.avatar` liefert
   Kreisform/Groesse/Zentrierung schon aus Tabler-Core, hier nur Farbe/Hintergrund
   auf die SignalChain-Palette umgelegt -- derselbe Navy-Ton wie zuvor am Icon. */
.sc-report-demo .v6d-kpi-icon.v6d-avatar{background:var(--sc-navy-tint);color:var(--sc-navy-hell);
  width:2.4rem;height:2.4rem}
.sc-report-demo .v6d-kpi-label{font-size:.68rem;font-weight:700;letter-spacing:.03em;color:var(--sc-muted);
  text-transform:uppercase;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sc-report-demo .v6d-kpi-wert{font-size:1.5rem;font-weight:800;color:var(--sc-ink);line-height:1.15;
  overflow-wrap:break-word;font-family:var(--sc-mono);font-variant-numeric:tabular-nums}
/* KEIN MONOSPACE BEI KARTENTITELN (z. B. "Hoechstes Risiko"): nur echte
   Messwerte bekommen die technische Schrift, ein Titel wie "Niedrigwasser
   Rhein 2026" ist kein Monitoring-Wert -- zurueck auf die normale Sans-Schrift. */
.sc-report-demo .v6d-kpi-wert--titel{font-size:1.05rem;line-height:1.3;hyphens:auto;word-break:normal;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-variant-numeric:normal}
.sc-report-demo .v6d-kpi-wert small{font-size:.68rem;font-weight:600;color:var(--sc-meta);
  text-transform:none;margin-left:.3rem;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
.sc-report-demo .v6d-kpi-zusatz{display:block;font-size:.76rem;font-weight:700;color:var(--sc-navy);
  margin-top:.15rem}
.sc-report-demo .v6d-kpi-delta{display:block;font-size:.72rem;color:var(--sc-meta);margin-top:.3rem}
.sc-report-demo .v6d-kpi-delta--gleich{color:var(--sc-meta)}
.sc-report-demo .v6d-kpi-sparkline{margin-top:.5rem}

/* ---------- Leitartikel-Sektion (ADR 0057: Tabler-Card statt Zeitungsspalte) ----------
   `.leitartikel`/`.kicker`/`.schlagzeile`/`.dek`/`.leitartikel-relevanz`/
   `.leitartikel-text`/`.leitartikel-rechts`/`.faktenbox`/`.faktenbox-kopf`/
   `.faktenbox-body`/`.fakten-zeile`/`.fakten-label`/`.fakten-wert` entfallen
   ersatzlos -- die Struktur kommt jetzt vollstaendig aus Tabler
   (`row`/`col-lg-8`/`col-lg-4`/`card`/`card-status-start`/`card-header`/
   `card-title`/`card-subtitle`/`card-body`/`datagrid`/`alert`), kein eigenes
   CSS mehr dafuer noetig. `.handlung` bleibt (noch von `aenderung_html`
   verwendet, dort bewusst NICHT auf Tabler umgestellt -- Eskalations-/
   Entwarnungs-Trigger sind keine Label/Wert-Paare, ein Datagrid passt nicht). */
.sc-report-demo .v6d-handlung{margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--sc-line);
  font-size:.82rem}
.sc-report-demo .v6d-handlung b{display:block;margin-bottom:.3rem;color:var(--sc-navy)}
.sc-report-demo .v6d-handlung p{margin:0 0 .4rem}
.sc-report-demo .v6d-handlung p:last-child{margin-bottom:0}
.sc-report-demo .v6d-quelle-zeile{margin-top:.7rem;font-size:.7rem;color:var(--sc-muted)}

/* ---------- Meinungsteil: Analyse (Aha) + Ausblick, v5-Panels umgestylt ----------
   2026-10-16 (Handelsblatt-Layoutbrief): kein weisser Kasten mehr, nur eine duenne
   Kopflinie je Spalte -- wieder zurueckgenommen am 2026-10-27 (Kundenauftrag:
   "'Aha des Tages' und 'Ausblick' sollten jetzt auch noch eine Hintergrundfarbe
   bekommen und wie eine Karte aussehen"), angeglichen an dieselbe Kartenoptik wie
   `.fussabdruck-spalte`/die Tabler-`.card`-Flaechen anderswo im Bericht. */
.sc-report-demo .v6d-meinungsteil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem}
@media (max-width:48rem){.sc-report-demo .v6d-meinungsteil{grid-template-columns:minmax(0,1fr)}}
.sc-report-demo .v6d-meinungsteil .v6d-panel{background:#fff;border:1px solid var(--sc-line);border-radius:.4rem;
  padding:1.1rem 1.2rem;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
.sc-report-demo .v6d-meinungsteil .v6d-panel-head{display:flex;align-items:center;gap:.5rem;font-size:.78rem;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sc-navy);
  border-bottom:1px solid var(--sc-ink);padding-bottom:.5rem;margin-bottom:.9rem}
.sc-report-demo .v6d-meinungsteil .v6d-panel-head svg{width:16px;height:16px}
.sc-report-demo .v6d-meinungsteil .v6d-aha-kicker{font-size:.8rem;font-weight:700;color:var(--sc-muted);
  margin-bottom:.3rem}
/* KEIN SERIF MEHR (Kundenauftrag 2026-10-23, derselbe Anlass wie `.schlagzeile`
   oben): war das einzige Serif-Element ausserhalb des Leitartikels, jetzt Sans
   wie der Rest der Seite. */
.sc-report-demo .v6d-meinungsteil .v6d-aha-headline{font-size:1.05rem;
  font-weight:700;margin-bottom:.5rem;color:var(--sc-navy)}
/* AUF TABLER-GRUNDGROESSE ANGEGLICHEN (Kundenauftrag 2026-10-26: "Die Schrift in
   der Karte 'Niedrigwasser Donau 2026 Bayern, Deutschland: 171 cm' ist kleiner als
   bei 'Aha des Tages' und 'Ausblick'. Bitte bei 'Aha des Tages' und 'Ausblick'
   anpassen"). Jene Unterzeile ist Tablers eigene `.card-subtitle`, die keine eigene
   Schriftgroesse setzt und deshalb die globale Tabler-Basis erbt
   (`--tblr-body-font-size:0.875rem`, `tabler_assets.py::tabler_css()`) -- vorher
   stand hier mit 1.04rem ein eigener, groesserer Wert ohne Bezug zu dieser Basis. */
.sc-report-demo .v6d-meinungsteil .v6d-aha-body,.sc-report-demo .v6d-meinungsteil p{font-size:.875rem;line-height:1.5;margin:0 0 .7rem}
/* KLEINE VISUALISIERUNG UNTER "AHA DES TAGES" (Kundenbriefing 2026-10-22,
   Abschnitt 8) -- bewusst zurueckhaltend (duenne gestrichelte Trennlinie wie bei
   der Faktenbox-Sparkline), der redaktionelle Charakter bleibt fuehrend. */
.sc-report-demo .v6d-aha-visualisierung{margin-top:.9rem;padding-top:.8rem;border-top:1px dashed var(--sc-line);
  max-width:22rem}
.sc-report-demo .v6d-aha-sparkline svg{width:100%;height:auto;display:block}
/* AUSBLICK-BADGES (Kundenbriefing 2026-10-22, Abschnitt 9: "Richtung sichtbar
   machen... Nächste Prüfung als kleine Meta-KPI"). Bewusst als kleine Pille,
   NICHT als Fliesstext-Satz -- genau der Unterschied zur am 2026-10-19 entfernten
   Pruefungszeile, die als "zu technisch" empfunden wurde. */
.sc-report-demo .v6d-ausblick-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.sc-report-demo .v6d-ausblick-badge{display:inline-block;font-size:.72rem;font-weight:700;
  padding:.3rem .6rem;border-radius:999px;background:var(--sc-navy-tint);
  color:var(--sc-navy)}
.sc-report-demo .v6d-ausblick-badge--pruefung{background:var(--sc-paper);color:var(--sc-muted);
  border:1px solid var(--sc-line)}

/* ---------- Zahlen des Tages: v5-Vergleichsbalken umgestylt ---------- */
.sc-report-demo .v6d-rubrik-titel{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:.78rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sc-navy);
  border-bottom:2px solid var(--sc-navy);padding-bottom:.4rem;margin-bottom:1rem}

/* ---------- Ihr Fussabdruck (Kundenauftrag 2026-10-27) ----------
   Drei Spalten in der Reihenfolge der Warenbewegung -- schematisch, keine
   echte Landkarte (siehe _fussabdruck_sektion()-Docstring: die Profildaten
   tragen meist nur "non_eu" + einen Freitext-Hinweis, keine Koordinaten). */
.sc-report-demo .v6d-fussabdruck-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
@media (max-width:48rem){.sc-report-demo .v6d-fussabdruck-grid{grid-template-columns:minmax(0,1fr)}}
.sc-report-demo .v6d-fussabdruck-spalte{background:#fff;border:1px solid var(--sc-line);border-top-width:3px;
  border-top-style:solid;border-radius:.4rem;padding:.9rem 1rem;min-width:0}
.sc-report-demo .v6d-fussabdruck-spalten-titel{font-size:.72rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--sc-navy);margin-bottom:.6rem}
.sc-report-demo .v6d-fussabdruck-chip{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;
  font-size:.86rem;color:var(--sc-ink);border-bottom:1px dashed var(--sc-line)}
.sc-report-demo .v6d-fussabdruck-chip:last-of-type{border-bottom:none}
.sc-report-demo .v6d-fussabdruck-chip i{flex:none;font-size:1rem;color:var(--sc-muted)}
.sc-report-demo .v6d-fussabdruck-spalte--aktiv .v6d-fussabdruck-chip i{color:var(--sc-navy)}
.sc-report-demo .v6d-fussabdruck-status{font-size:.74rem;color:var(--sc-muted);margin-top:.7rem;
  padding-top:.6rem;border-top:1px solid var(--sc-line)}
.sc-report-demo .v6d-fussabdruck-spalte--aktiv .v6d-fussabdruck-status{color:var(--sc-ink);font-weight:600}

/* ---------- Wirkungskette / "DEINE Lieferkette ist betroffen"
   (Kundenauftrag 2026-10-27) ----------
   Portiert aus `.v4-chain*` (executive.py) -- gleiche Icons, gleiche
   Stufenlogik, nur Klassennamen und Kartenrahmen folgen jetzt v6s eigener
   Tabler-Konvention (`_sidebar_card()`, ADR 0057) statt der eigenstaendigen
   v4-Kartenoptik. `flex-wrap` statt fester Spaltenzahl, weil eine Kette
   unterschiedlich viele Stufen haben kann. */
.sc-report-demo .v6d-wirkungskette-subtitel{font-size:.78rem;color:var(--sc-muted);margin:0 0 1rem}
.sc-report-demo .v6d-wirkungskette-track{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.3rem 0}
.sc-report-demo .v6d-wirkungskette-schritt{flex:1 1 8rem;min-width:6rem;text-align:center;padding:0 .4rem}
.sc-report-demo .v6d-wirkungskette-pfeil{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:1.6rem;padding-top:1.55rem;color:var(--sc-navy);font-size:1.05rem}
.sc-report-demo .v6d-wirkungskette-icon{display:flex;align-items:center;justify-content:center;width:2.75rem;
  height:2.75rem;margin:0 auto .5rem;color:var(--sc-navy)}
.sc-report-demo .v6d-wirkungskette-letzte .v6d-wirkungskette-icon{color:var(--sc-green-dunkel)}
.sc-report-demo .v6d-wirkungskette-icon svg{display:block}
.sc-report-demo .v6d-wirkungskette-schritt b{display:block;color:var(--sc-navy);font-size:.75rem;margin-bottom:.2rem}
.sc-report-demo .v6d-wirkungskette-schritt span{display:block;color:var(--sc-muted);font-size:.75rem;line-height:1.35}
@media (max-width:34rem){
  .sc-report-demo .v6d-wirkungskette-track{display:block}
  .sc-report-demo .v6d-wirkungskette-schritt{display:flex;align-items:center;gap:.85rem;text-align:left;
    padding:.5rem 0}
  .sc-report-demo .v6d-wirkungskette-icon{margin:0;flex:0 0 auto}
  .sc-report-demo .v6d-wirkungskette-pfeil{width:auto;padding:.15rem 0 .15rem 1.35rem;justify-content:flex-start;
    font-size:0}
  .sc-report-demo .v6d-wirkungskette-pfeil::before{content:"↓";font-size:1.05rem}
}

/* ---------- Ressorts: zweispaltig (Kundenauftrag 2026-10-16) ---------- */
/* SERVERSEITIG GEWICHTS-BALANCIERTE SPALTEN STATT CSS-MEHRSPALTENSATZ
   (Kundenbefund 2026-10-19, Screenshot: "Das sieht optisch noch unordentlich
   aus" -- `column-count:2` balanciert nur schaetzend, und weil ganze
   Ressort-Bloecke wegen `break-inside:avoid` nicht aufgeteilt werden duerfen,
   lief bei stark unterschiedlich langen Ressorts eine Spalte sichtbar laenger
   als die andere, mit grossem Leerraum am Ende der kuerzeren. `_ressorts()`
   teilt die Ressorts jetzt selbst per Greedy-Gewichtsverteilung auf zwei
   feste `<div class="ressorts-spalte">` auf -- einfaches Nebeneinander,
   keine CSS-Spaltenberechnung mehr noetig. Davor (2026-10-19, selber Tag)
   stand hier `display:grid` mit 2x2-Zeilenpaarung, das dieselbe Luecke nur
   an anderer Stelle erzeugte (siehe Git-Historie dieser Zeile). */
.sc-report-demo .v6d-ressorts-grid{display:flex;gap:2.4rem;align-items:flex-start}
.sc-report-demo .v6d-ressorts-spalte{display:flex;flex-direction:column;gap:2.4rem;min-width:0;flex:1}
@media (max-width:48rem){.sc-report-demo .v6d-ressorts-grid{flex-direction:column}}
.sc-report-demo .v6d-ressorts-grid .v6d-ressort .v6d-themen-grid{grid-template-columns:minmax(0,1fr)}
/* EIGENE v6-DARSTELLUNG STATT DER v5-VERGLEICHSBALKEN (Kundenauftrag 2026-10-19):
   Balken aus `indikator.value`/`indikator.previous_value` ersetzt durch eine
   Sparkline aus `Card.chart` (echte Beobachtungsreihe statt freiem Analysten-Text
   -- Kundenbefund 2026-10-19, ein Indikator trug dort einen ganzen Satz statt
   einer Zahl als `value`) plus `Interpretation.outlook` als laengerer
   Vorausschau-Text statt der kurzen Kalendereinordnung allein. `render_v5()` ruft
   weiterhin `vergleichsbalken()` unveraendert auf -- eigene Klassen `.zdt-*`
   (`_zahlen_des_tages()`), damit beide Renderer unabhaengig bleiben. */
.sc-report-demo .v6d-zdt-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
@media (max-width:34rem){.sc-report-demo .v6d-zdt-liste{grid-template-columns:minmax(0,1fr)}}
.sc-report-demo .v6d-zdt-karte{background:#fff;border:1px solid var(--sc-line);border-left-width:3px;
  border-left-style:solid;padding:1.1rem 1.2rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  min-width:0}
.sc-report-demo .v6d-zdt-kat{font-size:.66rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:.35rem}
.sc-report-demo .v6d-zdt-titel{font-size:1rem;font-weight:600;margin:0 0 .6rem;line-height:1.3;
  color:var(--sc-ink)}
/* GROSSE ZAHL + DELTA (Kundenbriefing 2026-10-22, Abschnitt 11/16: "Grosse Zahlen
   klar und kraeftig", "die Kennzahl muss im Vordergrund stehen"). Nur gezeigt, wenn
   `indikator.value`/`.previous_value` echte Zahlen tragen (`_einsetzbar()`). */
.sc-report-demo .v6d-zdt-grosszahl{font-family:var(--sc-mono);font-variant-numeric:tabular-nums;
  font-size:1.7rem;font-weight:800;color:var(--sc-ink);line-height:1.1;
  margin-bottom:.15rem;overflow-wrap:break-word}
.sc-report-demo .v6d-zdt-delta{font-size:.86rem;color:var(--sc-muted);margin-bottom:.6rem}
.sc-report-demo .v6d-zdt-sparkline svg{width:100%;height:auto;display:block;margin-bottom:.7rem}
/* Dieselbe Tabler-Basis wie .aha-body/.ausblick-text/.trends-fristen-text
   (Kundenauftrag 2026-10-26) -- ein einheitlicher Fließtext-Maßstab im ganzen
   Bericht statt vier leicht verschiedener Werte. */
.sc-report-demo .v6d-zdt-text{font-size:.875rem;color:var(--sc-ink);margin:0;
  line-height:1.5}

/* ---------- Trends & Fristen: eigene Sektion fuer Trendprojektionen ----------
   Kundenauftrag 2026-10-17: eigene Sektion statt Inline-Liste im Ausblick, mit
   Sparkline je Karte -- passt zum "Vorausschau ist unsere Staerke"-Argument
   (CLAUDE.md 2.3) besser als eine Fussnote. Bewusst an .vergleichsbalken-karte
   angelehnt (gleiche Bildsprache, Rand/Kicker/Grid), aber eigene Klassen, weil
   der Karteninhalt ein anderer ist (Prognosesatz+Sparkline statt zwei
   Zahlenbalken). minmax(0,1fr) von Anfang an (Mobil-Lehre vom selben Tag,
   siehe `project_v6_mobil_balkenzeile_squeeze_2026-10-16`). */
.sc-report-demo .v6d-trends-fristen-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
/* ZWEI-SPALTEN-AUFTEILUNG, WENN EINE BAUSTELLEN-KARTE DABEI IST (Kundenauftrag
   2026-10-19, urspruenglich). `_position()` in `_trends_und_fristen()` traegt
   jeder Karte ihre eigene Zeile+Spalte als CSS-Variablen `--gc`/`--gr` ein
   (Kundenbefund 2026-10-27: "Energiepreisdruck und Niedrigwasser Rhein sind
   untereinander... Die 2 mal X Matrix sollte optisch besser befuellt werden" --
   die fruehere feste Spalte-1-Zuordnung fuer JEDE Trendkarte stapelte alle
   Trendkarten einzeln in Spalte 1, selbst wenn Spalte 2 nach Zeile 1 leer
   blieb). CSS-Variablen statt direktem `grid-column`/`grid-row` als Inline-
   Stil, weil ein Inline-Stil nicht mehr durch die Mobil-Medienabfrage unten
   ueberschreibbar waere (Inline-Stile gewinnen immer gegen Regeln aus einem
   externen Stylesheet, auch Media-Queries, unabhaengig von deren
   Spezifitaet) -- `var(--gc,auto)` dagegen ist eine ganz normale
   Eigenschaft der Basisregel und faellt an einer spaeteren, gleich
   spezifischen Regel durch. */
.sc-report-demo .v6d-trends-fristen-liste--geteilt{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:56rem){.sc-report-demo .v6d-trends-fristen-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:34rem){
  .sc-report-demo .v6d-trends-fristen-liste{grid-template-columns:minmax(0,1fr)}
  /* Bei nur einer Spalte waeren zwei Karten mit z. B. beide `--gr:1` im
     selben Grid-Platz uebereinandergelegt -- Zeile UND Spalte muessen hier
     auf `auto` zurueckgesetzt werden, nicht nur die Spalte. Trifft ueber
     die einfache Klasse auch Baustellen-Karten (tragen zusaetzlich
     `trends-fristen-karte--breit`, siehe dort). */
  .sc-report-demo .v6d-trends-fristen-karte{grid-column:auto;grid-row:auto}
}
.sc-report-demo .v6d-trends-fristen-karte{background:#fff;border:1px solid var(--sc-line);
  border-left-width:3px;border-left-style:solid;padding:1.1rem 1.2rem;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;min-width:0;
  grid-column:var(--gc,auto);grid-row:var(--gr,auto)}
.sc-report-demo .v6d-trends-fristen-kat{font-size:.66rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:.35rem}
.sc-report-demo .v6d-trends-fristen-titel{font-size:1rem;font-weight:600;margin:0 0 .5rem;line-height:1.3;
  color:var(--sc-ink)}
/* GROSSER HAUPTWERT (Kundenbriefing 2026-10-22, Abschnitt 10/16: "grosse Zahlen
   klar und kraeftig"). Dieselbe Groessenordnung wie `.zdt-grosszahl` -- beide sind
   die "Hauptwert"-Zahl einer kompakten Monitoring-Card, nur in verschiedenen
   Sektionen. */
.sc-report-demo .v6d-trends-fristen-grosszahl{font-family:var(--sc-mono);font-variant-numeric:tabular-nums;
  font-size:1.5rem;font-weight:800;color:var(--sc-ink);
  line-height:1.15;margin-bottom:.2rem;overflow-wrap:break-word}
/* AUF DIESELBE TABLER-BASIS WIE AHA/AUSBLICK (Kundenauftrag 2026-10-26, zweiter
   Fund: die Weser-Küste-Sturmflutkarte war mit .96rem noch größer als die
   gerade erst auf .875rem reduzierten Aha-des-Tages/Ausblick-Absätze -- alle
   drei Fließtextarten sind seither einheitlich). */
.sc-report-demo .v6d-trends-fristen-text{font-size:.875rem;color:var(--sc-ink);
  margin:0 0 .8rem;line-height:1.5}
.sc-report-demo .v6d-trends-fristen-sparkline svg{width:100%;height:auto;display:block}
.sc-report-demo .v6d-trends-fristen-richtung{font-size:.78rem;font-weight:700;margin-top:.6rem;color:var(--sc-ink)}
.sc-report-demo .v6d-trends-fristen-pruefung{font-size:.7rem;color:var(--sc-muted);margin-top:.4rem}
/* BAUSTELLEN-VORAUSSCHAU (Projektinhaber-Auftrag 2026-10-17): "eher 50% Breite...
   da die Texte zu lang sind" -- doppelte Spaltenbreite im 3er-Grid. `var(--gc,
   span 2)` statt festem `span 2`: Ohne Baustellen-Karten-Partner (ungeteiltes
   3er-Grid) ist `--gc` nie gesetzt, der Fallback `span 2` greift unveraendert;
   steht die Karte dagegen neben einer Trendkarte im geteilten 2er-Grid, traegt
   sie seit 2026-10-27 `--gc:2` (siehe `_trends_und_fristen()`) und wird exakt
   EINE Spalte breit -- eine einzelne Variablen-Regel ersetzt damit den
   vorigen kombinierten Selektor mit eigener Mobil-Ausnahme. Die letzte Zeile
   des Textes traegt hier keinen eigenen Absatzabstand (`.trends-fristen-
   karte--breit .trends-fristen-text{margin-bottom:0}`), weil diese Karte
   weder Sparkline noch Pruefungszeile danach zeigt. */
.sc-report-demo .v6d-trends-fristen-karte--breit{grid-column:var(--gc,span 2);grid-row:var(--gr,auto)}
/* NUR DER LETZTE ABSATZ OHNE ABSTAND (Kundenauftrag 2026-10-19: mehrere
   Baustellen-Eintraege stehen jetzt als eigene Absaetze in EINER Karte --
   vorher stand hier `margin-bottom:0` auf ALLEN Absaetzen, weil jede
   Karte nur einen einzigen trug; das haette mehrere Eintraege ohne
   Zwischenraum zusammengequetscht). */
.sc-report-demo .v6d-trends-fristen-karte--breit .v6d-trends-fristen-text:last-child{margin-bottom:0}
/* EIGENE MOBIL-RUECKSETZUNG FUER `--breit` (muss NACH der Basisregel oben
   stehen, nicht nur im fruehen `.trends-fristen-liste`-Media-Block): beide
   Regeln haben dieselbe Spezifitaet (eine Klasse), bei Gleichstand gewinnt
   die spaetere Quellposition -- die unbedingte `--breit`-Basisregel staende
   sonst NACH dem frueh platzierten generischen Mobil-Reset und wuerde ihn
   auf schmalen Bildschirmen wieder ueberschreiben. */
@media (max-width:34rem){
  .sc-report-demo .v6d-trends-fristen-karte--breit{grid-column:span 1;grid-row:auto}
}

/* ---------- Dauerbrenner + Weitere Meldungen: v5 Themenkacheln umgestylt ----------
   Zwei Spalten statt drei (Kundenauftrag 2026-10-15, Lesbarkeit) -- gilt fuer alle
   drei Aufrufer von `_themen_kacheln()` (Dauerbrenner, Weitere Themen), da sie
   dieselbe CSS-Klasse teilen; dieselbe Begruendung gilt dort gleichermassen. */
.sc-report-demo .v6d-themen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2rem}
@media (max-width:34rem){.sc-report-demo .v6d-themen-grid{grid-template-columns:minmax(0,1fr)}}
/* Icon und Ueberschrift in einer Zeile (Kundenauftrag 2026-10-16) -- im echten Markup
   sind `.thema-kopf` (Icon + Kennzahl) und `.thema-titel` zwei GESCHWISTER-Divs, kein
   gemeinsamer Flex-Container. Ein 2-Spalten-Grid mit expliziter Platzierung der ersten
   beiden Kinder in Zeile 1 loest das, ohne das echte Markup anzufassen: Status/Text
   ohne eigene Zeilenangabe ruecken automatisch in Zeile 2, weil Zeile 1 belegt ist. */
.sc-report-demo .v6d-thema-karte{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.6rem;
  border-top:3px solid var(--sc-line);padding-top:.6rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
.sc-report-demo .v6d-thema-kopf{grid-column:1;grid-row:1;display:flex;align-items:center}
.sc-report-demo .v6d-thema-icon{width:20px;height:20px}
.sc-report-demo .v6d-thema-titel{grid-column:2;grid-row:1;align-self:center;
  font-size:1.02rem;font-weight:600;margin:0;line-height:1.25}
.sc-report-demo .v6d-thema-status{grid-column:1/-1;margin-top:.4rem;font-size:.66rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--sc-muted);margin-bottom:.35rem}
.sc-report-demo .v6d-thema-status .v6d-arrow{margin-right:.2rem}
.sc-report-demo .v6d-thema-text{grid-column:1/-1;font-size:.86rem;color:var(--sc-ink)}
.sc-report-demo .v6d-thema-delta{font-size:.78rem;font-weight:800}
.sc-report-demo .v6d-thema-delta.v6d-gut{color:var(--sc-green)} .sc-report-demo .v6d-thema-delta.v6d-schlecht{color:var(--sc-red)}

/* ---------- Ressort-Kachel (Kundenbriefing 2026-10-22, Abschnitt 19): verdichtete
   Fassung von .thema-karte, nur innerhalb der Ressorts (_ressort_kacheln()).
   Statuspunkt + Icon + Titel in einer Kopfzeile, grosser Wert direkt darunter (wenn
   vorhanden), danach Richtung und nur noch EIN Satz Text. */
/* STATUSKANTE STATT NEUTRALEM GRAU (ADR 0056, 2026-10-25, Tabler-"card-status-
   start"-Sprache wie der Leitartikel): die Randfarbe kommt jetzt inline von
   `_stufe_farbe(karte.level)`, dieselbe Warnstufe wie der bestehende Punkt --
   KEIN Ersatz fuer ihn (Kundenentscheidung 2026-10-23, "Statuspunkt statt nur
   Pfeil" bleibt), nur eine zweite, groessere Flaeche fuer dieselbe Farbe. */
.sc-report-demo .v6d-ressort-karte{border-top:3px solid var(--sc-line);padding-top:.6rem;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
.sc-report-demo .v6d-ressort-badge{margin-top:.35rem}
.sc-report-demo .v6d-ressort-kopf{display:flex;align-items:center;gap:.5rem}
.sc-report-demo .v6d-ressort-punkt{width:.5rem;height:.5rem;border-radius:50%;flex:none}
.sc-report-demo .v6d-ressort-icon{width:18px;height:18px;flex:none;display:flex;align-items:center;
  justify-content:center;border-radius:4px;padding:3px}
.sc-report-demo .v6d-ressort-icon svg{width:100%;height:100%}
.sc-report-demo .v6d-ressort-titel{font-size:1.0rem;font-weight:600;line-height:1.25;color:var(--sc-ink);
  min-width:0}
.sc-report-demo .v6d-ressort-kennzahl{font-size:1.25rem;font-weight:800;color:var(--sc-ink);margin-top:.4rem}
.sc-report-demo .v6d-ressort-kennzahl.v6d-gut{color:var(--sc-green)} .sc-report-demo .v6d-ressort-kennzahl.v6d-schlecht{color:var(--sc-red)}
.sc-report-demo .v6d-ressort-status{margin-top:.35rem;font-size:.66rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--sc-muted)}
.sc-report-demo .v6d-ressort-status .v6d-arrow{margin-right:.2rem}
.sc-report-demo .v6d-ressort-text{margin-top:.3rem;font-size:.86rem;color:var(--sc-ink);line-height:1.4}

/* ---------- Weitere Lagen im Blick (v5 panel + veraendert-row) ---------- */
.sc-report-demo .v6d-weitere-lagen-panel{background:#fff;border:1px solid var(--sc-line);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
.sc-report-demo .v6d-weitere-lagen-panel .v6d-panel-head{padding:.8rem 1.2rem;font-size:.78rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sc-navy);
  border-bottom:2px solid var(--sc-navy)}
.sc-report-demo .v6d-veraendert-row{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 1.2rem;
  border-bottom:1px solid var(--sc-line-sekundaer);font-size:.84rem}
.sc-report-demo .v6d-veraendert-row:last-child{border-bottom:none}
.sc-report-demo .v6d-ver-label{color:var(--sc-muted)}
.sc-report-demo .v6d-ver-value a{color:var(--sc-navy)}

/* ---------- Weltauswirkung / Strassensperrungen (v5 panel umgestylt) ----------
   NICHT ".panel.section-gap" als Catch-all (Kundenbefund 2026-10-16): trifft auch
   ".vergleichsbalken-panel" (traegt beide Klassen) und erzeugt eine weisse Flaeche
   um die bereits weissen Zahlen-des-Tages-Karten. Nur die beiden konkreten Klassen. */
.sc-report-demo .v6d-weltauswirkung-sektion,.sc-report-demo .v6d-strassensperrungen-panel,.sc-report-demo .v6d-weltkarte-sektion{background:#fff;
  border:1px solid var(--sc-line);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;padding:0}
.sc-report-demo .v6d-weltauswirkung-sektion .v6d-panel-head,.sc-report-demo .v6d-strassensperrungen-panel .v6d-panel-head,.sc-report-demo .v6d-weltkarte-sektion .v6d-panel-head{padding:.8rem 1.2rem;
  font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sc-navy);border-bottom:2px solid var(--sc-navy);display:flex;
  align-items:center;gap:.5rem}
/* FUND 2026-10-26 (Kundenscreenshot: riesiger, verzerrter Kreis ueber "Aktuelle
   Weltlage"): Diese drei Panel-Koepfe hatten -- anders als `.meinungsteil .panel-head
   svg` oben -- nie eine Groessenbegrenzung fuer ihr Kopfzeilen-Icon. Ohne CSS-Groesse
   skaliert ein <svg> ohne width/height-Attribut auf die volle Breite des Elternelements,
   bei quadratischem viewBox also auf eine riesige Kreisflaeche. Betraf latent auch
   `.weltauswirkung-sektion` -- nur rendert `weltauswirkung()` fast nie Inhalt, deshalb
   nie sichtbar geworden. Erst die neue, haeufiger befuellte Weltkarte deckte es auf. */
.sc-report-demo .v6d-weltauswirkung-sektion .v6d-panel-head svg,.sc-report-demo .v6d-strassensperrungen-panel .v6d-panel-head svg,.sc-report-demo .v6d-weltkarte-sektion .v6d-panel-head svg{width:16px;height:16px;flex:none}
.sc-report-demo .v6d-welt-wrap{padding:1rem 1.2rem}
/* ZWEISPALTIG BEI GENUG PLATZ (Kundenauftrag 2026-10-26: Liste neben der Karte) --
   Karte behaelt ihre eigene max-width (480px aus .welt-svg), die Liste nimmt den
   Rest. Faellt unter der Karte zusammen, sobald beide Spalten zusammen schmaler
   als rund 30rem waeren (derselbe Bruch wie die uebrigen zweispaltigen Bloecke
   in diesem Bericht). */
.sc-report-demo .v6d-weltkarte-wrap{padding:1rem 1.2rem;display:flex;flex-wrap:wrap;gap:1.4rem;align-items:flex-start}
.sc-report-demo .v6d-weltkarte-karte{flex:1 1 20rem;min-width:0}
.sc-report-demo .v6d-weltkarte-liste{flex:1 1 14rem;min-width:0}

/* ---------- Ruhebox fuer leere Pflichtrubriken ---------- */
.sc-report-demo .v6d-ruhebox{background:#fff;border:1px dashed var(--sc-line);padding:1rem 1.3rem;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:.84rem;color:var(--sc-muted)}
.sc-report-demo .v6d-ruhebox b{color:var(--sc-ink)}

/* ---------- Rechtlicher Anhang: Details/Quellen/Methodik als natives <details>
   statt Bootstrap-Accordion (ADR 0056 vom 2026-10-25 teilweise zurueckgenommen,
   ADR 0059/v6-Rollout, 2026-10-27 -- Bootstraps Klapp-JS verstiess gegen das
   Skript-Verbot fuer versandfaehige Briefings, siehe Docstring von
   `_v6_anhang_akkordeon_item()`). Eigene, schlanke Nachbildung derselben Optik
   (Rahmen, Klapp-Pfeil, Hover) ohne jede JS-Abhaengigkeit. */
.sc-report-demo .v6d-v6-anhang{background:#fff;border:1px solid var(--sc-line);border-radius:.5rem;overflow:hidden}
.sc-report-demo .v6d-v6-anhang-item{border-top:1px solid var(--sc-line)}
.sc-report-demo .v6d-v6-anhang-item:first-child{border-top:none}
.sc-report-demo .v6d-v6-anhang-summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:1rem 1.25rem;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:.82rem;font-weight:700;color:var(--sc-navy)}
.sc-report-demo .v6d-v6-anhang-summary:hover{background:var(--sc-paper)}
.sc-report-demo .v6d-v6-anhang-summary::-webkit-details-marker{display:none}
.sc-report-demo .v6d-v6-anhang-summary::marker{content:""}
.sc-report-demo .v6d-v6-anhang-chevron{display:flex;flex:none;transition:transform .15s}
.sc-report-demo .v6d-v6-anhang-item[open] .v6d-v6-anhang-chevron{transform:rotate(180deg)}
.sc-report-demo .v6d-v6-anhang-body{padding:0 1.25rem 1.1rem}
.sc-report-demo .v6d-anhang-body{font-size:.82rem;color:var(--sc-ink);line-height:1.55}
.sc-report-demo .v6d-anhang-body p,.sc-report-demo .v6d-anhang-body ul{margin:0 0 .6rem}
.sc-report-demo .v6d-anhang-body ul{padding-left:1.2rem}
.sc-report-demo .v6d-anhang-body li{margin-bottom:.4rem;overflow-wrap:anywhere}
.sc-report-demo .v6d-anhang-body strong{color:var(--sc-ink)}
/* MOBIL-BEFUND 2026-10-17 (Playwright-Check, WebKit/390px): eine lange
   Quellenvermerk-Zeile ("Bundesamt fuer Seeschifffahrt und Hydrographie (BSH)...")
   lief ueber den rechten Rand hinaus. v6 bindet executive.py/executive_v5.py's CSS
   nicht ein, `.quellenstand .vermerk` dort also wirkungslos -- hier nachgezogen,
   plus `overflow-wrap` oben am `li` als Sicherheitsnetz fuer jede weitere lange
   Zeile in diesem Akkordeon. */
.sc-report-demo .v6d-quellenstand .v6d-vermerk{display:inline-block;overflow-wrap:anywhere}

/* ---------- Strassenlage (v5 top-thema/strassen-block/regionen-* umgestylt) ----------
   Dieselbe Klasse `.top-thema` trägt auch den Leitartikel-Unterbau NICHT -- der
   Leitartikel ist eigenes neues Markup (`.leitartikel`), nur `_strassensperrungen_block()`
   nutzt `.top-thema.strassen-block`. */
.sc-report-demo .v6d-top-thema.v6d-strassen-block{background:#fff;border:1px solid var(--sc-line);padding:1rem 1.2rem;
  display:block;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
.sc-report-demo .v6d-top-thema.v6d-strassen-block.v6d-zwei-spalten{display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:1.4rem}
@media (max-width:40rem){.sc-report-demo .v6d-top-thema.v6d-strassen-block.v6d-zwei-spalten{grid-template-columns:minmax(0,1fr)}}
.sc-report-demo .v6d-top-thema.v6d-strassen-block .v6d-tt-eyebrow{display:block;font-size:.72rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sc-navy);margin-bottom:.4rem}
.sc-report-demo .v6d-top-thema.v6d-strassen-block .v6d-tt-eyebrow svg{display:none}
.sc-report-demo .v6d-top-thema.v6d-strassen-block .v6d-tt-headline{font-size:1.1rem;
  font-weight:600;margin:0 0 .8rem;color:var(--sc-navy)}
.sc-report-demo .v6d-strassen-liste{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;
  gap:.5rem;font-size:.86rem;color:var(--sc-ink)}
.sc-report-demo .v6d-strassen-liste li{padding-left:1rem;position:relative}
.sc-report-demo .v6d-strassen-liste li::before{content:"";position:absolute;left:0;top:.55em;width:.35rem;
  height:.35rem;border-radius:50%;background:var(--sc-muted)}
.sc-report-demo .v6d-strassen-gruppe{margin-bottom:.8rem}
.sc-report-demo .v6d-strassen-gruppe:last-child{margin-bottom:0}
.sc-report-demo .v6d-strassen-gruppe-titel{font-size:.72rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--sc-navy);margin-bottom:.35rem}
.sc-report-demo .v6d-regionen-titel{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--sc-navy);margin-bottom:.4rem}
/* KEINE ERZWUNGENE BREITE MEHR (Kundenauftrag 2026-10-26, zweiter Fund: "Deggendorf
   ... Leitpunkt" immer noch zu gross, OBWOHL `max-width:30rem` bereits galt). Der
   vorige Fix (nur `max-width`) deckelte lediglich den schlimmsten Fall -- `width:
   100%` zog aber JEDE Karte auf die volle Spaltenbreite hoch, auch eine schmale
   Punktlisten-Karte (viewBox oft nur 150-250 Einheiten breit), deren Originalgroesse
   weit unter 30rem liegt: eine 9px-Schrift bei viewBox-Breite 200 und gerenderter
   Breite 480px ist effektiv ueber 21px gross. Jede `<svg class="regionen-svg">`
   traegt seit diesem Fix eigene `width`/`height`-Attribute gleich ihrer viewBox
   (executive_v5.py) -- das SVG rendert dadurch standardmaessig in seiner echten,
   abgestimmten Pixelgroesse (1 viewBox-Einheit = 1px), nicht gestreckt. `max-width:
   100%` bleibt als reines Schrumpfen-bei-Bedarf (schmale Spalte/Mobil), nie als
   Vergroessern ueber die eigene Breite hinaus. */
.sc-report-demo .v6d-regionen-svg{max-width:100%;height:auto;display:block}
.sc-report-demo .v6d-regionen-land-neutral{fill:#eef1f5;stroke:var(--sc-line);stroke-width:.5}
/* NACHBARLAND MITGEZEICHNET (Kundenauftrag 2026-10-24): deutlich unterscheidbar von
   den deutschen Flaechen (gestrichelt, kein durchgehender Fuellton) -- nie als
   "betroffenes Land" lesbar, nur Orientierung fuer einen Punkt ausserhalb Deutschlands
   (siehe Docstring `_regionenkarte_punkt()`). */
.sc-report-demo .v6d-regionen-land-nachbar{fill:#f5f1e8;stroke:var(--sc-meta);stroke-width:.6;stroke-dasharray:1.4,1}
.sc-report-demo .v6d-regionen-nachbar-label{font-size:5px;font-weight:700;fill:var(--sc-meta);
  letter-spacing:.02em}
.sc-report-demo .v6d-regionen-leitring{fill:none;stroke:var(--sc-red);stroke-width:.6;opacity:.5}
.sc-report-demo .v6d-regionen-punkt{stroke:#fff;stroke-width:1}
.sc-report-demo .v6d-regionen-credit{margin-top:.4rem;font-size:.62rem;color:var(--sc-muted)}
.sc-report-demo .v6d-regionen-credit a{color:var(--sc-muted)}
/* STRECKENKARTE (Kundenbefund 2026-10-25: "wir hatten mal eine Karte, da waren
   ALLE Messpunkte drin und mit Farben" -- `_regionenkarte_geografisch()`, bisher
   in v6 nie genutzt/gestylt, deshalb fehlten diese Regeln komplett. Ohne
   `.regionen-flusslinie{fill:none;...}` rendert ein <polyline> mit SVG-Default
   `fill:black` als ausgefuellte schwarze Flaeche statt einer duennen Linie --
   das war der Haupteffekt des Fundes. Ohne Font-Size auf den Label-Klassen
   erben die <text>-Elemente die normale Fliesstextgroesse statt der fuer eine
   SVG-Karte gedachten Mini-Schrift -- das erklaert die riesigen, ueberlappenden
   Stationsnamen. Werte wortgetreu aus `_V5_STIL()`, nur auf v6-Farbtoken
   umgestellt (`--sc-muted`/`--sc-ink`/`--sc-navy` statt eigener Hex-Werte, wo
   v5 keine Variable nutzte). */
.sc-report-demo .v6d-regionen-legende{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.7rem;
  font-size:.74rem;color:var(--sc-muted)}
.sc-report-demo .v6d-regionen-legende span{display:inline-flex;align-items:center;gap:.4rem}
.sc-report-demo .v6d-regionen-legende i{width:.6rem;height:.6rem;border-radius:50%;display:inline-block;flex:none}
.sc-report-demo .v6d-regionen-fluss-label{font-size:9px;fill:var(--sc-muted);letter-spacing:.06em;
  text-transform:uppercase}
.sc-report-demo .v6d-regionen-flusslinie{fill:none;stroke:#a9c2d6;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round}
.sc-report-demo .v6d-regionen-name-geo{font-size:9px;fill:var(--sc-ink);font-weight:600}
.sc-report-demo .v6d-regionen-leitwort{font-size:8.5px;fill:var(--sc-navy);letter-spacing:.06em}
/* PEGEL-TABELLE ALS ERGAENZUNG ZUR KARTE (ADR 0056, 2026-10-25) -- natives
   <details>, bewusst NICHT Teil des gruppierten Tabler-Accordions unten: eine
   einzelne, lokale Aufklapp-Ergaenzung direkt unter der Karte braucht keine
   Gruppenlogik (`data-bs-parent`) und keine zusaetzliche ID-Verwaltung. */
.sc-report-demo .v6d-regionen-tabelle-details{margin-top:.8rem;font-size:.8rem}
.sc-report-demo .v6d-regionen-tabelle-details summary{cursor:pointer;font-weight:700;color:var(--sc-navy);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
.sc-report-demo .v6d-regionen-tabelle-details table{margin-top:.5rem;font-size:.8rem}

/* ---------- Belegstaerke (v5 beleg-* umgestylt) ---------- */
.sc-report-demo .v6d-belegstaerke{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:.82rem;color:var(--sc-ink)}
.sc-report-demo .v6d-beleg-karten{list-style:none;padding:0;font-size:.76rem;color:var(--sc-muted)}
.sc-report-demo .v6d-beleg-naeherung{font-style:italic}

/* ---------- Impressum: v4-Footer, nur umgestylt ---------- */
.sc-report-demo footer{border-top:1px solid var(--sc-ink);margin-top:2.5rem;padding:1.3rem 1.2rem;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:.72rem;color:var(--sc-muted);
  line-height:1.6;max-width:66rem;margin-left:auto;margin-right:auto}
.sc-report-demo footer a{color:var(--sc-navy)}

/* ---------- Sparkline in der Faktenbox ---------- */
.sc-report-demo .v6d-faktenbox-sparkline{margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--sc-line)}
.sc-report-demo .v6d-faktenbox-sparkline svg{width:100%;height:auto;display:block}

/* ---------- Bullet Chart in der Faktenbox (Kundenbriefing 2026-10-22, Abschnitt 5):
   aktueller Wert vs. Marke als horizontale Leiste statt Fliesstext. Bewusst kein
   Tachometer (Abschnitt 2 des Briefings: "keine klassischen Tacho-Gauges").
   TABLER-PROGRESS STATT EIGENER LEISTE (ADR 0056, 2026-10-25): Schiene/Fuellung
   jetzt `.progress.progress-sm`/`.progress-bar` aus Tabler-Core -- nur die
   Marken-Markierung (`.bullet-marke`, ein senkrechter Strich an der Schwelle)
   bleibt eigenes CSS, dafuer hat Tabler keine Entsprechung. `.progress{overflow:
   visible}` kommt schon aus Tabler, nicht extra gesetzt. */
.sc-report-demo .v6d-bullet-chart{padding:.5rem 0 .3rem}
.sc-report-demo .v6d-bullet-marke{position:absolute;top:-.2rem;bottom:-.2rem;width:2px;
  background:var(--sc-ink);transform:translateX(-1px)}
.sc-report-demo .v6d-bullet-werte{display:flex;justify-content:space-between;gap:.6rem;margin-top:.4rem;
  font-size:.86rem}
.sc-report-demo .v6d-bullet-ist{font-weight:800;color:var(--sc-ink);font-family:var(--sc-mono);
  font-variant-numeric:tabular-nums}
.sc-report-demo .v6d-bullet-abstand{color:var(--sc-muted);text-align:right}

.sc-report-demo .v6d-verlauf{ width: 100%; height: 56px; display: block; }
.sc-report-demo .v6d-verlauf .v6d-band{ fill: #e7e7e0; }
.sc-report-demo .v6d-verlauf .v6d-linie{
  fill: none; stroke: #2f5d50; stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.sc-report-demo .v6d-verlauf .v6d-punkt{ fill: #2f5d50; }
.sc-report-demo .v6d-verlauf .v6d-punkt.v6d-auffaellig{ fill: #a33b23; }
/* HOHL STATT GEFUELLT (Kundenbefund 2026-10-17: "warum sind hier im Diagramm 2 rote
   Punkte" -- Hoehepunkt und aktueller Punkt trugen dieselbe Farbe und Groesse,
   obwohl sie Verschiedenes bedeuten: der Hoehepunkt ist ein Rueckblick-Referenzwert,
   kein heutiger Status. Gleicher Farbton, aber als duenner Ring statt als Flaeche --
   bleibt als "derselbe Fall" erkennbar, ohne mit dem aktuellen Punkt zu verwechseln.) */
.sc-report-demo .v6d-verlauf .v6d-punkt.v6d-hoehepunkt{ fill: none; stroke: #a33b23; stroke-width: 1.1; opacity: .7; }
.sc-report-demo .v6d-verlauf .v6d-marke{
  stroke: #a33b23; stroke-width: 1; stroke-dasharray: 4 3; opacity: .75;
  vector-effect: non-scaling-stroke;
}
/* PROGNOSE-FORTSETZUNG (Kundenauftrag 2026-10-17): eigene Farbe (Blau statt Gruen/Rot),
   damit "gemessen" und "projiziert" auf den ersten Blick auseinanderzuhalten sind --
   dieselbe Farbfamilie wie die uebrigen Vorausschau-Elemente im Report. */
.sc-report-demo .v6d-verlauf .v6d-prognose-linie{
  fill: none; stroke: #2a5a8c; stroke-width: 1.4; stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
}
.sc-report-demo .v6d-verlauf .v6d-punkt.v6d-projiziert{ fill: #fff; stroke: #2a5a8c; stroke-width: 1.4; }
.sc-report-demo .v6d-verlauf .v6d-verlauf-label{
  font-size: 6px; font-family: -apple-system, sans-serif; fill: #6b7580;
}
.sc-report-demo .v6d-verlauf .v6d-verlauf-label--prognose{ fill: #2a5a8c; }

.sc-report-demo .v6d-welt-svg{width:100%;max-width:480px;background:var(--sc-bg,#eef2f6);border-radius:8px}
.sc-report-demo .v6d-welt-umriss{fill:none;stroke:#b6c2cf;stroke-width:.6;stroke-linejoin:round}
.sc-report-demo .v6d-welt-gradnetz{stroke:#c7d2dd;stroke-width:.5}
.sc-report-demo .v6d-welt-gradnetz-betont{stroke:#9fb1c4;stroke-width:.8}
.sc-report-demo .v6d-welt-punkt{stroke:#fff;stroke-width:1}
.sc-report-demo .v6d-welt-punkt-label{font-size:8px;fill:var(--sc-ink,#2c3e50);text-anchor:middle}
.sc-report-demo .v6d-welt-liste{list-style:none;margin:0;padding:0;font-size:.82rem;color:var(--sc-ink,#1f2a37)}
.sc-report-demo .v6d-welt-liste li{padding:.4rem 0;border-bottom:1px solid var(--sc-line,#e2e8ef)}
.sc-report-demo .v6d-welt-liste li:last-child{border-bottom:none}