/* ============================================================
   glas.css — Designsystem „Ein Tag unter Glas" für alle Seiten
   Die Startseite erzählt einen Tag im Glashaus: Morgen (Ankommen) →
   Mittag (Geschichte) → Nachmittag (Anlässe, Haus) → Abend (Küche) →
   Nacht (Kontakt). Die Unterseiten nutzen dieselben Bausteine:
   Palmenkopf, Abschnitte, Paket, Nacht-Footer.
   Seitenrahmen (Navigation, Footer) erzeugt tools/seiten.py.
   ============================================================ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/fraunces-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/fraunces-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url('fonts/fraunces-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/instrument-sans-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/instrument-sans-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+A720-A7FF}

:root{
  --paper:#FFFFFF; --paper-2:#FFFFFF; --paper-3:#F3F3F1; --paper-hi:#FFFFFF;
  --ink:#16241C; --ink-2:#3B4C41; --ink-3:#515F55;
  --farn:#264A33; --farn-deep:#132419;
  --brass:#B08A42; --brass-text:#7A5E26; --brass-light:#D8B876;
  --line:rgba(22,36,28,.16); --line-brass:rgba(176,138,66,.42);

  --ff-d:'Fraunces',Georgia,'Times New Roman',serif;
  --ff-b:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --fv:'opsz' 144,'SOFT' 34,'WONK' 1;
  --arch:50% 50% 6px 6px / 40% 40% 0 0;
  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(1rem,4vw,3.5rem);

  /* vom Tageslauf gesetzt */
  --bg:var(--paper); --fg:var(--ink); --fg-2:var(--ink-2); --acc:var(--brass-text); --rule:var(--line);
}
body[data-tone="mittag"]{--bg:var(--paper-2)}
body[data-tone="nachmittag"]{--bg:var(--paper)}
body[data-tone="abend"]{--bg:var(--farn);--fg:var(--paper);--fg-2:rgba(255,255,255,.78);--acc:var(--brass-light);--rule:rgba(255,255,255,.18)}
body[data-tone="nacht"]{--bg:var(--farn-deep);--fg:var(--paper);--fg-2:rgba(255,255,255,.72);--acc:var(--brass-light);--rule:rgba(255,255,255,.16)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.65 var(--ff-b);
  transition:background-color 1.1s var(--ease),color 1.1s var(--ease);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--brass);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}


.eyebrow{font:500 .72rem/1 var(--ff-b);letter-spacing:.22em;text-transform:uppercase;color:var(--acc);display:inline-flex;align-items:center;gap:.9rem}
.eyebrow::before{content:"";width:2.4rem;height:1px;background:currentColor;opacity:.7}
.display{font-family:var(--ff-d);font-variation-settings:var(--fv);font-weight:350;letter-spacing:-.02em;line-height:.98;margin:0}
.display em{font-style:italic;font-weight:300;color:var(--acc)}
.wrap{width:min(1320px,100% - 2*var(--gut));margin-inline:auto}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem var(--gut);transition:transform .6s var(--ease),background-color 1.1s var(--ease)}
.nav.is-scrolled{background:color-mix(in srgb,var(--bg) 94%,transparent)}
.nav.is-hidden{transform:translateY(-110%)}
.brand{display:flex;align-items:baseline;gap:.55rem;text-decoration:none}
.brand b{font:400 1.45rem/1 var(--ff-d);font-variation-settings:var(--fv);letter-spacing:-.01em}
.brand small{font:500 .62rem/1 var(--ff-b);letter-spacing:.28em;text-transform:uppercase;color:var(--acc)}
.nav ul{display:flex;gap:clamp(1rem,2.4vw,2.2rem);list-style:none;margin:0;padding:0}
.nav ul a{font-size:.82rem;letter-spacing:.06em;text-decoration:none;position:relative;padding-block:.3rem}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.btn{display:inline-flex;align-items:center;gap:.7rem;font:500 .78rem/1 var(--ff-b);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding:1rem 1.5rem;border-radius:999px;border:1px solid currentColor;transition:background-color .4s,color .4s,border-color .4s}
.btn-solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-solid:hover{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.btn-line:hover{background:var(--fg);color:var(--bg)}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.nav .btn{padding:.75rem 1.15rem}
@media(max-width:860px){.nav ul{display:none}}

/* ---------- Sonnenuhr: der Tag läuft mit ---------- */
.dial{position:fixed;right:clamp(.8rem,2vw,1.8rem);bottom:clamp(.8rem,2vw,1.6rem);z-index:70;width:88px;text-align:center;pointer-events:none;
  opacity:0;transition:opacity .8s var(--ease)}
.dial.is-on{opacity:1}
.dial svg{width:88px;height:50px;overflow:visible}
.dial .arc{fill:none;stroke:var(--acc);stroke-width:1;stroke-dasharray:2 4;opacity:.7}
.dial .orb{fill:var(--brass);transition:fill 1s}
.dial .shade{fill:var(--bg);transition:fill 1.1s var(--ease)}
.dial time{display:block;font:500 .7rem/1 var(--ff-b);letter-spacing:.18em;color:var(--acc);margin-top:.35rem;font-variant-numeric:tabular-nums}
.dial span{display:block;font:italic 300 .85rem/1.2 var(--ff-d);color:var(--fg-2)}

/* ---------- 1 · Morgen: Ankommen — die Palmen öffnen den Blick ---------- */
body[data-tone="glas"]{--bg:var(--farn-deep);--fg:#fff;--fg-2:rgba(255,255,255,.78);--acc:var(--brass-light);--rule:rgba(255,255,255,.16)}
.hero{height:340vh;position:relative;background:var(--farn-deep)}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--farn-deep)}
.hero-photo{position:absolute;inset:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:52% 40%}
/* Mit JavaScript zeichnet glas.js Foto, Licht und Palmen in zwei Zeichenflächen mit gedeckelter
   Auflösung — viele bildschirmgroße Ebenen sprengen auf 4K-Monitoren den Grafikspeicher (Flackern).
   Das <img> bleibt für Suchmaschinen, ohne JavaScript und bei „weniger Bewegung" sichtbar. */
.hero.canvas-on .hero-photo{visibility:hidden}
.hero-light{position:absolute;inset:0;pointer-events:none;opacity:var(--open,0)}
.dust i{position:absolute;bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;background:#FFE9B8;box-shadow:0 0 6px #FFE9B8;opacity:0;
  animation:dust var(--t) linear var(--dl) infinite}
