/* GW-Terrassendach · Landingpage · Designsystem und Abschnitt 1 (Kopf, Hero, Konfigurator)
   RGN Marketing 2026 */

/* ---------- Schrift (lokal) ---------- */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-tight-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-tight-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-tight-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-tight-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-tight-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-tight-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --gruen:#2F4A42; --gruen-tief:#1E322C; --gruen-hover:#26403A; --gruen-hauch:#EEF2F0;
  --beige:#BBAA82; --beige-hauch:rgba(187,170,130,.20);
  --papier:#F8F8F4; --weiss:#fff; --tinte:#1B2A26; --tinte-2:#4A5A55; --tinte-3:#6B7873;
  --linie:#DBD9D3; --linie-hell:#E9E7E1; --fehler:#B4483C; --ok:#2F6B52;
  --r-btn:12px; --r-feld:12px; --r-kachel:20px; --r-karte:24px; --r-flaeche:32px; --r-chip:999px;
  --sch-1:0 1px 2px rgba(27,42,38,.04),0 2px 8px rgba(27,42,38,.03);
  --sch-2:0 2px 4px rgba(27,42,38,.04),0 10px 28px rgba(27,42,38,.06);
  --sch-3:0 4px 10px rgba(27,42,38,.05),0 22px 48px rgba(27,42,38,.06);
  --e-soft:cubic-bezier(.22,1,.36,1); --e-calm:cubic-bezier(.25,.8,.25,1); --e-snap:cubic-bezier(.34,1.4,.64,1); --e-ui:cubic-bezier(.2,0,0,1);
  --t-ui:.14s; --t-soft:.45s; --t-calm:.75s;
  --kopf-h:76px;
  --schrift:'Inter Tight',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --e-soft:linear(0,.009 .9%,.037 1.9%,.141 4%,.3 6.6%,.51 10%,.68 13.6%,.8 17.4%,.89 22%,.95 27.6%,.985 35%,.998 46%,1);
    --e-snap:linear(0,.06 2.3%,.25 5.2%,.62 10%,.94 15.5%,1.06 19.4%,1.09 22.4%,1.08 26%,1.02 32%,.995 40%,1 52%,1);
  }
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 16px)}
body{margin:0;font-family:var(--schrift);font-size:16px;line-height:1.55;color:var(--tinte);background:var(--weiss);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;accent-color:var(--gruen)}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-weight:600;letter-spacing:-.01em;text-wrap:balance}
p,li,figcaption,summary,dd,dt,td,th{text-wrap:pretty}
::selection{background:var(--gruen);color:#fff}
:focus-visible{outline:2px solid var(--gruen);outline-offset:3px;border-radius:6px}
.hero :focus-visible,.fab:focus-visible{outline-color:var(--beige)}
.rahmen{width:100%;max-width:1232px;margin:0 auto;padding:0 16px}
@media (min-width:861px){.rahmen{padding:0 32px}}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--gruen);color:#fff;padding:10px 14px;border-radius:var(--r-btn);text-decoration:none}
.skip:focus{top:12px}
.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.h2{font-size:clamp(26px,2.3vw + 14px,38px);line-height:1.12}
.kicker{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:4px 12px;border-radius:var(--r-chip);background:var(--beige-hauch);color:var(--tinte);font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1.3}
.kicker--hell{background:rgba(187,170,130,.16);box-shadow:inset 0 0 0 1px rgba(187,170,130,.42);color:#F4F1E8}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border:0;border-radius:var(--r-btn);font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;transition:transform var(--t-ui) var(--e-ui),background-color .2s var(--e-ui),box-shadow .25s var(--e-ui),opacity .2s}
.btn--gruen{background:var(--gruen);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 6px 16px rgba(30,50,44,.16)}
.btn--gruen:hover{background:var(--gruen-hover);transform:translateY(-1px)}
.btn--gruen:active{transform:translateY(0) scale(.985)}
.btn--rand{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 1px var(--linie)}
.btn--rand:hover{box-shadow:inset 0 0 0 1px var(--tinte-3)}
.btn--text{min-height:44px;padding:0 6px;background:none;color:var(--tinte-2);font-weight:500;text-decoration:underline;text-decoration-color:var(--linie);text-underline-offset:4px}
.btn--text:hover{color:var(--tinte);text-decoration-color:var(--tinte-3)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-load{position:relative}
.btn-load .btn-load__dreh{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:dreh .8s linear infinite}
.btn-load.busy{pointer-events:none}
.btn-load.busy .btn-load__dreh{display:inline-block}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ---------- 0 · Kopf ---------- */
.kopf{position:fixed;inset:10px 0 auto;z-index:50;padding:0 10px;pointer-events:none}
.kopf__pille{pointer-events:auto;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;height:58px;padding:0 8px 0 16px;border-radius:var(--r-chip);background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 0 0 1px rgba(27,42,38,.06),0 8px 26px rgba(15,28,24,.10);transition:box-shadow .3s var(--e-calm),background-color .3s}
.kopf.ist-gescrollt .kopf__pille{background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(27,42,38,.07),0 10px 30px rgba(15,28,24,.12)}
.kopf__logo{display:block;flex:none;border-radius:8px}
.kopf__logo img{height:34px;width:auto}
.kopf__nav{display:none}
.kopf__aktion{display:flex;align-items:center;gap:8px}
.kopf__tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-chip);background:var(--gruen);color:#fff;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.kopf__tel .i{width:17px;height:17px}
.kopf__cta{display:none}
@media (max-width:360px){.kopf__logo img{height:28px}.kopf__tel{padding:0 11px;font-size:14px}}
@media (min-width:861px){
  :root{--kopf-h:84px}
  .kopf{inset:14px 0 auto;padding:0 24px}
  .kopf__pille{height:62px;padding:0 8px 0 22px}
  .kopf__logo img{height:38px}
  .kopf__nav{display:flex;gap:4px}
  .kopf__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-chip);font-size:15px;font-weight:500;color:var(--tinte-2);text-decoration:none;transition:color .2s,background-color .2s}
  .kopf__nav a:hover{color:var(--tinte);background:rgba(27,42,38,.045)}
  .kopf__tel{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 1px var(--linie)}
  .kopf__tel:hover{box-shadow:inset 0 0 0 1px var(--tinte-3)}
  .kopf__tel .i{color:var(--gruen)}
  .kopf__cta{display:inline-flex;min-height:46px;border-radius:var(--r-chip);padding:0 20px;font-size:15px}
}
@media (min-width:861px) and (max-width:1080px){.kopf__nav{display:none}}

