/* BoaVista Balingen — Stylesheet
   CI: Schwarz / Creme / Gold #C69C6D · Fahkwang (Headlines) · Jost (Text) */

@font-face{font-family:"Fahkwang";src:url("../fonts/fahkwang-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Fahkwang";src:url("../fonts/fahkwang-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fahkwang";src:url("../fonts/fahkwang-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Fahkwang";src:url("../fonts/fahkwang-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Delafield";src:url("../fonts/mrs-saint-delafield-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --gold:#c69c6d;
  --gold-hell:#e2c39d;
  --gold-tief:#8a6236;
  --nacht:#0e0d0c;
  --nacht-2:#171513;
  --nacht-3:#211e1b;
  --anthrazit:#3b3f3e;
  --creme:#f3efe8;
  --creme-2:#e9e3d8;
  --papier:#fbf9f5;
  --tinte:#161514;
  --grau:#5f5a53;
  --linie-hell:rgba(22,21,20,.14);
  --linie-dunkel:rgba(243,239,232,.14);
  --kopf:"Fahkwang","Jost",system-ui,sans-serif;
  --text:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --schrift:"Delafield","Brush Script MT",cursive;
  --rand:clamp(20px,5vw,72px);
  --max:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--nacht);color:var(--creme);font-family:var(--text);font-weight:350;font-size:clamp(16px,1.05vw + 12px,19px);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--kopf);font-weight:300;line-height:1.08;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
::selection{background:var(--gold);color:var(--nacht)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--gold);color:var(--nacht);padding:10px 16px;border-radius:8px;z-index:200;text-decoration:none;font-weight:500}
.skip:focus{top:12px}
.hell :focus-visible,.papier :focus-visible,.team :focus-visible{outline-color:var(--tinte)}

.wrap{width:100%;max-width:calc(var(--max) + var(--rand)*2);margin:0 auto;padding-inline:var(--rand)}
.sektion{padding-block:clamp(72px,10vw,150px);position:relative}
.hell{background:var(--creme);color:var(--tinte)}
.papier{background:var(--papier);color:var(--tinte)}
.dunkel-2{background:var(--nacht-2)}

.eyebrow{font-family:var(--text);font-size:.78rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px;margin:0 0 22px}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;flex:none}
.hell .eyebrow,.papier .eyebrow{color:var(--gold-tief)}
.h-xl{font-size:clamp(2.6rem,7.4vw,6.4rem)}
.h-l{font-size:clamp(2.1rem,4.8vw,4rem)}
.h-m{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.lead{font-size:clamp(1.05rem,1.3vw,1.3rem);line-height:1.6;max-width:62ch}
.gold{color:var(--gold)}
.script{font-family:var(--schrift);font-weight:400;color:var(--gold);line-height:.9;letter-spacing:0}
em.akzent{font-style:normal;color:var(--gold)}
.hell em.akzent,.papier em.akzent{color:var(--gold-tief)}

/* ---------- Buttons ---------- */
.btn{--bg:var(--gold);--fg:var(--nacht);display:inline-flex;align-items:center;gap:12px;padding:15px 28px;border-radius:999px;background:var(--bg);color:var(--fg);text-decoration:none;font-weight:500;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--bg);transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s;cursor:pointer;font-family:var(--text);white-space:nowrap}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease);flex:none}
.btn:hover{transform:translateY(-2px);background:var(--gold-hell);border-color:var(--gold-hell)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(0) scale(.97)}
.chip:active,.reiter a:active,.kachel:active{transform:scale(.98)}
.btn.linie{--bg:transparent;--fg:currentColor;border-color:currentColor}
.btn.linie:hover{background:var(--gold);border-color:var(--gold);color:var(--nacht)}
.btn-reihe{display:flex;flex-wrap:wrap;gap:12px}
.textlink{color:inherit;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px;transition:color .25s}
.textlink:hover{color:var(--gold)}
.hell .textlink:hover,.papier .textlink:hover{color:var(--gold-tief)}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .35s,box-shadow .35s,transform .4s var(--ease)}
.kopf.fest{background:rgba(14,13,12,.82);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 var(--linie-dunkel)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px;transition:height .35s}
.kopf.fest .wrap{height:68px}
.logo{display:flex;align-items:center;min-height:44px;flex:none}
.logo img{width:clamp(150px,15vw,198px);height:auto}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.nav a{text-decoration:none;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:450;position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0;color:var(--creme);opacity:.86;transition:opacity .25s,color .25s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{opacity:1;color:var(--gold-hell)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--linie-dunkel);background:transparent;color:var(--creme);cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease),opacity .2s}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:27px}
.offen .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.offen .burger span:nth-child(2){opacity:0}
.offen .burger span:nth-child(3){top:22px;transform:rotate(-45deg)}

