/* ==========================================================================
   DAVVI – Website nach Figma „26-8039-DVV-IN26 – R-00 DEV“
   Alle Maße, Schriften, Abstände kommen aus tokens.css (Figma-Variablentabelle, Modi PC/TAB/PHN).
   Hier nur Layout und Komponenten.

   Responsive-System laut Figma-Kommentaren (Stand 13.10.2026):
   - Drei Hauptzustände: PC (ab 900 px), TAB (600–899 px), PHN (unter 600 px).
   - Fast alle Objekte folgen einem ELASTISCHEN 12-Spalten-Raster (PHN: 6 Spalten),
     keine festen Objektgrößen je Zustand.
   - Bis 2500 px Viewport-Breite frei skalierend, darüber wird die Gestaltungsfläche
     fixiert und die Ränder werden schwarz.
   ========================================================================== */

:root {
  --line: rgba(255, 255, 255, .35);
  --menu-h: 150px;
  --max-w: 2500px;
  /* Elastisches Raster: eine Spalte bzw. ein Spaltenschritt (Spalte + Gutter).
     Prozentwerte beziehen sich auf die volle Breite des jeweiligen Containers. */
  --col: calc((100% - 2 * var(--margin) - (var(--columns) - 1) * var(--gutter)) / var(--columns));
  --step: calc(var(--col) + var(--gutter));
}
@media (max-width: 599.98px) { :root { --menu-h: 130px; } }

/* BASE ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--schwarz); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  max-width: var(--max-w); margin: 0 auto; overflow-x: clip;
  background: var(--dark-grey); color: var(--weiss);
  font-family: var(--f-body); font-weight: 200;
  font-size: var(--t-std); line-height: var(--t-std-lh); letter-spacing: var(--t-std-ls);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--hblau); outline-offset: 3px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--dark-water); color: #fff;
  padding: 10px 16px; font: 300 var(--t-caps)/var(--t-caps-lh) var(--f-caps); text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 12px; }

.hl-l, .hl-m, .hl-s { font-family: var(--f-head); text-transform: uppercase; }
.hl-l { font-weight: 200; font-size: var(--h-l); line-height: var(--h-l-lh); letter-spacing: var(--h-l-ls); }
.hl-m { font-weight: 200; font-size: var(--h-m); line-height: var(--h-m-lh); letter-spacing: var(--h-m-ls); }
.hl-s { font-weight: 300; font-size: var(--h-s); line-height: var(--h-s-lh); letter-spacing: var(--h-s-ls); }

/* Umschalter für Zeilenumbrüche/Wörter je Zustand */
.phn { display: none; }

/* BUTTON (BTN STD) ------------------------------------------------------
   Pille 3 px eingerückt; Hover (laut Komponente): Fläche wächst auf volle Größe, deckend */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: 10px 20px 12px; text-decoration: none; white-space: nowrap; color: var(--schwarz);
  font: 300 var(--t-caps)/var(--t-caps-lh) var(--f-caps); letter-spacing: var(--t-caps-ls); text-transform: uppercase;
}
.btn::before { content: ""; position: absolute; inset: 3px; border-radius: 30px; background: var(--weiss); opacity: .8;
  transition: inset .2s ease, opacity .2s ease; }
.btn > span { position: relative; }
.btn:hover::before, .btn:focus-visible::before { inset: 0; opacity: 1; }
.btn--dark { color: var(--weiss); }
.btn--dark::before { background: var(--schwarz); opacity: 1; }
.btn--dark > span { opacity: .8; transition: opacity .2s ease; }
.btn--dark:hover > span, .btn--dark:focus-visible > span { opacity: 1; }

/* Linien in Textboxen: Standard = FILL (passt sich der Boxhöhe an) */
.line { flex: 1 1 0; width: 1px; min-height: 30px; background: var(--line); }
.line--fix30  { flex: none; height: 30px;  min-height: 0; }
.line--fix50  { flex: none; height: 50px;  min-height: 0; }
.line--fix100 { flex: none; height: 100px; min-height: 0; }
.line--fill30 { flex: 1 0 30px; min-height: 30px; }

/* HERO (DVV Hero HOME) -------------------------------------------------
   Startview passt sich nach unten an den Viewport an: Hero + Menü-Panel = Viewporthöhe (PC/TAB),
   im PHN füllt der Hero allein den Viewport. */
.hero { position: relative; height: calc(100vh - var(--menu-h)); height: calc(100svh - var(--menu-h));
  min-height: 460px; overflow: hidden; color: var(--weiss); background: var(--schwarz); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__logo { position: absolute; left: 55px; top: 46px; display: block; width: 110px; height: auto;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, .2)); }   /* Schatten: Lesbarkeit auf hellen Bildern */
.hero__logo img { display: block; width: 100%; height: auto; }
.hero__title {
  position: absolute; left: calc(45.83% - 309.58px); bottom: 90px;
  font-family: var(--f-head); font-weight: 200; text-transform: uppercase; white-space: nowrap;
  font-size: var(--h-xl); line-height: var(--h-xl-lh); letter-spacing: var(--h-xl-ls);
  text-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.hero__l1, .hero__l2 { display: block; }
.hero__l2 { padding-left: 2.95em; }
.hero__progress { position: absolute; bottom: 40px; left: calc(16.67% + 27.33px); right: calc(16.67% + 27.33px);
  height: 2px; background: rgba(255, 255, 255, .4); }
.hero__progress::after { content: ""; position: absolute; inset: 0; background: #fff;
  transform-origin: left; transform: scaleX(var(--hero-p, .25)); }

/* Hero-Slider (Engine: vendor/davvi-slider). Die Ebenen liegen unter Logo, Headline und Balken. */
.hero .layers, .hero .slide-layer { position: absolute; inset: 0; }
.hero .slide-layer { overflow: hidden; opacity: 0; }
.hero .slide-layer img { position: absolute; max-width: none; transform-origin: 0 0; will-change: transform;
  user-select: none; pointer-events: none; }
.hero__logo, .hero__title, .hero__progress { z-index: 2; }
/* Pause-Taste (Barrierefreiheit): unsichtbar, erscheint bei Tastaturfokus über dem Balken */
.hero__pause { position: absolute; z-index: 3; right: 24px; bottom: 26px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.7);
  background: transparent; color: #fff; font: inherit; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  opacity: 0; pointer-events: none; }
.hero__pause:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid #fff; outline-offset: 3px; }

/* MENÜ-PANEL (HM V1 Menü-Panel) -----------------------------------------
   Läuft beim Scrollen mit aus dem Bild. Bei Umkehr der Scrollrichtung kehrt es als Header zurück,
   ergänzt um HOME (Bildmarke). Unterseiten zeigen HOME immer, der aktive Punkt ist hervorgehoben. */
.menu-slot { position: relative; z-index: 60; height: var(--menu-h); }
.menu { position: relative; height: var(--menu-h); background: var(--dark-grey);
  display: flex; align-items: center; justify-content: center; }
.menu.is-fixed { position: fixed; top: 0; left: 0; right: 0; max-width: var(--max-w); margin: 0 auto;
  transform: translateY(-100%); transition: transform .4s ease; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .55); }
