/* ============================================================
   STARTHAUS — fx.css
   Scroll-Rail · Fortschritt · 3D-Tilt · Parallax · Scrub-Szene
   Preistabellen · Bausteine der Unterseiten
   ============================================================ */

/* ---------- Lesefortschritt oben ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:300;pointer-events:none;
  background:rgba(196,214,230,.07);
}
.progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--ice),var(--flut));
  box-shadow:0 0 12px rgba(143,211,244,.55);
  transform-origin:left;
}

/* ---------- Scroll-Rail rechts (schlank, klappt bei Hover auf) ---------- */
.rail{
  position:fixed;right:10px;top:50%;transform:translateY(-50%);
  z-index:150;display:flex;align-items:stretch;gap:0;
  padding:10px 8px;border-radius:14px;
  background:transparent;border:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s,padding .35s var(--ease),gap .35s var(--ease);
}
.rail:hover{
  gap:10px;padding:12px 14px 12px 10px;
  background:rgba(8,13,19,.82);backdrop-filter:blur(16px) saturate(1.2);
  border-color:var(--line);
}
.rail-line{
  position:relative;width:2px;flex:none;border-radius:2px;overflow:hidden;
  background:rgba(196,214,230,.16);
}
.rail-line i{
  position:absolute;left:0;top:0;width:100%;height:0;
  background:linear-gradient(180deg,var(--ice),var(--flut));
  box-shadow:0 0 8px rgba(143,211,244,.7);
}
.rail ol{display:flex;flex-direction:column;justify-content:space-between;flex:1;gap:0}
.rail a{
  display:flex;align-items:center;gap:0;
  padding:0;height:20px;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);transition:color .3s var(--ease),gap .35s var(--ease);
}
/* Im Ruhezustand ist die Rail nur eine Strichfolge — 18 auf 20 Pixel
   je Eintrag. Aufgeklappt wird daraus ein echtes Menü, also bekommt
   sie dort auch echte Zielgrößen. Der Ruhezustand bleibt schlank; wer
   klicken will, zeigt ohnehin vorher darauf. Ein Prüfer, der ohne
   Zeiger misst, meldet hier weiter 20 Pixel — das ist richtig gemessen
   und trotzdem kein Mangel. */
.rail:hover a{gap:9px;height:44px}
.rail .n,.rail .t{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .4s var(--ease-out),opacity .28s;
}
.rail:hover .n{max-width:20px;opacity:.6}
.rail:hover .t{max-width:150px;opacity:1}
.rail .d{
  width:9px;height:1.5px;border-radius:1px;background:currentColor;opacity:.42;flex:none;
  transition:width .4s var(--ease-out),opacity .3s,background .3s;
}
/* Auch zugeklappt: die Trefferfläche reicht über den Strich hinaus,
   ohne das Layout zu verschieben. */
.rail a{position:relative}
.rail a::after{content:'';position:absolute;inset:0 -13px}
.rail a:hover{color:var(--text)}
.rail a[aria-current="true"]{color:var(--snow)}
.rail a[aria-current="true"] .d{
  width:18px;opacity:1;background:var(--accent);box-shadow:0 0 7px rgba(var(--cur-accent),.9);
}
.rail:hover a[aria-current="true"] .n{opacity:1;color:var(--accent)}
@media(max-width:1080px){.rail{display:none}}
@media (prefers-reduced-motion:reduce){.rail *{transition:none}}

/* ---------- Parallax-Ebenen (Scroll + Maus in einer Transform) ---------- */
[data-parallax]{
  transform:translate3d(var(--mx,0px), calc(var(--py,0px) + var(--my2,0px)), 0);
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){[data-parallax]{transform:none !important}}

/* ---------- 3D-Tilt + Glanz ---------- */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt-on{transition:transform .12s linear}
.tilt-off{transition:transform .7s var(--ease-out)}
.ph-wrap{position:relative;overflow:hidden;border-radius:inherit;transform:translateZ(0)}
.ph-wrap .sheen{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(28% 40% at var(--sx,50%) var(--sy,50%),
             rgba(255,255,255,.18),transparent 68%);
  transition:opacity .45s var(--ease);
}
.tilt:hover .sheen{opacity:1}
.lst-card,.stern,.kond,.bahn,.sale-card,.kon-card,.cta,.vt{transform-style:preserve-3d}
.vt h3,.vt p,.vt-ik,.vt-nr{transform:translateZ(18px)}
.lst-card .body,.stern h3,.kond h3,.kond h4,.bahn h3,.sale-card .pc{transform:translateZ(26px)}

/* Reveal-Maske für Bilder */
.reveal-mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease-out)}
.reveal-mask.in,.rv.in > .reveal-mask{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.reveal-mask{clip-path:none !important}}

/* ---------- Hero-Zeilen-Aufzug ---------- */
/* padding-bottom + negativer Rand: sonst schneidet die Zeilenmaske die
   Unterlaengen ab (gemessen: 5 px bei „Skiverleih und“) */
/* Kein overflow:hidden mehr. Die Animation bewegt die Zeile SELBST — die
   Maske verdeckt also nichts von der Bewegung, sie schnitt nur die Ober- und
   Unterlängen ab (gemessen: 5 px bei „Skiverleih und“ auf 1600 px). */
.hero h1 .line{display:block;padding-right:.12em}
.hero h1 .line > span,.hero h1 .line{will-change:transform}
.hero--home h1 .line{animation:lineUp .95s var(--ease-out) both}
.hero--home h1 .line:nth-child(1){animation-delay:.08s}
.hero--home h1 .line:nth-child(2){animation-delay:.18s}
.hero--home h1 .line:nth-child(3){animation-delay:.28s}
@keyframes lineUp{from{transform:translateY(105%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.hero--home h1 .line{animation:none}}

/* Unterseiten-Hero etwas flacher */
.hero--home .scroll-hint{display:none}
.hero--page{min-height:clamp(540px,74svh,720px)}
.hero--page h1{font-size:clamp(2.3rem,5.8vw,4.8rem)}

/* ---------- Scroll-Scrub-Szene (Ski-Service) ---------- */
.scrub-stage{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);
  align-items:start;
}
.scrub-visual{position:sticky;top:calc(var(--nav-h) + 8vh);height:min(62vh,560px)}
.scrub-frame{
  position:relative;width:100%;height:100%;border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--line-2);perspective:1200px;background:#0b131b;
}
.scrub-img{
  position:absolute;inset:0;opacity:0;
  transform:scale(1.08) rotateX(6deg);
  transition:opacity .7s var(--ease),transform 1.1s var(--ease-out);
}
.scrub-img.on{opacity:1;transform:none}
.scrub-img .ph{width:100%;height:100%;aspect-ratio:auto !important}
.scrub-glow{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(7,12,18,.75) 100%),
             radial-gradient(60% 50% at 50% 0%,rgba(255,178,92,.14),transparent 70%);
}
.scrub-track{display:flex;flex-direction:column}
.scrub-step{
  min-height:56vh;display:flex;flex-direction:column;justify-content:center;gap:12px;
  opacity:.24;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease-out);
}
.scrub-step.on{opacity:1;transform:none}
.scrub-no{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--flut);
  border:1px solid rgba(255,178,92,.45);border-radius:4px;padding:3px 8px;align-self:flex-start;
}
.scrub-end{min-height:34vh;justify-content:flex-start;opacity:1}
@media(max-width:900px){
  .scrub-stage{grid-template-columns:1fr}
  .scrub-visual{position:relative;top:0;height:auto;aspect-ratio:4/3;margin-bottom:28px}
  .scrub-step{min-height:0;opacity:1;transform:none;padding:22px 0;border-top:1px solid var(--line)}
  .scrub-img{position:absolute}
}

