/* =========================================================
   Appartementhof Lärchenheim — Startseite
   Farben: branding.md (Priorität) · Layout/Motion: DESIGN.md
   ========================================================= */

:root{
  /* Marke */
  --beige:#CCB397; --white:#FFFFFF;
  /* Tonale Skala */
  --beige-50:#F7F2EE; --beige-100:#EEE6DD; --beige-200:#E1D2C1; --beige-300:#D3BEA6;
  --beige-400:#C8AC8E; --beige-500:#CCB397; --beige-600:#B38E65; --beige-700:#43705E;
  --beige-800:#745839; --beige-900:#523E28;
  /* Warme Neutralen */
  --cream:#FAF6F3; --sand-light:#F1EBE4; --greige:#BAB3AB; --taupe-grey:#7C736A;
  --text:#322E29; --near-black:#1C1A17;
  /* Akzente */
  --gold:#B8954F; --wood-brown:#8C6F52; --linden-green:#6E7A52;

  /* Typo */
  --font-display:"Marcellus", "Cormorant Garamond", serif;
  --font-script:"Kristi", "Sacramento", cursive;
  --font-body:"Quicksand", "Helvetica Neue", Arial, sans-serif;

  /* Maße */
  --maxw:1320px;
  --gutter:clamp(20px, 5vw, 80px);
  --section-y:clamp(72px, 11vw, 150px);
  --header-h:76px;
  --bookingbar-h:64px;
  --ls-wide:.12em;
  --radius:4px;
  --shadow-soft:0 18px 50px rgba(50,46,41,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h); overflow-x:clip}
body{
  margin:0; font-family:var(--font-body); font-size:16px; line-height:1.7;
  color:var(--text); background:var(--cream);
  padding-bottom:var(--bookingbar-h);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* verhindert horizontalen Scroll durch full-bleed-Hintergründe */
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}