.menu.is-fixed.is-shown { transform: none; }
.menu__block { display: flex; align-items: center; justify-content: center; gap: 10px; }
.menu__list { display: contents; }
.menu__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  height: 90px; padding: 0 15px; text-decoration: none; color: var(--weiss);
}
.menu__btn::before, .menu__btn::after { content: ""; flex: 1 1 0; width: 1px; background: rgba(255, 255, 255, .25); }
.menu__btn span {
  text-align: center; white-space: nowrap; opacity: .6; transition: opacity .2s;
  font: 300 15px/16px var(--f-head); letter-spacing: 1.8px; text-transform: uppercase;
}
.menu__btn:hover span, .menu__btn:focus-visible span, .menu__btn.is-active span, .menu__btn[aria-current="page"] span {
  opacity: 1; font-weight: 400; letter-spacing: 1.5px;
}
.menu__btn:hover::before, .menu__btn:hover::after,
.menu__btn[aria-current="page"]::before, .menu__btn[aria-current="page"]::after { background: rgba(255, 255, 255, .7); }

/* HOME-Button (Bildmarke kompakt): auf der Startseite nur im zurückkehrenden Header */
.menu__home { display: none; gap: 0; }
.menu.is-fixed .menu__home, .menu--sub .menu__home { display: flex; }
/* HOME als Textpunkt nur in der aufgeklappten PHN-Liste */
.menu__btn.menu__list-home { display: none; }
.menu__home img { width: 80px; height: 34px; margin: 4px 0 10px; object-fit: contain; opacity: .45; transition: opacity .2s; }
.menu__home:hover img, .menu__home:focus-visible img { opacity: 1; }

/* Burger (nur PHN) */
.menu__burger { display: none; }
.burger { position: relative; display: block; padding: 11px 20px; opacity: .7; transition: opacity .2s; }
.burger::before { content: ""; position: absolute; inset: 3px; border: 1px solid #fff; border-radius: 30px; opacity: .6; transition: inset .2s, opacity .2s; }
.burger i { position: relative; display: block; width: 23px; height: 23px; }
.burger i::before, .burger i::after, .burger i { background: linear-gradient(#fff, #fff) center / 19px 2px no-repeat; }
.burger i::before, .burger i::after { content: ""; position: absolute; inset: 0; transition: background-size .2s, transform .2s; }
.burger i::before { transform: translateY(-6.5px); }
.burger i::after  { transform: translateY(6.5px); }
.menu__burger:hover .burger, .menu__burger:focus-visible .burger { opacity: 1; }
.menu__burger:hover .burger::before, .menu__burger:focus-visible .burger::before { inset: 0; opacity: 1; }
.menu__burger:hover .burger i, .menu__burger:hover .burger i::before, .menu__burger:hover .burger i::after { background-size: 23px 3px; }
.menu__burger:hover .burger i::before { transform: translateY(-8px); }
.menu__burger:hover .burger i::after  { transform: translateY(8px); }

/* BOOKING-WIDGET 01: Container für das Lodgify-Widget (Platzhaltertext wie im Figma) */
.booking { height: 100px; padding: 0 calc(8.33% + 33.67px) 0 calc(8.33% + 34.67px); display: flex; background: var(--dark-grey);
  scroll-margin-top: var(--menu-h); }
.booking--spaced { height: 200px; padding-top: var(--section-o); }
.booking__pill {
  flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--weiss); color: var(--schwarz); border-radius: 150px; text-align: center;
  font: 300 var(--t-caps)/var(--t-caps-lh) var(--f-caps); letter-spacing: var(--t-caps-ls); text-transform: uppercase;
}
.booking--spaced .booking__pill { height: 100px; flex: 1 1 auto; }

/* SECTION MAP GLOBAL ------------------------------------------------------ */
.map { display: flex; align-items: center; justify-content: center; gap: 60px; padding: var(--section-o) var(--margin) var(--section-u); }
.map img { flex: none; width: 240px; height: 300px; object-fit: cover; }
.map p { text-align: center; white-space: nowrap; }

/* HOME PANELS (UG-VLF Block OU + Home Panel 01–04) --------------------------- */
.panels { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; }
/* UG-VLF Block OU: schwarze Fläche mit verlaufenden Übergängen verdichtet den 4er-Bildblock */
.panels::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .75;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 300px, #000 calc(100% - 300px), rgba(0, 0, 0, 0) 100%); }
.panel { position: relative; height: 600px; scroll-margin-top: var(--menu-h); }
.panel--tall { height: 1000px; }
.panel__content { position: absolute; inset: 0; }
.panel--l .panel__content { right: calc(var(--margin) + 2 * var(--step)); }   /* rechte Bildkante folgt dem Raster */
.panel--r .panel__content { left: calc(var(--margin) + var(--step)); }
.panel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Textbox L: Breite richtet sich nach Headline bzw. Button (überlagert nur so viel Bild wie nötig) */
.tb {
  position: absolute; top: 0; bottom: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 15px;
  width: max-content; padding: var(--box-l-pad-o) var(--box-l-pad-r) var(--box-l-pad-u) var(--box-l-pad-l);
  text-align: center; overflow: hidden; isolation: isolate; color: var(--weiss);
}
.panel--r .tb { right: auto; left: 0; }
.tb::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.tb--water::before { background: var(--dark-water); opacity: .8; }
.tb--berry::before { background: var(--cloud-berry); opacity: .9; }
.tb--ice::before   { background: var(--hblau); opacity: .9; }
.tb--ice { color: var(--schwarz); }
.tb--ice .line { background: rgba(0, 0, 0, .35); }
.tb--free { right: auto; left: calc(75% - 17px); transform: translateX(-50%); }
.tb--free::before { display: none; }
.tb__hl { font-family: var(--f-head); font-weight: 200; text-transform: uppercase; white-space: nowrap;
  font-size: var(--h-m); line-height: var(--h-m-lh); letter-spacing: var(--h-m-ls); }
.tb__txt, .tb > p:not([class]) { width: min-content; min-width: 100%; }

/* TEXTBOXEN UNTER DEN PANELS (3er-Boxen-Panel) ----------------------------
   Umbruch, sobald eine Box schmaler als 280 px würde; die Boxen einer Reihe sind gleich hoch,
   die untere Linie füllt auf. */
.facts { display: flex; flex-wrap: wrap; gap: var(--gutter);
  margin: 200px calc(var(--margin) + var(--step)) var(--section-u); }
.fact { flex: 1 1 280px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: var(--box-l-pad-o) var(--box-l-pad-r) var(--box-l-pad-u) var(--box-l-pad-l); text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)); }
.fact .hl-s, .fact p { width: 100%; }
.fact p { font-size: var(--t-s); line-height: var(--t-s-lh); letter-spacing: var(--t-s-ls); }

/* FOOTER (FOOTER Desktop komplett) -------------------------------------------
   Verlauf 400 px ins Weiß, darunter die Hauptzone. Desktop: Bildbereich skaliert proportional (2 : 1),
   Logo und Buttons in der rechten Hälfte. */
