/* ============================================================
   account.css — Vereinter Stil-Layer für das Reparatur-/Konto-Modul.

   Zusammenführung von:
     - repair_2026.css   → Scope .repair-2026 (Anfrageformular)
     - repair_portal.css → Scope .rp          (Portal + Mein-Konto)

   Alle --r2-*-Tokens (Farben + Bewegung) liegen zentral in
   variables.css. Diese Datei enthält KEINE Token-Deklarationen mehr.

   Ladereihenfolge im Markup:
     main.css  →  variables.css  →  account.css
   (account.css nach main.css, damit die Re-Themes der Shop-/
   Bootstrap-Klassen greifen; variables.css davor, damit die
   var(--r2-*)-Referenzen aufgelöst sind.)

   Wiederkehrende, vormals hartcodierte Farben sind auf Tokens
   umgestellt (siehe variables.css). Echte Einmal-Farben
   (Gradient, rgba-Overlay, Detail-Hint-Töne) bleiben bewusst inline.
   ============================================================ */

/* ============================================================
   SEKTION 1 — ANFRAGEFORMULAR  (Scope: .repair-2026)
   ============================================================ */
/* ============================================================
   repair_2026 form — CI palette, flat, no shadows.
   Scoped to .repair-2026 to avoid leaking into shop chrome.
   ============================================================ */
.repair-2026 {
    color: var(--r2-text);
}
/* Neutralize Bootstrap form-check absolute-positioning on inputs.
   Bootstrap sets .form-check-input { position: absolute; margin-left: -1.25rem; opacity: 0; }
   We need these as plain inline checkboxes inside our flex labels. */
.repair-2026 input[type="checkbox"],
.repair-2026 input[type="radio"] {
    position: static !important;
    margin: 0 !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    accent-color: var(--r2-brand);
    vertical-align: middle;
}

/* Page head */
.repair-2026 .page-head { margin: 0 0 28px; }
.repair-2026 .page-head h1 {
    font-size: 32px; letter-spacing: -.01em; margin-bottom: 6px;
}
.repair-2026 .page-head p {
    color: var(--r2-text-muted); margin: 0; max-width: 640px; font-size: 15px;
}

/* Stepper */
.repair-2026 .r2-stepper {
    background: var(--r2-surface);
    border: 1px solid var(--r2-border);
    padding: 18px 22px;
    margin-bottom: 18px;
}
.repair-2026 .r2-stepper-track {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; position: relative;
}
.repair-2026 .r2-step {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    position: relative; text-align: center;
    color: var(--r2-text-soft); font-size: 12px; font-weight: 500;
    transition: color var(--r2-t);
}
.repair-2026 .r2-step .r2-dot {
    width: 32px; height: 32px;
    background: var(--r2-surface); border: 2px solid var(--r2-border-strong);
    display: grid; place-items: center;
    font-weight: 700;
    color: var(--r2-text-soft); font-size: 13px;
    transition: all var(--r2-t); position: relative; z-index: 2;
}
.repair-2026 .r2-step:not(:last-child)::after {
    content: ""; position: absolute; top: 16px;
    left: calc(50% + 18px); right: calc(-50% + 18px);
    height: 2px; background: var(--r2-border-strong);
    z-index: 1; transition: background var(--r2-t);
}
.repair-2026 .r2-step.is-active { color: var(--r2-brand); }
.repair-2026 .r2-step.is-active .r2-dot {
    background: var(--r2-brand); border-color: var(--r2-brand); color: var(--r2-inverse); transform: scale(1.06);
}
.repair-2026 .r2-step.is-done { color: var(--r2-success); }
.repair-2026 .r2-step.is-done .r2-dot {
    background: var(--r2-success); border-color: var(--r2-success); color: var(--r2-inverse);
}
.repair-2026 .r2-step.is-done .r2-dot span { display: none; }
.repair-2026 .r2-step.is-done .r2-dot::before {
    content: ""; width: 12px; height: 7px;
    border-left: 2.5px solid var(--r2-inverse); border-bottom: 2.5px solid var(--r2-inverse);
    transform: rotate(-45deg) translate(1px,-1px);
}
.repair-2026 .r2-step.is-done:not(:last-child)::after { background: var(--r2-success); }
@media (max-width: 640px) {
    .repair-2026 .r2-step .r2-label { display: none; }
    .repair-2026 .r2-step.is-active .r2-label { display: block; font-weight: 600; }
}

/* Card */
.repair-2026 .r2-card {
    background: var(--r2-surface);
    border: 1px solid var(--r2-border);
}
.repair-2026 .r2-pane {
    padding: 32px;
    animation: r2-fade var(--r2-t-slow);
}
@keyframes r2-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.repair-2026 .r2-pane[hidden] { display: none; }
.repair-2026 .r2-pane h2 {
    font-size: 22px; letter-spacing: -.005em; margin: 0 0 4px;
}
.repair-2026 .r2-pane .r2-lede {
    color: var(--r2-text-muted); margin: 0 0 28px; font-size: 14px;
}
@media (max-width: 640px) { .repair-2026 .r2-pane { padding: 22px; } }

/* Field primitives */
.repair-2026 .r2-field { margin-bottom: 18px; }
.repair-2026 .r2-row { display: grid; gap: 16px; }
.repair-2026 .r2-row.two   { grid-template-columns: 1fr 1fr; }
.repair-2026 .r2-row.three { grid-template-columns: 1fr 2fr 1fr; }
@media (max-width: 640px) {
    .repair-2026 .r2-row.two, .repair-2026 .r2-row.three { grid-template-columns: 1fr; }
}
.repair-2026 .r2-lbl {
    display: block; font-weight: 600;
    font-size: 13px; margin-bottom: 6px; color: var(--r2-text);
}
.repair-2026 .r2-lbl .r2-req { color: var(--r2-accent); margin-left: 2px; }
.repair-2026 .r2-lbl .r2-hint {
    color: var(--r2-text-muted); font-weight: 400; margin-left: 6px; font-size: 12px;
}

.repair-2026 .r2-input, .repair-2026 .r2-select, .repair-2026 .r2-textarea {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--r2-border);
    background: var(--r2-surface);
    border-radius: 0;
    transition: border-color var(--r2-t-fast);
    color: var(--r2-text);
    font-size: 15px;
}
.repair-2026 .r2-input:hover, .repair-2026 .r2-select:hover, .repair-2026 .r2-textarea:hover {
    border-color: var(--r2-border-strong);
}
.repair-2026 .r2-input:focus, .repair-2026 .r2-select:focus, .repair-2026 .r2-textarea:focus {
    border-color: var(--r2-brand); outline: none;
}
.repair-2026 .r2-input::placeholder, .repair-2026 .r2-textarea::placeholder { color: var(--r2-text-soft); }
.repair-2026 .r2-textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.repair-2026 .r2-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236B7280' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px; cursor: pointer;
}

/* Manufacturer tiles */
.repair-2026 .r2-mfg-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 720px) { .repair-2026 .r2-mfg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .repair-2026 .r2-mfg-grid { grid-template-columns: repeat(2, 1fr); } }
.repair-2026 .r2-mfg-tile {
    border: 1.5px solid var(--r2-border);
    background: var(--r2-surface);
    padding: 18px 10px 12px;
    cursor: pointer;
    transition: all var(--r2-t);
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; min-height: 96px;
}
.repair-2026 .r2-mfg-tile .r2-mfg-logo {
    height: 26px; width: auto; max-width: 88%;
    object-fit: contain;
    transition: filter var(--r2-t-fast);
}
.repair-2026 .r2-mfg-tile .r2-mfg-fallback {
    height: 26px; display: none; place-items: center;
    font-size: 17px; font-weight: 700;
    color: var(--r2-brand); letter-spacing: -.01em;
}
/* Fallback sichtbar wenn:
   - kein Logo konfiguriert (r2-no-logo via PHP)
   - oder das Logo nicht ladbar war (r2-logo-failed via JS onerror) */
.repair-2026 .r2-mfg-tile.r2-no-logo .r2-mfg-fallback,
.repair-2026 .r2-mfg-tile.r2-logo-failed .r2-mfg-fallback {
    display: grid;
}
.repair-2026 .r2-mfg-tile.r2-logo-failed .r2-mfg-logo { display: none; }
.repair-2026 .r2-mfg-tile[aria-pressed="true"] .r2-mfg-logo {
    filter: brightness(0) invert(1);
}
.repair-2026 .r2-mfg-tile .r2-mfg-name {
    font-size: 12px; font-weight: 600; color: var(--r2-text-muted);
    transition: color var(--r2-t-fast);
}
.repair-2026 .r2-mfg-tile:hover {
    border-color: var(--r2-brand); background: var(--r2-brand-tint);
    transform: translateY(-1px);
}
.repair-2026 .r2-mfg-tile:hover .r2-mfg-name { color: var(--r2-brand); }
.repair-2026 .r2-mfg-tile[aria-pressed="true"] {
    border-color: var(--r2-brand); background: var(--r2-brand);
}
.repair-2026 .r2-mfg-tile[aria-pressed="true"] .r2-mfg-name { color: var(--r2-inverse); }
.repair-2026 .r2-mfg-tile[aria-pressed="true"] .r2-mfg-fallback { color: var(--r2-inverse); }
.repair-2026 .r2-mfg-tile[aria-pressed="true"]::after {
    content: ""; position: absolute; top: 8px; right: 8px;
    width: 18px; height: 18px; border-radius: 50%; background: var(--r2-inverse);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%23006397' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.5l2.5 2.5 5-6'/></svg>");
    background-position: center; background-repeat: no-repeat;
}

.repair-2026 .r2-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 14px 0 12px;
    color: var(--r2-text-soft); font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .05em;
}
.repair-2026 .r2-divider::before, .repair-2026 .r2-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--r2-border);
}

/* Segmented (cost) */
.repair-2026 .r2-seg {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 640px) { .repair-2026 .r2-seg { grid-template-columns: 1fr 1fr; } }
.repair-2026 .r2-seg button {
    border: 1.5px solid var(--r2-border);
    background: var(--r2-surface);
    border-radius: 0; padding: 16px 10px;
    text-align: center; transition: all var(--r2-t-fast);
    color: var(--r2-text); font-weight: 600;
    cursor: pointer;
}
.repair-2026 .r2-seg button:hover { border-color: var(--r2-brand); background: var(--r2-brand-tint); }
.repair-2026 .r2-seg button[aria-pressed="true"] {
    border-color: var(--r2-brand); background: var(--r2-brand-light); color: var(--r2-brand-dark);
}
.repair-2026 .r2-seg .r2-seg-amount {
    font-size: 18px; letter-spacing: -.01em; font-weight: 700;
}
.repair-2026 .r2-seg .r2-seg-label {
    font-size: 11px; color: var(--r2-text-muted); font-weight: 500; margin-top: 2px;
}
.repair-2026 .r2-seg button[aria-pressed="true"] .r2-seg-label { color: var(--r2-brand); }

