/* wz-basis.css — gemeinsamer Werkzeug-Rahmen (Runde „design3" P4, 29.09.2026).
   Wird NACH dem jeweiligen wz-*.css geladen und vereinheitlicht Eingaben (mind. 48 px,
   klarer Fokusring), wählbare Optionskarten, Ergebniskarten und Fortschritt.
   Nur Bildschirm (Druckfassungen von Vollmacht und Checkliste bleiben unberührt),
   nur Token mit Fallback, keine Logik: Klassen und Zustände kommen aus wz-*.js. */
@media screen {

/* 1 Kurz-gesagt-Kasten und Antwortblock oben */
.impb.fakten:is(.wzk-fakten,.wzp-fakten,.wzh-fakten,.wzl-fakten,.wzi-fakten,.wzc-fakten,.wzv-fakten),
.wzk-fakten,.wzp-fakten,.wzh-fakten{background:var(--surface,#fff);border:1px solid var(--border,rgba(15,27,36,.10));
  border-radius:var(--r-lg,16px);box-shadow:var(--sh-2,0 1px 2px rgba(15,27,36,.06),0 8px 24px -12px rgba(15,27,36,.18));
  padding:var(--sp-5,24px) clamp(20px,3vw,32px)}
.wzh-antwort{margin-bottom:var(--sp-6,32px)}

/* 2 Eingabefelder: 48 px, weiße Fläche, Fokusring Postblau */
:is(.wzk-form .field,.wzi-f,.wzv-form .field,.wzv-form) :is(input[type=text],input[type=number],input[type=email],input[type=tel],input[type=url],input[type=date],select),
.wzk-form .field input{min-height:48px;padding:12px 14px;font-size:16px;line-height:1.3;color:var(--ink-900,#0F1B24);
  background:var(--surface,#fff);border:1px solid rgba(15,27,36,.22);border-radius:var(--r-md,12px);
  box-shadow:inset 0 1px 2px rgba(15,27,36,.05);
  transition:border-color var(--t-fast,150ms) var(--ease-out,ease),box-shadow var(--t-fast,150ms) var(--ease-out,ease)}
:is(.wzi-f,.wzv-form) textarea{background:var(--surface,#fff);border:1px solid rgba(15,27,36,.22);border-radius:var(--r-md,12px);padding:12px 14px}
:is(.wzk-form,.wzi-f,.wzv-form) :is(input,select,textarea):hover{border-color:rgba(15,27,36,.4)}
:is(.wzk-form,.wzi-f,.wzv-form,.wzi-out) :is(input,select,textarea):focus{outline:2px solid var(--focus,#245D88);outline-offset:1px;
  border-color:var(--focus,#245D88);box-shadow:0 0 0 4px rgba(36,93,136,.16)}
:is(.wzk-form .field,.wzi-f,.wzv-form .field) label{font-size:14px;font-weight:600;color:var(--ink-900,#0F1B24)}
:is(.wzk-form .field,.wzv-form .field) small{font-size:13px;line-height:1.45;color:var(--ink-52)}

/* 3 Optionen als wählbare Karten */
:is(.wzk-form,.wzp-opts,.wzv-opts) .opt,.wzl-opt,.wzi-opt{min-height:48px;padding:12px 14px;align-items:flex-start;gap:12px;
  background:var(--surface,#fff);border:1px solid rgba(15,27,36,.16);border-radius:var(--r-md,12px);
  box-shadow:0 1px 2px rgba(15,27,36,.04);cursor:pointer;
  transition:border-color var(--t-fast,150ms) var(--ease-out,ease),box-shadow var(--t-fast,150ms) var(--ease-out,ease),background-color var(--t-fast,150ms) var(--ease-out,ease)}
:is(.wzk-form,.wzp-opts,.wzv-opts) .opt:hover,.wzl-opt:hover,.wzi-opt:hover{border-color:rgba(15,27,36,.34);box-shadow:var(--sh-1,0 1px 2px rgba(15,27,36,.06),0 0 0 1px rgba(15,27,36,.06))}
:is(.wzk-form,.wzp-opts,.wzv-opts) .opt:has(input:checked),.wzl-opt:has(input:checked),.wzi-opt:has(input:checked){
  border-color:var(--amber,#E8A33A);background:#FFFBF3;box-shadow:0 0 0 1px var(--amber,#E8A33A) inset,0 6px 16px -10px rgba(131,84,10,.45)}
:is(.wzk-form,.wzp-opts,.wzv-opts) .opt input,.wzl-opt input,.wzi-opt input{width:22px;height:22px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--amber-deep,#83540A)}
:is(.wzk-form,.wzp-opts,.wzv-opts) .opt:focus-within,.wzl-opt:focus-within,.wzi-opt:focus-within{outline:2px solid var(--focus,#245D88);outline-offset:2px}
:is(.wzk-form,.wzp-opts,.wzv-opts) .opt b{font-size:15.5px;color:var(--ink-900,#0F1B24)}

/* 4 Fragegruppen */
.wzl-fs,.wzi-fs{background:var(--surface-2,#FBF8F3);border:1px solid var(--border,rgba(15,27,36,.10));border-radius:var(--r-lg,16px);padding:18px 18px 20px}
.wzl-fs legend,.wzi-fs legend{font-size:16.5px}
.wzl-nr{background:var(--ink-900,#0F1B24);font-variant-numeric:tabular-nums}
.wzl-fs:has(input:checked) .wzl-nr{background:var(--amber-deep,#83540A)}
.wzp-schritt{background:var(--surface,#fff);border:1px solid var(--border,rgba(15,27,36,.10));border-radius:var(--r-lg,16px);
  box-shadow:var(--sh-2,0 1px 2px rgba(15,27,36,.06),0 8px 24px -12px rgba(15,27,36,.18));padding:clamp(20px,3vw,28px)}
.wzp-schritt legend{font-size:clamp(20px,2vw,24px)}
.wzp-nr{color:var(--amber-deep,#83540A)}

/* 5 Fortschritt (Paketfinder, Ladungsfähigkeits-Check, Checkliste) */
.wzp-fortschritt{gap:14px;margin-bottom:var(--sp-4,16px);font-size:13px;color:var(--ink-72);font-variant-numeric:tabular-nums}
.wzp-bahn,.wzc-balken{height:6px;border-radius:var(--r-pill,999px);background:rgba(15,27,36,.08)}
.wzp-balken{background:var(--amber,#E8A33A);border-radius:inherit;transition:width var(--t-med,220ms) var(--ease-out,ease)}
.wzl-prog{display:grid;gap:8px;margin:0 0 4px}
.wzl-prog__bar{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.wzl-prog__bar i{display:block;height:6px;border-radius:var(--r-pill,999px);background:rgba(15,27,36,.10);transition:background-color var(--t-med,220ms) var(--ease-out,ease)}
.wzl-grid:has(#wzl-f1 input:checked) .wzl-prog__bar i:nth-child(1),
.wzl-grid:has(#wzl-f2 input:checked) .wzl-prog__bar i:nth-child(2),
.wzl-grid:has(#wzl-f3 input:checked) .wzl-prog__bar i:nth-child(3),
.wzl-grid:has(#wzl-f4 input:checked) .wzl-prog__bar i:nth-child(4),
.wzl-grid:has(#wzl-f5 input:checked) .wzl-prog__bar i:nth-child(5),
.wzl-grid:has(#wzl-f6 input:checked) .wzl-prog__bar i:nth-child(6){background:var(--amber,#E8A33A)}
.wzl-form{counter-reset:wzl}
.wzl-fs:has(input:checked){counter-increment:wzl}
.wzl-prog__n{font-size:13px;font-weight:600;color:var(--ink-72);font-variant-numeric:tabular-nums}
.wzl-prog__n::before{content:counter(wzl) " von 6 Fragen beantwortet"}

/* 6 Ergebniskarten: große Zahl oder Aussage */
.wzk-erg,.wzl-aus,.wzi-aus{min-width:0}
.wzk-karte{background:var(--surface,#fff);border:1px solid var(--border,rgba(15,27,36,.10));border-radius:var(--r-lg,16px);
  box-shadow:var(--sh-1,0 1px 2px rgba(15,27,36,.06),0 0 0 1px rgba(15,27,36,.06));padding:20px}
.wzk-karte.is-best{border-color:var(--amber,#E8A33A);box-shadow:inset 0 3px 0 var(--amber,#E8A33A),var(--sh-3,0 2px 4px rgba(15,27,36,.06),0 18px 40px -18px rgba(15,27,36,.28))}
.wzk-karte__kopf h3{font-size:21px}
.wzk-tab tfoot tr:first-child th,.wzk-tab tfoot tr:first-child td{padding-top:12px}
.wzk-tab tfoot tr:first-child td{font-family:var(--font-display);font-size:24px;line-height:1.1;letter-spacing:-.01em;color:var(--ink-900,#0F1B24)}
.wzk-ansage{font-size:17px;line-height:1.45;color:var(--ink-900,#0F1B24)}
.wzp-res{background:var(--surface,#fff);border:1px solid var(--amber,#E8A33A);border-radius:var(--r-lg,16px);
  box-shadow:inset 0 3px 0 var(--amber,#E8A33A),var(--sh-3,0 2px 4px rgba(15,27,36,.06),0 18px 40px -18px rgba(15,27,36,.28));padding:clamp(22px,3vw,32px)}
.wzp-res__h{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.015em}
.wzp-preis{font-size:17px;font-variant-numeric:tabular-nums}
.wzl-ergebnis{border-radius:var(--r-lg,16px);box-shadow:var(--sh-3,0 2px 4px rgba(15,27,36,.06),0 18px 40px -18px rgba(15,27,36,.28));padding:20px 22px}
.wzl-ergebnis[data-stufe="offen"]{background:var(--surface,#fff)}
.wzl-titel{font-size:clamp(20px,1.8vw,23px);line-height:1.3}
.wzl-aus__hd,.wzk-erg>h3{font-size:20px}
.wzv-dok{border-radius:var(--r-md,12px);box-shadow:var(--sh-3,0 2px 4px rgba(15,27,36,.06),0 18px 40px -18px rgba(15,27,36,.28))}
.wzi-out textarea{border-radius:var(--r-md,12px);background:var(--surface,#fff);box-shadow:var(--sh-1,0 1px 2px rgba(15,27,36,.06),0 0 0 1px rgba(15,27,36,.06))}

/* 7 Knöpfe: .btn aus app.css, hier nur Mindesthöhe */
:is(.wzk-form,.wzp-nav,.wzp-cta,.wzl-cta,.wzi-knoepfe,.wzv-aktion,.wzk-cta) .btn{min-height:48px}
.wzp-nav .btn[disabled]{opacity:.5}

@media (prefers-reduced-motion:reduce){
  .wzl-prog__bar i,.wzp-balken,:is(.wzk-form,.wzp-opts,.wzv-opts) .opt,.wzl-opt,.wzi-opt{transition:none}
}
}

/* 8 Legende der Fragegruppen in der Karte statt auf der Kante */
@media screen {
  .wzl-fs>legend,.wzi-fs>legend{float:left;width:100%;padding:0;margin:0 0 10px}
  .wzl-fs>legend+*,.wzi-fs>legend+*{clear:both}
}