/* ---------- Preis-Finder ---------- */
.preis-finder{
  display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,30px);align-items:flex-start;
  padding:clamp(18px,2.2vw,26px);margin-bottom:clamp(20px,2.4vw,30px);
  border:1px solid var(--line);border-radius:var(--r-l);
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
}
.pf-grp{display:flex;flex-direction:column;gap:9px}
.pf-t{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft);
}
.pf-chips{display:flex;flex-wrap:wrap;gap:6px}
.pf-info{
  /* 68ch wie bei `.small` — das ist der Hauswert für Fließtext.
     Ohne Deckel lief diese eine Zeile auf einem großen Bildschirm
     gemessen 1226 px breit; das Auge findet danach den Zeilenanfang
     nicht mehr. Gemessen am 18.08.2026 bei 1512 px. */
  flex:1 1 100%;margin-top:2px;font-size:.82rem;color:var(--dim);
  max-width:68ch;
}
.pf-info b{color:var(--ice);font-weight:600}

/* ---------- Sprungnavigation ---------- */
.jump{
  display:flex;flex-wrap:wrap;gap:8px;overflow-x:auto;scrollbar-width:none;
  margin-bottom:clamp(26px,3vw,42px);
  position:sticky;top:calc(var(--nav-h) + 8px);z-index:60;
  padding:10px 0;background:linear-gradient(180deg,var(--bg) 72%,transparent);
}
.jump a{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--soft);
  padding:8px 13px;min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.02);backdrop-filter:blur(8px);
  transition:border-color .3s,color .3s,background .3s,opacity .3s;
}
.jump a:hover,.jump a.on{color:var(--snow);border-color:rgba(143,211,244,.5);background:rgba(143,211,244,.09)}
.jump a.aus{opacity:.28;pointer-events:none}

/* ---------- Preistabellen ---------- */
.tbl-block{
  margin-bottom:clamp(34px,4vw,58px);scroll-margin-top:calc(var(--nav-h) + 84px);
  transition:opacity .4s var(--ease);
}
/*  ZEHN PREISLISTEN AUF EINMAL SIND EINE WAND.

    Die Geschichte dieser Stelle in drei Sätzen: Zuerst klappte ab der
    vierten Tabelle alles zu. Dann stand alles offen, mit der
    Begründung „wer auf eine Preisseite geht, will Preise sehen".
    Beides ging an der Sache vorbei.

    Wer auf eine Preisseite geht, will EINEN Preis sehen — seinen. Auf
    der Skiverleih-Seite stehen zehn Tabellen; gemessen scrollt man an
    neun davon vorbei, um die zehnte zu erreichen. Jonas am 18.08.2026:
    „Sonst muss man manchmal ewig durch die ganzen Preislisten
    scrollen, bevor man die passende für sich gefunden hat."

    Jetzt ist die Überschrift der Schalter. Zugeklappt sieht man
    Titel und „ab X €" — also genau das, wonach man auswählt. Was der
    Besucher aufklappt, bleibt beim nächsten Besuch offen.

    Die Filterknöpfe verschwinden im zugeklappten Zustand mit: sie
    filtern Zeilen einer Tabelle, die man gerade nicht sieht.  */
.tbl-block.zu .tbl-koerper,
.tbl-block.zu .tbl-filter{display:none}

.tbl-auf{
  flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:52px;padding:6px 0;
  background:none;border:0;cursor:pointer;text-align:left;color:inherit;
}
.tbl-auf-t{display:flex;flex-direction:column;gap:4px}
/*  Ab Tablet stehen Titel und „ab X €" nebeneinander. Zehn zugeklappte
    Tabellen untereinander sind eine Auswahlliste — und eine Liste liest
    man schneller, wenn eine Zeile eine Zeile ist. Spart bei zehn
    Blöcken rund eine viertel Bildschirmhöhe. */
@media(min-width:700px){
  .tbl-auf-t{flex-direction:row;align-items:center;gap:16px}
}
.tbl-auf .disp{font-size:inherit}
/*  René am 18.08.2026: „Bitte nicht in Fett Schrift."  Gemeint waren die
    Überschriften über den Preistabellen — in .disp stehen sie auf 800,
    und zehn davon untereinander lesen sich als Wand. Hier auf 600, damit
    sie Überschrift bleiben, ohne zu drücken. Bewusst nur auf .tbl-head
    begrenzt: die Displayschrift auf der ganzen Seite zu entfetten wäre
    eine andere Entscheidung, die René so nicht getroffen hat. */
.tbl-head .disp{font-weight:600}
.tbl-auf:focus-visible{outline:2px solid var(--ice);outline-offset:4px;border-radius:8px}
.tbl-pfeil{
  flex:none;display:block;width:10px;height:10px;
  border-right:1.8px solid var(--soft);border-bottom:1.8px solid var(--soft);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .35s var(--ease-out),border-color .3s;
}
.tbl-block:not(.zu) .tbl-pfeil{transform:rotate(225deg) translateY(-3px)}
.tbl-auf:hover .tbl-pfeil{border-color:var(--snow)}
/*  Zugeklappt ist die Zeile eine Schaltfläche und darf sich auch so
    anfühlen: eine Linie darunter, damit zehn davon untereinander wie
    eine Liste aussehen und nicht wie zehn abgeschnittene Abschnitte. */
.tbl-block.zu{margin-bottom:0;border-bottom:1px solid var(--line)}
.tbl-block.zu .tbl-head{margin-bottom:0}
.tbl-mehr{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin-top:6px;padding:14px;min-height:48px;cursor:pointer;
  border:1px dashed var(--line-2);border-radius:var(--r-m,14px);
  background:rgba(255,255,255,.015);color:var(--soft);
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;
  transition:border-color .3s,color .3s,background .3s;
}
.tbl-mehr:hover{border-color:rgba(143,211,244,.45);color:var(--snow);background:rgba(143,211,244,.06)}
.tbl-mehr i{
  display:block;width:8px;height:8px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .35s var(--ease-out);
}
.tbl-block:not(.zu) .tbl-mehr i{transform:rotate(225deg) translateY(-2px)}
.tbl-block.aus{display:none}
.tbl-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px;margin-bottom:16px;
}
/* Flex-Kinder schrumpfen von sich aus nicht unter ihre Mindest-
   Inhaltsbreite. „Sicherheitsausrüstung" in der Displayschrift ist
   auf 320 px breiter als der Container — die Tabellenüberschrift
   schob die Preisliste 14 px über den Rand. `overflow-wrap` allein
   reicht hier nicht: es ändert die Mindestbreite nicht. */
.tbl-head > *{min-width:0}
.tbl-ab{
  display:inline-block;margin-top:8px;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--flut);
  border:1px solid rgba(255,178,92,.38);border-radius:999px;padding:4px 11px;
}
.tbl-filter{display:flex;gap:6px}
.chip-xs{
  flex:0 0 auto;min-height:36px;padding:7px 14px;font-size:.78rem;border-radius:999px;
  background:rgba(255,255,255,.025);border:1px solid var(--line);color:var(--text);
  cursor:pointer;transition:border-color .28s,background .28s,color .28s;
}
.chip-xs:hover{border-color:var(--line-2);color:var(--snow)}
.chip-xs[aria-pressed="true"]{
  background:rgba(143,211,244,.14);border-color:rgba(143,211,244,.55);color:var(--snow);
}

