/* ============================================================
   Ipsom Handwerker · Design „Bauplan“
   Wörtlich übernommen aus Entwurf B · Bauplan
   (Webseiten/Webdesigner Kärnten net/Entwuerfe/Neudesign/b-bauplan.html, <style>).
   Eigene Zusätze für die Handwerker-Seitentypen stehen ganz unten („Zusätze Ipsom Handwerker“).
   ============================================================ */

/* Schriften lokal (variable Fonts, SIL Open Font License) */
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/sora-latin-ext.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:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/sora-latin.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:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/instrument-sans-latin-ext.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:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/instrument-sans-latin.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:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/caveat-600-latin-ext.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:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/caveat-600-latin.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}

@property --p { syntax: '<number>'; inherits: true; initial-value: 4; }
:root{
  --anthrazit:#14171c; --text:#4a5058; --grau:#9aa1aa; --linie:#e2e5ea; --papier:#fff;
  --gelb:#ffd600; --gold:#c9a400;
  --gruen:#17845e; --gruen-bg:#f0f8f4; --gruen-rand:#c6e3d5;
  --blau:#2a6fb0; --blau-bg:#eff5fc; --blau-rand:#cbdff4;
  --merk:#a37e00; --merk-bg:#fffaea; --merk-rand:#f3e3ab;
  --d-grund:#131417; --d-leiste:#1e2023; --d-karte:#26282c; --d-linie:#33363b; --d-text:#e9eaec; --d-leise:#8a9098;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sora: "Sora", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --hh: 68px;
  --p: 4;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hh) + 8px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{margin:0;font:17px/1.6 var(--sans);color:var(--text);background:var(--papier);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--sora);font-weight:600;color:var(--anthrazit);margin:0}
p{margin:0}
button{font:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.wrap{width:min(100% - 48px, 1240px);margin-inline:auto}
:focus-visible{outline:3px solid var(--anthrazit);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.hdr :focus-visible,.draft:focus-visible,.mbar :focus-visible{outline-color:var(--gelb)}
.skiplink{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gelb);color:var(--anthrazit);padding:10px 16px;border-radius:9px;font-weight:600;text-decoration:none}
.skiplink:focus{top:10px}
.ph{border:1px dashed currentColor;border-radius:6px;padding:0 .35em;cursor:help;white-space:nowrap}

/* Millimeterpapier (dezent) */
.mm{background-color:var(--anthrazit);
  background-image:
    linear-gradient(rgba(255,214,0,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,214,0,.055) 1px, transparent 1px),
    linear-gradient(rgba(233,234,236,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,234,236,.028) 1px, transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px;background-position:-1px -1px}
.dark{color:var(--d-text)}
.dark h2,.dark h3{color:#fff}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:9px;background:var(--gelb);color:var(--anthrazit);border:1.5px solid var(--gelb);font:600 16px/1.1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(255,214,0,.75)}
.btn svg{flex:none}
.btn--ghost-d{background:transparent;color:var(--d-text);border-color:rgba(233,234,236,.32)}
.btn--ghost-d:hover{border-color:var(--gelb);box-shadow:none}
.btn--ghost{background:transparent;color:var(--anthrazit);border-color:var(--anthrazit)}
.btn--ghost:hover{background:var(--anthrazit);color:#fff;box-shadow:none}
.btn--sm{min-height:42px;padding:0 18px;font-size:15px}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.lnk{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.lnk:hover{text-decoration-color:var(--gold)}
.dark .lnk:hover{text-decoration-color:var(--gelb)}

/* Blatt-Kennung (Eyebrow) */
.blatt{display:flex;align-items:center;gap:12px;font:500 12.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin:0 0 22px}
.blatt span{display:inline-grid;place-items:center;min-width:32px;height:24px;padding:0 6px;border:1px solid currentColor;border-radius:5px;color:var(--anthrazit)}
.blatt::after{content:"";flex:0 0 48px;height:1px;background:var(--gold)}
.blatt--d{color:var(--d-text)}
.blatt--d span{color:var(--gelb);border-color:var(--gelb)}
.blatt--d::after{background:var(--gelb)}
h2.h2{font-size:clamp(32px,4.3vw,58px);line-height:1.05;letter-spacing:-.034em;text-wrap:balance;margin-bottom:20px}
.lead{font-size:19px;line-height:1.6;max-width:60ch}
.dark .lead{color:var(--d-text)}
.muted{color:var(--text)}

.sec{padding:clamp(56px,6vw,88px) 0}
.sec--rule{border-top:1px solid var(--linie);position:relative}
.sec--rule::before,.sec--rule::after{content:"";position:absolute;top:-8px;width:15px;height:15px;
  background:linear-gradient(var(--gold),var(--gold)) center/15px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) center/1px 15px no-repeat}
.sec--rule::before{left:max(16px, calc(50% - 628px))}
.sec--rule::after{right:max(16px, calc(50% - 628px))}
.head-split{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 64px;flex-wrap:wrap;margin-bottom:40px}
.head-split > div{max-width:760px}
.head-split > p{max-width:400px}

/* Bedeutungskästen */
.box{position:relative;border-radius:10px;padding:18px 20px 18px 22px;border:1px solid;font-size:16px;line-height:1.55}
.box::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;border-radius:10px 0 0 10px}
.box__k{font:600 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.box--blau{background:var(--blau-bg);border-color:var(--blau-rand);color:#23415f}
.box--blau::before{background:var(--blau)} .box--blau .box__k{color:var(--blau)}
.box--gruen{background:var(--gruen-bg);border-color:var(--gruen-rand);color:#1d4a39}
.box--gruen::before{background:var(--gruen)} .box--gruen .box__k{color:var(--gruen)}
.box strong{color:inherit}

/* ============================================================ Kopf */
.hdr{position:sticky;top:0;z-index:50;height:var(--hh);background:rgba(20,23,28,.95);border-bottom:1px solid var(--d-karte);color:var(--d-text)}
@supports (backdrop-filter: blur(4px)){ .hdr{background:rgba(20,23,28,.86);backdrop-filter:saturate(1.3) blur(12px)} }
.hdr__in{display:flex;align-items:center;gap:28px;height:100%}
.hdr__logo{flex:none;display:block;border-radius:10px}
.hdr__logo svg{display:block;height:50px;width:auto}
.hdr__nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.hdr__nav a{position:relative;display:block;padding:8px 0;color:var(--d-text);font:500 15px/1.2 var(--sans);text-decoration:none}
.hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--gelb);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.hdr__nav a:hover::after{transform:scaleX(1)}
.hdr__tel{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:500 14.5px/1 var(--mono);color:var(--d-text);text-decoration:none;white-space:nowrap}
.hdr__tel svg{color:var(--gelb)}
.hdr__tel:hover{color:#fff}
.hdr__menu{display:none;margin-left:auto;width:46px;height:46px;border-radius:9px;border:1px solid var(--d-linie);background:transparent;color:var(--d-text);cursor:pointer}
.hdr__menu span{display:block;width:20px;height:2px;margin:4px auto;background:currentColor;transition:transform .25s,opacity .2s}
.hdr.is-open .hdr__menu span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdr.is-open .hdr__menu span:nth-child(2){opacity:0}
.hdr.is-open .hdr__menu span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1179px){
  .hdr__menu{display:block}
  .hdr__tel{margin-left:auto}
  .hdr__tel + .btn{margin-left:0}
  .hdr__tel ~ .hdr__menu{margin-left:0}
  .hdr__nav{position:absolute;left:0;right:0;top:100%;background:var(--anthrazit);border-bottom:1px solid var(--d-linie);display:none}
  .hdr.is-open .hdr__nav{display:block}
  .hdr__nav ul{flex-direction:column;gap:0;padding:8px 24px 20px}
  .hdr__nav a{padding:14px 0;border-bottom:1px solid var(--d-karte);font-size:17px}
  .hdr__nav a::after{display:none}
}
@media (max-width:639px){
  .hdr__tel,.hdr__cta{display:none}
  .hdr__menu{margin-left:auto!important}
  .hdr__logo svg{height:44px}
}

/* ============================================================ Hero */
.hero{position:relative;overflow:hidden;color:var(--d-text);padding:clamp(40px,6vw,72px) 0 0}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,4vw,64px);align-items:center}
.hero__meta{display:flex;align-items:center;gap:10px;font:500 12.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-leise);margin-bottom:28px}
.hero__meta i{width:8px;height:8px;border-radius:50%;background:var(--gelb);box-shadow:0 0 0 4px rgba(255,214,0,.15)}
.h1__k{display:flex;align-items:center;gap:12px;font:500 15px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gelb);margin-bottom:20px}
.h1__k::before{content:"";width:28px;height:1.5px;background:var(--gelb)}
.h1__m{display:block;font:700 clamp(40px,4.7vw,70px)/1.02 var(--sora);letter-spacing:-.045em;color:#fff;text-wrap:balance}
.mark{position:relative;white-space:nowrap;display:inline-block}
.mark::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.09em;background:var(--gelb)}
.mark::before{content:"";position:absolute;left:0;right:0;bottom:-.2em;height:.32em;border-left:2px solid var(--gelb);border-right:2px solid var(--gelb)}
.hero__lead{font-size:clamp(18px,1.45vw,20px);line-height:1.6;color:var(--d-text);max-width:34em;margin:30px 0 36px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero__alt{margin-top:22px;font-size:15.5px;color:var(--d-leise)}
.hero__alt a{color:var(--d-text);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,214,0,.7)}
.hero__alt a:hover{text-decoration-color:var(--gelb)}
.hero__vis{position:relative}
@media (min-width:1100px){ .hero__vis{margin-right:-3%;margin-left:-2%} }
.hero-plan{width:100%;height:auto;display:block;overflow:visible}
.hero-plan .hp-labels text{font:500 12.5px var(--mono);fill:var(--gelb);letter-spacing:.02em}
.hero-plan .faint{stroke-opacity:.42}
.hero-plan .cross{stroke-width:1}
.hero-plan .caret{fill:var(--gelb)}
.hero__foot{display:flex;justify-content:space-between;align-items:stretch;gap:32px;margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--d-linie)}
.facts{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.facts li{position:relative;padding:22px 32px 26px 0;margin-right:32px;font:500 12.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--d-leise)}
.facts li::before{content:"";position:absolute;left:0;top:-7px;width:1px;height:13px;background:var(--gelb)}
.facts li b{display:block;font:600 26px/1.1 var(--sora);letter-spacing:-.02em;text-transform:none;color:#fff;margin-bottom:4px}
.schriftfeld{display:grid;grid-template-columns:auto auto auto;align-self:flex-start;margin-top:22px;border:1px solid var(--d-linie);font:500 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--d-leise)}
.schriftfeld div{padding:7px 12px;border-right:1px solid var(--d-linie);border-bottom:1px solid var(--d-linie)}
.schriftfeld div:nth-child(3n){border-right:0}
.schriftfeld div:nth-last-child(-n+3){border-bottom:0}
.schriftfeld b{display:block;font-weight:600;color:var(--d-text);margin-top:2px}
@media (prefers-reduced-motion: no-preference){
  .js .hero-plan path:not(.cross){stroke-dasharray:1px 1px;stroke-dashoffset:1px}
  .js .hero-plan.go path:not(.cross){animation:dash 1.1s cubic-bezier(.5,0,.2,1) calc(var(--d, 0s) * .7) both}
  .js .hero-plan text,.js .hero-plan .hp-dots circle,.js .hero-plan .hb-fill,.js .hero-plan .cross{opacity:0;transition:opacity .7s ease calc(var(--d, 1.4s) * .7)}
  .js .hero-plan.go text,.js .hero-plan.go .hp-dots circle,.js .hero-plan.go .hb-fill,.js .hero-plan.go .cross{opacity:1}
  .hero-plan .caret{animation:blink 1.1s steps(1) infinite}
}
@keyframes blink{50%{opacity:0}}