/* ---------- 1 · Hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;isolation:isolate;
  background:linear-gradient(118deg,#2F4A42 0%,#26403A 44%,#1E322C 100%)}
.hero__licht{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 64% at 80% 58%,rgba(187,170,130,.12) 0%,rgba(187,170,130,.05) 42%,rgba(187,170,130,0) 72%),
    radial-gradient(38% 52% at 4% 0%,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 70%)}
.hero__licht::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(14,26,22,.22) 100%)}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr);padding-top:86px}
.hero__text{position:relative;z-index:2}
.hero__titel{display:flex;flex-direction:column;align-items:flex-start;gap:0;font-size:clamp(31px,6.4vw + 6px,38px);line-height:1.08;letter-spacing:-.015em}
.hero__titel .kicker{margin-bottom:14px;font-size:12.5px;letter-spacing:.015em}
.hero__z1{display:block}
.hero__z2{display:block;font-style:normal;color:#E9E1CC}
.hero__lead{margin-top:14px;max-width:34em;font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.84)}
.hero__punkte{display:grid;gap:6px;margin-top:14px;font-size:15px;color:rgba(255,255,255,.92)}
.hero__punkte li{display:flex;align-items:center;gap:10px}
.ck{width:20px;height:20px;flex:none;fill:none;stroke:var(--beige);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero__punkte .ck{padding:3px;border-radius:50%;background:rgba(187,170,130,.16);width:22px;height:22px}
.hero__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:16px}
.hero__trust{font-size:13.5px;color:rgba(255,255,255,.66)}
.hero__tel{display:none}
.hero__bild{position:relative;z-index:1;justify-self:end;width:min(42%,170px);margin:-34px -4px 26px 0}
.hero__bild img{width:100%;height:auto;object-fit:contain;object-position:right bottom;filter:drop-shadow(0 0 1px rgba(255,250,235,.55)) drop-shadow(0 18px 30px rgba(10,20,17,.35))}
.hero__bild.ist-leer{visibility:hidden}
.hero__bild picture{position:relative;z-index:1;display:block}
.hero__glow{position:absolute;z-index:0;left:6%;right:-10%;top:4%;bottom:-6%;pointer-events:none;
  background:radial-gradient(var(--glow-w,46%) var(--glow-h,50%) at var(--glow-x,42%) var(--glow-y,58%),rgba(250,247,238,.88) 0%,rgba(228,219,196,.46) 42%,rgba(187,170,130,0) 78%)}
@media (min-width:861px){
  .hero__in{grid-template-columns:minmax(0,60fr) minmax(0,40fr);align-items:end;gap:0;padding-top:98px}
  .hero__text{align-self:start;padding-bottom:116px}
  .hero__titel{font-size:clamp(40px,2.9vw + 12px,54px);line-height:1.05}
  .hero__titel .kicker{margin-bottom:16px;font-size:13px}
  .hero__lead{margin-top:16px;font-size:18px;max-width:42em}
  .hero__punkte{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;font-size:15px}
  .hero__punkte li{white-space:nowrap}
  .hero__fuss{margin-top:22px}
  .hero__tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-chip);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);color:#fff;font-size:15px;font-weight:600;text-decoration:none;transition:box-shadow .2s,background-color .2s}
  .hero__tel:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
  .hero__bild{width:140%;max-width:540px;margin:0 -4% 70px -40%}
  .hero__glow{--glow-x:70%;--glow-y:52%;--glow-w:26%;--glow-h:44%}
  .hero__bild img{max-height:none}
}
@media (min-width:861px) and (max-width:1180px){
  .hero__in{grid-template-columns:minmax(0,62fr) minmax(0,38fr)}
  .hero__text{padding-bottom:130px}
  .hero__bild{width:160%;margin-left:-60%}
  .hero__lead{max-width:30em}
}

/* ---------- Bogen und weiße Fläche ---------- */
.konf{position:relative;z-index:3;margin-top:-58px}
.bogen{display:block;width:100%;height:44px;overflow:visible;filter:drop-shadow(0 -10px 18px rgba(14,26,22,.22))}
.bogen__flaeche{fill:var(--weiss)}
.bogen__linie{fill:none;stroke:var(--beige);stroke-width:5px;vector-effect:non-scaling-stroke}
.konf__weiss{position:relative;background:var(--weiss);margin-top:-1px;padding:2px 0 48px}
.konf__weiss > .rahmen{margin-top:-14px;position:relative}
@media (min-width:861px){
  .konf{margin-top:-120px}
  .bogen{height:90px}
  .konf__weiss{padding:0 0 88px}
  .konf__weiss > .rahmen{margin-top:-46px;position:relative}
}

/* ---------- 2 · Konfigurator ---------- */
.gwk{position:relative;min-height:560px}
.gwk__noscript{display:grid;gap:12px;padding:8px 0}
.gwk__raster{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "buehne" "frage";gap:0}
.gwk__kopf{grid-area:kopf;justify-items:start}
.gwk__buehnebox{grid-area:buehne}
.gwk__haupt{grid-area:frage;min-width:0}
.gwk__titel{margin-top:10px;font-size:clamp(25px,2vw + 14px,36px);line-height:1.12}
.gwk__unter{margin-top:6px;font-size:14px;color:var(--tinte-3)}
.gwk__fort{display:flex;align-items:center;gap:12px;margin-top:12px}
.gwk__fort[hidden]{display:none}
.gwk__fort .gwk__balken{flex:0 0 112px}
.gwk__balken{display:flex;gap:4px;height:5px}
.gwk__balken i{flex:1;border-radius:99px;background:var(--linie-hell);position:relative;overflow:hidden}
.gwk__balken i::after{content:"";position:absolute;inset:0;background:var(--gruen);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e-soft)}
.gwk__balken i.ist-voll::after{transform:scaleX(1)}
.gwk__balken i.ist-jetzt::after{transform:scaleX(.5);background:var(--beige)}
.gwk__forttext{display:block;margin-top:0;white-space:nowrap;font-size:13px;color:var(--tinte-3);font-variant-numeric:tabular-nums}

