/* ── Wizard V4 – Gestaltungssystem ─────────────────────────────────── */
/* Alle Selektoren unter #rr-wizard-root[data-wizard-version="4"].     */
/* Kein Stil entflieht – das Stylesheet läuft auf einer fremden        */
/* Webflow-Seite.                                                      */
/* Farbwelt: dunkle Markenidentität Rothermel Reisen                   */

/* ── Kurzschreibweise ─────────────────────────────────────────────── */
/* W = #rr-wizard-root[data-wizard-version="4"]                        */

/* ── Themen-Schicht ────────────────────────────────────────────────── */
/*
 * Jede Farbe, Schrift, jeder Radius und Schatten des Wizards laeuft ueber
 * eine der Variablen unten. Die Standardwerte sind exakt das freigegebene
 * Aussehen (Golden Master, Pixelvergleich Toleranz 0).
 *
 * Einbetter ueberschreiben einzelne Werte auf dem Wurzelelement, z. B.:
 *
 *   #rr-wizard-root {
 *     --rr-d-accent: #0a7f5a;
 *     --rr-d-font: "Inter", sans-serif;
 *     --rr-d-radius-sm: 0; --rr-d-radius-md: 0; --rr-d-radius-lg: 0;
 *     --rr-d-radius-xl: 0; --rr-d-radius-xxl: 0; --rr-d-radius-pill: 0;
 *     --rr-d-radius-kreis: 0;          (Kreise eckig)
 *   }
 *
 * Die Standardwerte stehen bewusst in :where() (Spezifitaet 0), damit jede
 * Regel des Einbetters gewinnt. --rr-d-alt-* gehoert zur Altschicht (dunkles
 * Erstdesign, weitgehend von Design D ueberdeckt) und ist nicht zum
 * Thematisieren gedacht.
 */
:where(#rr-wizard-root[data-wizard-version="4"]) {
  /* Grundfarben */
  --rr-d-canvas: #f4f1ea;
  --rr-d-paper: #ffffff;
  --rr-d-navy: #10243d;
  --rr-d-navy-soft: #18324f;
  --rr-d-accent: #146fd1;
  --rr-d-accent-dark: #0c58ad;
  --rr-d-ink: #162638;
  --rr-d-muted: #5c6a7e;
  --rr-d-line: #d9dee5;
  --rr-d-line-strong: #b9c3d0;
  --rr-d-soft: #f5f7fa;
  --rr-d-danger: #a82e36;

  /* Weitere Farben (Design D) */
  --rr-d-invers: #ffffff;  /* Text und Zeichen auf dunklem Grund */
  --rr-d-brand-sub: #afc0d5;  /* Unterzeile im Markenkopf */
  --rr-d-progress-track: #81878f;  /* Fortschritt: Schiene */
  --rr-d-progress-text: #5f6a79;  /* Fortschritt: Schrittname */
  --rr-d-progress-dot: #7f8791;  /* Fortschritt: Punkt */
  --rr-d-field-border: #828d9a;  /* Eingabefeld: Rahmen */
  --rr-d-field-placeholder: #63718a;  /* Eingabefeld: Platzhalter */
  --rr-d-field-border-hover: #8391a2;  /* Eingabefeld: Rahmen bei Hover */
  --rr-d-choice-border: #c7d0da;  /* Auswahl: Rahmen */
  --rr-d-hover: #edf3fa;  /* Hover-Flaeche (Auswahl, Nebenknoepfe) */
  --rr-d-choice-border-hover: #8ea8c2;  /* Auswahl: Rahmen bei Hover */
  --rr-d-choice-selected: #eaf3fd;  /* Auswahl: gewaehlt */
  --rr-d-card-hover: #fbfdff;  /* Fahrtart-Karte: Hover */
  --rr-d-card-border-hover: #9db8d4;  /* Fahrtart-Karte: Rahmen bei Hover */
  --rr-d-card-selected: #f2f8fe;  /* Fahrtart-Karte / Leertag: gewaehlt, Hover */
  --rr-d-icon-bg: #e9f2fc;  /* Fahrtart-Karte: Symbolgrund */
  --rr-d-check-border: #c2cedb;  /* Fahrtart-Karte: Haken-Rahmen */
  --rr-d-button-border: #9aabc0;  /* Nebenknopf: Rahmen */
  --rr-d-button-border-hover: #7891ab;  /* Nebenknopf: Rahmen bei Hover */
  --rr-d-focus: #2b7dd4;  /* Fokusrahmen */
  --rr-d-line-soft: #e4e8ed;  /* feine Trennlinie */
  --rr-d-error-text: #991b1b;  /* Fehlertext: Absendefehler und Feldfehler */
  --rr-d-error-bg: #fef2f2;  /* Absendefehler: Grund */
  --rr-d-error-border: #fca5a5;  /* Absendefehler: Rahmen */
  --rr-d-success-text: #215337;  /* Erfolg: Text */
  --rr-d-success-bg: #f0f8f3;  /* Erfolg: Grund */
  --rr-d-success-border: #a7cfb4;  /* Erfolg: Rahmen */
  --rr-d-success-strong: #173f2a;  /* Erfolg: Ueberschriften, Links */
  --rr-d-success-body: #285b3d;  /* Erfolg: Fliesstext */
  --rr-d-success-label: #3d6b50;  /* Erfolg: Feldnamen */
  --rr-d-success-card: rgba(255, 255, 255, 0.55);  /* Erfolg: Kurzbrief-Grund */
  --rr-d-overlay: rgba(16, 36, 61, 0.72);  /* Dialog: Abdunklung */
  --rr-d-warn-text: #8a5a06;  /* KI-Hinweis: Text */
  --rr-d-empty-border: #b6c3d2;  /* freier Tag: Rahmen */
  --rr-d-accent-tint: rgba(19, 120, 245, 0.08);  /* Tagesknopf: Hover */
  --rr-d-nav-bg: rgba(255, 255, 255, 0.98);  /* Knopfleiste: Grund */
  --rr-d-map-bg: #eef3f2;  /* Karte: Grund */
  --rr-d-map-border: #cfdad7;  /* Karte: Rahmen */
  --rr-d-map-line-halo: rgba(255, 255, 255, 0.94);  /* Karte: Linienschatten */
  --rr-d-map-marker-halo: rgba(255, 255, 255, 0.96);  /* Karte: Markerhof */
  --rr-d-map-marker-ring: #c8d2d7;  /* Karte: Markerring */
  --rr-d-map-number-stroke: rgba(0, 0, 0, 0.18);  /* Karte: Kontur der Markerzahl */
  --rr-d-map-caption-bg: #f8faf9;  /* Karte: Bildunterschrift-Grund */
  --rr-d-map-caption-line: #d8e1df;  /* Karte: Bildunterschrift-Linie */
  --rr-d-deviation-bg: #fff2f3;  /* Ortsabweichung: Grund */
  --rr-d-deviation-border: #d89ca2;  /* Ortsabweichung: Rahmen */
  --rr-d-deviation-text: #741e29;  /* Ortswarnung: Text */
  --rr-d-deviation-warn-border: #c56f79;  /* Ortswarnung: Rahmen */
  --rr-d-deviation-strong: #681822;  /* Ortswarnung: Hervorhebung */
  --rr-d-vague-text: #6b4a12;  /* ungenauer Ort: Text */
  --rr-d-vague-bg: #fffaf0;  /* ungenauer Ort: Grund */
  --rr-d-vague-border: #e0b563;  /* ungenauer Ort: Rahmen */
  --rr-d-vague-strong: #5c3d0d;  /* ungenauer Ort: Hervorhebung */
  --rr-d-signet: var(--rr-d-navy);  /* Abschluss: Haekchen-Zeichen */
  --rr-d-kursiv: italic;  /* Beispiel- und Nebentexte (Website: normal) */
  --rr-d-klebe-oben: 16px;  /* Abstand der klebenden Seitenleiste; der Wizard uebernimmt scroll-padding-top der Seite */
  --rr-d-rubrik: var(--rr-d-muted);  /* Rubrik ueber Abschnitten der Pruefung und des Abschlusses (Website: Messing) */
  --rr-d-rubrik-linie: var(--rr-d-navy);  /* feiner Strich vor der Rubrik (Website: Messing) */
  --rr-d-check-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5' fill='none' stroke='%23ffffff' stroke-width='3'/%3E%3C/svg%3E");  /* Kontrollkaestchen: Haken (Farbe = --rr-d-invers) */

  /* Schrift */
  --rr-d-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rr-d-font-display: var(--rr-d-font);  /* Ueberschriften */

  /* Radien */
  --rr-d-radius-xs: 3px;
  --rr-d-radius-sm: 4px;
  --rr-d-radius-md: 6px;
  --rr-d-radius-lg: 8px;
  --rr-d-radius-xl: 10px;
  --rr-d-radius-xxl: 12px;
  --rr-d-radius-pill: 999px;
  --rr-d-radius-kreis: 50%;

  /* Schatten */
  --rr-d-shadow-xs: 0 1px 2px rgba(16, 34, 53, 0.05);  /* Karte in Ruhe */
  --rr-d-shadow-sm: 0 3px 10px rgba(16, 34, 53, 0.1);  /* Karte bei Hover */
  --rr-d-shadow-md: 0 12px 30px rgba(35, 46, 60, 0.06);  /* Buehne, schmale Ansicht */
  --rr-d-shadow-lg: 0 18px 45px rgba(35, 46, 60, 0.08);  /* Buehne */
  --rr-d-shadow-summary: 0 10px 24px rgba(15, 23, 42, 0.08);  /* mobile Kurzfassung */
  --rr-d-shadow-focus: 0 0 0 3px rgba(20, 111, 209, 0.18);  /* Eingabefeld im Fokus */
  --rr-d-shadow-selected: inset 0 0 0 1px var(--rr-d-accent);  /* gewaehlte Auswahl */
  --rr-d-shadow-selected-card: inset 0 0 0 1px var(--rr-d-accent), 0 1px 2px rgba(16, 34, 53, 0.05);  /* gewaehlte Fahrtart-Karte */
  --rr-d-shadow-line: 0 0 0 1px var(--rr-d-line-strong);  /* Linie als Schatten */

  /* Altschicht */
  --rr-d-alt-font: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --rr-d-alt-shadow-dialog: 0 20px 50px rgba(0, 0, 0, 0.5);
  --rr-d-alt-0c52a8: #0c52a8;
  --rr-d-alt-0e243f: #0e243f;
  --rr-d-alt-0e243f-80: rgba(14, 36, 63, 0.8);
  --rr-d-alt-1060d0: #1060d0;
  --rr-d-alt-132b47: #132b47;
  --rr-d-alt-132b47-60: rgba(19, 43, 71, 0.6);
  --rr-d-alt-1378f5: #1378f5;
  --rr-d-alt-1378f5-10: rgba(19, 120, 245, 0.1);
  --rr-d-alt-1378f5-15: rgba(19, 120, 245, 0.15);
  --rr-d-alt-1378f5-40: rgba(19, 120, 245, 0.4);
  --rr-d-alt-162438: #162438;
  --rr-d-alt-166534-20: rgba(22, 101, 52, 0.2);
  --rr-d-alt-1a3554: #1a3554;
  --rr-d-alt-1e3a5f: #1e3a5f;
  --rr-d-alt-1e6b33: #1e6b33;
  --rr-d-alt-382702: #382702;
  --rr-d-alt-3b2a00: #3b2a00;
  --rr-d-alt-4ade80: #4ade80;
  --rr-d-alt-4ade80-30: rgba(74, 222, 128, 0.3);
  --rr-d-alt-4ade80-40: rgba(74, 222, 128, 0.4);
  --rr-d-alt-5cb3ff: #5cb3ff;
  --rr-d-alt-5f4300: #5f4300;
  --rr-d-alt-60a5fa: #60a5fa;
  --rr-d-alt-7a5a00: #7a5a00;
  --rr-d-alt-7d94b4: #7d94b4;
  --rr-d-alt-8b9bab: #8b9bab;
  --rr-d-alt-94a3b8: #94a3b8;
  --rr-d-alt-a2a9b4: #a2a9b4;
  --rr-d-alt-cbd5e1: #cbd5e1;
  --rr-d-alt-d1fae5: #d1fae5;
  --rr-d-alt-d9aa1f: #d9aa1f;
  --rr-d-alt-d9aa1f-12: rgba(217, 170, 31, 0.12);
  --rr-d-alt-dc2626-15: rgba(220, 38, 38, 0.15);
  --rr-d-alt-e3c45a: #e3c45a;
  --rr-d-alt-e8c45c: #e8c45c;
  --rr-d-alt-f0bb28: #f0bb28;
  --rr-d-alt-f5c542: #f5c542;
  --rr-d-alt-f87171: #f87171;
  --rr-d-alt-f87171-40: rgba(248, 113, 113, 0.4);
  --rr-d-alt-fca5a5: #fca5a5;
  --rr-d-alt-fff6dd: #fff6dd;
  --rr-d-alt-fff7db: #fff7db;
  --rr-d-alt-ffffff: #ffffff;
  --rr-d-alt-ffffff-03: rgba(255, 255, 255, 0.03);
  --rr-d-alt-ffffff-04: rgba(255, 255, 255, 0.04);
  --rr-d-alt-ffffff-08: rgba(255, 255, 255, 0.08);
  --rr-d-alt-ffffff-12: rgba(255, 255, 255, 0.12);
  --rr-d-alt-ffffff-15: rgba(255, 255, 255, 0.15);
  --rr-d-alt-ffffff-18: rgba(255, 255, 255, 0.18);
  --rr-d-alt-ffffff-20: rgba(255, 255, 255, 0.2);
  --rr-d-alt-ffffff-30: rgba(255, 255, 255, 0.3);
}

/* ── Wurzel ────────────────────────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] {
  color: var(--rr-d-alt-a2a9b4);
  background: transparent;
  font-family: var(--rr-d-alt-font);
  line-height: 1.45;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#rr-wizard-root[data-wizard-version="4"] *,
#rr-wizard-root[data-wizard-version="4"] *::before,
#rr-wizard-root[data-wizard-version="4"] *::after {
  box-sizing: inherit;
}

/* ── Shell-Aufbau ─────────────────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] .wizard-v4-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 24px;
  align-items: start;
}

#rr-wizard-root[data-wizard-version="4"] .wizard-v4-shell > h1 {
  grid-column: 1 / -1;
  font-size: 14px;
  font-weight: 500;
  color: var(--rr-d-alt-94a3b8);
  margin: 0 0 4px 0;
}

#rr-wizard-root[data-wizard-version="4"] .wizard-v4-shell > nav {
  grid-column: 1 / -1;
}

#rr-wizard-root[data-wizard-version="4"] .wizard-v4-shell > form {
  background: var(--rr-d-alt-ffffff-04);
  border: 1px solid var(--rr-d-alt-ffffff-12);
  border-radius: var(--rr-d-radius-md);
  padding: 24px;
  min-width: 0;
}

#rr-wizard-root[data-wizard-version="4"] .wizard-v4-shell > form h2 {
  margin: 0 0 16px 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--rr-d-alt-ffffff);
}

#rr-wizard-root[data-wizard-version="4"] .wizard-v4-shell > form h2:focus-visible {
  outline: none;
}

/* ── Formularfelder ───────────────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] input,
#rr-wizard-root[data-wizard-version="4"] select,
#rr-wizard-root[data-wizard-version="4"] textarea {
  font-size: 16px;
  font-family: inherit;
  line-height: 1.45;
  padding: 8px 12px;
  border: 1px solid var(--rr-d-alt-ffffff-18);
  border-radius: var(--rr-d-radius-sm);
  background: var(--rr-d-alt-132b47);
  color: var(--rr-d-alt-ffffff);
  width: 100%;
  min-height: 44px;
}

#rr-wizard-root[data-wizard-version="4"] input::placeholder,
#rr-wizard-root[data-wizard-version="4"] textarea::placeholder {
  /* Aufgehellt gegenueber dem Markenwert #364e6b: auf der Feldflaeche
     #132b47 erreicht dieser Ton das geforderte Kontrastverhaeltnis. */
  color: var(--rr-d-alt-7d94b4);
}

#rr-wizard-root[data-wizard-version="4"] textarea {
  min-height: 88px;
  resize: vertical;
}

#rr-wizard-root[data-wizard-version="4"] input:focus,
#rr-wizard-root[data-wizard-version="4"] select:focus,
#rr-wizard-root[data-wizard-version="4"] textarea:focus {
  outline: 3px solid var(--rr-d-alt-1378f5);
  outline-offset: 2px;
  border-color: var(--rr-d-alt-1378f5);
}

#rr-wizard-root[data-wizard-version="4"] input[aria-invalid="true"],
#rr-wizard-root[data-wizard-version="4"] select[aria-invalid="true"],
#rr-wizard-root[data-wizard-version="4"] textarea[aria-invalid="true"] {
  /* >= 3:1 auf der Formularflaeche (WCAG 1.4.11); #f87171 hatte 2,8:1. */
  border-color: var(--rr-d-danger);
}

#rr-wizard-root[data-wizard-version="4"] label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--rr-d-alt-ffffff);
}

#rr-wizard-root[data-wizard-version="4"] .rr-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

