/* ==========================================================================
   Erweiterungsebene — wird nach app.css geladen.
   Enthaelt: kompaktes Standort-Band, Schneebericht,
   aufgewerteter Videoplayer, aufgewertete Buchungsseite.
   ========================================================================== */

/* --- Kompaktes Standort-Band (ganz unten auf den Unterseiten) ------------- */
.locstrip{border-top:1px solid var(--line);background:var(--ink);color:#fff}
.locstrip .in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,64px);
  align-items:center;padding-block:clamp(40px,5vw,72px)}
.locstrip h2{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1;margin-bottom:.8em}
.locstrip .rows{border-top:1px solid var(--line)}
.locstrip .row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:.72em 0;border-bottom:1px solid var(--line);font-size:.94rem}
.locstrip .row .k{color:#9c8b6e;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap}
.locstrip .row .v{color:#fff;text-align:right}
.locstrip .row a.v{transition:color .35s var(--ease)}
.locstrip .row a.v:hover{color:var(--red-lit)}
.locstrip .mapwrap{aspect-ratio:16/10;min-height:0;max-height:290px}
.locstrip .mapfacade{padding:18px}
.locstrip .mapfacade .pin{width:32px;height:32px;margin-bottom:.5em}
.locstrip .mapfacade b{font-size:1rem}
.locstrip .mapfacade p{font-size:.8rem;max-width:32ch}
.locstrip .mapfacade .btn{margin-top:.9em;padding:.8em 1.5em;font-size:.84rem}

/* --- Wegweiser-Hero (index.html, ganz oben): echtes, grosses Foto vom Haus
   ueber die volle Fensterbreite, mit klickbaren Punkten fuer Sport 2000/
   SPAR/Hotel Garni + Lift-Abstand — angelehnt an den Vollbreiten-Hero von
   sport-center-hotel-garni.at. Bewusst nur dieses eine Foto (kein
   Karussell mehr) — andere Aufnahmen (Freeride, Hotel im Winter) sind
   bereits an anderer Stelle der Seite im Einsatz (Ski-Action-Hero direkt
   darunter, Hotel-Bildergalerie weiter unten).

   Das Quellfoto (haus-aussenansicht.jpg) ist fest auf den Gebaeudeteil
   zugeschnitten (die zuvor sichtbare geraeumte, nasse Fahrbahn wurde beim
   Zuschneiden dauerhaft entfernt) — deshalb ist object-fit:cover in einem
   breiten, viewport-hohen Rahmen unbedenklich: es gibt unten nichts
   Unerwuenschtes mehr, das object-position freilegen koennte. */
.wegweiser-hero{position:relative;overflow:hidden;color:#fff;
  height:min(100svh,980px);min-height:620px;background:var(--ink)}
.wegweiser-media{position:absolute;inset:0}
.wegweiser-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:58% 42%;transform-origin:58% 42%}
/* Durchgehender, sehr langsamer Zoom nach vorne, wie bei einem klassischen
   Hero-Slider — kein Karussell mehr, aber trotzdem in Bewegung. Laeuft die
   ganze Zeit (nicht scroll-gebunden wie beim Ski-Action-Hero weiter unten),
   deshalb bewusst sehr langsam und mit alternate, damit es nie ruckartig
   auf den Ausgangswert zurueckspringt. */
@media (prefers-reduced-motion:no-preference){
  .wegweiser-media img{animation:wegweiser-zoom 24s ease-in-out infinite alternate}
}
@keyframes wegweiser-zoom{0%{transform:scale(1)}100%{transform:scale(1.13)}}
.wegweiser-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(180deg,rgba(15,11,8,.55) 0%,rgba(15,11,8,.12) 34%,rgba(15,11,8,.86) 100%),
    linear-gradient(90deg,rgba(15,11,8,.5) 0%,rgba(15,11,8,0) 60%);
}
.wegweiser-hero-in{position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(28px,5vh,64px)}

.wwpin,.wwbadge{z-index:4}