.footer { position: relative; }
.footer__fade { height: 400px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); }
.footer__main { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: #fff; }
/* Bild mit Verlaufskante: oben weich ins Weiß */
.footer__img { position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 40%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 40%); }
.footer__img img { width: 100%; height: 100%; object-fit: cover; }
.footer__inner { position: absolute; top: 0; bottom: 0; left: calc(50% + 5px); right: 0; display: flex; flex-direction: column; gap: 140px; }
.footer__logo { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.footer__logo img { width: 142px; height: auto; }
.footer__btns { flex: 1 1 0; min-height: 0; position: relative; }
.footer__links { position: absolute; left: 50%; bottom: 39.5px; transform: translateX(-50%); display: flex; gap: var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu.is-fixed, .btn::before, .burger, .burger::before { transition: none; }
}

/* ==========================================================================
   TAB  (600–899 px, Figma-Frame 710)
   ========================================================================== */
@media (max-width: 899.98px) {
  /* Hero */
  .hero__title { left: calc(50% - 250px); bottom: 92px; font-size: var(--h-l); line-height: var(--h-l-lh); letter-spacing: var(--h-l-ls); }
  .hero__l2 { padding-left: 3.1em; }
  .hero__progress { left: calc(16.67% + 26.67px); right: calc(16.67% + 26.67px); }

  /* Menü: Ausnahme im TAB – abweichende Schrift, damit das ganze Panel ohne Burger passt */
  .menu__btn { padding: 0 clamp(6px, 1.6vw, 15px); }
  .menu__btn span { font: 400 18px/21px var(--f-menu); letter-spacing: 1.08px; }
  .menu__btn:hover span, .menu__btn:focus-visible span, .menu__btn.is-active span, .menu__btn[aria-current="page"] span {
    font-weight: 400; letter-spacing: 1.08px; }
  .menu__home img { width: 64px; }

  /* Map */
  .map { flex-direction: column; gap: 20px; }
  .map img { width: 160px; height: 200px; }

  /* Panels: andere Höhen, Bild endet eine Spalte vor dem Rand, Textbox mit Headline S + Fließtext S */
  .panel { height: 450px; }
  .panel--tall { height: 800px; }
  .panel--l .panel__content { right: calc(var(--margin) + var(--step)); }
  .tb__hl { font-weight: 300; font-size: var(--h-s); line-height: var(--h-s-lh); letter-spacing: var(--h-s-ls); }
  .tb__txt { font-size: var(--t-s); line-height: var(--t-s-lh); letter-spacing: var(--t-s-ls); }

  /* Textboxen: zwei Spalten Einzug je Seite → Boxen stehen untereinander */
  .facts { margin: 150px calc(var(--margin) + 2 * var(--step)) var(--section-u); }

  /* Footer Mobile: anderes Bild, Höhe bleibt stabil, das Bild schiebt sich nur zusammen */
  .footer__main { aspect-ratio: auto; height: 700px; }
  .footer__inner { left: 30px; right: 30px; }
  .footer__logo img { width: 118px; }
  .footer__links { bottom: 40px; }

}

/* ==========================================================================
   PHN  (unter 600 px, Figma-Frame 360)
   ========================================================================== */
@media (max-width: 599.98px) {
  .phn { display: inline; }
  .no-phn { display: none; }

  /* Hero füllt den Viewport, Logo und Headline zentriert */
  .hero { height: 100vh; height: 100svh; min-height: 520px; }
  .hero__logo { left: 50%; transform: translateX(-50%); }
  .hero__title { left: 50%; bottom: 80px; transform: translateX(-50%); width: min(324px, calc(100% - 36px));
    text-align: center; white-space: normal; }
  .hero__l2 { padding-left: 0; }
  .hero__progress { left: calc(16.67% + 15px); right: calc(16.67% + 15px); }

  /* Menü-Panel PHN: Burger, Menüpunkte klappen darunter auf */
  .menu { justify-content: stretch; }
  .menu__block { flex: 1; align-self: stretch; padding: 20px 10px; gap: var(--gutter);
    background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)); }
  .menu__burger { display: flex; }
  .menu__home, .menu.is-fixed .menu__home, .menu--sub .menu__home { display: none; }
  .menu__list { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
    flex-direction: column; align-items: stretch; padding: 10px var(--margin) 30px; background: var(--dark-grey);
    box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6); }
  .menu.is-open .menu__list { display: flex; }
  .menu__list .menu__btn { height: auto; padding: 14px 0; flex-direction: row; border-top: 1px solid rgba(255, 255, 255, .15); }
  .menu__list .menu__btn::before, .menu__list .menu__btn::after { display: none; }
  .menu__list .menu__btn br { display: none; }
  .menu__list .menu__btn.menu__list-home { display: flex; }

  .booking { padding: 0 var(--margin) 0 21px; }
  .booking__pill { font-size: 18px; }

  /* Panels: Bild oben, Textbox darunter, abwechselnd links/rechts bündig; Boxen ohne Transparenz */
  .panels { gap: 20px; }
  .panels::before { display: none; }
  .panel { height: auto; scroll-margin-top: 0; }
  .panel--l { margin-right: var(--margin); }
  .panel--r { margin-left: var(--margin); }
  .panel--l .panel__content, .panel--r .panel__content { position: static; display: flex; flex-direction: column; }
  .panel--l .panel__img, .panel--r .panel__img { position: relative; height: 250px; }
  .panel--l .tb, .panel--r .tb { position: relative; inset: auto; width: auto; gap: 10px; }
  .tb::before { opacity: 1 !important; }
  .panel .line { flex: none; height: 30px; min-height: 0; }
  .tb__hl { white-space: normal; }
  .tb__txt { width: auto; }

  /* Home Panel PHN Overlay */
  .panel--tall { height: 700px; }
  .tb--free { left: 20px; right: 20px; width: auto; transform: none; gap: 10px; }
  .tb--free .tb__hl { white-space: nowrap; }
  .panel--tall .line:last-child { flex: 1 1 0; }

  .facts { margin: 100px var(--margin) var(--section-u); }

}

/* ==========================================================================
   UNTERSEITE SUB 3 „My private Panorama“ (chalets.html)
   Figma-Frames SUB 3 – PC XL / PC L / PC M, SUB 3 – TAB, SUB 3 – PHN (Stand 15.10.2026).

   .grid14: Rand + 12 (PHN 6) elastische Spalten + Rand als Grid-Spuren. Die Randspuren sind um den
   Gutter schmaler, damit Spalte 1 genau bei --margin beginnt. Linie 1 = linker Seitenrand,
   Linie n+1 = Ende von Spalte n, Linie -1 = rechter Seitenrand.
   ========================================================================== */
.grid14 { display: grid; gap: var(--gutter);
  grid-template-columns: calc(var(--margin) - var(--gutter)) repeat(var(--columns), minmax(0, 1fr)) calc(var(--margin) - var(--gutter)); }

/* DVV Hero SUB: Randabstand, Unterkante = Viewport-Grenze (Hero + Menü + Rand = Viewporthöhe) */
.hero--sub { margin: 0 var(--margin) var(--margin); min-height: 420px;
  height: calc(100vh - var(--menu-h) - var(--margin)); height: calc(100svh - var(--menu-h) - var(--margin)); }
.hero--sub .hero__logo { display: none; }
.hero--sub .hero__progress { left: calc(16.67% + 1.67px); right: calc(16.67% + 1.67px); }
/* Headline L, zweite Zeile im Figma mit 13 Leerzeichen eingerückt */
.sh { position: absolute; z-index: 2; left: var(--sh-left, calc(50% - 368px)); bottom: 92px; margin: 0; white-space: pre;
  font-family: var(--f-head); font-weight: 200; text-transform: uppercase;
  font-size: var(--h-l); line-height: var(--h-l-lh); letter-spacing: var(--h-l-ls);
  text-shadow: 0 0 10px rgba(0, 0, 0, .2); }