@keyframes dust{0%{transform:translate(0,0);opacity:0}15%{opacity:.85}85%{opacity:.5}100%{transform:translate(var(--dx),-105vh);opacity:0}}
.palms{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.palms-front{z-index:4}
/* nur so hoch wie der Text, nicht bildschirmfüllend: hält die eigene Ebene klein */
.hero-title{position:absolute;inset:0;margin:auto 0;height:max-content;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:6;color:#fff;will-change:transform,opacity;
  text-shadow:0 8px 30px rgba(0,0,0,.35)}
.hero-title .eyebrow{color:var(--brass-light);margin-bottom:1.4rem;opacity:0;animation:fade 1.2s 1.2s forwards}
.hero-title h1{font-size:clamp(4rem,17vw,17rem);line-height:.82;letter-spacing:calc(-.03em + var(--track,0) * 1em)}
.hero-title h1 .clip{display:inline-block;overflow:hidden;padding-bottom:.08em}
.hero-title h1 .wd{display:inline-block;white-space:nowrap}
.hero-title h1 .ch{display:inline-block;transform:translateY(110%) rotate(8deg);opacity:0;animation:rise 1.6s var(--ease) forwards;animation-delay:calc(1.1s + var(--i) * 65ms)}
.hero-sub{margin:1.4rem 0 0;font:italic 300 clamp(1.1rem,1.8vw,1.5rem)/1 var(--ff-d);color:rgba(255,255,255,.85);opacity:0;animation:fade 1.2s 2s forwards}
@keyframes rise{to{transform:none;opacity:1}}
@keyframes fade{to{opacity:1}}
.hero-cap{position:absolute;z-index:5;left:var(--gut);right:var(--gut);bottom:clamp(1.6rem,6vh,3.5rem);color:#fff;
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;opacity:0;transform:translateY(24px)}
.hero-cap p{font:300 clamp(1.7rem,3.6vw,3.3rem)/1.05 var(--ff-d);font-variation-settings:var(--fv);margin:0;max-width:16ch}
.hero-cap p em{color:var(--brass-light)}
.hero-cap dl{display:flex;gap:clamp(1.4rem,4vw,3.4rem);margin:0}
.hero-cap dt{font:500 .66rem/1 var(--ff-b);letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-top:.5rem}
.hero-cap dd{margin:0;font:300 clamp(2.2rem,4.4vw,3.8rem)/1 var(--ff-d);font-variation-settings:var(--fv);font-variant-numeric:tabular-nums}
.hero-cue{position:absolute;z-index:5;left:50%;bottom:1.2rem;translate:-50% 0;font:500 .64rem/1 var(--ff-b);letter-spacing:.24em;text-transform:uppercase;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;opacity:0;animation:fade 1s 3s forwards}
.hero-cue i{width:1px;height:38px;background:linear-gradient(#fff,transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{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}}

/* Überleitungen zwischen den Kapiteln */
.bridge{padding:clamp(5rem,14vh,9rem) var(--gut) clamp(2rem,6vh,4rem);text-align:center}
.bridge p{font:italic 300 clamp(1.5rem,3vw,2.5rem)/1.2 var(--ff-d);font-variation-settings:var(--fv);margin:0 auto;max-width:24ch;color:var(--fg-2)}
.bridge p::before{content:"";display:block;width:1px;height:clamp(3rem,9vh,5.5rem);margin:0 auto 1.6rem;background:linear-gradient(transparent,var(--acc))}

/* ---------- 2 · Mittag: Geschichte ---------- */
.story{height:230vh;position:relative}
.story-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;padding:0 var(--gut)}
.story-ghost{position:absolute;left:50%;top:50%;font:300 clamp(14rem,42vw,44rem)/1 var(--ff-d);font-variation-settings:var(--fv);letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px var(--line-brass);translate:-50% -50%;white-space:nowrap;pointer-events:none;will-change:transform}
.story-text{position:relative;font:300 clamp(1.75rem,4.3vw,4.1rem)/1.12 var(--ff-d);font-variation-settings:var(--fv);letter-spacing:-.015em;max-width:24ch;margin:0}
.story-text .w{opacity:.38;transition:opacity .45s,color .45s}
.story-text .w.on{opacity:1}
.story-text .w.hl.on{color:var(--acc);font-style:italic}
.story-meta{position:absolute;left:var(--gut);bottom:clamp(1.5rem,5vh,3rem);font-size:.85rem;color:var(--fg-2);max-width:34ch}

.years{height:360vh;position:relative}
.years-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.years-head{padding:0 var(--gut);display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:clamp(1.5rem,4vh,3rem)}
.years-head h2{font-size:clamp(2rem,4.4vw,3.8rem)}
.years-track{display:flex;gap:clamp(2.5rem,6vw,6rem);padding:0 var(--gut);width:max-content;will-change:transform;align-items:center}
.yr{flex:0 0 auto;width:clamp(260px,30vw,420px);position:relative}
.yr.wide{width:clamp(300px,44vw,640px)}
.yr b{display:block;font:300 clamp(5rem,13vw,11.5rem)/.8 var(--ff-d);font-variation-settings:var(--fv);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px var(--acc);transition:color .8s var(--ease)}
.yr.on b{color:var(--fg);-webkit-text-stroke-color:transparent}
.yr h3{font:500 .72rem/1 var(--ff-b);letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin:1.4rem 0 .8rem}
.yr p{margin:0;color:var(--fg-2);max-width:34ch}
.yr figure{margin:0 0 1.4rem;border-radius:var(--arch);overflow:hidden;aspect-ratio:4/5;max-height:44vh;background:var(--paper-3)}
.yr.wide figure{aspect-ratio:16/10;border-radius:4px}
.yr figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.25) translateX(var(--px,0));will-change:transform}
.years-rail{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(1.4rem,5vh,2.8rem);height:1px;background:var(--rule)}
.years-rail i{position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(var(--p,0))}
.years-rail i::after{content:"";position:absolute;right:-5px;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--acc)}

/* ---------- 3 · Nachmittag: Anlässe ---------- */
.occ{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);padding:0 var(--gut)}
.occ-media{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center}
.occ-count{position:absolute;right:-1.2rem;top:12%;font:300 .9rem/1 var(--ff-d);writing-mode:vertical-rl;letter-spacing:.3em;color:var(--acc)}
.occ-list{padding:20vh 0}
.occ-item{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .8s var(--ease)}
.occ-item.on{opacity:1}
.occ-item h3{font-size:clamp(2.6rem,5.6vw,5.2rem);margin:.9rem 0 1.2rem}
.occ-item p{color:var(--fg-2);max-width:42ch;margin:0 0 1.4rem}
.occ-item ul{list-style:none;padding:0;margin:0 0 2rem;display:flex;flex-wrap:wrap;gap:.5rem}
.occ-item li{font-size:.78rem;letter-spacing:.06em;border:1px solid var(--line-brass);border-radius:999px;padding:.45rem .9rem}
.more{font:500 .76rem/1 var(--ff-b);letter-spacing:.18em;text-transform:uppercase;color:var(--acc);text-decoration:none;display:inline-flex;gap:.6rem;align-items:center}
.more::after{content:"→";transition:transform .4s var(--ease)}
.more:hover::after{transform:translateX(5px)}
@media(max-width:860px){
  .occ{grid-template-columns:1fr}
  .occ-list{padding:4vh 0}
  .occ-item{min-height:auto;padding:3.5rem 0;opacity:1}
}

