/* Enoxo Sites — Stylesheet v3 (helles, bodenständiges Design)
   Zielgruppe Handwerk: hell, ruhig, vertrauensbildend.
   Enoxo-Bezug bleibt über Logo, Petrol/Teal-Akzente und Amber-Maßband. */

@font-face{font-family:'Exo 2';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/exo-2-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/exo-2-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/exo-2-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/exo-2-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2')}

:root{
  /* Werkstatt-Palette: warmer Sand, Creme-Flächen, tiefes Petrol als Anker */
  --bg:#ece6d9; --surface:#faf7ef; --surface2:#f4efe4; --tone:#e2dac9;
  --ink:#20312e; --ink2:#3a4e49;
  --petrol:#0b7a66; --petrol-dark:#085e4f; --petrol-deep:#103831; --petrol-soft:#dcefe7;
  --link:#0d6e8f;
  --amber:#a06a00; --amber-strong:#d98f00; --amber-soft:#f6ecd4;
  --rot:#b53a4c; --gruen:#0f8a5f;
  --line:#d8cfbc; --line2:#e5ddcb;
  --shadow-s:0 1px 2px rgba(48,42,28,.06),0 4px 14px rgba(48,42,28,.08);
  --shadow-m:0 2px 4px rgba(48,42,28,.07),0 14px 32px rgba(48,42,28,.13);
  /* Angebots-Papier */
  --paper:#fffdf8; --paper-line:#e0d9c6; --paper-ink:#17242e; --paper-muted:#77808c;
  --wrap:1140px; --r:12px;

  /* ── Kompatibilitäts-Aliase (Namen aus dem früheren Dunkel-Design;
        werden von Inline-Styles in HTML/Admin weiterverwendet) ── */
  --navy:var(--bg); --navy2:var(--surface); --navy3:var(--tone); --navy4:var(--tone);
  --white:var(--ink); --muted:#5b7280; --muted2:#93a4ad;
  --teal:var(--petrol); --cyan:var(--link); --electric:#2a6a8f; --violet:var(--petrol);
  --red:var(--rot); --green:var(--gruen);
  --border:var(--line); --border2:var(--line2);
  --glass:var(--surface); --glass2:var(--surface2);
  --glow-teal:0 6px 18px rgba(11,122,102,.22);
  --glow-amber:0 6px 18px rgba(224,150,0,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Exo 2',system-ui,sans-serif;font-size:16.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--link)}
h1,h2,h3{font-family:'Exo 2',sans-serif;font-weight:700;line-height:1.18;letter-spacing:-.015em;margin:0;color:var(--ink)}
p{margin:0}
/* Frühere Gradient-Akzente → ruhige Petrol-/Amber-Betonung */
.grad{color:var(--petrol);background:none;-webkit-text-fill-color:currentColor}
.grad-amber{color:var(--amber);background:none;-webkit-text-fill-color:currentColor}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sec{padding:88px 0;position:relative}
.sec--tight{padding:60px 0}
.sec:nth-of-type(even){background:var(--surface)}

/* Zollstock-Trenner — Amber-Maßband, jetzt auf hellem Grund */
.tickrule{
  height:15px;border-top:1px solid var(--line);
  background-image:
    repeating-linear-gradient(90deg,rgba(178,117,0,.55) 0 1px,transparent 1px 60px),
    repeating-linear-gradient(90deg,rgba(21,46,58,.14) 0 1px,transparent 1px 12px);
  background-size:100% 15px,100% 8px;background-repeat:no-repeat;background-position:0 0;
}

.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--petrol);margin-bottom:12px;
}
.eyebrow::before,.eyebrow::after{content:'—';color:var(--muted2);margin:0 10px}
.eyebrow--muted{color:var(--muted2)}
.h2{font-size:clamp(25px,3.3vw,36px);margin-bottom:14px}
.lede{color:var(--muted);font-size:clamp(15.5px,1.6vw,18px);max-width:62ch}

.btn{
  display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  font-family:'Exo 2',sans-serif;font-size:15px;font-weight:700;
  padding:13px 26px;border-radius:9px;text-decoration:none;transition:all .18s;
}
.btn-primary{background:var(--petrol);color:#fff;box-shadow:var(--glow-teal)}
.btn-primary:hover{background:var(--petrol-dark);transform:translateY(-1px);box-shadow:0 10px 24px rgba(11,122,102,.28)}
.btn-ghost{background:var(--surface);color:var(--petrol);border:1.5px solid var(--petrol)}
.btn-ghost:hover{background:var(--petrol-soft)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2.5px solid var(--petrol);outline-offset:3px
}

/* ── Kopfzeile ───────────────────────────────── */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:20px;height:62px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:-.01em;font-size:17px}
.logo b{color:var(--petrol);font-weight:700}
.logo-mark{width:27px;height:27px;flex:0 0 27px}
.top-nav{margin-left:auto;display:flex;gap:24px;align-items:center}
.top-nav a{color:var(--ink2);text-decoration:none;font-size:14.5px;font-weight:500}
.top-nav a:hover{color:var(--petrol)}
.top-cta{padding:9px 18px;font-size:13.5px}
@media(max-width:820px){.top-nav a:not(.top-cta){display:none}}

/* ── Hero — hell, ruhig, mit dezenter Blaupausen-Textur ── */
.hero{padding:64px 0 78px;position:relative;overflow:hidden;background:var(--surface)}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(11,122,102,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(11,122,102,.06) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 30%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 90% 85% at 50% 30%,#000 30%,transparent 80%);
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(30px,4.9vw,52px);margin-bottom:22px}
.hero h1 .u{background:linear-gradient(transparent 62%,rgba(224,150,0,.35) 62%);padding-bottom:2px}
.hero-sub{color:var(--muted);font-size:clamp(16px,1.7vw,19px);max-width:52ch;margin-bottom:28px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink2);
  border:1px solid var(--line);border-radius:100px;padding:6px 13px;background:var(--surface2)
}
.chip b{color:var(--ink);font-weight:500}
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero{padding:44px 0 60px}
}

