/* =====================================================================================
   Vorlage 17 Blog „Steigspur" · Farben, Schrift, Ecken, Abstände
   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.
   Umfärben: --accent, --accent-tief, --accent-hell (die eine Knopffarbe) und die Bergfarben weiter unten.
   Kontrastwerte stehen hinter jeder Farbe. Regel: Text mindestens 4,5 : 1 auf seinem Grund (großer Text 3 : 1).
   Knöpfe und Links bleiben Tannengrün; alle anderen Farben sind Flächen, Bänder, Schilder und Diagrammfarben.
   ===================================================================================== */
@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 {
  --schrift: "Mona Sans", "Segoe UI", system-ui, sans-serif;

  --bg: #f6f7f4;            /* Kartenpapier, kühl */
  --surface: #ffffff;       /* Karten, Tafeln */
  --surface-2: #eaefe9;     /* Latschenhauch: abgesetzte Flächen */
  --text: #142019;          /* 15,6 : 1 auf --bg */
  --muted: #4b5850;         /* 6,9 : 1 auf --bg, 7,5 : 1 auf Weiß, 6,4 : 1 auf --surface-2 */
  --accent: #1e5b47;        /* Tannengrün, die eine Farbe: Knöpfe, Links, Route. 7,4 : 1 auf --bg, Weiß darauf 7,9 : 1 */
  --on-accent: #ffffff;
  --accent-tief: #164536;   /* Knopf beim Überfahren, Weiß darauf 10,8 : 1 */
  --accent-hell: #dfeae3;   /* nur Fläche; Akzent darauf 6,4 : 1 */
  --border: #d5ddd7;
  --error: #b42318;

  /* Karte und Profil: Inhaltsfarben, kein Schmuck */
  --hoehenlinie: #c2c8bd;
  --hoehenlinie-dick: #a3aa9c;
  --profil-flaeche: #e6ede8;   /* Rückfall; Profil und Karte nutzen die Höhenstufen (Verläufe in index.html) */
  --profil-linie: #8a7f72;
  --raster: #e2e8e3;

  --nacht: #14295c;         /* Newsletter: Enzian tief (Nachthimmel über dem Kar) */
  --nacht-text: #ffffff;    /* 14,0 : 1 auf --nacht */
  --nacht-leise: #b8c6e6;   /* 8,2 : 1 auf --nacht */
  --nacht-akzent: #ffc27a;  /* Links im Dunkeln (Alpenglühen hell), 8,8 : 1 */
  --fuss-grund: #0b1a14;    /* Fuß: Tannengrün tief */
  --fuss-leise: #a9bab1;    /* Text im Fuß, 8,8 : 1 auf --fuss-grund */

  /* ---------- Bergfarben ----------
     Vier kräftige Farben zusätzlich zum Tannengrün. Je Farbe: kräftige Fläche, helle Fläche, Textfarbe auf Hell/Weiß.
     Die kräftige Fläche trägt entweder Weiß oder die dunkle Schrift (steht dahinter), nie beides. */
  --enzian: #23479b;          /* Enzianblau. Weiß darauf 8,6 : 1; auf Weiß als Text 8,6 : 1; auf --enzian-hell 7,2 : 1 */
  --enzian-hell: #e3ebfa;     /* Fläche. --text 14,0 : 1, --muted 6,2 : 1 */
  --almwiese: #f4c431;        /* Almwiesen-Gelb (Arnika). --text darauf 10,2 : 1 */
  --almwiese-hell: #fbf1c6;   /* Fläche. --text 14,8 : 1, --muted 6,6 : 1 */
  --almwiese-text: #6b5300;   /* Text auf Hell: auf --almwiese-hell 6,5 : 1, auf Weiß 7,3 : 1 */
  --alpgluehen: #f28a3b;      /* Alpenglühen-Orange. --on-alpgluehen darauf 7,1 : 1 */
  --on-alpgluehen: #2a1204;
  --alpgluehen-hell: #fde8d4; /* Fläche. --text 14,1 : 1, --muted 6,3 : 1 */
  --alpgluehen-text: #a8420b; /* Text: auf Weiß 6,1 : 1, auf --alpgluehen-hell 5,1 : 1, auf --almwiese-hell 5,4 : 1 */
  --gestein: #b8382b;         /* Gesteinsrot. Weiß darauf 5,8 : 1 */
  --gestein-hell: #f7dfd9;    /* Fläche. --text 11,9 : 1 */
  --gestein-text: #9e2f23;    /* Text: auf Weiß 7,3 : 1, auf --gestein-hell 5,7 : 1 */

  /* Höhenstufen: Karte, Höhenprofil und Etappen. Tal bis 1.000 m, Wald bis 1.800 m, Fels bis 2.300 m, Gipfel darüber */
  --stufe-tal: #86b86a;       /* Wiesengrün. --text darauf 7,3 : 1 */
  --stufe-tal-hell: #dcebc9;
  --stufe-tal-text: #44701c;  /* auf Weiß 5,9 : 1, auf --almwiese-hell 5,2 : 1 */
  --stufe-wald: #2c6a46;      /* Lärchen- und Zirbenwald, dunkelgrün. Weiß darauf 6,5 : 1 */
  --stufe-wald-hell: #c9ddd0;
  --stufe-fels: #9a8f80;      /* warmgrau */
  --stufe-fels-hell: #ddd4c6;
  --stufe-fels-text: #6b6053; /* auf Weiß 6,1 : 1 */
  --stufe-gipfel: var(--alpgluehen);
  --stufe-gipfel-hell: #fbd0a8;
  --fels-flaeche: #ece6dc;    /* Abschnittsgrund Über mich. --text 13,5 : 1, --muted 6,0 : 1 */
  --bach: #4f7fd0;            /* Wasser in der Karte */

  /* Schwierigkeit der Touren (eigene Einteilung, nicht die Wegmarkierung): Wärmeskala gelb, orange, rot */
  --leicht: var(--almwiese);  --leicht-text: var(--almwiese-text);
  --mittel: var(--alpgluehen); --mittel-text: var(--alpgluehen-text);
  --schwer: var(--gestein);    --schwer-text: var(--gestein-text);

  /* Farbband unter dem Kopf und über dem Fuß: Tal, Wald, Fels, Gipfel, Gestein */
  --hoehenband: linear-gradient(90deg, var(--stufe-tal) 0 22%, var(--stufe-wald) 22% 44%, var(--stufe-fels) 44% 66%, var(--alpgluehen) 66% 84%, var(--gestein) 84% 100%);

  --radius: 18px;
  --radius-gross: 28px;
  --radius-klein: 10px;

  --breite: 1240px;
  --spalte: 640px;
  --abstand: clamp(84px, 10vw, 140px);
  --kopf: 64px;
}