/* ============================================================
   Sport Alm Bayrischzell, Hauptseite, Entwurf
   Eine einzige Stilvorlage. Keine Anfrage an Google, Schrift liegt lokal.

   RICHTUNG (Michaels Ansage 05.09.2026):
   Auf Basis von Lisas Shop-Layout, damit Vater und Tochter wie ein Betrieb
   auftreten. Dazu ausdruecklich MEHR schwarze Sektionen als bei Lisa,
   Fuss schwarz mit weisser Schrift, Kopf ebenfalls schwarz.

   BELEGT an sportalmshop-2026.kundenprojekt-aktuell.de/sportalm-shop,
   im Browser gemessen am 05.09.2026:
     Schrift        Inter, Grundgroesse 16 px, Gewicht 400
     Textfarbe      #262626   (derselbe Wert wie salomon.com)
     Flaechen       #ffffff, #fafafa, #f5f5f5, #000000
     H1             40 px, Gewicht 700, Grossbuchstaben, Laufweite -0,4 px
     Sektionstitel  28 px, Gewicht 700, Grossbuchstaben, Laufweite -0,28 px
     Knoepfe        Radius 8 px, schwarz gefuellt, 14 px, Gewicht 600
     Servicezeile   schwarz, 13 px, 39 px hoch
     Container      1177 px
   Die Laufweite ist NEGATIV. Das ist kein Tippfehler, grosse Versalien
   brauchen weniger Abstand, nicht mehr.

   UNTERSCHIED ZU LISA, bewusst:
   Lisa hat genau eine schwarze Bahn (den Groesseneinstieg), rund 20 Prozent
   der Flaeche. Hier sind es sechs: Servicezeile, Kopf, die Textseite des
   Heros, die Radwahl, der Vertrauensblock und der Fuss.

   Inter ist ein Variable Font, 100 bis 900 in einer Datei mit 48 KB.
   Anders als Nova Round vorher gibt es hier also echtes Fett, und die
   Hierarchie kommt wieder ueber das Gewicht statt ueber Grossbuchstaben
   allein.

   GRUEN, die eine Abweichung von Lisa:
   Lisa hat keine Signalfarbe, dort ist Schwarz der Knopf. Der Verleih ist
   aber ein anderes Geschaeft als der Schuhverkauf, und "Rad reservieren"
   ist die eine Handlung, die auffallen muss. Gemessen: Gruen hat auf Weiss
   nur 1,9:1 und ist dort als Textfarbe unbrauchbar. Gruen ist deshalb
   IMMER Flaeche mit schwarzer Schrift (10,7:1), auf schwarzem Grund darf
   es auch Text sein.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url(fonts/inter.woff2) format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --weiss:   #ffffff;
  --nebel:   #fafafa;
  --schnee:  #f5f5f5;
  --kante:   #e5e5e5;
  --kante-stark: #d4d4d4;

  --schwarz: #000000;
  --tinte:   #262626;   /* Lisas und Salomons Textfarbe */
  --grau:    #525252;   /* auf Weiss 7,9:1, auf #fafafa 7,5:1 */

  --auf-dunkel:   #ffffff;
  --leise-dunkel: #a3a3a3;   /* auf Schwarz 8,6:1 */
  --linie-dunkel: #333333;
  --linie-dunkel-stark: #525252;

  --signal:      #9dcf3f;
  --signal-tief: #86b62d;

  --breite: 1180px;
  --radius: 8px;

  --luft-s: 12px;
  --luft-m: 24px;
  --luft-l: 48px;
  --luft-xl: 80px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 2px; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.12; }

/* Schreibweisen, die Grossbuchstaben nicht vertragen. "eBike" wuerde sonst
   zu "EBIKE", und das ist die falsche Marken- und Fachschreibweise.
   Gilt weiter, auch mit Inter: die Ueberschriften sind nach wie vor Versalien. */
.schreibweise { text-transform: none; }

/* Lisas Ueberschriftenmuster: Grossbuchstaben, Gewicht 700, enge Laufweite */
.titel-gross, .hero h1, .kopfbahn h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.bahn__titel {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: .4em;
}

.mitte { width: min(100% - 40px, var(--breite)); margin-inline: auto; }
[id] { scroll-margin-top: 120px; }

.klein { font-size: .82rem; color: var(--grau); }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--signal); color: var(--schwarz); padding: 12px 20px; font-weight: 600;
}
.sprung:focus { left: 12px; top: 12px; }

.liste-blank { list-style: none; margin: 0; padding: 0; }
.liste-blank li { margin-bottom: .4em; }
.liste-reihe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--luft-m); }

.kicker {
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .78rem; font-weight: 600; color: var(--grau);
  margin-bottom: .9em;
}

/* ---------- Entwurfsband ---------- */
.entwurfsband {
  background: var(--schnee); color: var(--grau);
  font-size: .78rem; text-align: center; padding: 8px 16px;
}
body.kundenmodus .entwurfsband { display: none; }

/* ---------- 1. schwarze Zone: Servicezeile ---------- */
.servicezeile {
  background: var(--schwarz); color: var(--auf-dunkel);
  font-size: .81rem; min-height: 39px;
}
.servicezeile__inhalt {
  display: flex; flex-wrap: wrap; gap: var(--luft-s) var(--luft-m);
  align-items: center; justify-content: space-between;
  min-height: 39px; padding-block: 7px;
}
.servicezeile p { margin: 0; }
.servicezeile a { color: var(--auf-dunkel); text-decoration: none; }
.servicezeile a:hover { text-decoration: underline; }
.servicezeile__rechts { display: flex; gap: 10px; align-items: center; }
.trenner { color: #8a8a8a; }  /* Linienfarbe war als Zeichen zu schwach (2,7:1) */
.servicezeile__status strong { font-weight: 600; }

.punkt {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; vertical-align: baseline;
}
.punkt--offen       { background: var(--signal); box-shadow: 0 0 0 3px rgba(157,207,63,.25); }
.punkt--geschlossen { background: #737373; }
.punkt--wartet      { background: #737373; }

/* ---------- 2. schwarze Zone: Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie-dunkel);
  color: var(--auf-dunkel);
}
.kopf__inhalt {
  display: flex; align-items: center; gap: var(--luft-m);
  min-height: 70px; padding-block: 10px;
}
.kopf__logo { flex: 0 0 auto; }
.kopf__logo img { width: 158px; height: auto; }

.menue { margin-left: auto; }
.menue ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.menue a {
  display: block; padding: 9px 13px;
  color: var(--auf-dunkel); text-decoration: none;
  font-size: .84rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  border-radius: 4px;
}
.menue a:hover { background: #1a1a1a; }
.menue a[aria-current] { position: relative; }
.menue a[aria-current]::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; background: var(--signal);
}
.menueknopf { display: none; }

/* ---------- Knoepfe: Lisas Muster, Radius 8 px ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; border-radius: var(--radius);
  text-decoration: none; font-size: .88rem; font-weight: 600; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.knopf--signal { background: var(--signal); color: var(--schwarz); }
.knopf--signal:hover { background: var(--signal-tief); }

.knopf--tinte { background: var(--schwarz); color: var(--auf-dunkel); }
.knopf--tinte:hover { background: #262626; }

.knopf--weiss { background: var(--weiss); color: var(--schwarz); }
.knopf--weiss:hover { background: var(--schnee); }

.knopf--linie { border-color: var(--kante-stark); color: var(--tinte); background: var(--weiss); }
.knopf--linie:hover { border-color: var(--schwarz); }

.knopf--linie-hell { border-color: var(--linie-dunkel-stark); color: var(--auf-dunkel); }
.knopf--linie-hell:hover { border-color: var(--auf-dunkel); background: #1a1a1a; }

.knopf--linie-dunkel { border-color: rgba(0,0,0,.45); color: var(--schwarz); }
.knopf--linie-dunkel:hover { border-color: var(--schwarz); background: rgba(0,0,0,.07); }

.knopf--still { color: var(--leise-dunkel); border-color: var(--linie-dunkel); }
.knopf--still:hover { color: var(--auf-dunkel); border-color: var(--linie-dunkel-stark); }

.kopf__cta { padding: 10px 18px; font-size: .82rem; flex: 0 0 auto; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- 3. schwarze Zone: Hero, geteilt wie bei Lisa ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--schwarz);
  color: var(--auf-dunkel);
}
.hero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--luft-xl) var(--luft-l) var(--luft-xl)
           max(20px, calc((100vw - var(--breite)) / 2));
}
.hero__text .kicker { color: var(--leise-dunkel); }
.hero h1 { max-width: 15ch; margin-bottom: .45em; }
.hero__unterzeile {
  max-width: 42ch; color: var(--leise-dunkel); font-size: 1rem;
  margin-bottom: var(--luft-m);
}
.hero__bild { position: relative; background: #111; min-height: 420px; }
/* Solange nur Sommerfotos vorliegen, die Winterseite aber Schnee verspricht,
   wird der Widerspruch benannt statt kaschiert. Faellt weg, sobald ein
   Winterbild da ist. */
.hero__bild[data-fehlt]::after {
  content: attr(data-fehlt);
  position: absolute; left: 0; bottom: 0;
  background: rgba(0,0,0,.82); color: #d4d4d4;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  padding: 8px 14px; border-top-right-radius: var(--radius);
}
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }

/* ---------- Kopfbahn der Unterseiten, ebenfalls schwarz ---------- */
.kopfbahn {
  background: var(--schwarz); color: var(--auf-dunkel);
  padding-block: var(--luft-l);
}
.kopfbahn .kicker { color: var(--leise-dunkel); }
.kopfbahn h1 { max-width: none; }
.kopfbahn__unterzeile { max-width: none; color: var(--leise-dunkel); margin-bottom: var(--luft-m); }
.brotkrume { font-size: .8rem; color: var(--leise-dunkel); margin-bottom: var(--luft-m); }
.brotkrume a:hover { color: var(--auf-dunkel); }

/* ---------- Bahnen ---------- */
.bahn { padding-block: var(--luft-xl); }
.bahn--schmal { padding-block: var(--luft-l); }
.bahn--nebel { background: var(--nebel); }
.bahn--schnee { background: var(--schnee); }

/* schwarze Anker-Bahn */
.bahn--dunkel { background: var(--schwarz); color: var(--auf-dunkel); }
/* Zwei schwarze Bahnen hintereinander verschmelzen sonst zu einer Flaeche
   mit einem seltsamen Loch aus doppeltem Innenabstand. Eine feine Linie
   trennt sie, ohne die dunkle Wirkung zu brechen. */
.bahn--dunkel + .bahn--dunkel { border-top: 1px solid var(--linie-dunkel); }
.bahn--dunkel .bahn__vorspann,
.bahn--dunkel .klein { color: var(--leise-dunkel); }
.bahn--dunkel .kicker { color: var(--leise-dunkel); }

.bahn--signal { background: var(--signal); color: var(--schwarz); padding-block: var(--luft-l); }
.bahn--signal p { color: #16200a; }

.bahn__vorspann { color: var(--grau); max-width: none; }
.bahn__kopf {
  display: flex; flex-wrap: wrap; gap: var(--luft-m);
  align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--luft-m);
}
/* Lisas "Alle Schuhe" rechts neben der Ueberschrift */
.bahn__mehr {
  font-size: .84rem; font-weight: 600; color: var(--tinte);
  text-underline-offset: 5px;
}
.bahn--dunkel .bahn__mehr { color: var(--auf-dunkel); }
.schmalspalte { max-width: none; }

/* ---------- Saisonband ---------- */
.saisonband { background: var(--schwarz); color: var(--auf-dunkel); border-bottom: 1px solid var(--linie-dunkel); }
.saisonband .saisonband__saison, .saisonband .saisonband__hinweis { color: var(--leise-dunkel); }
.saisonband .saisonband__saison strong { color: var(--auf-dunkel); }
.saisonband__inhalt {
  display: flex; flex-wrap: wrap; gap: var(--luft-s) var(--luft-l);
  align-items: center; justify-content: space-between;
}
.saisonband p { margin: 0; font-size: .92rem; }
.saisonband__jetzt strong { font-weight: 600; }
.saisonband__saison strong { font-weight: 600; }

/* ---------- Newsticker ----------
   Die Live-Seite hat schon einen: jQuery "LatestNews", 80 px hoch, weiss,
   mit rotierenden Meldungen ("Fair Preis = -15%", "auf Outdoor Schuhe").
   Michaels Ansage: denselben Gedanken, aber gross.

   Hier ohne jQuery, reines CSS plus ein paar Zeilen in demo.js. Die
   Meldungen stehen als Liste im HTML und wechseln. Ohne JavaScript sieht
   man die erste Meldung, das ist der wichtige Teil.

   Gepflegt wird spaeter eine Datendatei mit dieser Liste. Wer sie aendert,
   aendert die Seite, ohne Code anzufassen. */
.ticker { background: var(--schwarz); color: var(--auf-dunkel); padding-block: var(--luft-l); overflow: hidden; }
.ticker__kopf {
  display: flex; flex-wrap: wrap; gap: var(--luft-s) var(--luft-m);
  align-items: center; justify-content: space-between; margin-bottom: var(--luft-m);
}
.ticker__marke {
  display: inline-flex; align-items: center; gap: 9px;
  text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700;
  color: var(--signal); margin: 0;
}
.ticker__marke::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 3px rgba(157,207,63,.25);
}
.ticker__stand { font-size: .78rem; color: var(--leise-dunkel); margin: 0; }

/* Die Meldungen liegen uebereinander, nur die aktive ist sichtbar.
   Feste Mindesthoehe, damit beim Wechsel nichts springt. */
/* Die Meldungen liegen im selben Rasterfeld uebereinander. So richtet sich
   die Hoehe nach der laengsten Meldung, ohne feste Reserve. Seit 06.10.2026
   ueber die volle Inhaltsbreite (Michaels Wunsch), vorher auf 26 Zeichen
   begrenzt, dann brach eine kurze Meldung schon nach der halben Breite um. */
.ticker__lauf { position: relative; display: grid; }
.ticker__meldung {
  grid-area: 1 / 1; position: relative;
  font-size: clamp(1.25rem, 2.6vw, 1.95rem); font-weight: 700;
  line-height: 1.22; max-width: none; margin: 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.ticker__meldung[data-aktiv] { opacity: 1; transform: none; pointer-events: auto; }
.ticker__meldung a { color: var(--signal); text-decoration-thickness: 2px; }
/* Ohne JavaScript ist keine Meldung als aktiv markiert. Dann zeigt die
   erste sich selbst, statt dass der Block leer bleibt. */
.ticker__lauf:not([data-laeuft]) .ticker__meldung:first-child { opacity: 1; transform: none; }

.ticker__punkte { display: flex; gap: 7px; margin-top: var(--luft-m); }
.ticker__punkt {
  width: 26px; height: 3px; border-radius: 2px;
  background: var(--linie-dunkel-stark); border: 0; padding: 0; cursor: pointer;
  transition: background .2s ease;
}
.ticker__punkt[data-aktiv] { background: var(--signal); }

.ticker__pflege {
  margin-top: var(--luft-m); font-size: .74rem; color: #6b6b6b;
  border-top: 1px solid var(--linie-dunkel); padding-top: var(--luft-s);
}

/* ---------- Fotokacheln ---------- */
.kacheln {
  display: grid; gap: var(--luft-s);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.kachel {
  position: relative; display: flex; flex-direction: column;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius); overflow: hidden;
  background: var(--schwarz);
  text-decoration: none; color: var(--weiss);
  padding: var(--luft-m);
}
.kachel__bild { position: absolute; inset: 0; }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.kachel:hover .kachel__bild img { transform: scale(1.03); }
.kachel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.66) 0%, rgba(0,0,0,.14) 28%, rgba(0,0,0,.10) 44%,
    rgba(0,0,0,.62) 78%, rgba(0,0,0,.88) 100%);
}
.kachel > *:not(.kachel__bild) { position: relative; z-index: 1; }
.kachel__marke {
  text-transform: uppercase; letter-spacing: .12em; font-size: .68rem;
  font-weight: 600; color: rgba(255,255,255,.85); margin-bottom: 6px;
}
.kachel__titel {
  font-size: 1.05rem; font-weight: 700; margin: 0;
  text-transform: uppercase; letter-spacing: -0.005em;
}
.kachel__preis { margin-top: auto; font-size: .88rem; color: rgba(255,255,255,.92); }
.kachel__preis strong { font-weight: 700; font-size: 1.05rem; }
.kachel__pfeil { margin-top: 8px; font-size: .84rem; font-weight: 600; }
.kachel__pfeil::after { content: ' →'; }