.tbl-scroll{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-l);
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.tbl-scroll::-webkit-scrollbar{height:6px}
.tbl-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
.tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:640px;font-variant-numeric:tabular-nums}
.tbl thead th{
  position:sticky;top:0;z-index:2;background:#101923;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--soft);text-align:right;
  padding:15px 18px;border-bottom:1px solid var(--line-2);white-space:nowrap;
}
.tbl thead th:first-child{text-align:left;position:sticky;left:0;z-index:3}
.tbl tbody th{
  text-align:left;font-weight:600;font-size:.95rem;color:var(--snow);
  padding:14px 18px;white-space:nowrap;
  position:sticky;left:0;z-index:1;
  background:linear-gradient(90deg,#131d27 84%,rgba(19,29,39,0));
}
.tbl tbody td{
  text-align:right;padding:14px 18px;font-family:var(--mono);font-size:.92rem;
  color:var(--text);white-space:nowrap;transition:color .2s,background .2s;
}
.tbl tbody td .eur::after{content:' €';color:var(--dim);font-size:.84em}
.tbl tbody td.na{color:var(--dim)}
.tbl tbody tr{border-top:1px solid var(--line)}
.tbl tbody tr td,.tbl tbody tr th{border-top:1px solid var(--line)}
/* Tiefe statt Farbfleck: die Zeile unter dem Zeiger hebt sich an, wirft
   einen Schatten und bekommt links eine Kante. Man sieht auf einen Blick,
   in welcher Zeile man liest — bei sechs Spalten ist das der halbe Weg. */
.tbl tbody tr{transition:transform .28s var(--ease-out)}
.tbl tbody tr:hover{transform:translateY(-1px)}
.tbl tbody tr:hover td{
  background:linear-gradient(180deg,rgba(143,211,244,.11),rgba(143,211,244,.05));
  color:var(--snow);box-shadow:0 1px 0 rgba(143,211,244,.18) inset;
}
.tbl tbody tr:hover th{
  color:var(--ice);
  background:linear-gradient(90deg,#16242f 84%,rgba(22,36,47,0));
  box-shadow:inset 3px 0 0 var(--ice);
}
.tbl tbody tr:hover td .eur{text-shadow:0 0 22px rgba(143,211,244,.4)}
.tbl tbody tr.dim{opacity:.25}

/* Spaltenfokus: die Spalte unter dem Zeiger bleibt hell, damit man bei
   „5/6 Tage" nicht in die Nachbarspalte rutscht. */
.tbl td.spalte-an{background:rgba(143,211,244,.07)}
.tbl thead th.spalte-an{color:var(--ice);background:#16242f}
.tbl tbody tr:hover td.spalte-an{
  background:linear-gradient(180deg,rgba(143,211,244,.2),rgba(143,211,244,.1));
}

/* Der günstigste Tarif je Liste bekommt ein Zeichen — sonst muss man
   sechs Zahlen im Kopf vergleichen. */
.tbl td.bester{position:relative}
.tbl td.bester .eur{color:var(--pine)}
/*  ACHTUNG — dieser Punkt darf die Beschriftung nicht auffressen.
    Bis 14.08.2026 tat er genau das: ab 720 px wird jede Preiszeile zu
    einer Karte, und die Spaltenbeschriftung kommt AUSSCHLIESSLICH aus
    `.tbl tbody td::before{content:attr(data-tag)}`. Dieselbe Stelle,
    höhere Spezifität (0,2,1 gegen 0,1,2) — also gewann der Punkt und
    setzte `content:''`. Gemessen: 64 von 64 betroffenen Zellen auf
    Skiverleih, Schlitten, Skischule und Depot zeigten statt „5/6 TAGE"
    einen 5-px-Punkt. Der Gast las 90 € und nicht, wofür.
    Der Punkt markiert den günstigsten Tarif und gehört auf breite
    Schirme, wo die Tabelle eine Tabelle ist. In der Kartenansicht
    übernimmt ihn `.tbl td.bester .eur` (grüne Zahl) — das reicht. */
.tbl td.bester::before{
  content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--pine);
  box-shadow:0 0 10px rgba(127,169,140,.8);
}
.tbl-note{margin-top:12px}
.tbl-legende{
  display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px;
  /* Nicht unter 11 px: bei 9,5 px ist die Legende auf dem Handy nur noch
     ein grauer Streifen. Das große Buchstabenbild der Versalien täuscht
     Lesbarkeit vor, die nicht da ist. */
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}
.tbl-legende i{
  display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pine);
  margin-right:6px;vertical-align:middle;
}
@media (prefers-reduced-motion:reduce){.tbl tbody tr:hover{transform:none}}

/* Mobil: aus jeder Zeile wird eine Karte — kein Querscrollen mehr */
@media(max-width:720px){
  .tbl-scroll{overflow:visible;border:0;background:none;border-radius:0}
  .tbl{min-width:0;display:block}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tbody{display:flex;flex-direction:column;gap:10px}
  .tbl tbody tr{
    display:block;border:1px solid var(--line);border-radius:16px;
    background:linear-gradient(160deg,var(--panel-2),var(--panel));padding:14px 16px 8px;
  }
  .tbl tbody tr td,.tbl tbody tr th{border-top:0}
  .tbl tbody th{
    display:block;position:static;background:none;padding:0 0 10px;
    font-size:1rem;border-bottom:1px solid var(--line);margin-bottom:8px;
  }
  .tbl tbody td{
    display:flex;align-items:baseline;justify-content:space-between;
    padding:7px 0;font-size:.92rem;text-align:right;
  }
  /*  Beschriftung schlägt Schmuck: in der Kartenansicht gewinnt
      data-tag, auch auf der Bestpreis-Zeile. */
  .tbl tbody td.bester::before{
    content:attr(data-tag) !important;
    position:static; transform:none;
    width:auto; height:auto; border-radius:0;
    background:none; box-shadow:none;
  }
  .tbl tbody td::before{
    content:attr(data-tag);
    font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--soft);
  }
  .tbl tbody tr:hover td{background:none}
  /* Der Punkt für den günstigsten Tarif saß absolut bei left:6px — in der
     Kartenansicht landete er damit mitten auf der Beschriftung und sah aus
     wie ein Durchstrich. Auf dem Handy gehört er neben den Preis. */
  .tbl td.bester::before{position:static;transform:none;margin-right:auto;margin-left:8px}
  .tbl td.bester{gap:8px}
  .preis-finder{flex-direction:column;gap:16px}
}

/* ---------- Kondition-Karten ---------- */
.kond-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
.kond{
  padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-l);
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  transition:border-color .4s,transform .5s var(--ease-out);
}
.kond:hover{border-color:var(--line-2)}
.kond h3,.kond h4{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px;
}
.kond p{font-size:.9rem;line-height:1.55;color:var(--soft)}
@media(max-width:980px){.kond-grid{grid-template-columns:1fr 1fr}}
/* Zwei schmale Spalten mit Fließtext wurden auf dem Handy zu Wortschlangen —
   ab 760 px lieber untereinander. */
@media(max-width:760px){.kond-grid{grid-template-columns:1fr}.kond{padding:18px 20px}}

/* ---------- Sterne-Karten ---------- */
.stern-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.stern{padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:12px}
.stern .st{font-size:1.15rem;color:var(--flut);letter-spacing:3px}
.stern p{font-size:.92rem;color:var(--soft);line-height:1.55}
@media(max-width:820px){.stern-grid{grid-template-columns:1fr}}

/* ---------- Rodelbahnen ---------- */
.bahn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.bahn{
  padding:clamp(24px,3vw,32px);border:1px solid var(--line);border-radius:var(--r-l);
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  display:flex;flex-direction:column;gap:11px;
}
.bahn .len{
  font-family:var(--disp);font-weight:900;font-variation-settings:'wdth' 118;
  font-size:2rem;color:var(--ice);line-height:1;
}
.bahn p{font-size:.9rem;color:var(--soft);line-height:1.55}
@media(max-width:820px){.bahn-grid{grid-template-columns:1fr}}

/* ---------- American Sale ---------- */
.sale-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.sale-card{
  position:relative;padding:clamp(30px,4vw,48px) clamp(22px,3vw,32px);
  border:1px solid rgba(255,178,92,.28);border-radius:var(--r-l);
  background:radial-gradient(80% 100% at 50% 0%,rgba(255,178,92,.14),transparent 66%),
             linear-gradient(160deg,var(--panel-2),var(--panel));
  text-align:center;overflow:hidden;
}
.sale-card .pc{
  font-family:var(--disp);font-weight:900;font-variation-settings:'wdth' 122;
  font-size:clamp(3.4rem,7vw,5.4rem);color:var(--snow);line-height:.9;
}
.sale-card .pcs{
  font-family:var(--disp);font-weight:900;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--flut);
}
.sale-card h3{margin-top:12px;color:var(--soft)}
@media(max-width:760px){.sale-grid{grid-template-columns:1fr}}