@media (max-width:860px){
  .kopf .wrap,.kopf.fest .wrap{height:64px}
  body:has(.reiter) .kopf{position:absolute}
  body:has(.reiter) .reiter{top:0}
  html{scroll-padding-top:76px}
  .burger{display:block;z-index:120}
  .logo{z-index:120;position:relative}
  .nav{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;overflow-y:auto;background:var(--nacht);flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:100px var(--rand) 40px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .offen .nav{opacity:1;visibility:visible}
  .nav a{font-family:var(--kopf);font-size:clamp(1.9rem,8.5vw,2.8rem);letter-spacing:0;text-transform:none;font-weight:300;padding:8px 0;opacity:1;transform:translateY(16px);transition:transform .5s var(--ease),color .25s}
  .offen .nav a{transform:none}
  .nav a::after{display:none}
  .nav .nav-fuss{margin-top:28px;font-family:var(--text);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
}
@media (min-width:861px){.nav .nav-fuss{display:none}}

/* ---------- Status-Pille ---------- */
.status{display:inline-flex;align-items:center;gap:12px;padding:9px 18px 9px 14px;border-radius:999px;border:1px solid var(--linie-dunkel);background:rgba(243,239,232,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.84rem;letter-spacing:.04em;line-height:1.35;color:var(--creme);text-decoration:none;max-width:100%}
.status .punkt{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none;position:relative}
.status .punkt::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid currentColor;color:var(--gold);opacity:.6;animation:puls 2.4s ease-out infinite}
.status[data-zustand="offen"] .punkt{background:#7fc88b}.status[data-zustand="offen"] .punkt::after{color:#7fc88b}
.status[data-zustand="zu"] .punkt{background:#d9806c}.status[data-zustand="zu"] .punkt::after{color:#d9806c;animation:none;opacity:0}
.status b{font-weight:500;color:var(--gold-hell);letter-spacing:.14em;text-transform:uppercase;font-size:.75rem;flex:none}
@keyframes puls{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.9);opacity:0}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding-top:110px;padding-bottom:70px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(90% 70% at 78% 40%,rgba(198,156,109,.2),transparent 62%),radial-gradient(60% 50% at 8% 96%,rgba(198,156,109,.1),transparent 70%),var(--nacht)}
#funken{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero-raster{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,84px);align-items:center}
.hero h1{margin:26px 0 0;font-size:clamp(2.5rem,5.1vw,5.4rem);line-height:1.02;letter-spacing:-.025em}
@media (min-width:861px){.hero h1 .zeile{white-space:nowrap}}
.hero h1 .zeile{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .zeile>span{display:block;transform:translateY(105%);animation:hoch 1s var(--ease) forwards}
.hero h1 .zeile:nth-child(2)>span{animation-delay:.12s}
.hero .script{display:block;font-size:clamp(3.2rem,6.4vw,5.8rem);margin:.3em 0 0 .06em;transform:rotate(-4deg);transform-origin:left;opacity:0;animation:ein 1.1s .55s var(--ease) forwards}
.hero .lead{margin-top:clamp(8px,1.4vw,18px);color:rgba(243,239,232,.82);opacity:0;animation:ein 1s .7s var(--ease) forwards}
.hero .btn-reihe{margin-top:34px;opacity:0;animation:ein 1s .85s var(--ease) forwards}
.hero .status{opacity:0;animation:ein .9s .1s var(--ease) forwards}
@keyframes hoch{to{transform:none}}
@keyframes ein{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .script{animation-name:einSchrift}
@keyframes einSchrift{from{opacity:0;transform:rotate(-4deg) translateY(18px)}to{opacity:1;transform:rotate(-4deg)}}

.hero-bild{position:relative;justify-self:end;width:min(100%,500px);opacity:0;animation:ein 1.3s .25s var(--ease) forwards}
.bogen{position:relative;border-radius:999px 999px 18px 18px;overflow:hidden;aspect-ratio:2/3;box-shadow:0 50px 100px -30px rgba(0,0,0,.8),0 0 0 1px rgba(198,156,109,.35)}
.bogen img{width:100%;height:112%;object-fit:cover;will-change:transform}
.bogen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(14,13,12,.55));pointer-events:none}
.hero-bild::before{content:"";position:absolute;inset:-16px -16px 26px 16px;border:1px solid rgba(198,156,109,.4);border-radius:999px 999px 18px 18px;z-index:-1}
.siegel{position:absolute;left:-54px;bottom:54px;width:128px;height:128px;border-radius:50%;background:var(--gold);color:var(--nacht);display:grid;place-items:center;box-shadow:0 20px 40px -12px rgba(0,0,0,.6)}
.siegel svg.ring{position:absolute;inset:0;animation:dreh 26s linear infinite}
.siegel svg.glas{width:30px;height:40px}
@keyframes dreh{to{transform:rotate(360deg)}}
.scrollhinweis{position:absolute;left:var(--rand);bottom:26px;font-size:.75rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(243,239,232,.55);display:flex;align-items:center;gap:14px}
.scrollhinweis i{display:block;width:54px;height:1px;background:rgba(243,239,232,.25);position:relative;overflow:hidden}
.scrollhinweis i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:translateX(-100%);animation:lauf 2.4s var(--ease) infinite}
@keyframes lauf{50%{transform:none}100%{transform:translateX(100%)}}

@media (max-width:860px){
  .hero{padding-top:104px;padding-bottom:56px;min-height:0}
  .hero-raster{grid-template-columns:1fr}
  .hero .script{margin-top:.34em}
  .hero-bild{justify-self:center;width:min(78%,360px);margin-top:10px}
  .siegel{left:-34px;bottom:34px;width:98px;height:98px}
  .siegel svg.glas{width:22px;height:30px}
  .scrollhinweis{display:none}
}

/* ---------- Laufband ---------- */
.laufband{border-block:1px solid var(--linie-dunkel);overflow:hidden;background:var(--nacht-2);padding:18px 0;user-select:none}
.laufband .spur{display:flex;width:max-content;animation:band 46s linear infinite}
.laufband:hover .spur{animation-play-state:paused}
.laufband span{font-family:var(--kopf);font-weight:300;font-size:clamp(1.05rem,1.9vw,1.6rem);white-space:nowrap;padding-inline:clamp(18px,2.4vw,34px);display:flex;align-items:center;gap:clamp(36px,4.8vw,68px)}
.laufband span::after{content:"";width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:13px solid var(--gold)}
@keyframes band{to{transform:translateX(-50%)}}

/* ---------- Über uns ---------- */
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,100px);align-items:center}
.zwei.schmal-breit{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.collage{position:relative;padding:0 0 13% 12%}
.collage .gross{border-radius:16px;overflow:hidden;aspect-ratio:4/3.3;box-shadow:0 40px 80px -40px rgba(22,21,20,.55)}
.collage .gross img,.collage .klein img{width:100%;height:100%;object-fit:cover}
.collage .klein{position:absolute;left:0;bottom:0;width:42%;aspect-ratio:3/4;border-radius:999px 999px 12px 12px;overflow:hidden;border:8px solid var(--creme);box-shadow:0 30px 60px -30px rgba(22,21,20,.6)}
.collage .notiz{position:absolute;right:-6px;bottom:6%;background:var(--tinte);color:var(--creme);padding:14px 20px;border-radius:12px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.collage .notiz b{display:block;font-family:var(--kopf);font-weight:400;font-size:1.25rem;letter-spacing:0;text-transform:none;color:var(--gold)}
.fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:38px;border-top:1px solid var(--linie-hell)}
.fakten div{padding:20px 16px 0 0}
.fakten b{display:block;font-family:var(--kopf);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.9rem);color:var(--gold-tief);line-height:1.1}
.fakten span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grau)}

