/* ==========================================================================
   Vorlage 13 Klartext · Gestaltungswerte (Tokens)
   --------------------------------------------------------------------------
   Alle Farben, Schriften, Ecken und Abstände dieser Vorlage stehen hier und
   nur hier. css/style.css benutzt ausschließlich diese Variablen.

   Brücke zur Web-App: Die Namen --bg --surface --text --muted --accent
   --border --radius sind dieselben wie in 00_Projektstart/starter-webapp/
   styles.css. Wer aus der Landingpage eine Anwendung macht, kopiert diesen
   Block dorthin und hat sofort dieselben Farben.

   Umfärben: nur --accent, --accent-tief und --accent-hell ändern, danach
   Kontrast mit _werkzeug/pruefen.mjs nachmessen (weiße Schrift auf --accent
   muss mindestens 4,5 : 1 haben).
   ========================================================================== */

/* ---------- Schrift (lokal, SIL Open Font License, Lizenz in fonts/) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* ---------- Pflichtnamen der Web-App-Vorlage ---------- */
  --bg: #ffffff;               /* Seitengrund */
  --surface: #f5f5f7;          /* abgesetzte Abschnitte, Felder */
  --text: #121314;             /* Schrift, 18,6 : 1 auf Weiß */
  --muted: #5c5f66;            /* leiser Text, 6,4 : 1 auf Weiß, 5,9 : 1 auf Hellgrau */
  --accent: #0f6f93;           /* die eine Farbe: Knopf, Band, Marken. Weiße Schrift darauf 5,65 : 1, als Schrift auf Weiß 5,65 : 1 */
  --border: #dcdde1;           /* Linien, Kartenränder */
  --radius: 0px;               /* alles eckig, wie beim Vorbild */
  --on-accent: #ffffff;        /* Schrift auf dem Blau, 5,65 : 1 */
  --error: #b42318;            /* Fehlermeldungen der Web-App, 6,6 : 1 auf Weiß */

  /* ---------- Eigene Farben ---------- */
  --accent-tief: #0a5673;      /* Knopf beim Überfahren, 8,1 : 1 mit Weiß */
  --accent-hell: #e7f2f6;      /* Hauch der Farbe im leeren Bildrahmen */
  --dunkel: #0e0f11;           /* Fuß */
  --text-hell: #f5f5f7;        /* Schrift auf Dunkel und auf Blau */
  --text-hell-leise: #a9adb5;  /* leiser Text im Fuß, 8,5 : 1 auf Dunkel */
  --linie-dunkel: #2c2e33;     /* Linien im Fuß */
  --raster: #e6e7ea;           /* feines Raster im leeren Bildrahmen */
  --weiss: #ffffff;
  --glas: rgb(255 255 255 / .88); /* Kopfzeile, mit Unschärfe dahinter */
  --schatten-knopf: 0 14px 32px rgb(15 111 147 / .26);
  --fokus: var(--accent);
  --fokus-hell: #ffffff;       /* Fokusrahmen auf Blau und Dunkel */

  /* ---------- Schrift ---------- */
  --schrift: "Archivo", "Segoe UI", system-ui, sans-serif;
  --gewicht-titel: 800;        /* ein Gewicht für alle Überschriften */
  --breite-titel: 108%;        /* Überschriften etwas breiter gesetzt (Breiten-Achse der Archivo) */
  --breite-band: 125%;         /* Laufband, ganz breit */
  --h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);        /* 40 px Handy bis 76 px */
  --h1-zeile: 1;
  --h1-sperrung: -.022em;
  --h2: clamp(2rem, 1.25rem + 2.6vw, 3.375rem);        /* 32 px Handy bis 54 px */
  --h2-zeile: 1.08;
  --h2-sperrung: -.018em;
  --h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);       /* 22 bis 28 px */
  --text-groesse: 1.125rem;    /* Fließtext 18 px */
  --text-zeile: 1.55;
  --marke-groesse: .8125rem;   /* Abschnittsmarken 13 px, Großbuchstaben, gesperrt */
  --marke-sperrung: .14em;

  /* ---------- Maße ---------- */
  --breite: 78.75rem;          /* Inhaltsbreite 1260 px */
  --spalte: 40rem;             /* Textspalte 640 px */
  --rand: clamp(1rem, 4vw, 3rem);
  --abschnitt: clamp(5rem, 2.6rem + 6.4vw, 8rem);    /* 80 px Handy bis 128 px */
  --kopf-hoehe: 4.5rem;        /* 72 px, schrumpft in „dynamisch" auf 56 px */
  --kopf-hoehe-klein: 3.5rem;
  --ease: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}