/* Retourenportal /retoure (RetourenController). Aufbau wie die Anfrage- und Tool-Seiten
   (service-seiten/anfrage.html.twig, Lukas 03.11.2026 „aus einem Guss“): Kopf (_tool_kopf), links eine weiße
   Karte, rechts 300 px schmale Kästen, unten der Hilfe-Block (_tool_hilfe). Farben, Felder (.ks-feld),
   Chips und Knöpfe kommen aus service-seiten/_stil.html.twig (.ks-seite); hier nur das Raster der Seite.
   Lukas 04.11.: Felder einer Zeile bündig (Labels einzeilig), Pflichtfelder ohne Stern, optionale mit „(optional)“;
   ein Formular ohne Bestellsuche. */

/* [hidden] gewinnt auch gegen display:flex der ks-Bausteine (Hinweis, Knopf) */
.ks-rt [hidden] { display: none !important; }

.ks-rt-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.ks-rt-karte { padding: 22px 26px 26px; border: 1px solid var(--ks-linie); border-radius: 8px; background: #fff; }
.ks-rt-karte + .ks-rt-karte { margin-top: 16px; }
.ks-seite .ks-rt-karte h2 { font-size: 18px; margin: 0 0 6px; }

.ks-rt-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ks-rt-raster > .ks-rt-breit { grid-column: 1 / -1; }
.ks-seite .ks-rt-feld .ks-label { font-weight: 500; }
.ks-rt-opt { color: var(--ks-grau); font-weight: 400; }

.ks-rt-aktionen { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ks-linie); }
.ks-rt-aktionen .ks-muted { max-width: 460px; font-size: 13.5px; }

/* Abschnitte des Formulars: Nummer im Kästchen wie im Schrittanzeiger (.ks-schritt-nr) */
.ks-rt-abschnitt + .ks-rt-abschnitt { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--ks-linie); }
.ks-seite .ks-rt-abschnitt > h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 0 0 14px; }
.ks-rt-nr { flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ks-radius); background: var(--ks-blau); color: #000; font-size: 13px; font-weight: 600; }

/* Auswahl als Chips in symmetrischen Rastern (--sp Spalten, mobil --sp-m); das Radio liegt unsichtbar im Chip */
.ks-seite .ks-rt-chips { display: grid; grid-template-columns: repeat(var(--sp, 2), minmax(0, 1fr)); gap: 8px; }
.ks-seite .ks-rt-chips .ks-chip { position: relative; width: 100%; margin: 0; justify-content: center; text-align: center; line-height: 1.25; padding: 8px 10px; }
.ks-seite .ks-rt-chips .ks-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ks-seite .ks-rt-chips .ks-chip:has(input:checked),
.ks-seite .ks-rt-chips .ks-chip.is-aktiv { background: var(--ks-blau); border-color: var(--ks-blau); color: #000; }
.ks-seite .ks-rt-chips .ks-chip:has(input:focus-visible) { outline: 2px solid var(--ks-blau-text); outline-offset: 2px; }
/* Chips mit Erklärzeile (Anliegen): links bündig, zwei Zeilen */
.ks-seite .ks-rt-chips--text .ks-chip { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; text-align: left; padding: 10px 12px; height: 100%; }
.ks-rt-chip-text { font-size: 13px; font-weight: 400; color: var(--ks-grau); }
.ks-seite .ks-rt-chips .ks-chip:has(input:checked) .ks-rt-chip-text,
.ks-seite .ks-rt-chips .ks-chip.is-aktiv .ks-rt-chip-text { color: #1F3A48; }

/* Felder je Anliegen bzw. Umfang: ohne passende Auswahl ausgeblendet (ktp-retoure.js) */
.ks-rt-js [data-ktp-rt-nach-anlass]:not(.is-sichtbar),
.ks-rt-js [data-ktp-rt-nur]:not(.is-sichtbar),
.ks-rt-js [data-ktp-rt-nur-umfang]:not(.is-sichtbar) { display: none !important; }

/* Artikel frei eingegeben: Bezeichnung breit, Menge schmal */
.ks-rt-artikel { margin-top: 14px; }
.ks-rt-artikel-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 12px; }
.ks-rt-artikel-zeile + .ks-rt-artikel-zeile { margin-top: 10px; }
.ks-seite .ks-rt-artikel-plus { margin-top: 12px; }

/* Datei-Auswahl wie im Anfrageformular (.ks-af-datei) */
.ks-rt-datei { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 9px 12px; border: 1px dashed var(--ks-blau-text); border-radius: var(--ks-radius); background: var(--ks-blau-hell); cursor: pointer; font-size: 14px; }
.ks-rt-datei:hover { background: #D2EEFB; }
.ks-rt-datei i { color: var(--ks-blau-text); font-size: 16px; }
.ks-rt-datei span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-rt-datei input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.ks-rt-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; cursor: pointer; }
.ks-rt-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ks-blau-text); }

