/* Biggezeit · Stylesheet */

/* Schriften (lokal, SIL Open Font License) */
@font-face{ font-family:"Cormorant"; src:url(../../fonts/cormorant-latin-300-normal.woff2) format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Cormorant"; src:url(../../fonts/cormorant-latin-400-normal.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Cormorant"; src:url(../../fonts/cormorant-latin-500-normal.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Cormorant"; src:url(../../fonts/cormorant-latin-300-italic.woff2) format("woff2"); font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:"Cormorant"; src:url(../../fonts/cormorant-latin-400-italic.woff2) format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Jost"; src:url(../../fonts/jost-latin-400-normal.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Jost"; src:url(../../fonts/jost-latin-500-normal.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap; }

:root{
  /* Palette: Morgennebel, Stein, Talsperren-Tiefe, Moos, Bronze */
  --nebel:#f1f0ea;
  --stein:#e4e1d8;
  --sand:#d4cdbd;
  --tiefe:#1c3337;
  --tiefe-2:#27454a;
  --moos:#4f5e47;
  --bronze:#a8875a;
  --bronze-text:#7f6239;
  --text:#1f2627;
  --text-soft:#5a605d;

  --serif:"Cormorant", "Cormorant Garamond", Garamond, Georgia, serif;
  --sans:"Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --wrap:1240px;
  --gutter:clamp(18px, 4.5vw, 56px);
  --section:clamp(88px, 12vw, 168px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0; background:var(--nebel); color:var(--text);
  font:400 clamp(16.5px, .9vw + 12.5px, 18px)/1.7 var(--sans); letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--bronze); outline-offset:4px; }
h1,h2,h3,p{ margin:0; }
h1,h2,.display{ font-family:var(--serif); font-weight:300; letter-spacing:-.005em; }
h2{ font-size:clamp(2.3rem, 1.4rem + 3.2vw, 3.9rem); line-height:1.04; text-wrap:balance; }
h3{ font-family:var(--serif); font-weight:500; font-size:1.55rem; line-height:1.15; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.section{ padding:var(--section) 0; }
.kicker{ font:500 .76rem/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--bronze-text); }
.soft{ color:var(--text-soft); }
.center{ text-align:center; }

.skip{ position:absolute; left:-999px; top:8px; z-index:200; background:var(--bronze); color:#fff; padding:8px 14px; }
.skip:focus{ left:8px; }

/* Entwurf-Markierungen: vor dem Livegang entfernen */
.draft-note{ background:var(--bronze); color:#fff; font-size:.78rem; text-align:center; padding:4px var(--gutter); letter-spacing:.02em; }
mark.todo{ background:none; color:inherit; border-bottom:2px dashed var(--bronze); }

/* Links & Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:14px 30px;
  font:500 .8rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:background-color .3s, color .3s, border-color .3s;
}
.btn-bronze{ background:var(--bronze); color:#fff; }
.btn-bronze:hover{ background:#957548; }
.btn-line{ border-color:currentColor; }
.btn-line:hover{ background:var(--text); color:var(--nebel); border-color:var(--text); }
.on-dark .btn-line:hover{ background:var(--nebel); color:var(--tiefe); border-color:var(--nebel); }
.link-more{ display:inline-flex; gap:14px; align-items:center; font:500 .78rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; text-decoration:none; }
.link-more::after{ content:""; width:42px; height:1px; background:currentColor; transition:width .3s var(--ease); }
.link-more:hover::after{ width:64px; }

/* Header */
.site-header{ position:fixed; inset:0 0 auto; z-index:80; color:#fff; transition:background-color .4s, color .4s, box-shadow .4s; }
.site-header.is-solid{ background:rgba(241,240,234,.96); color:var(--text); box-shadow:0 1px 0 rgba(31,38,39,.08); backdrop-filter:blur(8px); }
.hdr{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; min-height:84px; max-width:1440px; margin:0 auto; padding:0 var(--gutter); }
.menu-btn{ justify-self:start; text-decoration:none; display:flex; align-items:center; gap:14px; background:none; border:0; color:inherit; cursor:pointer; padding:8px 0; font:500 .76rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; }
.menu-btn span.bars{ width:26px; height:9px; position:relative; }
.menu-btn span.bars::before,.menu-btn span.bars::after{ content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; }
.menu-btn span.bars::before{ top:0; } .menu-btn span.bars::after{ bottom:0; }
.logo{ text-decoration:none; text-align:center; line-height:1; }
.logo b{ display:block; font:400 2rem/1 var(--serif); letter-spacing:.01em; }
.logo small{ display:block; margin-bottom:2px; font:italic 400 1rem/1 var(--serif); letter-spacing:.02em; opacity:.85; }
.hdr-cta{ justify-self:end; display:flex; align-items:center; gap:24px; }
.hdr-cta .btn{ min-height:44px; padding:10px 22px; font-size:.72rem; }
.site-header:not(.is-solid) .hdr-cta .btn{ background:transparent; border-color:rgba(255,255,255,.7); }
.site-header:not(.is-solid) .hdr-cta .btn:hover{ background:#fff; color:var(--tiefe); }

/* Menü-Overlay */
.menu{ position:fixed; inset:0; z-index:120; background:var(--tiefe); color:var(--nebel); display:grid; grid-template-rows:auto 1fr auto; padding:0 var(--gutter) 40px; }
.menu[hidden]{ display:none; }
.menu-top{ display:flex; justify-content:space-between; align-items:center; min-height:84px; max-width:1440px; width:100%; margin:0 auto; }
.menu nav{ align-self:center; max-width:1440px; width:100%; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr; gap:48px; }
.menu ul{ list-style:none; margin:0; padding:0; }
.menu-main a{ display:block; text-decoration:none; font:300 clamp(2.2rem, 1.4rem + 3.2vw, 4.2rem)/1.15 var(--serif); padding:4px 0; transition:color .25s, padding-left .3s var(--ease); }
.menu-main a:hover{ color:var(--bronze); padding-left:14px; }
.menu-side{ align-self:end; display:grid; gap:22px; }
.menu-side p{ color:rgba(241,240,234,.75); max-width:34ch; }
.menu-bottom{ max-width:1440px; width:100%; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.85rem; color:rgba(241,240,234,.6); }

/* Hero */
.hero{ position:relative; min-height:100svh; display:grid; place-items:center; color:#fff; overflow:hidden; isolation:isolate; }
.hero-art{ position:absolute; inset:0; z-index:-2; }
.hero-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-art .photo{ filter:saturate(.82) brightness(.92) contrast(1.03); }
.ph:has(img)::after, .ph:has(img) figcaption{ display:none; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 52% 46% at 50% 50%, rgba(18,33,36,.38), rgba(18,33,36,0) 72%),
    linear-gradient(180deg, rgba(18,33,36,.55) 0%, rgba(18,33,36,.28) 38%, rgba(18,33,36,.26) 62%, rgba(18,33,36,.66) 100%); }
.hero-content{ text-align:center; padding:160px var(--gutter) 200px; display:grid; justify-items:center; gap:28px; }
.hero .kicker{ color:rgba(255,255,255,.88); }
.hero h1{ font-size:clamp(3rem, 1.6rem + 6.4vw, 7.2rem); line-height:.98; text-wrap:balance; max-width:13ch; }
.hero-content, .seasons-band .display, .seasons-band .kicker, .closing .display, .closing p{ text-shadow:0 1px 2px rgba(10,22,24,.25), 0 2px 28px rgba(10,22,24,.35); }
.hero-lead{ text-wrap:balance; max-width:44ch; font-size:clamp(1.02rem, .95rem + .3vw, 1.15rem); color:rgba(255,255,255,.9); }
.scroll-cue{ position:absolute; left:50%; bottom:118px; transform:translateX(-50%); display:grid; justify-items:center; gap:12px; text-decoration:none; font:500 .68rem/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.scroll-cue::after{ content:""; width:1px; height:44px; background:linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,0)); }

@media (prefers-reduced-motion:no-preference){
  .hero-art{ animation:breathe 9s var(--ease) both; }
  .hero-content > *{ animation:rise 1.2s var(--ease) both; }
  .hero-content > :nth-child(2){ animation-delay:.15s; }
  .hero-content > :nth-child(3){ animation-delay:.3s; }
  .booking-bar{ animation:rise 1.2s .5s var(--ease) both; }
}
@keyframes breathe{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
@keyframes rise{ from{ opacity:0; transform:translateY(20px); } }

/* Buchungsleiste (übergibt Daten an Airbnb) */
.booking-wrap{ position:relative; z-index:5; margin-top:-64px; }
.booking-bar{
  background:var(--nebel); box-shadow:0 30px 60px -30px rgba(28,51,55,.45);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)) auto auto; align-items:stretch;
}
.field{ display:grid; gap:4px; padding:18px 24px; border-right:1px solid var(--stein); }
.field label, .field .lbl{ font:500 .66rem/1.2 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--bronze-text); }
.field input, .field select{
  appearance:none; -webkit-appearance:none; border:0; background:transparent; padding:2px 0; color:var(--text);
  font:400 1.35rem/1.2 var(--serif); width:100%; min-width:0; cursor:pointer;
}
.field select{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237f6239' stroke-width='1.5'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") right center no-repeat; padding-right:22px; }
.field input:focus, .field select:focus{ outline:none; }
.field:focus-within{ background:#fff; }
.toggle{ display:flex; align-items:center; gap:12px; padding:18px 24px; border-right:1px solid var(--stein); cursor:pointer; font-size:.92rem; line-height:1.3; }
.toggle input{ width:18px; height:18px; accent-color:var(--moos); flex:none; }
.booking-bar .btn{ min-height:100%; padding:18px 34px; }
.booking-msg{ min-height:1.6em; margin-top:12px; font-size:.86rem; color:var(--text-soft); }
.booking-msg.err{ color:#8a3b2b; }

/* Willkommen */
.intro{ text-align:center; }
.intro .kicker{ margin-bottom:28px; }
.statement{ font:300 clamp(1.9rem, 1.2rem + 2.6vw, 3.3rem)/1.18 var(--serif); max-width:24ch; margin:0 auto; text-wrap:balance; }
.intro-text{ max-width:58ch; margin:36px auto 0; }
.trio{ display:grid; grid-template-columns:4fr 5fr 3fr; gap:clamp(14px,2vw,28px); align-items:end; margin-top:clamp(56px,8vw,104px); }
.trio .ph:nth-child(1){ aspect-ratio:3/4; }
.trio .ph:nth-child(2){ aspect-ratio:4/5; transform:translateY(clamp(24px,4vw,64px)); }
.trio .ph:nth-child(3){ aspect-ratio:3/4; }
.facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin:clamp(96px,10vw,140px) auto 0; padding:0; list-style:none; max-width:1000px; }
.facts li{ padding:6px clamp(16px,2.4vw,34px); display:grid; gap:2px; text-align:center; }
.facts li + li{ border-left:1px solid var(--sand); }
.facts b{ font:400 1.6rem/1.1 var(--serif); font-variant-numeric:lining-nums; }
.facts span{ font-size:.82rem; color:var(--text-soft); }

/* Foto-Platzhalter */
.ph{ position:relative; margin:0; overflow:hidden; background:linear-gradient(165deg, #d9d6cb, #c4c0b2 60%, #b7b6a6); min-height:180px; }
.ph::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 30% 15%, rgba(255,255,255,.45), transparent 60%); }
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph figcaption{ position:absolute; left:16px; bottom:14px; right:16px; z-index:1; text-align:left; font-size:.74rem; letter-spacing:.04em; color:#4b4f4b; }
.ph figcaption::before{ content:"Foto: "; color:var(--bronze-text); font-weight:500; }
.on-dark .ph{ background:linear-gradient(165deg, #3a575b, #2a4448); }
.on-dark .ph::after{ background:radial-gradient(120% 80% at 30% 15%, rgba(255,255,255,.12), transparent 60%); }
.on-dark .ph figcaption{ color:rgba(241,240,234,.75); }
.on-dark .ph figcaption::before{ color:var(--bronze); }

/* Säulen (abwechselnd Bild/Text) */
.pillar{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(40px,7vw,120px); align-items:center; }
.pillar + .pillar{ margin-top:clamp(96px,12vw,176px); }
.pillar.flip{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.pillar.flip .pillar-media{ order:2; }
.pillar-media{ position:relative; }
.pillar-media .ph.main{ aspect-ratio:5/4; }
.pillar-media .ph.inset{ position:absolute; width:38%; aspect-ratio:3/4; right:-6%; bottom:-14%; box-shadow:0 0 0 clamp(8px,1.2vw,14px) var(--nebel); }
.pillar.flip .pillar-media .ph.inset{ right:auto; left:-6%; }
.pillar.flip .ph.main figcaption{ text-align:right; }
.pillar-text{ display:grid; gap:26px; align-content:center; }
.pillar-text p{ max-width:46ch; }
.pillar-text h2{ font-size:clamp(2.1rem, 1.3rem + 2.4vw, 3.3rem); }
.details{ list-style:none; margin:0; padding:0; border-top:1px solid var(--sand); }
.details li{ display:flex; justify-content:space-between; gap:18px; padding:12px 0; border-bottom:1px solid var(--sand); font-size:.95rem; }
.details li span:last-child{ color:var(--text-soft); text-align:right; }

/* Ein Tag am Biggesee (Zeitstrahl) */
.day{ background:var(--stein); overflow:hidden; }
.day-head{ display:flex; justify-content:space-between; align-items:end; gap:32px; flex-wrap:wrap; margin-bottom:clamp(40px,5vw,64px); }
.day-head > div:first-child{ display:grid; gap:22px; max-width:640px; }
.day-nav{ display:flex; gap:10px; }
.day-nav button{ width:52px; height:52px; border:1px solid var(--text); background:none; cursor:pointer; color:var(--text); display:grid; place-items:center; transition:background-color .3s, color .3s; }
.day-nav button:hover{ background:var(--text); color:var(--nebel); }
.day-nav button:disabled{ opacity:.3; cursor:default; background:none; color:var(--text); }
.day-nav svg{ width:20px; height:20px; }
.track{ list-style:none; margin:0; padding:0 var(--gutter); display:grid; grid-auto-flow:column; grid-auto-columns:clamp(270px, 30vw, 380px); gap:clamp(18px,2.4vw,32px);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:var(--gutter); scrollbar-width:none; max-width:calc(var(--wrap) + (100vw - var(--wrap)) / 2); margin-left:auto; }
.track::-webkit-scrollbar{ display:none; }
.track li{ scroll-snap-align:start; display:grid; gap:14px; align-content:start; }
.track .ph{ aspect-ratio:4/5; }
.track .time{ font-variant-numeric:lining-nums; display:flex; align-items:center; gap:14px; font:400 1.9rem/1 var(--serif); color:var(--bronze-text); margin-top:10px; }
.time::after{ content:""; flex:1; height:1px; background:var(--sand); }
.track p{ font-size:.95rem; color:var(--text-soft); }

/* Jahreszeiten */
.seasons-band{ position:relative; min-height:clamp(380px, 56vw, 640px); display:grid; place-items:center; color:#fff; overflow:hidden; isolation:isolate; text-align:center; }
.seasons-band .hero-art{ z-index:-2; }
.seasons-band::after{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse 60% 55% at 50% 50%, rgba(18,33,36,.3), rgba(18,33,36,0) 75%), rgba(18,33,36,.4); }
.seasons-band .display{ font-size:clamp(2.6rem, 1.4rem + 5vw, 6rem); line-height:1; padding:0 var(--gutter); }
.seasons-band .kicker{ color:rgba(255,255,255,.85); margin-bottom:22px; }
.seasons{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(18px,2.4vw,36px); }
.season{ display:grid; gap:18px; align-content:start; }
.season .ph{ aspect-ratio:3/4; }
.season h3{ font-size:1.9rem; font-weight:400; }
.season ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.season li{ font-size:.93rem; line-height:1.55; color:var(--text-soft); padding-top:12px; border-top:1px solid var(--sand); }
.season li b{ display:block; font-weight:500; color:var(--text); }
.season-note{ margin-top:36px; font-size:.85rem; color:var(--text-soft); }

/* Zitat / Gastgeber */
.host{ text-align:center; }
.host .portrait{ width:120px; height:120px; border-radius:50%; margin:0 auto 40px; min-height:0; }
.host .portrait figcaption{ display:none; }
.quote{ font:300 italic clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem)/1.2 var(--serif); max-width:26ch; margin:0 auto; text-wrap:balance; }
.host-name{ margin-top:28px; }
.host-text{ max-width:56ch; margin:40px auto 0; display:grid; gap:16px; color:var(--text-soft); }

/* Bleiben / Arbeiten */
.stay{ background:var(--tiefe); color:var(--nebel); }
.stay .kicker{ color:var(--bronze); }
.stay .details{ border-color:rgba(241,240,234,.18); }
.stay .details li{ border-color:rgba(241,240,234,.18); }
.stay .details li span:last-child{ color:rgba(241,240,234,.7); }
.stay .pillar-media .ph.inset{ box-shadow:0 0 0 clamp(8px,1.2vw,14px) var(--tiefe); }

/* Ausstattung */
.amen-head{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,96px); align-items:end; margin-bottom:clamp(48px,6vw,80px); }
.amen{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:40px 28px; }
.amen h3{ font-size:1.45rem; padding-bottom:14px; border-bottom:1px solid var(--bronze); margin-bottom:16px; }
.amen ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.93rem; color:var(--text-soft); }

/* Buchen in 3 Schritten */
.steps{ list-style:none; margin:clamp(48px,6vw,72px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px,4vw,64px); counter-reset:s; }
.steps li{ counter-increment:s; display:grid; gap:12px; align-content:start; padding-top:24px; border-top:1px solid var(--sand); }
.steps li::before{ content:counter(s, decimal-leading-zero); font:300 2.6rem/1 var(--serif); font-variant-numeric:lining-nums; color:var(--bronze-text); }

/* Anreise + Fragen */
.twocol{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,7vw,120px); align-items:start; }
.distances{ list-style:none; margin:32px 0 0; padding:0; border-top:1px solid var(--sand); }
.distances li{ display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--sand); }
.distances li span:first-child{ font:400 1.25rem/1.3 var(--serif); }
.distances li span:last-child{ color:var(--text-soft); font-size:.95rem; }
.faq details{ border-top:1px solid var(--sand); }
.faq details:last-of-type{ border-bottom:1px solid var(--sand); }
.faq summary{ list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font:400 1.35rem/1.3 var(--serif); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before, .faq summary::after{ content:""; position:absolute; right:8px; top:50%; width:16px; height:1px; background:var(--text); transition:transform .3s var(--ease); }
.faq summary::after{ transform:rotate(90deg); }
.faq details[open] summary::after{ transform:rotate(0); }
.faq details p{ padding:0 0 22px; max-width:60ch; color:var(--text-soft); }

/* Schluss-Band */
.closing{ position:relative; overflow:hidden; isolation:isolate; color:#fff; text-align:center; padding:clamp(120px,16vw,220px) 0; }
.closing::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(18,33,36,.5); }
.closing .display{ font-size:clamp(2.6rem, 1.4rem + 4.6vw, 6rem); line-height:1.02; text-wrap:balance; max-width:14ch; margin:0 auto; }
.closing p{ max-width:44ch; margin:24px auto 36px; color:rgba(255,255,255,.88); }
.closing .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Footer */
.site-footer{ background:var(--tiefe); color:var(--nebel); padding:clamp(64px,8vw,104px) 0 36px; }
.foot{ display:grid; grid-template-columns:minmax(0,5fr) repeat(3, minmax(0,2fr)); gap:40px; }
.foot .logo{ text-align:left; display:inline-block; }
.foot p{ color:rgba(241,240,234,.7); font-size:.92rem; margin-top:20px; max-width:34ch; }
.foot h4{ margin:0 0 16px; font:500 .7rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--bronze); }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.95rem; }
.foot a{ text-decoration:none; color:rgba(241,240,234,.88); }
.foot a:hover{ color:#fff; text-decoration:underline; text-underline-offset:5px; }
.foot-bottom{ margin-top:64px; padding-top:24px; border-top:1px solid rgba(241,240,234,.14); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; color:rgba(241,240,234,.55); }

/* Mobile Buchungsleiste */
.mobile-book{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; transform:translateY(100%); transition:transform .4s var(--ease); }
.mobile-book.show{ transform:none; }
.mobile-book .btn{ width:100%; min-height:58px; }

/* Responsive */
@media (max-width:1080px){
  .booking-bar{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .toggle{ grid-column:1 / 3; border-top:1px solid var(--stein); }
  .booking-bar .btn{ border-top:1px solid var(--stein); }
  .amen{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .seasons{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:860px){
  .hdr{ min-height:68px; }
  .menu-btn .lbl, .hdr-cta .btn{ display:none; }
  .logo b{ font-size:1.6rem; }
  .menu nav{ grid-template-columns:1fr; }
  .pillar, .pillar.flip, .twocol, .amen-head{ grid-template-columns:1fr; }
  .pillar.flip .pillar-media{ order:0; }
  .pillar-media .ph.inset{ width:34%; right:4%; bottom:-10%; }
  .pillar.flip .pillar-media .ph.inset{ left:4%; }
  .pillar-text{ margin-top:clamp(24px,6vw,48px); }
  .trio{ grid-template-columns:1fr 1fr; }
  .trio .ph:nth-child(3){ display:none; }
  .steps{ grid-template-columns:1fr; }
  .foot{ grid-template-columns:1fr 1fr; }
  .foot > div:first-child{ grid-column:1/-1; }
  .mobile-book{ display:block; }
  .site-footer{ padding-bottom:96px; }
  .hero .hero-art .photo{ object-position:38% center; }
}
@media (max-width:640px){
  .booking-wrap{ margin-top:-40px; }
  .booking-bar{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .field{ padding:14px 16px; }
  .field:nth-child(2){ border-right:0; }
  .field:nth-child(3){ grid-column:1/-1; border-top:1px solid var(--stein); border-right:0; }
  .toggle{ grid-column:1/-1; border-right:0; padding:14px 16px; }
  .booking-bar .btn{ grid-column:1/-1; }
  .facts li{ flex:1 1 45%; padding:14px 8px; }
  .facts li + li{ border-left:0; }
  .facts li:nth-child(even){ border-left:1px solid var(--sand); }
  .seasons{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:78%; overflow-x:auto; scroll-snap-type:x mandatory; margin-right:calc(-1 * var(--gutter)); padding-right:var(--gutter); scrollbar-width:none; }
  .season{ scroll-snap-align:start; }
  .amen{ grid-template-columns:1fr 1fr; }
  .scroll-cue{ bottom:84px; }
  .hero-content{ padding-bottom:170px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .mobile-book, .site-header, .btn{ transition:none; }
}

/* Hilfsklassen (statt Inline-Styles, wegen CSP) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.section.flush-top{ padding-top:0; }
.tone-stein{ background:var(--stein); }
.self-start{ justify-self:start; }
.kicker.spaced{ margin-bottom:22px; }
.gap-top{ margin-top:24px; }
.note{ margin-top:22px; font-size:.92rem; }

/* Unterseiten (Impressum, Datenschutz, 404) */
.subpage .site-header{ position:sticky; }
.legal{ padding:clamp(56px,8vw,104px) 0 var(--section); }
.legal .wrap{ max-width:820px; }
.legal h1{ font-size:clamp(2.6rem, 1.6rem + 3.4vw, 4.2rem); line-height:1.05; margin:18px 0 40px; }
.legal h2{ font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); margin:44px 0 12px; }
.legal p, .legal li{ color:var(--text-soft); max-width:68ch; }
.legal p + p{ margin-top:12px; }
.legal ul{ padding-left:1.2em; display:grid; gap:6px; margin:10px 0 0; }
.legal address{ font-style:normal; color:var(--text); line-height:1.8; }
.legal a{ color:var(--text); text-underline-offset:4px; }
.not-found{ min-height:70vh; display:grid; place-items:center; text-align:center; padding:120px var(--gutter); }
.not-found .display{ font-size:clamp(2.6rem, 1.6rem + 4vw, 5rem); line-height:1.05; margin:18px 0 22px; }
.not-found p{ color:var(--text-soft); margin-bottom:34px; }

/* Vor dem Launch (Baustellenseite aktiv): Rechtstexte ohne Buchung und Website-Navigation */
.pre-launch .hdr-cta, .pre-launch .foot > div:not(:first-child), .pre-launch .foot p, .pre-launch .foot-bottom span:last-child, .pre-launch .site-only{ display:none; }
.pre-launch .foot{ grid-template-columns:1fr; }