/* =========================================================================
   KSAplate — Fahrzeug-Assistent (Bewertung und Inserat), 2026-10-07

   EINE Strecke, zwei Absichten: Bewertung und Inserat laufen durch dieselbe
   Huelle, nur Titel, Fortschritt und Ziel unterscheiden sich.

   Aufbau, Masse und Typografie sind an der Vorlage vermessen (Chrome, zuletzt
   08.10.2026 bei 1720 px):
     Flaeche #101014 · Karte #1B1B21, 972 breit, Radius 16, Innenabstand 48
     Inhaltsbreite darin 876; die Feldspalte 579 steht am ANFANG, nicht mittig
     Feldflaeche #2A2B33, Rahmen 1px #7E838F, Text #E6EAF0, gedaempft #5D616B
     Die Vorlage skaliert den Assistenten auf 90 % (html 14.4px): Fliesstext,
     Etiketten, Felder und Knoepfe rendern 12.6/18, der Titel 28.8/36,
     Abschnittsueberschriften 14.4/18 Gewicht 600. Unter 1024 px setzen wir
     wieder 14/20 — so klein liest das auf einem Telefon niemand.
     Fortschrittsbalken 8 hoch, Radius 100
     Markenkachel 182 x 58, Radius 4, Rahmen #7E838F, Flaeche #14141A
     Auswahlfeld 537 x 44 Radius 8, innen 0 51px 0 14px, rechts 42 fuers Haekchen
     Kilometerfeld 239 x 44, Einheit im Feld
     Handlungsknopf 281 x 44, Radius 8, innen 12/16, 12.6 Gewicht 600

   Die Handlungsfarbe ist NICHT uebernommen: --kw-accent ist Saudi-Gruen.
   Eine fremde Markenfarbe als eigene Handlungsfarbe waere etwas anderes als
   eine uebernommene Struktur. Die Farbe haengt an einer Variablen und laesst
   sich an genau einer Stelle aendern.

   Dunkel wird hier EXPLIZIT gesetzt, nicht ueber prefers-color-scheme: auf
   dieser Seite hat ein Farbschema-Umschalter schon einmal einen Fehler
   erzeugt. Namensraum .kw-, logische Eigenschaften durchgaengig.
   ========================================================================= */

.kw {
    --kw-bg: #101014;
    --kw-card: #1B1B21;
    --kw-field: #2A2B33;
    --kw-ink: #E6EAF0;
    --kw-ink-2: #9ea4ad;
    --kw-ink-3: #5D616B;
    --kw-line: #7E838F;
    --kw-accent: var(--ksa-green, #006C35);
    --kw-accent-hi: #00A651;
    --kw-err: #ff6b5e;

    /* Randlos: die dunkle Flaeche laeuft bis an die Fensterkanten. Die
       Scrollbar muss abgezogen werden, sonst scrollt die Seite seitwaerts. */
    width: calc(100vw - var(--kc-scrollbar, 0px));
    margin-inline: calc(50% - 50vw + var(--kc-scrollbar, 0px) / 2);
    padding: 0 16px 56px;
    background: var(--kw-bg);
    color: var(--kw-ink);
    /* Die Vorlage rendert den Assistenten auf 90 %; unter 1024 px waere das
       auf einem Telefon unlesbar, dort bleibt es bei 14/20. */
    font-size: 14px;
    line-height: 20px;
}
@media (min-width: 1024px) {
    .kw { font-size: 12.6px; line-height: 18px; }
}
.kw *, .kw *::before, .kw *::after { box-sizing: border-box; }
.kw [x-cloak] { display: none !important; }
.kw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[dir="rtl"] .kw-flip { transform: scaleX(-1); }

/* ====================================================== Fortschrittsleiste */
.kw-bar { display: flex; align-items: center; gap: 20px; max-width: 972px; margin: 0 auto; padding: 18px 0 22px; }
.kw-bar-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--kw-ink-2); font-size: 18px; }
.kw-bar-track { flex: 1; min-width: 0; height: 8px; border-radius: 100px; background: var(--kw-field); overflow: hidden; }
.kw-bar-fill { height: 100%; border-radius: 100px; background: var(--kw-accent); transition: width .35s ease; }
.kw-bar-val { flex: none; text-align: end; min-width: 150px; }
.kw-bar-k { display: block; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--kw-ink); }
.kw-bar-v { display: block; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--kw-accent-hi); font-variant-numeric: tabular-nums; }
.kw-bar-n { display: block; font-size: 12px; line-height: 16px; color: var(--kw-ink-3); }

