/* ==========================================================================
   SPORT 2000 Knitel Warth - Premium Design System
   Typografie: SPORT 2000 Bold (Display) + Inter (Text)
   Motion: expo-out Easing, nur transform/opacity, GPU-freundlich
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face{font-family:S2K;src:url(../fonts/sport2000-bold.woff2) format("woff2"),url(../fonts/sport2000-bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:S2K;src:url(../fonts/sport2000-regular.woff2) format("woff2"),url(../fonts/sport2000-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-bold.woff2) format("woff2");font-weight:700;font-display:swap}
/* DM Sans (21.9.2026, "Ischgl Stil" fuer die ganze Website) — echte,
   variable Google-Schriftdatei, per Google-Fonts-CSS2-API bezogen
   (freie SIL-Lizenz), lokal eingebettet wie alle anderen Schriften
   dieses Projekts. Eine einzige Datei mit Gewichts-Bandbreite statt
   dreier Einzeldateien wie bei Inter — spart zwei Downloads, der
   Browser interpoliert die Zwischenstufe selbst (unicode-range deckt
   deutsche Umlaute/ß ab, U+0000-00FF). Inter bleibt als Systemschrift-
   Rueckfall in der Kette, nicht entfernt. */
@font-face{font-family:"DM Sans";src:url(../fonts/dm-sans-variable.woff2) format("woff2-variations"),url(../fonts/dm-sans-variable.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Ueberschriftenschrift (Stand 22.9.2026) — Ischgls echte Headline-Schrift
   ist "eurostile-heavy", ein kommerzieller Monotype-Font. Deren .woff2 liegt
   offen auf Ischgls CDN und ist technisch ladbar, wird hier aber bewusst
   NICHT eingebettet: Ischgl hat sie bei Monotype fuer die eigene Domain
   lizenziert, eine Webfont-Lizenz ist nicht uebertragbar. Der TVB Ischgl hat
   am 22.9.2026 telefonisch gesagt, man duerfe sie "von ihrer Homepage
   nehmen, nur im Impressum angeben" — das kann er nicht wirksam erlauben,
   weil die Rechte bei Monotype liegen, nicht bei ihm. Dieselbe Linie wie
   beim abgelehnten echten Ski-Arlberg-Logo.

   Gewaehlt: Saira 800 (Google Fonts, freie SIL-Lizenz). Vorher ELF freie
   Kandidaten gegen die echte Eurostile-Datei gerendert und verglichen
   (lokaler Specimen im Sitzungs-Scratchpad, nicht im Repository) — Aldrich
   (bis 22.9.2026 hier im Einsatz) ist zu leicht und zu weit gesetzt,
   Michroma zu duenn, Orbitron zu Science-Fiction, Teko/Oxanium zu schmal
   bzw. zu verspielt, Rajdhani/Titillium ohne Charakter. Saira 800 trifft
   Strichstaerke und die quadratisch-gerundeten Formen am besten, Exo 2 800
   war die knappe Zweitwahl.

   Sobald eine echte Monotype-Lizenz vorliegt (Eurostile Pro Heavy, ab
   89,99 USD einmalig fuer den einzelnen Schnitt): .woff2 nach
   assets/fonts/ legen, hier und in --display eintragen, danach den
   Ueberlauf-Scan laufen lassen (Eurostile ist wieder anders breit).
   Die Lizenzurkunde gehoert NICHT ins Repository.

   S2K bleibt als Rueckfall in der Schriftkette, ist aber nicht mehr die
   primaere Ueberschriftenschrift. */
@font-face{font-family:Saira;src:url(../fonts/saira-800.woff2) format("woff2");font-weight:400 900;font-display:swap}

/* --- Tokens --------------------------------------------------------------- */
:root{
  --red:#c41230;
  --red-lit:#e4173a;
  /* Ischgl-Stil (21.9.2026, "mach mir die ganz website ich möchte den
     stil von ischgl.com") — löst die bisherige, ausführlich begründete
     "Alpine Wärme"-Entscheidung vom 5.9.2026 (Text siehe Git-Historie
     dieser Datei) auf ausdrücklichen Nutzerwunsch ab. Nicht geraten:
     die echten Ischgl-Markenwerte wurden per curl direkt aus deren
     produktiver CSS-Datei gezogen (WebFetch war für ischgl.com von der
     Netzwerk-Firewall dieser Sitzung mit EGRESS_BLOCKED gesperrt, curl
     über das Bash-Werkzeug dagegen nicht) — `--color-secondary:#313131`
     (Anthrazit statt Warmbraun), `--color-default-dark:#161616`,
     `--color-bg:#edf0f3` (kühles, neutrales Hellgrau statt warmem
     Creme), `--color-text-muted:#929292`, `--color-primary:#bb1c3f`
     (Crimson — praktisch deckungsgleich mit dem hier längst bestehenden
     CI-Rot, musste deshalb nicht angepasst werden). Die komplette
     Farbfamilie unten wandert von einem deutlichen Gelb-/Braunstich
     (R weit über B) zu echtem, kühlem Neutral (R≈G≈B) — das ist der
     Kern des Stilwechsels: Ischgl wirkt glamourös/urban/kühl, nicht
     rustikal/hüttenwarm. Rot bleibt unverändert (CI-Farbe, liegt
     ohnehin schon nah an Ischgls eigenem Markenrot). --gold bleibt
     als reiner Deko-Ton bestehen (siehe CLAUDE.md, "Rot ist die
     einzige Akzentfarbe", --gold nie auf Buttons/Links/CTAs) — dutzende
     bereits abgenommene Features (Saison-Countdown-Frost, Kennzahlen-
     Kacheln, Webcam-Wetter-Chips u.v.m.) hängen daran, ein Streichen war
     nicht beauftragt und hätte weit über den Farbwechsel hinaus Schaden
     angerichtet. **Bewusst NICHT angefasst in dieser Runde**: die an
     sehr vielen Einzelstellen fest verdrahteten `rgba(12,12,12,…)`-
     Foto-Verlaufsschleier (Hero-/Bleed-/Kacheln-Verläufe in `app.css`,
     `enhance.css`, `calendar.css` sowie in den Seiten-eigenen
     `<style>`-Blöcken) — dutzende dieser Werte wurden über viele
     Sitzungen hinweg einzeln auf Kontrast nachgemessen und kalibriert
     (siehe die vielen "Kontrast nachgemessen, nicht geraten"-Abschnitte
     in diesem Dokument). Ein blindes Umfärben hätte reales Risiko,
     dort erneut Lesbarkeitsfehler einzuführen, die schon einmal mühsam
     behoben wurden. Die sitegweite Basis (Grundflächen, Fließtext,
     Trennlinien, Schrift) ist damit auf Ischgl-Kühl umgestellt — die
     einzelnen, bereits fein kalibrierten Foto-Momente auf den
     Unterseiten bleiben vorerst in ihrer bestehenden, warmen
     Verlaufsfarbe, das ist eine bewusste Risikoabwägung, keine
     vergessene Stelle. */
  --ink:#181818;
  --ink-2:#232323;
  --ink-3:#2e2e2e;
  --paper:#eef0f3;
  --paper-2:#e4e7eb;
  --paper-3:#d3d7dc;
  --grey:#8b8e93;
  --grey-d:#5b5e63;
  --line:rgba(255,255,255,.10);
  --line-d:rgba(20,20,20,.09);
  --gold:#b8874f;

  --display:Saira,S2K,"Arial Narrow",sans-serif;
  --text:"DM Sans",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --pad:clamp(20px,5vw,72px);
  --max:1440px;
  --nav-h:108px;
  /* --nav-h bleibt unveraendert die site-weite Grundlage fuer JEDEN
     "content-offset" (padding-top von Heros, top von sticky-Elementen usw.
     — dutzende Stellen in app.css/enhance.css/calendar.css). Ein Banner
     ueber der Kopfleiste (PWA-Installationshinweis, Saison-Balken) erhoeht
     weiterhin NUR --nav-h, wie bisher — das bleibt fuer all diese Stellen
     unveraendert richtig.
     --nav-own-h ist NEU und aufgeloest von --nav-h: die tatsaechliche
     Bauhoehe der Kopfleiste SELBST, die sich NIE aendert. Siehe .nav weiter
     unten — ohne diese Trennung waechst .nav beim Banner-Zuwachs mitsamt
     seinem zentrierten Inhalt und der Banner ueberlappt die Kopfleiste bei
     jeder Bannerhoehe > ~24px (nachgemessen 8.9.2026: bei +56px lag das Logo
     9px unter dem Banner). Mit der Trennung bleibt .nav exakt so hoch wie
     hier eingetragen und ruecht nur noch buendig unter den/die Banner.
     Nachtrag (21.9.2026, "genau im ischgl.com stil"): beide Werte von 72px
     auf 108px angehoben — Ischgls echte, per curl gezogene CSS nennt
     `--navbar-height:149px` (Desktop), eine deutlich geraeumigere
     Kopfleiste als die bisherige kompakte Fassung. Nicht 1:1 auf 149px
     uebernommen (das waere fast eine Verdopplung mit entsprechend groesserem
     Testaufwand ueber alle Seiten), 108px ist ein deutlich sichtbarer,
     aber moderaterer Schritt in dieselbe Richtung. Funktioniert dank der
     zwei-Variablen-Trennung automatisch ueberall, wo Inhalte sich an
     --nav-h orientieren (Hero-Abstand, sticky-top usw.) — das war exakt der
     Zweck dieser Trennung, siehe Fund vom 8.9.2026 oben. */
  --nav-own-h:108px;
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* [hidden] muss immer gewinnen — sonst schlaegt jede eigene display:flex/grid-
   Regel (gleiche Spezifitaet, aber nach dem UA-Stylesheet geladen) das
   Attribut, und ein "verstecktes" Element bleibt sichtbar und faengt sogar
   Klicks ab. Ist schon dreimal in diesem Projekt passiert (News-Fenster,
   Dashboard) — darum hier ein fuer alle Mal global erzwungen. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,picture,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,ul,table{margin:0}
ul{list-style:none;padding:0}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red-lit);outline-offset:3px}

/* --- Scrollleiste, eigenes Design statt Browser-Standard ------------------
   Bewusst ein deutlich eigenstaendiges Bauteil, keine bloße Umfaerbung der
   nativen Leiste: eigene dunkle Schiene (statt transparent — sonst wirkt die
   Leiste auf hellen Abschnitten fast wie "nichts da"), darin ein deutlich
   dickerer, klar umrandeter Griff mit Verlauf und sichtbarem Rand — liest sich
   als eigenes, gestaltetes Objekt, nicht als Systemleiste. Pfeilknoepfe
   komplett entfernt (`scrollbar-button{display:none}`). Farbe: Gold-Braun in
   Ruhe (reine Deko-Waerme, kein Akzent auf einem Button/CTA), Rot beim
   Hover/Ziehen — dieselbe Regel wie sonst auf der Seite: Rot markiert nur, wo
   gerade etwas passiert.
   Wichtig, per echtem Test in dieser Automatisierungsumgebung gefunden (nicht
   nur vermutet): `background-clip` wird auf `::-webkit-scrollbar-thumb` vom
   Chromium-Motor NICHT unterstuetzt und macht dabei still den kompletten
   `background`-Wert (den Verlauf) leer — ein erster Anlauf mit
   `border:transparent;background-clip:padding-box` fuer einen schwebenden
   Rahmen-Effekt haette dadurch einen UNSICHTBAREN Griff ergeben. Isoliert per
   `CSSStyleSheet.insertRule` nachgestellt und bestaetigt: Verlauf allein bzw.
   Verlauf+`border` (mit echter, nicht transparenter Randfarbe) funktionieren,
   Verlauf+`background-clip` nicht — der Rand hier ist deshalb eine echte,
   sichtbare Farbe (`--ink`), kein transparenter Rahmen-Trick.
   **Wird die Leiste trotz frischem Deploy weiterhin als native Windows-Leiste
   mit Pfeilknoepfen angezeigt**: das ist kein CSS-Fehlschlag, sondern eine
   von der Seite nicht beeinflussbare Windows-Kontrastfunktion
   (`forced-colors`/Hoher Kontrast) — die zwingt jeden Browser, IMMER die
   Systemleiste zu zeichnen, egal welches CSS die Seite mitbringt. Vor jedem
   weiteren CSS-Anlauf zuerst pruefen (im gewoehnlichen Browserfenster, nicht
   hier): Windows-Einstellungen > Barrierefreiheit > Kontrastdesigns > Aus. */
html{scrollbar-width:thin;scrollbar-color:var(--gold) var(--ink)}
*::-webkit-scrollbar{width:14px;height:14px}
*::-webkit-scrollbar-track{background:rgba(33,33,33,.35)}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold),var(--ink-3));
  border-radius:0;border:2px solid var(--ink);
  transition:background .25s var(--ease)
}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--red-lit),var(--red))}
*::-webkit-scrollbar-thumb:active{background:var(--red)}
*::-webkit-scrollbar-button{display:none;width:0;height:0}
*::-webkit-scrollbar-corner{background:rgba(33,33,33,.35)}

/* --- Layout --------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:960px}
section{position:relative}
/* Warmer Glanzschein statt flacher Fläche — wie fernes Kaminlicht, das von
   den Ecken hereinzieht. Rein dekorativ (siehe --gold-Hinweis oben), läuft
   auf jeder .dark-Sektion site-weit mit. */
.dark{
  background:
    radial-gradient(1200px 760px at 6% -12%,rgba(184,135,79,.13),transparent 55%),
    radial-gradient(900px 640px at 100% 112%,rgba(184,135,79,.09),transparent 55%),
    var(--ink);
  color:#fff;
}
.soft{background:var(--paper-2)}
/* Nachtrag (10.9.2026), "viel länger gehen, sieht mit so vielen
   Abschnitten nicht professionell aus": beide Stufen der Abschnitts-
   Innenabstände deutlich angehoben, site-weit über diese vier
   Utility-Klassen — wirkt sich automatisch auf jeden Abschnitt jeder
   Seite aus, ohne jede Section einzeln anzufassen. .pt-s/.pb-s lag vorher
   bei ziemlich genau der Hälfte von .pt/.pb (48-90px vs. 80-180px) — kurze
   Abschnitte (Statistik-Leisten, Statement-Sätze, Marken-Bänder) huschten
   dadurch beim Scrollen schnell vorbei. Jetzt liegt .pt-s/.pb-s dort, wo
   vorher .pt/.pb lag, und .pt/.pb selbst noch einmal darüber — der
   Größenunterschied zwischen "klein" und "normal" bleibt erhalten, beide
   Stufen sind aber insgesamt deutlich grosszügiger. */
