:root{
  color-scheme: light;
  --punch:#b4f000;
  --punch-ink:#14180d;
  --papier:#eef1e6;
  --flaeche:#ffffff;
  --flaeche-leise:#f4f7ea;
  --tinte:#14180d;
  --tinte-leise:#59614d;
  --tinte-still:#8c9379;
  --linie:#dde1d1;
  --linie-stark:#c2c8b2;
  --akzent:#3f7a12;
  --akzent-tief:#2c5a08;
  --akzent-hell:#e9f4d4;
  --signal:#a53b12;
  --signal-hell:#f7e9e2;
  --schatten:0 1px 2px rgba(16,24,33,.05), 0 10px 30px -20px rgba(16,24,33,.35);
  --serif:"Spectral", Georgia, "Times New Roman", serif;
  --sans:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --spalte:64rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --papier:#0c0f07; --flaeche:#141810; --flaeche-leise:#191d12;
    --tinte:#e9efdc; --tinte-leise:#a4ad93; --tinte-still:#727b61;
    --linie:#28301c; --linie-stark:#3b4528;
    --akzent:#b7e84a; --akzent-tief:#c9f56a; --akzent-hell:#1d2a10;
    --signal:#e2855a; --signal-hell:#2e1d15;
    --schatten:0 1px 2px rgba(0,0,0,.45), 0 10px 30px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --papier:#0c0f07; --flaeche:#141810; --flaeche-leise:#191d12;
  --tinte:#e9efdc; --tinte-leise:#a4ad93; --tinte-still:#727b61;
  --linie:#28301c; --linie-stark:#3b4528;
  --akzent:#b7e84a; --akzent-tief:#c9f56a; --akzent-hell:#1d2a10;
  --signal:#e2855a; --signal-hell:#2e1d15;
  --schatten:0 1px 2px rgba(0,0,0,.45), 0 10px 30px -20px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.18;text-wrap:balance;margin:0;letter-spacing:-.01em}
p,ul,ol,dl{margin:0}
a{color:var(--akzent);text-underline-offset:.18em}
a:hover{color:var(--akzent-tief)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:2px}
.springen{position:absolute;left:-9999px;top:0;background:var(--akzent);color:#fff;padding:.6rem 1rem;z-index:9}
.springen:focus{left:.5rem;top:.5rem}

/* Raster: Lesespalte, links die Randnummern der Kommentarliteratur */
.blatt{max-width:84rem;margin:0 auto;padding:0 1.25rem;position:relative;z-index:1}
.abschnitt{display:grid;grid-template-columns:1fr;gap:.4rem 2.5rem;padding:3.75rem 0}
@media (min-width:66rem){.abschnitt{grid-template-columns:5rem minmax(0,1fr)}}
.rn{display:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;color:var(--tinte-still);text-transform:uppercase;padding-top:.6rem;white-space:nowrap}
@media (min-width:66rem){.rn{display:block}}
.inhalt{display:flex;flex-direction:column;gap:1.25rem;min-width:0}
.abschnitt h2{font-size:clamp(1.5rem,3vw,1.95rem)}
.fliess{color:var(--tinte-leise);max-width:52rem}
.trenner{border:0;border-top:1px solid var(--linie);margin:0}

/* Hero */
.hero{padding-top:4.25rem;padding-bottom:1.25rem}
.hero-form{min-width:0}
@media (min-width:64rem){
  .hero-text{display:flex;flex-direction:column;gap:1.25rem}
}
.hero h1{font-size:clamp(1.9rem,4vw,2.75rem);max-width:56rem}
.hero .unterzeile{font-family:var(--serif);font-size:1.2rem;color:var(--tinte-leise);font-style:italic}
.hero .fliess{font-size:1.05rem;max-width:none}
.hero .fliess strong{color:var(--tinte);font-weight:600}

/* Formular */
.formkarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:4px;box-shadow:var(--schatten);overflow:hidden}
.formkarte .kante{height:3px;background:linear-gradient(90deg,var(--punch) 0 38%,var(--linie-stark) 38% 100%)}
.formkarte .innen{padding:1.5rem}
@media (min-width:40rem){.formkarte .innen{padding:1.9rem}}
.feldkopf{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
label.marke,.formkarte span.marke{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--tinte-leise);font-weight:500}
.hinweis{font-size:.82rem;color:var(--tinte-still)}
textarea,input[type=text],input[type=email],input[type=date]{
  width:100%;font-family:inherit;font-size:1rem;color:var(--tinte);
  background:var(--flaeche-leise);border:1px solid var(--linie-stark);border-radius:3px;
  padding:.8rem .9rem;line-height:1.55;
}
textarea{min-height:8rem;resize:vertical}
input[type=date]{font-family:var(--mono);font-size:.95rem}
textarea::placeholder,input::placeholder{color:var(--tinte-still)}
textarea:focus,input:focus{border-color:var(--akzent)}
.reihe{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;margin-top:1.15rem}
.reihe .feld{flex:1 1 12rem;min-width:0}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

button{
  font-family:var(--sans);font-size:1rem;font-weight:600;
  padding:.82rem 1.5rem;border-radius:3px;border:1px solid var(--punch);
  background:var(--punch);color:var(--punch-ink);cursor:pointer;min-height:3rem;
  transition:filter .15s ease, transform .1s ease;
}
button:hover{filter:brightness(1.12)}
button:active{transform:translateY(1px)}
button[disabled]{opacity:.55;cursor:progress}
.fehler{color:var(--signal);font-size:.9rem;margin-top:.7rem}
.datenschutz{font-size:.82rem;color:var(--tinte-still);margin-top:1rem}

/* Antwortpanel */
.antwort{border-top:1px solid var(--linie);background:var(--flaeche-leise);animation:aufklappen .45s cubic-bezier(.2,.7,.3,1)}
@keyframes aufklappen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.antwort .innen{padding:1.5rem}
@media (min-width:40rem){.antwort .innen{padding:1.9rem}}
.status{display:flex;align-items:center;gap:.65rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-leise)}
.punkt{width:.5rem;height:.5rem;border-radius:50%;background:var(--signal);flex:none}
.punkt.wartet{background:var(--tinte-still);animation:pulsieren 1s ease-in-out infinite}
.punkt.gut{background:var(--punch)}
@keyframes pulsieren{0%,100%{opacity:.35}50%{opacity:1}}
.antwort h3{font-size:1.35rem;margin-top:.75rem}
.antwort .text{color:var(--tinte-leise);margin-top:.55rem;max-width:33rem}
.kontaktreihe{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem;align-items:flex-end}
.kontaktreihe .feld{flex:1 1 14rem;min-width:0}
.gezeichnet{font-family:var(--mono);font-size:.72rem;color:var(--tinte-still);margin-top:1rem}

/* Beweisstuecke */
.beweise{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:4px;overflow:hidden;list-style:none;padding:0}
@media (min-width:48rem){.beweise{grid-template-columns:repeat(3,1fr)}}
.beweis{background:var(--flaeche);padding:1.4rem}
.beweis .marke{font-family:var(--mono);font-size:.67rem;letter-spacing:.09em;text-transform:uppercase;color:var(--akzent)}
.beweis h3{font-size:1.1rem;margin:.5rem 0 .45rem}
.beweis p{font-size:.94rem;color:var(--tinte-leise)}

