/**
 * Website-Konfigurator – übernimmt Farben, Schrift und Rundung der Website (basis: --ui-*), sonst eigene Werte.
 * Anpassbar im Template, z. B.: .kf { --kf-akzent: #2a69b8; }
 * @copyright (C) 2026 Muster Webdesign
 * @license   GNU General Public License version 2 or later
 */
.kf {
  --kf-akzent: var(--ui-color-action, #1f5fa8);
  --kf-auf-akzent: var(--ui-color-on-action, #ffffff);
  --kf-text: var(--ui-color-text, inherit);
  --kf-titel: var(--ui-color-heading, inherit);
  --kf-gedaempft: var(--ui-color-text-muted, #5c6670);
  --kf-rand: var(--ui-color-border, #dde3ea);
  --kf-rand-stark: var(--ui-color-border-strong, #b9c3ce);
  --kf-flaeche: var(--ui-color-surface, #f4f6f8);
  --kf-karte: var(--ws-karte, var(--ui-color-bg, #ffffff));
  --kf-radius: var(--ui-radius, 8px);
  --kf-radius-klein: var(--ui-radius-sm, 6px);
  --kf-pille: var(--ui-radius-pill, 999px);
  color: var(--kf-text);
  scroll-margin-top: 6rem;
}

.kf [hidden] { display: none !important; }

/* Fortschritt */
.kf__fortschritt ol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; padding: 0; list-style: none; counter-reset: none; }
.kf__fortschritt button {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.9rem 0.4rem 0.4rem;
  font: inherit; font-size: 0.875rem; color: var(--kf-gedaempft);
  background: var(--kf-karte); border: 1px solid var(--kf-rand); border-radius: var(--kf-pille); cursor: pointer;
}
.kf__fortschritt button[aria-current] { color: var(--kf-titel); border-color: var(--kf-akzent); font-weight: 600; }
.kf__fortschritt button.is-erledigt .kf__nr { background: var(--kf-akzent); color: var(--kf-auf-akzent); border-color: var(--kf-akzent); }
.kf__nr {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none;
  border: 1px solid var(--kf-rand-stark); border-radius: 50%; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.kf__fortschritt button[aria-current] .kf__nr { background: var(--kf-akzent); color: var(--kf-auf-akzent); border-color: var(--kf-akzent); }
@media (max-width: 47.99rem) { .kf__schritt-titel { display: none; } .kf__fortschritt button { padding-right: 0.4rem; } .kf__fortschritt button[aria-current] .kf__schritt-titel { display: inline; } .kf__fortschritt button[aria-current] { padding-right: 0.9rem; } }
/* Smartphone: Leiste in einer Zeile, etwas kompakter; reicht der Platz nicht (lange Schrittnamen), wird sie seitlich
   verschiebbar statt umzubrechen. Innenabstand, damit der Fokusrahmen nicht abgeschnitten wird. */
@media (max-width: 47.99rem) {
  .kf__fortschritt ol { flex-wrap: nowrap; gap: 0.375rem; margin-inline: -0.25rem; padding: 0.25rem; overflow-x: auto; scrollbar-width: thin; }
  .kf__fortschritt li { flex: none; }
  .kf__fortschritt button { gap: 0.4rem; padding: 0.3rem; }
  .kf__fortschritt button[aria-current] { padding-right: 0.75rem; }
  .kf__nr { width: 1.6rem; height: 1.6rem; }
}

/* Aufbau: Schritte links, Zusammenstellung rechts (Smartphone: darunter) */
.kf__layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 64rem) { .kf__layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; } }

.kf__schritt { min-width: 0; margin: 0; padding: 0; border: 0; }
.kf__schritt + .kf__schritt { margin-top: 2.5rem; }
.kf__schritt legend { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; padding: 0; color: var(--kf-titel); font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.kf__schritt legend:focus { outline: none; }
.kf__klein { margin: 0 0 1.25rem; color: var(--kf-gedaempft); font-size: 0.95rem; }
.kf__pflicht { margin: -0.5rem 0 1rem; color: #b3261e; font-weight: 600; }

/* Auswahlkarten (Radio/Checkbox) */
.kf__karten { display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .kf__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .kf__karten--klein { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kf__karte { position: relative; display: block; cursor: pointer; }
.kf__karte input { position: absolute; top: 1rem; right: 1rem; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--kf-akzent); }
/* Auswahlkreis einheitlich unten rechts im Textbereich (bei Bildkarten nicht auf dem Bild; rechts ist dafür Platz frei) */
.kf__karte input { top: auto; bottom: 1rem; }
/* Karten ohne Bild in einer Gruppe mit Bildkarten (Branche) nicht auf Bildhöhe strecken */
.kf__karten:has(img) .kf__karte:not(:has(img)) { align-self: start; }
.kf__karte-inhalt {
  display: flex; flex-direction: column; gap: 0.35rem; height: 100%; padding: 1rem 3rem 1rem 1.1rem; box-sizing: border-box;
  background: var(--kf-karte); border: 1px solid var(--kf-rand-stark); border-radius: var(--kf-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kf__karte-inhalt img { display: block; width: calc(100% + 4.1rem); max-width: none; height: auto; margin: -1rem -3rem 0.5rem -1.1rem; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: var(--kf-radius) var(--kf-radius) 0 0; border-bottom: 1px solid var(--kf-rand); }
.kf__karte strong { color: var(--kf-titel); font-weight: 600; }
.kf__text { color: var(--kf-gedaempft); font-size: 0.9rem; }
.kf__preis { margin-top: auto; padding-top: 0.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kf__karte:hover .kf__karte-inhalt { border-color: var(--kf-akzent); }
.kf__karte input:checked + .kf__karte-inhalt { border-color: var(--kf-akzent); box-shadow: inset 0 0 0 1px var(--kf-akzent); }
.kf__karte input:focus-visible + .kf__karte-inhalt { outline: 3px solid var(--kf-akzent); outline-offset: 2px; }
.kf__demo { margin: 1rem 0 0; }
.kf__demo a { font-weight: 600; }

/* Seitenzahl */
.kf__seiten { margin-top: 1.5rem; }
.kf__seiten > label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
.kf__zaehler { display: inline-flex; align-items: stretch; border: 1px solid var(--kf-rand-stark); border-radius: var(--kf-pille); overflow: hidden; }
.kf__zaehler button { width: 2.75rem; font: inherit; font-size: 1.25rem; color: var(--kf-titel); background: var(--kf-karte); border: 0; cursor: pointer; }
.kf__zaehler button:focus-visible { outline: 3px solid var(--kf-akzent); outline-offset: -3px; }
.kf__zaehler input { width: 4rem; min-height: 2.75rem; padding: 0; font: inherit; font-weight: 600; text-align: center; color: var(--kf-titel); background: var(--kf-karte); border: 0; border-inline: 1px solid var(--kf-rand); -moz-appearance: textfield; }
.kf__zaehler input::-webkit-inner-spin-button, .kf__zaehler input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.kf__seiten .kf__klein { margin: 0.5rem 0 0; }

.kf__inklusive { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: var(--kf-radius); background: var(--kf-flaeche); }
.kf__inklusive p { margin: 0 0 0.5rem; }
.kf__inklusive ul { margin: 0; padding-left: 1.2rem; columns: 2 14rem; column-gap: 2rem; }
.kf__inklusive li { break-inside: avoid; }

/* Kontaktfelder */
.kf__felder { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .kf__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kf__feld--breit { grid-column: 1 / -1; } }
.kf__feld label { display: block; margin-bottom: 0.35rem; font-weight: 600; }
.kf__optional { color: var(--kf-gedaempft); font-weight: 400; }
.kf__feld input, .kf__feld textarea {
  box-sizing: border-box; width: 100%; min-height: 2.75rem; padding: 0.6rem 0.8rem; font: inherit; color: var(--kf-text);
  background: var(--kf-karte); border: 1px solid var(--kf-rand-stark); border-radius: var(--kf-radius-klein);
}
.kf__feld input:focus, .kf__feld textarea:focus { outline: none; border-color: var(--kf-akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kf-akzent) 30%, transparent); }
.kf__feld [aria-invalid="true"] { border-color: #b3261e; }
.kf__falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kf__datenschutz { margin: 1rem 0 0; color: var(--kf-gedaempft); font-size: 0.875rem; }
.kf__datenschutz a { color: inherit; text-decoration: underline; }
.kf__fehler { margin: 1rem 0 0; color: #b3261e; font-weight: 600; }
.kf__senden { margin-top: 1.25rem; }

/* Weiter / Zurück */
.kf__navigation { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--kf-rand); }
.kf__weiter { margin-left: auto; }
.kf__zurueck { padding: 0.6rem 1.2rem; font: inherit; color: var(--kf-titel); background: none; border: 1px solid var(--kf-rand-stark); border-radius: var(--kf-pille); cursor: pointer; }
.kf__senden:not(.ww-btn), .kf__weiter:not(.ww-btn) { padding: 0.75rem 1.5rem; font: inherit; font-weight: 600; color: var(--kf-auf-akzent); background: var(--kf-akzent); border: 0; border-radius: var(--kf-pille); cursor: pointer; }
.kf__senden[disabled] { opacity: 0.7; cursor: progress; }

/* Zusammenstellung */
.kf__summe { padding: 1.5rem; border: 1px solid var(--kf-rand); border-radius: var(--kf-radius); background: var(--kf-flaeche); }
@media (min-width: 64rem) { .kf__summe { position: sticky; top: 6rem; } }
.kf__summe-titel { margin: 0 0 0.75rem; color: var(--kf-titel); font-weight: 600; }
.kf__zeilen { margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.kf__zeilen li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--kf-rand); }
.kf__zeilen li span:last-child { flex: none; font-variant-numeric: tabular-nums; }
.kf__gesamt { display: flex; flex-direction: column; margin: 1rem 0 0; }
.kf__gesamt-label { color: var(--kf-gedaempft); font-size: 0.875rem; }
.kf__gesamt strong { color: var(--kf-titel); font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kf__monatlich { margin: 0.25rem 0 0; font-weight: 600; }
.kf__hinweis, .kf__zusage { margin: 1rem 0 0; color: var(--kf-gedaempft); font-size: 0.85rem; }
.kf__zusage { color: var(--kf-titel); font-weight: 600; }

.kf__danke { padding: 1.5rem; border: 1px solid var(--kf-akzent); border-radius: var(--kf-radius); }
.kf__danke p:first-child { margin-top: 0; font-weight: 600; }
.kf__danke:focus { outline: none; }

@media (prefers-reduced-motion: reduce) { .kf__karte-inhalt { transition: none; } }