/* ---------- Zubehör-Liste ---------- */
.zub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.zub-grid li{
  background:#0d151d;padding:22px 24px;font-size:.98rem;color:var(--text);
  display:flex;align-items:center;gap:12px;transition:background .3s,color .3s;
}
.zub-grid li::before{
  content:'';width:7px;height:7px;border-radius:2px;background:var(--accent);
  transform:rotate(45deg);flex:none;
}
.zub-grid li:hover{background:#111c26;color:var(--snow)}
@media(max-width:820px){.zub-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.zub-grid{grid-template-columns:1fr}}

/* ---------- Rechtsseiten ---------- */
.sec--legal{padding-top:calc(var(--nav-h) + clamp(48px,7vw,96px))}
.wrap--text{width:min(100% - var(--gut)*2, 820px);margin-inline:auto}
.prose h2{
  font-family:var(--disp);font-weight:700;font-variation-settings:'wdth' 104;
  font-size:1.2rem;color:var(--snow);margin:34px 0 10px;
}
/* Rechtstexte liefen auf breiten Schirmen mit 96 Zeichen je Zeile —
   beim Zeilenwechsel verliert man dann die Spur. 70 Zeichen sind die
   Spanne, in der man ohne Kopfbewegung zurückfindet. */
.prose p,.prose li{margin-bottom:14px;color:var(--text);max-width:70ch}
.prose a{color:var(--ice);text-decoration:underline;text-underline-offset:3px}
.prose .lead{margin-bottom:20px}
.hinweis{
  margin-bottom:30px;padding:18px 22px;border-radius:16px;
  border:1px solid rgba(255,178,92,.35);
  background:linear-gradient(160deg,rgba(255,178,92,.09),transparent);
  font-size:.9rem;line-height:1.6;color:var(--text);
}
.hinweis b{color:var(--flut)}

/* ---------- Sonstiges ---------- */
.ph{position:relative;overflow:hidden;background:#0d151d}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.zoomable img{transition:transform 1.2s var(--ease-out)}
.zoomable:hover img{transform:scale(1.05)}
.lst-card .ph-wrap{border-radius:0}
.intro-media .ph-wrap,.split-media .ph-wrap{border-radius:var(--r-l)}

@media(max-width:760px){
  .jump{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
        mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .jump::-webkit-scrollbar{display:none}
  /* 44 statt 40: auf dem Handy ist diese Leiste ein waagerechtes Band,
     durch das man wischt — da trifft man 40 px erst recht nicht. */
  .jump a{flex:0 0 auto;min-height:44px}
}

/* ---------- Vorteils-Kacheln (Original-Muster) ---------- */
.vt-grid{display:grid;gap:clamp(12px,1.4vw,18px)}
.vt-3{grid-template-columns:repeat(3,1fr)}
.vt-2{grid-template-columns:repeat(2,1fr)}
/* Vorher sechs gleiche Kästen. Jetzt: Nummer, Zeichen, Tiefe beim Zeigen —
   und ein Lichtstreif, der der Zeigerposition folgt. Der Wortlaut bleibt. */
.vt{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(22px,2.6vw,30px);border:1px solid var(--line);border-radius:var(--r-l);
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  transition:border-color .4s var(--ease),transform .5s var(--ease-out),box-shadow .5s var(--ease);
}
.vt::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(120% 90% at 12% 0%,rgba(143,211,244,.12),transparent 62%);
  transition:opacity .5s var(--ease);
}
/*  Die Leistungskacheln stehen still.
    Jonas am 17.08.2026: „mache das auch da weg" — gemeint war dieselbe
    Bewegung wie bei den Kontaktkästen. Drei Dinge bewegten sich hier:
    der 3D-Tilt (im Erzeuger raus, kein .tilt mehr am Element), der Lift
    um 4 px und das kippende Symbol. Alle drei sind weg.
    Was bleibt: Rand, Schatten, Glanz und die Nummer wechseln die Farbe.
    Rückmeldung ohne Bewegung — man sieht, worauf man steht, aber der
    Text rutscht beim Lesen nicht weg.  */
.vt:hover{
  border-color:rgba(143,211,244,.4);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95),0 0 0 1px rgba(143,211,244,.08);
}
.vt:hover::before{opacity:1}
.vt-nr{
  position:absolute;top:clamp(16px,2vw,22px);right:clamp(16px,2vw,22px);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  color:var(--dim);transition:color .4s;
}
.vt:hover .vt-nr{color:var(--ice)}
.vt-ik{
  display:grid;place-items:center;width:40px;height:40px;margin-bottom:16px;
  border-radius:12px;border:1px solid var(--line-2);
  background:linear-gradient(150deg,rgba(143,211,244,.12),rgba(143,211,244,.02));
  transition:border-color .4s,background .4s,transform .5s var(--ease-out);
}
.vt-ik svg{width:19px;height:19px;fill:none;stroke:var(--ice);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.vt:hover .vt-ik{border-color:rgba(143,211,244,.45)}
.vt h3{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px;padding-right:34px;
}
.vt p{font-size:.9rem;line-height:1.6;color:var(--soft)}
.vt-glanz{
  position:absolute;inset:-1px;z-index:2;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .4s;
  background:radial-gradient(280px 200px at var(--sx,50%) var(--sy,0%),
             rgba(255,255,255,.09),transparent 62%);
}
.vt:hover .vt-glanz{opacity:1}
@media(max-width:900px){.vt-3,.vt-2{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.vt-3,.vt-2{grid-template-columns:1fr}}

/* ---------- Textblock ---------- */
.tb{max-width:74ch}
.tb .lead+.lead{margin-top:14px}
.tb-sub{
  margin:10px 0 18px;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
}
.tb h2+.lead{margin-top:18px}

/* ---------- Könnensstufen ---------- */
.koe{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
/* Die Stufen bauen aufeinander auf — also sieht man das jetzt auch.
   Oben eine Leiter zum Durchklicken, darunter die Karten. Sichtbar
   bleibt alles; sie sind nur nicht mehr sechs gleiche Kästen. */
.koe{display:block}
.koe-leiter{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,30px);
  padding:8px;border-radius:var(--r-l);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.028),rgba(255,255,255,.008));
}
.koe-stufe{
  flex:1 1 130px;min-width:0;cursor:pointer;text-align:left;
  display:grid;gap:8px;padding:12px 13px;border-radius:12px;
  background:none;border:1px solid transparent;color:var(--soft);
  transition:border-color .3s,background .3s,color .3s,transform .35s var(--ease-out);
}
.koe-stufe:hover{border-color:var(--line-2);color:var(--snow);transform:translateY(-2px)}
.koe-stufe[aria-selected="true"]{
  border-color:rgba(143,211,244,.5);color:var(--snow);
  background:linear-gradient(160deg,rgba(143,211,244,.14),rgba(143,211,244,.03));
}
.ks-balken{display:flex;gap:3px}
.ks-balken i{
  flex:1;height:3px;border-radius:3px;background:rgba(196,214,230,.14);
  transition:background .45s var(--ease),box-shadow .45s;
}
.ks-balken i.an{background:linear-gradient(90deg,var(--ice),var(--flut))}
.koe-stufe[aria-selected="true"] .ks-balken i.an{box-shadow:0 0 8px rgba(143,211,244,.5)}
/* Tschechisch schreibt „Úroveň dovedností 1" — dreimal so lang wie
   „Könnensstufe 1". Nicht abschneiden, sondern umbrechen lassen. */
.ks-n{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.koe-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
.koe-card{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(20px,2.4vw,28px);border:1px solid var(--line);border-radius:var(--r-l);
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  scroll-margin-top:calc(var(--nav-h) + 80px);
  transition:border-color .45s var(--ease),transform .5s var(--ease-out),box-shadow .5s var(--ease);
}
.koe-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;z-index:1;
  background:linear-gradient(180deg,var(--ice),var(--flut));
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease-out);
}
.koe-card:hover,.koe-card.an{
  border-color:rgba(143,211,244,.42);
  box-shadow:0 32px 76px -44px rgba(0,0,0,.95);
}
.koe-card:hover::before,.koe-card.an::before{transform:scaleY(1)}
.kc-kopf{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.kc-nr{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--dim);
  transition:color .4s;
}
.koe-card.an .kc-nr,.koe-card:hover .kc-nr{color:var(--ice)}
.kc-kopf .ks-balken{flex:1}
.koe-card h3{
  font-family:var(--disp);font-weight:800;font-variation-settings:'wdth' 106;
  font-size:1.12rem;color:var(--snow);margin-bottom:12px;
}
.koe-card li{
  font-size:.86rem;line-height:1.55;color:var(--soft);padding:7px 0 7px 20px;position:relative;
}
.koe-card li::before{
  content:'';position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:2px;
  background:var(--accent);transform:rotate(45deg);
  transition:background .4s,transform .4s var(--ease-out);
}
.koe-card:hover li::before{transform:rotate(135deg)}
.koe-card .sheen{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;border-radius:inherit;
  background:radial-gradient(240px 180px at var(--sx,50%) var(--sy,0%),
             rgba(255,255,255,.08),transparent 64%);
  transition:opacity .4s var(--ease);
}
.koe-card:hover .sheen{opacity:1}
/* Kursstandards — zwei Spalten, je eine Definitionsliste.
   Bewusst als dl/dt/dd: es sind Begriffe mit Erklärung, keine
   Aufzählung. Vorleseprogramme lesen das Paar dann zusammen. */