.kachel--ohnefoto { background: #111; }
.kachel--ohnefoto::after { background: none; }
.kachel--ohnefoto .kachel__fehlt {
  position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(135deg, #171717 0 12px, #121212 12px 24px);
  /* Oben rechts, nicht unten: unten stehen Preiszeile und Verweis, dort
     ueberlappt der Hinweis mit dem Inhalt. */
  display: flex; align-items: flex-start; justify-content: flex-end;
  color: #4d4d4d; font-size: .7rem; text-align: right; padding: 14px; line-height: 1.3;
}

/* ---------- 4. schwarze Zone: Radwahl ----------
   Das Gegenstueck zu Lisas Groesseneinstieg. Dort waehlt man die Schuhgroesse
   und sieht, was lieferbar ist. Hier waehlt man den Radtyp und sieht den
   Tagespreis. Gleiche Idee, gleiche Optik, andere Sache. */
.radwahl__fuss { margin-top: var(--luft-m); }
.radwahl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--luft-m); }
.radwahl__knopf {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 132px; padding: 12px 16px;
  background: #141414; border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius);
  color: var(--auf-dunkel); text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.radwahl__knopf:hover { border-color: var(--signal); background: #1c1c1c; }
.radwahl__name { font-size: .92rem; font-weight: 700; }
.radwahl__preis { font-size: .78rem; color: var(--leise-dunkel); margin-top: 2px; }
.radwahl__preis strong { color: var(--signal); font-weight: 700; }

/* ---------- Schneebericht ----------
   Aufbau-Vorschau. Die echten Beitraege laufen spaeter automatisch von der
   Facebook-Seite ein, deshalb sind die Bildflaechen hier bewusst markiert
   und nicht mit echten Fotos gefuellt. Sonst entsteht der Eindruck, der
   Import laufe schon. */
.vorschauhinweis {
  background: var(--schnee); border-left: 3px solid var(--signal);
  padding: 12px 16px; font-size: .86rem; color: var(--grau);
  margin-bottom: var(--luft-m); border-radius: 0 var(--radius) var(--radius) 0;
}
.berichte { display: grid; gap: var(--luft-m); }
.bericht {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--luft-m);
  border: 1px solid var(--kante); border-radius: var(--radius);
  overflow: hidden; background: var(--weiss);
}
.bericht--verweis { grid-template-columns: 1fr; border-left: 3px solid var(--kante-stark); }
/* Bildraster der Schneeberichte.
   Die Aufteilung richtet sich nach der Zahl der Bilder, sonst bleiben
   Luecken: Ein Raster fuer drei Bilder mit nur zweien besetzt zeigt eine
   graue Flaeche. */
/* align-self: start, sonst streckt sich der Bilderbereich auf die Hoehe
   der Textspalte und unter den Fotos bleibt eine graue Flaeche stehen. */
.bericht__bilder { display: grid; gap: 2px; background: var(--kante); align-self: start; }
/* Feste Zeilenhoehen statt Seitenverhaeltnis am einzelnen Bild.
   Sonst fuellen die Schaltflaechen ihre Rasterzelle nicht aus und es
   bleiben graue Luecken zwischen den Fotos. */
.bericht__bilder--1 { grid-template-columns: 1fr; grid-auto-rows: 300px; }
.bericht__bilder--2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
.bericht__bilder--3 { grid-template-columns: 1fr 1fr; grid-template-rows: 155px 155px; }
.bericht__bilder--3 > :first-child { grid-row: span 2; }

/* display: block ist noetig, nicht Kosmetik: Ein <button> ohne gesetztes
   display wird teils als ersetztes Element behandelt, dann rendert der
   Browser ::before nicht und die unscharfe Fuellung fehlt ersatzlos. */
.bericht__bild { display: block; position: relative; overflow: hidden; min-height: 92px; }

/*
 * Bildzuschnitt im Raster.
 *
 * Hannes fotografiert gemischt: 68 Prozent quer (meist 16:9), 20 Prozent
 * hochkant (Handy, 9:16), 10 Prozent quadratisch. Im Raster wird deshalb
 * formatfuellend zugeschnitten, damit die Kacheln gleich aussehen. Das
 * Motiv geht dabei nicht verloren: Ein Klick zeigt jedes Bild vollstaendig.
 *
 * Ein Versuch mit unscharfer Randfuellung wurde verworfen, weil er sich in
 * der Kachel nicht zuverlaessig darstellen liess.
 */
.bericht__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Die Schaltflaeche fuellt ihre Rasterzelle vollstaendig aus. */
.bericht__bild { width: 100%; height: 100%; }

/* Hinweis auf weitere Fotos als Auflage, nicht als eigene Kachel. */
.bericht__bild--mehr::after {
  content: attr(data-mehr);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.52); color: #fff;
  font-size: 1.1rem; font-weight: 700; letter-spacing: .02em;
}
.bericht__platzhalter {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px; padding: 10px; text-align: center;
  background: repeating-linear-gradient(135deg, #ededed 0 10px, #e6e6e6 10px 20px);
  color: #8a8a8a; font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.bericht__text { padding: var(--luft-m); }
.bericht__datum {
  font-size: .74rem; font-weight: 600; color: var(--grau);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5em;
}
.bericht__titel {
  font-size: 1.05rem; font-weight: 700; margin-bottom: .5em;
  text-transform: uppercase; letter-spacing: -0.005em;
}
.bericht__text p { font-size: .92rem; color: var(--grau); }
.bericht__quelle { font-size: .76rem !important; color: #8a8a8a !important; margin-top: 1em; }

@media (max-width: 760px) {
  .bericht { grid-template-columns: 1fr; }
  .bericht__bilder :first-child { grid-row: auto; }
}

/* ---------- Tabellen ---------- */
.tabellenrahmen {
  border: 1px solid var(--kante); border-radius: var(--radius);
  overflow-x: auto; background: var(--weiss);
  /*
   * Luft nach oben. Michaels Hinweis vom 22.09.2026 zur Langlauf-Seite:
   * Dort klebte die Tabelle am Einleitungssatz darueber.
   *
   * Der Abstand fehlte nur da, wo keine Gruppenueberschrift dazwischen
   * steht. Die bringt ihren eigenen Abstand mit, deshalb fiel es auf der
   * Skiverleih-Seite nie auf. Betroffen waren vier Seiten: Langlauf,
   * Saisonmiete, Skiservice und Ski kaufen, dazu die erste Tabelle auf der
   * Skitouren-Seite.
   */
  margin-top: var(--luft-m);
}

/* Steht eine Gruppenueberschrift unmittelbar davor, gilt deren Abstand.
   Sonst stuenden beide uebereinander und die Tabelle rutschte zu weit weg. */
.preisgruppe + .tabellenrahmen { margin-top: 0; }
.preise { width: 100%; border-collapse: collapse; font-size: .9rem; }
.preise th, .preise td { padding: 13px 16px; text-align: right; }
.preise th[scope="row"], .preise thead th:first-child { text-align: left; }
.preise thead th {
  font-weight: 600; color: var(--grau);
  text-transform: uppercase; letter-spacing: .06em; font-size: .68rem;
  border-bottom: 1px solid var(--kante-stark); white-space: nowrap;
}
.preise tbody tr + tr { border-top: 1px solid var(--kante); }

/*
 * Zeilenstreifen. Michaels Wunsch vom 22.09.2026, und der Grund ist
 * handfest: Die Verleihtabellen haben acht Spalten. Wer bei "Allround" in
 * der Zeile startet und den Preis fuer vier Tage sucht, verliert auf dem
 * Weg nach rechts die Spur. Ein leiser Wechsel im Hintergrund haelt das
 * Auge auf der Zeile.
 *
 * Bewusst sehr schwach (#fbfbfb auf Weiss). Kraeftiger gestreifte Tabellen
 * sehen nach Tabellenkalkulation aus, und die Zahlen sollen ruhig stehen.
 *
 * Die Zwischenueberschriften zaehlen beim nth-child mit und koennen das
 * Muster verschieben. Das faellt nicht auf, weil sie ohnehin eine eigene
 * graue Flaeche haben und als Trenner wirken, hinter dem das Auge neu
 * ansetzt.
 */
.preise tbody tr:nth-child(even) { background: #fbfbfb; }

/*
 * Streifen in der Farbe der jeweiligen Liste.
 *
 * Michaels Hinweis vom 22.09.2026 mit dem Flyer: Dort trennt Farbe die
 * Kategorien, Alpin gelb, Langlauf braun, Touren blau, Zubehoer grau. Auf
 * der Webseite steht jede Kategorie in einer eigenen Tabelle, und die Farbe
 * dazu lag bisher nur als schmaler Strich an der Ueberschrift. Damit war der
 * Zusammenhang beim Scrollen weg, sobald die Ueberschrift aus dem Bild war.
 *
 * Die Farbe kommt aus der Datenbank und wird als --gruppe am Rahmen gesetzt,
 * nicht hier fest verdrahtet. So bekommt jede neue Liste ihre Faerbung
 * automatisch, und Hannes kann sie im Backend aendern.
 *
 * 8 Prozent Farbe auf Weiss. Mehr sieht nach buntem Papier aus, weniger
 * waere nicht mehr zuzuordnen. Kann der Browser color-mix nicht (alle
 * gaengigen koennen es seit 2023), greift die Regel einfach nicht und es
 * bleibt beim neutralen Streifen darueber.
 */
.tabellenrahmen[style*="--gruppe"] .preise tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--gruppe) 8%, #fff);
}

/* Der Kopf der Tabelle traegt die Farbe etwas kraeftiger, damit die Liste
   schon vor der ersten Zeile erkennbar ist. */
.tabellenrahmen[style*="--gruppe"] .preise thead th {
  background: color-mix(in srgb, var(--gruppe) 12%, #fff);
  border-bottom-color: color-mix(in srgb, var(--gruppe) 35%, #fff);
}

/* Beim Ueberfahren muss die Zeile deutlich aus dem Streifen heraustreten,
   sonst ist nicht zu erkennen, welche gerade gemeint ist. */
.tabellenrahmen[style*="--gruppe"] .preise tbody tr:hover,
.tabellenrahmen[style*="--gruppe"] .preise tbody tr:nth-child(even):hover {
  background: color-mix(in srgb, var(--gruppe) 18%, #fff);
}

/* Beim Ueberfahren deutlicher als der Streifen, sonst waere nicht zu
   erkennen, welche Zeile gerade gemeint ist. */
.preise tbody tr:hover,
.preise tbody tr:nth-child(even):hover { background: var(--nebel); }

/*
 * Die Bezeichnungsspalte vom Zahlenfeld absetzen. Sie ist der Einstieg in
 * jede Zeile, und eine feine Linie gibt dem Blick den Ankerpunkt, von dem
 * aus er nach rechts laeuft.
 */
.preise th[scope="row"] { border-right: 1px solid var(--kante); }
.preise thead th:first-child { border-right: 1px solid var(--kante); }
.preise th[scope="row"] { font-weight: 600; color: var(--tinte); }
.preise td { color: var(--grau); white-space: nowrap; }
.preise td strong { font-weight: 700; color: var(--tinte); font-size: 1.02rem; }
.preise .gruppenzeile th {
  text-align: left; background: var(--schnee);
  text-transform: uppercase; letter-spacing: .08em; font-size: .68rem;
  color: var(--tinte); font-weight: 700;
}
.preise .gruppenzeile:hover { background: var(--schnee); }

/* Die Fläche der Gruppenzeile über die ganze Breite ziehen. Vorher war nur
   die Bezeichnungsspalte grau, rechts lief sie aus und die Zeile sah aus
   wie ein halbfertiger Kasten. */
.preise .gruppenzeile td { background: var(--schnee); border-bottom-color: transparent; }

/*
 * Gaestekarten-Zeile (seit 06.10.2026, Hannes' Wunsch, Aufbau wie im Flyer).
 * Gehoert sichtbar zum Set darueber: eingerueckt, kleiner, ohne eigene
 * Trennlinie nach oben, und immer im hellen Ton der Liste, egal wo sie im
 * Streifenmuster landet. Die Set-Zeile darueber bleibt dafuer weiss, sonst
 * verschwimmen beide zu einer Flaeche.
 */
.preise tbody tr.zeile-gast { border-top: 1px dashed var(--kante); background: #fbfbfb; }
.tabellenrahmen[style*="--gruppe"] .preise tbody tr.zeile-gast {
  background: color-mix(in srgb, var(--gruppe) 8%, #fff);
}
.preise tbody tr:has(+ tr.zeile-gast),
.tabellenrahmen[style*="--gruppe"] .preise tbody tr:has(+ tr.zeile-gast) { background: #fff; }
.preise .zeile-gast th[scope="row"] {
  font-weight: 500; font-size: .82rem; color: var(--grau);
  padding-top: 8px; padding-bottom: 8px; padding-left: 34px;
}
.preise .zeile-gast td { font-size: .84rem; color: var(--tinte); padding-top: 8px; padding-bottom: 8px; }
.spalte-rabatt { color: var(--grau) !important; }

/* Die Hinweise unter den Preistabellen. Seit 23.09.2026 kommen sie aus
   einem Textfeld und damit als .textliste, die frueher feste Liste hiess
   .hinweisliste. Beide bekommen dieselbe Optik, damit sich nichts aendert. */
.hinweisliste,
.hinweisblock .textliste { margin: var(--luft-m) 0 0; padding-left: 1.1em; color: var(--grau); font-size: .92rem; }
.hinweisliste li,
.hinweisblock .textliste li { margin-bottom: .5em; }
.hinweisliste strong,
.hinweisblock .textliste strong { font-weight: 600; color: var(--tinte); }
/* Abstand zur Tabelle darueber. Die Regel oben fuer .textliste kam nicht an,
   weil die Textfeld-Regel (.rtext > ul.textliste) staerker ist und den
   Abstand auf null setzt. Deshalb traegt ihn der Block selbst (06.10.2026). */
.hinweisblock { margin-top: var(--luft-l); }
.bahn--dunkel .hinweisliste { color: var(--leise-dunkel); }
.bahn--dunkel .hinweisliste strong { color: var(--auf-dunkel); }

/* ---------- 5. schwarze Zone: Vertrauensblock ----------
   Bei Lisa steht der auf #fafafa. Hier schwarz, weil Michael mehr dunkle
   Flaechen wollte und der Block inhaltlich das Versprechen traegt. */
.punkte {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--luft-l) var(--luft-m);
  grid-template-columns: repeat(3, 1fr);
}
.punkte h3 {
  font-size: .92rem; font-weight: 700; margin-bottom: .4em;
  padding-top: var(--luft-s);
  border-top: 2px solid var(--signal);
  text-transform: uppercase; letter-spacing: .03em;
}
.punkte p { color: var(--leise-dunkel); font-size: .9rem; }
@media (max-width: 900px) { .punkte { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .punkte { grid-template-columns: 1fr; } }

/* ---------- Radkarten ---------- */
.radgitter {
  display: grid; gap: var(--luft-m);
  grid-template-columns: repeat(3, 1fr); margin-top: var(--luft-m);
}
@media (max-width: 900px) { .radgitter { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .radgitter { grid-template-columns: 1fr; } }
.radkarte {
  background: var(--weiss); border: 1px solid var(--kante);
  border-radius: var(--radius); padding: var(--luft-m);
  display: flex; flex-direction: column;
  border-top: 3px solid var(--signal);
}
.radkarte--still { border-top-color: var(--kante-stark); }
.radkarte h3 {
  font-size: .98rem; font-weight: 700; margin-bottom: .2em;
  text-transform: uppercase; letter-spacing: -0.005em;
}
.radkarte__daten {
  color: var(--grau); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .9em;
}
.radkarte p { color: var(--grau); font-size: .9rem; }
.radkarte__preis { margin-top: auto; padding-top: var(--luft-m); color: var(--tinte) !important; }
.radkarte__preis strong { font-weight: 700; font-size: 1.45rem; }
.radkarte__preis span { color: var(--grau); font-size: .84rem; }

/* ---------- Infokacheln ---------- */
.infogitter {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--kante); border: 1px solid var(--kante);
  border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 900px) { .infogitter { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .infogitter { grid-template-columns: 1fr; } }
.infokachel {
  display: block; padding: var(--luft-m);
  background: var(--weiss); text-decoration: none; color: var(--tinte);
  transition: background .15s ease;
}
.infokachel:hover { background: var(--nebel); }
.infokachel__gruppe {
  display: block; text-transform: uppercase; letter-spacing: .12em;
  font-size: .66rem; font-weight: 600; color: var(--grau); margin-bottom: 10px;
}
.infokachel__titel { display: block; font-size: .96rem; font-weight: 600; margin-bottom: 4px; }
.infokachel__zeile { display: block; color: var(--grau); font-size: .84rem; }

/* ---------- Schritte ---------- */
.schritte {
  list-style: none; margin: var(--luft-m) 0 0; padding: 0;
  display: grid; gap: var(--luft-m); grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .schritte { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .schritte { grid-template-columns: 1fr; } }
.schritte li { border-top: 1px solid var(--kante); padding-top: var(--luft-m); }
.bahn--dunkel .schritte li { border-top-color: var(--linie-dunkel); }
.schritte__nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--signal); color: var(--schwarz);
  font-size: .85rem; font-weight: 700; margin-bottom: var(--luft-s);
}
.schritte h3 {
  font-size: .92rem; font-weight: 700; margin-bottom: .3em;
  text-transform: uppercase; letter-spacing: .03em;
}
.schritte p { color: var(--grau); font-size: .9rem; }
.bahn--dunkel .schritte p { color: var(--leise-dunkel); }

/* ---------- Reservierungsbahn ---------- */
.reservierung {
  display: flex; flex-wrap: wrap; gap: var(--luft-m) var(--luft-l);
  align-items: center; justify-content: space-between;
}
.reservierung h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.005em;
  /* Vorher .25em, der Text klebte an der Ueberschrift (Michael, 06.10.2026). */
  margin-bottom: .6em;
}
/* Ohne Zeichenbegrenzung (06.10.2026, Michaels Wunsch): Der Text brach am
   Desktop nach 48 Zeichen mitten im Satz um, obwohl bis zum Knopf noch die
   halbe Breite frei war. Jetzt laeuft er bis kurz vor den Knopf. */
.reservierung p { max-width: none; margin: 0; font-size: .94rem; }
.reservierung__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- 6. schwarze Zone: Fuss ---------- */
.fuss {
  background: var(--schwarz); color: var(--leise-dunkel);
  padding-block: var(--luft-xl) var(--luft-m);
}
.fuss__logo { width: 148px; margin-bottom: var(--luft-m); }
.fuss__titel {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--auf-dunkel); margin-bottom: var(--luft-s);
}
.fuss p, .fuss li { font-size: .88rem; color: var(--leise-dunkel); }
.fuss a { color: var(--auf-dunkel); text-decoration: none; }
.fuss a:hover { color: var(--signal); text-decoration: underline; }
.fuss__adresse { margin-bottom: .6em; }
.zeiten { border-collapse: collapse; font-size: .88rem; margin-bottom: var(--luft-s); }
.zeiten th { text-align: left; font-weight: 400; color: var(--leise-dunkel); padding: 3px 16px 3px 0; vertical-align: top; }
.zeiten td { color: var(--auf-dunkel); padding: 3px 0; }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: var(--luft-s) var(--luft-m);
  align-items: center; justify-content: space-between;
  /* Nur --luft-m: Der Spaltenblock darueber bringt seine 48px schon selbst
     mit. Mit --luft-xl standen hier zusammen 128px und es sah aus wie ein
     Loch im Fuss. */
  margin-top: var(--luft-m); padding-top: var(--luft-m);
  border-top: 1px solid var(--linie-dunkel);
}
.fuss__unten p, .fuss__unten li { font-size: .8rem; margin: 0; }

/* ============================================================
   Schmale Bildschirme
   ============================================================ */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero__bild { order: -1; min-height: 0; height: clamp(200px, 34vh, 300px); }
  .hero__text { padding: var(--luft-l) max(20px, calc((100vw - var(--breite)) / 2)); }
}

@media (max-width: 900px) { .bahn { padding-block: var(--luft-l); } }

@media (max-width: 820px) {
  .kopf__inhalt { flex-wrap: wrap; row-gap: var(--luft-s); }
  .kopf__logo { margin-right: auto; }
  .kopf__cta { order: 2; }
  .menueknopf {
    display: inline-flex; align-items: center; gap: 9px; order: 3;
    background: none; border: 1px solid var(--linie-dunkel-stark);
    color: var(--auf-dunkel); font-family: inherit; font-size: .84rem; font-weight: 600;
    padding: 10px 15px; border-radius: var(--radius);
  }
  .menueknopf__balken,
  .menueknopf__balken::before,
  .menueknopf__balken::after {
    display: block; width: 17px; height: 1.5px; background: var(--auf-dunkel); content: '';
  }
  .menueknopf__balken { position: relative; }
  .menueknopf__balken::before { position: absolute; top: -5px; }
  .menueknopf__balken::after  { position: absolute; top: 5px; }

  .menue { order: 4; margin-left: 0; flex-basis: 100%; display: none; padding-bottom: var(--luft-s); }
  .menue[data-offen] { display: block; }
  .menue ul { flex-direction: column; gap: 0; }
  .menue a { padding: 13px 4px; border-bottom: 1px solid var(--linie-dunkel); border-radius: 0; }
  .menue a[aria-current]::after { content: none; }
  .menue a[aria-current]::before { content: '▍ '; color: var(--signal); }

  .bahn__kopf { align-items: flex-start; }
  .kacheln { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .saisonband__inhalt { flex-direction: column; align-items: flex-start; gap: 6px; }
  .kacheln { grid-template-columns: 1fr; }
  .kachel { aspect-ratio: 16 / 10; }
  .radwahl__knopf { flex: 1 1 calc(50% - 5px); min-width: 0; }

  .tabellenrahmen { border: 0; overflow: visible; background: none; }
  .preise thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .preise, .preise tbody, .preise tr, .preise th, .preise td { display: block; width: 100%; }
  .preise tbody tr {
    border: 1px solid var(--kante); border-radius: var(--radius);
    margin-bottom: var(--luft-s); padding: var(--luft-s) 0; background: var(--weiss);
  }
  .preise tbody tr + tr { border-top: 1px solid var(--kante); }
  .preise th[scope="row"] {
    font-size: .98rem; padding: 4px 16px 10px;
    border-bottom: 1px solid var(--kante); margin-bottom: 6px;
  }
  .preise td { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 16px; text-align: right; }
  .preise td::before {
    content: attr(data-spalte); color: var(--grau); font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; text-align: left;
  }
  .preise .gruppenzeile { background: none; border: 0; padding: 0; margin-bottom: 6px; }
  .preise .gruppenzeile th { padding: 14px 0 6px; background: none; border: 0; }
  .preise tbody tr:hover { background: var(--weiss); }

  /* Auf dem Handy wird aus jeder Zeile eine eigene Karte. Streifen und
     Trennlinie waeren dort sinnlos und wuerden die Karten zerschneiden. */
  .preise tbody tr:nth-child(even) { background: var(--weiss); }

  /* Gaestekarte am Handy: haengt als unterer Teil an der Karte des Sets,
     statt eine eigene Karte mit vier leeren Zeilen zu sein. */
  .preise tbody tr:has(+ tr.zeile-gast) {
    margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }
  .preise tbody tr.zeile-gast {
    border-top: 1px dashed var(--kante); border-top-left-radius: 0; border-top-right-radius: 0;
    margin-top: -1px; padding-top: 6px;
  }
  .tabellenrahmen[style*="--gruppe"] .preise tbody tr.zeile-gast {
    background: color-mix(in srgb, var(--gruppe) 8%, #fff);
  }
  .preise .zeile-gast th[scope="row"] { padding: 4px 16px 6px; border-bottom: 0; margin-bottom: 0; font-size: .84rem; }
  .preise .zeile-gast td:empty { display: none; }
  .tabellenrahmen[style*="--gruppe"] .preise tbody tr:nth-child(even) { background: var(--weiss); }
  .preise th[scope="row"], .preise thead th:first-child { border-right: 0; }
}

@media (max-width: 520px) {
  .servicezeile__inhalt { justify-content: flex-start; }
  .knopfreihe .knopf, .reservierung__knoepfe .knopf { flex: 1 1 100%; }
  .kopf__cta { flex: 0 0 auto; }
}

/* ============================================================
   FASSUNG B, Aufbau nach dem Gegenentwurf (Michaels Ansage 07.09.2026)
   Fassung A liegt gesichert in seiten/_fassung-a/ und als ZIP im Projekt.

   Uebernommen: Kopf ragt ins Bild, drei Wahlkacheln mit Knopf,
   Servicezeile darunter, Saisonmiete-Block, Schneeblock mit drei
   Vorschaukarten, Dreier unten, Planungsbereich als drei Linkspalten.
   Weggelassen auf Michaels Wunsch: Beratungsblock, Ablaufschritte, FAQ.
   ============================================================ */

/* Kopf ist auf allen Seiten schwarz (Michaels Ansage 07.09.2026).
   Vorher lag er auf der Startseite als Verlauf im Bild und wurde beim
   Scrollen umgeschaltet. Das ist entfallen, samt Hover-Zustand und dem
   Beobachter in demo.js. Weniger bewegliche Teile, gleiche Lesbarkeit. */

/* ---------- Buehne ---------- */
.buehne { position: relative; background: var(--schwarz); min-height: clamp(430px, 62vh, 600px); display: flex; align-items: flex-end; }
.buehne__bild { position: absolute; inset: 0; }
.buehne__bild picture { display: block; width: 100%; height: 100%; }
.buehne__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.buehne__bild[data-fehlt]::after {
  content: attr(data-fehlt); position: absolute; right: 0; bottom: 0;
  background: rgba(0,0,0,.82); color: #d4d4d4; font-size: .7rem; font-weight: 600;
  padding: 7px 13px; border-top-left-radius: var(--radius);
}
.buehne::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    /* Kurzer Fuss: unten kraeftig genug fuer den Text, aber schnell weg,
       damit der Verlauf nicht weit ins Bild hineinlaeuft. */
    /* Statt einer Bahn ueber die volle Breite eine Linse links unten, genau
       dort wo der Text steht. Rechts bleibt das Bild dadurch frei, und der
       Fuss ueber die ganze Breite ist nur noch eine schmale Kante zum
       Vertrauensband. Ein durchgehender Verlauf kann beides nicht: entweder
       er traegt den Text oder er laesst das Bild frei. */
    /* Schmale, hohe Linse links unten statt einer Bahn ueber die volle
       Breite. Die Abdunklung sitzt damit dort, wo der Text steht, und laeuft
       nicht quer durchs Bild. Gemessen gegen die alte Bahn: unten rechts
       3,6-mal heller, dabei besserer Textkontrast (Titel 4,40 statt 4,17,
       Unterzeile 8,72 statt 5,54). Breite und Hoehe der Ellipse sind das
       Stellrad: schmaler und hoeher gibt mehr Bild frei. */
    linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.30) 10%, transparent 24%),
    radial-gradient(70% 200% at 0% 100%, rgba(0,0,0,.95) 0%, rgba(0,0,0,.86) 30%, rgba(0,0,0,.60) 50%, rgba(0,0,0,.26) 68%, transparent 86%);
}
/*
 * Helles Buehnenbild (Sommer).
 * Die Linse oben ist am Winterbild ausgemessen, das links dunkle Baeume und
 * Schatten hat. Die Sommerzeichnung ist dort helle Wiese, damit rutschte die
 * erste Ueberschriftzeile auf 3,07:1 und lag nur noch knapp ueber der Grenze
 * von 3:1 fuer grosse Schrift. Diese Linse ist etwas breiter und oben
 * kraeftiger, ohne das Bild rechts zuzudecken. Gilt nur im Sommer, das
 * Winterbild bleibt unveraendert.
 */
.buehne--hellesbild::after {
  background:
    linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.42) 14%, transparent 34%),
    radial-gradient(86% 210% at 0% 100%, rgba(0,0,0,.95) 0%, rgba(0,0,0,.88) 34%, rgba(0,0,0,.68) 54%, rgba(0,0,0,.34) 72%, transparent 90%);
}
.buehne__inhalt { position: relative; z-index: 1; color: var(--weiss); padding-block: var(--luft-l) var(--luft-l); }
.buehne__kicker { color: #f2f2f2; margin-bottom: .7em; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.buehne__titel {
  font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 700; line-height: 1.08;
  margin-bottom: .5em; text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.buehne__unterzeile {
  max-width: 40ch; font-size: 1.02rem; color: #fff;
  margin-bottom: var(--luft-m);
  text-shadow: 0 1px 3px rgba(0,0,0,.92), 0 2px 18px rgba(0,0,0,.7);
}

/* ---------- Vertrauensband unter der Buehne ---------- */
.vertrauensband { background: var(--kohle, #141414); color: var(--auf-dunkel); font-size: .84rem; }
.vertrauensband__inhalt {
  display: flex; flex-wrap: wrap; gap: var(--luft-s) var(--luft-l);
  padding-block: 13px; align-items: center;
}
.vertrauensband p { margin: 0; }
.vertrauensband span { color: var(--signal); margin-right: 7px; }

/* ---------- Titel mittig, fuer die neuen Bahnen ---------- */
.bahn__titel--mitte { text-align: center; }
.bahn__vorspann--mitte { text-align: center; margin-inline: auto; margin-bottom: var(--luft-l); }
.titel-mittel {
  font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: .5em;
}

/* ---------- Drei Wahlkacheln ---------- */
.wahl { display: grid; gap: var(--luft-m); grid-template-columns: repeat(3, 1fr); margin-top: var(--luft-l); }
@media (max-width: 900px) { .wahl { grid-template-columns: 1fr; } }
.wahlkachel {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 340px; border-radius: var(--radius); overflow: hidden;
  background: var(--tinte); text-decoration: none; color: var(--weiss);
}
.wahlkachel__bild { position: absolute; inset: 0; }
.wahlkachel__bild img { width: 100%; height: 100%; object-fit: cover; }
.wahlkachel__fehlt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #1c1c1c 0 12px, #161616 12px 24px);
  color: #5a5a5a; font-size: .74rem; font-weight: 600; text-align: center; line-height: 1.4;
}
.wahlkachel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.4) 42%, transparent 68%);
}
.wahlkachel__text { position: relative; z-index: 1; padding: var(--luft-m); display: block; }
.wahlkachel__titel { display: block; font-size: 1.3rem; font-weight: 700; margin-bottom: 3px; }
.wahlkachel__zeile { display: block; font-size: .9rem; color: rgba(255,255,255,.88); margin-bottom: var(--luft-s); }
.wahlkachel__knopf { pointer-events: none; }