/* ================================================================== Karte */
.kw-card { max-width: 972px; margin-inline: auto; padding: 24px 16px 32px; border-radius: 16px; background: var(--kw-card); }
/* Titel, Unterzeile und Abschnittsueberschriften laufen ueber die volle
   Inhaltsbreite (876), die Felder stehen in einer 579er Spalte am Anfang —
   genau so steht es bei der Vorlage. */
.kw-col { max-width: 876px; margin-inline: auto; }
.kw-h { margin: 0; font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.kw-p { margin: 0 0 24px; font-size: 14px; line-height: 20px; color: var(--kw-ink); }
@media (min-width: 1024px) {
    .kw-card { padding: 48px 48px 40px; }
    .kw-h { font-size: 28.8px; line-height: 36px; }
    .kw-p { font-size: 12.6px; line-height: 18px; }
}

/* =============================================================== Feldzeile */
.kw-g { max-width: 579px; margin-bottom: 16px; }
.kw-l { display: block; padding-bottom: 2px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--kw-ink); }
@media (min-width: 1024px) {
    .kw-l { font-size: 12.6px; line-height: 18px; }
}
/* Feld + Haekchen: 42px rechts bleiben frei, damit die Feldbreite nicht
   springt, sobald die Eingabe gueltig wird. */
.kw-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; }
.kw-row--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px; gap: 12px; align-items: center; }
.kw-ctrl { position: relative; min-width: 0; }
.kw-tick { display: grid; place-items: center; color: var(--kw-accent-hi); font-size: 15px; opacity: 0; transition: opacity .15s ease; }
.kw-tick.is-on { opacity: 1; }

/* Jeder Eingabetyp, der in dieser Strecke vorkommt -- eine vergessene Variante
   erscheint sonst als nackter Text ohne Feldflaeche (passiert mit "email"). */
.kw select,
.kw input[type="text"],
.kw input[type="tel"],
.kw input[type="email"],
.kw input[type="number"],
.kw input[type="search"],
.kw input[type="url"],
.kw input[type="date"] {
    width: 100%; height: 44px; padding-inline: 14px;
    border: 1px solid var(--kw-line); border-radius: 8px;
    background: var(--kw-field); color: var(--kw-ink);
    font-size: 14px; line-height: 20px; font-family: inherit;
    appearance: none; -webkit-appearance: none;
}
@media (min-width: 1024px) {
    .kw select, .kw input[type="text"], .kw input[type="tel"],
    .kw input[type="email"], .kw input[type="number"], .kw input[type="search"],
    .kw input[type="url"], .kw input[type="date"],
    .kw textarea { font-size: 12.6px; line-height: 18px; }
}
.kw select {
    padding-inline-end: 51px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ea4ad' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 6.2l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: 15px; background-position: right 14px center;
}
[dir="rtl"] .kw select { background-position: left 14px center; padding-inline-end: 14px; padding-inline-start: 44px; }
.kw select option { background: var(--kw-card); color: var(--kw-ink); }
.kw ::placeholder { color: var(--kw-ink-3); opacity: 1; }
.kw select:focus, .kw input:focus { outline: 0; border-color: var(--kw-accent-hi); box-shadow: 0 0 0 3px rgba(0,166,81,.2); }
.kw select:disabled, .kw input:disabled { color: var(--kw-ink-3); cursor: not-allowed; opacity: .65; }
.kw input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; cursor: pointer; }
.kw-unit { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); color: var(--kw-ink-3); font-size: 14px; pointer-events: none; }
.kw-err { display: block; margin-top: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--kw-err); }