.skst-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);
  margin:clamp(26px,3.5vw,44px) 0 0;
}
.skst-block h3{margin:0 0 14px;color:var(--snow)}
.skst{margin:0;display:grid;gap:2px}
.skst-punkt{
  display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);
  gap:4px 16px;padding:11px 0;border-top:1px solid var(--line);
}
.skst-punkt dt{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ice);line-height:1.5;
}
.skst-punkt dd{margin:0;color:var(--soft);font-size:.92rem;line-height:1.55}
@media(max-width:820px){
  .skst-grid{grid-template-columns:1fr}
  /* Untereinander liest sich das Paar besser als nebeneinander —
     bei 11,5 rem Begriffsspalte bleibt sonst für die Erklärung
     kaum Platz. */
  .skst-punkt{grid-template-columns:1fr}
}

/* Der Satz unter der Leiter: warum es Gruppenkurse nur bis Stufe 3
   gibt. Steht bewusst NACH den Karten und nicht in der Einleitung —
   dort liest ihn niemand, der schon weiß, welche Stufe er ist. */
.koe-schluss{
  margin:clamp(22px,3vw,32px) 0 0;max-width:62ch;color:var(--soft);
  padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--line);
}
@media(max-width:980px){.koe-karten{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.koe-karten{grid-template-columns:1fr}.koe-stufe{flex:1 1 46%}.ks-n{font-size:11px}}
@media (prefers-reduced-motion:reduce){
  .koe-stufe:hover{transform:none}
}

/* ============================================================
   Scroll-Szene „Der Fichtelberg"
   ============================================================ */
/* 340vh waren 3,4 Bildschirme fuer eine Szene mit vier Beats — auf einer
   Startseite, die kurz sein soll, ein Drittel der ganzen Seite.
   240vh: dieselbe Inszenierung, ein Drittel weniger Weg. */
/* ══════════════════════════════════════════════════════════════
   „Der Ort" — vier Zahlen auf vier Fotos
   Ersetzt seit Runde 11 die gezeichnete Bergsilhouette. Die lief über
   240 vh und trug vier Zahlen; jetzt trägt jedes Foto seine eigene.
   ══════════════════════════════════════════════════════════════ */
.zs-gitter{
  display:grid;gap:clamp(12px,1.6vw,20px);margin-top:clamp(22px,3vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr));
}
.zs-karte{
  position:relative;border-radius:var(--r-l,18px);overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.8);
  transition:border-color .3s var(--ease-out),transform .3s var(--ease-out);
}
.zs-karte:hover{border-color:rgba(143,211,244,.4);transform:translateY(-3px)}
.zs-karte .ph-wrap{aspect-ratio:3/4}
.zs-karte picture,.zs-karte img{width:100%;height:100%;object-fit:cover;display:block}
/* Der Verlauf trägt die Zahl. Ohne ihn steht sie auf Schnee. */
.zs-karte::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,13,19,.15) 0%,rgba(8,13,19,.55) 48%,rgba(8,13,19,.93) 100%);
}
.zs-inhalt{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 20px;z-index:1}
.zs-kicker{
  display:block;font-family:var(--mono,monospace);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ice);margin-bottom:4px;
}
.zs-wert{
  display:block;font-family:var(--disp);font-weight:850;
  font-size:clamp(2.1rem,4.6vw,3rem);line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 20px rgba(0,0,0,.6);
}
.zs-wert em{
  font-style:normal;font-size:.42em;font-weight:700;color:var(--flut);
  margin-left:.18em;letter-spacing:.02em;
}
.zs-inhalt p{
  margin:10px 0 0;font-size:.83rem;line-height:1.5;color:rgba(244,249,253,.82);
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion:reduce){.zs-karte{transition:none}}
/* Auf dem Handy ist 3:4 zu hochkant: vier Karten ergaben 2.500 px, durch
   die man nur scrollt. Flacher, dafür alle vier in einem Rutsch lesbar. */
@media (max-width:640px){
  .zs-karte .ph-wrap{aspect-ratio:16/10}
  .zs-inhalt{padding:14px 15px 16px}
  .zs-wert{font-size:2.3rem}
  .zs-inhalt p{font-size:.82rem}
}

/* Leseband: dunkelt nur die untere Bildhälfte ab, damit die Zahlen tragen */
.berg-buehne::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:62%;z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,10,15,.55) 42%,rgba(6,10,15,.92));
}
.berg-beat{
  position:absolute;bottom:clamp(48px,7vh,96px);left:0;right:0;
  visibility:hidden;
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .8s var(--ease-out);
  pointer-events:none;
}
.berg-beat.an{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.berg-beat .wert{
  font-family:var(--disp);font-weight:900;font-variation-settings:'wdth' 118;
  font-size:clamp(3.4rem,10vw,8rem);line-height:.85;color:var(--snow);
  text-shadow:0 10px 60px rgba(6,10,15,.85);
}
.berg-beat .wert em{font-style:normal;font-size:.3em;color:var(--ice);margin-left:.15em}
.berg-beat .txt{
  margin-top:14px;max-width:46ch;font-size:clamp(1rem,1.1vw + .7rem,1.2rem);
  line-height:1.55;color:#D2DEE9;text-shadow:0 2px 20px rgba(6,10,15,.9);
}
.berg-beat .eyebrow{margin-bottom:12px}

.berg-fort{
  position:absolute;right:clamp(16px,3vw,44px);top:50%;transform:translateY(-50%);
  z-index:5;display:flex;flex-direction:column;gap:8px;align-items:center;
}
.berg-fort span{
  width:2px;height:26px;border-radius:2px;background:rgba(196,214,230,.18);overflow:hidden;
}
.berg-fort span i{display:block;width:100%;height:0;background:var(--ice)}
@media(max-width:1080px){.berg-fort{display:none}}

@media(max-width:760px){
  .berg-szene{height:300vh}
  .berg-beat .wert{font-size:clamp(2.8rem,15vw,4.4rem)}
}
@media (prefers-reduced-motion:reduce){
  .berg-szene{height:auto}
  .berg-buehne{position:relative;height:auto;min-height:70svh;padding:80px 0}
  .berg-beat{position:relative;bottom:auto;opacity:1;transform:none;margin-bottom:34px}
}

/* ============================================================
   Bild-Mosaik mit Tiefenversatz
   ============================================================ */
.mos{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(10px,1.2vw,18px);
}
.mos figure{position:relative;overflow:hidden;border-radius:var(--r-l);margin:0}
.mos figure .ph{width:100%;height:100%}
.mos figure img{transition:transform 1.3s var(--ease-out)}
.mos figure:hover img{transform:scale(1.06)}
.mos figcaption{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--snow);
  background:rgba(7,12,18,.62);backdrop-filter:blur(10px);
  border:1px solid var(--line-2);border-radius:6px;padding:5px 10px;
}
.mos figure::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(6,10,15,.62));
}
/*  FLACHER GESCHNITTEN — gemessen am 18.08.2026.

    Der Abschnitt war 1,70 Bildschirme hoch und zeigt fünf Fotos vom
    selben Haus. Er ist Stimmung, keine Auskunft: darüber steht „Alles
    unter einem Dach", darunter kommt nichts, was man tun könnte.

    Die Höhe kam aus den Seitenverhältnissen. Die obere Reihe stand auf
    4/5 (hochkant!) und 16/10, die untere auf drei Quadraten. Ein
    Hochformat in einer Bildwand, die man im Vorbeiscrollen liest,
    kostet am meisten Höhe und zeigt am wenigsten.

    Jetzt alles quer: 3/2 oben, 4/3 unten. Dieselben fünf Motive,
    dieselbe Anordnung, rund die halbe Höhe. Nachgemessen bei 1400 px:
    1,70 → 0,92 Bildschirme.  */
