/* Datenschaufenster – Markenauftritt M2 (Brand 2026)
   Abgeleitet aus dem M2 Design System 2026 (Skill m2-presentations-v3):
   Blau #051B3F und Rot #EA5355 als Identität, Gelb #EDFF00 nur als Signal, Lato (Black für Überschriften),
   rechtwinklig, Fläche statt Kontur, roter Punkt hinter Überschriften, Verlauf Blau→Rot nur als Band.
   Dieses Theme überschreibt nur Tokens und Formen aus style.css; für ein Kundenbranding wird es ersetzt. */

@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/lato-300.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/lato-900.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --m2-blue: #051B3F; --m2-red: #EA5355; --m2-signal: #EDFF00;
  --page: #FFFFFF;
  --surface: #F0F1F3;           /* t06: Panels */
  --surface-2: #FFFFFF;         /* Elemente in Panels */
  --ink: #051B3F;
  --ink-2: #505F79;             /* t70 */
  --muted: #5B6880;
  --axis-muted: #6B788E;
  --grid: #D9DDE3;
  --axis: #C0C6CF;              /* t25 */
  --border: transparent;        /* Fläche statt Kontur */
  --control-border: #758295;    /* Formularfelder brauchen 3:1 Kontrast */
  --brand: #051B3F;
  --link: #1F4E8C;
  --accent: #EA5355;
  --accent-text: #C74748;       /* kleiner roter Text auf Weiß */
  --period: #EA5355;
  --signal: #EDFF00;
  --series-1: #2B5797; --series-2: #EA5355; --series-3: #1E9A8C;
  --nodata: #FFFFFF;            /* „keine Messung“: leere Fläche */
  --seq-1: #DDECF9; --seq-2: #9FC8EE; --seq-3: #5C95CF; --seq-4: #2C5288; --seq-5: #051B3F;
  --map-line: #F0F1F3;
  --map-bg: #F8F9FA;            /* Umfeld und Meer der Karte: Panel-Grau mit 45 % Deckkraft auf Weiß */
  --station-fill: #FFFFFF; --station-stroke: #051B3F; --station-sel: #EDFF00;
  --mark-radius: 0;
  --shadow: none;
  --radius: 0;
  --focus: #051B3F;
  --font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #051B3F; --surface: #0C2249; --surface-2: #142C55;
    --ink: #FFFFFF; --ink-2: #CDD1D9; --muted: #AAB1BE; --axis-muted: #8E98A9;
    --grid: #1C3561; --axis: #2E4A7A; --control-border: #8E98A9;
    --brand: #FFFFFF; --link: #9EC7F0; --accent-text: #F29899; --period: #FFFFFF;
    --series-1: #6F86E0; --series-2: #EA5355; --series-3: #26A69A;
    --nodata: #16253F;
    --seq-1: #1D4677; --seq-2: #336AA6; --seq-3: #5590CF; --seq-4: #93C2EE; --seq-5: #D4E8FA;
    --map-line: #0C2249; --map-bg: #0C2249; --station-fill: #0C2249; --station-stroke: #FFFFFF;
    --focus: #EDFF00;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #051B3F; --surface: #0C2249; --surface-2: #142C55;
  --ink: #FFFFFF; --ink-2: #CDD1D9; --muted: #AAB1BE; --axis-muted: #8E98A9;
  --grid: #1C3561; --axis: #2E4A7A; --control-border: #8E98A9;
  --brand: #FFFFFF; --link: #9EC7F0; --accent-text: #F29899; --period: #FFFFFF;
  --series-1: #6F86E0; --series-2: #EA5355; --series-3: #26A69A;
  --nodata: #16253F;
  --seq-1: #1D4677; --seq-2: #336AA6; --seq-3: #5590CF; --seq-4: #93C2EE; --seq-5: #D4E8FA;
  --map-line: #0C2249; --map-bg: #0C2249; --station-fill: #0C2249; --station-stroke: #FFFFFF;
  --focus: #EDFF00;
}

/* ---------- Typografie ---------- */
body { font-family: var(--font); font-size: 16px; }
h1, h2, h3, .kpi-value, .fig-title, .brand, .legend-title { font-weight: 900; letter-spacing: -0.015em; }
h2 { font-size: 1.6rem; letter-spacing: -0.025em; }
h2::after { content: "."; color: var(--period); }
.lead { font-weight: 300; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 900; color: var(--accent-text); }
:focus-visible { outline-color: var(--focus); }