/* ========================================================= Markenkacheln */
.kw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 16px; max-width: 579px; margin-bottom: 16px; }
.kw-tile {
    position: relative; display: grid; place-items: center; height: 58px; padding: 8px;
    border: 1px solid var(--kw-line); border-radius: 4px; background: #14141A;
    color: var(--kw-ink); font-family: inherit; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.kw-tile:hover { border-color: var(--kw-ink-2); }
.kw-tile.is-on { border-color: var(--kw-accent-hi); box-shadow: 0 0 0 1px var(--kw-accent-hi); }
.kw-tile:focus-visible { outline: 2px solid var(--kw-accent-hi); outline-offset: 2px; }
/* Die Logos sind ueberwiegend dunkle Vektoren -- auf dunklem Grund waeren sie
   unsichtbar. Aufhellen statt einfaerben erhaelt die Form der Wortmarken. */
.kw-tile img { max-width: 84px; max-height: 38px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.kw-tile.is-on img { opacity: 1; }
.kw-tile span { font-size: 14px; font-weight: 700; letter-spacing: .01em; }

/* ================================================================ Knoepfe */
.kw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.kw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 44px; padding: 12px 16px; border: 1px solid transparent; border-radius: 8px;
    font-size: 14px; line-height: 20px; font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.kw-btn--go { background: var(--kw-accent); color: #fff; }
.kw-btn--go:hover { background: var(--kw-accent-hi); }
.kw-btn--back { background: transparent; border-color: var(--kw-line); color: var(--kw-ink-2); }
.kw-btn--back:hover { border-color: var(--kw-ink-2); color: var(--kw-ink); }
.kw-btn[disabled] { opacity: .5; cursor: not-allowed; }
.kw-legal { margin: 18px 0 0; font-size: 12px; line-height: 18px; color: var(--kw-ink-3); }
.kw-legal a { color: var(--kw-ink-2); }

/* ========================================================== Segmentknopf */
.kw-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--kw-line); border-radius: 8px; overflow: hidden; }
.kw-seg label { display: grid; place-items: center; min-height: 44px; padding: 8px 10px; background: var(--kw-field); font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.kw-seg label + label { border-inline-start: 1px solid var(--kw-line); }
.kw-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kw-seg label:hover { background: #32333c; }
.kw-seg label:has(input:checked) { background: var(--kw-accent); color: #fff; }
.kw-seg label:has(input:focus-visible) { outline: 2px solid var(--kw-accent-hi); outline-offset: -2px; }

/* ================================================================ Telefon */
@media (max-width: 767px) {
    .kw { padding-inline: 12px; }
    /* Zwei Felder nebeneinander ergeben auf 366 px je 159 — darin steht
       "Select Transmission" nicht. Untereinander. */
    .kw-grid2 { grid-template-columns: 1fr; }
    .kw-bar { gap: 12px; padding: 14px 0 18px; }
    .kw-bar-ico { display: none; }
    .kw-bar-val { min-width: 0; }
    .kw-bar-v { font-size: 17px; line-height: 24px; }
    .kw-bar-n { display: none; }
    .kw-card { padding: 24px 16px 28px; border-radius: 12px; }
    .kw-h { font-size: 22px; line-height: 30px; }
    .kw-p { margin-bottom: 20px; font-size: 14px; line-height: 21px; }
    .kw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .kw-row, .kw-row--split { grid-template-columns: minmax(0, 1fr) 34px; }
    /* Untereinander darf zwischen Feld und Haekchen kein Spaltenabstand
       stehen, sonst sind die geteilten Zeilen 12 px schmaler als die
       einfachen und die Felder fluchten nicht mehr. */
    .kw-row--split { gap: 12px 0; }
    .kw-row--split > :nth-child(2) { grid-column: 1; }
    .kw-row--split > .kw-tick { grid-row: 1 / span 2; grid-column: 2; }
    .kw-seg { grid-template-columns: 1fr; }
    .kw-seg label + label { border-inline-start: 0; border-top: 1px solid var(--kw-line); }
    .kw-btn { width: 100%; }
}

/* ================================================================ Ergebnis
   Zurueckhaltend gehalten: eine fuehrende Zahl, zwei Nebenwerte, eine
   Handlung. Keine Leuchtflaechen -- der Assistent soll am Ende nicht lauter
   werden als auf dem Weg dorthin. */
.kw-res-k { margin: 0 0 4px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kw-ink-3); }
.kw-res-car { margin: 0 0 20px; font-size: 24px; line-height: 32px; font-weight: 500; }
.kw-res-main { padding: 22px 0 20px; border-top: 1px solid var(--kw-line); border-bottom: 1px solid var(--kw-line); }
.kw-res-lbl { margin: 0 0 6px; font-size: 14px; line-height: 20px; color: var(--kw-ink-2); }
.kw-res-big { margin: 0; font-size: 40px; line-height: 48px; font-weight: 700; color: var(--kw-accent-hi); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kw-res-range { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--kw-ink-2); font-variant-numeric: tabular-nums; }
.kw-res-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 0; }
.kw-res-two > div { padding: 18px 0; }
.kw-res-two > div + div { border-inline-start: 1px solid var(--kw-line); padding-inline-start: 24px; }
.kw-res-two dt { margin: 0 0 4px; font-size: 14px; line-height: 20px; color: var(--kw-ink-2); }
.kw-res-two dd { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kw-res-two small { display: block; margin-top: 3px; font-size: 12px; line-height: 17px; color: var(--kw-ink-3); }
.kw-res-note { margin: 18px 0 0; padding: 14px 16px; border-radius: 8px; background: var(--kw-field); font-size: 13px; line-height: 20px; color: var(--kw-ink-2); }
@media (max-width: 767px) {
    .kw-res-big { font-size: 32px; line-height: 40px; }
    .kw-res-two { grid-template-columns: 1fr; }
    .kw-res-two > div + div { border-inline-start: 0; border-top: 1px solid var(--kw-line); padding-inline-start: 0; }
}

/* ================================================= Fotos, Preis, Angaben
   Bauteile fuer die Abschnitte 2 und 3, in derselben Formsprache wie
   Abschnitt 1: Etikett 12.6/18, Feld 44 hoch, Spalte 579. Alles, was Platz
   braucht (Ablagefeld, Bilderraster, Ausstattungsmatrix), darf ueber die
   volle Inhaltsbreite 876 laufen. */
.kw-wide { margin-bottom: 16px; }
.kw-hint { margin: 4px 0 0; font-size: 12px; line-height: 18px; color: var(--kw-ink-3); }
.kw-hint--top { margin-top: 16px; }
.kw-req { color: var(--kw-err); }

/* Ablagefeld fuer Fotos */
.kw-drop {
    display: grid; justify-items: center; gap: 6px;
    margin-top: 8px; padding: 28px 16px;
    border: 1px dashed var(--kw-line); border-radius: 8px;
    background: rgba(255,255,255,.015); text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}
.kw-drop.is-over { border-color: var(--kw-accent-hi); background: rgba(0,166,81,.08); }
.kw-drop-ico { font-size: 22px; color: var(--kw-accent-hi); }
.kw-drop-h { margin: 4px 0 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.kw-drop-or { margin: 0; font-size: 12px; line-height: 18px; color: var(--kw-ink-3); }
.kw-drop-n { margin: 4px 0 0; font-size: 12px; line-height: 18px; color: var(--kw-ink-3); }
.kw-drop .kw-btn { margin-top: 4px; }

/* Hinweis auf verworfene Fotos */
.kw-warn { margin-top: 12px; padding: 12px 14px; border: 1px solid #5a4a1e; border-radius: 8px; background: #241f10; }
.kw-warn p { margin: 0 0 4px; font-size: 13px; line-height: 19px; font-weight: 600; color: #e8b046; }
.kw-warn ul { margin: 0; padding-inline-start: 18px; }
.kw-warn li { font-size: 12px; line-height: 18px; color: var(--kw-ink-2); }
.kw-loading { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--kw-accent-hi); }

/* Bilderraster */
.kw-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-top: 8px; }
.kw-shot { position: relative; aspect-ratio: 1; border: 1px solid var(--kw-line); border-radius: 8px; overflow: hidden; background: var(--kw-field); }
.kw-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kw-shot-main { position: absolute; top: 6px; inset-inline-start: 6px; padding: 2px 6px; border-radius: 4px; background: var(--kw-accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.kw-shot-x { position: absolute; top: 6px; inset-inline-end: 6px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.kw-shot:hover .kw-shot-x, .kw-shot-x:focus-visible { opacity: 1; }

/* Ankreuzfelder in einer Zeile */
.kw-checks { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; }
.kw-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; cursor: pointer; }
.kw-check input { width: 16px; height: 16px; }
@media (min-width: 1024px) {
    .kw-check, .kw-drop-h { font-size: 12.6px; line-height: 18px; }
}

/* ======================================================= Seite und Hinweis */
.kw-page { background: var(--kw-bg); }
.kw-note {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    max-width: 972px; margin: 0 auto 12px; padding: 12px 16px;
    border: 1px solid var(--kw-accent); border-radius: 8px; background: #16251c;
}
.kw-note p { margin: 0; font-size: 13px; line-height: 19px; color: var(--kw-ink); }
.kw-note button { border: 0; background: none; color: var(--kw-ink-2); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.kw-note button:hover { color: var(--kw-ink); }

/* ================================================== Abschnitte in der Karte
   Die Vorlage kennt KEINE Karte in der Karte: ein Abschnitt ist eine
   Ueberschrift mit Feldern darunter, getrennt nur durch Abstand. */
.kw-sec { margin-bottom: 8px; }
.kw-h5 { margin: 24px 0 2px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--kw-ink); }
.kw-hint--sec { margin-bottom: 14px; }
.kw-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; max-width: 579px; }
.kw-grid2 > div { margin-bottom: 16px; }
.kw-opt { color: var(--kw-ink-3); font-weight: 400; }
.kw-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }

/* Aufklappbereich fuer die freiwilligen Angaben */
.kw-sec--fold { margin: 24px 0 8px; border: 1px solid var(--kw-line); border-radius: 8px; }
.kw-fold { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.kw-fold:hover { background: rgba(255,255,255,.03); }
.kw-fold-h { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.kw-fold-opt { font-size: 12px; font-weight: 400; color: var(--kw-ink-3); }
.kw-fold-p { display: block; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--kw-ink-3); }
.kw-fold-ico { flex: none; color: var(--kw-ink-3); }
.kw-fold-body { padding: 4px 16px 16px; border-top: 1px solid var(--kw-line); }

/* Ausstattungsmatrix */
.kw-featgroups { display: grid; gap: 18px; }
.kw-featgroup-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--kw-ink-2); }
.kw-featgroup-ico { color: var(--kw-accent-hi); font-size: 12px; }
.kw-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 16px; }
.kw-feat { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 13px; line-height: 18px; cursor: pointer; }
.kw-feat:hover { background: rgba(255,255,255,.04); }
.kw-feat input { width: 15px; height: 15px; flex: none; }

/* Vorschau */
.kw-prev { padding: 16px; border: 1px solid var(--kw-line); border-radius: 8px; background: rgba(255,255,255,.015); }
.kw-prev-img { display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 14px; border-radius: 8px; overflow: hidden; background: var(--kw-field); color: var(--kw-ink-3); font-size: 30px; }
.kw-prev-img img { width: 100%; height: 100%; object-fit: cover; }
.kw-prev-h { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.kw-prev-price { margin: 6px 0 0; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--kw-accent-hi); font-variant-numeric: tabular-nums; }
.kw-prev-price span { margin-inline-start: 8px; font-size: 12px; font-weight: 500; color: var(--kw-ink-3); }
.kw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--kw-line); border-radius: 999px; font-size: 12px; line-height: 18px; color: var(--kw-ink-2); }