/* Fundstellenblatt */
.blattkarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:4px;box-shadow:var(--schatten);overflow:hidden}
.blattkarte .kopfleiste{padding:1.05rem 1.4rem;border-bottom:1px solid var(--linie);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
.blattkarte .titel{font-family:var(--serif);font-size:1.08rem;font-weight:600}
.blattkarte .meta{font-family:var(--mono);font-size:.73rem;color:var(--tinte-still)}
.pflicht{padding:1.2rem 1.4rem;border-bottom:1px solid var(--linie)}
.pflicht:last-of-type{border-bottom:1px solid var(--linie)}
.pflicht .zeile1{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.nr{font-family:var(--mono);font-size:.8rem;color:var(--tinte-still);font-variant-numeric:tabular-nums}
.pflicht .name{font-weight:600}
.stufe{font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;padding:.14rem .45rem;border-radius:2px;background:var(--akzent-hell);color:var(--akzent)}
.stufe.unbekannt{background:var(--signal-hell);color:var(--signal)}
.werte{display:grid;grid-template-columns:auto 1fr;gap:.32rem .95rem;margin-top:.75rem;font-size:.93rem}
.werte dt{font-family:var(--mono);font-size:.72rem;color:var(--tinte-still);letter-spacing:.04em;padding-top:.2rem}
.werte dd{margin:0;color:var(--tinte-leise)}
.werte dd.frist{color:var(--signal);font-family:var(--mono);font-size:.86rem;font-variant-numeric:tabular-nums}
.werte dd.beleg{font-family:var(--mono);font-size:.81rem}
.blattfuss{padding:1.05rem 1.4rem;background:var(--flaeche-leise);font-size:.86rem;color:var(--tinte-still)}

/* Werkzeuge fuer Agenten */
.werkzeuge{border:1px solid var(--linie);border-radius:4px;background:var(--flaeche);overflow:hidden;list-style:none;padding:0;margin:0}
.werkzeuge li{border-bottom:1px solid var(--linie)}
.werkzeuge li:last-child{border-bottom:0}
.werkzeug{display:block;padding:.95rem 1.25rem;font-family:var(--mono);font-size:.85rem;overflow-x:auto;white-space:nowrap}
.werkzeug .fn{color:var(--akzent)}
.werkzeug .pfeil{color:var(--tinte-still);padding:0 .4rem}
.werkzeug .rueck{color:var(--tinte-leise)}

/* Landmap-Vorschau */
.lk-vorschau{display:block;background:var(--flaeche);border:1px solid var(--linie);border-radius:4px;box-shadow:var(--schatten);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s ease}
.lk-vorschau img{display:block;width:100%;height:auto;border-bottom:1px solid var(--linie)}
.lk-vorschau-fuss{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.85rem 1.25rem;font-family:var(--mono);font-size:.74rem;color:var(--tinte-still);background:var(--flaeche-leise)}
.lk-vorschau-los{color:var(--akzent);font-weight:500}
.lk-vorschau:hover{border-color:var(--akzent)}
.lk-vorschau:hover .lk-vorschau-los{text-decoration:underline}
.lk-hinweis{font-size:.92rem;color:var(--tinte-still);max-width:52rem}

/* FAQ */
.faq{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{
  cursor:pointer;padding:1.05rem 2rem 1.05rem 0;position:relative;
  font-family:var(--serif);font-size:1.08rem;font-weight:600;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:1.15rem;color:var(--tinte-still);font-weight:400;
}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--akzent)}
.faq .antworttext{padding:0 2rem 1.2rem 0;color:var(--tinte-leise);max-width:36rem}

/* Grenzen */
.grenzen{list-style:none;padding:0;display:flex;flex-direction:column;gap:.6rem}
.grenzen li{display:flex;gap:.75rem;color:var(--tinte-leise)}
.grenzen li::before{content:"—";color:var(--tinte-still);font-family:var(--mono);flex:none}

/* Fuss */
.fuss{border-top:1px solid var(--linie);background:var(--flaeche);margin-top:2.5rem;position:relative;z-index:2}
.fuss .zeile{max-width:84rem;margin:0 auto;padding:2.25rem 1.25rem;display:flex;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;font-size:.87rem;color:var(--tinte-still)}
.fuss .haftung{font-family:var(--mono);font-size:.75rem}

.vorschau{background:var(--signal-hell);color:var(--signal);font-family:var(--mono);font-size:.75rem;padding:.65rem 1.25rem;text-align:center;border-bottom:1px solid var(--linie)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---- Scout: animiert im Menü (obere Leiste) ---- */
/* Antwortpanel volle Breite */
#antwortkarte{margin:.25rem 0 1rem;scroll-margin-top:5.5rem}

/* CTA + sichtbares Kontaktformular */
.kontaktblock{border-top:1px solid var(--linie)}
.kontakt-grid{display:grid;gap:2rem}
@media (min-width:60rem){.kontakt-grid{grid-template-columns:minmax(0,1fr) minmax(23rem,30rem);align-items:start;gap:3.5rem}}
.kontakt-cta h2{font-size:clamp(1.5rem,3vw,1.95rem)}
.kontakt-punkte{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-direction:column;gap:.6rem}
.kontakt-punkte li{position:relative;padding-left:1.5rem;color:var(--tinte-leise)}
.kontakt-punkte li::before{content:"";position:absolute;left:0;top:.5em;width:.55rem;height:.55rem;border-radius:2px;background:var(--punch)}
.kontakt-direkt{margin-top:1.35rem;font-size:.95rem;color:var(--tinte-leise)}
.kontakt-karte .feld{margin-bottom:.95rem}
.kontakt-karte .reihe{margin-top:0}
.kontakt-karte button[type=submit]{width:100%;margin-top:.4rem}
#k2-danke{padding:.4rem 0}
.kontakt-frei{display:inline-block;margin-top:1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--akzent);border:1px solid var(--akzent);border-radius:3px;padding:.3rem .6rem}
button.leise{background:none;color:var(--tinte);border-color:var(--linie-stark)}
button.leise:hover{filter:none;border-color:var(--akzent);color:var(--akzent)}
.bereiche-wahl{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}
.bereiche-wahl button{min-height:2.6rem;padding:.55rem 1rem;font-size:.95rem}
.bereiche-auswahl{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem}
.bereiche-auswahl li{font-size:.8rem;background:var(--akzent-hell);color:var(--tinte);border:1px solid var(--akzent);border-radius:3px;padding:.15rem .5rem}
.bereiche-leer{font-size:.88rem;color:var(--tinte-still)}

/* Bereiche-Dialog (Landkarte) */
#bereichdialog{border:none;border-radius:6px;padding:0;max-width:66rem;width:calc(100% - 2rem);max-height:calc(100dvh - 2rem);background:var(--flaeche);color:var(--tinte);box-shadow:var(--schatten)}
#bereichdialog[open]{display:flex;flex-direction:column}
#bereichdialog::backdrop{background:rgba(20,24,13,.5)}
.bd-kopf{padding:1.3rem 1.6rem .9rem;border-bottom:1px solid var(--linie)}
.bd-kopf .kd-kopf{margin-bottom:.2rem}
.bd-rumpf{padding:1.1rem 1.6rem;overflow-y:auto;flex:1 1 auto}
.bd-fuss{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;padding:.9rem 1.6rem;border-top:1px solid var(--linie);background:var(--flaeche-leise)}
.bd-fuss .zahl{margin-right:auto;font-family:var(--mono);font-size:.78rem;color:var(--tinte-leise)}
.bd-fuss button{min-height:2.6rem;padding:.55rem 1.1rem;font-size:.95rem}
.lk-wahl{display:grid;gap:.9rem}
@media(min-width:46rem){.lk-wahl{grid-template-columns:1fr 1fr}}
@media(min-width:68rem){.lk-wahl{grid-template-columns:1fr 1fr 1fr}}
.lk-bereich{border:1px solid var(--linie);border-radius:6px;padding:.85rem 1rem;background:var(--flaeche-leise);transition:border-color .15s ease,background .15s ease}
.lk-bereich.aktiv{border-color:var(--punch);box-shadow:0 0 0 1px var(--punch) inset;background:var(--akzent-hell)}
.lk-bereich .kette{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tinte-still);margin:0}
.lk-bereich label{display:flex;gap:.55rem;align-items:flex-start;cursor:pointer;line-height:1.35}
.lk-bereich input[type=checkbox]{width:1.05rem;height:1.05rem;margin:.12rem 0 0;flex:0 0 auto;accent-color:var(--akzent);padding:0}
.lk-bereich .lk-titel{font-family:var(--serif);font-size:1.04rem;font-weight:600;margin-top:.1rem}
.lk-bereich ul{list-style:none;padding:0;margin:.6rem 0 0;display:flex;flex-direction:column;gap:.4rem}
.lk-bereich li label{font-size:.9rem;color:var(--tinte-leise)}
.lk-bereich li input:checked+span{color:var(--tinte);font-weight:500}
.lk-status{color:var(--tinte-leise)}