/* Dropzone (uses repair.php's IDs) */
.repair-2026 #ipc-formupload-drop {
    border: 2px dashed var(--r2-border-strong);
    padding: 28px;
    text-align: center;
    background: var(--r2-surface-alt);
    transition: all var(--r2-t-fast);
    cursor: pointer;
}
.repair-2026 #ipc-formupload-drop.over {
    border-color: var(--r2-brand); background: var(--r2-brand-tint);
}
.repair-2026 #ipc-formupload-drop strong { display: block; margin-bottom: 4px; }
.repair-2026 #ipc-formupload-drop small { color: var(--r2-text-muted); }
.repair-2026 #ipc-formupload-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.repair-2026 .r2-file-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--r2-border); background: var(--r2-surface);
}
.repair-2026 .r2-file-item .r2-fname {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 500; font-size: 13px;
}
.repair-2026 .r2-file-item .r2-fsize { color: var(--r2-text-muted); font-size: 12px; }
.repair-2026 .r2-file-item button {
    background: none; border: 0; padding: 6px;
    color: var(--r2-text-muted); cursor: pointer;
    font-size: 14px; font-weight: 700;
}
.repair-2026 .r2-file-item button:hover { color: var(--r2-accent); }

/* Checkboxes / radios as pills */
.repair-2026 .r2-check {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer; padding: 12px;
    border: 1.5px solid var(--r2-border);
    transition: all var(--r2-t-fast);
}
.repair-2026 .r2-check:hover { border-color: var(--r2-brand); background: var(--r2-brand-tint); }
.repair-2026 .r2-check input[type="checkbox"], .repair-2026 .r2-check input[type="radio"] {
    width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--r2-brand); flex-shrink: 0;
}
.repair-2026 .r2-check .r2-ctext { font-size: 14px; line-height: 1.45; }
.repair-2026 .r2-check .r2-ctext small {
    display: block; color: var(--r2-text-muted); font-size: 12px; margin-top: 2px;
}
.repair-2026 .r2-check.compact { border: 0; padding: 0; }
.repair-2026 .r2-check.compact:hover { background: transparent; }

/* Gender pills */
.repair-2026 .r2-gender-group { display: flex; gap: 8px; flex-wrap: wrap; }
.repair-2026 .r2-gender-pill {
    flex: 1; min-width: 90px;
    padding: 11px 14px;
    border: 1.5px solid var(--r2-border);
    background: var(--r2-surface);
    text-align: center;
    font-weight: 600; font-size: 14px;
    cursor: pointer;
    transition: all var(--r2-t-fast);
}
.repair-2026 .r2-gender-pill:hover { border-color: var(--r2-brand); background: var(--r2-brand-tint); }
.repair-2026 .r2-gender-pill[aria-pressed="true"] {
    border-color: var(--r2-brand); background: var(--r2-brand-light); color: var(--r2-brand-dark);
}

/* Customer Type */
.repair-2026 .r2-ctype-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.repair-2026 .r2-ctype-pill {
    padding: 16px 18px;
    border: 1.5px solid var(--r2-border);
    background: var(--r2-surface);
    text-align: left;
    transition: all var(--r2-t-fast);
    display: flex; align-items: center; gap: 12px;
    cursor: pointer;
}
.repair-2026 .r2-ctype-pill:hover { border-color: var(--r2-brand); background: var(--r2-brand-tint); }
.repair-2026 .r2-ctype-pill[aria-pressed="true"] {
    border-color: var(--r2-brand); background: var(--r2-brand-light);
}
.repair-2026 .r2-ctype-pill .r2-ctype-title { font-weight: 700; font-size: 15px; }
.repair-2026 .r2-ctype-pill .r2-ctype-sub { color: var(--r2-text-muted); font-size: 12px; margin-top: 1px; }

/* Add-on cards */
.repair-2026 .r2-addon-list { display: grid; gap: 10px; }
.repair-2026 .r2-addon {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px;
    border: 1.5px solid var(--r2-border);
    background: var(--r2-surface);
    transition: all var(--r2-t-fast);
    cursor: pointer; position: relative;
}
.repair-2026 .r2-addon:hover { border-color: var(--r2-brand); background: var(--r2-brand-tint); }
.repair-2026 .r2-addon-body { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 14px; }
.repair-2026 .r2-addon-icon {
    width: 40px; height: 40px;
    background: var(--r2-accent-warm-light);
    color: var(--r2-accent-warm);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.repair-2026 .r2-addon-icon svg { display: block; }
.repair-2026 .r2-addon-text { flex: 1; min-width: 0; }
.repair-2026 .r2-addon-title {
    font-weight: 700; font-size: 14.5px; color: var(--r2-text);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.repair-2026 .r2-addon-price {
    display: inline-flex; align-items: baseline; gap: 1px;
    padding: 3px 9px;
    background: var(--r2-accent-warm-light);
    color: var(--r2-accent-warm-dark);
    font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
}
.repair-2026 .r2-addon-desc {
    color: var(--r2-text-muted); font-size: 13px; margin-top: 4px; line-height: 1.5;
}
.repair-2026 .r2-addon.is-checked {
    border-color: var(--r2-brand); background: var(--r2-brand-tint);
}

/* Banner */
.repair-2026 .r2-banner {
    display: flex; gap: 12px;
    padding: 14px 16px;
    border: 1px solid;
    margin-bottom: 22px;
    font-size: 13.5px; line-height: 1.55;
}
.repair-2026 .r2-banner.info    { background: var(--r2-brand-tint);   border-color: var(--r2-brand-light); color: var(--r2-brand-dark); }
.repair-2026 .r2-banner.warn    { background: var(--r2-warning-light); border-color: #FCD34D; color: var(--r2-warning); }
.repair-2026 .r2-banner.success { background: var(--r2-success-light); border-color: #A7F3D0; color: var(--r2-success); }

/* Form nav */
.repair-2026 .r2-formnav {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 18px 32px;
    background: var(--r2-surface-alt);
    border-top: 1px solid var(--r2-border);
}
@media (max-width: 640px) { .repair-2026 .r2-formnav { padding: 16px 22px; } }
.repair-2026 .r2-btn {
    padding: 11px 22px; border-radius: 0;
    border: 1.5px solid var(--r2-border-strong);
    background: var(--r2-surface);
    color: var(--r2-text);
    font-weight: 600; font-size: 14px;
    transition: all var(--r2-t-fast);
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
}
.repair-2026 .r2-btn:hover { border-color: var(--r2-text); }
.repair-2026 .r2-btn:disabled { opacity: .5; cursor: not-allowed; }
.repair-2026 .r2-btn-primary {
    background: var(--r2-cta); color: var(--r2-inverse); border-color: var(--r2-cta);
}
.repair-2026 .r2-btn-primary:hover {
    background: var(--r2-cta-dark); border-color: var(--r2-cta-dark);
    color: var(--r2-inverse);
}
/* "Zurück" — Bootstrap-Style btn-outline-primary (CI-Blau-Outline) */
.repair-2026 .r2-btn-ghost {
    border: 1.5px solid var(--r2-brand);
    background: transparent;
    color: var(--r2-brand);
}
.repair-2026 .r2-btn-ghost:hover {
    background: var(--r2-brand);
    color: var(--r2-inverse);
    border-color: var(--r2-brand);
}
.repair-2026 .r2-btn-ghost:disabled:hover {
    background: transparent;
    color: var(--r2-brand);
}

/* Review */
.repair-2026 .r2-review-section {
    border: 1px solid var(--r2-border); padding: 18px 20px;
    margin-bottom: 14px; background: var(--r2-surface);
}
.repair-2026 .r2-review-section header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.repair-2026 .r2-review-section h4 { margin: 0; font-size: 15px; }
.repair-2026 .r2-review-edit {
    color: var(--r2-brand); background: none; border: 1px solid var(--r2-brand);
    font-weight: 600; font-size: 12px; padding: 4px 10px;
    cursor: pointer; transition: all var(--r2-t-fast);
}
.repair-2026 .r2-review-edit:hover { background: var(--r2-brand); color: var(--r2-inverse); }
.repair-2026 .r2-review-grid {
    display: grid; gap: 6px 16px; font-size: 13.5px;
    grid-template-columns: minmax(120px, 180px) 1fr;
}
.repair-2026 .r2-review-grid .r2-k { color: var(--r2-text-muted); }
.repair-2026 .r2-review-grid .r2-v { color: var(--r2-text); font-weight: 500; }

/* ipcFilter wrapper — keep its native styling but make selects look like our inputs */
.repair-2026 .filter select,
.repair-2026 select#input_repairManufacturer,
.repair-2026 select#input_repairSeries,
.repair-2026 select#input_repairModell {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--r2-border);
    background: var(--r2-surface);
    border-radius: 0;
    font-size: 15px;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236B7280' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
    margin-bottom: 10px;
}

/* ===================== Model Search ===================== */
.repair-2026 .r2-search-wrap { margin-top: 8px; margin-bottom: 18px; }
.repair-2026 .r2-search { position: relative; }
.repair-2026 .r2-search-results {
    border: 1px solid var(--r2-border);
    background: var(--r2-surface);
    max-height: 260px;
    overflow-y: auto;
    margin-top: 4px;
}
.repair-2026 .r2-search-results button {
    display: block; width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--r2-border);
    font-size: 14px;
    color: var(--r2-text);
    cursor: pointer;
}
.repair-2026 .r2-search-results button:last-child { border-bottom: 0; }
.repair-2026 .r2-search-results button:hover,
.repair-2026 .r2-search-results button:focus {
    background: var(--r2-brand-tint);
    color: var(--r2-brand-dark);
    outline: none;
}
.repair-2026 .r2-search-empty {
    padding: 14px;
    color: var(--r2-text-muted);
    font-size: 13px;
    text-align: center;
}
.repair-2026 .r2-picked {
    padding: 14px 18px;
    border: 1.5px solid var(--r2-brand);
    background: var(--r2-brand-light);
    color: var(--r2-brand-dark);
    font-weight: 600;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.repair-2026 .r2-picked .r2-picked-name { flex: 1; }
.repair-2026 .r2-picked .r2-picked-clear {
    background: transparent;
    border: 0;
    color: var(--r2-brand-dark);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    font-weight: 700;
    transition: color .15s ease;
}
.repair-2026 .r2-picked .r2-picked-clear:hover { color: var(--r2-accent); }
.repair-2026 .r2-search-loading {
    padding: 12px 14px;
    color: var(--r2-text-muted);
    font-size: 13px;
    text-align: center;
    font-style: italic;
}

/* ===================== Success Page ===================== */
.repair-2026 .r2-success-hero { margin-bottom: 32px; }
.repair-2026 .r2-success-breadcrumb {
    font-size: 12px; color: var(--r2-text-muted);
    letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 16px; font-weight: 600;
}
.repair-2026 .r2-success-hero h1 {
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    line-height: 1.2; margin: 0 0 12px; font-weight: 700;
    color: var(--r2-text);
}
.repair-2026 .r2-success-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--r2-success); color: var(--r2-inverse);
    border-radius: 50%;
    margin-right: 10px; vertical-align: 3px; font-size: 16px;
}
.repair-2026 .r2-success-lead {
    font-size: 17px; color: var(--r2-text-muted);
    margin: 0;
}

.repair-2026 .r2-success-status {
    background: var(--r2-success-light);
    border: 1px solid #BFE0CC;
    border-left: 4px solid var(--r2-success);
    padding: 22px 26px;
    margin: 28px 0 40px;
}
.repair-2026 .r2-success-status p { margin: 0 0 12px; color: var(--r2-success); }
.repair-2026 .r2-success-status p:last-child { margin-bottom: 0; }
.repair-2026 .r2-success-status ul { margin: 12px 0; padding-left: 22px; color: var(--r2-success); }
.repair-2026 .r2-success-status li { margin-bottom: 6px; }
.repair-2026 .r2-success-status strong { color: var(--r2-success); }

.repair-2026 .r2-success-contact {
    background: var(--r2-surface);
    border: 1px solid var(--r2-border);
    border-top: 3px solid var(--r2-brand);
    padding: 28px;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 24px; align-items: center;
    margin-bottom: 56px;
}
.repair-2026 .r2-success-photo {
    width: 96px; height: 96px; border-radius: 50%;
    object-fit: cover;
    background: var(--r2-brand-tint);
    display: block;
    flex-shrink: 0;
}
/* Karte um den Success-Inhalt — selbe Surface/Border wie das Formular (.r2-card) */
.repair-2026 .r2-success-card {
    padding: 32px;
    margin-bottom: 32px;
}
@media (max-width: 640px) {
    .repair-2026 .r2-success-card { padding: 22px; }
}
/* Erste Sektion in der Karte braucht keinen oberen Margin mehr */
.repair-2026 .r2-success-card > .r2-success-status:first-child { margin-top: 0; }
.repair-2026 .r2-success-contact .r2-role {
    font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--r2-brand); font-weight: 600;
    margin-bottom: 4px;
}
.repair-2026 .r2-success-contact .r2-name {
    font-size: 22px; font-weight: 600;
    margin-bottom: 12px; color: var(--r2-text);
}
.repair-2026 .r2-success-contact .r2-details {
    display: flex; flex-wrap: wrap;
    gap: 6px 20px; font-size: 15px;
}
.repair-2026 .r2-success-contact .r2-details a {
    color: var(--r2-brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
    font-weight: 500;
}
.repair-2026 .r2-success-contact .r2-details a:hover { border-bottom-color: var(--r2-brand); }
.repair-2026 .r2-success-contact .r2-hours {
    color: var(--r2-text-muted);
    font-size: 14px; margin-top: 8px; width: 100%;
}

.repair-2026 .r2-success-tipshdr { margin-bottom: 28px; }
.repair-2026 .r2-success-eyebrow {
    font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--r2-accent-warm); font-weight: 600;
    margin-bottom: 8px;
}
.repair-2026 .r2-success-tipshdr h2 {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    margin: 0 0 12px; font-weight: 700;
}
.repair-2026 .r2-success-intro {
    color: var(--r2-text-muted); margin: 0; font-size: 16px;
}

