/* =========================================================================
   Glanzsauberman · Malerarbeiten-LP
   Rezept „Putz & Krepp“: warmes Putzweiß, tiefes Nachtblau aus dem Logo,
   Gold als einzige Akzentfarbe, Malerkrepp nur als Deko im Schluss.
   Radien: 10 (klein) · 20 (Karten/Bilder) · Kreis.  Schatten ≤ 6 %.
   ========================================================================= */
:root{
  --ink:#0E1A28; --ink-2:#16263A;
  --paper:#F7F4EF; --paper-2:#EFE8DD; --weiss:#FFFFFF;
  --text:#1B2430; --muted:#56606C; --linie:rgba(14,26,40,.12);
  --gold:#D4A33B; --gold-hover:#E2B350; --gold-hell:#E8C173; --gold-d:#94701C;
  --krepp:rgba(62,143,216,.16); --krepp-text:#1D5A92;
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-klein:10px; --r-karte:20px;
  --schatten:0 1px 2px rgba(14,26,40,.04), 0 10px 28px rgba(14,26,40,.05);
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1200px; --rand:clamp(20px,5vw,40px);
  --abstand:clamp(76px,9vw,124px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--text);font:400 1.0625rem/1.65 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a[href^="tel:"]{white-space:nowrap}
p{margin:0 0 1em}
p,li,figcaption,legend{text-wrap:pretty}
h1,h3,.faq__f,.schnell__titel{text-wrap:balance}
h1,h2,h3{margin:0;font-weight:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:calc(var(--wrap) + 2*var(--rand));margin:0 auto;padding-inline:var(--rand)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-klein);text-decoration:none;font-weight:700}
.skip:focus{top:12px}