/* Kontakt-Modal */
#kontaktdialog{border:none;border-radius:6px;padding:0;max-width:34rem;width:calc(100% - 2rem);background:var(--flaeche);color:var(--tinte);box-shadow:var(--schatten)}
#kontaktdialog::backdrop{background:rgba(20,24,13,.5)}
.kd-form{padding:1.6rem}
.kd-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.3rem}
.kd-kopf h2{font-family:var(--serif);font-size:1.3rem}
.kd-x{background:none;border:none;color:var(--tinte-still);font-size:1.6rem;line-height:1;cursor:pointer;padding:0 .2rem;min-height:auto}
.kd-x:hover{color:var(--tinte)}
.kd-intro{color:var(--tinte-leise);margin-bottom:1.1rem}
.kd-reihe{display:flex;gap:.9rem;flex-wrap:wrap}
.kd-reihe .feld{flex:1 1 12rem;min-width:0}
.kd-form .feld{margin-bottom:.9rem}
.kd-aktionen{display:flex;gap:.7rem;margin-top:.2rem}
#kd-danke h2{font-family:var(--serif);font-size:1.3rem;margin-bottom:.4rem}
.nav-kontakt{background:none;border:none;font:inherit;color:var(--tinte-leise);cursor:pointer;padding:0;min-height:auto}

.fuss .nav-kontakt{font-size:inherit}.fuss .nav-kontakt:hover{color:var(--akzent);text-decoration:underline}
/* ===== Neupositionierung: Infrastruktur fuer Energiesoftware ===== */
.kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--akzent)}
.leitsatz{font-family:var(--serif);font-size:1.15rem;line-height:1.45;color:var(--tinte);border-left:3px solid var(--punch);padding:.15rem 0 .15rem 1rem;max-width:46rem}
.hero .inhalt{gap:2rem}
.hero-text{display:flex;flex-direction:column;gap:1.25rem}
.leitsatz.kern{max-width:52rem;font-size:1.22rem;display:flex;flex-direction:column;gap:.6rem}
.leitsatz.kern p+p{font-family:var(--sans);font-size:1.02rem;line-height:1.6;color:var(--tinte-leise)}
.leitsatz.kern strong{color:var(--tinte);font-weight:600}
.ctas{display:flex;gap:.7rem 1rem;flex-wrap:wrap;align-items:center}
.knopf{display:inline-flex;align-items:center;justify-content:center;font-weight:600;padding:.75rem 1.3rem;border-radius:3px;border:1px solid var(--punch);background:var(--punch);color:var(--punch-ink);text-decoration:none;min-height:3rem;line-height:1.2}
.knopf:hover{filter:brightness(.94);color:var(--punch-ink)}
.knopf.zweit{background:none;border-color:var(--linie-stark);color:var(--tinte)}
.knopf.zweit:hover{filter:none;border-color:var(--akzent);color:var(--akzent)}
.cta-link{font-weight:600;text-decoration:none}
.cta-link:hover{text-decoration:underline}
.tech-zugang{margin-top:2rem;padding:1.25rem 1.25rem 1.4rem;border:1px solid var(--linie);border-left:3px solid var(--akzent);border-radius:4px}
.tech-zugang .fliess{margin-bottom:1rem}
.blattkarte .kante{height:3px;background:linear-gradient(90deg,var(--punch) 0 38%,var(--linie-stark) 38% 100%)}
.blattkarte .kopfleiste .titel{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte-still);font-weight:500}
.code{margin:0;padding:1rem 1.4rem;font-family:var(--mono);font-size:.78rem;line-height:1.6;overflow-x:auto;color:var(--tinte-leise);white-space:pre;border-bottom:1px solid var(--linie);background:var(--flaeche-leise)}
.code .k{color:var(--akzent)}.code .s{color:var(--tinte)}.code .c{color:var(--tinte-still)}
.blattkarte .blattfuss code,.fliess code,.integration code{font-size:.85em}

