/* Schriften lokal eingebunden (SIL Open Font License) */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ===== Dachwerk Nord · Design „Schiefer & Kupfer“ (eigenständig) ===== */
:root,[data-stil="a"]{
  --paper:#F3F2EF; --white:#FFFFFF; --slate:#222A30; --slate-2:#333E46; --stone:#5B6770; --line:#D6D7D3;
  --copper:#A3541F; --copper-l:#D98A55; --sky:#DDE4E7;
  --f:"Archivo",system-ui,sans-serif;
  /* Werte für den gemeinsamen Anfrage-Assistenten */
  --bg:#F3F2EF; --bg-alt:#E8E9E5; --surface:#FFFFFF; --ink:#222A30; --ink-soft:#3E4950; --muted:#5B6770; --line-strong:#222A30;
  --brand:#222A30; --brand-hover:#A3541F; --on-brand:#FFFFFF; --accent:#A3541F; --accent-text:#9C4E1C; --focus:#A3541F;
  --font-display:"Archivo",system-ui,sans-serif; --font-body:"Archivo",system-ui,sans-serif; --font-label:"Archivo",system-ui,sans-serif;
  --display-weight:800; --h-weight:700; --radius:2px; --radius-btn:2px; --radius-media:2px; --label-tracking:.14em; --label-weight:600;
  --dark-bg:#222A30; --dark-ink:#F3F2EF; --dark-soft:#AEB8BF;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--slate);font:400 17px/1.6 var(--f);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
main{overflow-x:clip}
h1,h2,h3{font-family:var(--f);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin:0}
h2{font-size:clamp(32px,4vw,54px)}
p{margin:0}
.muted{color:var(--stone)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--copper);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--slate);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px}
.ph{background:#FFF1DF;border:1px dashed var(--copper);padding:0 6px;border-radius:2px;color:var(--slate)}
.demo{margin:0;background:var(--slate);color:#D9DEE1;text-align:center;font-size:13px;padding:7px 16px}
.kicker{display:flex;align-items:center;gap:10px;font:600 13px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--copper);margin-bottom:18px}
.kicker::before{content:"";width:16px;height:9px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}

/* Header */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;padding:14px clamp(16px,4vw,56px);background:var(--white);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;color:var(--slate)}
.brand-mark{width:44px;height:30px}
.brand-word{font:800 21px/1 var(--f);letter-spacing:.04em}
.brand-word b{font-weight:400;color:var(--copper);margin-left:6px}
#nav{display:flex;align-items:center;gap:26px}
#nav a{text-decoration:none;font-weight:500;font-size:15px}
#nav a:hover{color:var(--copper)}
#nav .nav-urgent{color:var(--copper);font-weight:600}
#nav .nav-cta{background:var(--slate);color:#fff;padding:12px 20px;border-radius:2px}
#nav .nav-cta:hover{background:var(--copper);color:#fff}
.menu-btn{display:none;background:none;border:1.5px solid var(--slate);border-radius:2px;padding:9px 14px;font:600 15px var(--f);color:var(--slate);cursor:pointer}
@media(max-width:999px){
  .menu-btn{display:block}
  #nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--white);border-bottom:1px solid var(--line);padding:6px 16px 18px}
  #nav a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:17px}
  #nav .nav-cta{margin-top:14px;text-align:center;border:0}
  .top.open #nav{display:flex}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:2px;text-decoration:none;font:600 16px/1 var(--f);border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-copper{background:var(--copper);color:#fff}
.btn-copper:hover{background:#86431A}
.btn-ghost{border-color:var(--slate);color:var(--slate)}
.btn-ghost:hover{background:var(--slate);color:#fff}

/* Hero mit Hausgiebel */
.hero{display:grid;gap:56px;padding:clamp(48px,7vw,104px) clamp(16px,4vw,56px) clamp(48px,6vw,88px);max-width:1440px;margin:0 auto;align-items:end}
@media(min-width:1000px){.hero{grid-template-columns:1fr 1fr;gap:80px}}
.hero h1{font-size:clamp(44px,5.3vw,84px);line-height:.98;letter-spacing:-.045em;max-width:12ch}
.lead{margin-top:24px;font-size:19px;color:var(--stone);max-width:44ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-house{position:relative;margin:24px 24px 0;aspect-ratio:5/4}
.hero-house img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:polygon(50% 0,100% 30%,100% 100%,0 100%,0 30%)}
.ridge{position:absolute;top:-20px;left:-24px;width:calc(100% + 48px);height:calc(30% + 16px);overflow:visible}

/* Eckdaten-Streifen mit Schindeln */
.strip{background:var(--slate);color:#E6EAEC;background-image:radial-gradient(circle at 50% 0,transparent 15px,rgba(255,255,255,.04) 16px,transparent 17px);background-size:34px 18px}
.strip dl{margin:0 auto;max-width:1440px;padding:26px clamp(16px,4vw,56px);display:grid;gap:18px 40px}
@media(min-width:800px){.strip dl{grid-template-columns:2fr 1.4fr 1fr}}
.strip dt{font:600 12px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--copper-l);margin-bottom:8px}
.strip dd{margin:0;font-weight:500}

/* Abschnitte */
.section{padding:clamp(64px,8vw,120px) clamp(16px,4vw,56px);max-width:1440px;margin:0 auto}
.sec-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head h2{margin-bottom:12px}

/* Leistungen */
.svc{display:grid;gap:20px}
@media(min-width:900px){.svc{grid-template-columns:1fr 1fr}}
.svc a{text-decoration:none;background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .2s,transform .3s}
.svc a:hover{border-color:var(--slate);transform:translateY(-3px)}
.svc-big img{width:100%;aspect-ratio:16/9;object-fit:cover}
.svc-body,.svc-small{padding:28px;display:grid;gap:10px;align-content:start}
.svc-n{font:600 13px/1 var(--f);letter-spacing:.14em;color:var(--copper)}
.svc b{font:700 clamp(22px,2vw,28px)/1.15 var(--f);letter-spacing:-.02em}
.svc span:not(.svc-n):not(.svc-body){color:var(--stone)}
.svc i{font-style:normal;font-weight:600;margin-top:6px}
.svc-small{position:relative;padding-left:96px!important}
.svc-small::before{content:"";position:absolute;left:28px;top:30px;width:44px;height:30px;background:var(--sky);clip-path:polygon(50% 0,100% 100%,0 100%)}

/* Dach-Check */
.check-sec{background:var(--sky);padding:clamp(64px,8vw,112px) clamp(16px,4vw,56px)}
.check{max-width:1328px;margin:0 auto;display:grid;gap:40px;align-items:center}
@media(min-width:1000px){.check{grid-template-columns:1fr 1fr;gap:80px}}
.check-form h2{margin-bottom:12px}
#check{margin-top:30px;display:grid;gap:26px}
fieldset{border:0;padding:0;margin:0}
legend{font:600 13px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;padding:0}
.seg{display:flex}
.seg label{position:relative;flex:1}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:50px;border:2px solid var(--slate);font-weight:600;background:var(--white)}
.seg label+label span{border-left:0}
.seg input:checked+span{background:var(--slate);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--copper);outline-offset:2px}
.range label{display:block;font-weight:600;margin-bottom:10px}
.range output{color:var(--copper)}
.range input{width:100%;accent-color:var(--copper);height:28px}
.checks{display:grid;gap:10px}
.checks label{display:flex;align-items:center;gap:12px;background:var(--white);padding:12px 14px;border:1px solid #C9D1D5;cursor:pointer;min-height:48px}
.checks input{width:20px;height:20px;accent-color:var(--copper);flex:none}
.only-flach{display:none}
.is-flach .only-flach{display:inline}.is-flach .only-steil{display:none}
.check-out{background:var(--white);padding:clamp(24px,3vw,40px);display:grid;gap:14px;border-top:6px solid var(--lvl,#5F8B5F)}
.house{width:100%;max-width:380px;height:auto;margin:0 auto 6px}
.h-roof{fill:var(--slate);transition:d .6s cubic-bezier(.6,0,.2,1)}
.h-body{fill:#E8E4DC}.h-door{fill:#8A6E58}.h-win{fill:var(--sky)}
.h-drops path{stroke:#3B77B5;stroke-width:5;stroke-linecap:round;opacity:0}
.check-out.lvl-red .h-drops path{opacity:1;animation:drip 1.1s ease-in infinite}
.check-out.lvl-red .h-drops path:nth-child(2){animation-delay:.3s}.check-out.lvl-red .h-drops path:nth-child(3){animation-delay:.6s}
@keyframes drip{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(18px);opacity:0}}
.lvl{display:flex;align-items:center;gap:10px;font:800 26px/1.1 var(--f);letter-spacing:-.02em}
.lvl-dot{width:16px;height:16px;border-radius:50%;background:var(--lvl,#5F8B5F);flex:none}
.check-out .btn{justify-self:start}
.tiny{font-size:13px;color:var(--stone)}

/* Ablauf als Dachlatten */
.laths{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.laths li{display:grid;grid-template-columns:72px 200px 1fr;align-items:center;gap:20px;background:var(--white);border-left:8px solid #B98B5E;padding:20px 24px;color:var(--stone)}
.laths li:nth-child(2){margin-left:4%}.laths li:nth-child(3){margin-left:8%}.laths li:nth-child(4){margin-left:12%}
.laths span{font:800 30px/1 var(--f);color:var(--copper)}
.laths b{font:700 21px/1.2 var(--f);color:var(--slate)}
@media(max-width:760px){.laths li{grid-template-columns:52px 1fr;gap:6px 14px;margin-left:0!important}.laths p{grid-column:2}.laths span{font-size:24px}}
.geg{margin-top:36px;max-width:900px;padding:20px 24px;background:#FFF6EA;border:1px solid #EBCFAE;color:var(--slate)}

/* Sturm */
.storm{background:var(--slate);color:#E6EAEC;background-image:repeating-linear-gradient(-55deg,transparent 0 22px,rgba(255,255,255,.025) 22px 44px)}
.storm-inner{max-width:1440px;margin:0 auto;padding:clamp(64px,8vw,104px) clamp(16px,4vw,56px);display:grid;gap:40px}
@media(min-width:1000px){.storm-inner{grid-template-columns:.9fr 1.1fr;gap:80px}}
.storm .kicker{color:var(--copper-l)}
.storm h2{color:#fff}
.storm-phone{margin-top:24px;font:800 30px/1.2 var(--f)}
.muted-l{color:#AEB8BF;margin-top:8px}
.storm-list{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:2px}
.storm-list li{counter-increment:s;position:relative;padding:18px 18px 18px 64px;background:var(--slate-2);color:#D9DEE1}
.storm-list li::before{content:counter(s);position:absolute;left:18px;top:16px;width:30px;height:30px;display:grid;place-items:center;background:var(--copper-l);color:var(--slate);font-weight:800;border-radius:50%}
.storm-list b{color:#fff}

/* Projekte */
.proj{display:grid;gap:20px}
@media(min-width:900px){.proj{grid-template-columns:repeat(3,1fr)}}
.proj figure{margin:0;background:var(--white)}
.proj img{width:100%;aspect-ratio:4/3;object-fit:cover}
.proj figcaption{padding:16px 18px;color:var(--stone);font-size:15px;display:grid;gap:2px}
.proj b{color:var(--slate);font-size:18px}

/* FAQ */
.faq-sec{display:grid;gap:40px}
@media(min-width:1000px){.faq-sec{grid-template-columns:.8fr 1.2fr;gap:80px}}
.quote{margin:36px 0 0;padding:24px 0 0;border-top:3px solid var(--copper);font:500 22px/1.4 var(--f)}
.quote cite{display:block;margin-top:12px;font-style:normal;font-size:14px;color:var(--stone)}
.faq details{border-bottom:1px solid var(--line);background:var(--white);margin-bottom:8px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:600;font-size:18px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--copper);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:20px;color:var(--stone)}

/* Abschluss */
.final{position:relative;max-width:1440px;margin:0 auto;padding:clamp(80px,10vw,140px) clamp(16px,4vw,56px) clamp(64px,8vw,104px);text-align:center;background:var(--white);clip-path:polygon(50% 0,100% 18%,100% 100%,0 100%,0 18%)}
.final h2{font-size:clamp(38px,5vw,72px)}
.final p{margin:18px auto 0;color:var(--stone);max-width:46ch;font-size:18px}
.final-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;margin-top:30px;color:var(--stone)}

/* Footer */
.foot{background:var(--slate);color:#AEB8BF;padding:44px clamp(16px,4vw,56px) 110px;display:grid;gap:22px;font-size:15px}
.foot .brand-word{color:#fff}
.foot p{margin-top:8px}
.foot nav{display:flex;gap:20px}
@media(min-width:1000px){.foot{grid-template-columns:1.3fr 1fr auto;padding-bottom:44px}}
.foot .ph{color:var(--slate)}

/* Mobile-CTA */
.m-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:flex;justify-content:center;align-items:center;min-height:54px;background:var(--copper);color:#fff;text-decoration:none;font-weight:600;border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
@media(min-width:1000px){.m-cta{display:none}}

/* Bewegung */
@media (prefers-reduced-motion:no-preference){
  .hero-text>*{animation:up .8s cubic-bezier(.2,.8,.2,1) both}
  .hero-text>:nth-child(2){animation-delay:.08s}.hero-text>:nth-child(3){animation-delay:.16s}.hero-text>:nth-child(4){animation-delay:.24s}
  .hero-house img{animation:rise 1.2s cubic-bezier(.7,0,.2,1) .1s both}
  .ridge{animation:fade .8s ease-out 1s both}
  @keyframes fade{from{opacity:0;transform:translateY(-10px)}}
  @keyframes up{from{opacity:0;transform:translateY(22px)}}
  @keyframes rise{from{clip-path:polygon(50% 100%,100% 100%,100% 100%,0 100%,0 100%)}}
  @keyframes draw{from{stroke-dashoffset:140}}
  .js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--d,0ms),transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
  .js .rv.in{opacity:1;transform:none}
}

/* Unterseiten */
.page-anfrage .wizard__panel{border-radius:2px;border-top:6px solid var(--copper)}
.page-anfrage .progress li[data-state="done"]::before,.page-anfrage .progress li[data-state="current"]::before{background:var(--copper)}