.skip-link{position:fixed; left:-999px; top:0; z-index:300; background:var(--beige-800); color:#fff; padding:10px 16px}
.skip-link:focus{left:0}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- Typo-Bausteine ---------- */
.script-eyebrow{
  font-family:var(--font-script); color:var(--beige-600);
  font-size:clamp(2.5rem, 5.6vw, 3.9rem); line-height:.7; margin:0 0 -.05em;
}
.script-eyebrow--light{color:var(--beige-200)}
.section-title{
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:var(--ls-wide); font-weight:400; color:var(--text);
  font-size:clamp(1.7rem, 3.8vw, 2.8rem); line-height:1.04; margin:.2em 0 .55em;
}
.section-title--light{color:#fff}
.section-title .amp{color:var(--beige); font-family:var(--font-script); text-transform:none; letter-spacing:0}
.lead{max-width:54ch; margin-inline:auto; color:var(--taupe-grey)}
p{margin:0 0 1.1em}
.light{color:rgba(255,255,255,.9)}

.arrow-link{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em;
  font-size:.82rem; color:var(--beige-800); padding-top:.3em;
  border:0; background:none; cursor:pointer; transition:color .3s var(--ease);
}
.arrow-link::after{content:"→"; transition:transform .3s var(--ease)}
.arrow-link:hover{color:var(--beige-900)}
.arrow-link:hover::after{transform:translateX(5px)}
.arrow-link--light{color:var(--beige-100)}
.arrow-link--light:hover{color:#fff}

/* Öffnungs-/Küchenzeiten-Block (Restaurant) */
.opening-hours{margin-top:1.6em}
.opening-hours .oh-group{margin:0 0 1.1em}
.oh-cols{display:grid; grid-template-columns:max-content max-content; justify-content:space-between; gap:clamp(20px,4vw,56px); margin:0 0 1.1em}
.oh-cols p{white-space:nowrap}
@media (max-width:480px){ .oh-cols{grid-template-columns:1fr; justify-content:start} .oh-cols p{white-space:normal} }
.oh-title{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-weight:400; font-size:1.02rem; color:var(--beige-800); margin:0 0 1.2em; padding-bottom:.3em; border-bottom:1px solid var(--beige-200)}
.opening-hours p{margin:.1em 0 .4em; font-size:.95rem; line-height:1.5; color:var(--text)}
.opening-hours p strong{font-weight:600}
.opening-hours .oh-note{margin:.2em 0 0; font-size:.9rem; color:var(--taupe-grey)}
/* Restaurant: drei Tagesabschnitte nebeneinander */
@media (min-width:481px){ .oh-cols--three{grid-template-columns:repeat(3,max-content)} }

/* Öffnungszeiten — Wochentabelle (Palette des Hauses) */
.hours-week{margin:clamp(40px,7vw,80px) 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch}
.hours-week table{width:100%; min-width:560px; border-collapse:collapse; background:var(--white); border:1px solid var(--beige-200); font-size:.95rem}
.hours-week thead th{background:var(--beige-700); color:#fff; text-align:left; padding:16px 20px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-weight:400; font-size:.84rem; vertical-align:top}
.hours-week thead th small{display:block; margin-top:.35em; font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:.74rem; font-weight:400; color:rgba(255,255,255,.78)}
.hours-week tbody th,.hours-week tbody td{padding:14px 20px; border-top:1px solid var(--beige-200); text-align:left; color:var(--text); font-weight:400}
.hours-week tbody th[scope=row]{font-weight:600; font-size:1rem}
.hours-week tbody tr:first-child th,.hours-week tbody tr:first-child td{border-top:0}
.hours-week .is-closed{color:var(--beige-700)}
.hours-week tr.is-today{background:var(--beige-50)}
.hours-week tr.is-today th[scope=row]{color:var(--beige-800)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.13em;
  font-size:.8rem; padding:14px 28px; cursor:pointer; transition:all .3s var(--ease);
  border:1px solid transparent; border-radius:var(--radius);
}
.btn--solid{background:var(--beige-700); color:#fff; border-color:var(--beige-700)}
.btn--solid:hover{background:#530207; border-color:#530207}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)}
.btn--ghost:hover{background:rgba(255,255,255,.14); border-color:#fff}
/* Outline-Variante für helle Hintergründe (Cookie-Banner/-Fenster) */
.btn--outline{background:transparent; color:var(--beige-800); border-color:var(--beige-400)}
.btn--outline:hover{background:var(--beige-50); border-color:var(--beige-600)}
.btn--sm{padding:9px 18px; font-size:.72rem}

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:120; height:var(--header-h);
  display:flex; align-items:center;
  /* Schrift invertiert sich automatisch gegen den Untergrund (wie EuroHotel) */
  mix-blend-mode:difference; color:#fff;
}
/* Über dem Hero: kein Blend, reines Weiß (Luftbild zu unruhig für difference) */
.site-header.over-hero{mix-blend-mode:normal; color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.45)}
/* Kein Hintergrund: Schriftfarbe wird je Sektor per JS umgeschaltet (header-light/header-dark) */
.header-inner{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.burger{
  display:inline-flex; align-items:center; gap:.55em; background:none; border:0; cursor:pointer;
  color:inherit; font-family:var(--font-display); letter-spacing:.14em; font-size:.975rem; text-transform:uppercase;
}
.burger--menu{justify-self:end}
.burger-globe svg{width:22px; height:22px; display:block}
.burger-lines{display:inline-flex; flex-direction:column; gap:4px; width:24px}
.burger-lines span{height:2px; background:currentColor; display:block; transition:.3s var(--ease)}
/* Strich-Akzente neben Sprache/Menü */
.bar-rule{display:inline-block; width:40px; height:1px; background:currentColor; opacity:.55}
@media (max-width:860px){ .bar-rule{display:none} }

/* Wortmarke (Mitte) statt Logo */
.brand{justify-self:center; color:inherit}
.wordmark{display:inline-flex; align-items:baseline; gap:.42em; white-space:nowrap}
.wordmark strong{font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:clamp(1.06rem,2vw,1.31rem)}
.wordmark em{font-family:var(--font-display); font-style:italic; letter-spacing:.02em; font-size:clamp(1.31rem,2.6vw,1.75rem)}

/* Buchen-Badge (fixiert, oben rechts unter dem Menü) */
.book-badge{
  position:fixed; top:calc(var(--header-h) + 8px); right:var(--gutter); z-index:115;
  width:clamp(92px, 11vw, 128px); transition:transform .35s var(--ease), filter .35s var(--ease);
  filter:drop-shadow(0 8px 18px rgba(50,46,41,.25));
}
.book-badge img{width:100%; border-radius:50%}
.book-badge:hover{transform:scale(1.06) rotate(-3deg)}

/* ---------- Overlays (Sprache / Menü) ---------- */
.overlay{
  position:fixed; inset:0; z-index:200; background:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--gutter); opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.overlay.open{opacity:1; visibility:visible}
.overlay[hidden]{display:flex}
.overlay-close{
  position:absolute; top:24px; right:var(--gutter); font-size:2.4rem; line-height:1;
  background:none; border:0; cursor:pointer; color:var(--text);
}
.overlay-inner{width:100%; max-width:var(--maxw); text-align:center}
.overlay-title,.menu-col-title{font-family:var(--font-display); text-transform:uppercase; letter-spacing:var(--ls-wide); font-weight:400}
.overlay-title{font-size:clamp(2rem,5vw,3.4rem); margin:.1em 0 .8em}

.menu-columns{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,5vw,72px); text-align:left}
.menu-col-title{font-size:1.7rem; margin:.05em 0 .7em; color:var(--text)}
.menu-col ul{list-style:none; margin:0; padding:0}
.menu-col li{margin:.55em 0}
.menu-col a{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:1rem; color:var(--taupe-grey); transition:color .3s}
.menu-col a:hover{color:var(--beige-800)}
.menu-contact{margin-top:clamp(28px,5vw,56px); font-family:var(--font-display); letter-spacing:.1em; color:var(--beige-800); display:flex; gap:1em; flex-wrap:wrap; justify-content:center}

.lang-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.3em 1.4em; max-width:960px; margin-inline:auto}
.lang-grid a{display:block; padding:.45em 0; font-family:var(--font-display); letter-spacing:.06em; font-size:clamp(1.4rem,2.4vw,2rem); color:var(--taupe-grey); border-bottom:1px solid transparent; transition:.3s}
.lang-grid a:hover{color:var(--beige-800); border-color:var(--beige-300)}
.lang-grid a.is-active{color:var(--beige-800)}
.lang-grid a[data-soon]{opacity:.55}
.lang-note{margin-top:1.6em; font-size:.85rem; color:var(--greige)}

/* ---------- Layout-Helfer ---------- */
.section{max-width:var(--maxw); margin-inline:auto; padding:var(--section-y) var(--gutter)}
/* Kein Cremestreifen zwischen Speisekarten und Biergarten: untere Section-Reserve entfernen */
#restaurant{padding-bottom:0}
.section-head{margin-bottom:clamp(36px,5vw,64px)}
.section-head.center{text-align:center}
.full{width:100%}

/* ---------- SEKTOR 1 — Hero ---------- */
.hero{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden}
.hero-media,.hero-img{position:absolute; inset:0; width:100%; height:100%}
.hero-img{object-fit:cover; transform:scale(1.05); animation:kenburns 18s ease-out forwards}
@keyframes kenburns{to{transform:scale(1)}}
.hero-tint{position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,26,23,.36),rgba(28,26,23,.18) 40%,rgba(28,26,23,.5))}
.hero-content{position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); width:100%}
/* Hero-Logo (zentriert, statt Schriftzug) */
.hero-content--logo{text-align:center}
.hero-logo-wrap{margin:0}
.hero-logo{display:inline-block; width:clamp(195px,30vw,420px); height:auto; filter:drop-shadow(0 8px 26px rgba(28,26,23,.5))}
.hero-title{font-family:var(--font-display); color:#fff; text-transform:uppercase; letter-spacing:var(--ls-wide); font-weight:400; font-size:clamp(2.8rem,9vw,7rem); line-height:1; margin:.06em 0 .5em}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hours-card{
  margin-top:clamp(24px,4vh,40px);
  background:rgba(250,246,243,.92); backdrop-filter:blur(6px); border:1px solid var(--beige-200);
  padding:26px 30px; max-width:340px; box-shadow:var(--shadow-soft); border-radius:var(--radius);
}
.hours-title{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:1rem; margin:0 0 .8em; color:var(--beige-800)}
.hours-card dl{margin:0}
.hours-card dl>div{padding:.4em 0; border-top:1px solid var(--beige-200)}
.hours-card dl>div:first-child{border-top:0}
.hours-card dt{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--taupe-grey)}
.hours-card dd{margin:0; font-size:.92rem}
.scroll-indicator{position:absolute; left:50%; bottom:calc(var(--bookingbar-h) + 18px); transform:translateX(-50%); z-index:2; width:24px; height:40px; border:2px solid rgba(255,255,255,.7); border-radius:14px}
.scroll-indicator span{position:absolute; left:50%; top:8px; width:4px; height:8px; background:#fff; border-radius:2px; transform:translateX(-50%); animation:scrolldot 1.6s infinite}
@keyframes scrolldot{0%{opacity:0; top:8px}40%{opacity:1}80%{opacity:0; top:22px}100%{opacity:0}}

/* ---------- Vorlage A — Split ---------- */
.split-inner{display:grid; grid-template-columns:45% 55%; align-items:center; gap:clamp(28px,5vw,72px); margin-bottom:clamp(56px,9vw,120px)}
.split-inner:last-child{margin-bottom:0}
.split-inner--mirror .split-text{order:2}
.split-media{position:relative}
.split-media img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); position:relative; z-index:1}
.media-block{position:absolute; inset:auto -22px -22px auto; width:62%; height:70%; background:#43705E; border-radius:var(--radius); z-index:0}
/* Dezente Pfeile unter dem Bild zum Wechseln */
.media-nav{position:relative; z-index:2; display:flex; gap:10px; justify-content:flex-end; margin-top:14px}
.media-arrow{width:40px; height:40px; border:1px solid var(--beige-300); background:rgba(255,255,255,.85); border-radius:50%; cursor:pointer; color:var(--beige-800); font-size:1.3rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:border-color .25s var(--ease), background .25s var(--ease)}
.media-arrow:hover{background:#fff; border-color:var(--beige-600)}
.split-inner--mirror .media-block{inset:auto auto -22px -22px}
.media-block--dark{background:var(--beige-900)}
/* Jagdstube: Blätter-Pfeile in das Beige-Feld unten links setzen (statt unter dem Bild rechts) */
#jagdstube .media-block{inset:auto auto -30px -30px}
#jagdstube .media-nav{position:absolute; left:-10px; bottom:-24px; margin:0; padding:0; gap:10px; justify-content:flex-start; z-index:3}

/* Speisekarten-Trio ---------- */
.menu-cards{position:relative; margin-top:clamp(40px,6vw,80px); padding-block:clamp(40px,6vw,80px)}
.menu-cards > *:not(.menu-cards-bg){position:relative; z-index:1}
/* Parallax-Hintergrund hinter den Speisekarten (Bild + Cream-Vorhang) */
.menu-cards-bg{position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); z-index:0; overflow:hidden}
.menu-cards-bg-img{position:absolute; left:0; right:0; top:-20%; bottom:-20%; background:url("../../laerchenheim-stubaital/11.jpg") center/cover no-repeat; will-change:transform}
.menu-cards-curtain{position:absolute; inset:0; background:var(--cream); opacity:.75}
.menu-cards-head{text-align:center; margin-bottom:clamp(28px,4vw,48px)}
.cards-trio{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,22px); max-width:62.5%; margin-inline:auto}
.menu-card-item{text-align:center}
.menu-card{display:block; width:100%; background:#fff; border:1px solid var(--beige-200); padding:0; cursor:pointer; border-radius:var(--radius); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.menu-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft)}
.menu-card img{width:100%; aspect-ratio:210/297; object-fit:contain; background:#fff}
.menu-card-label{display:block; padding:14px 4px 0; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:1.25rem; color:var(--beige-800)}
.menu-card-label small{display:block; font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:.92rem; color:var(--taupe-grey); margin-top:.4em}

/* ---------- Bandshot (Vorlage B) ---------- */
.bandshot{position:relative; min-height:78vh; display:flex; align-items:center; overflow:hidden}
.bandshot-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bandshot-tint{position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(28,26,23,.74), rgba(28,26,23,.34) 45%, rgba(28,26,23,.10) 78%),
  linear-gradient(0deg, rgba(28,26,23,.55), rgba(28,26,23,0) 52%)}
.bandshot-content{position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; padding:var(--section-y) var(--gutter); width:100%}
.bandshot-content p.light{max-width:44ch; font-size:clamp(1.12rem,1.7vw,1.4rem); line-height:1.62}
/* Weicher dunkler Schatten hinter dem Text für bessere Lesbarkeit über Bildern */
.bandshot-content,.bus-content{text-shadow:0 1px 3px rgba(15,13,10,.7), 0 2px 22px rgba(15,13,10,.55)}

.beige-band{background:var(--beige-100); padding:var(--section-y) var(--gutter)}
.wellness-gallery .gallery-thumbs,.events-grid,.dark-thumbs{max-width:var(--maxw); margin-inline:auto}
.gallery-thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.gallery-thumbs button{padding:0; border:2px solid transparent; cursor:pointer; background:none; border-radius:var(--radius); overflow:hidden; transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.gallery-thumbs img{aspect-ratio:1/1; object-fit:cover; transition:transform .4s var(--ease)}
.gallery-thumbs button:hover img{transform:scale(1.08)}

/* Wellness-Thumbnails über dem Bild positioniert (25 % kleiner), rechtsbündig, mit hellem Scheinrahmen */
/* Text in den unteren Bereich (näher an die Galerie) rücken, unten Platz für die Galerie reservieren */
.bandshot.has-overbar{align-items:flex-end; padding-bottom:clamp(200px,26vh,250px)}
.bandshot.has-overbar .bandshot-content{padding-bottom:clamp(8px,1.5vh,18px)}
/* WELLNESS- & BIERGARTEN-Sektor ~2 cm höher: oben + unten je ~1 cm */
#wellness,#biergarten{min-height:calc(78vh + 76px)}                                   /* +~2 cm Gesamthöhe */
#wellness.has-overbar,#biergarten.has-overbar{padding-bottom:calc(clamp(200px,26vh,250px) + 38px)} /* Text ~1 cm nach oben → Platz unten */
#wellness .wellness-overbar,#biergarten .wellness-overbar{bottom:calc(clamp(18px,4vh,42px) + 38px)} /* Thumbnails ~1 cm höher → mehr Bild unten */
.wellness-overbar{position:absolute; left:0; right:0; bottom:clamp(18px,4vh,42px); z-index:3; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; justify-content:flex-start}
.gallery-thumbs--over{width:75%}
/* immer eine flache Reihe (6 Spalten), auch mobil – überschreibt die responsiven Galerie-Spalten */
.bandshot .gallery-thumbs--over{grid-template-columns:repeat(6,1fr); gap:clamp(6px,1.4vw,14px)}
#biergarten .gallery-thumbs--over{grid-template-columns:repeat(5,1fr)} /* Biergarten hat 5 Bilder (kein -04) */
.gallery-thumbs--over button{border-color:rgba(255,255,255,.65); box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 10px 26px rgba(0,0,0,.4)}
.gallery-thumbs--over button:hover{border-color:#fff}
.gallery-thumbs--over button.is-active{border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.5), 0 10px 28px rgba(0,0,0,.55)}

/* ---------- SEKTOR 3 — Rooms (Vorlage C) ---------- */
.rooms{background:var(--cream)}
/* Hotelzimmer rücken direkt unter den Intro-Sektor (kein Doppelabstand mehr) */
#hotelzimmer{padding-top:clamp(60px,10vw,120px)}
.room-specs{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 26px; margin-bottom:clamp(36px,5vw,56px)}
.room-specs span{display:inline-flex; align-items:center; gap:.5em; font-size:.82rem; color:var(--taupe-grey); text-transform:uppercase; letter-spacing:.08em}
.room-specs svg{width:22px; height:22px; fill:none; stroke:var(--beige-600); stroke-width:1.3}
.room-card{text-align:center}
.room-card-media{overflow:hidden; border-radius:var(--radius); margin-bottom:14px}
.room-card-media img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s var(--ease)}
.room-card:hover .room-card-media img{transform:scale(1.07)}
.room-card h3{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-weight:400; font-size:1.1rem; margin:.2em 0 .3em}

/* Hotelzimmer: links 2×2-Bilderblock, rechts einspaltige Ausstattung */
.rooms-split{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:clamp(28px,4vw,56px); align-items:start; max-width:1200px; margin-inline:auto}
.rooms-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,1.8vw,26px)}
.room-card-foot{margin-bottom:0}
.room-card-foot h3{margin:.2em 0 .3em}
/* Ausstattungsliste rechts – bleibt beim Scrollen sichtbar */
.room-specs--list{flex-direction:column; flex-wrap:nowrap; align-items:flex-start; justify-content:flex-start; gap:14px; margin:0; position:sticky; top:calc(var(--header-h) + 24px)}
.room-specs-title{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-weight:400; font-size:clamp(1.2rem,2vw,1.5rem); margin:0 0 .2em; color:var(--beige-800)}
/* Häkchen-Liste, einspaltig */
.room-specs-grid{list-style:none; margin:0; padding:0; width:100%; display:grid; grid-template-columns:1fr; gap:12px; text-align:left}
.room-specs-grid li{position:relative; padding-left:1.7em; font-size:.92rem; line-height:1.45; color:var(--taupe-grey)}
.room-specs-grid li::before{content:""; position:absolute; left:0; top:.18em; width:1.05em; height:1.05em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B38E65' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center/contain}

/* Intro-Sektor: Titel einzeilig + Zusatzzeile */
#hotel .section-title{white-space:nowrap; font-size:clamp(1.9rem,4.6vw,3.6rem)}
.hotel-hours{margin:1.1em 0 0; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:1.15rem; color:var(--text)}
.hotel-hours strong{color:var(--beige-700); font-weight:600; margin-right:.5em}
/* So finden Sie uns — Adresse & Kontakt */
.find-us{margin-top:1.6em}
.find-address{font-style:normal; font-size:1rem; line-height:1.6; color:var(--text); margin:0 0 1em}
.find-address strong{font-weight:600}
.find-features{list-style:none; margin:0 0 1.1em; padding:0; display:grid; gap:.5em}
.find-features li{position:relative; padding-left:1.5em; font-size:.95rem; line-height:1.45; color:var(--taupe-grey)}
.find-features li::before{content:""; position:absolute; left:0; top:.5em; width:.5em; height:.5em; border-radius:50%; background:var(--beige-600)}
.find-contact{display:flex; flex-wrap:wrap; gap:.3em 1.8em; margin:0; font-size:.98rem}
.find-contact strong{font-weight:600; color:var(--beige-800)}
.find-contact a{color:var(--beige-700)}
.find-contact a:hover{text-decoration:underline}

/* ---------- SEKTOR 5 — Dark ---------- */
.section--dark{max-width:none; background:#ccb297; color:var(--text)}
.section--dark .split-inner{max-width:var(--maxw); margin-inline:auto}
.section--dark .section-title{font-size:clamp(1.9rem,4.2vw,3.3rem)}
.section--dark p{color:var(--text)}
/* Beige-Hintergrund: vormals weiße Texte dunkel überschreiben (nur in diesem Sektor) */
.section--dark .section-title--light{color:var(--near-black)}
.section--dark .section-title .amp{color:var(--beige-700)}
.section--dark .script-eyebrow--light{color:var(--beige-700)}
.section--dark p.light{color:var(--text)}
.sky-logo{width:88px; margin-top:18px; background:#fff; padding:10px 14px; border-radius:var(--radius)}
.dark-thumbs{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:clamp(40px,6vw,72px); padding-inline:0; max-width:var(--maxw); margin-inline:auto}
.dark-thumbs button{padding:0; border:2px solid transparent; background:none; cursor:pointer; border-radius:var(--radius); overflow:hidden; transition:border-color .3s var(--ease)}
.dark-thumbs img{aspect-ratio:4/3; object-fit:cover; transition:transform .4s var(--ease)}
.dark-thumbs button:hover img{transform:scale(1.07)}
.dark-thumbs .bowl-thumb.is-active{border-color:var(--beige)}
.split-media img{transition:opacity .3s var(--ease)}

/* ---------- SEKTOR 6 — Events (Vorlage D) ---------- */
.events .section-head{margin-inline:auto}
.events-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,28px)}
.event-card{position:relative; border-radius:var(--radius); overflow:hidden}
.event-card img{aspect-ratio:3/4; object-fit:cover; transition:transform .5s var(--ease)}
.event-card:hover img{transform:scale(1.06)}
.event-card h3{position:absolute; inset:auto 0 0 0; margin:0; padding:18px; color:#fff; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-weight:400; font-size:1.05rem; background:linear-gradient(0deg,rgba(28,26,23,.78),transparent)}

/* ---------- SEKTOR 7 — Meetings ---------- */
/* Parallax-Hintergrundbild + Beige-Vorhang (Bild bleibt liegen, Seite zieht darüber) */
.meetings{position:relative}
.meetings > *:not(.meetings-bg){position:relative; z-index:1}
/* Hintergrund full-bleed: volle Fensterbreite, unabhängig von der zentrierten Inhaltsbreite */
.meetings-bg{position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); z-index:0; overflow:hidden}
.meetings-bg-img{position:absolute; left:0; right:0; top:-20%; bottom:-20%;
  background:url("../../laerchenheim-stubaital/11.jpg") center/cover no-repeat;
  will-change:transform}
.meetings-curtain{position:absolute; inset:0; background:var(--cream); opacity:.75}

/* Intro-Zeile: Fließtext links bündig + 3 Bilder rechts (gleiche Höhe wie der Text) */
.meetings-intro{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:stretch; max-width:var(--maxw); margin:0 auto clamp(36px,5vw,64px)}
.meetings-intro-text{text-align:left; max-width:none; margin:0; align-self:center; color:var(--text)}
.meetings-intro-gallery{position:relative; min-height:200px}
.meetings-intro-gallery-inner{position:absolute; inset:0; display:flex; gap:10px}
.meetings-intro-gallery-inner img{flex:1 1 0; min-width:0; height:100%; object-fit:cover; border-radius:var(--radius)}

/* Gruppen-Buttons (Hotel / Gasthof) */
.room-tabs{display:flex; justify-content:center; gap:12px; margin-bottom:clamp(28px,4vw,44px); flex-wrap:wrap}
.room-tab{background:#fff; border:1px solid var(--beige-300); padding:13px 26px; cursor:pointer; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; color:var(--taupe-grey); border-radius:var(--radius); transition:.3s}
.room-tab:hover{border-color:var(--beige-500); color:var(--beige-800)}
.room-tab.is-active{background:var(--beige-700); color:#fff; border-color:var(--beige-700)}

/* Aufklappbarer Detailbereich (Höhe wird per GSAP animiert; Start zugeklappt) */
.room-detail{height:0; overflow:hidden}

/* Überschrift zum gewählten Raum – eine Zeile, kräftig */
.room-heading{text-align:center; font-family:var(--font-body); font-weight:600; font-size:clamp(1.15rem,2.4vw,1.6rem); color:var(--beige-900); letter-spacing:.01em; margin:0 0 clamp(20px,3vw,34px)}

/* Viewer: Grundriss (650×350) links + Bestuhlungsvarianten (3×2) rechts, gleiche Höhe */
.room-viewer{display:grid; grid-template-columns:minmax(0,650px) minmax(0,1fr); gap:clamp(18px,3vw,40px); align-items:stretch; max-width:1100px; margin-inline:auto}
.room-viewer-media{margin:0; min-width:0}
/* Transparente PNG-Grundrisse: ohne Rahmen/Hintergrund direkt auf dem Seitenhintergrund */
.room-viewer-media img{width:100%; max-width:650px; aspect-ratio:650/350; object-fit:contain}

/* Infotext (unten, zentriert) */
.room-info{max-width:760px; margin:clamp(28px,4vw,44px) auto 0; text-align:center}
.room-info h3{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-weight:400; font-size:clamp(1.5rem,3.2vw,1.9rem); color:var(--text); margin:.1em 0 .35em}
.room-meta{display:flex; flex-wrap:wrap; justify-content:center; gap:.5em .9em; margin:0 0 1em; font-family:var(--font-display); letter-spacing:.06em; text-transform:uppercase; font-size:.82rem}
.room-meta .room-sqm{background:var(--beige-700); color:#fff; padding:.3em .8em; border-radius:var(--radius)}
.room-meta .room-cap{color:var(--beige-800); padding:.3em 0; align-self:center}
.room-desc{color:var(--taupe-grey); margin-bottom:0}

/* Raum-Links */
/* 5 Buttons pro Reihe (10 Hotel-Räume → 5 + 5); direkt unter den Gruppen-Buttons */
.room-links{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:0 auto clamp(28px,4vw,44px); max-width:980px}
.room-link{background:#fff; border:1px solid var(--beige-200); padding:9px 16px; cursor:pointer; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:.76rem; color:var(--taupe-grey); border-radius:var(--radius); transition:.25s; white-space:nowrap}
.room-link:hover{border-color:var(--beige-500); color:var(--beige-800)}
.room-link.is-active{background:var(--beige-700); color:#fff; border-color:var(--beige-700)}
.room-link span{opacity:.65; margin-left:.45em}
.room-link.is-active span{opacity:.85}

/* Bestuhlungsvarianten – 3 Spalten × 2 Reihen, füllt die Höhe des Grundriss-Bildes */
.seating-grid{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1fr 1fr; gap:10px; height:100%; min-height:0}
/* Transparente PNG-Icons: ohne Kärtchen-Hintergrund/Rahmen direkt auf dem Seitenhintergrund */
.seat-variant{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2em; margin:0; min-height:0; overflow:hidden; text-align:center; padding:8px 6px; transition:opacity .3s, filter .3s}
.seat-variant img{width:auto; max-width:78%; max-height:84px; object-fit:contain; margin:0}
.seat-variant figcaption{font-size:.72rem; color:var(--taupe-grey); text-transform:uppercase; letter-spacing:.06em}
.seat-cap{display:block; font-family:var(--font-display); letter-spacing:.04em; font-size:clamp(1rem,1.5vw,1.2rem); color:var(--beige-800)}
.seat-variant.is-off{opacity:.45; filter:grayscale(1)}
.seat-variant.is-off .seat-cap{color:var(--greige)}
.seating-note{text-align:center; max-width:60ch; margin:1.4em auto 0; font-size:.82rem; color:var(--taupe-grey)}

/* CTA-Button (öffnet Anfrage-Popup) */
.room-cta{text-align:center; margin-top:clamp(28px,4vw,44px)}
.events-cta{text-align:center; margin-bottom:clamp(36px,5vw,56px)}

/* Popup: Cookie-Einstellungen */
.overlay--cookie{justify-content:flex-start; overflow-y:auto}
.cookie-inner{max-width:560px; margin-inline:auto; padding-block:clamp(56px,10vh,96px); text-align:left}
.cookie-inner .overlay-title,.cookie-inner .script-eyebrow{text-align:center}
.cookie-intro{color:var(--taupe-grey); margin:0 0 1.4em}
.cookie-intro a{color:var(--beige-800); text-decoration:underline}
.cookie-cat{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 0; border-top:1px solid var(--beige-200)}
.cookie-cat-text strong{display:block; font-family:var(--font-display); letter-spacing:.04em; color:var(--text)}
.cookie-cat-text span{font-size:.85rem; color:var(--taupe-grey)}
.cookie-switch{position:relative; flex:0 0 auto; width:48px; height:26px; cursor:pointer}
.cookie-switch input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.cookie-switch > span{position:absolute; inset:0; background:var(--beige-300); border-radius:999px; transition:.25s}
.cookie-switch > span::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:.25s}
.cookie-switch input:checked + span{background:var(--beige-700)}
.cookie-switch input:checked + span::after{transform:translateX(22px)}
.cookie-switch input:disabled{cursor:not-allowed}
.cookie-switch input:disabled + span{opacity:.65}
.cookie-buttons{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:1.8em}
.cookie-buttons .cookie-save{grid-column:1 / -1}
.cookie-actions{flex-wrap:wrap}

/* Popup: Rechtstexte (Impressum / Datenschutz / AGB) – über dem Cookie-Fenster */
.overlay--legal{justify-content:flex-start; overflow-y:auto; z-index:210}
.legal-inner{max-width:760px; margin-inline:auto; padding-block:clamp(56px,10vh,96px); text-align:left}
.legal-inner .overlay-title{text-align:center}
.legal-body{color:var(--text); line-height:1.75}
.legal-body h4{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-weight:400; color:var(--beige-900); font-size:1.05rem; margin:1.7em 0 .4em}
.legal-body p{margin:0 0 1em; font-size:.95rem}
.legal-body a{color:var(--beige-800); text-decoration:underline; word-break:break-word}

/* Popup: Seminarraum-Anfrage */
.overlay--inquiry{justify-content:flex-start; overflow-y:auto}
.inquiry-inner{max-width:640px; margin:auto; padding-block:clamp(56px,10vh,96px)}
.inquiry-room{color:var(--taupe-grey); margin-bottom:1.6em}
.inquiry-room strong{font-family:var(--font-display); letter-spacing:.04em; color:var(--beige-800)}
.inquiry-form{text-align:left}
.inquiry-form .btn{width:100%; margin-top:6px}
.field select{font-family:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--beige-300); border-radius:var(--radius); background:#fff; color:var(--text)}
.field select:focus{outline:2px solid var(--beige-500); outline-offset:1px; border-color:var(--beige-500)}

/* ---------- SEKTOR 8 — Busse ---------- */
.bus-band{position:relative; min-height:46vh; display:flex; align-items:center; overflow:hidden; background:var(--sand-light)}
.bus-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bus-tint{position:absolute; inset:0; background:linear-gradient(90deg,rgba(28,26,23,.66),rgba(28,26,23,.2))}
.bus-content{position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; padding:clamp(48px,7vw,90px) var(--gutter); width:100%}
.bus-content .section-title{font-size:clamp(1.8rem,4.5vw,3rem)}

/* ---------- SEKTOR 9 — Kontakt ---------- */
.cta-band{display:grid; grid-template-columns:repeat(3,1fr); background:var(--beige); border-radius:var(--radius); overflow:hidden; margin-bottom:clamp(48px,7vw,80px)}
.cta-field{display:flex; align-items:center; justify-content:center; gap:.7em; padding:26px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.92rem; color:var(--text); border-right:1px solid rgba(50,46,41,.14); transition:background .3s}
.cta-field:last-child{border-right:0}
.cta-field:hover{background:var(--beige-400)}
.cta-ico svg{width:30px; height:30px; fill:none; stroke:var(--beige-900); stroke-width:1.2}
.contact-split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start}
.map-embed{position:relative}
/* Karte: farblich an die warme Seitenpalette angepasst */
.contact-map iframe{display:block; width:100%; aspect-ratio:4/3; border:1px solid var(--beige-200); border-radius:var(--radius);
  pointer-events:none; filter:sepia(.42) saturate(.78) hue-rotate(-8deg) brightness(1.04) contrast(.93)}
/* Overlay: Karte ist sofort sichtbar, lässt sich aber erst nach einem Klick bewegen */
.map-guard{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:16px; cursor:pointer; border-radius:var(--radius); background:rgba(28,26,23,.02); transition:background .2s var(--ease)}
.map-guard:hover{background:rgba(28,26,23,.06)}
.map-guard span{background:rgba(28,26,23,.72); color:#fff; padding:8px 16px; border-radius:var(--radius); font-size:.82rem; letter-spacing:.03em; opacity:0; transition:opacity .2s var(--ease)}
.map-guard:hover span{opacity:1}
.map-embed.is-active .map-guard{display:none}
.map-embed.is-active iframe{pointer-events:auto}
.contact-map .arrow-link{margin-top:14px}
.contact-info address{font-style:normal; margin-bottom:2em; line-height:1.9}
.contact-info address strong{font-family:var(--font-display); letter-spacing:.04em; font-size:1.1rem}
.reserve-form h3{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-weight:400; font-size:1.15rem; margin:0 0 1em}
.field{margin-bottom:16px; display:flex; flex-direction:column}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field label,.consent{font-size:.82rem; color:var(--taupe-grey)}
.field label{margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em}
.field input,.field textarea{font-family:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--beige-300); border-radius:var(--radius); background:#fff; color:var(--text)}
.field input:focus,.field textarea:focus{outline:2px solid var(--beige-500); outline-offset:1px; border-color:var(--beige-500)}
.hp{position:absolute; left:-9999px; width:1px; height:1px}
.consent{display:flex; gap:.6em; align-items:flex-start; margin:6px 0 18px; line-height:1.5}
.consent input{margin-top:.2em}
.form-status{margin-top:1em; font-size:.9rem; min-height:1.2em}
.form-status.ok{color:var(--linden-green)}
.form-status.err{color:var(--bordeaux,#7A3B3B)}

/* ---------- Footer ---------- */
.site-footer{background:#CCB397; color:var(--text)}
.footer-inner{max-width:var(--maxw); margin-inline:auto; padding:clamp(48px,7vw,80px) var(--gutter) clamp(28px,4vw,48px); display:grid; grid-template-columns:1fr auto auto; gap:clamp(28px,5vw,72px)}
.footer-logo{height:156px; opacity:1}
.footer-tagline{font-family:var(--font-script); color:var(--beige); font-size:2rem; line-height:.8; margin-top:.2em}
.footer-col h4{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; font-weight:400; color:var(--near-black); font-size:.92rem; margin:0 0 1em}
.footer-col ul{list-style:none; margin:0; padding:0}
.footer-col li{margin:.5em 0}
.footer-col a{transition:color .3s}
.footer-col a:hover{color:var(--beige-900)}
.footer-social{display:flex; gap:12px; margin-top:1.2em}
.footer-social a{display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid rgba(50,46,41,.35); border-radius:50%; transition:.3s}
.footer-social a:hover{border-color:var(--beige-900); color:var(--beige-900)}
.footer-social svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4}
.footer-bottom{border-top:1px solid rgba(50,46,41,.2); padding:20px var(--gutter); text-align:center; font-size:.82rem; color:rgba(50,46,41,.7)}
.footer-bottom p{margin:0}

/* ---------- Buchungsleiste (unten, fixiert) ---------- */
.booking-bar{
  position:fixed; inset:auto 0 0 0; z-index:110; height:var(--bookingbar-h);
  display:flex; align-items:center; gap:0; background:var(--cream); border-top:1px solid var(--beige-300);
  box-shadow:0 -6px 24px rgba(50,46,41,.1); padding-left:clamp(10px,3vw,28px); padding-right:0;
}
.bb-brand{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; font-size:.85rem; padding-right:20px; white-space:nowrap}
.bb-brand strong{color:var(--beige-800)}
.bb-guarantee{color:var(--taupe-grey); font-size:.82rem; padding-inline:20px; border-left:1px solid var(--beige-200); white-space:nowrap}
.bb-date{display:flex; flex-direction:column; align-items:center; text-align:center; padding-inline:18px; border-left:1px solid var(--beige-200); flex:1; min-width:0}
.bb-date span{font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; color:var(--taupe-grey)}
.bb-date input{border:0; background:none; font-family:inherit; font-size:.92rem; color:var(--text); padding:2px 0; width:100%}
.bb-date input:focus{outline:none}
.bb-datebtn{border:0; background:none; font-family:inherit; font-size:.92rem; color:var(--taupe-grey); padding:2px 0; width:100%; text-align:center; cursor:pointer}
.bb-datebtn.has-value{color:var(--text)}
.bb-datebtn:focus-visible{outline:2px solid var(--beige-500); outline-offset:2px}

/* Großer Kalender, öffnet nach oben über der Buchungsleiste */
.bb-cal{position:fixed; z-index:140; left:16px; bottom:calc(var(--bookingbar-h) + 10px);
  width:min(94vw, 440px); background:#fff; border:1px solid var(--beige-300); border-radius:var(--radius);
  box-shadow:0 -12px 44px rgba(50,46,41,.24); padding:18px;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .2s var(--ease), transform .2s var(--ease)}
.bb-cal.open{opacity:1; visibility:visible; transform:translateY(0)}
.bb-cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.bb-cal-title{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:1.05rem; color:var(--beige-800)}
.bb-cal-nav{width:42px; height:42px; border:1px solid var(--beige-200); background:#fff; border-radius:var(--radius); cursor:pointer; font-size:1.5rem; line-height:1; color:var(--beige-800); transition:.2s}
.bb-cal-nav:hover{background:var(--beige-50); border-color:var(--beige-400)}
.bb-cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:6px}
.bb-cal-weekdays span{text-align:center; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--taupe-grey)}
.bb-cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.bb-cal-empty{aspect-ratio:1/1}
.bb-cal-day{aspect-ratio:1/1; border:0; background:var(--beige-50); border-radius:var(--radius); cursor:pointer; font-family:inherit; font-size:1.02rem; color:var(--text); transition:background .2s, color .2s}
.bb-cal-day:hover{background:var(--beige-200)}
.bb-cal-day.is-today{box-shadow:inset 0 0 0 1px var(--beige-400)}
.bb-cal-day.is-selected{background:var(--beige-700); color:#fff}
.bb-cal-day:disabled{opacity:.32; cursor:default; background:transparent}
.bb-count{display:flex; flex-direction:column; align-items:center; padding-inline:18px; border-left:1px solid var(--beige-200); flex:1 1 0; min-width:0; white-space:nowrap}
.bb-count > span{font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; color:var(--taupe-grey)}
.bb-stepper{display:flex; align-items:center; gap:9px; margin-top:3px}
.bb-step{width:26px; height:26px; border:1px solid var(--beige-300); background:#fff; border-radius:50%; cursor:pointer; color:var(--beige-800); font-size:1.05rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:border-color .2s, background .2s}
.bb-step:hover:not(:disabled){border-color:var(--beige-600); background:var(--beige-50)}
.bb-step:disabled{opacity:.4; cursor:default}
.bb-step-val{min-width:1.2em; text-align:center; font-size:.95rem; color:var(--text)}
.bb-submit{margin-left:auto; height:100%; padding-inline:clamp(18px,3vw,40px); background:var(--beige-700); color:#fff; border:0; cursor:pointer; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; font-size:.82rem; transition:background .3s; white-space:nowrap}
.bb-submit:hover{background:#530207}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:250; background:rgba(28,26,23,.92); display:flex; align-items:center; justify-content:center; padding:5vh 4vw; opacity:0; visibility:hidden; transition:opacity .3s}
.lightbox.open{opacity:1; visibility:visible}
.lightbox[hidden]{display:flex}
.lightbox figure{margin:0; max-width:min(960px,100%); max-height:90vh; display:flex; flex-direction:column; align-items:center}
.lightbox img{max-width:100%; max-height:82vh; object-fit:contain; border-radius:var(--radius)}
.lightbox figcaption{color:rgba(255,255,255,.8); margin-top:14px; font-size:.9rem; letter-spacing:.04em}
.lightbox-close{position:absolute; top:20px; right:30px; font-size:2.6rem; color:#fff; background:none; border:0; cursor:pointer; line-height:1}

/* ---------- Cookie-Banner ---------- */
.cookie-banner{position:fixed; left:var(--gutter); right:var(--gutter); bottom:calc(var(--bookingbar-h) + 14px); z-index:130; max-width:540px; margin-inline:auto; background:#fff; border:1px solid var(--beige-200); box-shadow:var(--shadow-soft); border-radius:var(--radius); padding:18px 22px; display:flex; flex-direction:column; gap:12px}
.cookie-banner[hidden]{display:none}
.cookie-banner-title{margin:0; font-family:var(--font-display); font-size:1.2rem; letter-spacing:.02em; color:var(--text)}
.cookie-banner p{margin:0; font-size:.85rem; color:var(--taupe-grey); line-height:1.6}
.cookie-banner a{color:var(--beige-800); text-decoration:underline; font-weight:600}
.cookie-banner .cookie-actions .btn{flex:1}
.cookie-actions{display:flex; gap:10px; justify-content:flex-end}

/* ---------- Reveal (GSAP/Fallback) ---------- */
.reveal{opacity:0; transform:translateY(40px)}
.no-motion .reveal{opacity:1; transform:none}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1199px){
  .gallery-thumbs{grid-template-columns:repeat(3,1fr)}
  .cards-grid,.events-grid{grid-template-columns:repeat(2,1fr)}
  .dark-thumbs{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  :root{--header-h:64px}
  .wordmark strong{letter-spacing:.12em}
  .book-badge{width:84px}
  .split-inner,.split-inner--mirror .split-text{grid-template-columns:1fr; order:0}
  .split-inner--mirror .split-media{order:0}
  .media-block{display:none}
  /* Jagdstube-Pfeile: ohne Beige-Block (ausgeblendet) wieder normal unter das Bild */
  #jagdstube .media-nav{position:relative; left:auto; bottom:auto; margin-top:14px; justify-content:flex-end}
  /* Hotelzimmer: einspaltig – erst Bilder, dann Ausstattung; Liste nicht mehr sticky */
  .rooms-split{grid-template-columns:1fr; gap:clamp(28px,6vw,44px)}
  .room-specs--list{position:static; align-items:center; text-align:center}
  .room-specs-title{align-self:center}
  /* Häkchen-Liste mittig als Block, Punkte bleiben linksbündig */
  .room-specs-grid{grid-template-columns:1fr; width:max-content; max-width:100%; margin-inline:auto}
  .cards-trio{grid-template-columns:1fr; max-width:420px; margin-inline:auto}
  .contact-split{grid-template-columns:1fr}
  .cta-band{grid-template-columns:1fr}
  .cta-field{border-right:0; border-bottom:1px solid rgba(50,46,41,.14)}
  .menu-columns{grid-template-columns:1fr; text-align:center; gap:28px}
  .meetings-intro{grid-template-columns:1fr; gap:22px}
  .meetings-intro-gallery{min-height:180px}
  .gallery-thumbs--over{width:100%}
  .room-viewer{grid-template-columns:1fr; gap:22px}
  .room-viewer-media img{margin-inline:auto}
  .seating-grid{grid-template-rows:auto; height:auto}
  .room-links{grid-template-columns:repeat(3,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr}
  .hours-card{max-width:none; margin:22px 0 0; backdrop-filter:none}
  .hero{display:block; min-height:auto; padding:calc(var(--header-h) + 40px) 0 40px}
  .hero-content{padding-top:4vh}
  .hero-title{font-size:clamp(2.4rem,10.5vw,4rem); letter-spacing:.05em}
  .scroll-indicator{display:none}
  /* Buchungsleiste mobil: nur Marke + Button */
  .bb-guarantee,.bb-date,.bb-count{display:none}
  .bb-submit{margin-left:auto}
  .booking-bar{justify-content:space-between}
}
@media (max-width:560px){
  .gallery-thumbs,.cards-grid,.events-grid,.dark-thumbs{grid-template-columns:1fr 1fr}
  .rooms-grid{grid-template-columns:1fr}
  .room-links{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr}
  .hero-cta .btn{flex:1}
  .hero-title{font-size:clamp(1.9rem,8.8vw,3rem); letter-spacing:.02em}
  /* Header kompakter, damit Wortmarke + beide Burger in eine Zeile passen */
  .header-inner{padding-inline:14px}
  .burger{font-size:.72rem; letter-spacing:.05em; gap:.4em}
  .wordmark{gap:.3em}
  .wordmark strong{font-size:.76rem; letter-spacing:.04em}
  .wordmark em{font-size:.92rem}
}

/* ===== FAQ ===== */
.faq-list{margin:clamp(24px,4vw,48px) 0 0; padding:0; max-width:960px; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(32px,5vw,72px)}
.faq-item{border-bottom:1px solid rgba(255,255,255,.25)}
.faq-item:first-child{border-top:1px solid rgba(255,255,255,.25)}
.faq-btn{width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 0; background:none; border:none; cursor:pointer; text-align:left; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:clamp(.82rem,1.3vw,.95rem); color:#fff; line-height:1.3}
.faq-btn:hover{color:var(--beige-200)}
.faq-icon{flex-shrink:0; width:18px; height:18px; position:relative; transition:transform .35s var(--ease)}
.faq-icon::before,.faq-icon::after{content:''; position:absolute; background:currentColor; border-radius:2px}
.faq-icon::before{width:12px; height:1.5px; top:50%; left:50%; transform:translate(-50%,-50%)}
.faq-icon::after{width:1.5px; height:12px; top:50%; left:50%; transform:translate(-50%,-50%); transition:transform .35s var(--ease)}
.faq-btn[aria-expanded="true"] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-answer{overflow:hidden; max-height:0; transition:max-height .4s var(--ease)}
.faq-answer p{padding:.3rem 0 1.2rem; color:rgba(255,255,255,.78); line-height:1.7; margin:0; font-size:.95rem}
.faq-item.is-open .faq-answer{max-height:600px}

/* ===== BEWERTUNGEN — Geteilte Erinnerungen (Parallax) ===== */
.reviews{position:relative; overflow:hidden; padding:var(--section-y) var(--gutter); color:#fff}
.reviews > *:not(.reviews-bg){position:relative; z-index:1}
.reviews-bg{position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); z-index:0; overflow:hidden}
.reviews-bg-img{position:absolute; left:0; right:0; top:-20%; bottom:-20%;
  background:url("../../laerchenheim-stubaital/11.jpg") center/cover no-repeat;
  will-change:transform}
.reviews-tint{position:absolute; inset:0; background:linear-gradient(rgba(28,26,23,.66), rgba(28,26,23,.72))}
.reviews-inner{max-width:var(--maxw); margin-inline:auto}
.reviews .section-head{margin-bottom:clamp(36px,5vw,60px)}
.reviews .lead{color:rgba(255,255,255,.88); max-width:52rem}
/* Bewertungsschnitt-Zeile (4,3 ★★★★⯨ (1,5K)) */
.rev-summary{display:flex; align-items:center; justify-content:center; gap:.45em; margin:1em 0 0; color:#fff; font-size:1.08rem; letter-spacing:.01em}
.rev-summary b{font-weight:600}
.rev-summary .rev-summary-count{color:rgba(255,255,255,.78)}
.rev-stars-rating{position:relative; display:inline-block; white-space:nowrap; letter-spacing:.12em; font-size:1.15rem; line-height:1; color:rgba(255,255,255,.32)}
.rev-stars-rating::before{content:"★★★★★"}
.rev-stars-fill{position:absolute; left:0; top:0; overflow:hidden; width:86%; color:var(--gold)}
/* Einfarbiger Hintergrund (statt Foto-Parallax) + 5,0-Bewertung */
.reviews--solid{background:#43705E}
.reviews--solid .rev-stars-fill{width:100%}
.rev-summary-grade{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:.92rem; color:var(--gold)}
.reviews-carousel{display:flex; align-items:center; gap:clamp(8px,1.6vw,20px)}
.rev-track{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px); flex:1 1 auto; min-width:0}
.rev-arrow{flex:0 0 auto; width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.10); color:#fff; font-family:var(--font-display); font-size:1.7rem; line-height:1;
  cursor:pointer; transition:background .3s var(--ease), border-color .3s var(--ease)}
.rev-arrow:hover{background:rgba(255,255,255,.24); border-color:#fff}
.rev-card{background:#fff; color:var(--text); border-radius:var(--radius); padding:clamp(20px,2.4vw,28px);
  box-shadow:var(--shadow-soft); display:flex; flex-direction:column; gap:14px; min-width:0}
.rev-head{display:flex; align-items:center; gap:13px}
.rev-avatar{flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:var(--beige-700); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.2rem; line-height:1}
.rev-id{min-width:0}
.rev-author{display:block; font-family:var(--font-display); letter-spacing:.02em; font-size:1.05rem; color:var(--text)}
.rev-meta{display:block; font-size:.8rem; letter-spacing:.02em; color:var(--taupe-grey)}
.rev-stars{color:var(--gold); letter-spacing:.14em; font-size:1.05rem; line-height:1}
.rev-text{margin:0; font-size:.95rem; line-height:1.62; color:var(--text); min-height:calc(1.62em * 6)}
@media (max-width:860px){ .rev-track{grid-template-columns:1fr} }

/* ===== Dialogshift-Chat über der fixierten Buchungsleiste halten ===== */
.ds-widget.ds-button,
.ds-widget.ds-chat{ bottom:calc(var(--bookingbar-h) + 20px) !important; }
.ds-widget.ds-content-wrapper{ bottom:calc(var(--bookingbar-h) + 100px) !important; }

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto}
  .hero-img{animation:none; transform:none}
  .reveal{opacity:1; transform:none}
}

/* ---------- Speisekarten: Intro & Hinweis ---------- */
.menu-cards-intro{margin:.8em auto 0}
.menu-cards-note{text-align:center; margin:clamp(28px,4vw,44px) auto 0; max-width:54ch; font-size:.9rem; color:var(--taupe-grey)}

/* ---------- LOKALITÄTEN — Bandshot (gleiche Anmutung wie Biergarten) ---------- */
/* Overbar trägt zwei Reihen: Buttons + Bilderstreifen */
.lokal-overbar{flex-direction:column; align-items:flex-start; gap:clamp(12px,1.6vh,18px)}
/* Buttons im Stil der Website (wie .room-tab), nicht abweichend */
.lokal-tabs{display:flex; gap:12px; flex-wrap:wrap; margin:clamp(20px,3vw,30px) 0}
.lokal-tab{display:inline-flex; align-items:center; gap:.55em; background:#fff; border:1px solid var(--beige-300); padding:13px 26px; cursor:pointer; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; color:var(--taupe-grey); border-radius:var(--radius); transition:.3s}
.lokal-tab:hover{border-color:var(--beige-500); color:var(--beige-800)}
.lokal-tab.is-active{background:var(--beige-700); color:#fff; border-color:var(--beige-700)}
.lokal-tab .lokal-tab-num{font-family:var(--font-body); font-weight:600; color:var(--beige-500)}
.lokal-tab.is-active .lokal-tab-num{color:rgba(255,255,255,.72)}

/* Text über dem Foto (hell) */
.lokal-lead{margin-bottom:1.1em}
.lokal-meta{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.84rem; color:var(--beige-200); margin:0 0 .35em}
.lokal-vtitle{font-family:var(--font-display); font-weight:400; color:#fff; font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.12; margin:0 0 .55em}
.lokal-desc{color:rgba(255,255,255,.9); max-width:112ch}
.lokal-desc p{margin:0 0 .7em; font-size:.96rem; line-height:1.55}
.lokal-desc p:last-child{margin-bottom:0}
.lokal-desc .lokal-hinweis{font-size:.86rem; color:rgba(255,255,255,.74)}

/* Bilderstreifen: 5 Fotos des gewählten Saals (Klick öffnet Lightbox) */
#lokalitaeten .gallery-thumbs--over{grid-template-columns:repeat(5,1fr)}

/* etwas höher + Platz unten für den Bilderstreifen (eine Reihe) */
#lokalitaeten{min-height:calc(78vh + 76px)}
#lokalitaeten.has-overbar{padding-bottom:calc(clamp(200px,26vh,250px) + 88px)}
/* mehr Abstand unterhalb des Bilderstreifens (Galerie) */
#lokalitaeten .wellness-overbar{bottom:calc(clamp(18px,4vh,42px) + 50px)}

@media (max-width:860px){
  .lokal-tabs{width:100%}
  .lokal-desc{max-width:none}
}

/* ---------- CTA-Buttons unter den Annehmlichkeiten ---------- */
.room-specs-cta{display:grid; gap:10px; width:100%; margin-top:clamp(20px,3vw,28px)}
.room-specs-cta .btn{width:100%}

/* ---------- Preisübersicht-Popup ---------- */
.price-table{width:100%; border-collapse:collapse; margin:.6em 0 1.4em; font-size:.95rem}
.price-table th{background:var(--beige-700); color:#fff; text-align:left; padding:11px 16px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-weight:400; font-size:.8rem}
.price-table th:last-child{text-align:right}
.price-table td{padding:10px 16px; border-top:1px solid var(--beige-200); color:var(--text)}
.price-table tbody tr:first-child td{border-top:0}
.price-table td:last-child{text-align:right; white-space:nowrap; font-weight:600; color:var(--beige-900)}
.price-table--rows{border:1px solid var(--beige-200)}
.price-table--rows td:first-child{font-weight:400}
.price-notes{margin:.3em 0 0; padding-left:1.2em; color:var(--taupe-grey)}
.price-notes li{margin:.35em 0; font-size:.92rem; line-height:1.5}

/* ---------- Wellness nutzt das Venue-Tabs-Layout (2 Bereiche, je 4 Bilder) ---------- */
#wellness .gallery-thumbs--over{grid-template-columns:repeat(4,1fr)}
#wellness.has-overbar{padding-bottom:calc(clamp(200px,26vh,250px) + 150px)}
#wellness .wellness-overbar{bottom:calc(clamp(18px,4vh,42px) + 50px)}