/* =============================================================================
   Lichtwerk Wintergärten — Konzeptstudie (fiktives Unternehmen)
   Gemeinsames Blatt für alle Seiten. Keine fremden Server, keine Frameworks.

   Farbe:  Weiß / Papierweiß · Anthrazit · ein Akzent: Messing
   Schrift: Host Grotesk (variabel, wght 300–800) · DM Mono für Maße
   ========================================================================== */

@font-face{
  font-family:'Host Grotesk';
  font-style:normal; font-display:swap;
  font-weight:300 800;
  src:url('../fonts/host-grotesk-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face{
  font-family:'DM Mono';
  font-style:normal; font-display:swap; font-weight:400;
  src:url('../fonts/dm-mono-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'DM Mono';
  font-style:normal; font-display:swap; font-weight:500;
  src:url('../fonts/dm-mono-latin-500-normal.woff2') format('woff2');
}

/* ---------- Tokens: hell ist die Hauptfassung ---------- */
:root{
  color-scheme:light;

  --weiss:#FFFFFF;
  --papier:#F8F9FA;
  --flaeche:#FFFFFF;
  --tinte:#1E232A;
  --gedaempft:#5B6470;
  --linie:#E4E7EB;
  --linie-stark:#CFD5DC;
  --messing:#8A6A3B;
  --messing-hell:#B08A4F;
  --dunkelfeld:#1E232A;
  --dunkelfeld-text:#EDEFF2;
  --dunkelfeld-gedaempft:#A9B1BC;

  --schatten-klein:0 1px 2px rgba(30,35,42,.05);
  --schatten:0 1px 2px rgba(30,35,42,.05), 0 24px 48px -32px rgba(30,35,42,.35);
  --schatten-hoch:0 2px 4px rgba(30,35,42,.06), 0 40px 80px -40px rgba(30,35,42,.42);
  --bild-filter:none;

  --r:16px;
  --r-klein:10px;
  --rand:clamp(20px,5vw,56px);
  --breite:1320px;
  --kopfhoehe:62px;
  --luft:clamp(72px,9vw,132px);

  --schrift:'Host Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

/* ---------- Tokens: dunkel. Ruhiger Zwilling, keine Umkehrung ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="hell"]){
    color-scheme:dark;
    --weiss:#14171B;
    --papier:#1A1E24;
    --flaeche:#1B1F26;
    --tinte:#E9ECF0;
    --gedaempft:#A6AEB9;
    --linie:#2B313A;
    --linie-stark:#3A424D;
    --messing:#C9A468;
    --messing-hell:#DCBB84;
    --dunkelfeld:#101317;
    --dunkelfeld-text:#E9ECF0;
    --dunkelfeld-gedaempft:#9AA3AE;
    --schatten-klein:0 1px 2px rgba(0,0,0,.4);
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 24px 48px -32px rgba(0,0,0,.8);
    --schatten-hoch:0 2px 4px rgba(0,0,0,.45), 0 40px 80px -40px rgba(0,0,0,.9);
    --bild-filter:brightness(.9) contrast(1.02) saturate(.94);
  }
}
:root[data-theme="dunkel"]{
  color-scheme:dark;
  --weiss:#14171B;
  --papier:#1A1E24;
  --flaeche:#1B1F26;
  --tinte:#E9ECF0;
  --gedaempft:#A6AEB9;
  --linie:#2B313A;
  --linie-stark:#3A424D;
  --messing:#C9A468;
  --messing-hell:#DCBB84;
  --dunkelfeld:#101317;
  --dunkelfeld-text:#E9ECF0;
  --dunkelfeld-gedaempft:#9AA3AE;
  --schatten-klein:0 1px 2px rgba(0,0,0,.4);
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 24px 48px -32px rgba(0,0,0,.8);
  --schatten-hoch:0 2px 4px rgba(0,0,0,.45), 0 40px 80px -40px rgba(0,0,0,.9);
  --bild-filter:brightness(.9) contrast(1.02) saturate(.94);
}

@media (min-width:900px){ :root{ --kopfhoehe:78px } }

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--weiss);
  color:var(--tinte);
  font-family:var(--schrift);
  font-size:1.0625rem;
  line-height:1.65;
  font-variation-settings:'wght' 400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-variation-settings:'wght' 550;letter-spacing:-.025em;line-height:1.04;text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
h1{font-size:clamp(2.3rem,6.2vw,5rem);line-height:.98;letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,3.9vw,3.15rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.5rem);font-variation-settings:'wght' 560;letter-spacing:-.018em}
h4{font-size:1.0625rem;font-variation-settings:'wght' 560}
p{margin:0;hyphens:auto}
ul,ol{margin:0;padding:0;list-style:none}
li,dd,dt,td,th{hyphens:auto;overflow-wrap:break-word}
:where(section,div,article,li,dd,dt,figure)>*{min-width:0}

::selection{background:var(--messing);color:#fff}
:focus-visible{outline:2px solid var(--messing);outline-offset:3px;border-radius:2px}
[id]{scroll-margin-top:calc(var(--kopfhoehe) + 28px)}

.mass{width:min(100% - 2*var(--rand),var(--breite));margin-inline:auto}
.eng{max-width:64ch}
.nur-lesbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kleinschrift für Maße, Kennwerte, Marken — nie als Zeile über einer Überschrift */
.mono{
  font-family:var(--mono);font-weight:500;
  font-size:.75rem;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gedaempft);
}
.lead{font-size:clamp(1.0625rem,1.35vw,1.25rem);color:var(--gedaempft);max-width:58ch}

/* ---------- Plakette Konzeptstudie ---------- */
.studienband{
  background:var(--dunkelfeld);color:var(--dunkelfeld-text);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;
}
.studienband .mass{display:flex;gap:10px 18px;align-items:center;flex-wrap:wrap;padding:9px 0}
.studienband b{
  color:var(--dunkelfeld);background:var(--messing-hell);
  padding:2px 9px;border-radius:100px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
}
.studienband span{color:var(--dunkelfeld-gedaempft)}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--weiss) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--linie);
}
.kopf .mass{display:flex;align-items:center;gap:14px;min-height:var(--kopfhoehe)}
.marke{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;padding:6px 0}
.marke-zeichen{width:26px;height:26px;color:var(--messing);flex:none}
.marke-text{display:flex;flex-direction:column;line-height:1.05}
.marke-text b{font-variation-settings:'wght' 600;font-weight:400;font-size:1.0625rem;letter-spacing:.11em;text-transform:uppercase}
.marke-text span{display:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gedaempft);margin-top:3px}
@media (min-width:480px){ .marke-text span{display:block} }
.navi{display:none;gap:4px;align-items:center}
.navi a{
  text-decoration:none;padding:10px 13px;border-radius:var(--r-klein);
  font-size:.9375rem;color:var(--gedaempft);transition:color .18s,background-color .18s;
}
.navi a:hover{color:var(--tinte);background:var(--papier)}
.navi a[aria-current="page"]{color:var(--tinte);background:var(--papier)}
.kopf-rechts{display:flex;align-items:center;gap:8px}