.ks-seite .ks-rt-fehler { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; padding: 12px 14px; border-left: 3px solid var(--ks-fehler); border-radius: var(--ks-radius); background: #FDECEC; color: #7A1212; font-size: 14px; }
.ks-rt-fehler i { font-size: 18px; line-height: 1.2; }
.ks-rt-fehler ul { margin: 4px 0 0; padding-left: 18px; }
.ks-seite .ks-rt-frist { margin-top: 12px; }
.ks-seite .ks-rt-regeln { margin: 4px 0 0; padding-left: 18px; }
.ks-seite .ks-rt-regeln li { margin: 2px 0; }

/* Rechte Spalte */
.ks-rt-aside { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.ks-rt-box { padding: 16px 18px; border: 1px solid var(--ks-linie); border-radius: 8px; background: #fff; font-size: 14px; }
.ks-seite .ks-rt-box h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.ks-rt-ablauf { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: ksrt; }
.ks-rt-ablauf li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; counter-increment: ksrt; }
.ks-rt-ablauf li::before { content: counter(ksrt); display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--ks-radius); background: var(--ks-blau-hell); color: var(--ks-blau-text); font-size: 13px; font-weight: 600; }

/* Tabelle der angemeldeten Artikel (Bestätigung) */
.ks-seite .ks-rt-tabelle td { vertical-align: middle; padding: 9px 6px; }

/* Nach dem Absenden: Fertig-Karte wie im Anfrageformular (.ks-af-fertig) */
.ks-rt-fertig { border-top: 3px solid var(--ks-ok); }
.ks-seite .ks-rt-fertig h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 20px; }
.ks-rt-fertig h2 i { color: var(--ks-ok); font-size: 24px; }
.ks-rt-liste { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 16px 0; padding: 14px 0; border-top: 1px solid var(--ks-linie); border-bottom: 1px solid var(--ks-linie); font-size: 14px; }
.ks-rt-nummer { font-size: 18px; letter-spacing: .02em; white-space: nowrap; }
.ks-rt-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Nur Staging: Hinweis und Vorschau der Mails */
.ks-rt-staging { display: inline-block; margin: 0 0 12px; padding: 6px 10px; border: 1px dashed #B8860B; border-radius: var(--ks-radius); color: #8A6508; font-size: 13px; }
.ks-rt-vorschau { margin-top: 24px; }
.ks-rt-mail { margin-top: 12px; padding: 16px 18px; border: 1px solid var(--ks-linie); border-radius: var(--ks-radius); background: #fff; }
.ks-rt-mail-kopf { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13.5px; }
.ks-rt-mail--text { white-space: pre-line; font-size: 14px; }

@media (max-width: 991.98px) {
  .ks-rt-main { grid-template-columns: minmax(0, 1fr); }
  .ks-rt-aside { position: static; }
}
/* Handy/Tablet: Die Seite steckt im Shop-Container (20 px Rand) – der eigene zweite Container-Rand
   machte die Felder nur schmaler (375 px: 265 statt 301 px), Lukas 04.11.: „für Mobil prüfen“ */
@media (max-width: 767.98px) {
  .ks-seite.ks-rt > .container { padding-left: 0; padding-right: 0; }
}
@media (max-width: 575.98px) {
  .ks-rt-karte { padding: 16px 14px 20px; }
  .ks-rt-raster { grid-template-columns: minmax(0, 1fr); }
  .ks-seite .ks-rt-chips { grid-template-columns: repeat(var(--sp-m, 1), minmax(0, 1fr)); }
  .ks-rt-artikel-zeile { grid-template-columns: minmax(0, 1fr) 84px; }
  .ks-rt-aktionen .ks-btn, .ks-rt-knoepfe .ks-btn { width: 100%; }
}