/* ==========================================================================
   Vorlage 11 · Szene · Kammlicht (Demo)
   tokens.css: alle Farben, Schrift, Radien und Abstände an einer Stelle.
   --------------------------------------------------------------------------
   Wird VOR style.css geladen. style.css benutzt nur diese Variablen.
   Brücke zur Web-App: die Pflichtnamen --bg --surface --text --muted --accent
   --border --radius heißen wie in 00_Projektstart/starter-webapp/styles.css.
   Umfärben: nur hier ändern, danach Kontrast mit _werkzeug/pruefen.mjs messen.
   Farben nach dem „modernen System" Microsoft Loop (MESSUNGEN.md).
   ========================================================================== */

/* ---------- Schrift (lokal, SIL Open Font License, Lizenz in fonts/) ---------- */
@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Helle Inhaltsflächen ---------- */
  --weiss: #ffffff;
  --grau: #f5f5f7;                 /* abgesetzte Abschnitte */
  --linie: #e2e2ea;
  --text-farbe: #242424;           /* 15,5 : 1 auf Weiß, 14,3 : 1 auf Grau */
  --leise: #616161;                /* 6,2 : 1 auf Weiß, 5,7 : 1 auf Grau */
  --feld-rand: #8a8a98;            /* Rahmen der Formularfelder: 3,4 : 1 auf Weiß */
  --maske: #000000;                /* nur für CSS-Masken (Deckkraft), keine sichtbare Farbe */

  /* ---------- Die eine Akzentfarbe: Violett ---------- */
  --violett: #8230ff;              /* Knopf mit weißer Schrift 5,5 : 1 */
  --violett-tief: #6414e6;         /* Knopf beim Überfahren, weiße Schrift 7,5 : 1 */
  --violett-link: #7520f5;         /* Links und Markierungen auf Hell: 6,4 : 1 auf Weiß, 5,9 : 1 auf Grau */
  --violett-hell: #f1ebff;         /* Grund für Nummern und Häkchen */
  --violett-dunkelgrund: #ba9bfd;  /* Akzent auf Nachtblau: 8,2 : 1 */

  /* ---------- Der eine Dunkelton: Nachtblau ---------- */
  --nacht: #0e1024;                /* Szene, Kopf, Fuß, Abschnitt „Ablauf" */
  --schimmer: #1b1f45;             /* Flächen auf Nachtblau */
  --nacht-tief: #070818;           /* oberer Himmel, vorderster Bergkamm */
  --auf-nacht: #ffffff;            /* Schrift auf Nachtblau: 18,8 : 1 */
  --auf-nacht-leise: #b9b8d6;      /* 9,7 : 1 auf Nachtblau, 8,2 : 1 auf Schimmer, 5,9 : 1 auf der hellsten Bergkette */
  --kopf-glas: rgb(14 16 36 / .94);    /* Kopfzeile, Milchglas über Nachtblau */
  --kopf-glas-fest: #0e1024;           /* Ausweichlösung ohne Unschärfe */
  --linie-nacht: rgb(255 255 255 / .14);
  --rand-knopf-nacht: rgb(255 255 255 / .55);
  --knopf-nacht-hover: rgb(255 255 255 / .1);
  --text-schatten: rgb(7 8 24 / .6);   /* weicher Schein hinter der Schrift in der Szene */

  /* ---------- Loop-Pastellverlauf: genau eine Fläche (Karte „Erstgespräch") ---------- */
  --pastell: linear-gradient(110deg, #ddd0fe 0%, #c9f5ff 100%);   /* #ba9bfd → #91ebff, aufgehellt: Text 10,7 bis 13,3 : 1 */
  --pastell-kante: rgb(130 48 255 / .18);
  --bildrahmen: linear-gradient(160deg, #f4f1fa 0%, #e6dff3 100%); /* leere Bildrahmen */
  --bildrahmen-raster: rgb(130 48 255 / .07);

  /* ---------- Szene: Himmel, Planet, Berge ---------- */
  --himmel-oben: #070818;
  --himmel-mitte: #0e1024;
  --himmel-horizont: #1b1f45;
  --himmel-dunst: rgb(130 48 255 / .22);
  --himmel-dunst-blau: rgb(145 235 255 / .07);
  --stern: rgb(255 255 255 / .92);
  --stern-leise: rgb(214 220 255 / .5);
  --stern-blau: rgb(145 235 255 / .75);
  --stern-violett: rgb(186 155 253 / .8);

  --planet-tief: #1d1560;
  --planet-dunkel: #3a24a8;
  --planet-mitte: #6a3cf0;
  --planet-violett: #8230ff;
  --planet-flieder: #ba9bfd;
  --planet-hell: #d6c7ff;
  --planet-eis: #91ebff;
  --planet-sturm: rgb(228 217 255 / .34);
  --planet-nacht: rgb(6 6 22 / .94);       /* Schattenseite */
  --planet-licht: rgb(255 255 255 / .22);  /* Lichtkante oben links */
  --planet-glut: rgb(130 48 255 / .34);    /* Leuchten um den Planeten */
  --planet-daemmerung: rgb(12 9 44 / .5);  /* Übergang zur Nachtseite */
  --planet-glut-weit: rgb(130 48 255 / .16);
  --planet-hauch: rgb(186 205 255 / .5);   /* Atmosphäre am Rand */
  --bahn-linie: rgb(186 155 253 / .42);
  --mond-hell: #f4f1ff;
  --mond-mitte: #b8b3d8;
  --mond-schatten: #2a2750;

  --berg-fern-oben: #34307a;
  --berg-fern-unten: #1a1b48;
  --berg-mitte-oben: #1f1d52;
  --berg-mitte-unten: #0f1030;
  --berg-nah: #06071a;
  --kamm-kante: rgb(186 155 253 / .5);     /* Lichtkante auf dem vorderen Kamm */
  --kamm-licht: #f4f1ff;                   /* das Licht der Hütte am Kamm */
  --kamm-schein: rgb(186 155 253 / .55);
  --dunst-tal: rgb(130 48 255 / .14);

  /* ---------- Schatten (Loop), im Farbton des Grunds ---------- */
  --schatten: 0 0 2px rgb(14 16 36 / .08), 0 8px 16px rgb(14 16 36 / .10);
  --schatten-hoch: 0 0 8px rgb(14 16 36 / .08), 0 18px 36px rgb(14 16 36 / .14);

  /* ---------- Schrift ---------- */
  --schrift: "Mona Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gewicht-titel: 700;
  --gewicht-knopf: 600;
  /* Größenleiter nach Grundlinie 2.1: Handy → Computer */
  --h1: clamp(2.625rem, 1.55rem + 4.4vw, 5rem);        /* 42 → 80 px */
  --h2: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);         /* 32 → 52 px */
  --h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);       /* 22 → 28 px */
  --text-gross: clamp(1.125rem, 1rem + .45vw, 1.3125rem);
  --text-normal: 1.125rem;                             /* 18 px */
  --text-klein: 1rem;                                  /* nie unter 16 px */
  /* Sperrung wandert mit der Größe: groß enger, klein offen */
  --sperrung-h1: -.022em;
  --sperrung-h2: -.012em;
  --sperrung-h3: -.004em;

  /* ---------- Maße ---------- */
  --breite: 78.75rem;              /* 1260 px Inhaltsbreite */
  --textspalte: 40rem;             /* 640 px */
  --rand: clamp(1rem, 4.5vw, 3rem);
  --abschnitt: clamp(5rem, 2.8rem + 6vw, 8rem);     /* 80 px Handy, 128 px Computer */
  --kopf: 4rem;                    /* 64 px, beim Scrollen 56 px */
  --kopf-klein: 3.5rem;

  /* Eckenleiter: 20 Karten, 32 große Bilder, Knöpfe ganz rund */
  --ecke: 20px;
  --ecke-gross: 32px;
  --ecke-klein: 10px;
  --ecke-rund: 999px;

  --ease: cubic-bezier(.16, 1, .3, 1);

  /* ---------- Pflichtnamen der Web-App (Brücke) ---------- */
  --bg: var(--weiss);
  --surface: var(--grau);
  --text: var(--text-farbe);
  --muted: var(--leise);
  --accent: var(--violett);
  --border: var(--linie);
  --radius: var(--ecke);
  --on-accent: var(--weiss);       /* Schrift auf Violett, 5,5 : 1 */
  --error: #b42318;                /* Fehlermeldungen der Web-App, 6,6 : 1 auf Weiß */

  color-scheme: light;
}