/* ============================================================
   Prostruktion — Subunternehmer Landing Page  (v2, hell)
   ============================================================ */

:root{
  --yellow:#FEC919;
  --yellow-deep:#E5B200;
  --yellow-soft:#FFF6D9;
  --ink:#282826;
  --ink-2:#4A4842;
  --grey:#7A776F;
  --line:#E2DFD6;
  --paper:#FAF9F5;
  --paper-2:#F1EEE5;
  --white:#fff;
  --night:#1C1B19;
  --ok:#2E9E5B;
  --bad:#D33A28;
  --shell:1180px;
  --font:Montserrat,"Segoe UI",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);font-weight:600;font-size:17px;line-height:1.6;
  color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
.shell{max-width:var(--shell);margin:0 auto;padding:0 28px}

h1,h2,h3{font-weight:900;letter-spacing:-.02em;line-height:1.06}
h1{font-size:clamp(36px,4.3vw,56px)}
h2{font-size:clamp(30px,3.4vw,44px)}
h3{font-size:22px;letter-spacing:-.01em}
.kicker{font-size:13px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.kicker--y{color:var(--yellow-deep)}
.lead{font-size:clamp(17px,1.9vw,20px);line-height:1.6;color:var(--ink-2);max-width:60ch}
.rule{width:110px;height:8px;background:var(--yellow);margin:22px 0}
.center{text-align:center}
.center .rule,.center .lead{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--yellow);color:var(--ink);font-family:var(--font);font-weight:900;
  font-size:16px;border:0;padding:18px 30px;cursor:pointer;text-decoration:none;
  transition:background .15s,transform .15s,box-shadow .15s;
}
.btn:hover{background:var(--yellow-deep)}
.btn:active{transform:translateY(1px)}
.btn--lg{font-size:18px;padding:22px 38px}
.btn--ghost{background:transparent;box-shadow:inset 0 0 0 3px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--white)}
.btn--soft{background:var(--ink);color:var(--white)}
.btn--soft:hover{background:#000}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.link{background:none;border:0;font:inherit;font-weight:900;color:var(--ink-2);cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;padding:0}
.link:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ---------- Scroll reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}

/* ============================================================
   Header
   ============================================================ */
.hdr{position:sticky;top:0;z-index:40;background:rgba(250,249,245,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr .in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 28px;max-width:var(--shell);margin:0 auto}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:38px;height:38px}
.brand b{font-size:21px;font-weight:900}
.brand b i{font-style:normal;color:var(--yellow-deep)}
.hdr .btn{padding:13px 22px;font-size:15px}
@media(max-width:640px){
  .hdr .in{padding:12px 16px}
  .brand{gap:10px}
  .brand img{width:32px;height:32px}
  .brand b{font-size:17px}
  .hdr .btn{padding:10px 14px;font-size:13px;white-space:nowrap}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding:80px 0 70px;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.hero h1{margin-top:16px;max-width:21ch}
.hero .lead{margin-top:6px}
.hero .cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px;align-items:center}
.hero .note{font-size:14px;color:var(--grey);margin-top:16px}
@media(max-width:900px){
  .hero{padding:56px 0 48px}
  .hero .grid{grid-template-columns:1fr;gap:36px}
}