.repair-2026 .r2-success-tips {
    counter-reset: tip; list-style: none;
    padding: 0; margin: 0;
}
.repair-2026 .r2-success-tip {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--r2-border);
}
.repair-2026 .r2-success-tip:last-of-type { border-bottom: none; }
.repair-2026 .r2-success-tip::before {
    counter-increment: tip;
    content: counter(tip, decimal-leading-zero);
    font-size: 26px; font-weight: 700;
    color: var(--r2-brand);
    line-height: 1; padding-top: 2px;
}
.repair-2026 .r2-success-tip h3 {
    font-size: 17px; font-weight: 600;
    margin: 0 0 6px; color: var(--r2-text);
}
.repair-2026 .r2-success-tip p { margin: 0; color: var(--r2-text-muted); }

.repair-2026 .r2-success-praxis {
    background: linear-gradient(135deg, #E7F5F8 0%, #D4EEF3 100%);
    border: 1px solid #A8DDE6;
    border-left: 4px solid var(--r2-accent-warm);
    padding: 20px 24px;
    margin-top: 32px;
    display: flex; gap: 16px;
    align-items: flex-start;
}
.repair-2026 .r2-success-praxis-icon {
    flex-shrink: 0; width: 32px; height: 32px;
    background: var(--r2-accent-warm); color: var(--r2-inverse);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.repair-2026 .r2-success-praxis-icon svg { display: block; }
.repair-2026 .r2-success-praxis strong {
    display: block; font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--r2-accent-warm-dark);
    margin-bottom: 4px;
}
.repair-2026 .r2-success-praxis p { margin: 0; color: #1A4A55; }

.repair-2026 .r2-success-cta {
    margin-top: 40px;
    padding: 28px 32px;
    background: var(--r2-brand); color: var(--r2-inverse);
    display: flex; justify-content: space-between;
    align-items: center; gap: 24px;
    flex-wrap: wrap; text-decoration: none;
}
.repair-2026 .r2-success-cta:hover { color: var(--r2-inverse); }
.repair-2026 .r2-success-cta-text h3 {
    font-size: 20px; font-weight: 600;
    margin: 0 0 4px; color: var(--r2-inverse);
}
.repair-2026 .r2-success-cta-text p {
    margin: 0; opacity: .88; font-size: 15px;
}
.repair-2026 .r2-success-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--r2-inverse); color: var(--r2-brand);
    padding: 12px 22px;
    font-weight: 600; font-size: 15px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.repair-2026 .r2-success-cta:hover .r2-success-cta-btn {
    transform: translateY(-1px);
}
.repair-2026 .r2-success-cta-btn .r2-arrow { transition: transform .15s ease; }
.repair-2026 .r2-success-cta:hover .r2-success-cta-btn .r2-arrow {
    transform: translateX(3px);
}

.repair-2026 .r2-success-repairnote {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--r2-border);
    text-align: center;
    font-size: 14px;
    color: var(--r2-text-muted);
}
.repair-2026 .r2-success-repairnote strong {
    color: var(--r2-brand); font-weight: 600;
}

.repair-2026 .r2-success-stack { margin: 0 0 32px; }

@media (max-width: 600px) {
    .repair-2026 .r2-success-contact {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
    .repair-2026 .r2-success-contact .r2-details { justify-content: center; }
    .repair-2026 .r2-success-tip { grid-template-columns: 40px 1fr; gap: 12px; }
    .repair-2026 .r2-success-tip::before { font-size: 22px; }
    .repair-2026 .r2-success-cta { flex-direction: column; text-align: center; }
}

/* Error state */
.repair-2026 .r2-field-error .r2-input,
.repair-2026 .r2-field-error .r2-select,
.repair-2026 .r2-field-error .r2-textarea { border-color: var(--r2-accent); background: var(--r2-error-bg); }
.repair-2026 .r2-field-error .r2-seg button,
.repair-2026 .r2-field-error .r2-ctype-pill,
.repair-2026 .r2-field-error .r2-mfg-tile,
.repair-2026 .r2-field-error .filter select {
    border-color: var(--r2-accent);
}
.repair-2026 .r2-field-error.r2-field { background: var(--r2-error-bg); padding: 8px; }
.repair-2026 .r2-err-msg {
    color: var(--r2-accent); font-size: 12px; margin-top: 6px;
    display: none; font-weight: 500;
}
.repair-2026 .r2-field-error .r2-err-msg { display: block; }


/* ============================================================
   SEKTION 2 — PORTAL & MEIN-KONTO  (Scope: .rp)
   ============================================================ */
/* ============================================================
   repair_portal.css — Visueller Layer für das Reparatur-Portal
   (repair_list.php, repair_detail.php, repair_offer.php) und den
   „Meine Reparaturen"-Block in account.php.

   Strikt aus den Mockups account-refresh-v3.html / repair-portal-v3.html.
   ALLES unter .rp gescoped → der restliche Shop bleibt unberührt.
   Wird im Markup NACH main.css geladen, damit die Re-Themes der
   Shop-/Bootstrap-Klassen (badge/alert/table/btn) greifen.
   Nur --r2-*-Tokens, keine fremden Design-Tokens.
   ============================================================ */

.rp {
    color: var(--r2-text);
}
.rp, .rp *, .rp *::before, .rp *::after { box-sizing: border-box; }
.rp { overflow-wrap: anywhere; }

/* Typografie */
.rp h1 { font-size: 28px; letter-spacing: -.015em; font-weight: 700; margin: 0 0 4px; color: var(--r2-text); }
.rp .lede { color: var(--r2-text-muted); font-size: 14.5px; margin: 0 0 24px; max-width: 640px; }

/* Links — Basis-Override gegen Shop-Bleed (a{color:#1ca3bc}, a:not(.btn){underline}).
   Spezifischere .rp-Linkregeln (Buttons, Kontaktkanäle, Produkt-/Doku-Links) gewinnen weiterhin. */
.rp a { color: var(--r2-brand); text-decoration: none; }
.rp a:hover { color: var(--r2-brand-dark); text-decoration: underline; }
/* Buttons sind <a>-Tags — unterdrückt underline aus a:hover für alle Zustände */
.rp a.btn:hover,
.rp a.btn:focus,
.rp a.btn:active { text-decoration: none; }

/* --- Buttons (Re-Theme der Shop-/Bootstrap-Klassen) --- */
.rp .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px; font-size: 14px; font-weight: 500; line-height: 1.3;
    border: 1.5px solid transparent; border-radius: 0;
    cursor: pointer; text-decoration: none; transition: all var(--r2-t-fast);
    /* Buttons brechen nie um (Shop-/Bootstrap-Default beibehalten). Lange Labels
       müssen über kürzeren Text oder breitere Container gelöst werden, nicht
       über Umbruch. */
    white-space: nowrap; min-width: 0; text-align: center;
}
.rp .btn-secondary { background: var(--r2-brand); color: var(--r2-inverse); border-color: var(--r2-brand); }
.rp .btn-secondary:hover { color: var(--r2-inverse); background-color: var(--r2-brand-hover); border-color: var(--r2-brand-hover-border); }
.rp .btn-outline-primary { background: transparent; color: var(--r2-brand); border-color: var(--r2-brand); }
.rp .btn-outline-primary:hover { background: var(--r2-brand-tint); }
.rp .btn-link { background: transparent; color: var(--r2-brand); border-color: transparent; padding-left: 0; padding-right: 0; }
.rp .btn-link:hover { color: var(--r2-brand-dark); text-decoration: underline; }
.rp .btn-block { display: flex; width: 100%; justify-content: center; align-items: center; }
.rp .btn-secondary.btn-block:hover { color: var(--r2-inverse); background-color: var(--r2-brand-hover); border-color: var(--r2-brand-hover-border); }
.rp .btn-sm { padding: 6px 12px; font-size: 12.5px; }

/* --- Tabelle (Re-Theme) --- */
.rp .table {
    width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 0;
    background: var(--r2-surface); border: 1px solid var(--r2-border); color: var(--r2-text);
}
/* Shop-Basis (BS4) setzt border-top auf jede Zelle (#dee2e6) — im .rp-Layer
   zurücksetzen, sonst entstehen Doppellinien, die das Mockup nicht hat. */
