/* ═══════════════════════════════════════════════════════════════════════
   SKS Steinke — Stylesheet für /, /fertigung, /b2c
   Leitbild: das Zeichnungsblatt. Eine Schrift (Archivo, wie im Logo),
   Anthrazit und Technikblau aus dem Markenhandbuch, Haarlinien statt
   Schatten. Technikblau steht nur dort, wo man klicken kann oder wo ein
   Maß steht.
   Die Namen --ink-2, --ink-3 und --signal benutzen auch die Skripte des
   Preisrechners — nicht umbenennen.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;   /* immer hell, auch bei dunkel eingestelltem Gerät */
  --ground:#F3F5F7;        /* Papier, leicht zum Blau hin */
  --surface:#FFFFFF;       /* Blatt */
  --surface-2:#E8ECF0;
  --ink:#1E2A33;           /* Anthrazit laut Markenhandbuch */
  --ink-2:#4A5763;
  --ink-3:#6B7A87;         /* Grau laut Markenhandbuch */
  --line:#D2D9DF;
  --line-2:#A9B4BE;
  --frame:#1E2A33;         /* Rahmenlinie, kräftig */
  --accent:#0E6FD1;        /* Technikblau */
  --accent-2:#0A58A8;
  --accent-tint:#E4EEFA;
  --signal:#B44F16; --signal-tint:#FBEDE4;
  --gut:#1D6B4C;
  --knopf:#1E2A33; --knopf-text:#FFFFFF;
  --wrap:1200px;
}
/* ── Grundlagen ─────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;font-weight:400;font-stretch:100%;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
h1,h2,h3,h4{margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(38px,4.9vw,66px);font-weight:640;font-stretch:106%;
  line-height:.98;letter-spacing:-.028em}
h2{font-size:clamp(28px,3.3vw,42px);font-weight:620;font-stretch:108%;
  line-height:1.06;letter-spacing:-.02em}
h3{font-size:20px;font-weight:620;font-stretch:104%;line-height:1.25;letter-spacing:-.008em}
h4{font-size:17px;font-weight:620;font-stretch:104%;line-height:1.3}
p{margin:0;text-wrap:pretty}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-2)}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 16px}}

/* Beschriftung in Normschrift-Art: schmal, Versalien, gesperrt */
.label,.eyebrow{display:block;font-size:12.5px;font-weight:640;font-stretch:80%;
  text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);line-height:1.3}

/* ── Kopf ───────────────────────────────────────────────────────────── */
header.haupt{position:sticky;top:0;z-index:40;background:var(--ground);
  border-bottom:1px solid var(--line)}
header.haupt .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:28px;min-height:76px}
.marke{display:flex;align-items:center;text-decoration:none}
.marke .logo{display:block;width:auto;height:34px}
nav.haupt-nav{display:flex;align-items:center;justify-content:flex-end;gap:30px;font-size:15.5px;font-weight:500}
nav.haupt-nav a{color:var(--ink-2);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav.haupt-nav a:hover{color:var(--ink)}
nav.haupt-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.nav-knopf{color:var(--ink);border:1px solid var(--ink);padding:8px 16px;border-radius:2px;
  font-size:15px;font-weight:600;font-stretch:104%;text-decoration:none;white-space:nowrap}
.nav-knopf:hover{background:var(--ink);color:var(--ground)}
@media (max-width:760px){
  header.haupt{position:static}
  header.haupt .wrap{grid-template-columns:1fr auto;gap:12px 16px;min-height:0;padding-top:14px;padding-bottom:12px}
  .marke .logo{height:30px}
  nav.haupt-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;flex-wrap:wrap;gap:2px 22px;font-size:15px}
  .nav-knopf{grid-column:2;grid-row:1;padding:6px 12px}}

/* ── Knöpfe ─────────────────────────────────────────────────────────── */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 24px;border-radius:2px;border:1px solid var(--knopf);
  font:inherit;font-size:16px;font-weight:600;font-stretch:104%;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap}