.pt{padding-top:clamp(110px,15vw,220px)}
.pb{padding-bottom:clamp(110px,15vw,220px)}
.pt-s{padding-top:clamp(80px,11vw,170px)}
.pb-s{padding-bottom:clamp(80px,11vw,170px)}

/* --- Typografie ----------------------------------------------------------- */
/* Sicherheitsnetz seit dem Schriftwechsel auf Aldrich (21.9.2026): Aldrich
   ist pro Zeichen deutlich breiter als das zuvor verwendete S2K, lange
   deutsche Komposita ("GRUNDVORAUSSETZUNG", 18 Zeichen) passen dadurch auf
   einem 390-px-Bildschirm nicht mehr in eine Zeile und wurden am rechten
   Rand abgeschnitten (am Screenshot bestaetigt). `hyphens:auto` trennt sie
   stattdessen sauber mit Bindestrich — die Seiten sind durchgehend mit
   lang="de|en|fr|es|nl" ausgezeichnet, der Browser kennt also die richtigen
   Trennstellen. `overflow-wrap` bleibt als letzte Reserve fuer Woerter, zu
   denen es gar keine Trennstelle gibt. */
.display{
  font-family:var(--display);font-weight:700;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
  text-transform:uppercase;line-height:.86;letter-spacing:-.01em;
  margin:0;
}
/* d1/d2 (grosse Hero-/Bleed-Ueberschriften) wechseln von der engen
   Basis-Laufweite (-.01em) auf eine leicht geoeffnete — Ischgls eigene
   Riesenueberschriften laufen extrem weit auseinander (letter-spacing:1rem
   bei 8,75rem Schrift). Eine 1:1-Uebernahme dieses Verhaeltnisses wurde
   bewusst NICHT gemacht (Kollisionsrisiko mit den vielen bereits auf die
   enge Laufweite hin ausgemessenen Zeilenumbruechen/`max-width:Xch`-Werten
   in Foto-Hero-Abschnitten, siehe CLAUDE.md) — dieser moderate positive
   Wert ist ein sicherer, aber klar spuerbarer Schritt in dieselbe Richtung.
   d3/d4 bleiben bei der engeren Basis-Laufweite (kleinere, dichtere
   Ueberschriften, z. B. Kachel-/Karten-Titel). */
.d1{font-size:clamp(3.2rem,11.5vw,11rem);letter-spacing:.035em}
.d2{font-size:clamp(2.6rem,7.5vw,6.4rem);letter-spacing:.025em}
.d3{font-size:clamp(2rem,4.6vw,4rem)}
.d4{font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:.95}
/* Auf schmalen Bildschirmen etwas kleinere Mindestgroessen als bisher.
   Grund ist nicht Geschmack, sondern eine Messung (21.9.2026): Aldrich
   setzt "GRUNDVORAUSSETZUNG" bei 32 px auf 424 px Breite, verfuegbar sind
   bei 390 px Fensterbreite aber nur 350 px — noetig waeren 26,4 px. Auf
   `hyphens:auto` allein ist kein Verlass: ein Browser ohne deutsches
   Trennwoerterbuch (hier im Testbrowser nachgewiesen) bricht dann mitten
   im Wort ohne Bindestrich um. Die kleineren Mindestwerte loesen das
   unabhaengig davon; `hyphens` bleibt als Zusatz erhalten. */
@media (max-width:560px){
  .d1{font-size:clamp(2.6rem,11.5vw,11rem)}
  .d2{font-size:clamp(2.1rem,7.5vw,6.4rem)}
  .d3{font-size:clamp(1.6rem,4.6vw,4rem)}
  .d4{font-size:clamp(1.3rem,2.6vw,2.4rem)}
}

/* Eyebrow nach Ischgls `.title-block__top-title` (Produktiv-CSS, 21.9.2026):
   dort sehr klein (.625rem) bei sehr grosser Laufweite (.40625rem ≙ 65 %
   der Schriftgroesse), rot auf hellem Grund / weiss auf Foto. Hier .65rem
   bei .42em — dasselbe Verhaeltnis, nur an den laengeren deutschen
   Eyebrow-Texten dieses Projekts ausgerichtet. Der kurze Strich davor
   bleibt (macht die Zeile auf breiten Flaechen auffindbar) und ist wie bei
   Ischgl 3px stark statt haarduenn. */