.rp .table thead th {
    text-align: left; padding: 12px 16px; background: var(--r2-surface-alt);
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--r2-text-muted); font-weight: 700;
    border-top: 0; border-bottom: 1px solid var(--r2-border);
}
.rp .table tbody td, .rp .table tbody th {
    padding: 14px 16px; border-top: 0; border-bottom: 1px solid var(--r2-border);
    vertical-align: middle; font-weight: 400; color: var(--r2-text); text-align: left;
}
.rp .table tbody tr:last-child > * { border-bottom: none; }
.rp .table tbody tr:hover { background: var(--r2-brand-tint); }
.rp .table-striped tbody tr:nth-of-type(odd) { background: var(--r2-surface-alt); }
.rp .table-striped tbody tr:nth-of-type(odd):hover { background: var(--r2-brand-tint); }
.rp .table tbody th[scope="row"] { font-weight: 700; letter-spacing: -.005em; }
.rp .table tbody th[scope="row"] small { display: block; font-weight: 400; font-size: 11.5px; color: var(--r2-text-soft); margin-top: 2px; }
.rp .table tbody td small { color: var(--r2-text-muted); font-size: 12px; }
.rp .table-cell-action { text-align: right; white-space: nowrap; width: 1%; }

/* --- Badges (weiches Re-Theme der Shop-Klassen) --- */
.rp .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; font-size: 12px; font-weight: 600;
    border: 1px solid; line-height: 1.4; letter-spacing: .01em; white-space: nowrap;
}
.rp .badge::before { content: ""; width: 7px; height: 7px; background: currentColor; flex-shrink: 0; }
.rp .badge-warning   { color: var(--r2-warning); border-color: var(--r2-warning-border); background: var(--r2-warning-light); }
.rp .badge-secondary { color: var(--r2-brand); border-color: var(--r2-brand-light); background: var(--r2-brand-tint); }
.rp .badge-info      { color: var(--r2-accent-warm-dark); border-color: var(--r2-accent-warm-border); background: var(--r2-accent-warm-light); }
.rp .badge-success   { color: var(--r2-success); border-color: var(--r2-success-border); background: var(--r2-success-light); }
.rp .badge-danger    { color: var(--r2-accent); border-color: var(--r2-accent-border); background: var(--r2-accent-bg); }
.rp .badge-light     { color: var(--r2-text-muted); border-color: var(--r2-border-strong); background: var(--r2-surface-alt); }

/* --- Alerts (weiches Re-Theme) --- */
.rp .alert {
    position: relative; padding: 12px 16px; margin-bottom: 14px;
    border: 1px solid; border-left-width: 4px; font-size: 13.5px; color: var(--r2-text);
}
.rp .alert-warning { background: var(--r2-alert-warning-bg); border-color: var(--r2-alert-warning-border); border-left-color: var(--r2-alert-warning-border); color: var(--r2-alert-warning-text); }
.rp .alert-info    { background: var(--r2-accent-warm-light); border-color: var(--r2-accent-warm-border); border-left-color: var(--r2-accent-warm); }
.rp .alert-success { background: var(--r2-success-light); border-color: var(--r2-success-border); border-left-color: var(--r2-success); }
.rp .alert-danger  { background: var(--r2-accent-bg); border-color: var(--r2-accent-border); border-left-color: var(--r2-accent); }

/* Action-Banner (KVA wartet) — alert-warning mit pulsendem Dot */
.rp .alert.rp-banner-action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rp .alert.rp-banner-action::before {
    content: ""; width: 10px; height: 10px; background: var(--r2-alert-warning-text);
    animation: rp-pulse 1.8s ease-in-out infinite; flex-shrink: 0;
}
.rp .alert.rp-banner-action .ml-auto { margin-left: auto; }
.rp .alert.rp-banner-action a { color: var(--r2-alert-warning-text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--r2-alert-warning-border); }
.rp .alert.rp-banner-action a:hover { border-color: var(--r2-alert-warning-text); }
@keyframes rp-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.4); } }

/* ============================================================
   FILTERLEISTE (repair_list.php)
   ============================================================ */
.rp .rp-filter {
    display: grid; grid-template-columns: 1fr 220px 200px auto;
    gap: 12px; margin-bottom: 18px; align-items: end;
    padding: 20px; border: 1px solid var(--r2-border); background: var(--r2-surface-alt);
}
.rp .rp-filter .field { display: flex; flex-direction: column; gap: 6px; }
.rp .rp-filter label {
    text-transform: uppercase; letter-spacing: .08em;
    font-size: 10.5px; font-weight: 700; color: var(--r2-text-muted);
}
.rp .rp-input, .rp .rp-select {
    padding: 11px 14px; border: 1.5px solid var(--r2-border); background: var(--r2-surface);
    font-family: inherit; font-size: 14px; color: var(--r2-text); border-radius: 0;
}
.rp .rp-input:focus, .rp .rp-select:focus { outline: none; border-color: var(--r2-brand); }
.rp .rp-input--search {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
    background-repeat: no-repeat; background-position: 12px center; padding-left: 36px;
}
.rp .rp-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236B7280' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer;
}

/* Aktive-Filter-Chips */
.rp .rp-filter-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; color: var(--r2-text-muted); }
.rp .rp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; background: var(--r2-brand-tint); border: 1px solid var(--r2-brand-light); color: var(--r2-brand-dark); font-size: 12.5px; }
.rp .rp-chip .rp-chip-x { padding: 0 4px; color: inherit; text-decoration: none; font-size: 14px; line-height: 1; font-weight: 700; }
.rp .rp-chip .rp-chip-x:hover { color: var(--r2-accent); }
.rp .rp-filter-reset { color: var(--r2-brand); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.rp .rp-filter-reset:hover { color: var(--r2-brand-dark); text-decoration: underline; }

/* Listen-Meta + Pagination */
.rp .rp-list-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--r2-border);
    font-size: 13px; color: var(--r2-text-muted); flex-wrap: wrap; gap: 12px;
}
.rp .rp-pagination { display: flex; gap: 4px; }
.rp .rp-pagination a, .rp .rp-pagination span {
    min-width: 34px; height: 34px; display: grid; place-items: center; padding: 0 10px;
    border: 1.5px solid var(--r2-border); background: var(--r2-surface);
    color: var(--r2-text); font-size: 13px; font-weight: 500; text-decoration: none;
    transition: all var(--r2-t-fast);
}
.rp .rp-pagination a:hover { border-color: var(--r2-brand); color: var(--r2-brand); }
.rp .rp-pagination a[aria-current="page"] { background: var(--r2-brand); color: var(--r2-inverse); border-color: var(--r2-brand); }
.rp .rp-pagination span[aria-disabled="true"] { color: var(--r2-text-soft); }
.rp .rp-pagination .gap { border: none; background: transparent; color: var(--r2-text-soft); }

/* ============================================================
   RESPONSIVE TABLE (Mobile, Shop-Pattern)
   ============================================================ */
@media (max-width: 720px) {
    .rp .rp-filter { grid-template-columns: 1fr; padding: 14px; }
    .rp .rp-filter .field .btn { width: 100%; display: flex; }

    .rp .responsive-table { border: none; background: transparent; }
    .rp .responsive-table thead { display: none; }
    .rp .responsive-table tbody tr {
        display: block; border: 1px solid var(--r2-border); background: var(--r2-surface);
        padding: 14px 16px; margin-bottom: 10px;
    }
    .rp .responsive-table.table-striped tbody tr:nth-of-type(odd) { background: var(--r2-surface); }
    .rp .responsive-table.table-striped tbody tr:hover { background: var(--r2-surface); }
    .rp .responsive-table tbody tr > * {
        display: flex; justify-content: space-between; align-items: center;
        padding: 7px 0; gap: 12px; border-bottom: 1px solid var(--r2-border); text-align: left; min-width: 0;
    }
    .rp .responsive-table tbody tr > *:last-child { border-bottom: none; padding-bottom: 0; }
    .rp .responsive-table tbody [data-title]::before {
        content: attr(data-title); font-size: 11.5px; font-weight: 600;
        color: var(--r2-text-muted); min-width: 100px; max-width: 42%; flex-shrink: 0;
    }
    .rp .responsive-table tbody th[scope="row"] {
        display: block; padding: 0 0 12px; margin-bottom: 4px;
        border-bottom: 1.5px solid var(--r2-text); font-size: 18px; font-weight: 700;
    }
    .rp .responsive-table tbody th[scope="row"]::before { display: none; }
    .rp .table-cell-action { display: block !important; padding: 12px 0 0 !important; white-space: normal !important; width: auto !important; }
    .rp .table-cell-action::before { display: none !important; }
    .rp .table-cell-action .btn { display: flex; width: 100%; }

    /* Bestellungen-Tabelle (außerhalb .rp): gleiche Button-Behandlung */
    .responsive-table td.table-cell-action { display: block !important; padding: 10px 0 0 !important; white-space: normal !important; width: auto !important; }
    .responsive-table td.table-cell-action::before,
    .responsive-table td.table-cell-action::after { display: none !important; content: none !important; }
    .responsive-table td.table-cell-action .btn { display: block; width: 100%; box-sizing: border-box; }

    /* th[scope="row"]: ::after unterdrücken, stattdessen ::before als Label vor dem Wert */
    .responsive-table th[scope="row"][data-title]::after { display: none !important; content: none !important; }
    .responsive-table th[scope="row"][data-title]::before { content: attr(data-title) ": "; font-weight: 700; font-size: 1.05rem; }

    /* ::before-Labels unterdrücken (verhindert Dopplung falls Shop-CSS ::before zusätzlich erzeugt) */
    .responsive-table td[data-title]::before,
    .responsive-table th[data-title]::before { display: none !important; content: none !important; }
}

/* ============================================================
   DETAILSEITE (repair_detail.php)
   ============================================================ */
.rp .mono { font-family: 'Roboto Mono', ui-monospace, monospace; }

