/* =====================================================================================
   Vorlage 17 Blog „Steigspur" · Gestaltung
   Aufbau: Grundlagen · Kopf · Knöpfe · Höhenprofil und Karte (erster Bildschirm) · Tour in Etappen
           (klebende Bühne, ruhige Fassung) · Beiträge · Touren · Über mich · Newsletter · Fuß
   ===================================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 12px); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--schrift); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.behaelter { width: min(100% - 40px, var(--breite)); margin-inline: auto; }
.zeichen-vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--radius-klein); background: var(--text); color: #fff; }
.sprung:focus { top: 12px; }
.marke { margin-bottom: 14px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.leise { color: var(--muted); }
.klein { font-size: 14px; }
h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.03em; font-weight: 720; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
h3 { font-size: 22px; line-height: 1.22; letter-spacing: -.012em; font-weight: 680; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 30; height: var(--kopf); background: rgba(246, 247, 244, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(20, 32, 25, .07); }
.kopf-innen { height: 100%; display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; font-weight: 740; font-size: 21px; letter-spacing: -.02em; }
.logo-zeichen { width: 30px; height: 30px; color: var(--accent); }
.menue { display: flex; gap: 26px; margin-left: auto; }
.menue a { color: var(--text); text-decoration: none; font-weight: 560; font-size: 16px; }
.menue a:hover { color: var(--accent); }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 0; border-radius: var(--radius-klein); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 660; font-size: 17px; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
.knopf:hover { background: var(--accent-tief); }
.knopf:active { transform: translateY(1px); }
.knopf-klein { min-height: 44px; padding: 0 16px; font-size: 15px; }
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 640; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.textlink:hover { color: var(--accent-tief); }

/* ---------- Bildplatzhalter: Kartenpapier mit feinen Höhenlinien ---------- */
.bild-platzhalter {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  aspect-ratio: var(--format, 3 / 2); border-radius: var(--radius-gross);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%),
    repeating-radial-gradient(ellipse at 72% 115%, rgba(30, 91, 71, .1) 0 1px, transparent 1px 20px),
    var(--accent-hell);
}
.bild-platzhalter figcaption { margin: 16px; padding: 8px 12px; border-radius: var(--radius-klein); max-width: calc(100% - 32px); background: rgba(255, 255, 255, .94); color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.35; }

/* =====================================================================================
   Erster Bildschirm: Text oben, darunter Profiltafel und Karte nebeneinander
   ===================================================================================== */
.held { padding: clamp(24px, 4vw, 48px) 0 0; }
.held-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); grid-template-areas: "text text" "tafel karte"; gap: 30px 24px; }
.held-text { grid-area: text; }
.held-text h1 { max-width: 19em; }
.einleitung { margin-top: 18px; max-width: 42rem; font-size: 20px; color: var(--muted); }
.held-knoepfe { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }

