/* =========================================================================
   GENIUS Express — Landingpage Version 2 („Nachtkupfer")
   GENIUS-CI (Kupfer, Logo, Bricolage + Inter), eigene Formensprache:
   Tinte/Papier im Wechsel, 3D nur per CSS (preserve-3d), keine Bibliothek.
   ========================================================================= */

/* --- 1. Schriften (lokal) ------------------------------------------------ */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/bricolage-grotesque-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/inter-latin-600-normal.woff2) format('woff2')}

/* Winkel als echte Eigenschaften, damit Scroll-Zeitleiste und Maus sie mischen können */
@property --kipp{syntax:'<angle>';inherits:false;initial-value:8deg}
@property --dreh{syntax:'<angle>';inherits:false;initial-value:0deg}

/* --- 2. Tokens ----------------------------------------------------------- */
:root{
  /* Tinte (GENIUS-Ink) */
  --bg:#14181F; --bg-2:#1A1F28; --bg-3:#222834;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --tx:#F5F1EA; --tx-2:rgba(245,241,234,.78); --tx-3:rgba(245,241,234,.66);
  /* Kupfer — #B05A21 ist die Markenfarbe; auf Tinte trägt nur die helle Stufe Schrift */
  --cu:#B05A21; --cu-2:#A9531C; --cu-txt:#9A4715; --cu-hi:#E39A66; --cu-soft:rgba(196,101,42,.16);
  /* Papier */
  --paper:#F7F5F0; --paper-2:#EFEBE3; --white:#FFFEFB;
  --ink:#14181F; --ink-2:#464D58; --ink-3:#575E69; --ink-line:rgba(20,24,31,.1);
  --ok:#6CCB97; --grau-x:#9AA1AC;
  --accent:var(--cu);   /* app.js nutzt --accent im Fehlerhinweis des Formulars */

  --r-btn:10px; --r-s:14px; --r:20px; --r-l:26px; --pill:999px;
  --f-d:'Bricolage Grotesque',system-ui,sans-serif;
  --f-b:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1200px; --pad:clamp(1rem,.55rem + 2vw,2rem);
  --hdr:72px;

  /* Motion — Charakter „Präzise" (Gutachter) */
  --e-soft:cubic-bezier(.22,1,.36,1);
  --e-calm:cubic-bezier(.25,1,.3,1);
  --e-ui:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --t-rv:.45s; --rv-y:10px;
}
@supports (animation-timing-function:linear(0,1)){
  :root{
    --e-soft:linear(0,.0492,.1613,.2979,.4356,.5617,.6701,.759,.8294,.8833,.9233,.9521,.9721,.9857,.9944,.9996,1.0026,1.0039,1.0043,1.0042,1.0037,1.0031,1.0025,1);
    --e-calm:linear(0,.1012,.28,.4507,.5905,.6983,.779,.8387,.8824,.9143,.9376,.9546,.967,.976,.9825,.9873,.9907,.9933,.9951,.9964,.9974,.9981,.9986,1);
    --spring:linear(0,.28 7.6%,.79 17%,.99 22.4%,1.06 26%,1.08 30%,1.03 39%,1 50%,1 100%);
  }
}
@media (max-width:700px){:root{--rv-y:6px;--hdr:62px}}