/* Hero-Skizze wird zum Entwurf „im Bau“ (ca. 75 % fertig) */
.hero-plan .hb-flaeche{fill:#191c21;fill-opacity:.9;stroke:none}
.hero-plan .hb-l{stroke:#e9eaec;stroke-opacity:.18;stroke-width:1}
.hero-plan .hbau text{fill:#e9eaec}
.hero-plan .hbau .hb-u{font:500 8.5px var(--mono);fill:#c9ccd1;letter-spacing:.02em}
.hero-plan .hbau .hb-c{font:600 11px var(--sora);fill:#fff}
.hero-plan .hbau .hb-n{font:500 8px var(--sans);fill:#c9ccd1}
.hero-plan .hbau .hb-m{font:600 8px var(--mono);fill:#9aa1aa;letter-spacing:.14em}
.hero-plan .hbau .hb-t{font:600 21.5px var(--sora);fill:#fff;letter-spacing:-.025em}
.hero-plan .hbau .hb-s{font:500 10.5px var(--sans);fill:#b9bdc4}
.hero-plan .hbau .hb-b{font:600 10px var(--sans);fill:#14171c}
.hero-plan .hbau .hb-o{font:600 9.5px var(--sans);fill:#e9eaec}
.hero-plan .hbau .hb-tag text{font:700 8.5px var(--mono);fill:#14171c;letter-spacing:.05em}
.hero-plan .hb-img{filter:saturate(.55) brightness(.92)}
.hero-plan .hb-wire{fill:none;stroke:#e9eaec;stroke-opacity:.6;stroke-width:1.3;stroke-linecap:round}
.hero-plan .hb-wire--f{stroke-opacity:.28}
.hero-plan .hb--w{transform-box:fill-box;transform-origin:left center}
.hero-plan .caret{visibility:hidden}
.hero-plan .hp-dims,.hero-plan .hp-labels,.hero-plan .hp-dots{opacity:.6}
@media (prefers-reduced-motion: no-preference){
  .hero-plan .caret{visibility:visible}
  .hero-plan .hp-dims,.hero-plan .hp-labels,.hero-plan .hp-dots{opacity:1}
  .js .hero-plan .hb,.js .hero-plan .hb-caret{opacity:0}
  .js .hero-plan.bau .hb{animation:hbIn .7s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--b, 0s) * var(--hbf, 1))}
  .js .hero-plan.bau .hb--w{animation-name:hbWipe;animation-duration:.6s}
  .js .hero-plan.bau .hb-caret{animation:hbCaret 1.1s steps(1) calc(2.35s * var(--hbf, 1)) infinite}
  .js .hero-plan.bau .hb-puls{animation:blink 1.4s steps(1) calc(2.6s * var(--hbf, 1)) 6}
  .hero-plan.bau .caret{visibility:hidden}
  .js .hero-plan.bau .hp-dims,.js .hero-plan.bau .hp-labels,.js .hero-plan.bau .hp-dots{opacity:.6;transition:opacity 1.2s ease calc(2s * var(--hbf, 1))}
}
@keyframes hbIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes hbWipe{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes hbCaret{0%{opacity:1}50%{opacity:0}}

/* Goldstaub (aus Entwurf F, schlank): Team-Band und Hero-Zauber */
.gs-cv{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0}
#team{position:relative;overflow:hidden}
#team > .wrap{position:relative;z-index:1}
.gs-cv--hero{z-index:2;opacity:0;transition:opacity 1.2s ease}
.gs-cv--hero.an{opacity:1}
.hero-plan.glanz{animation:heroGlanz 1.1s ease}
@keyframes heroGlanz{0%{filter:none}35%{filter:brightness(1.2) drop-shadow(0 0 18px rgba(255,214,0,.5))}100%{filter:none}}

/* ============================================================ Beweis-Leiste */
.beweis{background:var(--gelb);color:var(--anthrazit)}
.beweis__in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;padding:17px 0;font:500 14px/1.35 var(--mono)}
.beweis__k{font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.beweis__in > span:not(.beweis__k){display:inline-flex;align-items:center;gap:8px}
.beweis__in svg{flex:none}

/* ============================================================ Bau-Sequenz */
.bau{position:relative;color:var(--d-text);padding:0}
.bau__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px)}
.bau__step{min-height:64vh;min-height:64svh;display:flex;flex-direction:column;justify-content:center;padding:5vh 0}
.bau__step:first-child{padding-top:clamp(56px,6vw,88px)}
.bau__h{font-size:clamp(32px,3.6vw,52px);line-height:1.05;letter-spacing:-.034em;margin-bottom:16px;text-wrap:balance}
.skip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-bottom:32px;font:500 13px/1 var(--mono);color:var(--d-leise);text-decoration:none;border-bottom:1px dashed var(--d-leise);padding-bottom:4px}
.skip:hover{color:var(--gelb);border-color:var(--gelb)}
.step__n{display:inline-grid;place-items:center;min-width:48px;height:34px;padding:0 10px;border:1px solid var(--gelb);border-radius:8px;font:600 15px/1 var(--mono);color:var(--gelb);margin-bottom:22px}
.step__n--ok{background:var(--gelb);color:var(--anthrazit)}
.step h3{font-size:clamp(30px,3.1vw,46px);line-height:1.08;letter-spacing:-.03em;margin-bottom:18px}
.step p{font-size:18.5px;line-height:1.62;color:var(--d-text);max-width:30em}
.step__meta{display:flex!important;align-items:center;gap:12px;margin-top:24px!important;font:500 13.5px/1.3 var(--mono)!important;color:var(--gelb)!important;letter-spacing:.04em}
.step__meta::before{content:"";width:28px;height:1px;background:var(--gelb)}
.step .cta-row{margin-top:32px}
.bau__right{position:relative}
.stage{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));display:flex;flex-direction:column;justify-content:center;gap:0}
.stage__cap{display:flex;justify-content:space-between;gap:16px;margin-bottom:14px;font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-leise)}
.stage__cap b{color:var(--gelb);font-weight:600}
.bau__fig{display:none}
.bau__fig:empty{display:none!important}

/* Browserfenster */
.bw{position:relative;border-radius:14px;background:var(--d-leiste);border:1px solid var(--d-linie);overflow:hidden;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 6px rgba(255,214,0,.04);
  --s1: clamp(0, (var(--p) - .3) / .55, 1);
  --s2: clamp(0, (var(--p) - 1.2) / .65, 1);
  --grid: calc(var(--s1) * (1 - clamp(0, (var(--p) - 1.7) / .3, 1)));
  --spec: calc(clamp(0, (var(--p) - 1.7) / .2, 1) * (1 - clamp(0, (var(--p) - 2.2) / .2, 1)));
  --code: calc(1 - clamp(0, (var(--p) - 2.1) / .25, 1) + clamp(0, (var(--p) - 2.8) / .2, 1));
  --serp: clamp(0, (var(--p) - 3.2) / .5, 1);
  --stamp: clamp(0, (var(--p) - 3.72) / .2, 1)}
.bw__bar{display:flex;align-items:center;gap:14px;height:38px;padding:0 14px;border-bottom:1px solid var(--d-linie)}
.bw__dots{display:flex;gap:6px}
.bw__dots i{width:9px;height:9px;border-radius:50%;background:var(--d-linie)}
.bw__url{position:relative;flex:1;height:22px;border-radius:6px;background:var(--d-grund);font:12px/22px var(--mono);color:var(--d-leise);overflow:hidden}
.bw__url .u{position:absolute;inset:0;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bw__url .u0{opacity:calc(1 - clamp(0, (var(--p) - .5) * 4, 1))}
.bw__url .u1{opacity:calc(clamp(0, (var(--p) - .5) * 4, 1) * (1 - clamp(0, (var(--p) - 1.5) * 4, 1)))}
.bw__url .u2{opacity:calc(clamp(0, (var(--p) - 1.5) * 4, 1) * (1 - clamp(0, (var(--p) - 2.5) * 4, 1)))}
.bw__url .u3{opacity:clamp(0, (var(--p) - 2.5) * 4, 1);color:var(--d-text)}
.bw__url .u3 em{font-style:normal;color:#5fd49e}
.bw__vp{position:relative;aspect-ratio:8/5;background:#fff;container-type:inline-size;overflow:hidden}
.L{position:absolute;inset:0;width:100%;height:100%}
.sketch{opacity:calc(1 - var(--s1))}
.sketch .sk-notes text{font:600 25px "Caveat",cursive;fill:#2a6fb0}
.wire{opacity:var(--s1)}
.wire .wl{font:500 10px var(--mono);fill:#646b75;letter-spacing:.08em}
.wire .wl--s{font-size:7px}
.wire .wl--b{font-size:13px;font-weight:700;fill:#4a5058}
.wire .wl--g{fill:#7d6500;font-size:10px}
@media (prefers-reduced-motion: no-preference){
  .js .sketch path{stroke-dasharray:1px 1px;stroke-dashoffset:1px}
  .js .drawn .sketch path{animation:dash .8s cubic-bezier(.5,0,.3,1) calc(var(--d, 0s) * .45) both}
  .js .sketch text{opacity:0;transition:opacity .6s ease calc(var(--d, 1s) * .6)}
  .js .drawn .sketch text{opacity:1}
  .bw--clone{transition:--p 1.9s cubic-bezier(.65,0,.25,1)}
}
/* Raster 12 Spalten */
.grid12{opacity:var(--grid);display:grid;grid-template-columns:repeat(12,1fr);gap:1.5cqw;padding:0 3.75cqw;pointer-events:none}
.grid12 i{background:rgba(255,214,0,.13);border-inline:1px solid rgba(201,164,0,.45)}
.grid12 b{position:absolute;right:3.75cqw;bottom:2cqw;font:600 1.5cqw/1 var(--mono);color:#6d5800;background:#fff;padding:.6cqw 1cqw;border-radius:.6cqw;letter-spacing:.06em}
/* Die fertige Seite (Western Steakhouse) */
.site{background:#0d0c0b;color:#f1e8da;font-family:var(--sora);clip-path:inset(0 calc((1 - var(--s2)) * 100%) 0 0)}
.wipe{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--gelb);box-shadow:0 0 16px 2px rgba(255,214,0,.6);left:calc(var(--s2) * 100%);opacity:calc(var(--s2) * (1 - var(--s2)) * 6);pointer-events:none}
.s-nav{position:absolute;left:0;right:0;top:0;height:10%;display:flex;align-items:center;gap:1.4cqw;padding:0 3cqw;background:#0a0908;border-bottom:.3cqw solid #9b1c1c;z-index:2}
.s-logo{flex:none;width:4.4cqw;height:4.4cqw;border-radius:50%;background:#f1e8da;color:#9b1c1c;display:grid;place-items:center;font:700 1.45cqw/1 var(--sora);box-shadow:inset 0 0 0 .35cqw #9b1c1c}
.s-brand{font:700 1.4cqw/1.1 var(--sora);letter-spacing:.1em;text-transform:uppercase}
.s-brand small{display:block;font:500 1.05cqw/1.3 var(--sora);letter-spacing:.14em;color:#c9b99f}
.s-links{margin-left:auto;display:flex;gap:2.2cqw;font:500 1.35cqw/1 var(--sans);color:#d8cfc2}
.s-btn{margin-left:1.6cqw;background:#9b1c1c;color:#fff;font:600 1.35cqw/1 var(--sans);padding:1.1cqw 2.2cqw;border-radius:.6cqw}
.s-hero{position:absolute;left:0;right:0;top:10%;height:56%;overflow:hidden}
.s-hero img{width:100%;height:100%;object-fit:cover;object-position:0 64%}
.s-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,5,0) 34%,rgba(8,6,5,.88) 60%)}
.s-copy{position:absolute;left:55%;top:22%;right:3%;z-index:1}
.s-kick{display:block;font:500 1.3cqw/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#e0a95a}
.s-h1{position:relative;display:block;font:700 3.9cqw/1.02 var(--sora);text-transform:uppercase;letter-spacing:-.005em;margin-top:.8cqw;color:#f6efe4}
.s-sub{display:block;margin-top:1.4cqw;font:400 1.55cqw/1.4 var(--sans);color:#d8cfc2}
.s-ctas{display:flex;gap:1.25cqw;margin-top:2.6cqw}
.s-cta{font:600 1.35cqw/1 var(--sans);padding:1.3cqw 2.2cqw;border-radius:.7cqw;background:#9b1c1c;color:#fff}
.s-cta--o{background:transparent;box-shadow:inset 0 0 0 .15cqw #f1e8da;color:#f1e8da}
.s-sec{position:absolute;left:0;right:0;top:66%;bottom:0;padding:2.4cqw 3.75cqw 0;text-align:center}
.s-sec small{display:block;font:500 1.1cqw/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#e0a95a}
.s-sec b{display:block;font:600 2.1cqw/1.2 var(--sora);margin-top:.5cqw}
.s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25cqw;margin-top:1.8cqw;text-align:left}
.s-card{display:flex;align-items:center;gap:1.6cqw;height:11.4cqw;background:#191716;border:1px solid #2b2724;border-radius:.8cqw;padding:0 2cqw}
.s-card i{flex:none;display:grid;place-items:center;width:4.2cqw;height:4.2cqw;border-radius:50%;background:#9b1c1c}
.s-card i svg{width:2.2cqw;height:2.2cqw}
.s-card strong{display:block;font:600 1.6cqw/1.2 var(--sora);color:#f6efe4}
.s-card span{display:block;font:400 1.15cqw/1.35 var(--sans);color:#a89c8c;margin-top:.3cqw}
/* Entwurfs-Anmerkungen */
.spec{opacity:var(--spec);pointer-events:none}
.spec__panel{position:absolute;left:3%;top:14%;width:23%;background:#fff;border-radius:1cqw;box-shadow:0 1.5cqw 3cqw -1cqw rgba(0,0,0,.5);padding:1.4cqw 1.5cqw;font:500 1.15cqw/1.3 var(--mono);color:#4a5058}
.spec__panel p{font-weight:700;color:#14171c;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .8cqw}
.spec__panel ul{list-style:none;margin:0 0 1.2cqw;padding:0;display:grid;gap:.7cqw}
.spec__panel ul:last-child{margin-bottom:0}
.spec__panel li{display:flex;align-items:center;gap:.9cqw}
.spec__panel li i{width:2.2cqw;height:2.2cqw;border-radius:.5cqw;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.spec__panel li b{font:700 1.7cqw/1 var(--sora);color:#14171c;width:2.6cqw}
.spec__box{position:absolute;border:1px dashed var(--gelb)}
.spec__box span{position:absolute;left:-1px;top:-2.6cqw;background:var(--gelb);color:#14171c;font:700 1.1cqw/1 var(--mono);padding:.55cqw .8cqw;border-radius:.4cqw .4cqw .4cqw 0;white-space:nowrap}
/* Code */
.code{transform:translateX(calc(var(--code) * 110%));pointer-events:none}
.code__win{position:absolute;right:3%;top:14%;bottom:8%;width:52%;background:#131417;border:1px solid #33363b;border-radius:1.2cqw;box-shadow:0 2cqw 4cqw -1cqw rgba(0,0,0,.6);overflow:hidden;font:500 1.32cqw/1.95 var(--mono);color:#c9ccd1}
.code__tabs{display:flex;gap:.4cqw;padding:.8cqw 1cqw 0;background:#1e2023;border-bottom:1px solid #33363b}
.code__tabs span{padding:.7cqw 1.2cqw;border-radius:.6cqw .6cqw 0 0;color:#8a9098}
.code__tabs span:first-child{background:#131417;color:#e9eaec}
.code ol{list-style:none;margin:0;padding:1.2cqw 1.6cqw;counter-reset:ln}
.code li{counter-increment:ln;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:clamp(0, (var(--p) - 2.25 - var(--i) * .05) * 14, 1)}
.code li::before{content:counter(ln);display:inline-block;width:2.4cqw;color:#4d525a;text-align:right;margin-right:1.4cqw}
.code .t{color:#ffd600}.code .a{color:#8ab4e8}.code .v{color:#9fd8b8}.code .c{color:#6f757d}
.code li.ok{color:#5fd49e}
/* Prüfhaken */
.checks{inset:auto;left:3%;top:40%;width:44%;height:auto;display:flex;flex-wrap:wrap;gap:1cqw;list-style:none;margin:0;padding:0;opacity:calc(1 - var(--serp));pointer-events:none}
.checks li{display:flex;align-items:center;gap:.9cqw;font:500 1.35cqw/1 var(--mono);padding:1cqw 1.4cqw;background:rgba(19,20,23,.92);border:1px solid #33363b;border-radius:.8cqw;color:#e9eaec;
  opacity:clamp(0, (var(--p) - 2.8 - var(--i) * .05) * 10, 1);transform:translateY(calc((1 - clamp(0, (var(--p) - 2.8 - var(--i) * .05) * 10, 1)) * 60%))}
.checks li::before{content:"✓";display:grid;place-items:center;width:1.9cqw;height:1.9cqw;border-radius:50%;background:#17845e;color:#fff;font-size:1.1cqw;font-weight:700}
/* Suchergebnis: eigene Karte neben dem Fenster (eigener Container für cqw) */
.bw-paar{position:relative;--sr:clamp(0, (var(--p) - 3.2) / .5, 1);--stp:clamp(0, (var(--p) - 3.72) / .2, 1)}
.serp-box{position:absolute;right:0;top:50%;z-index:2;width:42%;container-type:inline-size;pointer-events:none;
  opacity:var(--sr);transform:translate(calc((1 - var(--sr)) * -48%), -50%) scale(calc(.9 + .1 * var(--sr)))}
.serp__card{position:relative;background:#fff;border-radius:4.5cqw;box-shadow:0 5cqw 12cqw -3cqw rgba(0,0,0,.6);padding:5.5cqw 5.5cqw 6cqw;color:#14171c}
.serp__q{display:flex;align-items:center;gap:2.6cqw;height:11cqw;padding:0 4cqw;border-radius:5.5cqw;border:1px solid #d5d9df;font:500 4cqw/1 var(--sans);color:#14171c;white-space:nowrap}
.serp__q svg{width:4.2cqw;height:4.2cqw;color:#4a5058;flex:none}
.serp__q .ph{margin-left:auto;font:500 2.9cqw/1.6 var(--mono);color:#4a5058}
.serp ol{list-style:none;margin:4.5cqw 0 0;padding:0;display:grid;gap:3cqw}
.serp li{position:relative;display:flex;align-items:center;gap:3.4cqw;padding:3cqw 3.4cqw;border-radius:2.6cqw}
.serp__pos{flex:none;display:grid;place-items:center;width:7.4cqw;height:7.4cqw;border-radius:50%;background:#eef0f3;font:700 3.4cqw/1 var(--mono);color:#4a5058}
.serp__hit{background:var(--merk-bg);box-shadow:inset 1.2cqw 0 0 var(--gelb)}
.serp__hit .serp__pos{background:#14171c;color:var(--gelb)}
.serp__hit small{display:block;font:500 3cqw/1.3 var(--mono);color:#17845e}
.serp__hit strong{display:block;font:600 4.6cqw/1.2 var(--sora);color:#1b3f7a;margin:.5cqw 0}
.serp__hit span:not(.serp__pos){display:block;font:400 3.3cqw/1.35 var(--sans);color:#4a5058}
.serp li i{display:block;height:2.6cqw;border-radius:1.3cqw;background:#e6e9ed;margin:1.2cqw 0}
.serp li div{flex:1;min-width:0}
.serp li i:first-child{width:48%}.serp li i:last-child{width:78%}
.serp__hit > div{padding-right:13cqw}
.serp__stamp{position:absolute;right:-6cqw;top:19cqw;width:23cqw;height:19cqw;opacity:var(--stp);transform:rotate(-9deg) scale(calc(1.8 - .8 * var(--stp)))}
.serp__stamp svg{width:100%;height:100%;overflow:visible}
.serp__stamp text{font-family:var(--sora);font-weight:700}
/* „das ist diese Seite“: feine gelbe Maßlinie vom Treffer bis ans Fenster */
.serp__hit::before{content:"";position:absolute;right:100%;top:50%;width:13.6cqw;height:1.5px;background:var(--gelb);transform-origin:right center;transform:scaleX(var(--stp))}
.serp__hit::after{content:"";position:absolute;right:calc(100% + 13.6cqw);top:50%;width:2.4cqw;height:2.4cqw;margin:-1.2cqw -1.2cqw 0 0;border-radius:50%;background:var(--gelb);box-shadow:0 0 0 1.2cqw rgba(255,214,0,.2);opacity:var(--stp)}
/* Fenster rückt zur Seite: nur in der klebenden Desktop-Sequenz */
@media (min-width:900px) and (prefers-reduced-motion: no-preference){
  .stage .bw{transform-origin:left center;transform:scale(calc(1 - .45 * var(--sr)))}
}
/* Gestapelte Fassung (Handy, ohne Bewegung): Karte unter dem Fenster, leicht versetzt, nur beim letzten Bild */
.bw--clone .serp-box{position:relative;right:auto;top:auto;width:76%;margin:18px 0 0 auto;transform:translateY(calc((1 - var(--sr)) * 24px))}
.bw--clone:not(.bw--ende) .serp-box{display:none}
.bw--clone .serp__hit::before,.bw--clone .serp__hit::after{display:none}
.bw--clone .serp__stamp{right:1cqw;transform:rotate(-9deg) scale(calc(1.25 - .25 * var(--stp)))}
.bau__fig{overflow-x:clip}
/* Maßkette unter dem Fenster */
.chain{position:relative;list-style:none;margin:26px 0 0;padding:14px 0 0;display:grid;grid-template-columns:repeat(4,1fr) auto;font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--d-text)}
.chain::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--d-linie)}
.chain::after{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--gelb);transform-origin:left;transform:scaleX(calc(var(--p) / 4))}
.chain li{position:relative;padding-top:4px;opacity:calc(.38 + .62 * clamp(0, (var(--p) - var(--i) + .5) * 2, 1))}
.chain li::before{content:"";position:absolute;left:0;top:-20px;width:1px;height:12px;background:var(--d-leise)}
.chain li:last-child::before{left:auto;right:0}
.chain li:last-child{text-align:right}
.chain li span{display:block;color:var(--gelb);font-weight:700}

/* Sequenz-Modus (Desktop, mit Bewegung) */
@media (min-width:900px) and (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .bau__grid{view-timeline:--bau block}
    .stage{animation:bauP linear both;animation-timeline:--bau;animation-range:contain 0% contain 100%}
    .bau__step{animation:stepFocus linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
  .no-sda .bau__step{opacity:.28;transition:opacity .5s ease}
  .no-sda .bau__step.is-on{opacity:1}
}
@keyframes bauP{from{--p:0}to{--p:4}}
@keyframes stepFocus{0%,12%{opacity:.3}38%,62%{opacity:1}88%,100%{opacity:.3}}

/* Stapel-Modus (Handy, oder ohne Bewegung) */
@media (max-width:899px), (prefers-reduced-motion: reduce){
  .bau__grid{display:block}
  .js .bau__right{display:none}
  .stage{position:static;height:auto;padding-bottom:64px}
  .bau__step{min-height:0;padding:28px 0}
  .bau__step:first-child{padding-top:clamp(48px,7vw,80px)}
  .bau__step:last-child{padding-bottom:clamp(56px,7vw,88px)}
  .bau__fig{display:block;margin-top:28px}
  .skip{margin-bottom:36px}
}
@media (min-width:900px) and (prefers-reduced-motion: reduce){
  .js .bau__step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
  .js .bau__step .bau__fig{margin-top:0}
}

/* ============================================================ Website-Check · Google & KI-Suche */
.check__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:end}
.check__form label{display:block;font:600 14px/1.3 var(--sans);color:var(--anthrazit);margin-bottom:8px}
.check__row{display:flex;gap:10px}
.inp,.check__row input{flex:1;min-width:0;height:56px;padding:0 16px;border-radius:10px;border:1px solid #cfd4db;background:#f6f7f9;box-shadow:inset 0 1px 2px rgba(20,23,28,.07);font:16px var(--sans);color:var(--anthrazit)}
.check__row input::placeholder,.inp::placeholder{color:#6b727c}
.check__row .btn{min-height:56px;flex:none}
.check__hint{margin-top:12px;font:500 12.5px/1.5 var(--mono);color:var(--text)}
.check__hint.err{color:#b3261e}
.check__none{margin-top:6px;font-size:15px}
.check__none a{font-weight:600;text-underline-offset:3px}
.plan{margin-top:48px;border-radius:16px;overflow:hidden;color:var(--d-text);box-shadow:0 30px 60px -34px rgba(20,23,28,.55)}
.plan__title{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;padding:14px 24px;border-bottom:1px solid var(--d-linie);font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-leise)}
.plan__title > span:first-child{color:var(--gelb);font-weight:700}
.plan__status{margin-left:auto;color:var(--d-text);text-transform:none;letter-spacing:.02em}
.plan[data-state="laeuft"] .plan__status::after{content:"▍";color:var(--gelb);margin-left:4px}
@media (prefers-reduced-motion: no-preference){ .plan[data-state="laeuft"] .plan__status::after{animation:blink 1s steps(1) infinite} }
.plan__body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,290px) minmax(0,1fr);gap:clamp(36px,4.4vw,64px);padding:36px clamp(20px,2.4vw,32px) 40px}
.plan__colh{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gelb);margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--d-linie);display:flex;justify-content:space-between}
.plan__colh em{font-style:normal;color:var(--d-leise)}
.plan__col ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pp{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) 62px;gap:12px;align-items:center;padding:12px 12px 12px 14px;border:1px solid var(--d-linie);border-radius:10px;background:rgba(30,32,35,.9);min-height:88px;z-index:1}
.pp__nr{width:24px;height:24px;border-radius:50%;border:1.3px solid var(--gelb);color:var(--gelb);font:700 11px/21px var(--mono);text-align:center}
.pp b{display:block;font:600 15px/1.25 var(--sora);color:#fff}
.pp__was{display:block;font:500 11.5px/1.4 var(--mono);color:var(--d-leise);margin-top:4px}
.pp__bef{display:block;font:14px/1.45 var(--sans);color:var(--d-text);margin-top:6px}
.pp__bef:empty{display:none}
.pp__bef em{font-style:normal;color:var(--gelb)}
.stamp{width:60px;height:60px;border-radius:50%;border:2px dashed #41454c;display:grid;place-items:center;font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-leise);transform:rotate(-12deg);text-align:center}
.stamp[data-s]{border:3px double currentColor}
.stamp[data-s="gut"]{color:#5fd49e}
.stamp[data-s="mittel"]{color:var(--gelb)}
.stamp[data-s="schlecht"]{color:#ff8a7a}
@media (prefers-reduced-motion: no-preference){ .stamp.hit{animation:stampIn .5s cubic-bezier(.2,1.5,.4,1) both} }
@keyframes stampIn{0%{transform:scale(2.3) rotate(-30deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-12deg);opacity:1}}
.plan__draw{position:relative;align-self:center}
.plan__svg{width:100%;height:auto;display:block;overflow:visible;transition:opacity .5s}
.plan[data-state="leer"] .plan__svg{opacity:.6}
.pl-lines rect,.pl-lines path,.pl-lines circle{fill:none;stroke:#e9eaec;stroke-opacity:.6;stroke-width:1.2}
.pl-lines .thin{stroke-opacity:.3}
.pl-lines .fillb{fill:rgba(233,234,236,.1)}
.pl-lines .foot{fill:rgba(233,234,236,.05);stroke-opacity:.3}
.pl-code{font:500 9.5px var(--mono);fill:var(--d-leise)}
.pl-url{font:500 8.5px var(--mono);fill:var(--d-text)}
.anc circle{fill:var(--anthrazit);stroke:var(--gelb);stroke-width:1.3;transition:fill .3s,stroke .3s}
.anc text{font:700 8.5px var(--mono);fill:var(--gelb)}
.anc.s-gut circle{fill:#5fd49e;stroke:#5fd49e}.anc.s-mittel circle{fill:var(--gelb)}.anc.s-schlecht circle{fill:#ff8a7a;stroke:#ff8a7a}
.anc[class*="s-"] text{fill:var(--anthrazit)}
.plan__scan{position:absolute;left:-7%;right:-7%;top:0;height:2px;background:var(--gelb);box-shadow:0 0 18px 3px rgba(255,214,0,.55);opacity:0;pointer-events:none}
.plan[data-state="laeuft"] .plan__scan{opacity:1;top:50%}
@media (prefers-reduced-motion: no-preference){ .plan[data-state="laeuft"] .plan__scan{animation:scan 1.3s ease-in-out infinite alternate} }
@keyframes scan{from{top:0}to{top:100%}}
.plan__lines{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.plan__lines path{fill:none;stroke:var(--gelb);stroke-width:1;stroke-opacity:.55}
.plan__lines circle{fill:var(--gelb)}
.plan[data-state="leer"] .plan__lines{opacity:.45}
@media (prefers-reduced-motion: no-preference){
  .plan__lines.anim path{stroke-dasharray:1px 1px;animation:dash 1s ease both;animation-delay:var(--dl,0s)}
}
@keyframes dash{from{stroke-dashoffset:1px}to{stroke-dashoffset:0px}}
.plan__sum{display:grid;grid-template-columns:1fr 1.15fr 1.25fr;border-top:1px solid var(--d-linie)}
.plan__sum[hidden]{display:none}
.sum__cell{padding:28px clamp(20px,2.4vw,32px);border-left:1px solid var(--d-linie)}
.sum__cell:first-child{border-left:0}
.sum__k{font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d-leise);margin-bottom:16px}
.gauge{display:grid;grid-template-columns:1fr auto;align-items:baseline;margin-bottom:20px}
.gauge > span{font:500 13px/1 var(--mono);color:var(--d-text);text-transform:uppercase;letter-spacing:.08em}
.gauge b{font:600 36px/1 var(--sora);color:#fff;letter-spacing:-.02em}
.gauge b small{font-size:14px;color:var(--d-leise);font-weight:500;margin-left:2px}
.gauge i{grid-column:1/-1;position:relative;height:6px;margin-top:12px;border-radius:3px;background:var(--d-karte);overflow:hidden}
.gauge em{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gelb);border-radius:3px;transition:width 1.2s cubic-bezier(.3,0,.2,1)}
.sum__platz{font:600 20px/1.3 var(--sora);color:#fff}
.sum__platz span{color:var(--gelb)}
.sum__note{font-size:13.5px;line-height:1.5;color:var(--d-leise);margin:8px 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{font:500 13px/1 var(--mono);padding:8px 10px;border:1px solid var(--d-linie);border-radius:8px;color:var(--d-text)}
.sum__rec{font:600 24px/1.2 var(--sora);color:var(--gelb);margin-bottom:8px}
.sum__grund{color:var(--d-text);font-size:16px;margin-bottom:22px}
.sum__cta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.plan__demo{padding:12px 24px;border-top:1px solid var(--d-linie);font:500 11.5px/1.4 var(--mono);color:var(--d-leise)}
.check__next{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.check__next[hidden]{display:none}
.card{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:28px;box-shadow:0 1px 2px rgba(20,23,28,.04),0 14px 34px -18px rgba(20,23,28,.22);transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(20,23,28,.04),0 22px 40px -18px rgba(20,23,28,.28)}
.card h3{font-size:22px;letter-spacing:-.02em;margin-bottom:10px}
.card p{font-size:16px}
.card .check__row{margin-top:18px}
.card__ok{margin-top:12px;font:500 13.5px/1.5 var(--mono);color:var(--gruen)}
.card .cta-row{margin-top:20px;align-items:center}
.tel{font:600 16px var(--mono);color:var(--anthrazit);text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:2px}

/* Website-Check: Eingabefeld als Blickfang, Ergebnis-Panel vorher als leise Vorschau */
.check__head{display:block;max-width:860px}
.check__form{margin-top:34px}
.check__field{display:flex;align-items:center;gap:8px;max-width:760px;height:72px;padding:0 8px 0 0;border:2px solid var(--anthrazit);border-radius:14px;background:#fff;box-shadow:0 20px 44px -26px rgba(20,23,28,.4);transition:box-shadow .2s}
.check__field:focus-within{box-shadow:0 0 0 4px var(--gelb),0 20px 44px -26px rgba(20,23,28,.4)}
.check__in{flex:1;min-width:0;display:flex;align-items:center;height:100%;cursor:text;color:var(--anthrazit)}
.check__in svg{flex:none;margin:0 12px 0 20px}
.check__form label.check__in{display:flex;margin:0}
.check__in input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;font:500 21px/1 var(--sans);color:var(--anthrazit)}
.check__in input:focus,.check__in input:focus-visible{outline:none}
.check__in input::placeholder{color:#8a9098}
.check__field .btn{flex:none;min-height:56px;padding:0 24px;font-size:17px;white-space:nowrap}
.check__plus{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:16px;font:500 15px/1.4 var(--sans);color:var(--anthrazit)}
.check__plus span{display:inline-flex;align-items:center;gap:7px}
.check__plus span::before{content:"";width:6px;height:10px;margin:-3px 3px 0 2px;border:solid var(--gruen);border-width:0 2px 2px 0;transform:rotate(45deg)}
.check__none{margin-top:10px;font-size:14.5px;color:var(--text)}
.check__none .check__hint{display:inline;margin:0 0 0 10px;font-size:12.5px}
@media (prefers-reduced-motion: no-preference){ .check__field.puls{animation:chkPuls 1.3s ease-out 2} }
@keyframes chkPuls{0%{box-shadow:0 0 0 0 rgba(255,214,0,.9),0 20px 44px -26px rgba(20,23,28,.4)}100%{box-shadow:0 0 0 16px rgba(255,214,0,0),0 20px 44px -26px rgba(20,23,28,.4)}}
.plan{transition:opacity .6s ease,filter .6s ease}
.plan[data-state="leer"]{opacity:.42;filter:saturate(0)}
.plan[data-state="leer"] .pp{min-height:58px;padding-top:8px;padding-bottom:8px}
.plan[data-state="leer"] .pp__was{display:none}
.plan[data-state="leer"] .plan__body{padding-top:24px;padding-bottom:26px}
.plan[data-state="leer"] .plan__title > span:first-child,.plan[data-state="leer"] .plan__colh,.plan[data-state="leer"] .pp__nr{color:var(--d-leise);border-color:var(--d-leise)}
@media (max-width:639px){
  .check__field{flex-direction:column;align-items:stretch;gap:10px;height:auto;padding:0;border:0;background:none;box-shadow:none}
  .check__field:focus-within{box-shadow:none}
  .check__in{height:64px;border:2px solid var(--anthrazit);border-radius:12px;background:#fff}
  .check__in:focus-within{box-shadow:0 0 0 4px var(--gelb)}
  .check__in svg{margin:0 10px 0 16px}
  .check__in input{font-size:19px}
  .check__field .btn{width:100%;min-height:58px}
  .check__plus{gap:6px 14px;font-size:14px}
  .check__none .check__hint{display:block;margin:6px 0 0}
}
/* ============================================================ Leistungen · Stückliste */
.mat{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:clamp(40px,5vw,88px);align-items:start}
.mat__intro{position:sticky;top:calc(var(--hh) + 32px)}
.mat__intro .box{margin-top:32px}
.bom{width:100%;border-collapse:collapse}
.bom caption{text-align:left}
.bom thead th{font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--anthrazit);text-align:left;padding:0 14px 14px;border-bottom:2px solid var(--anthrazit)}
.bom thead th:last-child{text-align:right}
.bom__group th{padding:34px 14px 12px;font:600 13px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--anthrazit);text-align:left;border-bottom:1px solid var(--anthrazit)}
.bom__group th span{display:inline-block;background:var(--gelb);padding:4px 8px;border-radius:5px;margin-right:10px}
.bom tbody tr:first-child th{padding-top:24px}
.bom td{padding:17px 14px;border-bottom:1px solid var(--linie);vertical-align:top;font-size:16px;line-height:1.5}
.bom td:first-child{font:500 13px/1.6 var(--mono);color:var(--anthrazit);white-space:nowrap;width:64px}
.bom td.bt{font:600 17px/1.35 var(--sora);color:var(--anthrazit);letter-spacing:-.01em;width:32%}
.bom td.bt a{text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) left bottom/0 1.5px no-repeat;transition:background-size .3s}
.bom td.bt a:hover{background-size:100% 1.5px}
.bom td.qty{text-align:right;white-space:nowrap;font:500 12.5px/1.8 var(--mono);color:var(--text)}
.bom td.qty.inkl{color:var(--gruen);font-weight:700}
.bom tbody tr:not(.bom__group){transition:background-color .2s}
.bom tbody tr:not(.bom__group):hover{background:#fafbfc}
.bom tbody tr:not(.bom__group):hover td:first-child{box-shadow:inset 3px 0 0 var(--gelb)}

/* Check: „nicht prüfbar“ und Fehler */
.stamp[data-s="offen"]{border:2px dashed currentColor;color:var(--d-leise);font-size:8px;line-height:1.15}
.anc.s-offen circle{fill:var(--anthrazit);stroke:#8a9098;stroke-dasharray:2 2}
.anc.s-offen text{fill:#8a9098}
.check__fehler,.kf-fehler{margin-top:14px;max-width:760px;padding:14px 16px 14px 18px;border-radius:10px;border:1px solid #f1c3bd;background:#fff6f5;box-shadow:inset 3px 0 0 #c0392b;color:#5c1f19;font-size:15px;line-height:1.5}
.check__fehler[hidden],.kf-fehler[hidden]{display:none}
.check__fehler b,.kf-fehler b{color:#8e2a20}
.fehler__detail{margin-top:4px;font-size:13.5px;color:#7a4a45}
.fehler__nochmal{margin-top:10px;min-height:40px;padding:0 16px;border:1.5px solid #8e2a20;border-radius:9px;background:#fff;font:600 14.5px var(--sans);color:#8e2a20;cursor:pointer}
.fehler__nochmal:hover{background:#8e2a20;color:#fff}
/* ============================================================ Leistungen · Kartenband */
.lb-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 48px;margin-bottom:40px}
.lb-kopf > div{max-width:720px}
.lb-kopf .h2{margin-bottom:0}
.lb-einl{max-width:430px}
.lb-rahmen{width:min(100% - 48px,1240px);margin-inline:auto;outline:none}
.lb-spur{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px 30px}
.lb-stueck{position:relative;display:flex}
.lb-platte{position:absolute;inset:0;border-radius:18px;background:rgba(255,214,0,.5);border:1px solid rgba(201,164,0,.45);transform:translate(10px,10px) rotate(2.2deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.lb-stueck:nth-child(even) .lb-platte{transform:translate(-8px,12px) rotate(-2.2deg)}
.lb-karte{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;min-height:440px;padding:12px 12px 22px;border-radius:18px;background:#fff;border:1px solid var(--linie);box-shadow:0 22px 46px -26px rgba(20,23,28,.4);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.lb-stueck:hover .lb-karte{transform:translateY(-6px);box-shadow:0 30px 56px -28px rgba(20,23,28,.45)}
.lb-stueck:hover .lb-platte{transform:translate(16px,14px) rotate(4deg)}
.lb-stueck:nth-child(even):hover .lb-platte{transform:translate(-14px,16px) rotate(-4deg)}
.lb-fenster{position:relative;overflow:hidden;isolation:isolate;border-radius:12px;padding:10px 12px 8px;margin-bottom:20px;
  background:linear-gradient(125deg,rgba(255,255,255,.08),rgba(255,255,255,0) 42%),linear-gradient(150deg,#282c33 0%,#1a1d22 58%,#131519 100%);
  border:1px solid #2f333a;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.lb-fenster::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,214,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,214,0,.05) 1px,transparent 1px);background-size:16px 16px}
.lb-fkopf{display:flex;align-items:center;gap:9px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07);font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#c9ccd1}
.lb-chip{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:rgba(255,214,0,.14);border:1px solid rgba(255,214,0,.35);color:var(--gelb)}
.lb-chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lb-svg{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}
.lb-svg *{transform-box:fill-box;transform-origin:center}
.lb-l{fill:none;stroke:rgba(233,234,236,.55);stroke-width:1.3}
.lb-th{stroke-opacity:.5}
.lb-f1{fill:rgba(233,234,236,.85)}
.lb-f3{fill:rgba(233,234,236,.45)}
.lb-f4{fill:rgba(233,234,236,.07);stroke:rgba(233,234,236,.12);stroke-width:1}
.lb-f4b{fill:rgba(233,234,236,.2)}
.lb-t{font:500 11px var(--mono);fill:#e9eaec}
.lb-tg{fill:var(--gelb);font-weight:700}
.lb-ts{font-size:8.5px}
.lb-tz{font:700 17px var(--sora);fill:#fff}
.lb-kreis{fill:none;stroke:rgba(233,234,236,.4);stroke-width:1.4}
.lb-haken{fill:none;stroke:#5fd49e;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ani-tippen{transform:scaleX(0);transform-origin:right center}
.ani-ring,.ani-ring2{opacity:0}
.lb-inhalt{display:flex;flex-direction:column;flex:1;padding:0 10px}
.lb-nr{font:600 12px/1 var(--mono);letter-spacing:.14em;color:var(--text)}
.lb-karte h3{margin:8px 0 10px;font-size:22px;line-height:1.2;letter-spacing:-.02em}
.lb-karte p{font-size:16px;line-height:1.55}
.lb-mehr{margin-top:auto;padding-top:18px;align-self:flex-start;display:inline-flex;gap:6px;font-weight:600;color:var(--anthrazit);text-decoration:underline;text-decoration-color:var(--gelb);text-decoration-thickness:2px;text-underline-offset:5px}
.lb-mehr span{transition:transform .3s}
.lb-mehr:hover span{transform:translateX(4px)}
.lb-karte--dunkel{justify-content:space-between;padding:26px 24px 24px;background:linear-gradient(150deg,#23262c,#14171c);border-color:#2f333a;color:var(--d-text)}
.lb-karte--dunkel h3{color:#fff;margin:18px 0 0}
.lb-karte--dunkel p{color:var(--d-text);margin-top:22px}
.lb-karte--dunkel strong{color:#fff}
.lb-karte--dunkel :focus-visible{outline-color:var(--gelb)}
.lb-mehr--d{color:#fff}
.lb-pille{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid rgba(233,234,236,.2);background:rgba(255,255,255,.06);font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-text)}
.lb-pille i{width:7px;height:7px;border-radius:50%;background:var(--gelb)}
.lb-inkl{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.lb-inkl li{position:relative;padding:8px 10px 8px 27px;border-radius:8px;border:1px solid var(--d-linie);font:500 13.5px/1.2 var(--sans);color:#fff}
.lb-inkl li::before{content:"";position:absolute;left:11px;top:50%;width:5px;height:9px;margin-top:-6px;border:solid #5fd49e;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lb-fuss{margin-top:6px}
.lb-balken{display:none}
.lb-wisch{display:none}
/* Animationen in den Fenstern (nur sichtbare Karten laufen) */
@media (prefers-reduced-motion: no-preference){
  .ani-zeiger{animation:lbZeiger 4s cubic-bezier(.65,0,.35,1) infinite}
  .ani-ring{animation:lbRing 4s ease-out infinite}
  .ani-druck{animation:lbDruck 4s ease infinite}
  .ani-tippen{animation:lbTippen 5s steps(16) infinite}
  .ani-cursor{animation:lbCursor 1s steps(2) infinite}
  .ani-steigen{animation:lbSteigen 5s cubic-bezier(.65,0,.35,1) infinite}
  .ani-sinken{animation:lbSinken 5s cubic-bezier(.65,0,.35,1) infinite}
  .ani-zeiger2{animation:lbZeiger2 2.4s cubic-bezier(.65,0,.35,1) infinite}
  .ani-ring2{animation:lbRing2 2.4s ease-out infinite}
  .ani-druck2{animation:lbDruck2 2.4s ease infinite}
  .ani-zaehl{animation:lbZaehl 9.6s step-end infinite}
  .ani-schreib{transform-origin:left center;animation:lbSchreib 6s ease-out infinite}
  .ani-v1{animation-delay:0s}.ani-v2{animation-delay:.35s}.ani-v3{animation-delay:.7s}.ani-v4{animation-delay:1.05s}.ani-v5{animation-delay:1.4s}.ani-v6{animation-delay:1.75s}
  .ani-feder{animation:lbFeder 6s ease-in-out infinite}
  .ani-ticket .lb-haken{animation:lbHaken 6s ease infinite}
  .ani-ticket .lb-kreis{animation:lbKreis 6s ease infinite}
  .ani-t2 .lb-haken,.ani-t2 .lb-kreis{animation-delay:1s}
  .ani-t3 .lb-haken,.ani-t3 .lb-kreis{animation-delay:2s}
  .lb-karte:not(.lb-sicht) .lb-svg *{animation-play-state:paused}
}
@keyframes lbZeiger{0%,12%{transform:translate(120px,24px)}45%,62%{transform:translate(0,0)}52%{transform:translate(0,0) scale(.82)}100%{transform:translate(120px,24px)}}
@keyframes lbRing{0%,50%{opacity:0;transform:scale(.3)}53%{opacity:1}70%,100%{opacity:0;transform:scale(1.8)}}
@keyframes lbDruck{0%,49%,57%,100%{transform:none}52%{transform:scale(.93)}}
@keyframes lbTippen{0%{transform:scaleX(1)}55%,100%{transform:scaleX(0)}}
@keyframes lbCursor{50%{opacity:0}}
@keyframes lbSteigen{0%,20%{transform:translateY(62px)}55%,100%{transform:translateY(0)}}
@keyframes lbSinken{0%,20%{transform:translateY(0)}55%,100%{transform:translateY(30px)}}
@keyframes lbZeiger2{0%{transform:translate(70px,40px)}40%,60%{transform:translate(0,0)}48%{transform:translate(0,0) scale(.82)}100%{transform:translate(70px,40px)}}
@keyframes lbRing2{0%,46%{opacity:0;transform:scale(.3)}49%{opacity:1}66%,100%{opacity:0;transform:scale(1.8)}}
@keyframes lbDruck2{0%,45%,53%,100%{transform:none}48%{transform:scale(.985)}}
@keyframes lbZaehl{0%{transform:translateY(0)}25%{transform:translateY(-22px)}50%{transform:translateY(-44px)}75%{transform:translateY(-66px)}}
@keyframes lbSchreib{0%,3%{transform:scaleX(0)}18%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes lbFeder{0%{transform:translate(-90px,-70px)}18%{transform:translate(-50px,-58px)}35%{transform:translate(-40px,-30px)}55%{transform:translate(-10px,0)}88%{transform:translate(0,0)}100%{transform:translate(-90px,-70px)}}
@keyframes lbHaken{0%,15%{opacity:0;transform:scale(.3)}25%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes lbKreis{0%,15%{fill:none;stroke:rgba(233,234,236,.4)}25%,90%{fill:rgba(95,212,158,.16);stroke:#5fd49e}100%{fill:none;stroke:rgba(233,234,236,.4)}}
/* Desktop: Band klebt und läuft beim senkrechten Scrollen waagrecht durch (kein Hijacking) */
@media (min-width:900px) and (prefers-reduced-motion: no-preference){
  .lb.sec{height:320vh;padding:0}
  .lb-halter{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));overflow:hidden;display:flex;flex-direction:column;justify-content:center;container-type:inline-size}
  .lb-kopf{width:min(100% - 48px,1240px);margin-bottom:30px}
  .lb-rahmen{width:100%}
  .lb-spur{display:flex;width:max-content;gap:40px;padding:16px max(24px,calc(50cqw - 620px)) 26px;will-change:transform}
  .lb-stueck{width:340px;flex:none}
  .lb-fuss{width:min(100% - 48px,1240px)}
  .lb-balken{display:block;height:3px;border-radius:3px;background:var(--linie);overflow:hidden}
  .lb-balken i{display:block;height:100%;background:var(--anthrazit);transform-origin:left;transform:scaleX(var(--lbp,0))}
  @supports (animation-timeline: view()){
    .lb{view-timeline:--lb block}
    .lb-spur{animation:lbQuer linear both;animation-timeline:--lb;animation-range:contain 0% contain 100%}
    .lb-balken i{animation:lbFuell linear both;animation-timeline:--lb;animation-range:contain 0% contain 100%}
  }
}
@media (min-width:900px) and (max-height:820px) and (prefers-reduced-motion: no-preference){
  .lb-kopf{margin-bottom:18px}
  .lb-kopf .h2{font-size:clamp(30px,3.4vw,44px)}
  .lb-karte{min-height:0}
  .lb-fenster{margin-bottom:14px}
  .lb-karte p{font-size:15px}
}
@keyframes lbQuer{to{transform:translateX(calc(-100% + 100cqw))}}
@keyframes lbFuell{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Handy: wischbares Karussell mit Scroll-Snap */
@media (max-width:899px){
  .lb-rahmen{width:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:14px 0 26px}
  .lb-rahmen::-webkit-scrollbar{display:none}
  .lb-spur{display:flex;width:max-content;gap:22px;padding:0 22px}
  .lb-stueck{width:min(310px,80vw);flex:none;scroll-snap-align:center}
  .lb-karte{min-height:420px}
  .lb-wisch{display:block;text-align:center;font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--text)}
}

/* ============================================================ Referenzen · Röntgenblick */
.ref__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.ref__head > div{max-width:720px}
.xswitch{display:inline-flex;align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:14px;border:1px solid var(--d-linie);background:var(--d-leiste);color:var(--d-text);cursor:pointer;text-align:left;transition:border-color .2s}
.xswitch:hover{border-color:var(--gelb)}
.xswitch__track{position:relative;flex:none;width:58px;height:32px;border-radius:16px;background:var(--d-karte);border:1px solid var(--d-linie);transition:background-color .25s}
.xswitch__knob{position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:var(--d-text);transition:transform .3s cubic-bezier(.3,1.4,.5,1),background-color .25s}
.xswitch[aria-checked="true"] .xswitch__track{background:var(--gelb);border-color:var(--gelb)}
.xswitch[aria-checked="true"] .xswitch__knob{transform:translateX(26px);background:var(--anthrazit)}
.xswitch__lbl b{display:block;font:600 16px/1.2 var(--sora);color:#fff}
.xswitch__lbl span{display:block;font:500 12px/1.4 var(--mono);color:var(--d-leise);margin-top:2px}
.refs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:52px}
.ref{grid-column:span 3;display:flex;flex-direction:column;background:var(--d-leiste);border:1px solid var(--d-linie);border-radius:14px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 20px 40px -30px rgba(0,0,0,.8)}
.ref:hover{transform:translateY(-3px)}
.ref--big{grid-column:span 6}
.ref__media{position:relative;aspect-ratio:3/2;background:var(--d-karte);overflow:hidden}
.ref--big .ref__media{aspect-ratio:16/8.6}
.ref__media > img,.ref__x > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:7% 6% 3%}
.ref__media--photo > img,.ref__media--photo .ref__x > img{object-fit:cover;padding:0}
.ref__x{position:absolute;inset:0;background:#0f1216;clip-path:inset(0 0 100% 0);transition:clip-path .95s cubic-bezier(.65,0,.25,1) var(--dl,0s)}
.ref__x::before{content:"";position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(rgba(255,214,0,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,214,0,.13) 1px,transparent 1px);background-size:22px 22px}
.ref__x > img{filter:grayscale(1) invert(1) contrast(1.6) brightness(.8);opacity:.5;mix-blend-mode:screen}
.ref__x svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.ref__x svg rect,.ref__x svg path{fill:none;stroke:var(--gelb);stroke-width:1.2;vector-effect:non-scaling-stroke}
.ref__x svg .dsh{stroke-dasharray:5 4;stroke-opacity:.8}
.ref__x .xlbl{position:absolute;left:12px;top:10px;z-index:3;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--anthrazit);background:var(--gelb);padding:5px 7px;border-radius:4px}
.ref__scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:4;background:var(--gelb);box-shadow:0 0 16px 2px rgba(255,214,0,.7);opacity:0;pointer-events:none}
.refs.is-x .ref__x{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion: no-preference){ .refs.is-x .ref__scan{animation:xscan .95s cubic-bezier(.65,0,.25,1) var(--dl,0s) both} }
@media (prefers-reduced-motion: reduce){ .ref__x{transition:none} }
@keyframes xscan{0%{top:0;opacity:1}92%{top:100%;opacity:1}100%{top:100%;opacity:0}}
.ref__body{padding:20px 22px 22px;flex:1}
.ref__body h3{font-size:19px;letter-spacing:-.015em}
.ref--big .ref__body h3{font-size:23px}
.ref__tags{margin-top:6px!important;font:500 12.5px/1.5 var(--mono);color:var(--d-leise)}
.ref__specwrap{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .6s cubic-bezier(.65,0,.25,1),visibility 0s .6s}
.refs.is-x .ref__specwrap{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .6s cubic-bezier(.65,0,.25,1) .25s,visibility 0s}
.ref__specwrap > dl{min-height:0;overflow:hidden;margin:0}
.ref__spec{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:4px 22px}
.ref__spec > div{padding-top:16px}
.ref__spec dt{font:500 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-leise)}
.ref__spec dd{margin:4px 0 0;font:600 19px/1.1 var(--sora);color:var(--gelb)}
.ref__spec dd .ph{font-size:inherit}
.ref__more{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;margin-top:28px;font-size:15.5px;color:var(--d-leise)}
.ref__more a{color:var(--d-text)}
.ref__note{font:500 12px/1.5 var(--mono);color:var(--d-leise)}

/* ============================================================ Support */
.sup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:center}
.sup__num{font:700 clamp(110px,15vw,220px)/.85 var(--sora);letter-spacing:-.06em;color:var(--anthrazit);margin:4px 0 0}
.sup__num span{font-size:.45em;letter-spacing:-.02em;margin-left:.04em;vertical-align:.95em}
.sup__dim{position:relative;display:flex;align-items:center;gap:0;margin:26px 0 34px;font:600 13.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--anthrazit)}
.sup__dim::before,.sup__dim::after{content:"";flex:1;height:1px;background:var(--gold)}
.sup__dim span{padding:0 14px;white-space:nowrap}
.sup__dim i{position:absolute;inset:-7px 0;border-left:1px solid var(--gold);border-right:1px solid var(--gold)}
.sup__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sup__list li{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:28px 0;border-top:1px solid var(--linie)}
.sup__list li:last-child{border-bottom:1px solid var(--linie)}
.sup__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:8px;background:var(--anthrazit);color:var(--gelb)}
.sup__list h3{font-size:20px;letter-spacing:-.015em;margin-bottom:6px}
.sup__list p{font-size:16.5px}
.sup__list a{font-weight:600;white-space:nowrap}

/* ============================================================ Preise · Kostenrahmen (Konfigurator) */
.kf-head{max-width:780px;margin-bottom:44px}
.kf-head .lead{margin-top:-4px}
.kf{position:relative;border-radius:16px;overflow:hidden;color:var(--d-text);box-shadow:0 30px 60px -34px rgba(20,23,28,.55)}
.kf :focus-visible{outline-color:var(--gelb)}
/* Fortschritt: fünf Schrittnamen */
.kf-sf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0 clamp(20px,3vw,48px);border-bottom:1px solid var(--d-linie)}
.kf-sf li{position:relative;min-width:0}
.kf-sf li::before{content:"";position:absolute;inset:0;background:var(--gelb);opacity:0;pointer-events:none;z-index:1}
.kf-sf button{position:relative;display:block;width:100%;padding:22px 0 20px;border:0;background:none;color:var(--d-leise);font:500 15.5px/1.2 var(--sans);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color .2s}
.kf-sf button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent;transform-origin:left;transition:background-color .3s}
.kf-sf .is-done button{color:var(--d-text)}
.kf-sf .is-done button::after{background:rgba(255,214,0,.4)}
.kf-sf .is-cur button{color:#fff;font-weight:600}
.kf-sf .is-cur button::after{height:3px;background:var(--gelb);animation:sfIn .5s cubic-bezier(.65,0,.25,1)}
.kf-sf button:hover:not(:disabled){color:#fff}
.kf-sf button:disabled{cursor:default}
@keyframes sfIn{from{transform:scaleX(0)}}
@media (prefers-reduced-motion: reduce){ .kf-sf .is-cur button::after{animation:none} }
/* Körper */
.kf__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px)}
.kf__l{min-width:0;padding:44px clamp(20px,3vw,48px) 40px;border-right:1px solid var(--d-linie)}
.kf__r{display:flex;flex-direction:column;gap:20px;min-width:0;padding:36px clamp(18px,2.4vw,34px) 34px}
.kf-pane__h{font-size:clamp(28px,2.7vw,38px);line-height:1.1;letter-spacing:-.03em;color:#fff;margin-bottom:10px;text-wrap:balance}
.kf-pane__h:focus{outline:none}
.kf-pane__sub{font-size:17px;line-height:1.5;color:var(--d-leise);margin-bottom:30px}
.kf-caret{display:none}
.kf--bereit .kf-pane.is-on .kf-caret{display:inline-block;width:3px;height:.8em;margin-left:8px;background:var(--gelb);vertical-align:-.04em}
@media (prefers-reduced-motion: no-preference){ .kf--bereit .kf-pane.is-on .kf-caret{animation:blink 1.1s steps(1) infinite} }
.js .kf-pane{display:none}
.js .kf-pane.is-on{display:block}
@media (prefers-reduced-motion: no-preference){
  .kf-pane.is-on.von-r{animation:kfIn .45s cubic-bezier(.3,0,.2,1) both}
  .kf-pane.is-on.von-l{animation:kfInL .45s cubic-bezier(.3,0,.2,1) both}
  .kf-einb{animation:kfIn .4s cubic-bezier(.3,0,.2,1) both}
}
@keyframes kfIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes kfInL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
/* Auswahl */
.kf-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kf-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kf-list{display:grid;gap:14px}
.kf-grp{border:0;margin:0 0 28px;padding:0;min-width:0}
.kf-grp[hidden]{display:none}
.kf-grp legend{padding:0;margin-bottom:12px;font:500 14px/1.3 var(--sans);color:var(--d-leise)}
.kfo{position:relative;display:grid;gap:4px 16px;width:100%;min-width:0;padding:18px 20px;border:1px solid transparent;border-radius:14px;
  background-color:var(--d-karte);background-image:linear-gradient(var(--gelb),var(--gelb));background-repeat:no-repeat;background-position:left top;background-size:0% 100%;
  color:var(--d-text);font:inherit;text-align:left;cursor:pointer;
  transition:background-size .42s cubic-bezier(.65,0,.25,1),border-color .2s,color .2s,transform .2s}
.kfo:hover{border-color:rgba(255,214,0,.55);transform:translateY(-2px)}
.kfo:active{transform:translateY(0)}
.kfo::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--gelb);opacity:0;pointer-events:none}
.kfo::after{content:"";position:absolute;inset:-5px;pointer-events:none;opacity:0;transition:opacity .25s;
  background:linear-gradient(var(--gelb),var(--gelb)) top left/10px 1.5px no-repeat,linear-gradient(var(--gelb),var(--gelb)) top left/1.5px 10px no-repeat,
    linear-gradient(var(--gelb),var(--gelb)) top right/10px 1.5px no-repeat,linear-gradient(var(--gelb),var(--gelb)) top right/1.5px 10px no-repeat,
    linear-gradient(var(--gelb),var(--gelb)) bottom left/10px 1.5px no-repeat,linear-gradient(var(--gelb),var(--gelb)) bottom left/1.5px 10px no-repeat,
    linear-gradient(var(--gelb),var(--gelb)) bottom right/10px 1.5px no-repeat,linear-gradient(var(--gelb),var(--gelb)) bottom right/1.5px 10px no-repeat}
.kfo b{display:block;font:600 17px/1.25 var(--sora);letter-spacing:-.01em;color:#fff;transition:color .2s}
.kfo small{display:block;margin-top:3px;font:500 14px/1.4 var(--sans);color:var(--d-leise);transition:color .2s}
.kfo__weil{display:block;margin-top:8px;font:500 13.5px/1.45 var(--sans);color:var(--gelb)}
.kfo__weil:empty{display:none}
.kfo__ic{width:28px;height:28px;fill:none;stroke:var(--gelb);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.kfo[aria-pressed="true"]{background-size:100% 100%;border-color:var(--gelb);color:var(--anthrazit)}
.kfo[aria-pressed="true"]::after{opacity:1}
.kfo[aria-pressed="true"] b,.kfo[aria-pressed="true"] .kfo__weil{color:var(--anthrazit)}
.kfo[aria-pressed="true"] small{color:#3d4249}
.kfo[aria-pressed="true"] .kfo__ic{stroke:var(--anthrazit)}
.kfo--tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:18px;min-height:118px;padding:22px 20px 20px}
.kfo--pk{grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:6px 20px;padding:20px 24px 20px 20px}
.kfo__plan{width:64px;height:auto;overflow:visible}
.kfo__plan rect,.kfo__plan path{fill:none;stroke:var(--d-leise);stroke-width:2;transition:stroke .2s}
.kfo__plan .door{stroke:var(--d-karte);stroke-width:4}
.kfo[aria-pressed="true"] .kfo__plan rect,.kfo[aria-pressed="true"] .kfo__plan path{stroke:var(--anthrazit)}
.kfo[aria-pressed="true"] .kfo__plan .door{stroke:var(--gelb)}
.kfo__t{min-width:0}
.kfo__p{text-align:right;white-space:nowrap}
.kfo__p b{font:600 22px/1 var(--sora);letter-spacing:-.02em}
.kfo__p small{margin-top:5px}
.kfo__flag{position:absolute;top:-10px;right:22px;padding:5px 9px;border-radius:5px;background:var(--gelb);color:var(--anthrazit);font:600 12px/1 var(--sans);transition:background-color .2s,color .2s}
.kfo[aria-pressed="true"] .kfo__flag{background:var(--anthrazit);color:var(--gelb)}
.kfo--ex{grid-template-columns:28px minmax(0,1fr) 22px;align-items:start;padding:18px}
.kfo--radio{grid-template-columns:minmax(0,1fr) 22px}
.kfo--ex .kfo__ic{margin-top:1px}
.kfo__x{position:relative;width:22px;height:22px;margin-top:1px;border:1.5px solid #5a5f67;border-radius:5px;transition:border-color .2s,background-color .2s}
.kfo--radio .kfo__x{border-radius:50%}
.kfo__x::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;border:solid var(--gelb);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.kfo[aria-pressed="true"] .kfo__x{border-color:var(--anthrazit);background:var(--anthrazit)}
.kfo[aria-pressed="true"] .kfo__x::after{transform:rotate(45deg) scale(1)}
.kfo.inkl[aria-pressed]{cursor:default;background-size:0% 100%;border-style:dashed;border-color:rgba(255,214,0,.5);color:var(--d-text)}
.kfo.inkl[aria-pressed]:hover{transform:none}
.kfo.inkl[aria-pressed]::after{opacity:0}
.kfo.inkl[aria-pressed] b{color:#fff}
.kfo.inkl[aria-pressed] small{color:var(--gelb)}
.kfo.inkl[aria-pressed] .kfo__ic{stroke:var(--gelb)}
.kfo.inkl[aria-pressed] .kfo__x{border-color:var(--gelb);background:transparent}
.kfo.inkl[aria-pressed] .kfo__x::after{transform:rotate(45deg) scale(1)}
.kf-fine{margin-top:20px;font-size:14.5px;line-height:1.55;color:var(--d-leise)}
.kf-fine a{color:var(--d-text);text-underline-offset:3px;text-decoration-color:rgba(255,214,0,.7)}
.kf-fine a:hover{text-decoration-color:var(--gelb)}
/* Schritt 1: Website prüfen */
.kf-check label{display:block;margin-bottom:8px;font:600 14.5px/1.3 var(--sans);color:#fff}
.kf-check__row{display:flex;gap:10px}
.kf-check__row .inp{flex:1;min-width:0;height:54px;padding:0 16px;border-radius:10px;border:1px solid #cfd4db;background:#f6f7f9;box-shadow:inset 0 1px 2px rgba(20,23,28,.07);font:16px var(--sans);color:var(--anthrazit)}
.kf-check__row .inp[aria-invalid="true"]{border-color:#ff8a7a;box-shadow:0 0 0 2px rgba(255,138,122,.35)}
.kf-check__row .btn{min-height:54px;flex:none}
.kf-run__bar{position:relative;height:3px;border-radius:2px;background:var(--d-karte);overflow:hidden}
.kf-run__bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--gelb);transform:scaleX(.04);transform-origin:left;transition:transform .45s ease}
.kf-run p{margin-top:12px;font-size:15px;color:var(--d-text)}
.kf-erg{padding:20px 22px;border-radius:14px;background:var(--d-karte)}
.kf-erg__k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:15.5px;color:var(--d-text)}
.kf-erg__k b{color:#fff;font-weight:600}
.kf-erg__k .kf-link{margin-left:auto;padding:0;font-size:14.5px}
.kf-ok-ic{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid #5fd49e;color:#5fd49e;font-size:12px;font-weight:700}
.kf-erg__w{display:flex;gap:28px;margin-top:16px}
.kf-erg__w > span{font-size:14.5px;color:var(--d-leise)}
.kf-erg__w b{display:block;margin-top:2px;font:600 30px/1 var(--sora);letter-spacing:-.02em;color:#fff}
.kf-erg__w b small{font:500 14px var(--sans);color:var(--d-leise);margin-left:2px}
.kf-erg__w .rot b{color:#ff8a7a}
.kf-erg__w .gelb b{color:var(--gelb)}
.kf-erg__w .gruen b{color:#5fd49e}
.kf-erg__l{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--d-linie);display:grid;gap:6px;font-size:15px;color:var(--d-text)}
.kf-erg__l:empty{display:none}
.kf-erg__l li{position:relative;padding-left:18px}
.kf-erg__l li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:#ff8a7a}
.kf-erg__l li.mittel::before{background:var(--gelb)}
.kf-erg__e{margin-top:14px;font-size:15px;color:var(--gelb)}
.kf-erg__e:empty{display:none}
.kf-nein{padding:18px 20px;border-radius:14px;background:var(--d-karte);font-size:16px;color:var(--d-text)}
.kf-nein b{color:#fff}
.kf-check[hidden],.kf-run[hidden],.kf-erg[hidden],.kf-nein[hidden],.kf-site[hidden]{display:none}
.kf-check,.kf-run,.kf-nein{margin-top:22px}
.kf-site + .kf-check,.kf-site[hidden] + .kf-check{margin-top:0}
/* Weiter / Zurück */
.kf-nav{display:none}
.js .kf-nav{display:flex;align-items:center;gap:26px;margin-top:36px}
.js .kf-nav[hidden]{display:none}
.kf-link{padding:8px 0;border:0;background:none;color:var(--d-leise);font:500 15.5px/1.2 var(--sans);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1.5px;transition:color .2s,text-decoration-color .2s}
.kf-link:hover{color:#fff;text-decoration-color:var(--gelb)}
.kf-link[hidden]{display:none}
#kfWeiter{position:relative;margin-left:auto;min-width:150px}
#kfWeiter::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;background:#fff;opacity:0;pointer-events:none}
#kfWeiter:disabled{background:transparent;border-color:var(--d-linie);color:var(--d-leise);box-shadow:none;transform:none;cursor:not-allowed;opacity:1}
#kfWeiter[hidden]{display:none}
@media (prefers-reduced-motion: no-preference){ #kfWeiter.kf-wach{animation:kfWach 1.3s ease-out} }
@keyframes kfWach{0%{box-shadow:0 0 0 0 rgba(255,214,0,.85)}60%{box-shadow:0 0 0 14px rgba(255,214,0,0)}100%{box-shadow:none}}
/* Angebot */
.kf-sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 24px;margin:0 0 28px;padding:6px 0;border-top:1px solid var(--d-linie);border-bottom:1px solid var(--d-linie)}
.kf-sum dt{padding:9px 0;font-size:14.5px;color:var(--d-leise)}
.kf-sum dd{margin:0;padding:9px 0;font-size:15.5px;line-height:1.45;color:#fff}
.kf-sum .is-preis{color:var(--gelb);font:600 17px/1.4 var(--sora)}
.kf-form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kf .fld{color:#fff}
.kf .consent{color:var(--d-text)}
.kf .consent a{color:#fff}
.kf .consent input{accent-color:var(--gelb)}
.kf .fld input[aria-invalid="true"]{border-color:#ff8a7a;box-shadow:0 0 0 2px rgba(255,138,122,.35)}
.kf-form .btn{width:100%}
.kf-ok{padding:4px 0 2px}
.kf-ok[hidden]{display:none}
.kf-ok:focus{outline:none}
.kf-stamp{display:grid;place-items:center;width:118px;height:118px;margin:4px 0 22px;border-radius:50%;border:3px double #5fd49e;color:#5fd49e;font:700 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;transform:rotate(-12deg)}
@media (prefers-reduced-motion: no-preference){ .kf-ok.zeigen .kf-stamp{animation:stampIn .6s cubic-bezier(.2,1.5,.4,1) both} }
.kf-ok h3{font-size:28px;letter-spacing:-.02em;color:#fff;margin-bottom:10px}
.kf-ok p{color:var(--d-text);max-width:36em}
/* Kostenrahmen */
.kk{position:relative}
.kk__k{font-size:14.5px;color:var(--d-leise);margin-bottom:4px}
.kk__v{font:600 clamp(32px,3vw,44px)/1.1 var(--sora);letter-spacing:-.03em;color:var(--gelb);font-variant-numeric:tabular-nums}
.kk__v.lang{font-size:clamp(26px,2.3vw,32px)}
.kk__v span{display:inline-block;white-space:nowrap;transform-origin:left center}
.kk__v small{font:500 17px var(--sans);letter-spacing:0;color:var(--d-text);margin-left:2px}
@media (prefers-reduced-motion: no-preference){ .kk__v span.bump,.mbar__kost b.bump{animation:kkBump .45s cubic-bezier(.3,1.6,.5,1)} }
@keyframes kkBump{40%{transform:scale(1.035)}}
.kk__chain{display:flex;height:16px;margin:12px 0 14px;transform-origin:left center}
.kk__chain::before{content:"";flex:none;width:1px;height:15px;background:var(--gelb)}
.kk__seg{position:relative;flex:1 1 0;min-width:0;transition:flex-grow .6s cubic-bezier(.65,0,.25,1),opacity .4s}
.kk__seg::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--gelb)}
.kk__seg::after{content:"";position:absolute;right:0;top:0;width:1px;height:15px;background:var(--gelb)}
.kk__seg i{position:absolute;right:-4.5px;top:7px;width:10px;height:1.5px;margin-top:-.75px;background:var(--gelb);transform:rotate(-45deg)}
.kk__seg span{display:none}
.kk__seg.weg{opacity:0}
.kk__satz{font-size:15.5px;line-height:1.55;color:var(--d-text)}
.kk__monat{margin-top:6px;font-size:15px;color:var(--gelb)}
.kk__monat:empty{display:none}
.kk__drin{margin-top:12px}
.kk__drin summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font:500 14.5px/1.3 var(--sans);color:var(--d-text);text-decoration:underline;text-decoration-color:rgba(255,214,0,.6);text-underline-offset:4px}
.kk__drin summary::-webkit-details-marker{display:none}
.kk__drin summary::after{content:"";width:7px;height:7px;margin-top:-4px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .25s}
.kk__drin[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.kk__drin summary:hover{color:#fff}
.kk__liste{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;font-size:14px;line-height:1.4;color:var(--d-text)}
.kk__liste li{position:relative;padding-left:18px}
.kk__liste li::before{content:"✓";position:absolute;left:0;top:0;color:#5fd49e;font-weight:700}
@media (prefers-reduced-motion: no-preference){ .kk__liste li.neu{animation:bomNeu 1.4s ease} }
@keyframes bomNeu{0%,30%{color:var(--gelb)}100%{color:var(--d-text)}}
.kk__delta{position:absolute;right:0;top:-8px;padding:5px 9px;border:1px solid var(--gelb);border-radius:6px;background:var(--anthrazit);color:var(--gelb);font:600 13px/1 var(--mono);opacity:0;pointer-events:none;white-space:nowrap}
.kk__delta.los{animation:kkDeltaR 2s linear forwards}
@media (prefers-reduced-motion: no-preference){ .kk__delta.los{animation:kkDelta 1.6s ease forwards} }
@keyframes kkDelta{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:translateY(-4px)}75%{opacity:1;transform:translateY(-10px)}100%{opacity:0;transform:translateY(-16px)}}
@keyframes kkDeltaR{0%,85%{opacity:1}100%{opacity:0}}
.kk-note{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--d-leise)}
.kk-note svg{flex:none;color:var(--gelb);margin-top:3px}
/* Vorschau-Zeichnung, die mitwächst */
.kz{margin:0}
.kz__vp{position:relative;padding:10px 8px;border:1px solid var(--d-linie);border-radius:12px;background:rgba(19,20,23,.55);overflow:hidden}
.kz__vp::after{content:"";position:absolute;inset:0;border-top:2px solid var(--gelb);filter:drop-shadow(0 0 6px rgba(255,214,0,.8));opacity:0;pointer-events:none}
.kz__vp.scan::after{opacity:1}
@media (prefers-reduced-motion: no-preference){ .kz__vp.scan::after{animation:kzScan 1.2s ease-in-out infinite alternate} }
@keyframes kzScan{from{transform:translateY(0)}to{transform:translateY(100%)}}
.kz__svg{display:block;width:100%;height:auto;overflow:hidden}
.kz__cap{margin-top:8px;font-size:13.5px;color:var(--d-leise)}
.kz .ln{fill:none;stroke:#e9eaec;stroke-opacity:.6;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.kz .ln.th{stroke-opacity:.28}
.kz .ln.hd{stroke-width:2.6;stroke-opacity:.75}
.kz .ln.y{stroke:var(--gelb);stroke-opacity:1}
.kz .fl{fill:rgba(233,234,236,.07)}
.kz .fw{fill:rgba(233,234,236,.78)}
.kz .fy{fill:rgba(255,214,0,.16)}
.kz .fg{fill:var(--gelb)}
.kz .hatch{fill:url(#kzHatch)}
.kz .ds{fill:none;stroke:var(--gelb);stroke-width:1.2;stroke-dasharray:4 3}
.kz text{font-family:var(--mono)}
.kz .tw{font-size:7.5px;fill:var(--d-text)}
.kz .tg rect{fill:var(--gelb)}
.kz .tg text{font-size:9px;font-weight:700;fill:var(--anthrazit);letter-spacing:.02em}
.kz .kz-page{transition:transform .6s cubic-bezier(.65,0,.25,1)}
.kz .kz-m{transition:transform .6s cubic-bezier(.65,0,.25,1),opacity .3s}
.kz .kz-m.weg{opacity:0}
.kz .kz-rahmen,.kz .kz-care__r{transition:d .6s cubic-bezier(.65,0,.25,1)}
.kz .kz-care{opacity:0;transition:opacity .4s}
.kz .kz-care.an{opacity:1}
.kz .kz-flash{opacity:0;animation:kzFlash 2.8s ease .35s both}
@keyframes kzFlash{0%{opacity:0}12%{opacity:1}78%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: no-preference){
  .kz .neu .ln{stroke-dasharray:1px 1px;animation:dash .85s cubic-bezier(.5,0,.2,1) both;animation-delay:var(--d,0s)}
  .kz .neu .fd{animation:kzFade .5s ease both;animation-delay:calc(var(--d,0s) + .35s)}
}
@media (prefers-reduced-motion: reduce){ .kz .kz-page,.kz .kz-m,.kz .kz-rahmen,.kz .kz-care__r{transition:none} }
@keyframes kzFade{from{opacity:0}to{opacity:1}}

/* Eingangsanimation: der Konfigurator baut sich selbst (Skizze → Raster → Entwurf → Knöpfe) */
.kf-bau{display:none}
.kf--vor .kf-bau,.kf--an .kf-bau{display:block;position:absolute;inset:0;z-index:5;pointer-events:none}
.kf-bau__cover{position:absolute;inset:0;border-radius:16px;border:1px solid var(--linie);background-color:#fff;transform-origin:right center;
  background-image:linear-gradient(rgba(201,164,0,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(201,164,0,.1) 1px,transparent 1px),linear-gradient(rgba(20,23,28,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,23,28,.035) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px;background-position:-1px -1px}
.kf-bau__line{position:absolute;left:0;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--gelb);box-shadow:0 0 16px 2px rgba(255,214,0,.6);opacity:0}
.kf-bau__svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.wf-p{fill:none;stroke:#3c424a;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1px 1px;stroke-dashoffset:1px}
.wf-p.fein{stroke-width:1;stroke-opacity:.75}
.wf-grid rect{fill:rgba(255,214,0,.12);stroke:rgba(201,164,0,.42);stroke-width:1}
.wf-grid,.wf-dim > g{opacity:0}
.wf-dim .o{fill:none;stroke:var(--gold);stroke-width:1.3;stroke-dasharray:5 4}
.wf-dim .m{fill:none;stroke:var(--gold);stroke-width:1.2}
.wf-dim .pl{fill:#fff}
.wf-dim .tg{fill:var(--gelb)}
.wf-dim text{font:700 10.5px var(--mono);letter-spacing:.06em;fill:var(--anthrazit)}
.wf-dim text.mt{font-weight:600;fill:#6d5800}
.wf-slot{fill:none;stroke:rgba(233,234,236,.42);stroke-width:1;stroke-dasharray:4 4;opacity:0}
.kf--vor .kf-snap,.kf--an .kf-snap{opacity:0}
.kf--vor .kk__chain,.kf--an .kk__chain{transform:scaleX(0)}
.kf--an1 .wf-p{animation:dash .55s cubic-bezier(.5,0,.3,1) var(--d,0s) both}
.kf--an2 .wf-grid{opacity:1;transition:opacity .5s ease}
.kf--an2 .wf-dim > g{animation:wfIn .45s cubic-bezier(.2,1.3,.4,1) var(--d,0s) both}
.kf--an3 .kf-bau__cover{transform:scaleX(0);transition:transform .7s cubic-bezier(.65,0,.25,1)}
.kf--an3 .kf-bau__line{animation:wfWipe .7s cubic-bezier(.65,0,.25,1) both,wfAus .18s linear .6s forwards}
.kf--an3 .wf-pen,.kf--an3 .wf-dim,.kf--an3 .wf-grid{opacity:0;transition:opacity .55s ease}
.kf--an3 .wf-slot{opacity:1;transition:opacity .35s ease .3s}
.kf--an4 .wf-slot{animation:wfAus .2s linear calc(var(--i, 0) * 45ms + .12s) forwards}
.kf--an4 .kf-snap{animation:kfSnap .42s cubic-bezier(.2,1.3,.4,1) calc(var(--i, 0) * 45ms) both}
.kf--an4 .kf-snap::before{animation:kfBlitz .5s ease calc(var(--i, 0) * 45ms + .2s) both}
.kf--an4 .kk__chain{animation:kfGrow .75s cubic-bezier(.65,0,.25,1) both}
.kf--kurz.kf--an1 .wf-p{animation-duration:.4s}
.kf--kurz.kf--an4 .kf-snap{animation-duration:.34s;animation-delay:calc(var(--i, 0) * 30ms)}
.kf--kurz.kf--an4 .kf-snap::before{animation-duration:.4s;animation-delay:calc(var(--i, 0) * 30ms + .15s)}
.kf--kurz.kf--an4 .wf-slot{animation-delay:calc(var(--i, 0) * 30ms + .08s)}
.kf--kurz.kf--an3 .kf-bau__cover{transition-duration:.45s}
.kf--kurz.kf--an3 .kf-bau__line{animation-duration:.45s,.14s;animation-delay:0s,.36s}
@keyframes wfIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes wfWipe{from{opacity:1;transform:translateX(0)}to{opacity:1;transform:translateX(var(--kfw,1000px))}}
@keyframes wfAus{to{opacity:0}}
@keyframes kfSnap{0%{opacity:0;transform:translateY(-16px) scale(1.05)}55%{opacity:1;transform:translateY(2px) scale(.995)}100%{opacity:1;transform:none}}
@keyframes kfBlitz{0%{opacity:0}30%{opacity:.5}100%{opacity:0}}
@keyframes kfGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:1099px){
  .kf__body{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
  .kfo--tile{min-height:104px}
  .kf-sf{gap:10px}
  .kf-sf button{font-size:14.5px}
}
@media (max-width:899px){
  .kf__body{grid-template-columns:minmax(0,1fr)}
  .kf__l{border-right:0;border-bottom:1px solid var(--d-linie)}
  .kf__r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 28px;align-items:start}
  .kf__r .kz{grid-column:2;grid-row:1 / span 2}
}
@media (max-width:639px){
  .kf-head{margin-bottom:30px}
  .kf-sf{gap:6px;padding:0 14px}
  .kf-sf button{padding:16px 0 14px;font-size:12.5px}
  .kf__l{padding:30px 18px 28px}
  .kf-pane__h{font-size:27px}
  .kf-pane__sub{font-size:16px;margin-bottom:22px}
  .kf-grid3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kf-grid2{grid-template-columns:minmax(0,1fr);gap:10px}
  .kf-grid2.kf-site{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kfo--tile{min-height:96px;padding:16px;gap:12px}
  .kfo--tile b{font-size:16px}
  .kfo__ic{width:26px;height:26px}
  .kfo--pk{grid-template-columns:44px minmax(0,1fr) auto;gap:4px 14px;padding:16px 16px 16px 14px}
  .kfo__plan{width:44px}
  .kfo__p b{font-size:18px}
  .kfo--ex{padding:15px 16px}
  .kf-check__row{flex-direction:column}
  .kf-erg{padding:18px}
  .kf-form__row{grid-template-columns:minmax(0,1fr);gap:0}
  .kf-nav{gap:18px;margin-top:28px}
  #kfWeiter{min-width:0;padding:0 22px}
  .kf__r{display:flex;padding:24px 18px 26px;gap:16px}
  .kk__k,.kk__v,.kk__chain{display:none}
  .kk__delta{top:-4px}
  .kk__liste{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================ Team */
.team{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.team .facts{margin-top:36px;border-top:1px solid var(--d-linie)}
.crew{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.crew figure{margin:0;padding:10px;
  background:
    linear-gradient(var(--gelb),var(--gelb)) top left/16px 1.5px no-repeat,linear-gradient(var(--gelb),var(--gelb)) top left/1.5px 16px no-repeat,
    linear-gradient(var(--gelb),var(--gelb)) top right/16px 1.5px no-repeat,linear-gradient(var(--gelb),var(--gelb)) top right/1.5px 16px no-repeat,
    linear-gradient(var(--gelb),var(--gelb)) bottom left/16px 1.5px no-repeat,linear-gradient(var(--gelb),var(--gelb)) bottom left/1.5px 16px no-repeat,
    linear-gradient(var(--gelb),var(--gelb)) bottom right/16px 1.5px no-repeat,linear-gradient(var(--gelb),var(--gelb)) bottom right/1.5px 16px no-repeat}
.crew img{width:100%;height:auto;aspect-ratio:4/4.3;object-fit:cover;object-position:50% 18%;border-radius:10px;background:var(--d-karte)}
.crew figcaption{padding:14px 4px 4px}
.crew figcaption span{display:block;font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gelb)}
.crew figcaption b{display:block;font:600 18px/1.3 var(--sora);color:#fff;margin-top:4px}
.crew figcaption i{display:block;font-style:normal;font-size:15px;color:var(--d-leise)}
.crew__more{display:flex;flex-direction:column;justify-content:center;height:100%;min-height:200px;padding:28px;border:1.5px dashed #41454c;border-radius:14px}
.crew__more b{font:700 56px/1 var(--sora);color:var(--gelb);letter-spacing:-.04em}
.crew__more p{margin-top:12px;color:var(--d-text);font-size:16px}

.team .h2.team__h{font-size:clamp(48px,6.4vw,92px);letter-spacing:-.045em}
.team{row-gap:18px}
.team__credit{grid-column:2;justify-self:end;margin-top:-6px;font:500 11.5px/1.4 var(--mono);color:var(--d-leise)}
.team__credit a{color:var(--d-leise)}
@media (max-width:899px){ .team__credit{grid-column:1;justify-self:start} }
/* ============================================================ Stimmen */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.quote{position:relative;margin:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:30px 28px 26px;box-shadow:0 1px 2px rgba(20,23,28,.04),0 18px 40px -28px rgba(20,23,28,.3);transition:transform .25s ease}
.quote:hover{transform:translateY(-3px)}
.stars{display:flex;gap:3px;margin-bottom:18px}
.stars svg{width:18px;height:18px;fill:var(--gelb);stroke:var(--gold);stroke-width:1}
.quote blockquote{margin:0 0 24px;font-size:18px;line-height:1.58;color:var(--anthrazit);flex:1}
.quote figcaption{padding-top:16px;border-top:1px solid var(--linie)}
.quote figcaption b{display:block;font:600 16px/1.3 var(--sora);color:var(--anthrazit)}
.quote figcaption span{font:500 12.5px/1.5 var(--mono);color:var(--text)}
.abnahme{position:absolute;right:20px;top:22px;transform:rotate(-8deg);border:2px solid var(--gruen);color:var(--gruen);border-radius:6px;padding:4px 8px;font:700 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.rating{font:500 14px/1.5 var(--mono);color:var(--anthrazit)}

.gbadge{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border:1px solid var(--linie);border-radius:999px;background:#fff;font:500 14px/1.2 var(--sans);color:var(--anthrazit);text-decoration:none;box-shadow:0 10px 24px -16px rgba(20,23,28,.4);transition:border-color .2s,transform .2s}
a.gbadge[href]:hover{border-color:var(--anthrazit);transform:translateY(-1px)}
.gbadge.ph{border:1px dashed currentColor;border-radius:999px;padding:7px 16px 7px 7px;white-space:normal}
.gbadge__g{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--anthrazit);font:700 15px/1 var(--sora);color:#fff}
.gbadge__wert:empty{display:none}
.gbadge__wert,.gbadge__txt{white-space:nowrap}
.rating{max-width:100%!important}
.gbadge{max-width:100%;flex-wrap:wrap;row-gap:2px}
.gbadge__wert b{font:700 17px/1 var(--sora);margin-left:4px}
.gbadge__wert .st{color:var(--gold);letter-spacing:1px}
.gbadge__txt{color:var(--text)}
.gbadge__wert:not(:empty) + .gbadge__txt::before{content:"· "}
/* ============================================================ FAQ */
.faq{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq__list details{border-bottom:1px solid var(--linie)}
.faq__list details:first-child{border-top:1px solid var(--anthrazit)}
.faq__list summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;cursor:pointer;list-style:none;font:600 19px/1.35 var(--sora);color:var(--anthrazit);letter-spacing:-.01em}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary i{position:relative;flex:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--linie);transition:background-color .2s,border-color .2s}
.faq__list summary i::before,.faq__list summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;margin:-.9px 0 0 -6px;background:var(--anthrazit);transition:transform .3s}
.faq__list summary i::after{transform:rotate(90deg)}
.faq__list details[open] summary i{background:var(--gelb);border-color:var(--gelb)}
.faq__list details[open] summary i::after{transform:rotate(0)}
.faq__list summary:hover i{border-color:var(--anthrazit)}
.faq__list details > div{padding:0 56px 26px 0;font-size:17px;line-height:1.65}

.faq__list details > div{max-width:68ch}
.faq__list details > div p + p,.faq__list details > div ul + p,.faq__list details > div p + ul{margin-top:12px}
.faq__list details > div ul{margin:0;padding:0 0 0 20px;display:grid;gap:8px}
.faq__list details > div li::marker{color:var(--gold)}
.faq__list details > div strong{color:var(--anthrazit)}
/* ============================================================ Kontakt + Fuß */
.kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.direct{display:flex;align-items:center;gap:26px;margin-top:40px}
.direct__pic{position:relative;flex:none;width:132px;height:132px}
.direct__pic svg{position:absolute;inset:8px 0 0 0;width:100%;height:auto}
.direct__pic img{position:absolute;left:14px;bottom:0;width:104px;height:auto;border-radius:0 0 40px 40px}
.direct__k{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-leise)}
.direct__tel{display:inline-block;margin:6px 0 4px;font:600 clamp(28px,3vw,40px)/1.1 var(--sora);letter-spacing:-.02em;color:var(--gelb);text-decoration:none}
.direct__tel:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.direct a.mail{display:block;color:var(--d-text);font-size:16px;text-underline-offset:3px}
.direct address{font-style:normal;color:var(--d-leise);font-size:15px;margin-top:2px}
.form{background:#fff;border-radius:16px;padding:clamp(24px,3vw,36px);color:var(--text);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.form :focus-visible{outline-color:var(--anthrazit)}
.form h3{font-size:24px;letter-spacing:-.02em;color:var(--anthrazit);margin-bottom:6px}
.form__sub{font-size:15px;margin-bottom:22px}
.fld{display:block;margin-bottom:16px;font:600 14px/1.3 var(--sans);color:var(--anthrazit)}
.fld input,.fld textarea{display:block;width:100%;margin-top:7px;padding:14px 15px;border-radius:10px;border:1px solid #cfd4db;background:#f6f7f9;box-shadow:inset 0 1px 2px rgba(20,23,28,.07);font:400 16px/1.4 var(--sans);color:var(--anthrazit)}
.fld textarea{min-height:96px;resize:vertical}
.consent{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:14px;line-height:1.5;margin:6px 0 22px;color:var(--text)}
.consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--anthrazit)}
.form .btn{width:100%}
.form__status{margin-top:14px;font:500 14px/1.5 var(--sans);color:var(--gruen)}
.form__status:empty{display:none}
.fuss{background:var(--d-grund);color:var(--d-leise);padding:64px 0 32px;font-size:15px}
.fuss__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:40px}
.fuss h4{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d-text);margin-bottom:16px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fuss a{color:var(--d-text);text-decoration:none}
.fuss a:hover{color:var(--gelb)}
.fuss__logo{display:inline-block;margin-bottom:16px}.fuss__logo svg{display:block;height:60px;width:auto}
.fuss__proof{font:500 13px/1.8 var(--mono);color:var(--d-text)}
.fuss__proof b{color:var(--gelb);font-weight:600}
.fuss__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:22px;border-top:1px solid var(--d-linie);font:500 12px/1.5 var(--mono)}

/* ============================================================ Kontakt · Anfrage-Karte */
.kontakt{grid-template-areas:"kopf form" "direct form";align-items:start;row-gap:0}
.kontakt__kopf{grid-area:kopf}
.kontakt .direct{grid-area:direct;margin-top:40px}
.af{grid-area:form;position:relative;border-radius:16px;background:#fff;color:var(--text);box-shadow:0 40px 80px -40px rgba(0,0,0,.8);overflow:hidden}
.af :focus-visible{outline-color:var(--anthrazit)}
.af__form{padding:clamp(24px,3vw,36px)}
.af__kopf{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:26px}
.af__titel{font-size:24px;letter-spacing:-.02em;color:var(--anthrazit)}
.af__fort{display:flex;gap:18px;list-style:none;margin:0;padding:0;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.af__fort li{display:flex;align-items:center;gap:7px}
.af__fort span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid currentColor;font-size:10.5px}
.af__fort .is-cur{color:var(--anthrazit)}
.af__fort .is-cur span{background:var(--gelb);border-color:var(--gelb);color:var(--anthrazit)}
.af__fort .is-done{color:var(--gruen)}
.af__linie{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--linie)}
.af__linie i{position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--gelb);transform-origin:left;transform:scaleX(.5);transition:transform .6s cubic-bezier(.65,0,.25,1)}
.af__linie::before,.af__linie::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--gold)}
.af__linie::before{left:0}.af__linie::after{right:0}
.af.is-2 .af__linie i{transform:scaleX(1)}
.af__schritt{border:0;margin:0;padding:0;min-width:0}
.js .af__schritt{display:none}
.js .af__schritt.is-on{display:block}
@media (prefers-reduced-motion: no-preference){ .af__schritt.is-on.rein{animation:afRein .45s cubic-bezier(.3,0,.2,1) both} }
@keyframes afRein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.af__h{padding:0;margin:0 0 16px;font:600 21px/1.25 var(--sora);letter-spacing:-.015em;color:var(--anthrazit)}
.af__h:focus{outline:none}
/* Auswahl-Chips */
.af__chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.af__chip{position:relative;min-height:48px;padding:0 18px 0 16px;border:1.5px solid #cfd4db;border-radius:24px;background-color:#fff;background-image:linear-gradient(var(--gelb),var(--gelb));background-repeat:no-repeat;background-size:0% 100%;font:600 15.5px/1 var(--sans);color:var(--anthrazit);cursor:pointer;transition:background-size .35s cubic-bezier(.65,0,.25,1),border-color .2s,transform .15s}
.af__chip:hover{border-color:var(--anthrazit)}
.af__chip:active{transform:scale(.97)}
.af__chip[aria-pressed="true"]{background-size:100% 100%;border-color:var(--gelb);padding-left:34px}
.af__chip::before{content:"";position:absolute;left:15px;top:50%;width:5px;height:10px;margin-top:-7px;border:solid var(--anthrazit);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.af__chip[aria-pressed="true"]::before{transform:rotate(45deg) scale(1)}
/* Übernahme aus Konfigurator / Website-Check */
.af__plan{margin:0 0 22px;padding:14px 16px;border-radius:10px;background:var(--merk-bg);border:1px solid var(--merk-rand);box-shadow:inset 3px 0 0 var(--gelb)}
.af__plan[hidden]{display:none}
.af__plan-k{display:flex;align-items:center;gap:6px;font:600 13px/1.3 var(--sans);color:var(--merk)}
.af__weg{margin-left:auto;padding:0;border:0;background:none;font:500 13px var(--sans);color:var(--text);text-decoration:underline;cursor:pointer}
.af__plan dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0 0;font-size:14.5px;line-height:1.4}
.af__plan dt{color:var(--text)}
.af__plan dd{margin:0;color:var(--anthrazit);font-weight:500}
/* Felder mit schwebendem Label und gelb zeichnender Linie */
.af__f{position:relative;margin-bottom:14px}
.af__f input,.af__f textarea{display:block;width:100%;height:62px;padding:24px 44px 8px 16px;border:1px solid #cfd4db;border-radius:10px;background:#f6f7f9;box-shadow:inset 0 1px 2px rgba(20,23,28,.06);font:500 17px/1.3 var(--sans);color:var(--anthrazit);transition:border-color .2s,background-color .2s}
.af__f textarea{height:auto;min-height:104px;padding-top:28px;resize:vertical}
.af__f input:focus,.af__f textarea:focus{outline:none;background:#fff;border-color:#b9c0c9}
.af__f label{position:absolute;left:17px;top:21px;font:500 16.5px/1 var(--sans);color:#6b727c;pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.3,0,.2,1),color .2s}
.af__f input:focus + label,.af__f input:not(:placeholder-shown) + label,.af__f textarea:focus + label,.af__f textarea:not(:placeholder-shown) + label{transform:translateY(-11px) scale(.76);color:var(--anthrazit)}
.af__strich{position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;background:var(--gelb);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.65,0,.25,1)}
.af__f input:focus ~ .af__strich,.af__f textarea:focus ~ .af__strich{transform:scaleX(1)}
.af__ok{position:absolute;right:14px;top:21px;width:20px;height:20px;border-radius:50%;background:var(--gruen);opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.af__ok::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.af__f.gut .af__ok{opacity:1;transform:none}
.af__f.fehler input{border-color:#c0392b;background:#fff7f6}
.af__f.fehler .af__strich{background:#c0392b;transform:scaleX(1)}
.af__hinweis{margin:6px 2px 0;font-size:13.5px;line-height:1.4;color:#b3261e}
.af__hinweis:empty{display:none}
.af__zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.af__ds{position:relative;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--text);cursor:pointer}
.af__ds input{position:absolute;left:0;top:0;width:22px;height:22px;margin:0;opacity:0}
.af__box{position:relative;width:22px;height:22px;border:1.5px solid #9aa1aa;border-radius:6px;background:#fff;transition:background-color .2s,border-color .2s}
.af__box::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;border:solid var(--anthrazit);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.af__ds input:checked + .af__box{background:var(--gelb);border-color:var(--gelb)}
.af__ds input:checked + .af__box::after{transform:rotate(45deg) scale(1)}
.af__ds input:focus-visible + .af__box{outline:3px solid var(--anthrazit);outline-offset:2px}
.af__hinweis--ds{margin-left:34px}
.af__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.af__nav{display:flex;align-items:center;gap:18px;margin-top:22px}
.af__weiter,.af__senden{margin-left:auto;min-width:190px}
.af__zurueck{padding:8px 0;border:0;background:none;font:500 15.5px var(--sans);color:var(--text);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.af__zurueck:hover{color:var(--anthrazit);text-decoration-color:var(--gold)}
/* Absenden: Knopf wird zum Lade-Strich */
.af__senden{position:relative;overflow:hidden;transition:min-width .4s cubic-bezier(.65,0,.25,1),width .4s,padding .4s,background-color .3s}
.af__lade{position:absolute;left:18px;right:18px;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:rgba(20,23,28,.18);opacity:0;overflow:hidden}
.af__lade i{position:absolute;left:0;top:0;bottom:0;width:40%;background:var(--anthrazit);border-radius:3px}
.af__senden.laedt{pointer-events:none}
.af__senden.laedt .af__senden-t{opacity:0}
.af__senden.laedt .af__lade{opacity:1}
@media (prefers-reduced-motion: no-preference){ .af__senden.laedt .af__lade i{animation:afLade 1s ease-in-out infinite} }
@keyframes afLade{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
/* Danke */
.af__danke{padding:clamp(28px,4vw,44px);text-align:center;color:var(--text)}
.af__danke[hidden]{display:none}
.af__danke:focus{outline:none}
.af__bild{position:relative;width:120px;height:120px;margin:0 auto}
.af__bild svg{position:absolute;inset:10px 0 0;width:100%;height:auto}
.af__bild img{position:absolute;left:14px;bottom:0;width:92px;height:auto;border-radius:0 0 36px 36px}
.af__haken{display:block;width:52px;height:52px;margin:-22px auto 10px;position:relative;z-index:1;background:#fff;border-radius:50%}
.af__hk-k{fill:#fff;stroke:var(--gruen);stroke-width:2.5}
.af__hk-p{fill:none;stroke:var(--gruen);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.af__danke h3{font-size:30px;letter-spacing:-.02em;color:var(--anthrazit);margin-bottom:10px}
.af__danke p{max-width:34em;margin:0 auto}
.af__entwurf{margin-top:14px!important;font:500 12.5px/1.4 var(--mono);color:var(--grau)}
@media (prefers-reduced-motion: no-preference){
  .af.faltet .af__form{animation:afFalt .45s cubic-bezier(.6,0,.4,1) both}
  .af__danke.zeigen{animation:afAuf .55s cubic-bezier(.2,.9,.3,1.2) both}
  .af__danke.zeigen .af__hk-k{stroke-dasharray:1px 1px;animation:dash .6s ease .25s both}
  .af__danke.zeigen .af__hk-p{stroke-dasharray:1px 1px;animation:dash .45s ease .7s both}
}
@keyframes afFalt{to{opacity:0;transform:perspective(900px) rotateX(-14deg) scale(.94)}}
@keyframes afAuf{from{opacity:0;transform:perspective(900px) rotateX(14deg) scale(.94)}to{opacity:1;transform:none}}
@media (max-width:899px){
  .kontakt{grid-template-areas:"kopf" "form" "direct"}
  .af{margin-top:28px}
}
@media (max-width:639px){
  .af__zwei{grid-template-columns:1fr}
  .af__chip{min-height:46px;font-size:15px}
  .af__weiter,.af__senden{min-width:0;flex:1}
  .af__kopf{margin-bottom:22px}
}

/* Handy-Leiste + Entwurfs-Badge */
.mbar{display:none}
.draft{position:fixed;left:14px;bottom:14px;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 10px;background:var(--anthrazit);color:var(--d-text);border:1px solid var(--d-linie);border-radius:9px;font:500 12px/1 var(--mono);text-decoration:none;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.draft b{color:var(--gelb);font-weight:700}
.draft:hover{border-color:var(--gelb)}

/* ============================================================ Responsiv */
@media (max-width:1099px){
  .schriftfeld{display:none}
  .plan__body{grid-template-columns:minmax(0,1fr) minmax(200px,240px) minmax(0,1fr);gap:28px}
  .pp{grid-template-columns:22px minmax(0,1fr) 52px;gap:10px;padding:10px}
  .stamp{width:52px;height:52px;font-size:9px}
  .ref{grid-column:span 6}
  .ref--big{grid-column:span 12}
}
@media (max-width:899px){
  .hero__vis{max-width:680px}
  .h1__m{font-size:clamp(40px,7.4vw,60px)}
  .check__head,.mat,.team,.faq,.kontakt,.sup,.hero__grid{grid-template-columns:minmax(0,1fr)}
  .sup__dim span{white-space:normal;text-align:center}
  .mat__intro{position:static}
  .plan__body{grid-template-columns:1fr;gap:28px}
  .plan__draw{order:-1;max-width:300px;justify-self:center;width:100%}
  .plan__lines{display:none}
  .plan__sum{grid-template-columns:1fr}
  .sum__cell{border-left:0;border-top:1px solid var(--d-linie)}
  .sum__cell:first-child{border-top:0}
  .check__next{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .fuss__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:639px){
  body{font-size:16.5px;padding-bottom:68px}
  .wrap{width:calc(100% - 40px)}
  .h1__m{font-size:clamp(34px,10.2vw,46px)}
  .hero__lead{margin:24px 0 28px}
  .cta-row .btn{flex:1 1 100%}
  .facts li{padding:18px 0 20px;margin-right:0;width:50%}
  .facts li b{font-size:22px}
  .beweis__in{gap:8px 18px;font-size:13px;padding:14px 0}
  .check__row{flex-direction:column}
  .check__row .btn{width:100%}
  .ref,.ref--big{grid-column:span 12}
  .ref__spec{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 14px}
  .bom thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .bom,.bom tbody,.bom tr,.bom td,.bom th{display:block}
  .bom tbody tr:not(.bom__group){display:grid;grid-template-columns:52px 1fr;column-gap:8px;padding:14px 0;border-bottom:1px solid var(--linie)}
  .bom td{border:0;padding:0}
  .bom td.bt{width:auto}
  .bom td:nth-child(3){grid-column:2;margin-top:4px;font-size:15px}
  .bom td.qty{grid-column:2;text-align:left;margin-top:4px}
  .bom__group th{padding:28px 0 10px}
  .crew{gap:14px}
  .crew figcaption b{font-size:16px}
  .crew__more b{font-size:42px}
  .crew__more{padding:18px;min-height:0}
  .faq__list details > div{padding-right:0}
  .direct{flex-direction:column;align-items:flex-start;gap:16px}
  .fuss__grid{grid-template-columns:1fr}
  .head-split{margin-bottom:36px}
  .mbar{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(20,23,28,.97);border-top:1px solid var(--d-linie)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:9px;font:600 16px/1 var(--sans);text-decoration:none}
  .mbar__tel{color:var(--d-text);border:1px solid rgba(233,234,236,.3)}
  .mbar__tel svg{color:var(--gelb)}
  .mbar__cta{background:var(--gelb);color:var(--anthrazit)}
  .draft{top:19px;bottom:auto;left:50%;transform:translateX(-50%);padding:7px 10px;font-size:11px;white-space:nowrap}
  .mbar .mbar__kost{display:none}
  .mbar.is-kf{grid-template-columns:minmax(0,1fr) 48px auto}
  .mbar.is-kf .mbar__kost{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:0;padding:0 4px;color:#fff}
  .mbar__kost small{font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-leise);white-space:nowrap}
  .mbar__kost b{max-width:100%;font:700 16px/1.1 var(--mono);letter-spacing:-.02em;color:var(--gelb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mbar__kost b.bump{animation:kkBump .45s cubic-bezier(.3,1.6,.5,1)}
  .mbar.is-kf .mbar__tel span{display:none}
  .mbar.is-kf .mbar__cta{padding:0 18px}
}

/* ============================================================ Zusätze Ipsom Handwerker */
/* Brotkrumen unter dem Kopf (Unterseiten) */
.krume{background:var(--d-grund);border-bottom:1px solid var(--d-karte);font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--d-leise)}
.krume ol{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0;padding:10px 0}
.krume li+li::before{content:"/";margin-right:10px;color:var(--d-linie)}
.krume a{color:var(--d-text);text-decoration:none}
.krume a:hover{color:var(--gelb)}
.hdr__nav a[aria-current="page"]::after{transform:scaleX(1)}

/* „Kennst du das?“ – drei Karten im Stil der Check-Karten */
.sec--hell{background:#f6f7f9}
.kennst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.kennst .card{position:relative;border-top:3px solid var(--anthrazit)}
.kennst .card::after{content:"";position:absolute;right:20px;top:-9px;width:15px;height:15px;
  background:linear-gradient(var(--gold),var(--gold)) center/15px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) center/1px 15px no-repeat}
.kennst__nr{display:inline-grid;place-items:center;min-width:40px;height:28px;padding:0 8px;border:1px solid var(--gold);border-radius:6px;font:600 12.5px/1 var(--mono);color:var(--merk);margin-bottom:16px}

/* Einstiegskacheln (Übersicht: Gewerke, Regionen, Themen) */
.kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kachel{position:relative;display:flex;flex-direction:column;min-height:168px;padding:22px 20px 40px;border-radius:14px;background:#fff;border:1px solid var(--linie);text-decoration:none;color:var(--text);box-shadow:0 14px 30px -22px rgba(20,23,28,.35);transition:transform .25s,box-shadow .25s,border-color .25s}
.kachel:hover{transform:translateY(-3px);border-color:var(--anthrazit);box-shadow:0 22px 40px -22px rgba(20,23,28,.4)}
.kachel small{font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--merk)}
.kachel b{display:block;margin:12px 0 8px;font:600 20px/1.2 var(--sora);color:var(--anthrazit);letter-spacing:-.015em}
.kachel span{font-size:15px;line-height:1.5}
.kachel::after{content:"→";position:absolute;right:18px;bottom:14px;font-family:var(--mono);color:var(--gold)}
.dark .kachel{background:var(--d-leiste);border-color:var(--d-linie);color:var(--d-text)}
.dark .kachel b{color:#fff}
.dark .kachel small{color:var(--gelb)}
.dark .kachel:hover{border-color:var(--gelb)}

/* Stückliste je Seite (Tabelle .bom aus dem Entwurf) */
.mat .lead{margin-top:-4px}
.bom td.qty.inkl::before{content:"✓ ";}

/* Gut zu wissen: Abschnitte als aufklappbare Liste im FAQ-Stil */
.wissen .faq__list details > div ul{margin-top:12px}

/* Referenzen: Angaben statt Kennzahlen */
.ref__spec dd.txt{font:600 14px/1.35 var(--sans);color:var(--gelb)}

/* Team: Geschichte der Geschäftsführung */
.team__story p{color:var(--d-text);font-size:17px;line-height:1.65;max-width:34em}
.team__story p + p{margin-top:12px}

/* Verweise auf Gewerk- und Regionsseiten */
.verweise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.verweise h3{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--anthrazit);padding-bottom:14px;margin-bottom:4px;border-bottom:2px solid var(--anthrazit)}
.verweise ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.verweise a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--linie);font:600 16px/1.3 var(--sora);color:var(--anthrazit);text-decoration:none}
.verweise a::after{content:"→";font-family:var(--mono);color:var(--gold);transition:transform .25s}
.verweise a:hover::after{transform:translateX(4px)}
.verweise a[aria-current="page"]{color:var(--grau)}
.verweise a[aria-current="page"]::after{content:"·"}

/* Fuß: Linklisten dürfen umbrechen */
.fuss__grid{grid-template-columns:1.3fr 1fr 1fr 1fr 1fr}

@media (max-width:1099px){
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss__grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:899px){
  .kennst,.verweise{grid-template-columns:minmax(0,1fr)}
  .fuss__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:639px){
  .kacheln,.verweise ul{grid-template-columns:minmax(0,1fr)}
  .fuss__grid{grid-template-columns:1fr}
}

/* Kontakt/Danke: Foto von Hermann rund im gelben Fleck (Entwurf nutzte ein freigestelltes Bild) */
.direct__pic img{left:16px;bottom:4px;width:100px;height:100px;object-fit:cover;object-position:50% 18%;border-radius:50%}
.af__bild img{left:16px;bottom:6px;width:88px;height:88px;object-fit:cover;object-position:50% 18%;border-radius:50%}
.kf-fehler:not([hidden]){margin-top:14px}

/* Gründerbonus-Sticker am Kostenrahmen – übernommen aus webdesigner-tirol.at (site.css), Farben im Bauplan-Gelb */
.kk{position:relative}
.kk-bonus{position:absolute;top:-46px;right:-26px;z-index:3;display:grid;place-content:center;justify-items:center;width:108px;height:108px;
  color:var(--anthrazit);text-align:center;transform:rotate(-12deg);filter:drop-shadow(0 6px 10px rgba(19,20,23,.28));pointer-events:none}
.kk-bonus[hidden]{display:none}
.kk-bonus::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 30%,#fff27a 0,var(--gelb) 45%,#f2b800 100%);clip-path:polygon(50.0% 0.0%,56.7% 7.5%,65.5% 2.4%,69.5% 11.7%,79.4% 9.5%,80.4% 19.6%,90.5% 20.6%,88.3% 30.5%,97.6% 34.5%,92.5% 43.3%,100.0% 50.0%,92.5% 56.7%,97.6% 65.5%,88.3% 69.5%,90.5% 79.4%,80.4% 80.4%,79.4% 90.5%,69.5% 88.3%,65.5% 97.6%,56.7% 92.5%,50.0% 100.0%,43.3% 92.5%,34.5% 97.6%,30.5% 88.3%,20.6% 90.5%,19.6% 80.4%,9.5% 79.4%,11.7% 69.5%,2.4% 65.5%,7.5% 56.7%,0.0% 50.0%,7.5% 43.3%,2.4% 34.5%,11.7% 30.5%,9.5% 20.6%,19.6% 19.6%,20.6% 9.5%,30.5% 11.7%,34.5% 2.4%,43.3% 7.5%);z-index:-1}
.kk-bonus::after{content:"";position:absolute;inset:0;clip-path:polygon(50.0% 0.0%,56.7% 7.5%,65.5% 2.4%,69.5% 11.7%,79.4% 9.5%,80.4% 19.6%,90.5% 20.6%,88.3% 30.5%,97.6% 34.5%,92.5% 43.3%,100.0% 50.0%,92.5% 56.7%,97.6% 65.5%,88.3% 69.5%,90.5% 79.4%,80.4% 80.4%,79.4% 90.5%,69.5% 88.3%,65.5% 97.6%,56.7% 92.5%,50.0% 100.0%,43.3% 92.5%,34.5% 97.6%,30.5% 88.3%,20.6% 90.5%,19.6% 80.4%,9.5% 79.4%,11.7% 69.5%,2.4% 65.5%,7.5% 56.7%,0.0% 50.0%,7.5% 43.3%,2.4% 34.5%,11.7% 30.5%,9.5% 20.6%,19.6% 19.6%,20.6% 9.5%,30.5% 11.7%,34.5% 2.4%,43.3% 7.5%);background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 45%,transparent 60%) no-repeat;background-size:250% 100%;background-position:130% 0;z-index:-1}
.kk-bonus__z{font:800 27px/1 var(--sora);letter-spacing:-.04em}
.kk-bonus__t{margin-top:3px;font:700 10px/1.15 var(--mono);letter-spacing:.1em;text-transform:uppercase;max-width:78px}
.kk__bonus{margin-top:6px;font-size:14.5px;line-height:1.45;color:#5fd49e;font-weight:600}
.kk__bonus:empty{display:none}
@media (prefers-reduced-motion: no-preference){
  .kk-bonus.los{animation:bonusPop .9s cubic-bezier(.2,1.6,.4,1) both, bonusWippe 4.5s ease-in-out 1.4s infinite}
  .kk-bonus.los::after{animation:bonusGlanz 4.5s ease-in-out .9s infinite}
}
@keyframes bonusPop{0%{transform:scale(0) rotate(-80deg);opacity:0}55%{transform:scale(1.22) rotate(4deg);opacity:1}75%{transform:scale(.94) rotate(-16deg)}100%{transform:scale(1) rotate(-12deg)}}
@keyframes bonusWippe{0%,78%,100%{transform:rotate(-12deg) scale(1)}84%{transform:rotate(-4deg) scale(1.08)}90%{transform:rotate(-17deg) scale(1.02)}95%{transform:rotate(-10deg) scale(1)}}
@keyframes bonusGlanz{0%,55%{background-position:130% 0}80%,100%{background-position:-60% 0}}
@media (max-width:760px){ .kk-bonus{top:-22px;right:-6px;width:86px;height:86px} .kk-bonus__z{font-size:22px} .kk-bonus__t{font-size:9px} .kk--bonus .kk__k,.kk--bonus .kk__v{padding-right:78px} }
.kf .kk-bonus{right:-2px;top:-30px}  /* im Bauplan liegt der Planer in einem Rahmen mit overflow:hidden */