.m-a{grid-column:span 5;aspect-ratio:3/2}
.m-b{grid-column:span 7;aspect-ratio:16/9}
.m-c{grid-column:span 4;aspect-ratio:4/3}
.m-d{grid-column:span 4;aspect-ratio:4/3}
.m-e{grid-column:span 4;aspect-ratio:4/3}
@media(max-width:900px){
  .mos{grid-template-columns:repeat(6,1fr)}
  /* Flacher, aus demselben Grund wie oben. Auf dem Telefon stehen die
     beiden großen Kacheln über die volle Breite untereinander — jedes
     Zehntel Seitenverhältnis kostet dort direkt Scrollweg. */
  .m-a,.m-b{grid-column:span 6;aspect-ratio:16/9}
  .m-c,.m-d,.m-e{grid-column:span 2;aspect-ratio:1/1}
}
@media(max-width:560px){
  .m-c,.m-d,.m-e{grid-column:span 3;aspect-ratio:3/2}
  /* Die fünfte Kachel lief über die volle Breite und war damit die
     höchste von allen. Sie bleibt breit, wird aber quer geschnitten. */
  .m-e{grid-column:span 6;aspect-ratio:16/9}
}

/* Vollbild-Bildbruch */
.bild-bruch{position:relative;height:clamp(360px,62svh,620px);overflow:hidden}
.bild-bruch .ph{position:absolute;inset:0;width:100%;height:100%}
.bild-bruch .ph img{width:100%;height:100%;object-fit:cover}
.bild-bruch::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,10,15,.85) 0%,rgba(6,10,15,.35) 40%,rgba(6,10,15,.9) 100%);
}
.bild-bruch .inhalt{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;
}
/*  FESTE FARBEN, KEINE TOKENS — und zwar gemessen, nicht gemeint.
 *
 *  Der Verlauf oben (`.bild-bruch::after`) ist fest dunkel: rgba(6,10,15)
 *  von 85 % über 35 % auf 90 %. Der Untergrund dieses Bausteins ist also
 *  IMMER dunkel, unabhängig vom Thema der Seite.
 *
 *  Die Schrift stand trotzdem auf var(--snow). Auf den Bereichsseiten
 *  setzt bereiche.css --snow aber auf #141A20 — und damit stand hier
 *  Fast-Schwarz auf Fast-Schwarz. Gemessen am 13.08.2026 auf
 *  skischule.html, depot.html und skiverleih.html: rgb(20,26,32) auf
 *  einem Verlauf gegen rgb(6,10,15). Der Text war da, man konnte ihn
 *  nur nicht lesen — auch Renés eigenes Zitat auf der Depot-Seite
 *  („In unserem bedienten Depot steht jederzeit ein Mitarbeiter …").
 *
 *  Auf der Startseite fiel es nie auf, weil die dunkel ist und dort
 *  alles richtig aussah. Das ist die unangenehme Sorte Fehler: sie
 *  zeigt sich nur auf den Seiten, die man seltener aufmacht.
 *
 *  Deshalb hier dieselben Werte wie im dunklen Thema, fest verdrahtet.
 *  Das ist keine neue Gestaltung, sondern die, die gemeint war.
 */
.bild-bruch blockquote{
  font-family:var(--disp);font-weight:700;font-variation-settings:'wdth' 106;
  font-size:clamp(1.35rem,3.2vw,2.6rem);line-height:1.15;color:#F4F9FD;
  max-width:20ch;text-shadow:0 4px 40px rgba(6,10,15,.9);
}
.bild-bruch cite{
  display:block;margin-top:16px;font-family:var(--mono);font-size:10.5px;font-style:normal;
  letter-spacing:.16em;text-transform:uppercase;color:#8FD3F4;
}

/* ---------- Bildbruch als Portrait-Karte ----------
   Für Aufnahmen, die es nur klein gibt. Renés Bild auf der
   Depot-Seite liegt als 854 × 853 px vor; über die volle Breite
   gezogen rechnete der Browser es auf fast das Vierfache hoch.
   Bei 420 px Anzeigebreite reichen 854 px auch auf einem Bildschirm
   mit doppelter Punktdichte — 420 × 2 = 840. Das ist die Rechnung
   hinter der Zahl, sie ist nicht gegriffen.

   Feste Farben aus demselben Grund wie oben: auf den Bereichsseiten
   setzt bereiche.css --snow auf Fast-Schwarz, und dieser Baustein
   steht immer auf dunklem Grund. */
.bb-portraet{
  height:auto;overflow:visible;
  padding:clamp(52px,7vw,104px) 0;
  background:#0A1017;
}
.bb-portraet::after{content:none}
.bb-portraet .wrap{
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:clamp(26px,4vw,60px);align-items:center;
}
.bb-p-bild{
  margin:0;position:relative;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--r-m,14px);border:1px solid var(--line-2);
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.bb-p-bild .ph{position:absolute;inset:0}
.bb-p-bild img{width:100%;height:100%;object-fit:cover;display:block}
.bb-portraet blockquote{max-width:24ch;text-shadow:none}
@media(max-width:820px){
  .bb-portraet .wrap{grid-template-columns:1fr;gap:24px}
  /* Nicht auf volle Breite aufziehen: 78 vw sind auf 390 px rund
     304 px, also deutlich unter den 854 px der Datei. */
  .bb-p-bild{width:78%;max-width:340px}
}

/* ---------- Merken in der Preistabelle ----------
   Der Weg von „das kostet 54 €" zu „das buche ich" war vorher nicht
   gebaut. Ein Knopf je Zeile, ein Reiter am Rand, ein Sprung in die
   Buchung. */
.td-merk{width:44px;text-align:center;padding-right:6px !important}
.merk-knopf{min-width:44px;
  width:32px;height:32px;display:inline-grid;place-items:center;cursor:pointer;
  border-radius:9px;background:none;border:1px solid transparent;color:var(--dim);
  transition:color .25s,border-color .25s,background .25s,transform .25s var(--ease-out);
;min-height:44px}
.merk-knopf svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.merk-knopf:hover{color:var(--snow);border-color:var(--line-2);background:rgba(255,255,255,.04)}
.merk-knopf.an{color:var(--flut);border-color:rgba(255,178,92,.4);background:rgba(255,178,92,.11)}
.merk-knopf.an svg{fill:currentColor}
.merk-knopf:active{transform:scale(.9)}
.tbl tbody tr:hover .merk-knopf{color:var(--soft)}
.tbl tbody tr:hover .merk-knopf.an{color:var(--flut)}
/* Auf dem Handy wird aus der Zeile eine Karte — dort bekommt der Knopf
   ein Wort dazu und darf so breit sein, wie die Beschriftung braucht.
   Die Regeln dafür stehen weiter oben im Karten-Block; hier nur die Höhe,
   damit die Tippfläche stimmt. */