/* ---------- Genuss-Karten ---------- */
.kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,64px)}
.kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.kachel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(380px,44vw,560px);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--creme);isolation:isolate;padding:clamp(22px,2.4vw,34px)}
.kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.kachel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,13,12,.05) 20%,rgba(14,13,12,.9) 92%);transition:opacity .4s}
.kachel:hover img{transform:scale(1.07)}
.kachel .nr{position:absolute;top:22px;left:26px;font-family:var(--kopf);font-size:.8rem;letter-spacing:.2em;color:var(--gold-hell)}
.kachel h3{font-size:clamp(1.7rem,2.8vw,2.5rem)}
.kachel p{margin:10px 0 18px;font-size:.98rem;color:rgba(243,239,232,.82);max-width:32ch}
.kachel .pfeil{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hell)}
.kachel .pfeil svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.kachel:hover .pfeil svg{transform:translateX(6px)}
.kachel .preis{position:absolute;top:18px;right:18px;background:rgba(14,13,12,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(198,156,109,.4);padding:6px 14px;border-radius:999px;font-size:.76rem;letter-spacing:.08em}

/* ---------- Saison ---------- */
.saison-raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,96px);align-items:start}
.jahr{margin-top:40px}
.jahr .monate{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.jahr .monate span{height:44px;border-radius:6px;background:rgba(22,21,20,.07);display:grid;place-items:end center;padding-bottom:6px;font-size:.75rem;letter-spacing:0;color:var(--grau);position:relative;transition:background .6s var(--ease),color .6s}
.jahr.sichtbar .monate span.an{background:var(--tinte);color:var(--gold-hell)}
.jahr .monate span.jetzt::before{content:"";position:absolute;top:-12px;left:50%;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--gold-tief);transform:translateX(-50%)}
.jahr .legende{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:.78rem;color:var(--grau)}
.jahr .legende b{color:var(--tinte);font-weight:500}
.zeiten{background:var(--tinte);color:var(--creme);border-radius:22px;padding:clamp(26px,3.2vw,44px);position:relative;overflow:hidden;box-shadow:0 40px 80px -40px rgba(22,21,20,.7)}
.zeiten::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(198,156,109,.3),transparent 70%)}
.zeiten h3{font-size:clamp(1.35rem,2vw,1.75rem);position:relative}
.zeiten .klein{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:8px 0 22px;position:relative}
.zeiten ul{list-style:none;margin:0;padding:0;position:relative}
.zeiten li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--linie-dunkel);font-size:1rem}
.zeiten li.heute{color:var(--gold-hell)}
.zeiten li.heute span:first-child::after{content:"heute";margin-left:10px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;padding:2px 8px;border-radius:999px;vertical-align:2px}
.zeiten li span:last-child{font-variant-numeric:tabular-nums;opacity:.86}
.zeiten li.zu span:last-child{opacity:.74}
.zeiten .sozial{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;position:relative}
.chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid var(--linie-dunkel);text-decoration:none;font-size:.8rem;letter-spacing:.08em;transition:background .3s,border-color .3s,color .3s}
.chip svg{width:17px;height:17px;flex:none}
.chip:hover{background:var(--gold);border-color:var(--gold);color:var(--nacht)}

