/* =========================================================
   Landgasthof Hotel Linde — 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:#9A754C;
  --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}

/* ---------- 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 -.15em;
}
.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(2.2rem, 6vw, 4.6rem); line-height:1.04; margin:.1em 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 .4em; 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)}

/* ---------- 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:var(--beige-800); border-color:var(--beige-800)}
.customForm{cursor:pointer}
.customForm:hover{background:var(--beige-800); border-color:var(--beige-800)}
.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: dunkle Schrift, weil das Startbild bewusst hell gezeigt wird. */
.site-header.over-hero{mix-blend-mode:normal; color:var(--near-black); text-shadow:0 1px 16px rgba(255,255,255,.7)}
/* 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)}
.burger--menu .burger-lines{display:none} /* Hamburger-Icon nur mobil sichtbar (statt "Menü"-Text) */
/* 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;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:var(--ls-wide);
  font-weight:400; font-size:clamp(1.28rem,2.45vw,1.85rem);
}
.wordmark strong,.wordmark em{font:inherit; letter-spacing:inherit; text-transform:inherit}
.wordmark em{font-style:normal}

/* 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,max-content); justify-content:center; gap:clamp(38px,7vw,92px); width:auto; max-width:none; 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(26px,4vw,48px); font-family:var(--font-display); letter-spacing:.09em; color:var(--beige-800); text-align:center}
.menu-contact p{margin:.35em 0; display:flex; gap:.58em; flex-wrap:wrap; justify-content:center; align-items:center}
.menu-contact a{color:var(--taupe-grey); transition:color .3s}
.menu-contact a:hover{color:var(--beige-800)}
.menu-linkline{font-size:.85rem; text-transform:uppercase}
.menu-address,.menu-contact-row{font-size:.9rem; letter-spacing:.07em; color:var(--beige-800)}
.menu-address{margin-top:1.25em}
.menu-contact-row a{color:var(--beige-800)}

.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(255,255,255,.16),rgba(255,255,255,.04) 38%,rgba(28,26,23,.16))}
.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(147px,22.5vw,315px); 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:var(--beige-100); 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)}
#restaurant > .split-inner:first-of-type .media-block{inset:auto -22px -8px auto}
#hotel .media-block,
#bowling .media-block--dark,
#tagungen .meetings-intro-slider .media-block{inset:auto -22px -8px auto}
#restaurant > .split-inner:first-of-type .media-nav{width:62%; margin:8px -22px 0 auto; padding:0; justify-content:center; align-items:center; gap:8px}
#hotel .media-nav,
#bowling .media-nav,
#tagungen .meetings-intro-slider .media-nav{width:62%; margin:8px -22px 0 auto; padding:0; justify-content:center; align-items:center; gap:8px}
#restaurant > .split-inner:first-of-type .media-arrow,
#jagdstube .media-arrow,
#hotel .media-arrow,
#bowling .media-arrow,
#tagungen .meetings-intro-slider .media-arrow{width:66px; height:42px; border:0; background:transparent; border-radius:0; color:#9A754C; font-size:0; line-height:1; padding:0}
#restaurant > .split-inner:first-of-type .media-arrow:hover,
#jagdstube .media-arrow:hover,
#hotel .media-arrow:hover,
#bowling .media-arrow:hover,
#tagungen .meetings-intro-slider .media-arrow:hover{background:transparent; border-color:transparent; transform:translateY(-1px)}
#restaurant > .split-inner:first-of-type .media-arrow::before,
#jagdstube .media-arrow::before,
#hotel .media-arrow::before,
#bowling .media-arrow::before,
#tagungen .meetings-intro-slider .media-arrow::before{content:""; display:block; width:58px; height:25px; background:center / contain no-repeat}
#restaurant > .split-inner:first-of-type .media-arrow[data-media-dir="-1"]::before,
#jagdstube .media-arrow[data-media-dir="-1"]::before,
#hotel .media-arrow[data-media-dir="-1"]::before,
#bowling .media-arrow[data-media-dir="-1"]::before,
#tagungen .meetings-intro-slider .media-arrow[data-media-dir="-1"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 30'%3E%3Cg fill='none' stroke='%239A754C' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M61 13 C47 12 30 12 9 15' stroke-width='5'/%3E%3Cpath d='M18 5 C13 9 9 12 6 15 C11 17 15 21 20 25' stroke-width='5'/%3E%3Cpath d='M58 16 C43 15 28 16 11 17' stroke-width='2.2' opacity='.45'/%3E%3C/g%3E%3C/svg%3E")}
#restaurant > .split-inner:first-of-type .media-arrow[data-media-dir="1"]::before,
#jagdstube .media-arrow[data-media-dir="1"]::before,
#hotel .media-arrow[data-media-dir="1"]::before,
#bowling .media-arrow[data-media-dir="1"]::before,
#tagungen .meetings-intro-slider .media-arrow[data-media-dir="1"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 30'%3E%3Cg fill='none' stroke='%239A754C' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16 C22 14 39 14 59 13' stroke-width='5'/%3E%3Cpath d='M49 5 C55 9 60 11 63 14 C58 17 54 21 50 25' stroke-width='5'/%3E%3Cpath d='M10 18 C24 16 41 17 57 16' stroke-width='2.2' opacity='.45'/%3E%3C/g%3E%3C/svg%3E")}
.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 -8px -22px}
#jagdstube .media-nav{position:relative; width:62%; margin:8px auto 0 -22px; padding:0; gap:8px; justify-content:center; align-items:center; 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-size:cover; background-position:center; background-repeat: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}
.cards-duo{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,2vw,22px); max-width:43%; 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{width:100%; height:auto; 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{width:100%; grid-template-columns:repeat(auto-fit,140px)} /* Biergarten hat 5 Bilder (kein -04) */
#biergarten .gallery-thumbs--over button{width:140px; height:140px}
#biergarten .gallery-thumbs--over img{width:100%; height:100%}
.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 HOTEL-LINDE-Sektor (kein Doppelabstand mehr) */
#hotelzimmer{padding-top:0}
.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) 250px; 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)}
.room-pet-title{margin:1.65em 0 .55em}
/* 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}
.room-pet-note{margin:0; font-size:.88rem; line-height:1.55; color:var(--taupe-grey); text-align:left}

/* HOTEL-LINDE-Intro: Titel „LINDE HOTEL" einzeilig + Öffnungszeiten-Zeile */
#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}

