/* ==========================================================================
   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}

/* --- Tokens --------------------------------------------------------------- */
:root{
  --red:#c41230;
  --red-lit:#e4173a;
  /* Alpine-warme Grundtöne statt neutralem Schwarz/Weiß: jeder Ton bekommt
     einen deutlichen Gelb-/Braunstich (R weit über B statt umgekehrt) —
     dieselbe Helligkeit wie zuvor, nur die Farbtemperatur wandert von
     "kühl/clean" Richtung Holz/Hütte. Der Kontrast warme Innenwelt vs.
     kühle Piste (Schnee-Fotos bleiben natürlich kühl) ist das eigentliche
     Alpine-Gefühl. Rot bleibt unverändert, das ist CI-Farbe. --gold ist
     KEIN zweiter Akzent (siehe CLAUDE.md, "Rot ist die einzige
     Akzentfarbe") — nur Deko-Wärme in Verläufen/Glanzlichtern, nie auf
     Buttons/Links/CTAs.
     Nachtrag (7.9.2026, "muss nicht so dunkel sein, sehr alpiner Stil"):
     --ink war zuvor #0f0b08 (fast Schwarz, RGB 15/11/8) — auf Wunsch
     spürbar aufgehellt und wärmer gemacht (RGB 43/31/19, warmes
     Hütten-Walnussholz statt Void-Schwarz), Kontrast zu weißem Text bleibt
     mit ~16:1 weit über WCAG AAA. Dieselbe Verschiebung wurde auf ALLE
     `rgba(15,11,8,…)`-Bildverläufe/-Schleier site-weit angewandt (Hero-,
     Bleed-, Kacheln-, Video-Shades — vorher wortwörtlich derselbe Wert wie
     --ink, nur nicht über die Variable referenziert), dazu die bisher
     kühl-neutralen Verläufe bei Dropdown/Modal-Schleiern (waren
     rgb(17,17,19)/rgb(18,18,20)/rgb(8,8,9), reines Grau ohne Alpine-Stich)
     auf dieselbe warme Familie umgestellt. */
  --ink:#2b1f13;
  --ink-2:#3d2c1a;
  --ink-3:#4f3a22;
  --paper:#f8f1e4;
  --paper-2:#f1e6d2;
  --paper-3:#e3d2b0;
  --grey:#9c8b6e;
  --grey-d:#6b5a41;
  --line:rgba(255,230,190,.16);
  --line-d:rgba(60,35,5,.1);
  --gold:#b8874f;

  --display:S2K,"Arial Narrow",sans-serif;
  --text: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:72px;
  /* --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 72px hoch und
     ruecht nur noch buendig unter den/die Banner. */
  --nav-own-h:72px;
}

/* --- 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}

/* --- 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 ----------------------------------------------------------- */
.display{
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;line-height:.86;letter-spacing:-.01em;
  margin:0;
}
.d1{font-size:clamp(3.2rem,11.5vw,11rem)}
.d2{font-size:clamp(2.6rem,7.5vw,6.4rem)}
.d3{font-size:clamp(2rem,4.6vw,4rem)}
.d4{font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:.95}

.eyebrow{
  font-family:var(--text);font-weight:700;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);display:flex;align-items:center;gap:.75em;
}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;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:#c8b6ab}
.body{font-size:1.0625rem;line-height:1.7;color:var(--grey-d);max-width:62ch}
.dark .body{color:#b8a781}
.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 -------------------------------------------------------------- */
.btn{
  --bg:var(--red);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  padding:1.05em 2.1em;border-radius:100px;
  background:var(--bg);color:var(--fg);
  font-weight:700;font-size:.95rem;
  overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),color .4s var(--ease);
  will-change:transform;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--red-lit);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(196,18,48,.7)}
.btn:hover::before{transform:scaleX(1)}
.btn .arw{transition:transform .5s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}