/* ── Checkbox-Felder ──────────────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] .rr-field--checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
}

#rr-wizard-root[data-wizard-version="4"] .rr-field--checkbox input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

#rr-wizard-root[data-wizard-version="4"] .rr-field--checkbox span {
  font-size: 14px;
  font-weight: 500;
  color: var(--rr-d-alt-ffffff);
}

/* ── Fehlermeldungen ──────────────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] .rr-errmsg {
  display: none;
  /* Audit 01.10.2026: Feldfehler stehen auf der hellen Formularflaeche.
     #f87171 (Altschicht, fuer dunklen Grund) hatte dort 2,76:1. */
  color: var(--rr-d-error-text);
  font-size: 13px;
  margin-top: 4px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-errmsg.show {
  display: block;
}

/* ── Hilfetext-Block ──────────────────────────────────────────────── */
#rr-wizard-root[data-wizard-version="4"] .rr-hilfe {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--rr-d-alt-132b47-60);
  border-left: 3px solid var(--rr-d-alt-1378f5);
  border-radius: 0 var(--rr-d-radius-sm) var(--rr-d-radius-sm) 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rr-d-alt-a2a9b4);
  max-width: 100%;
  box-sizing: border-box;
}
#rr-wizard-root[data-wizard-version="4"] .rr-hilfe p {
  margin: 0 0 6px;
}
#rr-wizard-root[data-wizard-version="4"] .rr-hilfe p:last-child {
  margin-bottom: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-bus-use-help {
  cursor: default;
}

/* ── Schaltflächen (Gemeinsam) ────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] button,
#rr-wizard-root[data-wizard-version="4"] [role="radio"],
#rr-wizard-root[data-wizard-version="4"] .rr-card {
  min-height: 44px;
  min-width: 44px;
}

#rr-wizard-root[data-wizard-version="4"] button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 0 16px;
  min-height: 44px;
  border-radius: var(--rr-d-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 1.45;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

#rr-wizard-root[data-wizard-version="4"] button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primäraktion (Weiter, Absenden) */
#rr-wizard-root[data-wizard-version="4"] .rr-primary,
#rr-wizard-root[data-wizard-version="4"] .rr-btn-primary {
  background: var(--rr-d-alt-0c52a8);
  color: var(--rr-d-alt-ffffff);
  font-weight: 500;
}

#rr-wizard-root[data-wizard-version="4"] .rr-primary:hover,
#rr-wizard-root[data-wizard-version="4"] .rr-btn-primary:hover {
  background: var(--rr-d-alt-1060d0);
}

/* Sekundäraktion (Zurück, Abbrechen) */
#rr-wizard-root[data-wizard-version="4"] .rr-back,
#rr-wizard-root[data-wizard-version="4"] .rr-btn,
#rr-wizard-root[data-wizard-version="4"] .rr-btn-secondary,
#rr-wizard-root[data-wizard-version="4"] .rr-secondary {
  background: transparent;
  color: var(--rr-d-alt-ffffff);
  border-color: var(--rr-d-alt-ffffff-30);
}

#rr-wizard-root[data-wizard-version="4"] .rr-back:hover,
#rr-wizard-root[data-wizard-version="4"] .rr-btn:hover,
#rr-wizard-root[data-wizard-version="4"] .rr-btn-secondary:hover,
#rr-wizard-root[data-wizard-version="4"] .rr-secondary:hover {
  background: var(--rr-d-alt-ffffff-08);
  color: var(--rr-d-alt-ffffff);
}

/* Stopp/Fahrt hinzufügen */
#rr-wizard-root[data-wizard-version="4"] .rr-btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  color: var(--rr-d-alt-ffffff);
  border: 2px solid var(--rr-d-alt-ffffff-30);
  border-radius: var(--rr-d-radius-sm);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

#rr-wizard-root[data-wizard-version="4"] .rr-btn-add:hover {
  background: var(--rr-d-alt-ffffff-08);
}

/* Fokusringe für Buttons */
#rr-wizard-root[data-wizard-version="4"] button:focus-visible,
#rr-wizard-root[data-wizard-version="4"] [role="radio"]:focus-visible,
#rr-wizard-root[data-wizard-version="4"] [tabindex]:focus-visible {
  outline: 3px solid var(--rr-d-alt-1378f5);
  outline-offset: 2px;
}

/* ── Radiogroup + Radio-Kacheln (Fahrtart, Bus-vor-Ort, Reisemuster) ─ */

#rr-wizard-root[data-wizard-version="4"] .rr-radiogroup {
  margin-bottom: 16px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-radiogroup-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--rr-d-alt-ffffff);
  margin-bottom: 8px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
  border: 2px solid var(--rr-d-alt-ffffff-18);
  border-radius: var(--rr-d-radius-md);
  background: var(--rr-d-alt-ffffff-03);
  font-weight: 500;
  font-size: 15px;
  color: var(--rr-d-alt-a2a9b4);
  cursor: pointer;
  margin-bottom: 12px;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

#rr-wizard-root[data-wizard-version="4"] .rr-radio:hover {
  background: var(--rr-d-alt-ffffff-08);
  border-color: var(--rr-d-alt-ffffff-30);
}

#rr-wizard-root[data-wizard-version="4"] .rr-radio[aria-checked="true"] {
  border-color: var(--rr-d-alt-1378f5);
  border-width: 3px;
  background: var(--rr-d-alt-1378f5-10);
  color: var(--rr-d-alt-ffffff);
}

/* Fahrtart-Kacheln: 2-spaltig */
#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="fahrtart-rg-lbl"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="fahrtart-rg-lbl"] .rr-radiogroup-label {
  grid-column: 1 / -1;
}

#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="fahrtart-rg-lbl"] .rr-radio {
  margin-bottom: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 16px;
  text-align: left;
  position: relative;
  min-height: 44px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-kachel-titel {
  font-weight: 650;
  font-size: 16px;
  line-height: 1.3;
  color: var(--rr-d-alt-ffffff);
}

#rr-wizard-root[data-wizard-version="4"] .rr-kachel-kurz {
  font-weight: 400;
  font-size: 14px;
  color: var(--rr-d-alt-a2a9b4);
  line-height: 1.3;
}

#rr-wizard-root[data-wizard-version="4"] .rr-kachel-beispiel {
  font-weight: 400;
  font-size: 11px;
  color: var(--rr-d-alt-8b9bab);
  line-height: 1.3;
}

#rr-wizard-root[data-wizard-version="4"] .rr-kachel-haeufig {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--rr-d-alt-60a5fa);
  background: var(--rr-d-alt-1378f5-15);
  border: 1px solid var(--rr-d-alt-1378f5-40);
  border-radius: var(--rr-d-radius-sm);
  padding: 2px 6px;
  line-height: 1.4;
  white-space: nowrap;
}

@media (max-width: 430px) {
  #rr-wizard-root[data-wizard-version="4"] [aria-labelledby="fahrtart-rg-lbl"] {
    grid-template-columns: 1fr;
  }
}

#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="fahrtart-rg-lbl"] .rr-errmsg {
  grid-column: 1 / -1;
}

/* Bus-vor-Ort: 2 Optionen nebeneinander */
#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="busStays-lbl"] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="busStays-lbl"] .rr-radiogroup-label {
  width: 100%;
}

#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="busStays-lbl"] .rr-radio {
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  margin-bottom: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-radio-note {
  display: block;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  color: var(--rr-d-muted);
}

/* Ausland-Radio Ja/Nein */
#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="abroad-lbl"] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="abroad-lbl"] .rr-radiogroup-label {
  width: 100%;
}

#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="abroad-lbl"] .rr-radio {
  flex: 1 1 0;
  margin-bottom: 0;
}

/* Ungültige Radiogroup: rote Ränder */
#rr-wizard-root[data-wizard-version="4"] .rr-field[aria-invalid="true"] .rr-radio,
#rr-wizard-root[data-wizard-version="4"] [data-invalid="true"] .rr-radio {
  border-color: var(--rr-d-danger);
}

/* ── Fahrtzeilen (Vor-Ort-Fahrten) ────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] .rr-trip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

#rr-wizard-root[data-wizard-version="4"] .rr-trip-row input {
  flex: 1 1 auto;
  min-width: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-trip-row input[type="text"] {
  flex: 1 1 160px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-trip-row input[type="time"] {
  flex: 0 0 auto;
  width: 110px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-trip-row button {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 0 12px;
}

/* ── Zwischenstopps ───────────────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] .rr-stop {
  padding: 8px 12px;
  background: var(--rr-d-alt-132b47);
  border: 1px solid var(--rr-d-alt-ffffff-18);
  border-radius: var(--rr-d-radius-sm);
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--rr-d-alt-ffffff);
}

/* ── Stay-day Abschnitte (Reiseplan) ──────────────────────────────── */

/* Pruefen-Seite: die Reise als Kunden-Legs statt Geocoder-Liste. */
#rr-wizard-root[data-wizard-version="4"] .rr-review-journey {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#rr-wizard-root[data-wizard-version="4"] .rr-review-leg {
  padding: 10px 12px;
  background: var(--rr-d-soft);
  border-left: 3px solid var(--rr-d-accent);
  border-radius: var(--rr-d-radius-lg);
}
#rr-wizard-root[data-wizard-version="4"] .rr-review-leg-titel {
  display: block;
  margin-bottom: 2px;
  color: var(--rr-d-muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#rr-wizard-root[data-wizard-version="4"] .rr-review-leg strong {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  overflow-wrap: anywhere;
}
#rr-wizard-root[data-wizard-version="4"] .rr-review-leg small {
  display: block;
  margin-top: 1px;
  color: var(--rr-d-muted);
  font-size: 12px;
}
#rr-wizard-root[data-wizard-version="4"] .rr-review-leg .rr-d-route-zeit {
  color: var(--rr-d-accent-dark);
  font-weight: 600;
}
#rr-wizard-root[data-wizard-version="4"] .rr-review-programmfahrt {
  margin-top: 6px;
}
#rr-wizard-root[data-wizard-version="4"] .rr-review-gap small {
  color: var(--rr-d-muted);
  font-style: var(--rr-d-kursiv);
}

/* Sidebar: Kalendertag-Trenner in der Mehrtag-Timeline. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-tag-trenner {
  list-style: none;
  padding: 6px 0 8px;
  margin-top: 4px;
}
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-tag-trenner small {
  display: block;
  color: var(--rr-d-ink);
  font-size: 12px;
  font-weight: 700;
  border-top: 1px solid var(--rr-d-line);
  padding-top: 8px;
}
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-tag-trenner:first-child small {
  border-top: 0;
  padding-top: 0;
}

/* PLZ-Vorschlag unter dem Ort-Feld. */
#rr-wizard-root[data-wizard-version="4"] .rr-city-vorschlag {
  margin: -6px 0 8px;
  font-size: 13px;
}

/* Link-Knoepfe: sekundaere Aktionen im Fliesstext, kein Button-Gewicht. */
#rr-wizard-root[data-wizard-version="4"] .rr-linkbtn {
  display: inline;
  padding: 0;
  background: none;
  border: 0;
  color: var(--rr-d-accent-dark);
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}
#rr-wizard-root[data-wizard-version="4"] .rr-linkbtn:hover {
  color: var(--rr-d-accent);
}

/* Kompakte Gap-Zeile: eine kleine Zwischennotiz, keine Karte. */
#rr-wizard-root[data-wizard-version="4"] .rr-gap-kompakt {
  padding: 4px 0 10px;
  border: 0;
  background: transparent;
}
#rr-wizard-root[data-wizard-version="4"] .rr-gap-kompakt .rr-gap-satz {
  display: block;
  color: var(--rr-d-muted);
  font-size: 13px;
}
#rr-wizard-root[data-wizard-version="4"] .rr-gap-kompakt .rr-gap-links {
  font-size: 13px;
}

/* Rueckfahrt-Gap: die eine erklaerende Karte, ruhig gehalten. */
#rr-wizard-root[data-wizard-version="4"] .rr-gap-rueckfahrt .rr-gap-satz {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
}
#rr-wizard-root[data-wizard-version="4"] .rr-gap-rueckfahrt .rr-gap-links {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--rr-d-muted);
}

/* Sidebar: offene Verbindung als kompakte Notiz ohne Timeline-Punkt. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-gapnote {
  position: relative;
  padding: 0 0 14px 27px;
  list-style: none;
}
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-gapnote::after {
  content: "";
  position: absolute;
  left: 5px;
  top: -4px;
  bottom: 2px;
  width: 2px;
  background: var(--rr-d-line-strong);
}
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-gapnote small {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: var(--rr-d-muted);
  font-size: 12px;
  background: var(--rr-d-soft);
  padding: 2px 0;
}

/* Progressive Text-Alternative unterhalb von "+ Fahrt hinzufuegen". */
#rr-wizard-root[data-wizard-version="4"] .rr-programm-text-alternative {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--rr-d-muted);
}

/* Steuerung je Fahrtzeile: verschieben und entfernen. */
#rr-wizard-root[data-wizard-version="4"] .rr-trip-steuer {
  display: inline-flex;
  gap: 4px;
  align-self: center;
}
#rr-wizard-root[data-wizard-version="4"] .rr-trip-btn {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  background: transparent;
  color: var(--rr-d-muted);
  border: 1px solid var(--rr-d-line-strong);
  border-radius: var(--rr-d-radius-lg);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
#rr-wizard-root[data-wizard-version="4"] .rr-trip-btn:hover:not(:disabled) {
  color: var(--rr-d-accent-dark);
  border-color: var(--rr-d-accent-dark);
}
#rr-wizard-root[data-wizard-version="4"] .rr-trip-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

#rr-wizard-root[data-wizard-version="4"] .rr-stay-day {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--rr-d-alt-ffffff-04);
  border: 1px solid var(--rr-d-alt-ffffff-12);
  border-radius: var(--rr-d-radius-md);
}

#rr-wizard-root[data-wizard-version="4"] .rr-stay-day h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 8px 0;
  color: var(--rr-d-alt-ffffff);
}

/* ── Zusammenfassung (Prüfungsschritt) ────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] .rr-review-section {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--rr-d-alt-ffffff-04);
  border: 1px solid var(--rr-d-alt-ffffff-12);
  border-radius: var(--rr-d-radius-md);
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-section-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--rr-d-alt-ffffff);
}

/* Der Aendern-Knopf behaelt seine Textbreite. Ohne diese Regel dehnt ihn der
   Flexbereich auf schmalen Breiten ueber die halbe Zeile. */
#rr-wizard-root[data-wizard-version="4"] .rr-review-section-head button {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}

/* Ändern-Button: zurückhaltend */
#rr-wizard-root[data-wizard-version="4"] .rr-review-section-head .rr-secondary {
  font-size: 13px;
  padding: 0 12px;
  min-height: 44px;
  white-space: nowrap;
}

/* Review-Zeile: Beschriftung + Wert nebeneinander */
#rr-wizard-root[data-wizard-version="4"] .rr-review-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 4px;
  font-size: 14px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-row dt {
  font-weight: 500;
  color: var(--rr-d-alt-94a3b8);
  margin: 0;
  min-width: 120px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-row dd {
  margin: 0;
  color: var(--rr-d-alt-ffffff);
}

/* DSGVO-Block */
#rr-wizard-root[data-wizard-version="4"] .rr-review-dsgvo {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rr-d-alt-ffffff-12);
}

/* Kontrollkaestchen links neben dem Text, oben ausgerichtet */
#rr-wizard-root[data-wizard-version="4"] .rr-review-dsgvo label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rr-d-alt-a2a9b4);
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-dsgvo input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 2px 0 0 0;
}