/* Auf dem Handy wird aus jeder Preiszeile eine Karte. Ein Lesezeichen-Symbol
   allein zwischen lauter Preisen erklärt sich dort nicht — es bekommt ein
   Wort dazu. Diese Regeln stehen bewusst NACH den Grundregeln oben, sonst
   gewinnt das display:inline-grid von dort. */
@media(max-width:720px){
  .td-merk{display:flex !important;width:auto;justify-content:flex-start;
    padding:10px 0 2px !important;text-align:left}
  .merk-knopf{
    width:auto;height:40px;padding:0 14px;gap:8px;
    display:inline-flex;align-items:center;border-color:var(--line);
  }
  .merk-knopf::after{
    content:attr(aria-label);font-family:var(--mono);font-size:10px;font-weight:700;
    letter-spacing:.13em;text-transform:uppercase;
  }
  .merk-knopf.an::after{content:attr(title)}
}

/* Der frühere Reiter am Fensterrand ist in dock.css aufgegangen —
   drei schwebende Dinge wurden eine Leiste. */

.merk-melder{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);z-index:320;
  padding:10px 18px;border-radius:999px;pointer-events:none;
  background:rgba(10,16,23,.94);border:1px solid var(--line-2);backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--snow);
  opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease-out);
}
.merk-melder.an{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.merk-melder{transition:opacity .2s}}

/* ══════════════════════════════════════════════════════════════
   Partner-Abschnitt (Skischule)
   Drei Bereiche im Raster: Kopf, Bild, zwei Karten. Auf breiten
   Bildschirmen steht das Bild neben dem Text — vorher lag dort
   nichts als Hintergrund.
   ══════════════════════════════════════════════════════════════ */
.partner{
  display:grid;gap:clamp(20px,3vw,38px);
  grid-template-columns:1fr;
}
@media (min-width:920px){
  .partner{grid-template-columns:1.05fr .95fr;align-items:start}
  .pt-kopf{grid-column:1;grid-row:1}
  .pt-bild{grid-column:2;grid-row:1}
  /* Die Karten laufen über beide Spalten. Standen sie nur links, blieb
     rechts unter dem Bild wieder eine leere Fläche — genau das Problem,
     das dieser Abschnitt lösen soll. */
  .pt-karten{grid-column:1 / -1;grid-row:2}
}
.pt-kopf h2{margin-bottom:.5em}
.pt-kopf .lead + .lead{margin-top:.9em}

/* Das Bild füllt die ganze Textspaltenhöhe — sonst klafft unter ihm
   eine Lücke, die genauso leer wirkt wie der Zustand davor. */
.pt-bild{height:100%}
.pt-bild .ph-wrap{
  height:100%;border-radius:var(--r-l,18px);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.8);
}
.pt-bild picture,.pt-bild img{width:100%;height:100%;display:block;object-fit:cover}
@media (max-width:919px){
  .pt-bild,.pt-bild .ph-wrap{height:auto}
  .pt-bild picture,.pt-bild img{height:auto}
}

.pt-karten{display:grid;gap:14px}
@media (min-width:560px){.pt-karten{grid-template-columns:1fr 1fr}}
.pt-karte{
  position:relative;padding:20px 18px 18px;border-radius:var(--r-m,14px);
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .25s var(--ease-out),transform .25s var(--ease-out);
}
.pt-karte:hover{border-color:rgba(143,211,244,.4);transform:translateY(-2px)}
.pt-nr{
  position:absolute;top:14px;right:16px;font-family:var(--mono,monospace);
  font-size:.68rem;letter-spacing:.1em;color:var(--soft);opacity:.6;
}
.pt-karte h3{font-family:var(--disp);font-size:1.05rem;font-weight:750;color:var(--snow);margin:0}
.pt-rolle{
  font-family:var(--mono,monospace);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ice);margin:9px 0 12px;
}
.pt-karte ul{margin:0;padding-left:0;list-style:none;display:grid;gap:7px}
.pt-karte li{
  position:relative;padding-left:18px;font-size:.85rem;line-height:1.45;color:var(--text);
}
.pt-karte li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:50%;border:1.5px solid var(--ice);opacity:.65;
}
@media (prefers-reduced-motion:reduce){.pt-karte{transition:none}}

/* Bilder stehen still — kein Neigen, kein Zoom beim Überfahren.
   Der Glanzstreifen bleibt: er läuft beim Einblenden einmal durch und
   reagiert nicht auf den Zeiger. */
.ph-wrap.ruhig img{transition:none}
.ph-wrap.ruhig:hover img{transform:none}

/* ══════════════════════════════════════════════════════════════
   Ablauf mit Uhrzeiten — Service und Depot
   Eine Kette statt eines Absatzes. Die Linie führt von Schritt zu
   Schritt; die Uhrzeit steht in ihrer eigenen Spalte, damit man
   den Zeitverlauf senkrecht ablesen kann.
   ══════════════════════════════════════════════════════════════ */
.ablauf{margin-top:clamp(20px,3vw,32px)}
.ab-kette{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ab-schritt{
  display:grid;grid-template-columns:auto 22px 1fr;align-items:start;
  gap:0 16px;padding:0 0 clamp(20px,2.6vw,30px);position:relative;
}
.ab-schritt:last-child{padding-bottom:0}
.ab-zeit{
  font-family:var(--disp);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(1rem,1.9vw,1.3rem);color:var(--flut);
  min-width:5.5ch;text-align:right;padding-top:.05em;
}
/* Punkt und Linie in einer Spalte: der Punkt markiert den Schritt,
   das ::after zieht die Linie zum nächsten. Beim letzten entfällt sie. */
.ab-punkt{
  position:relative;width:22px;height:22px;display:grid;place-items:center;margin-top:.15em;
}
.ab-punkt::before{
  content:"";width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:2px solid var(--ice);
  box-shadow:0 0 0 4px rgba(143,211,244,.10);
}
.ab-punkt::after{
  content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);
  width:2px;height:calc(100% + clamp(20px,2.6vw,30px) - 22px);
  background:linear-gradient(180deg,rgba(143,211,244,.45),rgba(143,211,244,.08));
}
.ab-schritt:last-child .ab-punkt::after{display:none}
.ab-inhalt h3{
  font-family:var(--disp);font-size:clamp(1rem,1.9vw,1.2rem);font-weight:750;
  /* 5 px waren zu wenig: Überschrift und Absatz lasen sich als ein Block.
     Der Abstands-Prüfer setzt die Grenze bei 6 px, und er hat recht. */
  color:var(--snow);margin:0 0 9px;
}
.ab-inhalt p{margin:0;font-size:.9rem;line-height:1.6;color:var(--text);max-width:52ch}
.ab-note{margin-top:18px;padding-left:calc(5.5ch + 38px)}
@media (max-width:560px){
  .ab-schritt{grid-template-columns:auto 18px 1fr;gap:0 12px}
  .ab-zeit{font-size:.95rem;min-width:5ch}
  .ab-punkt{width:18px;height:18px}
  .ab-punkt::after{top:18px;height:calc(100% + 20px - 18px)}
  .ab-note{padding-left:0}
}

/* Ab Tabletbreite waagerecht. Ein Zeitstrahl ist von Natur aus eine
   Linie in Leserichtung — senkrecht ließ er auf einem 1440er Schirm die
   rechte Hälfte leer, und genau das war die Kritik an dieser Seite. */