/* ---------- 4 · Nachmittag: Das Haus ---------- */
.haus{padding:clamp(3rem,10vh,7rem) 0 0;overflow:hidden}
.haus-head{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem 5rem;align-items:end}
.haus-head h2{font-size:clamp(2.6rem,6.4vw,6.2rem)}
.haus-head p{color:var(--fg-2);margin:0;max-width:44ch}
.marquee{margin-top:clamp(3rem,8vh,5rem);border-block:1px solid var(--rule);padding-block:1.1rem;display:grid;gap:.6rem}
.marquee-row{display:flex;gap:2.4rem;white-space:nowrap;width:max-content;will-change:transform;
  font:300 clamp(2rem,5vw,4.4rem)/1.05 var(--ff-d);font-variation-settings:var(--fv);letter-spacing:-.02em}
.marquee-row span{display:inline-flex;align-items:center;gap:2.4rem}
.marquee-row span::after{content:"";width:.32em;height:.32em;border-radius:50% 50% 2px 2px / 60% 60% 0 0;background:var(--acc)}
.marquee-row.alt{color:transparent;-webkit-text-stroke:1px var(--fg-2)}
.fan{position:relative;height:clamp(420px,72vh,720px);margin-top:clamp(3rem,8vh,6rem)}
.fan figure{position:absolute;top:50%;left:50%;margin:0;width:clamp(200px,26vw,380px);aspect-ratio:3/4;border-radius:var(--arch);overflow:hidden;
  box-shadow:0 30px 60px -36px rgba(22,36,28,.55);will-change:transform;
  transform:translate(-50%,-50%) translateX(calc(var(--x) * var(--f,0) * 1%)) rotate(calc(var(--r) * var(--f,0) * 1deg))}
.fan figure img{width:100%;height:100%;object-fit:cover}
.fan figure figcaption{position:absolute;left:50%;bottom:1rem;translate:-50% 0;white-space:nowrap;font:500 .64rem/1 var(--ff-b);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,255,255,.9);border-radius:999px;padding:.45rem .85rem}
.fan figure:nth-child(2){z-index:2}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);margin-top:clamp(3rem,8vh,5rem)}
.facts div{padding:1.6rem 1.4rem 0 0}
.facts div+div{border-left:1px solid var(--rule);padding-left:1.4rem}
.facts b{display:block;font:300 clamp(2.4rem,4.6vw,4rem)/1 var(--ff-d);font-variation-settings:var(--fv);font-variant-numeric:tabular-nums}
.facts span{font-size:.85rem;color:var(--fg-2)}
.offer{margin-top:clamp(4rem,10vh,7rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem) clamp(2rem,6vw,6rem);
  border:1px solid var(--line-brass);border-radius:320px 320px 10px 10px / 150px 150px 10px 10px;padding:clamp(4rem,9vw,7rem) clamp(1.6rem,6vw,6rem) clamp(2rem,4vw,3rem);position:relative;
  background:linear-gradient(180deg,rgba(176,138,66,.07),transparent 60%)}