/* Bühne */
.gwk__buehne{position:relative;margin-top:16px;border-radius:var(--r-karte);background:linear-gradient(180deg,#FAFAF7 0%,#F2F1EC 100%);box-shadow:inset 0 0 0 1px var(--linie-hell);overflow:hidden;perspective:900px}
.gwk__buehne::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 55% at 50% 38%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%)}
.gwk__szene{position:relative;height:140px;padding:8px 12px;transition:transform .6s var(--e-soft)}
.gwk__szene svg{width:100%;height:100%;overflow:visible}
.gwk__szene svg text{font-family:var(--schrift)}
.gwk__leer{position:absolute;inset:auto 0 14px;text-align:center;font-size:13.5px;color:var(--tinte-3);pointer-events:none;transition:opacity .3s}
.gwk__chips{display:none;flex-wrap:wrap;gap:6px;padding:0 14px 14px}
.gwk__chips span{display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;border-radius:var(--r-chip);background:#fff;box-shadow:inset 0 0 0 1px var(--linie-hell);font-size:12.5px;color:var(--tinte-2);animation:chipein .35s var(--e-soft) both}
@keyframes chipein{from{opacity:0;transform:translateY(4px)}}
.gwk.ist-schritt-1 .gwk__buehnebox{display:none}
.gwk.ist-schritt-1 .gwk__szene{opacity:.5}
.gwk:not(.ist-leer) .gwk__leer{opacity:0}

/* Schritt */
.gwk__schritt{margin-top:14px;transition:opacity .16s var(--e-ui),transform .16s var(--e-ui)}
.gwk__schritt.ist-raus{opacity:0;transform:translateX(-12px)}
.gwk__schritt.ist-rein{animation:schrittrein .28s var(--e-soft) both}
@keyframes schrittrein{from{opacity:0;transform:translateX(12px)}}
.gwk__frage{font-size:clamp(19px,1vw + 14px,24px);line-height:1.22;outline:none}
.gwk__frage:focus-visible{outline:2px solid var(--gruen);outline-offset:4px}
.gwk__hilfe{margin-top:6px;font-size:14.5px;color:var(--tinte-3)}
.gwk__gruppe{margin-top:22px}
.gwk__gruppe:first-of-type{margin-top:16px}
.gwk__gtitel{display:block;margin-bottom:10px;font-size:15px;font-weight:600}
.gwk__gtitel small{font-weight:400;color:var(--tinte-3);font-size:13.5px}

/* Kacheln */
.gwk__kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.gwk__kachel{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:44px;padding:8px 8px 12px;border:0;border-radius:var(--r-kachel);background:#fff;box-shadow:inset 0 0 0 1px var(--linie),var(--sch-1);text-align:left;transition:transform .3s var(--e-soft),box-shadow .25s var(--e-ui)}
.gwk__kachel:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px #C9C6BE,var(--sch-2)}
.gwk__kachel[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--gruen),var(--sch-2)}
.gwk__kbild{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;background:linear-gradient(180deg,#F7F7F3,#EFEEE8);overflow:hidden}
.gwk__kbild{background:#F8F8F4}
.gwk__kbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.gwk__kbild img.gwk__kicon{inset:14% 22%;width:56%;height:72%;object-fit:contain;mix-blend-mode:normal}
.gwk__ktitel{display:block;margin:10px 4px 0;font-size:15.5px;font-weight:600;line-height:1.25}
.gwk__ksub{display:block;margin:3px 4px 0;font-size:13px;line-height:1.35;color:var(--tinte-3)}
.gwk__haken{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;background:var(--gruen);opacity:0;transform:scale(.6);transition:opacity .2s,transform .35s var(--e-snap)}
.gwk__haken svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .5s var(--e-soft) .08s}
[aria-checked="true"] > .gwk__haken{opacity:1;transform:scale(1)}
[aria-checked="true"] > .gwk__haken svg{stroke-dashoffset:0}
.gwk__kacheln--text .gwk__kachel{padding:14px 16px;min-height:76px;justify-content:center}
.gwk__kacheln--text .gwk__ktitel,.gwk__kacheln--text .gwk__ksub{margin-left:0;margin-right:34px}
.gwk__kacheln--text .gwk__ktitel{margin-top:0}
.gwk__kacheln--text .gwk__haken{top:50%;margin-top:-13px}
.gwk__kacheln--farbe .gwk__kachel{flex-direction:row;align-items:center;gap:12px;padding:12px 14px;min-height:68px}
.gwk__kacheln--farbe .gwk__ktitel{margin:0}
.gwk__kacheln--farbe .gwk__ksub{margin:2px 0 0}
.gwk__kacheln--farbe .gwk__haken{top:50%;margin-top:-13px}
.gwk__ktext{display:block;min-width:0;padding-right:30px}
.gwk__muster{flex:none;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 2px 6px rgba(27,42,38,.10)}
.gwk__muster--glas{background-size:cover;background-position:center}
.gwk__muster--frage{display:grid;place-items:center;background:var(--papier);color:var(--gruen);font-weight:600}

/* Chips (Mehrfachauswahl) */
.gwk__chipliste{display:flex;flex-wrap:wrap;gap:8px}
.gwk__chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px 8px 10px;border:0;border-radius:var(--r-chip);background:#fff;box-shadow:inset 0 0 0 1px var(--linie);font-size:14.5px;line-height:1.25;text-align:left;transition:background-color .2s var(--e-ui),box-shadow .2s var(--e-ui),color .2s,transform .3s var(--e-soft)}
.gwk__chip:hover{box-shadow:inset 0 0 0 1px var(--tinte-3)}
.gwk__chip .gwk__icon{width:32px;height:32px;flex:none;margin:-4px 0}
.gwk__chip[aria-checked="true"]{background:var(--gruen-hauch);color:var(--tinte);box-shadow:inset 0 0 0 2px var(--gruen)}
.gwk__chip--ohne[aria-checked="true"]{background:var(--gruen);color:#fff;box-shadow:none}
.gwk__chip:active{transform:scale(.97)}
.gwk__chip[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.gwk__chip small{display:block;font-size:12px;color:var(--tinte-3);font-weight:400}
.gwk__chip--ohne[aria-checked="true"] small{color:rgba(255,255,255,.75)}
.gwk__chip--ohne{padding-left:16px}
.gwk__icon{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gwk__icon .a{stroke:var(--gruen)}
.gwk__icon .b{stroke:var(--beige)}

/* Regler */
.gwk__regler{margin-top:18px}
.gwk__rkopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.gwk__rkopf label{font-size:15px;font-weight:600}
.gwk__zahl{display:inline-flex;align-items:center;gap:6px}
.gwk__zahl input{width:78px;min-height:44px;padding:0 10px;border:0;border-radius:var(--r-feld);box-shadow:inset 0 0 0 1px var(--linie);background:#fff;font-size:16px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.gwk__zahl input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--gruen)}
.gwk__zahl span{font-size:15px;color:var(--tinte-3)}
.gwk__spur{position:relative;height:44px;display:flex;align-items:center}
.gwk__spur input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;--p:30%}
.gwk__spur input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--gruen) 0 var(--p),var(--linie-hell) var(--p) 100%)}
.gwk__spur input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:var(--linie-hell)}
.gwk__spur input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--gruen)}
.gwk__spur input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(27,42,38,.14),0 3px 10px rgba(27,42,38,.18),inset 0 0 0 7px #fff,inset 0 0 0 14px var(--gruen);transition:transform .2s var(--e-snap)}
.gwk__spur input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:radial-gradient(circle,var(--gruen) 0 6px,#fff 7px);box-shadow:0 0 0 1px rgba(27,42,38,.14),0 3px 10px rgba(27,42,38,.18)}
.gwk__spur input[type=range]:active::-webkit-slider-thumb{transform:scale(1.1)}
.gwk__spur input[type=range]:focus-visible{outline:none}
.gwk__spur input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--gruen)}
.gwk__grenzen{display:flex;justify-content:space-between;font-size:12.5px;color:var(--tinte-3);margin-top:-4px}
.gwk__mehr{margin-top:2px}
.gwk__hinweis{margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--papier);font-size:14px;color:var(--tinte-2)}
.gwk__flaeche{display:inline-flex;align-items:center;gap:8px;margin-top:18px;min-height:36px;padding:6px 14px;border-radius:var(--r-chip);background:var(--beige-hauch);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}

