@font-face{font-family:"Inter";src:url("/fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --tief:#0d0c0b;--flaeche:#151412;--flaeche-2:#1e1c19;--flaeche-3:#28251f;
  --linie:rgba(236,232,225,.1);--linie-2:rgba(236,232,225,.18);
  --hell:#ece8e1;--grau:#a8a096;--grau-2:#80786e;
  --tan:#d4a46a;--tan-hell:#e8c592;--tan-tief:#9a7140;
  --r:14px;--shell:min(1240px,calc(100vw - 2.5rem));
  --eo:cubic-bezier(.23,1,.32,1);--eio:cubic-bezier(.77,0,.175,1);
  --s-1:clamp(.82rem,.8rem + .12vw,.9rem);--s0:clamp(1rem,.96rem + .2vw,1.1rem);--s1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --s2:clamp(1.7rem,1.35rem + 1.5vw,2.6rem);--s3:clamp(2.3rem,1.6rem + 3vw,4.2rem);
  color-scheme:dark
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--tief);color:var(--hell);font:400 var(--s0)/1.6 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-color:rgba(212,164,106,.5);text-underline-offset:.2em}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3{margin:0;font-weight:760;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
p{margin:0}
::selection{background:var(--tan);color:var(--tief)}
:focus-visible{outline:2px solid var(--tan);outline-offset:3px;border-radius:6px}
html{scrollbar-color:var(--flaeche-3) var(--tief)}
.shell{width:var(--shell);margin-inline:auto}
.sprung{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--tan);color:var(--tief);padding:.6rem 1rem;border-radius:8px;font-weight:650;text-decoration:none}
.sprung:focus{top:1rem}

