/* ==========================================================================
   Vorlage 12 · Glas · Lichtkante (Demo)
   tokens.css: alle Farben, Schriften, Ecken und Abstände an einer Stelle.
   --------------------------------------------------------------------------
   Brücke zur Web-App: Die Pflichtnamen --bg --surface --text --muted --accent
   --border --radius sind dieselben wie in 00_Projektstart/starter-webapp/styles.css.
   Wer eine Web-App im Stil dieser Seite baut, kopiert diese Datei dorthin.
   Umfärben: nur hier ändern, danach Kontrast mit _werkzeug/pruefen.mjs nachmessen.
   ========================================================================== */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---------- Pflichtnamen der Web-App-Vorlage ---------- */
  --bg: #0a0a0c;                          /* getöntes Schwarz, Seitengrund */
  --surface: #141418;                     /* feste Fläche, wo kein Glas geht */
  --text: #f5f2ed;                        /* Schrift, 17,7 : 1 auf --bg */
  --muted: #bdb8b0;                       /* leise Schrift, 10 : 1 auf --bg, im hellsten Leuchten noch 5,0 : 1 */
  --accent: #ff7a1a;                      /* die eine Farbe: Orange, 7,6 : 1 auf --bg */
  --border: rgba(255, 255, 255, .16);     /* Glasrand */
  --radius: 28px;                         /* Karten */
  --on-accent: var(--accent-schrift);     /* Schrift auf Orange, 5,1 : 1 am dunkelsten Punkt */
  --error: #ff7b7b;                       /* Fehlermeldungen der Web-App, 7,9 : 1 auf --bg */

  /* ---------- Orange, alle aus derselben Farbe ---------- */
  --accent-tief: #f23d00;                 /* Ende des Knopf-Verlaufs, dunkle Schrift darauf 5,1 : 1 */
  --accent-hell: #ffa468;                 /* Fokusrahmen, kleine Zahlen, 10,1 : 1 auf --bg */
  --accent-schrift: #140804;              /* Schrift auf Orange */
  --accent-schleier: rgba(255, 122, 26, .13);  /* Zweitknopf, gewählter Reiter */
  --accent-schleier-stark: rgba(255, 122, 26, .24);
  --accent-rand: rgba(255, 140, 60, .55);
  --knopf-schatten: 0 20px 60px rgba(255, 72, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
  --leuchten-1: rgba(255, 86, 0, .20);    /* Leuchten in den Ecken der Karten */
  --leuchten-2: rgba(255, 132, 0, .12);

  /* ---------- Glas ---------- */
  --glas: rgba(16, 16, 19, .46);          /* Grund der Glaskarten */
  --glas-dicht: rgba(16, 16, 19, .62);    /* Karten mit viel Text über dem Leuchten */
  --glas-fest: rgba(22, 22, 26, .94);     /* Ersatz, wenn der Browser kein Glas kann */
  --glas-kopf: rgba(10, 10, 12, .62);     /* Kopfzeile beim Scrollen */
  --glas-blur: blur(20px) saturate(1.6);
  --glas-blur-gross: blur(26px) saturate(1.6);
  --glas-kante: inset 0 1px 0 rgba(255, 255, 255, .10);  /* heller Innenrand oben */
  --linie: rgba(255, 255, 255, .10);      /* Trennlinien */
  --feld: rgba(255, 255, 255, .045);      /* Formularfelder */

  /* ---------- Horizont (erster Bildschirm) ---------- */
  --horizont-linie: rgba(255, 186, 120, .95);
  --horizont-glut: rgba(255, 106, 18, .75);
  --horizont-hof: rgba(255, 86, 0, .38);
  --horizont-boden: #0a0a0c;              /* wie --bg, sonst entsteht am Ende des ersten Bildschirms eine Kante */
  --maske: #000;                          /* Maske des Horizonts: nur Deckkraft, keine Farbe */
  /* feines Korn über dem Horizont, als SVG-Rauschen (kein Bild von außen) */
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");

  /* ---------- Schrift ---------- */
  --schrift: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --gewicht-titel: 680;                   /* ein Gewicht für alle Überschriften */
  --gewicht-aussage: 300;                 /* große Aussagesätze in der Problem-Auswahl */
  --text-groesse: 1.125rem;               /* 18 px */
  --text-zeile: 1.5;

  /* ---------- Ecken (eine Leiter) ---------- */
  --radius-klein: 14px;                   /* Felder, Chips innen */
  --radius-gross: 44px;                   /* große Glastafeln */
  --radius-rund: 999px;                   /* Knöpfe, Reiter, Chips */

  /* ---------- Maße ---------- */
  --breite: 78.75rem;                     /* 1260 px Inhaltsbreite */
  --rand: clamp(1rem, 4vw, 3rem);
  --abschnitt: clamp(5rem, 10vw, 9rem);
  --kopf-hoehe: 4.5rem;
  --ease: cubic-bezier(.16, 1, .3, 1);

  color-scheme: dark;
}