.offer .tag{position:absolute;top:-.8rem;left:50%;translate:-50% 0;background:var(--bg);padding:0 1rem;white-space:nowrap;transition:background-color 1.1s var(--ease)}
.offer-head h3{font-size:clamp(2.8rem,6vw,5.4rem);margin-bottom:1.2rem}
.offer-head p{margin:0;color:var(--fg-2);max-width:36ch}
.offer-list{list-style:none;margin:0;padding:0;align-self:center}
.offer-list li{display:flex;gap:1rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--rule);font-size:1.05rem}
.offer-list li::before{content:"";flex:0 0 auto;width:.9rem;height:.5rem;border-left:1.5px solid var(--acc);border-bottom:1.5px solid var(--acc);rotate:-45deg;translate:0 -.2rem}
.offer-prices{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--rule)}
.offer-prices div{padding:1.6rem 0;text-align:center}
.offer-prices div+div{border-left:1px solid var(--rule)}
.offer-prices small{display:block;font:500 .7rem/1 var(--ff-b);letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:.7rem}
.offer-prices strong{font:300 clamp(2.8rem,6.5vw,5.6rem)/1 var(--ff-d);font-variation-settings:var(--fv);font-weight:300}
.offer-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.2rem 2rem}
.offer-foot p{margin:0;font-size:.9rem;color:var(--fg-2)}
.offer-foot div{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
@media(max-width:860px){.haus-head{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(3){border-left:0;padding-left:0}
  .offer{grid-template-columns:1fr;border-radius:180px 180px 10px 10px / 90px 90px 10px 10px;padding-top:4.5rem}

  .fan figure{width:46vw}}

/* ---------- 5 · Abend: die Küche ---------- */
.kueche{padding-top:clamp(2rem,6vh,4rem);overflow:hidden}
.kueche-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem 5rem;align-items:end}
.kueche-head h2{font-size:clamp(2.6rem,6.4vw,6.2rem)}
.kueche-head p{color:var(--fg-2);margin:0 0 1rem;max-width:46ch}
.drift{margin-top:clamp(3rem,8vh,5rem);display:grid;gap:clamp(.8rem,1.4vw,1.2rem)}
.drift-row{display:flex;gap:clamp(.8rem,1.4vw,1.2rem);width:max-content;will-change:transform}
.drift-row figure{margin:0;width:clamp(180px,22vw,320px);aspect-ratio:1;border-radius:6px;overflow:hidden;position:relative}
.drift-row figure.tall{aspect-ratio:3/4;width:clamp(150px,17vw,250px);border-radius:var(--arch)}
.drift-row figure.wide{aspect-ratio:3/2;width:clamp(260px,32vw,470px)}
.drift-row img{width:100%;height:100%;object-fit:cover}
.drift-row figcaption{position:absolute;left:.8rem;bottom:.8rem;font:500 .62rem/1 var(--ff-b);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,255,255,.9);border-radius:999px;padding:.42rem .8rem}
.kstats{display:flex;flex-wrap:wrap;gap:1rem clamp(2rem,6vw,5rem);margin-top:clamp(3rem,8vh,5rem);padding-top:1.6rem;border-top:1px solid var(--rule)}
.kstats b{display:block;font:300 clamp(2rem,3.8vw,3.2rem)/1 var(--ff-d);font-variation-settings:var(--fv)}
.kstats span{font-size:.82rem;color:var(--fg-2)}
.duo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,6vw,6rem);align-items:center;margin-top:clamp(5rem,14vh,9rem)}
.duo figure{margin:0;padding:clamp(.45rem,.9vw,.75rem);border:1px solid rgba(216,184,118,.45);border-radius:2px;position:relative}
.duo figure img{width:100%;height:auto}
/* Aufdecken per Vorhang statt Bildmaske: ein maskiertes Bild hält Chrome für unsichtbar und lädt es nicht nach */
.duo figure.rv-clip{overflow:hidden}
.duo figure.rv-clip::after{content:"";position:absolute;inset:0;background:var(--bg);transform-origin:50% 100%;transition:transform 1.6s var(--ease),background-color 1.1s var(--ease)}
.duo figure.rv-clip.in::after{transform:scaleY(0)}
.duo h3{font-size:clamp(2.2rem,4.4vw,3.8rem);margin:1rem 0 1.2rem}
.duo p{color:var(--fg-2);max-width:46ch;margin:0 0 1rem}
.duo .btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.duo.flip{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.duo.flip figure{order:2}
@media(max-width:860px){.kueche-head,.duo,.duo.flip{grid-template-columns:1fr}.duo.flip figure{order:0}}

/* ---------- 6 · Nacht: Kontakt ---------- */
.nacht{padding:clamp(4rem,12vh,8rem) 0 0;position:relative;overflow:hidden}
.stars{position:absolute;inset:0;pointer-events:none}
.night-palms{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.night-palms g.sway{transform-box:view-box;animation:sway var(--t) ease-in-out var(--dl) infinite alternate}
@keyframes sway{from{rotate:calc(var(--a) * -1deg)}to{rotate:calc(var(--a) * 1deg)}}
.nacht .wrap{position:relative;z-index:1}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--brass-light);opacity:0;animation:twinkle var(--t) ease-in-out var(--dl) infinite}
@keyframes twinkle{0%,100%{opacity:0}50%{opacity:.8}}
.cta-big{font-size:clamp(3rem,10vw,10rem);line-height:.9;max-width:12ch;position:relative}
.cta-big .ln{display:block;overflow:hidden}
.cta-big .ln span{display:block;transform:translateY(100%);transition:transform 1.3s var(--ease)}
.cta-big.in .ln span{transform:none}
.cta-big .ln:nth-child(2) span{transition-delay:.12s}
.cta-big .ln:nth-child(3) span{transition-delay:.24s}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:clamp(2rem,5vh,3rem)}
.cta-row .tel{font:300 clamp(1.4rem,2.6vw,2rem)/1 var(--ff-d);text-decoration:none;margin-left:1rem;border-bottom:1px solid var(--rule);padding-bottom:.3rem}
.info{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:clamp(4rem,12vh,7rem);padding-top:2rem;border-top:1px solid var(--rule)}
.info h3{font:500 .7rem/1 var(--ff-b);letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin:0 0 1rem}
.info p{margin:0 0 .4rem;color:var(--fg-2);font-size:.95rem}
.info p b{color:var(--fg);font-weight:500}
.info a{text-decoration:none;border-bottom:1px solid var(--rule)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:2.2rem 0;margin-top:clamp(4rem,10vh,6rem);border-top:1px solid var(--rule);font-size:.8rem;color:var(--fg-2)}
.foot nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--acc)}
.wordmark{font:300 clamp(5rem,23vw,22rem)/.75 var(--ff-d);font-variation-settings:var(--fv);letter-spacing:-.05em;text-align:center;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(216,184,118,.35);margin:clamp(2rem,6vh,4rem) 0 -.12em;user-select:none}
@media(max-width:860px){.info{grid-template-columns:1fr}.cta-row .tel{margin-left:0}}

/* Einblenden */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}

/* Weniger Bewegung: alles steht, nichts klebt */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .hero,.story,.years{height:auto}
  .hero-stage,.story-stage,.years-stage{position:relative}
  .hero-stage{height:100svh}
  .palms,.hero-light{display:none}
  .hero.canvas-on .hero-photo{visibility:visible}
  .hero-cap{opacity:1;transform:none}
  .story-stage{min-height:80vh}
  .story-text .w{opacity:1}
  .years-stage{height:auto;padding:4rem 0}
  .years-track{transform:none!important;overflow-x:auto;width:auto}
  .rv,.cta-big .ln span{opacity:1;transform:none}
  .duo figure.rv-clip::after{display:none}
}

/* ============================================================
   Interaktive Bausteine der Anlassseiten (landing.js)
   ============================================================ */
/* ── Gemeinsames: Bedienleiste ─────────────────────────────────── */
.lp-seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--paper-3);
  border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:1.5rem}
.lp-seg button{font-family:var(--ff-b);font-size:.82rem;font-weight:500;color:var(--ink-2);
  background:transparent;border:0;border-radius:999px;padding:.55rem 1.05rem;cursor:pointer;
  transition:background-color .45s var(--ease),color .45s var(--ease)}
