/* ============================================================
   Hotel Hirsch — Fluorn-Winzeln · Schwarzwald
   „Gasthaus-Wärme": Pergament · Holz · Tannengrün · Bernstein
   Fraunces (Überschriften) + Lato (Text) · GSAP
   ============================================================ */

@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-600italic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Lato';src:url('../fonts/lato-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('../fonts/lato-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --pine:#22392c;
  --pine-2:#2e4a39;
  --pine-deep:#182a20;
  --bark:#332a1f;
  --parchment:#f2ead9;
  --paper:#faf5ea;
  --amber:#9e7411;
  --amber-soft:#e0b62e;
  --ink:#2b241a;
  --ink-soft:#6a5f4e;
  --line:rgba(58,47,32,.16);
  --line-soft:rgba(58,47,32,.1);
  --shadow:0 22px 55px -28px rgba(43,36,26,.45);
  --maxw:1220px;
  --gut:clamp(20px,5vw,64px);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Lato',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:1.75;font-size:17.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Papierkorn — subtile Textur über allem */
body::before{
  content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em;color:var(--ink)}
h2{font-size:clamp(2rem,4.6vw,3.3rem)}
h3{font-size:1.4rem}
h2 em,h1 em{font-style:italic;color:var(--amber)}
p{margin:0 0 1.15em}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.lead{font-size:1.16rem;color:var(--ink-soft);max-width:62ch}
.muted{color:var(--ink-soft)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--pine);color:#fff;padding:12px 18px;z-index:3000}
.skip-link:focus{left:8px;top:8px}

/* Overline + Ornament */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--sans);font-weight:700;
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);margin:0 0 1.1rem}
.eyebrow::before,.eyebrow.center::after{content:"";width:34px;height:1px;background:var(--amber)}
.orn{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--amber);margin:0 0 1.2rem;font-size:.7rem}
.orn::before,.orn::after{content:"";width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--amber))}
.orn::after{background:linear-gradient(90deg,var(--amber),transparent)}
.section-head{max-width:66ch;margin-bottom:clamp(2.4rem,5vw,4rem)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--sans);font-weight:700;
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;padding:17px 32px;border-radius:2px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1;min-height:50px;
  transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn:hover{transform:translateY(-2px)}