/* ---------- Zeile mit weiteren Verweisen ---------- */
.weiteres {
  text-align: center; margin-top: var(--luft-m); font-size: .88rem; color: var(--grau);
}
.weiteres__marke { font-weight: 600; color: var(--tinte); margin-right: 6px; }
.weiteres a { color: var(--tinte); text-underline-offset: 4px; }

/* ---------- Saisonmiete-Block ---------- */
.saisonblock {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  background: var(--nebel); border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 820px) { .saisonblock { grid-template-columns: 1fr; } }
.saisonblock__text { padding: var(--luft-l); }
.saisonblock__text p { color: var(--grau); max-width: none; margin-bottom: var(--luft-m); }
/* Seit der Text ein Textfeld ist (.rtext), hat sein letzter Absatz keinen
   Abstand nach unten mehr, und der Knopf klebte am Text (06.10.2026). Den
   Abstand traegt jetzt der Textblock selbst. */
.saisonblock__text .rtext { margin-bottom: var(--luft-m); }
.saisonblock__bild { min-height: 280px; position: relative; align-self: stretch; }
/* Bild fuellt die rechte Haelfte ganz, egal wie lang der Text links wird.
   Bisher stand hier nur der Platzhalter, fuer ein echtes Foto fehlte die Regel. */
.saisonblock__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 60%;
}