.eyebrow{
  font-family:var(--text);font-weight:700;
  font-size:.65rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--red);display:flex;align-items:center;gap:.9em;
}
.dark .eyebrow{color:#fff}
.eyebrow::before{content:"";width:2.5rem;height:3px;background:var(--red);display:block;flex:0 0 auto}
.dark .eyebrow{color:var(--red-lit)}

.lead{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.5;color:var(--grey-d);max-width:56ch}
.dark .lead{color:#bfc2c7}
.body{font-size:1.0625rem;line-height:1.7;color:var(--grey-d);max-width:62ch}
.dark .body{color:#b0b3b8}
.small{font-size:.875rem;color:var(--grey);line-height:1.6}
.mt-1{margin-top:.8em}.mt-2{margin-top:1.6em}.mt-3{margin-top:2.6em}.mt-4{margin-top:4em}

/* --- Buttons -------------------------------------------------------------- */
/* Ischgl-Stil (21.9.2026, "genau im ischgl.com stil"): deren echte,
   per curl gezogene Produktiv-CSS zeigt eine sehr klare, wiederkehrende
   Signatur bei Buttons — `border-radius` fast nirgends (nur echte Kreise
   bei Icon-Knöpfen), stattdessen eine per Hintergrund-Verlauf diagonal
   abgeschnittene obere rechte Ecke (`.btn-primary`/`.btn-booking`, exakt
   dieselbe `linear-gradient(315deg, transparent Xrem, farbe 0)`-Formel an
   mehreren Stellen), dazu `text-transform:uppercase` auf jedem Knopf. Das
   ist ein deutlich angulareres, "editorial-glamouröses" Bild als die
   bisherige, runde Pillenform dieses Projekts. Hier per `clip-path`
   nachgebaut statt per Hintergrund-Verlauf (Ischgls eigene Technik) —
   `clip-path` schneidet die GESAMTE Box (Füllung UND `box-shadow`-Rand),
   funktioniert dadurch gleichermaßen für gefüllte (`.btn`) wie für
   umrandete (`.btn-ghost`) Knöpfe; der Verlauf-Trick selbst hätte bei
   `.btn-ghost` (durchsichtiger Hintergrund) nichts zum Abschneiden gehabt. */
/* Knopf-Geometrie 1:1 aus Ischgls Produktiv-CSS abgenommen (21.9.2026,
   per curl geholt, nicht geraten): deren `.btn-primary` hat eine FESTE
   Hoehe von 3.125rem (50px), `text-transform:uppercase`, `line-height:1`
   und ein bewusst ASYMMETRISCHES `padding-right:4.6875rem` (75px) —
   der grosse rechte Innenabstand ist kein Zufall, sondern schafft den
   Platz fuer den diagonal abgeschnittenen Eck-Ausschnitt, damit der
   Schnitt nie in die Schrift laeuft. Der Ausschnitt selbst entsteht hier
   ueber `clip-path` statt ueber Ischgls eigenen Verlauf-Trick
   (`linear-gradient(315deg,transparent 2.1875rem,farbe 0) top right`):
   der Verlauf kann nur eine sichtbare Hintergrundfarbe abschneiden,
   `clip-path` schneidet die GANZE Box inklusive `box-shadow`-Rahmen —
   nur so bekommt auch `.btn-ghost` (durchsichtig, nur Rahmen) denselben
   Schnitt. Hover ist bei Ischgl kein Aufhellen, sondern ein farbiges
   Gluehen in der Knopf-Eigenfarbe
   (`filter:drop-shadow(0 0 1.25rem var(--color-primary))`) — genau so
   hier uebernommen, deshalb steht die Glut-Farbe als `--glow`. */
.btn{
  --bg:var(--red);--fg:#fff;--notch:2.1875rem;--glow:var(--red);
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  height:3.125rem;padding:0 4.6875rem 0 1.875rem;
  background:var(--bg);color:var(--fg);
  font-weight:700;font-size:.9rem;line-height:1;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%);
  transition:filter .3s var(--ease),transform .5s var(--ease),background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
  will-change:transform;
}
.btn:hover{filter:drop-shadow(0 0 1.25rem var(--glow));transform:translateY(-2px)}
.btn .arw{transition:transform .5s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
/* Ischgls asymmetrisches padding-right (75 px Platz fuer den Eckschnitt)
   ist auf einem 390-px-Bildschirm zu viel: lange deutsche Beschriftungen
   wie „Ausrüstung vorab reservieren" wurden damit 418 px breit und haben
   die Seite waagrecht ueberlaufen lassen (gemessen, nicht geschaetzt).
   Unter 560 px deshalb ein kleinerer Eckschnitt und entsprechend weniger
   rechter Innenabstand — die Form bleibt, nur der Massstab schrumpft. */
@media (max-width:560px){
  .btn{--notch:1.15rem;padding:0 2.3rem 0 1.15rem;font-size:.82rem;max-width:100%}
}

/* Der Zweit-Knopf ist bei Ischgl KEIN Umriss, sondern eine gefuellte
   dunkle Flaeche mit demselben Eckschnitt (`.btn-dark`:
   `linear-gradient(315deg,transparent 2.1875rem,var(--color-very-dark) 0)`).
   Das ist hier nicht nur Stiltreue, sondern behebt einen echten Fehler:
   ein per `clip-path` geschnittener Knopf kann keinen umlaufenden Rahmen
   haben — die Diagonale bliebe ungezeichnet, der Umriss sah aufgerissen
   aus (am Screenshot bestaetigt, 21.9.2026). Gefuellt stellt sich die
   Frage nicht mehr. */
.btn-ghost{--bg:var(--ink-3);--fg:#fff;--glow:rgba(24,24,24,.85);box-shadow:none}
.dark .btn-ghost{--bg:rgba(255,255,255,.14);--fg:#fff;--glow:rgba(255,255,255,.3);box-shadow:none}
.btn-ghost:hover{--bg:var(--ink);--fg:#fff;box-shadow:none}
.dark .btn-ghost:hover{--bg:#fff;--fg:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

.tlink{
  display:inline-flex;align-items:center;gap:.55em;position:relative;
  font-weight:700;font-size:.95rem;padding-bottom:.35em;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:right;
  transition:transform .6s var(--ease);
}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}
.tlink .arw{transition:transform .5s var(--ease)}
.tlink:hover .arw{transform:translateX(5px)}

/* --- Navigation ----------------------------------------------------------- */
.nav{
  position:fixed;left:0;right:0;z-index:100;
  /* top statt fix 0: ruecht buendig unter jeden Banner, der --nav-h ueber
     die eigene, konstante --nav-own-h hinaus erhoeht hat (siehe :root-
     Kommentar oben). Ohne Banner ist --nav-h==--nav-own-h, top rechnet
     sich also zu 0 -- identisch zum bisherigen Verhalten. */
  top:calc(var(--nav-h) - var(--nav-own-h));
  height:var(--nav-own-h);
  display:flex;align-items:center;
  transition:transform .6s var(--ease),top .5s var(--ease);
  will-change:transform;
}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(33,33,33,.7);backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid var(--line);
  opacity:0;transition:opacity .5s var(--ease);
}
.nav.solid::before{opacity:1}
.nav.up{transform:translateY(-104%)}
@media (max-width:760px){
  /* .nav::before liegt fest ueber der Seite und bekommt so waehrend fast
     jedem Scrollen des Handys neu berechnet -- ein 22px-Weichzeichner ist
     dabei auf schwaecheren mobilen GPUs ein spuerbarer Ruckel-Faktor. Am
     Handy deshalb eine fast deckende Flaeche ohne Weichzeichnung statt
     Milchglas -- optisch fast identisch, kostet aber nichts beim Scrollen.
     Desktop behaelt den Blur, dort faellt die Kosten kaum auf. */
  .nav::before{background:rgba(33,33,33,.97);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* --- PWA-Installationshinweis, oben (assets/js/pwa.js) -------------------- */
.pwa-banner{
  /* top statt fix 0: ruecht unter den Saison-Balken (.sk-band), falls der
     gerade eingeblendet ist -- var(--sk-band-h,0) faellt ohne ihn auf 0
     zurueck, identisch zum bisherigen Verhalten. */
  position:fixed;top:var(--sk-band-h,0);left:0;right:0;z-index:101;
  display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  background:rgba(33,33,33,.94);backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);transition:transform .5s var(--ease);
}
@media (max-width:760px){
  /* wie .nav::before oben -- am Handy fest sichtbar, solange der Hinweis
     nicht weggeklickt/installiert ist, kein Blur noetig. */
  .pwa-banner{background:rgba(33,33,33,.98);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.pwa-banner.in{transform:translateY(0)}
.pwa-banner img{width:38px;height:38px;border-radius:0;flex:0 0 auto}
.pwa-banner .txt{flex:1 1 auto;min-width:0}
.pwa-banner .txt b{display:block;font-size:.86rem;color:#fff}
.pwa-banner .txt span{display:block;font-size:.76rem;color:#a6a9ae;margin-top:1px}
.pwa-banner button.install{
  flex:0 0 auto;padding:.55em 1.1em;border-radius:0;background:var(--red);
  color:#fff;font-size:.82rem;font-weight:600;white-space:nowrap;
}
.pwa-banner button.install:hover{background:var(--red-lit)}
.pwa-banner button.close{
  flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  color:var(--grey);
}
.pwa-banner button.close svg{width:16px;height:16px}
.pwa-banner button.close:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.pwa-banner{transition:none}}
@media (min-width:761px){.pwa-banner{display:none!important}}

/* ===========================================================================
   Saison-Countdown — gemeinsame Bausteine
   (assets/js/saison-banner.js oben auf JEDER Seite + der grosse Abschnitt
   #saisonstart auf ski-arlberg.html, assets/js/saison-countdown.js)

   Nachtrag (8.9.2026), zweite Ueberarbeitung — auf Wunsch "design passt mir
   immer noch nicht" + "professioneller": das driftende Diagonalstreifen-
   Motiv (.sk-stripes) und der Lichtschimmer (.sk-shine) sind wieder raus —
   zu unruhig/spielerisch, nicht die ruhige, editoriale Sprache, die
   skiarlberg.at selbst faehrt (viel Leerraum, keine Muster/Texturen).
   Ersetzt durch echten, fallenden Schnee — dasselbe Prinzip wie das
   bestehende .fall/.snow-facade auf ski-arlberg.html/warth.html, aber mit
   einer echten Flockenform statt schlichter Punkte.

   Nachtrag (8.9.2026), DRITTE Ueberarbeitung — auf Wunsch "viel mehr
   Animationen", "anderster werden", "winterlicher werden": deutlich
   dichterer Schnee (Balken 9->14 Flocken, Abschnitt 26->40), echter
   Windzug (die Flocken driften jetzt seitlich mit, nicht nur gerade
   runter/auf der Stelle — separate --sway-Animation auf margin-left, laeuft
   unabhaengig von der Fall-/Schwebe-Animation auf transform, siehe unten),
   dazu ein ZWEITER, eigenstaendiger Bewegungstyp: kleine funkelnde
   Lichtpunkte (.tw, Puls aus Groesse+Deckkraft) zwischen den Flocken —
   liest sich wie Reif/Eiskristalle, die kurz das Licht fangen. Die
   Ziffernkacheln haben jetzt ein vereistes Glas-Material
   (backdrop-filter:blur, kuehler Blauton) statt der vorherigen warmen
   Gold-Braun-Flaeche — das war beim allerersten Anlauf (siehe die
   .cd-feld-Erklaerung weiter unten in ski-arlberg.html) bewusst
   *verworfen*, weil Milchglas auf einer reinen Farbflaeche nur trueb
   wirkt — jetzt ist genau das nicht mehr der Fall: hinter den Kacheln
   driftet jetzt echter Schnee, das Glas hat also etwas zu verwischen.
   Der Balkenhintergrund selbst ist von einer flachen warmen Braunflaeche
   auf einen richtigen Winterhimmel umgestellt (kuehler Blauschimmer oben
   links wie Mondlicht, warmer Goldschimmer unten rechts als Markenbezug,
   dazwischen ein dunkler Verlauf) — kaeltere, klar winterlichere Anmutung,
   ohne den Goldton ganz aufzugeben.

   WICHTIG, warum hier eine SELBST GEZEICHNETE Flocke steht und nicht das
   echte Ski-Arlberg-Logo: Auf Wunsch "ski arlberg logo schneeflocken" kurz
   das echte Logo geprueft (skiarlberg.at/static/img/logo-portal.svg) — das
   ist eine eingetragene Wortmarke (Vektorpfade der Buchstaben "ARLBERG" auf
   goldenem Grund), kein Schneeflocken-Symbol. Ein fremdes Warenzeichen als
   wiederkehrende Deko-Textur ueber die eigene Seite zu streuen waere eine
   Markenrechtsfrage, keine reine Gestaltungsentscheidung — deshalb bewusst
   NICHT eingebettet. Stattdessen eine eigene, schlichte Flocke (sechs
   Arme + kleine Zacken, derselbe Linienstil wie die uebrigen Icons dieser
   Seite) in genau dem gemessenen Ski-Arlberg-Gold/-Creme — trifft die
   Anmutung, ohne das fremde Zeichen zu kopieren.

   Zwei Auspraegungen, weil sich ein 52px hoher Balken und ein hoher
   Abschnitt unterschiedlich verhalten muessen:
     .sk-band-snow  im schmalen Balken: kein Platz zum "Fallen" — die
                    Flocken schweben auf der Stelle (Auf-und-Ab plus
                    Drehung plus seitlicher Drift), wie Staubschnee im Wind.
     .sk-snow       im hohen Abschnitt #saisonstart: faellt wirklich von
                    oben nach unten durch, mit demselben seitlichen Drift,
                    wie .fall an anderer Stelle der Seite — dort ist genug
                    Hoehe dafuer da.
   Beide Container werden von den jeweiligen Skripten selbst befuellt
   (saison-banner.js bzw. saison-countdown.js) — bewusst NICHT ueber das
   bestehende, generische .fall/embeds.js-System, weil Balken und Abschnitt
   zu unterschiedlichen Zeitpunkten im Skript-Ablauf entstehen und eine
   gemeinsame Abhaengigkeit dort nur unnoetige Zeitfallen einbauen wuerde.

     .sk-flip     eine Bahnhofstafel-Ziffernkachel: klappt beim Wertwechsel
                  um die eigene Achse um (rotateX), statt den Text einfach
                  auszutauschen. Zeigt IMMER eine ganze Zahl (z. B. "86"),
                  nicht Ziffer fuer Ziffer, damit unterschiedlich breite
                  Werte (9 Tage vs. 86 Tage) keine Sonderbehandlung
                  brauchen. Bleibt unveraendert von dieser Ueberarbeitung.

   Farbwerte bewusst an der ECHTEN Ski-Arlberg-CI angelehnt (8.9.2026 selbst
   von skiarlberg.at abgemessen): deren Marken-Gold ist rgb(183,141,77) —
   praktisch deckungsgleich mit dem hier laengst bestehenden --gold
   (rgb(184,135,79)) — bleibt als Akzent erhalten, auch wenn der Grundton
   jetzt kuehler/winterlicher ist.

   Falle beim Testen in dieser Automatisierungsumgebung, siehe Fallstricke
   in CLAUDE.md: Ein CDP-Skript, das im selben Tick eine transition-behaftete
   Eigenschaft setzt UND sofort wieder ausliest, sieht oft den ALTEN Wert,
   obwohl CSS und JS korrekt sind — erst `getAnimations().forEach(a=>
   a.cancel())` + `transition:none` vor der Messung liefert einen
   verlaesslichen Wert. Kein Fehler dieser Kacheln, nur der Messmethode.
   Zusaetzlich meldet diese Pane `prefers-reduced-motion:reduce` durchgehend
   als aktiv — die volle Animation liess sich hier nie live beobachten, nur
   durch isoliertes Nachbauen der Erzeugungsschleife mit angenommenem
   REDUZIERT=false pruefen.
   =========================================================================== */

/* --- Die Flocke selbst, als CSS-Variable (einmal gezeichnet, mehrfach
   verwendet) — sechs Arme mit kleinen Zacken, gleicher Linienstil wie die
   uebrigen Wetter-/Ausstattungs-Icons dieser Seite (stroke, keine Flaeche).
   Zwei Toene: creme (haeufiger, dezent) und gold (seltener, als Akzent). */
:root{
  --sk-flocke-creme:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef0f3' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 2v20M4.5 7l15 10M4.5 17l15-10'/%3E%3Cpath d='M12 2 10 4.3M12 2l2 2.3M12 22l-2-2.3M12 22l2-2.3M4.5 7l.4 2.8M4.5 7l2.7-.8M19.5 7l-.4 2.8M19.5 7l-2.7-.8M4.5 17l.4-2.8M4.5 17l2.7.8M19.5 17l-.4-2.8M19.5 17l-2.7.8'/%3E%3C/svg%3E");
  --sk-flocke-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4173a' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 2v20M4.5 7l15 10M4.5 17l15-10'/%3E%3Cpath d='M12 2 10 4.3M12 2l2 2.3M12 22l-2-2.3M12 22l2-2.3M4.5 7l.4 2.8M4.5 7l2.7-.8M19.5 7l-.4 2.8M19.5 7l-2.7-.8M4.5 17l.4-2.8M4.5 17l2.7.8M19.5 17l-.4-2.8M19.5 17l-2.7.8'/%3E%3C/svg%3E");
}

/* --- Seitlicher Drift, geteilt von Balken UND Abschnitt --------------------
   Laeuft auf margin-left, NICHT auf transform — dort laeuft schon die
   Fall-/Schwebe-Bewegung inkl. Drehung. Zwei Animationen auf zwei
   verschiedenen Eigenschaften kombinieren sich einfach von selbst, zwei
   Animationen auf derselben Eigenschaft wuerden sich gegenseitig ersetzen
   statt zu addieren. */
@keyframes sk-drift{
  0%{margin-left:calc(var(--sway,12px) * -1)}
  50%{margin-left:var(--sway,12px)}
  100%{margin-left:calc(var(--sway,12px) * -1)}
}

/* --- Funkelnde Lichtpunkte, zweiter Bewegungstyp — Reif/Eiskristalle ------- */
@keyframes sk-twinkle{
  0%,100%{opacity:.1;transform:scale(.5)}
  50%{opacity:1;transform:scale(1.2)}
}
.sk-band-snow i.tw,.sk-snow i.tw{
  background-image:none;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.55) 40%,rgba(255,255,255,0) 74%);
  animation:sk-twinkle var(--fd,2.4s) ease-in-out var(--fdelay,0s) infinite;
}
@media (prefers-reduced-motion:reduce){.sk-band-snow i.tw,.sk-snow i.tw{animation:none;opacity:.5}}

/* --- Balken: schwebende Flocken + Funkeln, kein Fall (zu wenig Hoehe) ------ */
.sk-band-snow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sk-band-snow i{
  position:absolute;top:var(--fy,30%);left:var(--fx,10%);
  width:var(--fs,11px);height:var(--fs,11px);
  background-image:var(--fbild,var(--sk-flocke-creme));
  background-size:contain;background-repeat:no-repeat;
  opacity:var(--fo,.6);
  animation:sk-band-schweben var(--fd,6s) ease-in-out var(--fdelay,0s) infinite,
            sk-drift calc(var(--fd,6s) * 1.4) ease-in-out var(--fdelay,0s) infinite;
}
@keyframes sk-band-schweben{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-9px) rotate(24deg)}
}
@media (prefers-reduced-motion:reduce){.sk-band-snow i{animation:none}}

/* --- Abschnitt: echter Schneefall + Funkeln, von oben nach unten ----------- */
.sk-snow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sk-snow i{
  position:absolute;top:-24px;left:var(--fx,10%);
  width:var(--fs,16px);height:var(--fs,16px);
  background-image:var(--fbild,var(--sk-flocke-creme));
  background-size:contain;background-repeat:no-repeat;
  opacity:var(--fo,.65);
  animation:sk-fallen var(--fd,10s) linear var(--fdelay,0s) infinite,
            sk-drift calc(var(--fd,10s) * .5) ease-in-out var(--fdelay,0s) infinite;
}
@keyframes sk-fallen{to{transform:translateY(calc(100% + 60px)) rotate(190deg)}}
@media (prefers-reduced-motion:reduce){.sk-snow i{animation:none;display:none}}

/* --- Ziffernkachel, Flip-Animation ------------------------------------------ */
.sk-flip{
  position:relative;overflow:hidden;perspective:280px;
  display:flex;align-items:center;justify-content:center;
  min-width:1.7em;height:1em;
  font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;color:#fff;
  /* Leichter Frost-Schimmer statt reinem Weiss — "gefrorene" Ziffer,
     Teil der vierten Ueberarbeitung ("noch winterlicher"). Zwei Ebenen:
     ein enger, satter Blauschimmer direkt an der Kante + ein weiterer,
     weicherer Hauch drumherum. */
  text-shadow:0 0 3px rgba(190,222,245,.75),0 0 12px rgba(140,190,230,.35);
}
.sk-flip-face{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
}
.sk-flip-cur{position:relative}
.sk-flip-new{transform:rotateX(92deg);opacity:0}
.sk-flip.is-flip .sk-flip-cur{animation:sk-flip-out .5s var(--ease-io) forwards}
.sk-flip.is-flip .sk-flip-new{animation:sk-flip-in .5s var(--ease-io) forwards}
@keyframes sk-flip-out{to{transform:rotateX(-92deg);opacity:0}}
@keyframes sk-flip-in{from{transform:rotateX(92deg);opacity:0}to{transform:rotateX(0);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .sk-flip.is-flip .sk-flip-cur,.sk-flip.is-flip .sk-flip-new{animation:none}
  .sk-flip-new{transform:none;opacity:0}
}

/* --- Site-weiter Balken oben (assets/js/saison-banner.js) -------------------
   Nicht mehr schliessbar (auf Wunsch, 8.9.2026) — die frueheren Regeln fuer
   den Schliessen-Knopf (.sk-band-close) sind deshalb ersatzlos entfernt,
   nicht nur im HTML/JS. */
/* Winterhimmel statt flacher Braunflaeche: kuehler Blauschimmer oben links
   (wie Mondlicht auf Schnee), warmer Goldschimmer unten rechts (Markenbezug
   bleibt erhalten), dazwischen ein dunkler, fast schwarzblauer Grundton —
   deutlich kaelter/winterlicher als die vorherige reine Braun-Flaeche. */
/* Nachtrag (8.9.2026), VIERTE Ueberarbeitung — "noch mehr winterlicher":
   der warme Braunton am rechten Verlaufsende ist raus (war #1f1f1f), durch
   einen weiteren dunklen Blauton ersetzt — Gold bleibt nur noch als
   schwaches Glanzlicht, nicht mehr als eigene, gleichrangige Warmzone.
   Der Mondlicht-Schimmer oben links ist dafuer kraeftiger und reicht
   weiter (.4->.5 Deckkraft, 220%->240% Reichweite). */
.sk-band{
  position:fixed;top:0;left:0;right:0;z-index:102;isolation:isolate;
  display:flex;align-items:center;gap:14px;
  height:var(--sk-band-h,58px);
  padding:calc(env(safe-area-inset-top)) clamp(14px,3vw,28px) 0;
  /* Ischgl-Umstellung (21.9.2026): der Balken lief zuvor in Blau-Gold; die
     Markensprache kennt aber nur Anthrazit + Rot. Grund jetzt neutral
     dunkel, der zweite Schimmer kommt aus der Markenfarbe statt aus Gold. */
  background:
    radial-gradient(120% 240% at 0% -35%,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 58%),
    radial-gradient(90% 180% at 100% 135%,rgba(196,18,48,.3) 0%,rgba(196,18,48,0) 50%),
    linear-gradient(100deg,#141414 0%,#1c1c1c 45%,#232323 100%);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 24px rgba(0,0,0,.32);
  transform:translateY(-100%);transition:transform .55s var(--ease);
}
.sk-band.in{transform:translateY(0)}
/* Schneewechte am unteren Rand — eine Reihe kleiner, aneinandergereihter
   Kuppen (klassischer CSS-"Wolken"/"Zacken"-Kniff: ein radialer Verlauf,
   der als Kachel wiederholt wird), wie liegen gebliebener Schnee auf einer
   Fensterbank. Rein dekorativ, deshalb aria-hidden nicht noetig (Pseudo-
   Element, ohnehin nicht im Accessibility-Baum). */
.sk-band::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:8px;
  pointer-events:none;
  background-image:radial-gradient(circle at 6px 0,#eef0f3 6px,transparent 6.4px);
  background-size:13px 8px;background-repeat:repeat-x;
  opacity:.9;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.24));
}
.sk-band-eyebrow{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
}
.sk-band-eyebrow svg{width:16px;height:16px;flex:0 0 auto}
.sk-band-clock{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;
  justify-content:center;
}
/* Jede Zifferngruppe jetzt eine eigene kleine Kachel aus vereistem Glas
   statt bloss frei stehender Zahlen — hinter dem Balken driftet jetzt
   echter Schnee, das rechtfertigt den Blur (siehe Erklaerung oben im
   Datei-Kommentar: Milchglas ohne Bewegung/Textur dahinter wirkte in
   frueheren Anlaeufen dieses Projekts nur trueb, siehe .cd-feld-Historie). */
.sk-band-grp{
  display:flex;flex-direction:column;align-items:center;gap:.1em;
  padding:.3em .6em .28em;border-radius:0;
  background:linear-gradient(165deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.08) 100%);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
@supports (backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px)){
  .sk-band-grp{backdrop-filter:blur(7px) saturate(1.3);-webkit-backdrop-filter:blur(7px) saturate(1.3)}
}
.sk-band-grp .sk-flip{font-size:1.05rem}
.sk-band-grp span.sk-band-l{
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:#c8cbd0;
}
.sk-band-sep{position:relative;z-index:1;color:rgba(255,255,255,.4);font-size:1rem;font-family:var(--display)}
.sk-band-cta{
  position:relative;z-index:1;
  flex:0 0 auto;display:flex;align-items:center;gap:.4em;
  padding:.5em 1em;
  clip-path:polygon(0 0,calc(100% - .6em) 0,100% .6em,100% 100%,0 100%);
  background:var(--red);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.78rem;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.03em;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.sk-band-cta:hover{background:var(--red-lit);filter:drop-shadow(0 0 1.25rem var(--red));transform:translateY(-1px)}
.sk-band-cta svg{width:13px;height:13px;transition:transform .35s var(--ease)}
.sk-band-cta:hover svg{transform:translateX(3px)}
@media (max-width:900px){
  .sk-band-eyebrow span{display:none} /* nur noch das Icon, Text weicht der Uhr */
}
@media (max-width:640px){
  .sk-band{gap:6px;padding-inline:10px}
  .sk-band-clock{gap:4px}
  .sk-band-grp{padding:.26em .42em .24em}
  .sk-band-grp .sk-flip{font-size:.9rem}
  .sk-band-l{font-size:.5rem!important}
  .sk-band-sep{font-size:.82rem}
  .sk-band-cta span{display:none} /* nur noch Pfeil-Icon */
  .sk-band-cta{padding:.5em .6em}
}
/* Auf sehr schmalen Handys (Sekunden-Kachel neu dazugekommen, viertes
   Segment braucht mehr Platz als die vorherigen drei) faellt die Sekunde
   ganz weg — Tage/Stunden/Minuten reichen dort als Ueberblick, die exakte
   Sekunde ist auf so wenig Raum ohnehin kaum ablesbar. */
@media (max-width:400px){
  .sk-band-clock>:nth-last-child(-n+2){display:none}
}
@media (prefers-reduced-motion:reduce){.sk-band{transition:none}}

/* --- Cookie-Hinweis, unten (assets/js/cookiebanner.js) --------------------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:160;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;
  padding:16px 20px calc(env(safe-area-inset-bottom) + 16px);
  background:rgba(33,33,33,.94);backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .5s var(--ease);
}
.cookie-banner.in{transform:translateY(0)}
.cookie-banner p{flex:1 1 320px;font-size:.86rem;line-height:1.6;color:#ced2d7}
.cookie-banner .aktionen{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.cookie-banner .mehr{font-size:.82rem;color:#a6a9ae;text-decoration:underline;text-underline-offset:.2em;transition:color .3s var(--ease)}
.cookie-banner .mehr:hover{color:#fff}
.cookie-banner .ok{
  flex:0 0 auto;padding:.6em 1.4em;border-radius:0;background:var(--red);
  color:#fff;font-size:.84rem;font-weight:600;white-space:nowrap;border:1px solid var(--red);
}
.cookie-banner .ok:hover{background:var(--red-lit);border-color:var(--red-lit)}
.cookie-banner .ablehnen{
  flex:0 0 auto;padding:.6em 1.4em;border-radius:0;background:transparent;
  color:#ced2d7;font-size:.84rem;font-weight:600;white-space:nowrap;
  border:1px solid var(--line);transition:border-color .3s var(--ease),color .3s var(--ease);
}
.cookie-banner .ablehnen:hover{border-color:#fff;color:#fff}
@media (prefers-reduced-motion:reduce){.cookie-banner{transition:none}}
@media (max-width:600px){
  .cookie-banner .aktionen{flex-wrap:wrap;width:100%;gap:10px 14px}
  .cookie-banner .mehr{flex:1 1 100%}
  .cookie-banner .ok,.cookie-banner .ablehnen{flex:1 1 auto;justify-content:center;text-align:center}
}
.nav-in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px;color:#fff}
.brand img{width:46px;height:46px;transition:height .3s var(--ease)}
.brand span{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}
/* Wortmarke KNITEL ARLBERG (22.9.2026) — ersetzt den frueheren Schriftzug
   "Knitel Warth". Die Regel `.brand img` darueber setzt 46x46 fuer das
   quadratische Sport-2000-Abzeichen und trifft per Elementselektor AUCH
   diese beiden Bilder — die Breite muss hier deshalb ausdruecklich wieder
   auf `auto`, sonst wird die Marke ins Quadrat gequetscht. */
.brand .brand-mark{width:auto;height:56px;transition:height .3s var(--ease)}
/* Kopfleisten-Links nach Ischgls eigenem Muster (aus deren Produktiv-CSS,
   21.9.2026): dort ist ein Nav-Link eine volle Flaeche, die beim
   Ueberfahren einen fast schwarzen Schleier bekommt
   (`.main-navbar__link:hover{background-color:#1a1a1ae6}`), waehrend die
   Schrift selbst auf die Markenfarbe umspringt
   (`.main-navbar__link-text{color:var(--color-primary)}` im Hover) —
   also KEINE unterfahrende Linie wie bisher, sondern eine eingefaerbte
   Kachel. Schriftgroesse ebenfalls von dort: clamp(.875rem,1vw,1.25rem),
   fett und durchgehend gross geschrieben. */
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  position:relative;color:#fff;font-weight:700;
  font-size:clamp(.78rem,.92vw,.95rem);
  padding:.9em .95em;opacity:.9;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.06em;
  transition:background .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease);
}
.nav-links a:hover{opacity:1;background:rgba(26,26,26,.9);color:var(--red-lit)}
.nav-links a.on{opacity:1;color:var(--red-lit)}
.nav-cta{--notch:1.15rem;height:2.6rem;padding:0 2.5rem 0 1.15rem;font-size:.78rem}

/* Burger-Maße ebenfalls von Ischgl: drei Balken 1.5625rem × .1875rem
   (25 × 3 px) mit .25rem Abstand — deutlich kraeftiger als die bisherigen
   1,5px-Haarlinien, passt zur schwereren Ischgl-Typografie. */
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:#fff}
.burger span{display:block;width:1.5625rem;height:.1875rem;background:currentColor;position:relative;
  transition:background .3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:1.5625rem;height:.1875rem;
  background:currentColor;transition:transform .3s var(--ease)}
.burger span::before{top:-.4375rem}
.burger span::after{top:.4375rem}
.burger:hover span::before{transform:translateX(-2px)}
.burger:hover span::after{transform:translateX(2px)}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translateY(.4375rem) rotate(45deg)}
.nav.open .burger span::after{transform:translateY(-.4375rem) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--nav-h) + 18px) var(--pad) 28px;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);
  pointer-events:none;
}
.drawer.open{clip-path:inset(0 0 0 0);pointer-events:auto}
/* Ambientes Glimmen, langsam wandernd — reiner Hintergrundschmuck, daher
   aria-hidden und ausserhalb des Tab-Flusses. Warme Gold-Note dazugenommen
   (7.9.2026, "sehr alpiner Stil"), nicht mehr nur Rot. */