.lp-seg button[aria-pressed="true"]{background:var(--farn);color:#fff}

.lp-tool{margin-top:1.5rem}
.lp-tool-note{font-size:.86rem;color:var(--ink-3);margin-top:.7rem;min-height:2.6em}
.lp-tool-zahl{font-family:var(--ff-d);font-variation-settings:var(--fv);
  font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:.95;color:var(--farn)}
.lp-tool-zahl small{font-family:var(--ff-b);font-size:.9rem;font-weight:500;
  color:var(--ink-3);margin-left:.4rem}

/* ── Grundriss ─────────────────────────────────────────────────── */
.lp-plan svg{width:100%;height:auto;display:block;border:1px solid var(--line);
  border-radius:8px;background:var(--paper-3)}
.lp-plan .wall{fill:none;stroke:var(--line);stroke-width:2}
.lp-plan .aisle{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:5 6;opacity:.7}
.lp-plan .door{stroke:var(--brass);stroke-width:5}
.lp-plan .lbl{fill:var(--ink-3);font-family:var(--ff-b);font-size:13px;letter-spacing:.14em}
.lp-plan .g-tab{fill:none;stroke:var(--line-brass);stroke-width:1.4;
  transition:opacity .5s var(--ease),transform .7s cubic-bezier(.16,1,.3,1)}
.lp-plan .g-dot{fill:var(--farn);
  transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.lp-plan .zone{fill:var(--brass);opacity:.07;transition:all .8s cubic-bezier(.16,1,.3,1)}

/* ── Ablauf ────────────────────────────────────────────────────── */
.lp-ablauf{list-style:none;margin:1.5rem 0 0;padding:0;position:relative}
.lp-ablauf::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:1px;
  background:var(--line)}
.lp-ablauf::after{content:"";position:absolute;left:7px;top:10px;width:1px;height:0;
  background:var(--brass);transition:height 1.4s cubic-bezier(.16,1,.3,1)}
.lp-ablauf.laeuft::after{height:calc(100% - 20px)}
.lp-ablauf li{position:relative;padding:0 0 1.5rem 2.5rem;
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.lp-ablauf li.sichtbar{opacity:1;transform:none}
.lp-ablauf li:last-child{padding-bottom:0}
.lp-ablauf li::before{content:"";position:absolute;left:0;top:7px;width:15px;height:15px;
  border-radius:50%;background:#fff;border:1px solid var(--line);
  transition:border-color .5s,background-color .5s,transform .5s}
.lp-ablauf li.sichtbar::before{border-color:var(--brass);background:var(--brass);transform:scale(.72)}
.lp-ablauf .zeit{display:block;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass-text);font-weight:500;margin-bottom:.2rem}
.lp-ablauf .was{font-size:1.0125rem;line-height:1.65;color:var(--ink-2)}
.lp-ablauf .was b{color:var(--ink);font-weight:500;font-family:var(--ff-d);
  font-variation-settings:var(--fv)}

/* ── Lichtstufen ───────────────────────────────────────────────── */
.lp-licht svg{width:100%;height:auto;display:block;border-radius:8px;
  background:#0E1A14;border:1px solid var(--line-brass)}
.lp-licht .glas{stroke:rgba(255,255,255,.5);stroke-width:1.4;fill:none}
.lp-licht .sprosse{stroke:rgba(255,255,255,.28);stroke-width:.9;fill:none}
.lp-licht .halle{transition:fill 1.1s cubic-bezier(.16,1,.3,1)}
.lp-licht .schein{transition:opacity 1.1s ease,fill 1.1s ease}
.lp-licht .boden{fill:rgba(255,255,255,.06)}
.lp-licht .gast{fill:rgba(255,255,255,.42)}

.lp-plan .lp-tool-zahl{margin-top:.2rem}
.lp-licht .strahl{transition:opacity 1.1s ease}
.lp-licht.party .strahl{opacity:.30}
.lp-licht.party .s1{animation:strahl1 7s ease-in-out infinite alternate}
.lp-licht.party .s2{animation:strahl2 9s ease-in-out infinite alternate}
@keyframes strahl1{from{transform:translateX(-60px) scaleY(.9)}to{transform:translateX(90px) scaleY(1.1)}}
@keyframes strahl2{from{transform:translateX(70px) scaleY(1.1)}to{transform:translateX(-80px) scaleY(.9)}}
@media(prefers-reduced-motion:reduce){.lp-licht.party .strahl{animation:none}}
.lp-licht .schein{filter:blur(42px)}
.lp-licht .strahl{filter:blur(34px)}

/* ============================================================
   Unterseiten — Anlässe, Anfrage, Rechtliches
   ============================================================ */

/* ---------- Handy-Menü ---------- */
.burger{display:none;width:46px;height:46px;border:1px solid currentColor;border-radius:50%;background:none;color:inherit;cursor:pointer;
  position:relative;flex:0 0 auto}
.burger i{position:absolute;left:14px;right:14px;height:1px;background:currentColor;transition:transform .5s var(--ease),opacity .3s}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:23px}.burger i:nth-child(3){top:28px}
.menu-open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0}
.menu-open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-right{display:flex;align-items:center;gap:.7rem}
.menu{position:fixed;inset:0;z-index:79;background:var(--farn-deep);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;
  padding:6rem var(--gut) 2.5rem;clip-path:circle(0 at calc(100% - 3rem) 2.6rem);transition:clip-path .9s var(--ease);visibility:hidden}
.menu-open .menu{clip-path:circle(150% at calc(100% - 3rem) 2.6rem);visibility:visible}
.menu a{display:block;text-decoration:none;font:300 clamp(2rem,9vw,3rem)/1.15 var(--ff-d);font-variation-settings:var(--fv);
  padding:.35rem 0;border-bottom:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(20px);transition:opacity .6s,transform .8s var(--ease)}