.wwpin{
  position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.55em;
  padding:.42em .85em .42em .5em;border-radius:99px;
  background:rgba(15,11,8,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);color:#fff;
  transition:background .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);
}
.wwpin:hover{background:var(--red);border-color:var(--red);transform:translate(-50%,-50%) scale(1.05)}
.wwpin .dot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--red-lit);flex:0 0 auto}
.wwpin .dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid var(--red-lit);opacity:0;transform:scale(.4);
  animation:wwpuls 2.4s var(--ease-io) infinite}
@keyframes wwpuls{0%{transform:scale(.4);opacity:.7}100%{transform:scale(2);opacity:0}}
.wwpin .lbl{font-size:.82rem;font-weight:700;line-height:1.25;white-space:nowrap}
.wwpin .lbl small{display:block;font-weight:400;font-size:.78em;color:rgba(255,255,255,.78)}
.wwbadge{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;background:var(--red);color:#fff;text-align:center;
  font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1;
  box-shadow:0 14px 30px -12px rgba(196,18,48,.6);
}
.wwbadge small{display:block;font-family:var(--text);font-weight:600;font-size:.55rem;
  letter-spacing:.04em;text-transform:uppercase;margin-top:.32em}

/* Positionen bewusst hier statt inline im HTML: so lassen sie sich fuer
   schmale Bildschirme sauber per Medienabfrage umsetzen, ohne mit der
   Spezifitaet von style="" kaempfen zu muessen. */
.wwpin-hotel{left:54%;top:20%}
.wwpin-sport{left:44%;top:38%}
.wwpin-spar{left:53%;top:38%}
.wwbadge-lift{left:89%;top:44%}

@media (max-width:640px){
  .wegweiser-hero{height:min(100svh,860px);min-height:620px}
  /* Text oben statt unten, und deutlich kompakter: bei schmaler Breite ist
     eine .d1-Ueberschrift plus Fliesstext relativ zur Bildhoehe so hoch,
     dass sie so oder so in die Punkte hineinragen wuerde (beide sitzen auf
     demselben Gebaeudeteil in der Bildmitte). Deshalb hier eine kleinere
     Ueberschrift, kein Fliesstext im Bild (der steht ohnehin nochmal
     ausgeschrieben in der Bildunterschrift direkt darunter, siehe HTML). */
  .wegweiser-hero-in{justify-content:flex-start;padding-top:calc(var(--nav-h) + 3vh);padding-bottom:0}
  .wegweiser-hero-in h2{font-size:clamp(2rem,9vw,2.6rem)}
  .wegweiser-hero-in .lead{display:none}
  .wwpin .lbl small{display:none}
  .wwpin{padding:.36em .68em .36em .46em}
  .wwpin .lbl{font-size:.72rem}
  .wwbadge{width:50px;height:50px;font-size:.85rem}
  /* Sport 2000 und SPAR liegen im Foto dicht nebeneinander — bei schmaler
     Bildbreite wuerden die zwei Pillen kollidieren. Deshalb hier
     uebereinander statt nebeneinander gestaffelt, und insgesamt tiefer, da
     die Sektion jetzt hoeher ist und der Text oben sitzt. */
  .wwpin-hotel{left:50%;top:66%}
  .wwpin-sport{left:38%;top:80%}
  .wwpin-spar{left:62%;top:87%}
  .wwbadge-lift{left:86%;top:70%}
  /* Der Fliesstext, der im Bild selbst keinen Platz mehr hat (siehe oben),
     steht hier stattdessen ganz normal im Textfluss darunter. */
  .wegweiser-caption{display:block!important;padding:20px var(--pad) 0;background:var(--ink);color:#b8a781}
}
@media (prefers-reduced-motion:reduce){.wwpin .dot::after{animation:none;opacity:0}}

/* --- Schneebericht -------------------------------------------------------- */
.snow{position:relative;border-radius:20px;overflow:hidden;background:var(--ink-2);
  border:1px solid var(--line);min-height:clamp(560px,80vh,940px);
  transition:border-color .6s var(--ease),box-shadow .6s var(--ease)}
.snow:hover{border-color:rgba(255,255,255,.24);box-shadow:0 40px 90px -60px rgba(0,0,0,.9)}
.snow iframe{display:block;width:100%;height:clamp(560px,80vh,940px);border:0;background:#fff}
.snow-facade{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:var(--pad);overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 0%,rgba(228,23,58,.13),transparent 62%),
    linear-gradient(180deg,#17171a,#0f0f11)}
.snow-facade .inner{position:relative;z-index:1;max-width:52ch}
.snow-facade .flake{display:block;width:60px;height:60px;margin:0 auto 1.1em;color:var(--red-lit);
  animation:drift 7s var(--ease-io) infinite}
.snow-facade .flake svg{width:100%;height:100%;fill:currentColor}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(24deg)}}
.snow-facade h3{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1;color:#fff}
.snow-facade p{margin-top:.9em;color:#b8a781;font-size:.96rem}
.snow-facade .btn{margin-top:1.8em}
/* leise rieselnde Punkte im Hintergrund */
.snow-facade .fall{position:absolute;inset:0;pointer-events:none;opacity:.5}
.snow-facade .fall i{position:absolute;top:-8px;width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.6);animation:fall linear infinite}
@keyframes fall{to{transform:translateY(calc(100% + 960px))}}

/* ==========================================================================
   Videoplayer
   ========================================================================== */
.vtek{grid-template-columns:1fr 340px;gap:clamp(18px,2.4vw,30px)}
.vstage{border-radius:22px;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)}

/* Standbild mit langsamem Zoom, damit es nicht tot wirkt */
.vstage .layer{position:absolute;inset:0;
  transition:opacity .55s var(--ease),transform .85s var(--ease)}
.vstage .layer img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);
  animation:kenburns 20s var(--ease-io) infinite alternate}