.drawer::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(560px 420px at 12% -8%, rgba(196,18,48,.14), transparent 60%),
    radial-gradient(600px 460px at 108% 18%, rgba(184,135,79,.14), transparent 62%);
  opacity:0;transition:opacity 1.1s var(--ease) .2s;
}
.drawer.open::before{opacity:1;animation:drawer-drift 16s var(--ease-io) infinite alternate}
@keyframes drawer-drift{to{transform:translateY(3%) scale(1.06)}}
/* Bergsilhouette, ganz unten im Hintergrund — reine Deko, sehr gedaempft,
   verankert das "alpin" auch visuell statt nur ueber Farbtoene. Als
   Daten-URI-SVG, damit keine zusaetzliche Bilddatei/Anfrage noetig ist. */
.drawer::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:min(34vh,280px);
  z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140 0 92 46 34 74 70 112 18 150 66 176 40 214 92 246 54 292 98 330 46 366 84 400 60 400 140Z' fill='%232e2e2e'/%3E%3Cpath d='M112 18 96 46 122 46Z' fill='%23eef0f3' opacity='.55'/%3E%3Cpath d='M292 98 278 118 306 118Z' fill='%23eef0f3' opacity='.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:bottom center;background-size:cover;
}

.drawer-search{
  display:flex;align-items:center;gap:.7em;width:100%;
  padding:.85em 1.1em;border-radius:0;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);color:#a4a7ac;font-size:.92rem;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.drawer.open .drawer-search{opacity:1;transform:none;margin-top:0}
.drawer-search:hover,.drawer-search:focus-visible{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.07);color:#fff;outline:none}
.drawer-search svg{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2}
.drawer-search kbd{
  margin-left:auto;font-family:var(--text);font-size:.72rem;color:#7b7e83;
  border:1px solid rgba(255,255,255,.14);border-radius:0;padding:.15em .5em;
}

/* Direkter Buchen-Knopf oben in der Schublade (7.9.2026) — geklont von
   .nav-cta, deshalb hier nur Layout/Reveal, Farbe kommt von .btn selbst. */
.drawer .drawer-cta{
  display:inline-flex;width:100%;justify-content:center;margin-top:14px;
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease) .04s,transform .6s var(--ease) .04s,background .3s,box-shadow .3s;
}
.drawer.open .drawer-cta{opacity:1;transform:none}

.drawer-nav{display:flex;flex-direction:column;margin-top:18px}
.d-row{
  position:relative;display:flex;align-items:center;gap:.9em;
  padding:.5em .35em;margin:0 -.35em;border-radius:0;
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),background .3s var(--ease);
}
.drawer.open .d-row{opacity:1;transform:none}
.d-row:hover,.d-row:focus-within{background:rgba(255,255,255,.045)}
.d-row.on{background:rgba(196,18,48,.14)}
/* Icon-Kachel je Rubrik statt der frueheren reinen Nummer — auf einen Blick
   lesbar. Faellt eine Seite mal aus dem bekannten Satz (D_ICONS in app.js),
   zeigt die Kachel stattdessen die Nummer, siehe .d-num darin. */
.d-icon{
  flex:0 0 auto;width:44px;height:44px;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#fff;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.d-row.on .d-icon,.d-row:hover .d-icon{background:var(--red);color:#fff}
.d-icon svg{width:22px;height:22px}
.d-icon .d-num{
  font-family:var(--text);font-size:.92rem;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.d-row>a{
  display:flex;align-items:center;flex:1 1 auto;gap:.5em;padding:.4em 0;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,6.2vw,1.85rem);line-height:1.15;color:#fff;
  transition:color .3s var(--ease);
}
.d-row>a:hover{color:var(--red-lit)}
.d-row.on>a{color:var(--red-lit)}
.d-chevbtn{
  flex:0 0 auto;width:40px;height:40px;margin-right:-6px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--grey);
  transition:color .3s var(--ease);
}
.d-chevbtn:hover,.d-chevbtn:focus-visible{color:#fff;outline:none}
.d-chevbtn .chev{width:16px;height:16px;transition:transform .5s var(--ease)}
.d-chevbtn[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--red-lit)}
.d-chevbtn[aria-expanded="true"]{color:var(--red-lit)}

.d-group{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.d-group.expanded{grid-template-rows:1fr}
.d-group>.subnav{min-height:0;overflow:hidden}
/* Mit .drawer davor, sonst hebt die aeltere Regel ".drawer .subnav a" weiter
   unten (gleiche Spezifitaet, spaeter im Stylesheet) Einrueckung und
   Schriftgroesse hier stumm wieder auf (Audit 8.9.2026). */
.drawer .d-group .subnav a{
  display:block;padding:.5em 0 .5em 3.1em;font-family:var(--text);font-weight:500;
  font-size:1rem;color:#a4a7ac;opacity:0;transform:translateX(-10px);
  transition:color .3s var(--ease),opacity .45s var(--ease),transform .45s var(--ease);
}
.d-group.expanded .subnav a{opacity:1;transform:none}
.d-group .subnav a:hover{color:#fff}
.d-group.expanded .subnav a:nth-child(1){transition-delay:.06s}
.d-group.expanded .subnav a:nth-child(2){transition-delay:.11s}
.d-group.expanded .subnav a:nth-child(3){transition-delay:.16s}
.d-group.expanded .subnav a:nth-child(4){transition-delay:.21s}
.d-group.expanded .subnav a:nth-child(5){transition-delay:.26s}
.drawer .meta{margin-top:2.4em;color:var(--grey);font-size:.9rem}

/* --- Hero ----------------------------------------------------------------- */
.hero{height:100svh;min-height:600px;overflow:hidden;background:var(--ink);color:#fff}
.hero-media{position:absolute;inset:0;overflow:hidden}
/* --pos steuert den Bildausschnitt: im Hochformat wird seitlich stark
   beschnitten, das Motiv soll dabei im Bild bleiben. */
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  transform:scale(1.14);will-change:transform}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(33,33,33,.62) 0%,rgba(33,33,33,.2) 30%,rgba(33,33,33,.3) 52%,rgba(33,33,33,.92) 100%),
    linear-gradient(90deg,rgba(33,33,33,.5) 0%,rgba(33,33,33,0) 62%);
}
.hero-in{
  position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(76px,13vh,148px);
}
/* Ischgls Hero-Titel traegt einen bewusst nach RECHTS versetzten Schatten
   (`text-shadow:.625rem 0 1.25rem #16161666`, aus deren Produktiv-CSS) —
   kein mittiger Weichzeichner, sondern ein seitlicher Schlagschatten, der
   die Versalien vom Foto abhebt wie Buchstaben auf einer Plakatwand.
   1:1 uebernommen, inklusive der Deckkraft (0x66 ≙ .4). */
.hero h1,.phero h1{color:#fff;text-shadow:.625rem 0 1.25rem rgba(22,22,22,.4)}
/* padding/margin gleichen aus, dass line-height < 1 die Ober- und
   Unterlaengen sonst an der overflow-Maske abschneidet */
.line{display:block;overflow:hidden;padding-block:.1em;margin-block:-.1em}
.line i{display:block;font-style:normal;transform:translateY(115%);transition:transform 1.25s var(--ease)}
.in .line i,.hero.in .line i{transform:none}
.line:nth-child(2) i{transition-delay:.09s}
.line:nth-child(3) i{transition-delay:.18s}
.hero-foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px;
  margin-top:clamp(24px,4vh,44px);
  opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease) .45s,transform 1s var(--ease) .45s;
}
.hero.in .hero-foot{opacity:1;transform:none}
.hero-foot .lead{color:rgba(255,255,255,.88);max-width:38ch}