/* --- 3. Basis ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px)}
body{margin:0;background:var(--bg);color:var(--tx-2);font-family:var(--f-b);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;color:var(--tx);font-family:var(--f-d);font-weight:700;letter-spacing:-.02em;line-height:1.15}
h2 em,h3 em{font-style:normal;display:block}
h1,h2,h3,h4{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
svg use{pointer-events:none}
:focus-visible{outline:2px solid var(--cu-hi);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 2*var(--pad),var(--wrap));margin-inline:auto}

/* --- 4. Flächen ---------------------------------------------------------- */
.sek{position:relative;padding:clamp(4.5rem,2.8rem + 5vw,7.25rem) 0;overflow-x:clip}
.tinte{background:var(--bg);color:var(--tx-2)}
.tinte-2{background:var(--bg-2);color:var(--tx-2)}
.papier,.papier-2{color:var(--ink-2)}
.papier{background:var(--paper)}
.papier-2{background:var(--paper-2)}
/* Gegen-Scope: auf Papier tragen alle Textrollen Tinte */
.papier h2,.papier h3,.papier h4,.papier-2 h2,.papier-2 h3,.papier-2 h4{color:var(--ink)}
.papier .kicker,.papier-2 .kicker{color:var(--cu-txt)}
.papier .t-lead,.papier-2 .t-lead{color:var(--ink-2)}
.papier .haken li,.papier-2 .haken li{color:var(--ink-2)}
.papier .haken b,.papier-2 .haken b{color:var(--ink)}
.papier .ck path,.papier-2 .ck path{stroke:var(--cu)}
.papier .ck circle,.papier-2 .ck circle{fill:rgba(176,90,33,.1)}
.papier .btn--pri,.papier-2 .btn--pri{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 22px -12px rgba(169,83,28,.22)}
.papier .btn--ghost,.papier-2 .btn--ghost{color:var(--ink);background:var(--white);border-color:var(--ink-line)}
.papier .btn--ghost:hover,.papier-2 .btn--ghost:hover{border-color:rgba(20,24,31,.32)}
.papier .t-h2 em,.papier-2 .t-h2 em{background:linear-gradient(92deg,#C4652A 0%,#9E4A16 100%);-webkit-background-clip:text;background-clip:text}
.glas{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:var(--r)}
.linie-oben::before{content:"";position:absolute;top:0;left:50%;width:min(900px,80%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(227,154,102,.4),transparent)}

/* Dunkle Inseln auf Papier (Preiskarte, Buchungskarte): alle Textrollen zurück auf Hell */
.papier .insel h3,.papier-2 .insel h3,.papier .insel h4,.papier-2 .insel h4{color:var(--tx)}
.papier .insel .haken li,.papier-2 .insel .haken li{color:var(--tx-2)}
.papier .insel .haken b,.papier-2 .insel .haken b{color:var(--tx)}
.papier .insel .ck path,.papier-2 .insel .ck path{stroke:var(--cu-hi)}
.papier .insel .ck circle,.papier-2 .insel .ck circle{fill:var(--cu-soft)}
.papier .insel p,.papier-2 .insel p{color:var(--tx-2)}

/* --- 5. Typografie -------------------------------------------------------- */
.kicker{display:block;margin:0 0 .75rem;font-family:var(--f-b);font-size:.9375rem;font-weight:600;letter-spacing:-.005em;color:var(--cu-hi);line-height:1.4}
.t-h2{font-size:clamp(1.75rem,1.15rem + 1.9vw,2.35rem);letter-spacing:-.03em;line-height:1.08}
.t-h2 em,.hero__h em,.fin__h em{background:linear-gradient(92deg,#F2BA90 0%,#E08A50 52%,#C4652A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.t-lead{font-size:1.0625rem;line-height:1.6;color:var(--tx-2);max-width:40rem}
.kopf{max-width:52rem;margin-bottom:clamp(2.2rem,1.4rem + 2.4vw,3.3rem)}
.kopf .t-lead{margin-top:1rem}
.kopf--mitte{margin-inline:auto;text-align:center}
.kopf--mitte .t-lead{margin-inline:auto}

/* --- 6. Knöpfe ----------------------------------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;
  padding:0 1.35rem;border-radius:var(--r-btn);border:1px solid transparent;font-family:var(--f-b);font-size:.9375rem;font-weight:600;
  letter-spacing:-.005em;line-height:1.2;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--e-ui),box-shadow .2s var(--e-ui),background-color .2s var(--e-ui),border-color .2s var(--e-ui)}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--pri{color:#fff;background:linear-gradient(180deg,#BD5F27 0%,#9C4816 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px -12px rgba(169,83,28,.22)}
.btn--pri:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 14px 28px -12px rgba(169,83,28,.3)}
.btn--ghost{color:var(--tx);background:rgba(255,255,255,.05);border-color:var(--line-2)}
.btn--ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28)}
.btn--wa{color:#0B2E17;background:#25D366}
.btn--wide{width:100%}
.btn__preis{padding-left:.7rem;margin-left:.1rem;border-left:1px solid rgba(255,255,255,.34);font-weight:700}
.btn.is-busy{pointer-events:none;opacity:.85}
.btn.is-busy::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:dreh .7s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem}

/* --- 7. Häkchen und Kreuze ----------------------------------------------- */
.ck,.xk{width:20px;height:20px;flex:none;margin-top:.14rem}
.ck circle{fill:var(--cu-soft)}
.ck path{fill:none;stroke:var(--cu-hi);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
html.js .ck path{stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--e-calm) var(--ck-d,0ms)}
html.js .is-da .ck path{stroke-dashoffset:0}
.xk circle{fill:rgba(154,161,172,.14)}
.xk path{fill:none;stroke:var(--grau-x);stroke-width:2;stroke-linecap:round}
.haken{display:grid;gap:.75rem}
.haken li{display:flex;gap:.7rem;align-items:flex-start;font-size:.9375rem;line-height:1.5}
.haken li:nth-child(1){--ck-d:80ms}.haken li:nth-child(2){--ck-d:230ms}
.haken li:nth-child(3){--ck-d:380ms}.haken li:nth-child(4){--ck-d:530ms}
.haken li:nth-child(5){--ck-d:680ms}
.haken b{color:var(--tx);font-weight:600}
.haken--gross li span b{display:block;margin-bottom:.1rem}

/* --- 8. Reveal ----------------------------------------------------------- */
html.js .rv{opacity:0;transform:translate3d(0,var(--rv-y),0)}
html.js .rv.is-da{opacity:1;transform:none;transition:opacity var(--t-rv) var(--e-soft) var(--rv-d,0ms),transform var(--t-rv) var(--e-soft) var(--rv-d,0ms)}
html.js .rv-g>*{opacity:0;transform:translate3d(0,var(--rv-y),0)}
html.js .rv-g.is-da>*{opacity:1;transform:none;transition:opacity var(--t-rv) var(--e-soft),transform var(--t-rv) var(--e-soft)}
.rv-g.is-da>*:nth-child(2){transition-delay:80ms}.rv-g.is-da>*:nth-child(3){transition-delay:160ms}
.rv-g.is-da>*:nth-child(4){transition-delay:240ms}.rv-g.is-da>*:nth-child(5){transition-delay:320ms}
.rv-g.is-da>*:nth-child(6){transition-delay:400ms}.rv-g.is-da>*:nth-child(7){transition-delay:480ms}
.rv-d1{--rv-d:90ms}.rv-d2{--rv-d:180ms}

/* --- 9. Kopfzeile -------------------------------------------------------- */
.hdr{position:fixed;inset:0 0 auto;z-index:100;height:var(--hdr);display:flex;align-items:center;border-bottom:1px solid transparent;
  transition:background-color .3s var(--e-ui),border-color .3s var(--e-ui)}
.hdr.is-scrolled{background:rgba(20,24,31,.78);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:1.5rem}
.hdr__logo{display:flex;align-items:center;gap:.7rem;flex:none;min-height:44px}
.hdr__logo img{height:40px;width:auto}
.hdr__wort{display:flex;flex-direction:column;line-height:1.05}
.hdr__wort b{font-family:var(--f-d);font-size:1.05rem;font-weight:700;letter-spacing:.04em;color:var(--tx)}
.hdr__wort span{font-size:.6875rem;color:var(--tx-3);letter-spacing:.01em}
.hdr__nav{display:flex;gap:1.6rem;margin-left:auto}
.hdr__nav a{font-size:.875rem;font-weight:500;color:var(--tx-2);transition:color .18s var(--e-ui)}
.hdr__nav a:hover{color:var(--tx)}
.hdr__tel{display:flex;align-items:center;gap:.45rem;font-size:.875rem;font-weight:600;color:var(--tx);white-space:nowrap}
.hdr__tel svg{width:16px;height:16px;color:var(--cu-hi)}
.hdr .btn{min-height:42px;padding:0 1rem;font-size:.875rem}
.hdr__mob{display:none;margin-left:auto;gap:.5rem}
.hdr__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);color:var(--tx);background:rgba(255,255,255,.05)}
.hdr__ico svg{width:19px;height:19px}
.hdr__ico--tel{background:var(--cu-2);border-color:var(--cu-2);color:#fff}
@media (max-width:1080px){.hdr__nav{display:none}.hdr__tel{margin-left:auto}}
@media (max-width:860px){
  .hdr__tel,.hdr__cta{display:none}
  .hdr__mob{display:flex}
  .hdr__logo img{height:34px}
}

/* --- 10. Hero ------------------------------------------------------------ */
.hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding:calc(var(--hdr) + clamp(2.2rem,1rem + 3.4vw,4rem)) 0 0;
  background:
    radial-gradient(ellipse 60% 46% at 50% 102%,rgba(214,112,48,.36),rgba(214,112,48,0) 72%),
    radial-gradient(ellipse 42% 34% at 50% -6%,rgba(255,255,255,.07),rgba(255,255,255,0) 70%),
    var(--bg)}
/* Boden aus Licht: ein Raster, das in die Tiefe kippt — das einzige Deko-System der Seite */
.boden{position:absolute;z-index:-1;left:50%;bottom:-2px;width:240%;height:52%;pointer-events:none;
  transform:translateX(-50%) perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(233,160,106,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(233,160,106,.2) 1px,transparent 1px);
  background-size:64px 64px;background-position:center bottom;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 30%,transparent 78%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 30%,transparent 78%)}
.hero__in{max-width:900px;margin-inline:auto}
.hero .kicker{margin-bottom:1.1rem}
.hero__h{font-size:clamp(2.25rem,1.3rem + 3.9vw,4.2rem);letter-spacing:-.04em;line-height:1.02}
.strich{position:relative;display:inline-block;white-space:nowrap}
.strich svg{position:absolute;left:-2%;bottom:-.1em;width:104%;height:.3em;overflow:visible;pointer-events:none}
.strich path{fill:none;stroke:var(--cu-hi);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
html.js .strich path{stroke-dashoffset:1;animation:strich 1.05s var(--e-calm) .8s forwards}
@keyframes strich{to{stroke-dashoffset:0}}
.hero__p{max-width:31rem;margin:1.3rem auto 0;font-size:.9375rem;line-height:1.6;color:var(--tx-2)}
.hero__usp{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;gap:.55rem 1.6rem;margin:1.5rem auto 0;text-align:left}
.hero__usp li{display:flex;align-items:center;gap:.55rem;font-size:.9375rem;color:var(--tx);line-height:1.35}
.hero__usp .ck{margin:0}
.hero .knoepfe{justify-content:center;margin-top:1.9rem}
.hero__leise{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;margin-top:.6rem;font-size:.875rem;color:var(--tx-3);
  border-bottom:1px solid rgba(245,241,234,.22);padding-bottom:2px;transition:color .18s var(--e-ui),border-color .18s var(--e-ui)}
.hero__leise:hover{color:var(--tx);border-color:var(--cu-hi)}
.hero__leise svg{width:14px;height:14px}
/* Load-Stagger (über dem Fold kein Scroll-Trigger) */
html.js .hero__in>*{opacity:0;transform:translate3d(0,10px,0);animation:rein .6s var(--e-soft) forwards}
html.js .hero__in>*:nth-child(1){animation-delay:.05s}
html.js .hero__in>*:nth-child(2){animation-delay:.14s}
html.js .hero__in>*:nth-child(3){animation-delay:.26s}
html.js .hero__in>*:nth-child(4){animation-delay:.36s}
html.js .hero__in>*:nth-child(5){animation-delay:.46s}
html.js .hero__in>*:nth-child(6){animation-delay:.54s}
@keyframes rein{to{opacity:1;transform:none}}

/* Das 3D-Handy ------------------------------------------------------------ */
.buehne{--w:clamp(236px,13vw + 110px,292px);position:relative;height:calc(var(--w) * 2.1333 + 64px);margin-top:clamp(1rem,.4rem + 1.4vw,1.8rem);
  perspective:1500px;perspective-origin:50% 0%}

.buehne__schatten{position:absolute;left:50%;bottom:3%;width:min(540px,90%);height:110px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6),rgba(0,0,0,0) 70%);filter:blur(6px)}
.fon{
  position:absolute;left:50%;top:0;width:var(--w);aspect-ratio:9/19.2;margin-left:calc(var(--w) / -2);
  transform-style:preserve-3d;transform-origin:50% 100%;
  transform:translateY(34px) rotateX(var(--kipp)) rotateY(var(--dreh))}