.btn-ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18)}
.dark .btn-ghost{--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26)}
.btn-ghost::before{background:var(--ink)}
.dark .btn-ghost::before{background:#fff}
.btn-ghost:hover{--fg:#fff;box-shadow:inset 0 0 0 1.5px transparent}
.dark .btn-ghost:hover{--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(43,31,19,.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%)}

/* --- 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(43,31,19,.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);
}
.pwa-banner.in{transform:translateY(0)}
.pwa-banner img{width:38px;height:38px;border-radius:10px;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:#ae9c91;margin-top:1px}
.pwa-banner button.install{
  flex:0 0 auto;padding:.55em 1.1em;border-radius:999px;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:#9c8b6e;
}
.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='%23f3ead9' 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='%23d9b57e' 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 #241c11), 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;
  background:
    radial-gradient(120% 240% at 0% -35%,rgba(120,165,205,.5) 0%,rgba(120,165,205,0) 58%),
    radial-gradient(90% 180% at 100% 135%,rgba(184,135,79,.2) 0%,rgba(184,135,79,0) 50%),
    linear-gradient(100deg,#0f1a24 0%,#152230 45%,#1c2430 100%);
  border-bottom:1px solid rgba(214,232,245,.38);
  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,#f2f8fc 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:var(--gold);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:9px;
  background:linear-gradient(165deg,rgba(214,232,245,.26) 0%,rgba(140,172,204,.16) 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:.07em;text-transform:uppercase;color:#dfeaf3;
}
.sk-band-sep{position:relative;z-index:1;color:rgba(210,228,242,.55);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;border-radius:999px;
  background:var(--gold);color:#1a1208;
  font-family:var(--display);font-weight:700;font-size:.78rem;white-space:nowrap;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.sk-band-cta:hover{background:#c99a5f;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(43,31,19,.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:#d6c4b8}
.cookie-banner .aktionen{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.cookie-banner .mehr{font-size:.82rem;color:#ae9c91;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:999px;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:999px;background:transparent;
  color:#d6c4b8;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:12px;color:#fff}
.brand img{width:34px;height:34px}
.brand span{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.nav-links a{
  position:relative;color:#fff;font-weight:500;font-size:.92rem;padding:.4em 0;opacity:.82;
  transition:opacity .4s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--red-lit);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a.on{opacity:1}
.nav-links a.on::after{transform:scaleX(1)}
.nav-cta{padding:.72em 1.4em;font-size:.85rem}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:#fff}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;position:relative;
  transition:background .3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;
  background:currentColor;transition:transform .5s var(--ease)}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translateY(7px) rotate(45deg)}
.nav.open .burger span::after{transform:translateY(-7px) 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='%234f3a22'/%3E%3Cpath d='M112 18 96 46 122 46Z' fill='%23e9dfc7' opacity='.55'/%3E%3Cpath d='M292 98 278 118 306 118Z' fill='%23e9dfc7' 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:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);color:#ac9a91;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:#816f66;
  border:1px solid rgba(255,255,255,.14);border-radius:6px;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:16px;
  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:13px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(184,135,79,.16);color:var(--gold);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.d-row.on .d-icon,.d-row:hover .d-icon{background:rgba(196,18,48,.2);color:var(--red-lit)}
.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:#9c8b6e;
  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:#ac9a90;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:#9c8b6e;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(43,31,19,.62) 0%,rgba(43,31,19,.2) 30%,rgba(43,31,19,.3) 52%,rgba(43,31,19,.92) 100%),
    linear-gradient(90deg,rgba(43,31,19,.5) 0%,rgba(43,31,19,0) 62%);
}
.hero-in{
  position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(76px,13vh,148px);
}
.hero h1{color:#fff;text-shadow:0 2px 60px rgba(43,31,19,.45)}
/* 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:999px;
  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(43,31,19,.14)}
.faq-item:last-child{border-bottom:1px solid rgba(43,31,19,.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:#b8a781}

/* --- 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:#9c8b6e}

.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:12px;
  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:14px;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:#9c8b6e}

/* --- 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:16px;
  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:20px;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:20px;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(43,31,19,.44)}
.bleed .wrap{position:relative}
.bleed .eyebrow{justify-content:center;color:#fff}
.bleed .lead{margin-inline:auto;color:rgba(255,255,255,.85)}

/* --- 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:18px;overflow:hidden;background:var(--ink-2)}
.hcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.hcard:hover img{transform:scale(1.05)}
.hcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 24px;color:#fff;
  background:linear-gradient(transparent,rgba(43,31,19,.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:#d4c2b7;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:18px;
  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:#b8a781;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,#1c150d 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:99px}

/* --- 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:#dbc9be;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:99px;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;padding:4px;border-radius:99px;background:rgba(255,255,255,.07);margin-bottom:26px}
.seg button,.pricetoggle button{padding:.6em 1.6em;border-radius:99px;font-size:.85rem;font-weight:500;color:#b8a781;
  cursor:pointer;transition:color .4s var(--ease),background .4s var(--ease)}
.seg button.on,.pricetoggle button.on{background:#fff;color:var(--ink);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:#9c8b6e;
  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:#412f23;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;
  -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:16px;
  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}
/* 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)}
.footer h3{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:#9c8b6e;margin-bottom:1.5em}
.footer-nav li{padding:.42em 0}
.footer-nav a{color:#dbc9be;font-size:.98rem;transition:color .35s var(--ease)}
.footer-nav a:hover{color:#fff}
.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:#837168}
.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(43,31,19,.72),rgba(43,31,19,.3) 45%,rgba(43,31,19,.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:#9c8b6e;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:#dbc9be}
.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}
  .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)
}
.sub-in{
  display:grid;grid-template-columns:1fr 216px;gap:8px;padding:14px;
  border-radius:18px;border:1px solid var(--line);
  background:rgba(38,27,16,.9);backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
}
.sub-links{display:flex;flex-direction:column;gap:2px}
.sub-links a{
  display:block;padding:12px 14px;border-radius:11px;opacity:1;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.sub-links a::after{display:none}
.sub-links a:hover{background:rgba(255,255,255,.07);transform:translateX(3px)}
.sub-links b{display:block;font-size:.95rem;font-weight:700;color:#fff}
.sub-links span{display:block;font-size:.82rem;color:#ac9a90;margin-top:.2em}
.sub-card{position:relative;margin:0;border-radius:12px;overflow:hidden;background:var(--ink-2)}
.sub-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* Grundschleier ueber dem Foto, sonst steht die Bildunterschrift
   je nach Bildausschnitt auf hellem Himmel. */
.sub-card::after{content:"";position:absolute;inset:0;background:rgba(43,31,19,.38)}
.sub-card figcaption{
  position:absolute;inset:auto 0 0 0;z-index:1;padding:16px 14px 14px;
  background:linear-gradient(rgba(43,31,19,0),rgba(43,31,19,.88) 38%,rgba(43,31,19,.97));
  font-size:.78rem;line-height:1.4;color:#eee0c4;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:#ac9a90;
}
.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:20px;
  background:linear-gradient(100deg,#2a0a13,#1c150d 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:#b8a781;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:20px;
  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:#9c8b6e}
.f input,.f select,.f textarea{
  width:100%;padding:.85em 1em;border-radius:11px;
  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%,#9c8b6e 50%),
                   linear-gradient(135deg,#9c8b6e 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}
.check{display:flex;gap:.75em;align-items:flex-start;grid-column:1 / -1;
  padding:.9em 1em;border-radius:11px;background:rgba(196,18,48,.1);
  border:1px solid rgba(196,18,48,.32);font-size:.93rem;color:#eee0c4;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:20px;background:linear-gradient(165deg,#2a0a13,#1c150d 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:#b8a781}
.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:#9c8b6e}
.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:#9c8b6e;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:14px;
  background:#0e0e10;border:1px solid var(--line);color:#e8d6ca;
  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:18px;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(43,31,19,.15),rgba(43,31,19,.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:#d4c2b7}

.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:12px;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:8px;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:#9c8b6e;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:18px;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(43,31,19,.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:#d4c2b7}

.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(43,31,19,.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:14px;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:10px;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:#9c8b6e;margin-top:.2em}

/* --- Eingebettete Fremdsysteme (Verleih, Check-in, Tickets) --------------- */
.embed{
  position:relative;border-radius:20px;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:#b8a781;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)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding:5px;border-radius:99px;
  background:rgba(255,255,255,.07);margin-bottom:22px;width:max-content;max-width:100%}
.tabs button{padding:.7em 1.5em;border-radius:99px;font-size:.88rem;font-weight:500;
  color:#b8a781;white-space:nowrap;transition:color .4s var(--ease),background .4s var(--ease)}
.tabs button[aria-selected="true"]{background:#fff;color:var(--ink);font-weight:700}

/* --- Karte ---------------------------------------------------------------- */
.mapwrap{position:relative;border-radius:20px;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:#b8a781;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:18px;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 1.2s var(--ease)}
.newscard:hover .pic img{transform:scale(1.05)}
.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:#9c8b6e}
.newsmeta .tag{color:var(--red-lit);border:1px solid rgba(228,23,58,.4);
  border-radius:99px;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:#b8a781;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(26,18,10,.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:22px;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(43,31,19,.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:#d4c2b7;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:#d6c4b8;
}
.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(43,31,19,.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:40px;padding:0 8px 0 14px;
  border-radius:999px;color:#fff;flex:0 0 auto;
  background:linear-gradient(155deg,rgba(184,135,79,.16),rgba(184,135,79,.03));
  border:1px solid rgba(184,135,79,.3);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.suche-btn:hover{border-color:rgba(184,135,79,.55);background:linear-gradient(155deg,rgba(184,135,79,.24),rgba(184,135,79,.06))}
.suche-btn svg{width:17px;height:17px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8}
.suche-btn .suche-btn-label{font-size:.84rem;opacity:.9;white-space:nowrap}
.suche-btn .suche-btn-key{
  flex:0 0 auto;display:flex;align-items:center;gap:.2em;font-size:.68rem;
  color:var(--gold);border:1px solid rgba(184,135,79,.4);border-radius:6px;
  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(26,18,10,.82);
  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:26px;overflow:hidden;
  background:var(--ink-2);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 70px 140px -40px rgba(0,0,0,.85),0 0 0 1px rgba(184,135,79,.08),0 -50px 110px -60px rgba(184,135,79,.4);
  transform:translateY(-18px) scale(.98);transition:transform .5s var(--ease);
}
.suche-overlay.in .suche-panel{transform:none}
/* Kaminlicht-Aurora hinter dem Kopf -- derselbe leise Glanzlicht-Effekt wie
   auf den .dark-Sektionen, hier als eigene Ebene hinter Eingabe/Kopf. */
.suche-panel::before{
  content:"";position:absolute;top:0;left:50%;translate:-50% -55%;width:110%;height:260px;
  background:radial-gradient(ellipse at center,rgba(184,135,79,.13),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:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.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:#816f66;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:#66544a;font-weight:400}
.suche-kopf input:focus{outline:none}
.suche-esc{flex:0 0 auto;font-size:.72rem;color:#816f66;
  border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:.2em .55em}
.suche-ergebnisse{position:relative;z-index:1;overflow-y:auto;padding:10px}
.suche-leer{padding:34px 18px;text-align:center;color:#816f66;font-size:.94rem}
.suche-hinweis{padding:14px 12px 4px;color:#816f66;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}

.suche-item{
  display:block;width:100%;text-align:left;padding:12px 12px;border-radius:14px;
  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:#6e5c52}
.suche-item p{margin:0;font-size:.92rem;line-height:1.55;color:#d4c2b7}
.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:14px;
  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:14px;
  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:999px;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}
}