/* =====================================================================================
   Vorlage 39 Boulderhalle · 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: eine Kletterwand. Anthrazit bis Schiefer als Wand, die Griffe in den Farben der Schwierigkeiten,
   Chalk-Weiß als Lichtfarbe. Die Abschnitte sind Wandsegmente und wechseln den Ton.
   ===================================================================================== */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Registrierte Eigenschaften: Der Browser kann sie weich überblenden und rechnen.
   --h  Farbe des Griffs (die Wand überblendet beim Farbwechsel von selbst)
   --k  Wandneigung 0 bis 1 (1 = 40 Grad überhängend), der Schieber setzt sie, das CSS kippt die Wand
   --p  Scroll-Stand im klebenden Abschnitt 0 bis 6 (bei „starr" und ohne JavaScript: 6, die Szene ist oben)
   --dm Höhe der Hand in Dezimetern, zählt als ganze Zahl, daraus macht das CSS die Zahl „3,8 m"
   --fort Fortschritt der Seite 0 bis 1 für die Routenlinie */
@property --h { syntax: "<color>"; inherits: true; initial-value: #19d3da; }
@property --k { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --p { syntax: "<number>"; inherits: true; initial-value: 6; }
@property --dm { syntax: "<integer>"; inherits: true; initial-value: 38; }
@property --fort { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --schrift: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --schrift-titel: "Big Shoulders Display", "Arial Narrow", "Segoe UI", sans-serif;

  /* Die Wand */
  --wand-tief: #12161b;        /* Fuß, Fugen */
  --anthrazit: #1b2026;        /* Start, Zeiten */
  --schiefer: #262e37;         /* Boulder, Anfrage */
  --schiefer-hell: #343f4b;
  --petrol: #0b4a52;           /* Preise */
  --pflaume: #2e1747;          /* Kurse */
  --chalk: #f4f1ea;            /* Lichtfarbe, Schrift auf dunkel */
  --chalk-grau: #cfcabf;
  --papier: #fbfaf6;

  /* Die Griffe: die Farben der Schwierigkeiten */
  --gelb: #ffd60a;
  --gruen: #3ddc6b;
  --tuerkis: #19d3da;
  --orange: #ff7a1a;
  --pink: #ff3d9a;
  --violett: #9b5cff;
  --violett-hell: #c3a3ff;     /* Schrift auf Dunkel, 7 : 1 */

  --bg: #1b2026;
  --surface: #262e37;
  --text: #f4f1ea;             /* auf Anthrazit 14 : 1 */
  --muted: #b4bcc6;            /* auf Anthrazit 8 : 1, auf Petrol 5,6 : 1 */
  --accent: #ff3d9a;
  --on-accent: #1c0610;        /* auf Pink 6,6 : 1 */
  --border: rgba(244, 241, 234, .2);
  --error: #ff8a8a;

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

  --breite: 1240px;
  --rand: clamp(16px, 3vw, 40px);
  --route-b: 76px;             /* Breite der Routenleiste links (am Handy 0, dort steht sie unten) */
  --links: calc(var(--route-b) + var(--rand) / 2);
  --kopf: 60px;
  --leiste: 0px;               /* Höhe der Leiste unten (nur am Handy) */
  --fuge: clamp(22px, 3.4vw, 54px);   /* Höhe der schrägen Fuge zwischen den Segmenten */
}