.knopf,.knopf-still{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 22px;border-radius:100px;
  font:inherit;font-size:.9375rem;font-variation-settings:'wght' 560;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background-color .2s,color .2s,border-color .2s,box-shadow .25s,transform .2s;
}
.knopf{background:var(--tinte);color:var(--weiss);box-shadow:0 0 0 0 rgba(176,138,79,0)}
.knopf:hover{box-shadow:0 0 0 5px color-mix(in srgb,var(--messing) 22%,transparent);transform:translateY(-1px)}
.knopf-still{background:transparent;color:var(--tinte);border-color:var(--linie-stark)}
.knopf-still:hover{border-color:var(--messing);color:var(--messing)}
.kopf .knopf{display:none}

.schalter{
  width:46px;height:46px;border-radius:100px;border:1px solid var(--linie);
  background:transparent;color:var(--tinte);cursor:pointer;
  display:grid;place-items:center;flex:none;transition:border-color .2s,color .2s;
}
.schalter:hover{border-color:var(--messing);color:var(--messing)}
.schalter svg{width:19px;height:19px}
:root[data-theme="dunkel"] .ikone-sonne,:root[data-theme="hell"] .ikone-mond{display:none}
:root:not([data-theme]) .ikone-mond{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .ikone-mond{display:block}
  :root:not([data-theme]) .ikone-sonne{display:none}
}