.platzhalterflaeche {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #e4e4e4 0 12px, #dcdcdc 12px 24px);
  color: #8a8a8a; font-size: .74rem; font-weight: 600; text-align: center; line-height: 1.4;
}

/* ---------- Schneeblock ---------- */
.schneeblock { background: var(--schwarz); color: var(--auf-dunkel); border-radius: var(--radius); padding: var(--luft-l); }
.schneeblock__kopf { display: grid; grid-template-columns: 1fr auto; gap: var(--luft-l); align-items: start; margin-bottom: var(--luft-l); }
@media (max-width: 820px) { .schneeblock__kopf { grid-template-columns: 1fr; } }
.schneeblock__stand {
  display: inline-block; margin-top: var(--luft-s); font-size: .74rem; font-weight: 600;
  background: #1c1c1c; color: var(--leise-dunkel); padding: 5px 11px; border-radius: 4px;
}
.schneeblock__links li { margin-bottom: .6em; }
.schneeblock__links a { color: var(--auf-dunkel); text-decoration: none; font-size: .9rem; font-weight: 600; }
.schneeblock__links a:hover { color: var(--signal); }
.schneeblock__links a::before { content: '› '; color: var(--signal); }

/* Michaels Wunsch: die letzten Berichte nebeneinander in der Vorschau */
.schneevorschau { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--luft-m); }
@media (max-width: 820px) { .schneevorschau { grid-template-columns: 1fr; } }
.schneekarte {
  display: block; background: #131313; border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--auf-dunkel);
  transition: border-color .15s ease;
}
.schneekarte:hover { border-color: var(--signal); }
/* Quadratisch statt flacher Streifen. Die Fotos aus Facebook sind meist
   720x720 oder 960x720, im Quadrat geht also am wenigsten verloren.
   aspect-ratio statt fester Hoehe: Die Kachel waechst mit der Spaltenbreite
   mit, auf dem Handy also fast bildschirmbreit. */