/* ---------- Rechtwinklig, Fläche statt Kontur ---------- */
.card, .kpi, .pill, .btn, .seg span, .field select, .vals li, .mini-kpi, .station-list button, .map-tip,
.legend-sw, .legend-scale > div .legend-sw, .stage-badge, .intern-badge, .toast, .skip, code, pre.code,
.step-no, .site nav a, .status i, #vg-tooltip-element.custom-theme { border-radius: 0 !important; }
.card, .kpi { border: 0; box-shadow: none; }
.status i, .step-no { border-radius: 50% !important; }   /* Signalpunkte bleiben rund */
.field select, .pill { border-color: var(--control-border); }
.seg span { border-color: var(--control-border); }
.station-list button { border: 0; background: var(--surface-2); }
.vals li { background: var(--surface-2); }
.map-card .map { background: var(--map-bg, var(--surface)); }
.legend { border-top: 0; }
.sw-nodata { border: 1px solid var(--axis); }

/* ---------- Kopf: Wortmarke mit Punkt, Band im M2-Verlauf ---------- */
.site { background: var(--page); border-bottom: 0; backdrop-filter: none; }
.site::after { content: ""; display: block; height: 4px; background: linear-gradient(90deg, #051B3F 0%, #EA5355 100%); }
.brand svg { display: none; }
.brand { font-size: 1.15rem; color: var(--brand); gap: 0; }
.brand .brand-dot { display: inline; color: var(--m2-red); }
.brand .stage-badge { margin-left: 10px; background: var(--m2-signal); color: #051B3F; }
.site nav a { color: var(--ink); font-weight: 700; font-size: .9rem; }
.site nav a:hover { background: var(--surface); }
.btn-login { background: var(--ink); color: var(--page); }

/* ---------- Einstieg als Bühne (Unternehmenshintergrund 06) ---------- */
/* zusätzlicher Blauschleier, damit Text und Kennzahlen auch über den hellen Strahlen lesbar bleiben */
.hero-band { background: linear-gradient(90deg, rgba(5, 27, 63, .96) 0%, rgba(5, 27, 63, .86) 55%, rgba(5, 27, 63, .62) 100%), #051B3F url("assets/hero-06.webp") center right / cover no-repeat; color: #FFFFFF; }
@media (max-width: 720px) { .hero-band { background-image: linear-gradient(90deg, rgba(5, 27, 63, .96), rgba(5, 27, 63, .8)), url("assets/hero-06-960.webp"); } }
.hero-band .hero { padding-top: 56px; padding-bottom: 40px; }
.hero-band .eyebrow { color: #F29899; }
.hero-band h1 { color: #FFFFFF; font-size: clamp(2.4rem, 5.5vw, 4.2rem); letter-spacing: -0.035em; line-height: .95; }
.hero-band .lead { color: #CDD1D9; }
.hero-band .meta { color: #AAB1BE; }
.hero-band .kpi { background: transparent; border-top: 3px solid rgba(255, 255, 255, .35); padding: 14px 4px 0; }
.hero-band .kpi.kpi-key { border-top-color: var(--m2-signal); }
.hero-band .kpi-value { color: #FFFFFF; font-size: 2.3rem; letter-spacing: -0.03em; }
.hero-band .kpi-label { color: #CDD1D9; }

/* ---------- Abschnitte ---------- */
.block { padding-top: 64px; }
.intern { border-top: 0; }
.intern-badge { background: var(--surface); color: var(--ink-2); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 900; }
.step-no { background: var(--ink); color: var(--page); }   /* Rot bleibt dem Überschriftenpunkt vorbehalten */
.table-view summary { color: var(--link); font-weight: 700; }
.data-table th { background: var(--surface); color: var(--ink); font-weight: 900; border-bottom: 2px solid var(--ink); }
.card .data-table th { background: var(--surface); }
.btn-sec { background: var(--surface-2); border: 1px solid var(--control-border); }

/* ---------- Fuß als Abbinder ---------- */
.site-foot { background: #051B3F; border-top: 0; color: #CDD1D9; }
.site-foot .foot { color: #CDD1D9; }
.site-foot .muted { color: #AAB1BE; }
.site-foot a { color: #FFFFFF; }
.site-foot .foot-claim { display: block; width: 280px; height: auto; margin: 6px 0 18px; }

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
  .brand span:not(.stage-badge) { display: inline; }
  .brand .brand-dot { display: inline; }
  .brand { font-size: 1rem; }
  .brand .stage-badge { margin-left: 6px; }
  #theme-toggle { display: none; }      /* Farbschema folgt auf dem Telefon dem System */
  .hero-band .kpi-value { font-size: 1.7rem; }
}