/* ----- Tafel mit Ablesung und Profil ----- */
.tafel { grid-area: tafel; min-width: 0; container-type: inline-size; padding: 22px 26px 14px; border-radius: var(--radius-gross); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 60px -46px rgba(16, 36, 28, .5); }
.tafel-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.tafel-titel { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.tafel-summe { font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ablesung { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ort werte"; gap: 10px 28px; align-items: start; padding-top: 16px; }
.ablesung-ort { grid-area: ort; }
.ablesung-name { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.ablesung-info { margin-top: 4px; min-height: 3.1em; font-size: 16px; line-height: 1.5; color: var(--muted); }
.ablesung-werte { grid-area: werte; display: grid; grid-template-columns: repeat(4, auto); gap: 0 22px; }
.ablesung-werte dt { font-size: 12px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ablesung-werte dd { min-width: 4.6em; font-size: 22px; font-weight: 720; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* schmale Tafel: Ort oben, Werte darunter */
@container (max-width: 860px) { .ablesung { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ort" "werte"; } }

.profil-rahmen { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto 30px; column-gap: 12px; padding-top: 30px; }
.achse-h { position: relative; }
.achse-h span { position: absolute; right: 0; transform: translateY(-50%); font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.achse-km { grid-column: 2; position: relative; }
.achse-km span { position: absolute; top: 8px; transform: translateX(-50%); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.achse-km span:first-child { transform: none; }
.achse-km span:last-child { transform: translateX(-100%); }
.profil-hinweis { margin-top: 4px; font-size: 14px; color: var(--muted); }
.nur-finger { display: none; }
@media (hover: none) { .nur-maus { display: none; } .nur-finger { display: inline; } }

/* ----- Das Profil: zwei gleiche SVGs übereinander, das obere ist bis --x aufgedeckt (gegangen).
         --x und --y (0 bis 100) setzt js/profil.js, ohne JavaScript stehen sie im HTML. ----- */
.profil { position: relative; height: clamp(170px, 22vh, 250px); container-type: size; cursor: crosshair; touch-action: pan-y; border-radius: 4px; -webkit-tap-highlight-color: transparent; }
.profil:focus-visible { outline-offset: 10px; }
.profil-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p-raster { fill: none; stroke: var(--raster); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-flaeche { fill: url(#hs-hell); }                /* helle Höhenstufen, Verläufe in index.html (Zeichenvorrat) */
.p-linie { fill: none; stroke: var(--profil-linie); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.profil-gegangen { clip-path: inset(-6px calc(100% - var(--x) * 1%) -6px -6px); }
.profil-gegangen .p-flaeche { fill: url(#hs-voll); }   /* gegangenes Stück in den kräftigen Höhenstufen */
.profil-gegangen .p-linie { stroke: var(--text); stroke-width: 2.6; }

.wegpunkte { position: absolute; inset: 0; pointer-events: none; }
.wp { position: absolute; left: calc(var(--wx) * 1%); top: calc(var(--wy) * 1%); width: 0; height: 0; }
.wp-zeichen { max-width: none; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: #fff; color: var(--wc, var(--accent)); box-shadow: 0 0 0 2px var(--wc, var(--accent)), 0 4px 10px rgba(16, 36, 28, .16); }
.wp-name { position: absolute; white-space: nowrap; font-size: 14px; font-weight: 660; line-height: 1.2; color: var(--text); }
.wp-name small { display: block; font-size: 12.5px; font-weight: 520; color: var(--muted); }
.wp-oben-links .wp-name { right: 6px; bottom: 20px; text-align: right; }
.wp-oben-rechts .wp-name { left: -8px; bottom: 22px; }
.wp-rechts .wp-name { left: 22px; top: 0; transform: translateY(-50%); }
@container (max-width: 560px) { .wp-name { display: none; } .wp-zeichen { left: -12px; top: -12px; width: 24px; height: 24px; padding: 4px; } }

.laeufer { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transform: translateX(calc(var(--x) * 1cqw)); pointer-events: none; }
.laeufer::before { content: ""; position: absolute; left: -1px; top: -12px; bottom: 0; width: 2px; background: linear-gradient(rgba(30, 91, 71, .1), rgba(30, 91, 71, .55)); }
.laeufer-punkt { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #fff, 0 4px 14px rgba(16, 36, 28, .4); transform: translateY(calc(var(--y) * 1cqh)); }

/* ----- Karte ----- */
.karte { grid-area: karte; display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 16px; border-radius: var(--radius-gross); background: var(--surface); border: 1px solid var(--border); }
.karte-svg { width: 100%; height: auto; border-radius: 18px; }
.karte figcaption { padding: 0 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.karte-daten { margin-top: 12px; }
.karte-daten div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); }
.karte-daten dt { font-weight: 650; color: var(--text); }
.karte-daten dd { text-align: right; }
.k-grund { fill: #f2f5f0; }
.k-linie { fill: none; stroke: var(--hoehenlinie); stroke-width: .7; }
.k-linie-dick { fill: none; stroke: var(--hoehenlinie-dick); stroke-width: 1.15; }
.k-bach { fill: none; stroke: var(--bach); stroke-width: 1.8; }
.k-bahn { fill: none; stroke: #34413a; stroke-width: 3.4; }
.k-bahn-weiss { fill: none; stroke: #fff; stroke-width: 1.8; stroke-dasharray: 6 6; }
.k-route { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: .1 5; opacity: .75; }
.k-route-gegangen { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.k-zeichen { fill: var(--text); }
.k-text text { font-family: var(--schrift); font-size: 10.5px; font-weight: 660; fill: var(--text); paint-order: stroke; stroke: #f2f5f0; stroke-width: 3.2px; stroke-linejoin: round; }
.k-text .k-text-leise { fill: var(--muted); font-weight: 540; }
.k-nord path { fill: var(--text); }
.k-nord text { font-family: var(--schrift); font-size: 9px; font-weight: 700; fill: var(--text); }
.k-punkt circle { fill: var(--accent); }
.k-punkt .k-punkt-hof { fill: rgba(30, 91, 71, .22); }

/* =====================================================================================
   Die Tour in Etappen
   Ruhige Fassung (ohne JavaScript, starr, niedriges Fenster): Bühne mit fertigem Profil, darunter Karten.
   Mit .tour-an: Bühne klebt rechts (am Handy oben), die Etappen laufen daneben (darunter) durch.
   ===================================================================================== */
.tour { padding: var(--abstand) 0 0; }
.tour-kopf { margin-bottom: 36px; }
.tour-kopf h2, .tour-kopf .leise { max-width: 44rem; }
.tour-kopf .leise { margin-top: 14px; }

.buehne { position: relative; height: 440px; overflow: hidden; isolation: isolate; border-radius: var(--radius-gross); background: #dbe7ee; color: var(--b-text); --b-text: #142019; --b-leise: #2c3a33; transition: color .9s; }
.buehne[data-tz="abend"], .buehne[data-tz="daemmerung"] { --b-text: #ffffff; --b-leise: #edf0f8; }
.himmel, .himmel i { position: absolute; inset: 0; }
.himmel i { opacity: 0; transition: opacity .9s ease; }
.himmel i[data-tz="frueh"]      { background: linear-gradient(#cfe0ea, #e6ecea 45%, #f5ead8 75%); }
.himmel i[data-tz="vormittag"]  { background: linear-gradient(#a9cde6, #d4e7f1 45%, #eef5f6 75%); }
.himmel i[data-tz="abend"]      { background: linear-gradient(#3b3f6b, #7a5576 42%, #d98563 68%, #f0b07a 85%); }
.himmel i[data-tz="daemmerung"] { background: linear-gradient(#4f5d8a, #85729c 42%, #e3a9a9 68%, #f6cdb6 85%); }
.himmel i[data-tz="klar"]       { background: linear-gradient(#6aa6d8, #a9cdea 45%, #e2eff7 75%); }
.himmel i[data-tz="nachmittag"] { background: linear-gradient(#b9d3e3, #dce6e4 45%, #f3e3c6 78%); }
.buehne[data-tz="frueh"] i[data-tz="frueh"], .buehne[data-tz="vormittag"] i[data-tz="vormittag"],
.buehne[data-tz="abend"] i[data-tz="abend"], .buehne[data-tz="daemmerung"] i[data-tz="daemmerung"],
.buehne[data-tz="klar"] i[data-tz="klar"], .buehne[data-tz="nachmittag"] i[data-tz="nachmittag"] { opacity: 1; }

/* Sonne: ein Kreis, der als Ganzes verschoben wird (Prozent der Bühne, gleich wie SONNE in js/etappen.js) */
.sonne-bahn { position: absolute; inset: 0; pointer-events: none; transform: translate(66%, 24%); transition: transform 1.4s cubic-bezier(.3, .7, .2, 1); }
.buehne[data-tz="frueh"] .sonne-bahn      { transform: translate(14%, 52%); }
.buehne[data-tz="vormittag"] .sonne-bahn  { transform: translate(30%, 20%); }
.buehne[data-tz="abend"] .sonne-bahn      { transform: translate(84%, 50%); }
.buehne[data-tz="daemmerung"] .sonne-bahn { transform: translate(10%, 58%); }
.buehne[data-tz="klar"] .sonne-bahn       { transform: translate(42%, 10%); }
.sonne { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; background: #fff4cf; box-shadow: 0 0 0 12px rgba(255, 244, 207, .32), 0 0 0 30px rgba(255, 244, 207, .14); transition: background .9s, box-shadow .9s; }
.buehne[data-tz="abend"] .sonne { background: #ffb26b; box-shadow: 0 0 0 12px rgba(255, 178, 107, .3), 0 0 0 30px rgba(255, 178, 107, .12); }
.buehne[data-tz="daemmerung"] .sonne { background: #ffd7bd; box-shadow: 0 0 0 12px rgba(255, 215, 189, .3), 0 0 0 30px rgba(255, 215, 189, .12); }
html.sonne-stetig .sonne-bahn { transition: none; }

.grate { position: absolute; left: 0; bottom: 0; width: 100%; height: 64%; max-width: none; }
.grat-fern { fill: rgba(38, 62, 74, .24); }
.grat-nah { fill: rgba(20, 46, 36, .4); }

.buehne-kopf { position: absolute; left: 28px; right: 28px; top: 24px; }
.uhr { font-size: clamp(38px, 4.2vw, 56px); font-weight: 740; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.uhr span { margin-right: .2em; font-size: .46em; font-weight: 650; letter-spacing: 0; }
.uhr b { font-weight: inherit; }
.buehne-ort { margin-top: 10px; font-size: 18px; font-weight: 660; }
.buehne-zaehler { margin-top: 2px; font-size: 15px; color: var(--b-leise); font-variant-numeric: tabular-nums; transition: color .9s; }

.buehne-tafel { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 46%; padding: 30px 22px 12px; border-radius: 18px; background: rgba(255, 255, 255, .94); box-shadow: 0 12px 30px rgba(16, 36, 28, .16); }
.profil-klein { height: 100%; cursor: default; touch-action: auto; }
.profil-klein .wp-name { font-size: 12.5px; }
.profil-klein .wp-zeichen { left: -12px; top: -12px; width: 24px; height: 24px; padding: 4px; }

.etappen { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; margin-top: 20px; }
.etappe { padding: 24px 24px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.etappe-marke { margin-bottom: 8px; font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.etappe h3 { margin-bottom: 10px; }
.etappe p:not(.etappe-marke) { font-size: 17px; color: var(--muted); }
.etappe-werte { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.etappe-werte dt { font-size: 12.5px; color: var(--muted); }
.etappe-werte dd { font-size: 18px; font-weight: 720; font-variant-numeric: tabular-nums; }

/* ----- klebend, breiter Bildschirm: Text links, Bühne rechts ----- */
@media (min-width: 900px) {
  html.tour-an .tour-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
  html.tour-an .buehne { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--kopf) + 20px); height: calc(100vh - var(--kopf) - 40px); height: calc(100svh - var(--kopf) - 40px); max-height: 820px; }
  html.tour-an .etappen { grid-column: 1; grid-row: 1; display: block; margin: 0; padding: 12vh 0 30vh; }
  html.tour-an .etappe { margin-bottom: 36vh; }
}
/* ----- klebend, schmaler Bildschirm: Bühne oben, Text läuft darunter durch ----- */
@media (max-width: 899px) {
  html.tour-an .buehne { position: sticky; top: var(--kopf); z-index: 2; height: 50vh; height: 50svh; margin-inline: -20px; border-radius: 0 0 22px 22px; }
  html.tour-an .etappen { display: block; margin: 0; padding: 8svh 0 22svh; position: relative; z-index: 1; }
  html.tour-an .etappe { margin-bottom: 42svh; }
}
html.tour-an .etappe { transition: border-color .4s, box-shadow .4s; }
html.tour-an .etappe:last-child { margin-bottom: 0; }
html.tour-an .etappe.ist-aktiv { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent), 0 24px 50px -32px rgba(16, 36, 28, .4); }

/* ----- Zusammenfassung und Kosten ----- */
.tour-summe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; margin-top: 56px; align-items: start; }
.summe-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.summe-zahlen li { padding: 22px 22px 20px; border-radius: var(--radius); background: var(--surface-2); }
.summe-zahlen b { display: block; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -.025em; font-weight: 720; white-space: nowrap; font-variant-numeric: tabular-nums; }
.summe-zahlen span { display: block; margin-top: 6px; font-size: 16px; color: var(--muted); }
.kosten { padding: 24px 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.kosten h3 { margin-bottom: 6px; }
.kosten-liste div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.kosten-liste dd { font-weight: 680; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kosten-liste .kosten-summe { border-bottom: 0; font-weight: 740; }
.kosten-liste .kosten-summe dd { font-weight: 760; }
.kosten .leise { margin-top: 8px; }

/* ---------- Abschnitte allgemein ---------- */
.beitraege, .touren, .ueber { padding: var(--abstand) 0 0; }
.abschnitt-kopf { max-width: 44rem; margin-bottom: 40px; }
.abschnitt-kopf .leise { margin-top: 14px; }

/* ---------- Neueste Beiträge ---------- */
.beitraege-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.beitrag-link { display: block; color: inherit; text-decoration: none; border-radius: var(--radius-gross); }
.beitrag-link .bild-platzhalter { margin-bottom: 22px; }
.beitrag-gross h3 { margin: 10px 0 12px; font-size: clamp(26px, 2.5vw, 32px); line-height: 1.14; }
.beitrag-link:hover h3, .beitrag-liste a:hover h3 { color: var(--accent); }
.anriss { max-width: 36em; color: var(--muted); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 15px; color: var(--muted); }
.thema { padding: 3px 10px; border-radius: 6px; background: var(--accent-hell); color: var(--accent); font-weight: 650; }
.beitrag-liste { border-top: 1px solid var(--border); }
.beitrag-liste li { border-bottom: 1px solid var(--border); }
.beitrag-liste a { display: block; padding: 20px 0 18px; color: inherit; text-decoration: none; }
.beitrag-liste h3 { margin: 10px 0 6px; font-size: 20px; }
.lesezeit { font-size: 15px; color: var(--muted); }

/* ---------- Touren nach Schwierigkeit ---------- */
.stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.stufe { padding: 26px 24px 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.stufe h3 { display: flex; align-items: center; gap: 12px; font-size: 24px; }
.punkte { display: inline-flex; gap: 4px; }
.punkte i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--accent); }
.punkte i.an { background: var(--accent); }
.stufe-satz { margin-top: 8px; min-height: 3.1em; font-size: 16px; line-height: 1.5; color: var(--muted); }
.tour-liste { margin-top: 14px; border-top: 1px solid var(--border); }
.tour-liste li + li { border-top: 1px solid var(--border); }
.tour-liste a { display: grid; gap: 8px; padding: 16px 0; color: inherit; text-decoration: none; }
.tl-name { font-size: 17px; font-weight: 660; line-height: 1.3; }
.tour-liste a:hover .tl-name { color: var(--accent); }
.mini { width: 100%; height: 48px; }
.mini-flaeche { fill: var(--sc, var(--profil-flaeche)); fill-opacity: .42; }
.mini-linie { fill: none; stroke: var(--sc-text, var(--accent)); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tl-werte { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Über mich ---------- */
.ueber-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ueber-text p:not(.marke) { margin-top: 16px; max-width: 38rem; color: var(--muted); }
.ueber-text h2 { max-width: 16em; }
.steckbrief { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.steckbrief dt { font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.steckbrief dd { margin-top: 2px; font-weight: 620; }

/* ---------- Newsletter und Kontakt ---------- */
.post { padding: var(--abstand) 0; background: var(--nacht); color: var(--nacht-text); }
.post-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.post-text p:not(.marke) { margin-top: 18px; color: var(--nacht-leise); max-width: 34rem; }
.post a { color: var(--nacht-akzent); }
.post a:focus-visible { outline-color: var(--nacht-akzent); }
.feed-zeile a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 640; text-underline-offset: 4px; }
.demo-meldung { display: block; font-size: 15px; color: var(--nacht-text); }
.post address { margin-top: 22px; font-style: normal; line-height: 1.7; color: var(--nacht-text); }
.formular { padding: 30px; border-radius: var(--radius); background: #fff; color: var(--text); }
.feld { margin-bottom: 16px; }
.feld label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 640; }
.feld input, .feld select { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #c3cdc6; border-radius: var(--radius-klein); background: #fff; color: var(--text); font: inherit; font-size: 17px; }
.formular .knopf { width: 100%; margin-top: 4px; }
.formular a:focus-visible, .formular button:focus-visible, .formular input:focus-visible, .formular select:focus-visible { outline-color: var(--accent); }
.formular-meldung { margin-top: 12px; font-weight: 640; }
.formular-meldung:empty { margin: 0; }
.formular .leise { margin-top: 12px; }

/* ---------- Fuß ---------- */
.fuss { position: relative; padding: 56px 0 0; background: var(--fuss-grund); color: var(--fuss-leise); font-size: 15px; }
.fuss-raster { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.fuss address { font-style: normal; }
.fuss a { color: var(--nacht-text); }
.fuss a:focus-visible { outline-color: var(--nacht-akzent); }
.fuss-logo { margin-bottom: 6px; color: #fff; font-size: 20px; font-weight: 740; }
.fuss p + p { margin-top: 10px; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 16px; }
.fuss-demo { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.fuss-zeile { width: 100%; max-width: none; margin: 0; padding: 22px 20px 26px; text-align: center; font-size: 13px; color: #7f9188; }
.fuss-zeile a { color: #a9bab1; }

/* ---------- Auftritt beim Scrollen (mittel, dynamisch) ---------- */
html.js[data-bewegung="mittel"] [data-auftritt], html.js[data-bewegung="dynamisch"] [data-auftritt] { opacity: 0; transform: translateY(22px); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .2, 1); }
html.js [data-auftritt].ist-da { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .himmel i, .sonne-bahn, .sonne, .buehne, .buehne-zaehler, html.tour-an .etappe { transition: none !important; }
}
html[data-bewegung="starr"] .himmel i, html[data-bewegung="starr"] .sonne-bahn { transition: none; }

/* ---------- Schmal ---------- */
@media (max-width: 1040px) {
  .held-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "tafel" "karte"; }
  .karte { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: end; gap: 16px 20px; }
}
@media (max-width: 980px) {
  .menue { display: none; }
  .kopf .knopf-klein { margin-left: auto; }
  .beitraege-raster, .ueber-raster, .post-raster, .tour-summe { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .stufen { grid-template-columns: minmax(0, 1fr); }
  .stufe-satz { min-height: 0; }
  .ueber-bild { max-width: 420px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .einleitung { font-size: 18px; }
  .tafel { margin-inline: -8px; padding: 18px 16px 12px; border-radius: var(--radius); }
  .tafel-summe { font-size: 15px; }
  .ablesung-name { font-size: 20px; }
  .ablesung-info { font-size: 15px; min-height: 4.5em; }
  .ablesung-werte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  .ablesung-werte dd { font-size: 20px; }
  .profil-rahmen { grid-template-columns: 46px minmax(0, 1fr); column-gap: 8px; padding-top: 18px; }
  .achse-h span, .achse-km span { font-size: 12px; }
  .profil { height: 190px; }
  .karte { display: flex; }
  .buehne { height: 380px; }
  .buehne-kopf { left: 20px; right: 20px; top: 16px; }
  .uhr { font-size: 34px; }
  .buehne-ort { margin-top: 6px; font-size: 15px; }
  .buehne-zaehler { font-size: 13px; }
  .buehne-tafel { left: 10px; right: 10px; bottom: 10px; height: 48%; padding: 22px 12px 8px; }
  .summe-zahlen li { padding: 18px 16px; }
  .summe-zahlen b { font-size: 26px; }
  .kosten { padding: 20px 18px; }
  .steckbrief { grid-template-columns: minmax(0, 1fr); }
  .ueber-text h2 { font-size: min(30px, 7vw); overflow-wrap: anywhere; }   /* "Vermessungstechnikerin" passt auch bei 320 px */
  .formular { padding: 22px 18px; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================================
   Farbwelt: Bergfarben (Werte und Kontraste in tokens.css)
   Aufbau, Texte, Schrift und Effekte bleiben, nur Flächen, Bänder, Schilder und Diagrammfarben kommen dazu.
   Abschnitte von oben nach unten: Enzian hell · Almwiese hell · Papier · Alpenglühen hell · Fels hell · Enzian tief · Tannengrün tief.
   Jeder Abschnitt beginnt mit einem 8 px breiten Band in seiner kräftigen Farbe.
   Höhenstufen: Tal Wiesengrün, Wald dunkelgrün, Fels warmgrau, Gipfel Orange (Profil, Karte, Etappen, Wegpunkte).
   Schwierigkeit: leicht Gelb, mittel Orange, schwer Rot. Knöpfe und Links bleiben Tannengrün.
   ===================================================================================== */

/* ----- Farbband unter dem Kopf und über dem Fuß ----- */
.kopf::after, .fuss::before { content: ""; position: absolute; left: 0; right: 0; height: 5px; background: var(--hoehenband); pointer-events: none; }
.kopf::after { bottom: -1px; }
.fuss::before { top: 0; }

/* ----- Schild: Abschnittsmarke wie ein Wegweiser, mit Spitze ----- */
.marke { display: block; width: fit-content; max-width: 100%; margin-bottom: 18px; padding: 7px 26px 7px 13px; font-size: 13.5px; line-height: 1.25; background: var(--m-fill, var(--accent)); color: var(--m-text, var(--on-accent)); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); }
.held .marke { --m-fill: var(--enzian); --m-text: #fff; }
.tour .marke { --m-fill: var(--alpgluehen); --m-text: var(--on-alpgluehen); }
.beitraege .marke { --m-fill: var(--gestein); --m-text: #fff; }
.touren .marke { --m-fill: var(--almwiese); --m-text: var(--text); }
.ueber .marke { --m-fill: var(--stufe-wald); --m-text: #fff; }
.post .marke { --m-fill: var(--almwiese); --m-text: var(--text); }

/* ----- Erster Bildschirm: Enzianfläche, Zahlen in je einer Bergfarbe ----- */
.held { background: var(--enzian-hell); padding-bottom: clamp(44px, 6vw, 76px); }
.held .einleitung { color: #38463f; }                 /* 8,3 : 1 auf --enzian-hell */
.tafel { border-color: #c9d6f0; }
.tafel-titel { color: var(--enzian); }
.ablesung-werte div:nth-child(1) dd { color: var(--alpgluehen-text); }   /* Höhe */
.ablesung-werte div:nth-child(2) dd { color: var(--enzian); }            /* Strecke */
.ablesung-werte div:nth-child(3) dd { color: var(--gestein-text); }      /* Gehzeit */
.ablesung-werte div:nth-child(4) dd { color: var(--stufe-wald); }        /* Hinauf */
.karte { border-color: #c9d6f0; }

/* Höhenstufen als Legende unter dem Profil */
.stufen-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13.5px; line-height: 1.3; color: var(--muted); }
.stufen-legende li { display: inline-flex; align-items: center; gap: 7px; }
.stufen-legende i { width: 14px; height: 14px; border-radius: 4px; background: var(--c); }
.stufen-legende .l-tal { --c: var(--stufe-tal); }
.stufen-legende .l-wald { --c: var(--stufe-wald); }
.stufen-legende .l-fels { --c: var(--stufe-fels); }
.stufen-legende .l-gipfel { --c: var(--stufe-gipfel); }

/* Wegpunkte: Zeichen und Ring in der Farbe ihrer Höhenstufe */
.wp[data-wp="0"], .wp[data-wp="5"] { --wc: var(--enzian); }      /* Bahnhof */
.wp[data-wp="1"] { --wc: var(--stufe-tal-text); }                /* Brunnen */
.wp[data-wp="2"] { --wc: var(--gestein-text); }                  /* Hütte */
.wp[data-wp="3"] { --wc: var(--stufe-fels-text); }               /* Scharte */
.wp[data-wp="4"] { --wc: var(--alpgluehen-text); }               /* Gipfel */

/* ----- Tour in Etappen: Almwiesenfläche, jede Etappe in der Farbe ihrer Höhenstufe ----- */
.tour { background: var(--almwiese-hell); border-top: 8px solid var(--almwiese); padding-bottom: var(--abstand); }
.etappe { border-top: 6px solid var(--ec, var(--accent)); }
.etappe:nth-child(1) { --ec: var(--enzian); --ec-text: var(--enzian); }                         /* Anreise */
.etappe:nth-child(2) { --ec: var(--stufe-tal); --ec-text: var(--stufe-tal-text); }              /* bis Brunnen */
.etappe:nth-child(3) { --ec: var(--stufe-wald); --ec-text: var(--stufe-wald); }                 /* bis Hütte */
.etappe:nth-child(4) { --ec: var(--stufe-fels); --ec-text: var(--stufe-fels-text); }            /* bis Scharte */
.etappe:nth-child(5) { --ec: var(--stufe-gipfel); --ec-text: var(--alpgluehen-text); }          /* Gipfel */
.etappe:nth-child(6) { --ec: var(--gestein); --ec-text: var(--gestein-text); }                  /* Abstieg */
.etappe-marke { color: var(--ec-text, var(--accent)); }
html.tour-an .etappe.ist-aktiv { border-color: var(--ec, var(--accent)); box-shadow: inset 5px 0 0 var(--ec, var(--accent)), 0 24px 50px -32px rgba(16, 36, 28, .4); }
.summe-zahlen li:nth-child(1) { background: var(--enzian); color: #fff; }
.summe-zahlen li:nth-child(2) { background: var(--gestein); color: #fff; }
.summe-zahlen li:nth-child(3) { background: var(--almwiese); color: var(--text); }
.summe-zahlen li:nth-child(4) { background: var(--accent); color: #fff; }
.summe-zahlen span { color: inherit; }
.kosten { border-top: 6px solid var(--alpgluehen); }
.kosten-liste .kosten-summe dd { color: var(--alpgluehen-text); }

/* ----- Neueste Beiträge: Papierweiß, Themen in je einer Farbe ----- */
.beitraege { background: var(--surface); border-top: 8px solid var(--gestein); padding-bottom: var(--abstand); }
.beitrag-gross .bild-platzhalter {          /* Morgenlicht auf dem Grat */
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%),
    repeating-radial-gradient(ellipse at 72% 115%, rgba(255, 255, 255, .38) 0 1px, transparent 1px 20px),
    linear-gradient(165deg, #ffdca9 0%, #f9a96c 48%, #e46a5c 100%);
}
.beitrag-liste li { border-left: 6px solid var(--tf, var(--accent)); padding-left: 18px; }
.beitrag-liste li:nth-child(1) { --tf: var(--enzian); --th: var(--enzian-hell); --tt: var(--enzian); }
.beitrag-liste li:nth-child(2) { --tf: var(--alpgluehen); --th: var(--alpgluehen-hell); --tt: var(--alpgluehen-text); }
.beitrag-liste li:nth-child(3) { --tf: var(--almwiese); --th: var(--almwiese-hell); --tt: var(--almwiese-text); }
.beitrag-liste li:nth-child(4) { --tf: var(--gestein); --th: var(--gestein-hell); --tt: var(--gestein-text); }
.thema { background: var(--th, var(--accent-hell)); color: var(--tt, var(--accent)); }

/* ----- Touren nach Schwierigkeit: Alpenglühenfläche, Kopfband je Stufe ----- */
.touren { background: var(--alpgluehen-hell); border-top: 8px solid var(--alpgluehen); padding-bottom: var(--abstand); }
.stufe { --sc: var(--leicht); --sc-text: var(--leicht-text); --sc-on: var(--text); padding-top: 0; overflow: hidden; }
.stufe:nth-child(2) { --sc: var(--mittel); --sc-text: var(--mittel-text); --sc-on: var(--on-alpgluehen); }
.stufe:nth-child(3) { --sc: var(--schwer); --sc-text: var(--schwer-text); --sc-on: #fff; }
.stufe h3 { margin: 0 -24px; padding: 17px 24px; background: var(--sc); color: var(--sc-on); }
.stufe-satz { margin-top: 16px; }
.punkte i { border-color: currentColor; }
.punkte i.an { background: currentColor; }
.tour-liste a:hover .tl-name { color: var(--sc-text); }

/* ----- Über mich: Felsfläche ----- */
.ueber { background: var(--fels-flaeche); border-top: 8px solid var(--stufe-wald); padding-bottom: var(--abstand); }
.ueber-bild .bild-platzhalter {
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%),
    repeating-radial-gradient(ellipse at 72% 115%, rgba(255, 255, 255, .4) 0 1px, transparent 1px 20px),
    linear-gradient(165deg, #dbe6fb 0%, #93b2ea 55%, #5079cc 100%);
}
.steckbrief { border-top-color: #cdc4b5; }
.steckbrief > div { padding-left: 14px; border-left: 5px solid var(--sb, var(--accent)); }
.steckbrief > div:nth-child(1) { --sb: var(--enzian); }
.steckbrief > div:nth-child(2) { --sb: var(--gestein); }
.steckbrief > div:nth-child(3) { --sb: var(--alpgluehen); }
.steckbrief > div:nth-child(4) { --sb: var(--stufe-tal); }

/* ----- Newsletter: Enzian tief ----- */
.post { border-top: 8px solid var(--almwiese); }
.formular { border-top: 6px solid var(--alpgluehen); }