.rp .rp-detail-header {
    display: grid; grid-template-columns: 1fr auto; gap: 24px;
    padding: 28px 0 24px; margin-bottom: 28px; border-bottom: 1px solid var(--r2-border);
}
.rp .rp-detail-header .rp-eyebrow {
    text-transform: uppercase; letter-spacing: .12em; font-size: 11px;
    color: var(--r2-text-muted); font-weight: 700; margin-bottom: 8px;
}
.rp .rp-detail-header h1 { font-size: 30px; margin: 0 0 8px; letter-spacing: -.015em; }
.rp .rp-detail-header h1 .rp-ref {
    color: var(--r2-text-soft); font-weight: 400; font-size: 18px; margin-left: 8px;
    font-family: 'Roboto Mono', monospace;
}
.rp .rp-detail-header .rp-detail-meta {
    color: var(--r2-text-muted); font-size: 13.5px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.rp .rp-detail-header .rp-detail-meta .dot { color: var(--r2-text-soft); }
.rp .rp-detail-header .rp-detail-status { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rp .rp-detail-header .rp-detail-status small { color: var(--r2-text-soft); font-size: 12px; }

/* Status-Timeline */
.rp .rp-timeline {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; margin-bottom: 36px;
    border: 1px solid var(--r2-border); background: var(--r2-surface);
    padding: 24px 20px 20px; position: relative;
}
.rp .rp-timeline-step {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    position: relative; text-align: center; font-size: 11.5px;
    color: var(--r2-text-soft); font-weight: 500;
}
.rp .rp-timeline-step .dot {
    width: 26px; height: 26px; background: var(--r2-surface);
    border: 1.5px solid var(--r2-border-strong); display: grid; place-items: center;
    font-weight: 700; font-size: 12px; color: var(--r2-text-soft); z-index: 2; position: relative;
}
.rp .rp-timeline-step .label { line-height: 1.3; max-width: 10ch; word-break: normal; hyphens: none; overflow-wrap: normal; }
.rp .rp-timeline-step .stamp { color: var(--r2-text-soft); font-size: 10.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rp .rp-timeline-step:not(:last-child)::after {
    content: ""; position: absolute; top: 13px;
    left: calc(50% + 16px); right: calc(-50% + 16px);
    height: 1.5px; background: var(--r2-border-strong); z-index: 1;
}
.rp .rp-timeline-step.is-done { color: var(--r2-success); }
.rp .rp-timeline-step.is-done .dot { background: var(--r2-success); border-color: var(--r2-success); color: var(--r2-inverse); }
.rp .rp-timeline-step.is-done .dot::before {
    content: ""; width: 10px; height: 5px;
    border-left: 2px solid var(--r2-inverse); border-bottom: 2px solid var(--r2-inverse);
    transform: rotate(-45deg) translate(1px,-1px);
}
.rp .rp-timeline-step.is-done .dot span { display: none; }
.rp .rp-timeline-step.is-done:not(:last-child)::after { background: var(--r2-success); }
.rp .rp-timeline-step.is-active { color: var(--r2-brand); }
.rp .rp-timeline-step.is-active .dot {
    background: var(--r2-brand); border-color: var(--r2-brand); color: var(--r2-inverse);
    transform: scale(1.1); box-shadow: 0 0 0 4px var(--r2-brand-tint);
}
.rp .rp-timeline-step.is-active .label { font-weight: 700; color: var(--r2-text); }
.rp .rp-timeline-step.is-warning { color: var(--r2-warning); }
.rp .rp-timeline-step.is-warning .dot { background: var(--r2-warning-light); border-color: var(--r2-warning); color: var(--r2-warning); }
.rp .rp-timeline-step.is-warning .dot::before { content: "!"; font-weight: 700; }
.rp .rp-timeline-step.is-warning .dot span { display: none; }

/* Zweispaltiges Layout */
.rp .rp-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; }

.rp .rp-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.rp .rp-spec { padding: 14px 0; border-bottom: 1px solid var(--r2-border); }
.rp .rp-spec dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--r2-text-soft); font-weight: 600; margin-bottom: 4px; }
.rp .rp-spec dd { margin: 0; font-size: 14.5px; color: var(--r2-text); }
.rp .rp-spec dd.mono { font-family: 'Roboto Mono', monospace; font-size: 13px; }

.rp .rp-prose {
    font-size: 14.5px; line-height: 1.65; color: var(--r2-text);
    padding: 14px 16px; border-left: 3px solid var(--r2-brand-light);
    background: var(--r2-surface-alt); margin: 0 0 4px;
}
.rp .rp-prose.is-diag { border-left-color: var(--r2-accent-warm); }

/* Zebra-Detailliste (Fehlerbeschreibung / Diagnose / Vorschäden / Hinweise) */
.rp .rp-detail-list { border: 1px solid var(--r2-border); border-radius: 8px; overflow: hidden; }
.rp .rp-detail-list__row { display: grid; grid-template-columns: 192px 1fr; border-bottom: 1px solid var(--r2-border); }
.rp .rp-detail-list__row:last-child { border-bottom: none; }
.rp .rp-detail-list__label {
    background: var(--r2-surface-alt);
    padding: 11px 14px;
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: var(--r2-text-soft);
    word-break: keep-all; hyphens: none;
}
.rp .rp-detail-list__label svg { flex-shrink: 0; margin-top: 1px; }
.rp .rp-detail-list__value {
    padding: 11px 16px; font-size: 14px;
    color: var(--r2-text); line-height: 1.55;
}
.rp .rp-detail-list__hint {
    padding: 11px 16px; font-size: 13px; line-height: 1.55;
    color: #7a5c2e; background: #fdf6ec;
    display: flex; align-items: flex-start; gap: 8px;
    border-top: 1px solid #f5e2c0;
}
.rp .rp-detail-list__hint svg { flex-shrink: 0; margin-top: 1px; }
@media (max-width: 600px) {
    .rp .rp-detail-list__row { grid-template-columns: 1fr; }
    .rp .rp-detail-list__label { border-bottom: 1px solid var(--r2-border); }
}

/* Mitgesendetes Zubehör als Liste */
.rp ul.rp-accessoires-list { list-style: none; }
.rp .rp-accessoires-list li { position: relative; padding-left: 20px; color: var(--r2-text); }
.rp .rp-accessoires-list li + li { margin-top: 6px; }
.rp .rp-accessoires-list li::before {
    content: ""; position: absolute; left: 2px; top: 0.62em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--r2-brand-light);
}

/* Zahlungsinformationen (repair_detail.php, aside) */
.rp .rp-payment-card { border: 1px solid var(--r2-border); background: var(--r2-surface-alt); padding: 18px 20px; }
.rp .rp-payment-card h3 { margin: 0 0 8px; font-size: 14px; }
.rp .rp-payment-intro { font-size: 13px; line-height: 1.5; color: var(--r2-text-muted); margin: 0 0 12px; }
.rp .rp-payment-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; }
.rp .rp-payment-list dt { color: var(--r2-text-muted); font-weight: 600; }
.rp .rp-payment-list dd { margin: 0; color: var(--r2-text); }
.rp .rp-payment-list dd.mono { font-family: 'Roboto Mono', monospace; font-size: 12.5px; }

/* Inline-Validierung (repair_offer.js) */
.rp .rp-inline-error { color: var(--r2-accent); font-size: 13px; font-weight: 600; margin: 6px 0 0; }
.rp .rp-signature.is-invalid { border-color: var(--r2-accent); }
.rp .rp-select.is-invalid, .rp .rp-textarea.is-invalid { border-color: var(--r2-accent); background: var(--r2-error-bg); }
.rp .rp-confirm.is-invalid label { color: var(--r2-accent); }

/* KVA-Pull-out */
.rp .rp-kva-summary {
    background: var(--r2-warning-light); border: 1px solid var(--r2-warning-border);
    padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
}
.rp .rp-kva-summary .top { display: flex; align-items: flex-start; gap: 14px; }
.rp .rp-kva-summary .top .icon { width: 36px; height: 36px; flex-shrink: 0; background: var(--r2-warning); color: var(--r2-inverse); display: grid; place-items: center; font-weight: 700; }
.rp .rp-kva-summary h3 { margin: 0; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--r2-warning); }
.rp .rp-kva-summary p { margin: 4px 0 0; font-size: 13.5px; color: var(--r2-text); }

/* Dokumente */
.rp .rp-doc-list { list-style: none; padding: 0; margin: 0; }
.rp .rp-doc-list li {
    padding: 12px 14px; border: 1px solid var(--r2-border); background: var(--r2-surface);
    display: flex; align-items: center; gap: 12px; font-size: 13.5px; transition: all var(--r2-t-fast);
}
.rp .rp-doc-list li + li { margin-top: 8px; }
.rp .rp-doc-list li:hover { border-color: var(--r2-brand); background: var(--r2-brand-tint); }
.rp .rp-doc-list li .icon { width: 32px; height: 32px; flex-shrink: 0; background: var(--r2-brand-tint); color: var(--r2-brand); display: grid; place-items: center; font-weight: 700; font-size: 11px; }
.rp .rp-doc-list li .meta { flex: 1; }
.rp .rp-doc-list li .meta small { display: block; color: var(--r2-text-muted); font-size: 11.5px; }
.rp .rp-doc-list li a { color: var(--r2-brand); text-decoration: none; font-weight: 600; }

/* Kontaktbox */
.rp .rp-contact-card { background: var(--r2-brand-tint); padding: 22px; border-top: 3px solid var(--r2-brand); }
.rp .rp-contact-card h3 { color: var(--r2-brand-dark); margin: 0 0 8px; text-transform: none; letter-spacing: 0; font-size: 16px; }
.rp .rp-contact-card p { margin: 0 0 14px; font-size: 13.5px; color: var(--r2-text); }
.rp .rp-contact-card .ref-hint { margin-top: 12px; font-size: 11.5px; color: var(--r2-text-muted); padding-top: 12px; border-top: 1px solid var(--r2-brand-light); }
.rp .rp-contact-card .ref-hint strong { color: var(--r2-text); font-family: 'Roboto Mono', monospace; }