/* ---------- SEKTOR 5 — Dark ---------- */
.section--dark{max-width:none; background:#ccb297; color:var(--text)}
.section--dark .split-inner{max-width:var(--maxw); margin-inline:auto}
#bowling .split-inner{max-width:1160px; margin-bottom:clamp(8px,2vw,24px)}
.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)}
.bowling-topic-title{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-weight:400; font-size:clamp(1rem,1.4vw,1.18rem); color:var(--near-black); margin:1.15em 0 .35em}
.section--dark .media-block--dark{inset:auto -22px -22px auto; width:62%; height:70%; background:#EEE6DD}
.section--dark .media-nav{margin-top:14px; padding:0}
.sky-logo{width:88px; margin-top:18px; background:#fff; padding:10px 14px; border-radius:var(--radius)}
.dark-thumbs{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,140px)); gap:12px; justify-content:start; justify-items:start; margin-top:clamp(40px,6vw,72px); padding-inline:0; max-width:var(--maxw); margin-inline:auto}
#bowling .dark-thumbs{max-width:1160px; grid-template-columns:repeat(auto-fit,140px); margin-top:0}
.dark-thumbs button{width:140px; max-width:100%; aspect-ratio:1/1; padding:0; border:2px solid rgba(255,255,255,.65); background:none; cursor:pointer; border-radius:var(--radius); overflow:hidden; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 10px 26px rgba(0,0,0,.4)}
.dark-thumbs img{width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .4s var(--ease)}
.dark-thumbs button:hover img{transform:scale(1.08)}
.dark-thumbs button:hover{border-color:#fff}
.dark-thumbs .bowl-thumb.is-active,.dark-thumbs .meetings-thumb.is-active{border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.5), 0 10px 28px rgba(0,0,0,.55)}
.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(2,1fr); gap:clamp(16px,2.4vw,28px); margin-bottom:clamp(36px,5vw,56px); padding-inline:12.5%}
.event-card{position:relative; border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column}
.event-card-visual{position:relative; aspect-ratio:16/9; overflow:hidden; flex-shrink:0}
.event-card-track{position:absolute; inset:0}
.event-card-track img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .6s var(--ease), transform .5s var(--ease)}
.event-card-track img.is-active{opacity:1}
.event-card:hover .event-card-track img.is-active{transform:scale(1.06)}
.event-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55); background:rgba(28,26,23,.35); color:#fff; font-family:var(--font-display);
  font-size:1.3rem; line-height:1; cursor:pointer; opacity:0; transition:opacity .3s var(--ease), background .3s var(--ease)}