.klapp{width:46px;height:46px;border:1px solid var(--linie);border-radius:100px;background:transparent;color:var(--tinte);display:grid;place-items:center;cursor:pointer}
.klapp svg{width:20px;height:20px}
.klapp-menue{
  display:none;border-top:1px solid var(--linie);background:var(--weiss);
}
.klapp-menue.offen{display:block}
.klapp-menue ul{padding:14px 0 22px}
.klapp-menue a{
  display:flex;align-items:center;min-height:52px;text-decoration:none;
  font-size:1.1875rem;font-variation-settings:'wght' 520;
  border-bottom:1px solid var(--linie);
}
.klapp-menue li:last-child a{border-bottom:0}
.klapp-menue .knopf{margin-top:16px;width:100%}
@media (min-width:900px){
  .navi{display:flex}
  .kopf .knopf{display:inline-flex}
  .klapp,.klapp-menue{display:none}
}

/* ---------- Hero: Foto in voller Breite, weißes Blatt hineingeschoben ---------- */
.hero{position:relative;background:var(--papier)}
.hero-bild{position:relative;overflow:hidden}
.hero-bild img{
  width:100%;height:clamp(340px,58svh,560px);object-fit:cover;object-position:50% 62%;
  filter:var(--bild-filter);
  animation:ruhe 26s ease-out forwards;
}
@keyframes ruhe{from{transform:scale(1.045)}to{transform:scale(1)}}
.hero-blatt{
  position:relative;z-index:2;
  background:var(--flaeche);border-radius:var(--r);
  padding:clamp(26px,5vw,44px);
  margin:-56px auto 0;width:min(100% - 2*var(--rand),var(--breite));
  box-shadow:var(--schatten-hoch);
}
.hero-blatt h1{max-width:12ch}
.hero-blatt .lead{margin-top:20px;max-width:46ch}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-fakten{
  display:grid;gap:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--linie);
}
.hero-fakten li{display:grid;grid-template-columns:5.9rem minmax(0,1fr);gap:12px;align-items:baseline}
.hero-fakten b{font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--messing);white-space:nowrap}
.hero-fakten span{font-size:.9375rem;color:var(--gedaempft)}
@media (min-width:760px){
  .hero{padding-bottom:0}
  .hero-bild img{height:clamp(520px,86svh,860px);object-position:50% 58%}
  .hero-blatt{
    position:absolute;left:var(--rand);bottom:clamp(28px,5vh,64px);margin:0;
    width:min(520px,64vw);
  }
  .hero-fakten{grid-template-columns:1fr;gap:10px}
}
@media (min-width:1180px){
  .hero-blatt{width:600px;left:max(var(--rand),calc((100vw - var(--breite))/2))}
}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:var(--luft) 0}
.abschnitt.papier{background:var(--papier)}
.kopfzeile{display:grid;gap:18px;margin-bottom:clamp(36px,4.6vw,64px)}
.kopfzeile h2{max-width:18ch}
@media (min-width:960px){
  .kopfzeile{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:end}
}

/* ---------- Konfigurator ---------- */
.konf{display:grid;gap:28px}
@media (min-width:1000px){ .konf{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:44px;align-items:start} }