.sh__l1, .sh__l2 { display: block; }
.sh__br { display: none; }

/* SUB 3 Panel 01: Collage */
.collage { row-gap: var(--gutter); }
.collage__i { position: relative; overflow: hidden; }
.collage__i img, .mix img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.collage .c1 { grid-column: 1 / 8;  grid-row: 1; aspect-ratio: 720 / 375; }
.collage .c2 { grid-column: 8 / 13; grid-row: 1; }
.collage .c3 { grid-column: 4 / 10; grid-row: 2; aspect-ratio: 680 / 375; }
.collage .c4 { grid-column: 10 / -1; grid-row: 2; }

/* Menü-Panel PHN der Unterseiten: aktive Seite neben dem Burger (nur PHN sichtbar) */
.menu__current { display: none; }

/* UG-VLF Block OU hinter „Choose …“ bis „Basics:“ */
.chalets { position: relative; isolation: isolate; }
.chalets::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .75;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 300px, #000 calc(100% - 300px), rgba(0, 0, 0, 0) 100%); }

/* Textbox L ohne Fläche: Linien oben und unten füllen die feste Boxhöhe auf */
.band { display: flex; flex-direction: column; align-items: center; gap: 15px; margin: 0 var(--margin); text-align: center;
  padding: var(--box-l-pad-o) var(--box-l-pad-r) var(--box-l-pad-u) var(--box-l-pad-l); }
.band--choose { height: 265px; }
.band--basics { height: 215px; }
.band .line { min-height: 0; }

/* Kombipanels Chalets – PC: Reihe 1 vom linken Rand bis Ende Spalte 10, Reihe 2 ab Spalte 3 bis zum rechten Rand */
.chalets__list { row-gap: var(--gutter); }
.chalets__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.chalets__row.r1 { grid-column: 1 / 12; }
.chalets__row.r2 { grid-column: 4 / -1; }
.kombi { display: flex; flex-direction: column; min-width: 0; }
.kombi__img { width: 100%; aspect-ratio: 300 / 200; object-fit: cover; }
.kombi__body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 30px 100px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)); }
.kombi__title { width: 100%; text-align: center; }
.kombi__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
/* Textbox XS */
.chip { padding: 2px 8px 4px; background: rgba(0, 0, 0, .3); color: rgba(255, 255, 255, .6); text-align: center; white-space: nowrap;
  font: 300 var(--t-caps)/var(--t-caps-lh) var(--f-caps); letter-spacing: var(--t-caps-ls); text-transform: uppercase; }
/* lange Fakten dürfen in schmalen Kacheln umbrechen, statt die Kachel zu verbreitern */
.kombi__chips .chip { max-width: 100%; white-space: normal; }
.kombi .btn { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); }
/* Chalets in Planung (Kachel 5/6): ohne Buchungs-Button, Bild gedimmt – Kachelhöhe bleibt wie bei den anderen */
.kombi--soon .kombi__img { opacity: .5; }
.kombi--soon .kombi__title { opacity: .7; }

/* Faktenblock umbrechend (PC): zwei Zeilen à zwei Vierergruppen, Gruppen brechen als Ganzes um */
.fakten { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 var(--margin); }
.fakten__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; width: 100%; }
.fakten__grp { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 100%; }
/* Textbox S */
.tbs { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--box-s-gap);
  height: 105px; padding: var(--box-s-pad-o) var(--box-s-pad-r) var(--box-s-pad-u) var(--box-s-pad-l);
  background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)); }
.tbs p { opacity: .7; text-align: center; white-space: nowrap;
  font: 300 var(--t-caps)/var(--t-caps-lh) var(--f-caps); letter-spacing: var(--t-caps-ls); text-transform: uppercase; }

/* Swiper-Steuerung (nur TAB/PHN) */
.swiper-ctl { display: none; padding: 20px calc(8.33% + 25.92px + var(--margin)); }
.swiper-ctl__in { display: flex; align-items: center; gap: 10px; padding: 5px; border-radius: 60px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); }
.swiper-ctl__btn { position: relative; flex: none; display: flex; padding: 11px 20px; }
.swiper-ctl__btn::before { content: ""; position: absolute; inset: 3px; border-radius: 30px; background: #000; opacity: .6;
  transition: inset .2s ease, opacity .2s ease; }
.swiper-ctl__btn img { position: relative; width: 19px; height: 23px; }
.swiper-ctl__btn .is-hover { display: none; }
.swiper-ctl__btn:hover::before, .swiper-ctl__btn:focus-visible::before { inset: 0; opacity: 1; }
.swiper-ctl__btn:hover img, .swiper-ctl__btn:focus-visible img { display: none; }
.swiper-ctl__btn:hover .is-hover, .swiper-ctl__btn:focus-visible .is-hover { display: block; }
.swiper-ctl__bar { position: relative; flex: 1; height: 3px; overflow: hidden; border-radius: 4px; background: #000; }
.swiper-ctl__thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 25%; min-width: 15px; background: #fff; }

/* Section Grundrisse */
.plans { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--gutter);
  padding: var(--section-o) calc(var(--margin) + var(--step)) var(--section-u); }
.plan { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 440px; max-width: 100%; padding: 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)); }
.plan img { width: 100%; height: auto; aspect-ratio: 2000 / 1200; object-fit: cover; }
.plan figcaption { width: 100%; text-align: center; }
.plan figcaption span { display: block; font-size: var(--t-s); line-height: var(--t-s-lh); letter-spacing: var(--t-s-ls); }
.plan figcaption strong { display: block; font: 700 var(--h-m)/var(--h-m-lh) var(--f-head); letter-spacing: 1px; text-transform: uppercase; }

/* SUB 3 Panel unten: zwei Bilder links (Rand–Spalte 5, Spalte 2–5), Bild mit Textbox ab Spalte 6 bis zum Rand */
.mix { grid-template-rows: 1fr 1fr; margin-bottom: var(--section-u); }
.mix > div { position: relative; overflow: hidden; }
.mix__a { grid-column: 1 / 7; grid-row: 1; }
.mix__b { grid-column: 3 / 7; grid-row: 2; }
.mix__c { grid-column: 7 / -1; grid-row: 1 / 3; aspect-ratio: 835 / 600; }
.tb--ice80::before { opacity: .8; }