.btn--amber{background:var(--amber);color:#fff;border-color:var(--amber)}
.btn--amber:hover{background:#9a6d33}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--pine{background:var(--pine);color:#fff;border-color:var(--pine)}
.btn--pine:hover{background:var(--pine-2)}
.btn--outline{background:transparent;color:var(--pine);border-color:var(--pine)}
.btn--outline:hover{background:var(--pine);color:#fff}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:14px 0;transition:background .4s,box-shadow .4s,padding .4s}
.site-header .inner{display:flex;align-items:center;gap:1.4rem;height:70px}
.brand{margin-right:auto;line-height:0;flex-shrink:0}
.brand img{height:58px;width:auto;transition:height .35s}
.brand .logo-dark{display:none}
.main-nav{display:flex;align-items:center;gap:.2rem}
.main-nav a{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;text-decoration:none;padding:.65rem .8rem;position:relative;transition:color .2s}
.main-nav a::after{content:"◆";position:absolute;left:50%;transform:translateX(-50%) scale(0);bottom:-2px;
  font-size:.45rem;color:var(--amber-soft);transition:transform .25s}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{transform:translateX(-50%) scale(1)}
.header-cta{display:inline-flex}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:46px;height:46px;padding:10px;color:#fff}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;height:2px;background:currentColor;border-radius:2px;transition:.3s}
.nav-toggle span{position:relative}
.nav-toggle span::before{position:absolute;top:-7px;width:100%}
.nav-toggle span::after{position:absolute;top:7px;width:100%}

.site-header.solid,.site-header.light{background:var(--parchment);padding:6px 0;
  box-shadow:0 1px 0 var(--line),0 3px 0 rgba(58,47,32,.05),0 14px 34px -26px rgba(43,36,26,.55)}
.site-header.solid .brand img,.site-header.light .brand img{height:48px}
.site-header.solid .brand .logo-light,.site-header.light .brand .logo-light{display:none}
.site-header.solid .brand .logo-dark,.site-header.light .brand .logo-dark{display:block}
.site-header.solid .main-nav a,.site-header.light .main-nav a{color:var(--ink)}
.site-header.solid .nav-toggle,.site-header.light .nav-toggle{color:var(--ink)}
/* Größeres Logo im transparenten Zustand auf großen Bildschirmen */
/* Lesbarkeit von Logo & Navigation über dem Hero-Bild */
.site-header.over-hero:not(.solid)::before{content:"";position:absolute;left:0;right:0;top:0;height:210px;
  background:linear-gradient(180deg,rgba(16,22,15,.62),rgba(16,22,15,0));pointer-events:none;z-index:0}
.site-header .inner{position:relative;z-index:1}
.site-header.over-hero:not(.solid) .brand img{filter:drop-shadow(0 2px 9px rgba(14,19,11,.55))}
.site-header.over-hero:not(.solid) .main-nav a{text-shadow:0 1px 12px rgba(14,19,11,.6)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:#f7efe0;text-align:left}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover;opacity:0;transition:opacity 1.8s ease;will-change:transform}
.hero__media img.active{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(28,20,12,.34) 0%,rgba(28,20,12,0) 30%,rgba(24,17,10,.30) 60%,rgba(19,13,7,.85) 100%)}
.hero__inner{position:relative;z-index:2;width:100%;align-self:flex-end;padding:0 var(--gut) clamp(56px,8vw,104px)}
.hero__overline{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-weight:700;
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#ecd9b4;margin-bottom:1.4rem}
.hero__overline::before{content:"";width:36px;height:1px;background:#d9b877}
.hero h1{font-size:clamp(2.8rem,6.4vw,5.4rem);color:#fbf5ea;letter-spacing:-.015em;margin:0 0 .38em;max-width:15ch;
  text-shadow:0 2px 34px rgba(19,13,7,.42)}
.hero__sub{font-size:clamp(1.02rem,1.7vw,1.3rem);max-width:48ch;margin:0 0 2.2rem;color:#f0e6d5}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-start}
.hero__scroll{position:absolute;right:clamp(22px,5vw,60px);bottom:clamp(56px,8vw,104px);left:auto;transform:none;z-index:2;
  color:#e9dcc2;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;font-family:var(--sans);font-weight:700;
  writing-mode:vertical-rl;display:flex;align-items:center;gap:11px;text-decoration:none}
.hero__scroll::after{content:"";width:1px;height:44px;background:linear-gradient(#e9dcc2,transparent);animation:scrolldot 2.4s infinite}
@keyframes scrolldot{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Sections ---------- */
.section{padding:clamp(70px,10vw,132px) 0;position:relative}
.section--parchment{background:var(--parchment)}
.section--pine{background:var(--pine);color:var(--parchment)}
.section--pine h2,.section--pine h3,.section--pine h4{color:#fdf9ef}
.section--pine .lead,.section--pine .muted{color:rgba(242,234,217,.75)}
.section--pine .eyebrow{color:var(--amber-soft)}
.section--pine .eyebrow::before{background:var(--amber-soft)}
.section--pine .orn{color:var(--amber-soft)}

/* Hirsch-Wasserzeichen */
.watermark{position:absolute;right:-40px;bottom:-30px;width:min(380px,46vw);opacity:.055;pointer-events:none;filter:grayscale(1)}
.section--pine .watermark{opacity:.08;filter:invert(1) grayscale(1)}
/* Der Hirsch ragt bewusst ueber die rechte Kante — ohne Clip erzeugt das aber
   40px waagerechten Dokument-Ueberlauf. overflow-x:clip schneidet nur seitlich
   ab; senkrecht bleibt alles sichtbar, damit die Reveal-Animationen und der
   Schatten des Bildrahmens nicht beschnitten werden.
   Zwei getrennte Regeln: faellt :has() in alten Browsern weg, greift die ID. */
#willkommen{overflow-x:clip}
.section:has(> .watermark){overflow-x:clip}

/* ---------- Foto-Band (vollflächig) ---------- */
.imgband{position:relative;height:clamp(360px,52vw,620px);overflow:hidden;margin:0}
/* Die Aufnahmen liegen uebereinander und wechseln im Fade. Das .imgband hat
   eine feste Hoehe, die Bilder duerfen daher absolut positioniert sein.
   Auch ein einzelnes Bild braucht .active, sonst bliebe es auf opacity 0. */
.imgband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity 1.6s ease}
.imgband img.active{opacity:1}
.imgband figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(30px,5vw,74px);text-align:center;
  background:linear-gradient(transparent,rgba(19,13,7,.74));color:#f7efe0;
  font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,2.7vw,2.15rem);line-height:1.35}
.imgband figcaption span{display:block;font-family:var(--sans);font-style:normal;font-weight:700;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:#e4cd92;margin-bottom:.9rem}

/* Blaettern von Hand durch die Aufnahmen */
.band__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(242,234,217,.6);border-radius:50%;background:rgba(20,26,20,.52);
  color:#f2ead9;font-size:1.9rem;line-height:0;padding:0 0 4px;cursor:pointer;
  transition:background .22s,border-color .22s,transform .22s}
.band__btn:hover{background:rgba(20,26,20,.75);border-color:var(--amber-soft);color:#fff}
.band__btn--prev{left:clamp(10px,2.5vw,30px)}
.band__btn--next{right:clamp(10px,2.5vw,30px)}
.band__btn:focus-visible{outline:3px solid var(--amber-soft);outline-offset:3px}
.band__count{position:absolute;top:clamp(14px,2.5vw,26px);right:clamp(14px,2.5vw,30px);z-index:3;margin:0;
  font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.18em;
  color:rgba(242,234,217,.95);background:rgba(20,26,20,.52);padding:.42rem .7rem}
@media(max-width:560px){
  .band__btn{width:44px;height:44px;font-size:1.6rem}
  .band__count{font-size:.66rem;padding:.34rem .55rem}
}

/* ---------- Split (asymmetrisch) ---------- */
.split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2.4rem,6vw,5.5rem);align-items:center}
.split--reverse .split__media{order:2}
.split__media{position:relative}

/* Bilderrahmen — doppelte Linie + Passepartout */
.frame{background:#fff;padding:12px;border:1px solid var(--line);box-shadow:var(--shadow);position:relative}
.frame::after{content:"";position:absolute;inset:6px;border:1px solid var(--line-soft);pointer-events:none}
.frame img{width:100%;height:auto}
.frame--arch,.frame--arch::after{border-radius:999px 999px 3px 3px}
.frame--arch img{border-radius:986px 986px 0 0;aspect-ratio:3/4;object-fit:cover}
.frame:not(.frame--arch) img{aspect-ratio:4/3;object-fit:cover}
.frame__caption{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ink-soft);
  text-align:center;padding:12px 8px 4px;margin:0}

.split__tag{position:absolute;top:22px;left:-14px;background:var(--pine);color:var(--parchment);
  font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  padding:12px 20px;box-shadow:var(--shadow);z-index:2}
.split__tag--amber{background:var(--amber);color:#fff}

/* Handschriftliche Note */
.signature{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--amber);margin-top:1.6rem}
.signature small{display:block;font-family:var(--sans);font-style:normal;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:.4rem}

/* Kennzahlen */
.stats{display:flex;gap:clamp(1.6rem,4vw,3rem);flex-wrap:wrap;margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.stat b{font-family:var(--serif);font-weight:600;font-size:2.5rem;color:var(--pine);display:block;line-height:1}
/* Nur der direkte Kind-<span> ist die Beschriftung. Der Zaehler steckt als
   <span data-count> im <b> — ein Nachfahren-Selektor wuerde ihn mit auf
   Beschriftungsgroesse zurueckziehen. */
.stat>span{font-size:.85rem;letter-spacing:.06em;color:var(--ink-soft)}
.section--pine .stat b{color:var(--amber-soft)}
.section--pine .stat>span{color:rgba(242,234,217,.7)}

/* ---------- Zimmer ---------- */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
.room{text-align:center}
.room .frame--arch img{object-position:center 72%}
.room .frame--arch{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.room:hover .frame--arch{transform:translateY(-8px)}
.room h3{margin:1.3rem 0 .3rem}
.room__price{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--amber);margin:0 0 .5rem}
.room p.desc{font-size:.96rem;color:var(--ink-soft);max-width:34ch;margin:0 auto}

/* Preistafel — wie eine Wirtshaustafel */
.board{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);
  padding:clamp(1.8rem,4vw,3rem);position:relative;max-width:680px;margin:clamp(3rem,6vw,4.5rem) auto 0}
.board::after{content:"";position:absolute;inset:8px;border:1px solid var(--line-soft);pointer-events:none}
.board h3{text-align:center;margin-bottom:.4rem}
.board .orn{margin-bottom:1.6rem}
.price-row{display:flex;align-items:baseline;gap:10px;padding:.55rem 0;font-size:1.02rem}
.price-row .dots{flex:1;border-bottom:2px dotted rgba(58,47,32,.3);transform:translateY(-4px)}
.price-row b{font-family:var(--serif);font-weight:600;font-size:1.1rem;white-space:nowrap}
.price-row .amt{font-family:var(--serif);font-weight:600;color:var(--pine);white-space:nowrap}
.board .note{text-align:center;font-size:.88rem;color:var(--ink-soft);margin:1.4rem 0 0}

/* Ausstattung — Diamant-Liste */
.amenities{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.4rem 2.4rem;
  max-width:900px;margin:2.6rem auto 0;padding:0;list-style:none}
.amenities li{position:relative;padding:.45rem 0 .45rem 1.5rem;font-size:.99rem;color:var(--ink-soft)}
.amenities li::before{content:"◆";position:absolute;left:0;top:.55rem;font-size:.55rem;color:var(--amber)}
.amenities li b{color:var(--ink)}
.section--pine .amenities li{color:rgba(242,234,217,.8)}
.section--pine .amenities li b{color:#fdf9ef}

/* ---------- Frühstück Menü ---------- */
.menu-cols{columns:2;column-gap:3rem;margin:1.4rem 0;padding:0;list-style:none}
.menu-cols li{position:relative;padding:.34rem 0 .34rem 1.4rem;font-size:.99rem;break-inside:avoid;color:rgba(242,234,217,.85)}
.menu-cols li::before{content:"◆";position:absolute;left:0;top:.46rem;font-size:.5rem;color:var(--amber-soft)}
.bigtime{display:flex;align-items:baseline;gap:.7rem;margin:0 0 1rem}
.bigtime b{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.6rem);font-weight:600;color:var(--amber-soft);line-height:1}
.bigtime span{font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,234,217,.7)}

/* ---------- Polaroids (Umgebung) ---------- */
.postcards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.6rem);align-items:start}
.polaroid{background:#fff;padding:10px 10px 8px;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .45s}
.polaroid img{aspect-ratio:3/4;object-fit:cover;width:100%}
.polaroid figcaption{font-family:var(--serif);font-style:italic;text-align:center;padding:14px 4px 9px;font-size:1.12rem;color:var(--ink-soft)}
.polaroid:nth-child(odd){transform:rotate(-1.8deg)}
.polaroid:nth-child(even){transform:rotate(1.4deg) translateY(14px)}
.polaroid:hover{transform:rotate(0) translateY(-6px);z-index:2}
@media(min-width:1020px){
  .postcards{width:min(1500px,92vw);margin-inline:auto;position:relative;left:50%;transform:translateX(-50%)}
}
.dest-list{margin:2.8rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.2rem 2.6rem}
.dest-list li{display:flex;align-items:baseline;gap:10px;padding:.6rem 0;border-bottom:1px solid var(--line-soft);font-size:.99rem}
.dest-list b{font-family:var(--serif);font-weight:600}
.dest-list .dots{flex:1;border-bottom:2px dotted rgba(58,47,32,.25);transform:translateY(-4px)}
.dest-list span{color:var(--ink-soft);font-size:.9rem;white-space:nowrap}

/* ---------- Galerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:228px;gap:16px}
.gallery button{border:1px solid var(--line);padding:6px;cursor:pointer;background:#fff;overflow:hidden;position:relative;border-radius:4px;box-shadow:0 12px 32px -22px rgba(43,36,26,.5)}
.gallery button>span{display:block;width:100%;height:100%;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.gallery button:hover img{transform:scale(1.07)}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:span 2}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:3000;background:rgba(24,20,14,.93);display:none;align-items:center;justify-content:center;padding:4vh 4vw}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:90vh;object-fit:contain;border:6px solid #fff;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb__btn{position:absolute;background:rgba(250,245,234,.08);border:1px solid rgba(250,245,234,.3);color:#f2ead9;
  width:52px;height:52px;border-radius:50%;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.lb__btn:hover{background:rgba(250,245,234,.18)}
.lb__close{top:22px;right:22px}
.lb__prev{left:18px;top:50%;transform:translateY(-50%)}
.lb__next{right:18px;top:50%;transform:translateY(-50%)}

/* ---------- Chronik ---------- */
.chronicle{position:relative;max-width:720px;margin:0 auto;padding-left:2.2rem}
.chronicle::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--amber),var(--line))}
.chron-item{position:relative;padding:0 0 2rem}
.chron-item::before{content:"◆";position:absolute;left:calc(-2.2rem + 0px);top:.35rem;font-size:.6rem;color:var(--amber)}
.chron-item b{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--amber);display:block;line-height:1.2}
.chron-item p{margin:.3rem 0 0;color:var(--ink-soft);font-size:1rem;max-width:58ch}