/* Kennzeichen-Buendel */
.kw-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--kw-line); border-radius: 8px; background: rgba(255,255,255,.015); max-width: 579px; }

/* Einwilligung direkt ueber der Fusszeile. Das Bauteil traegt seine Farben
   inline (Vorgabewerte fuer helle Seiten) und liest sie aus diesen Variablen —
   deshalb genuegt es, sie hier umzusetzen, ohne !important und ohne die
   anderen Formulare anzufassen. */
.kw-consent {
    margin-top: 24px; max-width: 579px;
    --consent-bg: rgba(255,255,255,.02);
    --consent-line: var(--kw-line);
    --consent-ink: var(--kw-ink);
    --consent-ink-2: var(--kw-ink-3);
    --consent-link: var(--kw-accent-hi);
}
.kw-consent label { border-radius: 8px !important; margin-top: 0 !important; }

/* ======================================================= Beanstandetes Feld
   Der Veroeffentlichen-Knopf steht am Ende einer langen Karte. Ohne ein
   sichtbares Zeichen passiert beim Druecken scheinbar nichts, weil die
   Meldung weit ausserhalb des Bildes haengt. */
@keyframes kw-shake {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(-6px); }
    30%, 60%, 90% { transform: translateX(6px); }
}
.kw-shake {
    animation: kw-shake .55s ease-in-out;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(255,107,94,.25);
}
.kw-shake input, .kw-shake select, .kw-shake textarea,
input.kw-shake, select.kw-shake, textarea.kw-shake { border-color: var(--kw-err) !important; }
@media (prefers-reduced-motion: reduce) { .kw-shake { animation: none; } }

