/* STLWSK Studio — gemeinsame Regeln für Unterseiten.
   Tokens, Reset, Navigation, Buttons, Footer und WhatsApp-Button sind
   wortgetreu aus stlwsk-website/index.html übernommen. */
:root{--ink:#0d0d0d;--paper:#f2ead4;--violet:#5630f5;--lime:#c5ff16;--pink:#ff42ad;--sky:#9fc8ea;--white:#fff;--line:2px solid var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--ink);font-family:Arial,sans-serif}
a{color:inherit}
.mono{font:700 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase}
.display{font-family:Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:-.035em;line-height:.82;margin:0}
.nav{height:72px;background:#fff;border-bottom:var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,84px);position:relative;z-index:5}
.logo{font:900 25px/1 Arial,sans-serif}
.logo a{text-decoration:none}
.navlinks{display:flex;gap:30px;align-items:center;font-weight:900;font-size:12px}
.navcta{background:var(--ink);color:#fff;padding:14px 20px;box-shadow:5px 5px 0 var(--lime);text-decoration:none}
.button{display:inline-block;background:var(--lime);border:var(--line);padding:17px 23px;text-decoration:none;font-weight:1000;box-shadow:6px 6px 0 var(--ink);text-transform:uppercase}
.button.secondary{background:transparent;color:#fff;border-color:#fff;box-shadow:none}
.text-link{font-weight:900;text-transform:uppercase;text-decoration-thickness:2px;text-underline-offset:5px}
.mobile-nav{display:none}
.mobile-nav summary{list-style:none;cursor:pointer;background:var(--ink);color:#fff;border:2px solid var(--ink);padding:11px 14px;font-weight:900}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-panel{position:absolute;right:18px;top:58px;background:#fff;border:2px solid var(--ink);min-width:230px;padding:10px;box-shadow:6px 6px 0 var(--lime);z-index:6}
.mobile-panel a{display:block;padding:13px 10px;text-decoration:none;font-weight:900;border-bottom:1px solid #ddd}
.mobile-panel a:last-child{border:0}
@media(max-width:900px){.mobile-nav{display:block}.navlinks{display:none}}
.footer{background:var(--ink);color:#fff;padding:55px clamp(24px,7vw,120px)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:55px}
.footer h3{font:900 30px Impact,sans-serif;margin:0 0 12px}
.footer p,.footer a{color:#c9c9c9;line-height:1.6}
.footer strong{color:#fff}
.footer-bottom{border-top:1px solid #333;margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;font:11px ui-monospace,monospace;color:#888;text-transform:uppercase}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}}
.whatsapp-float{position:fixed;right:clamp(18px,2.4vw,38px);bottom:clamp(18px,2.4vw,38px);z-index:50;height:60px;display:flex;align-items:center;gap:10px;padding:0 18px 0 13px;background:var(--lime);color:var(--ink);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--pink);text-decoration:none;font:900 15px/1 Arial,sans-serif;letter-spacing:.04em;transform:rotate(2deg);transition:transform .18s ease,box-shadow .18s ease}
.whatsapp-float:hover{transform:translate(-3px,-3px) rotate(-2deg);box-shadow:10px 10px 0 var(--pink)}
.whatsapp-float:focus-visible{outline:4px solid #fff;outline-offset:4px}
.whatsapp-float svg{width:36px;height:36px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.55;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){.whatsapp-float{height:54px;right:16px;bottom:16px;padding:0 14px 0 10px;gap:7px;box-shadow:5px 5px 0 var(--pink);font-size:13px}.whatsapp-float svg{width:33px;height:33px}}

/* ---- Unterseiten-Kopf ---- */
.sub-head{background-color:var(--paper);background-image:radial-gradient(rgba(13,13,13,.08) .6px,transparent .7px);background-size:6px 6px;padding:clamp(52px,6vw,96px) clamp(24px,7vw,120px) clamp(46px,5vw,80px);border-bottom:var(--line)}
.sub-eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.sub-eyebrow:after{content:"";height:2px;background:var(--ink);width:120px}
.sub-title{font-size:clamp(52px,7.4vw,124px);max-width:1050px}
.sub-title mark{background:var(--lime);color:var(--ink);padding:0 .05em}
.sub-lead{font-size:clamp(17px,1.4vw,23px);line-height:1.45;max-width:640px;margin:26px 0 0;border-left:5px solid var(--violet);padding-left:20px}
.back-link{display:inline-block;margin-top:30px;font-weight:900;text-transform:uppercase;font-size:13px;text-underline-offset:5px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:4px solid var(--violet);outline-offset:3px}

/* ---- Rechtstexte ---- */
.legal{background:#fff;padding:clamp(60px,7vw,110px) clamp(24px,7vw,120px) clamp(80px,9vw,130px)}
.legal-wrap{max-width:760px}
.legal-wrap>section+section{margin-top:52px}
.legal h2{font:900 clamp(21px,2vw,30px)/1.15 Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 16px;padding-top:18px;border-top:2px solid var(--ink)}
.legal h3{font:900 16px/1.3 Arial,sans-serif;text-transform:uppercase;letter-spacing:.02em;margin:26px 0 8px}
.legal p,.legal li{font-size:17px;line-height:1.68;text-wrap:pretty}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:7px}
.legal address{font-style:normal;font-size:17px;line-height:1.68}
.legal a{text-decoration-thickness:2px;text-underline-offset:4px}
.legal .toc{background:var(--paper);border:var(--line);padding:22px 24px;margin-bottom:48px}
.legal .toc p{font:700 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px}
.legal .toc ol{margin:0;padding-left:20px;font-size:16px;line-height:1.7}
.legal .meta-note{font:700 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:#fff;padding:14px 16px;display:inline-block}
.todo{border:3px solid var(--ink);background:var(--lime);padding:22px 24px;margin:0 0 42px}
.todo p{margin:0 0 10px}
.todo p:last-child{margin:0}
.todo strong{font:900 15px/1.25 Arial,sans-serif;text-transform:uppercase;display:block;margin-bottom:10px}
.todo code{font:700 13px ui-monospace,monospace;background:#fff;border:1px solid var(--ink);padding:1px 5px}

/* ---- Kontaktformular ---- */
.call{background:#fff;padding:clamp(52px,6vw,92px) clamp(24px,7vw,120px) clamp(80px,9vw,130px)}
.call-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:clamp(32px,4vw,70px);align-items:start}
.progress{display:flex;gap:2px;border:var(--line);background:var(--ink);margin-bottom:34px}
.progress span{flex:1;background:#fff;color:var(--ink);padding:13px 14px;font:700 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.progress span[data-on]{background:var(--violet);color:#fff}
.progress span[data-done]{background:var(--lime);color:var(--ink)}
.step{display:none}
.step[data-active]{display:block}
.step-kicker{margin-bottom:14px;color:var(--violet)}
.step-title{font:900 clamp(30px,3.6vw,62px)/.92 Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:-.035em;margin:0 0 14px;max-width:760px}
.step-lead{font-size:17px;line-height:1.5;max-width:620px;margin:0 0 30px}
.choice-grid{display:grid;grid-template-columns:1fr;border:var(--line);background:var(--ink);gap:2px}
.choice{background:#fff;border:0;text-align:left;font-family:inherit;color:var(--ink);cursor:pointer;padding:24px 26px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;min-height:118px;width:100%}
.choice:nth-child(2){background:var(--pink)}
.choice:nth-child(3){background:var(--lime)}
.choice small{display:block;font:700 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.choice b{font:900 clamp(21px,2vw,33px)/.98 Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:-.03em;display:block;margin-bottom:9px}
.choice span.desc{font:400 15px/1.4 Arial,sans-serif;display:block;max-width:460px}
.choice i{font:900 34px/1 Impact,sans-serif;font-style:normal}
.choice[aria-pressed="true"]{box-shadow:inset 0 0 0 6px var(--violet)}
.choice:hover{box-shadow:inset 0 0 0 6px var(--ink)}
.picked{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:var(--line);background:var(--paper);padding:14px 16px;margin-bottom:28px}
.picked b{font:900 14px/1.2 Arial,sans-serif;text-transform:uppercase}
.picked button{background:none;border:0;color:var(--ink);font:700 11px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:underline;padding:4px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.wide{grid-column:1/-1}
.field label{font:700 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.field .req{color:var(--violet)}
.field input,.field textarea,.field select{font:400 16px/1.4 Arial,sans-serif;border:var(--line);background:#fff;padding:14px 15px;color:var(--ink);width:100%}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font:400 13px/1.4 Arial,sans-serif;color:#555}
.field[data-invalid] input,.field[data-invalid] textarea,.field[data-invalid] select{border-color:var(--violet);box-shadow:inset 0 0 0 2px var(--violet)}
.field-error{background:var(--pink);color:var(--ink);font:700 12px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;padding:7px 9px}
.consent{grid-column:1/-1;display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;border:var(--line);background:var(--paper);padding:18px}
.consent input{width:26px;height:26px;accent-color:var(--violet);margin:0}
.consent label{font:400 15px/1.5 Arial,sans-serif;text-transform:none;letter-spacing:0}
.consent .field-error{grid-column:1/-1;margin:4px 0 0}
.consent span{font-size:15px;line-height:1.5}
.step-nav{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:34px}
.ghost{background:transparent;border:var(--line);color:var(--ink);box-shadow:none;font:900 13px/1 Arial,sans-serif;text-transform:uppercase;padding:16px 20px;cursor:pointer}
button.button{font:1000 15px/1 Arial,sans-serif;color:var(--ink);cursor:pointer;letter-spacing:.02em}
button.button[disabled]{opacity:.55;cursor:not-allowed}
.form-status{margin-top:26px}
.form-status:empty{display:none}
.summary-box{border:var(--line);background:var(--paper);padding:20px 22px;margin-bottom:26px}
.summary-box dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:15px;line-height:1.45}
.summary-box dt{font:700 11px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;padding-top:3px}
.summary-box dd{margin:0}
.result{border:3px solid var(--ink);padding:28px 30px}
.result.ok{background:var(--lime);box-shadow:8px 8px 0 var(--ink)}
.result.pending{background:var(--paper);box-shadow:8px 8px 0 var(--pink)}
.result h2{font:900 clamp(26px,2.8vw,44px)/.95 Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:-.03em;margin:12px 0 14px}
.result p{font-size:16px;line-height:1.55;margin:0 0 14px;max-width:620px}
.result .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
.aside-card{border:var(--line);background:var(--paper);padding:26px 24px}
.aside-card+.aside-card{margin-top:22px}
.aside-card h2{font:900 clamp(22px,2vw,32px)/.98 Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:-.03em;margin:12px 0 16px}
.aside-card ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.aside-card li{font-size:16px;line-height:1.4}
.aside-card li b{display:block;font:700 11px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.aside-card.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.aside-card.dark .mono{color:var(--lime)}
.aside-card.violet{background:var(--violet);color:#fff;border-color:var(--violet)}
@media(max-width:900px){
  .call-grid{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .progress span{font-size:10px;padding:11px 9px;letter-spacing:.08em}
  .step-nav .button,.step-nav .ghost{width:100%;text-align:center}
  .choice{grid-template-columns:1fr;min-height:0}
  .choice i{display:none}
}
@media(max-width:600px){
  .sub-title{font-size:clamp(34px,10.5vw,56px);line-height:.88}
  .legal h2{hyphens:auto}
  .step-title{font-size:clamp(27px,8.5vw,40px)}
}

/* Impressum: kurze Mono-Labels über den Textblöcken */
.legal h2.label{font:700 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:#4a4a4a;border-top:0;padding-top:0;margin:0 0 10px;text-shadow:none}
.legal-wrap>section.block+section.block{margin-top:34px}
.legal .divider{border:0;border-top:2px solid var(--ink);margin:44px 0}

/* Rechtstexte: Kurzfassung oben + numerierte Mono-Labels */
.legal .summary-lead{border:2px solid var(--ink);border-left:8px solid var(--lime);background:#fff;padding:24px 26px;margin:0 0 46px}
.legal .summary-lead b{display:block;font:900 17px/1.3 Arial,sans-serif;text-transform:uppercase;margin-bottom:12px}
.legal .summary-lead p{margin:0}