.schneekarte__bild {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #1a1a1a;
}
/* Das Foto fuellt den Rahmen formatfuellend. Ohne object-fit wuerde das
   Bild verzerrt oder ueber den Rahmen hinaus laufen, weil die Fotos aus
   Facebook unterschiedliche Seitenverhaeltnisse haben (720x720 bis 960x720). */
.schneekarte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.schneekarte__fehlt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #1e1e1e 0 12px, #181818 12px 24px);
  color: #5a5a5a; font-size: .68rem; font-weight: 600;
}
.schneekarte__datum {
  display: block; padding: var(--luft-s) var(--luft-s) 0; font-size: .7rem; font-weight: 600;
  color: var(--signal); text-transform: uppercase; letter-spacing: .06em;
}
.schneekarte__titel { display: block; padding: 4px var(--luft-s) 0; font-size: .96rem; font-weight: 700; }
.schneekarte__text { display: block; padding: 6px var(--luft-s) var(--luft-m); font-size: .82rem; color: var(--leise-dunkel); }
.schneeblock__knopf { margin-top: var(--luft-l); }

/* ---------- Dreier unten ---------- */
.dreier { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--luft-m); }
@media (max-width: 900px) { .dreier { grid-template-columns: 1fr; } }
.dreierkachel {
  display: flex; flex-direction: column; background: var(--weiss);
  border: 1px solid var(--kante); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: var(--tinte); transition: box-shadow .15s ease;
}
.dreierkachel:hover { box-shadow: 0 6px 22px rgba(0,0,0,.09); }
.dreierkachel__bild { position: relative; height: 170px; display: block; }
.dreierkachel__bild img { width: 100%; height: 100%; object-fit: cover; }
.dreierkachel__text { display: block; padding: var(--luft-m); }
.dreierkachel__titel { display: block; font-size: 1.08rem; font-weight: 700; margin-bottom: 4px; }
.dreierkachel__zeile { display: block; font-size: .9rem; color: var(--grau); margin-bottom: var(--luft-m); }
.dreierkachel__knopf { pointer-events: none; }

/* ---------- Planungsbereich, drei Linkspalten ---------- */
.planung { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--luft-m); }
@media (max-width: 820px) { .planung { grid-template-columns: 1fr; } }
.planung__spalte { background: var(--weiss); border: 1px solid var(--kante); border-radius: var(--radius); padding: var(--luft-m); }
.planung__titel {
  display: flex; align-items: center; gap: 10px;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinte); margin-bottom: var(--luft-s); padding-bottom: var(--luft-s);
  border-bottom: 1px solid var(--kante);
}
/* Icons als Inline-SVG im Markup: keine Icon-Bibliothek, keine Anfrage
   ans Netz, Farbe erbt von der Ueberschrift. */
.planung__icon { width: 22px; height: 22px; flex: 0 0 auto; }
.planung__liste { list-style: none; margin: 0; padding: 0; }
.planung__liste li { border-bottom: 1px solid var(--kante); }
.planung__liste li:last-child { border-bottom: 0; }
.planung__liste a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 0; font-size: .9rem; color: var(--tinte); text-decoration: none;
}
.planung__liste a::after { content: '›'; color: var(--signal); font-weight: 700; }
.planung__liste a:hover { color: #000; }
.planung__liste a:hover::after { transform: translateX(2px); }

/* ---------- Abschluss ---------- */
.abschluss { position: relative; min-height: 300px; display: flex; align-items: center; background: var(--tinte); }
/* Das Foto muss in den Kasten eingepasst werden. Ohne diese Regel zeichnet der
   Browser es in seiner Originalgroesse, es ragt unten heraus und laeuft in den
   Fuss hinein. Gleiche Regel wie bei .wahlkachel__bild. */
.abschluss__bild { position: absolute; inset: 0; overflow: hidden; }
.abschluss__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Der weisse Text braucht in jedem Fall einen dunklen Grund, auch wenn
   noch ein heller Platzhalter darunter liegt und spaeter ein Foto kommt. */
.abschluss::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.62));
}
.abschluss__inhalt { position: relative; z-index: 1; text-align: center; padding-block: var(--luft-xl); color: var(--weiss); }
.abschluss__inhalt .knopfreihe { justify-content: center; }
.abschluss .titel-mittel { color: var(--weiss); text-shadow: 0 2px 16px rgba(0,0,0,.6); }

@media (max-width: 700px) {
  .buehne { min-height: 0; }
  .buehne__inhalt { padding-block: var(--luft-xl) var(--luft-l); }
  .vertrauensband__inhalt { flex-direction: column; align-items: flex-start; gap: 7px; }
}

/* ============================================================
   Preistabellen, farbig abgesetzt (Michaels Ansage 07.09.2026)
   Die Farben sind nicht erfunden: Der gedruckte Preisflyer gruppiert
   bereits so, Alpin blau, Langlauf gruen, Touren gelb, Zubehoer grau,
   Sonderpreise rot. Hier dezenter umgesetzt, damit die Seite ruhig
   bleibt: farbige Kante an der Gruppe, Zebra fuer die Zeilen.
   ============================================================ */