@media (min-width:900px){
  .ab-kette{
    grid-auto-flow:column;grid-auto-columns:1fr;
    gap:clamp(20px,2.6vw,36px);align-items:start;
  }
  .ab-schritt{
    grid-template-columns:1fr;grid-template-rows:auto 22px auto;
    gap:10px 0;padding:0;
  }
  .ab-zeit{text-align:left;min-width:0;padding-top:0}
  /* Der Punkt spannt sich über die ganze Spalte, damit die Linie eine
     Bezugsbreite hat. Vorher war `100%` die Breite des Punktes selbst
     (22 px) — die Linie war ein Stummel und verband nichts. */
  .ab-punkt{margin:0;width:100%;place-items:center start}
  .ab-punkt::after{
    top:50%;left:22px;transform:translateY(-50%);
    width:calc(100% + clamp(20px,2.6vw,36px) - 22px);height:2px;
    background:linear-gradient(90deg,rgba(143,211,244,.45),rgba(143,211,244,.08));
  }
  .ab-note{margin-top:26px}
  .ab-inhalt p{max-width:38ch}
  .ab-note{padding-left:0;max-width:70ch}
}

/* ============================================================
   KURSFINDER — Renés „Filter-Sache" (Dokument Skischule, S. 3)
   Links die Auswahl, rechts das Ergebnis. Auf dem Handy
   untereinander, Ergebnis oben angeheftet: wer scrollt, soll den
   Preis nicht verlieren.
   ============================================================ */
.kf{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,44px);align-items:start;
  margin-top:clamp(24px,3vw,40px);
}
.kf-steuer{display:grid;gap:clamp(14px,2vw,22px);min-width:0}
.kf-grp[hidden]{display:none}
.kf-lbl{
  display:block;margin-bottom:9px;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ice);
}
.kf-lbl label{color:inherit}
.kf-chips{display:flex;flex-wrap:wrap;gap:8px}
.kf-chips button{
  min-height:44px;padding:0 16px;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  color:var(--soft);background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:999px;
  transition:border-color .3s var(--ease),color .3s,background .3s,transform .3s var(--ease-out);
}
.kf-chips button:hover:not(:disabled){border-color:var(--line-2);color:var(--snow)}
/* Die Textfarbe stand hier zuerst auf var(--ink) — eine Variable, die es
   in diesem Projekt gar nicht gibt. Ungültige Werte werden still
   ignoriert, also blieb heller Text auf hellblauem Grund stehen:
   gemessener Kontrast 1,02 — praktisch unlesbar, und nichts hat sich
   beschwert. Jetzt derselbe dunkle Ton wie bei .btn-ice (#06222f),
   gemessener Kontrast 9,4.
   Inaktive Knöpfe von --soft auf --text: bei 11,5 px reichten 3,49
   nicht, gefordert sind 4,5. */
.kf-chips button{color:var(--text)}
.kf-chips button[aria-pressed="true"]{
  color:#06222f;background:var(--ice);border-color:var(--ice);
}
/* Gesperrt statt versteckt: „3 Tage" gibt es beim Tageskurs nicht,
   und das soll man SEHEN — sonst sucht man die Möglichkeit weiter. */
.kf-chips button:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.kf-alter{display:flex;align-items:center;gap:10px}
.kf-alter input{
  width:96px;min-height:44px;padding:0 12px;
  font-family:var(--mono);font-size:15px;color:var(--snow);
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;
}
.kf-alter input:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.kf-alter span{font-size:.9rem;color:var(--dim)}

.kf-karte{
  padding:clamp(22px,2.6vw,32px);border-radius:var(--r-l);
  border:1px solid rgba(143,211,244,.3);
  background:linear-gradient(160deg,rgba(143,211,244,.09),rgba(255,255,255,.015));
}
.kf-kicker{
  display:block;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ice);
  margin-bottom:10px;min-height:1.2em;
}
.kf-karte h3{margin:0 0 14px;color:var(--snow)}
.kf-preis{
  display:flex;align-items:baseline;gap:.14em;margin:0 0 6px;
  font-family:var(--disp);font-weight:800;font-variation-settings:'wdth' 116;
  font-size:clamp(2.6rem,5.5vw,4rem);line-height:.9;color:var(--snow);
  font-variant-numeric:tabular-nums;
}
.kf-preis em{font-style:normal;font-size:.3em;font-weight:700;color:var(--ice)}
.kf-detail{margin:0;color:var(--soft);font-size:.92rem}
/* --dim ergibt auf dem Panelgrund nur 3,29 Kontrast. Für Fließtext sind
   4,5 gefordert — hier steht die Kurszeit, also eine Information, die
   man lesen können muss, keine Zierde. Deshalb --soft (5,47). */
.kf-zeiten{margin:10px 0 0;color:var(--soft);font-family:var(--mono);letter-spacing:.04em}
.kf-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.kf-fein{margin:14px 0 0;color:var(--soft);max-width:46ch}
.kf-alter span{color:var(--soft)}

@media(max-width:900px){
  .kf{grid-template-columns:1fr}
  /* Ergebnis nach oben: auf dem Handy steht die Zahl sonst hinter
     sieben Auswahlreihen, und man tippt blind.
     KEIN position:sticky — das war der erste Entwurf und ein Fehler:
     die angeheftete Karte reichte bis unter die feste Werkzeugleiste
     am unteren Rand, und der Anruf-Knopf lag dauerhaft darunter.
     Gemessen, nicht vermutet. Oben stehen genügt: wer eine Auswahl
     ändert, scrollt zwei Zeilen und sieht den neuen Preis. */
  .kf-ergebnis{order:-1}
}

/* Zeilenname als Weg in die Reservierung (Schlitten-Preistabelle).
   Der Name ist die ART, die Spalte die DAUER — deshalb hängt der
   Link am Namen und nicht an der Preiszelle wie bei der Saisonmiete.
   Zurückhaltend: eine gepunktete Linie, keine Farbe. Ein blauer
   Zeilenname sähe aus, als wäre diese eine Zeile besonders. */
/*  Der Zeilenname ist zugleich der Sprung in die Buchung. Als reines
    Inline-Element war er 20 px hoch — auf dem Handy kaum zu treffen.
    Genau das war die Rückmeldung: „ich kann noch nicht auf die
    einzelnen Positionen in der Tabelle klicken".
    inline-flex mit min-height statt display:block: der Name soll
    weiterhin im Textfluss stehen und umbrechen dürfen. */
.tbl-tun{
  display:inline-flex;align-items:center;min-height:44px;
  color:inherit;text-decoration:underline dotted;
  text-decoration-color:rgba(143,211,244,.5);text-underline-offset:4px;
  transition:color .25s var(--ease),text-decoration-color .25s;
}
.tbl-tun:hover,.tbl-tun:focus-visible{color:var(--ice);text-decoration-color:var(--ice)}
.tbl-tun:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:4px}


/*  ══════════════════════════════════════════════════════════════════
    KÄSTEN, DIE STILLSTEHEN
    ══════════════════════════════════════════════════════════════════
    Jonas am 17.08.2026, erst zu den Kontaktkästen, dann für den Rest:
    „die sollen immer feststehend sein."

    Betroffen war alles, was ein data-tilt trug — Leistungskacheln,
    Kontaktkästen, Kursstufen, Konditionen, Sterne, Bahnen. Der 3D-Tilt
    ist im Erzeuger raus, die .tilt-Klasse steht an keinem dieser
    Elemente mehr. Übrig blieb der Lift um 4 px aus .card:hover — den
    hebt diese Regel auf. Sie steht bewusst am Ende von fx.css und
    damit nach base.css: gleiche Spezifität, das Spätere gewinnt.

    Rand, Schatten und Glanz reagieren weiter. Rückmeldung ohne
    Bewegung — man sieht, worauf man steht, aber nichts rutscht beim
    Lesen weg. Der Tilt-Code in fx.js bleibt liegen und findet nichts
    mehr; er ist die Wiedereinbaustelle, falls das je zurück soll.  */
.kond:hover,.stern:hover,.bahn:hover,.kon-card:hover,
.koe-card:hover,.vt:hover{transform:none}