/* ===================================== Mehrzeiliges Feld und Ankreuzfelder
   Die Abschnitte 2 und 3 sind seit 08.10.2026 in derselben Formsprache
   geschrieben wie Abschnitt 1; die frueher noetige Schicht, die das alte
   helle Tailwind-Kleid neutralisierte, ist damit entfallen. Geblieben sind
   die zwei Elementregeln, die es dort schon brauchte. */
.kw textarea {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--kw-line); border-radius: 8px;
    background: var(--kw-field); color: var(--kw-ink);
    font-size: 14px; font-family: inherit; line-height: 20px; resize: vertical;
}
.kw textarea:focus { outline: 0; border-color: var(--kw-accent-hi); box-shadow: 0 0 0 3px rgba(0,166,81,.2); }
.kw input[type="checkbox"], .kw input[type="radio"] { accent-color: var(--kw-accent-hi); }

/* ===================================== Vermessene Bauteile der Vorlage
   Nachgemessen am 07.10.2026 (Chrome, 1400 px). Die Vorlage fuehrt KEINE
   Schrittfolge, sondern EINE Karte, die Abschnitte nach und nach freischaltet.
   Diese Bauteile bilden deren Formsprache ab:
     Abschnittstitel  14,4 px ueber der 579er Spalte, duenne Linie darunter
     Segmentknopf     270 x 44, Gruppe aussen gerundet (8px), innen eckig
     Hinweiskasten    rechts neben der Spalte, dunkelblau mit Symbol
     Fusszeile        Rechtstext links (~537), Knopf rechts 281 x 44        */