/* ── Hinweistexte ─────────────────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] .rr-hint {
  color: var(--rr-d-alt-94a3b8);
  font-size: 13px;
  margin-bottom: 12px;
}

/* ── Navigationsleiste ────────────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] .rr-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rr-d-alt-ffffff-12);
}

#rr-wizard-root[data-wizard-version="4"] .rr-completion-actions {
  display: grid;
  grid-template-columns: minmax(96px, max-content) minmax(180px, 1fr);
  align-items: stretch;
}

#rr-wizard-root[data-wizard-version="4"] .rr-completion-actions .rr-primary {
  min-width: 180px;
  white-space: nowrap;
  flex-shrink: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-completion-assurance {
  display: grid;
  gap: 6px;
  padding-top: 12px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-completion-assurance .rr-kein-vertrag {
  margin: 0;
  text-align: left;
}

/* ── Absende-Fehlermeldung ─────────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] .rr-submit-error {
  color: var(--rr-d-alt-fca5a5);
  background: var(--rr-d-alt-dc2626-15);
  border: 1px solid var(--rr-d-alt-f87171-40);
  border-radius: var(--rr-d-radius-md);
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.45;
}

/* ── Erfolgsmeldung ───────────────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] .rr-success {
  background: var(--rr-d-alt-166534-20);
  border: 1px solid var(--rr-d-alt-4ade80-40);
  border-radius: var(--rr-d-radius-md);
  padding: 24px;
  grid-column: 1 / -1;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success h2 {
  color: var(--rr-d-alt-4ade80);
  margin: 0 0 8px 0;
  font-size: 1.25rem;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success h2:focus-visible {
  outline: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success p {
  margin: 0 0 8px 0;
  color: var(--rr-d-alt-d1fae5);
}

#rr-wizard-root[data-wizard-version="4"] .rr-hinweise {
  margin: 12px 0 0 0;
  padding-left: 24px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-hinweise li {
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--rr-d-alt-d1fae5);
}

/* ── Reset-Dialog ─────────────────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog {
  position: fixed;
  inset: 0;
  background: var(--rr-d-alt-0e243f-80);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}

#rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog-inner {
  background: var(--rr-d-alt-162438);
  border: 1px solid var(--rr-d-alt-ffffff-15);
  border-radius: var(--rr-d-radius-md);
  padding: 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--rr-d-alt-shadow-dialog);
}

#rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog-title {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  color: var(--rr-d-alt-ffffff);
}

#rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog-text {
  margin: 0 0 8px 0;
  color: var(--rr-d-alt-a2a9b4);
}

#rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog-list {
  margin: 12px 0;
  padding-left: 24px;
  color: var(--rr-d-alt-a2a9b4);
}

#rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog-list li {
  margin-bottom: 4px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

/* ── Debug-Ansicht ────────────────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] .rr-debug-panel {
  margin-top: 24px;
  padding: 16px;
  background: var(--rr-d-alt-ffffff-03);
  border: 1px dashed var(--rr-d-alt-ffffff-20);
  border-radius: var(--rr-d-radius-md);
  font-size: 13px;
  color: var(--rr-d-alt-a2a9b4);
}

#rr-wizard-root[data-wizard-version="4"] .rr-debug-panel pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow: auto;
}

/* ── Reduzierte Bewegung ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #rr-wizard-root[data-wizard-version="4"] *,
  #rr-wizard-root[data-wizard-version="4"] *::before,
  #rr-wizard-root[data-wizard-version="4"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #rr-wizard-root[data-wizard-version="4"] button {
    transition: none;
  }
}

/* ── Schmale Geräte (≤719px) ──────────────────────────────────────── */

@media (max-width: 719px) {
  #rr-wizard-root[data-wizard-version="4"] .wizard-v4-shell {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  #rr-wizard-root[data-wizard-version="4"] button {
    flex: 1 1 auto;
  }

  #rr-wizard-root[data-wizard-version="4"] [aria-labelledby="fahrtart-rg-lbl"] {
    grid-template-columns: 1fr;
  }

  #rr-wizard-root[data-wizard-version="4"] [aria-labelledby="busStays-lbl"],
  #rr-wizard-root[data-wizard-version="4"] [aria-labelledby="plan-pattern-lbl"],
  #rr-wizard-root[data-wizard-version="4"] [aria-labelledby="abroad-lbl"] {
    flex-direction: column;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-trip-row {
    flex-direction: column;
    align-items: stretch;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-trip-row input[type="text"],
  #rr-wizard-root[data-wizard-version="4"] .rr-trip-row input[type="time"] {
    flex: 0 0 auto;
    width: 100%;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-trip-row button {
    flex: 0 0 auto;
    width: 100%;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-nav {
    flex-wrap: wrap;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog-buttons {
    flex-direction: column-reverse;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog-buttons button {
    width: 100%;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-review-section-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
}

/* ---------------------------------------------------------------------------
   Kopfbereich (Aufgabe 1): Vertrauensversprechen
   --------------------------------------------------------------------------- */

#rr-wizard-root[data-wizard-version="4"] .rr-kopf {
  margin-bottom: 1.25rem;
}

/* Ab dem zweiten Schritt traegt der Kopf nur noch den Namen. Die
   Wiederholung des Vertrauensversprechens kostete auf 390 px die halbe
   Bildschirmhoehe, ohne dem bereits eingestiegenen Kunden zu helfen. */
#rr-wizard-root[data-wizard-version="4"] .rr-kopf-schlank {
  margin-bottom: 0.75rem;
}

#rr-wizard-root[data-wizard-version="4"] .rr-kopf-schlank h1 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--rr-d-alt-a2a9b4);
  margin: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-kopf-sub {
  margin: 0.25rem 0 0.75rem;
  font-size: 0.875rem;
  color: var(--rr-d-alt-94a3b8);
}

/* Aufgabe 5: Vertrauenssignal unter dem Absende-Button */
#rr-wizard-root[data-wizard-version="4"] .rr-kein-vertrag {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--rr-d-alt-94a3b8);
  text-align: center;
  line-height: 1.5;
}

/* ── Aufgabe 7: Gestaltung nachziehen ─────────────────────────────── */

/* Visually hidden (accessible name erhalten) */
#rr-wizard-root[data-wizard-version="4"] .rr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fahrtart-Gruppenlabel visuell verbergen (Doppelung mit Schritttitel) */
#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="fahrtart-rg-lbl"] .rr-radiogroup-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Erfolgsbildschirm: nummerierte Schritte */
#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-naechste h3 {
  font-size: 1rem;
  margin: 1rem 0 0.5rem;
  color: var(--rr-d-alt-ffffff);
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-schritte {
  margin: 0;
  padding-left: 1.5rem;
  line-height: 1.6;
  color: var(--rr-d-alt-d1fae5);
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-schritte li {
  margin-bottom: 0.375rem;
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-nummer {
  font-size: 1rem;
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-manuell {
  font-style: var(--rr-d-kursiv);
  color: var(--rr-d-alt-ffffff);
}

/* Angaben-Übersicht */
#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht {
  margin-top: 1rem;
  border: 1px solid var(--rr-d-alt-4ade80-30);
  border-radius: var(--rr-d-radius-md);
  padding: 0.5rem 0.75rem;
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--rr-d-alt-4ade80);
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht dl {
  margin: 0.5rem 0 0;
  color: var(--rr-d-alt-d1fae5);
}

/* Kontaktzeile */
#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-kontakt {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rr-d-alt-4ade80-30);
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-kontakt p {
  margin: 0 0 0.25rem;
  color: var(--rr-d-alt-d1fae5);
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-kontakt a {
  color: var(--rr-d-alt-4ade80);
  text-decoration: underline;
}

/* Responsive 390px */
@media (max-width: 480px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-success {
    padding: 16px;
  }
  #rr-wizard-root[data-wizard-version="4"] .rr-erfolg-schritte {
    padding-left: 1.25rem;
  }
  #rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht {
    padding: 0.5rem;
  }
}

/* ── Select-Dropdown (dunkler Hintergrund für native Optionen) ────── */
#rr-wizard-root[data-wizard-version="4"] select option {
  background: var(--rr-d-alt-132b47);
  color: var(--rr-d-alt-ffffff);
}

/* ── Adressvervollstaendigung: Bestaetigung + PLZ-Hinweis ──────── */
#rr-wizard-root[data-wizard-version="4"] .rr-addr-confirmed {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  /* Dunkles Gruen: lesbar auf dem hellen Papier (Kontrast > 4.5:1). */
  color: var(--rr-d-alt-1e6b33);
}

#rr-wizard-root[data-wizard-version="4"] .rr-addr-plz-hint {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  /* Dunkles Bernstein statt Gelb aus dem dunklen Entwurf (Kontrast > 4.5:1). */
  color: var(--rr-d-alt-7a5a00);
}

#rr-wizard-root[data-wizard-version="4"] .rr-addr-confirm-slot:empty {
  display: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-address-confirm {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--rr-d-alt-fff6dd);
  border: 1px solid var(--rr-d-alt-e8c45c);
  border-radius: var(--rr-d-radius-lg);
  color: var(--rr-d-alt-5f4300);
  font-size: 13px;
  line-height: 1.5;
}

#rr-wizard-root[data-wizard-version="4"] .rr-address-confirm p {
  margin: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-address-confirm strong {
  color: var(--rr-d-alt-382702);
}

#rr-wizard-root[data-wizard-version="4"] .rr-address-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ── Tagesablauf: KI-Kurzweg + Fahrtenzeilen ─────────────────────── */
#rr-wizard-root[data-wizard-version="4"] .rr-section-heading {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
  color: var(--rr-d-alt-ffffff);
}
#rr-wizard-root[data-wizard-version="4"] .rr-hint-example {
  font-style: var(--rr-d-kursiv);
  color: var(--rr-d-alt-94a3b8);
}
#rr-wizard-root[data-wizard-version="4"] .rr-hint-abgrenzung {
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  background: var(--rr-d-alt-1a3554);
  border-left: 3px solid var(--rr-d-alt-f5c542);
  border-radius: var(--rr-d-radius-sm);
  font-size: 0.875rem;
  color: var(--rr-d-alt-cbd5e1);
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-block {
  margin: 1.25rem 0;
  padding: 1rem;
  background: var(--rr-d-alt-132b47);
  border: 1px solid var(--rr-d-alt-1e3a5f);
  border-radius: var(--rr-d-radius-lg);
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-block--editor {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-heading {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--rr-d-alt-ffffff);
  margin: 0 0 0.25rem;
}
/* Sekundaeraktion: Farben/Rahmen kommen aus .rr-secondary (beide Themes).
   Frueher war der Knopf vollflaechig blau und durch das Flex-Stretch des
   Editors fast seitenbreit - er wirkte damit wichtiger als "Weiter".
   Einziger dominanter CTA einer Seite ist "Weiter" (CLAUDE.md). */
#rr-wizard-root[data-wizard-version="4"] .rr-btn-ki {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-details {
  margin: 1.25rem 0;
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-summary {
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--rr-d-alt-94a3b8);
  padding: 0.5rem 0;
  list-style: revert;
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-details[open] .rr-ki-block {
  margin-top: 0.75rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-section-heading--reiseplan {
  margin-top: 2rem;
}

/* Ihre Reise ist bewusst ein zusammenhängender Ablauf: Route zuerst,
   danach Termin und - falls nötig - die einzelnen Tagesfahrten. */
#rr-wizard-root[data-wizard-version="4"] .rr-reise-step {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-booking-section {
  margin: 0;
  padding: 18px 0 4px;
  border-top: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-booking-section:first-child {
  padding-top: 0;
  border-top: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-booking-section .rr-section-heading {
  margin-top: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-booking-section .rr-route-preview {
  margin-top: 20px;
}

/* Task 1 (Compact Journey Editor): oberhalb von 760px stehen Strecke- und
   Termin/Bus-Felder als zweispaltiges Raster nebeneinander. Ueberschrift,
   Einleitung, Routenvorschau und die Busnutzungs-Elemente bleiben ueber die
   volle Breite, damit sie nicht in eine der beiden Spalten gequetscht werden. */
@media (min-width: 761px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-booking-section--route,
  #rr-wizard-root[data-wizard-version="4"] .rr-booking-section--schedule {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-booking-section > h3,
  #rr-wizard-root[data-wizard-version="4"] .rr-booking-section > .rr-booking-intro,
  #rr-wizard-root[data-wizard-version="4"] .rr-booking-section > .rr-route-preview,
  #rr-wizard-root[data-wizard-version="4"] .rr-booking-section > .rr-bus-use-field,
  #rr-wizard-root[data-wizard-version="4"] .rr-booking-section > .rr-bus-use-help,
  #rr-wizard-root[data-wizard-version="4"] .rr-booking-section > .rr-fahrtverlauf-editor,
  #rr-wizard-root[data-wizard-version="4"] .rr-booking-section > .rr-field--wide {
    grid-column: 1 / -1;
  }
}

/* Passagiere: kompakt - ein Zahlenfeld braucht keine volle Kartenbreite. */
#rr-wizard-root[data-wizard-version="4"] #strecke-pax {
  max-width: 180px;
}

/* Zeitleiste "Ihre Reise": eine Schiene mit Punkten, jede Zone ein Halt der
   Reise (Abfahrt, Unterwegs, Ziel, Vor Ort, Rueckfahrt). Der Kunde plant
   die Reise an einem Ort, chronologisch von oben nach unten. */
#rr-wizard-root[data-wizard-version="4"] .rr-journey {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-journey-zone {
  position: relative;
  margin: 0;
  padding: 0 0 26px 34px;
}

/* Die Schiene: verbindet den Punkt dieser Zone mit dem der naechsten. */
#rr-wizard-root[data-wizard-version="4"] .rr-journey-zone::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: -8px;
  width: 2px;
  background: var(--rr-d-line-strong);
}

#rr-wizard-root[data-wizard-version="4"] .rr-journey-zone:last-child::before {
  display: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-journey-dot {
  position: absolute;
  left: 4px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: var(--rr-d-radius-kreis);
  background: var(--rr-d-accent-dark);
  border: 3px solid var(--rr-d-paper);
  box-shadow: var(--rr-d-shadow-line);
  box-sizing: border-box;
}

#rr-wizard-root[data-wizard-version="4"] .rr-journey-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--rr-d-ink);
}

#rr-wizard-root[data-wizard-version="4"] .rr-journey-subheading {
  margin: 20px 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rr-d-ink);
}

/* Termine (Abfahrt/Rueckfahrt): kurze Felder nebeneinander. */
#rr-wizard-root[data-wizard-version="4"] .rr-journey-termine {
  margin-top: 18px;
}
@media (min-width: 761px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-journey-termine {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
  }
}

/* Zwischenhalte: je Halt eine Zeile aus Eingabefeld und Entfernen-Knopf. Die
   Zeile bleibt auch auf schmalen Geraeten nebeneinander, weil der Knopf nur
   so breit ist wie sein Zeichen - untereinander waere die Zuordnung von Feld
   und Knopf nicht mehr eindeutig. */
#rr-wizard-root[data-wizard-version="4"] .rr-stops {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-stops-field > .rr-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--rr-d-ink);
}

#rr-wizard-root[data-wizard-version="4"] .rr-stop-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-stop-row .rr-errmsg {
  grid-column: 1 / -1;
  margin-top: 0;
}

/* Ortswarnung eines Halts: eigene Zeile ueber die volle Blockbreite -
   nie im Grid-Slot von Input/Entfernen (P0-Layoutbug 18.08.2026). */
#rr-wizard-root[data-wizard-version="4"] .rr-stop-row .rr-addr-confirm-slot--halt {
  grid-column: 1 / -1;
  min-width: 0;
}
#rr-wizard-root[data-wizard-version="4"] .rr-addr-confirm-slot--halt:empty {
  display: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-stop-remove {
  padding: 0;
  width: 44px;
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

#rr-wizard-root[data-wizard-version="4"] .rr-addbtn {
  align-self: flex-start;
  margin-top: 8px;
  font-size: 14px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-mirror-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-mirror-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

#rr-wizard-root[data-wizard-version="4"] .rr-mirror-row label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* Task 3 (Kontaktdichte): Die Kontaktangaben sind kurz und gehoeren paarweise
   zusammen. Oberhalb von 760px stehen sie deshalb in zwei gleich breiten
   Spalten, auf schmalen Geraeten in einer. Strasse und der komplette
   Sonstiges-Block (Freitext samt Hilfetext) laufen immer ueber die volle
   Breite. Der Abstand kommt aus dem Raster, darum wird der Aussenabstand der
   einzelnen Felder darin neutralisiert. */
#rr-wizard-root[data-wizard-version="4"] .rr-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 18px;
  align-items: start;
}

#rr-wizard-root[data-wizard-version="4"] .rr-contact-grid > .rr-field,
#rr-wizard-root[data-wizard-version="4"] .rr-contact-notes,
#rr-wizard-root[data-wizard-version="4"] .rr-contact-notes > .rr-field {
  min-width: 0;
  margin-bottom: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-contact-grid > .rr-field--wide,
#rr-wizard-root[data-wizard-version="4"] .rr-contact-grid > .rr-contact-notes {
  grid-column: 1 / -1;
}