.feld{margin-bottom:34px}
.feld > .mono{display:block;margin-bottom:14px;color:var(--tinte)}
.wahl{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.wahl label{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:16px 16px 18px;border:1px solid var(--linie);border-radius:var(--r-klein);
  background:var(--flaeche);cursor:pointer;min-height:44px;
  transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.wahl label:hover{border-color:var(--linie-stark)}
.wahl input{position:absolute;opacity:0;width:1px;height:1px}
.wahl input:focus-visible + .wahl-inhalt{outline:2px solid var(--messing);outline-offset:6px;border-radius:4px}
.wahl label:has(input:checked){border-color:var(--messing);box-shadow:inset 0 0 0 1px var(--messing)}
.wahl-inhalt{display:flex;flex-direction:column;gap:9px}
.wahl-inhalt svg{width:100%;height:56px;color:var(--tinte);opacity:.85}
.wahl-inhalt b{font-variation-settings:'wght' 560;font-weight:400;font-size:1rem;line-height:1.25}
.wahl-inhalt small{font-size:.9375rem;color:var(--gedaempft);line-height:1.4}
.wahl.reihe{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.wahl.reihe .wahl-inhalt{gap:5px}

.regler-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.regler-wert{font-family:var(--mono);font-weight:500;font-size:1.0625rem;color:var(--tinte);letter-spacing:.02em}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;background:transparent;
  height:44px;margin:0;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--linie-stark);border-radius:2px}
input[type=range]::-moz-range-track{height:3px;background:var(--linie-stark);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--tinte);border:4px solid var(--flaeche);box-shadow:0 0 0 1px var(--linie-stark);
  margin-top:-11px;transition:background-color .2s;
}
input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--tinte);
  border:4px solid var(--flaeche);box-shadow:0 0 0 1px var(--linie-stark);
}
input[type=range]:hover::-webkit-slider-thumb{background:var(--messing)}
input[type=range]:hover::-moz-range-thumb{background:var(--messing)}
.regler-skala{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.75rem;color:var(--gedaempft);letter-spacing:.08em}

.ergebnis{
  background:var(--dunkelfeld);color:var(--dunkelfeld-text);
  border-radius:var(--r);padding:clamp(24px,3.4vw,36px);position:relative;overflow:hidden;
}
.ergebnis .mono{color:var(--messing-hell)}
.ergebnis-preis{
  font-size:clamp(1.85rem,3.4vw,2.7rem);font-variation-settings:'wght' 560;
  letter-spacing:-.03em;line-height:1.06;margin:12px 0 4px;
}
.ergebnis-zeile{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-top:1px solid rgba(255,255,255,.13)}
.ergebnis-zeile dt{color:var(--dunkelfeld-gedaempft);font-size:.9375rem}
.ergebnis-zeile dd{margin:0;font-family:var(--mono);font-weight:500;font-size:.9375rem;text-align:right}
.ergebnis-liste{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13);display:grid;gap:9px}
.ergebnis-liste li{display:flex;gap:10px;font-size:.9375rem;color:var(--dunkelfeld-gedaempft);line-height:1.5}
.ergebnis-liste svg{width:15px;height:15px;flex:none;margin-top:5px;color:var(--messing-hell)}
.ergebnis-hinweis{margin-top:22px;font-size:.8125rem;color:var(--dunkelfeld-gedaempft);line-height:1.55}
.ergebnis .knopf{margin-top:22px;width:100%;background:var(--messing-hell);color:#1B1408}
@media (min-width:1000px){ .ergebnis{position:sticky;top:calc(var(--kopfhoehe) + 24px)} }

/* ---------- Bento ---------- */
.bento{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.karte{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.karte:hover{border-color:var(--linie-stark);box-shadow:var(--schatten);transform:translateY(-2px)}
.karte-bild{position:relative;overflow:hidden;background:var(--papier)}
.karte-bild img{width:100%;height:100%;object-fit:cover;filter:var(--bild-filter);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.karte:hover .karte-bild img{transform:scale(1.03)}
.karte-koerper{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:14px;flex:1}
.karte-koerper p{font-size:.9375rem;color:var(--gedaempft)}
.kennwerte{display:grid;gap:0;border-top:1px solid var(--linie)}
.kennwerte div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--linie)}
.kennwerte dt{font-size:.8125rem;color:var(--gedaempft)}
.kennwerte dd{margin:0;font-family:var(--mono);font-weight:500;font-size:.8125rem;text-align:right;letter-spacing:.01em}
.merkmale{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.merkmale li{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--linie);border-radius:100px;padding:6px 12px 6px 9px;
  font-size:.8125rem;color:var(--gedaempft);
}
.merkmale svg{width:16px;height:16px;flex:none;color:var(--messing)}
.karte-bild{aspect-ratio:16/10}
@media (min-width:640px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .karte.breit{grid-column:span 2}
  .karte.breit .karte-bild{aspect-ratio:21/9}
  .karte.schmal .karte-bild{aspect-ratio:4/3}
}
@media (min-width:1080px){
  .bento{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .karte.breit .karte-bild{aspect-ratio:16/9}
}

/* ---------- Bildzäsur über die volle Breite ---------- */
.zaesur{position:relative;overflow:hidden}
.zaesur img{width:100%;height:clamp(300px,52vh,600px);object-fit:cover;filter:var(--bild-filter)}
.zaesur figcaption{
  position:absolute;left:var(--rand);bottom:clamp(20px,4vh,40px);
  background:var(--flaeche);border-radius:var(--r-klein);padding:18px 22px;
  max-width:min(440px,calc(100% - 2*var(--rand)));box-shadow:var(--schatten);
}
.zaesur figcaption p{font-size:.9375rem;color:var(--gedaempft);margin-top:6px}
.zaesur figcaption b{font-variation-settings:'wght' 560;font-weight:400;font-size:1.0625rem}

/* ---------- Vorher/Nachher ---------- */
.va{
  --p:50;
  position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:1400/781;background:var(--papier);
  touch-action:pan-y;user-select:none;cursor:ew-resize;
  box-shadow:var(--schatten);
}
.va img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--bild-filter)}
.va .va-vorher{clip-path:inset(0 calc(100% - var(--p)*1%) 0 0)}
.va-griff{
  position:absolute;top:0;bottom:0;left:calc(var(--p)*1%);width:3px;
  background:var(--messing-hell);transform:translateX(-1.5px);
  cursor:ew-resize;touch-action:none;
}
.va-griff::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:48px;transform:translateX(-50%);
}
.va-knauf{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:var(--messing-hell);
  color:#1B1408;display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.32);
}
.va-knauf svg{width:24px;height:24px}
.va-griff:focus-visible{outline:none}
.va-griff:focus-visible .va-knauf{outline:3px solid var(--tinte);outline-offset:3px}
.va-marke{
  position:absolute;bottom:14px;
  font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(20,23,27,.72);color:#fff;padding:6px 11px;border-radius:100px;
  backdrop-filter:blur(6px);pointer-events:none;
}
.va-links{left:14px}
.va-rechts{right:14px}
.va-hinweis{margin-top:14px;font-size:.8125rem;color:var(--gedaempft)}