/* ---- SUB 3 · TAB (600–899 px, Frame 710) ------------------------------------------------------- */
@media (max-width: 899.98px) {
  /* DVV Hero HOME TAB: Headline zentriert, ohne Einrückung */
  .hero--sub .hero__progress { left: calc(16.67% + 26.67px); right: calc(16.67% + 26.67px); }
  .sh { left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
  .sh__ind { display: none; }

  .collage .c1 { grid-column: 1 / 12; grid-row: 1; aspect-ratio: 570 / 285; }
  .collage .c2 { grid-column: 1 / 9;  grid-row: 2; aspect-ratio: 405 / 225; }
  .collage .c4 { grid-column: 9 / -1; grid-row: 2; }
  .collage .c3 { grid-column: 4 / -1; grid-row: 3; aspect-ratio: 570 / 285; }

  /* Booking-Widget: im Figma TAB/PHN nachgereicht (Andreas 23.10.2026) – Abstand oben wie PC (Section oben), Pille wie Startseite */

  /* Swiper: Kombipanels und Faktenblock laufen einzeilig, Steuerung darunter */
  [data-swiper-track] { display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; gap: var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin);
    padding: 0 var(--margin); scrollbar-width: none; }
  [data-swiper-track]::-webkit-scrollbar { display: none; }
  .chalets__row, .fakten__row, .fakten__grp { display: contents; }
  /* Kachel = 6 Rasterspalten (Figma TAB 710: 320 px) und wächst elastisch mit → zwei Kacheln je Ansicht,
     die Nachbarkacheln schauen links und rechts gleich schmal (Rand − Gutter) herein */
  .kombi { flex: 0 0 calc((100% - var(--gutter)) / 2); scroll-snap-align: start; }
  .fakten { gap: 5px; }
  .tbs { scroll-snap-align: start; }
  .swiper-ctl { display: block; }

  /* Grundrisse untereinander (Section bleibt eingerückt) */
  /* Panel unten: Bild mit Textbox ab Rand, darunter Seeadler und Steg */
  .mix { grid-template-columns: 24fr 43fr; grid-template-rows: auto auto; padding-left: var(--margin); }
  .mix__c { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 680 / 500; }
  .mix__b { grid-column: 1; grid-row: 2; }
  .mix__a { grid-column: 2; grid-row: 2; aspect-ratio: 430 / 200; }
  .mix .tb__hl { font-weight: 200; font-size: var(--h-m); line-height: var(--h-m-lh); letter-spacing: var(--h-m-ls); }
  .mix .tb__txt { font-size: var(--t-std); line-height: var(--t-std-lh); letter-spacing: var(--t-std-ls); }
}

/* ---- SUB 3 · PHN (unter 600 px, Frame 360) ----------------------------------------------------- */
@media (max-width: 599.98px) {
  /* Menü-Panel PHN: Burger links, aktive Seite rechts daneben */
  .menu--sub .menu__block { flex: none; }
  .menu--sub .menu__current { display: flex; }
  .menu__current { flex: 1; align-self: stretch; align-items: center; justify-content: center; padding: 20px 10px; }
  .menu__current .menu__btn::before, .menu__current .menu__btn::after { background: rgba(255, 255, 255, .7); }
  .menu__current .menu__btn span { opacity: 1; font-weight: 400; letter-spacing: 1.5px; }

  /* DVV Hero HOME PHN: Logo oben, Headline vierzeilig zentriert */
  .hero--sub { min-height: 460px; }
  .hero--sub .hero__logo { display: block; }
  .hero--sub .hero__progress { left: calc(16.67% + 15px); right: calc(16.67% + 15px); }
  .sh { bottom: 80px; width: min(324px, 100%); }
  .sh__br { display: inline; }

  .collage .c1 { grid-column: 1 / 8;  grid-row: 1; aspect-ratio: 340 / 240; }
  .collage .c2 { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 360 / 240; }
  .collage .c3 { grid-column: 1 / -1; grid-row: 3; aspect-ratio: 360 / 240; }
  .collage .c4 { grid-column: 2 / -1; grid-row: 4; aspect-ratio: 340 / 240; }

  /* Kombipanels: eine Karte mittig, Nachbarn schauen am Rand herein */
  .chalets__list { padding: 0 calc(var(--margin) + var(--gutter)); scroll-padding-inline: calc(var(--margin) + var(--gutter)); }
  .kombi { flex: 0 0 100%; scroll-snap-align: center; }
  /* Booking-Widget: Abstand oben wie Section (Lodgify-PHN-Regel setzt sonst 20 px) */
  .booking.booking--spaced:has(#lodgify-search-bar) { padding-top: var(--section-o); padding-bottom: 0; }
  .swiper-ctl { padding: 20px calc(2 * var(--margin)); }

  .plans { padding-left: var(--margin); padding-right: var(--margin); }
  .plan { width: 100%; }

  /* Panel unten: Textbox über dem Bild, darunter Steg und Seeadler, alles rechtsbündig */
  .mix { display: flex; flex-direction: column; align-items: flex-end; gap: var(--gutter); padding-left: var(--margin); }
  .mix > div { width: 100%; }
  .mix__c { order: 1; aspect-ratio: auto; display: flex; flex-direction: column; overflow: visible; }
  .mix__c img { position: relative; inset: auto; aspect-ratio: 340 / 260; height: auto; }
  .mix__c .tb { order: -1; position: relative; inset: auto; width: 100%; gap: 10px; }
  .mix__c .tb .line { flex: none; height: 30px; min-height: 0; }
  .mix .tb__hl { white-space: nowrap; font-weight: 300; font-size: var(--h-s); line-height: var(--h-s-lh); letter-spacing: var(--h-s-ls); }
  .mix .tb__txt { width: auto; font-size: var(--t-s); line-height: var(--t-s-lh); letter-spacing: var(--t-s-ls); }
  .mix__a { order: 2; aspect-ratio: 340 / 200; }
  .mix > .mix__b { order: 3; width: 67.35%; aspect-ratio: 229 / 180; }
}

/* ==========================================================================
   UNTERSEITEN SUB 1 „Vibrant Arctic“ (vibrant-arctic.html), SUB 2 „A distinct Place“ (the-place.html),
   SUB 4 „365 Days“ (experiences.html) – Figma-Frames SUB 1/2/4 – PC XL / L / M, TAB, PHN (Stand 19.10.2026).
   Gemeinsame neue Komponenten zuerst, danach seitenspezifische Blöcke.
   Headline im Hero: .sh mit --sh-left je Seite (inline am Hero gesetzt), Einrückung über .sh__ind.
   ========================================================================== */

/* Zeilenumbruch der Hero-Headline schon im TAB (SUB 4: vierzeilig ab TAB) */
.sh__br--tab { display: none; }
/* Umbrüche nur in bestimmten Zuständen: .br-l nur PC XL/L (ab 1200 px), .br-tab nur TAB */
.br-tab { display: none; }
@media (max-width: 1199.98px) { .br-l { display: none; } }
@media (min-width: 600px) and (max-width: 899.98px) { .br-tab { display: inline; } }

/* UG-VLF Block OU als Hintergrund eines Abschnitts: Fläche mit 300 px Verlauf oben und unten */
.vlf { position: relative; isolation: isolate; }
.vlf::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--vlf-o, .75);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, var(--vlf-c, #000) 300px, var(--vlf-c, #000) calc(100% - 300px), rgba(0, 0, 0, 0) 100%); }
.vlf--ice { --vlf-c: var(--ice-grey); --vlf-o: .3; }
.vlf--b50 { --vlf-o: .5; }

/* Textbox L als Band – Varianten zu .band (ohne Fläche) */
.band--r  { margin-left: calc(var(--margin) + 6 * var(--step)); }        /* Spalte 7 bis 12 */
.band--l6 { margin-right: calc(var(--margin) + 6 * var(--step)); }       /* Spalte 1 bis 6 */
.band--to11 { margin-left: 0; margin-right: calc(var(--margin) + var(--step)); }   /* linker Seitenrand bis Ende Spalte 11 */
.band--full { margin-left: 0; margin-right: 0; }
.band--h265 { height: 265px; }
.band--h290 { height: 290px; }
.band--hug { height: auto; }
.band--hug .line, .band--hug50 .line { flex: none; height: 50px; }
.band--txt { width: 600px; max-width: calc(100% - 2 * var(--margin)); margin-left: auto; margin-right: auto; }
.band--txt p { white-space: normal; }
.band--dark .line { background: rgba(0, 0, 0, .35); }

/* Textbox-L-Reihe und Kombipanel-Reihe als Swiper (alle Zustände): Spur mit Rand, Boxen 4 Spalten (TAB 6) */
.hrow { display: flex; align-items: flex-start; gap: var(--gutter); padding: 0 var(--margin);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin);
  scrollbar-width: none; --tcol: calc((100% - 11 * var(--gutter)) / 12); }