/* ---------- Events ---------- */
.leer{border:1px dashed var(--linie-dunkel);border-radius:18px;padding:clamp(26px,4vw,48px);display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.leer h3{font-size:clamp(1.3rem,2.2vw,1.9rem)}
.leer p{margin:8px 0 0;color:rgba(243,239,232,.7);max-width:52ch}
.termine{display:grid;gap:14px}
.termin{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,40px);align-items:center;padding:22px clamp(18px,2.6vw,34px);border:1px solid var(--linie-dunkel);border-radius:18px;background:rgba(243,239,232,.03)}
.termin .tag{font-family:var(--kopf);text-align:center;line-height:1;min-width:74px}
.termin .tag b{display:block;font-size:2.4rem;font-weight:300;color:var(--gold)}
.termin .tag span{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase}
.termin h3{font-size:clamp(1.2rem,2vw,1.6rem)}
.termin p{margin:6px 0 0;color:rgba(243,239,232,.72);font-size:.96rem}
.termin .zeit{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hell);white-space:nowrap}
@media (max-width:640px){.termin{grid-template-columns:auto 1fr}.termin .zeit{grid-column:2}}
.rueck-kopf{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:clamp(52px,7vw,90px) 0 26px}
.rueck-kopf h3{font-size:clamp(1.3rem,2.3vw,1.9rem)}
.pfeile{display:flex;gap:8px}
.pfeile button{width:48px;height:48px;border-radius:50%;border:1px solid var(--linie-dunkel);background:transparent;color:var(--creme);cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}
.pfeile button:hover{background:var(--gold);color:var(--nacht);border-color:var(--gold)}
.pfeile svg{width:18px;height:18px}
.schiene{display:flex;gap:clamp(14px,1.8vw,24px);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--rand);padding:6px var(--rand) 26px;margin-inline:calc(var(--rand)*-1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.schiene::-webkit-scrollbar{display:none}
.plakat{flex:none;width:clamp(220px,24vw,300px);scroll-snap-align:start;margin:0}
.plakat .rahmen{border-radius:14px;overflow:hidden;aspect-ratio:2/3;background:var(--nacht-3);box-shadow:0 30px 60px -30px rgba(0,0,0,.9);transition:transform .6s var(--ease)}
.plakat:hover .rahmen{transform:translateY(-8px) rotate(-1deg)}
.plakat img{width:100%;height:100%;object-fit:cover}
.plakat figcaption{margin-top:14px}
.plakat figcaption b{display:block;font-family:var(--kopf);font-weight:400;font-size:1.1rem}
.plakat figcaption span{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* ---------- Privates Event ---------- */
.feier{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(90px,13vw,190px)}
.feier .hinten{position:absolute;inset:-8% 0;z-index:-2}
.feier .hinten img{width:100%;height:100%;object-fit:cover}
.feier::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,13,12,.94) 0%,rgba(14,13,12,.78) 46%,rgba(14,13,12,.3) 100%)}
.feier .inhalt{max-width:640px}
.feier p{color:rgba(243,239,232,.86)}
@media (max-width:760px){.feier::before{background:linear-gradient(180deg,rgba(14,13,12,.82),rgba(14,13,12,.93))}}