.event-card:hover .event-arrow{opacity:1}
.event-arrow:hover{background:rgba(28,26,23,.65)}
.event-arrow--prev{left:10px}
.event-arrow--next{right:10px}
.event-card-info{position:relative; z-index:1; margin:0; padding:18px 20px; color:var(--text); background:#FBF6F3}
.event-card-info h3{margin:0; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-weight:400; font-size:1.05rem; color:var(--near-black)}
.event-card-desc{margin:0; padding-top:8px; font-size:.92rem; line-height:1.55; font-weight:300; color:var(--taupe-grey)}

/* ---------- 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-size:cover; background-position:center; background-repeat:no-repeat;
  will-change:transform}
.meetings-curtain{position:absolute; inset:0; background:var(--cream); opacity:.75}

/* Intro-Zeile: Fließtext links bündig + Bild-Slider rechts */
.meetings .section-head{margin-bottom:clamp(4px,1vw,12px)}
.meetings-intro{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; max-width:var(--maxw); margin:calc(-1 * clamp(8px,1.6vw,24px)) auto 0}
.meetings-intro-text{text-align:left; max-width:none; margin:0; align-self:start; color:var(--text)}
.meetings-intro-gallery{position:relative; min-height:0}
.meetings-intro-slider{overflow:visible}
.meetings-thumbs{grid-template-columns:repeat(3,140px); margin-top:calc(-1 * clamp(170px,18vw,240px)); margin-bottom:clamp(57px,calc(18vw - 113px),127px); padding-bottom:50px}

/* Gruppen-Buttons (Hotel / Gasthof) */
.room-tabs{display:flex; justify-content:center; gap:15px; margin-bottom:clamp(28px,4vw,44px); flex-wrap:wrap}
.room-tab{background:#fff; border:1px solid var(--beige-300); padding:16px 33px; cursor:pointer; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:1.025rem; 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)}
.events-cta .btn{font-size:1rem; padding:17.5px 35px}

/* 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 [data-cms-id="cms-h4-626"]{text-align:center; margin:.1em 0 1.25em}
.legal-body p{margin:0 0 1em; font-size:.95rem}
.legal-body .legal-subtitle{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 .legal-reisebusse-copy,.legal-body .legal-reisebusse-list li{font-size:.95rem}
.legal-body .legal-reisebusse-list{margin:0 0 1em 1.2em; padding-left:1.15em}
.legal-body [data-cms-id="cms-p-568"],.legal-body [data-cms-id="cms-p-575"],.legal-body [data-cms-id="cms-p-581"],.legal-body [data-cms-id="cms-p-583"]{display:none}
.legal-body a{color:var(--beige-800); text-decoration:underline; word-break:break-word}
.legal-history-image{margin:.65em 0 1.35em}
.legal-history-image img{display:block; width:min(100%,376px); height:auto; border-radius:var(--radius)}
.legal-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:1.4em 0}
.legal-gallery img{width:100%; height:100%; aspect-ratio:4/3.2; object-fit:cover; border-radius:var(--radius)}
.legal-gallery--single{display:block}
.legal-gallery--single img{display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain}
@media (max-width:520px){.legal-gallery{grid-template-columns:1fr}}

/* 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:0 14px; border:1px solid var(--beige-300); border-radius:var(--radius); background:#fff; color:var(--text); width:100%; height:50px; box-sizing:border-box}
.field select:focus{outline:2px solid var(--beige-500); outline-offset:1px; border-color:var(--beige-500)}

/* Popup: Gutschein-Shop (gastronovi-iFrame) */
.gutschein-inner{width:min(920px,100%); margin:auto; padding-block:clamp(48px,8vh,80px)}
.gutschein-frame{width:100%; height:min(72vh,760px); border:0; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-soft)}

/* Popup: Online-Buchung iFrame (Guestline) */
.overlay--booking{background:rgba(28,26,23,.82); z-index:220; padding:0; align-items:center; justify-content:center}
.overlay--booking .overlay-close{color:#fff; font-size:2.8rem; top:12px; right:18px; z-index:1; text-shadow:0 1px 4px rgba(0,0,0,.5)}
.overlay--booking .overlay-close:hover{opacity:.8}
.booking-frame-wrap{width:min(96vw,1160px); height:min(90vh,860px); background:#fff; border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 24px 80px rgba(0,0,0,.45)}
.booking-frame{width:100%; height:100%; border:0; flex:1; display:block}

/* ---------- 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); width:100%; box-sizing:border-box}
.field input{height:50px}
/* iOS: input[type=date] auf gleiche Höhe wie normale Felder zwingen (sonst zu hoch) */
.field input[type="date"]{-webkit-appearance:none; appearance:none; height:50px; min-height:50px}
.field input[type="date"]::-webkit-date-and-time-value{text-align:left; margin:0}
.field input[type="date"]::-webkit-datetime-edit{padding:0}
.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}
/* Checkbox links schwimmend, Text fließt normal & linksbündig (kein Flex-Spalten-Umbruch) */
.consent{display:block; text-align:left; margin:6px 0 18px; line-height:1.5}
.consent > input{float:left; margin:.15em .55em 0 0}
.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:1.4fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px)}
.footer-logo{width:auto; 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:var(--beige-800)}

