/* Zitronenblau Controlling — Design-Tokens, Fassung 2 (02.11.2026, siehe DESIGN.md).
   Marke aus dem Company Teaser: Navy #1C4773, Hellgrau #F2F2F2, Schrift Nunito.
   Navy heißt: Marke und bedienbar. Die vier Ergebnis-Stufen (rot, orange, hellgrün, dunkelgrün) heißen nur: Ergebnis. */
/* Portal (Phase 3): Nunito wird mit ausgeliefert statt von Google Fonts geladen (clickdummy/README.md) — sonst unverändert. */
/* nunito-latin-ext-wght-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(../schrift/nunito-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* nunito-latin-wght-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(../schrift/nunito-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --papier: #F2F2F2;
  --flaeche: #FFFFFF;
  --flaeche-2: #F7F7F8;
  --linie: #E8E8EB;
  --linie-stark: #D3D4DA;

  --navy: #1C4773;
  --navy-tief: #133356;
  --navy-hell: #E8EEF6;
  --blau: #2F5490;

  --tinte: #14243B;
  --tinte-2: #4A5568;
  --tinte-3: #6B7280;

  --akzent: var(--navy);
  --akzent-hover: var(--navy-tief);
  --akzent-hell: var(--navy-hell);

  /* Ergebnis-Stufen (Schwellen in rechnen.js → STUFEN) */
  --rot: #C62828;        --rot-hell: #FDE3E2;
  --orange: #B45309;     --orange-hell: #FDEBD3;
  --hellgruen: #2E7D4F;  --hellgruen-hell: #DCF2E3;
  --dunkelgruen: #17603A; --dunkelgruen-hell: #BCE5CB; /* nur eine Stufe dunkler als hellgrün (Thomas, 03.11.2026) */

  /* Status (Datenstand) — eigene, ruhige Töne */
  --gut: #2E7D4F; --gut-hell: #DCF2E3;
  --warn: #9A5A00; --warn-hell: #FBEFD9;
  --kritisch: #C62828; --kritisch-hell: #FDE3E2;

  --radius: 18px;
  --radius-klein: 10px;
  --schatten: 0 1px 2px rgba(20, 36, 59, .04), 0 8px 24px rgba(20, 36, 59, .06);

  --schrift: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--schrift);
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.45;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--blau); text-decoration: none; }
.zahl, .num { font-variant-numeric: tabular-nums lining-nums; }
.neg { color: var(--rot); }
.blass { color: var(--tinte-3); }
.versteckt { display: none !important; }

/* Wortmarke wie im Company Teaser: ZITRONENBLAU in Nunito, Versalien */
.marke { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 900; letter-spacing: .04em; color: var(--navy); text-transform: uppercase; line-height: 1; }
.marke small { font-weight: 600; letter-spacing: .02em; color: var(--tinte-3); text-transform: none; font-size: .62em; }
.marke.hell { color: #fff; }
.marke.hell small { color: rgba(255,255,255,.65); }

/* Ergebnis-Stufen als Fläche (Zelle/Pille) */
.st { border-radius: 8px; font-weight: 750; font-variant-numeric: tabular-nums; }
.st-rot { background: var(--rot-hell); color: var(--rot); }
.st-orange { background: var(--orange-hell); color: var(--orange); }
.st-hellgruen { background: var(--hellgruen-hell); color: var(--hellgruen); }
.st-dunkelgruen { background: var(--dunkelgruen-hell); color: var(--dunkelgruen); }
.st-leer { background: transparent; color: #B8BAC2; font-weight: 500; }
.pille { display: inline-block; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pille.auf { background: var(--hellgruen-hell); color: var(--hellgruen); font-weight: 800; }
.pille.ab { background: var(--rot-hell); color: var(--rot); font-weight: 800; }
.pille.leise { background: #E9EAEE; color: var(--tinte-2); font-weight: 750; }
.punkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.punkt.st-dunkelgruen { background: #3E9F66; }
.punkt.st-hellgruen { background: #6CC38F; }
.punkt.st-orange { background: #F0A23B; }
.punkt.st-rot { background: #E5534B; }

/* Chips (Status, nicht Ergebnis) */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #E9EAEE; color: var(--tinte-2); white-space: nowrap; }
.chip.gut { background: var(--gut-hell); color: var(--gut); }
.chip.warn { background: var(--warn-hell); color: var(--warn); }
.chip.kritisch { background: var(--kritisch-hell); color: var(--kritisch); }
.ampel { width: 8px; height: 8px; border-radius: 50%; background: var(--tinte-3); display: inline-block; }
.ampel.gut { background: #3BAA6A; }
.ampel.warn { background: #E39A2D; }
.ampel.kritisch { background: var(--kritisch); }

/* Veränderung zum Vorjahr */
.delta { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta.besser { color: var(--hellgruen); }
.delta.schlechter { color: var(--rot); }
.delta.gleich { color: var(--tinte-3); }

/* Knöpfe: drei Stufen */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--flaeche); font-weight: 750; cursor: pointer; color: var(--tinte); }
.knopf:hover { border-color: var(--tinte-3); }
.knopf.primaer { background: var(--navy); border-color: var(--navy); color: #fff; }
.knopf.primaer:hover { background: var(--navy-tief); }
.knopf.klein { height: 32px; padding: 0 13px; font-size: 13px; }
.textlink { background: none; border: 0; padding: 0; color: var(--blau); font-weight: 750; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* Segment-Umschalter (iOS-Art) */
.segment { display: inline-flex; background: #E4E5E9; border-radius: 999px; padding: 3px; gap: 2px; }
.segment button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 750; color: var(--tinte-2); cursor: pointer; white-space: nowrap; }
.segment button.an { background: var(--flaeche); color: var(--navy); box-shadow: 0 1px 3px rgba(20,36,59,.14); }

/* Formular */
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label { font-size: 13px; font-weight: 750; color: var(--tinte-2); }
.feld input, .feld select { height: 46px; border: 1px solid var(--linie-stark); border-radius: 12px; padding: 0 14px; background: var(--flaeche); }
.feld input:focus { outline: 2px solid var(--navy); outline-offset: -1px; border-color: transparent; }
.feld .fehler { color: var(--rot); font-size: 12.5px; font-weight: 600; }
.feld input.ungueltig { border-color: var(--rot); }

.hinweis-schnappschuss { font-size: 12px; font-weight: 600; color: var(--warn); background: var(--warn-hell); padding: 6px 12px; border-radius: 999px; }

/* Belegungsband (30 Kästchen) */
.band { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; }
.band i { height: 16px; border-radius: 3px; background: #E4E5E9; }
.band i.belegt { background: var(--navy); }
.band i.we { box-shadow: inset 0 -3px 0 #8FA9CC; }

/* Legende der Stufen */
.stufenlegende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--tinte-2); align-items: center; }
.stufenlegende span { display: inline-flex; align-items: center; gap: 6px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--navy-tief); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--schatten); z-index: 100; }