.hrow::-webkit-scrollbar { display: none; }
.hrow > * { flex: 0 0 calc(4 * var(--tcol) + 3 * var(--gutter)); scroll-snap-align: start; }
/* Mindestbreite der Kacheln (Andreas 22.10.): im PC M (900–1199) schon zwei Kacheln wie im TAB, sonst werden die Texte zu schmal */
@media (min-width: 900px) and (max-width: 1199.98px) { .hrow > * { flex-basis: calc(6 * var(--tcol) + 5 * var(--gutter)); } }
.swiper-ctl--all { display: block; }

/* Textbox L mit Verlauf (Box in der Reihe): feste 30-px-Linien, Headline S + Fließtext S */
.tbox { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: var(--box-l-pad-o) var(--box-l-pad-r) var(--box-l-pad-u) var(--box-l-pad-l);
  background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); }
.tbox .line { flex: none; height: 30px; min-height: 0; }
.tbox .hl-s, .tbox p { width: 100%; }
.tbox p { font-size: var(--t-s); line-height: var(--t-s-lh); letter-spacing: var(--t-s-ls); }

/* Block Link Chalets: Bild randabfallend, Textbox ohne Fläche über der linken Hälfte */
.blc { position: relative; overflow: hidden; aspect-ratio: 1870 / 1090; margin-top: 60px; margin-bottom: var(--gutter); }
.blc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blc .tb { left: 0; right: calc(50% + 5px); width: auto; }
.blc .tb::before { display: none; }
/* Block Link Chalets 2 (SUB 2): im Rand, feste Höhe, Headline schwarz, BTN Dark */
.blc--dark { aspect-ratio: auto; height: 700px; margin: 0 var(--margin); }
.blc--dark .tb { color: var(--schwarz); }
.blc--dark .line { background: rgba(0, 0, 0, .35); }

/* Section ABOUT + CONTACT */
.contact { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center;
  padding: var(--box-l-pad-o) var(--box-l-pad-r) var(--box-l-pad-u) var(--box-l-pad-l); }
.contact .line { flex: none; height: 200px; min-height: 0; }
.contact__btns { display: flex; justify-content: center; gap: var(--gutter); }
/* VLF U (SUB 4): Verlauf schwarz → transparent, 400 px, hinter dem Kontaktblock */
.contact--vlf::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 400px; z-index: -1;
  background: linear-gradient(180deg, #000, rgba(0, 0, 0, 0)); }

/* SUB 3 Panel unten ohne Abstand nach unten (Kontaktblock folgt direkt) */
.mix--flush { margin-bottom: 0; }

/* ---- SUB 1: Collage „Vibrant“ ------------------------------------------------------------------ */
.vcol { row-gap: var(--gutter); }
.vcol > * { position: relative; overflow: hidden; }
.vcol img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcol .va { grid-column: 1 / 13; grid-row: 1; aspect-ratio: 2 / 1; }
.vcol .vt { grid-column: 2 / 6;  grid-row: 2; overflow: visible; }
.vcol .vb { grid-column: 6 / -1; grid-row: 2; aspect-ratio: 5 / 3; }
.vcol .vc1 { grid-column: 3 / 8;  grid-row: 3; aspect-ratio: 5 / 3; }
.vcol .vc2 { grid-column: 8 / 13; grid-row: 3; aspect-ratio: 5 / 3; }
.vcol .tb { position: relative; inset: auto; width: auto; height: 100%; }
.vcol .tb::before { display: none; }
.vcol .tb__hl { white-space: normal; }

/* ---- SUB 2: Bildstreifen, Gletscher-Reihe, Tiere, Ridge-Karte ---------------------------------- */
.strip { position: relative; overflow: hidden; aspect-ratio: 3 / 1; }
.strip img, .glacier__img img, .animals img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.glacier { display: flex; align-items: stretch; gap: var(--gutter); margin: var(--gutter) var(--margin); }
.glacier .tb { position: static; flex: 0 0 330px; width: 330px; }   /* Figma: Textbox L 330 breit (PC M/L/XL) */
.glacier .tb::before { display: none; }
.glacier__img { position: relative; overflow: hidden; flex: 1 1 0; min-width: 0; }
/* PC: Bild skaliert in der Höhe mit (Figma 2,1 : 1), die Textbox daneben streckt sich mit.
   Höhe über Padding-Platzhalter statt aspect-ratio – Safari überträgt aspect-ratio bei Flex-Elementen mit
   flex-basis 0 nicht zuverlässig in die Höhe (Bild blieb dort auf Textbox-Höhe stehen). */
@media (min-width: 900px) { .glacier__img::before { content: ""; display: block; padding-top: calc(100% / 2.1); } }
.glacier__band { display: none; }
.animals { row-gap: var(--gutter); }
.animals > div { position: relative; overflow: hidden; aspect-ratio: 590 / 338; }
.animals .an1 { grid-column: 2 / 6; } .animals .an2 { grid-column: 6 / 10; } .animals .an3 { grid-column: 10 / 14; }
/* Ridge-Karte: Grafik bleibt gleich groß, Land (links) und Fjord (rechts) laufen seitlich aus */
.ridge { position: relative; height: 450px; overflow: hidden; display: flex; justify-content: center; }
.ridge picture { display: contents; }
.ridge img { flex: none; width: auto; height: 100%; max-width: none; }

/* ---- SUB 4: Faktenblock, Kombipanels Activities, Block Chalets + Booking ----------------------- */
.fakten--days { padding: 0 calc(var(--margin) + var(--step)); }
.fakten--days .fakten__brk { display: none; }
@media (min-width: 900px) and (max-width: 1199.98px) {
  .fakten--days { padding: 0; }
}
/* Kombipanel Activities: Bild 3:2 (Hero XL 2:1), darunter Fläche mit Verlauf, Headline S und Chips */
.act { display: flex; flex-direction: column; }
.act__img { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.act__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.act--hero .act__img { aspect-ratio: 2 / 1; }
.act__body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px; text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); }
.act__title { width: 100%; }
.act__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; width: 100%; }
/* PC: Hero XL ab Spalte 3 bis zum rechten Rand, darunter zwei Panels vom linken Rand bis Spalte 11 */
.acts { row-gap: 0; }
.acts .a1 { grid-column: 4 / -1; grid-row: 1; }
.acts .act-pair { grid-column: 1 / 13; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
/* Block Chalets + Booking: Bild 900 hoch, Buchungs-Widget darüber */
.bcb { position: relative; height: 900px; overflow: hidden; }
.bcb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.bcb .booking { position: absolute; left: 0; right: 0; top: 127px; background: none; }
/* VLF O: Verlauf transparent → schwarz hinter „Choose your season …“ */
.band--vlfo { background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000); }