@keyframes kenburns{to{transform:scale(1.1)}}
.vstage.swap .layer{opacity:0;transform:scale(1.03)}
.vstage .shade{background:linear-gradient(180deg,
  rgba(15,11,8,.32) 0%,rgba(15,11,8,.04) 34%,rgba(15,11,8,.84) 100%)}

/* Abspielknopf mit pulsierendem Ring */
.vstage .play{left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(74px,7.4vw,98px);
  background:rgba(196,18,48,.94);
  box-shadow:0 22px 54px -16px rgba(196,18,48,.95)}
.vstage .play::before{content:"";position:absolute;inset:-15px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);animation:ring 2.8s var(--ease-io) infinite}
@keyframes ring{0%{transform:scale(.86);opacity:.9}70%,100%{transform:scale(1.28);opacity:0}}
.vstage:hover .play{transform:translate(-50%,-50%) scale(1.09);background:var(--red-lit)}
.vstage.swap .play{opacity:0;transition:opacity .3s var(--ease)}

/* Titel steigt beim Wechsel zeilenweise auf */
.vstage figcaption{padding:clamp(22px,2.6vw,38px)}
.vstage figcaption .mask{overflow:hidden;display:block;padding-block:.08em;margin-block:-.08em}
.vstage figcaption .mask i{display:block;font-style:normal;transform:translateY(0);
  transition:transform .75s var(--ease) .12s}
.vstage.swap figcaption .mask i{transform:translateY(112%)}
.vstage figcaption .meta{display:flex;align-items:center;gap:.85em;margin-top:.75em;
  font-size:.83rem;color:#c8c8cf;opacity:1;transition:opacity .5s var(--ease) .18s}
.vstage.swap figcaption .meta{opacity:0}
.vstage figcaption .num{font-family:var(--display);font-weight:700;color:var(--red-lit);
  letter-spacing:.08em}
.vstage figcaption .dot{width:4px;height:4px;border-radius:50%;background:#6a6a72}

/* Auswahlliste */
.vlist{gap:6px}
.vitem{position:relative;grid-template-columns:120px 1fr;gap:14px;padding:10px;overflow:hidden}
.vitem::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;
  background:var(--red-lit);transform:scaleY(0);transition:transform .55s var(--ease)}
.vitem[aria-current="true"]::before{transform:scaleY(1)}
.vitem[aria-current="true"]{background:rgba(196,18,48,.16)}
.vitem .thumb img{transition:transform 1s var(--ease)}
.vitem:hover .thumb img{transform:scale(1.09)}
.vitem .thumb::after{content:"";position:absolute;inset:0;background:rgba(15,11,8,.5);
  transition:opacity .5s var(--ease)}
.vitem[aria-current="true"] .thumb::after,.vitem:hover .thumb::after{opacity:0}
.vitem .idx{position:absolute;left:0;right:0;top:50%;translate:0 -50%;z-index:2;text-align:center;
  font-family:var(--display);font-weight:700;font-size:.84rem;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.85);transition:opacity .4s var(--ease)}