.menu-open .menu a{opacity:1;transform:none}
.menu a:nth-child(2){transition-delay:.04s}.menu a:nth-child(3){transition-delay:.08s}.menu a:nth-child(4){transition-delay:.12s}
.menu a:nth-child(5){transition-delay:.16s}.menu a:nth-child(6){transition-delay:.2s}.menu a:nth-child(7){transition-delay:.24s}
.menu small a{display:inline;font:inherit;border:0;padding:0;opacity:1;transform:none}
.menu small{display:block;margin-top:2rem;font-size:.8rem;color:rgba(255,255,255,.6);letter-spacing:.08em}
.menu-open{overflow:hidden}
.menu-open .nav{color:#fff;background:transparent!important}
.menu-open .nav .btn-solid{background:#fff;color:var(--ink);border-color:#fff}
@media(max-width:860px){.burger{display:block}}

/* ---------- Kopf der Unterseiten: dieselben Palmen, kürzerer Weg ---------- */
.hero--sub{height:230vh}
.hero--sub .hero-title h1{font-size:clamp(3rem,10vw,9.5rem);line-height:.9;padding-inline:var(--gut)}
.hero--sub .hero-title h1 .clip{overflow:visible}
.hero--sub .hero-cap p{max-width:30ch;font-size:clamp(1.25rem,2.2vw,1.9rem);line-height:1.25}

/* ---------- Abschnitte ---------- */
.sec{padding:clamp(5rem,13vh,9rem) 0 0}
.sec-head{max-width:46rem;margin-bottom:clamp(2rem,5vh,3.5rem)}
.sec-head h2{font-size:clamp(2.4rem,5.4vw,4.8rem);margin-top:1rem}
.sec-head p{color:var(--fg-2);margin:1.2rem 0 0;max-width:52ch}
.duo h2{font-size:clamp(2.2rem,4.4vw,3.8rem);margin:1rem 0 1.2rem}
.duo.sec-duo{margin-top:0}
.duo figure figcaption{font-size:.8rem;color:var(--fg-2);padding:.8rem .2rem 0}
.duo .arch{border:0;padding:0;border-radius:var(--arch);overflow:hidden;aspect-ratio:4/4.6}
.duo .arch img{height:100%;object-fit:cover}
.prose-list{list-style:none;padding:0;margin:1.4rem 0}
.prose-list li{display:flex;gap:1rem;align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--rule);color:var(--fg-2)}
.prose-list li::before{content:"";flex:0 0 auto;width:.9rem;height:.5rem;border-left:1.5px solid var(--acc);border-bottom:1.5px solid var(--acc);rotate:-45deg;translate:0 -.2rem}
.tool-wrap{margin-top:clamp(2.5rem,6vh,4rem)}

/* Fakten unter dem Kopf */
.facts.sub{margin-top:0;border-top:0;border-bottom:1px solid var(--rule)}
.facts.sub div{padding-bottom:1.6rem}

/* ---------- Fragen ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.5rem 0;
  font:400 clamp(1.25rem,2.2vw,1.7rem)/1.25 var(--ff-d);font-variation-settings:var(--fv)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:2.4rem;height:2.4rem;border:1px solid var(--line-brass);border-radius:50%;
  background:linear-gradient(var(--acc),var(--acc)) center/12px 1px no-repeat,linear-gradient(var(--acc),var(--acc)) center/1px 12px no-repeat;transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{margin:0;padding:0 0 1.6rem;color:var(--fg-2);max-width:62ch}
.faq details[open] p{animation:faqin .6s var(--ease)}
@keyframes faqin{from{opacity:0;transform:translateY(-8px)}}

/* ---------- Weitere Anlässe ---------- */
.others{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.others a{text-decoration:none;display:block}
.others figure{margin:0 0 1rem;border-radius:var(--arch);overflow:hidden;aspect-ratio:4/4.4;background:var(--paper-3)}
.others img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.others a:hover img{transform:scale(1.06)}
.others b{display:block;font:400 clamp(1.5rem,2.4vw,2.1rem)/1.1 var(--ff-d);font-variation-settings:var(--fv)}
.others span{font-size:.85rem;color:var(--fg-2)}
@media(max-width:860px){.others{grid-template-columns:1fr 1fr}.others a:last-child:nth-child(odd){grid-column:1/-1}}

/* ---------- Seiten ohne Palmenkopf: Anfrage, Rechtliches ---------- */
.page-head{padding:clamp(8rem,20vh,12rem) 0 clamp(2.5rem,6vh,4rem);position:relative;overflow:hidden}
.page-head h1{font-size:clamp(3rem,9vw,8rem)}
.page-head p{color:var(--fg-2);max-width:52ch;margin:1.4rem 0 0;font-size:1.1rem}
.page-head .palms-corner{position:absolute;top:0;right:0;width:min(46vw,560px);height:100%;pointer-events:none;opacity:.9}
.prose{padding-bottom:clamp(4rem,10vh,7rem)}
.prose>*{max-width:46rem}
.prose h1{display:none}
.prose h2{font:400 clamp(1.6rem,3vw,2.3rem)/1.15 var(--ff-d);font-variation-settings:var(--fv);margin:3rem 0 1rem}
.prose h3{font:500 .78rem/1.3 var(--ff-b);letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin:2.2rem 0 .8rem}
.prose p,.prose li{color:var(--fg-2)}
.prose a{color:var(--fg);text-decoration-color:var(--line-brass);text-underline-offset:.2em}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.5rem}
.prose div p{margin:.1rem 0}

.anfrage-card{background:#fff;border:1px solid var(--line-brass);border-radius:clamp(140px,22vw,300px) clamp(140px,22vw,300px) 12px 12px / 90px 90px 12px 12px;
  padding:clamp(4rem,8vw,6rem) clamp(1rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem);box-shadow:0 40px 90px -60px rgba(22,36,28,.5)}
.anfrage-card iframe{width:100%;height:680px;border:0;display:block}
.anfrage-fallback{font-size:.9rem;color:var(--fg-2);margin:1.4rem 0 0;text-align:center}
.anfrage-fallback.is-warning{color:var(--fg);font-size:1rem}
.anfrage-side{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:clamp(3rem,8vh,5rem) 0 clamp(4rem,10vh,7rem);padding-top:2rem;border-top:1px solid var(--rule)}
.anfrage-side h2{font:500 .7rem/1 var(--ff-b);letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin:0 0 1rem}
.anfrage-side p{margin:0;color:var(--fg-2)}
@media(max-width:860px){.anfrage-side{grid-template-columns:1fr}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion: reduce){.hero--sub{height:auto}}

/* ---------- Klang-Schalter: vier Balken, die tanzen, solange der Nachtwald läuft ---------- */
.sound{width:46px;height:46px;flex:0 0 auto;border:1px solid currentColor;border-radius:50%;background:none;color:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:3px;padding:0}
.sound i{width:2px;height:4px;background:currentColor;border-radius:1px;transition:height .4s var(--ease)}
.sound[aria-pressed="true"] i{animation:klang 1.1s ease-in-out infinite alternate}
.sound[aria-pressed="true"] i:nth-child(2){animation-delay:-.4s;animation-duration:.9s}
.sound[aria-pressed="true"] i:nth-child(3){animation-delay:-.7s;animation-duration:1.3s}
.sound[aria-pressed="true"] i:nth-child(4){animation-delay:-.2s;animation-duration:1s}
@keyframes klang{from{height:4px}to{height:16px}}
.sound[aria-pressed="false"]{opacity:.75}
.sound[aria-pressed="false"]::after{content:"";position:absolute;width:22px;height:1px;background:currentColor;rotate:-45deg}
.sound{position:relative}
.menu-open .sound{color:#fff}
@media (prefers-reduced-motion: reduce){.sound[aria-pressed="true"] i{animation:none;height:12px}}
@media(max-width:520px){.nav-right .btn-solid{display:none}}
.menu a:nth-child(8){transition-delay:.28s}

/* ---------- Logo: Bogenfenster mit Palme, zeichnet sich selbst ---------- */
.brand{align-items:center}
.brand-mark{width:auto;height:34px;stroke-width:34;color:var(--acc);flex:0 0 auto;margin-right:.15rem;align-self:center}
.hero-mark{display:block;height:clamp(64px,9vh,96px);width:auto;margin:0 auto 1.4rem;color:var(--brass-light);stroke-width:22;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.35))}
.foot-mark{display:block;height:clamp(90px,14vw,150px);width:auto;margin:clamp(3rem,8vh,5rem) auto 0;color:var(--brass-light);stroke-width:16;position:relative;z-index:1}
.logo-draw path{stroke-dasharray:1;stroke-dashoffset:1;animation:logodraw 1.8s var(--ease) forwards}
.logo-draw path:nth-child(n+2){animation-delay:.25s}.logo-draw path:nth-child(n+4){animation-delay:.45s}
.logo-draw path:nth-child(n+6){animation-delay:.6s}.logo-draw path:nth-child(n+10){animation-delay:.75s}
.logo-draw path:nth-child(n+16){animation-delay:.9s}.logo-draw path:nth-child(n+20){animation-delay:1.05s}
@keyframes logodraw{to{stroke-dashoffset:0}}
.hero-mark.logo-draw path{animation-duration:2.4s}
.hero-mark{opacity:0;animation:fade 1s .3s forwards}
/* Im Footer erst zeichnen, wenn er ins Bild kommt (.rv bekommt .in) */
.foot-mark.logo-draw:not(.in) path{animation:none}
.foot-mark.rv{transform:none}
@media (prefers-reduced-motion: reduce){.logo-draw path{animation:none!important;stroke-dashoffset:0}.hero-mark{opacity:1}}
@media(max-width:520px){.brand small{display:none}.brand-mark{height:30px}}
.nav .sound,.nav .burger{background:color-mix(in srgb,var(--bg) 80%,transparent)}

