/* ============================================================
   STARTHAUS — bereiche.css
   Die Bereichsfarben vom A0-Aufsteller, die Orientierungsleiste
   und der Hoch-Knopf.

   Grundlage: Zoom mit René am 10.08.2026.

   Drei Sätze von ihm tragen alles, was hier steht:

     „Ich hatte immer oben, wie so 'n Header, dieses Verleih,
      Service als Orientierung."
     „Es sind zu viele Informationen für einmal."
     „Ein bissel sehr einfach gestrickt, und halt mit großen
      Tasten bedienbar."

   Deshalb: wenige Farben, große Flächen, nichts, was blinkt.
   Die Farben sind nicht erfunden — sie stehen auf seinem
   Aufsteller am Laden, und seine Gäste kennen sie von dort.
   ============================================================ */

/* ============================================================
   DIE DREI WÖRTER IM KOPF
   ------------------------------------------------------------
   Am Laden in der Vierenstraße hängt über dem Eingang ein Brett
   mit drei weißen Wörtern: SERVICE · VERLEIH · VERKAUF. Wer
   dort schon einmal stand, erkennt die Seite daran wieder.

   Sie standen kurz als eigene Leiste unter der Kopfzeile. Eine
   Zeile zu viel — sie gehören in den Kopf selbst, und zwar groß.
   Jedes trägt die Farbe seines Bandes vom Aufsteller.
   ============================================================ */

.nav-links a{
  /* 11.5 px waren eine Fußnote. Das hier ist eine Ansage. */
  font-size:15px;
  letter-spacing:.14em;
  padding:6px 4px;
}
/* Der Unterstrich in der Bereichsfarbe, nicht mehr im Eisblau —
   und 3 px stark, damit er auf dem Schild-Charakter besteht. */