/* Kontaktkanäle */
.rp .rp-contact-channels { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
/* 2-spaltige Variante (Bestelldetail-Kontaktkanäle) — Desktop zwei nebeneinander,
   Mobile fällt über die flex-column-Basis auf eine Spalte zurück. */
@media (min-width: 768px) {
    .rp .rp-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .rp .rp-contact-grid a, .rp .rp-contact-grid button { height: 100%; }
}
.rp .rp-contact-channels a,
.rp .rp-contact-channels button {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: var(--r2-surface); border: 1.5px solid var(--r2-border);
    text-decoration: none; color: var(--r2-text); transition: all var(--r2-t-fast); min-width: 0;
}
/* Chatbot-Karte ist ein <button> (JS-Launcher) — Button-Defaults angleichen. */
.rp .rp-contact-channels button { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.rp .rp-contact-channels a:hover,
.rp .rp-contact-channels button:hover { border-color: var(--r2-brand); background: var(--r2-brand-tint); }
.rp .rp-contact-channels .ch-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; background: var(--r2-brand-tint); color: var(--r2-brand); }
.rp .rp-contact-channels .ch-meta { flex: 1 1 auto; min-width: 0; }
.rp .rp-contact-channels .ch-meta strong { display: block; font-weight: 600; font-size: 14px; color: var(--r2-text); overflow-wrap: anywhere; }
.rp .rp-contact-channels .ch-meta small { display: block; color: var(--r2-text-muted); font-size: 12px; margin-top: 2px; }
.rp .rp-contact-channels .ch-arrow { color: var(--r2-text-soft); font-size: 18px; line-height: 1; flex-shrink: 0; }
.rp .rp-contact-channels a:hover .ch-arrow,
.rp .rp-contact-channels button:hover .ch-arrow { color: var(--r2-brand); }
.rp .rp-contact-channels .is-whatsapp .ch-icon { background: var(--r2-whatsapp); color: var(--r2-inverse); }
.rp .rp-contact-channels .is-whatsapp:hover { border-color: var(--r2-whatsapp); background: #E7F8EE; }

/* ============================================================
   KOSTENVORANSCHLAG (repair_offer.php)
   ============================================================ */
/* Banner mit Icon + Headline */
.rp .alert.rp-banner-with-icon { display: flex; gap: 14px; align-items: flex-start; }
.rp .alert.rp-banner-with-icon .icon { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.rp .alert.rp-banner-with-icon h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.rp .alert.rp-banner-with-icon p { margin: 0; color: var(--r2-text); }
.rp .alert-warning.rp-banner-with-icon .icon { background: var(--r2-alert-warning-text); color: var(--r2-inverse); }
.rp .alert-warning.rp-banner-with-icon h4 { color: var(--r2-alert-warning-text); }
.rp .alert-info.rp-banner-with-icon .icon { background: var(--r2-accent-warm); color: var(--r2-inverse); }
.rp .alert-info.rp-banner-with-icon h4 { color: var(--r2-accent-warm-dark); }
.rp .alert-danger.rp-banner-with-icon .icon { background: var(--r2-accent); color: var(--r2-inverse); }
.rp .alert-danger.rp-banner-with-icon h4 { color: var(--r2-accent); }
.rp .alert.rp-banner-pauschale p + p { font-size: 12.5px; color: var(--r2-text-muted); }
/* Aktions-Buttons im KVA-Warning-Banner */
.rp .alert.rp-banner-with-icon .rp-kva-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* KVA-Eintrag in der Sidebar (nach Freigabe/Ablehnung, oberhalb der Dokument-Liste) */
.rp .rp-kva-sidebar-entry {
    background: var(--r2-surface); border: 1.5px solid var(--r2-success);
    padding: 14px 16px; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.rp .rp-kva-sidebar-entry .kva-header {
    display: flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: 13px; color: var(--r2-success);
}
.rp .rp-kva-sidebar-entry .kva-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12.5px; color: var(--r2-text-soft);
    border-bottom: 1px solid var(--r2-border); padding-bottom: 6px;
}
.rp .rp-kva-sidebar-entry .kva-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.rp .rp-kva-sidebar-entry .kva-row strong { color: var(--r2-text); font-size: 14px; }
/* Sidebar-KVA: abgelehnter Vorgang — roten Rahmen */
.rp .rp-kva-sidebar-entry.is-rejected { border-color: var(--r2-accent); }
.rp .rp-kva-sidebar-entry.is-rejected .kva-header { color: var(--r2-accent); }

/* KVA-Kopf */
.rp .rp-kva-header {
    display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end;
    padding: 0 0 28px; margin: 28px 0 28px; border-bottom: 2px solid var(--r2-text);
}
.rp .rp-kva-header .rp-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--r2-accent-warm-dark); font-weight: 700; margin-bottom: 10px; }
.rp .rp-kva-header h1 { font-size: 36px; margin: 0; letter-spacing: -.02em; }
.rp .rp-kva-header .rp-kva-meta { text-align: right; color: var(--r2-text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.rp .rp-kva-header .rp-kva-meta strong { color: var(--r2-text); display: block; font-size: 18px; font-family: 'Roboto Mono', monospace; letter-spacing: -.005em; margin-bottom: 2px; }
.rp .rp-kva-header .rp-kva-meta .valid-until { margin-top: 8px; display: inline-block; padding: 4px 10px; background: var(--r2-warning-light); color: var(--r2-warning); border: 1px solid var(--r2-warning-border); font-size: 12px; font-weight: 600; }

/* Positionsliste */
.rp .rp-positions { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--r2-surface); border: 1px solid var(--r2-border); margin-bottom: 4px; }
.rp .rp-positions thead th { text-align: left; padding: 12px 14px; background: var(--r2-text); color: var(--r2-inverse); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.rp .rp-positions thead th.r { text-align: right; }
.rp .rp-positions tbody td { padding: 14px; border-bottom: 1px solid var(--r2-border); vertical-align: top; }
.rp .rp-positions tbody td.r { text-align: right; font-variant-numeric: tabular-nums; }
.rp .rp-positions tbody tr:last-child td { border-bottom: none; }
.rp .rp-positions tbody tr.alt {
    background: repeating-linear-gradient(45deg, var(--r2-surface-alt), var(--r2-surface-alt) 8px, var(--r2-surface) 8px, var(--r2-surface) 16px);
}
.rp .rp-positions .rp-pos-num { font-family: 'Roboto Mono', monospace; font-size: 12px; color: var(--r2-text-muted); width: 36px; }
.rp .rp-positions .rp-pos-sku { font-family: 'Roboto Mono', monospace; font-size: 12px; color: var(--r2-text-muted); display: block; margin-bottom: 2px; }
.rp .rp-positions .rp-pos-title { font-weight: 500; }
.rp .rp-positions .rp-pos-text { color: var(--r2-text-muted); font-size: 12.5px; margin-top: 2px; line-height: 1.5; }
.rp .rp-positions .rp-pos-vat { color: var(--r2-text-muted); font-size: 12px; }
.rp .rp-positions .alt-pill { display: inline-block; padding: 2px 8px; margin-bottom: 6px; background: var(--r2-warning-light); color: var(--r2-warning); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* Versand-Row */
.rp .rp-shipping-row {
    padding: 14px; border: 1px solid var(--r2-border); border-top: none; background: var(--r2-brand-tint);
    display: grid; grid-template-columns: 1fr 100px 100px 120px 120px; gap: 14px; font-size: 13.5px; align-items: center;
}
.rp .rp-shipping-row .label { font-weight: 600; }
.rp .rp-shipping-row .label small { display: block; color: var(--r2-text-muted); font-weight: 400; font-size: 12px; }
.rp .rp-shipping-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.rp .rp-shipping-row .vat, .rp .rp-shipping-row .qty { text-align: center; color: var(--r2-text-muted); font-size: 12px; }

/* Summen + AGB */
.rp .rp-summary-wrap { margin-top: 18px; display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.rp .rp-agb-block { border: 1px solid var(--r2-border); padding: 18px; font-size: 13px; color: var(--r2-text-muted); line-height: 1.6; }
.rp .rp-agb-block strong { color: var(--r2-text); }
.rp .rp-agb-block a { color: var(--r2-brand); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--r2-brand-light); }
.rp .rp-agb-block a:hover { border-color: var(--r2-brand); }
.rp .rp-summary { border: 1px solid var(--r2-border); background: var(--r2-surface); padding: 22px; font-variant-numeric: tabular-nums; }
.rp .rp-summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; gap: 14px; }
.rp .rp-summary-row.muted { color: var(--r2-text-muted); }
.rp .rp-summary-row.divider { border-top: 1px dashed var(--r2-border); margin-top: 4px; padding-top: 12px; }
.rp .rp-summary-row.total { border-top: 2px solid var(--r2-text); margin-top: 10px; padding-top: 16px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.rp .rp-summary-row.total small { font-size: 11px; font-weight: 500; color: var(--r2-text-muted); letter-spacing: .04em; text-transform: uppercase; display: block; margin-top: 4px; }
.rp .rp-summary-vat-detail { background: var(--r2-surface-alt); margin: 8px -22px; padding: 12px 22px; border-top: 1px solid var(--r2-border); border-bottom: 1px solid var(--r2-border); }
.rp .rp-summary-vat-detail .h { text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; color: var(--r2-text-soft); font-weight: 700; margin-bottom: 6px; }

@media (max-width: 900px) {
    .rp .rp-kva-header { grid-template-columns: 1fr; gap: 12px; }
    .rp .rp-kva-header .rp-kva-meta { text-align: left; }
    .rp .rp-summary-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .rp .rp-kva-header h1 { font-size: 26px; }
    /* Positionsliste: unwichtige Spalten ausblenden (MwSt, EP netto, Gesamt netto) */
    .rp .rp-positions th:nth-child(4), .rp .rp-positions td:nth-child(4),
    .rp .rp-positions th:nth-child(5), .rp .rp-positions td:nth-child(5),
    .rp .rp-positions th:nth-child(6), .rp .rp-positions td:nth-child(6) { display: none; }

    /* Versand-Zeile: nur Label + Gesamt brutto */
    .rp .rp-shipping-row { grid-template-columns: 1fr auto; }
    .rp .rp-shipping-row > :nth-child(2),
    .rp .rp-shipping-row > :nth-child(3),
    .rp .rp-shipping-row > :nth-child(4) { display: none; }
}

/* ============================================================
   KVA-AKTIONEN (repair_offer.php, Schritt 5)
   ============================================================ */
.rp .rp-btn-reject { background: var(--r2-surface-alt); color: var(--r2-text-muted); border-color: var(--r2-border-strong); }
.rp .rp-btn-reject:hover { background: #F7ECEC; color: var(--r2-accent); border-color: var(--r2-accent); }

.rp .rp-actions-block { margin-top: 36px; padding: 32px; border: 2px solid var(--r2-text); background: var(--r2-surface); position: relative; }
.rp .rp-actions-block::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 4px; background: var(--r2-brand); }
.rp .rp-actions-block h2 { font-size: 22px; letter-spacing: -.01em; margin: 0 0 8px; }
.rp .rp-actions-block .lede { margin-bottom: 24px; font-size: 14px; }

/* Tabs */
.rp .rp-action-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 26px; border: 1.5px solid var(--r2-border); }
.rp .rp-action-tab { padding: 16px 14px; background: var(--r2-surface); border: none; border-right: 1.5px solid var(--r2-border); text-align: left; cursor: pointer; transition: all var(--r2-t-fast); font-family: inherit; display: flex; flex-direction: column; gap: 4px; }
.rp .rp-action-tab:last-child { border-right: none; }
.rp .rp-action-tab strong { font-size: 14px; font-weight: 700; color: var(--r2-text); display: flex; align-items: center; gap: 8px; }
.rp .rp-action-tab strong .marker { width: 10px; height: 10px; background: var(--r2-border-strong); flex-shrink: 0; }
.rp .rp-action-tab small { font-size: 12px; color: var(--r2-text-muted); line-height: 1.45; }
.rp .rp-action-tab:hover { background: var(--r2-brand-tint); }
.rp .rp-action-tab[aria-pressed="true"] { background: var(--r2-brand); }
.rp .rp-action-tab[aria-pressed="true"] strong, .rp .rp-action-tab[aria-pressed="true"] small { color: var(--r2-inverse); }
.rp .rp-action-tab[aria-pressed="true"] strong .marker { background: var(--r2-inverse); }
.rp .rp-action-form h3 { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--r2-text); margin: 0 0 8px; }

/* Signatur */
.rp .rp-signature { position: relative; border: 1.5px solid var(--r2-border); background: var(--r2-surface); height: 180px; margin-bottom: 6px; cursor: crosshair; touch-action: none; }
.rp .rp-signature::before { content: ""; position: absolute; bottom: 30px; left: 24px; right: 24px; height: 1px; background: var(--r2-text); pointer-events: none; z-index: 1; }
.rp .rp-signature::after { content: "Unterschreiben Sie hier"; position: absolute; bottom: 8px; left: 24px; font-size: 11px; color: var(--r2-text-soft); text-transform: uppercase; letter-spacing: .08em; pointer-events: none; z-index: 1; }
.rp .rp-signature canvas { position: relative; z-index: 2; display: block; width: 100%; height: 100%; }
.rp .rp-signature-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 12px; color: var(--r2-text-muted); }
.rp .rp-signature-actions button { background: none; border: none; color: var(--r2-brand); cursor: pointer; text-decoration: underline; font-size: 12px; font-family: inherit; padding: 0; }

/* Checkbox-Zeilen */
.rp .rp-confirm { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; font-size: 13.5px; line-height: 1.5; border-top: 1px solid var(--r2-border); }
.rp .rp-confirm:first-of-type { border-top: none; }
.rp .rp-confirm input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--r2-brand); }
.rp .rp-confirm label { cursor: pointer; }
.rp .rp-cta-row { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.rp .rp-cta-row .btn { flex: 1; min-width: 220px; }

/* Textarea */
.rp .rp-textarea { width: 100%; padding: 14px; border: 1.5px solid var(--r2-border); background: var(--r2-surface); border-radius: 0; font-family: inherit; font-size: 14.5px; line-height: 1.55; min-height: 140px; resize: vertical; color: var(--r2-text); }
.rp .rp-textarea:focus { border-color: var(--r2-brand); outline: none; }
.rp .rp-textarea-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--r2-text-muted); margin-top: 6px; margin-bottom: 8px; }
.rp .rp-textarea-meta .count.warn { color: var(--r2-warning); }