/* Felder */
.feld{position:relative;margin-top:12px}
.feld input,.feld textarea{display:block;width:100%;min-height:56px;padding:22px 14px 8px;border:0;border-radius:var(--r-feld);background:#fff;box-shadow:inset 0 0 0 1px var(--linie);font-size:16px;line-height:1.35;transition:box-shadow .2s var(--e-ui)}
.feld textarea{min-height:96px;resize:vertical}
.feld label{position:absolute;left:15px;top:17px;font-size:16px;color:var(--tinte-3);pointer-events:none;transform-origin:left top;transition:transform .2s var(--e-ui),color .2s}
.feld input:focus,.feld textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--gruen)}
.feld input:focus + label,.feld input:not(:placeholder-shown) + label,.feld textarea:focus + label,.feld textarea:not(:placeholder-shown) + label{transform:translateY(-10px) scale(.78);color:var(--tinte-2)}
.feld textarea::placeholder{color:transparent}
.feld textarea:focus::placeholder{color:var(--tinte-3)}
.feld__hilfe{display:block;margin:5px 2px 0;font-size:13px;color:var(--tinte-3)}
.feld__fehler{display:block;margin:5px 2px 0;font-size:13.5px;color:var(--fehler);font-weight:500}
.feld__fehler:empty{display:none}
.feld.err input,.feld.err textarea{box-shadow:inset 0 0 0 2px var(--fehler);animation:schuetteln .32s var(--e-ui)}
.feld.ok input{box-shadow:inset 0 0 0 1px #9FB5AC}
.feld.ok::after{content:"";position:absolute;right:16px;top:21px;width:14px;height:8px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.feld__pflicht{color:var(--fehler);margin-left:2px}
@keyframes schuetteln{25%{transform:translateX(-4px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
.felder2{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 10px}
.gwk__gebiet{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14.5px;color:var(--ok);font-weight:500}
.gwk__gebiet--pruefen{color:var(--tinte-2)}
.gwk__gebiet:empty{display:none}
.gwk__gebiet svg{width:20px;height:20px}
.gwk__fehler-schritt{margin-top:10px;font-size:14px;color:var(--fehler);font-weight:500}
.gwk__fehler-schritt:empty{display:none}

/* Fotos */
.gwk__fotos{margin-top:22px;padding:16px;border-radius:var(--r-karte);background:var(--papier)}
.gwk__fotos input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.gwk__fotoliste{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gwk__fotoliste:empty{display:none}
.gwk__foto{position:relative;width:72px;height:72px;border-radius:12px;overflow:hidden;background:#e8e6e0;animation:chipein .3s var(--e-soft) both}
.gwk__foto img{width:100%;height:100%;object-fit:cover}
.gwk__foto button{position:absolute;top:2px;right:2px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(27,42,38,.72);color:#fff;display:grid;place-items:center}
.gwk__foto button svg{width:14px;height:14px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round}
.gwk__fotowahl{margin-top:12px}

/* Zusammenfassung, Kontakt */
.gwk__summe{margin-top:16px;padding:6px 16px;border-radius:var(--r-karte);background:var(--papier)}
.gwk__summe h4{margin:10px 0 2px;font-size:14px;font-weight:600;color:var(--tinte-2)}
.gwk__summe dl{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) auto;align-items:baseline;gap:0 12px}
.gwk__summe dt,.gwk__summe dd{padding:8px 0;border-top:1px solid var(--linie-hell);font-size:14px}
.gwk__summe dl > :nth-child(-n+3){border-top:0}
.gwk__summe dt{color:var(--tinte-3)}
.gwk__summe dd{font-weight:500}
.gwk__summe .gwk__aendern{min-height:32px;padding:0;border:0;background:none;color:var(--gruen);font-size:13.5px;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(47,74,66,.35)}
.gwk__summe .gwk__aendern:hover{text-decoration-color:var(--gruen)}
.gwk__klapp{margin-top:12px}
.gwk__klapp summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:15px;font-weight:500;color:var(--gruen);list-style:none}
.gwk__klapp summary::-webkit-details-marker{display:none}
.gwk__klapp summary::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gruen-hauch);font-weight:600;transition:transform .3s var(--e-soft)}
.gwk__klapp[open] summary::before{transform:rotate(45deg)}
.gwk__ansprech{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 14px;border-radius:var(--r-karte);box-shadow:inset 0 0 0 1px var(--linie-hell)}
.gwk__ansprech img{width:48px;height:48px;border-radius:14px;background:var(--papier);padding:6px;flex:none}
.gwk__ansprech b{display:block;font-size:15px;font-weight:600}
.gwk__ansprech span{display:block;font-size:13.5px;color:var(--tinte-3)}
.gwk__ansprech a{color:var(--tinte-2);font-weight:600;text-decoration:none;white-space:nowrap}
.gwk__ds{margin-top:16px;font-size:13px;line-height:1.5;color:var(--tinte-3)}
.gwk__ds a{color:var(--tinte-2)}
.gwk__honig{display:none}

/* Navigation im Schritt */
.gwk__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.gwk__nav .btn--gruen{margin-left:auto}
.gwk__nav--leer{justify-content:flex-start}
.gwk__ausweg{margin-top:10px}

/* Danke */
.gwk__danke{padding:8px 0 4px}
.gwk__danke-fuss--fotos p:first-child{padding:12px 14px;border-radius:14px;background:var(--beige-hauch)}
.gwk__fotonachweis{margin-top:8px}
.gwk__danke-kopf{display:flex;align-items:center;gap:14px}
.gwk__danke-kopf svg{width:52px;height:52px;flex:none}
.gwk__danke-kopf circle{fill:var(--gruen)}
.gwk__danke-kopf path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:hakenzieh .7s var(--e-soft) .2s forwards}
@keyframes hakenzieh{to{stroke-dashoffset:0}}
.gwk__danke h3{font-size:clamp(22px,1.4vw + 14px,30px);line-height:1.15;outline:none}
.gwk__danke-lead{margin-top:8px;font-size:16px;color:var(--tinte-2)}
.gwk__weiter{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:w}
.gwk__weiter li{position:relative;padding:12px 14px 12px 50px;border-radius:16px;background:var(--papier);font-size:15px;counter-increment:w;animation:chipein .4s var(--e-soft) both}
.gwk__weiter li:nth-child(2){animation-delay:.15s}
.gwk__weiter li:nth-child(3){animation-delay:.3s}
.gwk__weiter li::before{content:counter(w);position:absolute;left:14px;top:11px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--linie);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--gruen)}
.gwk__danke-fuss{display:grid;gap:6px;margin-top:18px;font-size:14.5px;color:var(--tinte-2)}
.gwk__danke-fuss a{color:var(--tinte);font-weight:600}
.gwk__testmodus{margin-top:14px;font-size:12.5px;color:var(--tinte-3)}

/* Konfigurator ab Tablet */
@media (min-width:600px){
  .gwk__szene{height:200px}
}
@media (min-width:861px){
  .gwk{min-height:520px}
  .gwk__raster{grid-template-columns:minmax(0,1fr) minmax(300px,350px);grid-template-areas:"kopf buehne" "frage buehne";grid-template-rows:auto 1fr;column-gap:48px}
  .gwk__buehnebox{align-self:start;position:sticky;top:calc(var(--kopf-h) + 12px)}
  .gwk.ist-schritt-1 .gwk__buehnebox{display:block}
  .gwk__buehne{margin-top:4px;border-radius:var(--r-flaeche)}
  .gwk__szene{height:300px;padding:18px 18px 8px}
  .gwk__chips{display:flex}
  .gwk__kacheln{gap:14px;margin-top:14px}
  .gwk__kacheln--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gwk__kacheln--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gwk__schritt{margin-top:14px}
  .gwk__titel{margin-top:8px}
  .gwk__fort .gwk__balken{width:220px;flex:none}
  .gwk__kacheln--4 .gwk__kbild{aspect-ratio:16/11}
  .gwk__kacheln--4 .gwk__kachel{padding-bottom:9px}
  .gwk__kopf{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
}
@media (min-width:861px) and (max-width:1100px){
  .gwk__raster{grid-template-columns:minmax(0,1fr) 300px;column-gap:32px}
  .gwk__szene{height:240px}
  .gwk__kacheln--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Fenster (Modal) */
.fenster{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px}
.fenster[hidden]{display:none}
.fenster__hg{position:absolute;inset:0;background:rgba(18,30,26,.48);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:hgein .3s var(--e-calm) both}
.fenster__karte{position:relative;width:min(1120px,100%);max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain;padding:40px 44px 36px;border-radius:var(--r-flaeche);background:#fff;box-shadow:0 30px 80px rgba(10,20,17,.28);animation:fensterein .42s var(--e-soft) both}
.fenster__zu{position:absolute;top:16px;right:16px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:var(--papier);display:grid;place-items:center;transition:background-color .2s}
.fenster__zu:hover{background:var(--linie-hell)}
.fenster__zu svg{width:20px;height:20px;fill:none;stroke:var(--tinte);stroke-width:2;stroke-linecap:round}
.gwk--fenster{min-height:0}
.gwk--fenster .gwk__buehnebox{top:0}
@keyframes hgein{from{opacity:0}}
@keyframes fensterein{from{opacity:0;transform:translateY(14px) scale(.985)}}
html.fenster-offen{overflow:hidden}

/* Telefon schwebend (Desktop) */
.fab{display:none}
@media (min-width:861px){
  .fab{position:fixed;right:24px;bottom:24px;z-index:40;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 16px;border-radius:var(--r-chip);background:var(--gruen);color:#fff;font-weight:600;text-decoration:none;box-shadow:0 10px 28px rgba(20,36,31,.28);transition:opacity .3s var(--e-calm),transform .4s var(--e-soft)}
  .fab .i{width:20px;height:20px}
  .fab:hover{background:var(--gruen-hover)}
  .fab.ist-weg{opacity:0;transform:translateY(14px);pointer-events:none}
}

/* =====================================================================
   Abschnitt 2 · Sektionen 4 bis 12, Footer (RGN Marketing 2026)
   ===================================================================== */

/* ---------- Gemeinsam ---------- */
.sek{padding:72px 0;background:var(--weiss)}
.sek--papier{background:var(--papier)}
.h2 em{display:block;font-style:normal;color:#50736A}
.sek__kopf{max-width:760px;margin-bottom:36px}
.sek__kopf--zwei{max-width:none;display:grid;gap:16px}
.sek__lead{display:grid;gap:14px;max-width:38em;font-size:16.5px;line-height:1.6;color:var(--tinte-2)}
.sek__aktion{display:flex;justify-content:center;margin-top:40px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.klein{font-size:13.5px;color:var(--tinte-3)}
.karte{background:#fff;border-radius:var(--r-karte);box-shadow:0 0 0 1px var(--linie-hell),var(--sch-1)}
.haken{display:grid;gap:10px;margin-top:4px}
.haken li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;line-height:1.45}
.haken .ck{width:22px;height:22px;padding:3px;margin-top:-1px;border-radius:50%;background:var(--beige-hauch);stroke:#8C7A50}
.haken--hell li{color:rgba(255,255,255,.9)}
.haken--hell .ck{background:rgba(187,170,130,.16);stroke:var(--beige)}
.btn--hell{background:#fff;color:var(--gruen-tief);box-shadow:0 8px 22px rgba(8,16,13,.22)}
.btn--hell:hover{background:#F4F1E8;transform:translateY(-1px)}
.btn--hell:active{transform:translateY(0) scale(.985)}
.btn--glas{background:rgba(255,255,255,.10);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn--glas:hover{background:rgba(255,255,255,.16)}
.btn .i{width:18px;height:18px}
.tel-link{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 6px;font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.tel-link--hell{color:#fff}
.tel-link--hell .i{color:var(--beige)}
.tel-link:hover span,.tel-link:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
@media (min-width:861px){
  .sek{padding:112px 0}
  .sek__kopf{margin-bottom:52px}
  .sek__kopf--zwei{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:end}
  .sek__kopf--breit{grid-template-columns:minmax(0,1fr);gap:20px;max-width:900px}
  .sek__lead{font-size:17px}
  .sek__aktion{margin-top:52px}
}

/* ---------- 4 · Anlagen ---------- */
.anl__raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.anl__bild{position:relative;overflow:hidden;border-radius:var(--r-kachel);background:var(--linie-hell);isolation:isolate}
.anl__bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-soft)}
.anl__bild figcaption{position:absolute;left:10px;bottom:10px;right:10px;width:max-content;max-width:calc(100% - 20px);padding:7px 12px;border-radius:var(--r-chip);background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12.5px;font-weight:500;line-height:1.3;color:var(--tinte);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.anl__bild--a,.anl__bild--b,.anl__bild--e{grid-column:span 2}
.anl__bild--a{aspect-ratio:4/5}
.anl__bild--b{aspect-ratio:4/3}
.anl__bild--c,.anl__bild--d{aspect-ratio:3/4}
.anl__bild--e{aspect-ratio:16/9}
@media (min-width:861px){
  .anl__raster{grid-template-columns:1.12fr 1fr .78fr;grid-template-rows:290px 290px 380px;gap:14px}
  .anl__bild{aspect-ratio:auto!important;border-radius:var(--r-karte)}
  .anl__bild--a{grid-column:1;grid-row:1 / span 2}
  .anl__bild--b{grid-column:2;grid-row:1}
  .anl__bild--c{grid-column:2;grid-row:2}
  .anl__bild--d{grid-column:3;grid-row:1 / span 2}
  .anl__bild--e{grid-column:1 / span 3;grid-row:3}
  .anl__bild figcaption{left:16px;bottom:16px;font-size:13px}
  .anl__bild:hover img{transform:scale(1.025)}
}

/* ---------- 5 · Chat ---------- */
.chat{position:relative;overflow:hidden;isolation:isolate;padding:72px 0;color:#fff;background:linear-gradient(118deg,#2F4A42 0%,#26403A 44%,#1E322C 100%)}
.chat__licht{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(42% 60% at 22% 50%,rgba(187,170,130,.16) 0%,rgba(187,170,130,0) 70%),radial-gradient(40% 50% at 100% 0%,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 70%)}
.chat__raster{display:grid;gap:44px}
.chat__buehne{display:grid;justify-items:center;gap:14px}
.chat__hinweis{font-size:13px;color:rgba(255,255,255,.6)}
.chat__text{display:grid;gap:16px;align-content:center}
.chat__text .h2 em{color:#E9E1CC}
.chat__text p{font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.8);max-width:36em}
.chat__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:10px}
.chat__text :focus-visible{outline-color:var(--beige)}

.handy{position:relative;width:min(100%,312px);padding:10px;border-radius:46px;background:linear-gradient(160deg,#3A4643,#151C1A);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),0 40px 80px rgba(6,12,10,.45),0 12px 24px rgba(6,12,10,.3)}
.handy::before{content:"";position:absolute;top:18px;left:50%;z-index:3;width:84px;height:24px;margin-left:-42px;border-radius:99px;background:#0B100E}
.handy__in{display:flex;flex-direction:column;height:600px;overflow:hidden;border-radius:37px;background:#ECE9E1;color:var(--tinte)}
.wa-kopf{display:flex;align-items:center;gap:10px;padding:52px 14px 12px;background:var(--gruen);color:#fff}
.wa-kopf__bild{width:38px;height:38px;border-radius:50%;background:#fff;object-fit:contain;padding:3px;flex:none}
.wa-kopf__text{display:grid;min-width:0;line-height:1.2}
.wa-kopf__text b{font-size:13.5px;font-weight:600;text-wrap:balance}
.wa-kopf__text span{margin-top:2px;font-size:12px;color:rgba(255,255,255,.72)}
.wa-fenster{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto;scrollbar-width:none;padding:14px 10px 8px;background:#ECE9E1 radial-gradient(rgba(47,74,66,.06) 1px,transparent 1.2px) 0 0/16px 16px}
.wa-fenster::-webkit-scrollbar{display:none}
.wa-lauf{display:flex;flex-direction:column;gap:6px;margin:auto 0 0;padding:0;list-style:none}
.blase{position:relative;max-width:84%;padding:8px 11px;border-radius:14px;font-size:13.5px;line-height:1.42;box-shadow:0 1px 1px rgba(27,42,38,.08)}
.blase--aus{align-self:flex-end;background:#D7E6DF;border-bottom-right-radius:5px}
.blase--ein{align-self:flex-start;background:#fff;border-bottom-left-radius:5px}
.blase__foto{display:block;margin:-4px -7px 7px;overflow:hidden;border-radius:10px}
.blase__foto img{width:100%;height:190px;object-fit:cover}
.wa-tippt{display:none;align-self:flex-start;gap:4px;margin-top:6px;padding:12px 13px;border-radius:14px;border-bottom-left-radius:5px;background:#fff;box-shadow:0 1px 1px rgba(27,42,38,.08)}
.wa-tippt.ist-rechts{align-self:flex-end;background:#D7E6DF;border-radius:14px;border-bottom-right-radius:5px}
.wa-tippt.ist-an{display:inline-flex}
.wa-tippt i{width:6px;height:6px;border-radius:50%;background:var(--tinte-3);animation:tipp 1s var(--e-calm) infinite}
.wa-tippt i:nth-child(2){animation-delay:.15s}
.wa-tippt i:nth-child(3){animation-delay:.3s}
@keyframes tipp{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.wa-fuss{display:flex;align-items:center;gap:8px;padding:8px 10px 18px;background:#ECE9E1}
.wa-fuss__feld{flex:1;min-height:36px;display:flex;align-items:center;padding:0 14px;border-radius:99px;background:#fff;font-size:13px;color:var(--tinte-3)}
.wa-fuss__senden{width:36px;height:36px;border-radius:50%;background:var(--gruen);display:grid;place-items:center;flex:none}
.wa-fuss__senden svg{width:16px;height:16px;fill:#fff}
html.js .wa-lauf li{display:none}
html.js .wa-lauf li.ist-da{display:block;animation:blaseein .42s var(--e-soft) both}
html.js .wa-lauf.ist-fertig li{display:block}
@keyframes blaseein{from{opacity:0;transform:translateY(8px) scale(.97)}}
.blase--aus{transform-origin:right bottom}
.blase--ein{transform-origin:left bottom}
@media (min-width:861px){
  .chat{padding:120px 0}
  .chat__raster{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center}
  .handy{width:332px}
  .handy__in{height:640px}
  .chat__text{gap:18px}
  .chat__text p{font-size:17px}
}

@media (min-width:861px) and (max-width:1120px){
  .sek__kopf--zwei{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
  .chat__raster{grid-template-columns:minmax(0,1fr);justify-items:center;gap:56px}
  .chat__text{justify-self:stretch;max-width:760px}
}

/* ---------- 6 · Produkte (Reiter) ---------- */
.reiter__leiste{position:relative;display:flex;gap:4px;width:max-content;max-width:100%;padding:5px;margin:0 0 28px;overflow-x:auto;scrollbar-width:none;border-radius:var(--r-chip);background:var(--papier);box-shadow:inset 0 0 0 1px var(--linie-hell)}
.reiter__leiste::-webkit-scrollbar{display:none}
.reiter__marke{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:var(--r-chip);background:#fff;box-shadow:0 1px 2px rgba(27,42,38,.08),0 4px 12px rgba(27,42,38,.08);transition:transform .45s var(--e-soft),width .45s var(--e-soft);pointer-events:none}
.reiter__knopf{position:relative;z-index:1;flex:none;min-height:44px;padding:0 18px;border:0;border-radius:var(--r-chip);background:none;font-size:15px;font-weight:500;color:var(--tinte-2);white-space:nowrap;transition:color .2s}
.reiter__knopf:hover{color:var(--tinte)}
.reiter__knopf[aria-selected="true"]{color:var(--tinte);font-weight:600}
html:not(.js) .reiter__knopf[aria-selected="true"]{background:#fff}
.reiter__panel{display:grid;gap:28px}
.reiter__panel:focus-visible{outline-offset:8px}
.reiter__panel.ist-neu{animation:panelein .5s var(--e-soft) both}
@keyframes panelein{from{opacity:0;transform:translateY(8px)}}
.reiter__bild{overflow:hidden;border-radius:var(--r-karte);background:var(--linie-hell)}
.reiter__bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.reiter__bild picture img{aspect-ratio:auto}
.reiter__text{display:grid;gap:14px;align-content:start}
.reiter__text h3{font-size:22px;line-height:1.2}
.reiter__text h4{margin:8px 0 0;font-size:16px;font-weight:600}
.reiter__text p{color:var(--tinte-2);line-height:1.62}
.reiter__text .btn{justify-self:start;margin-top:10px}
.reiter__renders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.reiter__renders figure{padding:8px 8px 10px;border-radius:var(--r-kachel);background:var(--papier);box-shadow:inset 0 0 0 1px var(--linie-hell)}
.reiter__renders img{border-radius:14px;mix-blend-mode:multiply}
.reiter__renders figcaption{margin-top:6px;text-align:center;font-size:13px;font-weight:500;color:var(--tinte-2)}
@media (max-width:860px){.reiter__text .btn{white-space:normal;text-align:center;justify-self:stretch}}
@media (min-width:861px){
  .reiter__leiste{margin-bottom:40px}
  .reiter__panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
  .reiter__bild{position:sticky;top:calc(var(--kopf-h) + 24px)}
  .reiter__text{padding-top:6px}
  .reiter__text h3{font-size:26px}
}

/* ---------- 7 · Material ---------- */
.mat__raster{display:grid;gap:12px}
.mat__schema{padding:18px 12px 6px;overflow:hidden}
.mat__schema svg{width:100%;height:auto;font-family:var(--schrift)}
.mat__kachel{display:grid;gap:10px;align-content:start;padding:24px}
.mat__kachel h3{font-size:18px;line-height:1.25}
.mat__kachel p{color:var(--tinte-2);font-size:15px;line-height:1.58}
.mat__kachel .klein{font-size:13.5px;color:var(--tinte-3)}
.farben{display:grid;gap:10px}
.farben li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--tinte-2);line-height:1.35}
.farben b{display:block;color:var(--tinte);font-weight:600}
.farben__muster{flex:none;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 -6px 10px rgba(0,0,0,.10),inset 0 6px 10px rgba(255,255,255,.18)}
.farben__muster--db703{background:#4A4D50}
.farben__muster--9007{background:#878581}
.farben__muster--9016{background:#F1F0EA}
.glaeser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.glaeser img{width:100%;border-radius:14px;background:var(--papier)}
.glaeser figcaption{margin-top:6px;font-size:13px;font-weight:500;color:var(--tinte-2);text-align:center}
.sch-wasser{stroke-dashoffset:0}
html.js .mat__schema .sch-label{opacity:0;transition:opacity .7s var(--e-calm) .5s}
html.js .mat__schema.rv-in .sch-label{opacity:1}
html.js .mat__schema .sch-wasser{opacity:0}
html.js .mat__schema.rv-in .sch-wasser{opacity:1;animation:wasser 2.2s var(--e-calm) .9s both}
@keyframes wasser{from{stroke-dashoffset:84;opacity:0}20%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@media (min-width:861px){
  .mat__raster{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
  .mat__schema{grid-column:1;grid-row:1 / span 2;padding:28px 20px 10px;display:flex;align-items:center}
  .mat__kachel{padding:28px}
}

/* ---------- 8 · Preis und Vergleich ---------- */
.faktoren{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.faktoren li{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:6px 16px 6px 6px;border-radius:var(--r-chip);background:var(--papier);box-shadow:inset 0 0 0 1px var(--linie-hell);font-size:15px;font-weight:600}
.faktoren span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gruen);color:#fff;font-size:13.5px;font-variant-numeric:tabular-nums}
html.js .faktoren li{opacity:0;transform:translateY(6px);transition:opacity .45s var(--e-calm),transform .45s var(--e-calm)}
html.js .faktoren.rv-in li{opacity:1;transform:none}
html.js .faktoren.rv-in li:nth-child(2){transition-delay:.08s}
html.js .faktoren.rv-in li:nth-child(3){transition-delay:.16s}
html.js .faktoren.rv-in li:nth-child(4){transition-delay:.24s}
html.js .faktoren.rv-in li:nth-child(5){transition-delay:.32s}
.preis__text{display:grid;gap:12px;max-width:44em;margin-top:24px;color:var(--tinte-2);font-size:16.5px;line-height:1.6}
.vergl__titel{margin:64px 0 24px;font-size:22px;line-height:1.25;max-width:24em}
.vergl{display:grid;gap:12px}
.vergl__karte{padding:24px;border-radius:var(--r-karte)}
.vergl__karte--gw{background:#fff;box-shadow:0 0 0 1.5px var(--gruen),var(--sch-3)}
.vergl__karte--bausatz{background:var(--papier);box-shadow:inset 0 0 0 1px var(--linie-hell)}
.vergl__kopf{display:flex;align-items:center;gap:12px;min-height:52px;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--linie-hell)}
.vergl__karte--gw .vergl__kopf img{height:40px;width:auto}
.vergl__karte--bausatz .vergl__kopf img{width:44px;height:44px}
.vergl__karte--bausatz .vergl__kopf span{font-size:17px;font-weight:600;color:var(--tinte-2)}
.vergl__liste li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;font-size:15px;line-height:1.45;border-bottom:1px solid var(--linie-hell)}
.vergl__liste li:last-child{border-bottom:0}
.vergl__karte--bausatz .vergl__liste li{color:var(--tinte-2)}
.ck--gruen{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--gruen);stroke:#fff;stroke-width:2.6}
.x{width:24px;height:24px;flex:none;padding:5px;border-radius:50%;background:rgba(180,72,60,.10);fill:none;stroke:var(--fehler);stroke-width:2.4;stroke-linecap:round}
html.js .vergl .ck--gruen path{stroke-dasharray:26;stroke-dashoffset:26}
html.js .vergl.rv-in .ck--gruen path{animation:ckdraw .6s var(--e-soft) .2s both}
html.js .vergl.rv-in li:nth-child(2) .ck--gruen path{animation-delay:0.28s}
html.js .vergl.rv-in li:nth-child(3) .ck--gruen path{animation-delay:0.36s}
html.js .vergl.rv-in li:nth-child(4) .ck--gruen path{animation-delay:0.44s}
html.js .vergl.rv-in li:nth-child(5) .ck--gruen path{animation-delay:0.52s}
html.js .vergl.rv-in li:nth-child(6) .ck--gruen path{animation-delay:0.60s}
@media (min-width:861px){
  .faktoren{gap:0;flex-wrap:nowrap;justify-content:space-between;max-width:980px}
  .faktoren::before{content:"";position:absolute;left:24px;right:24px;top:50%;height:1px;background:var(--linie);z-index:0}
  .faktoren li{position:relative;z-index:1;background:#fff}
  .preis__text{margin-top:32px;font-size:17px}
  .vergl__titel{margin:88px 0 28px;font-size:26px}
  .vergl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;grid-template-rows:auto repeat(6,auto)}
  .vergl__karte{display:grid;grid-row:span 7;grid-template-rows:subgrid;padding:28px 32px}
  .vergl__liste{display:contents}
  .vergl__liste li{align-items:center;padding:14px 0;font-size:15.5px}
}

/* ---------- 9 · Ablauf ---------- */
.ablauf__liste{position:relative;display:grid;gap:14px;margin:0;padding:0;list-style:none}
.ablauf__liste::before{content:"";position:absolute;left:19px;top:20px;bottom:40px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--gruen),var(--beige));transform-origin:top;transform:scaleY(1)}
.ablauf__schritt{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;align-items:start}
.ablauf__karte{display:grid;gap:8px;padding:22px 22px 24px;border-radius:var(--r-karte);background:#fff;box-shadow:0 0 0 1px var(--linie-hell),var(--sch-1)}
.ablauf__nr{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gruen);color:#fff;font-size:15px;font-weight:600;box-shadow:0 0 0 6px var(--papier)}
.ablauf__karte img{width:56px;height:56px;margin:-4px 0 4px -4px}
.ablauf__karte h3{font-size:18px;line-height:1.25}
.ablauf__karte p{font-size:15px;line-height:1.58;color:var(--tinte-2)}
html.js .ablauf__liste::before{transform:scaleY(0);transition:transform 1.4s var(--e-calm) .2s}
html.js .ablauf__liste.rv-in::before{transform:scaleY(1)}
html.js .ablauf__nr{transform:scale(.6);opacity:0;transition:transform .5s var(--e-snap),opacity .3s}
html.js .ablauf__liste.rv-in .ablauf__nr{transform:none;opacity:1}
html.js .ablauf__liste.rv-in li:nth-child(2) .ablauf__nr{transition-delay:.35s}
html.js .ablauf__liste.rv-in li:nth-child(3) .ablauf__nr{transition-delay:.7s}
html.js .ablauf__liste.rv-in li:nth-child(4) .ablauf__nr{transition-delay:1.05s}
@media (min-width:861px){
  .ablauf__liste{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .ablauf__liste::before{left:20px;right:12%;top:19px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--gruen),var(--beige));transform-origin:left}
  html.js .ablauf__liste::before{transform:scaleX(0)}
  html.js .ablauf__liste.rv-in::before{transform:scaleX(1)}
  .ablauf__schritt{grid-template-columns:minmax(0,1fr);grid-template-rows:40px 1fr;row-gap:24px;align-items:stretch}
  .ablauf__karte{padding:26px 24px 28px;align-content:start}
}

/* ---------- 10 · Region ---------- */
.region__raster{display:grid;gap:40px}
.region__text{display:grid;gap:14px;align-content:start}
.region__text > p{color:var(--tinte-2);font-size:16.5px;line-height:1.6;max-width:36em}
.region__titel{grid-column:1 / -1}
.region__fakten{display:grid;margin-top:8px;border-top:1px solid var(--linie-hell)}
.region__fakten li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--linie-hell);font-size:15px}
.region__fakten b{font-weight:600}
.region__fakten span{color:var(--tinte-2)}
.region__fakten a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;color:var(--tinte);font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.region__fakten a:hover{text-decoration:underline;text-underline-offset:4px}
.region__aktion{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.region__karte{padding:16px;border-radius:var(--r-flaeche);background:var(--papier);box-shadow:inset 0 0 0 1px var(--linie-hell)}
.region__karte svg{width:100%;height:auto;font-family:var(--schrift)}
html.js .region__karte .kt-pin{opacity:0;transform:translateY(-8px);transform-box:fill-box;transition:opacity .5s var(--e-calm),transform .7s var(--e-snap)}
html.js .region__karte.rv-in .kt-pin{opacity:1;transform:none;transition-delay:.4s}
html.js .region__karte.rv-in .kt-pin--sitz{transition-delay:.7s}
@media (max-width:520px){
  .sch-label{font-size:22px}
  .kt-ort{font-size:19px}
  .kt-stadt{font-size:23px}
}
@media (min-width:861px){
  .region__raster{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:52px 72px;align-items:center}
  .region__titel{margin-bottom:0}
  .region__text > p{font-size:17px}
  .region__karte{padding:24px}
}

/* ---------- 11 · FAQ ---------- */
.faq__raster{display:grid;gap:28px}
.faq__liste{border-top:1px solid var(--linie)}
.faq__frage{border-bottom:1px solid var(--linie)}
.faq__frage summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:18px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:600;line-height:1.35;border-radius:8px}
.faq__frage summary::-webkit-details-marker{display:none}
.faq__frage summary i{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--linie);transition:background-color .25s,box-shadow .25s,transform .45s var(--e-soft)}
.faq__frage summary i::before,.faq__frage summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--tinte);transition:transform .45s var(--e-soft),background-color .25s}
.faq__frage summary i::after{transform:rotate(90deg)}
.faq__frage summary:hover i{box-shadow:inset 0 0 0 1px var(--tinte-3)}
.faq__frage[open] summary i{background:var(--gruen);box-shadow:none;transform:rotate(180deg)}
.faq__frage[open] summary i::before,.faq__frage[open] summary i::after{background:#fff}
.faq__frage[open] summary i::after{transform:rotate(180deg)}
.faq__antwort{display:grid;gap:12px;padding:0 48px 24px 0;color:var(--tinte-2);font-size:15.5px;line-height:1.65;overflow:hidden}
@media (min-width:861px){
  .faq__raster{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start}
  .faq .h2{font-size:clamp(26px,1.5vw + 12px,33px)}
  .faq__kopf{position:sticky;top:calc(var(--kopf-h) + 32px)}
  .faq__frage summary{min-height:72px;padding:22px 0;font-size:18px}
  .faq__antwort{font-size:16px}
}

/* ---------- 12 · Abschluss ---------- */
.final{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;min-height:640px;padding:0 0 56px;color:#fff;background:var(--gruen-tief)}
.final__bild{position:absolute;inset:0;z-index:-2}
.final__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,26,22,.05) 0%,rgba(14,26,22,.35) 40%,rgba(14,26,22,.88) 78%,rgba(14,26,22,.94) 100%)}
.final__in{display:grid;gap:16px}
.final .h2{font-size:clamp(28px,2.6vw + 14px,44px)}
.final .h2 em{color:#E9E1CC}
.final p{max-width:34em;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.86)}
.final__aktion{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.final .final__zeile{font-size:13.5px;color:rgba(255,255,255,.66)}
.final :focus-visible{outline-color:var(--beige)}
@media (max-width:860px){.final__aktion .btn{flex:1 1 100%}}
@media (max-width:860px){.sek .h2,.region .h2{font-size:clamp(21px,4.4vw + 7px,30px);text-wrap:balance}.final .h2{font-size:clamp(25px,4.4vw + 9px,32px)}}
@media (min-width:861px){
  .final{align-items:center;min-height:min(720px,88vh);padding:120px 0}
  .final::before{background:linear-gradient(90deg,rgba(14,26,22,.9) 0%,rgba(14,26,22,.72) 34%,rgba(14,26,22,.2) 62%,rgba(14,26,22,0) 80%)}
  .final__in{gap:20px}
  .final__in > *{max-width:560px}
  .final__in > .h2{max-width:780px}
  .final p{font-size:17.5px}
}

/* ---------- 13 · Footer ---------- */
.fuss{padding:64px 0 28px;background:var(--gruen-tief);color:rgba(255,255,255,.74);font-size:15px;line-height:1.6}
.fuss__raster{display:grid;gap:32px}
.fuss__marke{display:grid;gap:14px;max-width:24em}
.fuss__marke img{height:42px;width:auto}
.fuss__titel{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.5)}
.fuss__klein{font-size:13.5px;color:rgba(255,255,255,.56)}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
.fuss :focus-visible{outline-color:var(--beige)}
.fuss__kontakt{display:grid;justify-items:start;margin:-10px 0 0}
.fuss__kontakt a{display:inline-flex;align-items:center;min-height:44px}
.fuss__unten{display:grid;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;color:rgba(255,255,255,.56)}
.fuss__links{display:flex;flex-wrap:wrap;gap:0 18px}
.fuss__links a,.fuss__links button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:rgba(255,255,255,.78);font-size:13.5px;text-decoration:none}
.fuss__links a:hover,.fuss__links button:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
@media (min-width:861px){
  .fuss{padding:80px 0 28px}
  .fuss__raster{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px}
  .fuss__unten{grid-template-columns:auto auto;justify-content:space-between;align-items:center}
}

/* ---------- Rechtsseiten und 404 ---------- */
.recht{padding:calc(var(--kopf-h) + 40px) 0 80px;background:var(--papier)}
.recht__karte{max-width:820px;margin:0 auto;padding:32px 22px;border-radius:var(--r-flaeche);background:#fff;box-shadow:0 0 0 1px var(--linie-hell),var(--sch-1)}
.recht h1{font-size:clamp(30px,2.4vw + 16px,44px);line-height:1.1;margin-bottom:8px}
.recht .recht__stand{color:var(--tinte-3);font-size:14px;margin-bottom:28px}
.recht h2{margin:40px 0 12px;font-size:22px;line-height:1.25}
.recht h3{margin:28px 0 8px;font-size:17.5px;line-height:1.3}
.recht h4{margin:20px 0 6px;font-size:16px}
.recht p,.recht li{max-width:68ch;color:var(--tinte-2);line-height:1.68}
.recht p + p{margin-top:12px}
.recht ul{display:grid;gap:6px;margin:10px 0 14px;padding-left:20px;list-style:disc}
.recht a{color:var(--gruen);text-decoration:underline;text-decoration-color:rgba(47,74,66,.35);text-underline-offset:3px;overflow-wrap:anywhere}
.recht a:hover{text-decoration-color:currentColor}
.recht address{font-style:normal;color:var(--tinte-2);line-height:1.68}
.recht .btn{margin-top:8px}
.recht table{width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:14.5px}
.recht th,.recht td{padding:10px 8px;border-bottom:1px solid var(--linie-hell);text-align:left;vertical-align:top;color:var(--tinte-2)}
.recht th{color:var(--tinte);font-weight:600}
.recht .tabelle{overflow-x:auto}
.kopf__zurueck{display:none;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-chip);font-size:15px;font-weight:500;color:var(--tinte-2);text-decoration:none}
.kopf__zurueck:hover{color:var(--tinte);background:rgba(27,42,38,.045)}
.nf{display:grid;place-items:center;min-height:100vh;padding:calc(var(--kopf-h) + 40px) 0 80px;background:var(--papier);text-align:center}
.nf__in{display:grid;gap:16px;justify-items:center;max-width:560px}
.nf__zahl{font-size:clamp(72px,12vw,120px);font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--linie)}
.nf p{color:var(--tinte-2)}
.nf__aktion{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
@media (min-width:861px){
  .kopf__zurueck{display:inline-flex}
  .recht{padding:calc(var(--kopf-h) + 64px) 0 112px}
  .recht__karte{padding:56px 64px}
  .recht h2{font-size:24px}
}

/* ---------- Bewegung ---------- */
html.js [data-reveal]:not([data-reveal="hook"]){opacity:0;transform:translateY(6px);transition:opacity var(--t-soft) var(--e-calm) var(--rv-d,0ms),transform var(--t-soft) var(--e-calm) var(--rv-d,0ms)}
html.js [data-reveal].rv-in:not([data-reveal="hook"]){opacity:1;transform:none}
@media (min-width:861px){html.js [data-reveal]:not([data-reveal="hook"]){transform:translateY(10px)}}
.nw{white-space:nowrap}
.ul{position:relative;display:inline;white-space:nowrap}
.ul svg{position:absolute;left:-2%;right:-2%;bottom:-.12em;width:104%;height:.26em;overflow:visible;pointer-events:none}
.ul path{fill:none;stroke:var(--beige);stroke-width:3.2px;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:260;stroke-dashoffset:0}
html.js .ul path{stroke-dashoffset:260}
html.js .ul.rv-in path{animation-name:rgn-draw;animation-duration:.9s;animation-timing-function:cubic-bezier(.25,1,.3,1);animation-delay:var(--rv-d,0ms);animation-fill-mode:both}
@keyframes rgn-draw{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
html.js .hero__punkte .ck path{stroke-dasharray:26;stroke-dashoffset:26}
html.js .hero__punkte.rv-in .ck path{animation:ckdraw .7s var(--e-soft) both}
html.js .hero__punkte.rv-in li:nth-child(1) .ck path{animation-delay:.45s}
html.js .hero__punkte.rv-in li:nth-child(2) .ck path{animation-delay:.6s}
html.js .hero__punkte.rv-in li:nth-child(3) .ck path{animation-delay:.75s}
@keyframes ckdraw{to{stroke-dashoffset:0}}
html.js .hero__bild{opacity:0;transform:translateY(14px);transition:opacity .9s var(--e-calm) .15s,transform 1.1s var(--e-soft) .15s}
html.js .hero__bild.rv-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  html.js [data-reveal]:not([data-reveal="hook"]),html.js .hero__bild{opacity:1;transform:none}
  html.js .ul path,html.js .hero__punkte .ck path{stroke-dashoffset:0}
  .gwk__kachel:hover{transform:none}
  .gwk__schritt.ist-raus{transform:none}
  html.js .wa-lauf li{display:block}
  .wa-tippt{display:none!important}
  html.js .mat__schema .sch-label,html.js .mat__schema .sch-wasser{opacity:1}
  html.js .faktoren li,html.js .ablauf__nr{opacity:1;transform:none}
  html.js .ablauf__liste::before{transform:none!important}
  html.js .vergl .ck--gruen path{stroke-dashoffset:0}
  html.js .region__karte .kt-pin{opacity:1;transform:none}
  .anl__bild:hover img{transform:none}
}