.nav-links a[data-bereich]::after{
  height:3px;bottom:0;border-radius:2px;
  background:var(--bereich);
}
.nav-links a[data-bereich]{color:var(--snow)}
.nav-links a[data-bereich]:hover{color:#fff}
/* Auf der Seite, auf der man gerade steht, brennt die Farbe. */
.nav-links a[data-bereich][aria-current]::after{width:100%}

/* Zwischen 900 und 1180 px wird es eng, wenn fünf Wörter in
   dieser Größe neben Logo, Suche und Sprachwahl stehen sollen.
   Nachgemessen: bei 1180 px passt es, darunter nicht mehr.
   Also dort eine Stufe kleiner statt umbrechen — ein Kopf, der
   in zwei Zeilen kippt, ist schlimmer als kleinere Schrift. */
@media (max-width:1180px){
  .nav-links a{font-size:13px;letter-spacing:.10em}
}
@media (max-width:1040px){
  .nav-links a{font-size:12px;letter-spacing:.07em}
}

/* Im Schubladenmenü auf dem Handy tragen die drei Gruppen
   ebenfalls ihre Farbe — sonst ist die Wiedererkennung genau
   dort weg, wo die meisten Gäste unterwegs sind. */
.dgrp-t{position:relative;padding-left:14px}
.dgrp:nth-child(1) .dgrp-t::before{background:#D8232A}
.dgrp:nth-child(2) .dgrp-t::before{background:#5FA82A}
.dgrp:nth-child(3) .dgrp-t::before{background:#1B87C9}
.dgrp:nth-child(4) .dgrp-t::before{background:#EE8B1C}
.dgrp .dgrp-t::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:1.1em;border-radius:3px;background:var(--line-3);
}

/* ============================================================
   DER ROTE KARTENZEIGER AUF DEM KOPFBILD
   ------------------------------------------------------------
   René im Zoom, über sein Original:
     „Hier habe ich im Prinzip dieses rote Icon gesetzt, weil das
      ja jeder kennt von Google Maps. Ah, hier bin ich. Weil direkt
      am Starthaus, direkt am Skihang bin ich. Das ist die eine
      Information, die ich den Leuten zukommen lassen wollte."

   Er sitzt dort, wo das Haus im Panorama steht — rechts unterhalb
   der Mitte, am unteren Rand des Hangs. Kein Effekt, keine
   Animation: ein Zeiger, den jeder kennt, sonst nichts.
   ============================================================ */
/* Der Bildausschnitt: das Panorama zeigt oben den Hang und unten den
   Ort. Der Standard-Ausschnitt (72 % / 40 %) schnitt den Ort weg — man
   sah nur Wald. Tiefer angesetzt, damit Lifte, Häuser und Hang
   zusammen im Bild sind; das ist der Blick, den René meint.

   NACHGERECHNET AM 18.08.2026, als der Verlauf schwächer wurde und man
   das Bild zum ersten Mal wirklich sah: Bei 52 % / 58 % lag das
   markierte Haus auf 79 % der Rahmenhöhe — also hinter der
   Kennzahlenzeile. Der Zeiger stand deshalb bei 57 % / 70 % auf freier
   Piste und zeigte auf nichts. Solange alles schwarz war, ist das
   niemandem aufgefallen.

   Die Rechnung: das Bild ist 1512 × 1067, der Rahmen 1512 × 857. Es
   wird über die Breite eingepasst, senkrecht bleiben 210 px übrig.
   Das Haus liegt bei 75 % der Bildhöhe (data.STARTHAUS_IM_BILD).
       Bildausschnitt 100 %  →  Haus bei 590 px
       zusätzlich 1,15-fach vergrößert, Drehpunkt unten am Haus
                             →  Haus bei 548 px  =  64 % der Höhe
   Damit steht der Zeiger frei über der Kennzahlenzeile, und der Ort
   bleibt am unteren Bildrand sichtbar — genau der Punkt, um den es
   René geht. Wer den Ausschnitt ändert, rechnet diese vier Zeilen neu.
   Waagerecht gibt es nichts zu rechnen: über die Breite eingepasst
   heißt, es wird seitlich nichts abgeschnitten. */
.hero--home .hero-bg img{
  object-position:52% 100%;
  transform:scale(1.15);
  transform-origin:79% 100%;
}

.hero-pin{
  position:absolute;left:79%;top:64%;z-index:1;
  width:clamp(44px,4.4vw,68px);
  transform:translate(-50%,-100%);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
  pointer-events:none;
}
.hero-pin svg{width:100%;height:auto;display:block}
.hero-pin path{fill:#D8232A}
.hero-pin circle{fill:#fff}
/* Auf dem Handy sitzt das Bild nur noch im Band über dem Text
   (home.css, „BAND STATT DECKE"), und dort ist es mit dem Haus als
   Drehpunkt vergrößert. Weil der Drehpunkt genau der markierte Punkt
   ist, bleibt der Zeiger auf denselben Prozentwerten stehen — 66 / 44
   waren die Werte für den alten, ungezoomten Ausschnitt und zeigten
   danach auf Wald. */
@media (max-width:880px){
  .hero-pin{left:79%;top:75%;width:clamp(38px,10vw,52px)}
}

/* Die Öffnungsampel stand zwischen den Knöpfen und den Kennzahlen
   und hing dort in der Luft. Jonas: „Das musst du noch ein bisschen
   weiter runterrücken, das hängt dann noch so mittendrin."
   Sie steht jetzt UNTER den Kennzahlen — als letzte Zeile des
   Kopfbereichs, wo eine Statusangabe hingehört. */
.za-hero{margin-top:clamp(18px,2.2vw,28px)}

/* ============================================================
   DIE KOPFZEILE BLEIBT DUNKEL — ÜBERALL
   ------------------------------------------------------------
   Jonas nach dem ersten Durchgang: „Der Header soll immer die
   gleiche Farbe haben wie auf der Startseite. Also das soll oben
   trotzdem so bleiben von dem Schwarz, aber dass die Buttons und
   so dann ins Rot wechseln, das finde ich sehr geil."

   Genau so: schwarzes Brett oben wie am Laden, darunter wechselt
   die Farbe. Der Kopf ist der ruhende Pol, nicht das Bunte.
   ============================================================ */
.nav{background:#0B1117;border-bottom:1px solid rgba(255,255,255,.08)}
.nav.stuck{background:rgba(8,13,19,.96)}
body[data-hell] .nav,
body[data-hell] .nav.stuck{
  background:#0B1117;
  border-bottom-color:rgba(255,255,255,.08);
}
/*  Der Kopf bekommt die KOMPLETTE dunkle Palette zurück — nicht nur
    die Textfarben.

    Warum das wichtig ist: hinter „Oberwiesenthal am Fichtelberg" saß
    plötzlich ein weißer Kasten. Ursache war nicht diese Zeile, sondern
    eine Regel weiter unten im Grundgerüst, die dort `var(--bg)` als
    Fläche setzt. Auf der hellen Seite ist `--bg` weiß — also wurde der
    Kasten weiß, während die Schrift hell blieb.

    Genau deshalb reicht es nicht, `--text` und `--snow` zu setzen.
    Jede Variable, die eine FLÄCHE beschreibt, muss hier ebenfalls
    zurückgedreht werden, sonst greift irgendwo die helle Fassung durch
    und man sucht den Fehler an der falschen Stelle. */
body[data-hell] .nav,
body[data-hell] .drawer,
body[data-hell] .nav .sub{
  --night:#070C12;
  --bg:#0A1017;
  --bg-2:#0D141D;
  --panel:#111A24;
  --panel-2:#16212C;
  --snow:#F4F9FD;--text:#D7E1EA;--soft:#AEBCC8;--dim:#AEBCC8;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.20);
  --line-3:rgba(255,255,255,.34);
  color:var(--text);
}
/*  Der Zusatz neben dem Logo. Er trug auf den hellen Seiten eine
    weiße Fläche — hier ausdrücklich keine. */
body[data-hell] .brand .sub{
  background:none;
  color:#AEBCC8;
  border-left-color:rgba(255,255,255,.2);
}
/*  Der Reservieren-Knopf im Kopf trägt die Bereichsfarbe — das ist
    die Stelle, an der die Farbe im Kopf auftaucht. */
body[data-hell] .nav .btn-ice{
  background:linear-gradient(135deg,var(--bereich),var(--bereich-tief,var(--bereich)));
  color:#fff;border-color:transparent;
}

/* Der Bereichskasten schließt bündig an die Kopfzeile an. Weil die
   jetzt einen eigenen Grund hat, darf der Kasten nicht mehr unter
   sie laufen — sonst entsteht ein Farbstreifen hinter dem Logo. */
.bk-grid{padding-top:0}
.bk{margin-top:var(--nav-h)}

/* ============================================================
   DER BEREICHSKASTEN
   ------------------------------------------------------------
   Links Farbe und große Tasten, rechts das Foto — der Aufbau,
   den Renés Gäste von der alten Seite kennen.

   Die Farbfläche nimmt die tiefe Fassung der Bereichsfarbe
   (--bereich-tief). Warum, steht ausführlich in build.py bei
   bereichs_kasten(): weiß auf dem hellen Grün des Aufstellers
   sind 2,9:1, auf der tiefen Fassung 5,6:1.
   ============================================================ */

/* Die tiefe Fassung jeder Bereichsfarbe — überall dort, wo weißer
   Text auf der Farbe liegt. Gilt unabhängig davon, ob die Seite
   hell oder dunkel läuft.

     Weiß auf …    hell        tief
     Verleih       #D8232A 4,6  #A81A20 7,6
     Service       #1B87C9 4,0  #116190 6,0
     Skischule     #5FA82A 2,9  #3E7019 5,6
     Shop          #EE8B1C 2,3  #A85D08 5,2

   Die linke Spalte zeigt, warum es die rechte gibt. */
body[data-bereich="verleih"]  {--bereich-tief:#A81A20}
body[data-bereich="service"]  {--bereich-tief:#116190}
body[data-bereich="skischule"]{--bereich-tief:#3E7019}
body[data-bereich="shop"]     {--bereich-tief:#A85D08}

.bk{position:relative;background:var(--bereich-tief,var(--bereich))}
.bk-grid{
  display:grid;
  grid-template-columns:minmax(340px,42%) 1fr;
  min-height:min(78vh,720px);
}
.bk-panel{
  display:flex;flex-direction:column;justify-content:center;
  gap:22px;
  padding:clamp(30px,4vw,58px) clamp(24px,3.4vw,56px);
  background:var(--bereich-tief,var(--bereich));
  color:#fff;
}
.bk-h1{
  font-family:var(--disp);font-weight:800;
  font-variation-settings:'wdth' 104;
  font-size:clamp(1.9rem,3.4vw,3rem);
  line-height:1.04;letter-spacing:-.01em;
  color:#fff;margin:0;
}

/* Die Treppe der Aufklapp-Boxen.

   <details>/<summary> bringt sein eigenes Dreieck mit. Das muss weg —
   wir haben einen eigenen Pfeil, der sich dreht. In Safari heißt der
   Schalter anders als überall sonst, deshalb beide Zeilen. */
.bk-liste{display:flex;flex-direction:column;gap:8px}
/*  DIE AUFHELLUNG GEHT NACH UNTEN, NICHT NACH OBEN.

    Die Kästen lagen als weisser Schleier auf der Bereichsfarbe: .15 zu,
    .22 offen, .26 beim Zeigen. Die Schrift darauf ist weiss — jeder
    Prozentpunkt Aufhellung nimmt ihr also Kontrast. Gemessen am
    18.08.2026 an den gerenderten Bildpunkten:

        depot.html    „STRESSFREIE ANREISE"   3,83 : 1  (gefordert 4,5)
        sportshop     „DER WANDERSPEZIALIST"  3,80 : 1
        depot.html    Fliesstext im Kasten     3,59 : 1

    Ein dunkler Schleier statt eines hellen bringt dieselbe Abhebung —
    der Kasten setzt sich weiter vom Band ab — und schiebt den Kontrast
    in die richtige Richtung. Der Rahmen bleibt hell, damit die Kante
    sichtbar bleibt; er trägt keine Schrift.

    Reihenfolge beibehalten: zu → offen → Zeigen wird jeweils DUNKLER,
    vorher wurde es jeweils heller. Wer das umdreht, dreht auch die
    Lesbarkeit um.  */
.bk-p{
  border-radius:12px;
  background:rgba(6,14,22,.14);
  border:1px solid rgba(255,255,255,.22);
  transition:background .25s,border-color .25s;
}
.bk-p[open]{background:rgba(6,14,22,.22);border-color:rgba(255,255,255,.4)}
.bk-p > summary,
.bk-p--link{
  display:flex;align-items:center;gap:14px;
  /* 56 px — im Handschuh und auf dem Handy zu treffen. */
  min-height:56px;padding:10px 18px;
  cursor:pointer;list-style:none;
  color:#fff;text-decoration:none;
  font-family:var(--disp);font-weight:800;
  /* Renés Titel sind Versalien. In Versalien braucht Text mehr Luft
     zwischen den Zeichen, sonst klebt er — und eine Spur kleiner,
     weil Großbuchstaben optisch größer wirken als Gemischtschrift. */
  font-size:clamp(.92rem,1.1vw,1.02rem);
  letter-spacing:.055em;
  text-transform:uppercase;
}
.bk-p > summary::-webkit-details-marker{display:none}
.bk-p > summary::marker{content:""}
.bk-p:hover,.bk-p--link:hover{
  background:rgba(6,14,22,.30);
  border-color:rgba(255,255,255,.5);
}
.bk-t{flex:1}

/* Der Pfeil zeigt nach rechts, wenn die Box zu ist, und nach unten,
   wenn sie offen ist. Das ist die einzige Rückmeldung, die es braucht. */
.bk-pfeil{
  flex:none;display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.2);
  transition:transform .3s var(--ease-out);
}
.bk-p[open] .bk-pfeil{transform:rotate(90deg)}
.bk-pfeil svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* Der Text unter dem aufgeklappten Titel. */
.bk-p > p{
  margin:0;padding:0 18px 16px 56px;
  color:rgba(255,255,255,.94);
  font-size:.97rem;line-height:1.55;
}
@media (max-width:520px){
  .bk-p > p{padding-left:18px}
}
@media (prefers-reduced-motion:reduce){
  .bk-pfeil{transition:none}
}

.bk-lead{
  margin:0;color:rgba(255,255,255,.94);
  font-size:1.02rem;line-height:1.55;max-width:46ch;
}
.bk-cta{display:flex;flex-wrap:wrap;gap:12px}

/* Der Knopf im Kasten ist dunkel, wie im Original das schwarze
   „Jetzt Termin vereinbaren" — er hebt sich von der Farbfläche ab,
   ohne eine zweite Farbe einzuführen. */
/*  Die Auswahl muss body[data-hell] mitnehmen, sonst verliert sie.
    Was hier passiert ist: die helle Fassung färbt .btn-ice mit einem
    Verlauf in der Bereichsfarbe und .btn-ghost mit der tiefen Fassung.
    Auf der Farbfläche des Kastens hieß das rot auf rot — beide Knöpfe
    waren leere Umrisse. Am Bildschirm gesehen, nicht im Kopf. */
.bk .btn-ice,.bk .btn-flut,
body[data-hell] .bk .btn-ice,body[data-hell] .bk .btn-flut{
  background:#101820;background-image:none;
  color:#fff;border-color:#101820;box-shadow:none;
}
.bk .btn-ice:hover,.bk .btn-flut:hover,
body[data-hell] .bk .btn-ice:hover,body[data-hell] .bk .btn-flut:hover{
  background:#000;background-image:none;box-shadow:none;
}
.bk .btn-ghost,
body[data-hell] .bk .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.bk .btn-ghost:hover,
body[data-hell] .bk .btn-ghost:hover{background:rgba(255,255,255,.16)}

.bk-bild{position:relative;overflow:hidden}
.bk-bild .ph{position:absolute;inset:0;background:none}
.bk-bild img{width:100%;height:100%;object-fit:cover}

/* Auf dem Handy: erst die Farbe mit den Tasten, dann das Foto.
   Andersherum müsste man an einem Bild vorbeiscrollen, um zu
   erfahren, was es hier überhaupt gibt. */
@media (max-width:900px){
  .bk-grid{grid-template-columns:1fr;min-height:0}
  .bk-panel{padding:clamp(26px,6vw,40px) var(--gut) clamp(30px,6vw,44px)}
  .bk-bild{min-height:52vw;max-height:420px}
  .bk-bild .ph{position:relative;inset:auto;height:100%}
  .bk-h1{font-size:clamp(1.7rem,7vw,2.3rem)}
}

/* ============================================================
   HELLE UNTERSEITEN
   ------------------------------------------------------------
   Nur aktiv, wenn data.UNTERSEITEN_HELL True ist — dann trägt
   der <body> zusätzlich data-hell. Ein Schalter, kein Umbau:
   auf False sieht alles wieder aus wie vorher.

   Was hier passiert, ist bewusst kein zweites Design. Es sind
   dieselben Bausteine auf hellem Grund, mit der Bereichsfarbe
   als einzigem Akzent. Die Kontraste sind gegen die Vorgabe
   4,5:1 für Fließtext gerechnet, nicht geschätzt:

     Text   #2A3138 auf #F4F6F8  → 11,4:1
     Leise  #55606B auf #F4F6F8  →  5,6:1
     Weiß   auf #D8232A (Verleih) → 4,6:1
     Weiß   auf #1B87C9 (Service) → 4,0:1  ← nur für große Schrift
     Weiß   auf #5FA82A (Skischule) → 2,9:1 ← nie für Text
     Weiß   auf #EE8B1C (Shop)     → 2,3:1 ← nie für Text

   Deshalb die harte Regel weiter unten: die Bereichsfarbe ist
   Fläche, Linie und Rahmen — aber nie Grund für kleinen Text.
   Für Text auf farbiger Fläche gibt es --bereich-tief.
   ============================================================ */

body[data-hell]{
  --night:#E8ECF0;
  --bg:#F4F6F8;
  --bg-2:#EDF1F5;
  --panel:#FFFFFF;
  --panel-2:#F7F9FB;

  --snow:#141A20;
  --text:#2A3138;
  --soft:#55606B;
  --dim:#55606B;

  --line:rgba(20,26,32,.10);
  --line-2:rgba(20,26,32,.18);
  --line-3:rgba(20,26,32,.30);

  /*  Der Leitakzent der Seite IST die Bereichsfarbe — aber in der TIEFEN
      Fassung.

      Vorher stand hier `--bereich`. Das ist die Farbe vom Aufsteller, und
      auf einem Band in Vollfläche ist sie richtig. Als SCHRIFT auf dem
      hellen Seitengrund ist sie es nicht: gemessen an den gerenderten
      Bildpunkten am 18.08.2026 auf ski-service.html steht
      rgb(27,135,201) auf rgb(244,246,248) bei 3,60 : 1 — gefordert sind
      4,5 : 1. Dasselbe auf sportshop („Marken im Sportshop", 2,31 : 1)
      und skischule.

      --bereich-tief ist genau für diesen Fall schon da (siehe oben, die
      vier Zeilen mit #A81A20 / #116190 / #3E7019 / #A85D08); sie war nur
      an die Flächen vergeben, nicht an die Schrift. Mit ihr steht
      derselbe Text bei 6,2 : 1.

      Die Flächen bleiben unberührt: wo --ice Hintergrund ist, regelt der
      Hell-Schalter das weiter unten eigens (.btn-ice, .chip, .tag). Und
      die dunklen Bauteile (Kopfzeile, Bereichskasten, Dock, Fussbereich)
      hängen gar nicht an diesem Zweig — sie bleiben beim hellen Eis.  */
  --ice:var(--bereich-tief,var(--bereich));
  /*  Aus demselben Grund wie --ice eine Zeile darüber. --accent trägt
      auf hellen Seiten die kleinen Vorspann-Zeilen (.vt h3, .tb-sub) und
      die Textlinks — gemessen 3,63 : 1 in Blau, 2,73 : 1 in Grün. Als
      Fläche kommt --accent nur an vier winzigen Stellen vor (zwei
      Punkte, zwei gedrehte Quadrate, alle ohne Schrift darauf); die
      werden dadurch dunkler und bleiben richtig.  */
  --accent:var(--bereich-tief,var(--bereich));
  --cur-accent:var(--bereich-rgb);

  background:var(--bg);
  color:var(--text);
}

/* Eine dunklere Fassung der Bereichsfarbe für alles, worauf
   weißer Text liegt. Grün und Orange sind auf Weiß schlicht zu
   hell — das ist keine Geschmacksfrage. */
/*  (Die tiefen Fassungen stehen weiter oben, unabhängig vom
    Hell-Schalter — der Bereichskasten braucht sie in jedem Fall.) */

/*  DAS FLUTLICHT-ORANGE AUF WEISS — dieselbe Falle wie beim Bildbruch,
    nur eine Farbe weiter.

    `--flut` (#FFB25C) ist für den Nachthimmel gemacht. Der Hell-Schalter
    oben schreibt --snow, --text, --soft, --dim und --ice um, --flut aber
    nicht. Auf den Bereichsseiten steht dieses Orange dadurch auf weissen
    Karten und in hellen Tabellen.

    Gemessen am 18.08.2026 an den gerenderten Bildpunkten, skiverleih.html:
        „ab 4 € / Tag"        1,65 : 1   (gefordert 4,5)
        die Sterne ★★★★★      1,83 : 1
        „Online-Rabatt 10 %"  1,83 : 1
    Das ist nicht knapp daneben, das ist unlesbar.

    #A05E00 ist dieselbe Farbfamilie, nur so weit abgedunkelt, dass sie
    trägt: 5,1 : 1 auf Weiss, 4,7 : 1 auf dem Kartengrau #F4F6F8.

    ABSICHTLICH NICHT `--flut` selbst umgeschrieben: dieselbe Farbe ist an
    zehn Stellen FLÄCHE mit dunkler Schrift darauf (Ampelpunkt, Schalter,
    Fortschrittsbalken, Dock-Marke). Ein Umschreiben des Tokens hätte dort
    dunkel auf dunkel ergeben — der Fehler, den wir gerade beheben, nur
    spiegelverkehrt. Deshalb ein zweites Token nur für Schrift, und nur
    dort gesetzt, wo hell wirklich hell ist. Das Dock und der
    Bereichskasten bleiben auch auf hellen Seiten dunkel und behalten
    darum das helle Orange. */
body[data-hell]{--flut-schrift:#A05E00;--pine-schrift:#3F6B4F}
/*  Dasselbe eine Farbe weiter: --pine (#7FA98C) ist das Sommergrün und
    für den Nachthimmel gemacht. Auf der American-Sale-Seite steht damit
    „du sparst 59,70 €" auf hellem Grund bei 2,19 : 1 — die Zeile, die
    dem Gast den Vorteil nennt, war die schwächste der Seite.
    #3F6B4F ist dasselbe Grün, tragfähig: 6,0 : 1.  */
body[data-hell] .sr-spar{color:var(--pine-schrift)}
body[data-hell] .stern .st,
body[data-hell] .tbl-ab,
body[data-hell] .ab-zeit,
body[data-hell] .out-list li.save span,
body[data-hell] .rev-score .s,
body[data-hell] .rev .stars,
body[data-hell] .hinweis b,
body[data-hell] .kon-card .tag.warm{color:var(--flut-schrift)}

/* Der Nachthimmel-Hintergrund gehört zur dunklen Seite. */
body[data-hell] .ambient{display:none}

/* (Die Kopfzeile bleibt dunkel — geregelt weiter oben, ausdrücklich
    unabhängig vom Hell-Schalter.) */

/* Flächen: weiße Karten mit einer Linie, keine Schatten-Orgie. */
body[data-hell] .card,
body[data-hell] .panel{
  background:var(--panel);
  border-color:var(--line-2);
  box-shadow:0 1px 2px rgba(20,26,32,.04);
}

/* Der Abschnittskopf hat bereits eine Akzentlinie, die auf --accent
   hört. Da --accent oben auf die Bereichsfarbe gesetzt ist, färbt sie
   sich von selbst — hier ist deshalb NICHTS zu tun. Eine zusätzliche
   Kante wäre doppelt gemoppelt und hätte die Linie verdeckt. */
body[data-hell] .eyebrow{color:var(--bereich-tief,var(--bereich))}

/* Knöpfe.
   ACHTUNG: die Klassen heißen .btn-ice und .btn-ghost, nicht
   .btn.ice — der erste Anlauf traf ins Leere, und der Knopf blieb
   eisblau auf einer roten Seite. Am Bildschirm nachgesehen, nicht
   aus dem Kopf geschrieben. */
body[data-hell] .btn-ice{
  background:linear-gradient(135deg,var(--bereich),var(--bereich-tief,var(--bereich)));
  color:#fff;
  box-shadow:0 10px 30px -12px rgba(var(--bereich-rgb),.55);
}
body[data-hell] .btn-ice:hover{
  box-shadow:0 18px 44px -14px rgba(var(--bereich-rgb),.7);
}
body[data-hell] .btn-ghost{
  color:var(--bereich-tief,var(--bereich));
  border-color:var(--line-3);
  background:transparent;
}
body[data-hell] .btn-ghost:hover{background:rgba(var(--bereich-rgb),.08)}

/* ------------------------------------------------------------
   Die dunkle Insel: der Hero.
   ------------------------------------------------------------
   Der Hero ist ein Foto mit einem kräftigen dunklen Verlauf
   darüber. Dort gilt die helle Palette NICHT — sonst steht die
   Überschrift in #141A20 auf einem fast schwarzen Bild, und man
   liest sie schlicht nicht mehr. Genau das war beim ersten
   Durchlauf zu sehen: „Skiverleih" war unsichtbar, nur die zweite
   Zeile in der Bereichsfarbe stand da.

   Gelöst nicht mit einer Handvoll Einzelregeln, sondern indem der
   Hero die dunklen Werte zurückbekommt. Alles darin — Überschrift,
   Vorspann, Kennzahlenzeile, Ampel — zieht damit automatisch mit,
   auch das, was später dazukommt.
   ------------------------------------------------------------ */
body[data-hell] .hero{
  --snow:#F4F9FD;
  --text:#D7E1EA;
  --soft:#AEBCC8;
  --dim:#AEBCC8;
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.24);
  --line-3:rgba(255,255,255,.38);
  --panel:rgba(12,18,25,.55);
  --panel-2:rgba(12,18,25,.4);
  color:var(--text);
}
/* Die zweite Zeile der Überschrift trägt die Bereichsfarbe. Auf dem
   dunklen Verlauf ist die volle Farbe richtig, nicht die tiefe. */
body[data-hell] .hero h1 .l2,
body[data-hell] .hero .tint{color:var(--bereich)}
/* Im Hero bleibt der Geisterknopf hell — dort steht er auf dem Foto. */
body[data-hell] .hero .btn-ghost{
  color:#F4F9FD;
  border-color:rgba(255,255,255,.38);
}
body[data-hell] .hero .btn-ghost:hover{background:rgba(255,255,255,.12)}


/* ============================================================
   DIE ABFAHRT
   ------------------------------------------------------------
   Ein Berg, eine Spur, eine Figur, die beim Scrollen hinunter
   fährt — und drei Zahlen, die unterwegs aufgehen.

   Der Kasten ist bewusst so hoch wie ein Foto und nicht so hoch
   wie eine Seite: ein Vorläufer über zwei Bildschirmhöhen ist
   zweimal durchgefallen. Die Begründung steht im Generator.

   `currentColor` trägt hier alles — Berg, Kamm, Spur, Figur.
   Damit nimmt die Zeichnung automatisch die Bereichsfarbe an:
   rot beim Verleih, blau beim Service. Eine Datei, vier Farben,
   keine Sonderregel.
   ============================================================ */
.ab{
  position:relative;
  /* KEIN overflow:hidden hier — das würde das Ankleben der Bühne
     abschalten. Die Rundung sitzt deshalb an den Teilen selbst. */
  border-radius:var(--r-l);
}

/* ------------------------------------------------------------
   DER SCROLLWEG
   ------------------------------------------------------------
   Jonas: „Das scrollt auch nicht ganz sauber runter, das muss ja
   noch ein bisschen mehr runterscrollen."

   Vorher lief die ganze Fahrt ab, während der Kasten einmal durchs
   Fenster wanderte — bei einem flachen Streifen sind das ein paar
   hundert Pixel, und die Fahrt war vorbei, ehe man sie gesehen hat.

   Jetzt bekommt sie eine eigene Strecke: dieser Behälter ist gut
   zwei Bildschirme hoch, die Bühne darin klebt oben fest. Man
   scrollt also zwei Bildschirme weit, und die ganze Zeit fährt das
   Bild — statt dass es an einem vorbeihuscht.
   ------------------------------------------------------------ */
/*  130 vh, nicht mehr 220. Gemessen am 18.08.2026: die Bergfahrt war
    mit 2,95 Bildschirmen der LÄNGSTE Abschnitt der Startseite — länger
    als der Kopfbereich und die drei Leistungsbereiche zusammen. Dafür
    sagt sie eine Sache, die im Kopfbereich schon steht („0 m bis an
    den Hang").

    Der Fahrweg des Bildes ändert sich dadurch nicht, nur die Strecke,
    über die er verteilt ist. Bei 1400 × 900 sind das statt 1.331 px
    Klebestrecke noch 671 px — die Fahrt wird doppelt so zügig und
    bleibt eine Fahrt.

    Auf dem Handy stehen 120 vh (weiter unten, eigene Begründung mit
    eigener Rechnung). Nicht zusammenlegen: dort ist der Fahrweg ein
    anderer, weil die Lupe fehlt.  */
.ab-fahrt{height:130vh}
.ab-buehne{
  position:sticky;
  top:calc(var(--nav-h) + 18px);
  border-radius:var(--r-l);
  border:1px solid var(--line-2);
}
/* Die Bühne ist das Foto.

   DAS SEITENVERHÄLTNIS IST GERECHNET, NICHT GEWÄHLT. Wie weit der
   Ausschnitt wandern kann, hängt davon ab, wie viel Bild über den
   Rahmen hinaussteht — und das wird bei einem breiten Foto umso
   mehr, je FLACHER der Rahmen ist. Für das Ortspanorama (2048 × 1446):

       Rahmen   Fahrweg   Anteil der Rahmenhöhe
       16/9       169 px   30 %   ← zu wenig, man sieht kaum etwas
       21/9       327 px   76 %
       12/5       341 px   82 %

   Bei 16/9 war die Fahrt kaum wahrnehmbar. 21/9 ist der Punkt, an dem
   sie trägt, ohne dass der Streifen zur Briefmarke wird.

   Auf dem Handy ist der Rahmen schmal, dort steht ohnehin genug Bild
   über — deshalb dort 4/3, das sich besser anfühlt als ein Schlitz. */
.ab-buehne{aspect-ratio:21/9;overflow:hidden}
.ab-buehne .ph{position:absolute;inset:0;background:none}
.ab-buehne img{
  width:100%;height:100%;object-fit:cover;
  /* Eine Spur größer als nötig — das verlängert den Fahrweg um ein
     Fünftel, ohne dass je ein leerer Rand entstehen kann. */
  transform:scale(1.26);
  /* Die Verschiebung setzt das Skript. Der Übergang glättet nur die
     Sprünge zwischen zwei Bildaufbauten — die Fahrt selbst kommt vom
     Scrollen, nicht von dieser Zeile. */
  transition:object-position .12s linear;
  will-change:object-position;
}
/* Ein Hauch Tiefe: oben und unten dunkler, damit das Bild einen Rahmen
   hat und die Marke unten lesbar bleibt. */
.ab-tiefe{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(6,10,15,.30),rgba(6,10,15,0) 34%,
                             rgba(6,10,15,0) 58%,rgba(6,10,15,.52));
}

/* Der Zeiger auf das Haus.

   Er sitzt an einem Punkt IM BILD, nicht im Rahmen — die Position
   rechnet abfahrt.js bei jedem Bildaufbau neu aus. Deshalb stehen
   hier keine Koordinaten: left und top setzt das Skript.

   Die Spitze des Zeigers zeigt auf den Punkt, deshalb wird er um
   seine volle Höhe nach oben versetzt. Die Beschriftung steht
   darüber, damit sie nichts verdeckt, worauf gezeigt wird. */
.ab-marke{
  position:absolute;z-index:3;
  transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease-out);
}
.ab-marke.sichtbar{opacity:1}
.ab-pin{
  display:block;width:clamp(22px,2.2vw,30px);
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.55));
  animation:abWippe 2.6s var(--ease-out) infinite;
}
.ab-pin svg{width:100%;height:auto;display:block}
.ab-pin path{fill:#D8232A}
.ab-pin circle{fill:#fff}
/* Ein ruhiges Wippen — gerade genug, dass das Auge hinfindet.
   Kein Blinken: es soll zeigen, nicht rufen. */
@keyframes abWippe{
  0%,70%,100%{transform:translateY(0)}
  80%{transform:translateY(-5px)}
  90%{transform:translateY(-2px)}
}
.ab-marke-t{
  padding:6px 13px;border-radius:999px;
  background:rgba(7,12,18,.86);backdrop-filter:blur(8px);
  color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8);
}
@media (max-width:560px){
  .ab-marke-t{font-size:9.5px;padding:5px 10px;letter-spacing:.08em}
  /*  DIE BESCHRIFTUNG WANDERT NACH LINKS.

      Das markierte Haus liegt bei 79 % der Bildbreite. Die Fahne steht
      mittig über dem Zeiger — auf einem 350 px breiten Rahmen ragt sie
      damit rechts hinaus und wird abgeschnitten. Gesehen am 18.08.2026
      im Bildschirmfoto bei 390 px: „HIER IST DAS STARTHAU|".

      Statt die Fahne zu kürzen (dann steht dort weniger, als gemeint
      ist) hängt sie sich jetzt links an den Zeiger: die Marke wird an
      ihrem rechten Rand ausgerichtet, die Fahne bekommt einen kleinen
      Versatz nach links. Der Zeiger selbst bleibt exakt auf dem Punkt,
      den abfahrt.js ausrechnet — nur der Text steht daneben statt
      darüber.

      Die Rechnung: die Marke wird rechtsbündig gesetzt und um ihre
      volle Breite nach links geschoben, plus die halbe Zeigerbreite
      zurück (11 px — clamp(22px,2.2vw,30px) ergibt bei 390 px genau
      22 px). Damit sitzt die Zeigerspitze weiterhin exakt auf dem
      Punkt, den abfahrt.js ausrechnet. Der Fahne gibt ein Abstand von
      16 px nach rechts Luft, damit sie nicht an der Kante klebt.

      Auf dem großen Schirm bleibt alles wie es war; dort ist Platz.  */
  .ab-marke{align-items:flex-end;transform:translate(calc(-100% + 11px),-100%)}
  .ab-marke-t{margin-right:16px}
}
@media (prefers-reduced-motion:reduce){
  .ab-pin{animation:none}
}

.ab-stationen{
  list-style:none;margin:0;padding:clamp(16px,2.2vw,26px);
  border-radius:0 0 var(--r-l) var(--r-l);
  border:1px solid var(--line-2);border-top:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px 20px;
  background:var(--panel);
  border-top:1px solid var(--line-2);
}
.ab-station{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);
}
.ab-station.da{opacity:1;transform:none}
.ab-wert{
  display:block;
  font-family:var(--disp);font-weight:800;
  font-variation-settings:'wdth' 112;
  font-size:clamp(1.35rem,2.6vw,2rem);line-height:1;
  color:var(--snow);
}
.ab-wert em{
  font-style:normal;font-size:.5em;margin-left:.28em;
  color:var(--bereich,var(--ice));
}
.ab-txt{
  display:block;margin-top:6px;
  font-size:.92rem;line-height:1.45;color:var(--soft);
}
@media (max-width:640px){
  .ab-stationen{grid-template-columns:1fr;gap:10px}
  /*  DIE FAHRT WIRD KÜRZER — nachgerechnet, nicht nach Gefühl.

      Jonas am 18.08.2026: „Desktop ist das cool, aber auf der
      Mobilversion ist das ein bisschen komisch mit dem Scrollen.
      Vielleicht kann man das ein bisschen schneller machen."

      Er hat recht, und die Zahlen sagen warum. Der Fahrweg beträgt auf
      dem Telefon 80 px (siehe unten: keine Lupe, damit der Zeiger
      überhaupt ins Bild kommt). Diese 80 px wurden bisher über
      220 vh = 1.857 px Scrollweg verteilt — ein Bildpunkt Bewegung je
      23 Bildpunkte Daumen. Das liest sich nicht als Fahrt, sondern als
      stehendes Bild, an dem man sehr lange vorbeischiebt.

      120 vh sind gut ein Bildschirm: ein Bildpunkt je 12,7. Damit
      bewegt sich sichtbar etwas, und die Szene ist nach einem
      Wischer durch statt nach dreien.

      Auf dem großen Schirm bleibt es bei 220 vh — dort trägt die
      lange Fahrt, und dort hat sie auch niemand beanstandet.  */
  .ab-fahrt{height:120vh}
  /* NICHT 4/3 — dort steht die Fahrt still.
     Das Bild ist 2048 × 1446, also 1,42 breit. Ein Rahmen, der
     SCHMALER ist als das Bild (4/3 = 1,33), wird beim Füllen an den
     Seiten beschnitten statt oben und unten — es bleibt kein
     Überstand zum Verschieben übrig. Nachgerechnet bei 390 px:

         Rahmen   Fahrweg   Anteil der Rahmenhöhe
         4/3          0 px    0 %   ← das Bild stand still
         16/9        71 px   32 %
         2/1        101 px   52 %

     2/1 ist die Stufe, bei der die Fahrt auf dem Handy trägt, ohne
     dass der Streifen zu flach wird. */
  .ab-buehne{aspect-ratio:2/1}
  /* KEINE Vergrößerung auf dem Handy.
     Die Lupe schiebt jeden Punkt von der Rahmenmitte weg — und das
     markierte Haus liegt weit unterhalb der Mitte. Auf dem kleinen
     Rahmen drückt sie es dadurch unter die Kante, wo der Zeiger nie
     zu sehen ist. Nachgemessen bei 390 × 195:

         Lupe   Zeiger y   Grenze
         1,26      193       185   verdeckt
         1,12      182       185   knapp
         1,00      173       185   sichtbar

     Der Fahrweg schrumpft dadurch von 101 auf 80 px — das ist der
     Preis dafür, dass das Ziel überhaupt ankommt. */
  .ab-buehne img{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .ab-buehne img,.ab-station,.ab-marke{transition:none}
  /* Wer keine Bewegung will, soll auch nicht zwei Bildschirme weit
     an einem stehenden Bild vorbeiscrollen müssen. */
  .ab-fahrt{height:auto}
  .ab-buehne{position:relative;top:auto}
}

/* Auf hellem Grund bleibt die Bühne ein Foto; nur der Sockel mit den
   Zahlen wird hell. */
body[data-hell] .ab{border-color:var(--line-2);box-shadow:0 1px 2px rgba(20,26,32,.05)}
body[data-hell] .ab-stationen{background:#fff;border-top-color:var(--line-2)}
body[data-hell] .ab-wert{color:#141A20}
body[data-hell] .ab-txt{color:#55606B}

/* ============================================================
   „DAS WIRD DEIN WINTER" — DER ABBINDER
   ------------------------------------------------------------
   Aufbau wie im Original: das Foto füllt die volle Breite, der
   Satz steht groß darauf. Kein Kasten, kein Rand, keine Kacheln.

   Das Foto ist dasselbe wie auf Renés Seite: der Blick von oben
   die Piste hinunter, mit den Schleppliften und dem Ort dahinter.

   Der Verlauf darüber ist kein Effekt, sondern Handwerk. Die
   untere Bildhälfte ist präparierter Schnee — fast weiß. Weißer
   Text darauf wäre dort schlicht weg.

   Nachgemessen am Bildpunkt, nicht geschätzt: das Foto wurde so
   beschnitten, wie der Browser es tut (cover, 50 % / 44 %, Kasten
   1512 × 700), beide Verläufe darübergelegt und die Helligkeit
   Punkt für Punkt gerechnet. Ergebnis unter dem Schriftzug:

     hellster Punkt   Kontrast  5,06:1
     Mittel                    13,40:1
     Vorspanntext              10,59:1
     Feindruck (AGB)            6,79:1

   Gefordert sind 4,5:1 für Fließtext und 3,0:1 für große Schrift.
   Der ungünstigste Punkt liegt über beidem — und das ist der
   Punkt, auf den es ankommt, nicht der Durchschnitt.

   WER DAS BILD TAUSCHT, MUSS NEU MESSEN. Ein Foto mit hellem
   Himmel unten links kippt diese Rechnung sofort.

   Die Einblendung: die beiden Zeilen kommen von unten herein,
   leicht gedreht und unscharf, um 90 ms versetzt. Ausgelöst wird
   sie über `.in`, das der Beobachter in app.js setzt, sobald der
   Abschnitt ins Bild kommt. Wer Bewegung abgestellt hat, sieht
   den Satz sofort und ruhig stehen — das ist keine Ausnahme,
   sondern gehört dazu.
   ============================================================ */
.winter{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(88vh,760px);
  display:flex;align-items:flex-end;
  padding:clamp(48px,7vw,110px) 0 clamp(36px,5vw,72px);
}
.wi-bild{position:absolute;inset:0;z-index:-2}
.wi-bild .ph{position:absolute;inset:0;background:none}
.wi-bild img{width:100%;height:100%;object-fit:cover}
.wi-bild::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,10,15,.28) 0%,rgba(6,10,15,.10) 26%,
                    rgba(6,10,15,.55) 62%,rgba(6,10,15,.88) 100%),
    linear-gradient(90deg,rgba(6,10,15,.55) 0%,rgba(6,10,15,.10) 62%);
}
/*  KEIN width:100% hier.
 *
 *  `.wi-inhalt` trägt zugleich die Klasse `.wrap`, und die setzt die
 *  Breite selbst — als min(Maximalbreite, 100 % minus zweimal Rand).
 *  Ein `width:100%` daneben gewinnt und hebelt genau diesen Rand aus.
 *
 *  Gemessen bei 518 px Fensterbreite: der Schriftzug saß bei left 0
 *  und war 518 px breit, klebte also an beiden Bildschirmkanten. Die
 *  zweite Zeile lief mit ihrer Einrückung 1 px über den rechten Rand
 *  hinaus. Am Rechner fiel es nicht auf, weil dort die Maximalbreite
 *  vorher greift — auf dem Handy sofort. */
.wi-inhalt{position:relative;z-index:1}

/*  Bis zum 13.08.2026 stand hier weight 700, style italic und
 *  'wdth' 96 — drei Kniffe, um Archivo wie eine Schreibschrift
 *  aussehen zu lassen. Jetzt liegt die echte Pinselschrift vor
 *  (StarthausSchreib, siehe base.css), und die Kniffe werden zum
 *  Problem: Fett wird künstlich nachgefettet, Kursiv künstlich
 *  nachgeneigt — eine ohnehin schräge Schrift kippt dann weg und
 *  die Buchstaben laufen ineinander.
 *
 *  Deshalb: normale Lage, normales Gewicht, kein Zusammenrücken.
 *  Die Schrift bringt ihre Neigung selbst mit. Die Zeilenhöhe steigt
 *  leicht von .86 auf .92 — Schreibschriften haben lange Unterlängen,
 *  und bei .86 schnitt das „g" von „wird" in die zweite Zeile.
 */
.wi-schrift{
  margin:0;
  font-family:var(--schreib);
  /*  Yellowtail bringt Neigung und Schwung selbst mit — kein
      künstliches Fett, kein künstliches Kursiv. Beides würde eine
      ohnehin schräge Schrift ein zweites Mal neigen und die
      Buchstaben ineinanderlaufen lassen.
      Zeilenhöhe .95: Schreibschriften haben lange Unterlängen. */
  font-weight:400;
  font-style:normal;
  font-size:clamp(3.2rem,10vw,8.5rem);
  line-height:.95;
  letter-spacing:0;
  color:#fff;
  text-shadow:0 8px 40px rgba(0,0,0,.45);
}
.wi-schrift span{display:block}
/* Die zweite Zeile rückt ein — wie beim handgeschriebenen Original,
   wo „Winter" unter der Mitte von „Das wird dein" beginnt.
   Die Einrückung wächst mit dem Fenster, hört aber bei 150 px auf:
   sonst schiebt sie auf einem schmalen Gerät das längere Wort über
   die rechte Kante. */
.wi-z2{margin-left:clamp(14px,6vw,150px)}

/* Der Einflug. */
.wi-schrift span{
  opacity:0;
  transform:translateY(46px) rotate(2.2deg);
  filter:blur(9px);
  transition:opacity .9s var(--ease-out),
             transform 1.05s var(--ease-out),
             filter .9s var(--ease-out);
}
.winter .rv.in .wi-z1{transition-delay:.05s}
.winter .rv.in .wi-z2{transition-delay:.19s}
.rv.in .wi-schrift span{
  opacity:1;transform:none;filter:none;
}

.wi-lead{
  margin:clamp(18px,2.4vw,30px) 0 0;
  max-width:46ch;
  font-size:1.02rem;line-height:1.6;
  color:rgba(244,249,253,.92);
}
.wi-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.wi-fein{
  margin:18px 0 0;font-size:12.5px;color:rgba(244,249,253,.62);
}
.wi-fein a{color:rgba(244,249,253,.86);text-decoration:underline}
.wi-fein a:hover{color:#fff}

/* Der Abbinder ist auf JEDER Seite dunkel — auch auf den hellen.
   Er ist der Übergang in die Fußzeile, und beide gehören zusammen. */
body[data-hell] .winter .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
body[data-hell] .winter .btn-ghost:hover{background:rgba(255,255,255,.14)}
body[data-hell] .winter .btn-flut{
  background:linear-gradient(135deg,#ffc274,#e08a30);color:#2a1502;
  border-color:transparent;
}

@media (prefers-reduced-motion:reduce){
  .wi-schrift span{opacity:1;transform:none;filter:none;transition:none}
}
@media (max-width:700px){
  .winter{min-height:auto;padding:clamp(40px,12vw,64px) 0 44px}
  .wi-z2{margin-left:clamp(14px,6vw,40px)}
}

/* ============================================================
   DIE ZWEI ZIELE FÜRS NAVI
   ------------------------------------------------------------
   Gebaut für den Moment, den René beschreibt: Familie im Auto,
   Beifahrerin sucht auf dem Handy, es muss schnell gehen.

   Deshalb ist die Adresse hier in einer Schreibmaschinenschrift
   gesetzt und nicht im Fließtext. Sie ist keine Prosa, sie ist
   etwas zum Abtippen — und in dieser Schrift verwechselt man
   die 8 nicht mit der 3 und die 1 nicht mit dem l.
   ============================================================ */
/* Der Navi-Block sitzt jetzt IN der Kontaktkarte, direkt unter den
   Knöpfen. Eine eigene Kartenreihe weiter unten wäre dieselbe Adresse
   ein zweites Mal — genau das stand vorher auf der Seite. */
.nv-block{
  margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.nv-merk{margin:0;color:var(--soft);font-size:.94rem;line-height:1.5}
.nv-adresse,.nv-koord{
  width:100%;
  display:flex;flex-direction:column;gap:4px;
  padding:10px 13px;border-radius:11px;
  border:1px solid var(--line-2);
  background:rgba(var(--bereich-rgb,143 211 244),.05);
}
.nv-adresse span,.nv-koord span{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.nv-adresse code,.nv-koord code{
  font-family:var(--mono);font-size:.92rem;color:var(--snow);
  /* Ein Tipp markiert die ganze Adresse — nicht Buchstabe für
     Buchstabe ziehen müssen. */
  user-select:all;-webkit-user-select:all;
  word-break:break-word;
}
body[data-hell] .nv-adresse code,
body[data-hell] .nv-koord code{color:#141A20}

/* Die drei Wege: Auto, Bahn, Parken. Gleichrangig nebeneinander —
   welcher der richtige ist, weiß nur der Gast. */
.nv-wege{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px 28px;
  margin-bottom:clamp(26px,3.4vw,44px);
}
.nv-weg h3{
  margin:0 0 8px;
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ice);
}
.nv-weg p{margin:0;font-size:.97rem;line-height:1.6;color:var(--text);max-width:68ch}
@media (max-width:860px){
  /* Aus drei Spalten wird eine — und damit aus einer 240 px breiten
     Spalte eine 767 px breite Zeile. Gemessen bei 834 px: 88 bis 90
     Zeichen je Zeile. Der Deckel oben greift genau hier; in der
     dreispaltigen Fassung ist er wirkungslos, weil die Spalte ohnehin
     schmaler ist. */
  .nv-wege{grid-template-columns:1fr;gap:18px}
}

/* Der Weg „vor Ort bezahlen" neben dem Buchen-Knopf.
   Satz oben, Knopf darunter — vorher lagen beide im selben Absatz
   und der Knopf schob sich über die letzte Textzeile. */
.vor-ort{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  max-width:38ch;
}
.vor-ort p{margin:0;font-size:.95rem;line-height:1.55;color:var(--soft)}

/* ------------------------------------------------------------
   DIE PREISTABELLEN
   ------------------------------------------------------------
   Das war der auffälligste Bruch. Drei Farben stehen im
   Grundgerüst fest verdrahtet:

     Kopfzeile        #101923
     erste Spalte     linear-gradient(90deg,#131d27 84%, …)
     Spalte im Fokus  #16242f

   Auf der hellen Seite blieben sie schwarz. Die erste Spalte ist
   dabei das eigentliche Ärgernis: sie klebt beim Wischen am Rand
   und läuft nach rechts aus — mit einem dunklen Verlauf über
   hellem Grund heißt das, dass die Variantennamen unter einem
   schwarzen Schleier verschwinden. Genau das war zu sehen.

   Der Verlauf muss bleiben (sonst schneidet die Spalte hart ab,
   wenn darunter Zahlen durchwischen) — er wird nur hell.
   ------------------------------------------------------------ */
body[data-hell] .tbl-scroll{
  background:linear-gradient(160deg,#FFFFFF,#F7F9FB);
  border-color:var(--line-2);
  box-shadow:0 1px 2px rgba(20,26,32,.05);
}
body[data-hell] .tbl thead th{
  background:#EDF1F5;
  color:#55606B;
  border-bottom-color:var(--line-2);
}
body[data-hell] .tbl tbody th{
  color:#141A20;
  background:linear-gradient(90deg,#FFFFFF 84%,rgba(255,255,255,0));
}
body[data-hell] .tbl tbody td{color:#2A3138}
body[data-hell] .tbl tbody td.na{color:#7B8590}
body[data-hell] .tbl tbody td .eur::after{color:#7B8590}

/* Die Zeile unter dem Zeiger: auf hellem Grund trägt ein Hauch der
   Bereichsfarbe weiter als aufgehelltes Weiß. */
body[data-hell] .tbl tbody tr:hover td{
  background:linear-gradient(180deg,
             rgba(var(--bereich-rgb),.10),rgba(var(--bereich-rgb),.05));
  color:#141A20;
  box-shadow:0 1px 0 rgba(var(--bereich-rgb),.22) inset;
}
body[data-hell] .tbl tbody tr:hover th{
  color:var(--bereich-tief,var(--bereich));
  background:linear-gradient(90deg,
             rgba(var(--bereich-rgb),.10) 84%,rgba(255,255,255,0));
  box-shadow:inset 3px 0 0 var(--bereich);
}
body[data-hell] .tbl tbody tr:hover td .eur{text-shadow:none}
body[data-hell] .tbl td.spalte-an{background:rgba(var(--bereich-rgb),.06)}
body[data-hell] .tbl thead th.spalte-an{
  color:var(--bereich-tief,var(--bereich));
  background:rgba(var(--bereich-rgb),.12);
}
body[data-hell] .tbl tbody tr:hover td.spalte-an{
  background:linear-gradient(180deg,
             rgba(var(--bereich-rgb),.18),rgba(var(--bereich-rgb),.10));
}
/* Der günstigste Tarif: das Grün war auf Dunkel gedacht und
   verschwindet auf Weiß fast. Eine Stufe tiefer. */
body[data-hell] .tbl td.bester .eur{color:#3E7019}
body[data-hell] .tbl td.bester::before{background:#3E7019;box-shadow:none}

/* Die Umschalter über den Tabellen („Alle / Nur Sets", die
   Sprungmarken) und die Zubehörlisten hingen an denselben festen
   Werten. */
body[data-hell] .zub-grid li{background:#F7F9FB;color:#2A3138}
body[data-hell] .zub-grid li:hover{background:#EDF1F5;color:#141A20}
body[data-hell] .jump a{
  border-color:var(--line-2);color:#55606B;background:#fff;
}
body[data-hell] .jump a:hover,
body[data-hell] .jump a[aria-current]{
  color:var(--bereich-tief,var(--bereich));
  border-color:var(--bereich);
  background:rgba(var(--bereich-rgb),.08);
}

/* Bildkästen: der Platzhalter hinter jedem Foto war ein dunkles
   Rechteck. Auf hellem Grund blitzt das beim Laden auf. */
body[data-hell] .ph{background:#E8ECF0}

/* Die restlichen fest verdrahteten Dunkelfarben, einzeln
   nachgesehen — nur die, die auf einer hellen Seite tatsächlich
   vorkommen. Pauschal drüberzugehen hätte auch Stellen erwischt,
   die auf einem Foto liegen und dort richtig sind.

   Schieberegler (Preisrechner), Countdown und Eingabefelder des
   American Sale, das Fenster der Bildstrecke, die Chips des
   Kursfinders. */
body[data-hell] input[type=range]::-webkit-slider-thumb{
  background:var(--bereich-tief,var(--bereich));
  border-color:#fff;
  box-shadow:0 0 0 1px rgba(var(--bereich-rgb),.5),
             0 6px 18px -6px rgba(var(--bereich-rgb),.6);
}
body[data-hell] input[type=range]::-moz-range-thumb{
  background:var(--bereich-tief,var(--bereich));
  border-color:#fff;
  box-shadow:0 0 0 1px rgba(var(--bereich-rgb),.5);
}
body[data-hell] .scrub-frame{background:#E8ECF0}
body[data-hell] .cd-teil{background:#fff;border-color:var(--line-2)}
body[data-hell] .sr-feld input{
  background:#fff;border-color:var(--line-2);color:#141A20;
}
body[data-hell] .kf-chips button[aria-pressed="true"]{
  color:#fff;
  background:var(--bereich-tief,var(--bereich));
  border-color:var(--bereich-tief,var(--bereich));
}
/* Der Sale-Zeitzähler trägt seine eigene Warnfarbe — die bleibt.
   Sie ist ein Signal, kein Bereichsakzent. */

/* Der Berg-Kasten auf der Kontaktseite und die Zahlenkacheln. */
body[data-hell] .berg{background:linear-gradient(160deg,#F7F9FB,#EDF1F5)}
body[data-hell] .berg-facts div{background:#fff}
body[data-hell] .berg-map .pin{
  background:rgba(255,255,255,.92);color:#141A20;
}

/* Die Fußzeile bleibt dunkel. Sie ist der Abbinder der Marke und
   trägt das Logo — ein weißer Fuß unter einer weißen Seite hätte
   keine Kante, und die Seite endete im Nichts. */
body[data-hell] .foot{
  background:var(--night, #0A1017);
  background:#0A1017;
  color:#BDCAD6;
  border-top:4px solid var(--bereich);
}
body[data-hell] .foot a{color:#BDCAD6}
body[data-hell] .foot a:hover{color:#F4F9FD}
body[data-hell] .foot .foot-h{color:#F4F9FD}
body[data-hell] .foot .small{color:#9AA7B4}

/* Aufklappmenü und Schublade gehören zum KOPF, nicht zur Seite.
   Sie klappen aus der schwarzen Leiste heraus, also bleiben sie
   schwarz. Der erste Anlauf hatte sie weiß gemacht — mit heller
   Schrift darauf. Man sah schlicht nichts. Am Bildschirm gesehen,
   nicht im Kopf ausgedacht.

   Die Werkzeugtafel rechts (dock) gehört dagegen zur Seite und wird
   deshalb hell — sie liegt neben dem Inhalt, nicht unter dem Kopf. */
body[data-hell] .nav .sub{
  background:linear-gradient(180deg,rgba(16,25,35,.98),rgba(9,14,20,.98));
  border-color:rgba(255,255,255,.18);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.9);
}
body[data-hell] .nav .sub a{color:#D7E1EA}
body[data-hell] .nav .sub a:hover,
body[data-hell] .nav .sub a[aria-current]{color:#fff}
body[data-hell] .drawer{
  background:rgba(7,12,18,.98);
}
body[data-hell] .dk-tafel{
  background:linear-gradient(180deg,#fff,#F4F6F8);
  border-left-color:var(--line-2);
  box-shadow:-40px 0 120px -50px rgba(20,26,32,.4);
}
body[data-hell] .dk-tab{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(244,246,248,.94));
  color:var(--soft);
}
body[data-hell] .dk-tab.an{
  color:var(--snow);
  border-color:rgba(var(--bereich-rgb),.5);
  background:linear-gradient(180deg,#fff,rgba(var(--bereich-rgb),.08));
}
body[data-hell] .dk-tab.an svg{stroke:var(--bereich-tief,var(--bereich))}

/* Die runde Marke oben im Hero: sie liegt auf dem Foto, also heller
   Text auf dunklem Grund — unabhängig vom Rest der Seite. */
body[data-hell] .hero .kicker{color:#F4F9FD;border-color:rgba(255,255,255,.42)}

/* ---------------- Der Webcam-Hinweis ---------------- */
/*
   René: „Das lenkt ja dann immer ab eigentlich von dem, was sie
   machen sollen — sich bestellen." Deshalb eine ruhige Zeile,
   kein Bild, kein Fenster. Und bis feratel eine Partnerschaft
   bestätigt hat, ist es ohnehin nur ein Link.
*/
.webcam-hinweis{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  padding:18px 20px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--panel);
}
.webcam-hinweis .wh-t{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bereich,var(--ice));
}
.webcam-hinweis p{margin:0;flex:1 1 260px;font-size:15px}
.webcam-hinweis .wh-q{
  width:100%;font-size:12px;color:var(--dim);margin:0;
}
.webcam-hinweis .wh-q a{color:var(--soft);text-decoration:underline}
.webcam-hinweis .wh-q a:hover{color:var(--snow)}

/* ============================================================
   DAS LIVEBILD — ZWEI-KLICK-KACHEL
   ------------------------------------------------------------
   Vor dem Klick: unser eigenes Foto, abgedunkelt, mit einem
   Knopf und einem Satz darüber, was beim Antippen passiert.
   Nach dem Klick: der Player von feratel, formatfüllend.

   Die Mindestmaße kommen von feratel selbst: der MediaPlayer V5
   braucht am Rechner 700 × 370 px, damit alle Bedienelemente
   erscheinen. Das Seitenverhältnis 16/9 liegt darüber, sobald die
   Kachel breiter als 700 px ist — und darunter greift die
   Handy-Regel weiter unten.
   ============================================================ */
.webcam{margin:0;position:relative}
.wc-buehne{
  position:relative;overflow:hidden;
  border-radius:var(--r-l);
  border:1px solid var(--line-2);
  background:#0d151d;
  aspect-ratio:16/9;
}
.wc-buehne .ph{position:absolute;inset:0;background:none}
.wc-buehne img{width:100%;height:100%;object-fit:cover}

/* Die Decke über dem Standbild. Sie ist dunkel genug, dass der
   weiße Text darauf sicher steht — auf einem Schneefoto ist das
   nicht selbstverständlich. */
.wc-decke{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:clamp(20px,3vw,36px);text-align:center;
  background:linear-gradient(180deg,rgba(7,12,18,.42),rgba(7,12,18,.72));
}
.wc-start{
  display:inline-flex;align-items:center;gap:12px;
  min-height:56px;padding:0 26px;
  border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.4);
  /*  DUNKLES GLAS STATT HELLEM — gemessen, nicht geschmacklich.
      Vorher rgba(255,255,255,.14): weiße Schrift auf einer weißen
      Aufhellung über einem Schneefoto. Der Kontrastlauf am 18.08.2026
      hat an den gerenderten Bildpunkten 4,20 : 1 gemessen, gefordert
      sind 4,5 : 1 für 12,5-px-Schrift. Es war der einzige Wert unter
      der Schwelle von 428 geprüften Textfeldern.
      Mit .42 Schwarz statt .14 Weiß liegt derselbe Text bei rund
      9 : 1. Der Milchglas-Eindruck bleibt (Rahmen und Weichzeichner
      sind unverändert), er wird nur rauchig statt milchig.  */
  background:rgba(7,12,18,.42);
  backdrop-filter:blur(10px);
  color:#fff;
  font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  transition:background .25s,border-color .25s,transform .3s var(--ease-out);
}
.wc-start:hover,.wc-start:focus-visible{
  background:rgba(7,12,18,.58);
  border-color:rgba(255,255,255,.7);
  transform:translateY(-2px);
}
.wc-play{
  flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.9);
}
.wc-play svg{width:15px;height:15px;fill:#0d151d;margin-left:2px}
.wc-hinweis{
  margin:0;max-width:52ch;
  font-size:13px;line-height:1.5;
  color:rgba(244,249,253,.86);
}

/* Nach dem Laden: Decke weg, Player formatfüllend. */
.webcam.an .wc-decke{display:none}
.webcam.an .wc-buehne .ph{display:none}
.wc-buehne iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

/* Die Quellenangabe. Sie steht UNTER dem Bild und nicht im
   Kleingedruckten — wer ein fremdes Livebild zeigt, nennt den,
   der die Kamera betreibt. */
.wc-quelle{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 18px;margin-top:12px;
  font-size:13px;color:var(--soft);
}
.wc-quelle a{color:var(--soft);text-decoration:underline}
.wc-quelle a:hover{color:var(--snow)}

/* Handy: feratel nennt 90 vw × 80 vh als Mindestmaß, damit der
   Player alle Funktionen zeigt. Ein 16/9-Kasten wäre auf einem
   390-px-Gerät 219 px hoch — darin ist die Bedienung unbrauchbar.
   Deshalb hochkant, nicht quer. */
@media (max-width:700px){
  .wc-buehne{aspect-ratio:auto;height:min(80vh,560px)}
}

/* ============================================================
   BOOQABLE — der Warenkorb für den Schlittenverleih

   Derselbe Aufbau wie beim Livebild, und das mit Absicht: erst
   eine Decke mit einem Knopf, danach der fremde Inhalt. Wer die
   Webcam auf der Startseite schon einmal geladen hat, weiß hier
   sofort, was passiert.

   Ein Unterschied: Die Bühne hat KEIN festes Seitenverhältnis.
   Booqable zeichnet je nach Anzahl der Artikel unterschiedlich
   hoch, und ein 16/9-Kasten würde entweder abschneiden oder
   unten klaffen. Vor dem Klick sorgt min-height dafür, dass der
   Kasten nicht wie ein vergessener Rest aussieht.
   ============================================================ */
.bq{margin:0;position:relative}
.bq-buehne{
  position:relative;
  border-radius:var(--r-l);
  border:1px solid var(--line-2);
  background:#0d151d;
  min-height:clamp(300px,38vw,420px);
}
/* Nach dem Laden gehört der Kasten Booqable: kein dunkler Grund
   mehr unter hellen Produktkacheln, kein Rand um einen Rand. */
.bq.an .bq-buehne{background:none;border-color:transparent;min-height:0}

.bq-decke{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:clamp(20px,3vw,36px);text-align:center;
  background:linear-gradient(180deg,rgba(7,12,18,.42),rgba(7,12,18,.72));
  border-radius:var(--r-l);
}
.bq.an .bq-decke{display:none}

.bq-start{
  display:inline-flex;align-items:center;gap:12px;
  min-height:56px;padding:0 26px;
  border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.4);
  /*  DUNKLES GLAS STATT HELLEM — gemessen, nicht geschmacklich.
      Vorher rgba(255,255,255,.14): weiße Schrift auf einer weißen
      Aufhellung über einem Schneefoto. Der Kontrastlauf am 18.08.2026
      hat an den gerenderten Bildpunkten 4,20 : 1 gemessen, gefordert
      sind 4,5 : 1 für 12,5-px-Schrift. Es war der einzige Wert unter
      der Schwelle von 428 geprüften Textfeldern.
      Mit .42 Schwarz statt .14 Weiß liegt derselbe Text bei rund
      9 : 1. Der Milchglas-Eindruck bleibt (Rahmen und Weichzeichner
      sind unverändert), er wird nur rauchig statt milchig.  */
  background:rgba(7,12,18,.42);
  backdrop-filter:blur(10px);
  color:#fff;
  font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  transition:background .25s,border-color .25s,transform .3s var(--ease-out);
}
.bq-start:hover,.bq-start:focus-visible{
  background:rgba(7,12,18,.58);
  border-color:rgba(255,255,255,.7);
  transform:translateY(-2px);
}
.bq-korb{
  flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.9);
}
.bq-korb svg{width:16px;height:16px;fill:#0d151d}
.bq-hinweis{
  margin:0;max-width:56ch;
  font-size:13px;line-height:1.5;
  color:rgba(244,249,253,.86);
}

/* Solange geladen wird, atmet der Kasten leicht — sonst sieht ein
   langsamer Anschluss aus wie ein kaputter Knopf. */
.bq.laedt .bq-buehne::after{
  content:"";position:absolute;inset:0;z-index:1;
  border-radius:var(--r-l);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:bq-atmen 1.4s linear infinite;
}
@keyframes bq-atmen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .bq.laedt .bq-buehne::after{animation:none}
}

/* Der Rückfallweg. Er steht IMMER im Markup und ist nur versteckt —
   wenn Booqable ausfällt, ist genau das der Moment, in dem niemand
   mehr Skripte nachladen kann. */
.bq-fehler{display:none}
.bq.fehler .bq-fehler{
  position:absolute;inset:0;z-index:3;
  margin:0;padding:clamp(24px,4vw,44px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  border-radius:var(--r-l);
  background:rgba(7,12,18,.86);
  color:#fff;font-size:15px;line-height:1.6;
}
.bq.fehler .bq-decke{display:none}

/* Booqables eigener Korb-Knopf hängt fest unten rechts (bottom:15px,
   #booqable-launcher). Auf schmalen Geräten sitzt dort ab 720 px
   unsere Werkzeugleiste — gemessen bei 390 px: der Knopf deckte die
   dritte Kachel („Fragen") zur Hälfte zu.

   Deshalb hier ein Stockwerk höher. Die 46 px sind die gemessene Höhe
   der Leiste, safe-area für iPhones mit Balken. !important, weil
   Booqable die Regel selbst inline setzt — anders greift sie nicht.

   Die Kachelhöhe der Leiste steht in dock.css (padding 13px + Inhalt).
   Ändert sie sich dort, gehört dieser Wert nachgezogen. */
@media (max-width:720px){
  #booqable-launcher{
    bottom:calc(46px + env(safe-area-inset-bottom,0px) + 14px)!important;
  }
}

.bq-fehlt,.bq-quelle{
  margin:12px 0 0;
  font-size:13px;line-height:1.5;color:var(--soft);
}
.bq-fehlt{color:var(--snow);opacity:.9}

/* ---------- Die zwei Wege: buchen oder reservieren ----------
   Renés Korrektur vom 12.08.2026: „Hier brauchts dann bitte die
   Erläuterung wie auf meiner der aktiven Webseite."

   Zwei gleich große Karten nebeneinander, jede mit ihrem eigenen
   Knopf INNEN. Der Knopf gehört sichtbar zur Karte — stünden beide
   darunter nebeneinander, müsste man raten, welcher zu welchem Weg
   gehört. Genau so stand es vorher hier, ohne jeden Erklärtext.

   Die Karten wachsen auf gleiche Höhe (align-items:stretch über das
   Raster) und schieben ihren Knopf mit margin-top:auto nach unten —
   sonst stehen die Knöpfe auf verschiedenen Höhen, weil der eine Text
   drei und der andere vier Zeilen hat. */
.bu-wege{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.6vw,22px);
  align-items:stretch;
}
.bu-wege .kond{display:flex; flex-direction:column}
.bu-wege .kond p{flex:1 1 auto}
.bu-wege .kond .btn,
.bu-wege .kond .vor-ort{margin-top:18px; align-self:flex-start}
.bu-wege .vor-ort{width:100%}
@media(max-width:760px){ .bu-wege{grid-template-columns:1fr} }

/* ---------- Schnellzugriff in der Kopfzeile (nur Handy/Tablet) -------
   René am 12.08.2026: „gefällt dir das als Orientierung nicht, wenn das
   wichtigste vom Menü dort oben im Header immer mit eingeblendet wird?
   In unserem Fall jetzt: Skiverleih – Skischule – Service."

   Auf dem Rechner steht die volle Leiste im Kopf. Ab 1080 px abwärts
   verschwindet sie hinter dem Burger (base.css) — und genau ab dort
   erscheint diese flache Zeile. Sie ist die einzige Stelle, an der die
   Seite auf schmalen Geräten überhaupt zeigt, was es hier gibt.

   Bewusst flach (36 px) und ohne Fläche: sie soll unter der Kopfzeile
   liegen wie eine Beschriftung, nicht wie ein zweites Menü. Die
   Tippfläche ist trotzdem 44 px hoch — das Ziel ist der ganze Streifen,
   nicht die Schrift.

   Die Unterkante trägt die Bereichsfarbe, dieselbe wie am Aufsteller
   vor dem Laden. */
/*  Unter der Fußzeile blieben 18 px heller Grund stehen: der Körper
    hat `padding-bottom:64px` als Platz für die Dock-Leiste, die aber
    nur 46 px hoch ist. Auf den dunklen Seiten fiel es nicht auf, auf
    den acht hellen Bereichsseiten war es ein Streifen in #F4F6F8
    unter einer #0A1017-Fußzeile.
    Der Grund des Körpers folgt jetzt der Fußzeile — nicht das Polster
    ändern, das hält die Dock-Leiste frei. */
body[data-hell]{ background:var(--bg) }
body[data-hell]::after{
  content:'';position:fixed;left:0;right:0;bottom:0;height:64px;
  background:#0B1117;z-index:-1;pointer-events:none;
}

.nav-schnell{display:none}
@media(max-width:1080px){
  /*  Die Kopfzeile ist position:fixed und hat eine FESTE Höhe
   *  (--nav-h). Alles, was zusätzlich hineingehängt wird, ragt sonst
   *  unten heraus und legt sich über den Seiteninhalt — sichtbar wäre
   *  es, aber es würde die erste Überschrift überdecken, und jeder
   *  Sprungpunkt (scroll-padding-top rechnet mit --nav-h) landete
   *  45 px zu hoch.
   *
   *  Deshalb zwei Dinge zusammen: die Leiste darf mitwachsen, und
   *  --nav-h wird um genau die Höhe der Zeile größer. Nur eines von
   *  beiden zu machen ist der Fehler, der hinterher wie ein
   *  Layout-Rätsel aussieht. */
  /*  NACHGEMESSEN AM 14.08.2026 — und der erste Anlauf war falsch.
   *
   *  `.nav{height:auto}` nimmt der Kopfzeile die feste Höhe. Genau
   *  daraus zog aber `.nav .row{height:100%}` ihre eigene Höhe: die
   *  Zeile fiel von 82 px auf **44 px** zusammen. Zusammen mit den
   *  45 px der Schnellzugriff-Zeile war der Kopf real **90 px** hoch,
   *  während --nav-h weiter 127 px behauptete.
   *
   *  Das war überall zu sehen, nur nicht als Fehler zu erkennen:
   *      scroll-padding-top  143 px gegen 90 px Kopf → Sprungziele
   *                          landeten 53 px zu tief
   *      .hero               61 px Totraum unter der Leiste
   *      .bk                 37 px auf sieben Bereichsseiten
   *      .sec--legal         85 px auf den vier Rechtstexten
   *  Und das Logo klebte mit 5 px Luft an der Oberkante.
   *
   *  Jetzt bekommt die Zeile selbst eine Mindesthöhe, statt sie vom
   *  Elternteil zu erben. 72 px sind bewusst weniger als die 82 px auf
   *  dem Rechner — auf einem Telefon ist Höhe der knappste Platz, und
   *  darunter steht ja schon die zweite Zeile. Summe: 72 + 45 = 117.
   */
  :root{ --nav-h:117px; }
  .nav{ height:auto; }
  .nav .row{ height:auto; min-height:72px; }
  .nav-schnell{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    background:rgba(7,12,18,.55);
  }
  .nav-schnell a{
    min-height:44px;
    display:flex; align-items:center; justify-content:center;
    padding:9px 6px 7px;
    font:600 .70rem/1 var(--body);
    letter-spacing:.10em; text-transform:uppercase;
    color:#E7EEF5; text-decoration:none;
    border-bottom:2px solid var(--bereich,transparent);
  }
  .nav-schnell a[aria-current]{background:rgba(var(--bereich-rgb),.16); color:#fff}
  .nav-schnell a:active{background:rgba(var(--bereich-rgb),.24)}
}
@media(max-width:360px){
  .nav-schnell a{font-size:.64rem; letter-spacing:.06em}
}

/* ---------- Formularfelder auf den hellen Bereichsseiten ------------
   `direkt.css` setzt für die Felder `background:rgba(0,0,0,.24)` — eine
   Regel aus der dunklen Welt. Auf einer weißen Karte ergibt das #C2C2C2:
   Die Felder sahen aus, als wären sie gesperrt. Der Kontrast war mit
   9:1 in Ordnung, es war kein Lesbarkeits-, sondern ein
   Erscheinungsfehler — und der kostet Anfragen, weil niemand in ein
   Feld tippt, das deaktiviert aussieht.
   Betrifft Depot, Saison-Miete und Schlittenverleih. */
body[data-hell] .db-feld input,
body[data-hell] .db-feld select,
body[data-hell] .db-feld textarea,
body[data-hell] .wf-feld input,
body[data-hell] .wf-feld select,
body[data-hell] .wf-feld textarea{
  background:#fff;
  border-color:rgba(20,26,32,.22);
  color:#141A20;
}
body[data-hell] .db-feld input:focus,
body[data-hell] .db-feld select:focus,
body[data-hell] .db-feld textarea:focus,
body[data-hell] .wf-feld input:focus,
body[data-hell] .wf-feld select:focus,
body[data-hell] .wf-feld textarea:focus{
  border-color:var(--bereich);
  box-shadow:0 0 0 3px rgba(var(--bereich-rgb),.16);
}
body[data-hell] .db-feld ::placeholder,
body[data-hell] .wf-feld ::placeholder{color:#7B8590}

/* ---------- Die Merkliste über den zwei Wegen --------------------
   Sie erscheint nur, wenn wirklich etwas gemerkt wurde (`hidden` im
   Markup, dock.js nimmt es weg). Kein leerer Kasten, der erklärt,
   dass er leer ist. */
.bu-merk{
  margin:0 0 clamp(18px,2.2vw,26px);
  padding:clamp(16px,2vw,22px);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  background:var(--panel-2);
}
.bu-merk-t{
  margin:0 0 12px;
  font:600 .72rem/1 var(--body);
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.bu-merk-l{list-style:none; margin:0; padding:0}
.bu-merk-l li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.bu-merk-l li:last-child{border-bottom:0}
.bu-merk-l span{display:flex; flex-direction:column; font-weight:600; color:var(--text)}
.bu-merk-l small{font:400 .78rem/1.3 var(--body); color:var(--dim); font-weight:400}
.bu-merk-l b{font-family:var(--mono); white-space:nowrap; color:var(--text)}
.bu-merk-s{
  margin:14px 0 0; font-size:.88rem; line-height:1.5; color:var(--dim);
}
.bu-merk-s b{color:var(--text); font-family:var(--mono)}

/* Kurszeiten: vier Aussagen, vier Zeilen. Vorher standen sie in einer
   Zeile mit Mittelpunkten dazwischen — René: „Die Formatierung stimmt
   nicht, bitte die drei Info's untereinander." */
.kurs-zeiten{display:flex; flex-direction:column; gap:5px}
.kurs-zeiten span{display:block}

/* ---------- Die zwei Wege: Aussage vor Erklärung --------------------
   René am 14.08.2026: „die Info ‚10% Rabatt bei Onlinebuchung' ist
   wichtiger als die Erklärung … Diese zwei Button/Schaltflächen
   bringen wir Geld, daher so attraktiv wie möglich machen."

   Vorher stand die Überschrift als kleine Kapitälchen-Zeile über einem
   gleich großen Absatz — die Zahl, die den Gast überzeugt, war das
   Unauffälligste an der Karte. Jetzt trägt sie die Aussage: groß,
   in der Bereichsfarbe, und der Erklärtext ordnet sich darunter.
   Die Knöpfe werden voll breit — auf dem Handy trifft man sie damit
   ohne Zielen, und sie sehen nach Angebot aus statt nach Fußnote. */
.bu-wege .kond h3{
  font-family:var(--disp);
  font-weight:800;
  font-variation-settings:'wdth' 104;
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.15;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--bereich,var(--snow));
  margin-bottom:10px;
}
.bu-wege .kond p{font-size:.92rem;line-height:1.55}
.bu-wege .kond .btn{width:100%;justify-content:center;margin-top:18px}
@media(min-width:761px){
  .bu-wege .kond .btn{width:auto}
}