/* ---- SUB 1/2/4 · TAB (600–899 px) ---------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .sh__br--tab { display: inline; }
  .band--r, .band--l6 { margin-left: var(--margin); margin-right: var(--margin); }
  .band--to11 { margin-right: calc(var(--margin) + 2 * var(--step)); }
  .band--h265 { height: 251px; }
  .band--h290 { height: 273px; }
  .band--hug .line { height: 50px; }
  .band--txt { width: 450px; }

  .hrow > * { flex-basis: calc(6 * var(--tcol) + 5 * var(--gutter)); }
  .blc { aspect-ratio: auto; height: 700px; margin: 40px 0 var(--gutter) var(--margin); }
  .blc .tb { right: calc(50% + 4.5px); }
  .blc--dark { margin: 0 var(--margin); }
  /* neue Komponenten behalten im TAB Headline M / Fließtext STD (die TAB-Regel für .tb__hl gilt nur den Home-Panels) */
  .vcol .tb__hl, .blc .tb__hl, .contact .tb__hl, .band .tb__hl, .glacier .tb__hl {
    font-weight: 200; font-size: var(--h-m); line-height: var(--h-m-lh); letter-spacing: var(--h-m-ls); }
  .vcol .tb__txt, .band .tb__txt { font-size: var(--t-std); line-height: var(--t-std-lh); letter-spacing: var(--t-std-ls); }

  /* SUB 1 Collage: Textbox Spalte 1–5, Bild B füllt die Zeilenhöhe */
  .vcol .va { aspect-ratio: 626 / 312; }
  .vcol .vt { grid-column: 2 / 7; }
  .vcol .vb { grid-column: 7 / -1; aspect-ratio: 405 / 320; }

  /* SUB 2 */
  .strip { aspect-ratio: auto; height: 400px; }
  .glacier { height: 260px; }
  .glacier__img { aspect-ratio: auto; }
  .animals > div { aspect-ratio: 210 / 160; }
  .ridge { height: 340px; margin: 0 var(--margin);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }

  /* SUB 4: Fakten in drei Dreiergruppen, kein Swiper */
  .fakten--days .fakten__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
  .fakten--days .tbs { flex: 0 0 calc((100% - 10px) / 3); }
  /* Panels untereinander, abwechselnd bündig: A linker Rand bis Spalte 12 (3:2), B ab Spalte 2 (2:1), C bis Spalte 10 (2:1) */
  .acts .act-pair { display: contents; }
  .acts .a2 { grid-column: 1 / 14; grid-row: 1; }
  .acts .a1 { grid-column: 3 / -1; grid-row: 2; }
  .acts .a3 { grid-column: 1 / 12; grid-row: 3; }
  .acts .a3 .act__img { aspect-ratio: 2 / 1; }
  .act__body { padding: 30px; }
}

/* ---- SUB 1/2/4 · PHN (unter 600 px) -------------------------------------------------------------- */
@media (max-width: 599.98px) {
  .band--hug50 .line, .band--phn50 .line { flex: none; height: 50px; }
  .band--phn50 { height: auto; }
  .band--h265, .band--h290 { height: 250px; }
  .band--txt { width: auto; max-width: none; margin: 0 var(--margin); }
  .band--txt .tb__txt { font-size: var(--t-s); line-height: var(--t-s-lh); letter-spacing: var(--t-s-ls); }

  .hrow { padding: 0 calc(var(--margin) + var(--gutter)); scroll-padding-inline: calc(var(--margin) + var(--gutter)); }
  .hrow > * { flex-basis: 100%; scroll-snap-align: center; }

  .blc { height: 635px; margin-top: 40px; }
  .blc .tb { top: 0; right: 0; bottom: auto; gap: 10px; }
  .blc .tb::before { display: block; background: var(--gruen); opacity: .9; }
  .blc .tb .line { flex: none; height: 30px; min-height: 0; }
  .blc .tb__hl { font-weight: 300; font-size: var(--h-s); line-height: var(--h-s-lh); letter-spacing: var(--h-s-ls); }
  .blc--dark { height: 600px; margin: 0 var(--margin); }
  .blc--dark .tb { bottom: 0; gap: 15px; }
  .blc--dark .tb::before { display: none; }
  .blc--dark .tb .line { flex: 1 1 0; height: auto; }
  .blc--dark .tb .line:first-child { flex: none; height: 50px; }
  .blc--dark .tb__hl { font-weight: 200; font-size: var(--h-m); line-height: var(--h-m-lh); letter-spacing: var(--h-m-ls); }

  .contact__btns { flex-direction: column; align-items: center; }

  /* SUB 1 Collage einspaltig */
  .vcol .va { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .vcol .vt { grid-column: 2 / -2; grid-row: 2; }
  .vcol .vt .tb { gap: 10px; }
  .vcol .vt .line { flex: none; height: 30px; min-height: 0; }
  .vcol .vt .tb__hl { font-weight: 300; font-size: var(--h-s); line-height: var(--h-s-lh); letter-spacing: var(--h-s-ls); }
  .vcol .vt .tb__txt { width: auto; font-size: var(--t-s); line-height: var(--t-s-lh); letter-spacing: var(--t-s-ls); }
  .vcol .vb { grid-column: 2 / -1; grid-row: 3; aspect-ratio: 3 / 2; }
  .vcol .vc1 { grid-column: 3 / -1; grid-row: 4; aspect-ratio: 3 / 2; }
  .vcol .vc2 { grid-column: 3 / -1; grid-row: 5; aspect-ratio: 3 / 2; }

  /* SUB 2 */
  .strip { height: 250px; }
  .glacier { display: block; height: auto; margin: 0; }
  .glacier > .tb { display: none; }
  .glacier__band { display: flex; }
  .glacier__img { display: block; margin: 0 var(--margin) var(--gutter); height: 200px; }
  .animals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 120px 120px; gap: var(--gutter);
    margin: 0 var(--margin); }
  .animals > div { aspect-ratio: auto; }
  .animals .an1 { grid-column: 1 / 3; grid-row: 1; }
  .animals .an1 img { object-position: left center; }
  .animals .an3 { grid-column: 3 / 6; grid-row: 1; }
  .animals .an2 { grid-column: 3 / 6; grid-row: 2; }
  .ridge { height: auto; margin: 0; padding: 0 40px; -webkit-mask-image: none; mask-image: none; }
  .ridge img { width: 100%; max-width: 280px; height: auto; }

  /* SUB 4 (PHN im Figma noch nicht gestaltet – abgeleitet aus TAB und den anderen Unterseiten) */
  .fakten--days { padding: 0 var(--margin); }
  .fakten--days .tbs { flex-basis: calc((100% - 5px) / 2); }
  .acts .a2 { grid-column: 1 / -1; }
  .acts .a1 { grid-column: 2 / -1; }
  .acts .a3 { grid-column: 1 / 7; }
  .bcb { height: 635px; }
  .bcb .booking { top: 60px; }
}

