/* =====================================================================================
   Vorlage 43 Kursplattform · Farben, Schrift, Abstände, registrierte Eigenschaften
   Brücke zur Web-App: --bg --surface --text --muted --accent --on-accent --border --radius --schrift
   heißen wie in 00_Projektstart/starter-webapp/styles.css.
   Bild: ein Regal aus hellem Birkenholz. Die Kurse stehen als Buchrücken in kräftigen Einbandfarben
   (Kobalt, Zinnober, Smaragd, Ocker, Pflaume), die Schrift ist Tintenblau. Abschnitte wechseln den Grund.
   ===================================================================================== */
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* Registrierte Eigenschaften: Der Browser kann sie weich überblenden.
   --w   Öffnung des Wisch-Übergangs von unscharf zu scharf (Prozent der Diagonale)
   --f   Fortschritt 0 bis 1 (Kursfortschritt, Balken)
   --sp  Fortschritt innerhalb eines Schritts im klebenden Abschnitt 0 bis 1 */
@property --w { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --f { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --sp { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {
  --schrift: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --schrift-titel: "Literata", Georgia, "Times New Roman", serif;

  /* Einbandfarben */
  --kobalt: #1f4fd8;
  --kobalt-tief: #163aa6;
  --zinnober: #d63a16;
  --zinnober-tief: #a82a0e;
  --smaragd: #0b7a52;
  --smaragd-tief: #07583a;
  --ocker: #e0a02b;
  --ocker-hell: #f3d58f;
  --pflaume: #6b2a6e;
  --pflaume-tief: #4a1a4d;

  /* Holz und Papier */
  --birke: #e6cf9f;
  --birke-hell: #f3e6c4;
  --birke-dunkel: #c4a165;
  --birke-tief: #9c7a45;
  --papier: #fbf6ea;
  --kalk: #f4ecd9;
  --tinte: #14213d;
  --tinte-mittel: #2b3d66;
  --tinte-tief: #0f1830;

  --bg: #f4ecd9;
  --surface: #fffdf7;
  --text: #14213d;              /* auf Kalk 14 : 1 */
  --muted: #46506a;             /* auf Kalk 7 : 1, auf Papier 7,5 : 1 */
  --accent: #1f4fd8;
  --on-accent: #ffffff;         /* auf Kobalt 6,6 : 1 */
  --border: rgba(20, 33, 61, .18);
  --error: #b3261e;

  --radius: 18px;
  --radius-klein: 10px;
  --radius-rund: 999px;

  --breite: 1280px;
  --rand: clamp(16px, 3vw, 40px);
  --kopf: 64px;
  --leiste: 0px;               /* Höhe der Fächerleiste unten (nur am Handy) */

  /* Maserung als eingebettete SVG-Datei (kein fremder Server): feine Linien entlang der Faser */
  --maserung: url("data:image/svg+xml;utf8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='600' height='240'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .17' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .3  0 0 0 0 .12  0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}