/* ============================================================
   Tischlerei Scholz Moers — Stylesheet
   Farben aus der Fahrzeugbeschriftung: Anthrazit, Eiche, Warmgrau
   ============================================================ */

:root{
  --tinte:#141413;
  --tinte-weich:#242422;
  --tinte-80:#3A3936;
  --tinte-60:#5F5E5A;
  --papier:#F3EFE9;
  --flaeche:#FFFFFF;
  --linie:#DCD6CC;
  --linie-hell:#EBE6DE;
  --grau:#9C9A95;
  --eiche:#C89A5E;
  --eiche-dunkel:#8A6222;
  --eiche-hell:#F0E4D2;
  --kalt:#8FB4C4;
  --sanft:cubic-bezier(.22,.61,.36,1);
  --sans:"Archivo","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --breit:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--flaeche);color:var(--tinte);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--eiche);outline-offset:3px}

.huelle{max-width:var(--breit);margin:0 auto;padding:0 24px}
.huelle--schmal{max-width:800px}
section{padding:84px 0}
.papier{background:var(--papier)}
.dunkel{background:var(--tinte);color:#E6E6E5}
.dunkel h2,.dunkel h3{color:#fff}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{letter-spacing:-.02em;font-weight:700;margin:0 0 14px;line-height:1.14}
h1{font-size:clamp(32px,5vw,54px);letter-spacing:-.03em;font-weight:800}
h2{font-size:clamp(27px,3.7vw,41px)}
h3{font-size:20px;letter-spacing:-.01em;line-height:1.3}
h4{font-size:17px}
p{margin:0 0 18px}
.u-mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.eyebrow{color:var(--eiche-dunkel);font-weight:600;margin:0 0 12px;display:block}
.dunkel .eyebrow{color:var(--eiche)}
.lead{font-size:19px;color:var(--tinte-60);max-width:62ch}
.dunkel .lead{color:#C9C6C0}
.kopfblock{max-width:62ch;margin-bottom:44px}
.fliess{max-width:70ch}
.fliess h3{margin-top:34px}
.fliess ul{padding-left:0;list-style:none;margin:0 0 22px}
.fliess ul li{position:relative;padding-left:26px;margin-bottom:9px}
.fliess ul li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:9px;background:var(--eiche);transform:skewX(-14deg)}

/* ---------- Knöpfe ---------- */
.btn,.btn-hell,.btn-linie{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px;
  padding:15px 27px;border-radius:2px;text-decoration:none;border:1px solid transparent;
}
.btn{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.btn:hover{background:#000}
.btn-hell{background:var(--eiche);color:var(--tinte);border-color:var(--eiche)}
.btn-hell:hover{background:#D9AA6C}
.btn-linie{background:transparent;color:inherit;border-color:currentColor}
.btn-linie:hover{background:rgba(200,154,94,.14)}
.pfeil{width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);flex:0 0 auto}
.aktionen{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

/* ---------- Kopfzeile ---------- */
.oben{background:var(--tinte);color:#C9C6C0;font-size:13.5px}
.oben .huelle{display:flex;justify-content:space-between;gap:18px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.oben b{color:var(--eiche)}
.oben a{text-decoration:none}

header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);border-bottom:1px solid var(--linie)}
header .huelle{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px;position:relative}
.logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.logo__marke{height:34px;width:auto;display:block}

/* ---------- Desktop-Navigation ---------- */
.nav{margin-left:auto;display:flex;gap:20px;align-items:center;min-width:0}
/* ACHTUNG: nicht ".nav a" mit color/padding belegen, ohne .btn auszunehmen —
   der Element-Selektor schlaegt sonst die Knopfklasse (schwarz auf schwarz). */
.nav a:not(.btn){text-decoration:none;font-size:15.5px;font-weight:500;padding:7px 0;white-space:nowrap;
  position:relative;color:var(--tinte)}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--eiche);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--sanft)}
.nav a:not(.btn):hover::after,.nav a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}
.nav a:not(.btn)[aria-current="page"]{font-weight:600}
.nav .btn{padding:11px 19px;font-size:15px;color:#fff;background:var(--tinte);border-color:var(--tinte)}
.nav .btn:hover{background:#000;color:#fff}


.menue{display:none;background:none;border:1px solid var(--linie);border-radius:2px;padding:11px 12px;margin-left:auto}
.menue span{display:block;width:20px;height:2px;background:var(--tinte);margin:4px 0;transition:transform .25s var(--sanft),opacity .2s}
.menue[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menue[aria-expanded="true"] span:nth-child(2){opacity:0}
.menue[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Mobile Schublade ---------- */
.schublade{display:none}
.schublade.offen{display:block;position:fixed;inset:0;z-index:200;background:var(--flaeche);overflow-y:auto;-webkit-overflow-scrolling:touch}
.schublade__kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--linie);position:sticky;top:0;background:rgba(255,255,255,.97);z-index:2}
.schublade__zu{background:none;border:1px solid var(--linie);border-radius:2px;padding:9px;line-height:0;color:var(--tinte)}
.schublade__zu svg{width:20px;height:20px;display:block}
.lade__inhalt{padding:0 20px 48px}

.schublade.offen .lade__ruf,
.schublade.offen .lade__gruppe,
.schublade.offen .lade__fuss{opacity:0;transform:translateY(12px);
  animation:ladeAuf .42s var(--sanft) forwards;animation-delay:calc(60ms + var(--i,0) * 28ms)}
.schublade.offen .lade__punkt{opacity:0;animation:ladeAuf .38s var(--sanft) forwards;
  animation-delay:calc(90ms + var(--i,0) * 34ms)}
@keyframes ladeAuf{to{opacity:1;transform:none}}

.lade__ruf{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  background:var(--tinte);color:#fff;border-radius:12px;padding:16px 18px;margin:18px 0 26px;
  position:relative;overflow:hidden}
.lade__ruf::after{content:"";position:absolute;top:0;right:-30px;width:110px;height:100%;
  background:var(--eiche);transform:skewX(-16deg);opacity:.9}
.lade__ruf-tel{text-decoration:none;color:#fff;position:relative;z-index:2;min-width:0}
.lade__ruf-tel .u-mono{color:var(--eiche);display:block;margin-bottom:3px}
.lade__ruf-tel b{font-size:21px;letter-spacing:-.01em;display:block}
.lade__ruf-btn{position:relative;z-index:2;padding:12px 18px;font-size:15px;white-space:nowrap}

.lade__gruppe{margin-bottom:26px}
.lade__titel{color:var(--eiche-dunkel);margin:0 0 10px;font-weight:600}
.lade__punkt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:13px 4px;text-decoration:none;border-bottom:1px solid var(--linie-hell);color:inherit}
.lade__punkt:last-child{border-bottom:none}
.lade__punkt:active{background:var(--papier)}
.lade__sym{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:var(--eiche-hell);
  color:var(--eiche-dunkel);display:flex;align-items:center;justify-content:center}
.lade__sym svg{width:20px;height:20px}
.lade__punkt[aria-current="page"] .lade__sym{background:var(--eiche);color:var(--tinte)}
.lade__text{min-width:0}
.lade__text b{display:block;font-size:17px;font-weight:600;line-height:1.25}
.lade__text small{display:block;font-size:13.5px;color:var(--tinte-60);line-height:1.4;margin-top:1px}
.lade__pfeil{width:8px;height:8px;border-right:2px solid var(--linie);border-top:2px solid var(--linie);
  transform:rotate(45deg);flex:0 0 auto}
.lade__punkt:hover .lade__pfeil{border-color:var(--eiche)}

.lade__fuss{border-top:1px solid var(--linie);padding-top:22px}
.lade__notiz{font-size:13.5px;color:var(--tinte-60);margin:16px 0 0;line-height:1.6}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--tinte);color:#fff;overflow:hidden}
.hero__bild{position:absolute;inset:0}
.hero__bild img{width:100%;height:100%;object-fit:cover}
/* Das Bild bleibt voll deckend (sonst mischt es sich mit dem dunklen Grund und
   wird stumpf). Abgedunkelt wird nur durch den Schleier darueber: links dicht
   fuer die Lesbarkeit der Ueberschrift, nach rechts hin duenner. */
.hero__bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(20,20,19,.74) 0%,rgba(20,20,19,.66) 46%,rgba(20,20,19,.34) 76%,rgba(20,20,19,.22) 100%)}
.hero .huelle{position:relative;z-index:2;padding-top:92px;padding-bottom:78px}
.hero h1{max-width:17ch;margin-bottom:18px}
.hero p{font-size:20px;color:#D6D3CE;max-width:52ch;margin-bottom:30px}
.hero--klein{display:flex;align-items:center;min-height:clamp(360px,31vw,450px)}
.hero--klein .huelle{width:100%;padding-top:56px;padding-bottom:52px}

/* Hero ohne Foto: niedriger, mit weichem Verlauf und dem Eichenkeil der
   Wortmarke als grossem, sehr schwachem Zeichen. Rechts stehen Eckpunkte. */
.hero--ohnebild{min-height:clamp(240px,19vw,300px)}
.hero--ohnebild .huelle{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;
  padding-top:44px;padding-bottom:44px}
.hero__grund{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(120% 150% at 12% 0%,#26251F 0%,#1A1917 45%,#111110 100%)}
.hero__grund::before{content:"";position:absolute;right:-2%;top:-32%;width:46%;height:164%;
  background:var(--eiche);opacity:.055;
  clip-path:polygon(58% 0,100% 0,42% 100%,0 100%)}
.hero__satz{min-width:0}
.hero__eck{display:grid;gap:16px;align-content:center}
.hero__eck div{font-size:14.5px;color:#C9C6C0;padding-left:15px;border-left:3px solid var(--eiche);min-width:0}
.hero__eck b{display:block;color:#fff;font-size:17px;margin-bottom:2px}
.hero--ohnebild p{margin-bottom:0}
.hero--klein h1{font-size:clamp(28px,4.3vw,44px);max-width:22ch}
.hero--klein p{font-size:18px}
.marken{border-top:1px solid rgba(255,255,255,.16);margin-top:52px;padding-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:20px}
.marken div{font-size:14.5px;color:#C9C6C0;padding-left:15px;border-left:3px solid var(--eiche);min-width:0}
.marken b{display:block;color:#fff;font-size:16px}
#weruKachel img{height:27px;width:auto;display:block;margin:0 0 4px}

/* Brotkrumen */
.krume{font-size:13.5px;color:var(--tinte-60);padding:14px 0;border-bottom:1px solid var(--linie-hell)}
.krume a{text-decoration:none}
.krume a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Bausteine für Inhalte ---------- */
.doppel{display:grid;grid-template-columns:1fr 1fr;gap:26px}
/* Kachel zweispaltig: Bild schmal links, Text rechts — wie die Buehnen */
.tor{background:var(--flaeche);border:1px solid var(--linie);border-radius:2px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);min-width:0}
.tor__bild{position:relative;background:var(--eiche-hell);min-height:100%}
.tor__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tor__inhalt{padding:24px 26px;display:flex;flex-direction:column;min-width:0}
.tor h3{font-size:19px}
.tor__inhalt > p{font-size:15px}
.tor ul{list-style:none;margin:14px 0 22px;padding:0}
.tor li{position:relative;padding-left:24px;margin-bottom:8px;font-size:15.5px;color:var(--tinte-60)}
.tor li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:9px;background:var(--eiche);transform:skewX(-14deg)}
.tor .btn{margin-top:auto;align-self:flex-start}

/* Bild mit Bildunterschrift, volle Spaltenbreite */
.bildblock{margin:0}
.bildblock img{width:100%;height:auto;display:block;border:1px solid var(--linie);border-radius:2px}
.bildblock figcaption{margin-top:12px;font-size:14.5px;color:var(--tinte-60);max-width:64ch}

.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:2px;padding:24px;text-decoration:none;display:block;min-width:0}
a.karte:hover{border-color:var(--eiche)}
.karte .strich{width:34px;height:5px;background:var(--eiche);transform:skewX(-14deg);margin-bottom:16px}
.karte p{margin:0;font-size:15px;color:var(--tinte-60)}
.dunkel .karte{background:var(--tinte-weich);border-color:rgba(255,255,255,.14)}
.dunkel .karte p{color:#C9C6C0}

.schritte{counter-reset:s;display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--tinte)}
.schritt{counter-increment:s;padding:26px 20px 0;border-right:1px solid var(--linie);min-width:0}
.schritt:last-child{border-right:none}
.schritt::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--eiche-dunkel);letter-spacing:.12em;display:block;margin-bottom:10px}
.schritt h3{font-size:17px}
.schritt p{font-size:14.5px;color:var(--tinte-60);margin:0}
.schritt .dauer{font-size:13px;color:var(--eiche-dunkel);font-weight:600;margin-top:10px;display:block;font-family:var(--mono)}

.zahlen{display:grid;gap:16px}
.zahl{border-left:4px solid var(--eiche);padding:10px 0 10px 18px}
.zahl b{font-size:38px;font-weight:700;letter-spacing:-.02em;line-height:1;display:block;color:var(--eiche);font-variant-numeric:tabular-nums}
.zahl span{font-size:14.5px;color:#C9C6C0}
.zwei{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.zwei--gleich{grid-template-columns:1fr 1fr}

.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ref{text-decoration:none;display:block;min-width:0}
.ref__bild{aspect-ratio:1/1;margin-bottom:12px;background:var(--eiche-hell)}
.ref__bild img{width:100%;height:100%;object-fit:cover}
.ref .ort{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--eiche-dunkel);font-weight:600}
.ref b{display:block;font-size:16.5px;margin-top:3px}
.ref:hover b{text-decoration:underline;text-underline-offset:3px}

.orte{display:flex;flex-wrap:wrap;gap:10px}
.orte a{background:var(--flaeche);border:1px solid var(--linie);padding:9px 16px;font-size:15px;text-decoration:none;border-radius:2px}
.orte a:hover{border-color:var(--eiche);background:var(--eiche-hell)}
.papier .orte a{background:#fff}

.zeiten{width:100%;border-collapse:collapse}
.zeiten td{padding:9px 0;border-bottom:1px solid var(--linie);font-size:15.5px}
.zeiten td:last-child{text-align:right;color:var(--tinte-60)}

.faq{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{padding:18px 0;font-weight:600;font-size:17.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--eiche-dunkel);font-size:22px;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--tinte-60);max-width:70ch}

.hinweiskasten{background:var(--papier);border-left:5px solid var(--eiche);padding:20px 22px;margin:28px 0}
.hinweiskasten p:last-child{margin-bottom:0}
.hinweiskasten b{display:block}

/* ---------- Fußzeile ---------- */
footer{background:var(--tinte);color:#9C9A95;font-size:14.5px;padding:56px 0 28px}
footer a{text-decoration:none}
footer a:hover{color:#fff}
.fuss-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.14)}
.fuss-grid h4{color:#fff;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;font-weight:600}
.fuss-grid ul{list-style:none;margin:0;padding:0}
.fuss-grid li{margin-bottom:8px}
.fuss-unten{padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px}
.fuss-logo{margin:0}
.fuss-logo .logo__marke{height:30px;width:auto}

/* ---------- Einblenden beim Scrollen ---------- */
.auf{opacity:0;transform:translateY(14px);transition:opacity .55s var(--sanft),transform .55s var(--sanft)}
.auf.da{opacity:1;transform:none}

/* ============================================================
   Interaktive Bausteine
   ============================================================ */
/* Kein overflow:hidden — die Ort-Vorschlagsliste ragt sonst nicht ueber die
   Kastenkante hinaus und wird abgeschnitten. Die Kinder halten durch ihre
   Innenabstaende ohnehin Abstand zu den runden Ecken. */
.buehne{background:var(--tinte);color:#E6E6E5;border:1px solid rgba(255,255,255,.13);border-radius:14px}
.papier .buehne,.flaeche .buehne{border-color:rgba(0,0,0,.1)}
.buehne__raster{display:grid;grid-template-columns:1fr}
@media (min-width:920px){.buehne__raster{grid-template-columns:.82fr 1.18fr}}
.buehne__pult{padding:26px;border-bottom:1px solid rgba(255,255,255,.13);min-width:0}
@media (min-width:920px){.buehne__pult{border-bottom:0;border-right:1px solid rgba(255,255,255,.13)}}
.buehne__anzeige{padding:26px;min-height:400px;display:flex;flex-direction:column;min-width:0}
.buehne__titel{color:var(--grau);display:block;margin-bottom:16px}
.buehne__hinweis{font-size:13.5px;color:var(--grau);line-height:1.6;margin:18px 0 0}
.quelle{font-size:13px;color:var(--tinte-60);margin:16px 0 0;line-height:1.6;max-width:80ch}

.knopf{display:block;width:100%;text-align:left;background:transparent;color:#E6E6E5;
  border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:13px 15px;margin-bottom:9px;
  transition:border-color .2s,background .2s}
.knopf:hover{border-color:var(--eiche)}
.knopf b{display:block;font-size:15.5px;font-weight:600}
.knopf span{display:block;font-size:13px;color:var(--grau);margin-top:1px}
.knopf[aria-pressed="true"]{background:var(--eiche);border-color:var(--eiche);color:var(--tinte)}
.knopf[aria-pressed="true"] span{color:rgba(20,20,19,.72)}
.knopf:disabled{opacity:.45;cursor:not-allowed}

.werte{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.13);border-radius:8px;overflow:hidden;margin-top:22px}
.wert{background:var(--tinte);padding:14px 15px;min-width:0}
.wert .u-mono{color:var(--grau);display:block;margin-bottom:5px}
.wert b{font-size:26px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;display:block}
.wert small{font-size:12.5px;color:var(--grau);display:block;margin-top:4px;line-height:1.45}
.wert.gut b{color:var(--eiche)}
.leer{color:var(--grau);font-size:14.5px;margin:auto 0;text-align:center;padding:40px 20px;line-height:1.6}

/* Baustein: Der Schnitt */
.schnitt__bild{flex:1;display:flex;align-items:center;justify-content:center;min-height:250px}
.schnitt__bild svg{width:100%;height:auto;max-height:330px}
.mauer{fill:#2E2E2B}
.rahmen{fill:#4A4844}
.scheibe{fill:#8FB4C4;opacity:.3;transition:opacity .5s var(--sanft)}
.scheibe.aus{opacity:0}
.raumlicht{fill:#C89A5E;opacity:.05}
.pfeil{stroke:#E6E6E5;stroke-width:2;stroke-linecap:round}
.beschriftung{fill:var(--grau);font-family:var(--mono);font-size:10px;letter-spacing:.1em}
.temperatur{fill:#E6E6E5;font-family:var(--sans);font-size:15px;font-weight:700}
.kaltluft{opacity:0;transition:opacity .6s var(--sanft)}

/* Baustein: Die Stoppuhr / Das Rennen */
.uhr{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.uhr b{font-family:var(--mono);font-size:42px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.bahnen{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-width:0}
.bahn{border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:16px;display:flex;flex-direction:column;min-width:0}
.bahn.sieger{border-color:var(--eiche)}
.bahn h4{margin:0 0 3px;font-size:15.5px}
.bahn .rolle{color:var(--grau);margin-bottom:14px;display:block}
.takte{list-style:none;margin:0;padding:0;flex:1}
.takte li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;padding:7px 0;
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--sanft),transform .35s var(--sanft);
  border-bottom:1px solid rgba(255,255,255,.07)}
.takte li.an{opacity:1;transform:none}
.takte li .zeit{font-family:var(--mono);font-size:11px;color:var(--grau);flex:0 0 48px;padding-top:2px;font-variant-numeric:tabular-nums}
.takte li.hoch .text{color:var(--eiche);font-weight:600}
.mahlt{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--grau);padding:9px 0;opacity:0;transition:opacity .4s}
.mahlt.an{opacity:1}
.puls{width:8px;height:8px;border-radius:50%;background:var(--eiche);animation:puls 1.1s infinite;flex:0 0 auto}
@keyframes puls{0%,100%{opacity:.25}50%{opacity:1}}
.ergebnis{margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.16);font-size:14px;line-height:1.5;opacity:0;transition:opacity .4s}
.ergebnis.an{opacity:1}
.ergebnis b{display:block;font-size:16px;margin-bottom:2px}

/* Baustein: Der Sommer (Bedienfeld) */
.regler{margin-bottom:20px}
.regler label{display:flex;justify-content:space-between;font-size:14px;margin-bottom:7px;gap:12px}
.regler label b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--eiche);font-size:13px}
input[type=range]{width:100%;accent-color:var(--eiche)}
.schalter{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid rgba(255,255,255,.18);border-radius:8px;margin-bottom:9px;width:100%;text-align:left;background:transparent;color:#E6E6E5}
.schalter .lampe{width:34px;height:19px;border-radius:12px;background:rgba(255,255,255,.2);position:relative;flex:0 0 auto;transition:background .25s}
.schalter .lampe::after{content:"";position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#fff;transition:transform .25s var(--sanft)}
.schalter[aria-pressed="true"] .lampe{background:var(--eiche)}
.schalter[aria-pressed="true"] .lampe::after{transform:translateX(15px)}
.schalter b{font-size:15px;font-weight:600;display:block}
.schalter span{font-size:12.5px;color:var(--grau);display:block}

.haus{flex:1;display:flex;align-items:center;justify-content:center;min-height:250px}
.haus svg{width:100%;height:auto;max-height:320px}
.sonne{fill:#C89A5E;transition:opacity .5s}
.strahl{stroke:#C89A5E;stroke-width:2;stroke-linecap:round;transition:opacity .5s}
.raum{fill:#2E2E2B;transition:fill .8s var(--sanft)}
.lamelle{fill:#4A4844;transition:transform .7s var(--sanft),opacity .4s}
.glasflaeche{fill:#8FB4C4;opacity:.25}

/* Baustein: Fließband (Der Aufmaßtag) */
.band{display:flex;flex-direction:column;gap:0;flex:1}
.station{display:flex;gap:16px;min-width:0;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);opacity:.3;transition:opacity .4s var(--sanft)}
.station.an{opacity:1}
.station.wartet .stationText{color:var(--grau)}
.station__marke{width:12px;height:12px;background:rgba(255,255,255,.2);transform:skewX(-14deg);margin-top:7px;flex:0 0 12px;transition:background .35s}
.station.an .station__marke{background:var(--eiche)}
.station b{display:block;font-size:15.5px;font-weight:600}
.station small{display:block;font-size:13.5px;color:var(--grau);line-height:1.5}
.station .wann{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--grau);white-space:nowrap;padding-top:4px;font-variant-numeric:tabular-nums}

/* Baustein: Der Antrag (zwei Zeitleisten) */
.leisten{display:grid;grid-template-columns:1fr;gap:18px;flex:1}
.leiste{border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:17px}
.leiste.falsch{border-color:rgba(255,255,255,.16)}
.leiste.richtig{border-color:var(--eiche)}
.leiste__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:13px;flex-wrap:wrap}
.leiste__kopf b{font-size:16px}
.leiste__betrag{font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--eiche);font-variant-numeric:tabular-nums;transition:color .4s}
.leiste__betrag.weg{color:var(--grau);text-decoration:line-through}
.perlen{display:flex;gap:0;align-items:stretch}
.perle{flex:1;text-align:center;position:relative;padding-top:22px;font-size:12.5px;color:var(--grau);line-height:1.4;min-width:0}
.perle::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .3s,box-shadow .3s}
.perle::after{content:"";position:absolute;top:6px;left:50%;width:100%;height:1px;background:rgba(255,255,255,.14)}
.perle:last-child::after{display:none}
.perle.an::before{background:var(--eiche);box-shadow:0 0 0 4px rgba(200,154,94,.2)}
.perle.an{color:#E6E6E5}
.perle.stopp::before{background:#E6E6E5}

/* Baustein: Umschalter (Die Kolonne) */
.wippe{display:inline-flex;background:rgba(255,255,255,.09);border-radius:999px;padding:4px;margin-bottom:20px}
.wippe button{background:none;border:none;color:var(--grau);padding:9px 18px;border-radius:999px;font-size:14.5px;font-weight:600}
.wippe button[aria-pressed="true"]{background:var(--eiche);color:var(--tinte)}
.wochen{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-bottom:20px}
.woche{text-align:center;min-width:0}
.woche__balken{height:52px;border-radius:3px;background:rgba(255,255,255,.16);margin-bottom:6px;transition:background .4s var(--sanft)}
.woche__balken.gleich{background:var(--eiche)}
.woche small{font-family:var(--mono);font-size:10px;color:var(--grau);display:block;line-height:1.3}
.gesichter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.gesicht{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#E6E6E5;transition:background .4s}
.gesicht.bekannt{background:var(--eiche);color:var(--tinte)}

/* Baustein: geführter Check (Quiz) */
.check__fortschritt{display:flex;gap:5px;margin-bottom:22px}
.check__fortschritt span{flex:1;height:6px;background:rgba(255,255,255,.16);transform:skewX(-18deg)}
.check__fortschritt span.an{background:var(--eiche)}
.check__fortschritt span.fertig{background:var(--eiche-dunkel)}
.optionen{display:grid;gap:9px}
.ampel{display:flex;gap:15px;align-items:flex-start;background:rgba(255,255,255,.05);border-left:5px solid var(--eiche);padding:17px 19px;margin-bottom:22px}
.ampel .punkt{width:12px;height:12px;border-radius:50%;margin-top:7px;flex:0 0 12px;background:var(--eiche)}
.ampel b{display:block;font-size:16.5px;color:#fff}
.ampel p{margin:4px 0 0;font-size:14.5px;color:var(--grau)}
.abschnitt{border-top:1px solid rgba(255,255,255,.16);padding-top:20px;margin-top:20px}
.abschnitt h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--eiche);margin:0 0 14px;font-weight:600}
.weg{border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:15px 17px;margin-bottom:11px}
.weg__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:3px;flex-wrap:wrap}
.weg__kopf b{font-size:16px}
.weg__satz{font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--eiche);white-space:nowrap;line-height:1;font-variant-numeric:tabular-nums}
.weg p{margin:5px 0 0;font-size:14px;color:var(--grau);line-height:1.55}
.weg.aus{opacity:.5}
ul.pruef{list-style:none;margin:0;padding:0}
ul.pruef li{position:relative;padding-left:25px;margin-bottom:9px;font-size:14px;color:var(--grau);line-height:1.55}
ul.pruef li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:9px;background:var(--eiche);transform:skewX(-14deg)}
ul.pruef li b{color:#E6E6E5;font-weight:600}

/* Formularfelder in Bausteinen */
.pflicht{color:var(--eiche);font-weight:700}
.pflicht-hinweis{margin:-4px 0 14px}
.zustimmung{display:flex;gap:11px;align-items:flex-start;margin:6px 0 12px;
  font-size:14px;line-height:1.5;color:#C9C6C0;cursor:pointer}
.zustimmung input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--eiche);cursor:pointer}

.feld{display:block;margin-bottom:15px}
.feld > span{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.feld input,.feld select,.feld textarea{
  width:100%;font:inherit;font-size:15.5px;padding:11px 12px;border-radius:2px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#E6E6E5}
.feld input::placeholder,.feld textarea::placeholder{color:var(--grau)}
.feld select option{background:var(--tinte);color:#E6E6E5}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px;margin-bottom:16px}
.slot{border:1px solid rgba(255,255,255,.18);background:transparent;border-radius:8px;padding:11px 13px;text-align:left;color:#E6E6E5}
.slot:hover{border-color:var(--eiche)}
.slot[aria-pressed="true"]{border-color:var(--eiche);background:var(--eiche);color:var(--tinte)}
.slot b{display:block;font-size:14.5px}
.slot small{font-size:12.5px;opacity:.75}
.fehler{color:#E8A0A0;font-size:14px;margin:0 0 12px}
.klein{font-size:12.5px;line-height:1.6;color:var(--grau);margin:16px 0 0}
.klein a{color:var(--eiche)}
.danke{text-align:center;padding:26px 0;margin:auto 0}
.danke .haken{width:52px;height:52px;margin:0 auto 16px;background:var(--eiche);transform:skewX(-14deg);
  display:flex;align-items:center;justify-content:center;color:var(--tinte);font-size:25px;font-weight:700}
.zurueck{background:none;border:none;font-size:14.5px;color:var(--grau);padding:11px 0;text-decoration:underline;text-underline-offset:3px}
.zurueck:hover{color:#E6E6E5}
.fuss-knoepfe{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;flex-wrap:wrap}

/* Baustein: Selbsttest (Reparatur) */
.hakenliste{display:grid;gap:9px}
.hakenliste button{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:12px 14px;background:transparent;color:#E6E6E5}
.hakenliste button:hover{border-color:var(--eiche)}
.hakenliste .kasten{width:18px;height:18px;border:1px solid rgba(255,255,255,.4);border-radius:3px;flex:0 0 18px;margin-top:2px;position:relative}
.hakenliste button[aria-pressed="true"]{border-color:var(--eiche)}
.hakenliste button[aria-pressed="true"] .kasten{background:var(--eiche);border-color:var(--eiche)}
.hakenliste button[aria-pressed="true"] .kasten::after{content:"✓";position:absolute;inset:0;color:var(--tinte);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.hakenliste small{display:block;font-size:12.5px;color:var(--grau);margin-top:1px}

/* ---------- Responsiv ---------- */
@media (max-width:1000px){
  .nav{display:none}
  .menue{display:block}
}
@media (max-width:1000px){
  .doppel{grid-template-columns:1fr;gap:20px}
}
@media (max-width:900px){
  .zwei,.zwei--gleich{grid-template-columns:1fr;gap:32px}
  .schritte{grid-template-columns:repeat(2,1fr);border-top:none}
  .schritt{border-right:none;border-top:2px solid var(--tinte);padding-bottom:20px}
  .refs{grid-template-columns:repeat(2,1fr)}
  .fuss-grid{grid-template-columns:1fr 1fr}
  section{padding:62px 0}
  .hero .huelle{padding-top:62px;padding-bottom:54px}
  .hero--klein{min-height:clamp(300px,38vw,380px)}
  .hero--ohnebild{min-height:clamp(220px,26vw,270px)}
  .hero--ohnebild .huelle{gap:30px}
  .hero--klein .huelle{padding-top:48px;padding-bottom:44px}
  .wochen{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
  body{font-size:16.5px}
  /* Ein 2,9:1-Bild hinter einem fast quadratischen Kasten wuerde seitlich
     fast vollstaendig beschnitten. Deshalb steht es auf schmalen Geraeten
     als Band ueber dem Text. */
  .hero,.hero--klein{display:block;min-height:0}
  .hero__bild{position:relative;aspect-ratio:16/9;width:100%}
  .hero__bild::after{background:linear-gradient(to bottom,rgba(20,20,19,0) 55%,rgba(20,20,19,.35) 100%)}
  .hero .huelle,.hero--klein .huelle{padding-top:34px;padding-bottom:38px}
  .hero--ohnebild .huelle{grid-template-columns:1fr;gap:26px;padding-top:38px;padding-bottom:38px}
  .hero__grund{position:absolute}
  .hero__eck{grid-template-columns:1fr 1fr;gap:14px 18px}
  #weruKachel img{height:25px}
  .tor{grid-template-columns:1fr}
  .tor__bild{aspect-ratio:16/9;min-height:0}
  .tor__bild img{position:static}
  .refs,.karten{grid-template-columns:1fr}
  .schritte{grid-template-columns:1fr}
  .fuss-grid{grid-template-columns:1fr}
  .werte{grid-template-columns:1fr}
  .bahnen{grid-template-columns:1fr}
  .reihe{grid-template-columns:1fr}
  .buehne__pult,.buehne__anzeige{padding:20px}
  .uhr b{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .auf{opacity:1;transform:none}
}


/* ---------- Baustein: Das Haus (Hotspots) ---------- */
.haus__bild{flex:1;display:flex;align-items:center;justify-content:center;min-height:270px}
.haus__bild svg{width:100%;height:auto;max-height:340px}
.wand{fill:#2A2A27}
.dach{fill:#3A3936}
.oeffnung{fill:#8FB4C4;opacity:.22}
.marke{cursor:pointer}
.marke circle.ring{fill:none;stroke:var(--eiche);stroke-width:2;opacity:.55}
.marke circle.kern{fill:var(--eiche);transition:r .25s var(--sanft)}
.marke:hover circle.kern,.marke[aria-pressed="true"] circle.kern{r:9}
.marke[aria-pressed="true"] circle.ring{opacity:1;animation:ringPuls 1.8s infinite}
@keyframes ringPuls{0%,100%{r:13;opacity:.55}50%{r:17;opacity:.15}}
.marke text{fill:#E6E6E5;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em}
.haus__tafel{border-top:1px solid rgba(255,255,255,.16);padding-top:18px;margin-top:18px;min-height:132px}
.haus__tafel h4{font-size:18px;margin:0 0 6px;color:#fff}
.haus__tafel p{font-size:14.5px;color:var(--grau);line-height:1.6;margin:0 0 14px}

/* ---------- Baustein: Der kaelteste Punkt ---------- */
.thermo{flex:1;display:flex;align-items:center;justify-content:center;min-height:260px}
.thermo svg{width:100%;height:auto;max-height:330px}
.flaeche-warm{transition:fill .7s var(--sanft)}
.tropfen{opacity:0;transition:opacity .6s var(--sanft)}
.tropfen.an{opacity:1}
.warnung{fill:#E6E6E5;font-family:var(--mono);font-size:10px;letter-spacing:.1em}
.messpunkt{font-family:var(--sans);font-size:14px;font-weight:700;fill:#E6E6E5}
.befund{border-left:5px solid var(--eiche);background:rgba(255,255,255,.05);padding:15px 17px;margin-top:18px}
.befund b{display:block;font-size:16px;color:#fff;margin-bottom:3px}
.befund p{margin:0;font-size:14.5px;color:var(--grau);line-height:1.55}
.befund.achtung{border-left-color:#E6E6E5}

/* Haus: Bereichsleiste statt Beschriftung in der Zeichnung */
.haus__leiste{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.haus__chip{border:1px solid rgba(255,255,255,.2);background:transparent;color:#E6E6E5;
  border-radius:999px;padding:8px 15px;font-size:14px;font-weight:500}
.haus__chip:hover{border-color:var(--eiche)}
.haus__chip[aria-pressed="true"]{background:var(--eiche);border-color:var(--eiche);color:var(--tinte);font-weight:600}
.haus__bild svg{max-height:420px}
#hausRuf{transition:opacity .3s var(--sanft)}
#hausRufText{font-family:var(--sans)}
#hausSchief,#hausGitter{transition:opacity .4s var(--sanft)}
#hausWerkzeug{pointer-events:none}
.marke[data-teil="service"] circle.kern{r:0}

/* Zusagen statt Steckbriefe */
.zusagen{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--tinte)}
.zusage{padding:24px 26px 24px 0;border-bottom:1px solid var(--linie);position:relative;padding-left:34px;min-width:0}
.zusage::before{content:"";position:absolute;left:0;top:30px;width:14px;height:11px;background:var(--eiche);transform:skewX(-14deg)}
.zusage:nth-child(odd){border-right:1px solid var(--linie);padding-right:32px}
.zusage h3{font-size:18.5px;margin-bottom:6px}
.zusage p{font-size:15.5px;color:var(--tinte-60);margin:0;line-height:1.6}
@media (max-width:820px){
  .zusagen{grid-template-columns:1fr}
  .zusage:nth-child(odd){border-right:none;padding-right:0}
}
.stimme{border-left:4px solid var(--eiche);padding:6px 0 6px 24px;margin:38px 0 0;max-width:64ch}
.stimme p{font-size:20px;line-height:1.55;margin:0 0 12px;letter-spacing:-.01em}
.stimme cite{font-style:normal;font-size:15px;color:var(--tinte-60)}
.stimme cite b{display:block;color:var(--tinte);font-size:16.5px;font-weight:600}


/* ---------- Eingabefeld mit Vorschlagsliste ---------- */
.vorschlag{position:relative}
.vorschlag__liste{position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:4px;
  background:var(--tinte-weich);border:1px solid rgba(255,255,255,.2);border-radius:8px;
  max-height:230px;overflow-y:auto;box-shadow:0 12px 28px rgba(0,0,0,.45);display:none}
.vorschlag__liste.offen{display:block}
.vorschlag__liste button{display:block;width:100%;text-align:left;background:none;border:none;
  padding:11px 14px;color:#E6E6E5;font-size:15.5px;border-bottom:1px solid rgba(255,255,255,.07)}
.vorschlag__liste button:last-child{border-bottom:none}
.vorschlag__liste button:hover,.vorschlag__liste button.aktiv{background:var(--eiche);color:var(--tinte)}
.vorschlag__liste mark{background:none;color:var(--eiche);font-weight:700}
.vorschlag__liste button:hover mark,.vorschlag__liste button.aktiv mark{color:var(--tinte)}
.vorschlag__hinweis{font-size:13px;color:var(--grau);padding:9px 14px;border-top:1px solid rgba(255,255,255,.07)}

/* ---------- Mehrfachauswahl im Assistenten ---------- */
.mehrfach{display:grid;gap:9px}
.mehrfach .knopf{position:relative;padding-left:46px}
.mehrfach .knopf::before{content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border:1px solid rgba(255,255,255,.4);border-radius:3px}
.mehrfach .knopf[aria-pressed="true"]{background:transparent;border-color:var(--eiche);color:#E6E6E5}
.mehrfach .knopf[aria-pressed="true"] span{color:var(--grau)}
.mehrfach .knopf[aria-pressed="true"]::before{background:var(--eiche);border-color:var(--eiche)}
.mehrfach .knopf[aria-pressed="true"]::after{content:"\2713";position:absolute;left:19px;top:50%;
  transform:translateY(-50%);color:var(--tinte);font-size:13px;font-weight:700}

/* ---------- Termine: freie Zeitfenster ---------- */
.tage{display:grid;gap:14px;margin-bottom:18px}
.tag__kopf{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--eiche);margin:0 0 8px}
.tag__slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.leer-hinweis{color:var(--grau);font-size:14.5px;line-height:1.6;padding:16px 0}

/* ---------- Der Schnitt: mobile Fassung ---------- */
.schnitt__quer{display:block}
.schnitt__hoch{display:none}
@media (max-width:720px){
  .schnitt__quer{display:none}
  .schnitt__hoch{display:block}
  .schnitt__bild svg{max-height:none}
  #schnitt .werte{margin-top:16px}
  #schnitt .wert b{font-size:23px}
}


/* ============================================================
   Mobile Feinarbeit (Pruefung 5.9.)
   ============================================================ */
/* Kurzzeile unter dem Haus: am Desktop steckt sie in der Zeichnung */
.haus__kurz{display:none;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--eiche);margin:14px 0 0}

@media (max-width:720px){
  /* Beschriftungen in den SVG-Buehnen: viewBox skaliert sie sonst auf 5-6 px */
  .thermo .beschriftung,.haus .beschriftung{font-size:15px}
  .thermo .messpunkt{font-size:22px}
  .thermo .warnung{font-size:14px}
  .haus__bild .beschriftung{font-size:15px}
  /* Kurzzeile in der Hauszeichnung ausblenden, darunter als Text zeigen */
  #hausRuf{display:none}
  .haus__kurz{display:block}
  /* Ruf-Zeile im Sommer-Baustein */
  #sommer .beschriftung{font-size:14px}
}
@media (max-width:640px){
  /* Logo: 34 px Hoehe ergibt ~270 px Breite — zu viel neben dem Menueknopf */
  .logo__marke{height:27px}
  header .huelle{gap:14px}
  /* Kopfleiste: eine Zeile pro Angabe statt Umbruch mitten im Satz */
  .oben .huelle{flex-direction:column;gap:2px;align-items:flex-start}
  /* Kleinste Labels etwas groesser */
  .u-mono{font-size:12px}
  /* Bedienelemente mindestens 44 px hoch */
  .haus__chip{padding:11px 16px}
  .slot{padding:13px 14px}
  .wippe button{padding:11px 16px}
  /* Bausteine: Pult und Anzeige enger */
  .buehne__pult,.buehne__anzeige{padding:18px 16px}
  .buehne__anzeige{min-height:0}
  /* Zahlenblock im Abschluss */
  .zahl b{font-size:32px}
  /* Tabellen der Verwaltungsseiten nicht betroffen, Fusszeile einspaltig ist gesetzt */
}
@media (max-width:380px){
  .hero h1{font-size:30px}
  .btn,.btn-hell,.btn-linie{padding:13px 18px;font-size:15px}
  .aktionen{flex-direction:column;align-items:stretch}
  .aktionen .btn,.aktionen .btn-hell,.aktionen .btn-linie{justify-content:center}
}

/* ============================================================
   Einwilligungsbanner (erscheint nur, wenn eine Mess-ID gesetzt ist)
   ============================================================ */
#einwilligung{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:14px;
  background:rgba(20,20,19,.55);backdrop-filter:blur(2px)}
.einwilligung__kasten{max-width:680px;margin:0 auto;background:var(--tinte);color:#E6E6E5;
  border:1px solid rgba(255,255,255,.16);border-radius:2px;padding:18px 20px;
  box-shadow:0 12px 40px rgba(0,0,0,.35)}
.einwilligung__kasten p{margin:0 0 14px;font-size:14.5px;line-height:1.6}
.einwilligung__kasten p a{color:var(--eiche)}
.einwilligung__knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.einwilligung__knoepfe .btn-hell,.einwilligung__knoepfe .btn-linie{font-size:14.5px;padding:10px 18px}
@media (max-width:640px){
  #einwilligung{padding:0}
  .einwilligung__kasten{border-radius:0;border-left:0;border-right:0;border-bottom:0}
  .einwilligung__knoepfe .btn-hell,.einwilligung__knoepfe .btn-linie{flex:1;text-align:center;justify-content:center}
}