/* Status-Marken */
.st{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:.16rem .5rem;border-radius:2px;white-space:nowrap;border:1px solid transparent;line-height:1.4}
.st.ok{background:var(--akzent-hell);color:var(--akzent);border-color:var(--akzent)}
.st.mod{background:var(--akzent-hell);color:var(--akzent);border-style:dashed;border-color:var(--akzent)}
.st.teil{background:#f6efd8;color:#8a6608;border-color:#b8860b}
.st.plan{background:none;color:var(--tinte-still);border-color:var(--linie-stark)}
.st.illu{background:var(--signal-hell);color:var(--signal);border-color:var(--signal)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .st.teil{background:#2a2410;color:#d7a93b;border-color:#d7a93b}}
:root[data-theme="dark"] .st.teil{background:#2a2410;color:#d7a93b;border-color:#d7a93b}
.zwischen{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte-still);margin-bottom:.6rem}

/* Architektur */
.fluss{list-style:none;padding:0;margin:.3rem 0 0;display:grid;gap:2.2rem;counter-reset:fluss}
@media (min-width:60rem){.fluss{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4rem}}
.stufe-k{position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:5px;padding:1.2rem 1.25rem}
.stufe-k.betont{background:var(--akzent-hell);border-color:var(--punch);box-shadow:0 0 0 1px var(--punch) inset}
.stufe-k .marke{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--akzent);margin-bottom:.6rem}
.stufe-k ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.3rem;font-size:.93rem;color:var(--tinte-leise)}
.stufe-k:not(:last-child)::after{content:"\2193";position:absolute;left:50%;bottom:-1.85rem;transform:translateX(-50%);font-family:var(--mono);color:var(--akzent);font-size:1.1rem}
@media (min-width:60rem){.stufe-k:not(:last-child)::after{content:"\2192";left:auto;right:-1.85rem;bottom:auto;top:50%;transform:translateY(-50%)}}

/* Vier Ebenen */
.ebenen{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
@media (min-width:52rem){.ebenen{grid-template-columns:1fr 1fr}}
.ebene{background:var(--flaeche);border:1px solid var(--linie);border-radius:5px;padding:1.35rem;display:flex;flex-direction:column;gap:.55rem}
.ebene.betont{background:var(--akzent-hell);border-color:var(--punch);box-shadow:0 0 0 1px var(--punch) inset}
.ebene-nr{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--akzent);display:flex;align-items:center;gap:.5rem}
.ebene h3{font-size:1.15rem}
.ebene p{color:var(--tinte-leise);font-size:.95rem}
.badge{font-family:var(--sans);font-weight:600;font-size:.6rem;letter-spacing:.04em;background:var(--punch);color:var(--punch-ink);border-radius:99px;padding:.1rem .5rem;text-transform:uppercase}

/* Use Cases */
.faelle{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
@media (min-width:52rem){.faelle{grid-template-columns:1fr 1fr}}
@media (min-width:76rem){.faelle{grid-template-columns:1fr 1fr 1fr}}
.fall{background:var(--flaeche);border:1px solid var(--linie);border-radius:5px;padding:1.3rem;display:flex;flex-direction:column;gap:.6rem}
.fall-kopf{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.fall-nr{font-family:var(--mono);font-size:.75rem;color:var(--tinte-still)}
.fall h3{font-size:1.12rem}
.frage-z{font-family:var(--serif);font-style:italic;color:var(--tinte);font-size:1rem;line-height:1.4}
.merkmale{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.35rem;font-size:.92rem;color:var(--tinte-leise)}
.merkmale li{padding-left:1.2rem;position:relative}
.merkmale li::before{content:"\2192";position:absolute;left:0;color:var(--akzent);font-family:var(--mono)}
.integration{margin-top:auto;padding-top:.6rem;border-top:1px dashed var(--linie);font-family:var(--mono);font-size:.74rem;color:var(--tinte-still)}

/* Entwickler */
.tools li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-right:1rem}
.tools .werkzeug{flex:1;min-width:0}
.ik-fuer{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--akzent)}
.integrationen .fall>p:not([class]){color:var(--tinte-leise);font-size:.94rem}
.ik-hinweis{font-size:.85rem;color:var(--tinte-still)}

/* Coverage */
.status-legende{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.88rem;color:var(--tinte-leise)}
.status-legende li{display:flex;align-items:center;gap:.55rem}
.bereiche-status{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:4px;overflow:hidden}
@media (min-width:46rem){.bereiche-status{grid-template-columns:1fr 1fr}}
@media (min-width:72rem){.bereiche-status{grid-template-columns:1fr 1fr 1fr 1fr}}
.bereiche-status li{background:var(--flaeche);display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.65rem .9rem;font-size:.9rem}

/* Pilot */
.kontakt-karte select{width:100%;font:inherit;color:var(--tinte);background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:3px;padding:.75rem .8rem;min-height:3rem}
.kontakt-karte select:focus{border-color:var(--akzent);outline:none}

/* Systembild */
.sb{position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:6px;padding:1rem;box-shadow:var(--schatten)}
@media (min-width:40rem){.sb{padding:1.4rem 1.5rem 1.6rem}}
.sb-steuer{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;align-items:center;margin-bottom:1.4rem}
.sb-modus{display:inline-flex;border:1px solid var(--linie-stark);border-radius:99px;padding:3px;background:var(--flaeche-leise)}
.sb-modus button{background:none;border:0;color:var(--tinte-leise);min-height:2.3rem;padding:.3rem 1rem;border-radius:99px;font-size:.9rem}
.sb-modus button[aria-pressed=true]{background:var(--punch);color:var(--punch-ink)}
.sb-faelle{display:flex;flex-wrap:wrap;gap:.4rem}
.sb-faelle button{background:var(--flaeche);border:1px solid var(--linie-stark);color:var(--tinte);min-height:2.3rem;padding:.3rem .75rem;font-size:.86rem;font-weight:500}
.sb-faelle button:hover{filter:none;border-color:var(--akzent)}
.sb-faelle button[aria-pressed=true]{border-color:var(--akzent);background:var(--akzent-hell);box-shadow:inset 0 0 0 1px var(--akzent)}
.sb-faelle .st{margin-left:.4rem;vertical-align:1px}
.sb-buehne{position:relative;display:grid;gap:2.6rem}
@media (min-width:60rem){.sb-buehne{grid-template-columns:minmax(0,1fr) minmax(15rem,19rem) minmax(0,1fr);gap:0 5.5rem;align-items:start}}
.sb-linien{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.sb-spalte,.sb-mitte{position:relative;z-index:1;min-width:0}
.sb-systeme{order:0}.sb-mitte{order:1}.sb-quellen{order:2}
@media (min-width:60rem){.sb-quellen{order:0}.sb-systeme{order:2}}
.sb-kopf{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte);font-weight:500;margin-bottom:.7rem}
.sb-gruppe{margin-bottom:.85rem}
.sb-gname{font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--tinte-still);margin-bottom:.35rem}
.sb-kacheln{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.sb-systeme .sb-kacheln{display:grid;grid-template-columns:1fr 1fr}
@media (min-width:60rem){.sb-kacheln,.sb-systeme .sb-kacheln{display:flex;flex-direction:column}}
.sb-k{position:relative;background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:4px;padding:.4rem .65rem;font-size:.86rem;line-height:1.3;transition:border-color .35s ease,background .35s ease,box-shadow .35s ease}
.sb-k b{font-weight:600}
.sb-k small{display:block;color:var(--tinte-still);font-size:.74rem}
.sb-quellen .sb-k{font-family:var(--mono);font-size:.76rem;padding:.3rem .6rem}
.sb-quellen .sb-k small{display:none}
@media (min-width:60rem){.sb-quellen .sb-k small{display:block}}
.sb-mitte,.sb-text{background:var(--flaeche)}
@media (min-width:60rem){.sb-mitte{background:none;padding-top:7.5rem}}
.sb-k.aus{border-style:dashed;background:var(--flaeche-leise)}
.sb-k.an{border-color:var(--akzent);background:var(--akzent-hell);box-shadow:inset 0 0 0 1px var(--akzent)}
.sb-k.start{box-shadow:inset 0 0 0 1px var(--akzent),0 0 0 4px rgba(180,240,0,.35)}
.sb-tag{display:none}
.sb.heute .sb-tag{display:inline-block;margin-top:.25rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:var(--signal);border:1px dashed var(--signal);border-radius:2px;padding:0 .35rem}
.sb-marke{position:absolute;right:-.45rem;top:-.6rem;background:var(--punch);color:var(--punch-ink);font-family:var(--sans);font-size:.66rem;font-weight:600;padding:.08rem .45rem;border-radius:99px;white-space:nowrap;animation:sb-plopp .35s ease-out}
@keyframes sb-plopp{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.sb-weiter{display:inline-block;font-size:.8rem;margin-top:.1rem}
.sb-rt{background:var(--flaeche);border:2px solid var(--punch);border-radius:8px;padding:1.1rem 1.2rem;box-shadow:0 0 0 5px rgba(180,240,0,.16),var(--schatten);transition:opacity .4s ease,visibility .4s}
.sb-rt-name{font-family:var(--serif);font-size:1.45rem;font-weight:600;line-height:1.1}
.sb-rt-unter{font-size:.85rem;color:var(--tinte-leise);margin:.15rem 0 .8rem}
.sb-rt-schritte{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.3rem;font-family:var(--mono);font-size:.74rem;color:var(--tinte-still)}
.sb-rt-schritte li{display:flex;align-items:center;gap:.55rem;transition:color .3s ease}
.sb-rt-schritte li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;border:1px solid var(--linie-stark);flex:none;transition:background .3s ease,border-color .3s ease}
.sb-rt-schritte li.an{color:var(--tinte)}
.sb-rt-schritte li.an::before{background:var(--punch);border-color:var(--akzent)}
.sb-rt-pruef{margin-top:.85rem;padding-top:.65rem;border-top:1px dashed var(--linie-stark);font-size:.76rem;color:var(--akzent)}
.sb.heute .sb-rt{display:none}
.sb.heute .sb-mitte{background:none}
.sb-text{margin-top:1.2rem;display:flex;flex-direction:column;gap:.7rem}
.sb-fallname{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--akzent)}
.sb.heute .sb-fallname{color:var(--signal)}
.sb-erz{font-size:.95rem;line-height:1.55;color:var(--tinte)}
@media (min-width:60rem){.sb-erz{min-height:6.2em}}
.sb>.sb-text{position:sticky;bottom:0;z-index:3;margin:1.2rem -1rem -1rem;padding:.85rem 1rem 1rem;border-top:2px solid var(--punch);border-radius:0 0 6px 6px;box-shadow:0 -10px 24px -14px rgba(16,24,33,.35);max-height:45vh;overflow-y:auto;gap:.5rem}
.sb>.sb-text .sb-erz{font-size:.9rem}
@media (max-width:59.99rem){
  .sb-faelle{flex-wrap:nowrap;overflow-x:auto;margin:0 -1rem;padding:0 1rem .2rem;scrollbar-width:none}
  .sb-faelle button{flex:none}
  .sb-systeme .sb-k small{display:none}
  .sb-systeme .sb-k b{font-size:.8rem}
}
.sb-ergebnis{margin:0;border:1px solid var(--linie);border-left:3px solid var(--punch);border-radius:4px;background:var(--flaeche-leise);animation:aufklappen .4s ease-out}
.sb-pflicht{padding:.6rem .8rem;border-bottom:1px solid var(--linie)}
.sb-pflicht:last-child{border-bottom:0}
.sb-pflicht dt{font-size:.86rem;font-weight:600;line-height:1.35}
.sb-pflicht dd{margin:.2rem 0 0;display:flex;flex-wrap:wrap;gap:.2rem .8rem;font-family:var(--mono);font-size:.74rem}
.sb-frist{color:var(--signal)}
.sb-beleg{color:var(--tinte-leise)}
.sb-tasten{display:flex;gap:.45rem;flex-wrap:wrap}
.sb-tasten button{min-height:2.3rem;padding:.3rem .85rem;font-size:.86rem}
.sb-l{fill:none;stroke:var(--linie-stark);stroke-width:1.1;transition:stroke .35s ease,stroke-width .35s ease,opacity .35s ease}
.sb-l.aktiv{stroke:var(--akzent);stroke-width:2.2}
.sb.heute .sb-l{stroke:var(--signal);opacity:.4;stroke-dasharray:3 4}
.sb-p{fill:var(--punch);stroke:var(--punch-ink);stroke-width:1.5}
.sb-p.frage{fill:var(--signal);stroke:none;opacity:.75}