/* ---------- Grundriss & Motive (grundriss.js): Bilder ohne Fotos ---------- */
.gr-stage,.vig{position:relative;overflow:hidden;background:#16261c;box-shadow:0 40px 80px -50px rgba(19,36,25,.7),inset 0 0 0 1px rgba(216,184,118,.22)}
.gr-stage canvas,.vig canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gr-stage{aspect-ratio:4/5.4;border-radius:var(--arch)}
.gr-stage::after,.vig::after{content:"";position:absolute;inset:10px;border:1px solid rgba(216,184,118,.28);border-radius:inherit;pointer-events:none}
.gr-door{position:absolute;left:50%;bottom:2.6%;transform:translateX(-50%);font:500 .52rem/1 var(--ff-b);letter-spacing:.34em;text-transform:uppercase;color:rgba(216,184,118,.7)}
.vig{border-radius:4px;aspect-ratio:4/3}
.vig.arch{border-radius:var(--arch);aspect-ratio:4/4.6}
.gr-meta{display:flex;align-items:center;gap:1rem;margin-top:1.3rem;color:var(--fg)}
.gr-meta b{font:300 clamp(2.4rem,4.4vw,3.6rem)/.9 var(--ff-d);font-variation-settings:var(--fv);letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.gr-meta div{display:flex;flex-direction:column;gap:.45rem;border-left:1px solid var(--line-brass);padding-left:1rem}
.gr-meta span{font:500 .64rem/1 var(--ff-b);letter-spacing:.3em;text-transform:uppercase;color:var(--acc)}
.gr-meta em{font:italic 300 1.05rem/1.2 var(--ff-d);color:var(--fg-2);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.gr-meta em.out{opacity:0;transform:translateY(5px)}
.gr-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:1rem}
.gr-chips button{font:500 .78rem/1 var(--ff-b);color:var(--fg-2);background:transparent;border:1px solid var(--line-brass);border-radius:999px;padding:.55rem .95rem;cursor:pointer;transition:all .4s var(--ease)}
.gr-chips button[aria-pressed="true"]{background:var(--farn);border-color:var(--farn);color:#fff}
.gr-legend{display:flex;align-items:center;gap:.7rem;margin:1rem 0 0;font:500 .7rem/1 var(--ff-b);letter-spacing:.22em;text-transform:uppercase;color:var(--acc);opacity:.85}
.gr-legend i{width:9px;height:9px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 4px rgba(176,138,66,.18);animation:grPulse 2.4s ease-in-out infinite}
@keyframes grPulse{50%{box-shadow:0 0 0 8px rgba(176,138,66,0)}}
.duo .gr-box{display:flex;flex-direction:column;align-items:center}
.duo .gr-box .gr-stage{width:min(100%,460px)}
.duo figure.gr-fig{border:0;padding:0}
.duo figure.gr-fig figcaption{padding-top:1rem}
.lp-ablauf li{cursor:pointer}
.lp-ablauf li.jetzt .was b{color:var(--brass-text)}
.lp-ablauf li.jetzt::before{background:var(--farn);border-color:var(--farn);transform:scale(1)}

/* Seitenkopf der Anlassseiten: Titel links, Grundriss rechts */
.phero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:clamp(6rem,14vh,8rem) 0 clamp(2.5rem,6vh,4rem);color:#fff;
  background:radial-gradient(120% 90% at 75% 40%,#1d3527 0%,var(--farn-deep) 70%)}
.phero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.phero .eyebrow{color:var(--brass-light)}
.phero h1{font-size:clamp(3rem,7.2vw,7rem);line-height:.92;margin:1.2rem 0 1rem}
.phero .hero-sub{font:italic 300 clamp(1.15rem,2vw,1.6rem)/1.3 var(--ff-d);color:rgba(255,255,255,.8);margin:0}
.phero-lead{font:300 clamp(1.25rem,2.1vw,1.8rem)/1.25 var(--ff-d);font-variation-settings:var(--fv);max-width:28ch;margin:2.2rem 0 0;color:#fff}
.phero-lead em{color:var(--brass-light)}
.phero dl{display:flex;gap:clamp(1.4rem,4vw,3.4rem);margin:2.2rem 0 0}
.phero dt{font:500 .66rem/1 var(--ff-b);letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-top:.5rem}
.phero dd{margin:0;font:300 clamp(2rem,3.6vw,3.2rem)/1 var(--ff-d);font-variation-settings:var(--fv);font-variant-numeric:tabular-nums}
.phero-plan{display:flex;flex-direction:column;align-items:center}
.phero-plan .gr-stage{height:min(64svh,660px);max-width:100%}
.phero .gr-meta{color:#fff}
.phero .gr-meta span{color:var(--brass-light)}
.phero .gr-meta em{color:rgba(255,255,255,.75)}
.phero .gr-meta div{border-color:rgba(216,184,118,.4)}
.phero .gr-chips button{color:rgba(255,255,255,.8);border-color:rgba(216,184,118,.4)}
.phero .gr-chips button[aria-pressed="true"]{background:var(--brass-light);border-color:var(--brass-light);color:var(--ink)}
.phero-in>*{animation:pheroIn 1.4s var(--ease) both}
.phero-plan{animation-delay:.25s}
@keyframes pheroIn{from{opacity:0;transform:translateY(24px)}}
@media(max-width:860px){
  .phero{padding-top:6rem;align-items:flex-start}
  .phero-in{grid-template-columns:1fr}
  .phero-plan .gr-stage{height:min(62svh,560px)}
}
.others .gr-stage{aspect-ratio:auto;width:100%;height:100%;border-radius:0;box-shadow:none}
.others .gr-stage::after{display:none}
.others figure{background:#16261c}

/* Startseite · Anlässe als Grundriss */
.occ-media{display:flex;flex-direction:column;justify-content:center;align-items:center}
.occ-stage{height:min(84vh,760px);max-width:100%}
.occ-count{top:16%}
@media(max-width:860px){
  .occ{gap:0}
  .occ-media{display:flex;position:sticky;top:0;height:auto;z-index:2;padding:14px 0 10px;background:var(--bg);transition:background-color 1.1s var(--ease)}
  .occ-stage{height:min(40svh,440px)}
  .occ-media .gr-meta{margin-top:.7rem}
  .occ-media .gr-meta b{font-size:2.2rem}
  .occ-media .gr-legend,.occ-count{display:none}
  .occ-list{padding:4vh 0 20vh}
  .occ-item{min-height:62vh;opacity:.25;padding:2.5rem 0}
  .occ-item.on{opacity:1}
}
@media(prefers-reduced-motion:reduce){.gr-legend i{animation:none}.phero-in>*{animation:none}}

/* ---------- Teilen: Knopf und Dialog unter dem Glasbogen ---------- */
.teilen-auf{display:inline-flex;align-items:center;gap:.55rem;background:none;border:0;padding:.35rem 0;color:inherit;cursor:pointer;
  font:500 .74rem/1 var(--ff-b);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--line-brass);transition:color .3s,border-color .3s}
.teilen-auf svg{width:1rem;height:1rem;transition:transform .4s var(--ease)}
.teilen-auf:hover{color:var(--acc);border-color:currentColor}
.teilen-auf:hover svg{transform:translateY(-2px)}
.teilen-zeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin:1.8rem 0 0;color:var(--fg-2);font:italic 300 1.15rem/1.3 var(--ff-d)}
.phero-teilen{margin:2rem 0 0;color:#fff}
.phero-teilen .teilen-auf{border-color:rgba(216,184,118,.45)}

.teilen{--r:min(17rem,46vw);width:min(36rem,100% - 2rem);max-height:min(46rem,100dvh - 2rem);overflow:auto;overscroll-behavior:contain;
  padding:5.2rem clamp(1.4rem,5vw,3rem) 2rem;border:1px solid var(--line-brass);border-radius:var(--r) var(--r) 6px 6px / 7rem 7rem 6px 6px;
  color:#fff;background:radial-gradient(120% 60% at 50% 0,rgba(216,184,118,.14),transparent 60%),var(--farn-deep);text-align:center;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7);scrollbar-width:none}
.teilen::-webkit-scrollbar{display:none}
.teilen::before{content:"";position:absolute;inset:.55rem .55rem auto;height:7rem;border:1px solid rgba(216,184,118,.18);border-bottom:0;
  border-radius:var(--r) var(--r) 0 0 / 6.6rem 6.6rem 0 0;pointer-events:none}
.teilen::backdrop{background:rgba(8,16,11,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.teilen[open]{animation:teilen-auf .7s var(--ease)}
.teilen[open]::backdrop{animation:teilen-blende .5s ease}
@keyframes teilen-auf{from{opacity:0;transform:translateY(28px)}}
@keyframes teilen-blende{from{opacity:0}}
.teilen-zu{position:absolute;top:1.3rem;left:50%;translate:-50% 0;width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(216,184,118,.4);background:none;color:var(--brass-light);cursor:pointer;transition:background-color .3s,color .3s,rotate .5s var(--ease)}
.teilen-zu svg{width:1.1rem;height:1.1rem}
.teilen-zu:hover{background:var(--brass-light);color:var(--ink);rotate:90deg}
.teilen .eyebrow{color:var(--brass-light)}
.teilen .eyebrow::after{content:"";width:2.4rem;height:1px;background:currentColor;opacity:.7}
.teilen h2{font-size:clamp(2rem,6vw,2.9rem);margin:1rem 0 .7rem}
.teilen h2 em{color:var(--brass-light)}
.teilen-lead{margin:0 auto 2rem;max-width:30ch;color:rgba(255,255,255,.72);font-size:1rem}
.teilen-wege{list-style:none;margin:0;padding:0;text-align:left;border-top:1px solid rgba(255,255,255,.12)}
.teilen-wege li{border-bottom:1px solid rgba(255,255,255,.12)}
.teilen[open] .teilen-wege li{animation:teilen-auf .8s var(--ease) both;animation-delay:calc(.12s + var(--i) * .05s)}
.teilen-weg{display:flex;align-items:center;gap:1.1rem;width:100%;padding:1rem .8rem;margin:0;background:none;border:0;color:inherit;font:inherit;text-align:left;
  text-decoration:none;cursor:pointer;transition:background-color .35s}
.teilen-ic{flex:none;width:2.8rem;height:2.8rem;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(216,184,118,.35);color:var(--brass-light);
  transition:background-color .35s,color .35s,border-color .35s}
.teilen-ic svg{width:1.15rem;height:1.15rem}
.teilen-txt{flex:1;display:grid;gap:.2rem}
.teilen-txt b{font:400 1.3rem/1.1 var(--ff-d);font-variation-settings:var(--fv)}
.teilen-txt small{font-size:.86rem;color:rgba(255,255,255,.6);transition:color .3s}
.teilen-weg .arr{color:var(--brass-light);transition:transform .4s var(--ease)}
.teilen-weg:hover,.teilen-weg:focus-visible{background:rgba(216,184,118,.07)}
.teilen-weg:hover .teilen-ic,.teilen-weg:focus-visible .teilen-ic{background:var(--brass-light);border-color:var(--brass-light);color:var(--ink)}
.teilen-weg:hover .arr{transform:translateX(5px)}
.teilen-weg.ok small{color:var(--brass-light)}
.teilen-hinweis{min-height:1.4em;margin:1.2rem 0 0;font-size:.86rem;color:var(--brass-light);overflow-wrap:anywhere}
@media(max-width:600px){
  .teilen{width:100%;max-width:none;margin:auto 0 0;max-height:92dvh;border-bottom:0;border-radius:var(--r) var(--r) 0 0 / 5rem 5rem 0 0;padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}
  .teilen::before{height:5rem;border-radius:var(--r) var(--r) 0 0 / 4.6rem 4.6rem 0 0}
  .teilen-weg{padding:.85rem .2rem}
}
@media(prefers-reduced-motion:reduce){.teilen[open],.teilen[open]::backdrop,.teilen[open] .teilen-wege li{animation:none}}
.nav-teilen{cursor:pointer;color:inherit;background:color-mix(in srgb,var(--bg) 80%,transparent)}
.nav .nav-teilen{padding-inline:1rem 1.15rem;gap:.5rem}
.nav-teilen svg{width:13px;height:13px;margin-block:-1px;transition:transform .4s var(--ease)}
.nav-teilen:hover svg{transform:translateY(-2px)}
.menu-open .nav-teilen{color:#fff;background:transparent}
/* schmal: nur das Zeichen, rund wie der Klang-Schalter */
@media(max-width:520px){.nav .nav-teilen{width:46px;height:46px;padding:0;justify-content:center}.nav-teilen span{display:none}}
/* Infomappe: Download neben Weitersagen und im Komplettpreis */
.teilen-auf{text-decoration:none}
.teilen-auf small{font-size:.85em;opacity:.6;letter-spacing:.12em;margin-left:.2rem}
.teilen-zeile .teilen-auf+.teilen-auf{margin-left:.6rem}
.teilen-mappe{display:inline-flex;align-items:center;gap:.5rem;margin-top:.6rem;font-size:.84rem;color:rgba(255,255,255,.6);text-decoration:none}
.teilen-mappe svg{width:.95rem;height:.95rem;color:var(--brass-light)}
.teilen-mappe b{font-weight:500;color:#fff;border-bottom:1px solid rgba(216,184,118,.45)}
.teilen-mappe:hover b{color:var(--brass-light)}