.vitem[aria-current="true"] .idx,.vitem:hover .idx{opacity:0}
.vitem b{transition:color .4s var(--ease)}
.vitem[aria-current="true"] b{color:#fff}
.vhint{margin-top:1em;font-size:.8rem;color:var(--grey)}

/* ==========================================================================
   Bildergalerie (gleiches Muster wie der Videoplayer, ohne Abspielknopf)
   ========================================================================== */
.gstage{border-radius:22px;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)}
.gstage img{transition:opacity .5s var(--ease);transform:scale(1.02);
  animation:kenburns 16s var(--ease-io) infinite alternate}
.gstage.swap img{opacity:0}
/* Kleiner Puls beim Ankommen nach dem Hochscrollen von einer Kachel weiter
   unten — bestaetigt "hier bist du", ohne den festen Tiefen-Schatten zu
   verlieren (beide zusammen in denselben Keyframes, sonst wuerde der eine
   den anderen beim Animieren kurz verdraengen). */
@keyframes buehnePuls{
  0%{box-shadow:0 40px 90px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06),0 0 0 0 rgba(196,18,48,.55)}
  100%{box-shadow:0 40px 90px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06),0 0 0 24px rgba(196,18,48,0)}
}
.gstage.angekommen{animation:buehnePuls .9s var(--ease) 1}
.gstage .shade{background:linear-gradient(180deg,
  rgba(15,11,8,.15) 0%,rgba(15,11,8,.04) 34%,rgba(15,11,8,.82) 100%)}
.gstage figcaption .mask{overflow:hidden;display:block;padding-block:.08em;margin-block:-.08em}
.gstage figcaption .mask i{display:block;font-style:normal;transform:translateY(0);
  transition:transform .75s var(--ease) .12s}