/* ---------- 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}
.lightbox-arrow{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.3); color:#fff; font-size:1.7rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease); z-index:2}
.lightbox-arrow:hover{background:rgba(0,0,0,.55); border-color:#fff}
.lightbox-arrow[hidden]{display:none}
.lightbox-arrow--prev{left:clamp(10px,3vw,40px)}
.lightbox-arrow--next{right:clamp(10px,3vw,40px)}
.lightbox-pagecount{color:rgba(255,255,255,.6); font-size:.82rem; letter-spacing:.05em; margin-top:6px}

/* ---------- 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:1300px){
  .events-grid{padding-inline:0}
}
@media (max-width:1199px){
  .gallery-thumbs{grid-template-columns:repeat(3,1fr)}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .dark-thumbs{grid-template-columns:repeat(auto-fit,minmax(96px,140px))}
}
@media (max-width:860px){
  .events-grid{grid-template-columns:1fr}
  :root{--header-h:64px}
  .wordmark{font-size:clamp(1rem,3vw,1.35rem); letter-spacing:.1em}
  .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, .cards-duo{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; justify-content:stretch; width:100%; max-width:var(--maxw); text-align:center; gap:28px}
  .meetings-intro{grid-template-columns:1fr; gap:22px; margin:0 auto}
  .meetings-intro-gallery{min-height:0}
  /* --- Vorschau-Galerien mobil vereinheitlicht: 3 kleinere Thumbs pro Reihe, immer UNTER dem Text, nie überlappend --- */
  .dark-thumbs button{width:100%}
  #tagungen .meetings-thumbs{grid-template-columns:repeat(3,1fr); gap:10px; max-width:420px; margin-top:16px; margin-bottom:0; margin-inline:auto}
  #bowling .dark-thumbs{grid-template-columns:repeat(3,1fr); gap:10px; justify-items:stretch; max-width:420px; margin-inline:auto}
  .gallery-thumbs--over{width:100%}
  /* Biergarten-Thumbs aus dem Overlay in den Textfluss lösen (unter den Text, nicht darüber) */
  #wellness.bandshot.has-overbar,
  #biergarten.bandshot.has-overbar{flex-direction:column; align-items:stretch; justify-content:flex-end; padding-bottom:0}
  #wellness .wellness-overbar,
  #biergarten .wellness-overbar{position:static; bottom:auto; width:100%; max-width:none; margin-inline:0; justify-content:center; padding-block:clamp(18px,5vw,30px)}
  #wellness .gallery-thumbs--over,
  #biergarten .gallery-thumbs--over{grid-template-columns:repeat(3,1fr); gap:10px; width:100%; max-width:420px; margin-inline:auto}
  #wellness .gallery-thumbs--over button,
  #biergarten .gallery-thumbs--over button{width:100%; height:auto; aspect-ratio:1/1}
  .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 */
  /* Buchungsleiste mobil: EIN vollbreiter brauner Button "Online buchen", zentriert */
  .bb-guarantee,.bb-date,.bb-count,.bb-brand{display:none}
  .booking-bar{padding:0}
  .bb-submit{margin:0; flex:1 1 auto; width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; font-size:.98rem; letter-spacing:.14em}
}
@media (max-width:560px){
  .gallery-thumbs,.cards-grid{grid-template-columns:1fr 1fr}
  .dark-thumbs{grid-template-columns:repeat(auto-fit,minmax(96px,140px))}
  .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}
  /* Mobiler Header: fester heller Hintergrund + größere, gut lesbare Schrift */
  .site-header{mix-blend-mode:normal; background:rgba(250,246,243,.97); color:var(--text); box-shadow:0 1px 12px rgba(28,26,23,.12); text-shadow:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
  .site-header.over-hero{color:var(--text); text-shadow:none}
  .header-inner{padding-inline:12px}
  .burger{font-size:.88rem; letter-spacing:.04em; gap:.4em}
  .wordmark{gap:.3em; font-size:1.0rem; letter-spacing:.03em}
  /* Menü-Burger: Hamburger-Icon statt Wort "Menü" */
  .burger--menu .burger-label{display:none}
  .burger--menu .burger-lines{display:inline-flex}
  /* Sprache: nur Länderkürzel (DE/EN …) statt vollem Namen */
  .burger--lang .burger-label{font-size:0}
  .burger--lang .burger-label::before{content:attr(data-short); font-size:.9rem; letter-spacing:.06em}
  /* Sprach-Overlay: scrollbar + 2 Sprachen pro Zeile auf Mobilgeräten */
  .overlay--lang{justify-content:flex-start; overflow-y:auto; overflow-x:hidden; padding-top:72px; padding-bottom:32px}
  .lang-grid{grid-template-columns:repeat(2,1fr); gap:.15em .6em}
  .lang-grid a{font-size:clamp(1rem,4.5vw,1.35rem); padding:.4em 0}
}

/* ===== 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-size:cover; background-position:center; background-repeat: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)}
.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-chat{ height:calc(100% - 90px - var(--base-margin-bottom)); }
.ds-widget.ds-content-wrapper{ bottom:calc(var(--bookingbar-h) + 100px) !important; }

/* ===== Guestline-DBM: automatisch eingefügten "Jetzt Buchen"-Schwebebutton ausblenden =====
   Der Buchungseinstieg erfolgt ausschließlich über unsere Buchungsleiste bzw. "Zimmer buchen" im Menü;
   das Panel-Overlay selbst bleibt voll funktionsfähig. */
#gldbm-panel__toggle-button{ display:none !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}
}