@media (min-width: 761px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#rr-wizard-root[data-wizard-version="4"] .rr-ki-status {
  margin-top: 0.5rem;
  color: var(--rr-d-alt-94a3b8);
  font-size: 0.875rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-fehler {
  margin-top: 0.5rem;
  color: var(--rr-d-alt-f5c542);
  font-size: 0.875rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-proposal {
  margin-top: 0.5rem;
  padding: 0.875rem 1rem;
  background: var(--rr-d-alt-fff7db);
  border: 1px solid var(--rr-d-alt-e3c45a);
  border-radius: var(--rr-d-radius-lg);
  color: var(--rr-d-alt-5f4300);
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-proposal-heading {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rr-d-alt-5f4300);
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-proposal-list {
  margin: 0;
  padding-left: 1.25rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-proposal-item {
  margin-bottom: 0.375rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.875rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-btn-proposal-accept {
  background: var(--rr-d-alt-f5c542);
  color: var(--rr-d-alt-3b2a00);
  border: 2px solid var(--rr-d-alt-d9aa1f);
}
#rr-wizard-root[data-wizard-version="4"] .rr-btn-proposal-accept:hover {
  background: var(--rr-d-alt-f0bb28);
}
#rr-wizard-root[data-wizard-version="4"] .rr-btn-proposal-reject {
  background: transparent;
  color: var(--rr-d-alt-5f4300);
  border: 2px solid var(--rr-d-alt-d9aa1f);
}
#rr-wizard-root[data-wizard-version="4"] .rr-btn-proposal-reject:hover {
  background: var(--rr-d-alt-d9aa1f-12);
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-fragen {
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  background: var(--rr-d-alt-1a3554);
  border-left: 3px solid var(--rr-d-alt-1378f5);
  border-radius: var(--rr-d-radius-sm);
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-fragen-heading {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--rr-d-alt-ffffff);
  margin: 0 0 0.25rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-fragen ul {
  margin: 0;
  padding-left: 1.25rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-ki-fragen li {
  color: var(--rr-d-alt-cbd5e1);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-trip-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
#rr-wizard-root[data-wizard-version="4"] .rr-trip-row input[type="time"] {
  flex: 0 0 7rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-trip-row input[type="text"] {
  flex: 1 1 8rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-trip-unsicher {
  border-left: 3px solid var(--rr-d-alt-f5c542);
  padding-left: 0.5rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-badge-pruefen {
  display: inline-block;
  background: var(--rr-d-alt-f5c542);
  color: var(--rr-d-alt-0e243f);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: var(--rr-d-radius-xs);
  margin-bottom: 0.25rem;
  width: 100%;
}
#rr-wizard-root[data-wizard-version="4"] .rr-btn-add {
  margin-top: 0.5rem;
  padding: 0.375rem 1rem;
  background: transparent;
  color: var(--rr-d-alt-5cb3ff);
  border: 1px solid var(--rr-d-alt-5cb3ff);
  border-radius: var(--rr-d-radius-md);
  font-size: 0.875rem;
  cursor: pointer;
}
#rr-wizard-root[data-wizard-version="4"] .rr-btn-add:hover {
  background: var(--rr-d-alt-1378f5-10);
}
#rr-wizard-root[data-wizard-version="4"] .rr-stay-day {
  margin: 1rem 0;
  padding: 0.75rem;
  background: var(--rr-d-alt-1a3554);
  border-radius: var(--rr-d-radius-md);
}
#rr-wizard-root[data-wizard-version="4"] .rr-stay-day h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  color: var(--rr-d-alt-ffffff);
}

/* ── Design D: ruhiger Reisebrief ────────────────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] {
  color: var(--rr-d-ink);
  background: var(--rr-d-canvas);
  font-family: var(--rr-d-font);
  line-height: 1.55;
}

/* Ueberschriften: eigener Haken fuer Einbetter (--rr-d-font-display),
   Standard = Grundschrift. */
#rr-wizard-root[data-wizard-version="4"] h1,
#rr-wizard-root[data-wizard-version="4"] h2,
#rr-wizard-root[data-wizard-version="4"] h3 {
  font-family: var(--rr-d-font-display);
}

/* [hidden] ist eine Aussage ueber das Dokument, keine Gestaltungsfrage.
   Autorenregeln wie display:block auf der Anfrage-Zusammenfassung duerfen
   sie nicht ueberstimmen - sonst erscheint eine verborgene Spalte doch. */
#rr-wizard-root[data-wizard-version="4"] [hidden] {
  display: none !important;
}

#rr-wizard-root[data-wizard-version="4"] .wizard-v4-shell.rr-d-shell {
  display: block;
  width: min(1180px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 36px);
  color: var(--rr-d-ink);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 16px 20px;
  color: var(--rr-d-invers);
  background: var(--rr-d-navy);
  border-radius: var(--rr-d-radius-xxl);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-brand-lockup {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: var(--rr-d-invers);
  background: var(--rr-d-accent);
  border-radius: var(--rr-d-radius-lg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-brand-mark svg {
  width: 25px;
  height: 25px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-brand-lockup > div > span {
  display: block;
  margin-bottom: 1px;
  color: var(--rr-d-brand-sub);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-brand h1 {
  margin: 0;
  color: var(--rr-d-invers);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 680;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/* Dünner Fortschritt statt nummerierter Kartenleiste */
#rr-wizard-root[data-wizard-version="4"] .rr-d-progress {
  padding: 20px 8px 18px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-head {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--rr-d-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-track {
  position: relative;
  height: 3px;
  flex: 1;
  overflow: hidden;
  /* 3,21:1 auf --rr-d-canvas: die ungefuellte Schiene bleibt als Bauteil
     erkennbar (WCAG 1.4.11), vorher #d4d8dc mit 1,27:1. */
  background: var(--rr-d-progress-track);
  border-radius: var(--rr-d-radius-lg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-track > span {
  display: block;
  height: 100%;
  background: var(--rr-d-accent);
  border-radius: inherit;
}

/* Eigene Klassen statt .rr-steps/.rr-d-stage: die Fortschrittsmarken
   erben keine fremde Gestaltung mehr, und .rr-d-stage bleibt eindeutig
   die weisse Redaktionsflaeche. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-steps {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  /* 4,87:1 auf --rr-d-canvas (vorher #8a94a2 mit 2,72:1). */
  color: var(--rr-d-progress-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 0 0 5px 1px;
  color: transparent;
  /* 3,22:1 auf --rr-d-canvas (vorher #b9c0c8 mit 1,63:1). */
  background: var(--rr-d-progress-dot);
  border: 0;
  border-radius: var(--rr-d-radius-kreis);
  box-shadow: none;
}

/* Nur der aktuelle Schritt ist blau. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step[aria-current="step"] {
  color: var(--rr-d-ink);
  font-weight: 700;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step[aria-current="step"]::before {
  width: 8px;
  height: 8px;
  margin-top: -1px;
  margin-bottom: 4px;
  background: var(--rr-d-accent);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-layout:has(.rr-d-journey[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

/* Mitlaufende Anfrage-Zusammenfassung – eine ruhige, helle Spalte, kein
   Kartenstapel. Gleiche Papier-Familie wie die Hauptflaeche, nur mit
   sanft abgesetztem Hintergrund und Haarlinien statt Kontrastbloecken. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-journey {
  position: sticky;
  top: 16px;
  min-width: 0;
  padding: 24px;
  color: var(--rr-d-ink);
  background: var(--rr-d-soft);
  border: 1px solid var(--rr-d-line);
  border-radius: var(--rr-d-radius-xxl);
}

/* Im Pruefungsschritt traegt die Hauptflaeche die Zusammenfassung. Die
   Spalte bleibt als Halt, sagt dort aber nur noch, wo man steht. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-status {
  margin: 18px 0 0;
  color: var(--rr-d-muted);
  font-size: 14px;
  line-height: 1.6;
}

#rr-wizard-root[data-wizard-version="4"] .wizard-v4-shell.rr-d-shell:has(form[data-step="pruefung"]) .rr-d-journey {
  display: block;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-title {
  margin: 0;
  color: var(--rr-d-ink);
  font-size: 17px;
  font-weight: 680;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-head > span {
  color: var(--rr-d-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-facts,
#rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-facts {
  margin: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-facts > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-facts dt,
#rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-facts dt {
  margin: 0 0 2px;
  color: var(--rr-d-muted);
  font-size: 11px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-facts dd,
#rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-facts dd {
  margin: 0;
  color: var(--rr-d-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-facts [data-state="prompt"] dd {
  color: var(--rr-d-muted);
  font-weight: 450;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-facts [data-fact="wishes"] dd,
#rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-facts [data-fact="wishes"] dd {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-facts [data-fact="wishes"] dd {
  -webkit-line-clamp: 3;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-facts [data-fact="wishes"] dd {
  -webkit-line-clamp: 2;
}

/* Kompakte, senkrechte Routen-Kurzfassung: Start, jeder Hinweg-Stopp, Ziel.
   Ersetzt den langen Fliesstext ("Ort, Land, Bundesland, Land → Ort, ...")
   durch eine kurze Liste - die volle Adresse bleibt als title-Tooltip
   erreichbar.
   Der Grid-Verbund gilt nur fuer die mobile Kurzfassung: sie ist die
   einzige Stelle, an der .rr-d-mobile-facts wirklich display:grid bekommt
   (zweispaltiges Raster ab 561px, siehe Media Query weiter unten). Die
   Desktop-Faktenliste (.rr-d-journey-facts) ist nie ein Grid - dort waere
   die Regel wirkungslose Toter Code. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-facts [data-fact="route"] {
  grid-column: 1 / -1;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-route {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-route-point {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  padding: 0 0 16px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-route-point:last-child {
  padding-bottom: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-route-point:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 2px;
  width: 2px;
  background: var(--rr-d-line-strong);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-route-marker {
  position: relative;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: var(--rr-d-radius-kreis);
  background: var(--rr-d-paper);
  border: 2px solid var(--rr-d-accent);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-route-point--start .rr-d-route-marker,
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-point--end .rr-d-route-marker {
  background: var(--rr-d-accent);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-route-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-route-role {
  margin: 0 0 2px;
  color: var(--rr-d-muted);
  font-size: 11px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-route-copy strong {
  display: block;
  color: var(--rr-d-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-route-copy small {
  display: block;
  margin-top: 1px;
  color: var(--rr-d-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* ab/an/zurueck-Zeiten an den Haltepunkten. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-copy .rr-d-route-zeit {
  color: var(--rr-d-accent-dark);
  font-weight: 600;
}

/* Etappen-Plakette (km, Fahrzeit) auf der Linie zwischen den Halten. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-leg {
  position: relative;
  padding: 0 0 16px 27px;
  list-style: none;
}
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-leg::after {
  content: "";
  position: absolute;
  left: 5px;
  top: -4px;
  bottom: 2px;
  width: 2px;
  background: var(--rr-d-line-strong);
}
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-leg small {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 2px 10px;
  background: var(--rr-d-paper);
  border: 1px solid var(--rr-d-line);
  border-radius: var(--rr-d-radius-pill);
  color: var(--rr-d-muted);
  font-size: 12px;
}

/* Rueckfahrt-Punkt: hohler Marker in Akzentfarbe. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-point--rueckfahrt .rr-d-route-marker {
  background: var(--rr-d-paper);
  border-style: dashed;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-itinerary {
  padding-top: 18px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-itinerary > p {
  margin: 0 0 9px;
  color: var(--rr-d-muted);
  font-size: 11px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-itinerary ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-itinerary li {
  color: var(--rr-d-ink);
  font-size: 13px;
  line-height: 1.4;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-itinerary li span {
  display: block;
  color: var(--rr-d-muted);
  font-size: 11px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-prompt,
#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-assurance {
  margin: 18px 0 0;
  color: var(--rr-d-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Setzt die neutrale Rückversicherung sichtbar von den Fakten darüber ab. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-assurance {
  padding-top: 16px;
  border-top: 1px solid var(--rr-d-line);
}

/* Weiße Redaktionsfläche */
#rr-wizard-root[data-wizard-version="4"] .rr-d-layout > .rr-d-stage {
  min-width: 0;
  padding: clamp(22px, 4vw, 42px);
  color: var(--rr-d-ink);
  background: var(--rr-d-paper);
  border: 1px solid var(--rr-d-line);
  border-radius: var(--rr-d-radius-xxl);
  box-shadow: var(--rr-d-shadow-lg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-layout > .rr-d-stage > form {
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--rr-d-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-layout > .rr-d-stage h2 {
  max-width: 22ch;
  margin: 0 0 24px;
  color: var(--rr-d-ink);
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 680;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-layout > .rr-d-stage h3,
#rr-wizard-root[data-wizard-version="4"] .rr-radiogroup-label,
#rr-wizard-root[data-wizard-version="4"] label {
  color: var(--rr-d-ink);
}

#rr-wizard-root[data-wizard-version="4"] input,
#rr-wizard-root[data-wizard-version="4"] select,
#rr-wizard-root[data-wizard-version="4"] textarea {
  min-height: 48px;
  padding: 11px 13px;
  color: var(--rr-d-ink);
  background: var(--rr-d-paper);
  /* 3,37:1 auf Papier (vorher #b8c2ce mit 1,80:1). */
  border: 1px solid var(--rr-d-field-border);
  border-radius: var(--rr-d-radius-lg);
}

#rr-wizard-root[data-wizard-version="4"] input::placeholder,
#rr-wizard-root[data-wizard-version="4"] textarea::placeholder {
  color: var(--rr-d-field-placeholder);
}

#rr-wizard-root[data-wizard-version="4"] input:hover,
#rr-wizard-root[data-wizard-version="4"] select:hover,
#rr-wizard-root[data-wizard-version="4"] textarea:hover {
  border-color: var(--rr-d-field-border-hover);
}

#rr-wizard-root[data-wizard-version="4"] input:focus,
#rr-wizard-root[data-wizard-version="4"] select:focus,
#rr-wizard-root[data-wizard-version="4"] textarea:focus {
  border-color: var(--rr-d-accent);
  box-shadow: var(--rr-d-shadow-focus);
}

#rr-wizard-root[data-wizard-version="4"] select option {
  color: var(--rr-d-ink);
  background: var(--rr-d-paper);
}

#rr-wizard-root[data-wizard-version="4"] .rr-field,
#rr-wizard-root[data-wizard-version="4"] .rr-review-row dd,
#rr-wizard-root[data-wizard-version="4"] .rr-kachel-titel,
#rr-wizard-root[data-wizard-version="4"] .rr-ki-heading,
#rr-wizard-root[data-wizard-version="4"] .rr-stay-day h3,
#rr-wizard-root[data-wizard-version="4"] .rr-route-preview h3,
#rr-wizard-root[data-wizard-version="4"] .rr-route-eingabe,
#rr-wizard-root[data-wizard-version="4"] .rr-route-zusammenfassung {
  color: var(--rr-d-ink);
}

#rr-wizard-root[data-wizard-version="4"] .rr-kachel-kurz,
#rr-wizard-root[data-wizard-version="4"] .rr-kachel-beispiel,
#rr-wizard-root[data-wizard-version="4"] .rr-hint,
#rr-wizard-root[data-wizard-version="4"] .rr-hint-example,
#rr-wizard-root[data-wizard-version="4"] .rr-ki-status,
#rr-wizard-root[data-wizard-version="4"] .rr-route-erkannt,
#rr-wizard-root[data-wizard-version="4"] .rr-route-hinweis,
#rr-wizard-root[data-wizard-version="4"] .rr-route-loading,
#rr-wizard-root[data-wizard-version="4"] .rr-route-unavailable {
  color: var(--rr-d-muted);
}

#rr-wizard-root[data-wizard-version="4"] .rr-radio {
  color: var(--rr-d-ink);
  background: var(--rr-d-soft);
  border: 1px solid var(--rr-d-choice-border);
  border-radius: var(--rr-d-radius-lg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-radio:hover {
  color: var(--rr-d-ink);
  background: var(--rr-d-hover);
  border-color: var(--rr-d-choice-border-hover);
}

#rr-wizard-root[data-wizard-version="4"] .rr-radio[aria-checked="true"] {
  color: var(--rr-d-ink);
  background: var(--rr-d-choice-selected);
  border: 1px solid var(--rr-d-accent);
  box-shadow: var(--rr-d-shadow-selected);
}

/* Fahrtarten als Auswahl-Karten (Inhaberentscheidung 18.08.2026):
   2er-Raster, ruhige weisse Karten mit Piktogramm, Hover-Anhebung und
   deutlichem Gewaehlt-Zustand mit Haekchen - wie der Kunde es aus
   modernen Buchungsmasken kennt. */
#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="fahrtart-rg-lbl"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  background: transparent;
  border-top: 0;
}

#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="fahrtart-rg-lbl"] .rr-radiogroup-label {
  grid-column: 1 / -1;
}

#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="fahrtart-rg-lbl"] .rr-radio {
  display: flex;
  flex-direction: row;
  min-height: 104px;
  margin: 0;
  padding: 18px 44px 18px 16px;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  background: var(--rr-d-paper);
  border: 1px solid var(--rr-d-line);
  border-radius: var(--rr-d-radius-xxl);
  box-shadow: var(--rr-d-shadow-xs);
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="fahrtart-rg-lbl"] .rr-radio:hover {
  background: var(--rr-d-card-hover);
  border-color: var(--rr-d-card-border-hover);
  box-shadow: var(--rr-d-shadow-sm);
}

#rr-wizard-root[data-wizard-version="4"] [aria-labelledby="fahrtart-rg-lbl"] .rr-radio[aria-checked="true"] {
  background: var(--rr-d-card-selected);
  border-color: var(--rr-d-accent);
  box-shadow: var(--rr-d-shadow-selected-card);
}

#rr-wizard-root[data-wizard-version="4"] .rr-kachel-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rr-d-radius-xl);
  color: var(--rr-d-accent-dark);
  background: var(--rr-d-icon-bg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-kachel-icon svg {
  width: 24px;
  height: 24px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-kachel-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Gewaehlt-Haekchen: leerer Kreis, der sich mit der Wahl fuellt. */
#rr-wizard-root[data-wizard-version="4"] .rr-kachel-check {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--rr-d-radius-kreis);
  border: 2px solid var(--rr-d-check-border);
  background: var(--rr-d-paper);
  color: transparent;
  transition: border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}

#rr-wizard-root[data-wizard-version="4"] .rr-kachel-check svg {
  width: 13px;
  height: 13px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-radio[aria-checked="true"] .rr-kachel-check {
  border-color: var(--rr-d-accent);
  background: var(--rr-d-accent);
  color: var(--rr-d-invers);
}

/* Das Badge sitzt auf der Karten-Oberkante - links vom Haekchen. */
#rr-wizard-root[data-wizard-version="4"] .rr-kachel-haeufig {
  top: -10px;
  right: 44px;
  color: var(--rr-d-invers);
  background: var(--rr-d-accent);
  border: 1px solid var(--rr-d-accent);
  border-radius: var(--rr-d-radius-pill);
  padding: 2px 10px;
}

@media (max-width: 640px) {
  #rr-wizard-root[data-wizard-version="4"] [aria-labelledby="fahrtart-rg-lbl"] {
    grid-template-columns: 1fr;
  }
}