html.js .hero .fon{animation:fonRein 1.2s var(--e-calm) .35s both}
@keyframes fonRein{from{opacity:0;translate:0 60px}to{opacity:1;translate:0 0}}
/* Aufrichten beim Scrollen — nur wo der Browser Scroll-Zeitleisten kann, sonst steht es leicht gekippt */
@supports (animation-timeline:scroll()){
  html.js .hero .fon{animation:fonRein 1.2s var(--e-calm) .35s both,aufrichten linear both;
    animation-timeline:auto,scroll(root);animation-range:normal,0 70vh}
  @keyframes aufrichten{from{--kipp:26deg}to{--kipp:0deg}}
}
.fon__kante,.fon__ruecken{position:absolute;inset:0;border-radius:46px}
.fon__ruecken{transform:translateZ(-11px);background:linear-gradient(160deg,#3A3F48,#1A1D23 60%,#2B2F37)}
.fon__kante{transform:translateZ(-5.5px);background:#23272E;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.fon__koerper{position:absolute;inset:0;border-radius:46px;padding:11px;
  background:linear-gradient(145deg,#4A4F58 0%,#1E2127 22%,#15181D 70%,#3B4048 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),inset 0 0 0 7px #0B0D11,0 40px 80px -30px rgba(0,0,0,.8)}
.fon__knopf{position:absolute;width:3px;border-radius:2px;background:#2D3139;right:-3px;top:22%;height:11%}
.fon__knopf--l{left:-3px;right:auto;top:20%;height:7%}
.fon__glanz{position:absolute;inset:11px;border-radius:36px;pointer-events:none;z-index:6;
  background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 100%)}
/* Bildschirm: laufendes Videogespräch */
.scr{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#0B0E13;isolation:isolate}
.scr__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.scr::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 56%,rgba(0,0,0,.75) 100%)}
.scr__insel{position:absolute;z-index:4;top:10px;left:50%;width:30%;height:24px;transform:translateX(-50%);border-radius:var(--pill);background:#000}
.scr__oben{position:absolute;z-index:3;top:44px;left:14px;right:14px;display:flex;align-items:center;gap:.45rem}
.scr__live{display:flex;align-items:center;gap:.35rem;padding:.25rem .55rem;border-radius:var(--pill);background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.6875rem;font-weight:600;color:#fff}
.scr__live i{width:6px;height:6px;border-radius:50%;background:#FF5A4F}
.scr__zeit{padding:.25rem .5rem;border-radius:var(--pill);background:rgba(0,0,0,.5);font-size:.6875rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.scr__mark{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
html.js .scr__mark ellipse{stroke-dasharray:3 2.4;animation:markAuf 1s var(--e-calm) 1.6s both}
@keyframes markAuf{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.scr__mark ellipse{transform-box:fill-box;transform-origin:center}
.scr__sv{position:absolute;z-index:3;top:74px;right:12px;width:34%;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.8rem .4rem .6rem;
  border-radius:14px;background:rgba(20,24,31,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 22px rgba(0,0,0,.4)}
.scr__sv-av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#B05A21;box-shadow:0 0 0 3px rgba(227,154,102,.28)}
.scr__sv-av img{width:44%;height:auto}
.scr__sv b{font-size:.5625rem;font-weight:600;color:#fff;letter-spacing:.01em}
.scr__sv .sprich{height:12px}
.scr__hinweis{position:absolute;z-index:3;left:12px;right:12px;bottom:112px;display:flex;align-items:center;gap:.55rem;
  padding:.6rem .7rem;border-radius:14px;background:rgba(20,24,31,.66);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);text-align:left}
.scr__hinweis svg{width:18px;height:18px;flex:none;color:var(--ok)}
.scr__hinweis span{font-size:.6875rem;line-height:1.35;color:rgba(255,255,255,.92)}
.scr__hinweis b{display:block;font-weight:600;color:#fff}
.scr__name{position:absolute;z-index:3;left:16px;bottom:78px;text-align:left}
.scr__name b{display:block;font-size:.8125rem;font-weight:600;color:#fff}
.scr__name span{display:block;font-size:.6875rem;color:rgba(255,255,255,.72)}
/* Sprech-Anzeige: drei Balken, laufen nur, solange der Hero im Bild ist */
.sprich{display:flex;align-items:flex-end;gap:2px;height:14px}
.sprich i{width:3px;height:100%;border-radius:2px;background:var(--ok);transform-origin:50% 100%;transform:scaleY(.35)}
.is-live .sprich i{animation:sprich 1.1s ease-in-out infinite}
.is-live .sprich i:nth-child(2){animation-duration:.8s;animation-delay:-.3s}
.is-live .sprich i:nth-child(3){animation-duration:1.3s;animation-delay:-.6s}
@keyframes sprich{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.scr__leiste{position:absolute;z-index:3;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:.8rem}
.scr__bt{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff}
.scr__bt svg{width:17px;height:17px}
.scr__bt--weg{background:#E5484D}
/* Fakten neben der Bühne, auf dem Boden (keine schwebenden Karten) */
.buehne__fakt{position:absolute;bottom:18%;display:flex;flex-direction:column;gap:.2rem;text-align:left;max-width:190px}
.buehne__fakt b{font-family:var(--f-d);font-size:2rem;font-weight:700;letter-spacing:-.04em;color:var(--tx);line-height:1}
.buehne__fakt span{font-size:.8125rem;color:var(--tx-3);line-height:1.4}
.buehne__fakt i{display:block;width:44px;height:1px;margin-bottom:.8rem;background:linear-gradient(90deg,var(--cu-hi),transparent)}
.buehne__fakt--l{right:calc(50% + var(--w) / 2 + 70px)}
.buehne__fakt--r{left:calc(50% + var(--w) / 2 + 70px)}
@media (max-width:980px){.buehne__fakt{display:none}}
@media (max-width:560px){
  .hero__usp{grid-template-columns:fit-content(100%);gap:.5rem}
  .hero .knoepfe{flex-direction:column}
  .hero .btn{width:100%}
}

/* --- 11. Trust-Leiste ------------------------------------------------------ */
.trust{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.trust__p{display:flex;gap:.8rem;align-items:flex-start;padding:1.4rem 1.2rem}
.trust__p+.trust__p{border-left:1px solid var(--line)}
.trust__p svg{width:22px;height:22px;flex:none;color:var(--cu-hi);margin-top:.1rem}
.trust__p b{display:block;font-size:.9375rem;font-weight:600;color:var(--tx);line-height:1.3}
.trust__p span{display:block;margin-top:.2rem;font-size:.8125rem;color:var(--tx-3);line-height:1.4}
@media (max-width:980px){.trust__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.trust__p:nth-child(3){border-left:0}.trust__p:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:480px){.trust__in{grid-template-columns:minmax(0,1fr)}.trust__p+.trust__p{border-left:0;border-top:1px solid var(--line)}.trust__p{padding:1rem .2rem}}

/* --- 12. Anliegen (Bento auf Papier) ---------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(268px,auto);gap:1rem}
.bk{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:268px;padding:1.4rem;border-radius:var(--r);overflow:hidden;isolation:isolate;
  transition:transform .3s var(--e-ui),box-shadow .3s var(--e-ui)}
.bk:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(20,24,31,.04),0 14px 32px rgba(20,24,31,.06)}
.bk h3{font-size:1.25rem;letter-spacing:-.02em}
.bk--1 h3{font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem)}

.bk p{margin-top:.4rem;font-size:.875rem;line-height:1.5;max-width:32rem}




/* Typ 1: Foto vollflächig mit Überlagerung */
.bk--foto{color:var(--tx-2);background:var(--bg-3)}
.bk--foto .bk__bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e-calm)}
.bk--foto:hover .bk__bild{transform:scale(1.04)}
.bk--foto::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(20,24,31,.82) 0%,rgba(20,24,31,.5) 22%,rgba(20,24,31,0) 42%),linear-gradient(to top,rgba(20,24,31,.95) 0%,rgba(20,24,31,.74) 48%,rgba(20,24,31,.2) 100%)}
.bk--foto h3{color:#fff}



/* Typ 2: Tinte mit Linien-Icon */
.bk--tinte{background:var(--bg);color:var(--tx-2)}
.bk--tinte h3{color:var(--tx)}



/* Typ 3: Kupfer getönt */
.bk--kupfer{background:linear-gradient(160deg,#F4E2D3,#EACBB3);color:#5C3417}
.bk--kupfer h3{color:#3A1F0C}







.bk--1{grid-column:span 5;grid-row:span 2}
.bk--2{grid-column:span 7}
.bk--3{grid-column:span 4}
.bk--4{grid-column:span 3}
.bk--5{grid-column:span 6}
.bk--6{grid-column:span 3}
.bk--7{grid-column:span 3}

@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk--1,.bk--2,.bk--3,.bk--4,.bk--5,.bk--6,.bk--7{grid-column:span 1;grid-row:span 1}
  .bk--1{grid-column:span 2;min-height:340px}
}
@media (max-width:620px){.bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}.bk--1{grid-column:span 1}.bk{min-height:250px}}
.bento__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.6rem;padding:1.2rem 1.4rem;border-radius:var(--r);background:var(--white);border:1px solid var(--ink-line)}
.bento__cta p{font-size:.9375rem;color:var(--ink-2);max-width:40rem}
.bento__cta b{color:var(--ink)}

/* --- 13. Chat-Sektion (WhatsApp) --------------------------------------------- */
.wa{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
.wa__stage{display:flex;justify-content:center}
.handy{position:relative;width:min(340px,100%);border-radius:40px;padding:10px;background:#15181D;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1),0 14px 32px rgba(20,24,31,.06)}
.handy__in{border-radius:31px;overflow:hidden;background:#ECE5DD}
.chat__head{display:flex;align-items:center;gap:.6rem;padding:1.5rem .9rem .7rem;background:#F7F5F0;border-bottom:1px solid var(--ink-line)}
.chat__av{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--ink-line);display:grid;place-items:center;flex:none;overflow:hidden}
.chat__av img{width:62%;height:auto}
.chat__head b{display:block;font-size:.8125rem;font-weight:600;color:var(--ink);line-height:1.25}
.chat__on{display:flex;align-items:center;gap:.28rem;font-size:.6875rem;color:#1E8E4F}
.chat__on i{width:6px;height:6px;border-radius:50%;background:#22A45D}
.chat__head>svg{width:15px;height:15px;margin-left:auto;color:var(--ink-3)}
.chat__body{position:relative;height:clamp(340px,30vw,420px);overflow:hidden;background:#ECE5DD;
  background-image:radial-gradient(rgba(20,24,31,.05) 1px,transparent 1px);background-size:14px 14px}
.chat__flow{display:grid;gap:.45rem;align-content:start;padding:.8rem .75rem 1rem;transition:transform .55s var(--e-soft)}
.chat__tag{justify-self:center;width:max-content;padding:.22rem .65rem;border-radius:var(--pill);background:rgba(255,255,255,.85);font-size:.5625rem;font-weight:600;color:var(--ink-3)}
.msg{position:relative;max-width:86%;padding:.5rem .65rem;border-radius:11px;font-size:.75rem;line-height:1.45;color:var(--ink-2)}
.wa__stage.is-schritt .msg,.wa__stage.is-schritt .chat__tag{display:none}
.wa__stage.is-schritt .msg.is-da,.wa__stage.is-schritt .chat__tag.is-da{display:block;animation:blase .5s var(--spring) both}
.wa__stage.is-schritt .msg--foto.is-da,.wa__stage.is-schritt .msg--datei.is-da{display:flex}
@keyframes blase{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.msg time{display:block;margin-top:.18rem;font-size:.5625rem;color:var(--ink-3);text-align:right}
.msg--in{justify-self:start;background:#fff;border-top-left-radius:3px;box-shadow:0 1px 1px rgba(20,24,31,.05)}
.msg--out{justify-self:end;background:#D9FDD3;color:#12291B;border-top-right-radius:3px;box-shadow:0 1px 1px rgba(20,24,31,.05)}
.msg--out time{color:#3F6B4D}
.msg--out time::after{content:" ✓✓";color:#1F8FCB;letter-spacing:-.06em}
.msg--foto{flex-direction:column;padding:.3rem .3rem .25rem;width:74%}
.msg--foto img{width:100%;border-radius:8px;aspect-ratio:4/3;object-fit:cover}
.msg--datei{align-items:center;gap:.55rem;width:max-content;max-width:86%}
.msg--datei .dat{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px;background:rgba(20,24,31,.07);color:var(--cu)}
.msg--datei .dat svg{width:15px;height:15px}
.msg--datei b{display:block;font-size:.6875rem;font-weight:600;color:var(--ink)}
.msg--datei span span{display:block;font-size:.5625rem;color:var(--ink-3)}
.msg b.regel{font-weight:600;color:#0E2A17}
.chat__foot{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem .85rem;background:#ECE5DD}
.chat__bar{flex:1;height:30px;border-radius:15px;background:#fff}
.chat__send{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:#25D366;color:#fff}
.chat__send svg{width:14px;height:14px}
.wa__copy .haken{margin:1.5rem 0 1.9rem;gap:1rem}
.wa__copy .haken span span{display:block;font-size:.875rem;color:var(--ink-3);line-height:1.5}
@media (max-width:900px){.wa{grid-template-columns:minmax(0,1fr)}.wa__stage{order:1}.wa__copy{order:2}}

/* --- 14. Zeitstrahl: gemeinsame Achse ab Gespräch bzw. Ortstermin ------------- */
.zs{padding:clamp(1.3rem,1rem + 1.2vw,2rem) clamp(1.2rem,1rem + 1vw,1.8rem) 1.3rem}
.zs__achse,.zs__zeile{display:grid;grid-template-columns:210px minmax(0,1fr);gap:1.6rem;align-items:center}
.zs__skala{position:relative;height:22px;margin-bottom:.4rem;border-bottom:1px solid var(--line-2)}
.zs__skala span{position:absolute;bottom:.4rem;left:var(--x);transform:translateX(-50%);font-size:.75rem;color:var(--tx-3);white-space:nowrap}
.zs__skala span:first-child{transform:none}
.zs__skala span:last-child{transform:translateX(-100%)}
.zs__skala span::after{content:"";position:absolute;left:50%;bottom:-.45rem;width:1px;height:6px;background:var(--line-2)}
.zs__skala span:first-child::after{left:0}.zs__skala span:last-child::after{left:auto;right:0}
.zs__zeile{padding:1.3rem 0;border-bottom:1px solid var(--line)}
.zs__zeile:last-of-type{border-bottom:0}
.zs__kopf b{display:block;font-family:var(--f-d);font-size:1.125rem;font-weight:700;color:var(--tx);letter-spacing:-.015em}
.zs__kopf span{display:block;margin-top:.1rem;font-size:.8125rem;color:var(--tx-3);line-height:1.4}
.zs__zeile--x .zs__kopf b{color:var(--cu-hi)}
.zs__bahn{position:relative;display:flex;align-items:center;gap:1rem;min-height:64px}
.zs__balken{position:relative;flex:none;height:14px;border-radius:var(--pill);transform-origin:0 50%}
.zs__zeile--x .zs__balken{width:max(14px,3.6%);background:linear-gradient(90deg,#F0B386,#D97A3C)}
.zs__zeile--alt .zs__balken{width:100%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 calc(100% / 14 - 3px),transparent calc(100% / 14 - 3px) calc(100% / 14))}
.zs__zeile--alt .zs__bahn{flex-direction:column;align-items:stretch;gap:.8rem}
.zs__zahl{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;line-height:1.2}
.zs__zahl b{font-family:var(--f-d);font-size:clamp(2rem,1.4rem + 2vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.zs__zeile--x .zs__zahl b{color:var(--cu-hi)}
.zs__zeile--alt .zs__zahl{justify-content:flex-end;text-align:right}
.zs__zeile--alt .zs__zahl b{color:var(--tx)}
.zs__zahl span{font-size:.875rem;color:var(--tx-2)}
.zs__quelle{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.8125rem;line-height:1.5;color:var(--tx-3)}
html.js .zs .zs__balken{transform:scaleX(0)}
html.js .zs .zs__zahl{opacity:0;transform:translate3d(0,6px,0)}
html.js .zs.is-da .zs__zeile--x .zs__balken{transform:none;transition:transform .5s var(--e-soft) .3s}
html.js .zs.is-da .zs__zeile--x .zs__zahl{opacity:1;transform:none;transition:opacity .4s var(--e-ui) .6s,transform .5s var(--e-soft) .6s}
html.js .zs.is-da .zs__zeile--alt .zs__balken{transform:none;transition:transform 2.4s cubic-bezier(.45,0,.2,1) .9s}
html.js .zs.is-da .zs__zeile--alt .zs__zahl{opacity:1;transform:none;transition:opacity .4s var(--e-ui) 3.3s,transform .5s var(--e-soft) 3.3s}
@media (max-width:860px){
  .zs__achse,.zs__zeile{grid-template-columns:minmax(0,1fr);gap:.8rem}
  .zs__achse>div:first-child{display:none}
  .zs__zeile--alt .zs__zahl{justify-content:flex-start;text-align:left}
}
.zv__schluss{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;margin-top:1.4rem;padding:1.4rem 1.6rem;
  border-radius:var(--r);background:linear-gradient(100deg,rgba(196,101,42,.18),rgba(196,101,42,.04));border:1px solid rgba(227,154,102,.26)}
.zv__schluss p{color:var(--tx);font-size:1rem}
.zv__schluss p span{color:var(--tx-2)}

@media (max-width:860px){.zv__schluss{grid-template-columns:minmax(0,1fr)}}

/* --- 15. Ablauf in 3D ------------------------------------------------------- */
.ab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);align-items:stretch}
.ab__liste{align-content:start}
.ab__liste{display:grid;gap:.8rem}
.ab__schritt{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:1rem;width:100%;padding:1.45rem 1.3rem;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:var(--r-s);cursor:pointer;overflow:hidden;
  transition:background-color .25s var(--e-ui),border-color .25s var(--e-ui)}
.ab__schritt:hover{background:rgba(255,255,255,.035)}
.ab__schritt.is-an{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border-color:var(--line-2)}
.ab__nr{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);font-weight:600;font-size:.9375rem;color:var(--tx-3);
  transition:background-color .3s var(--e-ui),border-color .3s var(--e-ui),color .3s var(--e-ui)}
.ab__schritt.is-an .ab__nr,.ab__schritt.is-fertig .ab__nr{background:var(--cu-2);border-color:var(--cu-2);color:#fff}
.ab__schritt b{display:block;font-family:var(--f-d);font-size:1.0625rem;font-weight:700;color:var(--tx);letter-spacing:-.015em}
.ab__schritt small{display:block;margin-top:.1rem;font-size:.8125rem;font-weight:500;color:var(--cu-hi)}
.ab__schritt p{margin-top:.45rem;font-size:.9375rem;color:var(--tx-2);line-height:1.55}
.ab__zeit{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--cu-hi);transform:scaleX(0);transform-origin:0 50%}
.ab.is-auto .ab__schritt.is-an .ab__zeit{animation:abZeit var(--dauer,3800ms) linear forwards}
@keyframes abZeit{to{transform:scaleX(1)}}
.ab__nochmal{justify-self:start;display:inline-flex;align-items:center;gap:.45rem;margin-top:.3rem;padding:.55rem .9rem;border-radius:var(--r-btn);
  border:1px solid var(--line-2);background:transparent;font-size:.8125rem;font-weight:600;color:var(--tx-2);cursor:pointer}
.ab__nochmal svg{width:14px;height:14px}
.ab__nochmal[hidden]{display:none}
.ab__text{display:none}
.ab__kurz{display:none;font-style:normal}
.ab__buehne{position:relative;min-height:460px;isolation:isolate}
.ab__raum{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 40%}
.ab__szene{--rx:6deg;--ry:-20deg;--s:1;position:absolute;left:50%;top:var(--sy,50%);width:0;height:0;transform-style:preserve-3d;
  transform:scale(var(--s)) rotateX(calc(var(--rx) + var(--px,0deg))) rotateY(calc(var(--ry) + var(--py,0deg)))}
.fon2{--w:236px;position:absolute;left:-118px;top:-240px;width:236px;height:480px;margin:0;transform:none;transform-style:preserve-3d}
.fon2 .fon__koerper,.fon2 .fon__kante,.fon2 .fon__ruecken{border-radius:38px}
.fon2 .fon__koerper{padding:9px}
.fon2 .scr{border-radius:30px}
.fon2 .fon__glanz{inset:9px;border-radius:30px}
.fon2 .scr::after{display:none}
.scr2{position:absolute;inset:0;padding:40px 14px 16px;opacity:0;transition:opacity .45s var(--e-ui);background:#F6F3EE;color:var(--ink);font-family:var(--f-b)}
.ist-1 .scr2--1,.ist-2 .scr2--2,.ist-3 .scr2--3,.ist-4 .scr2--4{opacity:1}
.scr2__kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.scr2__kopf b{font-size:.8125rem;font-weight:600;letter-spacing:-.01em}
.scr2__kopf span{font-size:.625rem;color:var(--ink-3)}
.scr2__zeile{font-size:.625rem;color:var(--ink-3);margin-bottom:.4rem}
.eign{display:flex;align-items:center;gap:.45rem;margin-bottom:.65rem;padding:.5rem .6rem;border-radius:10px;background:#E8F5ED;font-size:.625rem;color:#1E6B40;line-height:1.3}
.eign svg{width:14px;height:14px;flex:none}
.eign b{font-weight:600}
.kal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:.6rem}
.kal span{display:grid;place-items:center;height:36px;border-radius:8px;background:#fff;border:1px solid var(--ink-line);font-size:.625rem;line-height:1.1;text-align:center;color:var(--ink-2)}
.kal span b{display:block;font-size:.8125rem;color:var(--ink)}
.kal span.is-w{background:var(--ink);border-color:var(--ink);color:rgba(255,255,255,.72)}
.kal span.is-w b{color:#fff}
.slots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px}
.slots span{padding:.45rem 0;text-align:center;border-radius:8px;border:1px solid var(--ink-line);background:#fff;font-size:.6875rem;font-weight:600;color:var(--ink-2)}
.slots span.is-w{border-color:var(--cu-2);background:#FBEEE4;color:var(--cu)}
.bezahlt{display:flex;align-items:center;gap:.5rem;margin-top:.7rem;padding:.6rem .7rem;border-radius:12px;background:#fff;border:1px solid var(--ink-line)}
.bezahlt svg{width:18px;height:18px;color:#2F9E63;flex:none}
.bezahlt span{font-size:.6875rem;line-height:1.3;color:var(--ink-2)}
.bezahlt b{display:block;color:var(--ink);font-size:.75rem}
html.js .ist-1 .bezahlt{animation:popAuf .5s var(--spring) 1.5s both}
@keyframes popAuf{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
.upl{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.upl__z{display:flex;align-items:center;gap:.55rem;padding:.45rem;border-radius:10px;background:#fff;border:1px solid var(--ink-line)}
.upl__z img,.upl__pdf{width:38px;height:38px;border-radius:7px;object-fit:cover;flex:none}
.upl__pdf{display:grid;place-items:center;background:#FBEEE4;color:var(--cu)}
.upl__pdf svg{width:18px;height:18px}
.upl__z>span:not(.upl__pdf){flex:1;min-width:0;font-size:.625rem;color:var(--ink-3);line-height:1.3}
.upl__z b{display:block;font-size:.6875rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upl__z svg.ok{width:16px;height:16px;color:#2F9E63;flex:none}
.upl__bar{display:block;height:3px;border-radius:2px;background:var(--ink-line);margin-top:.3rem;overflow:hidden}
.upl__bar i{display:block;height:100%;background:var(--cu-2);transform-origin:0 50%}
html.js .ist-2 .upl__z{animation:popAuf .45s var(--e-soft) both}
html.js .ist-2 .upl__z:nth-child(1){animation-delay:.9s}
html.js .ist-2 .upl__z:nth-child(2){animation-delay:1.25s}
html.js .ist-2 .upl__z:nth-child(3){animation-delay:1.6s}
html.js .ist-2 .upl__z:nth-child(4){animation-delay:1.95s}
html.js .ist-2 .upl__bar i{animation:balken .9s var(--e-calm) both}
.ist-2 .upl__z:nth-child(1) .upl__bar i{animation-delay:1.1s}
.ist-2 .upl__z:nth-child(2) .upl__bar i{animation-delay:1.45s}
.ist-2 .upl__z:nth-child(3) .upl__bar i{animation-delay:1.8s}
.ist-2 .upl__z:nth-child(4) .upl__bar i{animation-delay:2.15s}
@keyframes balken{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.vorpr{margin-top:.6rem;padding:.6rem .7rem;border-radius:12px;background:var(--ink);color:rgba(255,255,255,.85);font-size:.6875rem;line-height:1.4}
.vorpr b{display:block;font-size:.75rem;color:#fff}
html.js .ist-2 .vorpr{animation:popAuf .5s var(--spring) 2.6s both}
.scr2--3{padding:0;background:#0B0E13}
.scr2--3::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,0) 25%,rgba(0,0,0,0) 60%,rgba(0,0,0,.72))}
.scr2--3 .scr__sv{top:44px;right:10px;width:36%}
.scr2--3 .scr__name{bottom:64px;left:14px}
.scr2--3 .scr__leiste{bottom:16px}
.scr2--3 .scr__bt{width:34px;height:34px}
.ring{position:absolute;z-index:3;top:44px;left:12px;display:flex;align-items:center;gap:.45rem;padding:.3rem .55rem .3rem .3rem;border-radius:var(--pill);background:rgba(0,0,0,.5)}
.ring svg{width:22px;height:22px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring .r1{stroke:rgba(255,255,255,.22)}
.ring .r2{stroke:var(--cu-hi);stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round}
html.js .ist-3 .ring .r2{animation:ringLauf 3.4s linear .4s forwards}
@keyframes ringLauf{to{stroke-dashoffset:.35}}
.ring span{font-size:.625rem;font-weight:600;color:#fff}
.post{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.post__z{display:grid;grid-template-columns:28px minmax(0,1fr);gap:.55rem;padding:.55rem;border-radius:10px;background:#fff;border:1px solid var(--ink-line)}
.post__z.is-neu{border-color:rgba(196,101,42,.45);box-shadow:0 6px 16px -8px rgba(176,90,33,.4)}
.post__av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:.5625rem;font-weight:700}
.post__z.is-neu .post__av{background:var(--cu-2)}
.post__z b{display:block;font-size:.6875rem;color:var(--ink)}
.post__z span span{display:block;font-size:.625rem;color:var(--ink-3);line-height:1.3}
html.js .ist-4 .post__z.is-neu{animation:popAuf .5s var(--spring) .5s both}
/* Objekte im Raum */
.flug{position:absolute;left:-60px;top:-46px;width:120px;height:92px;border-radius:12px;overflow:hidden;opacity:0;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.7),0 0 0 3px #fff;background:#fff}
.flug img{width:100%;height:100%;object-fit:cover}
.flug--1{--fx:-330px;--fy:-150px;--fz:120px;--fr:18deg;--fz2:-6deg}
.flug--2{--fx:-360px;--fy:-10px;--fz:170px;--fr:22deg;--fz2:4deg}
.flug--3{--fx:-300px;--fy:120px;--fz:90px;--fr:14deg;--fz2:-3deg}
html.js .ist-2 .flug{animation:fliegRein 1.3s var(--e-calm) both}
.ist-2 .flug--1{animation-delay:.1s}.ist-2 .flug--2{animation-delay:.4s}.ist-2 .flug--3{animation-delay:.7s}
@keyframes fliegRein{
  0%{opacity:0;transform:translate3d(calc(var(--fx) - 80px),var(--fy),calc(var(--fz) + 80px)) rotateY(var(--fr)) rotateZ(var(--fz2))}
  25%{opacity:1;transform:translate3d(var(--fx),var(--fy),var(--fz)) rotateY(var(--fr)) rotateZ(var(--fz2))}
  75%{opacity:1;transform:translate3d(-20px,-40px,40px) rotateY(0) rotateZ(0) scale(.6)}
  100%{opacity:0;transform:translate3d(0,-30px,6px) scale(.3)}}
.chip3d{position:absolute;display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-radius:14px;white-space:nowrap;opacity:0;
  background:rgba(26,31,40,.92);border:1px solid var(--line-2);box-shadow:0 20px 44px -16px rgba(0,0,0,.8);color:var(--tx)}
.chip3d svg{width:20px;height:20px;flex:none;color:var(--ok)}
.chip3d b{display:block;font-size:.875rem;font-weight:600}
.chip3d span span{display:block;font-size:.75rem;color:var(--tx-3)}
.chip3d--zahl{left:110px;top:-150px}
.chip3d--zeit{left:100px;top:110px}
.chip3d--zeit svg{color:var(--cu-hi)}
html.js .ist-1 .chip3d--zahl{animation:chipRein .6s var(--spring) 1.9s both}
html.js .ist-3 .chip3d--zeit{animation:chipRein .6s var(--spring) .9s both}
@keyframes chipRein{from{opacity:0;transform:translateZ(20px) translateY(10px)}to{opacity:1;transform:translateZ(90px)}}
.blatt{position:absolute;left:-40px;top:-190px;width:230px;height:300px;padding:1.1rem 1rem;border-radius:12px;background:#FBF9F5;color:var(--ink);opacity:0;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.75);font-family:var(--f-b)}
html.js .ist-4 .blatt{animation:blattRaus 1.4s var(--e-calm) .9s both}
@keyframes blattRaus{
  0%{opacity:0;transform:translate3d(0,40px,4px) scale(.7)}
  30%{opacity:1}
  100%{opacity:1;transform:translate3d(118px,-6px,130px) rotateY(16deg) rotateZ(3deg)}}
.blatt__kopf{display:flex;justify-content:space-between;align-items:center;padding-bottom:.55rem;margin-bottom:.4rem;border-bottom:1px solid var(--ink-line)}
.blatt__kopf b{font-size:.625rem;font-weight:700;letter-spacing:.04em}
.blatt__kopf span{font-size:.5625rem;font-weight:700;letter-spacing:.12em;color:var(--cu)}
.blatt h5{margin:.55rem 0 .25rem;font-family:var(--f-b);font-size:.625rem;font-weight:700;color:var(--cu)}
.blatt p{font-size:.5625rem;line-height:1.45;color:var(--ink-2)}
.blatt .zl{display:block;height:5px;border-radius:3px;background:rgba(20,24,31,.1);margin:.3rem 0}
@media (max-width:980px){.ab{grid-template-columns:minmax(0,1fr)}.ab__buehne{order:-1;min-height:0;height:clamp(420px,70vw,520px)}}
@media (max-width:620px){
  .ab__liste{grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
  .ab__schritt{grid-template-columns:minmax(0,1fr);justify-items:center;gap:.4rem;padding:.6rem .3rem;text-align:center}
  .ab__schritt b{display:none}
  .ab__kurz{display:block!important;font-size:.75rem;font-weight:600;color:var(--tx);line-height:1.25}
  .chip3d{display:none}
  .ab__schritt small,.ab__schritt p{display:none}
  .ab__nr{width:36px;height:36px}
  .ab__text{display:block;grid-column:1/-1;padding:1rem 1.1rem;border-radius:var(--r-s);border:1px solid var(--line);background:rgba(255,255,255,.03)}
  .ab__text b{display:block;font-family:var(--f-d);font-size:1.05rem;color:var(--tx)}
  .ab__text small{display:block;margin:.1rem 0 .4rem;font-size:.8125rem;font-weight:500;color:var(--cu-hi)}
  .ab__text p{font-size:.9rem}
  .ab__nochmal{grid-column:1/-1}
  .ab__szene{--ry:-12deg;--s:.86}
  .flug--1{--fx:-150px;--fy:-200px}.flug--2{--fx:-170px;--fy:-60px}.flug--3{--fx:-140px;--fy:160px}
  .chip3d--zahl{left:-10px;top:-250px}
  .chip3d--zeit{left:-20px;top:190px}
  @keyframes blattRaus{
    0%{opacity:0;transform:translate3d(0,40px,4px) scale(.7)}
    30%{opacity:1}
    100%{opacity:1;transform:translate3d(40px,60px,160px) rotateY(10deg) rotateZ(3deg) scale(.9)}}
}

/* --- 16. Ergebnis + Preis (Papier) ------------------------------------------ */
.erg{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,1rem + 3vw,4rem);align-items:center}
.doc{position:relative;padding:clamp(1.5rem,1rem + 2vw,3rem) 0 3rem;perspective:1600px}
.doc__stapel{--mx:0deg;--my:0deg;position:relative;margin:0 auto;width:min(430px,90%);transform-style:preserve-3d;
  transform:rotateX(calc(12deg + var(--mx))) rotateY(calc(-16deg + var(--my))) rotateZ(-2deg);
  transition:transform .7s var(--e-calm)}
html.js .doc:not(.is-da) .doc__stapel{transform:translateY(24px) rotateX(38deg) rotateY(-22deg) rotateZ(-6deg)}
.doc__blatt{position:absolute;inset:0;border-radius:10px;background:var(--white);box-shadow:0 1px 2px rgba(20,24,31,.05),0 18px 36px rgba(20,24,31,.06)}
.doc__blatt--3{transform:translate3d(18px,16px,-34px) rotateZ(-3deg);background:#E9E3D9}
.doc__blatt--2{transform:translate3d(9px,8px,-17px) rotateZ(-1.5deg);background:#F2EDE5}
.doc__blatt--1{position:relative;padding:clamp(1.2rem,.9rem + 1vw,1.8rem) clamp(1.2rem,.9rem + 1vw,1.8rem) 4.2rem}
.doc__kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-bottom:.85rem;border-bottom:1.5px solid var(--ink)}
.doc__kopf b{display:block;font-family:var(--f-b);font-size:.75rem;font-weight:700;letter-spacing:.07em;color:var(--ink)}
.doc__kopf span{display:block;font-size:.6875rem;color:var(--ink-3);margin-top:.15rem}
.doc__kopf img{width:28px;height:auto}
.doc__fall{margin:.85rem 0 .1rem;font-size:.75rem;color:var(--ink-2);line-height:1.5}
.doc__fall b{color:var(--ink)}
.doc h5{display:flex;align-items:center;gap:.5rem;margin:.9rem 0 .3rem;font-family:var(--f-b);font-size:.75rem;font-weight:700;color:var(--ink)}
.doc h5 i{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--ink);color:#fff;font-style:normal;font-size:.625rem}
.doc p{font-size:.75rem;line-height:1.55;color:var(--ink-2)}
.mark{background-image:linear-gradient(transparent 55%,rgba(227,154,102,.5) 55%);background-repeat:no-repeat;background-size:100% 100%;color:var(--ink)}
html.js .mark{background-size:0 100%;transition:background-size 1s var(--e-calm) var(--md,700ms)}
html.js .is-da .mark{background-size:100% 100%}
.doc__muster{position:absolute;right:1.4rem;bottom:1.3rem;padding:.35rem .8rem;border:2px solid rgba(176,90,33,.6);border-radius:8px;transform:rotate(-12deg);
  font-family:var(--f-b);font-size:.875rem;font-weight:700;letter-spacing:.2em;color:rgba(158,74,22,.8);pointer-events:none}

.preis{position:relative;overflow:hidden;padding:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);border-radius:var(--r-l);background:var(--bg);color:var(--tx-2);
  box-shadow:0 1px 2px rgba(20,24,31,.04),0 14px 32px rgba(20,24,31,.06)}

.preis h3{font-family:var(--f-b);font-size:1rem;font-weight:500;color:var(--tx-2)}
.preis__zahl{display:flex;align-items:flex-start;gap:.3rem;margin:.35rem 0 .2rem;color:var(--tx)}
.preis__zahl .rolle{font-family:var(--f-d);font-size:clamp(3.4rem,2.6rem + 2.6vw,4.6rem);font-weight:700;letter-spacing:-.05em;line-height:1}
.preis__zahl sup{font-family:var(--f-d);font-size:1.6rem;font-weight:700;margin-top:.45rem}
.preis__zusatz{font-size:.8125rem;color:var(--tx-3)}
.preis .haken{margin:1.3rem 0;padding-top:1.2rem;border-top:1px solid var(--line)}
.preis .haken li{color:var(--tx-2);font-size:.9rem}
.preis__nicht{margin:1.2rem 0 0;padding:1rem 1.05rem;border-radius:var(--r-s);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.preis__nicht h4{margin-bottom:.6rem;font-family:var(--f-b);font-size:.8125rem;font-weight:600;color:var(--tx)}
.preis__nicht li{display:flex;gap:.6rem;align-items:flex-start;font-size:.8125rem;line-height:1.45;color:var(--tx-3)}
.preis__nicht li+li{margin-top:.55rem}
.preis__nicht li b{color:var(--tx-2);font-weight:600}
.preis__nicht .xk{width:16px;height:16px;margin-top:.12rem}
.rolle{display:inline-flex;overflow:hidden;height:1em;line-height:1}
.rolle__z{display:inline-flex;flex-direction:column;transition:transform 1.4s var(--e-calm) var(--rd,0ms)}
.rolle__z span{display:block;height:1em}
@media (max-width:980px){.erg{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.doc__stapel{width:82%;transform:rotateX(6deg) rotateY(-6deg) rotateZ(-1deg)}.doc__blatt--3{transform:translate3d(10px,10px,-30px) rotateZ(-2deg)}.doc__blatt--2{transform:translate3d(5px,5px,-15px) rotateZ(-1deg)}.doc p,.doc__fall{font-size:.75rem}}

/* --- 17. Anbieter-Vergleich (Zeile für Zeile) ------------------------------ */
.vs{max-width:980px;margin:0 auto;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line)}
.vs__kopf,.vs__zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.vs__kopf>div{display:flex;align-items:center;gap:.8rem;padding:1.3rem 1.5rem}
.vs__kopf .gut{background:linear-gradient(180deg,rgba(196,101,42,.22),rgba(196,101,42,.1))}
.vs__kopf .anders{background:rgba(255,255,255,.03)}
.vs__kopf img{width:30px;height:auto}
.vs__kopf b{display:block;font-family:var(--f-d);font-size:1.125rem;color:var(--tx);letter-spacing:-.015em}
.vs__kopf span span{display:block;font-size:.8125rem;color:var(--tx-3)}
.vs__ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:rgba(255,255,255,.07);color:var(--tx-3)}
.vs__ic svg{width:18px;height:18px}
.vs__zeile{border-top:1px solid var(--line)}
.vs__zeile>div{display:flex;gap:.7rem;align-items:flex-start;padding:1rem 1.5rem;font-size:.9375rem;line-height:1.5}
.vs__zeile .gut{background:rgba(196,101,42,.07);color:var(--tx)}
.vs__zeile .anders{color:var(--tx-3)}
.vs__cta{display:flex;justify-content:center;margin-top:1.8rem}
@media (max-width:760px){
  .vs__kopf{display:none}
  .vs__zeile{grid-template-columns:minmax(0,1fr)}
  .vs__zeile .anders{border-top:1px dashed var(--line)}
  .vs__zeile:first-of-type{border-top:0}
  .vs__zeile .gut::before,.vs__zeile .anders::before{display:none}
  .vs__mobkopf{display:flex!important}
}
.vs__mobkopf{display:none;align-items:center;gap:.6rem;padding:.9rem 1.2rem;font-size:.8125rem;color:var(--tx-3);background:rgba(255,255,255,.03)}
.vs__mobkopf b{color:var(--cu-hi)}

/* --- 18. Wer prüft (Papier) ------------------------------------------------- */
.wer{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,1rem + 3vw,4rem);align-items:center}
.wer__bild{position:relative;margin:0;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3.3}
.wer__bild img{width:100%;height:100%;object-fit:cover}
.wer__bild figcaption{position:absolute;right:.8rem;bottom:.8rem;padding:.2rem .55rem;border-radius:var(--pill);background:rgba(20,24,31,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.6875rem;color:rgba(255,255,255,.85)}
.wer .haken{margin:1.5rem 0}
.wer .haken span span{display:block;font-size:.875rem;color:var(--ink-3)}
.firmen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem}
.firma{padding:1.05rem 1.15rem;border-radius:var(--r-s);background:var(--white);border:1px solid var(--ink-line)}
.firma b{display:block;font-size:.9375rem;font-weight:600;color:var(--ink)}
.firma span{display:block;margin-top:.25rem;font-size:.8125rem;color:var(--ink-3);line-height:1.45}
@media (max-width:980px){.wer{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.firmen{grid-template-columns:minmax(0,1fr)}}

/* --- 19. Deutschlandweit ---------------------------------------------------- */
.gebiet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:center}
.gebiet .haken{margin:1.5rem 0 1.8rem}
.karte{position:relative;margin:0 auto;width:min(460px,100%)}
.karte svg{width:100%;height:auto;overflow:visible}
.karte__name{font-family:var(--f-b);font-size:24px;font-weight:600;fill:var(--tx-2)}
.karte__name--sitz{fill:#fff}
.karte__pin{fill:var(--bg);stroke:var(--cu-hi);stroke-width:4}
.karte__sitz{fill:var(--cu-hi)}
html.js .karte .karte__pin,html.js .karte .karte__sitz{opacity:0;transition:opacity .5s var(--e-ui) var(--pd,0ms)}
html.js .karte.is-da .karte__pin,html.js .karte.is-da .karte__sitz{opacity:1}
html.js .karte__rand{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--e-calm) .2s}
html.js .karte.is-da .karte__rand{stroke-dashoffset:0}
.karte__legende{display:flex;justify-content:center;gap:1.2rem;margin-top:1rem;font-size:.75rem;color:var(--tx-3)}
.karte__legende span{display:flex;align-items:center;gap:.4rem}
.karte__legende i{width:9px;height:9px;border-radius:50%;border:2px solid var(--cu-hi)}
.karte__legende i.s{background:var(--cu-hi)}
@media (max-width:980px){.gebiet{grid-template-columns:minmax(0,1fr)}.karte{order:-1;width:min(360px,86%)}}

/* --- 20. Anfrage (Papier) --------------------------------------------------- */
.anf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem;align-items:stretch}
.kontakte{display:grid;gap:.4rem;margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.kontakt{display:flex;align-items:center;gap:.8rem;padding:.65rem .75rem;border-radius:var(--r-s);transition:background-color .2s var(--e-ui)}
.kontakt:hover{background:rgba(255,255,255,.06)}
.kontakt svg{width:20px;height:20px;flex:none;color:var(--cu-hi)}
.kontakt--wa svg{color:#3DDC84}
.kontakt b{display:block;font-size:.9375rem;color:var(--tx);font-weight:600}
.kontakt span span{display:block;font-size:.8125rem;color:var(--tx-3)}
@media (max-width:900px){.anf{grid-template-columns:minmax(0,1fr)}}

/* Formularkarte (Mechanik aus V1, neu eingekleidet) */
.fcard{position:relative;background:var(--white);color:var(--ink-2);border-radius:var(--r-l);border:1px solid var(--ink-line);box-shadow:0 1px 2px rgba(20,24,31,.04),0 14px 32px rgba(20,24,31,.06)}
.fcard__in{padding:clamp(1.4rem,1rem + 1.3vw,2.1rem)}
.fcard__h{font-size:1.3rem;color:var(--ink);letter-spacing:-.022em}
.fcard__sub{margin:.35rem 0 1.2rem;font-size:.875rem;color:var(--ink-3)}
.fcard h4{color:var(--ink)}
.prog{margin:0 0 1.2rem}
.prog__t{display:flex;justify-content:space-between;margin-bottom:.45rem;font-size:.75rem;font-weight:600;color:var(--ink-3)}
.prog__b{height:5px;border-radius:var(--pill);background:rgba(20,24,31,.08);overflow:hidden}
.prog__f{height:100%;width:25%;border-radius:var(--pill);background:linear-gradient(90deg,#E08C52,#C4652A);transition:width .45s var(--e-soft)}
.step{display:none}
.step.is-on{display:block;animation:schritt .35s var(--e-soft) both}
@keyframes schritt{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.step__q{display:flex;align-items:center;gap:.6rem;margin-bottom:.95rem}
.step__q h4{font-family:var(--f-b);font-size:1.0625rem;font-weight:600;letter-spacing:-.014em;line-height:1.3}
.step__back{display:none;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--ink-line);background:#fff;cursor:pointer;color:var(--ink-2)}
.step__back svg{width:14px;height:14px}
.step.has-back .step__back{display:grid}
.tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem}
.tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;min-height:84px;padding:.85rem .8rem;border-radius:var(--r-s);
  border:1px solid var(--ink-line);background:#fff;text-align:left;font-size:.875rem;font-weight:600;color:var(--ink);cursor:pointer;line-height:1.3;
  transition:border-color .18s var(--e-ui),background-color .18s var(--e-ui),transform .18s var(--e-ui)}
.tile .ico{width:22px;height:22px;color:var(--cu)}
.tile:hover{border-color:var(--cu-2);transform:translateY(-2px)}
.tile.is-sel{border-color:var(--cu-2);background:#FBEEE4}
.tile__chk{position:absolute;top:7px;right:7px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--cu-2);color:#fff;
  opacity:0;transform:scale(.6);transition:opacity .2s var(--e-ui),transform .3s var(--spring)}
.tile__chk svg{width:10px;height:10px}
.tile.is-sel .tile__chk{opacity:1;transform:none}
.fld{display:grid;gap:.5rem;margin-bottom:.5rem}
.fld--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.inp{width:100%;padding:.85rem .95rem;border-radius:var(--r-btn);border:1px solid rgba(20,24,31,.16);background:#fff;font:inherit;font-size:1rem;color:var(--ink);
  transition:border-color .18s var(--e-ui),box-shadow .18s var(--e-ui)}
.inp::placeholder{color:var(--ink-3)}
.inp:focus{outline:0;border-color:var(--cu-2);box-shadow:0 0 0 3px rgba(196,101,42,.16)}
.inp.is-err{border-color:#C2412D;background:#FDF5F3}
textarea.inp{resize:vertical;min-height:70px}
.chk{display:flex;gap:.6rem;align-items:flex-start;margin:.85rem 0 1rem;font-size:.75rem;line-height:1.5;color:var(--ink-3)}
.chk input{width:16px;height:16px;flex:none;margin-top:.15rem;accent-color:var(--cu-2)}
.chk a{color:var(--cu-txt);text-decoration:underline;text-underline-offset:2px}
.trustline{margin-top:1rem;text-align:center;font-size:.875rem;font-weight:600;color:var(--ink-3)}
.trustline b{color:var(--ink);font-weight:700}
.formstate{display:none;padding:2.4rem 1rem;text-align:center}
.formstate.is-on{display:block;animation:schritt .4s var(--e-soft) both}
.formstate__ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 1.1rem;border-radius:50%;background:#E6F5EC;color:#2F9E63}
.formstate__ic svg{width:26px;height:26px}
.formstate h4{font-size:1.25rem;margin-bottom:.55rem}
.formstate p{font-size:.9375rem;color:var(--ink-2)}
@media (max-width:480px){.fld--2,.tiles--3{grid-template-columns:minmax(0,1fr)}.tiles--3 .tile{min-height:0;flex-direction:row;align-items:center}}

/* --- 21. FAQ (Papier) ------------------------------------------------------- */
.faq{overflow:hidden}
.faq__marke{position:absolute;right:-5%;top:50%;width:min(480px,56vw);transform:translateY(-50%) rotate(-8deg);opacity:.04;pointer-events:none}
.faq__liste{position:relative;max-width:820px;margin:0 auto;display:grid;gap:.6rem}
.faq__i{border-radius:var(--r-s);background:var(--white);border:1px solid var(--ink-line);transition:border-color .2s var(--e-ui),box-shadow .2s var(--e-ui)}
.faq__i.is-open{border-color:rgba(176,90,33,.35);box-shadow:0 1px 2px rgba(20,24,31,.04),0 14px 32px rgba(20,24,31,.06)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:1.1rem 1.3rem;background:none;border:0;text-align:left;cursor:pointer;
  font-size:1rem;font-weight:600;color:var(--ink);letter-spacing:-.012em;line-height:1.4}
.faq__plus{position:relative;width:28px;height:28px;flex:none;border-radius:50%;background:var(--paper-2);transition:background-color .25s var(--e-ui)}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.8px;margin:-.9px 0 0 -5.5px;border-radius:2px;background:var(--ink);transition:transform .3s var(--e-soft),background-color .25s var(--e-ui)}
.faq__plus::after{transform:rotate(90deg)}
.faq__i.is-open .faq__plus{background:var(--cu-2)}
.faq__i.is-open .faq__plus::before,.faq__i.is-open .faq__plus::after{background:#fff}
.faq__i.is-open .faq__plus::after{transform:rotate(0)}
.faq__a{height:0;overflow:hidden;transition:height .4s var(--e-soft)}
.faq__a p{padding:0 1.3rem 1.2rem;font-size:.9375rem;color:var(--ink-2);max-width:46rem}
.faq__mehr{margin-top:1.8rem;text-align:center;font-size:.9375rem;color:var(--ink-2)}
.faq__mehr a{color:var(--cu-txt);font-weight:600}

/* --- 22. Final-CTA ---------------------------------------------------------- */
.fin{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding:clamp(5rem,3rem + 6vw,8rem) 0;
  background:radial-gradient(ellipse 55% 60% at 50% 110%,rgba(214,112,48,.42),rgba(214,112,48,0) 70%),var(--bg)}
.fin .boden{height:70%}
.fin__h{font-size:clamp(2rem,1.3rem + 2.8vw,3.3rem);letter-spacing:-.04em;line-height:1.04}
.fin__p{max-width:36rem;margin:1.2rem auto 0;font-size:1rem}
.fin .knoepfe{justify-content:center;margin-top:2rem}
.fin__fuss{margin-top:1.1rem;font-size:.8125rem;color:var(--tx-3)}
@media (max-width:560px){.fin .knoepfe{flex-direction:column}.fin .btn{width:100%}}

/* --- 23. Fußzeile ------------------------------------------------------------ */
.ft{padding:3.5rem 0 2rem;background:#0F1218;border-top:1px solid var(--line);font-size:.875rem}
.ft__oben{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:2rem}
.ft__marke{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.ft__marke img{height:40px;width:auto}
.ft p{color:var(--tx-3);max-width:26rem;line-height:1.55}
.ft h4{margin-bottom:.8rem;font-family:var(--f-b);font-size:.8125rem;font-weight:600;color:var(--tx)}
.ft li{margin-bottom:0}
.ft li a,.ft li button{display:inline-flex;align-items:center;min-height:44px}
.ft a,.ft button{color:var(--tx-2);transition:color .18s var(--e-ui)}
.ft a:hover,.ft button:hover{color:var(--tx)}
.ft button{padding:0;background:none;border:0;cursor:pointer;font-size:.875rem}
.ft__unten a{display:inline-flex;align-items:center;min-height:44px}
.ft__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--tx-3)}
@media (max-width:760px){.ft__oben{grid-template-columns:minmax(0,1fr)}}

/* --- 24. Overlays, FAB, Pop-up ----------------------------------------------- */
.ovl{position:fixed;inset:0;z-index:950;display:none;place-items:center;padding:1rem;background:rgba(8,10,14,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ovl.is-on{display:grid;animation:ovlAuf .25s var(--e-ui) both}
@keyframes ovlAuf{from{opacity:0}to{opacity:1}}
.ovl__k{position:relative;width:min(100%,520px);max-height:92svh;overflow-y:auto;border-radius:var(--r-l);animation:ovlK .5s var(--spring) both}
@keyframes ovlK{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.ovl__k > .js-close{position:absolute;top:.8rem;right:.8rem;z-index:5;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:rgba(20,24,31,.07);color:var(--ink);cursor:pointer}
.ovl__k > .js-close svg{width:16px;height:16px}
.pop{width:min(100%,430px);background:var(--bg-2);border:1px solid var(--line-2);color:var(--tx-2)}
.pop > .js-close{background:rgba(0,0,0,.4);color:#fff}
.pop__bild{position:relative;margin:0;aspect-ratio:16/8.4;overflow:hidden}
.pop__bild img{width:100%;height:100%;object-fit:cover}
.pop__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg-2),rgba(26,31,40,0) 60%)}
.pop__badge{position:absolute;z-index:2;left:1.2rem;bottom:.9rem;padding:.3rem .7rem;border-radius:var(--pill);background:var(--cu-2);color:#fff;font-size:.75rem;font-weight:600}
.pop__in{padding:.6rem 1.5rem 1.4rem}
.pop h3{font-size:1.45rem;letter-spacing:-.03em;line-height:1.12}
.pop h3 em{color:var(--cu-hi)}
.pop p{margin:.65rem 0 1rem;font-size:.9375rem}
.pop .haken{margin-bottom:1.2rem;gap:.55rem}
.pop .haken li{font-size:.875rem;color:var(--tx)}
.pop .btn+.btn{margin-top:.5rem}
.pop__fuss{margin-top:.8rem;text-align:center;font-size:.75rem;color:var(--tx-3)}
.pop__nein{display:block;margin:.5rem auto 0;background:none;border:0;font-size:.8125rem;color:var(--tx-3);text-decoration:underline;cursor:pointer}

.fab{position:fixed;right:1rem;bottom:1rem;z-index:940;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s var(--e-ui),transform .3s var(--e-soft)}
.fab.is-da{opacity:1;transform:none;pointer-events:auto}
.fab.is-weg{opacity:0;transform:translateY(10px);pointer-events:none}
.fab__l{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;opacity:0;transform:translateY(8px) scale(.96);transform-origin:100% 100%;pointer-events:none;
  transition:opacity .22s var(--e-ui),transform .3s var(--spring)}
.fab.is-open .fab__l{opacity:1;transform:none;pointer-events:auto}
.fab__a{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;border-radius:var(--pill);border:1px solid var(--line-2);background:rgba(26,31,40,.96);
  color:var(--tx);font-size:.875rem;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:0 12px 30px -12px rgba(0,0,0,.7)}
.fab__a svg{width:17px;height:17px;color:var(--cu-hi)}
.fab__a--wa svg{color:#3DDC84}
.fab__btn{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,#BD5F27,#9C4816);box-shadow:0 10px 24px -10px rgba(169,83,28,.3)}
.fab__btn svg{width:23px;height:23px;transition:transform .35s var(--spring)}
.fab.is-open .fab__btn svg{transform:rotate(135deg)}

/* --- 25. Cookie-Banner (Mechanik consent.js) ----------------------------------- */
.kekse{position:fixed;inset:0;z-index:990;display:none;place-items:center;padding:1.1rem;background:rgba(8,10,14,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.kekse.zeig{display:grid}
body.kekse-offen{overflow:hidden}
.kekse__marke{margin:-.5rem 0 .9rem;font-family:var(--f-d);font-size:.9375rem;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.kekse__karte{width:min(100%,460px);max-height:92svh;overflow-y:auto;padding:1.9rem 1.6rem 1.4rem;border-radius:var(--r-l);text-align:center;background:var(--white);color:var(--ink-2);animation:ovlK .5s var(--spring) both}
.kekse__logo{height:50px;width:auto;margin:0 auto 1.1rem}
.kekse h2{font-size:1.2rem;color:var(--ink);margin-bottom:.6rem}
.kekse p{font-size:.875rem;line-height:1.6;color:var(--ink-2)}
.kekse__panel{margin-top:1.1rem;padding:.9rem;text-align:left;border:1px solid var(--ink-line);border-radius:var(--r-s)}
.kekse__zeile{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--ink-line)}
.kekse__zeile:last-of-type{border-bottom:0}
.kekse__zeile b{display:block;font-size:.8125rem;font-weight:600;color:var(--ink)}
.kekse__zeile span{display:block;font-size:.6875rem;color:var(--ink-3)}
.kekse__fest{font-size:.75rem;font-weight:600;color:#1E7A45}
.schalter{display:flex;align-items:center;gap:.5rem;cursor:pointer}
.schalter input{position:absolute;opacity:0;width:0;height:0}
.schalter__bahn{position:relative;width:38px;height:21px;border-radius:11px;background:rgba(20,24,31,.18);transition:background-color .22s var(--e-ui)}
.schalter__punkt{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .3s var(--spring)}
.schalter input:checked + .schalter__bahn{background:var(--cu-2)}
.schalter input:checked + .schalter__bahn .schalter__punkt{transform:translateX(17px)}
.schalter__text{min-width:1.6rem;font-size:.75rem;font-weight:600;color:var(--ink-3)}
.kekse__knoepfe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem;margin-top:1.2rem}
.kekse__knopf{padding:.9rem 1rem;border-radius:var(--r-btn);border:1px solid var(--ink-line);background:#fff;font-size:.875rem;font-weight:600;color:var(--ink);cursor:pointer;
  transition:background-color .18s var(--e-ui),border-color .18s var(--e-ui)}
.kekse__knopf--ja{background:var(--cu-2);border-color:var(--cu-2);color:#fff}
.kekse__knopf--ja:hover{background:var(--cu)}
.kekse__knopf--nein:hover{border-color:var(--ink)}
.kekse__knopf--mehr{grid-column:1/-1;border-color:transparent;background:transparent;color:var(--ink-3);font-weight:500;font-size:.8125rem}
.kekse__knopf[data-kekse="auswahl"]{grid-column:1/-1}
.kekse__links{margin-top:1rem;font-size:.75rem;color:var(--ink-3)}
.kekse__links a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

/* --- 26. Rechtsseiten + 404 --------------------------------------------------- */
.rechtsseite .hdr{background:rgba(20,24,31,.94);border-bottom-color:var(--line)}
.lg-d{height:40px;width:auto}
.legal{padding:calc(var(--hdr) + 3rem) 0 4rem;background:var(--paper);color:var(--ink-2)}
.legal__in{max-width:820px}
.legal h1,.legal h2,.legal h3,.legal h4{color:var(--ink)}
.legal h1{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.4rem);letter-spacing:-.03em;margin:.3rem 0 1.4rem}
.legal h2{font-size:1.25rem;margin:2rem 0 .6rem}
.legal h3{font-size:1.05rem;margin:1.4rem 0 .4rem}
.legal p,.legal li{font-size:.9375rem;line-height:1.7;margin-bottom:.6rem}
.legal ul{list-style:disc;padding-left:1.2rem;margin-bottom:1rem}
.legal a{color:var(--cu-txt);text-decoration:underline;text-underline-offset:2px}
.legal__zurueck{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-size:.875rem;font-weight:600;color:var(--cu-txt)!important;text-decoration:none!important}
.legal__zurueck svg{width:15px;height:15px}
.legal .kicker{color:var(--cu-txt)}

/* --- 27. Weniger Bewegung ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  html.js .rv,html.js .rv-g>*,html.js .hero__in>*{opacity:1!important;transform:none!important}
  html.js .hero .fon{animation:none!important;--kipp:8deg}
}

/* --- 28. 404 ------------------------------------------------------------------ */
.vier{display:grid;place-items:center;min-height:100svh;padding:calc(var(--hdr) + 3rem) var(--pad) 4rem;text-align:center;
  background:var(--bg)}
.vier>div{max-width:34rem}
.vier__n{font-family:var(--f-d);font-size:clamp(4rem,3rem + 5vw,7rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--cu-hi)}
.vier h1{margin:.6rem 0 .8rem;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem)}
.hdr--legal{background:rgba(20,24,31,.94);border-bottom-color:var(--line)}

/* --- 29. Anfrage rechts: Formular + Direktkontakt als helle Karte ---------------- */
.anf__rechts{display:grid;gap:1.2rem;align-content:start}
.kontakte--hell{margin-top:0;padding:1.1rem 1.2rem;border:1px solid var(--ink-line);border-top:1px solid var(--ink-line);border-radius:var(--r-l);background:var(--white);
  box-shadow:0 1px 2px rgba(20,24,31,.04),0 14px 32px rgba(20,24,31,.06)}
.kontakte__kopf{margin:0 0 .3rem .75rem;font-size:.8125rem;font-weight:600;color:var(--ink-3)}
.kontakte--hell .kontakt:hover{background:var(--paper)}
.kontakte--hell .kontakt svg{color:var(--cu)}
.kontakte--hell .kontakt--wa svg{color:#1E9E4F}
.kontakte--hell .kontakt b{color:var(--ink)}
.kontakte--hell .kontakt span span{color:var(--ink-3)}

/* --- 30. Anfrage: Direktkontakt als volle linke Spalte --------------------------- */
.kontakte--spalte{display:flex;flex-direction:column;gap:.2rem;height:100%;padding:clamp(1.4rem,1rem + 1.3vw,2.1rem)}
.kontakte__h{font-size:1.3rem;letter-spacing:-.022em;color:var(--ink)}
.kontakte__p{margin:.35rem 0 1.1rem;font-size:.9375rem;color:var(--ink-2)}
.kontakte--spalte .kontakt{flex:1 1 0;min-height:76px;padding:1rem .9rem;border:1px solid var(--ink-line);border-radius:var(--r-s);background:var(--paper-2)}
.kontakte--spalte .kontakt+.kontakt{margin-top:.6rem}
.kontakte--spalte .kontakt svg{width:26px;height:26px}
.kontakte--spalte .kontakt b{font-size:1.0625rem}
.anf__rechts>.fcard{height:100%}