.projekt{display:grid;gap:30px}
@media (min-width:900px){ .projekt{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:44px;align-items:start} }
.projekt-unten{display:grid;gap:28px;margin-top:clamp(34px,4vw,56px)}
@media (min-width:820px){
  .projekt-unten{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.4vw,52px);align-items:start}
}
.projekt-daten{display:grid;gap:0;border-top:1px solid var(--linie)}
.projekt-daten div{padding:14px 0;border-bottom:1px solid var(--linie);display:flex;justify-content:space-between;gap:16px}
.projekt-daten dt{font-size:.9375rem;color:var(--gedaempft)}
.projekt-daten dd{margin:0;font-family:var(--mono);font-weight:500;font-size:.8125rem;text-align:right}

/* ---------- Ablauf: vier Blätter, Fortschritt als Messingkante ---------- */
.schritte{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.schritt{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
  padding:clamp(22px,2.4vw,28px);position:relative;display:flex;flex-direction:column;gap:14px;
}
.schritt::before{
  content:"";position:absolute;top:0;left:0;height:3px;background:var(--messing);
  border-radius:var(--r) 0 0 0;width:var(--fort,25%);
}
.schritt h3{margin-top:4px}
.schritt p{font-size:.9375rem;color:var(--gedaempft)}
.rollen{display:grid;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--linie)}
.rollen div{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline}
.rollen b{font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--messing)}
.rollen span{font-size:.9375rem;color:var(--gedaempft);line-height:1.5}

/* ---------- Formular ---------- */
.kontakt-lage{display:grid;gap:32px}
@media (min-width:980px){
  .kontakt-lage{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:start}
  .kontaktkarte{position:sticky;top:calc(var(--kopfhoehe) + 24px)}
}
.formular{display:grid;gap:20px}
.zeile2{display:grid;gap:20px}
@media (min-width:560px){ .zeile2{grid-template-columns:1fr 1fr} }
label.stapel{display:flex;flex-direction:column;gap:8px}
label.stapel > span{font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gedaempft)}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  font:inherit;font-size:1rem;color:var(--tinte);background:var(--flaeche);
  border:1px solid var(--linie-stark);border-radius:var(--r-klein);
  padding:13px 14px;min-height:48px;width:100%;
  transition:border-color .2s,box-shadow .2s;
}
textarea{min-height:130px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--messing);box-shadow:0 0 0 3px color-mix(in srgb,var(--messing) 18%,transparent)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}

