/* Design-Tokens.
 *
 * Eine Quelle fuer Farbe, Schrift und Radius — Landingpage, Warteseite und
 * Report ziehen daraus. Werte stehen hier und nirgends sonst; wer im Markup
 * eine Farbe findet, hat einen Fehler gefunden.
 *
 * Die Baender (kritisch / ausbaufaehig / stark) sind bewusst als Klassen
 * ausgefuehrt und nicht als Einzelfarben: ein Element bekommt die Klasse,
 * alles darunter liest --band, --band-flaeche, --band-rand. So legt der
 * Controller einen Namen fest, kein Farbwert wandert durch die Bindings.
 */

/* Schriften liegen lokal — keine Anfrage an fremde Hosts. */
@font-face {
  font-family: "PP Neue Montreal";
  src: url("/assets/fonts/PPNeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("/assets/fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("/assets/fonts/PPNeueMontreal-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  /* ── Flaechen und Schrift ──────────────────────────────────────── */
  --dunkel:        rgb(45, 53, 55);
  --dunkel-tief:   rgb(11, 13, 14);
  --dunkel-karte:  rgb(55, 63, 65);
  --hell:          rgb(241, 243, 243);
  --gedimmt:       rgb(170, 182, 184);

  /* Abstufungen auf dunklem Grund */
  --leise:         rgba(241, 243, 243, 0.45);
  --gedaempft:     rgba(241, 243, 243, 0.6);
  --rand:          rgba(241, 243, 243, 0.14);
  --rand-kraeftig: rgba(241, 243, 243, 0.2);
  --flaeche:       rgba(241, 243, 243, 0.06);
  --feld:          rgba(241, 243, 243, 0.11);
  --spur:          rgba(241, 243, 243, 0.12);

  /* Abstufungen auf hellem Grund */
  --rand-hell:     rgba(45, 53, 55, 0.16);
  --linie-hell:    rgba(45, 53, 55, 0.1);
  --gedaempft-hell: rgba(45, 53, 55, 0.6);

  --gruen:         rgb(109, 250, 102);

  /* ── Baender ───────────────────────────────────────────────────── */
  --band-kritisch:      rgb(255, 106, 90);
  --band-kritisch-hell: rgb(214, 63, 45);
  --band-mittel:        rgb(255, 184, 77);
  --band-mittel-hell:   rgb(176, 110, 0);
  --band-stark:         rgb(109, 250, 102);
  --band-stark-hell:    rgb(7, 148, 0);

  /* ── Schrift ───────────────────────────────────────────────────── */
  --schrift:    "PP Neue Montreal", "Inter", system-ui, -apple-system, sans-serif;
  --schrift-ui: "Inter", system-ui, -apple-system, sans-serif;

  /* ── Radien ────────────────────────────────────────────────────── */
  --radius-klein: 8px;
  --radius:       10px;
  --radius-gross: 16px;
  --radius-rund:  99999px;

  /* ── Masse ─────────────────────────────────────────────────────── */
  /* Jede Groesse der drei Seiten steht hier. Kein Bauteil nennt eine
     Zahl, das gesamte Skalierverhalten liegt in dieser Datei — und im
     Grossbildblock ganz unten, der dieselben Tokens anhebt.
     Die clamp()-Formeln laufen stufenlos zwischen rund 320 und 1600
     Pixeln Breite; alles dazwischen ist damit abgedeckt, ohne dass es
     fuer jedes Geraet einen eigenen Umbruchpunkt braucht. */

  /* Seite */
  --seite-max:   1440px;
  --seite-rand:  clamp(16px, 3.4vw, 48px);
  /* Seitliches Polster fuer volle Flaeche bei begrenztem Inhalt:
     mindestens der Rand, darueber hinaus die Haelfte dessen, was
     ueber --seite-max hinausgeht. */
  --polster-aussen: max(var(--seite-rand), calc((100% - var(--seite-max)) / 2));
  --lese-max:    820px;

  /* Schrift */
  --text-xs:      14px;
  --text-s:       16px;
  --text-eingabe: 17px;
  --text-m:       18px;
  --text-l:       20px;
  /* Der Hero-Absatz sitzt zwischen Titel und Formular und folgt eigenen
     Sprungmarken. */
  --text-hero:    clamp(17px, 1.15vw, 21px);

  /* Ueberschriften */
  --titel-hero: clamp(38px, 5.6vw, 96px);
  --titel-1:    clamp(30px, 6.2vw, 72px);
  --titel-2:    clamp(28px, 4.6vw, 48px);
  --titel-3:    clamp(23px, 3.2vw, 32px);
  --titel-4:    clamp(21px, 2.8vw, 28px);

  /* Kennzahlen der fuenf Score-Varianten */
  --zahl-xl: clamp(64px, 13vw, 128px);
  --zahl-l:  clamp(58px, 11.5vw, 112px);
  --zahl-m:  clamp(54px, 10vw, 96px);
  --zahl-s:  clamp(44px, 8vw, 72px);
  --zahl-xs: clamp(40px, 7vw, 64px);

  /* Bauteile */
  --kreis-gross:  min(260px, 66vw);
  --kreis-klein:  min(180px, 46vw);
  --bild-hoehe:   clamp(170px, 42vw, 316px);
  --termin-hoehe: 520px;
  --leiste-hoehe: 64px;
  --avatar:       42px;
  --suche-max:    660px;
  --gesperrt-hoehe: 268px;
  /* Oben muss die absolut gesetzte Kopfzeile Platz haben. */
  --kopf-polster: clamp(14px, 2.2vw, 22px);
  --hero-oben:    clamp(112px, 15vw, 156px);
  --hero-unten:   clamp(56px, 8vw, 80px);

  /* Innenabstaende */
  --polster-karte: clamp(22px, 4vw, 36px) clamp(18px, 3.4vw, 40px);
  --polster-kopf:  clamp(18px, 3vw, 24px) clamp(16px, 2.6vw, 28px);
  --polster-zeile: clamp(14px, 2.6vw, 18px) clamp(16px, 2.6vw, 28px);
  --polster-notiz: clamp(20px, 3.4vw, 28px) clamp(18px, 3vw, 32px);
}

/* ── Grossbildschirme ──────────────────────────────────────────────── */

/* Die Vorlage ist ein 1440er Entwurf, und bis Full HD gilt sie unveraendert:
   jede Groesse oben erreicht spaetestens bei 1920 Pixeln genau den Wert aus
   dem Entwurf. Erst darueber waechst die Seite mit.
   Grund: ab hier haengt sonst jede Formel an ihrem Hoechstwert, die Seite
   bliebe eine 1440er Spalte in der Mitte, und auf einem 4K-Schirm bei 100
   Prozent Skalierung sind 18 Pixel Fliesstext zu klein zum Lesen.
   Jede vw-Zahl hier ist der Vorlagenwert geteilt durch 19.2 — damit trifft
   die Formel bei genau 1920 Pixeln den Ausgangswert und an der Grenze
   springt nichts. Die Hoechstwerte greifen um 2560 Pixel, also bei WQHD.
   Angehoben werden nur Tokens; kein Bauteil weiss davon. */
@media (min-width: 1920px) {
  :root {
    --seite-max:  clamp(1440px, 75vw, 2400px);
    --seite-rand: clamp(48px, 2.5vw, 88px);
    --lese-max:   clamp(820px, 42.7vw, 1100px);

    --text-xs:      clamp(14px, 0.729vw, 18px);
    --text-s:       clamp(16px, 0.833vw, 21px);
    --text-eingabe: clamp(17px, 0.885vw, 22px);
    --text-m:       clamp(18px, 0.9375vw, 24px);
    --text-l:       clamp(20px, 1.042vw, 26px);
    --text-hero:    clamp(21px, 1.094vw, 28px);

    --titel-hero: clamp(96px, 5vw, 132px);
    --titel-1:    clamp(72px, 3.75vw, 100px);
    --titel-2:    clamp(48px, 2.5vw, 66px);
    --titel-3:    clamp(32px, 1.667vw, 44px);
    --titel-4:    clamp(28px, 1.458vw, 38px);

    --zahl-xl: clamp(128px, 6.667vw, 176px);
    --zahl-l:  clamp(112px, 5.833vw, 154px);
    --zahl-m:  clamp(96px, 5vw, 132px);
    --zahl-s:  clamp(72px, 3.75vw, 100px);
    --zahl-xs: clamp(64px, 3.333vw, 88px);

    --kreis-gross:  clamp(260px, 13.54vw, 380px);
    --kreis-klein:  clamp(180px, 9.375vw, 260px);
    --bild-hoehe:   clamp(316px, 16.46vw, 460px);
    --termin-hoehe: clamp(520px, 27.08vw, 720px);
    --leiste-hoehe: clamp(64px, 3.333vw, 92px);
    --avatar:       clamp(42px, 2.1875vw, 58px);
    --suche-max:    clamp(660px, 34.375vw, 900px);
    --gesperrt-hoehe: clamp(268px, 13.958vw, 380px);
    --kopf-polster: clamp(22px, 1.146vw, 32px);
    --hero-oben:    clamp(156px, 8.125vw, 216px);
    --hero-unten:   clamp(80px, 4.167vw, 110px);

    --polster-karte: clamp(36px, 1.875vw, 52px) clamp(40px, 2.083vw, 58px);
    --polster-kopf:  clamp(24px, 1.25vw, 34px) clamp(28px, 1.458vw, 40px);
    --polster-zeile: clamp(18px, 0.9375vw, 26px) clamp(28px, 1.458vw, 40px);
    --polster-notiz: clamp(28px, 1.458vw, 40px) clamp(32px, 1.667vw, 46px);
  }
}

/* Ein Element mit Bandklasse setzt die drei Bandvariablen fuer sich und
   alles darunter. `--band` gilt auf dunklem Grund, `--band-auf-hell` in der
   Analyse-Vorschau. */
.band-kritisch {
  --band: var(--band-kritisch);
  --band-auf-hell: var(--band-kritisch-hell);
  --band-flaeche: rgba(255, 106, 90, 0.12);
  --band-rand: rgba(255, 106, 90, 0.4);
}
.band-ausbaufaehig {
  --band: var(--band-mittel);
  --band-auf-hell: var(--band-mittel-hell);
  --band-flaeche: rgba(255, 184, 77, 0.12);
  --band-rand: rgba(255, 184, 77, 0.4);
}
.band-stark {
  --band: var(--band-stark);
  --band-auf-hell: var(--band-stark-hell);
  --band-flaeche: rgba(109, 250, 102, 0.12);
  --band-rand: rgba(109, 250, 102, 0.4);
}
/* Solange nichts geladen ist, gibt es kein Band — dann ist alles gedaempft
   statt gruen oder rot. Sonst faerbt der Ladezustand eine Wertung vor. */
.band-unbekannt {
  --band: var(--gedaempft);
  --band-auf-hell: rgba(45, 53, 55, 0.4);
  --band-flaeche: var(--flaeche);
  --band-rand: var(--rand-kraeftig);
}