/* ---------- Gutscheine ---------- */
.karten-buehne{position:relative;aspect-ratio:1.18/1;perspective:1400px;max-width:560px;width:100%;justify-self:center}
.gkarte{position:absolute;width:76%;aspect-ratio:1.41/1;border-radius:10px;box-shadow:0 40px 70px -30px rgba(22,21,20,.6),0 2px 0 rgba(255,255,255,.15) inset;transition:transform .7s var(--ease);will-change:transform;overflow:hidden}
.gkarte img{width:100%;height:100%;object-fit:contain}
.gkarte.vorn{left:0;top:6%;background:var(--anthrazit);transform:rotate(-7deg);z-index:2}
.gkarte.hinten{right:0;bottom:4%;background:#fff;transform:rotate(6deg)}
.karten-buehne:hover .gkarte.vorn{transform:rotate(-10deg) translate(-3%,-3%)}
.karten-buehne:hover .gkarte.hinten{transform:rotate(9deg) translate(3%,3%)}

/* ---------- Team ---------- */
.team{background:var(--gold);color:var(--nacht);border-radius:26px;padding:clamp(30px,5vw,68px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,4vw,64px);align-items:center;position:relative;overflow:hidden}
.team::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;border:1px solid rgba(14,13,12,.2)}
.team .eyebrow{color:var(--nacht)}
.team .script{color:var(--nacht);font-size:clamp(2.6rem,5vw,4.2rem);display:block;transform:rotate(-3deg);margin-bottom:6px}
.team ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.team li{display:flex;gap:12px;align-items:flex-start;font-size:1.02rem;font-weight:400}
.team li svg{width:22px;height:22px;flex:none;margin-top:3px}
.team .btn{--bg:var(--nacht);--fg:var(--creme)}
.team .btn:hover{background:var(--nacht-3);border-color:var(--nacht-3)}