/* Pauschale-Modal (echtes Overlay) */
.rp .rp-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(20,24,28,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.rp .rp-modal-frame { max-width: 460px; width: 100%; background: var(--r2-surface); border-top: 4px solid var(--r2-warning); padding: 24px; }
.rp .rp-modal-frame .icon-warn { width: 44px; height: 44px; background: var(--r2-warning-light); color: var(--r2-warning); display: grid; place-items: center; font-weight: 700; font-size: 22px; margin-bottom: 14px; }
.rp .rp-modal-frame h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.005em; color: var(--r2-text); text-transform: none; }
.rp .rp-modal-frame p { margin: 0 0 18px; font-size: 14px; color: var(--r2-text-muted); }
.rp .rp-modal-frame .rp-cta-row { margin: 0; }

/* Ergebnis-State */
.rp .rp-result { border: 1px solid var(--r2-border); border-top: 3px solid var(--r2-border-strong); background: var(--r2-surface); padding: 28px; text-align: center; }
.rp .rp-result-icon { width: 56px; height: 56px; margin: 0 auto 14px; border: 2px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 26px; }
.rp .rp-result h3 { margin: 0 0 6px; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--r2-text); }
.rp .rp-result p { margin: 0 auto; max-width: 460px; color: var(--r2-text-muted); font-size: 14px; }
.rp .rp-result.is-ok { border-top-color: var(--r2-success); }
.rp .rp-result.is-ok .rp-result-icon { color: var(--r2-success); background: var(--r2-success-light); }
.rp .rp-result.is-info { border-top-color: var(--r2-accent-warm); }
.rp .rp-result.is-info .rp-result-icon { color: var(--r2-accent-warm-dark); background: var(--r2-accent-warm-light); }
.rp .rp-result.is-rejected { border-top-color: var(--r2-accent); }
.rp .rp-result.is-rejected .rp-result-icon { color: var(--r2-accent); background: var(--r2-accent-bg); }

@media (max-width: 720px) {
    .rp .rp-actions-block { padding: 20px; }
    .rp .rp-action-tabs { grid-template-columns: 1fr; }
    .rp .rp-action-tab { border-right: none; border-bottom: 1.5px solid var(--r2-border); }
    .rp .rp-action-tab:last-child { border-bottom: none; }
    .rp .rp-cta-row .btn { min-width: 0; }
}

/* Detailseite — Mobile */
@media (max-width: 900px) {
    .rp .rp-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .rp .rp-detail-header { grid-template-columns: 1fr; gap: 12px; }
    .rp .rp-detail-header h1 { font-size: 24px; }
    .rp .rp-detail-header .rp-detail-status { align-items: flex-start; }
    .rp .rp-spec-grid { grid-template-columns: 1fr; }
    /* Timeline horizontal scrollbar auf schmalen Screens */
    .rp .rp-timeline {
        display: flex; grid-template-columns: none; overflow-x: auto; gap: 0;
        padding: 18px 4px 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    }
    .rp .rp-timeline-step { flex: 0 0 84px; scroll-snap-align: start; }
    .rp .rp-timeline-step .label { max-width: none; }
}

/* ============================================================
   MEIN-KONTO REFRESH
   (account.php, account_history.php, account_history_info.php)
   Strikt aus account-refresh-v3.html. Mockup-Scope .shop-chrome.rp
   → hier .rp (Live-Shop). Nutzt die bestehenden .rp-Tokens/Klassen
   (.lede, .badge*, .rp-detail-header, .rp-contact-channels,
   .rp-filter, .rp-list-meta) wieder.
   ============================================================ */

/* Überschriften (geteilter .rp-Layer, gem. Mockup) */
.rp h2 { font-size: 22px; letter-spacing: -.01em; margin: 28px 0 16px; font-weight: 700; color: var(--r2-text); }
.rp h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--r2-text-muted); font-weight: 700; margin: 24px 0 12px; }
/* Weiche Block-Titel (Übersicht „Letzte Bestellungen" / „Meine Reparaturen") */
.rp .rp-block-title { font-size: 18px; text-transform: none; letter-spacing: -.005em; color: var(--r2-text); font-weight: 700; margin: 0; }
/* Leerwert in Tabellenzellen (kein Wert vorhanden) */
.rp .rp-empty { color: var(--r2-text-soft); font-size: 12px; }

/* Kopf account.php — Headline + Lede links, Kunden-Nr. rechts */
.rp .rp-account-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
    padding-bottom: 20px; border-bottom: 1px solid var(--r2-border);
}
.rp .rp-account-head h1 { margin: 0; }
.rp .rp-account-head .lede { margin: 6px 0 0; }
.rp .rp-account-head .customer-no {
    font-size: 12.5px; color: var(--r2-text-muted);
    text-align: right; font-variant-numeric: tabular-nums;
}
.rp .rp-account-head .customer-no strong {
    display: block; color: var(--r2-text); font-size: 16px;
    font-family: 'Roboto Mono', monospace; letter-spacing: -.005em; margin-top: 2px;
}

/* Rechnungs-Icon (PDF) in den Bestelltabellen */
.rp .rp-invoice-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--r2-brand); text-decoration: none;
    font-size: 12px; font-weight: 600; padding: 4px 8px;
    border: 1px solid var(--r2-brand-light); background: var(--r2-brand-tint);
}
.rp .rp-invoice-link:hover { background: var(--r2-brand); color: var(--r2-inverse); border-color: var(--r2-brand); }
.rp .rp-invoice-link svg { width: 13px; height: 13px; flex-shrink: 0; }

/* List-group (Konto-Menü account.php — Bootstrap-Mimik, scharfkantig).
   Fehlte bisher komplett → Menü fiel auf Shop-/Bootstrap-Default zurück. Aus dem Mockup portiert. */
.rp .list-group { display: flex; flex-direction: column; border: 1px solid var(--r2-border); background: var(--r2-surface); margin: 0 0 18px; }
.rp .list-group-item {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    border-bottom: 1px solid var(--r2-border); text-decoration: none;
    color: var(--r2-text); font-size: 14px; transition: all var(--r2-t-fast);
}
.rp .list-group-item:last-child { border-bottom: none; }
.rp .list-group-item-light { background: var(--r2-surface); }
.rp .list-group-item-action:hover { background: var(--r2-brand-tint); color: var(--r2-brand-dark); }
.rp .list-group-item-action::after {
    content: "\203A"; margin-left: auto; color: var(--r2-text-soft);
    font-size: 16px; line-height: 1; transition: transform var(--r2-t-fast);
}
.rp .list-group-item-action:hover::after { color: var(--r2-brand); transform: translateX(3px); }

