/* Aluvio Konfigurator – Etappe 4 (Entwurf). Alle Regeln unter .kf, damit nichts auf bestehende Seiten wirkt.
   Farben aus assets/produktkatalog.css übernommen. Keine externen Schriften, keine Bilder. */
.kf{
  --kf-bg:#f2f4f7;--kf-surface:#fff;--kf-ink:#13203a;--kf-muted:#586479;--kf-line:#8693a8;--kf-line-soft:#dce1e8;
  --kf-dark:#0d1a31;--kf-dark2:#14274a;--kf-gold:#dcab45;--kf-gold-deep:#8a5f10;
  --kf-ok:#1e7b4b;--kf-err:#9b1c1c;--kf-warn-bg:#fff4d6;--kf-disabled:#eceff3;
  --kf-r:10px;--kf-gap:16px;--kf-touch:44px;
  --kf-shadow:0 1px 2px rgba(13,26,49,.06),0 8px 24px -12px rgba(13,26,49,.18);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:16px;line-height:1.55;
  color:var(--kf-ink);background:var(--kf-bg);min-height:100vh;
}
.kf *,.kf *::before,.kf *::after{box-sizing:border-box}
.kf .wrap{max-width:880px;margin:0 auto;padding:clamp(16px,4vw,32px) clamp(16px,4.4vw,40px)}
.kf h1{font-size:clamp(1.5rem,4.5vw,2rem);line-height:1.2;margin:16px 0 0;color:var(--kf-dark)}
.kf h2{font-size:clamp(1.25rem,3.5vw,1.5rem);line-height:1.25;margin:0 0 4px;color:var(--kf-dark)}
.kf h2:focus,.kf h2:focus-visible{outline:none;box-shadow:none}
.kf .intro{color:var(--kf-muted);margin:0 0 20px}

/* Hinweis-Banner */
.kf .banner{background:var(--kf-warn-bg);border:1px solid var(--kf-gold-deep);border-radius:var(--kf-r);padding:10px 14px;font-size:14px;margin:0}

