/* Anbindung des KI-Fahrplans an den Dark-Mode-Schalter des Themes.
   Das mitgelieferte fahrplan.css folgt nur der Betriebssystem-Einstellung (prefers-color-scheme).
   Der Schalter des Themes setzt aber data-theme="dark" am Wurzelelement (html), also an einem
   Vorfahren. Diese Datei wird nach fahrplan.css geladen und legt die Palette deshalb nach dem
   Theme-Schalter fest, unabhaengig vom Betriebssystem. Hell: Werte aus fahrplan.css. Dunkel: Rollen des Themes (Seitenhintergrund, Flaechen, Text),
   damit der Fahrplan nicht als fast schwarze Insel auf der dunkelblauen Seite steht. */
html:not([data-theme="dark"]) .kf-fp{
  --bg:#F6F8FA; --surface:#FFFFFF; --surface-2:#EEF3F7; --fg:#2B2B2B; --muted:#6F7B85; --line:#D6DEE5;
  --accent:#124D6E; --accent-fg:#FFFFFF; --hi:#FFC403; --ok:#3B6C04; color-scheme:light }
[data-theme="dark"] .kf-fp{
  --bg:var(--kf-primary-color-3,#0E374D);
  --surface:color-mix(in srgb,#fff 7%,var(--kf-primary-color-3,#0E374D));
  --surface-2:var(--kf-shade-1-0,#0A2E3F);
  --fg:var(--kf-shade-2-6,#f2f2f2); --muted:#B4C6D2; --line:rgba(255,255,255,.18);
  --accent:#7FB6D9; --accent-fg:#0B2A3B; --hi:#FFC403; --ok:#9BD15F; color-scheme:dark }

/* Theme-Durchschlag: Das Theme setzt globale Element-Regeln (h1-h4, button, input[type]), die dort
   greifen, wo fahrplan.css nichts setzt. Hier auf die Werte zurueck, die fahrplan.css erwartet
   (verglichen per berechneter Stile mit und ohne Theme-CSS). Klassenregeln aus fahrplan.css
   behalten Vorrang, weil sie spezifischer sind. */
.kf-fp h1,.kf-fp h2,.kf-fp h3,.kf-fp h4{color:inherit;font-family:inherit;letter-spacing:normal}
.kf-fp h2,.kf-fp h3,.kf-fp h4{line-height:inherit}
.kf-fp h2{font-weight:700}
.kf-fp button{letter-spacing:normal}
.kf-fp input[type]{margin-bottom:0}
.kf-fp .cb a{text-decoration:underline}

/* Fehler in fahrplan.css Zeile 30: Der Mobil-Breakpoint heisst dort ".grid" statt ".kf-fp .grid" und ist
   damit schwaecher als die Desktop-Regel (".kf-fp .grid", Zeile 29). Unter 900 px blieb es bei zwei
   Spalten, die Ergebnisspalte ueberdeckte die Karten. Hier mit gleicher Spezifitaet nachgezogen. */
@media (max-width:900px){.kf-fp .grid{grid-template-columns:minmax(0,1fr)}}

/* Gestaltung im Seitenrahmen: keine eigene Flaeche hinter dem Block (die Seite liefert den Hintergrund),
   Kopfband als abgerundete Karte buendig mit dem Inhalt statt per negativem Rand ueber ihn hinaus. */
.kf-fp{background:transparent}
.kf-fp .wrap{padding-inline:0}
.kf-fp header.top{max-width:1180px;margin:16px auto 0;border-radius:12px;padding:28px 24px}
.kf-fp header.top .in{max-width:none}
.kf-fp .sub{opacity:.92;font-weight:400}
.kf-fp aside.sum{box-shadow:0 8px 24px rgba(0,0,0,.18)}
.kf-fp .setup input,.kf-fp .setup select,.kf-fp .inputs input{background:var(--surface-2)}
.kf-fp input::placeholder{color:var(--muted);opacity:.75}
.kf-fp .card,.kf-fp .setup,.kf-fp .lvl{box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* Standort-Check: ruhiger und besser lesbar. Eine Ebene je Zeile in voller Breite. Die Fragen sind durch
   Linien getrennt, die vier Antworten haben Luft und eine ordentliche Klickflaeche. Bei genug Breite stehen
   Frage und Antworten nebeneinander, sonst untereinander, in sehr schmalen Karten zwei mal zwei (das
   Original sprengte mit "angekommen" die Spalte). Die Karte ist der Container fuer die Breitenabfragen. */
.kf-fp .check{grid-template-columns:minmax(0,1fr);gap:16px}
.kf-fp .lvl{container-type:inline-size;padding:20px 22px 4px;gap:0}
.kf-fp .lvl h3{margin:0 0 14px;font-size:16px}
.kf-fp .lvl .hint{padding-bottom:16px;line-height:1.5}
.kf-fp .q{display:grid;gap:12px;padding:16px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.45}
.kf-fp .q .opts{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kf-fp .q .opts label{min-height:42px;padding:8px 4px;font-size:12.5px;line-height:1.2;border-radius:8px;transition:border-color .15s,background-color .15s,color .15s}
.kf-fp .q .opts label:hover{border-color:var(--accent);color:var(--fg)}
.kf-fp .q .opts label:has(input:checked){font-weight:700}
@container (min-width:700px){
  .kf-fp .q{grid-template-columns:minmax(0,1fr) 480px;align-items:center;column-gap:28px}
}
@container (max-width:480px){
  .kf-fp .q .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kf-fp .q .opts label{min-height:44px;font-size:13px}
}

/* ===== Schritt-Ablauf (ab v1.10.0) =====
   Aufbau wie bei der KI-Faktenseite: links die Schrittleiste, rechts ein Schritt mit Zurueck/Weiter.
   Rechnung, gesendete Daten und Druckbogen sind unveraendert, nur die Fuehrung ist neu. */
.kf-fp .wiz{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;margin-top:28px;align-items:start}
.kf-fp .rail{position:sticky;top:16px;display:grid;gap:6px}
.kf-fp .rail button{display:flex;gap:10px;align-items:center;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);font:inherit;font-size:14px;font-weight:600;line-height:1.25;cursor:pointer}
.kf-fp .rail button .n{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--surface-2);color:var(--muted)}
.kf-fp .rail button.done .n{background:var(--hi);color:#124D6E}
.kf-fp .rail button[aria-current="step"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.kf-fp .rail button[aria-current="step"] .n{background:var(--accent);color:var(--accent-fg)}
.kf-fp .rail button:disabled{opacity:.5;cursor:default}
.kf-fp .panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px 26px 26px;box-shadow:0 1px 2px rgba(0,0,0,.08);min-width:0}
.kf-fp .a-mstep{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kf-fp .prog{height:4px;border-radius:2px;background:var(--surface-2);margin:10px 0 18px;overflow:hidden}
.kf-fp .prog i{display:block;height:100%;background:var(--hi);border-radius:2px}
.kf-fp .panel h2{margin:0 0 6px;font-size:clamp(20px,2.6vw,26px);font-weight:800;line-height:1.2;color:var(--fg);outline:none}
.kf-fp .panel h3.block{margin:26px 0 10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kf-fp .a-lead{margin:6px 0 20px;max-width:64ch;color:var(--muted);font-size:15px}
.kf-fp .panel .setup{background:transparent;border:0;box-shadow:none;padding:0}
.kf-fp .panel .check{gap:12px}
.kf-fp .panel .card{box-shadow:none}
.kf-fp .panel .card.on{border-color:var(--line);box-shadow:none}

.kf-fp .a-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.kf-fp .a-right{display:flex;gap:10px;flex-wrap:wrap}
.kf-fp .a-btn{font:inherit;font-weight:700;font-size:15px;padding:11px 20px;border-radius:8px;border:1.5px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer}
.kf-fp .a-btn.cta{background:var(--hi);border-color:var(--hi);color:#124D6E}
.kf-fp .a-btn.ghost{border-color:var(--line);color:var(--fg)}
.kf-fp .a-btn:hover{filter:brightness(1.05)}
.kf-fp .panel > .msg.err{margin-top:12px;font-size:14px;font-weight:600;color:var(--kf-rot);min-height:0}
[data-theme="dark"] .kf-fp .panel > .msg.err{color:#FFB4B4}
.kf-fp .panel > .msg.err:empty{display:none}

.kf-fp .pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.kf-fp .pickbtn{display:grid;gap:4px;align-content:start;text-align:left;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);font:inherit;cursor:pointer;min-width:0}
.kf-fp .pickbtn .num{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.kf-fp .pickbtn b{font-size:15px;line-height:1.3}
.kf-fp .pickbtn small{font-size:12.5px;color:var(--muted);line-height:1.4}
.kf-fp .pickbtn .state{margin-top:6px;justify-self:start;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid var(--accent);color:var(--accent)}
.kf-fp .pickbtn.on{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.kf-fp .pickbtn.on .state{background:var(--accent);color:var(--accent-fg)}
.kf-fp .pickbtn:focus-visible{outline:3px solid var(--hi);outline-offset:2px}

.kf-fp .live{min-height:1.5em;margin:0 0 10px;font-weight:700;font-size:14px;color:var(--accent)}
.kf-fp .inputs .more{grid-column:1/-1;border:1px dashed var(--line);border-radius:8px;padding:8px 12px}
.kf-fp .inputs .more summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--accent)}
.kf-fp .inputs .more summary:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
.kf-fp .inputs .more .corr{margin-top:10px}

.kf-fp .panel .sum{position:static;background:var(--kf-blau);color:#fff;border-radius:10px;padding:20px;display:grid;gap:14px;margin-top:18px;box-shadow:none}
.kf-fp .panel .sum h2{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;font-weight:700;color:#fff}
.kf-fp .panel .lead{border-top:0;padding-top:0}
.kf-fp .wiz-foot{display:flex;gap:18px;justify-content:flex-end;margin-top:10px}
.kf-fp .linkbtn{background:none;border:0;padding:4px;font:inherit;font-size:13px;color:var(--muted);text-decoration:underline;cursor:pointer}
.kf-fp .linkbtn:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
.kf-fp .print-back{margin-top:10px}
@media (max-width:900px){
  .kf-fp .wiz{grid-template-columns:minmax(0,1fr);margin-top:20px}
  .kf-fp .rail{display:none}
  .kf-fp .panel{padding:18px 16px 20px}
  .kf-fp .a-actions{flex-direction:column-reverse;align-items:stretch}
  .kf-fp .a-right{flex-direction:column-reverse}
  .kf-fp .a-btn{width:100%}
}