#rr-wizard-root[data-wizard-version="4"] .rr-primary,
#rr-wizard-root[data-wizard-version="4"] .rr-btn-primary {
  min-height: 48px;
  color: var(--rr-d-invers);
  background: var(--rr-d-accent);
  border: 1px solid var(--rr-d-accent);
  border-radius: var(--rr-d-radius-lg);
  font-weight: 700;
}

#rr-wizard-root[data-wizard-version="4"] .rr-primary:hover,
#rr-wizard-root[data-wizard-version="4"] .rr-btn-primary:hover {
  color: var(--rr-d-invers);
  background: var(--rr-d-accent-dark);
  border-color: var(--rr-d-accent-dark);
}

#rr-wizard-root[data-wizard-version="4"] .rr-back,
#rr-wizard-root[data-wizard-version="4"] .rr-btn,
#rr-wizard-root[data-wizard-version="4"] .rr-btn-secondary,
#rr-wizard-root[data-wizard-version="4"] .rr-secondary,
#rr-wizard-root[data-wizard-version="4"] .rr-btn-add,
#rr-wizard-root[data-wizard-version="4"] .rr-addbtn,
#rr-wizard-root[data-wizard-version="4"] .rr-stop-remove {
  color: var(--rr-d-accent-dark);
  background: transparent;
  border: 1px solid var(--rr-d-button-border);
  border-radius: var(--rr-d-radius-lg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-back:hover,
#rr-wizard-root[data-wizard-version="4"] .rr-btn:hover,
#rr-wizard-root[data-wizard-version="4"] .rr-btn-secondary:hover,
#rr-wizard-root[data-wizard-version="4"] .rr-secondary:hover,
#rr-wizard-root[data-wizard-version="4"] .rr-btn-add:hover,
#rr-wizard-root[data-wizard-version="4"] .rr-addbtn:hover,
#rr-wizard-root[data-wizard-version="4"] .rr-stop-remove:hover {
  color: var(--rr-d-ink);
  background: var(--rr-d-hover);
  border-color: var(--rr-d-button-border-hover);
}

#rr-wizard-root[data-wizard-version="4"] button:focus-visible,
#rr-wizard-root[data-wizard-version="4"] [role="radio"]:focus-visible,
#rr-wizard-root[data-wizard-version="4"] [tabindex]:focus-visible,
#rr-wizard-root[data-wizard-version="4"] summary:focus-visible {
  outline: 3px solid var(--rr-d-focus);
  outline-offset: 3px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-hilfe,
#rr-wizard-root[data-wizard-version="4"] .rr-ki-block,
#rr-wizard-root[data-wizard-version="4"] .rr-stay-day,
#rr-wizard-root[data-wizard-version="4"] .rr-route-preview,
#rr-wizard-root[data-wizard-version="4"] .rr-hint-abgrenzung,
#rr-wizard-root[data-wizard-version="4"] .rr-ki-fragen {
  color: var(--rr-d-ink);
  background: var(--rr-d-soft);
  border: 1px solid var(--rr-d-line);
  border-radius: var(--rr-d-radius-lg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-hint-abgrenzung,
#rr-wizard-root[data-wizard-version="4"] .rr-ki-fragen,
#rr-wizard-root[data-wizard-version="4"] .rr-trip-unsicher,
#rr-wizard-root[data-wizard-version="4"] .rr-route-station,
#rr-wizard-root[data-wizard-version="4"] .rr-route-ungenau {
  border-left-width: 1px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-section {
  border-color: var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-row {
  border-color: var(--rr-d-line-soft);
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-row dt {
  color: var(--rr-d-muted);
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-dsgvo,
#rr-wizard-root[data-wizard-version="4"] .rr-kein-vertrag {
  color: var(--rr-d-muted);
}

#rr-wizard-root[data-wizard-version="4"] .rr-submit-error {
  color: var(--rr-d-error-text);
  background: var(--rr-d-error-bg);
  border-color: var(--rr-d-error-border);
}

#rr-wizard-root[data-wizard-version="4"] .rr-success {
  color: var(--rr-d-success-text);
  background: var(--rr-d-success-bg);
  border: 1px solid var(--rr-d-success-border);
  border-radius: var(--rr-d-radius-lg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-success h2,
#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-naechste h3,
#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-kontakt p {
  color: var(--rr-d-success-strong);
}

#rr-wizard-root[data-wizard-version="4"] .rr-success p,
#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-schritte,
#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht dl {
  color: var(--rr-d-success-body);
}

/* Kundenkonto-Hinweis (nur bei freigegebenem Kundenbereich). Die alte
   Linkfarbe der Kontaktzeile (#4ade80) waere auf dem hellen Grund kaum
   lesbar - der Link nimmt die Ueberschriftenfarbe der Erfolgskarte. */
#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-kundenkonto a {
  color: var(--rr-d-success-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-kundenkonto a:focus-visible {
  outline: 3px solid var(--rr-d-focus);
  outline-offset: 3px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog {
  background: var(--rr-d-overlay);
}

#rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog-inner {
  color: var(--rr-d-ink);
  background: var(--rr-d-paper);
  border: 1px solid var(--rr-d-line);
  border-radius: var(--rr-d-radius-xxl);
}

#rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog-title,
#rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog-text,
#rr-wizard-root[data-wizard-version="4"] .rr-reset-dialog-list {
  color: var(--rr-d-ink);
}

/* Diese Elemente stammen aus der dunklen Fassung und leben weiter. Ohne
   Umstellung stehen sie in Weiss bzw. Hellgrau auf hellem Papier - lesbar
   nur mit Muehe oder gar nicht. Gemessen: alle Werte >= 4,5:1. */
#rr-wizard-root[data-wizard-version="4"] .rr-review-section-head h3,
#rr-wizard-root[data-wizard-version="4"] .rr-section-heading,
#rr-wizard-root[data-wizard-version="4"] .rr-ki-fragen-heading,
#rr-wizard-root[data-wizard-version="4"] .rr-ki-fragen li {
  color: var(--rr-d-ink);
}

#rr-wizard-root[data-wizard-version="4"] .rr-ki-summary {
  color: var(--rr-d-muted);
}

#rr-wizard-root[data-wizard-version="4"] .rr-ki-fehler {
  /* 5,52:1 auf --rr-d-soft; #f5c542 lag dort bei 1,49:1. */
  color: var(--rr-d-warn-text);
}

/* ── Reiseverlauf (Tagesablauf-Editor, Schritt "Reiseplan") ─────────
   Ersetzt seit 13.08.2026 die Musterauswahl. Der Kunde sieht seine Tage
   der Reihe nach; jeder Tag ist eine Karte, Kontextzeilen (Anreise,
   Rückfahrt) rahmen die eigenen Fahrten ein. Gilt im Editor und in der
   Zusammenfassung – gleiche Bausteine, gleiches Bild. */

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 16px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-day {
  padding: 16px;
  color: var(--rr-d-ink);
  background: var(--rr-d-soft);
  border: 1px solid var(--rr-d-line);
  border-left: 3px solid var(--rr-d-accent);
  border-radius: var(--rr-d-radius-lg);
  /* Die Karten stehen im Fluss der Liste; der Abstand kommt aus dem gap. */
  margin-bottom: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-label {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--rr-d-ink);
}

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-context {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rr-d-muted);
}

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-legs {
  list-style: none;
  margin: 8px 0;
  padding: 0;
}

/* Reine Textzeile in der Zusammenfassung. Im Editor trägt dieselbe Zeile
   zusätzlich .rr-trip-row und bleibt damit das bekannte Eingabe-Raster. */
#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-row:not(.rr-trip-row) {
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rr-d-ink);
  border-bottom: 1px solid var(--rr-d-line-soft);
}

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-row:not(.rr-trip-row):last-child {
  border-bottom: 0;
}

/* Eine echte Etappe der Reise – Hin-/Rückfahrt oder eine eigene Fahrt.
   Trägt zusätzlich .rr-itinerary-row (Raster) und dient als stabiler
   Anker für Vertragstests und spätere Auszeichnung. */
#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-leg {
  position: relative;
}

/* Erklärung im Verlauf, z. B. dass der Bus zwischendurch wegfährt. */
#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-hinweis {
  margin: 6px 0 10px;
  padding-left: 10px;
  border-left: 2px solid var(--rr-d-line, var(--rr-d-line-soft));
}

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-bundle {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rr-d-muted);
  background: var(--rr-d-paper);
  border: 1px dashed var(--rr-d-line);
  border-radius: var(--rr-d-radius-lg);
}

/* Freier Zwischentag als Aktionsflaeche: die ganze Karte ist der
   Knopf "+ Fahrt eintragen" (Inhaberentscheidung 18.08.2026). */
#rr-wizard-root[data-wizard-version="4"] button.rr-stay-day--leer {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--rr-d-paper);
  border: 1px dashed var(--rr-d-empty-border);
  border-left: 3px solid var(--rr-d-empty-border);
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

#rr-wizard-root[data-wizard-version="4"] button.rr-stay-day--leer:hover,
#rr-wizard-root[data-wizard-version="4"] button.rr-stay-day--leer:focus-visible {
  background: var(--rr-d-card-selected);
  border-color: var(--rr-d-accent);
  border-left-color: var(--rr-d-accent);
}

#rr-wizard-root[data-wizard-version="4"] .rr-stay-day--leer .rr-itinerary-label {
  display: block;
}

#rr-wizard-root[data-wizard-version="4"] .rr-stay-day-leer-text {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rr-d-muted);
}

#rr-wizard-root[data-wizard-version="4"] .rr-stay-day-leer-cta {
  margin-left: 6px;
  font-weight: 600;
  color: var(--rr-d-accent-dark);
}

/* An- und Abreise im Bearbeiten-Modus: schmale Kontextzeile statt
   gleichrangiger Karte - der Kunde hat beides oben selbst eingetragen,
   hier dient es nur der Orientierung im Kalender. */
#rr-wizard-root[data-wizard-version="4"] .rr-stay-day--rahmen {
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-left: 3px solid var(--rr-d-line);
  border-radius: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-stay-day--rahmen .rr-itinerary-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--rr-d-muted);
}

#rr-wizard-root[data-wizard-version="4"] .rr-stay-day--rahmen .rr-itinerary-context {
  margin: 2px 0 0;
  font-size: 13px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-empty {
  font-size: 14px;
  line-height: 1.5;
  color: var(--rr-d-muted);
}

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-remove {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 8px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--rr-d-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rr-d-radius-lg);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-remove:hover {
  color: var(--rr-d-ink);
  background: var(--rr-d-hover);
  border-color: var(--rr-d-button-border);
}

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-unterschied {
  margin: 0 0 16px;
  color: var(--rr-d-ink);
}
#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-unterschied > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--rr-d-accent-dark);
  cursor: pointer;
}

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-unterschied p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--rr-d-ink);
}

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-plan-tag {
  margin: 4px 0 16px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-itinerary-plan-tag .rr-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--rr-d-ink);
}

#rr-wizard-root[data-wizard-version="4"] #itinerary-tag-planen {
  min-height: 44px;
  max-width: 420px;
}

/* Ein Button je offenem Zwischentag – ersetzt bei kurzen Reisen das Dropdown. */
#rr-wizard-root[data-wizard-version="4"] .rr-stay-tag-btn {
  display: inline-block;
  margin: 4px 8px 4px 0;
  padding: 10px 16px;
  min-height: 44px;
  background: transparent;
  color: var(--rr-d-accent-dark);
  border: 1px solid var(--rr-d-accent-dark);
  border-radius: var(--rr-d-radius-lg);
  font-size: 15px;
  cursor: pointer;
}
#rr-wizard-root[data-wizard-version="4"] .rr-stay-tag-btn:hover {
  background: var(--rr-d-accent-tint);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary {
  display: none;
}