.kw-h4 {
    margin: 32px 0 14px; padding-bottom: 10px;
    border-bottom: 1px solid var(--kw-line);
    font-size: 14px; line-height: 20px; font-weight: 600; color: var(--kw-ink);
}
@media (min-width: 1024px) {
    .kw-btn { font-size: 12.6px; line-height: 18px; }
    .kw-h4 { font-size: 14.4px; line-height: 18px; }
    .kw-seg2 > label, .kw-seg3 > label, .kw-seg label { font-size: 12.6px; line-height: 18px; }
}

/* Segmentgruppe: aussen gerundet, innen geteilt -- wie in der Vorlage. */
.kw-seg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kw-seg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kw-seg2 > label, .kw-seg3 > label {
    display: grid; place-items: center; min-height: 44px; padding: 8px 12px;
    border: 1px solid var(--kw-line); background: transparent;
    font-size: 14px; font-weight: 500; text-align: center; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.kw-seg2 > label + label, .kw-seg3 > label + label { border-inline-start: 0; }
.kw-seg2 > label:first-child, .kw-seg3 > label:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; }
.kw-seg2 > label:last-child, .kw-seg3 > label:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px; }
.kw-seg2 input, .kw-seg3 input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kw-seg2 > label:hover, .kw-seg3 > label:hover { background: var(--kw-field); }
.kw-seg2 > label:has(input:checked), .kw-seg3 > label:has(input:checked) {
    border-color: var(--kw-accent-hi); box-shadow: 0 0 0 1px var(--kw-accent-hi); position: relative; z-index: 1;
}

/* Hinweiskasten neben der Spalte. Zahlen darin muessen unsere eigenen sein --
   die der Vorlage sind deren Daten und haben hier nichts zu suchen. */
.kw-info { display: flex; gap: 12px; padding: 16px 18px; border-radius: 8px; background: #16251c; color: var(--kw-ink); }
.kw-info i { flex: none; color: var(--kw-accent-hi); font-size: 17px; margin-top: 1px; }
.kw-info b { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.kw-info p { margin: 0; font-size: 13px; line-height: 19px; color: var(--kw-ink-2); }

/* Fusszeile: Rechtstext links, Handlung rechts -- nicht breit gezogen. */
.kw-footrow {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
    margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--kw-line);
}
.kw-footrow p { flex: 1 1 320px; margin: 0; font-size: 12px; line-height: 18px; color: var(--kw-ink-3); }
.kw-footrow p a { color: var(--kw-ink-2); }
.kw-footrow .kw-btn { flex: none; min-width: 281px; }
@media (max-width: 767px) {
    .kw-footrow { flex-direction: column; align-items: stretch; }
    /* In der Spalte wirkt flex-basis auf die HOEHE: der Rechtstext zog sich
       sonst auf 320 px auf und riss ein leeres Feld vor den Knopf. */
    .kw-footrow p { flex: none; }
    .kw-footrow .kw-btn { min-width: 0; width: 100%; }
    .kw-seg3 { grid-template-columns: 1fr; }
    .kw-seg3 > label + label { border-inline-start: 1px solid var(--kw-line); border-top: 0; }
    .kw-seg3 > label:first-child { border-radius: 8px 8px 0 0; }
    .kw-seg3 > label:last-child { border-radius: 0 0 8px 8px; }
}