/* Aufklappen: das Was bleibt sichtbar, das Wie steht in details */
.mehr-liste{border-bottom:1px solid var(--linie)}
.mehr{border-top:1px solid var(--linie)}
.mehr summary{cursor:pointer;list-style:none;position:relative;padding:1rem 2.5rem 1rem 0;font-weight:600;color:var(--tinte)}
.mehr summary::-webkit-details-marker{display:none}
.mehr summary::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:1.2rem;font-weight:400;color:var(--akzent)}
.mehr[open] summary::after{content:"\2013"}
.mehr summary:hover{color:var(--akzent)}
.mehr summary small{display:block;font-weight:400;font-size:.88rem;color:var(--tinte-still)}
.code.aufruf{border:1px solid var(--linie);border-radius:4px}
.mehr-rumpf{display:flex;flex-direction:column;gap:1.2rem;padding:.3rem 0 1.8rem}
@media (min-width:52rem){.faelle.zwei{grid-template-columns:1fr 1fr}}

/* ===== Release 2.0: Produktseiten, Beispielkarten, Anlagen-Check ===== */
.st.pilot{background:#f6efd8;color:#8a6608;border-color:#b8860b}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .st.pilot{background:#2a2410;color:#d7a93b;border-color:#d7a93b}}
:root[data-theme="dark"] .st.pilot{background:#2a2410;color:#d7a93b;border-color:#d7a93b}

/* Hero mit Formular */
.hero-grid{display:grid;gap:2rem}
@media (min-width:64rem){.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(21rem,26rem);gap:3.5rem;align-items:start}}
.hero .unter-h1{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.4;color:var(--tinte)}
.seitenkopf{padding-top:3.5rem;padding-bottom:1.5rem}
.seitenkopf h1{font-size:clamp(1.9rem,4vw,2.6rem);max-width:48rem}
.seitenkopf .unter-h1{font-family:var(--serif);font-size:1.2rem;line-height:1.45;color:var(--tinte-leise);max-width:46rem}
.kopfstatus{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* Formularfelder (Check) */
input[type=number],select.feldwahl{width:100%;font-family:inherit;font-size:1rem;color:var(--tinte);background:var(--flaeche-leise);border:1px solid var(--linie-stark);border-radius:3px;padding:.75rem .85rem;min-height:3rem}
input[type=number]:focus,select.feldwahl:focus{border-color:var(--akzent)}
.formkarte h2,.formkarte .fk-titel{font-family:var(--serif);font-size:1.2rem;font-weight:600;margin:0 0 .3rem}
.formkarte .feld{margin-bottom:.95rem}
.formkarte .reihe{margin-top:0}
.formkarte button[type=submit]{width:100%;margin-top:.3rem}
.einheit{display:flex;gap:.5rem}
.einheit input{flex:1 1 auto;min-width:0}
.einheit select{flex:0 0 5.5rem}
.feld.fehlt input,.feld.fehlt select{border-color:var(--signal)}
.feldfehler{display:block;color:var(--signal);font-size:.84rem;margin-top:.3rem}
.festwert{font-size:.95rem;color:var(--tinte);padding:.55rem 0}
.umfang{font-size:.84rem;color:var(--tinte-still);margin:.2rem 0 1rem}

/* Produktkarten */
.produkte{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
@media (min-width:60rem){.produkte{grid-template-columns:repeat(3,minmax(0,1fr))}}
.produkt{background:var(--flaeche);border:1px solid var(--linie);border-radius:5px;padding:1.4rem;display:flex;flex-direction:column;gap:.7rem}
.produkt.betont{border-color:var(--punch);box-shadow:0 0 0 1px var(--punch) inset}
.produkt h3{font-size:1.25rem}
.produkt p{color:var(--tinte-leise);font-size:.95rem}
.produkt .cta-link{margin-top:auto;padding-top:.4rem}

/* Beispielkarten: deutlich als Beispiel gekennzeichnet */
.beispiel{background:var(--flaeche);border:1px solid var(--linie);border-radius:5px;overflow:hidden;box-shadow:var(--schatten)}
.beispiel-band{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.6rem 1.2rem;background:var(--signal-hell);color:var(--signal);font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;border-bottom:1px solid var(--linie)}
.beispiel-band strong{text-transform:uppercase;letter-spacing:.09em}
.beispiel-kopf{padding:1rem 1.2rem;border-bottom:1px solid var(--linie);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
.beispiel-kopf .titel{font-family:var(--serif);font-weight:600;font-size:1.08rem}
.beispiel-kopf .meta{font-family:var(--mono);font-size:.72rem;color:var(--tinte-still)}
.bsp-liste{list-style:none;margin:0;padding:0}
.bsp-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;padding:.8rem 1.2rem;border-bottom:1px solid var(--linie);align-items:start}
.bsp-liste li:last-child{border-bottom:0}
.bsp-liste .was{font-weight:600;font-size:.95rem}
.bsp-liste .warum{grid-column:1/-1;font-size:.88rem;color:var(--tinte-leise)}
.bsp-liste .beleg{grid-column:1/-1;font-family:var(--mono);font-size:.76rem;color:var(--tinte-still)}
.bsp-fuss{padding:.85rem 1.2rem;background:var(--flaeche-leise);font-size:.85rem;color:var(--tinte-still);border-top:1px solid var(--linie)}
.code.bsp{border:0;border-bottom:1px solid var(--linie)}

/* Ergebnis-Status (Anwendbarkeit) */
.erg{display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;padding:.16rem .5rem;border-radius:2px;white-space:nowrap;border:1px solid}
.erg.gilt{color:var(--akzent);border-color:var(--akzent);background:var(--akzent-hell)}
.erg.pruefen{color:#8a6608;border-color:#b8860b;background:#f6efd8}
.erg.offen{color:var(--tinte-still);border-color:var(--linie-stark)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .erg.pruefen{background:#2a2410;color:#d7a93b;border-color:#d7a93b}}
:root[data-theme="dark"] .erg.pruefen{background:#2a2410;color:#d7a93b;border-color:#d7a93b}

/* Schichten (Architektur) */
.schichten{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;align-items:stretch;gap:1.9rem;max-width:44rem}
.schicht{position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:5px;padding:.85rem 1.1rem;display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;align-items:center}
.schicht.betont{border-color:var(--punch);box-shadow:0 0 0 1px var(--punch) inset;background:var(--akzent-hell)}
.schicht:not(:last-child)::after{content:"\2193";position:absolute;left:50%;bottom:-1.65rem;transform:translateX(-50%);font-family:var(--mono);color:var(--akzent)}
.schicht b{font-weight:600}
.schicht small{display:block;color:var(--tinte-leise);font-size:.86rem}
.schicht-produkte{display:flex;gap:.5rem;flex-wrap:wrap}
.schicht-produkte span{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--linie-stark);border-radius:4px;padding:.25rem .55rem;font-size:.88rem;background:var(--flaeche)}

/* Ablauf in Schritten */
.ablauf{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;counter-reset:ablauf}
@media (min-width:60rem){.ablauf{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}}
.ablauf li{counter-increment:ablauf;background:var(--flaeche);border:1px solid var(--linie);border-radius:5px;padding:.9rem 1rem;font-size:.93rem;color:var(--tinte)}
.ablauf li::before{content:counter(ablauf,decimal-leading-zero);display:block;font-family:var(--mono);font-size:.68rem;color:var(--akzent);letter-spacing:.08em;margin-bottom:.3rem}
.ablauf li.wir{border-color:var(--punch);box-shadow:0 0 0 1px var(--punch) inset}
.ablauf li small{display:block;color:var(--tinte-leise);font-size:.84rem;margin-top:.2rem}

/* Merkmale als Chips */
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--linie-stark);border-radius:99px;padding:.3rem .5rem .3rem .85rem;font-size:.9rem;background:var(--flaeche)}

/* Kennzahlen der Abdeckung */
.kennzahlen{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:4px;overflow:hidden;margin:0}
@media (min-width:48rem){.kennzahlen{grid-template-columns:repeat(3,1fr)}}
.kennzahlen div{background:var(--flaeche);padding:1rem 1.2rem}
.kennzahlen dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-still)}
.kennzahlen dd{margin:.2rem 0 0;font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--tinte)}
.kennzahlen dd small{font-family:var(--sans);font-size:.85rem;font-weight:400;color:var(--tinte-leise)}

/* Vergleich / Abgrenzung */
.zwei-spalten{display:grid;gap:1rem}
@media (min-width:52rem){.zwei-spalten{grid-template-columns:1fr 1fr}}
.spalte-k{background:var(--flaeche);border:1px solid var(--linie);border-radius:5px;padding:1.2rem 1.3rem}
.spalte-k h3{font-size:1.08rem;margin-bottom:.5rem}
.spalte-k.betont{border-color:var(--punch);box-shadow:0 0 0 1px var(--punch) inset}

/* Fragen mit Status */
.fragen{list-style:none;padding:0;margin:0;border:1px solid var(--linie);border-radius:4px;overflow:hidden;background:var(--flaeche)}
.fragen li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1.1rem;border-bottom:1px solid var(--linie)}
.fragen li:last-child{border-bottom:0}
.fragen .nr{margin-right:.6rem}