/* ── Angebot (Papier-Dokument) — liegt jetzt auf dem "Schreibtisch" ── */
.angebot{
  background:var(--paper);color:var(--paper-ink);border-radius:6px;
  border:1px solid var(--paper-line);
  box-shadow:0 1px 0 #fff inset,0 14px 34px rgba(21,46,58,.14),0 3px 8px rgba(21,46,58,.08);
  position:relative;overflow:hidden;
}
.angebot::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:7px;
  background:repeating-linear-gradient(90deg,var(--paper) 0 7px,transparent 7px 14px);
  filter:drop-shadow(0 -1px 0 var(--paper-line));
}
.ang-head{padding:20px 24px 16px;border-bottom:1px solid var(--paper-line);display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.ang-brand{font-weight:700;font-size:15px;letter-spacing:-.01em}
.ang-brand span{color:var(--petrol)}
.ang-brand small{display:block;font-weight:400;font-size:11px;color:var(--paper-muted);letter-spacing:0;margin-top:2px}
.ang-meta{text-align:right;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--paper-muted);line-height:1.75}
.ang-meta b{display:block;font-size:12px;color:var(--paper-ink);letter-spacing:.08em}
.ang-body{padding:6px 24px 4px}
.ang-th{
  display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-muted);
  padding:12px 0 8px;border-bottom:1px solid var(--paper-line)
}
.ang-rows{margin:0;padding:0;list-style:none;min-height:88px}
.ang-row{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:1px dotted var(--paper-line);
  font-size:13.5px;animation:angin .22s ease-out
}
@keyframes angin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ang-row .pos{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--paper-muted);margin-right:9px}
.ang-row .amt{font-family:'JetBrains Mono',monospace;font-size:13px;white-space:nowrap;font-weight:500}
.ang-row.is-inc .amt{color:var(--paper-muted)}
.ang-sum{padding:14px 24px 20px;border-top:2px solid var(--paper-ink);margin-top:8px}
.ang-line{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;padding:4px 0}
.ang-line .lbl{color:var(--paper-muted)}
.ang-total{font-size:15px;font-weight:700}
.ang-total .v{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:500}
.ang-note{font-size:10.5px;color:var(--paper-muted);line-height:1.6;margin-top:12px;padding-top:11px;border-top:1px solid var(--paper-line)}
.ang-stamp{
  display:inline-block;margin-top:9px;transform:rotate(-4deg);transform-origin:100% 50%;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  color:#8a6400;border:1.5px solid rgba(178,132,0,.55);
  padding:3px 9px;border-radius:3px;text-transform:uppercase
}
.ang-line.is-rabatt .lbl,.ang-line.is-rabatt .v{color:#b0304a}
#ang-zwischen .lbl,#ang-zwischen .v{color:var(--paper-muted)}

/* ── Konfigurator ────────────────────────────── */
.cfg{display:grid;grid-template-columns:1fr 420px;gap:46px;align-items:start}
@media(max-width:980px){.cfg{grid-template-columns:1fr;gap:34px}}
.cfg-sticky{position:sticky;top:86px}
@media(max-width:980px){.cfg-sticky{position:static}}
.cfg-group{margin-bottom:30px}
.cfg-label{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted2);margin-bottom:12px;display:flex;align-items:center;gap:10px
}
.cfg-label::after{content:'';flex:1;height:1px;background:var(--line)}