/* ---------- Typo ---------------------------------------------------------- */
h2{font-family:var(--font-display);font-weight:500;font-size:clamp(2.05rem,1.3rem + 2.5vw,3.3rem);line-height:1.07;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
h2 em{display:block;font-style:normal;color:var(--gold-d)}
h3{font-weight:700;font-size:1.2rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.s-dunkel h2,.s-dunkel h3{color:#fff}
.s-dunkel h2 em{color:var(--gold-hell)}

/* Kicker: nur Text in der Akzentfarbe, ohne Strich, ohne Fläche */
.kick{display:block;margin:0 0 14px;font:600 1rem/1.35 var(--font-body);letter-spacing:0;text-transform:none;color:#7A5A12}
.kick--hell{color:var(--gold-hell)}

/* ---------- Buttons ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:14px 22px;border:1.5px solid transparent;border-radius:var(--r-klein);font:700 1rem/1.2 var(--font-body);text-decoration:none;cursor:pointer;transition:transform .15s var(--ease),background-color .2s,border-color .2s,color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn svg{flex:none;transition:transform .25s var(--ease)}
.btn:hover svg:last-child:not(:first-child){transform:translateX(3px)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-hover)}
.btn--glas{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.36);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--glas:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}
.btn--dunkel{background:var(--ink);color:#fff}
.btn--dunkel:hover{background:var(--ink-2)}
.btn--linie{background:transparent;color:var(--ink);border-color:rgba(14,26,40,.22)}
.btn--linie:hover{border-color:var(--ink);background:#fff}
.btn--gross{min-height:58px;padding:16px 26px;font-size:1.05rem}
.btn--klein{min-height:44px;padding:10px 16px;font-size:.95rem}
.btn.laedt{pointer-events:none;color:transparent;position:relative}
.btn.laedt svg{opacity:0}
.btn.laedt::after{content:"";position:absolute;width:20px;height:20px;border:2.5px solid var(--ink);border-right-color:transparent;border-radius:50%;animation:dreh .7s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ---------- Häkchen-Listen ------------------------------------------------ */
.haken{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.haken li{position:relative;padding-left:34px;font-weight:600}
.haken li::before{content:"";position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:50%;background:rgba(212,163,59,.18)}
.haken__svg{position:absolute;left:4px;top:calc(.2em + 4px);width:14px;height:14px;fill:none;stroke:var(--gold-d);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s var(--ease)}
.haken--hell li::before{background:rgba(212,163,59,.24)}
.haken--hell .haken__svg{stroke:var(--gold-hell)}
.haken.ist-gezeichnet .haken__svg{stroke-dashoffset:0}

/* ---------- Kopf ---------------------------------------------------------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:50;transition:background-color .3s,box-shadow .3s}
.kopf__in{display:flex;align-items:center;gap:28px;height:88px;transition:height .3s var(--ease)}
.kopf__logo{display:block;flex:none}
.kopf__logo img{height:66px;width:auto;transition:height .3s var(--ease)}
.kopf__nav{display:flex;gap:26px;margin-left:auto}
.kopf__nav a{color:rgba(255,255,255,.88);font-weight:600;font-size:.95rem;text-decoration:none;position:relative;padding:6px 0}
.kopf__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.kopf__nav a:hover::after{transform:scaleX(1)}
.kopf__cta{display:flex;align-items:center;gap:18px}
.kopf__tel{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.kopf.ist-gescrollt{background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(14,26,40,.06),0 8px 24px rgba(14,26,40,.05)}
.kopf.ist-gescrollt .kopf__in{height:72px}
.kopf.ist-gescrollt .kopf__logo img{height:54px}
.kopf.ist-gescrollt .kopf__nav a,.kopf.ist-gescrollt .kopf__tel{color:var(--ink)}

/* ---------- Hero ---------------------------------------------------------- */
.hero{position:relative;display:flex;align-items:center;min-height:min(88svh,820px);padding:128px 0 118px;color:#fff;background:var(--ink);overflow:hidden;isolation:isolate}
.hero__bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:66% 50%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,17,28,.92) 0%,rgba(9,17,28,.8) 34%,rgba(9,17,28,.42) 58%,rgba(9,17,28,.1) 80%),linear-gradient(180deg,rgba(9,17,28,.5) 0%,rgba(9,17,28,0) 26%,rgba(9,17,28,0) 72%,rgba(9,17,28,.45) 100%)}
.hero__in{width:100%}
.hero__text{max-width:740px}
.hero__kick{font-size:1.08rem;margin-bottom:18px}
.hero__titel{font-family:var(--font-display);font-weight:500;font-size:clamp(2.6rem,1.3rem + 3.9vw,4.6rem);line-height:1.01;letter-spacing:-.022em;color:#fff;margin:0 0 24px}
.hero__titel em{display:block;font-style:normal;color:var(--gold-hell)}
.strich{position:relative;display:inline-block;white-space:nowrap}
.strich__linie{position:absolute;left:-3%;bottom:-.06em;width:106%;height:.26em;overflow:visible;fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:zeichnen 1s .75s var(--ease) forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.hero__lead{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.6;color:rgba(255,255,255,.86);max-width:56ch;margin-bottom:24px}
.hero__liste{grid-template-columns:repeat(2,minmax(0,max-content));column-gap:30px;margin-bottom:32px;font-size:1rem}
.hero__knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.hero__wa{margin:18px 0 0;font-size:.97rem}
.hero__wa a{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.86);font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.hero__wa a:hover{color:#fff;text-decoration-color:var(--gold)}
.js .hs{opacity:0;transform:translateY(10px);animation:hs-rein .8s var(--ease) forwards}
.js .hero__text>.hs:nth-child(2){animation-delay:.08s}
.js .hero__text>.hs:nth-child(3){animation-delay:.16s}
.js .hero__text>.hs:nth-child(4){animation-delay:.24s}
.js .hero__text>.hs:nth-child(5){animation-delay:.32s}
.js .hero__text>.hs:nth-child(6){animation-delay:.4s}
@keyframes hs-rein{to{opacity:1;transform:none}}

/* Schnellwahl – schneidet den Hero an (kein falscher Boden) */
.schnell{position:relative;z-index:3;margin-top:-54px}
.schnell__karte{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;padding:22px 26px;background:#fff;border-radius:var(--r-karte);box-shadow:0 1px 2px rgba(14,26,40,.05),0 18px 44px rgba(14,26,40,.06)}
.schnell__titel{margin:0;font-family:var(--font-display);font-size:1.3rem;font-weight:500;color:var(--ink)}
.schnell__chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border:1.5px solid var(--linie);border-radius:var(--r-klein);background:var(--paper);color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none;transition:border-color .2s,background-color .2s,transform .15s var(--ease)}
.chip:hover{border-color:var(--gold);background:#fff}
.chip:active{transform:scale(.97)}

/* ---------- Abschnitte allgemein ----------------------------------------- */
section{position:relative}
.leist,.proj,.ablauf,.kunden,.faq,.unt,.anfrage{padding:var(--abstand) 0}
.leist{padding-top:calc(var(--abstand) - 8px)}
.s-dunkel{background:var(--ink);color:rgba(255,255,255,.78)}
.kopfzeile{display:grid;grid-template-columns:1.1fr .9fr;gap:24px 48px;align-items:end;margin-bottom:48px}
.kopfzeile--solo{grid-template-columns:1fr}
.kopfzeile__text{margin:0;color:var(--muted);font-size:1.08rem;max-width:46ch}

/* ---------- Leistungen (Bento) ------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.lk{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-karte);overflow:hidden;box-shadow:var(--schatten)}
.lk--breit{grid-column:span 7}
.lk--hoch{grid-column:span 5}
.lk--halb{grid-column:span 6}
.lk__bild{height:clamp(220px,25vw,320px);overflow:hidden;background:var(--paper-2)}
.lk__bild img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.lk:hover .lk__bild img{transform:scale(1.035)}
.lk__text{padding:24px 26px 28px}
.lk__text h3{margin-bottom:8px}
.lk__text p{margin:0;color:var(--muted)}
.zwischen{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 28px;margin-top:28px;padding:24px 28px;background:var(--paper-2);border-radius:var(--r-karte)}
.zwischen p{margin:0;max-width:52ch}
.zwischen strong{color:var(--ink)}
.zwischen__knoepfe{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Der Unterschied (dunkel) ------------------------------------- */
.unt__raster{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,6vw,88px);align-items:center}
.unt__bilder{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.unt__fig{margin:0}
.unt__fig--zwei{margin-top:64px}
.unt__fig img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-karte)}
.unt__fig figcaption{margin-top:12px;font-size:.92rem;color:rgba(255,255,255,.68)}
.unt__fig figcaption span{display:block;margin-bottom:2px;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hell)}
.unt h2{font-size:clamp(2rem,1.25rem + 2vw,2.9rem)}
.unt__lead{font-size:1.1rem;margin:20px 0 0;max-width:54ch}
.punkte{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:20px}
.punkte li{display:grid;grid-template-columns:48px 1fr;gap:18px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.punkte__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-klein);background:rgba(212,163,59,.14);color:var(--gold-hell)}
.punkte h3{font-size:1.12rem;margin-bottom:4px}
.punkte p{margin:0;color:rgba(255,255,255,.72)}

/* ---------- Projekte ------------------------------------------------------ */
.proj{background:#fff}
.galerie{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;grid-auto-flow:dense;gap:16px}
.gal{position:relative;margin:0;border-radius:var(--r-karte);overflow:hidden;background:var(--paper-2)}
.gal--gross{grid-column:span 2;grid-row:span 2}
.gal--hoch{grid-row:span 2}
.gal--breit{grid-column:span 2}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gal:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;left:12px;bottom:12px;right:12px;width:max-content;max-width:calc(100% - 24px);padding:7px 12px;border-radius:var(--r-klein);background:rgba(14,26,40,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:.86rem;font-weight:600;line-height:1.35}

/* ---------- Ablauf -------------------------------------------------------- */
.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.schritte::before,.schritte::after{content:"";position:absolute;top:27px;left:28px;right:calc(25% - 28px);height:2px}
.schritte::before{background:repeating-linear-gradient(90deg,rgba(14,26,40,.2) 0 8px,transparent 8px 15px)}
.schritte::after{background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .2s}
.schritte.ist-da::after{transform:scaleX(1)}
.schritte li{position:relative}
.schritte__nr{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin-bottom:20px;border-radius:50%;background:#fff;border:1.5px solid var(--linie);font:500 1.45rem/1 var(--font-display);color:var(--ink);box-shadow:var(--schatten)}
.schritte h3{margin-bottom:6px}
.schritte p{margin:0;color:var(--muted)}
.preis{display:grid;grid-template-columns:auto 1fr auto;gap:22px 26px;align-items:center;margin-top:52px;padding:28px 30px;background:#fff;border-radius:var(--r-karte);box-shadow:var(--schatten)}
.preis__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(212,163,59,.16);color:var(--gold-d)}
.preis h3{margin-bottom:4px}
.preis p{margin:0;color:var(--muted);max-width:62ch}

/* ---------- Für wen & Gebiet --------------------------------------------- */
.kunden{background:#fff}
.kunden__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kk{padding:30px 30px 32px;background:var(--paper);border-radius:var(--r-karte)}
.kk__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-klein);background:#fff;color:var(--ink);box-shadow:var(--schatten)}
.kk h3{margin:20px 0 8px}
.kk p{margin:0;color:var(--muted)}
.gebiet{display:grid;grid-template-columns:1.5fr 1fr;gap:20px 40px;align-items:center;margin-top:22px;padding:26px 30px;border:1.5px solid var(--linie);border-radius:var(--r-karte)}
.gebiet__titel{display:flex;align-items:center;gap:8px;margin:0;font-weight:700;color:var(--ink)}
.gebiet__titel svg{color:var(--gold-d)}
.orte{margin:10px 0 0;font-weight:600;color:var(--ink);line-height:1.7}
.gebiet__adresse p{margin:0 0 8px;color:var(--muted)}
.gebiet__adresse strong{color:var(--ink)}
.gebiet__zeiten{display:flex;align-items:center;gap:8px}

/* ---------- Anfrage (dunkel) --------------------------------------------- */
.anfrage__raster{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,80px);align-items:start}
.anfrage__lead{font-size:1.1rem;margin:20px 0 28px;max-width:44ch}
.kontaktwege{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:420px}
.kontaktwege a{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--r-karte);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-weight:700;text-decoration:none;transition:background-color .2s,border-color .2s}
.kontaktwege a:hover{background:rgba(255,255,255,.09);border-color:rgba(212,163,59,.5)}
.kontaktwege a>span:first-child{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:rgba(212,163,59,.16);color:var(--gold-hell)}
.kontaktwege small{display:block;font-size:.8rem;font-weight:500;color:rgba(255,255,255,.6)}
.qk{position:relative}
.lead-form{padding:clamp(22px,3vw,34px);background:#fff;color:var(--text);border-radius:var(--r-karte);box-shadow:0 24px 60px rgba(0,0,0,.28)}
.fortschritt{height:6px;margin-bottom:12px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.fortschritt__f{height:100%;width:0;border-radius:99px;background:var(--gold);transition:width .5s var(--ease)}
.f-schritt{margin:0 0 14px;font-size:.84rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lead-form.ist-start .fortschritt,.lead-form.ist-start .f-schritt{display:none}
.schritt{display:none;margin:0;padding:0;border:0;min-width:0}
.schritt.ist-an{display:block;animation:schritt-rein .38s var(--ease)}
@keyframes schritt-rein{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.schritt legend{display:block;margin:0 0 18px;padding:0;font:500 clamp(1.35rem,1.2rem + .6vw,1.65rem)/1.2 var(--font-display);color:var(--ink)}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick{display:flex;align-items:center;gap:12px;min-height:60px;padding:14px 16px;border:1.5px solid rgba(14,26,40,.14);border-radius:var(--r-klein);background:#fff;color:var(--ink);font-weight:600;font-size:1rem;line-height:1.3;text-align:left;cursor:pointer;transition:border-color .15s,background-color .15s,transform .12s var(--ease)}
.pick svg{flex:none;color:var(--gold-d)}
.pick:hover{border-color:var(--gold);background:#FFFBF2}
.pick:active{transform:scale(.98)}
.pick.ist-gewaehlt{border-color:var(--gold);background:#FFF5DF;box-shadow:inset 0 0 0 1px var(--gold)}
.pick--breit{grid-column:1/-1}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feld{display:block}
.feld>span{display:block;margin-bottom:6px;font-size:.9rem;font-weight:600;color:var(--ink)}
.feld--voll{grid-column:1/-1}
.feld input,.feld textarea{width:100%;padding:13px 14px;border:1.5px solid rgba(14,26,40,.16);border-radius:var(--r-klein);background:#fff;color:var(--text);font:400 1rem/1.4 var(--font-body);transition:border-color .15s,box-shadow .15s}
.feld textarea{resize:vertical;min-height:84px}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,163,59,.25)}
.feld input::placeholder,.feld textarea::placeholder{color:#8B939C}
.ist-falsch{border-color:#B8402B !important;animation:wackeln .35s}
@keyframes wackeln{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;line-height:1.5;color:var(--muted)}
.check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--gold-d)}
.check a{color:var(--ink)}
.topf-feld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qk__fehler{display:none;margin:16px 0 0;padding:10px 14px;border-radius:var(--r-klein);background:#FCEDEA;color:#8A2A1B;font-size:.92rem}
.qk__fehler.ist-an{display:block}
.qk__fehler a{font-weight:700;color:inherit}
.form__steuer{display:flex;align-items:center;gap:12px;margin-top:22px}
.zurueck{visibility:hidden;display:inline-flex;align-items:center;gap:4px;padding:10px 4px;border:0;background:none;color:var(--muted);font-weight:600;cursor:pointer}
.zurueck.ist-an{visibility:visible}
.zurueck:hover{color:var(--ink)}
.weiter,.senden{margin-left:auto}
.formstate{padding:18px 0 6px;text-align:center}
.formstate__haken{width:64px;height:64px;margin:0 auto 14px;fill:none;stroke:var(--gold-d);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.formstate__haken circle{stroke-dasharray:152;stroke-dashoffset:152;animation:zeichnen .7s var(--ease) forwards}
.formstate__haken path{stroke-dasharray:40;stroke-dashoffset:40;animation:zeichnen .45s .55s var(--ease) forwards}
.formstate__titel{font:500 1.5rem/1.2 var(--font-display);color:var(--ink);margin-bottom:8px}
.formstate p{color:var(--muted)}
.formstate a{color:var(--ink);font-weight:700}
.qk__vertrauen{margin:14px 4px 0;text-align:center;font-size:.88rem;color:rgba(255,255,255,.64)}

/* ---------- FAQ ----------------------------------------------------------- */
.faq__raster{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,80px);align-items:start}
.faq__text{margin:20px 0 0;color:var(--muted)}
.faq__text a{color:var(--ink);font-weight:700}
.faq__liste{border-top:1px solid var(--linie)}
.faq__item{border-bottom:1px solid var(--linie)}
.faq__f{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:22px 0;border:0;background:none;color:var(--ink);font-weight:700;font-size:1.08rem;line-height:1.4;text-align:left;cursor:pointer}
.faq__plus{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--paper-2);transition:transform .35s var(--ease),background-color .2s}
.faq__f[aria-expanded="true"] .faq__plus{transform:rotate(45deg);background:var(--gold)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq__a>div{overflow:hidden}
.faq__a.ist-offen{grid-template-rows:1fr}
html:not(.js) .faq__a{grid-template-rows:1fr}
.faq__a p{margin:0 0 22px;color:var(--muted);max-width:62ch}

/* ---------- Schluss ------------------------------------------------------- */
.fin{padding:clamp(84px,10vw,132px) 0;background:var(--paper-2);text-align:center;overflow:hidden}
.fin::before,.fin::after{content:"";position:absolute;width:300px;height:36px;background:var(--krepp);opacity:.55;pointer-events:none;clip-path:polygon(0 0,100% 0,98.6% 30%,100% 60%,98.8% 100%,0 100%,1.3% 70%,0 40%)}
.fin::before{top:48px;left:-40px;transform:rotate(-8deg)}
.fin::after{bottom:52px;right:-50px;transform:rotate(-6deg)}
.fin__in{position:relative}
.fin h2{max-width:21ch;margin:0 auto}
.fin p{max-width:52ch;margin:20px auto 32px;color:var(--muted);font-size:1.1rem}
.fin__knoepfe{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}

/* ---------- Fuß ----------------------------------------------------------- */
.fuss{padding:68px 0 28px;background:var(--ink);color:rgba(255,255,255,.7);font-size:.97rem}
.fuss__raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.fuss__marke img{width:128px;margin-bottom:16px}
.fuss__marke p{max-width:32ch}
.fuss__titel{margin-bottom:12px;color:#fff;font-weight:700}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--gold-hell)}
.fuss__liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fuss__unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:.9rem}
.fuss__unten p{margin:0}
.fuss__unten nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.fuss__unten button{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.fuss__unten button:hover{color:var(--gold-hell)}

/* ---------- Reveal-Engine ------------------------------------------------- */
.js .rv{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--vz,0s)}
.js .rv.ist-da{opacity:1;transform:none}

/* ---------- Rechtsseiten -------------------------------------------------- */
.seite-recht .kopf{background:rgba(255,255,255,.95);box-shadow:0 1px 0 rgba(14,26,40,.06)}
.seite-recht .kopf__in{height:72px}
.seite-recht .kopf__logo img{height:54px}
.seite-recht .kopf__tel{color:var(--ink)}
.r-kopf{padding:140px 0 40px;background:var(--paper-2)}
.r-kopf h1{font:500 clamp(2.2rem,1.6rem + 2vw,3.2rem)/1.1 var(--font-display);color:var(--ink);margin:14px 0 8px}
.r-kopf p{margin:0;color:var(--muted)}
.r-zurueck{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;text-decoration:none}
.r-zurueck:hover{color:var(--ink)}
.r-inhalt{padding:48px 0 96px;background:#fff}
.r-text{max-width:760px}
.r-text h2{font-size:clamp(1.45rem,1.25rem + .8vw,1.85rem);margin:40px 0 12px}
.r-text h3{font-size:1.1rem;margin:26px 0 8px}
.r-text p,.r-text li{color:var(--text)}
.r-text a{color:var(--krepp-text)}
.r-box{padding:20px 22px;margin:0 0 16px;border-radius:var(--r-karte);background:var(--paper)}
.r-box p{margin:0 0 6px}
.r-link{padding:0;border:0;background:none;color:var(--krepp-text);text-decoration:underline;cursor:pointer;font:inherit}

/* ---------- Responsiv ----------------------------------------------------- */
@media (max-width:1100px){
  .faq__raster{grid-template-columns:1fr}
  .kopf__nav{display:none}
  .kopf__cta{margin-left:auto}
}
@media (max-width:980px){
  .kopfzeile,.unt__raster,.anfrage__raster,.faq__raster{grid-template-columns:1fr}
  .kopfzeile{align-items:start;margin-bottom:36px}
  .lk--breit,.lk--hoch,.lk--halb{grid-column:span 6}
  .lk__bild{height:260px}
  .schritte{grid-template-columns:1fr 1fr;row-gap:36px}
  .schritte::before,.schritte::after{display:none}
  .kunden__raster{grid-template-columns:1fr}
  .kk{display:grid;grid-template-columns:52px 1fr;column-gap:18px}
  .kk h3{margin:4px 0 6px}
  .kk p{grid-column:2}
  .gebiet{grid-template-columns:1fr}
  .fuss__raster{grid-template-columns:1fr 1fr}
  .unt__bilder{max-width:560px}
}
@media (max-width:700px){
  body{font-size:1rem}
  h2,.unt h2{font-size:1.72rem;line-height:1.1}
  .kopf__in{height:70px;gap:12px}
  .kopf__logo img{height:50px}
  .kopf.ist-gescrollt .kopf__in{height:64px}
  .kopf.ist-gescrollt .kopf__logo img{height:46px}
  .kopf__anfrage{display:none}
  .kopf__tel{padding:9px 12px;border:1.5px solid rgba(255,255,255,.4);border-radius:var(--r-klein);font-size:.92rem}
  .kopf.ist-gescrollt .kopf__tel,.seite-recht .kopf__tel{border-color:rgba(14,26,40,.2)}
  .hero{align-items:flex-end;min-height:0;padding:108px 0 96px}
  .hero__bild{object-position:72% 50%}
  .hero::before{background:linear-gradient(180deg,rgba(9,17,28,.5) 0%,rgba(9,17,28,.72) 30%,rgba(9,17,28,.9) 62%,rgba(9,17,28,.95) 100%)}
  .hero__titel{font-size:clamp(2rem,9.1vw,2.6rem)}
  .hero__kick{font-size:.98rem}
  .hero__liste{grid-template-columns:1fr;margin-bottom:26px}
  .hero__knoepfe .btn{width:100%}
  .schnell{margin-top:-44px}
  .schnell__karte{padding:18px 18px 20px}
  .schnell__titel{font-size:1.15rem}
  .chip{min-height:44px;padding:9px 13px;font-size:.92rem}
  .bento{gap:16px}
  .lk--breit,.lk--hoch,.lk--halb{grid-column:1/-1}
  .lk__bild{height:220px}
  .lk__text{padding:20px 20px 24px}
  .zwischen{padding:22px 20px}
  .zwischen__knoepfe,.zwischen__knoepfe .btn{width:100%}
  .unt__fig--zwei{margin-top:40px}
  .galerie{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
  .gal figcaption{left:8px;bottom:8px;max-width:calc(100% - 16px);font-size:.78rem;padding:5px 9px}
  .schritte{grid-template-columns:1fr;row-gap:0}
  .schritte li{display:grid;grid-template-columns:56px 1fr;column-gap:18px;padding-bottom:26px}
  .schritte li:not(:last-child)::before{content:"";position:absolute;left:27px;top:60px;bottom:4px;width:2px;background:repeating-linear-gradient(180deg,rgba(14,26,40,.2) 0 8px,transparent 8px 15px)}
  .schritte__nr{grid-row:span 2;margin-bottom:0}
  .schritte h3{align-self:end;margin-top:6px}
  .preis{grid-template-columns:1fr;padding:24px 22px}
  .preis .btn{width:100%}
  .picks,.felder{grid-template-columns:1fr}
  .pick{min-height:56px}
  .form__steuer .btn{flex:1}
  .fin__knoepfe .btn{width:100%}
  .fuss__raster{grid-template-columns:1fr}
  .kk{display:block;padding:24px 22px 26px}
  .kk h3{margin:16px 0 6px}
}
@media (max-width:360px){
  h2,.unt h2{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .js .rv,.js .hs{opacity:1;transform:none}
  .strich__linie,.haken__svg{stroke-dashoffset:0}
}