.knopf.haupt{background:var(--knopf);color:var(--knopf-text)}
.knopf.haupt:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.knopf.zweit{background:transparent;color:var(--ink)}
.knopf.zweit:hover{border-color:var(--accent);color:var(--accent)}
.knopf[disabled]{opacity:.5;cursor:default}
.textlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-stretch:104%;
  color:var(--ink);text-decoration:none;padding:4px 0;border-bottom:1px solid var(--line-2)}
.textlink:hover{color:var(--accent);border-bottom-color:var(--accent)}
.textlink .pf{transition:transform .15s ease}
.textlink:hover .pf{transform:translateX(3px)}
@media (hover:hover){.knopf{transition:background .15s,border-color .15s,color .15s}
  .knopf:active{transform:translateY(1px)}}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{padding:72px 0 0}
.hero-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.hero .label{margin-bottom:26px}
.hero h1{max-width:15ch}
.nw{white-space:nowrap}
.hero .lead{max-width:34rem;margin-top:28px;font-size:19px;line-height:1.55;color:var(--ink-2)}
.hero .knoepfe{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:40px}
@media (max-width:980px){.hero-raster{grid-template-columns:1fr;gap:48px}
  .hero h1{max-width:16ch}}
@media (max-width:640px){.hero{padding-top:44px}.hero .lead{font-size:18px}}