.opt{
  display:block;position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px 16px 52px;margin-bottom:10px;cursor:pointer;
  box-shadow:var(--shadow-s);
  transition:border-color .15s,box-shadow .15s,transform .15s
}
.opt:hover{border-color:var(--petrol);transform:translateX(2px)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .mark{
  position:absolute;left:18px;top:19px;width:19px;height:19px;border-radius:50%;
  border:2px solid var(--muted2);background:#fff;transition:.15s
}
.opt[data-type="check"] .mark{border-radius:5px}
.opt .mark::after{
  content:'';position:absolute;inset:3px;border-radius:inherit;background:var(--petrol);
  transform:scale(0);transition:transform .15s
}
.opt input:checked ~ .mark{border-color:var(--petrol)}
.opt input:checked ~ .mark::after{transform:scale(1)}
.opt:has(input:checked){border-color:var(--petrol);background:var(--petrol-soft);box-shadow:var(--shadow-s)}
.opt input:focus-visible ~ .mark{outline:2.5px solid var(--petrol);outline-offset:3px}
.opt-top{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.opt-name{font-weight:700;font-size:15.5px;color:var(--ink)}
.opt-price{font-family:'JetBrains Mono',monospace;font-size:13.5px;color:var(--amber);white-space:nowrap;font-weight:500}
.opt-desc{color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:5px;display:block}
.opt-list{margin:9px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 8px}
.opt-list li{font-size:12px;color:var(--ink2);background:var(--tone);border-radius:6px;padding:3px 9px}
.opt-flag{
  position:absolute;top:-9px;right:16px;background:var(--amber-strong);color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 10px;border-radius:100px;font-weight:700;box-shadow:var(--shadow-s)
}
.opt.is-included{opacity:.55;cursor:not-allowed}
.opt.is-included:hover{transform:none;border-color:var(--line)}

.opt-erst{
  display:block;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);
  margin-top:3px;text-align:right
}

/* ── Karten / Raster ─────────────────────────── */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  box-shadow:var(--shadow-s);transition:transform .2s,box-shadow .2s,border-color .2s
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.card h3{font-size:16.5px;margin-bottom:8px}
.card p{color:var(--muted);font-size:14.5px;line-height:1.65}
.card-ico{font-size:22px;margin-bottom:12px;display:block}

/* Ablauf */
.steps{counter-reset:s;display:grid;gap:2px}
.step{
  counter-increment:s;display:grid;grid-template-columns:76px 1fr auto;gap:22px;align-items:start;
  padding:24px 4px;border-top:1px solid var(--line)
}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:'JetBrains Mono',monospace;font-size:26px;color:var(--petrol);line-height:1;font-weight:500
}
.step h3{font-size:17px;margin-bottom:6px}
.step p{color:var(--muted);font-size:14.5px}
.step-when{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted2);white-space:nowrap;padding-top:4px}
@media(max-width:720px){
  .step{grid-template-columns:52px 1fr;gap:16px}
  .step-when{grid-column:2;padding-top:0}
}