/* --- Google-Bewertungs-Badge (hotel.html, index.html) ---------------------- */
.gbewertung{
  display:inline-flex;align-items:center;gap:10px;
  padding:.5em 1em .5em .65em;border-radius:0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:.84rem;margin-top:20px;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.gbewertung:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.32)}
.gbewertung svg{width:19px;height:19px;flex:0 0 auto}
.gbewertung b{font-weight:700}
.gbewertung .sterne{color:var(--red-lit);font-weight:700;margin-left:.4em}
.gbewertung .pfeil{margin-left:.35em;opacity:.65}
.scroll-cue{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);
  opacity:0;transition:opacity 1s var(--ease) .9s;
}
.hero.in .scroll-cue{opacity:1}
.scroll-cue b{display:block;width:1px;height:42px;
  background:linear-gradient(rgba(255,255,255,.75),transparent);
  animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* --- Schneefall im Hero-Bild (Klasse .hero-snow auf .hero/.phero, opt-in,
   erzeugt von app.js) -------------------------------------------------- */
.hs-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.hs-layer i{
  position:absolute;top:-8%;left:var(--x);width:var(--size);height:var(--size);
  border-radius:50%;background:rgba(255,255,255,var(--op));
  animation:hs-fall var(--dur) linear infinite;animation-delay:var(--delay);
  will-change:transform;
}
@keyframes hs-fall{
  0%{transform:translate3d(0,0,0);opacity:0}
  6%{opacity:1}
  92%{opacity:1}
  100%{transform:translate3d(var(--drift),115vh,0);opacity:0}
}
@media (max-width:640px){.hs-layer i:nth-child(n+20){display:none}}

/* Breite, aber flache Fenster (Laptop-Bildschirm, verkleinertes Browserfenster).
   Die Titelgroesse haengt an der Fensterbreite (11.5vw). Ist das Fenster
   gleichzeitig niedrig, wird der Textblock hoeher als der Hero — .hero-in
   richtet nach unten aus, der Ueberhang laeuft also nach OBEN aus dem Kasten:
   die Ueberschrift schiebt sich unter die Kopfleiste, die Zeile darueber
   rutscht ganz aus dem Bild. Deshalb ist die Groesse hier zusaetzlich an die
   Fensterhoehe gekoppelt. Nur ab 761px Breite noetig — schmale Geraete sind
   wegen des kleinen vw-Werts nie betroffen. */
@media (min-width:761px) and (max-height:860px){
  .hero .d1{font-size:clamp(3.2rem,min(11.5vw,19vh),11rem)}
  .hero-in{padding-bottom:clamp(56px,9vh,148px)}
}
@media (min-width:761px) and (max-height:700px){
  .hero .d1{font-size:clamp(2.4rem,min(11.5vw,15vh),11rem)}
  .hero-in{padding-bottom:clamp(40px,6vh,148px)}
  .hero-foot{margin-top:clamp(14px,2vh,44px)}
}
/* Dasselbe fuer die Unterseiten-Heros. Die sind wegen der kleineren Schrift
   deutlich unempfindlicher und kippen erst unter ~470px Fensterhoehe — dann
   aber genauso: die Brotkrume rutscht unter die Kopfleiste. Bei 620px liegt
   der Wert noch fast auf dem bisherigen (99px statt 102px), der Uebergang
   faellt also nicht auf. */
@media (min-width:761px) and (max-height:620px){
  .phero .d2{font-size:clamp(2rem,min(7.5vw,16vh),6.4rem)}
  .phero .wrap{padding-bottom:clamp(28px,5vh,84px)}
}

/* --- Haeufige Fragen (Akkordeon) -------------------------------------- */
.faq{display:flex;flex-direction:column}
/* --line ist eine Hell-auf-Dunkel-Farbe (helles Beige, 16 %) — auf den hellen
   FAQ-Abschnitten (index.html, ski-arlberg.html) waren die Trennlinien damit
   praktisch unsichtbar; dunkle Variante nur in .dark (Audit 8.9.2026). */
.faq-item{border-top:1px solid rgba(33,33,33,.14)}
.faq-item:last-child{border-bottom:1px solid rgba(33,33,33,.14)}
.dark .faq-item{border-top-color:var(--line)}
.dark .faq-item:last-child{border-bottom-color:var(--line)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:1.2em;
  width:100%;padding:1.15em 0;text-align:left;
  font-family:var(--text);font-weight:600;font-size:1.02rem;color:var(--ink);
}
.dark .faq-q{color:#fff}
.faq-q .chev{width:11px;height:11px;flex:0 0 auto;color:var(--grey);transition:transform .45s var(--ease)}
.faq-q[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--red)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq-a.expanded{grid-template-rows:1fr}
.faq-a>div{min-height:0;overflow:hidden}
.faq-a p{padding-bottom:1.3em;color:var(--grey-d);line-height:1.65;max-width:60ch}
.dark .faq-a p{color:#b0b3b8}

/* --- Reveal --------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(34px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.2s var(--ease)}
[data-reveal="clip"].in{clip-path:inset(0 0 0 0)}
[data-reveal="scale"]{opacity:0;transform:scale(1.05);
  transition:opacity 1.1s var(--ease),transform 1.4s var(--ease)}
[data-reveal="scale"].in{opacity:1;transform:none}
/* Kraeftiger Auftritt fuer grosse Kennzahlen: waechst leicht aus dem
   Unscharfen heraus, statt nur aufzusteigen — mehr Wucht fuer wenige,
   grosse Zahlen (vgl. die Statistik-Kacheln auf der Startseite). */
[data-reveal="pop"]{opacity:0;transform:scale(.82) translateY(18px);filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
[data-reveal="pop"].in{opacity:1;transform:none;filter:blur(0)}

/* Wort-fuer-Wort aufhellender Text */
.statement{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.7rem,4.3vw,3.5rem);line-height:1.12;letter-spacing:-.005em}
.statement w{display:inline-block;color:var(--paper-3);transition:color .45s linear}
.dark .statement w{color:#3d2b1e}
.statement w.on{color:var(--ink)}
.dark .statement w.on{color:#fff}
.statement w.hl.on{color:var(--red)}
.dark .statement w.hl.on{color:var(--red-lit)}

/* --- Warte-Portal-Bausteine: Zitat, Merkmalsliste, Galerie ---------------- */
.baustein-zitat{margin:0;padding:0 0 0 clamp(20px,3vw,32px);border-left:3px solid var(--red)}
.baustein-zitat p{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.3}
.baustein-zitat cite{display:block;margin-top:.8em;font-style:normal;
  font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}

.baustein-merkmale{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.baustein-merkmale li{
  position:relative;padding:14px 18px 14px 40px;border-radius:0;
  background:var(--ink-2);border:1px solid var(--line);font-size:.94rem;line-height:1.5;
}
.baustein-merkmale li::before{
  content:"";position:absolute;left:16px;top:1.35em;width:8px;height:8px;
  border-radius:50%;background:var(--red-lit);
}

.baustein-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.baustein-galerie-item{margin:0;border-radius:0;overflow:hidden;aspect-ratio:4/3;background:var(--ink-2)}
.baustein-galerie-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.baustein-galerie-item:hover img{transform:scale(1.06)}

/* --- Stats ---------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px)}
.stat{padding-top:26px;border-top:1px solid var(--line)}
.stat .n{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5.2vw,4.4rem);
  line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .n u{text-decoration:none;color:var(--red-lit);font-size:.4em;vertical-align:.4em;margin-left:.12em}
.stat .l{margin-top:.8em;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

/* --- Live-Wetter-Widgets (warth.html) -------------------------------------
   Eigenständige, warme Kacheln statt einer dunklen Bar — Gold statt Rot als
   Farbton (reine Deko/Info, keine Handlungsaufforderung, siehe --gold-Regel
   oben), dezenter Kaminlicht-Schimmer wie die übrigen .dark-Sektionen. */
.wwrap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px)}
.widget{
  position:relative;overflow:hidden;padding:clamp(20px,2.6vw,30px) clamp(18px,2.2vw,26px);
  border-radius:0;
  background:linear-gradient(155deg,rgba(184,135,79,.16),rgba(184,135,79,.04));
  border:1px solid rgba(184,135,79,.28);
}
.widget::before{
  content:"";position:absolute;top:-40%;right:-30%;width:70%;height:140%;
  background:radial-gradient(circle,rgba(184,135,79,.22),transparent 70%);
  pointer-events:none;
}
.widget-icon{position:relative;width:30px;height:30px;color:var(--gold)}
.widget-icon svg{width:100%;height:100%}
.widget-n{
  position:relative;margin-top:.5em;font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:#fff;
}
.widget-l{position:relative;margin-top:.5em;font-size:.78rem;color:rgba(255,255,255,.6)}
.widget-hi .widget-icon{color:#fff}
@media (max-width:760px){
  .wwrap{grid-template-columns:1fr;gap:12px}
}

/* --- Sticky-Stage --------------------------------------------------------- */
.stage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px);align-items:start}
.stage-media{position:sticky;top:calc(var(--nav-h) + 4vh);height:min(74vh,740px);
  border-radius:0;overflow:hidden;background:var(--ink-2)}
.stage-media figure{position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity 1s var(--ease),transform 1.6s var(--ease);transform:scale(1.04)}
.stage-media figure.on{opacity:1;transform:none}
.stage-media img{width:100%;height:100%;object-fit:cover}
.stage-steps{display:flex;flex-direction:column;gap:clamp(60px,14vh,150px);padding:11vh 0}
.step{opacity:.26;transition:opacity .7s var(--ease);cursor:pointer}
.step.on{opacity:1}
.step .idx{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--red-lit);
  letter-spacing:.12em}
.step h3{margin:.55em 0 .6em;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.7rem,3.1vw,2.7rem);line-height:.98}

/* --- Split ---------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split.flip .split-media{order:2}
.split-media{position:relative;border-radius:0;overflow:hidden;aspect-ratio:4/5;background:var(--ink-2)}
.split-media img{width:100%;height:118%;object-fit:cover;will-change:transform}
.split-copy>*+*{margin-top:1.5em}

/* --- Full-bleed ----------------------------------------------------------- */
.bleed{height:min(88vh,880px);min-height:480px;overflow:hidden;display:grid;place-items:center;
  text-align:center;color:#fff}
.bleed-media{position:absolute;inset:0;overflow:hidden}
/* top:-13% statt zentrierendem transform: der Bild-Parallax in app.js setzt
   sein eigenes translate3d direkt auf style.transform und wuerde eine
   CSS-Zentrierung darueber sonst ersetzen. Ohne top-Versatz haengt das um
   26% ueberstehende Bild nur unten ueber, oben gar nicht — jeder Parallax-
   Schub nach unten legt dann den Seitenhintergrund am oberen Rand frei. */
.bleed-media img{position:absolute;top:-13%;left:0;width:100%;height:126%;object-fit:cover;will-change:transform}
.bleed-media::after{content:"";position:absolute;inset:0;background:rgba(33,33,33,.54)}
.bleed .wrap{position:relative}
/* .body erbte bislang keine eigene Farbe auf .bleed -- fiel damit auf das
   fuer HELLE Flaechen gedachte dunkle var(--grey-d) zurueck (dunkelbraun auf
   Foto, kaum lesbar, Fund 12.9.2026 per Nutzer-Screenshot). Dazu ein enger,
   zweistufiger text-shadow an allen drei Textarten als Sicherheitsnetz --
   dieselbe, an anderer Stelle des Projekts bereits bewaehrte Formel
   (.piste-hero, .wegweiser-hero-in): traegt die Lesbarkeit primaer selbst,
   nicht der gleichfoermige Verlauf allein, der bei hellen/unruhigen
   Bildstellen sonst nicht reicht. */
.bleed .eyebrow{justify-content:center;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55),0 8px 22px rgba(0,0,0,.4)}
.bleed h2{text-shadow:0 2px 6px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.42)}
.bleed .lead{margin-inline:auto;color:rgba(255,255,255,.85);
  text-shadow:0 1px 4px rgba(0,0,0,.55),0 8px 22px rgba(0,0,0,.4)}
.bleed .body{color:rgba(255,255,255,.8);
  text-shadow:0 1px 4px rgba(0,0,0,.55),0 8px 22px rgba(0,0,0,.4)}