/* Das Zeichnungsblatt. Alles darin ist SVG und zieht die Farben von hier. */
.blatt{margin:0;background:var(--surface);border:1px solid var(--line)}
.blatt svg{display:block;width:100%;height:auto}
.blatt figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.zg{font-family:"Archivo",system-ui,sans-serif}
.zg .k{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.zg .kf{fill:var(--surface);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.zg .v{fill:none;stroke:var(--ink-2);stroke-width:.9;stroke-dasharray:5 3}
.zg .m{fill:none;stroke:var(--ink-3);stroke-width:.7;stroke-dasharray:16 3 2 3}
.zg .ma,.zg .mh{fill:none;stroke:var(--accent);stroke-width:.8}
.zg .mh{opacity:.75}
.zg .pf{fill:var(--accent)}
.zg .mt{fill:var(--accent);font-size:12.5px;font-weight:600;font-stretch:86%}
.zg .sr{fill:none;stroke:var(--ink-2);stroke-width:.6}
.zg .rahmen{fill:none;stroke:var(--frame);stroke-width:1.4}
.zg .rahmen-a{fill:none;stroke:var(--line-2);stroke-width:.6}
.zg .zone{fill:var(--ink-3);font-size:9.5px;font-weight:600;font-stretch:86%;letter-spacing:.04em}
.zg .sf{fill:none;stroke:var(--frame);stroke-width:.8}
.zg .sf-k{fill:var(--ink-3);font-size:8.5px;font-weight:600;font-stretch:80%;letter-spacing:.08em;text-transform:uppercase}
.zg .sf-w{fill:var(--ink);font-size:12.5px;font-weight:560;font-stretch:96%}
.zg .ansicht{fill:var(--ink-3);font-size:10.5px;font-weight:600;font-stretch:84%;letter-spacing:.06em}
/* Aufbau beim Laden: erst die Kanten, dann Mittellinien und Maße */
.zg .sf-hg{fill:var(--surface)}
/* Grundzustand: alles sichtbar. Nur wo Animation erlaubt ist, baut sich
   die Zeichnung auf — läuft sie nicht, bleibt das Blatt trotzdem voll. */
@media (prefers-reduced-motion:no-preference){
  .blatt .zg .k[pathLength]{stroke-dasharray:1;animation:ziehen 1.5s cubic-bezier(.45,.05,.3,1) .15s both}
  .blatt .zg .spaet{animation:erscheinen .6s ease 1.25s both}
  .blatt .zg .spaeter{animation:erscheinen .6s ease 1.65s both}
}
@keyframes ziehen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes erscheinen{from{opacity:0}to{opacity:1}}

/* Kennzahlen als Schriftfeldzeile */
.schriftzeile{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;
  border-top:1.5px solid var(--frame);border-bottom:1px solid var(--line)}
.schriftzeile > div{padding:16px 20px 18px;border-left:1px solid var(--line)}
.schriftzeile > div:first-child{border-left:0;padding-left:0}
.schriftzeile .label{font-size:11px;margin-bottom:6px}
.schriftzeile b{display:block;font-size:17px;font-weight:600;font-stretch:102%;line-height:1.35}
@media (max-width:860px){.schriftzeile{grid-template-columns:1fr 1fr}
  .schriftzeile > div:nth-child(3){border-left:0;padding-left:0}
  .schriftzeile > div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:420px){.schriftzeile{grid-template-columns:1fr}
  .schriftzeile > div{border-left:0;padding-left:0}
  .schriftzeile > div + div{border-top:1px solid var(--line)}}

/* ── Abschnitte ─────────────────────────────────────────────────────── */
.band{padding:112px 0}
.band.flaeche{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kopf{display:grid;grid-template-columns:3fr 9fr;gap:32px;margin-bottom:60px}
.kopf .label{padding-top:12px}
.kopf h2{max-width:20ch}
.kopf p{margin-top:18px;max-width:38rem;font-size:18px;color:var(--ink-2)}
.kopf.schmal{margin-bottom:40px}
@media (max-width:860px){.kopf{grid-template-columns:1fr;gap:14px;margin-bottom:40px}
  .kopf .label{padding-top:0}}
@media (max-width:640px){.band{padding:72px 0}}
.einzug{margin-left:calc(25% + 8px)}
@media (max-width:860px){.einzug{margin-left:0}}

/* Leistungen: drei Spalten, durch Haarlinien getrennt, keine Kästen */
.leistungen{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--frame)}
.leistung{display:flex;flex-direction:column;gap:12px;padding:28px 32px 32px;
  border-left:1px solid var(--line);color:inherit;text-decoration:none}
.leistung:first-child{border-left:0;padding-left:0}
.leistung:last-child{padding-right:0}
.leistung .skizze{height:96px;margin-bottom:10px}
.leistung .skizze svg{height:100%;width:auto;overflow:visible}
.leistung .label{font-size:11.5px}
.leistung p{color:var(--ink-2);font-size:16px;line-height:1.6}
.leistung .weiter{margin-top:auto;padding-top:14px;font-weight:600;font-stretch:104%;color:var(--ink)}
.leistung .weiter .pf{display:inline-block;transition:transform .15s ease}
.leistung:hover h3,.leistung:hover .weiter{color:var(--accent)}
.leistung:hover .weiter .pf{transform:translateX(3px)}
.notiz{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
  font-size:15px;color:var(--ink-3);display:flex;gap:10px 40px;flex-wrap:wrap}
.notiz b{font-weight:600;color:var(--ink-2)}
@media (max-width:900px){.leistungen{grid-template-columns:1fr}
  .leistung{border-left:0;padding:28px 0;border-top:1px solid var(--line)}
  .leistung:first-child{border-top:0}}

/* Ablauf als Kettenmaß: jeder Schritt ein Maß zwischen zwei Hilfslinien,
   die Schrittnummer steht als Maßzahl mittig darüber. */
.kette{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:0;padding:0}
.glied{padding:0 32px 0 0}
.glied:last-child{padding-right:0}
.masslinie{position:relative;height:40px;margin:0 -32px 26px 0;
  border-left:1px solid var(--accent)}
.glied:last-child .masslinie{margin-right:0;border-right:1px solid var(--accent)}
.masslinie::before{content:"";position:absolute;left:0;right:0;top:28px;height:1px;background:var(--accent)}
.masslinie i{position:absolute;top:28px;width:0;height:0;margin-top:-3.5px;
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.masslinie i:first-child{left:0;border-right:11px solid var(--accent)}
.masslinie i:last-child{right:0;border-left:11px solid var(--accent)}
.masslinie .nr{position:absolute;left:50%;top:2px;transform:translateX(-50%);
  font-size:16px;font-weight:640;font-stretch:90%;letter-spacing:.02em;color:var(--accent)}
.glied h3{margin-bottom:8px}
.glied p{color:var(--ink-2);font-size:16px;max-width:34ch}
@media (max-width:860px){.kette{grid-template-columns:1fr;gap:40px}
  .glied{padding:0}
  /* mobil: untereinander wäre eine Maßkette irreführend – nur die Nummer bleibt */
  .masslinie,.glied:last-child .masslinie{height:auto;margin:0 0 8px;border:0}
  .masslinie::before,.masslinie i{display:none}
  .masslinie .nr{position:static;transform:none}}

/* Über mich */
.person{display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:start}
.person blockquote{margin:0}
.person .zitat{font-size:clamp(24px,2.6vw,34px);font-weight:600;font-stretch:102%;
  line-height:1.18;letter-spacing:-.016em;max-width:28ch;text-wrap:balance}
.person .zitat::before{content:"„";color:var(--accent)}
.person .zitat::after{content:"“";color:var(--accent)}
.person p{margin-top:24px;max-width:36rem;color:var(--ink-2);font-size:18px}
.person .name{margin-top:28px;font-size:15px;color:var(--ink-3)}
.person .name b{display:block;font-size:17px;font-weight:620;font-stretch:104%;color:var(--ink)}
@media (max-width:900px){.person{grid-template-columns:1fr;gap:44px}}

/* Datentabelle im Schriftfeld-Stil */
.datenfeld{margin:0;border-top:1.5px solid var(--frame)}
.datenfeld > div{display:grid;grid-template-columns:9.5rem 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.datenfeld dt{font-size:11px;font-weight:640;font-stretch:80%;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);padding-top:3px}
.datenfeld dd{margin:0;font-weight:500}
.datenfeld dd small{display:block;margin-top:2px;font-size:14.5px;color:var(--ink-3);font-weight:400}

/* ── Anfrage ────────────────────────────────────────────────────────── */
.anfrage{display:grid;grid-template-columns:4fr 7fr;gap:72px;align-items:start}
.anfrage .kopf{display:block;margin:0}
.anfrage .kopf .label{padding:0;margin-bottom:18px}
.anfrage .kopf p{font-size:17px}
.anfrage h2{font-size:clamp(28px,2.9vw,38px)}
.anfrage .hinweis{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-3)}
.formular{background:var(--surface);border:1px solid var(--line);border-top:1.5px solid var(--frame);padding:36px}
@media (max-width:960px){.anfrage{grid-template-columns:1fr;gap:36px}}
@media (max-width:640px){.formular{padding:22px 18px}}
.feld{margin-bottom:20px}
.feld label{display:block;margin-bottom:7px;font-size:12px;font-weight:640;font-stretch:82%;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.feld input,.feld textarea,.feld select{width:100%;padding:12px 14px;border:1px solid var(--line-2);
  border-radius:2px;background:var(--ground);color:var(--ink);font:inherit;font-size:16px}
.feld input:hover,.feld textarea:hover,.feld select:hover{border-color:var(--ink-3)}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.feld textarea{min-height:140px;resize:vertical;line-height:1.5}
.feld input[type=file]{padding:10px;background:transparent;border-style:dashed;color:var(--ink-2);font-size:15px}
.feld input[type=file]::file-selector-button{margin-right:14px;padding:8px 14px;border:1px solid var(--ink);
  border-radius:2px;background:transparent;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.feld input[type=file]::file-selector-button:hover{border-color:var(--accent);color:var(--accent)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:560px){.zwei{grid-template-columns:1fr;gap:0}}
.meldung{margin-top:16px;font-size:15px;display:none}
.meldung.an{display:block}
.meldung.gut{color:var(--gut)}
.meldung.warn{color:var(--signal)}
.klein{font-size:14px;line-height:1.55;color:var(--ink-3)}

/* ── Partner ────────────────────────────────────────────────────────── */
.partner-gitter{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--frame)}
.partner-karte{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px 32px 8px 0}
.partner-karte + .partner-karte{border-left:1px solid var(--line);padding-left:32px;padding-right:0}
.partner-plakette{display:flex;align-items:center;justify-content:center;
  width:168px;height:72px;background:#FFFFFF;border:1px solid var(--line)}
.partner-plakette img{display:block;width:auto;height:auto;max-width:136px;max-height:30px;object-fit:contain}
.partner-punkte{list-style:none;margin:0;padding:0;font-size:15.5px;color:var(--ink-2)}
.partner-punkte li{position:relative;padding-left:16px;margin-bottom:5px}
.partner-punkte li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:1px;background:var(--ink-3)}
.partner-karte p{font-size:15.5px;color:var(--ink-2)}
.partner-wege{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.partner-wege a{font-size:14.5px;font-weight:500}
.partner-wege a::after{content:" ↗";font-size:12px}
@media (max-width:860px){.partner-gitter{grid-template-columns:1fr}
  .partner-karte,.partner-karte + .partner-karte{padding:24px 0;border-left:0}
  .partner-karte + .partner-karte{border-top:1px solid var(--line)}}

/* ── Fuß als Schriftfeld ────────────────────────────────────────────── */
footer.fuss{padding:0 0 40px}
.schriftfeld{display:grid;grid-template-columns:1.5fr 1.45fr 1.3fr 1.35fr 1.4fr;
  border:1.5px solid var(--frame);background:var(--surface)}
.schriftfeld > div{padding:20px 22px 22px;border-left:1px solid var(--line);min-width:0}
.schriftfeld > div:first-child{border-left:0}
.schriftfeld .label{font-size:10.5px;margin-bottom:12px}
.schriftfeld ul{list-style:none;margin:0;padding:0;font-size:14.5px;line-height:1.8}
.schriftfeld a{color:var(--ink);text-decoration:none}
.schriftfeld a:hover{color:var(--accent);text-decoration:underline}
.schriftfeld address{font-style:normal;font-size:14.5px;line-height:1.8}
.schriftfeld .logo-fuss{display:block;width:210px;max-width:100%;height:auto}
.schriftfeld .zeile{margin-top:14px;font-size:14.5px;color:var(--ink-2);max-width:30ch}
.schriftfeld .unten{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);
  padding:12px 22px;display:flex;justify-content:space-between;gap:8px 32px;flex-wrap:wrap;
  font-size:13px;color:var(--ink-3)}
@media (max-width:980px){.schriftfeld{grid-template-columns:1fr 1fr 1fr}
  .schriftfeld > div:first-child{grid-column:1/-1;border-bottom:1px solid var(--line)}
  .schriftfeld > div:nth-child(2){border-left:0}
  .schriftfeld > div:nth-child(5){grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}}
@media (max-width:560px){.schriftfeld{grid-template-columns:1fr}
  .schriftfeld > div{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .schriftfeld > div:first-child{border-top:0}}

/* ── Preisrechner ───────────────────────────────────────────────────── */
.rechner-raster{display:grid;grid-template-columns:7fr 4fr;gap:56px;align-items:start}
@media (max-width:960px){.rechner-raster{grid-template-columns:1fr;gap:32px}}
.rechner{background:var(--surface);border:1px solid var(--line);border-top:1.5px solid var(--frame);padding:32px}
@media (max-width:640px){.rechner{padding:20px 16px}}
.dropzone{position:relative;border:1.5px dashed var(--line-2);border-radius:2px;background:var(--ground);
  padding:52px 24px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.dropzone::before{content:"";display:block;width:38px;height:38px;margin:0 auto 16px;
  border:1.5px solid var(--ink-3);border-top-color:transparent;position:relative}
.dropzone::after{content:"";position:absolute;left:50%;top:52px;width:0;height:0;margin-left:-6px;
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--accent)}
.dropzone:hover,.dropzone.aktiv{border-color:var(--accent);background:var(--accent-tint)}
.dropzone strong{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.dropzone span{color:var(--ink-3);font-size:14.5px}
input[type=file]{font:inherit}
.dropzone input[type=file]{display:none}
.steuer{display:grid;grid-template-columns:1fr 1fr 120px;gap:16px;margin-top:22px;align-items:start}
@media (max-width:640px){.steuer{grid-template-columns:1fr 1fr}.steuer > div:nth-child(3){grid-column:1/-1}}
.steuer label{display:block;margin-bottom:7px;font-size:12px;font-weight:640;font-stretch:82%;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.steuer select,.steuer input[type=number]{width:100%;height:46px;padding:0 12px;border:1px solid var(--line-2);
  border-radius:2px;background:var(--ground);color:var(--ink);font:inherit;font-size:16px}
.steuer .eil{grid-column:1/-1;display:flex;gap:10px;align-items:center;margin:4px 0 0;
  font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.steuer .eil input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.fehler{display:none;margin-top:16px;padding:12px 16px;border-left:3px solid var(--signal);
  background:var(--signal-tint);color:var(--signal);font-size:15px}
.fehler.an{display:block}
.ergebnis{display:none;margin-top:22px;border:1px solid var(--line);background:var(--surface)}
.ergebnis.an{display:block}
.erg-kopf{padding:22px 24px;border-bottom:1px solid var(--line);display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}
.erg-preis{font-size:44px;font-weight:640;font-stretch:108%;letter-spacing:-.025em;line-height:1}
.erg-kopf .je{color:var(--ink-2);font-size:15px}
.erg-status{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:4px 10px;
  border:1px solid var(--line-2);border-radius:2px;font-size:11.5px;font-weight:640;font-stretch:82%;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
.erg-status.fertig{border-color:var(--accent);color:var(--accent)}
.erg-status .pkt{width:7px;height:7px;border-radius:50%;background:currentColor}
.erg-status .pkt.puls{animation:puls 1.2s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.erg-status .pkt.puls{animation:none}}
.erg-tabelle{width:100%;border-collapse:collapse;font-size:15px}
.erg-tabelle td{padding:11px 24px;border-bottom:1px solid var(--line)}
.erg-tabelle td:last-child{text-align:right}
.erg-tabelle tr:last-child td{border-bottom:0}
.aktion{margin:0 24px;padding:22px 0 26px;border-top:1px solid var(--line)}
.aktion h4{margin:0 0 6px}
.aktion .zeile{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media (max-width:620px){.aktion .zeile{grid-template-columns:1fr}}
.aktion input[type=text],.aktion input[type=email],.aktion input[type=tel]{width:100%;padding:12px 14px;
  border:1px solid var(--line-2);border-radius:2px;background:var(--ground);color:var(--ink);font:inherit;font-size:15.5px}
.aktion .knoepfe{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.aktion button{flex:1 1 220px;min-height:50px;padding:0 18px;border-radius:2px;font:inherit;font-weight:600;
  font-stretch:104%;font-size:15.5px;cursor:pointer;border:1px solid var(--knopf)}
.aktion button.haupt{background:var(--knopf);color:var(--knopf-text)}
.aktion button.haupt:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.aktion button.zweit{background:transparent;color:var(--ink)}
.aktion button[disabled]{opacity:.5;cursor:default}
.aktion .pflichtbox{margin-top:18px;padding:14px 16px;border:1px solid var(--line-2);border-left:3px solid var(--ink);
  background:var(--ground);font-size:14.5px}
.aktion .pflichtbox b{display:block;margin-bottom:4px}
.aktion label.zustimmung{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:14.5px;cursor:pointer}
.aktion label.zustimmung input{margin-top:3px;accent-color:var(--accent)}
.aktion .rueck{margin-top:12px;font-size:14.5px}
.aktion .rueck.gut{color:var(--gut)}
.aktion .rueck.schlecht{color:var(--signal)}
.rechner .klein{margin-top:22px}

/* Seitenspalte neben dem Rechner */
.seitenspalte .label{margin-bottom:16px}
.seitenspalte h3{margin-bottom:10px}
.seitenspalte p{color:var(--ink-2);font-size:16px}
.seitenspalte .datenfeld{margin-top:22px}
.seitenspalte .knopf{margin-top:26px}

/* Werkstoffe */
.werkstoffe{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--frame)}
.werkstoff{padding:24px 28px 8px;border-left:1px solid var(--line)}
.werkstoff:first-child{border-left:0;padding-left:0}
.werkstoff h3{font-size:30px;font-weight:640;font-stretch:118%;letter-spacing:-.01em;margin-bottom:12px}
.werkstoff p{color:var(--ink-2);font-size:16px}
@media (max-width:860px){.werkstoffe{grid-template-columns:1fr}
  .werkstoff{border-left:0;padding:24px 0;border-top:1px solid var(--line)}
  .werkstoff:first-child{border-top:0}}

/* Herstellerangaben (Produktsicherheit) */
.produktsicherheit{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.produktsicherheit h3{font-size:13px;font-weight:640;font-stretch:84%;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin-bottom:8px}
.produktsicherheit ul{margin:8px 0 0;padding-left:18px}
.produktsicherheit li{margin-bottom:4px}

.kopf:last-child{margin-bottom:0}

/* Partner: zentriert, Karten mittig gesetzt */
.partner-kopf{max-width:40rem;margin:0 auto 56px;text-align:center}
.partner-kopf .label{margin-bottom:16px}
.partner-kopf h2{max-width:none}
.partner-kopf p{margin-top:18px;font-size:18px;color:var(--ink-2)}
.partner-band .partner-gitter{max-width:880px;margin:0 auto}
.partner-band .partner-karte{align-items:center;text-align:center;padding:32px 32px 12px}
.partner-band .partner-karte + .partner-karte{padding-left:32px;padding-right:32px}
.partner-band .partner-punkte li{padding-left:0}
.partner-band .partner-punkte li::before{display:none}
.partner-band .partner-wege{justify-content:center}
@media (max-width:860px){.partner-band .partner-karte,.partner-band .partner-karte + .partner-karte{padding:28px 0}}

/* Startseite ohne Schriftfeldzeile: Hinweis unter den Knöpfen */
.hero .rueckmeldung{margin-top:18px;font-size:14.5px;color:var(--ink-3)}
.hero-ohne-zeile{padding-bottom:24px}

/* ── Lieferzeit-Stufen im Rechner (seit 20.10.2026) ───────────────────── */
.steuer > [id$="-einsaetze"]{grid-column:1/-1}
.steuer .lieferstufen{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.steuer .lieferstufen .ls-titel{grid-column:1/-1;display:block;font-size:12px;font-weight:640;font-stretch:82%;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.steuer .lieferstufen label{display:flex;flex-direction:column;gap:2px;margin:0;padding:10px 12px 10px 38px;position:relative;
  border:1px solid var(--line-2);border-radius:2px;background:var(--ground);cursor:pointer;
  font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);font-stretch:100%}
.steuer .lieferstufen label:has(input:checked){border-color:var(--accent);background:var(--accent-tint)}
.steuer .lieferstufen input{position:absolute;left:12px;top:13px;width:16px;height:16px;margin:0;accent-color:var(--accent)}
.steuer .lieferstufen small{font-size:13px;font-weight:400;color:var(--ink-2);line-height:1.35}
@media (max-width:640px){.steuer .lieferstufen{grid-template-columns:1fr}}

/* ── Häufige Fragen ───────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--frame)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:20px 0;font-size:18px;font-weight:600;font-stretch:104%}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:24px;line-height:1;color:var(--accent);flex:none}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.faq details p{margin:0 0 22px;max-width:46rem;color:var(--ink-2);font-size:16.5px}

/* ── Ratgeber ─────────────────────────────────────────────────────────── */
.sprungmarken{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:36px;padding-bottom:48px}
.sprungmarken a{color:var(--accent);text-decoration:none;font-weight:600;font-size:15.5px}
.sprungmarken a:hover{text-decoration:underline}
.tabelle-rahmen{overflow-x:auto}
.ratgeber-tabelle{width:100%;border-collapse:collapse;font-size:16px;border-top:1px solid var(--frame);min-width:560px}
.ratgeber-tabelle th{text-align:left;font-size:12px;font-weight:640;font-stretch:82%;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-2);padding:14px 16px 10px 0;border-bottom:1px solid var(--line-2)}
.ratgeber-tabelle td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.ratgeber-tabelle td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.ratgeber-tabelle b{color:var(--ink)}
.vergleich td{width:22%}.vergleich td:first-child{width:34%}
.punkte{letter-spacing:3px;color:var(--accent);font-size:15px;display:block}
.punkte i{font-style:normal;color:var(--line-2)}
.vergleich small{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.vergleich tr.einsatz td{font-size:15px}
.kleingedruckt{margin-top:18px;font-size:14px;color:var(--ink-3);max-width:46rem}