/* Pressezitat */
.pressquote{max-width:720px;margin:3.5rem auto 0;text-align:center;position:relative;padding:0 1rem}
.pressquote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.7rem);
  color:var(--ink);margin:0;line-height:1.4}
.pressquote blockquote::before{content:"„";display:block;font-size:4.5rem;line-height:.6;color:var(--amber);margin-bottom:.6rem}
.pressquote cite{display:block;margin-top:1.2rem;font-family:var(--sans);font-style:normal;font-size:.8rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:start}
.contact-grid>*{min-width:0}
.info-row{display:flex;gap:1.1rem;padding:1.15rem 0;border-bottom:1px solid rgba(242,234,217,.16)}
.info-row .ic{flex:0 0 auto;width:22px;height:22px;color:var(--amber-soft);margin-top:4px}
.info-row a{color:#fdf9ef;text-decoration:none;border-bottom:1px solid rgba(224,182,46,.4);transition:border-color .2s}
.info-row a:hover{border-color:var(--amber-soft)}
.info-row h4{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;margin:0 0 .3em;color:var(--amber-soft)}
.info-row span,.info-row p{color:rgba(242,234,217,.85);margin:0;font-size:1rem}
.hours{list-style:none;margin:.3rem 0 0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;font-size:.97rem;color:rgba(242,234,217,.85)}
.hours li b{font-family:var(--serif);font-weight:600;color:#fdf9ef}
.hours li .dots{flex:1;border-bottom:2px dotted rgba(242,234,217,.25);transform:translateY(-4px)}

.form-card{background:var(--paper);color:var(--ink);padding:clamp(1.6rem,3.5vw,2.6rem);border:1px solid var(--line);box-shadow:var(--shadow);position:relative}
.form-card::after{content:"";position:absolute;inset:7px;border:1px solid var(--line-soft);pointer-events:none}
.form-card h3,.section--pine .form-card h3{text-align:center;color:var(--ink)}
.form-card .orn{margin-bottom:1.4rem}
.form-card form{position:relative;z-index:1}
form .field{margin-bottom:1.05rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field-row .field{min-width:0}
form label{display:block;font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.45rem;color:var(--ink-soft)}
form input,form textarea,form select{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:2px;font:inherit;
  background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
form select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%233a3a34' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:42px}
form input:focus,form textarea:focus,form select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(158,116,17,.2)}
form textarea{min-height:128px;resize:vertical}
.form-note{margin-top:.9rem;text-align:center;font-size:.82rem;line-height:1.5;color:var(--ink-soft)}
/* Kein Flex: sonst werden Text, Link und Schlusswort zu eigenen Flex-Items
   und der Satz bricht aus dem Formular aus. Block + absolute Checkbox laesst
   den Text normal fliessen — auch wenn ein Link mitten im Label steht. */
.check{display:block;position:relative;padding-left:1.65rem;font-size:.85rem;color:var(--ink-soft);
  overflow-wrap:break-word;hyphens:auto}
.check input{position:absolute;left:0;top:4px;width:auto;margin:0}
.check a{color:var(--pine)}
/* auf sehr schmalen Geraeten die Laufweite zuruecknehmen, damit lange
   Komposita wie "Datenschutzerklaerung" noch in eine Zeile passen */
@media(max-width:400px){.check{letter-spacing:.08em}}

/* ---------- Footer ---------- */
.site-footer{background:var(--bark);color:rgba(242,234,217,.72);padding:clamp(52px,7vw,84px) 0 30px;text-align:center}
.site-footer .brandmark img{height:110px;width:auto;margin:0 auto 1.4rem}
/* Bollenhut — Schwarzwaelder Trachtenhut links und rechts vom Schriftzug */
.footer-crest{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3.5vw,40px);margin-bottom:1.4rem}
.site-footer .footer-crest .brandmark img{margin:0}
.footer-bollenhut{display:block;flex:0 0 auto;width:clamp(56px,7vw,82px);height:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.4))}
.footer-bollenhut--right{transform:scaleX(-1)}
.site-footer .orn{color:var(--amber-soft);margin-bottom:1.4rem}
.footer-addr{font-size:.98rem;line-height:2}
.footer-addr a{color:#f2ead9;text-decoration:none;border-bottom:1px solid rgba(224,182,46,.35)}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.8rem;margin:1.8rem 0 0;padding:0;list-style:none}
.footer-nav a{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,234,217,.75);text-decoration:none;transition:color .2s}
.footer-nav a:hover{color:var(--amber-soft)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;margin-top:2.6rem;padding-top:1.5rem;
  border-top:1px solid rgba(242,234,217,.14);font-size:.82rem;color:rgba(242,234,217,.5)}