@media (max-width: 860px) {
  #rr-wizard-root[data-wizard-version="4"] .wizard-v4-shell.rr-d-shell {
    padding: 12px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-brand {
    min-height: 66px;
    padding: 13px 14px;
    border-radius: var(--rr-d-radius-lg);
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress {
    padding: 16px 4px 14px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress-steps {
    margin-top: 8px;
    align-items: center;
  }

  /* Schmal bleibt die Beschriftung des AKTUELLEN Schritts stehen; die
     uebrigen schrumpfen auf ihren Punkt. Ihre eigenen Spans werden mit dem
     bewaehrten Visually-hidden-Muster ausgeblendet. Dadurch bleibt der Text
     im Accessibility-Tree, ohne halb abgeschnittene Glyphen zu zeichnen. */
  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step {
    position: relative;
    flex: 0 0 auto;
    width: 8px;
    overflow: visible;
    white-space: nowrap;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step:not([aria-current="step"]) .rr-d-progress-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step[aria-current="step"] {
    flex: 1 1 auto;
    width: auto;
    overflow: visible;
    white-space: normal;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-layout {
    display: block;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-journey {
    display: none;
  }

  /* Die Uebersicht selbst uebernimmt mobil die Zusammenfassungsleiste -
     die Routenvorschau (Karte + Ortsbestaetigung) muss aber sichtbar
     bleiben. Also: Spalte zeigen, alles ausser der Vorschau verbergen. */
  #rr-wizard-root[data-wizard-version="4"] .rr-d-journey[data-empty="false"][data-journey-mode="notiz"],
  #rr-wizard-root[data-wizard-version="4"] .rr-d-journey[data-empty="false"][data-journey-mode="leiste"] {
    display: block;
    position: static;
    padding: 0;
    border: 0;
    background: transparent;
  }
  #rr-wizard-root[data-wizard-version="4"] .rr-d-journey[data-journey-mode="notiz"] > :not(.rr-route-preview),
  #rr-wizard-root[data-wizard-version="4"] .rr-d-journey[data-journey-mode="leiste"] > :not(.rr-route-preview) {
    display: none;
  }
  #rr-wizard-root[data-wizard-version="4"] .rr-route-preview--aside {
    margin-top: 0;
  }

  #rr-wizard-root[data-wizard-version="4"] .wizard-v4-shell.rr-d-shell:has(form[data-step="pruefung"]) .rr-d-journey {
    display: none;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-layout > .rr-d-stage {
    padding: clamp(18px, 5vw, 30px);
    border-radius: var(--rr-d-radius-lg);
    box-shadow: var(--rr-d-shadow-md);
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary-wrap {
    display: block;
    margin: 0 0 26px;
    position: sticky;
    top: 12px;
    z-index: 4;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary {
    display: block;
    margin: 0;
    color: var(--rr-d-ink);
    background: var(--rr-d-soft);
    border: 1px solid var(--rr-d-line);
    border-radius: var(--rr-d-radius-lg);
    box-shadow: var(--rr-d-shadow-summary);
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 10px 44px 10px 13px;
    cursor: pointer;
    list-style: none;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary summary::-webkit-details-marker {
    display: none;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 17px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--rr-d-accent-dark);
    border-bottom: 2px solid var(--rr-d-accent-dark);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 180ms ease-out;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary[open] summary::after {
    transform: translateY(-25%) rotate(225deg);
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary summary > span {
    min-width: 0;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary summary strong,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary summary small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary summary strong {
    color: var(--rr-d-ink);
    font-size: 14px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary summary small {
    margin-top: 1px;
    color: var(--rr-d-muted);
    font-size: 11px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary-body {
    padding: 0 13px 14px;
    border-top: 1px solid var(--rr-d-line);
    max-height: min(50vh, 320px);
    overflow-y: auto;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary-body > p {
    margin: 12px 0 0;
    color: var(--rr-d-muted);
    font-size: 13px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-facts > div {
    min-width: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--rr-d-line);
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-facts dt {
    color: var(--rr-d-muted);
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-facts dd {
    color: var(--rr-d-ink);
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-facts [data-state="prompt"] dd {
    color: var(--rr-d-muted);
    font-weight: 450;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary .rr-d-journey-itinerary {
    grid-column: 1 / -1;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-stage h2,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-stage input,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-stage select,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-stage textarea,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-stage button,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-stage [role="radio"] {
    scroll-margin-top: 116px;
  }
}

@media (max-width: 560px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-d-brand-mark {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-brand h1 {
    font-size: 18px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-brand-lockup > div > span {
    font-size: 11px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-brand {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress-head {
    gap: 10px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-layout > .rr-d-stage h2 {
    margin-bottom: 20px;
    font-size: 28px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-facts {
    grid-template-columns: 1fr;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-nav {
    position: sticky;
    z-index: 20;
    bottom: 0;
    margin: 28px -18px -18px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: var(--rr-d-nav-bg);
    border-top: 1px solid var(--rr-d-line);
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-completion-actions {
    margin-bottom: 0;
  }
}

/* Eingabezeile einer Fahrt auf schmalen Geräten.

   Die Zeile stapelt ab 719px zu einer Spalte (Block weiter oben). Die
   Design-D-Regeln danach setzen für die nebeneinander stehende Fassung
   eine flex-basis (7rem / 8rem). In einer Spalte wirkt dieselbe Angabe
   auf die HÖHE — daraus wurden 112px bzw. 128px hohe Eingabefelder.
   Weil beide Regeln gleich stark sind, entscheidet die Reihenfolge:
   deshalb steht die Rücknahme hier am Ende der Datei. */
@media (max-width: 719px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-trip-row {
    align-items: stretch;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-trip-row input[type="time"],
  #rr-wizard-root[data-wizard-version="4"] .rr-trip-row input[type="text"] {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* Reiseverlauf auf schmalen Geräten: die Tageskarte darf den Rand nutzen,
   der Entfernen-Knopf steht auf eigener Zeile statt gequetscht daneben. */
@media (max-width: 560px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-itinerary-day {
    padding: 14px 12px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-itinerary-remove {
    display: flex;
    width: 100%;
    margin: 8px 0 0;
    justify-content: center;
  }

  #rr-wizard-root[data-wizard-version="4"] #itinerary-tag-planen {
    max-width: 100%;
  }
}

/* ── Design D: selbststaendige Routenvorschau ────────────────────────── */

#rr-wizard-root[data-wizard-version="4"] .rr-route-preview {
  margin: 12px 0 18px;
  padding: clamp(14px, 2.4vw, 22px);
  overflow: hidden;
  color: var(--rr-d-ink);
  background: var(--rr-d-paper);
  border: 1px solid var(--rr-d-line);
  border-radius: var(--rr-d-radius-lg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-preview h3 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.85fr);
  gap: clamp(16px, 2.4vw, 24px);
  align-items: start;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-layout--list-only {
  grid-template-columns: minmax(0, 1fr);
}

/* In der Anfrage-Spalte: einspaltig stapeln, kompaktere Abstaende. */
#rr-wizard-root[data-wizard-version="4"] .rr-route-preview--aside {
  margin-top: 18px;
}
#rr-wizard-root[data-wizard-version="4"] .rr-route-preview--aside .rr-route-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* Stapel aus echter Google-Karte, beschriftetem SVG-Fallback und Ortsbalken.
   Er ist der einzige Grid-Kind an der Kartenposition von .rr-route-layout -
   ohne diesen Wrapper wuerden die drei Teile als eigene Grid-Items in die
   zweispaltige Ortspruefung rutschen. */
#rr-wizard-root[data-wizard-version="4"] .rr-route-map-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Leer, bis mountGoogleRouteMap() erfolgreich eine echte Karte einsetzt -
   erst dann macht JS sie sichtbar und blendet den Fallback aus. Blockt der
   Browser Google extern (Browser-Matrix) oder wirft das Mounten einen
   Fehler, bleibt sie unsichtbar und der SVG-Fallback bleibt die einzige
   Kartenflaeche. */
/* Kartenbild (HERE, ueber OmniDispo): liegt deckungsgleich ueber der
   gezeichneten Route (gleiches Seitenverhaeltnis 720:320). Bis es geladen
   ist - oder wenn es nicht kommt - bleibt die gezeichnete Route sichtbar. */
#rr-wizard-root[data-wizard-version="4"] .rr-route-map-flaeche {
  position: relative;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-kartenbild {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  background: var(--rr-d-map-bg);
  transition: opacity 0.2s ease;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-map-flaeche--bild .rr-route-kartenbild {
  opacity: 1;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-map-fallback {
  min-width: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-map-placebar {
  color: var(--rr-d-muted);
  font-size: 12px;
  line-height: 1.4;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-map-frame {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--rr-d-map-bg);
  border: 1px solid var(--rr-d-map-border);
  border-radius: var(--rr-d-radius-lg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-map {
  display: block;
  width: 100%;
  height: auto;
  color: var(--rr-d-ink);
  background: var(--rr-d-map-bg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-line-shadow,
#rr-wizard-root[data-wizard-version="4"] .rr-route-map-polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-line-shadow {
  stroke: var(--rr-d-map-line-halo);
  stroke-width: 9;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-map-polyline {
  stroke: var(--rr-d-accent);
  stroke-width: 4;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-marker-halo {
  fill: var(--rr-d-map-marker-halo);
  stroke: var(--rr-d-map-marker-ring);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-marker-dot {
  fill: var(--rr-d-accent);
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-marker--start .rr-route-marker-dot {
  fill: var(--rr-d-navy);
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-marker--end .rr-route-marker-dot {
  fill: var(--rr-d-danger);
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-marker-number {
  fill: var(--rr-d-invers);
  font-family: var(--rr-d-font);
  font-size: 28px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--rr-d-map-number-stroke);
  stroke-width: 1px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-map-frame figcaption {
  padding: 8px 11px;
  color: var(--rr-d-muted);
  background: var(--rr-d-map-caption-bg);
  border-top: 1px solid var(--rr-d-map-caption-line);
  font-size: 12px;
  line-height: 1.4;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-details {
  min-width: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-stationen {
  list-style: none;
  margin: 0;
  padding: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-station,
#rr-wizard-root[data-wizard-version="4"] .rr-route-station.rr-route-ungenau {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  color: var(--rr-d-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rr-d-line);
  border-radius: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-station:last-child {
  border-bottom: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-index {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: var(--rr-d-invers);
  background: var(--rr-d-accent);
  border-radius: var(--rr-d-radius-kreis);
  font-size: 12px;
  font-weight: 700;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-station:first-child .rr-route-index {
  background: var(--rr-d-navy);
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-station:last-child .rr-route-index {
  background: var(--rr-d-danger);
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-station-copy {
  min-width: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-label,
#rr-wizard-root[data-wizard-version="4"] .rr-route-eingabe,
#rr-wizard-root[data-wizard-version="4"] .rr-route-erkannt,
#rr-wizard-root[data-wizard-version="4"] .rr-route-meta {
  display: block;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-label {
  margin-bottom: 1px;
  color: var(--rr-d-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-eingabe {
  overflow-wrap: anywhere;
  color: var(--rr-d-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-erkannt {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--rr-d-muted);
  font-size: 12px;
  line-height: 1.45;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-erkannt strong {
  color: var(--rr-d-ink);
  font-weight: 600;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-meta {
  margin-top: 2px;
  color: var(--rr-d-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-station.rr-route-abweichung {
  margin: 6px 0;
  padding: 11px;
  background: var(--rr-d-deviation-bg);
  border: 1px solid var(--rr-d-deviation-border);
  border-radius: var(--rr-d-radius-lg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-warnung {
  display: block;
  margin-top: 8px;
  padding: 8px 9px;
  color: var(--rr-d-deviation-text);
  background: var(--rr-d-paper);
  border: 1px solid var(--rr-d-deviation-warn-border);
  border-radius: var(--rr-d-radius-md);
  font-size: 12px;
  line-height: 1.45;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-warnung strong {
  color: var(--rr-d-deviation-strong);
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-warnung--ungenau {
  color: var(--rr-d-vague-text);
  background: var(--rr-d-vague-bg);
  border-color: var(--rr-d-vague-border);
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-warnung--ungenau strong {
  color: var(--rr-d-vague-strong);
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-pruefbitte-global {
  margin: 12px 0 0;
  color: var(--rr-d-muted);
  font-size: 13px;
  line-height: 1.5;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-zusammenfassung {
  margin: 16px 0 2px;
  color: var(--rr-d-ink);
  font-size: 15px;
  font-weight: 700;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-ankunft {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--rr-d-ink);
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-hinweis {
  margin: 0;
  color: var(--rr-d-muted);
  font-size: 12px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-loading,
#rr-wizard-root[data-wizard-version="4"] .rr-route-unavailable {
  margin: 0;
  color: var(--rr-d-muted);
  font-size: 14px;
  line-height: 1.5;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-fallback {
  display: grid;
  gap: 2px;
  margin: 0 0 10px;
  color: var(--rr-d-ink);
  font-size: 14px;
  line-height: 1.5;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-fallback span {
  color: var(--rr-d-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-retry {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 760px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-route-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-route-map-frame {
    max-width: 100%;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-route-error {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 430px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-route-preview {
    padding: 13px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-route-map-frame figcaption {
    font-size: 11px;
  }
}

/* ── Reisebrief (Prüfschritt) ──────────────────────────────────────
   Der Prüfschritt ist kein Formular mehr, sondern ein Brief: ein Blatt,
   auf dem Abschnitte durch Haarlinien getrennt sind. Vorher stapelten
   sich fünf gerahmte Kästen übereinander – auf 390px eine Kartenwand,
   in der man das Wesentliche nicht mehr findet. Jeder Abschnitt behält
   sein eigenes "Ändern" rechts neben der Überschrift, weil man dort
   korrigiert, wo man den Fehler sieht. */

#rr-wizard-root[data-wizard-version="4"] .rr-d-review {
  margin: 0 0 16px;
  padding: 4px 20px;
  background: var(--rr-d-paper);
  border: 1px solid var(--rr-d-line);
  border-radius: var(--rr-d-radius-xl);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-d-review-section {
  margin: 0;
  padding: 18px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rr-d-line);
  border-radius: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-d-review-section:first-child {
  border-top: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-row {
  gap: 4px 16px;
  margin-bottom: 6px;
}

/* Der Wert trägt die Aussage, nicht die Beschriftung. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-row dd {
  color: var(--rr-d-ink);
  font-weight: 500;
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-narrative {
  margin: 0;
  color: var(--rr-d-ink);
  font-size: 15px;
  line-height: 1.55;
}

/* Die Routenprüfung gehört in den Streckenabschnitt und darf ihn nicht
   optisch sprengen: keine zweite Rahmung im Rahmen. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-review-route .rr-route-preview {
  margin: 4px 0 12px;
  padding: 0;
  background: transparent;
  border: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review-itinerary .rr-itinerary {
  margin: 4px 0 12px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-dsgvo {
  margin-top: 0;
  padding: 18px 0;
  border-top: 1px solid var(--rr-d-line);
}

/* Die Einwilligung trug noch das Grau der dunklen Fassung (2,37:1 auf
   Weiss) und sah dadurch deaktiviert aus. Eine Pflichtzustimmung muss
   lesbar sein. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-dsgvo label {
  color: var(--rr-d-muted);
}

/* ── Kurzbrief (Prüfschritt und Erfolgsbildschirm) ─────────────────
   Dieselben Angaben in derselben Reihenfolge – der Kunde liest nach dem
   Absenden wortgleich, was er abgeschickt hat. */

#rr-wizard-root[data-wizard-version="4"] .rr-d-brief-daten {
  margin: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht {
  margin-top: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--rr-d-success-border);
  border-radius: var(--rr-d-radius-lg);
  background: var(--rr-d-success-card);
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rr-d-success-strong);
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht .rr-review-row dt {
  color: var(--rr-d-success-label);
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht .rr-review-row dd,
#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht .rr-itinerary-day,
#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht .rr-itinerary-bundle {
  color: var(--rr-d-success-text);
}

/* Der Ablauf steht im Erfolgsfall nur zum Nachlesen da. */
#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht .rr-itinerary {
  margin: 12px 0 0;
}

@media (max-width: 480px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-d-review {
    padding: 2px 14px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-d-review-section {
    padding: 14px 0;
  }

  /* Beschriftung über den Wert: 120px Mindestbreite plus langer Ort
     erzeugen sonst Umbrüche mitten in der Adresse. */
  #rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-row,
  #rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht .rr-review-row {
    flex-direction: column;
    gap: 2px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-row dt,
  #rr-wizard-root[data-wizard-version="4"] .rr-erfolg-uebersicht .rr-review-row dt {
    min-width: 0;
  }
}

/* ── Journey-Modell: Programmpunkte, automatische Anschlüsse, Fakten ──
   Neue Bausteine des Journey-Passes im bestehenden Token-System -
   kein Redesign, nur ruhigere Zustände derselben Komponenten. */

/* Vollständiger Programmpunkt als ruhige Textzeile. */
#rr-wizard-root[data-wizard-version="4"] .rr-programm-punkt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rr-d-line);
  border-radius: var(--rr-d-radius-lg);
  background: var(--rr-d-paper);
}
#rr-wizard-root[data-wizard-version="4"] .rr-programm-punkt-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
#rr-wizard-root[data-wizard-version="4"] .rr-programm-zeit {
  font-size: 0.8125rem;
  color: var(--rr-d-muted);
}
#rr-wizard-root[data-wizard-version="4"] .rr-programm-strecke {
  font-size: 0.9375rem;
  color: var(--rr-d-ink);
  overflow-wrap: anywhere;
}
#rr-wizard-root[data-wizard-version="4"] .rr-trip-btn--text {
  min-width: 0;
  padding: 0 10px;
  font-size: 0.8125rem;
}

/* Automatisch ergänzter Anschluss: sichtbar, aber sekundär - kein
   Fehler, kein manueller Programmpunkt. Textuelle Kennzeichnung
   ("Automatisch ergänzt"), nicht nur Farbe. */
#rr-wizard-root[data-wizard-version="4"] .rr-programm-connector {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 1px dashed var(--rr-d-line-strong);
  border-radius: var(--rr-d-radius-lg);
  background: var(--rr-d-soft);
  color: var(--rr-d-muted);
}
#rr-wizard-root[data-wizard-version="4"] .rr-programm-connector .rr-programm-strecke {
  color: var(--rr-d-muted);
  font-weight: 500;
}
#rr-wizard-root[data-wizard-version="4"] .rr-programm-connector-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#rr-wizard-root[data-wizard-version="4"] .rr-programm-connector small {
  font-size: 0.8125rem;
}

/* Kompakte Faktenzeilen unter Hinfahrt/Rückfahrt; leere bleiben weg. */
#rr-wizard-root[data-wizard-version="4"] .rr-journey-fakten:empty {
  display: none;
}
#rr-wizard-root[data-wizard-version="4"] .rr-journey-fakten {
  margin-top: 4px;
  font-weight: 600;
}

/* Timeline-Marker des automatischen Anschlusses in der Anfrage-Spalte. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-point--auto .rr-d-route-marker {
  background: transparent;
  border: 1px dashed var(--rr-d-line-strong);
}
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-point--auto .rr-d-route-role,
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-point--auto strong {
  color: var(--rr-d-muted);
}

/* Tagesüberschrift der Sidebar-Timeline (ersetzt den Termin-Fakt). */
#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-tag {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rr-d-ink);
}

/* Journey Gap: Klärungskarte (kein Fehler-Framing, ruhige Optionen). */
#rr-wizard-root[data-wizard-version="4"] .rr-journey-gap--offen {
  border-style: solid;
  border-color: var(--rr-d-line-strong);
  background: var(--rr-d-paper);
  color: var(--rr-d-ink);
}
#rr-wizard-root[data-wizard-version="4"] .rr-gap-optionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
#rr-wizard-root[data-wizard-version="4"] .rr-gap-option {
  padding: 6px 12px;
  font-size: 0.8125rem;
}
#rr-wizard-root[data-wizard-version="4"] .rr-journey-gap .rr-trip-steuer {
  margin-top: 6px;
}

/* Micro-UX-Finish (17.08.2026): ruhige Programmzeilen, Halt-Warnungen,
   schlanker Rückfahrt-Haken. */
#rr-wizard-root[data-wizard-version="4"] .rr-trip-steuer--ruhig {
  gap: 6px;
  align-items: baseline;
}
#rr-wizard-root[data-wizard-version="4"] .rr-trip-trenner {
  color: var(--rr-d-muted);
}
#rr-wizard-root[data-wizard-version="4"] .rr-label-zusatz {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--rr-d-muted);
}
#rr-wizard-root[data-wizard-version="4"] .rr-addr-confirm-slot--halt {
  flex-basis: 100%;
}
#rr-wizard-root[data-wizard-version="4"] .rr-addr-confirm-slot--halt .rr-address-confirm {
  margin-top: 4px;
}

/* ── Route-Card: Relations-Kopf + Kennzahlen (18.08.2026) ─────────── */
#rr-wizard-root[data-wizard-version="4"] .rr-route-relation {
  margin: 10px 0 2px;
}
#rr-wizard-root[data-wizard-version="4"] .rr-route-relation strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--rr-d-ink);
  overflow-wrap: anywhere;
}
#rr-wizard-root[data-wizard-version="4"] .rr-route-relation small {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  color: var(--rr-d-muted);
}
#rr-wizard-root[data-wizard-version="4"] .rr-route-kennzahlen {
  display: flex;
  gap: 28px;
  margin: 10px 0 2px;
}
#rr-wizard-root[data-wizard-version="4"] .rr-route-kennzahlen strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--rr-d-ink);
}
#rr-wizard-root[data-wizard-version="4"] .rr-route-kennzahlen small {
  display: block;
  font-size: 12px;
  color: var(--rr-d-muted);
}

/* ── Typo-Konsolidierung (18.08.2026) ────────────────────────────────
   Skala: Schritt-Titel 28 / Abschnitt 16 / Label & Body 14 / Meta 12-13.
   Weniger Gewichte: 600 nur fuer Titel und Werte, sonst 400/500. */
#rr-wizard-root[data-wizard-version="4"] .rr-field label,
#rr-wizard-root[data-wizard-version="4"] .rr-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--rr-d-ink);
}
#rr-wizard-root[data-wizard-version="4"] .rr-hint,
#rr-wizard-root[data-wizard-version="4"] .rr-hilfe {
  font-size: 13px;
  font-weight: 400;
  color: var(--rr-d-muted);
}
#rr-wizard-root[data-wizard-version="4"] .rr-linkbtn {
  font-size: 13px;
  font-weight: 400;
}
#rr-wizard-root[data-wizard-version="4"] .rr-address-confirm {
  font-size: 13px;
  font-weight: 400;
}
#rr-wizard-root[data-wizard-version="4"] .rr-address-confirm strong {
  font-weight: 600;
}
/* Sidebar an dieselbe Skala koppeln. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-facts dt {
  font-size: 12px;
  font-weight: 400;
}
#rr-wizard-root[data-wizard-version="4"] .rr-d-journey-facts dd {
  font-size: 14px;
  font-weight: 500;
}
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-copy strong {
  font-weight: 500;
}
#rr-wizard-root[data-wizard-version="4"] .rr-d-route-zeit {
  font-weight: 500;
}

/* "Anderen Ort suchen": ruhige Meta-Zeile am Blockende, volle Breite. */
#rr-wizard-root[data-wizard-version="4"] .rr-suche-erweitern {
  display: block;
  grid-column: 1 / -1;
  text-align: right;
  font-size: 12px;
  margin-top: 2px;
  color: var(--rr-d-muted);
}
#rr-wizard-root[data-wizard-version="4"] .rr-suche-erweitern:hover {
  color: var(--rr-d-accent-dark);
}

/* Kennzahlen brechen nicht mitten im Wert um. */
#rr-wizard-root[data-wizard-version="4"] .rr-route-kennzahlen {
  flex-wrap: wrap;
  gap: 12px 24px;
}
#rr-wizard-root[data-wizard-version="4"] .rr-route-kennzahlen strong {
  white-space: nowrap;
}

/* ── Adressvorschlaege (Combobox unter dem Adressfeld) ───────────────── */
/* Die Schicht haengt am Wurzelelement und wird vom Skript unter das
   aktive Feld gesetzt. Farben, Schrift, Radien, Schatten: Themen-Schicht. */
#rr-wizard-root[data-wizard-version="4"] .rr-vorschlag-schicht {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 60;
  width: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-vorschlag-rahmen {
  overflow: hidden;
  color: var(--rr-d-ink);
  background: var(--rr-d-paper);
  border: 1px solid var(--rr-d-line-strong);
  border-radius: var(--rr-d-radius-lg);
  box-shadow: var(--rr-d-shadow-sm);
  font-family: var(--rr-d-font);
}

#rr-wizard-root[data-wizard-version="4"] .rr-vorschlag-rahmen[hidden] {
  display: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-vorschlaege {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}

#rr-wizard-root[data-wizard-version="4"] .rr-vorschlag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 8px 14px;
  cursor: pointer;
  line-height: 1.3;
}

#rr-wizard-root[data-wizard-version="4"] .rr-vorschlag:hover {
  background: var(--rr-d-hover);
}

#rr-wizard-root[data-wizard-version="4"] .rr-vorschlag--aktiv,
#rr-wizard-root[data-wizard-version="4"] .rr-vorschlag--aktiv:hover {
  background: var(--rr-d-choice-selected);
  box-shadow: var(--rr-d-shadow-selected);
}

#rr-wizard-root[data-wizard-version="4"] .rr-vorschlag-haupt {
  font-size: 15px;
  font-weight: 600;
}

#rr-wizard-root[data-wizard-version="4"] .rr-vorschlag-neben {
  color: var(--rr-d-muted);
  font-size: 13px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-vorschlag-quelle {
  margin: 0;
  padding: 6px 14px;
  color: var(--rr-d-muted);
  font-size: 11px;
  line-height: 1.3;
  text-align: right;
  border-top: 1px solid var(--rr-d-line-soft);
}

/* ══════════════════════════════════════════════════════════════════════
   Neugestaltung Schritte 2–4 und Abschluss (Inhaberentscheid 01.10.2026)

   Schritt 1 (Fahrtart) bleibt Golden Master – alle Regeln hier treffen
   nur Bausteine, die es dort nicht gibt. Ruhige Definitionslisten statt
   Kartenstapel, Stationsliste mit quadratischen Nummern, Karte 3:2 genau
   einmal, Abschluss ohne Gruen und ohne Kursiv.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Leiste „Ihre Anfrage“ ───────────────────────────────────────────── */
#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste-fakten {
  margin: 14px 0 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste-fakten > div {
  padding: 12px 0;
  border-bottom: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste-fakten > div:first-child {
  padding-top: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste-fakten dt {
  margin: 0 0 3px;
  color: var(--rr-d-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste-fakten dd {
  margin: 0;
  color: var(--rr-d-ink);
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste-fakten [data-state="prompt"] dd {
  color: var(--rr-d-muted);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste-zeile {
  display: block;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey[data-journey-mode="leiste"] .rr-d-journey-assurance {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

/* ── Stationsliste (Leiste, Pruefung, Abschluss) ─────────────────────── */
#rr-wizard-root[data-wizard-version="4"] .rr-d-stationen {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-station {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-station-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--rr-d-invers);
  background: var(--rr-d-navy);
  border-radius: var(--rr-d-radius-xs);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-station-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-station-ort {
  color: var(--rr-d-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-station-zusatz {
  color: var(--rr-d-muted);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Offene oder selbst geklaerte Verbindung: eine Notiz zwischen zwei
   Orten, nie Teil der gefahrenen Strecke. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-station-luecke {
  margin: 0 0 0 10px;
  padding: 2px 0 2px 21px;
  color: var(--rr-d-muted);
  font-size: 13px;
  line-height: 1.4;
  border-left: 2px dashed var(--rr-d-line-strong);
}

/* ── Kennzahl und Karte ─────────────────────────────────────────────── */
#rr-wizard-root[data-wizard-version="4"] .rr-route-kennzahl {
  margin: 0 0 10px;
  color: var(--rr-d-ink);
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

/* In der Leiste und in der Pruefung steht die Vorschau ohne eigenen
   Kasten – sie ist Teil der Liste, nicht ein weiterer Block. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-journey[data-journey-mode="leiste"] .rr-route-preview,
#rr-wizard-root[data-wizard-version="4"] .rr-d-review-route .rr-route-preview {
  margin: 14px 0 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-map-frame figcaption {
  padding: 6px 10px;
  font-size: 11px;
}

/* ── Kontakt: Kundenkonto (optional) ────────────────────────────────── */
#rr-wizard-root[data-wizard-version="4"] .rr-konto-option {
  min-width: 0;
  margin: 8px 0 0;
  padding: 14px 18px 16px;
  background: var(--rr-d-soft);
  border: 1px solid var(--rr-d-line);
  border-radius: var(--rr-d-radius-lg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-konto-option legend {
  margin: 0 0 0 -6px;
  padding: 0 6px;
  color: var(--rr-d-ink);
  font-size: 15px;
  font-weight: 650;
}

#rr-wizard-root[data-wizard-version="4"] .rr-konto-haken {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-konto-haken label {
  display: block;
  margin: 0;
  color: var(--rr-d-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}

#rr-wizard-root[data-wizard-version="4"] .rr-konto-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 8px 0 0 36px;
  color: var(--rr-d-muted);
  font-size: 13px;
  line-height: 1.5;
}

#rr-wizard-root[data-wizard-version="4"] .rr-konto-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--rr-d-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-konto-meta a:focus-visible {
  outline: 3px solid var(--rr-d-focus);
  outline-offset: 2px;
}

/* ── Kontrollkaestchen: eckig, in Schritt 2–4 einheitlich ───────────── */
#rr-wizard-root[data-wizard-version="4"] form:not([data-step="fahrtart"]) input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  min-height: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: var(--rr-d-paper);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  border: 2px solid var(--rr-d-field-border);
  border-radius: var(--rr-d-radius-xs);
  box-shadow: none;
}

#rr-wizard-root[data-wizard-version="4"] form:not([data-step="fahrtart"]) input[type="checkbox"]:checked {
  background-color: var(--rr-d-accent);
  background-image: var(--rr-d-check-haken);
  border-color: var(--rr-d-accent);
}

#rr-wizard-root[data-wizard-version="4"] form:not([data-step="fahrtart"]) input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--rr-d-focus);
  outline-offset: 2px;
}

#rr-wizard-root[data-wizard-version="4"] form:not([data-step="fahrtart"]) input[type="checkbox"][aria-invalid="true"] {
  border-color: var(--rr-d-danger);
}

/* ── Angaben pruefen ─────────────────────────────────────────────────── */
#rr-wizard-root[data-wizard-version="4"] .rr-review-aendern {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -10px 0;
  padding: 0 0 0 12px;
  color: var(--rr-d-accent);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  font-family: var(--rr-d-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-aendern:hover {
  color: var(--rr-d-accent-dark);
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-aendern:focus-visible {
  outline: 3px solid var(--rr-d-focus);
  outline-offset: 2px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-section-head h3 {
  color: var(--rr-d-ink);
  font-size: 16px;
  font-weight: 650;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-row dt {
  color: var(--rr-d-muted);
}

/* Begriff | Wert in einem festen Raster – lange Begriffe wie „Geschaetzte
   Kilometer“ verschieben die Werte nicht. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-row,
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht .rr-review-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 4px 16px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-row dt,
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht .rr-review-row dt {
  min-width: 0;
}

/* Reise: Stationen links, Kennzahl und Karte rechts. */
@media (min-width: 760px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-d-review-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 0 28px;
    align-items: start;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-review-route > .rr-review-section-head,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-review-route > .rr-itinerary {
    grid-column: 1 / -1;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-review-route > .rr-route-preview {
    margin-top: 0;
  }
}

/* Ueberschrift im Fokus nach dem Schrittwechsel: kein Ring fuer Maus und
   Tippen, wohl aber fuer die Tastatur. */
#rr-wizard-root[data-wizard-version="4"] form:not([data-step="fahrtart"]) h2:focus:not(:focus-visible),
#rr-wizard-root[data-wizard-version="4"] .rr-success h2:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ── Abschluss ───────────────────────────────────────────────────────── */
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg {
  padding: 0;
  color: var(--rr-d-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-kopf {
  display: flex;
  align-items: center;
  gap: 16px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-zeichen {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--rr-d-signet);
  border: 2px solid var(--rr-d-signet);
  border-radius: var(--rr-d-radius-sm);
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-zeichen svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg h2 {
  max-width: none;
  margin: 0;
  color: var(--rr-d-ink);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg p {
  color: var(--rr-d-ink);
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-manuell,
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-testmodus {
  margin: 16px 0 0;
  color: var(--rr-d-muted);
  font-style: normal;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-nummer {
  margin: 20px 0 0;
  padding: 14px 16px;
  color: var(--rr-d-muted);
  background: var(--rr-d-soft);
  border: 1px solid var(--rr-d-line);
  border-radius: var(--rr-d-radius-lg);
  font-size: 14px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-nummer strong {
  display: block;
  margin-top: 2px;
  color: var(--rr-d-ink);
  font-family: var(--rr-d-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht {
  margin: 28px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht h3,
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-naechste h3 {
  margin: 0 0 10px;
  color: var(--rr-d-ink);
  font-size: 17px;
  font-weight: 650;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht dl {
  margin: 0;
  color: var(--rr-d-ink);
  border-top: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht .rr-review-row {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht .rr-review-row dt {
  color: var(--rr-d-muted);
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht .rr-review-row dd,
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht .rr-itinerary-day,
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht .rr-itinerary-bundle {
  color: var(--rr-d-ink);
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-naechste {
  margin-top: 28px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-schritte {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  color: var(--rr-d-ink);
  list-style: none;
  counter-reset: rr-erfolg-schritt;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-schritte li {
  position: relative;
  min-height: 28px;
  margin: 0;
  padding: 2px 0 0 40px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  counter-increment: rr-erfolg-schritt;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-schritte li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--rr-d-invers);
  background: var(--rr-d-navy);
  border-radius: var(--rr-d-radius-xs);
  content: counter(rr-erfolg-schritt);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-konto {
  margin: 24px 0 0;
  padding: 14px 16px;
  color: var(--rr-d-ink);
  background: var(--rr-d-soft);
  border: 1px solid var(--rr-d-line);
  border-radius: var(--rr-d-radius-lg);
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 28px;
}

#rr-wizard-root[data-wizard-version="4"] a.rr-primary.rr-erfolg-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  text-decoration: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-startseite {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rr-d-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-startseite:focus-visible,
#rr-wizard-root[data-wizard-version="4"] a.rr-primary.rr-erfolg-knopf:focus-visible {
  outline: 3px solid var(--rr-d-focus);
  outline-offset: 3px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-kontakt {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-kontakt p {
  margin: 0 0 4px;
  color: var(--rr-d-ink);
}

/* Windows-Kontrastmodus: Hintergrundbilder verschwinden, der weisse Haken
   waere unsichtbar - dort uebernimmt wieder das System die Darstellung. */
@media (forced-colors: active) {
  #rr-wizard-root[data-wizard-version="4"] form:not([data-step="fahrtart"]) input[type="checkbox"] {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
  }
}

/* Schmale Ansicht: die Leiste ist die einklappbare Kurzfassung, die
   Karte steht einmal ueber dem Formular. */
@media (max-width: 860px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-d-journey[data-journey-mode="leiste"] .rr-route-preview {
    margin: 0 0 16px;
  }
}

@media (max-width: 480px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-row,
  #rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht .rr-review-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-erfolg-kopf {
    align-items: flex-start;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-erfolg-zeichen {
    width: 40px;
    height: 40px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-konto-option {
    padding: 12px 14px 14px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-konto-meta {
    margin-left: 0;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-erfolg-aktionen > a {
    width: 100%;
  }
}

/* ── Kundenreise-Audit 01.10.2026 ──────────────────────────────────────
   W1: Hinweis nach dem Wiederherstellen eines Entwurfs (mit „Neu beginnen“).
   W4: Datenschutzerklaerung direkt am Haken verlinkt.
   Nur Variablen der Themen-Schicht, keine festen Werte. */
#rr-wizard-root[data-wizard-version="4"] .rr-entwurf-hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--rr-d-line);
  border-radius: var(--rr-d-radius-md);
  background: var(--rr-d-paper);
  color: var(--rr-d-ink);
  font-size: 14px;
  line-height: 1.5;
}

#rr-wizard-root[data-wizard-version="4"] .rr-entwurf-hinweis p {
  margin: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-entwurf-hinweis .rr-linkbtn {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 14px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-dsgvo label a {
  color: var(--rr-d-accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-dsgvo label a:focus-visible,
#rr-wizard-root[data-wizard-version="4"] .rr-entwurf-hinweis .rr-linkbtn:focus-visible {
  outline: 3px solid var(--rr-d-focus);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   Feinschliff 03.10.2026 (Inhaber, Screenshots)

   Filigran statt wuchtig, nichts doppelt, Linien statt Kaesten. Nur
   Variablen der Themen-Schicht. Schritt 1 (Fahrtart) bleibt unberuehrt.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Zwischenstopps: eingerueckt unter Start und Ziel ─────────────── 
   Eine feine senkrechte Linie verbindet Start und Ziel; die Stopps haengen
   daran, kleiner und mit hohler Nummer. Die Nummer bleibt die der Karte. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-station--stopp {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  /* Die Linie laeuft durch den Zeilenabstand der Liste hindurch. */
  margin: -8px 0;
  margin-left: 10px;
  padding: 8px 0;
  padding-left: 12px;
  border-left: 1px solid var(--rr-d-line-strong);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-station--stopp .rr-d-station-nr {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--rr-d-navy);
  background: transparent;
  border: 1px solid var(--rr-d-navy);
  font-size: 11px;
  font-weight: 600;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-station--stopp .rr-d-station-ort {
  font-size: 14px;
  font-weight: 400;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-station--stopp .rr-d-station-zusatz {
  font-size: 12px;
}

/* ── Rubriken: Abschnittsueberschriften wie auf der Website ──────────────
   Kleine Rubrik mit feinem Strich davor (Website: „eyebrow“ in Messing),
   statt fetter Zwischentitel. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-section-head h3,
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht h3,
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-naechste h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--rr-d-rubrik);
  font-family: var(--rr-d-font-display);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-section-head h3::before,
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht h3::before,
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-naechste h3::before {
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--rr-d-rubrik-linie);
  content: "";
}

/* ── 3. Angaben pruefen: Linien statt Kasten ─────────────────────────── 
   Der Reisebrief steht direkt auf der Buehne, ohne zweiten Rahmen. Jeder
   Abschnitt beginnt mit einer Haarlinie, die Werte stehen in ruhiger
   Schrift, die Karte im Abschnitt Reise ist eine Vorschau, kein Plakat. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-review {
  margin: 0 0 8px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-d-review-section {
  padding: 18px 0 20px;
  border-top: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-d-review-section:first-child {
  border-top: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-section-head {
  align-items: center;
  margin-bottom: 10px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-aendern {
  font-weight: 500;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-row {
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 2px 24px;
  margin-bottom: 8px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-row dt {
  font-size: 14px;
  font-weight: 400;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-row dd {
  font-size: 15px;
  font-weight: 400;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-dsgvo {
  padding: 20px 0 4px;
  border-top: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-route-kennzahl {
  margin-bottom: 8px;
  color: var(--rr-d-muted);
  font-size: 13px;
}

@media (min-width: 760px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-d-review-route {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: 0 40px;
  }
}

/* Schmal: Begriff ueber dem Wert (die Rasterregel oben wuerde die
   aeltere schmale Regel sonst aufheben). */
@media (max-width: 480px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-review-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    margin-bottom: 10px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-d-review-section {
    padding: 16px 0 18px;
  }
}

/* ── 4. Abschluss: derselbe ruhige Stil ─────────────────────────────── */
#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-kopf {
  gap: 14px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-zeichen {
  width: 40px;
  height: 40px;
  border-width: 1px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-zeichen svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.25;
}

/* Anfragenummer zwischen zwei Linien: Beschriftung und Nummer in einer
   Zeile, die Nummer in ruhigen Tabellenziffern. */
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-nummer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 16px;
  margin: 24px 0 0;
  padding: 14px 0;
  color: var(--rr-d-muted);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rr-d-line);
  border-bottom: 1px solid var(--rr-d-line);
  border-radius: 0;
  font-size: 14px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-erfolg-nummer strong {
  display: inline;
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht h3,
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-naechste h3 {
  margin-bottom: 12px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht .rr-review-row dd {
  font-weight: 400;
}

/* „So geht es weiter“: hohle Nummern, am Rechner nebeneinander und durch
   eine feine Linie verbunden; schmal untereinander. */
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-schritte li::before {
  width: 26px;
  height: 26px;
  color: var(--rr-d-navy);
  background: transparent;
  border: 1px solid var(--rr-d-navy);
  font-size: 13px;
  font-weight: 600;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-schritte li {
  padding-left: 38px;
}

@media (min-width: 640px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-schritte {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 12px 28px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-schritte li {
    padding: 38px 0 0;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-schritte li::after {
    position: absolute;
    top: 13px;
    left: 38px;
    right: -16px;
    height: 1px;
    background: var(--rr-d-line);
    content: "";
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-schritte li:last-child::after {
    display: none;
  }
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-konto {
  margin: 24px 0 0;
  padding: 16px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rr-d-line);
  border-radius: 0;
}

/* Hinweise aus der Antwort (z. B. „Tag 2: Fahrt ohne Zieladresse“) trugen
   noch das Hellgruen der dunklen Fassung - auf Weiss kaum sichtbar. */
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-hinweise {
  margin: 8px 0 0;
  padding-left: 20px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-hinweise li {
  color: var(--rr-d-muted);
  font-size: 14px;
}

/* ── 5. Ortsvorschlag („Meinten Sie …?“) ─────────────────────────────── */
#rr-wizard-root[data-wizard-version="4"] .rr-ort-vorschlag .rr-ort-vorschlag-knopf {
  min-height: 44px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-adresswarnungen .rr-ort-vorschlag,
#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-ort-vorschlag {
  margin: 0 0 12px;
}

/* ── Adresse prüfen (03.10.2026) ──────────────────────────────────────
   Meldung nach „Adresse prüfen“ in einer Fahrtzeile: eigene Zeile über
   die volle Breite, nie neben den Knöpfen. */
#rr-wizard-root[data-wizard-version="4"] .rr-trip-row .rr-adresshinweis {
  flex: 1 1 100%;
  margin-top: 0;
}

/* Nebenbefund 03.10.2026: Am Handy machte die Regel „.rr-trip-row button
   { width: 100% }“ jeden der drei Steuerknöpfe (↑ ↓ ×) so breit wie die
   Zeile - „Entfernen“ lag außerhalb des Bildschirms. Die Knöpfe teilen
   sich jetzt eine Zeile, 44 px hoch. */
@media (max-width: 719px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-trip-row .rr-trip-steuer {
    display: flex;
    gap: 8px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-trip-row .rr-trip-steuer button {
    flex: 1 1 0;
    width: auto;
    min-height: 44px;
  }
}

/* ══ Neugestaltung 04.10.2026 (Inhaberfreigabe A/B) ══════════════════════
   Schrittanzeige, Seitenleiste „Ihre Anfrage“, Reiseverlauf in „Angaben
   prüfen“ und im Abschluss. Linien statt Kästen, ruhige Typografie. */

/* ── Schrittanzeige: vier Abschnitte mit Linie, Nummer und Name ── */
#rr-wizard-root[data-wizard-version="4"] .rr-d-progress {
  padding: 20px 0 24px;
  scroll-margin-top: var(--rr-d-klebe-oben);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-steps {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step,
#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step[aria-current="step"] {
  display: flex;
  flex: 1 1 0;
  align-items: baseline;
  gap: 8px;
  width: auto;
  min-width: 0;
  padding: 10px 0 0;
  color: var(--rr-d-progress-text);
  border-top: 2px solid var(--rr-d-progress-track);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step::before,
#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step[aria-current="step"]::before {
  content: none;
  display: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step[data-state="erledigt"] {
  color: var(--rr-d-muted);
  border-top-color: var(--rr-d-navy);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step[aria-current="step"] {
  padding-top: 9px;
  color: var(--rr-d-ink);
  border-top: 3px solid var(--rr-d-navy);
  font-weight: 600;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-nr {
  flex: none;
  font-family: var(--rr-d-font-display);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-haken {
  flex: none;
  width: 9px;
  height: 5px;
  margin: 0 2px 0 1px;
  border-left: 1.5px solid var(--rr-d-navy);
  border-bottom: 1.5px solid var(--rr-d-navy);
  transform: rotate(-45deg) translateY(-2px);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-progress-text {
  display: none;
}

/* ── Seitenleiste „Ihre Anfrage“ (Schritt 2 und 3) ──
   Nur die neue Leiste klebt unter dem Seitenkopf; Schritt 1 behaelt seinen
   Abstand (Golden Master, Review #388). */
#rr-wizard-root[data-wizard-version="4"] .rr-d-journey[data-journey-mode="leiste"] {
  top: var(--rr-d-klebe-oben);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey[data-journey-mode="leiste"] {
  padding: 28px 28px 24px;
  background: var(--rr-d-soft);
  border-color: var(--rr-d-soft);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste .rr-d-journey-head {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste .rr-d-journey-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--rr-d-rubrik);
  font-family: var(--rr-d-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste .rr-d-journey-title::before {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: var(--rr-d-rubrik-linie);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste-fakten {
  margin: 14px 0 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste-titel {
  margin: 0 0 4px;
  color: var(--rr-d-navy);
  font-family: var(--rr-d-font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste-meta {
  margin: 0;
  color: var(--rr-d-muted);
  font-size: 14px;
  line-height: 1.45;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste-liste {
  margin: 12px 0 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste-liste > div {
  padding: 12px 0;
  border-bottom: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey[data-journey-mode="leiste"] .rr-route-preview--aside {
  margin: 20px 0 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-preview--aside .rr-route-kennzahl,
#rr-wizard-root[data-wizard-version="4"] .rr-route-preview--mobil .rr-route-kennzahl {
  margin: 8px 0 0;
  color: var(--rr-d-muted);
  font-size: 13px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-route-karte-folgt {
  margin: 0;
  padding: 14px 16px;
  color: var(--rr-d-muted);
  font-size: 13px;
  line-height: 1.45;
  border: 1px dashed var(--rr-d-line-strong);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-leiste-aufforderung {
  margin: 18px 0 0;
  color: var(--rr-d-muted);
  font-size: 14px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kurzverlauf {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kurzverlauf > li {
  margin: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kv-tag {
  padding: 12px 0 0;
  color: var(--rr-d-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kv-fahrt {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 12px;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--rr-d-line);
  font-size: 14px;
  line-height: 1.45;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kv-zeit {
  color: var(--rr-d-ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kv-weg {
  min-width: 0;
  color: var(--rr-d-ink);
  overflow-wrap: anywhere;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kv-weg small {
  display: block;
  color: var(--rr-d-muted);
  font-size: 13px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kv-still {
  padding: 10px 0 10px 56px;
  color: var(--rr-d-muted);
  font-size: 13px;
  line-height: 1.45;
  border-bottom: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-journey[data-journey-mode="leiste"] .rr-d-journey-assurance {
  margin-top: 16px;
  color: var(--rr-d-muted);
  font-size: 13px;
}

/* ── Angaben prüfen: Kennzahlen, Zeitleiste, Karte ── */
#rr-wizard-root[data-wizard-version="4"] .rr-review-klaerungen:empty {
  display: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-review-klaerungen {
  margin: 0 0 18px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 4px 0 28px;
  padding: 0;
  border: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kennzahlen > div {
  padding: 14px 18px;
  border-left: 1px solid var(--rr-d-line);
}

/* Abschlussseite: die Regel fuer dl dort (margin 0) gilt nicht fuer die
   Kennzahlen - sonst stoesst der Kasten an den ersten Tageskopf. */
#rr-wizard-root[data-wizard-version="4"] .rr-success.rr-erfolg .rr-erfolg-uebersicht .rr-d-kennzahlen {
  margin: 16px 0 28px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kennzahlen > div:first-child {
  border-left: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kennzahlen dt {
  margin: 0;
  color: var(--rr-d-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kennzahlen dd {
  margin: 2px 0 0;
  color: var(--rr-d-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-reise-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 40%);
  gap: 40px;
  align-items: start;
}

/* Das alte Raster „Stationen links, Karte rechts“ (ab 760 px) gilt nicht
   mehr: Kennzahlen, Zeitleiste und Karte ordnen sich im eigenen Raster. */
#rr-wizard-root[data-wizard-version="4"] .rr-d-review .rr-d-review-route {
  display: block;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-reise-raster--ohne-karte {
  grid-template-columns: minmax(0, 1fr);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-reise-text {
  min-width: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-reise-karte {
  position: sticky;
  top: calc(var(--rr-d-klebe-oben) + 16px);
  min-width: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-review-route .rr-d-reise-karte .rr-route-preview {
  margin: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-tag-kopf {
  margin: 0;
  color: var(--rr-d-navy);
  font-family: var(--rr-d-font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-tag-kopf span {
  margin-left: 8px;
  color: var(--rr-d-muted);
  font-family: var(--rr-d-font);
  font-size: 14px;
  font-weight: 400;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-tag + .rr-d-tag,
#rr-wizard-root[data-wizard-version="4"] .rr-d-tag + .rr-d-ruhetage,
#rr-wizard-root[data-wizard-version="4"] .rr-d-ruhetage + .rr-d-tag {
  margin-top: 26px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-ruhetage {
  margin: 0;
  padding: 12px 0 12px 128px;
  color: var(--rr-d-muted);
  font-size: 14px;
  line-height: 1.45;
  border-top: 1px solid var(--rr-d-line);
  border-bottom: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zeitleiste {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zeitleiste > li,
#rr-wizard-root[data-wizard-version="4"] .rr-d-zeitleiste > li.rr-d-station,
#rr-wizard-root[data-wizard-version="4"] .rr-d-zeitleiste > li.rr-d-station-luecke {
  display: grid;
  grid-template-columns: 96px 20px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin: 0;
  padding: 0;
  color: var(--rr-d-ink);
  border: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-zeit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 1px;
  color: var(--rr-d-muted);
  font-size: 14px;
  line-height: 1.45;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-ab {
  color: var(--rr-d-muted);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-ab strong {
  color: var(--rr-d-ink);
  font-size: 15px;
  font-weight: 600;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-zeit small {
  display: block;
  font-size: 12px;
  white-space: normal;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-schiene {
  position: relative;
  align-self: stretch;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-halt .rr-d-zl-schiene::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  background: var(--rr-d-navy);
  border: 2px solid var(--rr-d-navy);
  border-radius: var(--rr-d-radius-xs);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-halt--vorort .rr-d-zl-schiene::before {
  background: var(--rr-d-paper);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-halt .rr-d-zl-schiene::after,
#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-etappe .rr-d-zl-schiene::after {
  content: "";
  position: absolute;
  top: 19px;
  bottom: 0;
  left: 9px;
  width: 1px;
  background: var(--rr-d-navy);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-etappe .rr-d-zl-schiene::after {
  top: 0;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-halt--ende .rr-d-zl-schiene::after {
  display: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-luecke .rr-d-zl-schiene::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9px;
  border-left: 1px dashed var(--rr-d-muted);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-ort {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 6px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zeitleiste .rr-d-station-ort {
  color: var(--rr-d-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zeitleiste .rr-d-station-zusatz {
  color: var(--rr-d-muted);
  font-size: 14px;
  line-height: 1.45;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-text {
  min-width: 0;
  padding: 8px 0 14px;
  color: var(--rr-d-muted);
  font-size: 13px;
  line-height: 1.5;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-art {
  color: var(--rr-d-rubrik);
  font-weight: 500;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-luecke .rr-d-zl-text {
  color: var(--rr-d-ink);
  font-size: 14px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-luecke .rr-d-zl-text strong {
  color: var(--rr-d-rubrik);
  font-weight: 600;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-luecke .rr-linkbtn {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  padding: 0;
  font-size: 14px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-stopps {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-stopps > li.rr-d-station--stopp {
  display: block;
  margin: 0;
  padding: 2px 0 2px 14px;
  border-left: 1px solid var(--rr-d-line-strong);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-stopps .rr-d-station-ort {
  color: var(--rr-d-ink);
  font-size: 14px;
  font-weight: 400;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-zl-stopps .rr-d-station-zusatz {
  display: block;
  font-size: 12px;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-reise-hinweise {
  margin: 24px 0 0;
}

/* ── Kontakt als ruhige Karte ── */
#rr-wizard-root[data-wizard-version="4"] .rr-d-kontaktkarte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--rr-d-line);
  border: 1px solid var(--rr-d-line);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kontaktkarte > div {
  padding: 16px 20px;
  background: var(--rr-d-paper);
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kontaktkarte > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kontaktkarte dt {
  margin: 0;
  color: var(--rr-d-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kontaktkarte dd {
  margin: 2px 0 0;
  color: var(--rr-d-ink);
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#rr-wizard-root[data-wizard-version="4"] .rr-d-kontakt-neben {
  display: block;
  color: var(--rr-d-muted);
}

@media (max-width: 1023px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-d-reise-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-reise-karte {
    position: static;
    order: -1;
  }
}

@media (max-width: 860px) {
  /* Schrittanzeige am Handy: nur die Linien, darunter der Text. */
  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress {
    padding: 16px 0 18px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress-steps {
    gap: 4px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step[aria-current="step"] {
    flex: 1 1 0;
    width: auto;
    padding: 0;
    border-top-width: 3px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step .rr-d-progress-label,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress-step[aria-current="step"] .rr-d-progress-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress-nr,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress-haken {
    display: none;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-progress-text {
    display: block;
    margin: 10px 0 0;
    color: var(--rr-d-muted);
    font-size: 13px;
  }

  /* Kontakt-Schritt: die Karte steht in der aufklappbaren Zusammenfassung. */
  #rr-wizard-root[data-wizard-version="4"] .rr-d-journey[data-empty="false"][data-journey-mode="leiste"][data-aside-step="kontakt"] {
    display: none;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary-wrap--leiste {
    position: static;
    top: auto;
    margin: 0 0 24px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-mobile-summary-wrap--leiste .rr-d-mobile-summary {
    background: var(--rr-d-soft);
    border-color: var(--rr-d-soft);
    box-shadow: none;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-route-preview--mobil {
    margin: 16px 0 0;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-kontaktkarte {
    grid-template-columns: minmax(0, 1fr);
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-kontaktkarte > div:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-d-zeitleiste > li,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-zeitleiste > li.rr-d-station,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-zeitleiste > li.rr-d-station-luecke {
    grid-template-columns: 84px 18px minmax(0, 1fr);
    column-gap: 10px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-zl-zeit {
    font-size: 13px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-zeitleiste .rr-d-station-ort {
    font-size: 15px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-ruhetage {
    padding-left: 112px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-kennzahlen {
    grid-template-columns: minmax(0, 1fr);
    border-width: 1px 0;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-kennzahlen > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--rr-d-line);
    border-left: 0;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-kennzahlen > div:first-child {
    border-top: 0;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-kennzahlen dd {
    margin: 0;
    text-align: right;
  }
}

@media (max-width: 359px) {
  #rr-wizard-root[data-wizard-version="4"] .rr-d-zeitleiste > li,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-zeitleiste > li.rr-d-station,
  #rr-wizard-root[data-wizard-version="4"] .rr-d-zeitleiste > li.rr-d-station-luecke {
    grid-template-columns: 76px 16px minmax(0, 1fr);
    column-gap: 8px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-zl-zeit {
    font-size: 12px;
  }

  #rr-wizard-root[data-wizard-version="4"] .rr-d-ruhetage {
    padding-left: 0;
  }
}