/* ---------- FAQ ---------- */
.faq-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,96px);align-items:start;padding-top:clamp(60px,8vw,110px);border-top:1px solid var(--linie-hell)}
.frage{border-bottom:1px solid var(--linie-hell)}
.frage:first-child{border-top:1px solid var(--linie-hell)}
.frage summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer}
.frage summary::-webkit-details-marker{display:none}
.frage h3{font-size:clamp(1.08rem,1.6vw,1.35rem);font-weight:400;line-height:1.3}
.frage .plus{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--linie-hell);position:relative;transition:background .3s,border-color .3s,transform .4s var(--ease)}
.frage .plus::before,.frage .plus::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;background:var(--tinte);transform:translate(-50%,-50%);transition:transform .4s var(--ease),background .3s}
.frage .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.frage[open] .plus{background:var(--tinte);border-color:var(--tinte);transform:rotate(180deg)}
.frage[open] .plus::before,.frage[open] .plus::after{background:var(--gold-hell)}
.frage[open] .plus::after{transform:translate(-50%,-50%) rotate(0deg)}
.frage summary:hover .plus{border-color:var(--tinte)}
.frage .antwort{padding:0 58px 24px 0;color:#3a3733}
.frage .antwort p{margin:0}
@media (max-width:860px){.faq-raster{grid-template-columns:1fr}.frage .antwort{padding-right:0}}

/* ---------- Kontakt ---------- */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:stretch}
.kontaktliste{display:grid;gap:0;margin-top:34px}
.kontaktliste a,.kontaktliste div{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;padding:20px 0;border-top:1px solid var(--linie-dunkel);text-decoration:none}
.kontaktliste a:last-child,.kontaktliste div:last-child{border-bottom:1px solid var(--linie-dunkel)}
.kontaktliste .icon{width:52px;height:52px;border-radius:50%;border:1px solid rgba(198,156,109,.5);display:grid;place-items:center;color:var(--gold);transition:background .3s,color .3s}
.kontaktliste .icon svg{width:20px;height:20px}
.kontaktliste a:hover .icon{background:var(--gold);color:var(--nacht)}
.kontaktliste small{display:block;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.kontaktliste span{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.4;overflow-wrap:anywhere}
.karte-box{position:relative;border-radius:22px;overflow:hidden;background:var(--nacht-3);min-height:440px;border:1px solid var(--linie-dunkel);display:flex;flex-direction:column;justify-content:flex-end}
.karte-box svg.plan{position:absolute;inset:0;width:100%;height:100%}
.karte-box .unten{position:relative;padding:clamp(20px,2.6vw,32px);background:linear-gradient(180deg,transparent,rgba(14,13,12,.95) 46%)}
.karte-box .unten p{margin:0 0 16px;font-size:.92rem;color:rgba(243,239,232,.8)}
.nadel{animation:huepf 2.6s var(--ease) infinite;transform-origin:center bottom;transform-box:fill-box}
@keyframes huepf{0%,100%{transform:none}50%{transform:translateY(-9px)}}

/* ---------- Fuß ---------- */
.fuss{background:#090808;border-top:1px solid var(--linie-dunkel);padding:clamp(52px,7vw,92px) 0 32px;font-size:.94rem}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(26px,4vw,60px)}
.fuss .logo img{width:210px}
.fuss .schrift{font-family:var(--schrift);color:var(--gold);font-size:2.6rem;line-height:1;margin:18px 0 0;transform:rotate(-3deg);transform-origin:left;display:inline-block}
.fuss h2{font-family:var(--text);font-size:.75rem;line-height:1.4;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:16px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fuss ul a,.fuss .unten a,.fuss .textlink{display:inline-flex;align-items:center;min-height:44px}
.fuss .textlink{border-bottom:0;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}
.fuss a{text-decoration:none;color:rgba(243,239,232,.8);transition:color .25s}
.fuss a:hover{color:var(--gold-hell)}
.fuss address{font-style:normal;color:rgba(243,239,232,.8);line-height:1.7}
.fuss .unten{margin-top:clamp(40px,5vw,70px);padding-top:10px;border-top:1px solid var(--linie-dunkel);display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;font-size:.8rem;color:rgba(243,239,232,.55)}
.fuss .unten a{color:inherit}

/* ---------- Mobile Schnellleiste ---------- */
.schnell{display:none}
@media (max-width:860px){
  .schnell{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:90;background:rgba(23,21,19,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(198,156,109,.3);border-radius:18px;padding:6px;box-shadow:0 20px 40px -10px rgba(0,0,0,.7);transition:transform .45s var(--ease),opacity .3s}
  .schnell.weg{transform:translateY(140%);opacity:0}
  .schnell a{display:grid;justify-items:center;gap:3px;padding:8px 2px 6px;text-decoration:none;font-size:.75rem;letter-spacing:.03em;text-transform:uppercase;color:rgba(243,239,232,.86);border-radius:12px;min-height:52px;align-content:center}
  .schnell a[aria-current="page"]{background:rgba(198,156,109,.16);color:var(--gold-hell)}
  .schnell svg{width:21px;height:21px;color:var(--gold)}
  .fuss{padding-bottom:110px}
}

/* ---------- Unterseiten ---------- */
.seitenkopf{position:relative;padding:clamp(150px,19vw,230px) 0 clamp(52px,7vw,92px);overflow:hidden;isolation:isolate}
.seitenkopf::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 85% 0%,rgba(198,156,109,.22),transparent 65%),var(--nacht)}
.seitenkopf.bild::before{background:linear-gradient(180deg,rgba(14,13,12,.72),rgba(14,13,12,.92) 78%,var(--nacht))}
.seitenkopf .hinten{position:absolute;inset:0;z-index:-2}
.seitenkopf .hinten img{width:100%;height:100%;object-fit:cover}
.seitenkopf h1{font-size:clamp(3rem,9vw,7.4rem);letter-spacing:-.03em}
.seitenkopf .script{font-size:clamp(2.6rem,5.5vw,4.6rem);display:block;transform:rotate(-4deg);transform-origin:left;margin:2px 0 0 4px}
.seitenkopf .lead{margin-top:22px;color:rgba(243,239,232,.8)}
.brot{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(243,239,232,.6);margin-bottom:26px}
.brot a{text-decoration:none;color:inherit;display:inline-flex;align-items:center;min-height:44px;min-width:44px}.brot a:hover{color:var(--gold)}
.brot span{margin-inline:10px;color:var(--gold)}

.reiter{position:sticky;top:68px;z-index:50;background:rgba(243,239,232,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linie-hell)}
.reiter .wrap{display:flex;gap:8px;overflow-x:auto;padding-block:8px;scrollbar-width:none}
.reiter .wrap::-webkit-scrollbar{display:none}
.reiter a{flex:none;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--tinte);padding:9px 18px;border-radius:999px;border:1px solid var(--linie-hell);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:450;transition:background .3s,color .3s,border-color .3s}
.reiter a:hover,.reiter a.aktiv{background:var(--tinte);color:var(--gold-hell);border-color:var(--tinte)}

.karte{padding-block:clamp(48px,7vw,100px)}
.gruppe{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(18px,5vw,84px);padding-block:clamp(34px,5vw,64px);border-top:1px solid var(--linie-hell);scroll-margin-top:140px}
.gruppe:first-child{border-top:0;padding-top:0}
.gruppe-kopf{position:sticky;top:150px;align-self:start}
.gruppe-kopf .nr{font-family:var(--kopf);font-size:.8rem;letter-spacing:.2em;color:var(--gold-tief)}
.gruppe-kopf h2{font-size:clamp(2rem,4.2vw,3.4rem);margin-top:6px}
.posten{list-style:none;margin:0;padding:0}
.posten li{display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--linie-hell)}
.posten li:first-child{padding-top:4px}
.posten .name{font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:450;display:flex;align-items:baseline;gap:10px;min-width:0}
.posten .name::after{content:"";flex:1;border-bottom:1px dotted rgba(22,21,20,.3);transform:translateY(-4px);min-width:16px}
.posten .menge{font-size:.76rem;letter-spacing:.1em;color:var(--grau);font-weight:400;white-space:nowrap}
.posten .preis{font-family:var(--kopf);font-weight:400;font-size:clamp(1.02rem,1.4vw,1.2rem);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--tinte)}
.posten .preis small{font-family:var(--text);font-size:.8em;color:var(--grau);margin-inline:6px}
.posten .beschr{grid-column:1/-1;font-size:.94rem;color:var(--grau);max-width:52ch;margin:0}
.verweis{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--kopf);font-size:1.15rem}
.karten-fuss{margin-top:clamp(36px,5vw,64px);padding:clamp(22px,3vw,36px);border-radius:18px;background:var(--creme-2);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.karten-fuss p{margin:0;font-size:.92rem;color:var(--grau);max-width:60ch}
@media (max-width:760px){.gruppe{grid-template-columns:1fr}.gruppe-kopf{position:static}}

.bald{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center}
.bald .bildrahmen{border-radius:999px 999px 18px 18px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 40px 80px -40px rgba(22,21,20,.6)}
.bald .bildrahmen img{width:100%;height:100%;object-fit:cover}

.recht{max-width:820px}
.recht h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:46px 0 14px}
.recht h3{font-family:var(--text);font-size:1.02rem;font-weight:500;margin:26px 0 8px;letter-spacing:.02em}
.recht p,.recht li{color:#3a3733}
.recht a{min-height:0}
.recht ul{padding-left:1.2em}
.recht a{color:var(--gold-tief)}
.recht address{font-style:normal;margin-bottom:1em;line-height:1.7}

/* ---------- Einblenden ---------- */
.js [data-ein]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js [data-ein].sichtbar{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .kacheln{grid-template-columns:1fr}
  .kachel{min-height:340px}
  .fuss-raster{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .zwei,.zwei.schmal-breit,.saison-raster,.kontakt-raster,.team,.bald{grid-template-columns:1fr}
  .collage{order:-1;padding-left:8%}
  .karten-buehne{order:-1}
  .karte-box{min-height:380px}
}
@media (max-width:520px){
  .fuss-raster{grid-template-columns:1fr}
  .fakten{grid-template-columns:1fr 1fr}
  .fakten div:last-child{grid-column:1/-1}
  .btn{padding:14px 22px;font-size:.8rem}
  .jahr .monate{gap:3px}
  .jahr .monate span{height:40px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero h1 .zeile>span{transform:none}
  .js [data-ein]{opacity:1;transform:none}
}
@media print{
  .kopf,.schnell,.fuss,.reiter,.seitenkopf .hinten,.laufband{display:none!important}
  body,.hell,.papier{background:#fff;color:#000}
  .seitenkopf{padding:0 0 12px}.seitenkopf::before{display:none}
  .seitenkopf h1{color:#000;font-size:28pt}
  .gruppe{break-inside:avoid}
}