/* Cards (Bestelldetail — Liefer-/Rechnungsadresse, Versand, Zahlung) */
.rp .card { background: var(--r2-surface); border: 1px solid var(--r2-border); border-radius: 0; }
.rp .card.bg-light { background: var(--r2-surface-alt); }
.rp .card-body { padding: 22px; }
.rp .card-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--r2-text-muted); font-weight: 700; margin: 0 0 10px; }
.rp .card-text { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.rp .card-text:last-child { margin-bottom: 0; }
.rp .card img { display: block; max-height: 28px; width: auto; margin-top: 8px; }
.rp .card-deck { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 18px; }
.rp .card-deck > .card { flex: 1 1 0; min-width: 240px; margin: 0; }

/* Bestell-Statusverlauf (account.php-Detail, additiv) */
.rp .rp-order-timeline {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 28px;
    border: 1px solid var(--r2-border); background: var(--r2-surface); padding: 22px 18px 18px;
}
.rp .rp-order-timeline-step {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    position: relative; text-align: center; font-size: 12.5px;
    color: var(--r2-text-soft); font-weight: 500;
}
.rp .rp-order-timeline-step .dot {
    width: 30px; height: 30px; background: var(--r2-surface);
    border: 1.5px solid var(--r2-border-strong); display: grid; place-items: center;
    font-weight: 700; font-size: 13px; color: var(--r2-text-soft); z-index: 2; position: relative;
}
.rp .rp-order-timeline-step .label { line-height: 1.3; max-width: 14ch; }
.rp .rp-order-timeline-step .stamp { color: var(--r2-text-soft); font-size: 11px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rp .rp-order-timeline-step:not(:last-child)::after {
    content: ""; position: absolute; top: 15px;
    left: calc(50% + 18px); right: calc(-50% + 18px);
    height: 1.5px; background: var(--r2-border-strong); z-index: 1;
}
.rp .rp-order-timeline-step.is-done { color: var(--r2-success); }
.rp .rp-order-timeline-step.is-done .dot { background: var(--r2-success); border-color: var(--r2-success); color: var(--r2-inverse); }
.rp .rp-order-timeline-step.is-done .dot::before {
    content: ""; width: 11px; height: 6px;
    border-left: 2px solid var(--r2-inverse); border-bottom: 2px solid var(--r2-inverse);
    transform: rotate(-45deg) translate(1px,-1px);
}
.rp .rp-order-timeline-step.is-done .dot span { display: none; }
.rp .rp-order-timeline-step.is-done:not(:last-child)::after { background: var(--r2-success); }
.rp .rp-order-timeline-step.is-active { color: var(--r2-brand); }
.rp .rp-order-timeline-step.is-active .dot {
    background: var(--r2-brand); border-color: var(--r2-brand); color: var(--r2-inverse);
    transform: scale(1.1); box-shadow: 0 0 0 4px var(--r2-brand-tint);
}
.rp .rp-order-timeline-step.is-active .label { font-weight: 700; color: var(--r2-text); }

/* Produkt-/Retouren-Zusammenfassung — Card-Frame um die Shop-.product-summary */
.rp .product-summary-wrap { border: 1px solid var(--r2-border); background: var(--r2-surface); margin-bottom: 18px; }
.rp .product-summary-wrap-head {
    padding: 14px 22px; background: var(--r2-surface-alt); border-bottom: 1px solid var(--r2-border);
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--r2-text-muted); font-weight: 700;
}
/* Retouren-Vorgangskopf (Vorgangs-Nr. + Status-Badges + Datum, nicht uppercase) */
.rp .product-summary-wrap-head.rp-return-head {
    display: flex; align-items: center; gap: 12px; text-transform: none; letter-spacing: normal; font-weight: 400;
}
.rp .product-summary-wrap-head.rp-return-head .rp-return-no { color: var(--r2-text); font-size: 14px; font-weight: 600; }
.rp .product-summary-wrap-head.rp-return-head .rp-return-date { margin-left: auto; color: var(--r2-text-muted); }
.rp .product-summary-wrap .rp-return-empty { color: var(--r2-text-muted); font-style: italic; }

.rp .product-summary { list-style: none; padding: 0; margin: 0; font-variant-numeric: tabular-nums; }
.rp .product-summary > li {
    display: flex; justify-content: space-between; gap: 18px; align-items: start;
    padding: 16px 22px; border-bottom: 1px solid var(--r2-border);
}
.rp .product-summary > li:last-child { border-bottom: none; }
.rp .product-summary + .product-summary > li { padding: 6px 22px; border-bottom: none; font-size: 14px; color: var(--r2-text-muted); }
.rp .product-summary .product-summary-title { flex: 1; min-width: 0; }
.rp .product-summary .product-summary-title a { color: var(--r2-text); text-decoration: none; font-weight: 500; }
.rp .product-summary .product-summary-title a:hover { color: var(--r2-brand); }
.rp .product-summary .product-summary-title p { margin: 4px 0 0; font-size: 12.5px; color: var(--r2-text-muted); }
.rp .product-summary .product-summary-text { flex: 0 0 140px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; }
.rp .product-summary .product-summary-text .tax-info { display: block; font-size: 11px; font-weight: 400; color: var(--r2-text-muted); margin-top: 2px; }
.rp .product-summary + .product-summary > li.subtotal { border-top: 1px dashed var(--r2-border); margin-top: 4px; padding-top: 10px; color: var(--r2-text); }
.rp .product-summary + .product-summary > li.total {
    border-top: 2px solid var(--r2-text); margin-top: 6px; padding-top: 14px; padding-bottom: 8px;
    font-size: 18px; font-weight: 700; letter-spacing: -.005em; color: var(--r2-text);
}
.rp .product-summary + .product-summary > li.total .product-summary-text { font-size: 18px; font-weight: 700; }
.rp .product-summary-wrap > .product-summary + .product-summary { padding-bottom: 8px; }

/* ============================================================
   FORMULAR-SEITEN
   (account_edit, account_password, account_newsletters,
    account_delete, address_book, address_book_process)
   Layout: Bootstrap-Horizontal-Form (label links, input rechts) wird
   zu vertikalem Label-über-Input umgebogen — identisch mit repair_2026.
   ============================================================ */

/* --- Bootstrap-Horizontal-Layout → vertikal umbiegen --- */
/* .form-group.row wird zur normalen Block-Gruppe */
.rp .form-group.row {
    display: block;
    margin-left: 0; margin-right: 0;
    margin-bottom: 18px;
}
/* Alle Spalten im Formular volle Breite, kein Gutter */
.rp .form-group.row > [class*="col"] {
    flex: none; max-width: 100%; width: 100%;
    padding-left: 0; padding-right: 0;
}
/* Label steht jetzt über dem Input */
.rp .col-form-label {
    display: block; float: none;
    font-size: 13px; font-weight: 600; color: var(--r2-text);
    padding: 0 0 6px; margin: 0;
    width: auto; max-width: none;
}
/* Submit-/Zurück-Zeile bleibt flex (Buttons nebeneinander) */
.rp .form-group.row:has(.btn) {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-top: 24px;
}
.rp .form-group.row:has(.btn) > [class*="col"] {
    flex: 0 0 auto; width: auto;
}

/* --- Inputs / Selects / Textareas — wie .r2-input --- */
.rp .form-control {
    padding: 11px 14px; border: 1.5px solid var(--r2-border); background: var(--r2-surface);
    font-family: inherit; font-size: 15px; color: var(--r2-text); border-radius: 0;
    width: 100%; display: block;
    transition: border-color var(--r2-t-fast);
}
.rp .form-control:hover { border-color: var(--r2-border-strong); }
.rp .form-control:focus { outline: none; border-color: var(--r2-brand); box-shadow: none; }
.rp .form-control::placeholder { color: var(--r2-text-soft); }

/* select: eigener Chevron, Text wird nicht abgeschnitten */
.rp select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236B7280' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center;
    padding-right: 38px; padding-top: 0; padding-bottom: 0; cursor: pointer;
}

/* Pflichtfeld-Stern */
.rp .required { color: var(--r2-accent); }
/* Optionaler Hinweis neben dem Label — analog .r2-hint */
.rp .col-form-label .hint { color: var(--r2-text-muted); font-weight: 400; margin-left: 6px; font-size: 12px; }

/* --- Fieldset-Card (account_edit, address_book_process) --- */
.rp fieldset {
    border: 1px solid var(--r2-border); padding: 28px 28px 10px;
    background: var(--r2-surface); margin-bottom: 0;
}
.rp fieldset legend {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--r2-text-muted); font-weight: 700;
    padding: 0 8px; width: auto; background: var(--r2-surface);
}
/* Formular-Card-Wrapper (Fieldset + Submit als zusammengehörige Einheit) */
.rp .form-sections {
    border: 1px solid var(--r2-border); background: var(--r2-surface); margin-bottom: 28px;
}
.rp .form-sections fieldset {
    border: none; border-bottom: 1px solid var(--r2-border);
    margin: 0; padding: 28px;
}
.rp .form-sections fieldset:last-of-type { border-bottom: none; }
/* Submit-Zeile am unteren Rand der Card */
.rp .form-sections > .form-group.row:last-child {
    padding: 18px 28px;
    background: var(--r2-surface-alt);
    border-top: 1px solid var(--r2-border);
    margin: 0;
}

/* --- Fehler-State --- */
.rp .has-error .form-control { border-color: var(--r2-accent); background: var(--r2-error-bg); }

/* --- Checkbox-Zeilen (Standard, nicht-inline) --- */
.rp .form-check { display: flex; align-items: center; gap: 10px; padding: 12px 0; min-height: 0; }

/* Bootstrap overrides: position/opacity/margin auf Inputs neutralisieren */
.rp .form-check-input,
.rp input[type="checkbox"],
.rp input[type="radio"] {
    position: static !important; margin: 0 !important; opacity: 1 !important;
    width: 18px !important; height: 18px !important;
    flex-shrink: 0; accent-color: var(--r2-brand); cursor: pointer; vertical-align: middle;
}
.rp .form-check-label { font-size: 14px; color: var(--r2-text); cursor: pointer; line-height: 1.4; margin: 0; }
.rp .help-text { font-size: 13px; color: var(--r2-text-muted); margin-top: 4px; }

/* --- Anrede-Radios als Pills (analog .r2-gender-pill) --- */
.rp .form-check.form-check-inline {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; margin-right: 8px; margin-bottom: 4px;
    border: 1.5px solid var(--r2-border); background: var(--r2-surface);
    transition: all var(--r2-t-fast); cursor: pointer;
    font-size: 14px; font-weight: 600; color: var(--r2-text);
}
.rp .form-check.form-check-inline:hover { border-color: var(--r2-brand); background: var(--r2-brand-tint); }
.rp .form-check.form-check-inline:has(input:checked) {
    border-color: var(--r2-brand); background: var(--r2-brand-light); color: var(--r2-brand-dark);
}
/* Wrapper für Inline-Radios: flex statt Block */
.rp .col:has(> .form-check-inline),
.rp div:has(> .form-check-inline) { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding-top: 4px; }

/* --- Checkbox-Optionszeile (Hauptadresse-Toggles) --- */
.rp .rp-option-check {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border: 1.5px solid var(--r2-border); border-radius: 6px;
    background: var(--r2-surface); cursor: pointer; transition: all var(--r2-t-fast);
    font-size: 14px; color: var(--r2-text); line-height: 1.4;
}
.rp .rp-option-check:hover { border-color: var(--r2-brand); background: var(--r2-brand-tint); }
.rp .rp-option-check:has(input:checked) { border-color: var(--r2-brand); background: var(--r2-brand-light); }

/* --- Adresstyp-Toggle (Wunschadresse / Packstation) --- */
.rp .rp-address-type-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.rp .rp-address-type-pill {
    display: block; padding: 10px 14px; border: 1.5px solid var(--r2-border); border-radius: 6px;
    background: var(--r2-surface); text-align: left; transition: all var(--r2-t-fast); cursor: pointer; font-family: inherit;
}
.rp .rp-address-type-pill input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.rp .rp-address-type-pill:hover { border-color: var(--r2-brand); background: var(--r2-brand-tint); }
.rp .rp-address-type-pill.is-selected { border-color: var(--r2-brand); background: var(--r2-brand-light); }
.rp .rp-address-type-pill .type-title { font-weight: 700; font-size: 15px; display: block; }
.rp .card-header { padding: 14px 18px; background: var(--r2-surface-alt); border-bottom: 1px solid var(--r2-border); }
.rp .card-header h3 { font-size: 15px; text-transform: none; letter-spacing: normal; color: var(--r2-text); font-weight: 700; margin: 0; }
.rp .card-footer { padding: 14px 18px; background: var(--r2-surface-alt); border-top: 1px solid var(--r2-border); }
.rp .btn-outline-danger { background: transparent; color: var(--r2-accent); border-color: var(--r2-accent); }
.rp .btn-outline-danger:hover { background: var(--r2-accent-bg); }
.rp .btn-danger { background: var(--r2-accent); color: var(--r2-inverse); border-color: var(--r2-accent); }
.rp .btn-danger:hover { background: #c0051a; border-color: #c0051a; }

/* Mein-Konto Refresh — Mobile */
@media (max-width: 720px) {
    .rp .rp-account-head { flex-direction: column; align-items: flex-start; }
    .rp .rp-account-head .customer-no { text-align: left; }
    .rp h2 { font-size: 18px; }
    .rp .card-deck > .card { flex: 1 1 100%; }
    .rp .product-summary > li { flex-direction: column; gap: 6px; }
    .rp .product-summary .product-summary-text { flex: 0 0 auto; text-align: left; }
    .rp .product-summary + .product-summary > li { flex-direction: row; }
    .rp .product-summary + .product-summary > li .product-summary-text { text-align: right; }
    .rp .rp-order-timeline {
        display: flex; grid-template-columns: none; overflow-x: auto; gap: 0;
        padding: 18px 4px 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    }
    .rp .rp-order-timeline-step { flex: 0 0 84px; scroll-snap-align: start; }
    .rp .rp-order-timeline-step .label { max-width: none; font-size: 11.5px; }
    .rp .rp-order-timeline::-webkit-scrollbar { height: 5px; }
    .rp .rp-order-timeline::-webkit-scrollbar-thumb { background: var(--r2-border-strong); border-radius: 3px; }
}

/* Modifier: kein Padding im Pane (account_delete, account_password, account_edit) */
.repair-2026 .r2-pane--bare { padding: 0; }