/* --- Horizontale Galerie -------------------------------------------------- */
.hrail-outer{height:260vh}
.hrail{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.hrail-track{display:flex;gap:clamp(14px,2vw,26px);padding-inline:var(--pad);will-change:transform}
.hcard{position:relative;flex:0 0 auto;width:clamp(255px,29vw,420px);aspect-ratio:3/4;
  border-radius:0;overflow:hidden;background:var(--ink-2)}
.hcard img{width:100%;height:100%;object-fit:cover;transition:transform .33s ease-in-out}
.hcard:hover img{transform:scale(1.12)}
.hcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 24px;color:#fff;
  background:linear-gradient(transparent,rgba(33,33,33,.88));
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.28rem;line-height:1}
.hcard .sub{display:block;font-family:var(--text);font-weight:400;text-transform:none;
  font-size:.85rem;color:#ccd0d5;margin-top:.6em;line-height:1.5}

/* --- Karten --------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(14px,1.6vw,20px)}
.card{
  position:relative;padding:clamp(26px,2.6vw,36px);border-radius:0;
  background:var(--ink-2);border:1px solid var(--line);overflow:hidden;
  transition:transform .7s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.26);background:var(--ink-3)}
.card .tier{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.4rem;line-height:1}
.card .stars{color:var(--red-lit);font-size:.8rem;letter-spacing:.2em;margin-top:.6em}
.card .price{margin-top:1.4em;font-family:var(--display);font-weight:700;font-size:2.8rem;line-height:.9;
  font-variant-numeric:tabular-nums}
.card .price s{text-decoration:none;font-size:.4em;vertical-align:.55em;color:var(--grey);margin-right:.14em}
.card .per{font-size:.78rem;color:var(--grey);letter-spacing:.1em;text-transform:uppercase;margin-top:.75em}
.card ul{margin-top:1.5em;padding-top:1.3em;border-top:1px solid var(--line)}
.card li{font-size:.92rem;color:#b0b3b8;padding:.42em 0 .42em 1.35em;position:relative}
.card li::before{content:"";position:absolute;left:0;top:1.02em;width:7px;height:1.5px;background:var(--red-lit)}
.card.hi{background:linear-gradient(165deg,#2a0a13,#1b1b1b 62%);border-color:rgba(196,18,48,.42)}
.card .flag{position:absolute;top:18px;right:18px;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:var(--red);padding:.42em .8em;border-radius:0}

/* --- Oeffnungszeiten / Kontakt -------------------------------------------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px)}
.hours{border-top:1px solid var(--line)}
.hours li{display:flex;justify-content:space-between;gap:20px;padding:.95em 0;
  border-bottom:1px solid var(--line);font-size:.98rem}
.hours .d{color:#d2d5da;display:flex;align-items:center}
.hours .t{text-align:right;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.hours li.now .d::after{content:"heute";margin-left:.8em;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red-lit);border:1px solid rgba(228,23,58,.45);
  border-radius:0;padding:.25em .65em}
/* Das Abzeichen ist CSS-Text und laeuft nicht durch den Uebersetzer — je
   Sprache ueber das lang-Attribut von <html> (Audit 8.9.2026). */
html:lang(en) .hours li.now .d::after{content:"today"}
html:lang(fr) .hours li.now .d::after{content:"aujourd'hui"}
html:lang(es) .hours li.now .d::after{content:"hoy"}
html:lang(nl) .hours li.now .d::after{content:"vandaag"}
.seg,.pricetoggle{display:inline-flex;gap:2px;padding:0;border-radius:0;background:rgba(255,255,255,.07);margin-bottom:26px}
.seg button,.pricetoggle button{padding:.85em 1.7em;border-radius:0;font-size:.8rem;font-weight:700;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;color:#c8cbd0;
  cursor:pointer;transition:color .3s var(--ease),background .3s var(--ease)}
.seg button:hover,.pricetoggle button:hover{color:#fff;background:rgba(26,26,26,.6)}
.seg button.on,.pricetoggle button.on{background:var(--red);color:#fff;font-weight:700}

.contact-line{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:1.15em 0;border-bottom:1px solid var(--line)}
.contact-line .k{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  white-space:nowrap}
.contact-line .v{font-size:1.05rem;text-align:right}
.contact-line a.v{transition:color .35s var(--ease)}
.contact-line a.v:hover{color:var(--red-lit)}

/* --- Marquee -------------------------------------------------------------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:24px 0;display:flex}
.marquee-in{display:flex;align-items:center;gap:52px;padding-right:52px;
  animation:mq 40s linear infinite;flex:0 0 auto}
.marquee i{font-style:normal;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.4rem;color:#2e2e2e;white-space:nowrap;display:flex;align-items:center;gap:52px}
.marquee i::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto}
@keyframes mq{to{transform:translateX(-50%)}}

/* --- Markenwand: zwei gegenlaeufige, endlos scrollende Reihen -------------
   Das Scrollen selbst treibt jetzt assets/js/marquee.js per rAF ueber
   scrollLeft an (nicht mehr die CSS-Animation) — dadurch laesst sich mit
   der Maus daran ziehen wie bei einem nativen Scrollbereich, und auf dem
   Handy scrollt es zusaetzlich ganz normal per Fingerwisch. */
.brandmarquee{display:flex;flex-direction:column;gap:18px}
.brandmarquee-row{
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;cursor:grab;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brandmarquee-row::-webkit-scrollbar{display:none}
.brandmarquee-row.bm-ziehend{cursor:grabbing;scroll-snap-type:none}
.brandmarquee-track{display:flex;gap:18px;width:max-content}
.brandmarquee-row.bm-ziehend .brand-tile{pointer-events:none}
.brand-tile{flex:0 0 auto;width:clamp(128px,15vw,176px);aspect-ratio:16/9;border-radius:0;
  background:#fff;display:grid;place-items:center;padding:18px 24px;
  box-shadow:0 22px 44px -26px rgba(0,0,0,.7);transition:transform .5s var(--ease)}
.brand-tile:hover{transform:translateY(-4px)}
.brand-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  -webkit-user-drag:none}
/* Marken, von denen es offiziell nur ein weisses Logo gibt — auf der weissen
   Kachel waeren die unsichtbar. Die Kachel bekommt deshalb die Hausfarbe der
   Marke, so wie der Hersteller sein Logo selbst einsetzt. Wert von vmilch.at
   selbst abgenommen, nicht geraten (gleiche Loesung wie frueher bei den seither
   wieder entfernten Marken Milka/Corny, siehe CLAUDE.md). */
.brand-tile.bt-vmilch{background:#005086}

/* --- Footer --------------------------------------------------------------- */
.footer{background:var(--ink);color:#fff;padding-top:clamp(60px,8vw,110px)}
.footer-top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:clamp(28px,5vw,72px);
  padding-bottom:clamp(40px,6vw,80px)}
/* Fusszeile nach Ischgls `.footer__main` (Produktiv-CSS): fast schwarzer
   Grund, Rubriktitel klein mit sehr grosser Laufweite in der Markenfarbe,
   und die Eintraege selbst fett und gross geschrieben
   (`.footer__list-item--bold{font-family:var(--font-default-bold);
   text-transform:uppercase}`) — nicht als gewoehnliche Fliesstext-Liste. */
.footer h3{font-size:.65rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--red-lit);font-weight:700;margin-bottom:1.6em}
.footer-nav li{padding:.38em 0}
.footer-nav a{color:#fff;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:.88rem;
  transition:color .3s var(--ease)}
.footer-nav a:hover{color:var(--red-lit)}
.footer-bar{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;
  padding:26px 0 34px;border-top:1px solid var(--line);font-size:.84rem;color:var(--grey)}
.footer-bar nav{display:flex;gap:24px}
.footer-bar a:hover{color:#fff}
.social{display:flex;gap:10px;margin-top:24px}
.social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;
  border:1px solid var(--line);
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)}
.social a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)}
.social svg{width:17px;height:17px;fill:currentColor}

/* --- Seiten-Hero ---------------------------------------------------------- */
.phero{height:min(74svh,720px);min-height:440px;overflow:hidden;background:var(--ink);color:#fff;
  display:flex;align-items:flex-end}
.phero .hero-media::after{
  background:linear-gradient(180deg,rgba(33,33,33,.72),rgba(33,33,33,.3) 45%,rgba(33,33,33,.84))}
.phero .wrap{position:relative;padding-bottom:clamp(40px,7vh,84px);width:100%}
.crumb{display:flex;gap:.6em;align-items:center;font-size:.8rem;color:rgba(255,255,255,.62);
  margin-bottom:1.5em}
.crumb a{transition:color .35s var(--ease)}
.crumb a:hover{color:#fff}

/* --- Preistabellen -------------------------------------------------------- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad)}
.ptable{width:100%;border-collapse:collapse;font-size:.93rem;font-variant-numeric:tabular-nums;
  min-width:760px}
.ptable caption{text-align:left;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.35rem;padding-bottom:.9em;color:#fff}
.ptable th,.ptable td{padding:.85em 1em;text-align:right;border-bottom:1px solid var(--line)}
.ptable th:first-child,.ptable td:first-child{text-align:left;white-space:nowrap}
.ptable thead th{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);font-weight:500}
.ptable tbody tr{transition:background .35s var(--ease)}
.ptable tbody tr:hover{background:rgba(255,255,255,.045)}
.ptable .tier{font-family:var(--display);font-weight:700;text-transform:uppercase}

/* Schmale Preisliste mit nur zwei Spalten (Leistung/Preis, z. B. Skiservice):
   die feste Mindestbreite der grossen Tagestabellen waere hier nur leerer
   Raum, und die erste Spalte muss umbrechen duerfen. */
.ptable.compact{min-width:0}
.ptable.compact td:first-child{white-space:normal;color:#d2d5da}
.ptable.compact td:last-child{font-weight:700;color:#fff;white-space:nowrap}

/* --- Fortschrittsbalken --------------------------------------------------- */
.prog{position:fixed;top:0;left:0;height:2px;background:var(--red-lit);z-index:101;width:0}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1000px){
  .stage,.split,.grid2,.footer-top{grid-template-columns:1fr}
  .split.flip .split-media{order:0}
  .stage-media{position:relative;top:0;height:min(52vh,440px)}
  .stage-steps{padding:0;gap:52px}
  .step{opacity:1}
  .split-media{aspect-ratio:16/11}
  .stats{grid-template-columns:repeat(2,1fr);gap:28px}
  .hrail-outer{height:auto}
  .hrail{position:relative;height:auto;padding-block:8px;overflow-x:auto;scroll-snap-type:x mandatory}
  .hrail-track{transform:none !important}
  .hcard{scroll-snap-align:center}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  /* Ischgls Kopfleiste ist am Handy nur 50 px hoch (`--navbar-height:50px`
     in deren Produktiv-CSS) — die 108 px der Desktop-Fassung sind dort
     viel zu viel und draengten Logo, Suche, Sprachwahl und Burger
     ineinander. Hier 72 px: kompakt genug fuer die vier Elemente, aber
     gross genug fuer das quadratische Sport-2000-Logo. */
  :root{--nav-h:72px;--nav-own-h:72px}
  .nav-in{gap:14px}
  .brand img{width:38px;height:38px}
  .brand .brand-mark{width:auto;height:44px}
  .brand span{font-size:.95rem}
  .suche-btn{height:44px}
}
/* Unter 430 px reichen Logo + Suche + Sprache + Burger den Platz nicht mehr
   aus — der Schriftzug "KNITEL WARTH" lief in die Lupe hinein (am
   Screenshot bestaetigt). Ischgl zeigt am Handy ebenfalls nur die
   Bildmarke; der Schriftzug entfaellt hier deshalb ganz. */
@media (max-width:430px){
  .brand span{display:none}
  /* Die volle Wortmarke bleibt auch hier, nur kleiner. Der rote G-Chevron
     allein war die naheliegende Kompaktloesung, liest sich neben dem
     Sport-2000-Abzeichen aber wie ein Zurueck-Pfeil (am Screenshot
     bestaetigt) — deshalb verworfen. */
  .brand .brand-mark{height:34px}
  .hero-media img{object-position:var(--pos-m,var(--pos,50% 50%))}
  .hero{min-height:0}
  .scroll-cue{display:none}
  .cards{grid-template-columns:1fr}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .footer-bar{flex-direction:column;align-items:flex-start}
  .contact-line{flex-direction:column;gap:.3em}
  .contact-line .v{text-align:left}
}

/* --- Reduced Motion ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  [data-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important;filter:none !important}
  .line i{transform:none}
  .statement w{color:inherit !important}
  .step{opacity:1}
  .hero-foot,.scroll-cue{opacity:1;transform:none}
}

/* ==========================================================================
   Ergaenzungen: Schneeflocken-Rating, Hotel-Dropdown, Buchungsanfrage
   ========================================================================== */

/* --- Schneeflocken statt Sterne ------------------------------------------ */
/* Auch als ".card .stars" notiert: die fruehere Regel ".card .stars" weiter
   oben hat hoehere Spezifitaet und hatte diese hier bislang komplett
   ueberschrieben — nur line-height kam an (Audit 8.9.2026). */
.stars,.card .stars{color:var(--red-lit);font-size:.92rem;letter-spacing:.32em;margin-top:.55em;line-height:1}
.ptable .tier em{font-style:normal;color:var(--red-lit);margin-left:.5em;font-size:.9em;letter-spacing:.16em}

/* --- Navigation mit Untermenue ------------------------------------------- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item>a{display:inline-flex;align-items:center;gap:.4em}
.nav-item>a .chev{width:9px;height:9px;flex:0 0 auto;transition:transform .45s var(--ease)}
.nav-item:hover>a .chev,.nav-item:focus-within>a .chev{transform:rotate(180deg)}

.sub{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
  width:min(660px,88vw);padding-top:14px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
}
.nav-item:hover .sub,.nav-item:focus-within .sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)
}
/* Untermenue = Ischgls `.nav-overlay`, Werte aus deren Produktiv-CSS
   uebernommen (21.9.2026): `background:#1a1a1ae6` (fast schwarz, leicht
   durchscheinend), `padding:1.25rem 1.25rem 1.25rem 1.875rem`,
   `box-shadow:0 1.5rem 3.75rem #0000003d` — und ausdruecklich KEINE
   abgerundeten Ecken, kein Rahmen. Die Eintraege darin sind bei Ischgl
   fett, gross geschrieben, und springen im Hover auf die Markenfarbe
   (`.nav-overlay__link-text:hover{color:var(--color-primary)}`). */
.sub-in{
  display:grid;grid-template-columns:1fr 216px;gap:1.25rem;
  padding:1.25rem 1.25rem 1.25rem 1.875rem;
  border-radius:0;
  background:rgba(26,26,26,.9);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 1.5rem 3.75rem rgba(0,0,0,.24);
}
.sub-links{display:flex;flex-direction:column;gap:0}
.sub-links a{
  display:block;padding:.7rem 0;border-radius:0;opacity:1;
  transition:color .3s var(--ease);
}
.sub-links a::after{display:none}
/* Zuruecksetzen, was `.nav-links a` weiter oben vererbt: dieser Selektor
   trifft auch die Links IM Untermenue (sie liegen im selben .nav-links),
   die Beschreibungszeile stuende sonst in Versalien und ohne Umbruch. */
.sub-links a{text-transform:none;letter-spacing:normal;white-space:normal;font-weight:400;font-size:1rem}
.sub-links a:hover{background:none;transform:none}
.sub-links a:hover b{color:var(--red-lit)}
.sub-links b{display:block;font-family:var(--display);font-size:.95rem;font-weight:700;
  color:#fff;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;
  transition:color .3s var(--ease)}
.sub-links span{display:block;font-size:.8rem;color:#9a9da2;margin-top:.3em}
/* Foto-Kachel nach Ischgls `.card-teaser`: der Verlauf setzt erst bei
   30 % Hoehe ein (`linear-gradient(#16161600 0%,#161616bf 100%)` auf
   `inset:30% 0 0`), und das Bild zoomt im Hover auf 1.12
   (`transition:transform .33s ease-in-out`). */
.sub-card{position:relative;margin:0;border-radius:0;overflow:hidden;background:var(--ink-2)}
.sub-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transition:transform .33s ease-in-out}
.sub-card:hover img,.nav-item:hover .sub-card img{transform:scale(1.12)}
/* Grundschleier ueber dem Foto, sonst steht die Bildunterschrift
   je nach Bildausschnitt auf hellem Himmel. */
.sub-card::after{content:"";position:absolute;inset:0;background:rgba(33,33,33,.38)}
.sub-card figcaption{
  position:absolute;inset:auto 0 0 0;z-index:1;padding:16px 14px 14px;
  background:linear-gradient(rgba(33,33,33,0),rgba(33,33,33,.88) 38%,rgba(33,33,33,.97));
  font-size:.78rem;line-height:1.4;color:#e6e9ee;text-shadow:0 1px 8px rgba(0,0,0,.6)
}
.sub-card b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.05rem;color:var(--red-lit);line-height:1}

/* Untermenue-Eintraege in der mobilen Schublade */
.drawer .subnav{margin:-.2em 0 .8em;padding-left:2px}
.drawer .subnav a{
  font-family:var(--text);font-weight:500;text-transform:none;
  font-size:1.05rem;line-height:1.5;padding:.16em 0;color:#a4a7ac;
}
.drawer .subnav a:hover{color:#fff}

/* --- Rabatt-Band ---------------------------------------------------------- */
.perk{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,40px);
  padding:clamp(24px,3vw,38px);border-radius:0;
  background:linear-gradient(100deg,#2a0a13,#1b1b1b 68%);
  border:1px solid rgba(196,18,48,.4);
}
.perk .big{
  font-family:var(--display);font-weight:700;line-height:.85;
  font-size:clamp(3rem,7vw,5.4rem);color:var(--red-lit);
}
.perk .txt{flex:1 1 320px}
.perk h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,2rem);line-height:1}
.perk p{margin-top:.7em;color:#b0b3b8;font-size:.98rem;max-width:52ch}

/* --- Buchungsanfrage ------------------------------------------------------ */
.book{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(20px,3vw,40px);align-items:start}
.book-panel{padding:clamp(22px,2.6vw,34px);border-radius:0;
  background:var(--ink-2);border:1px solid var(--line)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{display:flex;flex-direction:column;gap:.5em}
.f-full{grid-column:1 / -1}
.f>span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.f input,.f select,.f textarea{
  width:100%;padding:.85em 1em;border-radius:0;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff;
  font-family:var(--text);font-size:.98rem;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.f textarea{resize:vertical;min-height:96px;line-height:1.55}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--red-lit);background:rgba(255,255,255,.08)}
/* :user-invalid statt :invalid — sonst sind leere Pflichtfelder schon rot,
   bevor der Besucher sie ueberhaupt angefasst hat. */
.f input:user-invalid,.f textarea:user-invalid{border-color:rgba(228,23,58,.65)}
.f select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),
                   linear-gradient(135deg,var(--grey) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.f input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.55;cursor:pointer}