.gstage.swap figcaption .mask i{transform:translateY(112%)}
.gstage figcaption .meta{display:flex;align-items:center;gap:.85em;margin-top:.75em;
  font-size:.83rem;color:#c8c8cf;opacity:1;transition:opacity .5s var(--ease) .18s}
.gstage.swap figcaption .meta{opacity:0}
.gstage figcaption .num{font-family:var(--display);font-weight:700;color:var(--red-lit);
  letter-spacing:.08em}
.gstage figcaption .dot{width:4px;height:4px;border-radius:50%;background:#6a6a72}

.gitem{position:relative;transition:transform .3s var(--ease)}
.gitem:hover{transform:translateY(-4px)}
.gitem:active{transform:translateY(-1px) scale(.96);transition-duration:.15s}
.gitem .thumb{transition:box-shadow .4s var(--ease)}
.gitem .thumb img{transition:transform 1s var(--ease)}
.gitem:hover .thumb img{transform:scale(1.08)}
.gitem[aria-current="true"] .thumb{box-shadow:0 0 0 2.5px var(--red-lit)}

/* Gruppen-Ueberschriften im Raster, ueber die volle Breite */
.glist-head{
  grid-column:1 / -1;display:flex;align-items:center;gap:.7em;
  margin:8px 0 -2px;color:#9c8b6e;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
}
.glist-head::before{content:"";width:20px;height:1.5px;background:var(--red-lit);flex:0 0 auto}
.glist-head:first-child{margin-top:0}
.gitem .idx{position:absolute;left:8px;top:8px;z-index:2;
  font-family:var(--display);font-weight:700;font-size:.72rem;color:#fff;
  background:rgba(15,11,8,.6);border-radius:6px;padding:.2em .5em;
  text-shadow:0 1px 6px rgba(0,0,0,.85);transition:opacity .4s var(--ease)}
.gitem[aria-current="true"] .idx{opacity:0}
.gitem b{transition:color .4s var(--ease)}
.gitem[aria-current="true"] b{color:var(--red-lit)}

/* ==========================================================================
   Buchungsseite
   ========================================================================== */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.flowstep{position:relative;padding:clamp(22px,2.4vw,32px);border-radius:16px;
  background:var(--ink-2);border:1px solid var(--line);overflow:hidden;
  transition:transform .7s var(--ease),border-color .5s var(--ease)}
.flowstep::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(70% 60% at 50% 0%,rgba(228,23,58,.16),transparent 70%);
  transition:opacity .6s var(--ease)}
.flowstep:hover{transform:translateY(-5px);border-color:rgba(228,23,58,.4)}
.flowstep:hover::after{opacity:1}
.flowstep .n{position:relative;z-index:1;font-family:var(--display);font-weight:700;
  font-size:2.7rem;line-height:.85;color:transparent;
  -webkit-text-stroke:1.4px rgba(228,23,58,.8);transition:color .6s var(--ease)}
.flowstep:hover .n{color:rgba(228,23,58,.2)}
.flowstep h3{position:relative;z-index:1;margin:.6em 0 .4em;font-family:var(--display);
  font-weight:700;text-transform:uppercase;font-size:1.15rem;line-height:1.05;color:#fff}
.flowstep p{position:relative;z-index:1;font-size:.92rem;line-height:1.6;color:#b8a781}

/* Reiter mit gleitendem Hintergrund */
.tabs{position:relative;isolation:isolate}
/* Folgt beiden Achsen, damit er auch bei umbrechenden Reitern richtig sitzt */
.tabs .glider{position:absolute;top:0;left:0;width:0;height:0;border-radius:99px;
  background:#fff;z-index:0;
  transition:transform .6s var(--ease),width .6s var(--ease),height .6s var(--ease)}
.tabs button{position:relative;z-index:1}
.tabs button[aria-selected="true"]{background:transparent;color:var(--ink);font-weight:700}

/* Panelwechsel */
[data-panel]:not([hidden]){animation:panelIn .6s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Kachel vor dem Laden */
.embed{transition:border-color .6s var(--ease),box-shadow .6s var(--ease)}
.embed:hover{border-color:rgba(255,255,255,.24);box-shadow:0 40px 90px -60px rgba(0,0,0,.9)}
.embed-facade{overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% 0%,rgba(228,23,58,.14),transparent 60%),
    linear-gradient(180deg,#17171a,#101012)}
.embed-facade::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.07) 50%,transparent 62%);
  transform:translateX(-100%);animation:sheen 5.5s var(--ease-io) infinite}
@keyframes sheen{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.embed-facade .inner{position:relative;z-index:1}
.embed-facade .ico{width:66px;height:66px;margin:0 auto 1.2em;border-radius:19px;
  display:grid;place-items:center;background:rgba(196,18,48,.16);
  border:1px solid rgba(228,23,58,.42);color:var(--red-lit);
  transition:transform .6s var(--ease),background .5s var(--ease)}
.embed:hover .embed-facade .ico{transform:translateY(-5px) rotate(-5deg);
  background:rgba(196,18,48,.28)}
.embed-facade .ico svg{width:29px;height:29px;fill:currentColor}

/* --- Ski-Arlberg-Kachel: eigenstaendiger, kraeftigerer Auftritt ----------
   statt der generischen dunklen Kachel der beiden Wintersteiger-Systeme —
   Vollbild-Foto, grosse Kennzahlen, breite Balkenschrift. */
.embed-facade.arlberg{background:none}
.arlberg-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 62%}
/* Der Text sitzt mittig (geerbt von .embed-facade{place-items:center}), darum
   dunkelt eine Radial-Vorlage genau dort ab, wo die Schrift steht — eine
   reine Vertikal-/Seitenblende liess Kennzahlen und Fliesstext bei hellen
   Fotos (Schnee, Himmel) zu oft untergehen. Zusaetzlich Schlagschatten auf
   jeder Textzeile, unabhaengig vom jeweiligen Motiv an der Stelle. */
.embed-facade.arlberg::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(62% 62% at 50% 46%,rgba(8,8,9,.9) 0%,rgba(8,8,9,.72) 55%,rgba(8,8,9,.48) 100%),
    linear-gradient(180deg,rgba(15,11,8,.48) 0%,rgba(15,11,8,.55) 40%,rgba(15,11,8,.94) 100%)}
.embed-facade.arlberg::after{mix-blend-mode:overlay;opacity:.7}
.arlberg-brand{font-family:var(--display);font-weight:700;letter-spacing:.16em;
  font-size:.85rem;color:var(--red-lit);margin-bottom:.9em;
  text-shadow:0 2px 14px rgba(0,0,0,.85)}
.embed-facade.arlberg h3{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.02;
  text-shadow:0 4px 30px rgba(0,0,0,.75)}
.arlberg-stats{display:flex;gap:clamp(20px,3vw,40px);margin:1.3em 0 .2em}
.arlberg-stats b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.8)}
.arlberg-stats span{display:block;margin-top:.4em;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:#dcdce0;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.embed-facade.arlberg p{color:#e4e4e8;text-shadow:0 1px 12px rgba(0,0,0,.85)}

/* --- Dokument-Karte, z. B. offizielle PDF-Preislisten zum Herunterladen --
   dunkle Karte mit Absicht, auch in hellen Abschnitten: gleiches Prinzip
   wie .brandcard.hi auf spar.html, hebt sich bewusst vom Hintergrund ab. */
.pdfcard{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:20px 24px;border-radius:16px;background:var(--ink-2);border:1px solid var(--line);
  transition:border-color .5s var(--ease),background .5s var(--ease),transform .5s var(--ease)}
.pdfcard:hover{border-color:rgba(255,255,255,.24);background:var(--ink-3);transform:translateY(-3px)}
.pdfcard-ico{flex:0 0 auto;width:50px;height:50px;border-radius:13px;
  display:grid;place-items:center;background:rgba(196,18,48,.16);
  border:1px solid rgba(228,23,58,.42);color:var(--red-lit)}
.pdfcard-ico svg{width:23px;height:23px}
.pdfcard-txt{flex:1 1 260px;min-width:0}
.pdfcard-txt b{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;color:#fff}
.pdfcard-txt span{display:block;margin-top:.35em;font-size:.86rem;color:#b8a781;line-height:1.55}
.pdfcard .btn{flex:0 0 auto}
/* Der Ghost-Knopf braucht die "auf Dunkel"-Farbgebung immer, unabhaengig
   vom umgebenden hellen oder dunklen Abschnitt — die Karte selbst ist ja
   immer dunkel. .btn-ghost ohne .dark-Vorfahren nimmt sonst den hellen
   Standard (fast schwarzer Text, kaum sichtbarer Rahmen): auf der dunklen
   Karte praktisch unsichtbar und wirkte dadurch "nicht anklickbar". */
.pdfcard .btn-ghost{--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26)}
.pdfcard .btn-ghost::before{background:#fff}
.pdfcard .btn-ghost:hover{--fg:var(--ink);box-shadow:inset 0 0 0 1.5px transparent}
@media (max-width:560px){.pdfcard{padding:18px}.pdfcard .btn{width:100%;justify-content:center}}

/* Ladeanzeige, solange der fremde Rahmen laedt */
.embed .loading{position:absolute;inset:0;display:grid;place-items:center;
  background:var(--ink-2);z-index:2;transition:opacity .5s var(--ease)}
.embed .loading.off{opacity:0;pointer-events:none}
.embed .loading .bar{width:190px;height:3px;border-radius:3px;
  background:rgba(255,255,255,.12);overflow:hidden}
.embed .loading .bar i{display:block;height:100%;width:38%;border-radius:3px;
  background:var(--red-lit);animation:slide 1.15s var(--ease-io) infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
.embed .loading p{margin-top:1.1em;font-size:.84rem;color:#9c8b6e;text-align:center}

/* ==========================================================================
   Gestapelte Vollbild-Abschnitte (Startseite)

   Der bekannte Apple-Kniff: der naechste Abschnitt zieht sich als Vorhang
   ueber den vorherigen, der bis dahin bewegungslos an Ort und Stelle bleibt.
   Reine CSS-Loesung (position:sticky) — .bleed selbst bleibt auf allen
   anderen Seiten unveraendert, der Effekt gilt nur innerhalb von .pin-outer.
   ========================================================================== */
.pin-outer{position:relative;height:175vh}
.pin-outer .bleed{position:sticky;top:0;height:100vh;min-height:0}

.rise-panel{position:relative;z-index:1;border-radius:32px 32px 0 0;
  box-shadow:0 -70px 100px -50px rgba(0,0,0,.4)}
.rise-panel.dark{box-shadow:0 -70px 100px -50px rgba(0,0,0,.7)}
.rise-panel:not(.dark){background:var(--paper)}

@media (max-width:1000px){
  .locstrip .in{grid-template-columns:1fr}
  .locstrip .mapwrap{max-height:250px}
  .vtek{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  /* Der Vorhang-Effekt braucht Platz zum Wirken — auf schmalen Bildschirmen
     wird ohnehin viel gescrollt, da stoert das Anheften mehr, als es hilft. */
  .pin-outer{height:auto}
  .pin-outer .bleed{position:relative;top:0;height:min(88vh,880px)}
  .rise-panel{border-radius:0;box-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  .vstage .layer img,.snow-facade .flake,.snow-facade .fall i,
  .embed-facade::after,.vstage .play::before,.embed .loading .bar i{animation:none !important}
  [data-panel]:not([hidden]){animation:none}
  .vstage.swap .layer{opacity:1;transform:none}
  .vstage.swap figcaption .mask i{transform:none}
  .gstage img{animation:none !important}
  .gstage.swap img{opacity:1}
  .gstage.swap figcaption .mask i{transform:none}
  .gstage.angekommen{animation:none}
  .gitem{transition:none}
  .pin-outer{height:auto}
  .pin-outer .bleed{position:relative;top:0;height:min(88vh,880px)}
  .rise-panel{border-radius:0;box-shadow:none}
}

/* --- Frag-Assistent, schwebend (assets/js/assistent.js) ------------------- */
.bot-knopf{
  position:fixed;right:20px;bottom:92px;z-index:150;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;border:none;
  box-shadow:0 16px 34px -12px rgba(196,18,48,.7);
  transform:scale(0);transition:transform .5s var(--ease) .1s,box-shadow .3s var(--ease),background .3s var(--ease);
}
.bot-knopf.in{transform:scale(1)}
.bot-knopf:hover{background:var(--red-lit);box-shadow:0 20px 40px -10px rgba(196,18,48,.8)}
.bot-knopf svg{width:26px;height:26px}
.bot-knopf .i-chat{display:block}
.bot-knopf .i-schliessen{display:none}
.bot-knopf.offen .i-chat{display:none}
.bot-knopf.offen .i-schliessen{display:block}

.bot-panel{
  position:fixed;right:20px;bottom:160px;z-index:151;
  width:min(360px,calc(100vw - 40px));height:min(520px,calc(100vh - 200px));
  display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:var(--ink-2);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:bottom right;
  transition:opacity .35s var(--ease),visibility .35s,transform .35s var(--ease);
}
.bot-panel.in{opacity:1;visibility:visible;transform:none}
.bot-kopf{
  display:flex;align-items:center;gap:.7em;padding:16px 18px;flex:0 0 auto;
  background:var(--red);color:#fff;
}
.bot-kopf b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.92rem}
.bot-kopf span{display:block;font-size:.74rem;color:rgba(255,255,255,.8)}
.bot-verlauf{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.bot-msg{max-width:86%;padding:.7em .95em;border-radius:14px;font-size:.9rem;line-height:1.5}
.bot-msg.bot{align-self:flex-start;background:rgba(255,255,255,.06);color:#e4e4e8;border-bottom-left-radius:4px}
.bot-msg.nutzer{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:4px}
.bot-msg a.tlink{display:inline-flex;margin-top:.5em;font-size:.86rem;color:var(--red-lit)}
.bot-msg a.tlink:hover{color:#fff}
.bot-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px;flex:0 0 auto}
.bot-chip{
  padding:.5em .85em;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  color:#c2c2c9;font-size:.8rem;transition:border-color .3s var(--ease),color .3s var(--ease);
}
.bot-chip:hover{border-color:rgba(255,255,255,.3);color:#fff}
.bot-eingabe{
  display:flex;gap:8px;padding:14px;border-top:1px solid rgba(255,255,255,.08);flex:0 0 auto;
}
.bot-eingabe input{
  flex:1 1 auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:.7em .9em;color:#fff;font-family:var(--text);font-size:.9rem;min-width:0;
}
.bot-eingabe input::placeholder{color:#6f6f78}
.bot-eingabe input:focus{outline:none;border-color:rgba(255,255,255,.3)}
.bot-eingabe button{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease);
}
.bot-eingabe button:hover{background:var(--red-lit)}
.bot-eingabe button svg{width:17px;height:17px}
@media (max-width:480px){
  .bot-panel{right:12px;bottom:150px;width:calc(100vw - 24px)}
  .bot-knopf,.wa-knopf{right:14px}
}
@media (prefers-reduced-motion:reduce){.bot-panel,.bot-knopf{transition:opacity .15s linear}}

/* --- WhatsApp-Knopf, schwebend (assets/js/whatsapp.js) -------------------- */
.wa-knopf{
  position:fixed;right:20px;bottom:20px;z-index:150;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25d366;color:#fff;box-shadow:0 16px 34px -12px rgba(0,0,0,.55);
  transform:scale(0);transition:transform .5s var(--ease),box-shadow .3s var(--ease);
}
.wa-knopf.in{transform:scale(1)}
.wa-knopf:hover{box-shadow:0 20px 40px -10px rgba(0,0,0,.65);transform:scale(1.06)}
.wa-knopf svg{width:29px;height:29px;fill:currentColor}
.wa-knopf::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;
  opacity:.55;animation:wa-puls 2.6s var(--ease-io) infinite;
}
@media (prefers-reduced-motion:reduce){.wa-knopf::before{animation:none}}
@keyframes wa-puls{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}}

/* --- Eigenes Rechtsklick-Menue (assets/js/contextmenu.js) ------------------ */
.ctxmenu{
  position:fixed;z-index:999;min-width:230px;padding:6px;border-radius:14px;
  background:rgba(18,18,20,.96);backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
  opacity:0;transform:scale(.96);transform-origin:top left;
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.ctxmenu.in{opacity:1;transform:none}
.ctxmenu ul{list-style:none;margin:0;padding:0}
.ctxmenu button{
  display:block;width:100%;text-align:left;padding:.62em .8em;border-radius:9px;
  color:#e4e4e8;font-family:var(--text);font-size:.88rem;font-weight:500;
  background:transparent;border:none;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.ctxmenu button:hover,.ctxmenu button:focus-visible{background:var(--red);color:#fff;outline:none}
.ctxmenu button.ctxmenu-klein{color:#9a9aa2;font-size:.8rem}
.ctxmenu button.ctxmenu-klein:hover{color:#fff}
.ctxmenu-sep{height:1px;margin:6px 4px;background:rgba(255,255,255,.1)}
@media (prefers-reduced-motion:reduce){
  .ctxmenu{transition:opacity .12s linear}
  .ctxmenu.in{transform:none}
}