@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{
  --nacht:#0c0e0d;--kohle:#131715;--graphit:#1b211f;--schiefer:#2e3633;
  --linie:rgba(231,236,234,.09);--linie-2:rgba(231,236,234,.18);
  --weiss:#eef1ef;--grau:#a3aca8;--grau-2:#7a8480;
  --schilf:#a3b4b1;--schilf-hell:#e8edeb;--schilf-tief:#56645f;
  --rot:#d10a10;--rot-hell:#e5262c;
  --r:14px;--r-s:8px;--shell:min(1320px,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.15rem,1.06rem + .45vw,1.4rem);
  --s2:clamp(2rem,1.35rem + 2.4vw,3.6rem);--s3:clamp(2.7rem,1.4rem + 5vw,6.4rem);
  color-scheme:dark
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem;scrollbar-color:var(--schiefer) var(--nacht)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--nacht);color:var(--weiss);font:400 var(--s0)/1.6 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01","ss03";-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-color:rgba(163,180,177,.6);text-decoration-thickness:1px}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.04em;line-height:1.03;text-wrap:balance}
p{margin:0}
.leicht{font-weight:300;color:var(--schilf);letter-spacing:-.035em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--rot);color:#fff}
:focus-visible{outline:2px solid var(--schilf);outline-offset:3px;border-radius:4px}
::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:var(--nacht)}::-webkit-scrollbar-thumb{background:var(--schiefer);border:3px solid var(--nacht);border-radius:6px}
input,textarea{caret-color:var(--rot)}
.shell{width:var(--shell);margin-inline:auto}
.springen{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--rot);color:#fff;padding:.6rem 1rem;border-radius:999px;font-weight:600;text-decoration:none}
.springen:focus{top:1rem}
.bild-hinweis{margin-top:.9rem;font-size:.72rem;color:var(--grau-2);letter-spacing:.01em}