/* Tasten */
.taste{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3rem;padding:.8rem 1.35rem;border-radius:999px;font-weight:620;font-size:var(--s0);text-decoration:none;white-space:nowrap;transition:transform 160ms var(--eo),background-color 220ms ease,border-color 220ms ease,color 220ms ease}
.taste svg{width:18px;height:18px;flex:none}
.taste:active{transform:scale(.97)}
.taste-voll{background:var(--tan);color:#17120b}
.taste-glas{background:rgba(236,232,225,.08);border:1px solid rgba(236,232,225,.24);color:var(--hell);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.taste-rand{border:1px solid var(--linie-2);color:var(--hell)}
.taste-klein{min-height:2.6rem;padding:.55rem 1rem;font-size:var(--s-1)}
@media (hover:hover) and (pointer:fine){
  .taste-voll:hover{background:var(--tan-hell)}
  .taste-voll:hover svg{transform:translateX(2px)}
  .taste svg{transition:transform 200ms var(--eo)}
  .taste-glas:hover,.taste-rand:hover{border-color:var(--tan);background:rgba(212,164,106,.1)}
}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto;z-index:50;transition:background-color 300ms ease,border-color 300ms ease,backdrop-filter 300ms ease;border-bottom:1px solid transparent}
.kopf.fest{background:rgba(13,12,11,.78);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-color:var(--linie)}
.kopf-in{width:var(--shell);margin-inline:auto;height:4.4rem;display:flex;align-items:center;gap:2rem}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--hell)}
.marke-zeichen{width:34px;height:34px;color:var(--tan);flex:none}
.marke-text{display:flex;flex-direction:column;line-height:1.05}
.marke-text b{font-size:1.25rem;font-weight:800;letter-spacing:-.04em}
.marke-text i{font-style:normal;font-size:.72rem;color:var(--grau);letter-spacing:.01em}
.kopf-nav{display:flex;gap:1.6rem;margin-left:auto;font-size:var(--s-1)}
.kopf-nav a{text-decoration:none;color:#d6d0c7;transition:color 200ms ease}
.kopf-nav a:hover{color:var(--tan-hell)}
@media (max-width:980px){.kopf-nav{display:none}.kopf .taste{margin-left:auto}}
@media (max-width:420px){.kopf .taste span{display:none}.kopf .taste{padding:.55rem .8rem}}

/* Hero mit Werkstattflug */
.werk{position:relative;height:100svh;background:var(--tief)}
.werk-buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.werk-film{position:absolute;inset:-4% 0;z-index:0;will-change:transform}
.werk-film img,.werk-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.werk-loop{opacity:0;transition:opacity 700ms ease}
.werk-loop.laeuft{opacity:1}
.werk-weg{opacity:0}
.werk-schleier{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(13,12,11,.88) 0%,rgba(13,12,11,.55) 38%,rgba(13,12,11,0) 66%),linear-gradient(180deg,rgba(13,12,11,.6) 0%,rgba(13,12,11,0) 20%,rgba(13,12,11,0) 62%,rgba(13,12,11,.92) 100%)}
.werk-text{position:absolute;z-index:4;left:0;right:0;bottom:0;width:var(--shell);margin-inline:auto;padding-bottom:clamp(4.5rem,12vh,8rem);will-change:transform,opacity}
.werk h1{font-size:min(var(--s3),11vh);font-weight:820;letter-spacing:-.05em;line-height:1;max-width:13ch}
.werk-unter{margin-top:1.3rem;font-size:var(--s1);line-height:1.45;color:#dcd6cc;max-width:36ch}
.tasten{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.werk-text>*{animation:rein 1.1s var(--eo) both}
.werk-text>.werk-unter{animation-delay:.1s}.werk-text>.tasten{animation-delay:.2s}
@keyframes rein{from{opacity:0;transform:translateY(20px);filter:blur(6px)}}

/* 3D Schrank */
.bau{position:absolute;z-index:3;inset:0;perspective:1600px;perspective-origin:65% 45%;pointer-events:none;opacity:0}
.schrank{position:absolute;left:68%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.teil{position:absolute;left:0;top:0;transform-style:preserve-3d;backface-visibility:visible;background:#6b5032 url("/media/holz-eiche-t.webp") center/240px auto;box-shadow:inset 0 0 0 1px rgba(255,236,206,.18)}
.teil::after{content:"";position:absolute;inset:0;background:rgba(10,8,6,var(--schatten,.0));pointer-events:none}
.t-rueck{--schatten:.55}.t-links{--schatten:.25}.t-rechts{--schatten:.4}.t-deckel{--schatten:.15}.t-boden{--schatten:.5}.t-fach1,.t-fach2{--schatten:.2}
.t-tuer1,.t-tuer2{background-color:#3b2c1d;background-blend-mode:multiply;--schatten:.05;box-shadow:inset 0 0 0 1px rgba(255,236,206,.22),inset 0 -40px 60px rgba(0,0,0,.25)}
.bau-mass{position:absolute;color:var(--tan-hell);font-size:.72rem;letter-spacing:.02em;opacity:0;transition:opacity 300ms ease}
.bau-mass span{background:rgba(13,12,11,.7);padding:.2rem .5rem;border-radius:4px;white-space:nowrap}
.bau-mass-b{border-top:1px dashed var(--tan);display:flex;justify-content:center}
.bau-mass-b span{transform:translateY(-55%)}
.bau-mass-h{border-left:1px dashed var(--tan);display:flex;align-items:center}
.bau-mass-h span{transform:translateX(-50%) rotate(-90deg)}
.schritte-flug{position:absolute;z-index:4;left:0;right:0;bottom:0;width:var(--shell);margin:0 auto;padding:0 0 clamp(4.5rem,12vh,8rem);list-style:none;pointer-events:none}
.schritte-flug li{position:absolute;left:0;bottom:clamp(4.5rem,12vh,8rem);max-width:30rem;opacity:0;transform:translateY(16px);filter:blur(4px);will-change:transform,opacity}
.schritte-flug b{display:block;font-size:var(--s2);font-weight:780;letter-spacing:-.04em;line-height:1.05;margin-bottom:.7rem}
.schritte-flug span{display:block;color:#d4cdc3;font-size:var(--s0);max-width:34ch}
.werk-ende{position:absolute;z-index:4;left:0;right:0;bottom:clamp(4.5rem,12vh,8rem);width:var(--shell);margin:0 auto;opacity:0;pointer-events:none}
.werk-ende-titel{font-size:var(--s3);font-weight:800;letter-spacing:-.05em;line-height:1;max-width:12ch;margin-bottom:1.8rem}
.werk-ende.an{pointer-events:auto}
.werk-leiste{position:absolute;z-index:5;right:clamp(1rem,2.5vw,2.2rem);top:50%;width:2px;height:120px;margin-top:-60px;background:var(--linie-2);border-radius:2px;overflow:hidden}
.werk-leiste i{display:block;width:100%;height:100%;background:var(--tan);transform:scaleY(0);transform-origin:top}
.ki-hinweis{font-size:.68rem;color:rgba(236,232,225,.62);letter-spacing:.01em}
.ki-werk{position:absolute;z-index:5;left:clamp(1rem,2.5vw,2.2rem);bottom:.9rem;padding:.25rem .6rem;border-radius:99px;background:rgba(13,12,11,.55);border:1px solid var(--linie)}
.ki-fliess{margin-top:1.4rem;color:var(--grau-2)}
@media (max-width:760px){
  .werk-schleier{background:linear-gradient(180deg,rgba(13,12,11,.7) 0%,rgba(13,12,11,.15) 26%,rgba(13,12,11,.25) 44%,rgba(13,12,11,.92) 70%,var(--tief) 100%)}
  .werk-film img,.werk-film video{object-position:66% 50%}
  .bau{perspective:1100px;perspective-origin:50% 32%}
  .schrank{left:50%;top:34%}
  .werk h1{font-size:clamp(2.4rem,11vw,3.4rem)}
  .werk-unter{font-size:1.05rem}
  .werk-text{padding-bottom:5.5rem}
  .schritte-flug li{bottom:6.4rem;right:0}
  .werk-ende{bottom:6.4rem}
  .werk-leiste{display:none}
}

/* Abschnitte */
.sek{padding:clamp(5rem,11vw,9rem) 0}
.titel{font-size:var(--s2);max-width:20ch}
.einleitung{margin-top:1.1rem;color:var(--grau);max-width:60ch;font-size:var(--s0)}

/* Leistungen als Raster */
.kacheln{margin-top:clamp(2.2rem,4vw,3.5rem);display:grid;gap:1rem;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(0,auto)}
.kachel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:22rem;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--hell);background:var(--flaeche);isolation:isolate;transition:transform 400ms var(--eo)}
.kachel-bild{position:absolute;inset:0;z-index:-1;overflow:hidden}
.kachel-bild img{width:100%;height:118%;margin-top:-9%;object-fit:cover;transition:scale 900ms var(--eo)}
.kachel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,12,11,0) 35%,rgba(13,12,11,.9) 100%)}
.kachel-text{padding:1.5rem 1.6rem 1.6rem}
.kachel h3{font-size:var(--s1);font-weight:720;letter-spacing:-.03em}
.kachel p{margin-top:.45rem;color:#cfc8be;font-size:var(--s-1);max-width:34ch;line-height:1.5}
.kachel-los{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;color:var(--tan-hell);font-weight:620;font-size:var(--s-1)}
.kachel-los svg{width:16px;height:16px}
.k-schrank{grid-column:1 / span 5;grid-row:1 / span 2;min-height:44rem}
.k-kueche{grid-column:6 / span 7;grid-row:1}
.k-treppe{grid-column:6 / span 4;grid-row:2}
.k-stueck{grid-column:10 / span 3;grid-row:2}
.k-garten{grid-column:1 / -1;grid-row:3;min-height:26rem}
@media (hover:hover) and (pointer:fine){.kachel:hover .kachel-bild img{scale:1.04}.kachel:hover{transform:translateY(-3px)}}
@media (max-width:900px){.kacheln{grid-template-columns:1fr 1fr}.k-schrank,.k-kueche,.k-garten{grid-column:1 / -1;grid-row:auto;min-height:24rem}.k-treppe,.k-stueck{grid-column:span 1;grid-row:auto;min-height:22rem}}
@media (max-width:560px){.k-treppe,.k-stueck{grid-column:1 / -1}.k-schrank{min-height:30rem}}

/* Nischenplaner */
.planer-sek{background:linear-gradient(180deg,var(--tief),var(--flaeche) 30%,var(--flaeche) 70%,var(--tief))}
.planer-raster{margin-top:clamp(2.2rem,4vw,3.5rem);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,3vw,3rem);align-items:stretch}
.planer-felder{display:flex;flex-direction:column;gap:1.4rem;padding:clamp(1.4rem,2.5vw,2.2rem);border:1px solid var(--linie);border-radius:var(--r);background:rgba(13,12,11,.5)}
.wahl-reihe{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.wahl-reihe legend{font-weight:650;margin-bottom:.7rem;padding:0}
.wahl-reihe label{position:relative}
.wahl-reihe input{position:absolute;opacity:0;inset:0;cursor:pointer}
.wahl-reihe span{display:inline-block;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--linie-2);font-size:var(--s-1);transition:background-color 200ms ease,border-color 200ms ease,color 200ms ease}
.wahl-reihe input:checked+span{background:var(--tan);border-color:var(--tan);color:#17120b;font-weight:620}
.wahl-reihe input:focus-visible+span{outline:2px solid var(--tan);outline-offset:3px}
.regler{display:flex;flex-direction:column;gap:.55rem}
.regler>span{display:flex;justify-content:space-between;font-weight:600;font-size:var(--s-1)}
.regler output{color:var(--tan-hell);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--tan) var(--p),var(--flaeche-3) var(--p))}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--tan) var(--p),var(--flaeche-3) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--hell);border:4px solid var(--tan);transition:transform 150ms var(--eo)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--hell);border:4px solid var(--tan)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.schalter{display:flex;align-items:center;gap:.8rem;font-size:var(--s-1);cursor:pointer;min-height:44px}
.schalter input{position:absolute;opacity:0;width:1px;height:1px}
.schalter span{position:relative;width:44px;height:26px;border-radius:99px;background:var(--flaeche-3);transition:background-color 200ms ease;flex:none}
.schalter span::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--hell);transition:transform 220ms var(--eo)}
.schalter input:checked+span{background:var(--tan)}
.schalter input:checked+span::after{transform:translateX(18px)}
.schalter input:focus-visible+span{outline:2px solid var(--tan);outline-offset:3px}
.planer-vorschau{display:flex;flex-direction:column;padding:clamp(1.4rem,2.5vw,2.2rem);border:1px solid var(--linie);border-radius:var(--r);background:radial-gradient(120% 80% at 70% 20%,rgba(212,164,106,.12),transparent 60%),rgba(13,12,11,.5)}
.vorschau-buehne{position:relative;flex:1;min-height:20rem;display:grid;place-items:center;perspective:1200px}
.vk{position:relative;transform-style:preserve-3d;transform:rotateX(-8deg) rotateY(-26deg);transition:width 350ms var(--eo),height 350ms var(--eo)}
.vk>div{position:absolute;inset:0}
.vk-rueck{background:#1c1712;transform:translateZ(calc(var(--tiefe) * -1))}
.vk-seite{left:auto!important;right:0!important;width:var(--tiefe)!important;transform-origin:right center;transform:rotateY(-90deg);background:#3a2b1c url("/media/holz-eiche-t.webp") center/200px auto;background-blend-mode:multiply;box-shadow:inset 0 0 0 1px rgba(255,236,206,.15)}
.vk-deckel{height:var(--tiefe)!important;transform-origin:top center;transform:rotateX(90deg);background:#4a3824 url("/media/holz-eiche-t.webp") center/200px auto;background-blend-mode:multiply}
.vk-fronten{display:flex;gap:3px;padding:3px;background:#120e0a;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.vk-front{flex:1;position:relative;background:url("/media/holz-eiche-t.webp") center/220px auto;box-shadow:inset 0 0 0 1px rgba(255,236,206,.14);transition:background-image 300ms ease}
.vk-front::after{content:"";position:absolute;right:8%;top:50%;width:3px;height:18%;margin-top:-9%;border-radius:2px;background:rgba(13,12,11,.45)}
.vk-front:nth-child(odd)::after{right:auto;left:8%}
.vk-front.offen-regal{background:#1c1712;box-shadow:inset 0 0 0 1px rgba(255,236,206,.14)}
.vk-front.offen-regal::after{display:none}
.vk-front.offen-regal::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0,transparent calc(25% - 4px),rgba(212,164,106,.75) calc(25% - 4px),rgba(212,164,106,.75) 25%)}
.vk-boden{position:absolute;left:10%;right:10%;bottom:8%;height:1px;background:linear-gradient(90deg,transparent,var(--linie-2),transparent)}
.planer-werte{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.4rem 0 0;padding:1.2rem 0 0;border-top:1px solid var(--linie)}
.planer-werte dt{font-size:.75rem;color:var(--grau)}
.planer-werte dd{margin:.15rem 0 0;font-size:var(--s1);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.planer-tipp{margin:1rem 0 1.4rem;color:#cfc8be;font-size:var(--s-1);min-height:2.8em}
.planer-vorschau .taste{align-self:flex-start}
.messen{margin-top:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.messen-bild{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.messen-bild img{width:100%;height:115%;margin-top:-7%;object-fit:cover}
.messen-text h3{font-size:var(--s1)}
.messen-text ol{margin:1.2rem 0 0;padding:0;list-style:none;counter-reset:m;display:grid;gap:1.1rem}
.messen-text li{counter-increment:m;display:grid;grid-template-columns:2rem 1fr;color:var(--grau)}
.messen-text li::before{content:counter(m);color:var(--tan);font-weight:760;font-variant-numeric:tabular-nums}
.messen-text b{color:var(--hell);font-weight:640}
@media (max-width:900px){.planer-raster,.messen{grid-template-columns:minmax(0,1fr)}.vorschau-buehne{min-height:17rem}}

/* Holzarten */
.holz{margin-top:clamp(2rem,4vw,3rem)}
.holz-wahl{display:flex;gap:.4rem;padding:.35rem;border:1px solid var(--linie);border-radius:999px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.holz-wahl button{padding:.6rem 1.15rem;border-radius:999px;font-weight:600;font-size:var(--s-1);color:var(--grau);white-space:nowrap;transition:background-color 220ms ease,color 220ms ease}
.holz-wahl button[aria-selected=true]{background:var(--hell);color:var(--tief)}
.holz-flaeche{margin-top:1.6rem;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.holz-muster{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--flaeche)}
.holz-muster img{width:100%;height:100%;object-fit:cover;transition:opacity 260ms ease,transform 900ms var(--eo),filter 260ms ease}
.holz-muster img.wechsel{opacity:0;filter:blur(8px);transform:scale(1.03)}
.holz-muster::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at var(--lx,30%) var(--ly,30%),rgba(255,240,215,.22),transparent 60%);mix-blend-mode:soft-light;pointer-events:none}
.holz-text h3{font-size:var(--s2)}
.holz-text p{margin-top:1rem;color:#cfc8be;max-width:42ch}
.holz-werte{margin:1.5rem 0 1.6rem;display:grid;gap:.7rem}
.holz-werte div{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding-top:.7rem;border-top:1px solid var(--linie)}
.holz-werte dt{color:var(--grau);font-size:var(--s-1)}
.holz-werte dd{margin:0;font-weight:600}
@media (max-width:900px){.holz-flaeche{grid-template-columns:minmax(0,1fr)}}

/* Anfrage */
.anfrage-sek{background:var(--flaeche);border-block:1px solid var(--linie)}
.anfrage-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.anfrage-text{position:sticky;top:7rem}
.anfrage-lieber{margin-top:2rem;color:var(--grau)}
.anfrage-lieber a{color:var(--tan-hell);font-weight:650;text-decoration:none;white-space:nowrap}
.anfrage{padding:clamp(1.4rem,2.5vw,2.2rem);border:1px solid var(--linie-2);border-radius:var(--r);background:var(--tief)}
.stufen{display:flex;gap:.5rem;list-style:none;margin:0 0 1.6rem;padding:0;counter-reset:s}
.stufen li{flex:1;counter-increment:s;font-size:.78rem;color:var(--grau-2);padding-top:.7rem;border-top:2px solid var(--flaeche-3);transition:color 200ms ease,border-color 300ms ease}
.stufen li::before{content:counter(s) " ";font-variant-numeric:tabular-nums}
.stufen li[aria-current=step]{color:var(--hell);border-color:var(--tan)}
.stufen li[data-fertig=true]{color:var(--grau);border-color:var(--tan-tief)}
.block-titel{font-weight:680;font-size:var(--s1);letter-spacing:-.02em;margin-bottom:1.1rem;grid-column:1 / -1}
.wahl{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.wahl[hidden],.felder[hidden]{display:none}
.wahl-taste{text-align:left;padding:1rem 1.1rem;border-radius:10px;border:1px solid var(--linie-2);font-weight:560;transition:border-color 200ms ease,background-color 200ms ease,transform 160ms var(--eo)}
.wahl-taste:active{transform:scale(.98)}
.wahl-taste.gewaehlt{border-color:var(--tan);background:rgba(212,164,106,.12)}
@media (hover:hover) and (pointer:fine){.wahl-taste:hover{border-color:var(--tan)}}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feld{display:flex;flex-direction:column;gap:.4rem;font-size:var(--s-1);font-weight:560}
.feld-weit{grid-column:1 / -1}
.feld input,.feld textarea{padding:.85rem 1rem;border-radius:10px;border:1px solid var(--linie-2);background:var(--flaeche);color:var(--hell);font-weight:400;resize:vertical;transition:border-color 200ms ease}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--tan);box-shadow:0 0 0 3px rgba(212,164,106,.2)}
.mitnahme{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem;border-radius:10px;background:rgba(212,164,106,.1);border:1px solid rgba(212,164,106,.35);font-size:var(--s-1)}
.mitnahme b{color:var(--tan-hell)}
.vorschau-box{padding:1rem;border-radius:10px;background:var(--flaeche);border:1px dashed var(--linie-2)}
.vorschau-titel{font-size:.75rem;color:var(--grau);margin-bottom:.5rem}
.vorschau-text{margin:0;white-space:pre-wrap;font:inherit;font-size:var(--s-1);color:#d6d0c7;max-height:12rem;overflow:auto}
.anfrage-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.anfrage-hinweis{font-size:var(--s-1);color:var(--grau)}
.gewaehlt{margin-top:1.2rem;font-size:var(--s-1);color:var(--grau)}
.gewaehlt b{color:var(--hell)}
.zurueck{margin-top:1rem;font-size:var(--s-1);color:var(--grau);text-decoration:underline;text-underline-offset:.2em}
@media (max-width:900px){.anfrage-raster{grid-template-columns:minmax(0,1fr)}.anfrage-text{position:static}}
@media (max-width:520px){.wahl,.felder{grid-template-columns:1fr}.anfrage-aktionen .taste{width:100%}}

/* Ort und Kontakt */
.ort{position:relative;padding:clamp(10rem,22vw,18rem) 0 clamp(5rem,9vw,8rem);overflow:hidden;isolation:isolate}
.ort-bild{position:absolute;inset:0;z-index:-1}
.ort-bild img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;object-position:40% 50%}
.ort-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--tief) 0%,rgba(13,12,11,.15) 30%,rgba(13,12,11,.55) 60%,var(--tief) 100%)}
.ort-bild .ki-hinweis{position:absolute;right:clamp(1rem,2.5vw,2.2rem);top:clamp(5rem,9vw,7rem);z-index:2}
.ort-wege{margin-top:2.4rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.weg{display:flex;gap:1rem;align-items:flex-start;padding:1.3rem 1.4rem;border-radius:var(--r);background:rgba(13,12,11,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--linie-2);text-decoration:none;transition:border-color 220ms ease,transform 300ms var(--eo)}
.weg svg{width:22px;height:22px;color:var(--tan);flex:none;margin-top:.15rem}
.weg span{display:flex;flex-direction:column;font-weight:620;overflow-wrap:anywhere}
.weg small{font-size:.75rem;font-weight:500;color:var(--grau)}
@media (hover:hover) and (pointer:fine){.weg:hover{border-color:var(--tan);transform:translateY(-2px)}}
@media (max-width:900px){.ort-wege{grid-template-columns:1fr}}

/* Fuß */
.fuss{padding:3.5rem 0 7rem;border-top:1px solid var(--linie)}
.fuss-oben{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;align-items:center}
.fuss-nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:var(--s-1)}
.fuss-nav a{color:var(--grau);text-decoration:none}
.fuss-nav a:hover{color:var(--hell)}
.fuss-recht{margin-top:2rem;font-size:var(--s-1);color:var(--grau-2)}
.fuss-ki{margin-top:.6rem;font-size:.75rem;color:var(--grau-2)}
@media (min-width:861px){.fuss{padding-bottom:3.5rem}}

/* Daumenleiste */
.daumen{position:fixed;z-index:40;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));display:none;grid-template-columns:1fr 1.4fr 1fr;gap:.4rem;padding:.4rem;border-radius:999px;background:rgba(21,20,18,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--linie-2);transform:translateY(140%);transition:transform 420ms var(--eo)}
.daumen.zeigen{transform:none}
.daumen a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.9rem;border-radius:999px;text-decoration:none;font-weight:620;font-size:.88rem}
.daumen svg{width:17px;height:17px}
.daumen-haupt{background:var(--tan);color:#17120b}
@media (max-width:860px){.daumen{display:grid}}

/* Einblenden */
.zeigt{opacity:0;transform:translateY(22px);transition:opacity 800ms var(--eo),transform 900ms var(--eo)}
.zeigt.da{opacity:1;transform:none}

/* Ruhige Darstellung: kein Flug, die Schritte stehen als Liste unter dem Bild */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .zeigt{opacity:1;transform:none}
}
.ruhig .werk{height:auto!important}
.ruhig .werk-buehne{position:relative;height:auto;overflow:visible}
.ruhig .werk-film{inset:0 0 auto;height:100svh}
.ruhig .werk-schleier{inset:0 0 auto;height:100svh}
.ruhig .werk-text{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:6rem}
.ruhig .bau,.ruhig .werk-weg,.ruhig .werk-leiste,.ruhig .werk-ende{display:none}
.ruhig .schritte-flug{position:relative;z-index:4;padding:3rem 0 1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2rem}
.ruhig .schritte-flug li{position:static;opacity:1;transform:none;filter:none}
.ruhig .schritte-flug b{font-size:var(--s1)}