.datei{
  position:relative;
  border:1px dashed var(--linie-stark);border-radius:var(--r-klein);padding:18px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--flaeche);
}
.datei-knopf{
  display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;
  border:1px solid var(--linie-stark);border-radius:100px;cursor:pointer;font-size:.9375rem;
  transition:border-color .2s,color .2s;
}
.datei-knopf:hover{border-color:var(--messing);color:var(--messing)}
.datei-knopf svg{width:17px;height:17px}
.datei input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.datei input[type=file]:focus-visible + .datei-knopf{outline:2px solid var(--messing);outline-offset:3px}
.datei-info{font-size:.8125rem;color:var(--gedaempft);line-height:1.5;flex:1;min-width:150px}
.datei-vorschau{display:none;width:82px;height:62px;border-radius:8px;object-fit:cover;border:1px solid var(--linie)}
.datei-vorschau.da{display:block}

.termin{display:grid;gap:14px;border:1px solid var(--linie);border-radius:var(--r-klein);padding:20px;background:var(--papier)}
.termin-zeile{display:grid;gap:20px}
@media (min-width:620px){ .termin-zeile{grid-template-columns:210px minmax(0,1fr)} }
.zeitfenster{display:flex;flex-wrap:wrap;gap:10px}
.zeitfenster label{
  position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid var(--linie-stark);border-radius:100px;cursor:pointer;font-size:.9375rem;background:var(--flaeche);
  transition:border-color .2s,color .2s;
}
.zeitfenster label:has(input:checked){border-color:var(--messing);color:var(--messing);box-shadow:inset 0 0 0 1px var(--messing)}
.zeitfenster input{position:absolute;opacity:0;width:1px;height:1px}
.zeitfenster input:focus-visible + span{outline:2px solid var(--messing);outline-offset:8px;border-radius:2px}

.dsgvo{display:flex;gap:11px;align-items:flex-start;font-size:.9375rem;color:var(--gedaempft);line-height:1.5}
.dsgvo input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--messing);flex:none}
.quittung{
  display:none;border:1px solid var(--messing);border-radius:var(--r-klein);
  padding:20px;background:var(--papier);
}
.quittung.da{display:block}
.quittung h3{margin-bottom:10px;font-size:1.1875rem}
.quittung dl{display:grid;gap:6px;margin:0}
.quittung dl div{display:flex;gap:12px;font-size:.9375rem}
.quittung dt{color:var(--gedaempft);min-width:110px}
.quittung dd{margin:0;font-family:var(--mono);font-weight:500;font-size:.8125rem}
.quittung p{margin-top:14px;font-size:.9375rem;color:var(--gedaempft)}

.kontaktkarte{
  background:var(--dunkelfeld);color:var(--dunkelfeld-text);
  border-radius:var(--r);padding:clamp(26px,3.2vw,36px);
}
.kontaktkarte h3{margin-bottom:18px}
.kontaktkarte a{color:var(--messing-hell);text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap}
.kontaktkarte .block{padding:16px 0;border-top:1px solid rgba(255,255,255,.13)}
.kontaktkarte .block:first-of-type{border-top:0;padding-top:0}
.kontaktkarte .mono{color:var(--messing-hell);display:block;margin-bottom:7px}
.kontaktkarte p,.kontaktkarte li{font-size:.9375rem;color:var(--dunkelfeld-gedaempft);line-height:1.6}
.kontaktkarte strong{color:var(--dunkelfeld-text);font-weight:400;font-variation-settings:'wght' 560}

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf{padding:clamp(48px,6.5vw,92px) 0 clamp(30px,4vw,52px);border-bottom:1px solid var(--linie)}
.seitenkopf h1{max-width:16ch}
.seitenkopf .lead{margin-top:22px}
.seitenkopf .pfad{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gedaempft);margin-bottom:22px}
.seitenkopf .pfad a{color:inherit;text-decoration:none}
.seitenkopf .pfad a:hover{color:var(--messing)}