/* --- Eigene Personenauswahl (Erwachsene/Kinder) ----------------------------
   Der native <select> zeigt bei "appearance:none" zwar einen gestalteten
   Knopf (siehe .f select oben), die AUFGEKLAPPTE Liste bleibt aber immer die
   Standard-OS-Liste (weiss, ungestaltet) — kein CSS kann das beeinflussen.
   Genau das hat der Nutzer per Screenshot bemaengelt (12.9.2026 Session,
   sinngemaess 15.9.2026 "die Auswahl muss moderner werden"). Deshalb hier
   dasselbe Muster wie .langpick/.langmenu weiter oben: ein echter, aber
   unsichtbarer <select> bleibt als Datenquelle bestehen (Formular-Logik in
   booking.js liest weiterhin ganz normal .value/.dispatchEvent('change')),
   ein eigener Knopf + eine eigene, dunkel gestaltete Liste ersetzen die
   Bedienung. KEIN [hidden]-Attribut fuer das Auf-/Zuklappen (siehe CLAUDE.md-
   Fallstricke: [hidden] verliert gegen eine display-Regel bzw. kann nicht
   animiert werden) — wie beim Sprachmenue nur eine .open-Klasse mit
   opacity/visibility-Uebergang. */
.csel{position:relative}
.csel-btn{
  width:100%;padding:.85em 1em;border-radius:0;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff;
  font-family:var(--text);font-size:.98rem;text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:.6em;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.csel-btn:focus-visible{outline:none;border-color:var(--red-lit);background:rgba(255,255,255,.08)}
.csel.open .csel-btn{border-color:var(--red-lit);background:rgba(255,255,255,.08)}
.csel-chev{width:11px;height:11px;flex:none;color:var(--grey);transition:transform .35s var(--ease)}
.csel.open .csel-chev{transform:rotate(180deg)}
.csel-list{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:8;
  max-height:264px;overflow-y:auto;list-style:none;
  padding:.4rem;border-radius:0;background:rgba(26,26,26,.94);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 1.5rem 3.75rem rgba(0,0,0,.24);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.csel.open .csel-list{opacity:1;visibility:visible;transform:none}
.csel-opt{
  padding:.6em .85em;border-radius:0;color:#d2d5da;font-size:.92rem;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.csel-opt:hover,.csel-opt.is-active{background:rgba(255,255,255,.07);color:#fff}
.csel-opt[aria-selected="true"]{background:var(--red);color:#fff;font-weight:700}
.csel-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
@media (prefers-reduced-motion:reduce){.csel-list,.csel-chev{transition:none}}

/* --- Adress-Autovervollstaendigung (Straße-Feld, 15.9.2026) ----------------
   Vorschlagsliste im selben visuellen Stil wie .csel-list oben (Auf-/Zuklapp-
   Muster identisch: keine [hidden]-Umschaltung, nur opacity/visibility, siehe
   CLAUDE.md-Fallstricke), aber ohne eigenen Knopf -- der Ausloeser ist hier
   das Tippen im Eingabefeld selbst, nicht ein Klick. */
.adrsuggest{position:relative}
.adrsuggest-list{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:9;
  max-height:280px;overflow-y:auto;list-style:none;margin:0;
  padding:.4rem;border-radius:0;background:rgba(26,26,26,.94);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 1.5rem 3.75rem rgba(0,0,0,.24);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.adrsuggest-list.open{opacity:1;visibility:visible;transform:none}
.adrsuggest-opt{
  padding:.6em .85em;border-radius:0;color:#d2d5da;font-size:.88rem;line-height:1.4;
  cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);
}
.adrsuggest-opt:hover{background:rgba(255,255,255,.07);color:#fff}
.adrsuggest-quelle{margin-top:-.6em;opacity:.55}
.adrsuggest-quelle a{text-decoration:underline;text-underline-offset:.2em}
@media (prefers-reduced-motion:reduce){.adrsuggest-list{transition:none}}

/* Optionales echtes Google-Autocomplete (nur aktiv mit Schluessel, siehe
   google-maps-config.js/booking.js) -- direktes CSS auf dem Host-Tag selbst
   funktioniert seit einem Google-Update, KEIN Shadow-DOM-Umweg mehr noetig
   (die frueher dafuer genannten --gmpx-*-Variablen gehoeren zu einer anderen
   Komponente und griffen hier gar nicht, recherchiert 15.9.2026). Das
   Vorschlags-Dropdown selbst liegt weiterhin ausserhalb des Shadow DOM und
   laesst sich klassisch ueber .pac-container/.pac-item stylen. */
gmp-place-autocomplete{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:0;color-scheme:dark;
}
.pac-container{
  background:rgba(18,18,20,.97)!important;border:1px solid rgba(255,255,255,.1)!important;
  border-radius:0!important;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)!important;
  font-family:var(--text)!important;overflow:hidden;
}
.pac-item{padding:.5em .85em;color:#d2d5da!important;border-top-color:rgba(255,255,255,.08)!important}
.pac-item:hover,.pac-item-selected{background:rgba(255,255,255,.07)!important}
.pac-item-query,.pac-matched{color:#fff!important}
.check{display:flex;gap:.75em;align-items:flex-start;grid-column:1 / -1;
  padding:.9em 1em;border-radius:0;background:rgba(196,18,48,.1);
  border:1px solid rgba(196,18,48,.32);font-size:.93rem;color:#e6e9ee;cursor:pointer}
.check input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--red);margin-top:.1em}
.err{color:#ff6b83;font-size:.85rem;margin-top:1em;min-height:1.2em}

/* Zusammenfassung */
.sum{position:sticky;top:calc(var(--nav-h) + 20px);padding:clamp(22px,2.6vw,32px);
  border-radius:0;background:linear-gradient(165deg,#2a0a13,#1b1b1b 62%);
  border:1px solid rgba(196,18,48,.4)}
.sum h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.25rem;line-height:1}
.sum-rows{margin-top:1.4em}
.sum-row{display:flex;justify-content:space-between;gap:14px;padding:.62em 0;
  border-bottom:1px solid var(--line);font-size:.94rem;color:#b0b3b8}
.sum-row b{color:#fff;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:1.1em;padding-top:1.1em;border-top:1px solid rgba(255,255,255,.25)}
.sum-total span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.sum-total b{font-family:var(--display);font-weight:700;font-size:2.1rem;line-height:.9;
  font-variant-numeric:tabular-nums}
.sum .btn{width:100%;justify-content:center;margin-top:1.4em}
.sum .btn-ghost{margin-top:8px}

/* E-Mail-Vorschau: hier laesst sich die Schrift tatsaechlich bestimmen */
.mailview{margin-top:clamp(20px,3vw,32px)}
.mailview summary{cursor:pointer;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);padding:.6em 0;transition:color .35s var(--ease)}
.mailview summary:hover{color:#fff}
.mailview pre{
  margin:.8em 0 0;padding:clamp(18px,2.2vw,26px);border-radius:0;
  background:#0e0e10;border:1px solid var(--line);color:#dee1e6;
  font-family:"SF Mono",ui-monospace,"JetBrains Mono","Cascadia Mono","Segoe UI Mono",
    "Roboto Mono","Liberation Mono",Menlo,Consolas,monospace;
  font-size:.86rem;line-height:1.72;white-space:pre-wrap;word-break:break-word;
  font-variant-ligatures:none;tab-size:2;
}
.mailview .ok{color:#5ad18b}

@media (max-width:1000px){
  .book{grid-template-columns:1fr}
  .sum{position:relative;top:0}
  .sub{display:none}
}
@media (max-width:760px){
  .fields{grid-template-columns:1fr}
  .perk{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   Ergaenzungen: Videothek, eingebettete Fremdsysteme, Karte, News
   ========================================================================== */

/* --- Videothek ------------------------------------------------------------ */
.vtek{display:grid;grid-template-columns:1fr 300px;gap:clamp(16px,2vw,26px);align-items:start}
.vstage{position:relative;aspect-ratio:16/9;border-radius:0;overflow:hidden;background:var(--ink-2)}
.vstage img,.vstage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.vstage .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,33,33,.15),rgba(33,33,33,.7))}
.vstage .play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(64px,7vw,86px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:var(--red);color:#fff;
  box-shadow:0 18px 44px -14px rgba(196,18,48,.9);
  transition:transform .5s var(--ease),background .4s var(--ease);
}
.vstage:hover .play{transform:scale(1.08);background:var(--red-lit)}
.vstage .play svg{width:26px;height:26px;fill:currentColor;margin-left:3px}
.vstage figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2.2vw,28px);
  pointer-events:none;
}
.vstage figcaption b{
  display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.1rem,2vw,1.7rem);line-height:1.05;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.vstage figcaption span{display:block;margin-top:.45em;font-size:.85rem;color:#ccd0d5}

.vlist{display:flex;flex-direction:column;gap:10px}
.vitem{
  display:grid;grid-template-columns:106px 1fr;gap:12px;align-items:center;
  padding:8px;border-radius:0;text-align:left;width:100%;
  border:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.vitem:hover{background:rgba(255,255,255,.06)}
.vitem[aria-current="true"]{background:rgba(196,18,48,.14);border-color:rgba(196,18,48,.45)}
.vitem .thumb{position:relative;aspect-ratio:16/9;border-radius:0;overflow:hidden;background:var(--ink-3)}
.vitem .thumb img{width:100%;height:100%;object-fit:cover}
.vitem b{display:block;font-size:.88rem;font-weight:700;color:#fff;line-height:1.3}
.vitem span{display:block;font-size:.76rem;color:var(--grey);margin-top:.25em}

/* --- Bildergalerie ---------------------------------------------------------
   Bewusst KEIN schmaler Seiten-Streifen wie bei der Videothek (die passt fuer
   acht Filme, aber nicht fuer 29 Fotos — 106px breite Vorschaubilder waren
   bei so vielen Kacheln nicht mehr zu erkennen). Stattdessen: Buehne oben,
   darunter ein Kachel-Raster, das sich unabhaengig von der Fensterbreite von
   selbst in die passende Spaltenzahl legt (kein eigener Media-Query-Umbruch
   noetig, der zwischen zwei CSS-Dateien auseinanderlaufen kann). ---------- */
.gtek{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.gstage{position:relative;aspect-ratio:16/9;border-radius:0;overflow:hidden;background:var(--ink-2);
  scroll-margin-top:calc(var(--nav-h) + 20px)}
.gstage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gstage .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(33,33,33,.78))}
.gstage figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2.2vw,28px);pointer-events:none}
.gstage figcaption b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.1rem,2vw,1.7rem);line-height:1.05;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.gstage figcaption span{display:block;margin-top:.45em;font-size:.85rem;color:#ccd0d5}

.gnav{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(33,33,33,.55);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.gnav:hover{background:var(--red)}
.gnav:active{transform:scale(.92)}
.gnav.prev{left:14px}
.gnav.next{right:14px}
.gnav svg{width:20px;height:20px}

.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.gitem{
  display:flex;flex-direction:column;gap:10px;
  padding:10px;border-radius:0;text-align:left;width:100%;
  border:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.gitem:hover{background:rgba(255,255,255,.06)}
.gitem[aria-current="true"]{background:rgba(196,18,48,.14);border-color:rgba(196,18,48,.45)}
.gitem .thumb{position:relative;aspect-ratio:4/3;border-radius:0;overflow:hidden;background:var(--ink-3)}
.gitem .thumb img{width:100%;height:100%;object-fit:cover}
.gitem b{display:block;font-size:.9rem;font-weight:700;color:#fff;line-height:1.3}
.gitem span{display:block;font-size:.78rem;color:var(--grey);margin-top:.2em}

/* --- Eingebettete Fremdsysteme (Verleih, Check-in, Tickets) --------------- */
.embed{
  position:relative;border-radius:0;overflow:hidden;background:#fff;
  border:1px solid var(--line);min-height:clamp(520px,74vh,860px);
}
.embed iframe{display:block;width:100%;height:clamp(520px,74vh,860px);border:0}
.embed-facade{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:var(--pad);background:var(--ink-2);
}
.embed-facade .inner{max-width:46ch}
.embed-facade h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1;color:#fff}
.embed-facade p{margin-top:1em;color:#b0b3b8;font-size:.96rem;line-height:1.65}
.embed-facade .btn{margin-top:1.8em}
.embed-note{margin-top:1em;font-size:.82rem;color:var(--grey)}
.embed-note a{color:var(--red-lit)}
/* Reiter im Ischgl-Zuschnitt: keine Pille mehr, sondern eckige Felder in
   fetter Versalschrift — aktiver Reiter in der Markenfarbe statt in Weiss
   (Ischgl markiert Aktives durchgehend rot, nicht durch Helligkeit). */
.tabs{display:flex;flex-wrap:wrap;gap:2px;padding:0;border-radius:0;
  background:rgba(255,255,255,.07);margin-bottom:22px;width:max-content;max-width:100%}
.tabs button{padding:.95em 1.7em;border-radius:0;font-size:.82rem;font-weight:700;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;
  color:#c8cbd0;white-space:nowrap;transition:color .3s var(--ease),background .3s var(--ease)}
.tabs button:hover{color:#fff;background:rgba(26,26,26,.6)}
.tabs button[aria-selected="true"]{background:var(--red);color:#fff;font-weight:700}

/* --- Karte ---------------------------------------------------------------- */
.mapwrap{position:relative;border-radius:0;overflow:hidden;background:var(--ink-2);
  aspect-ratio:16/9;min-height:320px;border:1px solid var(--line)}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapfacade{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(196,18,48,.14),transparent 60%),
    var(--ink-2)}
/* display:block ist noetig — an einem inline-span greifen width/height nicht,
   das SVG wuerde die ganze Kachel fluten. */
.mapfacade .pin{display:block;width:44px;height:44px;margin:0 auto .9em;color:var(--red-lit)}
.mapfacade .pin svg{width:100%;height:100%;fill:currentColor}
.mapfacade b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.35rem;color:#fff;line-height:1.05}
.mapfacade p{margin-top:.6em;font-size:.9rem;color:#b0b3b8;max-width:40ch}
.mapfacade .btn{margin-top:1.4em}

/* --- News ----------------------------------------------------------------- */
/* Feste Spaltenzahl statt auto-fit: sonst bleibt bei drei Meldungen
   je nach Fensterbreite eine Spalte leer. */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media (max-width:1100px){.news{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.news{grid-template-columns:1fr}}
.newscard{
  display:flex;flex-direction:column;border-radius:0;overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line);
  transition:transform .7s var(--ease),border-color .5s var(--ease)}
.newscard:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.26)}
.newscard .pic{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3);cursor:pointer}
.newscard .pic img{width:100%;height:100%;object-fit:cover;
  transition:transform .33s ease-in-out}
.newscard:hover .pic img{transform:scale(1.12)}
.newscard .body-in{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.newsmeta{display:flex;flex-wrap:wrap;align-items:center;gap:.7em;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.newsmeta .tag{color:var(--red-lit);border:1px solid rgba(228,23,58,.4);
  border-radius:0;padding:.3em .8em;letter-spacing:.1em}
.newscard h3{margin:.9em 0 .5em;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.05;color:#fff}
/* Die Ueberschrift ist ein <button> (Tastatur-Fokus fuer "mehr lesen"),
   soll aber genau wie der bisherige Text aussehen. */
.newscard h3 .newsopen{display:block;width:100%;text-align:left;font:inherit;
  color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;
  transition:color .35s var(--ease)}
.newscard h3 .newsopen:hover{color:var(--red-lit)}
.newscard p{font-size:.96rem;line-height:1.65;color:#b0b3b8;flex:1}
.newscard .more{display:none}
.newscard .tlink{margin-top:1.4em;align-self:flex-start}
.newscard.lead-item{grid-column:1 / -1}
.newscard.lead-item{flex-direction:row}
.newscard.lead-item .pic{flex:0 0 46%;aspect-ratio:auto}
.newscard.lead-item .body-in{justify-content:center;padding:clamp(26px,3.4vw,52px)}

@media (max-width:1000px){
  .vtek{grid-template-columns:1fr}
  .vlist{flex-direction:row;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
  .vitem{flex:0 0 260px;scroll-snap-align:start}
  .newscard.lead-item{flex-direction:column}
  .newscard.lead-item .pic{flex:none;aspect-ratio:16/10}
}

/* --- News-Detailansicht ---------------------------------------------------- */
.newsmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,4vw,40px)}
.newsmodal-veil{position:absolute;inset:0;background:rgba(19,19,19,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .5s var(--ease)}
.newsmodal-panel{position:relative;width:min(880px,100%);max-height:min(86vh,880px);
  overflow-y:auto;border-radius:0;background:var(--ink-2);
  border:1px solid var(--line);box-shadow:0 60px 120px -40px rgba(0,0,0,.8);
  opacity:0;transform:translateY(24px) scale(.98);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.newsmodal.in .newsmodal-veil{opacity:1}
.newsmodal.in .newsmodal-panel{opacity:1;transform:none}
.newsmodal-close{position:absolute;top:16px;right:16px;z-index:2;width:42px;height:42px;
  border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(33,33,33,.55);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .35s var(--ease),transform .35s var(--ease)}
.newsmodal-close:hover{background:var(--red);transform:rotate(90deg)}
.newsmodal-close svg{width:18px;height:18px}
.newsmodal-pic{aspect-ratio:16/8;overflow:hidden;background:var(--ink-3)}
.newsmodal-pic img{width:100%;height:100%;object-fit:cover}
.newsmodal-body{padding:clamp(24px,3.4vw,44px)}
.newsmodal-body #newsModalTitle{color:#fff}
.newsmodal-text p{font-size:1.02rem;line-height:1.75;color:#ccd0d5;max-width:64ch}
.newsmodal-text p + p{margin-top:1.1em}

@media (max-width:600px){
  .newsmodal{padding:0}
  .newsmodal-panel{width:100%;height:100%;max-height:100%;border-radius:0}
}

@media (prefers-reduced-motion:reduce){
  .newsmodal-veil,.newsmodal-panel{transition:opacity .2s linear}
  .newsmodal.in .newsmodal-panel{transform:none}
}

/* --- Galerie-Popup (hotel.html, Klick auf die grosse Buehne) --------------
   Gleiches Geruest wie .newsmodal (Veil/Panel/Close), aber bildfuellend
   statt Bild+Textspalte, dazu Links/Rechts-Navigation wie bei .gstage. */
.galeriemodal-panel{
  width:min(1100px,96vw);max-height:92vh;background:var(--ink);
  display:flex;flex-direction:column;
}
.galeriemodal-pic{
  position:relative;aspect-ratio:16/10;background:#000;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.galeriemodal-pic img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.galeriemodal-cap{
  padding:16px clamp(20px,3vw,32px) 20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:.6em;
  font-size:.92rem;color:#ced2d7;
}
.galeriemodal-cap b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.05rem;color:#fff;letter-spacing:.01em}
.galeriemodal-cap .num{font-variant-numeric:tabular-nums;color:var(--gold)}
.galeriemodal .gnav{
  /* Kein eigenes transform: die Basisregel .gnav zentriert schon per
     translate:0 -50% — beides zusammen schob die Knoepfe doppelt nach oben
     (Audit 8.9.2026). */
  position:absolute;top:50%;z-index:2;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(33,33,33,.55);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .3s var(--ease);
}
.galeriemodal .gnav:hover{background:var(--red)}
.galeriemodal .gnav svg{width:20px;height:20px}
.galeriemodal .gnav.prev{left:16px}
.galeriemodal .gnav.next{right:16px}
@media (max-width:600px){
  .galeriemodal-panel{width:100%;height:100%;max-height:100%;border-radius:0;justify-content:center}
  .galeriemodal-pic{aspect-ratio:auto;flex:1 1 auto}
  .galeriemodal .gnav{width:40px;height:40px}
}

/* --- Seitensuche ------------------------------------------------------ */
/* Such-Knopf in der Kopfleiste -- bewusst als kleine Premium-Pille statt
   nur eines Icon-Kreises, weil dahinter jetzt die KI-Suche steckt (Gold-
   Rahmen greift denselben Alpine-Premium-Akzent wie die KI-Suchkarte und
   die Live-Wetter-Widgets auf). */
.suche-btn{
  display:flex;align-items:center;gap:8px;height:3.125rem;padding:0 .9rem;
  border-radius:0;color:#fff;flex:0 0 auto;
  background:transparent;border:none;
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.suche-btn:hover{background:rgba(26,26,26,.9);color:var(--red-lit)}
.suche-btn svg{width:1.25rem;height:1.25rem;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8}
.suche-btn .suche-btn-label{font-size:.78rem;white-space:nowrap}
.suche-btn .suche-btn-key{
  flex:0 0 auto;display:flex;align-items:center;gap:.2em;font-size:.66rem;
  color:#9a9da2;border:1px solid rgba(255,255,255,.2);border-radius:0;
  padding:.2em .45em;letter-spacing:.02em;
}
.nav.solid .suche-btn,.nav:not(.solid) .suche-btn{color:#fff}
@media (max-width:1080px){
  .suche-btn .suche-btn-label,.suche-btn .suche-btn-key{display:none}
  .suche-btn{padding:0;width:40px;justify-content:center}
}

.suche-overlay{
  position:fixed;inset:0;z-index:300;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(16px,7vh,10vh) clamp(16px,4vw,40px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.suche-overlay.in{opacity:1;visibility:visible}
.suche-veil{position:absolute;inset:0;background:rgba(18,18,18,.86);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.suche-panel{
  position:relative;width:min(760px,100%);max-height:min(78vh,820px);
  display:flex;flex-direction:column;border-radius:0;overflow:hidden;
  background:rgba(26,26,26,.97);border:none;
  box-shadow:0 1.5rem 3.75rem rgba(0,0,0,.4);
  transform:translateY(-18px);transition:transform .3s var(--ease);
}
.suche-overlay.in .suche-panel{transform:none}
/* Lichtsaum hinter dem Kopf -- bei Ischgl kommt jedes Glimmen aus der
   Markenfarbe, nicht aus Gold; der Schein sitzt deshalb jetzt in Rot. */
.suche-panel::before{
  content:"";position:absolute;top:0;left:50%;translate:-50% -55%;width:110%;height:260px;
  background:radial-gradient(ellipse at center,rgba(196,18,48,.16),transparent 72%);
  pointer-events:none;z-index:0;
}
.suche-kopf{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;
  padding:26px 26px 20px;border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto;
}
.suche-kopf-badge{display:flex;align-items:center;gap:6px;font-size:.66rem;
  letter-spacing:.4em;text-transform:uppercase;color:var(--red-lit);font-weight:700}
.suche-kopf-badge svg{width:12px;height:12px}
.suche-kopf-in{display:flex;align-items:center;gap:14px}
.suche-kopf-in svg{width:22px;height:22px;flex:0 0 auto;color:#7b7e83;stroke:currentColor;fill:none;stroke-width:1.8}
.suche-kopf input{
  flex:1 1 auto;background:none;border:none;color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.3;min-width:0;
  letter-spacing:-.01em;
}
.suche-kopf input::placeholder{color:#62656a;font-weight:400}
.suche-kopf input:focus{outline:none}
.suche-esc{flex:0 0 auto;font-size:.72rem;color:#7b7e83;
  border:1px solid rgba(255,255,255,.14);border-radius:0;padding:.2em .55em}
.suche-ergebnisse{position:relative;z-index:1;overflow-y:auto;padding:10px}
.suche-leer{padding:34px 18px;text-align:center;color:#7b7e83;font-size:.94rem}
.suche-hinweis{padding:14px 12px 4px;color:#7b7e83;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}

.suche-item{
  display:block;width:100%;text-align:left;padding:12px 12px;border-radius:0;
  transition:background .2s var(--ease);
}
.suche-item:hover,.suche-item.aktiv{background:rgba(255,255,255,.06)}
.suche-item .weg{display:flex;align-items:center;gap:.5em;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--red-lit);margin-bottom:.4em}
.suche-item .weg span:not(:last-child)::after{content:"›";margin-left:.5em;color:#6a6d72}
.suche-item p{margin:0;font-size:.92rem;line-height:1.55;color:#ccd0d5}
.suche-item mark{background:none;color:#fff;font-weight:700}

/* --- KI-Suche (Karte oben im Such-Overlay) --------------------------------
   Gold statt Rot -- reine Zusatzinformation, keine Handlungsaufforderung
   (siehe --gold-Regel weiter oben), hebt sich damit klar von den
   Stichwort-Treffern darunter ab. */
.suche-ki-knopf{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  margin:10px 2px 4px;padding:14px 16px;border-radius:0;
  background:linear-gradient(155deg,rgba(184,135,79,.18),rgba(184,135,79,.05));
  border:1px solid rgba(184,135,79,.32);color:#fff;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.suche-ki-knopf:hover{background:linear-gradient(155deg,rgba(184,135,79,.26),rgba(184,135,79,.08));border-color:rgba(184,135,79,.5)}
.suche-ki-knopf svg{flex:0 0 auto;width:17px;height:17px;color:var(--gold)}
.suche-ki-knopf span:not(.arw){flex:1 1 auto;font-size:.9rem;line-height:1.4}
.suche-ki-knopf em{font-style:normal;color:var(--gold)}
.suche-ki-knopf .arw{flex:0 0 auto;color:rgba(255,255,255,.4);font-size:.9rem}

.suche-ki-karte{
  display:flex;align-items:flex-start;gap:12px;margin:10px 2px 4px;
  padding:16px;border-radius:0;
  background:linear-gradient(155deg,rgba(184,135,79,.14),rgba(184,135,79,.04));
  border:1px solid rgba(184,135,79,.28);
}
.suche-ki-karte>svg{flex:0 0 auto;width:17px;height:17px;color:var(--gold);margin-top:.2em}
.suche-ki-karte.lade>svg{animation:ki-puls 1.3s ease-in-out infinite}
@keyframes ki-puls{0%,100%{opacity:.4}50%{opacity:1}}
.suche-ki-inhalt{flex:1 1 auto;min-width:0}
.suche-ki-lade{margin:0;font-size:.88rem;color:rgba(255,255,255,.55)}
.suche-ki-text{margin:0 0 10px;font-size:.92rem;line-height:1.6;color:#eee}
.suche-ki-links{display:flex;flex-wrap:wrap;gap:8px}
.suche-ki-links a{
  font-size:.8rem;padding:.4em .8em;border-radius:0;color:var(--gold);
  border:1px solid rgba(184,135,79,.35);transition:background .2s var(--ease);
}
.suche-ki-links a:hover{background:rgba(184,135,79,.15)}

@media (max-width:640px){
  .suche-overlay{padding:0}
  .suche-panel{width:100%;height:100%;max-height:100%;border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  .suche-overlay,.suche-panel{transition:opacity .15s linear}
  .suche-overlay.in .suche-panel{transform:none}
}
@media (max-width:760px){
  .embed,.embed iframe{min-height:70vh;height:70vh}
  .tabs{width:100%}
  .tabs button{flex:1 1 auto;text-align:center;padding:.7em 1em}
}