/* animated house drawing */
.haus{position:relative}
.haus svg{width:100%;height:auto}
.haus .st{fill:none;stroke:var(--ink-2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.haus .st--thin{stroke:#B9B5AA;stroke-width:2}
.haus .box{fill:var(--white);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.haus .kk{fill:none;stroke:var(--yellow-deep);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.haus .bus{fill:none;stroke:#3A8FD6;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.haus .ht{fill:none;stroke:#E8442E;stroke-width:3.5;stroke-linecap:round}
.haus .ct{fill:none;stroke:#2F8FD4;stroke-width:3.5;stroke-linecap:round}
.haus .y{fill:var(--yellow)}
.haus text{font-family:var(--font);font-weight:900;font-size:11px;letter-spacing:.14em;fill:var(--grey)}
.haus .drw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s var(--ease) forwards}
.haus .pop{opacity:0;transform-origin:center;transform-box:fill-box;animation:pop .5s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* ============================================================
   Sektionen
   ============================================================ */
.sec{padding:86px 0}
.sec--alt{background:var(--paper-2)}
.sec--dark{background:var(--night);color:var(--white)}
.sec--dark h2{color:var(--white)}
.sec--dark .kicker{color:var(--yellow)}
.sec--dark .lead{color:#C9C6BE}
.sec__head{max-width:72ch}
.sec__head .rule{margin:20px 0 22px}
@media(max-width:640px){ .sec{padding:58px 0} }

/* ---------- Gewerke ---------- */
.gewerke{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.gw{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.gw:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(40,40,38,.35)}
.gw .media{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden}
.gw .media video{width:100%;height:100%;object-fit:cover}
.gw .media .soon{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  background:linear-gradient(160deg,#2A2926,#151513);color:#C9C6BE}
.gw .media .soon b{display:block;font-size:13px;letter-spacing:.24em;color:var(--yellow);margin-bottom:8px}
.gw .media .soon span{font-size:14px;font-weight:700}
.gw .body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.gw .body .no{font-size:12px;font-weight:900;letter-spacing:.28em;color:var(--yellow-deep)}
.gw h3{margin:8px 0 10px;font-size:24px}
.gw p{font-size:15px;color:var(--ink-2);line-height:1.55}
.gw .preis{margin-top:18px;padding:14px 16px;background:var(--yellow-soft);border-left:5px solid var(--yellow);
  font-size:14px;font-weight:700;color:var(--ink-2)}
.gw .preis b{display:block;font-size:19px;font-weight:900;color:var(--ink);margin-top:2px}
.gw .docs{margin-top:20px;font-size:14px}
.gw .docs h4{font-size:12px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:10px}
.gw .docs li{list-style:none;display:flex;gap:10px;align-items:flex-start;padding:5px 0;color:var(--ink-2);font-weight:600}
.gw .docs li svg{flex:none;width:18px;height:18px;margin-top:3px}
.gw .act{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.gw .act .btn{width:100%}
.gw .act .link{font-size:14px;align-self:center}
@media(max-width:980px){ .gewerke{grid-template-columns:1fr} }

/* ---------- Zwei Wege ---------- */
.wege{margin-top:40px;background:var(--white);border:1px solid var(--line);padding:30px 22px 10px}
.wege svg{width:100%;height:auto}
.wege .nd{fill:var(--white);stroke:var(--ink-2);stroke-width:3}
.wege .nd--me{fill:var(--yellow-soft);stroke:var(--yellow-deep)}
.wege .nd--gu{fill:var(--ink);stroke:var(--ink)}
.wege .pt{fill:none;stroke:var(--ink-2);stroke-width:4;stroke-linecap:round}
.wege .pt--1{stroke:var(--yellow-deep)}
.wege text{font-family:var(--font);font-weight:900;fill:var(--ink);font-size:15px;letter-spacing:.06em}
.wege text.lbl{font-size:12px;letter-spacing:.22em;fill:var(--grey)}
.wege text.lbl--1{fill:var(--yellow-deep)}
.wege text.inv{fill:var(--white)}
.wege .drw{stroke-dasharray:1;stroke-dashoffset:1}
.wege.in .drw{animation:draw 1.3s var(--ease) forwards}
.wege .pop{opacity:0;transform-origin:center;transform-box:fill-box}
.wege.in .pop{animation:pop .5s var(--ease) forwards}
.wege .tri{fill:var(--ink-2)}
.wege .tri--1{fill:var(--yellow-deep)}
.wege-legend{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.wege-legend div{padding:22px 24px;background:var(--white);border:1px solid var(--line);border-top:5px solid var(--ink-2);font-size:15px;color:var(--ink-2)}
.wege-legend div:first-child{border-top-color:var(--yellow)}
.wege-legend b{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.wege-legend div:first-child b{color:var(--yellow-deep)}
@media(max-width:700px){ .wege-legend{grid-template-columns:1fr} }

/* mobile Darstellung der zwei Wege */
.wege-m{display:none;margin-top:36px;gap:16px}
.wm{background:var(--white);border:1px solid var(--line);padding:20px 18px 22px}
.wm b{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-bottom:14px}
.wm:first-child b{color:var(--yellow-deep)}
.wm .nd{display:block;border:3px solid var(--ink-2);padding:12px 14px;font-size:14px;font-weight:900;letter-spacing:.05em;text-align:center}
.wm .nd--me{border-color:var(--yellow-deep);background:var(--yellow-soft)}
.wm .nd--gu{background:var(--ink);border-color:var(--ink);color:var(--white)}
.wm .nd--gu small{display:block;font-size:11px;letter-spacing:.2em;color:var(--yellow);margin-top:4px;font-weight:900}
.wm .dn{width:4px;height:26px;margin:0 auto;background:var(--ink-2);position:relative}
.wm:first-child .dn{background:var(--yellow-deep)}
.wm .dn::after{content:"";position:absolute;left:-6px;bottom:-2px;border:8px solid transparent;border-top-color:var(--ink-2);border-bottom:0}
.wm:first-child .dn::after{border-top-color:var(--yellow-deep)}
@media(max-width:700px){
  .wege{display:none}
  .wege-m{display:grid}
}

/* ---------- Ablauf ---------- */
.ablauf{margin-top:50px;position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.ablauf::before{content:"";position:absolute;left:34px;right:34px;top:34px;height:4px;background:var(--line)}
.ablauf .fill{position:absolute;left:34px;top:34px;height:4px;width:0;background:var(--yellow);
  transition:width 1.4s var(--ease)}
.ablauf.in .fill{width:calc(100% - 68px)}
.ab{position:relative;opacity:0;transform:translateY(18px);transition:.6s var(--ease)}
.ablauf.in .ab{opacity:1;transform:none}
.ablauf.in .ab:nth-child(2){transition-delay:.15s}.ablauf.in .ab:nth-child(3){transition-delay:.35s}
.ablauf.in .ab:nth-child(4){transition-delay:.55s}.ablauf.in .ab:nth-child(5){transition-delay:.75s}.ablauf.in .ab:nth-child(6){transition-delay:.95s}
.ab .n{width:72px;height:72px;display:grid;place-items:center;background:var(--white);
  border:4px solid var(--yellow);font-size:26px;font-weight:900;color:var(--ink);position:relative;z-index:1}
.ab h3{font-size:18px;margin:20px 0 8px;line-height:1.2}
.ab p{font-size:15px;color:var(--ink-2)}
.ab small{display:inline-block;margin-top:10px;font-size:12px;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;color:var(--yellow-deep)}
@media(max-width:1000px){
  .ablauf{grid-template-columns:1fr;gap:28px}
  .ablauf::before,.ablauf .fill{left:34px;right:auto;top:34px;bottom:34px;width:4px;height:auto}
  .ablauf.in .fill{width:4px;height:calc(100% - 68px)}
  .ab{display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:start}
  .ab h3{margin-top:14px}
  .ab .txt{grid-column:2}
}

/* ---------- Bottom CTA ---------- */
.ctas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.ct{background:#262522;border:1px solid #3A3833;padding:28px 26px;display:flex;flex-direction:column;gap:14px;
  transition:border-color .2s,transform .25s var(--ease)}
.ct:hover{border-color:var(--yellow);transform:translateY(-3px)}
.ct b{font-size:12px;letter-spacing:.26em;color:var(--yellow)}
.ct h3{color:var(--white);font-size:22px}
.ct p{font-size:14px;color:#B7B3A9;flex:1}
@media(max-width:820px){ .ctas{grid-template-columns:1fr} }

/* ============================================================
   Footer
   ============================================================ */
.ftr{background:var(--night);color:#C9C6BE;padding:44px 0 34px;font-size:14px;border-top:1px solid #3A3833}
.ftr .in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.ftr b{color:var(--white);font-size:18px;display:block;margin-bottom:8px}
.ftr a{color:#C9C6BE;text-decoration:underline;text-underline-offset:3px}
.ftr a:hover{color:var(--yellow)}
.ftr nav{display:flex;gap:20px;flex-wrap:wrap}
.ftr .rights{margin-top:28px;padding-top:18px;border-top:1px solid #3A3833;font-size:12px;color:#8A867E}

/* ============================================================
   Modal + Wizard
   ============================================================ */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;
  padding:24px 16px;background:rgba(28,27,25,.72);backdrop-filter:blur(4px);overflow-y:auto}
.modal.on{display:flex}
.dlg{width:100%;max-width:760px;background:var(--white);margin:auto;position:relative;
  animation:dlg .35s var(--ease)}
@keyframes dlg{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.dlg__head{padding:26px 34px 0}
.dlg__head .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dlg__head .kicker{font-size:12px}
.dlg__head h2{font-size:26px;margin-top:6px}
.dlg__close{background:none;border:2px solid var(--line);width:42px;height:42px;cursor:pointer;
  display:grid;place-items:center;flex:none}
.dlg__close:hover{border-color:var(--ink)}
.prog{margin-top:22px}
.prog .meta{display:flex;justify-content:space-between;font-size:13px;font-weight:900;letter-spacing:.06em;color:var(--grey)}
.prog .meta span:last-child{color:var(--ink)}
.prog .bar{height:8px;background:var(--paper-2);margin-top:8px;overflow:hidden}
.prog .bar i{display:block;height:100%;width:0;background:var(--yellow);transition:width .5s var(--ease)}
.dlg__body{padding:26px 34px 30px}
.dlg__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:18px 34px 26px;border-top:1px solid var(--line)}
@media(max-width:600px){
  .modal{padding:0}
  .dlg{min-height:100%;margin:0}
  .dlg__head,.dlg__body,.dlg__foot{padding-left:20px;padding-right:20px}
  .dlg__foot .btn{padding:14px 18px;font-size:15px}
}

.wstep{display:none;animation:step .35s var(--ease)}
.wstep.on{display:block}
@keyframes step{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.wstep .intro{font-size:15px;color:var(--grey);margin-bottom:22px;line-height:1.5}

.field{margin-bottom:20px}
.field > label,.qlabel{display:block;font-weight:900;font-size:15px;margin-bottom:9px}
.qhint{font-weight:600;font-size:13px;color:var(--grey);margin:-3px 0 10px}
.req{color:var(--bad)}
input[type=text],input[type=email],input[type=tel],input[type=number],textarea{
  width:100%;font-family:var(--font);font-weight:600;font-size:16px;color:var(--ink);
  background:var(--paper);border:2px solid var(--line);padding:14px 15px}
input:focus,textarea:focus{border-color:var(--ink);background:var(--white);outline:0}
input[aria-invalid=true]{border-color:var(--bad);background:#FDF3F1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){ .grid2{grid-template-columns:1fr} }

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips label{display:inline-flex;align-items:center;cursor:pointer;border:2px solid var(--line);
  background:var(--paper);padding:12px 16px;font-size:14px;font-weight:700;transition:.12s}
.chips label:hover{border-color:var(--ink-2)}
.chips input:checked + label{border-color:var(--ink);background:var(--yellow);font-weight:900}
.chips input:focus-visible + label{outline:3px solid var(--ink);outline-offset:3px}
.chips.bad label{border-color:var(--bad)}

/* Gewerk-Auswahl im Schritt 0 */
.gwpick{display:grid;gap:12px}
.gwpick input{position:absolute;opacity:0;width:0;height:0}
.gwpick label{display:flex;gap:16px;align-items:center;padding:18px 20px;border:2px solid var(--line);
  background:var(--paper);cursor:pointer;transition:.12s}
.gwpick label:hover{border-color:var(--ink-2)}
.gwpick input:checked + label{border-color:var(--ink);background:var(--yellow-soft)}
.gwpick label b{display:block;font-size:17px;font-weight:900}
.gwpick label span{display:block;font-size:13px;color:var(--grey);margin-top:2px}
.gwpick .ico{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--yellow);font-weight:900}
.gwpick.bad label{border-color:var(--bad)}

.check{display:flex;gap:14px;align-items:flex-start;padding:16px;border:2px solid var(--line);
  background:var(--paper);margin-bottom:12px;cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--ink)}
.check span{font-size:14px;font-weight:600;line-height:1.5}
.check.on{border-color:var(--ink);background:var(--yellow-soft)}
.check.bad{border-color:var(--bad)}

.docnote{background:var(--yellow-soft);border-left:5px solid var(--yellow);padding:16px 18px;font-size:14px;line-height:1.55;margin-bottom:20px}
.docs{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.doc{display:flex;align-items:center;gap:14px;border:2px dashed var(--line);background:var(--paper);padding:14px 16px}
.doc[hidden]{display:none}
.doc.filled{border-style:solid;border-color:var(--ok);background:#F1FAF4}
.doc.err{border-style:solid;border-color:var(--bad);background:#FDF3F1}
.doc .dt{flex:1;min-width:0}
.doc .dt b{display:block;font-size:14px;font-weight:900;overflow-wrap:anywhere}
.doc .dt small{display:block;font-size:12px;color:var(--grey);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc input[type=file]{position:absolute;opacity:0;width:0;height:0}
.doc .pick{border:2px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--font);
  font-weight:900;font-size:13px;padding:10px 16px;cursor:pointer;flex:none}
.doc .pick:hover{background:var(--ink);color:var(--white)}
.doc .bar{flex:none;width:56px;height:6px;background:var(--line);overflow:hidden}
.doc .bar i{display:block;height:100%;width:0;background:var(--yellow);transition:width .2s}
@media(max-width:520px){ .doc{flex-wrap:wrap} .doc .bar{display:none} .doc .pick{width:100%;text-align:center} }

.errbox{border:2px solid var(--bad);background:#FDF3F1;padding:14px 16px;margin-bottom:18px;font-size:14px;font-weight:700;color:#8E2418}
.errbox[hidden]{display:none}

.done{text-align:center;padding:24px 8px 8px}
.done .ok{width:70px;height:70px;background:var(--yellow);display:grid;place-items:center;margin:0 auto 22px;
  animation:pop .5s var(--ease)}
.done h2{font-size:28px;margin-bottom:12px}
.done p{color:var(--ink-2);max-width:48ch;margin:0 auto}
.done .ref{margin-top:18px;font-size:14px;color:var(--grey)}
.done .ref b{color:var(--ink);font-size:16px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .haus .drw,.wege .drw{stroke-dashoffset:0}
  .haus .pop,.wege .pop{opacity:1}
  .ablauf .ab{opacity:1;transform:none}
  .ablauf .fill{width:calc(100% - 68px)}
}