/* ---------- Textblöcke ---------- */
.fliess{max-width:68ch;display:grid;gap:18px}
.fliess p{color:var(--gedaempft)}
.fliess h2{margin-top:22px}
.fliess h3{margin-top:16px}
.fliess strong{color:var(--tinte);font-weight:400;font-variation-settings:'wght' 580}
.fliess a{color:var(--messing)}
.fliess ul{display:grid;gap:9px}
.fliess ul li{padding-left:20px;position:relative;color:var(--gedaempft)}
.fliess ul li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--messing)}

.tabelle{width:100%;border-collapse:collapse;font-size:.9375rem}
.tabelle th,.tabelle td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle thead th{font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gedaempft)}
.tabelle tbody th{font-weight:400;font-variation-settings:'wght' 560}
.tabelle td:last-child,.tabelle thead th:last-child{padding-right:0;text-align:right;font-family:var(--mono);font-size:.8125rem}

.zweispalt{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:900px){ .zweispalt{grid-template-columns:1fr 1fr} }

.reihe-bild{display:grid;gap:26px;align-items:center}
.reihe-bild img{width:100%;border-radius:var(--r);filter:var(--bild-filter)}
@media (min-width:900px){
  .reihe-bild{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
  .reihe-bild.gedreht > figure{order:2}
}

/* ---------- Zeichnungen ---------- */
.schnitt,.plan{width:100%;height:auto;color:var(--tinte)}
.schnitt text,.plan text{
  font-family:var(--mono);font-weight:500;fill:currentColor;
  paint-order:stroke;stroke:var(--flaeche);stroke-width:5px;stroke-linejoin:round;
}
.abschnitt.papier .schnitt text,.abschnitt.papier .plan text{stroke:var(--papier)}
.schnitt-mono{letter-spacing:.04em}

.frage{padding:24px 0;border-top:1px solid var(--linie)}
.frage h3{margin-bottom:10px;font-size:1.1875rem}
.frage p{color:var(--gedaempft);max-width:70ch;font-size:.9375rem}

.aufruf{
  background:var(--dunkelfeld);color:var(--dunkelfeld-text);border-radius:var(--r);
  padding:clamp(30px,5vw,60px);display:grid;gap:26px;align-items:center;
}
.aufruf h2{max-width:16ch}
.aufruf p{color:var(--dunkelfeld-gedaempft);max-width:48ch}
.aufruf .knopf{background:var(--messing-hell);color:#1B1408}
.aufruf .knopf-still{color:var(--dunkelfeld-text);border-color:rgba(255,255,255,.28)}
.aufruf .knopf-still:hover{border-color:var(--messing-hell);color:var(--messing-hell)}
.aufruf-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:860px){ .aufruf{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)} }

/* ---------- Fuß ---------- */
.fuss{background:var(--papier);border-top:1px solid var(--linie);padding:clamp(48px,6vw,80px) 0 32px}
.fuss-gitter{display:grid;gap:34px}
@media (min-width:760px){ .fuss-gitter{grid-template-columns:1.4fr 1fr 1fr} }
.fuss h3{margin-bottom:14px;font-size:1.0625rem;font-variation-settings:'wght' 560;letter-spacing:-.01em}
.fuss ul{display:grid;gap:9px}
.fuss li,.fuss p{font-size:.9375rem;color:var(--gedaempft);line-height:1.6}
.fuss a{color:var(--gedaempft);text-decoration:none}
.fuss a:hover{color:var(--messing)}
.fuss a[href^="tel:"]{white-space:nowrap}
.fuss-unten{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 40px;
  font-size:.8125rem;color:var(--gedaempft);
}
.fuss .marke-text b{color:var(--tinte)}

/* ---------- Einblenden ---------- */
.auf{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.auf.gezeigt{opacity:1;transform:none}
.auf:nth-child(2){transition-delay:.06s}
.auf:nth-child(3){transition-delay:.12s}
.auf:nth-child(4){transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .auf{opacity:1;transform:none}
  .hero-bild img{animation:none}
}