/* ---- SUB 4 · Nachtrag 22.10.2026: Figma SUB 4 TAB/PHN fertig gestaltet, Kommentare Andreas (#49–#62) ---------- */
/* Faktenblock: gruppenbasierter Umbruch – PC: alle neun in einer Zeile, sonst Gruppen 5+4 (zwei .fakten__grp, die
   zweite Gruppe bricht nur als Ganzes um, Andreas 23.10.2026), TAB 3+3+3, PHN Swiper (natürliche Boxbreiten) */
.fakten--days .fakten__brk { display: none; flex: 0 0 100%; height: 0; }
.swiper-ctl--phn { display: none; }
/* Headline „Additional services“ im PC eine Spalte weiter rechts: Spalte 2–7 (steht so auch bei 2500 px über einer Kachel) */
@media (min-width: 900px) {
  .band--2to7 { margin-left: calc(var(--margin) + var(--step)); margin-right: calc(var(--margin) + 5 * var(--step)); }
}
@media (max-width: 899.98px) {
  .fakten--days[data-swiper-track] { flex-direction: column; overflow: visible; scroll-snap-type: none; }
  .fakten--days .fakten__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
  .fakten--days .fakten__grp { display: contents; }
  .fakten--days .tbs { flex: none; }
  .fakten--days .fakten__brk--tab { display: block; }
  .swiper-ctl--phn { display: none; }
  /* Activities TAB: AKT 01 vom linken Rand (3:2), AKT 02 bis zum rechten Rand (2:1), AKT 03 vom linken Rand (2:1) */
  .acts .a1 { grid-column: 1 / 14; grid-row: 1; }
  .acts .a2 { grid-column: 3 / -1; grid-row: 2; }
  .acts .a3 { grid-column: 1 / 12; grid-row: 3; }
  .acts .a1 .act__img { aspect-ratio: 3 / 2; }
  .acts .a2 .act__img, .acts .a3 .act__img { aspect-ratio: 2 / 1; }
  /* Block Chalets + Booking: feste Höhe, im TAB 800 px (Kommentar #61) */
  .bcb { height: 800px; }
}
@media (max-width: 599.98px) {
  .fakten--days[data-swiper-track] { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; }
  .fakten--days .fakten__row { display: contents; }
  .fakten--days .fakten__brk { display: none; }
  .swiper-ctl--phn { display: block; }
  /* Activities PHN: drei Panels 340 breit, abwechselnd bündig, alle Bilder 3:2 (Kommentar #60) */
  .acts { display: flex; flex-direction: column; }
  .acts .a1, .acts .a3 { margin-right: 20px; }
  .acts .a2 { margin-left: 20px; }
  .acts .a1 .act__img, .acts .a2 .act__img, .acts .a3 .act__img { aspect-ratio: 3 / 2; }
  /* Swiper der übrigen Aktivitäten: Panels 300 breit ab x = 30 */
  .hrow--acts { padding: 0 30px; scroll-padding-inline: 30px; }
  .hrow--acts > * { flex-basis: 300px; scroll-snap-align: start; }
  /* Block Chalets + Booking: feste Höhe 600 px (Kommentar #62), Widget 30 px unter der Oberkante */
  .bcb { height: 600px; }
  .bcb .booking { top: 30px; }
}

/* ==========================================================================
   RECHTSTEXTE (imprint.html, privacy.html) – Entwurf 23.10.2026, ohne Figma-Vorlage.
   Textspalte im Raster: PC Spalte 3–10, TAB Spalte 2–11, PHN volle Breite. Schrift wie Fließtext S.
   ========================================================================== */
.legal { padding: var(--section-o) calc(var(--margin) + 2 * var(--step)) calc(var(--section-u) + 80px); }
.legal__text { display: flex; flex-direction: column; gap: 40px; max-width: 900px; }
.legal__text h1 { margin-bottom: 10px; }
.legal__text section { display: flex; flex-direction: column; gap: 12px; }
.legal__text p { font-size: var(--t-s); line-height: var(--t-s-lh); letter-spacing: var(--t-s-ls); opacity: .85; }
.legal__text p + p { margin-top: calc(var(--t-s-para) - 12px); }
.legal__text a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal__text a:hover { color: var(--ice-grey); }
.legal__date { margin-top: -30px; }
.footer .btn[aria-current="page"]::before { opacity: .6; }
@media (max-width: 899.98px) { .legal { padding-left: calc(var(--margin) + var(--step)); padding-right: calc(var(--margin) + var(--step)); } }
@media (max-width: 599.98px) { .legal { padding-left: var(--margin); padding-right: var(--margin); } .legal__text { gap: 30px; } }

/* ==========================================================================
   GRUNDRISSE: vergrößerte Ansicht im Overlay (js/plans.js) – Andreas 23.10.2026, Prio C.
   Ohne Figma-Vorlage: dunkle Fläche, Grundriss so groß wie möglich (max. Originalbreite 1200 px),
   Beschriftung wie an der Kachel, Steuerung = Swiper-Pfeile, Schließen-X oben rechts.
   ========================================================================== */
.plans .plan { cursor: zoom-in; transition: background-color .2s ease; }
.plans .plan:hover { background-color: rgba(255, 255, 255, .04); }
.has-lightbox { overflow: hidden; }
.lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  display: none; flex-direction: column; background: var(--dark-grey-d2); color: var(--weiss); }
.lightbox[open] { display: flex; animation: lightbox-in .25s ease both; }
.lightbox::backdrop { background: rgba(0, 0, 0, .5); }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 80px var(--margin) 20px; }
.lightbox__fig { display: flex; flex-direction: column; align-items: center; gap: 15px; max-width: 1200px; width: 100%; height: 100%; justify-content: center; }
.lightbox__img { flex: 0 1 auto; min-height: 0; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__cap { flex: none; text-align: center; }
.lightbox__cap span { display: inline; font-size: var(--t-s); line-height: var(--t-s-lh); letter-spacing: var(--t-s-ls); }
.lightbox__cap strong { display: inline; margin: 0 .5em; font: 700 var(--h-m)/var(--h-m-lh) var(--f-head); letter-spacing: 1px; text-transform: uppercase; }
.lightbox__ctl { flex: none; align-self: center; width: min(400px, calc(100% - 2 * var(--margin))); margin: 0 0 30px; justify-content: space-between; }
.lightbox__count { font: 300 var(--t-caps)/var(--t-caps-lh) var(--f-caps); letter-spacing: var(--t-caps-ls); opacity: .8; }
.lightbox__close { position: absolute; top: 20px; right: var(--margin); width: 50px; height: 50px; border-radius: 50%; }
.lightbox__close::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #000; opacity: .6; transition: inset .2s ease, opacity .2s ease; }
.lightbox__close:hover::before, .lightbox__close:focus-visible::before { inset: 0; opacity: 1; }
.lightbox__close span, .lightbox__close span::before { position: absolute; left: 15px; top: 24px; width: 20px; height: 2px; background: #fff; transform: rotate(45deg); }
.lightbox__close span::before { content: ""; left: 0; top: 0; transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }
@media (max-width: 599.98px) {
  .lightbox__stage { padding-top: 80px; }
  .lightbox__cap strong { display: block; margin: 2px 0; }
  .lightbox__close { top: 15px; }
}