.preisgruppe {
  font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  margin: var(--luft-l) 0 var(--luft-s); padding-left: 12px;
  border-left: 4px solid var(--kante-stark);
}
.preisgruppe:first-of-type { margin-top: var(--luft-m); }
.preisgruppe span {
  font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--grau); font-size: .82rem; margin-left: 8px;
}
.preisgruppe--alpin    { border-left-color: #3d6f96; }
.preisgruppe--langlauf { border-left-color: #2e9e78; }
.preisgruppe--touren   { border-left-color: #d9a12c; }
.preisgruppe--zubehoer { border-left-color: #8a8a8a; }

/* Zebra: jede zweite Zeile leicht abgesetzt, damit das Auge in einer
   Zeile mit acht Spalten nicht verrutscht. */
.preise--farbig tbody tr:nth-child(odd of :not(.gruppenzeile)) { background: #fbfbfb; }
.preise--farbig tbody tr:hover { background: #f0f0ee; }
.preise--farbig th[scope="row"] { font-weight: 600; }
.marke-klein {
  display: block; font-size: .7rem; font-weight: 400; color: var(--grau);
  text-transform: none; letter-spacing: normal;
}
/* Aktionsspalte und Aktionszeile heben sich ab, wie im Flyer */
.spalte-aktion { background: #fdf1f1; }
thead .spalte-aktion { background: #f7dede; color: #8f2020; font-size: .62rem; line-height: 1.25; }

/*
 * Hervorgehobene Spalte innerhalb einer eingefaerbten Liste.
 *
 * Das feste Rosa stammt aus der Zeit, als alle Tabellen weiss waren. Seit
 * jede Liste ihre eigene Faerbung traegt, stossen zwei Farben aufeinander:
 * Beim Skitourenset lag Rosa auf Gelb, und beides wollte auffallen.
 *
 * Deshalb greift die Spalte jetzt die Farbe ihrer eigenen Liste auf, nur
 * kraeftiger. Sie faellt damit genauso auf wie vorher, aber als Teil der
 * Tabelle statt als Fremdkoerper.
 *
 * Die Zeilen-Hervorhebung (ECO-Angebot) bleibt bewusst rot: Sie meint ein
 * Angebot und nicht eine Spalte, und dafuer ist eine eigene Signalfarbe
 * richtig.
 */
.tabellenrahmen[style*="--gruppe"] .spalte-aktion {
  background: color-mix(in srgb, var(--gruppe) 16%, #fff);
}
.tabellenrahmen[style*="--gruppe"] thead .spalte-aktion {
  background: color-mix(in srgb, var(--gruppe) 28%, #fff);
  color: color-mix(in srgb, var(--gruppe) 75%, #000);
}
.tabellenrahmen[style*="--gruppe"] .preise tbody tr:nth-child(even) .spalte-aktion {
  background: color-mix(in srgb, var(--gruppe) 20%, #fff);
}
.zeile-aktion { background: #fdf1f1 !important; }
.zeile-aktion th[scope="row"] { color: #8f2020; }

@media (max-width: 700px) {
  .preise--farbig tbody tr:nth-child(odd of :not(.gruppenzeile)) { background: var(--weiss); }
  .spalte-aktion, .zeile-aktion { background: var(--weiss) !important; }
  .preisgruppe { margin-top: var(--luft-m); }
}

/* ---------- Ticker in Fassung B ----------
   Liegt direkt unter dem dunklen Vertrauensband. Zwei dunkle Baender
   hintereinander verschmelzen, deshalb hier heller Grund mit gruenem
   Signalpunkt. Die Meldung bleibt trotzdem gross, sie ist das Erste,
   was ein Gast im Winter wissen will. */
.ticker { background: var(--nebel); color: var(--tinte); padding-block: var(--luft-l); border-bottom: 1px solid var(--kante); }
.ticker__marke { color: var(--tinte); }
.ticker__marke::before { background: var(--signal-tief); box-shadow: 0 0 0 3px rgba(157,207,63,.3); }
.ticker__stand { color: var(--grau); }
.ticker__meldung { color: var(--tinte); }
.ticker__meldung a { color: var(--tinte); }
.ticker__punkt { background: var(--kante-stark); }
.ticker__punkt[data-aktiv] { background: var(--signal-tief); }
.ticker__pflege { color: var(--grau); border-top-color: var(--kante); }

/* ---------- Statusfeld ----------
   Fuer Abschnitte, deren Lage sich mehrmals pro Saison aendert, zuerst die
   Saisonmiete: Ausgabe startet, Material wird knapp, bitte zurueckbringen.
   Der Betrieb tippt Titel und Text ein und waehlt den Zustand, die Farbe
   ergibt sich daraus. Ohne Eintrag wird der Block nicht ausgegeben.

   Die drei Farben sind hier zweckgebunden und keine Verwaesserung der
   Signalfarbe: Sie stehen fuer einen Zustand, nicht fuer Gestaltung. */
.status {
  border-left: 4px solid var(--signal);
  background: #141414; border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--luft-m); margin: var(--luft-m) 0;
}
.status__marke {
  text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 700;
  color: var(--signal); margin-bottom: 6px;
}
.status__titel { font-size: 1.1rem; font-weight: 700; margin-bottom: .4em; color: var(--auf-dunkel); }
.status__text { color: var(--leise-dunkel); font-size: .94rem; margin-bottom: .6em; }
.status__stand { font-size: .72rem; color: #6b6b6b; margin: 0; }

/* Zustand: Ankuendigung, Ausgabe laeuft an */
.status--start { border-left-color: var(--signal); }
.status--start .status__marke { color: var(--signal); }
/* Zustand: Material wird knapp */
.status--achtung { border-left-color: #e0a52b; }
.status--achtung .status__marke { color: #e0a52b; }
/* Zustand: Rueckgabe faellig */
.status--rueckgabe { border-left-color: #e06a4a; }
.status--rueckgabe .status__marke { color: #e06a4a; }

/* Auf hellem Grund, falls das Feld spaeter auch dort gebraucht wird */
.bahn--nebel .status, .bahn--schnee .status { background: var(--weiss); border: 1px solid var(--kante); border-left-width: 4px; }
.bahn--nebel .status__titel, .bahn--schnee .status__titel { color: var(--tinte); }
.bahn--nebel .status__text, .bahn--schnee .status__text { color: var(--grau); }

/* ---------- Telefon im Winter zurueckgenommen ----------
   Michaels Ansage 07.09.2026: Im Winter geht meist niemand ans Telefon,
   deshalb darf die Nummer nicht wie der Hauptweg aussehen. Sie steht nur
   noch im Fuss, dort wo man sie sucht, und dort bewusst leise.
   Der Hauptweg ist die Online-Reservierung.

   Im Sommer ist das anders, dort ist der Anruf ein normaler Weg. Diese
   Zurueckhaltung gehoert deshalb an den Saison-Schalter. */
.reservierung__hinweis {
  margin-top: .6em !important; font-size: .84rem; color: #24310f;
}
.fuss__telefon a:hover { color: var(--auf-dunkel); }

/* ---------------------------------------------------------------
   Online-Reservierung
   Das Formular ist fremd (EasyRent von Wintersteiger) und laeuft im
   iframe. Es bringt einen eigenen Viewport und Bootstrap mit, ist also
   responsiv, richtet sich aber nach der Breite, die wir ihm geben.
   --------------------------------------------------------------- */

.reservierungsrahmen {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--weiss);
}

.reservierungsrahmen iframe {
  display: block;
  width: 100%;
  border: 0;
  /* Auf schmalen Schirmen stehen die Felder untereinander, deshalb hier
     mehr Hoehe. Zu wenig Hoehe erzeugt eine zweite Bildlaufleiste im
     iframe, und die findet auf dem Handy niemand. */
  height: 1250px;
}

@media (min-width: 700px) {
  /* Die Live-Seite faehrt seit Jahren mit 700px. Etwas mehr, weil die
     spaeteren Schritte (Produktauswahl) laenger sind als der erste. */
  .reservierungsrahmen iframe { height: 780px; }
}

.reservierungsrahmen__hinweis {
  margin-top: .9em;
}

/* Ablauf in drei Schritten */
.ablauf {
  list-style: none;
  margin: 1.6em 0 0;
  padding: 0;
  display: grid;
  gap: 1.1em;
}

@media (min-width: 760px) {
  .ablauf { grid-template-columns: repeat(3, 1fr); gap: 1.6em; }
}

.ablauf li {
  display: flex;
  gap: .85em;
  align-items: flex-start;
}

.ablauf__nummer {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--tinte);
  font-weight: 700;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ablauf h3 {
  margin: 0 0 .2em;
  font-size: 1.02rem;
}

.ablauf p {
  margin: 0;
  color: var(--grau);
  font-size: .95rem;
}

/* ---------------------------------------------------------------
   Blaettern zwischen den Schneeberichten
   Mit Adressparameter (?seite=2), damit jede Seite verlinkbar ist und
   Suchmaschinen alle Berichte finden. Genau darum geht es beim Archiv.
   --------------------------------------------------------------- */

.blaettern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
  margin-top: 2.2em;
  padding-top: 1.4em;
  border-top: 1px solid var(--linie);
}

.blaettern__pfeil {
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  padding: .5em .2em;
  white-space: nowrap;
}

/* Ausgegraute Enden bleiben stehen, damit die Leiste nicht springt,
   wenn man auf der ersten oder letzten Seite ist. */
.blaettern__pfeil--aus { color: #b4b4b4; cursor: default; }

.blaettern__zahlen {
  display: flex;
  gap: .3em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.blaettern__zahl {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--tinte);
}

.blaettern__zahl:hover { border-color: var(--tinte); }

.blaettern__zahl--hier {
  background: var(--tinte);
  border-color: var(--tinte);
  color: #fff;
}

.blaettern__stand { margin-top: .9em; text-align: center; }

@media (max-width: 560px) {
  /* Auf schmalen Schirmen die Zahlen in die zweite Zeile, sonst wird
     jede Schaltflaeche zu klein zum Treffen. */
  .blaettern { justify-content: center; }
  .blaettern__zahlen { order: 3; width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------
   Fotos als Schaltflaeche
   Die Bilder sind Schaltflaechen, damit die Grossansicht auch mit der
   Tastatur erreichbar ist. Deshalb muss das Standardaussehen weg.
   --------------------------------------------------------------- */

.bericht__bild {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  cursor: zoom-in;
}

.bericht__bild:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: -3px;
}

/* ---------------------------------------------------------------
   Grossansicht
   --------------------------------------------------------------- */

.grossbild {
  border: 0;
  padding: 0;
  max-width: min(94vw, 1200px);
  max-height: 94vh;
  background: transparent;
  overflow: visible;
}

.grossbild::backdrop { background: rgba(0,0,0,.86); }

.grossbild__bild {
  display: block;
  max-width: 100%;
  max-height: 84vh;
  margin: 0 auto;
  border-radius: var(--radius);
  background: #111;
}

.grossbild__zu,
.grossbild__pfeil {
  position: absolute;
  appearance: none;
  border: 0;
  background: rgba(0,0,0,.6);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  border-radius: 50%;
}

.grossbild__zu {
  top: -14px; right: -14px;
  width: 40px; height: 40px;
  font-size: 1.6rem;
}

.grossbild__pfeil {
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  font-size: 2rem;
}

.grossbild__pfeil--zurueck { left: -18px; }
.grossbild__pfeil--vor     { right: -18px; }

.grossbild__zu:hover,
.grossbild__pfeil:hover { background: rgba(0,0,0,.85); }

.grossbild__zu:focus-visible,
.grossbild__pfeil:focus-visible { outline: 3px solid var(--signal); }

.grossbild__fuss {
  margin: .8em 0 0;
  text-align: center;
  color: #e5e5e5;
  font-size: .86rem;
}

.grossbild__zaehler { color: #9a9a9a; margin-left: .5em; }

@media (max-width: 640px) {
  /* Auf schmalen Schirmen die Knoepfe nach innen holen, sonst stehen sie
     ausserhalb des sichtbaren Bereichs. */
  .grossbild { max-width: 100vw; }
  .grossbild__zu { top: 6px; right: 6px; }
  .grossbild__pfeil--zurueck { left: 6px; }
  .grossbild__pfeil--vor { right: 6px; }
}

/* ---------------------------------------------------------------
   Untermenü im Kopf
   --------------------------------------------------------------- */

.menue__gruppe { position: relative; }

/* Das Elternelement bekommt einen kleinen Pfeil, damit man sieht, dass
   sich dort etwas öffnet. Ohne Hinweis probiert es niemand aus. */
.menue__gruppe > a::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .55;
}

.menue ul.menue__unter {
  position: absolute;
  top: 100%;
  left: -16px;
  width: 290px;
  /* display: block ist noetig, nicht selbstverstaendlich: Die Hauptnavigation
     ist ein Flex-Container, und ohne diese Zeile stehen die Untereintraege
     nebeneinander statt untereinander. */
  display: block;
  /* Der Abstand liegt INNEN, nicht als margin. So bleibt die Fläche
     zwischen Menüpunkt und Panel überfahrbar und das Menü klappt nicht
     weg, sobald die Maus dazwischen gerät. Das ist der häufigste Grund,
     warum solche Menüs im Alltag nerven. */
  padding: 14px 0 8px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60;
}

/* Die sichtbare Fläche liegt als eigene Ebene darin, damit die Polsterung
   oben durchsichtig bleibt. */
.menue ul.menue__unter::before {
  content: '';
  position: absolute;
  inset: 12px 0 0;
  background: #131313;
  border: 1px solid #2c2c2c;
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}

.menue .menue__gruppe:hover ul.menue__unter,
.menue .menue__gruppe:focus-within ul.menue__unter {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menue ul.menue__unter li { position: relative; margin: 0; }

.menue ul.menue__unter a {
  display: block;
  padding: 11px 18px;
  line-height: 1.35;
  border-radius: 6px;
  margin: 0 6px;
}

.menue ul.menue__unter a strong {
  display: block;
  font-size: .94rem;
  font-weight: 600;
  color: #fff;
}

.menue ul.menue__unter a span {
  display: block;
  font-size: .78rem;
  color: #949494;
  margin-top: 1px;
}

.menue ul.menue__unter a:hover { background: #232323; }
.menue ul.menue__unter a:hover span { color: #b8b8b8; }

@media (max-width: 900px) {
  /* Im aufgeklappten Menü auf dem Handy alles offen und untereinander.
     Dort gibt es kein Schweben, also auch keine Klappmechanik. */
  .menue__gruppe > a::after { display: none; }
  .menue ul.menue__unter {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 2px 0 8px 16px;
  }
  .menue ul.menue__unter::before { display: none; }
  .menue ul.menue__unter a { padding: 7px 0; margin: 0; }
  .menue ul.menue__unter a strong { font-size: .88rem; font-weight: 400; opacity: .85; }
  .menue ul.menue__unter a span { display: none; }
}

/* Entfernungsliste auf der Anreiseseite */
.entfernungen { list-style: none; margin: 1.4em 0 0; padding: 0; display: grid; gap: 12px; }
.entfernungen li { display: flex; align-items: baseline; gap: 14px; }
.entfernungen__wert {
  flex: 0 0 68px; font-weight: 700; font-size: 1.06rem;
  color: var(--tinte); text-align: right;
}

/* Tourenliste */
.tourenliste { display: grid; gap: 2px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.tour { background: #fff; padding: var(--luft-m); }
.tour h3 { margin: 0 0 .2em; font-size: 1.06rem; }
.tour__zusatz { margin: 0 0 .5em; font-size: .8rem; color: var(--signal-tief); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.tour p:last-child { margin: 0; color: var(--grau); font-size: .95rem; }
@media (min-width: 760px) { .tourenliste { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------
   Kopfbahn mit Foto
   Eigene Aufnahmen vom Sudelfeld. Der Text liegt darauf, deshalb
   dieselbe Linse wie in der Bühne: abgedunkelt nur dort, wo Text
   steht, das Bild rechts bleibt frei.
   --------------------------------------------------------------- */

.kopfbahn--bild { position: relative; overflow: hidden; }

.kopfbahn__bild { position: absolute; inset: 0; }
.kopfbahn__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }

/* Am Desktop von oben her zuschneiden statt aus der Mitte (Michaels Ansage
   06.10.2026). Dort sind die Header flach, und bei mittigem Schnitt fehlten
   Dachfirst, Gipfel und Himmel, die Bilder wirkten abgeschnitten. Was
   wegfaellt, ist jetzt der untere Rand, meist Boden oder Schnee. Gilt fuer
   die Startseite und die Kopfbilder der Unterseiten. Am Handy bleibt alles
   wie gehabt, dort passte es bereits. */
@media (min-width: 701px) {
  .kopfbahn__bild img { object-position: center top; }
}
/* Ausnahme Startseite (Michael, 06.10.2026): Das Startbild bleibt mittig.
   Von oben geschnitten fehlte unten zu viel vom Haus. */

.kopfbahn--bild::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* Schmale Kante von oben. Die Brotkrume und der Kicker stehen dort in
       kleiner Schrift und brauchen 4,5:1. Auf dem Ski-Kaufen-Bild (helles
       Skiregal) lagen sie bei 4,36 und damit knapp darunter. Der Verlauf
       ist nach einem Viertel der Hoehe weg und beruehrt das Motiv nicht. */
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 13%, transparent 27%),
    linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.22) 14%, transparent 34%),
    radial-gradient(75% 190% at 0% 100%, rgba(0,0,0,.88) 0%, rgba(0,0,0,.7) 32%,
                    rgba(0,0,0,.4) 52%, transparent 78%),
    /* Gleichmaessige Grundschicht ueber das ganze Bild. Die Verlaeufe
       darueber sitzen dort, wo der grosse Text steht, erwischen aber die
       kleine Schrift in der Mitte nicht zuverlaessig. Gemessen: ohne diese
       Schicht lagen Skitouren (4,22), Schneebericht (4,05) und Ski kaufen
       (4,33) unter den noetigen 4,5:1. Sie wirkt ausserdem fuer jedes Bild,
       das Hannes spaeter hochlaedt, ohne dass jemand nachmessen muss. */
    linear-gradient(rgba(0,0,0,.20), rgba(0,0,0,.20));
}

.kopfbahn--bild > .mitte { position: relative; z-index: 1; }

/*
 * Kleine Schrift auf Bildkoepfen.
 * Brotkrume, Kicker und Unterzeile stehen normalerweise in --leise-dunkel
 * (#a3a3a3). Das ist auf weissem Grund richtig gedaempft, auf einem Foto
 * aber zu schwach: gemessen 3,13 bis 4,34:1, noetig sind 4,5:1 fuer kleine
 * Schrift. Auffaellig war das nie, weil man Grau auf Bild fuer gewollt
 * haelt. Auf Bildkoepfen deshalb ein helles Grau, das sich immer noch klar
 * von der weissen Ueberschrift absetzt.
 */
.kopfbahn--bild .brotkrume,
.kopfbahn--bild .brotkrume a,
.kopfbahn--bild .kicker { color: #f2f2f2; }
/* Die Unterzeile steht tiefer im Bild, wo die Verlaeufe schwaecher greifen,
   und blieb mit #f2f2f2 bei 4,31:1. Reines Weiss bringt sie auf ueber 4,9.
   Die Rangfolge zur Ueberschrift traegt dann die Schriftgroesse, nicht die
   Farbe. Das ist die guenstigere Loesung, als alle Fotos dunkler zu machen. */
.kopfbahn--bild .kopfbahn__unterzeile { color: #ffffff; }
.kopfbahn--bild .brotkrume a:hover { color: var(--weiss); }

/* ---------------------------------------------------------------
   Externe Verweise kenntlich machen
   Wer klickt, soll vorher wissen, dass er die Seite verlässt. Das
   Zeichen kommt automatisch an jeden Link, der auf eine fremde Adresse
   zeigt, es muss also niemand daran denken.

   Ausgenommen sind Knöpfe und Kacheln: Dort steht die Absicht im Text
   ("Zur Langlaufschule"), und ein Zeichen im Knopf sieht aus wie ein
   Fehler. Das eingebettete Buchungsfenster ist kein Link und deshalb
   ohnehin nicht betroffen.
   --------------------------------------------------------------- */

a[href^="http"]:not(.knopf):not(.dreierkachel):not(.wahlkachel):not(.schneekarte):not(.fuss__sozial a):not(.menue__unter a)::after,
.menue__unter a[href^="http"] strong::after {
  content: '';
  display: inline-block;
  width: .58em;
  height: .58em;
  margin-left: .34em;
  vertical-align: baseline;
  /* Pfeil nach schräg oben rechts, gezeichnet statt als Zeichen:
     So sieht er auf jedem System gleich aus. */
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(.06em);
  opacity: .5;
}

a[href^="http"]:not(.knopf):hover::after { opacity: .9; }
/* Im aufklappenden Menue steht der Pfeil hinter dem Titel, nicht hinter der
   grauen Unterzeile. Dort rutschte er bei "Online Shop" allein in eine
   eigene Zeile (06.10.2026). */
.menue__unter a[href^="http"]:hover strong::after { opacity: .9; }

/* In der dunklen Fußzeile und im Menü etwas kräftiger, sonst verschwindet
   das Zeichen auf Schwarz. */
.fuss a[href^="http"]::after,
.servicezeile a[href^="http"]::after { opacity: .65; }

/* ---------------------------------------------------------------
   Fuß, zweistufig
   Oben die Angaben, die am häufigsten gesucht werden (Adresse,
   Telefon, Öffnungszeiten), darunter die Seiten nach Themen. Vorher
   standen fünfzehn Links in einer Spalte und zwei in den anderen.
   --------------------------------------------------------------- */

.fuss__oben {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.2fr;
  gap: var(--luft-l);
  padding-bottom: var(--luft-l);
  border-bottom: 1px solid var(--linie-dunkel, #2a2a2a);
}

.fuss__seiten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--luft-m);
  padding: var(--luft-l) 0;
}

.fuss__marke-klein {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .6;
  margin-bottom: 1px;
}

/* Telefonnummern größer: Am Handy wird darauf getippt, und im Winter
   ist die Nummer die zweite Wahl nach der Online-Reservierung. */
.fuss__nummer { font-size: 1.06rem; font-weight: 600; }

.fuss__jetzt { margin: 0 0 .8em; font-size: .92rem; }

@media (max-width: 900px) {
  .fuss__oben { grid-template-columns: 1fr 1fr; }
  .fuss__zeiten { grid-column: 1 / -1; }
  .fuss__seiten { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .fuss__oben, .fuss__seiten { grid-template-columns: 1fr; }
  /* Auf dem Handy die Zeiten nach oben, danach wird am häufigsten gesucht. */
  .fuss__zeiten { order: -1; }
}

/* Der Hinweis unter der Nummer muss auf eine eigene Zeile. Als
   Fließtext klebt er an der Nummer und liest sich wie ein Zusatz
   zur Rufnummer selbst. */
.fuss__kontakt .klein { display: block; margin-top: .3em; line-height: 1.4; }

/* ---------- Ladengalerie ----------
   Fotos aus dem Geschaeft auf den Shop-Seiten. Quadratisch, damit die Reihe
   ruhig steht, auch wenn die Aufnahmen unterschiedliche Formate haben.
   auto-fit statt fester Spaltenzahl: Die Bekleidungsseite hat nur zwei
   Fotos, die sollen dann nicht als Rest einer Dreierreihe wirken. */
.ladengalerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--luft-m);
  margin-top: var(--luft-m);
}
.ladengalerie__stueck {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius, 10px);
  background: var(--nebel, #f2f2f2);
}
.ladengalerie__stueck img,
.ladengalerie__stueck .platzhalterflaeche {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- Redaktioneller Text ----------
   Diese Bloecke pflegt Hannes im Backend. Aus einem Textfeld koennen mehrere
   Absaetze und Aufzaehlungen werden, deshalb steht der Text in einem Behaelter
   statt in einem einzelnen <p>. Die Klasse .rtext haelt die Abstaende in
   Ordnung, egal wie viele Absaetze er anlegt. Ohne sie wuerde der erste
   Absatz einen Abstand nach oben mitbringen, den es vorher nicht gab. */
.rtext > p { margin-block: 0 .9em; }
.rtext > p:last-child { margin-bottom: 0; }
.rtext > ul.textliste { margin: 0 0 .9em; padding-left: 1.2em; }
.rtext > ul.textliste:last-child { margin-bottom: 0; }
.rtext > ul.textliste li { margin-bottom: .35em; }
.rtext a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.rtext a:hover { color: var(--signal); }

/* Eigene Abschnitte, die Hannes selbst anlegt */
.fliesstext { max-width: none; }
.fliesstext > p { margin-block: 0 .9em; }
.fliesstext > p:last-child { margin-bottom: 0; }
.fliesstext > ul.textliste { margin: 0 0 .9em; padding-left: 1.2em; }
.fliesstext > ul.textliste li { margin-bottom: .35em; }

/* Hinweis über dem Buchungsfenster.
   Abgesetzt, weil er gelesen werden muss, bevor jemand das Fenster benutzt:
   Er erklärt, warum online nicht der ganze Bestand auftaucht. */
.reservierungshinweis {
  background: var(--nebel, #f2f2f2);
  border-left: 3px solid var(--signal);
  padding: 18px 22px;
  border-radius: 0 var(--radius, 10px) var(--radius, 10px) 0;
  margin-bottom: var(--luft-m);
}

/* Zwei Spalten ab Tabletbreite.
   Der Kasten soll die volle Breite fuellen wie das Buchungsfenster darunter.
   Als eine Spalte waeren das ueber 140 Zeichen pro Zeile, und ab etwa 90
   verliert das Auge beim Zeilenwechsel den Anschluss. Zwei Spalten fuellen
   den Platz und halten die Zeilen kurz. */
@media (min-width: 900px) {
  .reservierungshinweis { columns: 2; column-gap: var(--luft-l); }
  /* Ein Absatz darf nicht mitten zwischen den Spalten zerrissen werden */
  .reservierungshinweis > p,
  .reservierungshinweis > ul.textliste { break-inside: avoid; }
}
.reservierungshinweis > p { margin-block: 0 .8em; }
.reservierungshinweis > p:last-child { margin-bottom: 0; }
.reservierungshinweis > ul.textliste { margin: 0 0 .8em; padding-left: 1.2em; }
.reservierungshinweis > ul.textliste li { margin-bottom: .3em; }

/* ---------- Saisonverleih, zweispaltig ----------
   Der Block stand vorher in einer 66 Zeichen schmalen Spalte, rechts blieb
   die halbe Breite leer. Jetzt links die Erklärung, rechts das farbige
   Statusfeld. Das Feld steht dadurch dort, wo das Auge nach der Überschrift
   ohnehin hinwandert, statt mitten im Text zu stecken. */
.saisonverleih__text > .bahn__vorspann,
.saisonverleih__text > .klein { max-width: none; }

@media (min-width: 900px) {
  .saisonverleih.hat-stand {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    gap: var(--luft-l);
    align-items: start;
  }
  /* Das Statusfeld bleibt beim Scrollen auf Höhe, solange der Block läuft.
     Es ist die Information, die sich am häufigsten ändert. */
  .saisonverleih__stand { position: sticky; top: var(--luft-m); }
}

/* Ohne Statusfeld gibt es nichts zu verteilen, dann nutzt der Text die
   Breite bis zur bequemen Lesegrenze. */
.saisonverleih:not(.hat-stand) .saisonverleih__text > .bahn__vorspann,
.saisonverleih:not(.hat-stand) .saisonverleih__text > .klein { max-width: none; }

/* ---------- Farbe der Ticker-Meldungen ----------
   Die Klasse ticker__meldung--<art> wurde schon immer ausgegeben, hatte aber
   keine einzige Regel. Die Auswahl im Backend war damit wirkungslos.

   Farbe im Text selbst wäre falsch: Die Meldung ist groß und fett, eine
   gelbe oder grüne Schrift auf hellem Grund verlöre an Lesbarkeit. Deshalb
   ein schmaler Strich davor. Neutrale Meldungen bekommen keinen, sonst
   hätte jede Zeile eine Markierung und die Unterscheidung wäre wieder weg. */
.ticker__lauf { padding-left: 20px; }
.ticker__meldung--gut::before,
.ticker__meldung--achtung::before {
  content: ''; position: absolute; left: -20px; top: .16em; bottom: .16em;
  width: 5px; border-radius: 3px;
}
.ticker__meldung--gut::before     { background: var(--signal); }
.ticker__meldung--achtung::before { background: #d9a441; }


/* ---------- Haeufige Fragen (Skiverleih, seit 06.10.2026) ----------
   Volle Breite in Spalten statt einer schmalen Leiste, wie auf allen
   Seiten. Karten mit duenner Linie, die Frage fett, die Antwort ruhig. */
.fragen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--luft-m); }
@media (max-width: 1000px) { .fragen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .fragen { grid-template-columns: 1fr; } }
.frage { border: 1px solid var(--kante); border-radius: var(--radius); padding: var(--luft-m); background: var(--weiss); }
.frage__titel { font-size: 1rem; font-weight: 700; margin: 0 0 .5em; text-transform: none; letter-spacing: 0; line-height: 1.35; }
.frage__antwort { color: var(--grau); font-size: .94rem; }
.frage__antwort p { margin: 0 0 .6em; }
.frage__antwort p:last-child { margin-bottom: 0; }

/* ---------- Fehlerseite 404 (neu 06.10.2026) ----------
   Schwarze Buehne wie die Startseite, links Text, rechts die 404 als
   Zeichnung: im Winter mit Schneeball und Ski, im Sommer mit Fahrrad. */
.fehlerbuehne { background: var(--schwarz); color: var(--weiss); padding-block: var(--luft-xl); overflow: hidden; }
.fehlerbuehne__inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--luft-l); align-items: center; }
.fehlerbuehne .kicker { color: var(--signal); }
.fehlerbuehne h1 { color: var(--weiss); font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.08; margin-bottom: .45em; text-transform: none; letter-spacing: -.015em; }
.fehlerbuehne__unter { color: #e6e6e6; font-size: 1.08rem; max-width: 46ch; margin-bottom: .8em; }
.fehlerbuehne__spruch { color: #a8a8a8; font-size: .95rem; font-style: italic; max-width: 46ch; margin-bottom: var(--luft-m); }
.fehlerbuehne__bild { display: flex; justify-content: center; }
.fehler404 { width: 100%; max-width: 560px; height: auto; overflow: visible; }
.fehler404__ziffer { font-size: 220px; font-weight: 800; fill: #fff; text-anchor: middle; font-family: inherit; letter-spacing: -.02em; }
.fehler404__spur { fill: none; stroke: rgba(255,255,255,.38); stroke-width: 4; stroke-linecap: round; }
.fehler404__spur--rad { stroke-width: 9; stroke-dasharray: 3 9; stroke: rgba(255,255,255,.35); }
.fehler404__ball { fill: #f3f6f9; }
.fehler404__schatten { fill: none; stroke: #d6dee6; stroke-width: 7; stroke-linecap: round; }
.fehler404__flocke { fill: #fff; opacity: .9; }
.fehler404__ski { fill: var(--signal); }
.fehler404__bindung { fill: #1d1d1d; }
.fehler404__stock { stroke: #bdbdbd; stroke-width: 5; stroke-linecap: round; }
.fehler404__teller { fill: none; stroke: #bdbdbd; stroke-width: 3; }
.fehler404__reifen { fill: none; stroke: #2a2a2a; stroke-width: 16; }
.fehler404__profil { fill: none; stroke: #fff; stroke-width: 16; stroke-dasharray: 5 7; }
.fehler404__felge { fill: none; stroke: #cfcfcf; stroke-width: 4; }
.fehler404__speiche { stroke: #9a9a9a; stroke-width: 1.6; }
.fehler404__nabe { fill: var(--signal); }

.fehlerwege { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--luft-m); }
.fehlerweg {
  display: block; border: 1px solid var(--kante); border-radius: var(--radius);
  padding: var(--luft-m); background: var(--weiss); color: var(--tinte); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.fehlerweg strong { display: block; font-size: 1.02rem; margin-bottom: .3em; }
.fehlerweg span { color: var(--grau); font-size: .9rem; }
.fehlerweg strong::after { content: ' ›'; color: var(--grau); }
.fehlerweg:hover { border-color: var(--tinte); transform: translateY(-2px); }

@media (max-width: 900px) {
  .fehlerbuehne__inhalt { grid-template-columns: 1fr; }
  .fehlerbuehne__bild { order: -1; }
  .fehler404 { max-width: 380px; }
  .fehlerwege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .fehlerwege { grid-template-columns: 1fr; } }


/* ---------- Soziale Kanaele im Fuss (06.10.2026) ----------
   Runde Knoepfe mit Umriss, weiss auf Schwarz wie der restliche Fuss.
   Beim Ueberfahren in der einen Signalfarbe, Symbol dann schwarz (die
   Gruen-Regel: Gruen ist Flaeche, nie Schrift). */
.fuss__sozial { list-style: none; display: flex; gap: 10px; margin: 1.1em 0 0; padding: 0; }
.fuss__sozial a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); color: var(--auf-dunkel);
  transition: background-color .15s, border-color .15s, color .15s;
}
.fuss__sozial svg { width: 19px; height: 19px; fill: currentColor; }
.fuss__sozial svg.fuss__sozial-linie { fill: none; stroke: currentColor; stroke-width: 1.8; }
.fuss__sozial svg .fuss__sozial-punkt { fill: currentColor; stroke: none; }
.fuss__sozial a:hover, .fuss__sozial a:focus-visible {
  background: var(--signal); border-color: var(--signal); color: #000;
}


/* ---------- Volle Inhaltsbreite am Desktop (06.10.2026) ----------
   Michaels Regel fuer alle Web-Projekte: Text nutzt die ganze Breite des
   Inhalts, keine schmalen Spalten mehr. Die alten Zeichenbegrenzungen
   (56ch, 60ch, 66ch, 68ch, 70ch) sind oben auf none gesetzt.

   Ausnahme: Kopfbilder. Dort steht der Text auf dem Foto und muss auf der
   abgedunkelten linken Seite bleiben, sonst laeuft er ins helle Bild. */
.kopfbahn--bild h1 { max-width: 20ch; }
.kopfbahn--bild .kopfbahn__unterzeile { max-width: 56ch; }

/* Langlaufkurse: Text links, Kontaktkasten rechts (06.10.2026). */
.kursblock { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--luft-l); align-items: center; }
.kursblock__kontakt {
  border: 1px solid var(--linie-dunkel, rgba(255,255,255,.18)); border-radius: var(--radius);
  padding: var(--luft-m); background: rgba(255,255,255,.04);
}
.kursblock__kontakt .kicker { color: var(--signal); margin-bottom: .6em; }
.kursblock__kontakt .rtext { color: var(--auf-dunkel); line-height: 1.7; }
.kursblock__knopf { margin: var(--luft-m) 0 0; }
@media (max-width: 820px) { .kursblock { grid-template-columns: 1fr; } }

/* Anreise (06.10.2026, volle Breite): Entfernungen als vier Kacheln
   nebeneinander, Oeffnungszeiten links mit Hinweisen und Route rechts. */
@media (min-width: 821px) {
  .entfernungen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--luft-m); }
  .entfernungen li {
    flex-direction: column; gap: 6px; padding: var(--luft-m);
    background: var(--weiss); border: 1px solid var(--kante); border-radius: var(--radius);
  }
  .entfernungen__wert { flex: none; text-align: left; font-size: 1.6rem; }
}
.zeitenblock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--luft-l); align-items: start; margin-top: 1.4em; }
.zeitenblock__rechts .fussnoten { margin-top: 0; }
@media (max-width: 820px) { .zeitenblock { grid-template-columns: 1fr; } }


/* ---------- Typografie Anreise und schwarze Abschnitte (06.10.2026) ---------- */

/* Rangfolge in schwarzen Abschnitten: Einleitung groesser und hell, der
   Text darunter etwas zurueckgenommen, Kleingedrucktes grau. Vorher war die
   Einleitung grau und damit schwaecher als der Text darunter. */
.bahn--dunkel .bahn__vorspann { color: var(--auf-dunkel); font-size: 1.1rem; line-height: 1.6; }
.bahn--dunkel .bahn__vorspann ~ .rtext:not(.klein) { color: #c9c9c9; }
.bahn--dunkel .bahn__vorspann ~ .klein { margin-top: 1.4em !important; }

/* Entfernungen: die Zahl fuehrt, die Beschreibung tritt zurueck. */
.entfernungen__wert { font-size: 2rem; letter-spacing: -.015em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.entfernungen li > span:not(.entfernungen__wert) { color: var(--grau); font-size: .95rem; line-height: 1.45; }

/* Oeffnungszeiten: Uhrzeiten linksbuendig direkt neben dem Tag, gleiche
   Groesse wie die Hinweise daneben, Ziffern gleich breit. */
.preise--zeiten { font-size: 1rem; }
.preise--zeiten th[scope="row"] { width: 9.5em; font-weight: 600; }
.preise--zeiten td { text-align: left; color: var(--tinte); font-variant-numeric: tabular-nums; line-height: 1.55; }
.zeitenblock__rechts .fussnoten { font-size: 1rem; line-height: 1.6; color: var(--grau); }
.zeitenblock__rechts .fussnoten strong { color: var(--tinte); }

/* Wetter-Seite, Kameras und Wetterdienste (06.10.2026): Kartenbaustein der
   Startseite, dazu klein der Anbieter unter jedem Link. */
.planung--wetter { margin-top: var(--luft-m); }
.planung__linktext { display: flex; flex-direction: column; gap: 2px; }
.planung__linktext small { font-size: .74rem; color: var(--grau); font-weight: 400; letter-spacing: .01em; }
.planung__fussnote { margin-top: var(--luft-m); }


/* ---------- Garantie (06.10.2026, typografisch gegliedert) ---------- */
.garantiekarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--luft-m); margin-top: var(--luft-m); }
.garantiekarte { background: var(--weiss); border: 1px solid var(--kante); border-radius: var(--radius); padding: var(--luft-m); }
.garantiekarte h3 { font-size: 1.05rem; margin: 0 0 .5em; text-transform: none; letter-spacing: 0; }
.garantiekarte .rtext { color: var(--tinte); line-height: 1.6; }
.garantiekarte__marke {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: .8em;
  font-size: .95rem; font-weight: 700; background: var(--schnee); color: var(--tinte);
}
.garantiekarte--ja .garantiekarte__marke { background: var(--signal); color: #000; }
.garantiekarte--nein .garantiekarte__marke { background: #e4e4e4; color: #555; }
.garantie__fuss { margin-top: var(--luft-m); }
@media (max-width: 900px) { .garantiekarten { grid-template-columns: 1fr; } }

.fairblock { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--luft-l); align-items: start; margin-top: var(--luft-m); }
.fairblock__garantie { color: var(--tinte); line-height: 1.65; }
.fairblock__garantie > p:first-child { font-size: 1.1rem; color: var(--grau); }
.fairblock__karte { background: var(--nebel); border: 1px solid var(--kante); border-radius: var(--radius); padding: var(--luft-m); color: var(--tinte); line-height: 1.65; }
.fairblock__karte > p:first-child::first-line { font-weight: 700; }
@media (max-width: 900px) { .fairblock { grid-template-columns: 1fr; } }

/* ---------- AGB (06.10.2026) ----------
   Die fuenf Bedingungen als nummerierte Karten in zwei Spalten. Vorher eine
   enge Liste ohne eigene Gestaltung, die Absaetze liefen ineinander. Der
   Wortlaut ist Rechtstext und bleibt unveraendert, nur die Form aendert sich.
   Nummer im gruenen Kreis mit schwarzer Ziffer (Gruen-Regel). */
.agbliste {
  list-style: none; counter-reset: agb; margin: var(--luft-m) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--luft-m);
}
.agbliste li {
  counter-increment: agb; position: relative;
  background: var(--weiss); border: 1px solid var(--kante); border-radius: var(--radius);
  padding: var(--luft-m) var(--luft-m) var(--luft-m) calc(var(--luft-m) + 46px);
  line-height: 1.65; color: var(--tinte);
}
.agbliste li::before {
  content: counter(agb); position: absolute; left: var(--luft-m); top: calc(var(--luft-m) - 2px);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--signal); color: #000; font-weight: 700; font-size: .95rem;
}
@media (max-width: 820px) { .agbliste { grid-template-columns: 1fr; } }
/* Ungerade Anzahl: der letzte Punkt laeuft ueber die volle Breite, statt
   allein in der linken Spalte zu stehen. */
.agbliste li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- Impressum (06.10.2026) ----------
   Vier Karten in zwei Spalten, darunter die weiteren Webseiten als Reihe. */
.impressum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--luft-m); }
.impressum__karte { background: var(--weiss); border: 1px solid var(--kante); border-radius: var(--radius); padding: var(--luft-m); }
.impressum__titel {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--grau); margin: 0 0 .9em;
}
.impressum__karte .rtext { color: var(--tinte); line-height: 1.7; font-size: 1.02rem; }
.impressum__karte .rtext a { color: var(--tinte); }
.impressum__titel--frei { margin-top: var(--luft-l); }
.impressum__seiten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.impressum__seiten a {
  display: inline-block; padding: 10px 16px; border: 1px solid var(--kante); border-radius: var(--radius);
  background: var(--weiss); color: var(--tinte); text-decoration: none; font-size: .95rem;
}
.impressum__seiten a:hover { border-color: var(--tinte); }
@media (max-width: 760px) { .impressum { grid-template-columns: 1fr; } }

/* ---------- Datenschutz (06.10.2026) ----------
   Links ein mitlaufendes Inhaltsverzeichnis, rechts die Abschnitte ueber die
   restliche Breite. Oben die Kurzfassung als Kasten mit Haken. */
.datenschutz { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--luft-l); align-items: start; }
.datenschutz__inhalt { position: sticky; top: 24px; border-left: 2px solid var(--kante); padding-left: var(--luft-m); }
.datenschutz__inhalt-titel { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grau); margin: 0 0 .8em; }
.datenschutz__inhalt ol { list-style: none; margin: 0; padding: 0; counter-reset: ds; }
.datenschutz__inhalt li { counter-increment: ds; margin: 0 0 .55em; font-size: .9rem; line-height: 1.35; }
.datenschutz__inhalt a { color: var(--grau); text-decoration: none; }
.datenschutz__inhalt a::before { content: counter(ds) '. '; color: var(--kante-stark, #bbb); }
.datenschutz__inhalt a:hover { color: var(--tinte); }

.datenschutz__abschnitt { padding-bottom: var(--luft-l); margin-bottom: var(--luft-l); border-bottom: 1px solid var(--kante); scroll-margin-top: 24px; }
.datenschutz__abschnitt:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.datenschutz__abschnitt h2 { font-size: 1.35rem; margin: 0 0 .7em; }
.datenschutz__abschnitt .rtext, .datenschutz__abschnitt > p { color: var(--tinte); line-height: 1.7; }
.datenschutz__abschnitt > p { margin: 0 0 .9em; }
.datenschutz__abschnitt .rtext a, .datenschutz__abschnitt > p a { color: var(--tinte); }

.datenschutz__blick { background: var(--nebel); border: 1px solid var(--kante); border-radius: var(--radius); padding: var(--luft-m); }
.datenschutz__blick h2 em { font-style: italic; }
.datenschutz__haken { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7em var(--luft-m); }
.datenschutz__haken li { position: relative; padding-left: 30px; line-height: 1.5; color: var(--tinte); }
.datenschutz__haken li::before {
  content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--signal); color: #000; font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.datenschutz__stand { margin-top: var(--luft-m); }

@media (max-width: 900px) {
  .datenschutz { grid-template-columns: 1fr; }
  .datenschutz__inhalt { position: static; }
  .datenschutz__haken { grid-template-columns: 1fr; }
}

.datenschutz__abschnitt > p.datenschutz__stand { margin: var(--luft-m) 0 0; color: var(--grau); }

/* ---------- Kopf am Handy: eine Zeile (06.10.2026) ----------
   Logo links, rechts Reservieren und Menue-Symbol. Vorher drei Ebenen
   (Logo und Knopf, darunter Menue), das kostete im stehenbleibenden Kopf
   rund 150 px. Aufgeklappt bricht das Menue darunter in eine eigene Zeile. */
.kopf__cta-kurz { display: none; }
@media (max-width: 820px) {
  .kopf__inhalt { column-gap: 10px; }
  .kopf__cta { margin-left: auto; }
  .kopf__logo { margin-right: 0; }
}
@media (max-width: 560px) {
  .kopf__inhalt { min-height: 60px; padding-block: 8px; }
  .kopf__logo img { width: 124px; }
  .kopf__cta { padding: 10px 14px; }
  .kopf__cta-lang { display: none; }
  .kopf__cta-kurz { display: inline; }
  .kopf__cta, .menueknopf { min-height: 42px; }
  .menueknopf { padding: 0; width: 44px; justify-content: center; }
  .menueknopf__wort { display: none; }
}

/* Hinweis bei KI-bearbeitetem Startbild (06.10.2026): klein, unten rechts im Bild */
/* .buehne__bild ist schon absolut positioniert, der Hinweis haengt sich daran. */
.buehne__ki {
  position: absolute; right: 12px; bottom: 10px; z-index: 2;
  font-size: .66rem; letter-spacing: .02em; line-height: 1;
  color: rgba(255,255,255,.42); text-shadow: 0 1px 1px rgba(0,0,0,.25);  /* fast durchsichtig, Michael 06.10.2026 */
  pointer-events: none;
}