/* FAQ */
.faq{max-width:860px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:600;font-size:16.5px;position:relative;color:var(--ink)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:18px;font-size:22px;color:var(--petrol);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{color:var(--muted);font-size:15px;line-height:1.75;padding:0 20px 22px 0}

/* Kontakt */
.contact{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(26px,4vw,46px);box-shadow:var(--shadow-m)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--ink)}
.field .hint{font-weight:400;color:var(--muted2);font-size:12.5px}
.input{
  width:100%;background:#fffdf8;border:1px solid #c9bfa9;border-radius:9px;
  padding:12px 14px;color:var(--ink);font-family:'Exo 2',sans-serif;font-size:16px;
  transition:border-color .2s,box-shadow .2s;outline:none
}
.input:focus{border-color:var(--petrol);box-shadow:0 0 0 3px rgba(11,122,102,.13)}
.input::placeholder{color:#a89f8c}
textarea.input{min-height:130px;resize:vertical;line-height:1.6}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.row2{grid-template-columns:1fr}}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.6;margin:6px 0 20px}
.consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--petrol);flex:0 0 17px}
.summary-box{
  background:var(--tone);border:1px dashed #bdb29a;border-radius:10px;padding:14px 16px;margin-bottom:18px;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink2);line-height:1.8;
}
.sum-part{white-space:pre-line}
.sum-part+.sum-part:not([hidden]){margin-top:12px;padding-top:12px;border-top:1px dashed #bdb29a}
.sum-hinweis{color:var(--amber);font-weight:500}

/* Fußzeile */
.foot{padding:46px 0 58px;font-size:14px}
footer.foot{
  border-top:none;background:var(--petrol-deep);
  color:#b9cbc2;--muted:#c9d8d0;--muted2:#8fa89e;--ink:#f2f6f0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 60px);
}
.doc .foot{padding:20px 0 0;background:none}
.doc .foot a{color:var(--link)}
.foot-in{display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer.foot a{color:#cfe0d6;text-decoration:none}
footer.foot a:hover{color:#ffd27a}
.foot a{text-decoration:none}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}

/* Rechtsdokumente */
.doc{max-width:760px;margin:0 auto;padding:52px 22px 90px}
.doc h1{font-size:30px;margin-bottom:8px}
.doc .stamp{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted2);letter-spacing:.14em;text-transform:uppercase;margin-bottom:36px}
.doc h2{font-size:19px;margin:34px 0 10px}
.doc h3{font-size:16px;margin:22px 0 6px}
.doc p,.doc li{color:var(--ink2);font-size:15px;line-height:1.8}
.doc ul{padding-left:20px}
.doc strong{color:var(--ink)}
.doc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:18px 0;box-shadow:var(--shadow-s)}

/* ── Start-Aktion ────────────────────────────── */
.chip-aktion{border-color:#ecc98a;background:var(--amber-soft);color:var(--amber)}
.chip-aktion b{color:var(--amber);font-weight:600}

.aktion{
  position:relative;border:1px solid #ecd9ae;border-radius:var(--r);
  background:linear-gradient(135deg,var(--amber-soft),#fff 55%);
  box-shadow:var(--shadow-s);
  padding:26px 28px;margin-bottom:38px;overflow:hidden
}
.aktion::before{
  content:'';position:absolute;left:0;right:0;top:0;height:6px;
  background-image:repeating-linear-gradient(90deg,rgba(224,150,0,.55) 0 1px,transparent 1px 10px)
}
.aktion-tag{
  display:inline-flex;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--amber-strong);
  padding:4px 12px;border-radius:100px;margin-bottom:13px
}
.aktion-h{font-size:clamp(18px,2.3vw,23px);margin-bottom:11px}
.aktion-p{color:var(--ink2);font-size:14.5px;line-height:1.7;max-width:72ch}
.aktion-klein{color:var(--muted);font-size:13px;line-height:1.65;margin-top:12px;max-width:72ch}
.aktion-frei{color:var(--amber);font-weight:700}

/* Preisleiste mobil */
.pricebar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(21,46,58,.10);
  transform:translateY(110%);transition:transform .28s ease;padding:10px 0
}
.pricebar.is-on{transform:none}
.pricebar-in{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pb-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
.pb-val{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--ink)}
.pb-sep{color:var(--muted2);margin:0 6px}
.pb-btn{padding:10px 20px;font-size:14px}
@media(max-width:980px){.pricebar{display:block}}

/* ── Zurückhaltende Animationen ──────────────── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}

.lm-line{stroke-dasharray:70;stroke-dashoffset:70;animation:lmDraw 1s .15s ease-out forwards}
.lm-line2{stroke-dasharray:70;stroke-dashoffset:70;animation:lmDraw 1s .5s ease-out forwards;opacity:.45}
@keyframes lmDraw{to{stroke-dashoffset:0}}
.lm-node{transform-origin:center;transform-box:fill-box;animation:lmPulse 4.2s ease-in-out infinite}
.lm-node:nth-child(2){animation-delay:.7s}
.lm-node:nth-child(3){animation-delay:1.4s}
.lm-node-s{animation-delay:2.1s}
@keyframes lmPulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}

.hin{opacity:0;transform:translateY(12px);animation:hinUp .55s var(--d,0s) cubic-bezier(.2,.7,.2,1) forwards}
@keyframes hinUp{to{opacity:1;transform:none}}

@media(pointer:fine) and (min-width:981px){
  .cfg-sticky{perspective:1100px}
  .angebot{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;will-change:transform}
}
.ang-row:nth-child(1){animation-delay:.02s}.ang-row:nth-child(2){animation-delay:.07s}
.ang-row:nth-child(3){animation-delay:.12s}.ang-row:nth-child(4){animation-delay:.17s}
.ang-row:nth-child(5){animation-delay:.22s}.ang-row:nth-child(6){animation-delay:.27s}

.faq details[open] .a{animation:faqIn .3s ease-out}
@keyframes faqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.card-ico{transition:transform .25s cubic-bezier(.2,.8,.3,1.2)}
.card:hover .card-ico{transform:translateY(-3px)}

.opt input:checked ~ .mark::after{animation:markPop .26s cubic-bezier(.2,.9,.3,1.35)}
@keyframes markPop{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}

.v.tick{animation:sumTick .5s ease-out}
@keyframes sumTick{35%{color:var(--petrol);text-shadow:0 0 1px rgba(11,122,102,.3)}}
.pb-val.tick{animation:pbTickL .5s ease-out}
@keyframes pbTickL{35%{color:var(--petrol)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal,.hin{opacity:1;transform:none}
  .lm-line,.lm-line2{animation:none;stroke-dashoffset:0}
  .angebot{transform:none !important}
  html{scroll-behavior:auto}
}

/* ── Bauplan-Design: Zeichnungs-Animationen ──── */

/* Blaupausen-Szene im Hero */
.hero-right{display:flex;flex-direction:column;gap:18px;align-items:center}
.bp-svg{width:min(340px,80%);height:auto;filter:drop-shadow(0 10px 24px rgba(21,46,58,.10))}
.bp-svg .bp-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:bpDraw var(--t,.6s) var(--dl,0s) ease-out forwards}
@keyframes bpDraw{to{stroke-dashoffset:0}}
.bp-svg .bp-pop{opacity:0;transform-origin:center;transform-box:fill-box;animation:bpPop .4s var(--dl,0s) cubic-bezier(.2,.9,.3,1.35) forwards}
@keyframes bpPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.bp-svg .bp-fade{opacity:0;animation:bpFade .5s var(--dl,0s) ease-out forwards}
@keyframes bpFade{to{opacity:1}}
.bp-svg .bp-check{opacity:0;transform-origin:center;transform-box:fill-box;animation:bpCheck .5s var(--dl,0s) cubic-bezier(.2,.9,.3,1.4) forwards}
@keyframes bpCheck{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
/* danach: ruhiges Schweben der ganzen Zeichnung */
.bp-svg{animation:bpFloat 7s 4.6s ease-in-out infinite}
@keyframes bpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Maßlinien-Unterstreichung unter Überschriften (zieht sich beim Reveal) */
.h2.reveal{position:relative;padding-bottom:14px}
.h2.reveal::after{
  content:'';position:absolute;left:0;bottom:0;height:3px;width:72px;background:var(--petrol);
  border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .6s .15s cubic-bezier(.2,.7,.2,1)
}
.h2.reveal.in::after{transform:scaleX(1)}

/* Ablauf: Konstellations-Linie verbindet die Schritte */
.steps{position:relative}
.steps::before{
  content:'';position:absolute;left:37px;top:34px;bottom:34px;width:2px;
  background:linear-gradient(180deg,var(--petrol),var(--link));
  transform:scaleY(0);transform-origin:top;transition:transform 1.2s .2s ease;
  opacity:.35;border-radius:2px;
}
.steps.in::before{transform:scaleY(1)}
.step{position:relative}
.step::after{
  content:'';position:absolute;left:31px;top:32px;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2.5px solid var(--petrol);
  transform:scale(0);transition:transform .35s cubic-bezier(.2,.9,.3,1.4);
}
.step.reveal.in::after{transform:scale(1);transition-delay:.35s}
@media(max-width:720px){
  .steps::before{left:25px}
  .step::after{left:19px}
}

/* Maßband: sanft wandernder Amber-Schimmer */
.tickrule{position:relative;overflow:hidden}
.tickrule::after{
  content:'';position:absolute;top:0;bottom:0;width:160px;
  background:linear-gradient(90deg,transparent,rgba(224,150,0,.22),transparent);
  animation:tickScanL 9s linear infinite;
}
@keyframes tickScanL{0%{left:-180px}100%{left:100%}}

@media(prefers-reduced-motion:reduce){
  .bp-svg,.bp-svg .bp-draw,.bp-svg .bp-pop,.bp-svg .bp-fade,.bp-svg .bp-check{animation:none !important}
  .bp-svg .bp-draw{stroke-dashoffset:0}
  .bp-svg .bp-pop,.bp-svg .bp-fade,.bp-svg .bp-check{opacity:1}
  .h2.reveal::after{transform:scaleX(1);transition:none}
  .steps::before{transform:scaleY(1);transition:none}
  .step::after{transform:scale(1);transition:none}
  .tickrule::after{animation:none;display:none}
}


/* Hammer in der Bauplan-Szene: drei Schläge beim Aufbau, dann ruhiges Nachklopfen */
.bp-hammer{opacity:0;animation:bpFade .4s .5s ease-out forwards}
.bp-hammer-swing{transform-origin:38px 150px;animation:bpHammer 5.4s .6s ease-in-out infinite}
@keyframes bpHammer{
  0%,4%{transform:rotate(0)} 8%{transform:rotate(-24deg)} 12%{transform:rotate(8deg)} 15%{transform:rotate(0)}
  19%{transform:rotate(-24deg)} 23%{transform:rotate(8deg)} 26%{transform:rotate(0)}
  30%{transform:rotate(-24deg)} 34%{transform:rotate(8deg)} 37%,100%{transform:rotate(0)}
}

@media(prefers-reduced-motion:reduce){
  .bp-hammer{opacity:1;animation:none}
  .bp-hammer-swing{animation:none}
}