/* Abschluss */
.abschluss-cta{background:var(--flaeche);border:1px solid var(--linie);border-left:3px solid var(--punch);border-radius:5px;padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.abschluss-cta h2{max-width:44rem}
.mikro{font-size:.88rem;color:var(--tinte-still)}
.hinweisbox{border:1px solid var(--linie);border-left:3px solid var(--signal);border-radius:4px;background:var(--flaeche);padding:1rem 1.2rem;color:var(--tinte-leise);font-size:.95rem}
.hinweisbox strong{color:var(--tinte)}
.check-status{display:flex;flex-direction:column;gap:.6rem}
.check-status h2{font-size:1.3rem}


/* ===== Produkte im Fokus: eigener Hintergrund, Beispielbild je Produkt ===== */
.band-betont{position:relative}
.band-betont::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:var(--flaeche);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);z-index:-1}
.band-betont h2{font-size:clamp(1.7rem,3.6vw,2.4rem)}
.band-betont .produkt{background:var(--papier);box-shadow:var(--schatten)}
.band-betont .produkt h3{font-size:1.3rem}
.pb{position:relative;margin:-.2rem -.2rem .3rem;background:var(--flaeche);border:1px solid var(--linie);border-radius:6px;padding:.6rem .5rem .3rem}
.pb svg{display:block;width:100%;height:auto;font-family:var(--sans)}
.pb-tag{position:absolute;top:.5rem;right:.5rem}
.pb-kopf{font-family:var(--mono);font-size:9px;letter-spacing:.1em;fill:var(--tinte-still)}
.pb-t{font-size:11.5px;font-weight:600;fill:var(--tinte)}
.pb-t.pruefen{fill:#8a6608}
.pb-k{font-size:10px;fill:var(--tinte-leise)}
.pb-k.neu{fill:var(--akzent);font-weight:600}
.pb-m{font-family:var(--mono);font-size:10.5px;fill:var(--tinte)}
.pb-karte{fill:var(--flaeche-leise);stroke:var(--linie-stark);stroke-width:1}
.pb-gehaeuse{fill:var(--flaeche);stroke:var(--tinte);stroke-width:2.5}
.pb-pol{fill:var(--tinte)}
.pb-zelle{fill:var(--punch);stroke:var(--akzent);stroke-width:.8}
.pb-zelle.leer{fill:var(--flaeche-leise);stroke:var(--linie-stark)}
.pb-pfeil,.pb-leitung{fill:none;stroke:var(--akzent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pb-leitung{stroke-dasharray:3 4}
.pb-badge{stroke-width:1}
.pb-badge.gilt{fill:var(--akzent-hell);stroke:var(--akzent)}
.pb-badge.pruefen{fill:#f6efd8;stroke:#b8860b}
.pb-badge.offen{fill:var(--signal-hell);stroke:var(--signal)}
.pb-b{font-family:var(--mono);font-size:8.5px;letter-spacing:.05em}
.pb-b.gilt{fill:var(--akzent)}.pb-b.pruefen{fill:#8a6608}.pb-b.offen{fill:var(--signal)}
.pb-zeile{fill:var(--linie-stark)}
.pb-zeile.alt{fill:var(--signal-hell)}
.pb-zeile.neu{fill:var(--punch)}
.pb-streich{stroke:var(--signal);stroke-width:1.6}
.pb-anlagen rect{fill:var(--flaeche);stroke:var(--linie-stark)}
.pb-betroffen rect{fill:var(--signal-hell);stroke:var(--signal);stroke-width:1.6}
.pb-paket{fill:var(--punch);stroke:var(--punch-ink);stroke-width:1.2}
.pb-tor{fill:var(--flaeche);stroke:var(--punch);stroke-width:2.5}
.pb-torname{font-family:var(--serif);font-size:13px;font-weight:600;fill:var(--tinte)}
.pb-ampel{fill:#20261a}
.pb-licht{fill:#3a4230}
.pb-licht.an{fill:#e0b23a;filter:drop-shadow(0 0 6px rgba(224,178,58,.8))}
.pb-lt{font-family:var(--mono);font-size:8px;fill:#c9d0bb}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pb-badge.pruefen{fill:#2a2410;stroke:#d7a93b}:root:not([data-theme="light"]) .pb-b.pruefen,:root:not([data-theme="light"]) .pb-t.pruefen{fill:#d7a93b}}
:root[data-theme="dark"] .pb-badge.pruefen{fill:#2a2410;stroke:#d7a93b}
:root[data-theme="dark"] .pb-b.pruefen,:root[data-theme="dark"] .pb-t.pruefen{fill:#d7a93b}
/* Bewegung: nur wenn das Skript die Bilder vorbereitet hat */
.pb.bereit .pb-a{opacity:0}
.pb.bereit .pb-paket{opacity:0}
.pb.zeigen .pb-a{animation:pb-ein .45s ease-out forwards;animation-delay:calc(var(--i,0) * .42s + .15s)}
.pb.zeigen .pb-paket{animation:pb-paket 1.1s ease-in-out .3s forwards}
@keyframes pb-ein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes pb-paket{0%{opacity:1;transform:translate(0,0)}55%{opacity:1;transform:translate(52px,20px)}100%{opacity:0;transform:translate(84px,20px)}}
.pb .pb-a{transform-box:fill-box}

/* ===== Hero kompakt (Brief Oktober 2026) ===== */
@media (min-width:64rem){
  .hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(24rem,29rem);align-items:center;gap:3rem}
}
.hero-punkte{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45rem 1.2rem;font-size:.92rem;color:var(--tinte)}
.hero-punkte li{display:flex;align-items:center;gap:.45rem}
.hero-punkte li::before{content:"";width:.5rem;height:.5rem;border-radius:2px;background:var(--punch);border:1px solid var(--akzent)}
.formkarte.kompakt .innen{padding:1.2rem 1.25rem 1.1rem}
.formkarte.kompakt .fk-titel{font-size:1.1rem}
.formkarte.kompakt .umfang{margin:.1rem 0 .8rem}
.formkarte.kompakt .feld{margin-bottom:.7rem}
.formkarte.kompakt .feldkopf{margin-bottom:.3rem}
.formkarte.kompakt input[type=number],.formkarte.kompakt input[type=date],.formkarte.kompakt select.feldwahl{min-height:2.6rem;height:2.6rem;padding:.4rem .7rem;font-size:.95rem}
.formkarte.kompakt button[type=submit]{min-height:2.75rem;padding:.6rem 1rem}
.formkarte.kompakt .datenschutz{margin-top:.6rem;font-size:.78rem}
.fk-raster{display:grid;grid-template-columns:1fr 1fr;gap:0 .75rem}
.fk-raster .einheit select{flex-basis:4.6rem}
@media (max-width:22rem){.fk-raster{grid-template-columns:1fr}}
[aria-invalid="true"]{border-color:var(--signal) !important}

/* ===== Produktvitrine (nach Apple: Name, Claim, Verfügbarkeit, zwei Knöpfe, großes Bild) ===== */
.vitrine{display:grid;gap:1rem;margin-top:.6rem}
@media (min-width:52rem){.vitrine{grid-template-columns:1fr 1fr}.kachel.haupt{grid-column:1/-1}}
.kachel{background:var(--papier);border-radius:18px;padding:2.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.6rem;overflow:hidden}
.kachel-text{display:flex;flex-direction:column;align-items:center;gap:.55rem;max-width:40rem}
.kachel-name{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.015em;line-height:1.1}
.kachel.haupt .kachel-name{font-size:clamp(2.1rem,4.4vw,3.3rem)}
.kachel-claim{font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--tinte);line-height:1.4;max-width:34rem}
.kachel-status{font-size:.86rem;color:var(--tinte-leise);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem}
.kachel-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:.4rem}
.pille{display:inline-flex;align-items:center;justify-content:center;min-height:2.6rem;padding:.5rem 1.25rem;border-radius:99px;background:var(--punch);color:var(--punch-ink);border:1px solid var(--punch);font-weight:600;font-size:.95rem;text-decoration:none}
.pille:hover{filter:brightness(.94);color:var(--punch-ink)}
.pille.zweit{background:none;color:var(--akzent);border-color:var(--akzent)}
.pille.zweit:hover{background:var(--akzent-hell);filter:none;color:var(--akzent)}
.kachel .pb{width:100%;max-width:30rem;margin:0;box-shadow:var(--schatten)}
.kachel.haupt .pb{max-width:38rem}
.kachel.haupt{background:linear-gradient(180deg,var(--akzent-hell),var(--papier) 70%)}

/* ===== Architektur als Kette ===== */
.kette{list-style:none;padding:0;margin:0;display:grid;gap:1.9rem}
@media (min-width:62rem){.kette{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.2rem}}
.glied{position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:6px;padding:1.15rem 1.2rem;display:flex;flex-direction:column;gap:.45rem}
.glied.betont{background:var(--akzent-hell);border-color:var(--punch);box-shadow:0 0 0 1px var(--punch) inset}
.glied .marke{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--akzent)}
.glied h3{font-size:1.1rem}
.glied p{font-size:.92rem;color:var(--tinte-leise)}
.glied-st{margin-top:auto;display:flex;flex-wrap:wrap;gap:.3rem}
.glied:not(:last-child)::after{content:"\2193";position:absolute;left:50%;bottom:-1.65rem;transform:translateX(-50%);font-family:var(--mono);color:var(--akzent)}
@media (min-width:62rem){.glied:not(:last-child)::after{content:"\2192";left:auto;right:-1.7rem;bottom:auto;top:50%;transform:translateY(-50%)}}

/* ===== Vertrauen, Abschluss, Pilot ===== */
@media (min-width:48rem){.beweise.vier{grid-template-columns:repeat(2,1fr)}}
@media (min-width:72rem){.beweise.vier{grid-template-columns:repeat(4,1fr)}}
.zwei-wege{display:grid;gap:1.2rem}
@media (min-width:48rem){.zwei-wege{grid-template-columns:1fr 1fr}}
.zwei-wege>div{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.zwei-wege p{color:var(--tinte-leise)}
.marke-k{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--akzent) !important}
.pilot-angebot{display:grid;gap:1rem;align-items:center;background:var(--flaeche);border:1px solid var(--punch);border-left:4px solid var(--punch);border-radius:6px;padding:1.3rem 1.4rem}
@media (min-width:60rem){.pilot-angebot{grid-template-columns:minmax(0,1fr) auto}}
.pilot-angebot h3{font-size:1.25rem;margin-bottom:.35rem}
.pilot-angebot p{color:var(--tinte-leise);max-width:46rem}
.pilot-angebot .ctas{flex-direction:column;align-items:flex-start}
button.kopieren{min-height:auto;padding:.15rem .5rem;font-size:.72rem;font-family:var(--mono)}
.code code{font:inherit;color:var(--tinte)}

/* ===== Onboarding-Demo ===== */
.demo{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;box-shadow:var(--schatten);overflow:hidden}
.demo-band{margin:0;padding:.65rem 1.2rem;background:var(--signal-hell);color:var(--signal);font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;border-bottom:1px solid var(--linie)}
.demo-band strong{text-transform:uppercase;letter-spacing:.09em}
.demo-kopf{display:grid;gap:1rem;padding:1.2rem}
@media (min-width:56rem){.demo-kopf{grid-template-columns:minmax(0,22rem) minmax(0,1fr);padding:1.4rem}}
.demo-eingabe{background:var(--flaeche-leise);border:1px solid var(--linie);border-radius:6px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.7rem}
.demo-eingabe .werte{margin:0;font-size:.88rem}
.demo-start{width:100%}
.demo-ergebnis{border:1px solid var(--linie);border-left:4px solid #b8860b;border-radius:6px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;outline:none}
.demo-ergebnis:focus-visible{box-shadow:0 0 0 2px var(--akzent)}
.demo-leer{color:var(--tinte-still)}
.demo-entscheid{font-family:var(--serif);font-size:1.35rem;font-weight:600;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.demo-zahlen{font-family:var(--mono);font-size:.78rem;color:var(--tinte-leise)}
.demo-gruende{margin:0;padding-left:1.1rem;color:var(--tinte);font-size:.93rem;display:flex;flex-direction:column;gap:.3rem}
.demo-hinweis{font-size:.86rem;color:var(--tinte-leise);border-top:1px dashed var(--linie-stark);padding-top:.5rem}
.demo-bereich{border-top:1px solid var(--linie)}
.demo-leiste{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem;padding:.9rem 1.2rem;background:var(--flaeche-leise);border-bottom:1px solid var(--linie)}
.demo-tabs{display:inline-flex;flex-wrap:wrap;border:1px solid var(--linie-stark);border-radius:99px;padding:3px;background:var(--flaeche)}
.demo-tabs button{background:none;border:0;color:var(--tinte-leise);min-height:2.3rem;padding:.3rem .95rem;border-radius:99px;font-size:.88rem}
.demo-tabs button[aria-selected=true]{background:var(--punch);color:var(--punch-ink)}
.demo-tabs button:hover{filter:none;color:var(--tinte)}
.demo-sim{display:flex;align-items:flex-start;gap:.5rem;font-size:.86rem;color:var(--tinte-leise);max-width:30rem;cursor:pointer}
.demo-sim input{width:1.05rem;height:1.05rem;margin-top:.15rem;accent-color:var(--akzent);flex:none}
.demo-sim strong{color:var(--tinte)}
.demo-panel{padding:1.1rem 1.2rem 1.4rem;outline:none}
.demo-panel>.fliess{margin-bottom:.9rem;font-size:.93rem}
.demo-werkzeug{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.8rem}
.demo-alle{min-height:2.3rem;padding:.3rem .9rem;font-size:.86rem}
.demo-legende{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center}
.demo-legende-text{font-size:.8rem;color:var(--tinte-still)}
.erg.na{color:var(--tinte-still);border-color:var(--linie-stark);border-style:dashed}
.erg.offen{color:var(--signal);border-color:var(--signal);background:var(--signal-hell)}
.demo-schritte{list-style:none;padding:0;margin:0;border:1px solid var(--linie);border-radius:6px;overflow:hidden}
.demo-schritt{border-bottom:1px solid var(--linie)}
.demo-schritt:last-child{border-bottom:0}
.demo-schritt-knopf{width:100%;display:flex;align-items:center;gap:.8rem;background:var(--flaeche);border:0;border-radius:0;color:var(--tinte);text-align:left;padding:.75rem 1rem;min-height:3rem;font-weight:500;font-size:.95rem}
.demo-schritt-knopf:hover{filter:none;background:var(--flaeche-leise)}
.demo-schritt-knopf .demo-titel{flex:1}
.demo-schritt-knopf::after{content:"+";font-family:var(--mono);color:var(--akzent);font-size:1.1rem;width:1rem;text-align:center}
.demo-schritt-knopf[aria-expanded=true]::after{content:"\2013"}
.demo-schritt-knopf[aria-expanded=true]{background:var(--flaeche-leise)}
.demo-details{padding:.4rem 1rem 1rem 3.1rem;background:var(--flaeche-leise)}
@media (max-width:40rem){.demo-details{padding-left:1rem}}
.demo-details .werte{font-size:.88rem}
.demo-details ul{margin:0;padding-left:1.1rem}
.demo-aufgaben{list-style:none;padding:0 !important;display:flex;flex-direction:column;gap:.5rem}
.demo-aufgaben li{border:1px solid var(--linie);border-radius:4px;background:var(--flaeche);padding:.5rem .7rem;display:flex;flex-direction:column;gap:.1rem}
.demo-aufgaben span{font-family:var(--mono);font-size:.74rem;color:var(--tinte-leise)}
.demo-aufgaben small{color:var(--tinte-still)}
.auftauchen{animation:aufklappen .35s ease-out both;animation-delay:calc(var(--i,0) * 70ms)}
.demo-tabelle-rahmen{overflow-x:auto;border:1px solid var(--linie);border-radius:6px}
.demo-tabelle{border-collapse:collapse;width:100%;font-size:.88rem;min-width:36rem}
.demo-tabelle th,.demo-tabelle td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--linie);vertical-align:top}
.demo-tabelle th{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--tinte-still);background:var(--flaeche-leise)}
.demo-tabelle td{color:var(--tinte-leise)}
.demo-json-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.demo-kopieren{min-height:2.2rem;padding:.25rem .8rem;font-size:.82rem}
.demo-json{border:1px solid var(--linie);border-radius:4px;max-height:28rem;overflow:auto;color:var(--tinte)}
@media (max-width:40rem){.pb-tag{position:static;display:inline-block;margin:0 0 .35rem}}

/* ===== Anlagen-Check: Ergebnis aus der Runtime ===== */
.reihe.zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 .75rem;margin-top:0}
.check-ergebnis{display:flex;flex-direction:column;gap:.9rem;outline:none}
.check-ergebnis h2{font-size:1.3rem}
.ck-teil{border:1px solid var(--linie);border-radius:6px;background:var(--flaeche-leise);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.55rem}
.ck-verdikt{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.95rem;color:var(--tinte)}
.ck-pflichten{list-style:none;padding:0;margin:0;border-top:1px solid var(--linie)}
.ck-pflichten li{display:flex;flex-direction:column;gap:.1rem;padding:.55rem 0;border-bottom:1px solid var(--linie)}
.ck-titel{font-weight:600;font-size:.93rem;line-height:1.35}
.ck-frist{font-family:var(--mono);font-size:.76rem;color:var(--tinte-leise)}
.ck-frist.eilig{color:var(--signal)}
.ck-belege{font-family:var(--mono);font-size:.74rem;color:var(--tinte-still)}
.ck-rueckfragen{border:1px dashed var(--linie-stark);border-radius:6px;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.4rem}
.ck-rueckfragen button{width:100%;margin-top:.3rem}
.ck-bericht{font-size:.95rem;color:var(--tinte);border-left:3px solid var(--punch);padding-left:.8rem}