/* Fortschritt: Mobil nur aktueller Schritt, ab 640px alle */
.kf ol.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;list-style:none;margin:20px 0;padding:0;counter-reset:s}
.kf ol.steps li{font-size:13px;text-align:center;padding:8px 2px 6px;border-bottom:4px solid var(--kf-line-soft);color:var(--kf-muted);overflow-wrap:normal}
.kf ol.steps li.done{border-color:var(--kf-gold);color:var(--kf-ink)}
.kf ol.steps li[aria-current="step"]{border-color:var(--kf-dark);color:var(--kf-dark);font-weight:700}
@media (max-width:899px){
  .kf ol.steps{display:flex;gap:6px;align-items:flex-end}
  .kf ol.steps li{flex:0 0 8%;font-size:0;padding:0;height:8px;border-bottom:0;background:var(--kf-line-soft);border-radius:4px}
  .kf ol.steps li.done{background:var(--kf-gold)}
  .kf ol.steps li[aria-current="step"]{flex:1 1 0;min-width:0;font-size:14px;height:auto;padding:4px 0;background:none;border-bottom:4px solid var(--kf-dark);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
}

/* Karte */
.kf .card{background:var(--kf-surface);border:1px solid var(--kf-line-soft);border-radius:var(--kf-r);box-shadow:var(--kf-shadow);padding:clamp(16px,4vw,28px)}

/* Formularelemente */
.kf label{display:block;font-weight:600;margin:16px 0 4px}
.kf input,.kf select,.kf textarea{width:100%;min-height:var(--kf-touch);padding:8px 12px;border:1px solid var(--kf-line);border-radius:8px;font:inherit;color:var(--kf-ink);background:#fff}
.kf textarea{resize:vertical}
.kf select:disabled{background:var(--kf-disabled);color:var(--kf-muted);cursor:not-allowed}
.kf input[aria-invalid="true"]{border:2px solid var(--kf-err)}
.kf .err{color:var(--kf-err);font-size:14px;margin-top:4px}
.kf .err::before{content:"Fehler: ";font-weight:700}
.kf .check{display:flex;gap:12px;align-items:flex-start;font-weight:400;padding:8px 0}
.kf .check input{width:24px;min-width:24px;min-height:24px;margin-top:2px}

/* Platzhalter-Kennzeichnung (entfällt bei Freigabe) */
.kf .ph{display:inline-block;background:var(--kf-disabled);border:1px dashed var(--kf-line);border-radius:6px;padding:2px 8px;font-size:12px;font-weight:400;color:var(--kf-muted);margin-left:6px;vertical-align:middle}

/* Erklärungen */
.kf details{margin-top:6px;color:var(--kf-muted);font-size:14px}
.kf summary{cursor:pointer;min-height:var(--kf-touch);display:flex;align-items:center;color:var(--kf-gold-deep);font-weight:600}

/* Vorschau */
.kf .preview{margin-top:24px;border:1px dashed var(--kf-line);border-radius:var(--kf-r);padding:16px;text-align:center;color:var(--kf-muted);background:#fafbfc}
.kf .preview svg{max-width:100%;height:120px;margin-bottom:8px}

/* Zusammenfassung */
.kf dl{margin:0}
.kf dt{font-weight:600;margin-top:12px}
.kf dd{margin:0;color:var(--kf-muted)}

/* Buttons */
.kf .nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.kf button{min-height:var(--kf-touch);min-width:var(--kf-touch);padding:0 22px;border-radius:8px;border:2px solid var(--kf-dark);font:inherit;font-weight:600;cursor:pointer;background:var(--kf-dark);color:#fff}
.kf button:hover{background:var(--kf-dark2);border-color:var(--kf-dark2)}
.kf button.ghost{background:#fff;color:var(--kf-dark)}
.kf button.ghost:hover{background:var(--kf-bg)}
.kf button:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:479px){.kf .nav{flex-direction:column-reverse}.kf .nav button{width:100%}}

/* Fokus: dunkler Ring mit hellem Abstand, auf hellem Grund ≥3:1 */
.kf :focus-visible{outline:3px solid var(--kf-dark);outline-offset:3px;box-shadow:0 0 0 3px var(--kf-gold)}

.kf .note{font-size:13px;color:var(--kf-muted);margin-top:16px}

@media (prefers-reduced-motion:reduce){.kf *{transition:none!important;animation:none!important}}
@media (forced-colors:active){.kf .card,.kf .preview{border:1px solid CanvasText}.kf ol.steps li[aria-current="step"]{border-color:Highlight}}

/* Etappe 5/6 */
.kf .err-summary{border:2px solid var(--kf-err);border-radius:8px;padding:12px 16px;margin:0 0 16px;background:#fff}
.kf .err-summary ul{margin:6px 0 0;padding-left:20px}
.kf .err-summary a{color:var(--kf-err);font-weight:600;text-decoration:underline}
.kf select[multiple]{min-height:120px}
.kf .btn{display:inline-flex;align-items:center;min-height:var(--kf-touch);padding:0 22px;border-radius:8px;border:2px solid var(--kf-dark);background:var(--kf-dark);color:#fff;font-weight:600;text-decoration:none}
.kf textarea[readonly]{background:#fafbfc;font-family:ui-monospace,Consolas,monospace;font-size:14px}
.kf .banner-dummy{background:#fde8e8;border:2px solid var(--kf-err);border-radius:var(--kf-r);padding:10px 14px;font-size:14px;margin:0 0 12px;color:#5b0f0f}
.kf [hidden]{display:none!important}

/* Einbindung: Kopf- und Fußzeile der eigenständigen Seite */
.kf .kf-skip{position:absolute;left:16px;top:-80px;background:#fff;color:var(--kf-dark);padding:12px 16px;border-radius:6px;z-index:10}
.kf .kf-skip:focus{top:8px}
.kf .kf-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--kf-dark);color:#fff;padding:12px clamp(16px,4.4vw,40px)}
.kf .kf-brand{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700;letter-spacing:.08em;text-decoration:none;min-height:var(--kf-touch)}
.kf .kf-back{color:#fff;text-decoration:underline;min-height:var(--kf-touch);display:inline-flex;align-items:center}
.kf .kf-header :focus-visible,.kf .kf-footer :focus-visible{outline:3px solid #fff;box-shadow:none}
.kf .kf-footer{padding:24px clamp(16px,4.4vw,40px);font-size:14px;color:var(--kf-muted);text-align:center}
.kf .kf-footer a{color:var(--kf-ink);text-decoration:underline;display:inline-block;min-height:var(--kf-touch);line-height:var(--kf-touch)}