.footer-bottom a{color:rgba(242,234,217,.7);text-decoration:none}
.footer-bottom a:hover{color:#fff}

/* ---------- WhatsApp ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:1600;width:58px;height:58px;border-radius:50%;
  background:#25d366;box-shadow:0 12px 30px -8px rgba(37,211,102,.65);display:flex;align-items:center;justify-content:center;transition:transform .25s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* ---------- Cookie ---------- */
#cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:2500;max-width:520px;margin:0 auto;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);padding:1.2rem 1.4rem}
#cookie-banner::after{content:"";position:absolute;inset:6px;border:1px solid var(--line-soft);pointer-events:none}
#cookie-banner[hidden]{display:none}
#cookie-banner p{font-size:.88rem;margin:0 0 .9rem;position:relative;z-index:1}
#cookie-banner .row{display:flex;gap:.6rem;flex-wrap:wrap;position:relative;z-index:1}
#cookie-banner button{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 18px;border-radius:2px;cursor:pointer;border:1px solid var(--pine)}
#cookie-accept{background:var(--pine);color:#fff}
#cookie-decline{background:transparent;color:var(--pine)}

/* ---------- Rechtsseiten ---------- */
.pagehead{position:relative;color:#fff;padding:160px 0 64px;background:var(--pine);overflow:hidden;text-align:center}
.pagehead::after{content:"";position:absolute;inset:14px;border:1px solid rgba(242,234,217,.22);pointer-events:none}
.pagehead h1{color:#fdf9ef;font-size:clamp(2.1rem,5vw,3.1rem)}
.breadcrumb{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,234,217,.65);margin:.5rem 0 0}
.breadcrumb a{color:rgba(242,234,217,.65)}
.prose{max-width:76ch;margin:0 auto}
.prose h2{font-size:1.55rem;margin-top:2.4rem}
.prose a{color:var(--pine)}
.prose ul{margin:1rem 0;padding-left:1.3rem}
.prose li{margin-bottom:.5rem}

/* ---------- GSAP reveal ---------- */
body.gsap-ready .reveal{opacity:0;transform:translateY(36px);will-change:opacity,transform}
body.gsap-ready [data-hero]{opacity:0}
@media(prefers-reduced-motion:reduce){
  body.gsap-ready .reveal,body.gsap-ready [data-hero]{opacity:1!important;transform:none!important}
  .hero__media img{transition:opacity .4s}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media(max-width:1020px){
  .postcards{grid-template-columns:repeat(2,1fr)}
  .rooms{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .field-row{grid-template-columns:1fr}
}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:2.4rem}
  .split--reverse .split__media{order:0}
  .contact-grid{grid-template-columns:1fr}
  .rooms{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .menu-cols{columns:1}
  .watermark{display:none}
}
@media(max-width:1200px){
  .nav-toggle{display:block}
  .header-cta{display:none}
  .main-nav{position:fixed;inset:0 0 0 auto;width:min(82vw,330px);flex-direction:column;align-items:flex-start;
    justify-content:center;gap:.2rem;background:var(--parchment);padding:2.2rem;transform:translateX(102%);
    transition:transform .4s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow);z-index:1100}
  body.nav-open .main-nav{transform:translateX(0)}
  .main-nav a{color:var(--ink)!important;font-size:1rem;width:100%;padding:.85rem .2rem;border-bottom:1px solid var(--line-soft)}
  .main-nav a::after{display:none}
  body.nav-open{overflow:hidden}
  body.nav-open .nav-toggle{position:relative;z-index:1200;color:var(--ink)}
  body.nav-open .nav-toggle span{background:transparent}
  body.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
  body.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}
}
@media(max-width:480px){
  /* Lange Zeilen wie "Monteure & Langzeit … auf Anfrage": Label und Betrag sind
     beide nowrap und passen nebeneinander nicht mehr. Ohne Umbruch schiebt die
     Zeile das Dokument ueber den rechten Rand — und mit ihm die fixierte
     Kopfleiste, die dann breiter als der Bildschirm wird. */
  .price-row{flex-wrap:wrap;row-gap:0}
  .price-row .dots{min-width:18px}
  .price-row .amt{margin-left:auto}
  /* Dasselbe in der Ausflugsliste: "groesster Marktplatz Deutschlands" ist nowrap
     und schob das Dokument um 33px nach rechts. */
  .dest-list li{flex-wrap:wrap;row-gap:0}
  .dest-list .dots{min-width:18px}
  .dest-list li>span:last-child{white-space:normal;margin-left:auto;text-align:right}
}
@media(max-width:760px){
  .postcards{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .polaroid:nth-child(even){transform:rotate(1.4deg)}
  .footer-bottom{flex-direction:column;text-align:center}
  .hero__scroll{display:none}
  .imgband figcaption{font-size:1.15rem}
}

/* ============================================================
   Erweiterungen — Sprachumschalter · Telefon-Icon · Galerie-Gruppen · Karte
   ============================================================ */

/* ---------- Sprachumschalter (DE | EN) ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:2px;margin-left:.5rem;padding-left:.85rem;border-left:1px solid rgba(255,255,255,.32)}
.lang-switch a{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.1em;color:#fff;text-decoration:none;
  padding:.28rem .5rem;border-radius:3px;opacity:.68;transition:opacity .2s,background .2s}
.lang-switch a::after{display:none}
.lang-switch a:hover{opacity:1}
.lang-switch a.active{opacity:1;background:rgba(255,255,255,.16)}
.site-header.solid .lang-switch,.site-header.light .lang-switch{border-left-color:var(--line)}
.site-header.solid .lang-switch a,.site-header.light .lang-switch a{color:var(--ink)}
.site-header.solid .lang-switch a.active,.site-header.light .lang-switch a.active{background:rgba(43,36,26,.1)}

/* ---------- Telefon-Icon im Header (mobil) ---------- */
.header-tel{align-items:center;justify-content:center;width:44px;height:44px;color:#fff;text-decoration:none;flex-shrink:0}
.header-tel svg{width:24px;height:24px}
.site-header.over-hero:not(.solid) .header-tel{filter:drop-shadow(0 1px 10px rgba(14,19,11,.6))}
.site-header.solid .header-tel,.site-header.light .header-tel{color:var(--ink)}

/* ---------- Galerie-Gruppen + „Mehr anzeigen" ---------- */
.gallery-group{margin-top:clamp(2.6rem,5vw,4rem)}
.gallery-group:first-of-type{margin-top:0}
.gallery-title{text-align:center;font-size:clamp(1.3rem,2.6vw,1.7rem);margin-bottom:1.6rem}
.gallery-group:not(.expanded) .g-more{display:none}
.gallery-more{text-align:center;margin-top:1.8rem}

/* ---------- Karte (Kontakt) ---------- */
.map-wrap{margin-top:clamp(2.6rem,5vw,4rem);position:relative;overflow:hidden;min-height:320px;
  border:1px solid rgba(242,234,217,.18);background:rgba(250,245,234,.05)}
.map-consent{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:1.1rem;padding:2rem}
.map-consent svg{width:40px;height:40px;color:var(--amber-soft)}
.map-consent p{max-width:46ch;margin:0;color:rgba(242,234,217,.85);font-size:.95rem}
.map-consent a{color:var(--amber-soft)}
.map-wrap iframe{display:block;width:100%;height:440px;border:0}

/* ---------- Header-Aktionen (Sprache + Telefon) ---------- */
.hdr-actions{display:flex;align-items:center;gap:.45rem}
.hdr-actions .lang-switch{margin-left:0}

/* ---------- Mobiler Header: Hamburger links · Logo mittig · Sprache + Telefon rechts ---------- */
@media(max-width:1200px){
  /* Dreispaltiges Raster statt Flex: die beiden Aussenspalten sind gleich breit,
     damit das Logo exakt mittig bleibt, egal wie breit die Aktionen rechts werden.
     .main-nav ist hier position:fixed und faellt aus dem Raster heraus. */
  .site-header .inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
  .nav-toggle{margin:0;justify-self:start}
  .brand{margin:0;justify-self:center}
  .hdr-actions{justify-self:end}
  .header-tel{display:flex}

  /* Sprachumschalter als sichtbarer Knopf in der Leiste — wie auf grossen Schirmen */
  .lang-switch{margin:0;padding:0;gap:0;border:1px solid rgba(255,255,255,.45);border-left-width:1px;
    border-radius:999px;overflow:hidden}
  .lang-switch a{padding:.42rem .6rem;border-radius:0;font-size:.7rem;opacity:.82}
  .lang-switch a.active{opacity:1;background:rgba(255,255,255,.22)}
  .site-header.solid .lang-switch,.site-header.light .lang-switch{border-color:rgba(43,36,26,.3)}
  .site-header.solid .lang-switch a.active,.site-header.light .lang-switch a.active{background:rgba(43,36,26,.12)}

  /* Telefon als goldener Knopf — das mobile Gegenstueck zum CTA auf grossen Schirmen,
     damit die Leiste denselben Akzent traegt und nicht grau wirkt */
  .site-header .hdr-actions .header-tel{width:42px;height:42px;border-radius:50%;
    background:var(--amber);color:#fff;box-shadow:0 6px 16px -8px rgba(158,116,17,.95);filter:none}
  .site-header .hdr-actions .header-tel svg{width:21px;height:21px}
}
@media(max-width:480px){
  .brand img,.site-header.solid .brand img,.site-header.light .brand img{height:44px}
  .lang-switch a{padding:.4rem .52rem;font-size:.68rem}
}
/* Unter ~430px reicht die Breite fuer ein exakt mittiges Logo nicht mehr:
   die rechte Spalte (Sprache + Telefon) ist deutlich breiter als der Hamburger,
   und ein 1fr-Raster wuerde die Leiste ueber den Bildschirmrand schieben.
   Darum hier zurueck auf Flex — das Logo bleibt optisch mittig, laeuft aber nicht ueber. */
@media(max-width:430px){
  .site-header .inner{display:flex;gap:.4rem;padding-left:14px;padding-right:14px}
  .nav-toggle{margin:0}
  .brand{margin:0 auto}
  .brand img,.site-header.solid .brand img,.site-header.light .brand img{height:38px}
  .lang-switch a{padding:.36rem .44rem;font-size:.64rem}
  .site-header .hdr-actions .header-tel{width:40px;height:40px}
  .site-header .hdr-actions .header-tel svg{width:20px;height:20px}
  .hdr-actions{gap:.35rem}
}
@media(max-width:900px){
  .map-wrap iframe{height:360px}
}

/* ---------- Chronik: historische Bilder ---------- */
.chron-media{display:grid;gap:clamp(1.3rem,2.6vw,2.1rem)}
.chron-media .frame:nth-child(2){margin-left:clamp(0px,3.5vw,2.4rem)}
.frame--free img{aspect-ratio:auto!important;object-fit:contain!important;background:#fff}
@media(max-width:900px){
  .chron-media{max-width:520px;margin:0 auto}
  .chron-media .frame:nth-child(2){margin-left:0}
}

/* ---------- Chronik: laufende Zeitleiste ---------- */
/* Bühne: alle Epochenbilder liegen übereinander und blenden weich um */
.chron-stage__box{position:relative;width:100%;aspect-ratio:4/3;background:#fff;overflow:hidden}
.chron-stage__box img{
  position:absolute;inset:0;width:100%!important;height:100%!important;
  object-fit:contain!important;background:#fff;
  opacity:0;transform:scale(1.035);
  transition:opacity .85s ease,transform 2.4s cubic-bezier(.2,.6,.2,1);
}
.chron-stage__box img.is-on{opacity:1;transform:scale(1)}
/* Bildunterschrift wechselt mit — feste Höhe, damit nichts springt */
.chron-stage .frame__caption{min-height:3.4em;transition:opacity .35s ease}
.chron-stage .frame__caption.is-fading{opacity:0}

/* Fortschrittslinie: ::before bleibt die blasse Spur, ::after ist der laufende Balken */
.chronicle[data-chron]{--chron:0}
.chronicle[data-chron][data-running]::before{background:var(--line)}
.chronicle[data-chron]::after{
  content:"";position:absolute;left:5px;top:8px;width:1px;
  height:calc((100% - 16px) * var(--chron));
  background:linear-gradient(180deg,var(--amber),var(--amber-soft));
  box-shadow:0 0 10px 1px rgba(224,182,46,.5);
  pointer-events:none;
}
/* der Lichtpunkt an der Spitze der Linie */
.chronicle[data-chron][data-running]::after{border-bottom:3px solid var(--amber-soft)}

/* Einträge: aktiver Eintrag tritt hervor, die übrigen treten zurück */
.chronicle[data-running] .chron-item{opacity:.38;transition:opacity .55s ease}
.chronicle[data-running] .chron-item.is-on{opacity:1}
.chronicle[data-running] .chron-item::before{transition:transform .5s cubic-bezier(.2,.8,.2,1),text-shadow .5s ease}
.chronicle[data-running] .chron-item.is-on::before{
  transform:scale(1.85);color:var(--amber);
  text-shadow:0 0 12px rgba(224,182,46,.9);
}

@media(prefers-reduced-motion:reduce){
  /* keine Bewegung: Linie voll, alle Einträge lesbar, erstes Bild sichtbar */
  .chronicle[data-chron]{--chron:1}
  .chronicle[data-running] .chron-item{opacity:1}
  .chronicle[data-running] .chron-item.is-on::before{transform:none;text-shadow:none}
  .chron-stage__box img{transition:none;transform:none}
}