/* Tasten */
.taste{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.8rem 1.45rem;border-radius:999px;font-weight:600;font-size:var(--s0);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:transform 160ms var(--eo),background-color 220ms ease,border-color 220ms ease,color 220ms ease,box-shadow 220ms ease}
.taste svg{width:18px;height:18px;flex:none;fill:currentColor}
.taste:active{transform:scale(.97)}
.taste-rot{background:var(--rot);color:#fff}
.taste-glas{background:rgba(238,241,239,.1);border:1px solid rgba(238,241,239,.24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.taste-rand{border:1px solid var(--linie-2)}
.taste.gemerkt{border-color:var(--schilf);color:var(--schilf)}
@media (hover:hover) and (pointer:fine){
  .taste svg{transition:transform 200ms var(--eo)}
  .taste-rot:hover{background:var(--rot-hell);box-shadow:0 14px 34px -14px rgba(209,10,16,.75)}
  .taste-rot:hover svg{transform:translateX(2px)}
  .taste-glas:hover{background:rgba(238,241,239,.18)}
  .taste-rand:hover{border-color:var(--schilf)}
}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto;z-index:50;border-bottom:1px solid transparent;transition:background-color 300ms ease,border-color 300ms ease}
.kopf.fest{background:rgba(12,14,13,.8);-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.5rem;display:flex;align-items:center;gap:2rem}
.marke{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--weiss)}
.marke-zeichen{width:44px;height:40px;flex:none}
.marke-text{display:flex;flex-direction:column;line-height:1}
.marke-text b{font-size:1.12rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase}
.marke-text i{font-style:normal;font-size:.76rem;font-weight:400;color:var(--schilf);letter-spacing:.02em;margin-top:.28rem}
.kopf-nav{display:flex;gap:1.7rem;margin-left:auto;font-size:var(--s-1)}
.kopf-nav a{text-decoration:none;color:#d6dbd9;transition:color 200ms ease}
.kopf-nav a:hover{color:#fff}
.kopf-taste{min-height:2.6rem;padding:.5rem 1.15rem;font-size:var(--s-1)}
@media (max-width:1080px){.kopf-nav{display:none}.kopf-taste{margin-left:auto}}

/* Bühne mit Film und Steg in 3D */
.buehne{position:relative;height:100svh;background:var(--nacht)}
.buehne-fix{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.film{position:absolute;inset:-4% 0;z-index:0;will-change:transform}
.film img,.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.film-loop{opacity:0;transition:opacity 900ms ease}
.film-loop.laeuft{opacity:1}
.film-ziel{opacity:0}
.verlauf{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(12,14,13,.9) 0%,rgba(12,14,13,.45) 34%,rgba(12,14,13,0) 58%),linear-gradient(90deg,rgba(12,14,13,.55) 0%,rgba(12,14,13,0) 50%),linear-gradient(180deg,rgba(12,14,13,.6) 0%,rgba(12,14,13,0) 16%)}
.dimm{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(12,14,13,.9),rgba(12,14,13,.55) 38%,rgba(12,14,13,.8) 70%,rgba(12,14,13,.95));opacity:0}
.buehne-text{position:absolute;z-index:4;left:0;right:0;bottom:0;padding-bottom:clamp(6.5rem,15vh,10rem);will-change:transform,opacity}
.buehne h1{font-size:min(var(--s3),12.5vh);font-weight:600;letter-spacing:-.055em;line-height:.94;max-width:12ch}
.buehne h1 span{display:block}
.buehne-satz{margin-top:1.5rem;font-size:var(--s1);line-height:1.45;color:#e1e6e4;max-width:40ch;letter-spacing:-.01em}
.buehne-tasten{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.buehne-fakten{position:absolute;z-index:4;left:0;right:0;bottom:0;margin:0 auto;padding:1.05rem 0 1.15rem;list-style:none;display:flex;gap:2.2rem;border-top:1px solid rgba(163,180,177,.28);font-size:var(--s-1);color:#d4dad8;will-change:opacity}
.buehne-fakten li{display:flex;align-items:center;gap:.5rem}
.buehne-fakten svg{width:16px;height:16px;fill:var(--schilf)}
.sterne-mini svg{width:15px;height:15px;color:var(--rot);fill:currentColor}
@media (prefers-reduced-motion:no-preference){
  .buehne-text>*{animation:rein 1.15s var(--eo) both}
  .buehne-text>h1{animation-delay:.06s}.buehne-text>.buehne-satz{animation-delay:.16s}.buehne-text>.buehne-tasten{animation-delay:.26s}
  .buehne-fakten li{animation:rein 1.15s .4s var(--eo) both}
}
@keyframes rein{from{opacity:0;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

.aufbau{position:absolute;inset:0;z-index:3;perspective:900px;perspective-origin:50% 38%;pointer-events:none;opacity:0;overflow:hidden}
.aufbau::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(12,14,13,.82) 0%,rgba(12,14,13,.45) 28%,rgba(12,14,13,0) 46%),linear-gradient(0deg,rgba(12,14,13,.75) 0%,rgba(12,14,13,0) 22%)}
.welt{position:absolute;left:50%;top:38%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.welt div{position:absolute;left:0;top:0;transform-style:preserve-3d;backface-visibility:visible}
.f-pfahl{background:linear-gradient(180deg,#8d6c4a 0%,#5d4630 45%,rgba(40,48,46,.55) 72%,rgba(12,14,13,0) 100%)}
.f-pfahl-s{background:linear-gradient(180deg,#6e5539 0%,#45352a 45%,rgba(30,36,34,.5) 72%,rgba(12,14,13,0) 100%)}
.f-traeger{background:linear-gradient(180deg,#b38a5f,#8a6743);box-shadow:inset 0 0 0 1px rgba(60,38,18,.35)}
.f-traeger-s{background:#6a5036}
.f-diele{background:repeating-linear-gradient(90deg,rgba(90,55,25,.16) 0 1px,transparent 1px 9px),repeating-linear-gradient(90deg,rgba(90,55,25,.1) 0 2px,transparent 2px 31px),linear-gradient(180deg,#d7ae7f,#c39565);box-shadow:inset 0 -1px 0 rgba(70,40,15,.45)}
.f-gel{background:linear-gradient(180deg,#c49a6b,#9c7651)}
.f-gel-s{background:#7a5c3f}
.f-dach{background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 11px),linear-gradient(180deg,#e0262c,#a80a0f);box-shadow:inset 0 0 0 1px rgba(80,0,0,.4)}
.f-dach-u{background:#5b1013}
.f-giebel{background:linear-gradient(180deg,rgba(163,180,177,.34),rgba(163,180,177,.12));clip-path:polygon(50% 0,100% 100%,0 100%)}
.f-boden{background:repeating-linear-gradient(90deg,rgba(90,55,25,.16) 0 1px,transparent 1px 9px),linear-gradient(180deg,#cfa374,#b78758)}
.f-licht{background:radial-gradient(closest-side,rgba(255,196,120,.55),rgba(255,160,80,0));pointer-events:none}

.ablauf{position:absolute;z-index:4;left:0;right:0;bottom:clamp(5.5rem,13vh,8.5rem);margin:0 auto;padding:0;list-style:none;display:grid;gap:.9rem;opacity:0;pointer-events:none;max-width:var(--shell)}
.ablauf li{max-width:26rem;opacity:.34;transition:opacity 400ms ease}
.ablauf b{display:block;font-size:clamp(1.5rem,1.05rem + 1.5vw,2.5rem);font-weight:600;letter-spacing:-.045em;line-height:1.02}
.ablauf span{display:block;max-height:0;overflow:hidden;color:#d9dfdd;font-size:var(--s0);max-width:34ch;transition:max-height 320ms var(--eo),margin 320ms var(--eo)}
.ablauf li.jetzt{opacity:1}
.ablauf li.jetzt b::after{content:"";display:inline-block;width:.32em;height:.32em;margin-left:.3em;border-radius:50%;background:var(--rot);vertical-align:.18em}
.ablauf li.jetzt span{max-height:8rem;margin-top:.5rem}
.ablauf .ablauf-balken{display:block;opacity:1;width:min(26rem,100%);height:2px;background:rgba(163,180,177,.22);margin-top:.5rem;overflow:hidden;border-radius:2px}
.ablauf .ablauf-balken i{display:block;height:100%;background:var(--schilf);transform-origin:0 50%;transform:scaleX(var(--fort,0))}
.buehne-ende{position:absolute;z-index:4;left:0;right:0;bottom:clamp(6.5rem,15vh,10rem);opacity:0;pointer-events:none}
.ende-gross{font-size:var(--s3);font-weight:600;letter-spacing:-.055em;line-height:.95;text-shadow:0 2px 34px rgba(0,0,0,.5)}
.ende-klein{margin:1.1rem 0 1.9rem;color:#e1e6e4;font-size:var(--s1);letter-spacing:-.01em}
.buehne-ende.an{pointer-events:auto}
.ki-hinweis{position:absolute;z-index:5;right:clamp(1.25rem,calc((100vw - 1320px)/2),50vw);bottom:1.05rem;font-size:.68rem;color:rgba(238,241,239,.62)}
@media (max-width:760px){
  .film img,.film video{object-position:50% 50%}
  .verlauf{background:linear-gradient(0deg,rgba(12,14,13,.94) 0%,rgba(12,14,13,.6) 42%,rgba(12,14,13,.05) 70%),linear-gradient(180deg,rgba(12,14,13,.6) 0%,rgba(12,14,13,0) 20%)}
  .aufbau{perspective-origin:50% 30%}
  .aufbau::after{background:linear-gradient(0deg,rgba(12,14,13,.96) 0%,rgba(12,14,13,.82) 30%,rgba(12,14,13,0) 52%)}
  .welt{top:30%}
  .buehne h1{font-size:clamp(2.7rem,13vw,3.7rem)}
  .buehne-satz{font-size:1.05rem}
  .buehne-text{padding-bottom:7.6rem}
  .ablauf{bottom:7.6rem}
  .ablauf li{display:none}.ablauf li.jetzt{display:block}
  .buehne-ende{bottom:7.6rem}
  .buehne-fakten{gap:1rem;flex-wrap:wrap;font-size:.78rem;padding:.85rem 0 2.4rem}
  .ki-hinweis{right:auto;left:1.25rem;bottom:.85rem}
}

/* Abschnitte */
.sek{padding:clamp(5rem,10vw,9rem) 0;position:relative}
.titel{font-size:var(--s2);max-width:17ch}
.einleitung{margin-top:1.15rem;color:var(--grau);font-size:var(--s1);line-height:1.5;max-width:46ch;letter-spacing:-.01em}
.sek-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:end}
.sek-kopf .einleitung{justify-self:end}
@media (max-width:860px){.sek-kopf{grid-template-columns:1fr}.sek-kopf .einleitung{justify-self:start}}

/* Über */
.ueber-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2.5rem,6vw,6.5rem);align-items:center}
.hand{margin:2.4rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linie)}
.hand li{padding:1.2rem 1.2rem 0 0;display:grid;gap:.45rem;align-content:start;counter-increment:h}
.hand li+li{padding-left:1.2rem;border-left:1px solid var(--linie)}
.hand b{font-weight:600;font-size:var(--s1);letter-spacing:-.025em}
.hand b::before{content:"0" counter(h);display:block;font-size:.75rem;font-weight:500;color:var(--schilf);letter-spacing:.04em;margin-bottom:.5rem}
.hand span{color:var(--grau);font-size:var(--s-1);line-height:1.5}
.hand-nach{display:flex;gap:.7rem;align-items:flex-start;margin-top:2rem;padding:1rem 1.15rem;border-radius:var(--r);background:var(--kohle);border:1px solid var(--linie);color:#dfe4e2;max-width:40rem}
.hand-nach svg{width:20px;height:20px;fill:var(--rot);flex:none;margin-top:.15rem}
.ueber-bilder{position:relative;padding:0 0 18% 0}
.ub-gross{margin:0;position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3.3}
.ub-gross img{position:absolute;inset:-9% 0;width:100%;height:118%;object-fit:cover;will-change:transform}
.ub-klein{margin:0;position:absolute;right:-4%;bottom:0;width:52%;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r);border:6px solid var(--nacht);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.ub-klein img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;will-change:transform}
.ueber-bilder .bild-hinweis{position:absolute;left:0;bottom:0}
@media (max-width:900px){.ueber-raster{grid-template-columns:1fr}.ub-klein{right:0}}
@media (max-width:560px){.hand{grid-template-columns:1fr}.hand li+li{padding-left:0;border-left:0;border-top:1px solid var(--linie)}.hand li{padding:1.1rem 0}}

/* Leistungen als Bento */
.bento{margin:clamp(2.5rem,5vw,3.8rem) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(13rem,19vw,17.5rem);grid-auto-flow:row dense;gap:.75rem}
.kachel{position:relative;overflow:hidden;border-radius:var(--r);background:var(--kohle);isolation:isolate}
.k-gross{grid-column:span 2;grid-row:span 2}
.k-hoch{grid-row:span 2}
.k-breit{grid-column:span 2}
.kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 900ms var(--eo)}
.kachel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(12,14,13,.92) 0%,rgba(12,14,13,.5) 38%,rgba(12,14,13,0) 66%)}
.kachel-text{position:absolute;left:0;right:0;bottom:0;padding:1.25rem 4.4rem 1.25rem 1.3rem}
.kachel h3{font-size:clamp(1.15rem,.95rem + .7vw,1.6rem);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.k-gross h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.4rem)}
.kachel p{margin-top:.45rem;font-size:var(--s-1);color:#cfd6d3;line-height:1.45;max-width:40ch}
.mitnehmen{position:absolute;right:1rem;bottom:1.1rem;width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;background:rgba(238,241,239,.12);border:1px solid rgba(238,241,239,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform 260ms var(--eo),background-color 200ms ease,border-color 200ms ease}
.mitnehmen svg{width:18px;height:18px;fill:currentColor;transition:transform 300ms var(--eo)}
.mitnehmen:active{transform:scale(.92)}
.mitnehmen[aria-pressed=true]{background:var(--rot);border-color:var(--rot)}
.mitnehmen[aria-pressed=true] svg{transform:rotate(45deg)}
.k-text{background:var(--schilf);color:var(--nacht)}
.k-text::after{display:none}
.k-text .k-zeichen{position:absolute;left:1.3rem;top:1.3rem;width:30px;height:30px;fill:var(--nacht)}
.k-text p{color:#263330}
.k-text .mitnehmen{background:rgba(12,14,13,.08);border-color:rgba(12,14,13,.35);color:var(--nacht)}
.k-text .mitnehmen[aria-pressed=true]{background:var(--nacht);color:var(--schilf)}
@media (hover:hover) and (pointer:fine){
  .kachel:hover img{transform:scale(1.045)}
  .mitnehmen:hover{background:rgba(238,241,239,.22)}
}
.bento+.bild-hinweis{margin-top:1rem}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:15rem}}
@media (max-width:620px){.bento{grid-template-columns:1fr;grid-auto-rows:auto}.kachel{min-height:16rem}.k-gross,.k-breit{grid-column:auto;grid-row:auto}.k-gross{min-height:22rem}.k-text{min-height:14rem}}

/* Sonderbau */
.sonderbau{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--kohle);border-block:1px solid var(--linie)}
.sb-bild{position:relative;overflow:hidden;min-height:44rem}
.sb-bild img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;will-change:transform}
.auf-bild{position:absolute;left:1.2rem;bottom:1rem;margin:0;color:rgba(238,241,239,.7);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.sb-text{position:relative;padding:clamp(4.5rem,9vw,8rem) clamp(1.25rem,6vw,6rem) clamp(4.5rem,9vw,8rem)}
.sb-liste{margin:2.4rem 0 2.2rem;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--linie)}
.sb-liste li{padding:1.05rem 0;border-bottom:1px solid var(--linie);display:grid;gap:.15rem}
.sb-liste li:nth-child(odd){padding-right:1rem}
.sb-liste b{font-weight:600;font-size:var(--s1);letter-spacing:-.025em}
.sb-liste span{color:var(--grau);font-size:var(--s-1)}
.sb-klein{margin:2.8rem 0 0 auto;width:min(22rem,72%);aspect-ratio:16/10;position:relative;overflow:hidden;border-radius:var(--r)}
.sb-klein img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;will-change:transform}
@media (max-width:900px){.sonderbau{grid-template-columns:1fr}.sb-bild{min-height:0;aspect-ratio:4/4.4}}
@media (max-width:480px){.sb-liste{grid-template-columns:1fr}.sb-liste li:nth-child(odd){padding-right:0}}

/* Formfelder allgemein */
label{font-size:var(--s-1)}
.planer-felder label,.bonus-felder label,.felder-zwei label,.lang{display:grid;gap:.45rem;color:var(--grau);font-weight:500}
input[type=number],.felder-zwei input,.felder-zwei select,.lang textarea{width:100%;min-height:3.05rem;padding:.65rem .95rem;border-radius:var(--r-s);border:1px solid var(--linie-2);background:rgba(12,14,13,.6);color:var(--weiss);font-variant-numeric:tabular-nums;transition:border-color 200ms ease,box-shadow 200ms ease}
input[type=number]:focus,.felder-zwei input:focus,.felder-zwei select:focus,.lang textarea:focus{outline:none;border-color:var(--schilf);box-shadow:0 0 0 3px rgba(163,180,177,.2)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2rem;background:transparent;accent-color:var(--rot)}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--linie-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--weiss);border:5px solid var(--rot)}
input[type=range]::-moz-range-track{height:2px;background:var(--linie-2)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--weiss);border:5px solid var(--rot)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:600;font-size:var(--s0);letter-spacing:-.015em;margin-bottom:.7rem;padding:0}

/* Terrassen-Planer */
.planer-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.planer-kopf{position:sticky;top:7rem}
.planer-bild{margin:2.4rem 0 0;width:min(20rem,80%);aspect-ratio:3/3.7;position:relative;overflow:hidden;border-radius:var(--r)}
.planer-bild img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.planer-form{border:1px solid var(--linie-2);border-radius:var(--r);padding:clamp(1.2rem,3vw,2.2rem);background:linear-gradient(180deg,rgba(163,180,177,.05),rgba(163,180,177,0))}
.draufsicht{margin:0 0 1.5rem;border-radius:var(--r-s);background:radial-gradient(120% 90% at 50% 40%,rgba(163,180,177,.09),rgba(163,180,177,0));padding:.4rem}
.draufsicht svg{width:100%;height:auto;overflow:visible}
.d-uk{stroke:var(--schilf);stroke-width:1.2;stroke-dasharray:4 5;opacity:.85}
.d-diele{fill:#c69a69}
.d-diele:nth-child(even){fill:#b98c5c}
.d-rahmen{fill:none;stroke:rgba(238,241,239,.5);stroke-width:1}
.d-mass{stroke:var(--grau-2);stroke-width:1}
.d-mass-text{fill:var(--grau);font-size:13px;font-weight:500}
.planer-felder{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:1rem 1.2rem;align-items:end}
.planer-breite legend{font-size:var(--s-1);font-weight:500;color:var(--grau);margin-bottom:.45rem}
.segment{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--linie-2);border-radius:999px;padding:3px;min-height:3.05rem}
.segment label{position:relative;display:grid}
.segment input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.segment span{display:grid;place-items:center;border-radius:999px;font-weight:600;color:var(--grau);transition:background-color 200ms ease,color 200ms ease;white-space:nowrap;font-size:var(--s-1)}
.segment input:checked+span{background:var(--weiss);color:var(--nacht)}
.segment input:focus-visible+span{outline:2px solid var(--schilf);outline-offset:1px}
.planer-ergebnis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--linie)}
.planer-ergebnis b,.bonus-vergleich b{display:block;font-size:clamp(1.7rem,1.2rem + 1.7vw,2.9rem);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.planer-ergebnis div:first-child b{color:var(--schilf)}
.planer-ergebnis span{display:block;margin-top:.45rem;font-size:var(--s-1);color:var(--grau);line-height:1.35}
.planer-notiz{margin:1.3rem 0 1.2rem;font-size:var(--s-1);color:var(--grau-2)}
@media (max-width:900px){.planer-raster{grid-template-columns:1fr}.planer-kopf{position:static}.planer-bild{display:none}.planer-ergebnis{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.planer-felder{grid-template-columns:1fr 1fr}.planer-breite{grid-column:1/-1}}

/* Handwerkerbonus */
.bonus{background:var(--kohle);border-block:1px solid var(--linie)}
.bonus-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.bonus-regeln{margin:2.2rem 0 0;padding:0;list-style:none;display:grid;gap:.9rem}
.bonus-regeln li{display:flex;gap:.75rem;align-items:flex-start;color:#d5dbd9;max-width:44ch}
.bonus-regeln svg{width:18px;height:18px;flex:none;fill:var(--schilf);margin-top:.25rem}
.bonus-rechner{border-radius:var(--r);padding:clamp(1.3rem,3vw,2.3rem);background:var(--nacht);border:1px solid var(--linie-2)}
.bonus-felder{display:grid;gap:1.2rem}
.bonus-felder output{color:var(--weiss);font-weight:600;font-variant-numeric:tabular-nums}
.bonus-lohn{margin-top:.4rem;color:var(--grau);font-size:var(--s-1)}
.bonus-lohn b{color:var(--weiss);font-weight:600;font-variant-numeric:tabular-nums}
.bonus-vergleich{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.5rem}
.bonus-vergleich>div{border-radius:var(--r-s);padding:1.15rem 1.2rem;display:grid;gap:.5rem;align-content:start}
.bonus-vergleich span{font-size:var(--s-1);font-weight:600}
.bonus-vergleich i{font-style:normal;font-size:.78rem;color:var(--grau)}
.bv-jetzt{background:var(--rot);color:#fff}
.bv-jetzt i{color:rgba(255,255,255,.8)}
.bv-spaeter{border:1px solid var(--linie-2);color:var(--grau)}
.bv-spaeter b{color:var(--weiss)}
.bonus-tipp{margin-top:1.1rem;min-height:1.5em;color:#dfe4e2}
.bonus-tipp b{color:#fff}
.bonus-quelle{margin-top:1.1rem;font-size:.78rem;color:var(--grau-2);line-height:1.5}
.bonus-quelle a{color:var(--grau)}
@media (max-width:900px){.bonus-raster{grid-template-columns:1fr}}
@media (max-width:420px){.bonus-vergleich{grid-template-columns:1fr}}

/* Stimmen */
.stimmen-raster{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.stimmen-zahl{font-size:clamp(5rem,3rem + 7vw,10rem);font-weight:300;letter-spacing:-.07em;line-height:.85}
.sterne{display:flex;gap:.25rem;margin-top:1.1rem;color:var(--rot)}
.sterne svg{width:26px;height:26px;fill:currentColor}
.stimmen-klein{margin-top:.8rem;color:var(--grau);font-size:var(--s-1);max-width:20ch}
.zitat{margin:0;position:relative}
.zitat-zeichen{width:54px;height:54px;fill:var(--rot);margin-bottom:1.2rem}
.zitat blockquote{margin:0}
.zitat blockquote p{font-size:clamp(1.6rem,1.05rem + 2.1vw,3rem);font-weight:400;letter-spacing:-.035em;line-height:1.18;text-wrap:balance;max-width:26ch}
.zitat figcaption{margin-top:1.8rem;display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap}
.zitat figcaption b{font-weight:600}
.zitat figcaption span{color:var(--grau);font-size:var(--s-1)}
.zitat-mehr{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--linie);color:var(--grau);font-size:var(--s-1);max-width:52ch}
.zitat-mehr a{color:var(--weiss)}
@media (max-width:860px){.stimmen-raster{grid-template-columns:1fr}}

/* Anfrage auf hellem Schilfgrund */
.anfrage{background:var(--schilf-hell);color:var(--nacht)}
.anfrage ::selection{background:var(--nacht);color:var(--schilf-hell)}
.anfrage :focus-visible{outline-color:var(--nacht)}
.anfrage .einleitung{color:#4b5854}
.anfrage .leicht{color:var(--schilf-tief)}
.anfrage-raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);margin-top:clamp(2.5rem,5vw,3.5rem);align-items:start}
.notiz-felder{display:grid;gap:1.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;gap:.4rem;min-height:2.6rem;padding:.45rem 1rem;border-radius:999px;border:1px solid rgba(12,14,13,.24);font-size:var(--s-1);font-weight:500;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform 160ms var(--eo)}
.chips input:checked+span{background:var(--nacht);color:#fff;border-color:var(--nacht)}
.chips input:focus-visible+span{outline:2px solid var(--nacht);outline-offset:2px}
.chips label:active span{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.chips input:not(:checked)+span:hover{border-color:var(--nacht);background:rgba(12,14,13,.05)}}
.felder-zwei{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
.anfrage .felder-zwei label,.anfrage .lang{color:#3f4b47;font-weight:500}
.anfrage .felder-zwei input,.anfrage .felder-zwei select,.anfrage .lang textarea{background:#fff;border-color:rgba(12,14,13,.16);color:var(--nacht);caret-color:var(--rot)}
.anfrage input::placeholder,.anfrage textarea::placeholder{color:#7f8b87}
.anfrage .felder-zwei input:focus,.anfrage .felder-zwei select:focus,.anfrage .lang textarea:focus{border-color:var(--nacht);box-shadow:0 0 0 3px rgba(12,14,13,.1)}
.lang textarea{resize:vertical;min-height:7rem;line-height:1.5}
.notiz{position:sticky;top:6rem;background:var(--nacht);color:var(--weiss);border-radius:var(--r);padding:clamp(1.3rem,2.5vw,2rem);box-shadow:0 40px 70px -30px rgba(12,14,13,.5)}
.notiz.tick{animation:tick 380ms var(--eo)}
@keyframes tick{40%{transform:translateY(-3px)}}
.notiz-kopf{display:flex;align-items:center;gap:.75rem;padding-bottom:1rem;border-bottom:1px solid var(--linie)}
.notiz-kopf svg{width:36px;height:33px}
.notiz-kopf b{font-size:var(--s0);font-weight:600;letter-spacing:-.02em}
.notiz dl{margin:.6rem 0 0}
.notiz dl div{display:grid;grid-template-columns:7.4rem 1fr;gap:.8rem;padding:.5rem 0;border-bottom:1px dashed var(--linie-2);font-size:var(--s-1)}
.notiz dt{color:var(--grau)}
.notiz dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.notiz dd.leer{color:var(--grau-2);font-weight:400}
.notiz-tipp{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.1rem;font-size:var(--s-1);color:var(--grau)}
.notiz-tipp svg{width:18px;height:18px;flex:none;fill:var(--schilf);margin-top:.15rem}
.notiz-tasten{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:1.3rem}
.notiz-tasten .taste-rot{grid-column:1/-1}
.notiz-tasten .taste{min-height:2.95rem;font-size:var(--s-1)}
@media (max-width:960px){.anfrage-raster{grid-template-columns:1fr}.notiz{position:static}}
@media (max-width:520px){.felder-zwei{grid-template-columns:1fr}.notiz dl div{grid-template-columns:6.4rem 1fr}}

/* Fragen */
.fragen-raster{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(2rem,6vw,6rem)}
.fragen{border-top:1px solid var(--linie)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.3rem 0;font-weight:500;font-size:var(--s1);letter-spacing:-.025em;line-height:1.3}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";flex:none;width:.7rem;height:.7rem;margin-top:.45rem;border-right:2px solid var(--schilf);border-bottom:2px solid var(--schilf);transform:rotate(45deg);transition:transform 260ms var(--eo)}
.fragen details[open] summary::after{transform:rotate(225deg)}
.fragen p{color:var(--grau);max-width:62ch;padding:0 0 1.5rem}
.fragen p a{color:var(--weiss)}
@media (max-width:860px){.fragen-raster{grid-template-columns:1fr}}

/* Ort, Kontakt und Einsatzgebiet */
.ort{position:relative;overflow:hidden;isolation:isolate}
.ort-bild{position:absolute;inset:0 0 auto;height:min(100svh,52rem);z-index:-1;overflow:hidden}
.ort-bild img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;will-change:transform}
.ort-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--nacht) 4%,rgba(12,14,13,.55) 50%,rgba(12,14,13,.3)),linear-gradient(180deg,var(--nacht),rgba(12,14,13,0) 24%)}
.ort-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);padding:clamp(14rem,30vh,22rem) 0 clamp(4rem,8vw,7rem);align-items:end}
.ort .titel{font-size:var(--s3);max-width:none;letter-spacing:-.055em;line-height:.95}
.ort .einleitung{color:#d6dcda}
.wege{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:2.4rem}
.weg{display:flex;gap:.85rem;align-items:flex-start;padding:1.05rem 1.15rem;border-radius:var(--r);border:1px solid var(--linie-2);background:rgba(12,14,13,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-decoration:none;transition:border-color 220ms ease,transform 160ms var(--eo)}
a.weg:active{transform:scale(.98)}
.weg svg{width:22px;height:22px;fill:var(--schilf);flex:none;margin-top:.1rem}
.weg:first-child svg{fill:var(--rot)}
.weg i{display:block;font-style:normal;font-size:var(--s-1);color:var(--grau)}
.weg b{display:block;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere;line-height:1.35}
.weg-still{opacity:.8}
@media (hover:hover) and (pointer:fine){a.weg:hover{border-color:var(--schilf)}}
.gebiet{border-radius:var(--r);border:1px solid var(--linie-2);background:rgba(12,14,13,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:clamp(1.2rem,2.5vw,1.8rem)}
.gebiet h3{font-size:var(--s1);font-weight:600;letter-spacing:-.025em}
.karte{margin:1rem 0 0}
.karte svg{width:100%;height:auto;overflow:hidden;border-radius:var(--r-s);background:rgba(163,180,177,.04)}
.k-ried{fill:rgba(163,180,177,.1)}
.k-see{fill:rgba(163,180,177,.42)}
.k-see-text{fill:var(--schilf);font-size:12px;font-weight:500;text-anchor:end}
.k-ring{fill:none;stroke:rgba(163,180,177,.35);stroke-width:1;stroke-dasharray:3 5}
.k-ring-text{fill:var(--grau-2);font-size:11px;text-anchor:middle}
.k-orte circle{fill:var(--weiss)}
.k-orte text{fill:#cfd6d3;font-size:13px;font-weight:500}
.k-heim circle{fill:var(--rot)}
.k-heim .k-puls{fill:none;stroke:var(--rot);stroke-width:2;transform-origin:0 0}
.k-heim text{fill:#fff;font-size:14px;font-weight:650}
@media (prefers-reduced-motion:no-preference){.k-heim .k-puls{animation:puls 2.4s var(--eo) infinite}}
@keyframes puls{from{transform:scale(.6);opacity:1}to{transform:scale(2.6);opacity:0}}
.km{margin:1rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:1.4rem}
.km li{display:flex;justify-content:space-between;gap:.6rem;padding:.42rem 0;border-bottom:1px solid var(--linie);font-size:var(--s-1)}
.km span{color:#d2d9d6}
.km b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.km-notiz{margin-top:.9rem;font-size:.72rem;color:var(--grau-2)}
@media (max-width:960px){.ort-in{grid-template-columns:1fr;padding-top:clamp(12rem,40vw,18rem)}}
@media (max-width:520px){.wege{grid-template-columns:1fr}.km{grid-template-columns:1fr}}

/* Fuß */
.fuss{border-top:1px solid var(--linie);padding:3.5rem 0 7rem;color:var(--grau);font-size:var(--s-1)}
.fuss-in{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:2rem;align-items:start}
.fuss a{text-decoration:none}
.fuss a:hover{color:#fff}
.fuss nav{display:flex;gap:1.4rem}
.fuss-ki{margin-top:2.5rem;font-size:.72rem;color:var(--grau-2)}
@media (max-width:860px){.fuss-in{grid-template-columns:1fr}}

/* 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(19,23,21,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--linie-2);transform:translateY(150%);transition:transform 420ms var(--eo)}
.daumen.zeigen{transform:none}
.daumen a{white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.9rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.88rem}
.daumen svg{width:17px;height:17px;fill:currentColor}
.daumen .rot{background:var(--rot);color:#fff}
@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}

/* Ohne Bewegung */
.ruhig .buehne{height:auto!important}
.ruhig .buehne-fix{position:relative;height:auto;overflow:visible}
.ruhig .film{inset:0 0 auto;height:100svh}
.ruhig .verlauf{height:100svh;bottom:auto}
.ruhig .buehne-text{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:6rem}
.ruhig .dimm,.ruhig .aufbau,.ruhig .film-ziel,.ruhig .buehne-ende,.ruhig .ablauf-balken,.ruhig .buehne-fakten{display:none}
.ruhig .ablauf{position:relative;bottom:auto;opacity:1;padding:3rem 0;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2rem}
.ruhig .ablauf li{display:block;opacity:1}
.ruhig .ablauf span{max-height:none;margin-top:.5rem}
.ruhig .ablauf b{font-size:var(--s1)}
.ruhig .zeigt{opacity:1;transform:none}