/**
 * Checkout Wizard Styles
 * Multi-Step Checkout with Progress Stepper and Floating Labels
 *
 * Architecture: ~/.claude/session-memory/jkr-shop/checkout-dynamic-config-architecture.md
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
:root {
    /* Brand-Farbe kommt pro Site aus --bs-primary (Coop-Themes setzen sie via
       cssInline auf :root); Fallback Schwarz = JKR24-Referenzdesign */
    --checkout-primary: var(--bs-primary, #000000);
    --checkout-primary-hover: color-mix(in srgb, var(--bs-primary, #000000) 80%, #ffffff);
    --checkout-success: #198754;
    --checkout-success-light: #d1e7dd;
    --checkout-gray-100: #f8f9fa;
    --checkout-gray-200: #e9ecef;
    --checkout-gray-300: #dee2e6;
    /* Was used (checkbox borders) but never defined until 13.10.2026 */
    --checkout-gray-400: #ced4da;
    --checkout-gray-500: #adb5bd;
    --checkout-gray-600: #6c757d;
    --checkout-gray-800: #343a40;
    --checkout-border-radius: 0.5rem;
    --checkout-transition: 0.2s ease-in-out;
    /* JKR Font */
    --checkout-font-family: 'elza', sans-serif;
}

/* Apply JKR font to all checkout elements */
.checkout-wizard,
.checkout-wizard * {
    font-family: var(--checkout-font-family);
}

/* ==========================================================================
   Progress Stepper
   ========================================================================== */
.checkout-stepper {
    position: sticky;
    /* Offset = Höhe der sticky Site-Navbar, wird via JS gesetzt */
    top: var(--checkout-stepper-offset, 0px);
    margin-bottom: 2rem;
    padding: 1rem 0;
    background: white;
    /* Unter der Bootstrap sticky-top Navbar (z-index 1020) bleiben */
    z-index: 1010;
    transition: box-shadow 0.2s ease;
}

/* Schatten nur, wenn der Stepper tatsächlich "klebt" (via JS getoggelt) */
.checkout-stepper.is-stuck {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mobil: Stepper-Box exakt so breit wie das Checkout-Formular */
@media (max-width: 768px) {
    .checkout-stepper {
        margin: 0 0 1.5rem 0;
        padding: 0.75rem 1rem;
    }
}

.stepper-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
}

.stepper-item {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
}

.stepper-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: default;
    width: 100%;
}

.stepper-button--clickable {
    cursor: pointer;
}

.stepper-button--clickable:hover .stepper-number {
    transform: scale(1.1);
}

.stepper-number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    transition: all var(--checkout-transition);
    background: var(--checkout-gray-200);
    color: var(--checkout-gray-600);
    border: 2px solid var(--checkout-gray-300);
}

.stepper-check {
    width: 1.25rem;
    height: 1.25rem;
}

.stepper-label {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--checkout-gray-600);
    text-align: center;
    white-space: nowrap;
}

/* Stepper States */
.stepper-item--current .stepper-number {
    background: var(--checkout-primary);
    color: white;
    border-color: var(--checkout-primary);
}

.stepper-item--current .stepper-label {
    color: var(--checkout-primary);
    font-weight: 600;
}

.stepper-item--completed .stepper-number {
    background: var(--checkout-success);
    color: white;
    border-color: var(--checkout-success);
}

.stepper-item--completed .stepper-label {
    color: var(--checkout-success);
}

/* Connector Line */
.stepper-connector {
    flex: 1;
    height: 2px;
    background: var(--checkout-gray-300);
    margin: 0 0.5rem;
    position: relative;
    top: -0.75rem;
}

.stepper-item--completed + .stepper-item .stepper-connector,
.stepper-item--completed .stepper-connector {
    background: var(--checkout-success);
}

/* Kompakte Mobil-Ansicht: Kreis mit "x/y" + Name des aktuellen Schritts */
.stepper-mobile {
    display: none;
    align-items: center;
    gap: 0.75rem;
}

.stepper-mobile-circle {
    flex-shrink: 0;
    position: relative;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    background: var(--checkout-primary);
    color: white;
    /* Weißer Abstand zwischen Kreis und Fortschrittsring */
    box-shadow: 0 0 0 3px white;
    /* Etwas Luft, damit der Ring nicht am Nav-Rand klebt */
    margin: 4px;
}

/* Fortschrittsring: Füllstand via --stepper-progress (z.B. 25% bei Schritt 1/4) */
.stepper-mobile-circle::before {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    background: conic-gradient(
        var(--checkout-primary) var(--stepper-progress, 0%),
        var(--checkout-gray-300) 0
    );
    z-index: -1;
}

.stepper-mobile-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--checkout-primary);
}

/* Unter 1100 px der Kreis (Fassung C, 21.10.2026; vorher erst unter
   768 px). Die Liste erscheint nur aufgeklappt, senkrecht - Regeln unten
   beim Seitenaufbau. */
@media (max-width: 1099px) {
    .stepper-list {
        display: none;
    }

    .checkout-stepper.liste-offen .stepper-list {
        display: flex;
    }

    .stepper-mobile {
        display: flex;
    }
}
/* ==========================================================================
   Checkout Steps
   ========================================================================== */
.checkout-step {
    background: white;
    border-radius: var(--checkout-border-radius);
    padding: 2rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.checkout-step__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--checkout-gray-200);
}

.checkout-step__subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--checkout-primary);
    margin: 2.5rem 0 1.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--checkout-gray-200);
}

/* First subtitle doesn't need top border */
.checkout-step__subtitle:first-of-type,
.customer-type-selection + .selfemployed-business-section .checkout-step__subtitle,
.customer-type-selection + .company-fields-section .checkout-step__subtitle {
    border-top: none;
    padding-top: 0;
    margin-top: 1.5rem;
}

.checkout-step__navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--checkout-gray-200);
}

/* Back link as text */
.checkout-back-link {
    color: var(--checkout-gray-600);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--checkout-transition);
}

.checkout-back-link:hover {
    color: var(--checkout-primary);
    text-decoration: underline;
}

/* ==========================================================================
   Floating Labels Enhancement
   ========================================================================== */
.form-floating-wrapper {
    position: relative;
}

.form-floating-wrapper.is-required .form-control:not(:focus):invalid {
    border-color: var(--checkout-gray-300);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--checkout-primary);
}

.form-floating > .form-control:focus {
    border-color: var(--checkout-primary);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

.required-indicator {
    color: #dc3545;
    margin-left: 0.25rem;
}

/* ==========================================================================
   Customer Type Selection
   ========================================================================== */
.customer-type-selection .btn-group {
    display: flex;
    gap: 0;
}

.customer-type-selection .btn-check:checked + .btn-outline-primary {
    background-color: var(--checkout-primary);
    border-color: var(--checkout-primary);
    color: white;
}

.customer-type-selection .btn-outline-primary {
    flex: 1;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: var(--checkout-primary);
    color: var(--checkout-primary);
}

.customer-type-selection .btn-outline-primary:hover {
    background-color: var(--checkout-gray-100);
}

/* ==========================================================================
   Info Text Styles
   ========================================================================== */
.info-text-trigger {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--checkout-gray-500);
    transition: color var(--checkout-transition);
}

.info-text-trigger:hover {
    color: var(--checkout-primary);
}

.info-text-trigger--afterLabel {
    position: absolute;
    right: 2.5rem;
    top: 2.5rem;
    transform: none;
}

/* Hide info triggers on select fields to avoid double icon */
.checkout-wizard .form-floating-wrapper:has(.form-select) .info-text-trigger {
    display: none;
}

.info-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.info-text-inline {
    font-size: 0.875rem;
    color: var(--checkout-gray-600);
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--checkout-gray-100);
    border-radius: 0.25rem;
}

/* ==========================================================================
   IBAN Field with Lookup Status
   ========================================================================== */
.iban-field-wrapper {
    position: relative;
}

.iban-lookup-status {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    color: var(--checkout-gray-600);
}

/* ==========================================================================
   Readonly Fields (BIC, Bankname) - Dezenter Style
   ========================================================================== */
.form-control[readonly],
.form-control.readonly-field {
    background-color: var(--checkout-gray-100);
    border-color: var(--checkout-gray-200);
    color: var(--checkout-gray-600);
    cursor: default;
}

.form-control[readonly]:focus,
.form-control.readonly-field:focus {
    border-color: var(--checkout-gray-200);
    box-shadow: none;
}

/* Floating label adjustment for readonly fields */
.form-floating > .form-control[readonly] ~ label,
.form-floating > .form-control.readonly-field ~ label {
    color: var(--checkout-gray-500);
}

/* Auto-filled indicator icon */
.readonly-field-wrapper {
    position: relative;
}

.readonly-field-wrapper::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* ==========================================================================
   MNP Selection Styles - Simple Radio Buttons
   ========================================================================== */
.mnp-selection-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6 !important;
    border-top-color: #dee2e6 !important;
}

.mnp-options {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.mnp-options .form-check {
    margin-bottom: 0;
    padding-left: 1.75rem;
}

.mnp-options .form-check-input:checked ~ .form-check-label {
    font-weight: 500;
}

/* Label colors - black for all */
.mnp-options .form-check-label,
.checkout-wizard .mnp-options .form-check-label {
    color: var(--checkout-gray-800) !important;
    font-size: 1rem;
}

/* Custom radio button - Black instead of green/blue */
.mnp-options .form-check-input {
    border-color: var(--checkout-gray-300) !important;
}

.mnp-options .form-check-input:checked {
    background-color: var(--checkout-primary) !important;
    border-color: var(--checkout-primary) !important;
}

.mnp-options .form-check-input:focus {
    border-color: var(--checkout-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15) !important;
}

/* Override global form-check styles for MNP section */
.checkout-wizard .mnp-options .form-check-input[type="radio"]:checked {
    background-color: var(--checkout-primary) !important;
    border-color: var(--checkout-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* Mobile: Stack vertically */
@media (max-width: 576px) {
    .mnp-options {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ==========================================================================
   MNP Step Styles
   ========================================================================== */
.checkout-step--mnp .mnp-info-box .alert {
    border-left: 4px solid #0dcaf0;
}

/* Simple radio layout - no boxes */
.mnp-timing-options .form-check {
    padding-left: 1.75rem;
    margin-bottom: 0;
}

/* Radio buttons - black instead of blue/green */
.mnp-timing-options .form-check-input {
    border-color: var(--checkout-gray-400) !important;
}

.mnp-timing-options .form-check-input:checked {
    background-color: var(--checkout-primary) !important;
    border-color: var(--checkout-primary) !important;
}

.mnp-timing-options .form-check-input:focus {
    border-color: var(--checkout-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15) !important;
}

/* Labels - black instead of green */
.mnp-timing-options .form-check-label,
.mnp-timing-options .form-check-label strong {
    color: var(--checkout-gray-800) !important;
}

/* MNP consent checkbox - black instead of blue */
.mnp-consent .form-check-input {
    border-color: var(--checkout-gray-400) !important;
}

.mnp-consent .form-check-input:checked {
    background-color: var(--checkout-primary) !important;
    border-color: var(--checkout-primary) !important;
}

.mnp-consent .form-check-input:focus {
    border-color: var(--checkout-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   Review Section
   ========================================================================== */
.review-section {
    background: var(--checkout-gray-100);
    border-radius: var(--checkout-border-radius);
    padding: 1.5rem;
}

.review-section__header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--checkout-gray-200);
}

.review-section__title {
    font-size: 1.125rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.review-row {
    display: flex;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--checkout-gray-200);
}

.review-row:last-child {
    border-bottom: none;
}

.review-label {
    flex: 0 0 140px;
    font-weight: 500;
    color: var(--checkout-gray-600);
}

.review-value {
    flex: 1;
}

/* ==========================================================================
   SEPA Info Box - Minimal Black/White Design
   ========================================================================== */
.checkout-wizard .alert-info,
.checkout-wizard .sepa-info-box .alert {
    background-color: #ffffff;
    border: 1px solid var(--checkout-gray-300);
    border-left: 3px solid var(--checkout-primary);
    color: var(--checkout-gray-800);

    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-left-width: 6px;
}

.checkout-wizard .alert-info svg,
.checkout-wizard .sepa-info-box svg {
    stroke: var(--checkout-primary);
}

/* ==========================================================================
   Edit Links in Review Section
   ========================================================================== */
.checkout-edit-link {
    color: var(--checkout-gray-600);
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    transition: color var(--checkout-transition);
}

.checkout-edit-link:hover {
    color: var(--checkout-primary);
    text-decoration: underline;
}

.checkout-edit-link svg {
    stroke: currentColor;
}

/* ==========================================================================
   Global Checkbox Styling - Black instead of Blue/Green
   ========================================================================== */
.checkout-wizard .form-check-input {
    border-color: var(--checkout-gray-400);
}

.checkout-wizard .form-check-input:checked {
    background-color: var(--checkout-primary);
    border-color: var(--checkout-primary);
}

.checkout-wizard .form-check-input:focus {
    border-color: var(--checkout-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
}

/* Checkbox checked state - ensure black background with white checkmark */
.checkout-wizard .form-check-input[type="checkbox"]:checked {
    background-color: var(--checkout-primary);
    border-color: var(--checkout-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* Radio checked state - ensure black background */
.checkout-wizard .form-check-input[type="radio"]:checked {
    background-color: var(--checkout-primary);
    border-color: var(--checkout-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

/* Override Bootstrap's :valid and :invalid states that add green/red */
.checkout-wizard .form-check-input:valid,
.checkout-wizard .form-check-input.is-valid {
    border-color: var(--checkout-gray-400);
}

.checkout-wizard .form-check-input:valid:checked,
.checkout-wizard .form-check-input.is-valid:checked {
    background-color: var(--checkout-primary);
    border-color: var(--checkout-primary);
}

/* Invalid state should be red for error indication - but only after a
   check (.is-invalid / .was-validated). Until 21.10.2026 plain :invalid
   painted every unticked required box (SEPA, Datenschutz, AGB) red before
   anyone touched it (Baymard 2024: no premature errors; same fix as in
   Formular.css). */
.checkout-wizard .was-validated .form-check-input:invalid,
.checkout-wizard .form-check-input.is-invalid {
    border-color: #dc3545;
}

.checkout-wizard .form-check-input:invalid:not(.is-invalid) {
    border-color: var(--checkout-gray-400);
}

.checkout-wizard .was-validated .form-check-input:invalid {
    border-color: #dc3545;
}

/* Labels should always be black/dark gray */
.checkout-wizard .form-check-label {
    color: var(--checkout-gray-800);
}

/* ==========================================================================
   Consent Section (Datenschutz / AGB / Widerruf)
   Links inside checked labels inherited a low-contrast yellow from the
   site-wide link color. Force a readable, underlined dark link with a
   distinct hover state regardless of checkbox state.
   ========================================================================== */
.consent-section .form-check-label {
    color: var(--checkout-gray-800);
}

.consent-section .form-check-label a {
    color: var(--checkout-primary, #000);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

.consent-section .form-check-label a:hover,
.consent-section .form-check-label a:focus {
    color: var(--checkout-primary-hover, #333);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.consent-section .form-check-input:checked ~ .form-check-label a {
    color: var(--checkout-primary, #000);
}

.consent-section .required-indicator {
    color: #dc3545;
    margin-left: 0.15rem;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */
.checkout-submit {
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
}

/* ==========================================================================
   Validation Styles
   ========================================================================== */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--checkout-success);
}

.invalid-feedback {
    display: none;
    font-size: 0.875rem;
    color: #dc3545;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-feedback,
.invalid-feedback.is-visible {
    display: block;
}

/* ==========================================================================
   Step Animation
   ========================================================================== */
.checkout-step {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.checkout-step--hidden {
    display: none;
}

.checkout-step--animating {
    opacity: 0;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    .checkout-step {
        padding: 1rem;
    }

    .checkout-step__navigation {
        flex-direction: column-reverse;
    }

    .checkout-step__navigation .btn {
        width: 100%;
    }

    .review-row {
        flex-direction: column;
    }

    .review-label {
        flex: none;
        margin-bottom: 0.25rem;
    }
}

/* ==========================================================================
   JKR Form Field Styling - Top-Aligned Labels (B2B Best Practice)
   ========================================================================== */

/* Labels above fields */
.checkout-wizard .form-floating {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

/* Label styling - above field */
.checkout-wizard .form-floating > label {
    position: relative !important;
    transform: none !important;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--checkout-gray-600);
    margin-top: 0;
    margin-bottom: 0.25rem;
    display: block;
    opacity: 1 !important;
    padding: 0;
    height: auto !important;
    width: auto;
    border: none;
    background: transparent;
    white-space: normal;
    overflow: visible;
    order: -1;
}

/* Add spacing between form groups */
.checkout-wizard .form-floating-wrapper {
    margin-bottom: 1.25rem;
}

/* Remove floating behavior */
.checkout-wizard .form-floating > .form-control,
.checkout-wizard .form-floating > .form-select {
    height: auto;
    padding: 0.75rem 1rem;
    min-height: 0;
}

.checkout-wizard .form-floating > .form-control::placeholder {
    color: var(--checkout-gray-500);
    opacity: 1;
}

/* Input field styling */
.checkout-wizard .form-control,
.checkout-wizard .form-select {
    border-color: var(--checkout-gray-300);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: border-color var(--checkout-transition), box-shadow var(--checkout-transition);
}

.checkout-wizard .form-control:focus,
.checkout-wizard .form-select:focus {
    border-color: var(--checkout-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
}

/* Label color on focus */
.checkout-wizard .form-floating:focus-within > label {
    color: var(--checkout-primary);
}

/* Date input label - same styling as other labels */
.checkout-wizard .form-floating > input[type="date"] ~ label,
.checkout-wizard input[type="date"] + label {
    font-size: 0.875rem;
}

/* Required indicator styling */
.checkout-wizard .required-indicator {
    color: #dc3545;
    margin-left: 0.25rem;
}

/* JKR Button Styling */
.checkout-wizard .btn-primary {
    background-color: var(--checkout-primary);
    border-color: var(--checkout-primary);
    color: white;
    font-weight: 400;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
}

.checkout-wizard .btn-primary:hover,
.checkout-wizard .btn-primary:focus {
    background-color: var(--checkout-primary-hover);
    border-color: var(--checkout-primary-hover);
    color: #ffffff !important;
}

.checkout-wizard .btn-outline-secondary {
    border-color: var(--checkout-gray-300);
    color: var(--checkout-gray-800);
}

.checkout-wizard .btn-outline-secondary:hover {
    background-color: var(--checkout-gray-100);
    border-color: var(--checkout-gray-300);
    color: var(--checkout-gray-800);
}

.checkout-wizard .btn-success {
    background-color: var(--checkout-primary);
    border-color: var(--checkout-primary);
    color: #ffffff !important;
}

.checkout-wizard .btn-success:hover {
    background-color: var(--checkout-primary-hover);
    border-color: var(--checkout-primary-hover);
    color: #ffffff !important;
}

/* Country Field Disabled Style */
.checkout-wizard .form-select:disabled,
.checkout-wizard .form-control:disabled {
    background-color: var(--checkout-gray-100);
    opacity: 1;
    cursor: not-allowed;
}

/* ==========================================================================
   Review Step - Product Cards (Warenkorb Style)
   ========================================================================== */

/* Product Card Container */
.checkout-wizard .review-product-card {
    background: #ffffff;
    border: 1px solid var(--checkout-gray-200);
    border-radius: 8px;
    overflow: hidden;
}

/* Product Image */
.checkout-wizard .review-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    background: var(--checkout-gray-100);
    /* Removed max-width to let Bootstrap col-3 handle width */
}

.checkout-wizard .review-product-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.checkout-wizard .review-product-image .img-placeholder {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--checkout-gray-200);
    border-radius: 4px;
    color: var(--checkout-gray-400);
}

/* Product Details */
.checkout-wizard .review-product-details {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Product Header */
.checkout-wizard .review-product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.checkout-wizard .review-product-title {
    flex: 1;
    min-width: 0;
}

.checkout-wizard .review-product-qty {
    font-weight: 400;
    color: var(--checkout-gray-600);
    margin-right: 0.25rem;
}

.checkout-wizard .review-product-name {
    font-weight: 400;
    color: var(--checkout-gray-900);
    font-size: 1rem;
    line-height: 1.4;
}

/* Product Prices */
.checkout-wizard .review-product-prices {
    text-align: right;
    flex-shrink: 0;
    margin-left: 1rem;
}

.checkout-wizard .review-product-price-onetime {
    font-weight: 400;
    color: var(--checkout-gray-900);
    font-size: 1rem;
}

.checkout-wizard .review-product-price-monthly {
    font-weight: 400;
    color: var(--checkout-gray-600);
    font-size: 1rem;
}

/* Detail Rows */
.checkout-wizard .review-product-detail-rows {
    border-top: 1px solid var(--checkout-gray-200);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
}

.checkout-wizard .review-product-detail-row {
    display: flex;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.checkout-wizard .review-product-detail-row:last-child {
    margin-bottom: 0;
}

.checkout-wizard .review-product-detail-label {
    color: var(--checkout-gray-500);
    min-width: 50px;
    margin-right: 0.5rem;
}

.checkout-wizard .review-product-detail-value {
    color: var(--checkout-gray-700);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Provider Logo - Uses same CSS as Warenkorb bundle-card-provider-logo */
.checkout-wizard .review-product-provider-logo {
    display: inline-block;
    width: 20px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Vodafone Logo - Correct SVG from shop-warenkorb.scss */
.checkout-wizard .review-product-provider-logo[data-provider="VODAFONE"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='40'%3E%3Cdefs%3E%3CclipPath id='vf'%3E%3Cpath fill='none' d='M0 0h27.585v27.666H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cg fill='%23fff' stroke='%23E70001' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h33a10 10 0 0 1 10 10v30H10A10 10 0 0 1 0 30V0Z'/%3E%3Cpath fill='none' d='M1.5 1.5H33a8.5 8.5 0 0 1 8.5 8.5v28.5H10A8.5 8.5 0 0 1 1.5 30V1.5Z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg clip-path='url(%23vf)' transform='translate(7.708 6.167)'%3E%3Cpath fill='%23E70001' d='M8.708.967a13.783 13.783 0 0 1 10.886.319 9.152 9.152 0 0 0-2.893.125 14.007 14.007 0 0 0-6.966 3.513 12 12 0 0 0-3.5 6.784 9.44 9.44 0 0 0 .8 5.389A8.031 8.031 0 0 0 11.149 21a7.376 7.376 0 0 0 10.174-6.253A7.016 7.016 0 0 0 19.8 9.606a8.645 8.645 0 0 0-4.572-2.541 5.6 5.6 0 0 1 1.956-4.435 6.164 6.164 0 0 1 2.458-1.286l.068-.023a13.971 13.971 0 0 1 6.126 5.743 13.67 13.67 0 0 1 1.747 6.989A13.79 13.79 0 0 1 8.139 26.459a13.858 13.858 0 0 1-6.361-5.807A13.7 13.7 0 0 1 0 13.663a13.715 13.715 0 0 1 2.965-8.414A13.854 13.854 0 0 1 8.708.967Z'/%3E%3Cpath fill='%23fff' d='M16.701 1.411a9.152 9.152 0 0 1 2.893-.125l.138.023-.092.035a6.166 6.166 0 0 0-2.458 1.288 5.6 5.6 0 0 0-1.956 4.435 8.645 8.645 0 0 1 4.572 2.541 7.016 7.016 0 0 1 1.526 5.14 7.377 7.377 0 0 1-10.174 6.253 8.031 8.031 0 0 1-4.111-3.9 9.44 9.44 0 0 1-.8-5.389 12 12 0 0 1 3.5-6.784 14.006 14.006 0 0 1 6.962-3.517Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* O2 Logo - Correct SVG from shop-warenkorb.scss */
.checkout-wizard .review-product-provider-logo[data-provider="O2"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='40'%3E%3Cdefs%3E%3CclipPath id='o2'%3E%3Cpath fill='none' d='M0 0h26.844v27.684H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cg fill='%23fff' stroke='%230050FF' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h33a10 10 0 0 1 10 10v30H10A10 10 0 0 1 0 30V0Z'/%3E%3Cpath fill='none' d='M1.5 1.5H33a8.5 8.5 0 0 1 8.5 8.5v28.5H10A8.5 8.5 0 0 1 1.5 30V1.5Z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg clip-path='url(%23o2)' transform='translate(8.078 6.158)'%3E%3Cpath fill='%230050FF' d='M13.422 27.684a13.422 13.422 0 1 1 13.422-13.422 13.437 13.437 0 0 1-13.422 13.422m0-20.607a7.185 7.185 0 1 0 7.185 7.185 7.193 7.193 0 0 0-7.185-7.185'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Freenet Logo - Correct SVG from shop-warenkorb.scss */
.checkout-wizard .review-product-provider-logo[data-provider="FREENET"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='40'%3E%3Cg fill='%23fff' stroke='%2321314D' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h33a10 10 0 0 1 10 10v30H10A10 10 0 0 1 0 30V0Z'/%3E%3Cpath fill='none' d='M1.5 1.5H33a8.5 8.5 0 0 1 8.5 8.5v28.5H10A8.5 8.5 0 0 1 1.5 30V1.5Z'/%3E%3C/g%3E%3Ctext fill='%2321314D' x='21.5' y='27' text-anchor='middle' font-family='Arial-BoldMT, Arial' font-size='20' font-weight='700'%3EFN%3C/text%3E%3C/svg%3E");
}

/* Telekom Logo - official "T" glyph, same SVG as shop-warenkorb.scss */
.checkout-wizard .review-product-provider-logo[data-provider="TELEKOM"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 43 40'%3E%3Cg data-name='Gruppe 1683'%3E%3Cg data-name='Gruppe 1680'%3E%3Cg data-name='Gruppe 159'%3E%3Cg fill='%23fff' stroke='%23e20175' stroke-width='3' data-name='Rechteck 158'%3E%3Cpath stroke='none' d='M0 0h33a10 10 0 0 1 10 10v30H10A10 10 0 0 1 0 30V0Z'/%3E%3Cpath fill='none' d='M1.5 1.5H33a8.5 8.5 0 0 1 8.5 8.5v28.5H10A8.5 8.5 0 0 1 1.5 30V1.5Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cpath fill='%23e20175' d='M16.143 23.859h-4.875v-4.823h4.875ZM11.268 7.941v8.2h1.466V15.9c0-3.859 2.192-6.271 6.336-6.271h.241v17.366c0 2.412-.972 3.377-3.413 3.377h-.731v1.688h12.667v-1.688h-.731c-2.434 0-3.413-.965-3.413-3.377V9.629h.241c4.144 0 6.336 2.412 6.336 6.271v.241h1.462v-8.2Zm15.589 15.918h4.877v-4.823h-4.875Z' data-name='Pfad 652'/%3E%3C/g%3E%3C/svg%3E");
}

/* Provider Badge (larger version for standalone tariffs) */
.checkout-wizard .review-product-provider-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 10px auto;
}

.checkout-wizard .review-product-provider-badge[data-provider="VODAFONE"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='40'%3E%3Cdefs%3E%3CclipPath id='vf'%3E%3Cpath fill='none' d='M0 0h27.585v27.666H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cg fill='%23fff' stroke='%23E70001' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h33a10 10 0 0 1 10 10v30H10A10 10 0 0 1 0 30V0Z'/%3E%3Cpath fill='none' d='M1.5 1.5H33a8.5 8.5 0 0 1 8.5 8.5v28.5H10A8.5 8.5 0 0 1 1.5 30V1.5Z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg clip-path='url(%23vf)' transform='translate(7.708 6.167)'%3E%3Cpath fill='%23E70001' d='M8.708.967a13.783 13.783 0 0 1 10.886.319 9.152 9.152 0 0 0-2.893.125 14.007 14.007 0 0 0-6.966 3.513 12 12 0 0 0-3.5 6.784 9.44 9.44 0 0 0 .8 5.389A8.031 8.031 0 0 0 11.149 21a7.376 7.376 0 0 0 10.174-6.253A7.016 7.016 0 0 0 19.8 9.606a8.645 8.645 0 0 0-4.572-2.541 5.6 5.6 0 0 1 1.956-4.435 6.164 6.164 0 0 1 2.458-1.286l.068-.023a13.971 13.971 0 0 1 6.126 5.743 13.67 13.67 0 0 1 1.747 6.989A13.79 13.79 0 0 1 8.139 26.459a13.858 13.858 0 0 1-6.361-5.807A13.7 13.7 0 0 1 0 13.663a13.715 13.715 0 0 1 2.965-8.414A13.854 13.854 0 0 1 8.708.967Z'/%3E%3Cpath fill='%23fff' d='M16.701 1.411a9.152 9.152 0 0 1 2.893-.125l.138.023-.092.035a6.166 6.166 0 0 0-2.458 1.288 5.6 5.6 0 0 0-1.956 4.435 8.645 8.645 0 0 1 4.572 2.541 7.016 7.016 0 0 1 1.526 5.14 7.377 7.377 0 0 1-10.174 6.253 8.031 8.031 0 0 1-4.111-3.9 9.44 9.44 0 0 1-.8-5.389 12 12 0 0 1 3.5-6.784 14.006 14.006 0 0 1 6.962-3.517Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.checkout-wizard .review-product-provider-badge[data-provider="O2"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='40'%3E%3Cdefs%3E%3CclipPath id='o2'%3E%3Cpath fill='none' d='M0 0h26.844v27.684H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cg fill='%23fff' stroke='%230050FF' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h33a10 10 0 0 1 10 10v30H10A10 10 0 0 1 0 30V0Z'/%3E%3Cpath fill='none' d='M1.5 1.5H33a8.5 8.5 0 0 1 8.5 8.5v28.5H10A8.5 8.5 0 0 1 1.5 30V1.5Z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg clip-path='url(%23o2)' transform='translate(8.078 6.158)'%3E%3Cpath fill='%230050FF' d='M13.422 27.684a13.422 13.422 0 1 1 13.422-13.422 13.437 13.437 0 0 1-13.422 13.422m0-20.607a7.185 7.185 0 1 0 7.185 7.185 7.193 7.193 0 0 0-7.185-7.185'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.checkout-wizard .review-product-provider-badge[data-provider="FREENET"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='40'%3E%3Cg%3E%3Cg fill='%23fff' stroke='%2321314D' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h33a10 10 0 0 1 10 10v30H10A10 10 0 0 1 0 30V0Z'/%3E%3Cpath fill='none' d='M1.5 1.5H33a8.5 8.5 0 0 1 8.5 8.5v28.5H10A8.5 8.5 0 0 1 1.5 30V1.5Z'/%3E%3C/g%3E%3Ctext fill='%2321314D' font-family='Arial-BoldMT, Arial' font-size='11' font-weight='700' transform='translate(9 25)'%3E%3Ctspan x='0' y='0'%3EFN%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E");
}

/* Section Title font-weight 400 (User Request) */
.checkout-wizard .review-section__title {
    font-weight: 400;
}

.checkout-wizard h3.review-section__title {
    font-weight: 400;
}

/* Responsive: Stack image and details on mobile */
@media (max-width: 576px) {
    .checkout-wizard .review-product-card .row {
        flex-direction: column;
    }

    .checkout-wizard .review-product-image {
        max-width: 100%;
        padding: 1rem;
    }

    .checkout-wizard .review-product-header {
        flex-direction: column;
    }

    .checkout-wizard .review-product-prices {
        text-align: left;
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

/* ==========================================================================
   Upload Step - Accordion Design
   ========================================================================== */

/* Trust Banner */
.checkout-wizard .upload-trust-banner {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid var(--checkout-gray-300);
    border-left: 3px solid var(--checkout-primary);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.checkout-wizard .upload-trust-banner svg {
    color: var(--checkout-primary);
    flex-shrink: 0;
}

/* Upload Header */
.checkout-wizard .upload-header {
    margin-bottom: 1.5rem;
}

.checkout-wizard .upload-header-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--checkout-gray-800);
}

.checkout-wizard .upload-header-subtitle {
    color: var(--checkout-gray-600);
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* Progress Indicator */
.checkout-wizard .upload-progress-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid var(--checkout-gray-300);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.checkout-wizard .upload-progress-text {
    font-weight: 600;
    color: var(--checkout-gray-800);
}

.checkout-wizard .upload-progress-dots {
    display: flex;
    gap: 0.5rem;
}

.checkout-wizard .upload-progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--checkout-gray-300);
    transition: all 0.3s ease;
}

.checkout-wizard .upload-progress-dot.active {
    background: var(--checkout-primary);
}

.checkout-wizard .upload-progress-dot.completed {
    background: var(--checkout-success);
}

/* Accordion Card */
.checkout-wizard .upload-accordion {
    border: 1px solid var(--checkout-gray-300);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    background: white;
    transition: all 0.3s ease;
}

.checkout-wizard .upload-accordion.active {
    border-color: var(--checkout-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.checkout-wizard .upload-accordion.completed {
    border-color: var(--checkout-success);
    background: var(--checkout-success-light);
}

/* Accordion Header */
.checkout-wizard .upload-accordion-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.checkout-wizard .upload-accordion-header:hover {
    background: var(--checkout-gray-100);
}

.checkout-wizard .upload-accordion.active .upload-accordion-header {
    background: var(--checkout-gray-100);
}

.checkout-wizard .upload-accordion.completed .upload-accordion-header {
    background: var(--checkout-success-light);
}

.checkout-wizard .upload-accordion-chevron {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    color: var(--checkout-gray-600);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.checkout-wizard .upload-accordion.active .upload-accordion-chevron {
    transform: rotate(90deg);
    color: var(--checkout-primary);
}

.checkout-wizard .upload-accordion-icon {
    width: 24px;
    height: 24px;
    margin-right: 0.75rem;
    color: var(--checkout-gray-600);
    flex-shrink: 0;
}

.checkout-wizard .upload-accordion.completed .upload-accordion-icon {
    color: var(--checkout-success);
}

.checkout-wizard .upload-accordion-title {
    flex: 1;
    font-weight: 500;
    color: var(--checkout-gray-800);
}

.checkout-wizard .upload-accordion-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--checkout-gray-600);
}

.checkout-wizard .upload-accordion.completed .upload-accordion-status {
    color: var(--checkout-success);
}

/* Status Badge */
.checkout-wizard .upload-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.checkout-wizard .upload-status-badge.pending {
    background: var(--checkout-gray-100);
    color: var(--checkout-gray-600);
}

.checkout-wizard .upload-status-badge.completed {
    background: var(--checkout-success-light);
    color: var(--checkout-success);
}

/* Accordion Body */
.checkout-wizard .upload-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.checkout-wizard .upload-accordion.active .upload-accordion-body {
    max-height: 400px;
    padding: 0 1.25rem 1.25rem;
}

/* Upload Zone */
.checkout-wizard .upload-zone {
    border: 2px dashed var(--checkout-gray-300);
    border-radius: 8px;
    padding: 1.5rem 1rem;
    text-align: center;
    background: var(--checkout-gray-100);
    transition: all 0.3s ease;
    cursor: pointer;
}

.checkout-wizard .upload-zone:hover {
    border-color: var(--checkout-primary);
    background: #f5f5f5;
}

.checkout-wizard .upload-zone.drag-over {
    border-color: var(--checkout-primary);
    background: #e9e9e9;
    transform: scale(1.01);
}

/* ID Silhouette */
.checkout-wizard .upload-zone-silhouette {
    width: 100px;
    height: 64px;
    margin: 0 auto 1rem;
    background: var(--checkout-gray-200);
    border-radius: 6px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-wizard .upload-zone-silhouette--front::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 24px;
    height: 30px;
    background: var(--checkout-gray-300);
    border-radius: 3px;
}

.checkout-wizard .upload-zone-silhouette--front::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 10px;
    width: 45px;
    height: 6px;
    background: var(--checkout-gray-300);
    border-radius: 2px;
    box-shadow: 0 12px 0 var(--checkout-gray-300), 0 24px 0 var(--checkout-gray-300);
}

.checkout-wizard .upload-zone-silhouette--back::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    height: 14px;
    background: var(--checkout-gray-300);
    border-radius: 2px;
}

.checkout-wizard .upload-zone-silhouette--back::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 22px;
    background: repeating-linear-gradient(
        0deg,
        var(--checkout-gray-300),
        var(--checkout-gray-300) 3px,
        transparent 3px,
        transparent 7px
    );
}

/* Upload Buttons */
.checkout-wizard .upload-zone-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.checkout-wizard .upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.checkout-wizard .upload-btn--primary,
.checkout-wizard .upload-btn-primary {
    background: var(--checkout-primary);
    color: white;
    border: none;
}

.checkout-wizard .upload-btn--primary:hover,
.checkout-wizard .upload-btn-primary:hover {
    background: var(--checkout-primary-hover);
    color: white;
}

.checkout-wizard .upload-btn--secondary,
.checkout-wizard .upload-btn-secondary {
    background: white;
    color: var(--checkout-gray-800);
    border: 1px solid var(--checkout-gray-300);
}

.checkout-wizard .upload-btn--secondary:hover,
.checkout-wizard .upload-btn-secondary:hover {
    background: var(--checkout-gray-100);
    border-color: var(--checkout-gray-500);
}

.checkout-wizard .upload-zone-hint {
    font-size: 0.75rem;
    color: var(--checkout-gray-600);
    margin: 0;
}

/* Kein "Foto aufnehmen" ohne Touch-Bedienung (07.10.2026): Am Desktop
   oeffnete der Knopf die Webcam (shouldUseWebcamCapture). Laut PostHog
   scheiterten Abbrecher dort mit "Kamera-Zugriff blockiert" bzw. "keine
   Kamera gefunden" - teils fuenfmal in einer Minute, dann Abbruch. Am
   Desktop liegt das Dokument meist ohnehin als Datei oder Scan vor.
   Gleiches Kriterium wie der Handyfoto-Hinweis (pointer: coarse); dort,
   wo der Kamera-Knopf fehlt, wird "Datei waehlen" zum Hauptknopf. */
@media not (pointer: coarse) {
    .checkout-wizard [data-trigger-camera] {
        display: none !important;
    }

    .checkout-wizard .upload-zone-buttons .upload-btn--secondary {
        background: var(--checkout-primary);
        color: white;
        border-color: var(--checkout-primary);
    }

    .checkout-wizard .upload-zone-buttons .upload-btn--secondary:hover {
        background: var(--checkout-primary-hover);
        border-color: var(--checkout-primary-hover);
        color: white;
    }
}

/* Handyfoto-Hinweis unter dem Titel des Upload-Schritts (05.10.2026): nur bei
   Touch-Bedienung - gleiches Kriterium wie shouldUseWebcamCapture() im
   Wizard. Am Desktop oeffnet "Foto aufnehmen" die Webcam; dort scheiterten
   die Abbrecher mit "keine Kamera gefunden", der Satz waere irrefuehrend. */
.checkout-wizard .upload-handyfoto-hinweis {
    display: none;
    font-size: 0.875rem;
    margin: 0 0 1rem;
}

@media (pointer: coarse) {
    .checkout-wizard .upload-handyfoto-hinweis {
        display: block;
    }
}

/* Inline upload error (replaces alert() - suppressed in some in-app browsers) */
.checkout-wizard .upload-error {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid #dc3545;
    border-radius: 0.5rem;
    background: #fdecea;
    color: #b02a37;
    font-size: 0.85rem;
}

/* Completed Preview (collapsed state) */
.checkout-wizard .upload-accordion-preview {
    display: none;
    padding: 0 1.25rem 1rem;
}

.checkout-wizard .upload-accordion.completed:not(.active) .upload-accordion-preview {
    display: block;
}

.checkout-wizard .upload-preview-mini {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--checkout-success-light);
    border-radius: 6px;
    font-size: 0.85rem;
}

.checkout-wizard .upload-preview-thumb {
    width: 48px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--checkout-gray-300);
}

.checkout-wizard .upload-preview-info {
    flex: 1;
    min-width: 0;
}

.checkout-wizard .upload-preview-name {
    font-weight: 500;
    color: var(--checkout-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkout-wizard .upload-preview-meta {
    font-size: 0.75rem;
    color: var(--checkout-gray-600);
}

.checkout-wizard .upload-preview-actions button {
    padding: 0.25rem 0.5rem;
}

/* Help Section */
.checkout-wizard .upload-help-section {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 0.8rem;
}

.checkout-wizard .upload-help-title {
    font-weight: 600;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--checkout-gray-800);
}

.checkout-wizard .upload-help-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--checkout-gray-800);
}

.checkout-wizard .upload-help-list li {
    margin-bottom: 0.15rem;
}

/* Upload Step Mobile Optimizations */
@media (max-width: 576px) {
    .checkout-wizard .upload-header-title {
        font-size: 1.25rem;
    }

    .checkout-wizard .upload-zone-buttons {
        flex-direction: column;
    }

    .checkout-wizard .upload-btn {
        width: 100%;
        justify-content: center;
        padding: 0.625rem 1rem;
    }

    .checkout-wizard .upload-zone-silhouette {
        width: 80px;
        height: 52px;
    }

    .checkout-wizard .upload-accordion-header {
        padding: 0.875rem 1rem;
    }

    .checkout-wizard .upload-accordion-title {
        font-size: 0.9rem;
    }
}

/* Accordion Animations */
@keyframes uploadPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.checkout-wizard .upload-accordion.just-completed {
    animation: uploadPulse 0.4s ease;
}

/* ============================================
   Webcam-Modal (Desktop "Foto aufnehmen")
   ============================================ */
.checkout-camera-modal {
    position: fixed;
    inset: 0;
    z-index: 1050; /* ueber der sticky Navbar (1020) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.checkout-camera-modal[hidden] {
    display: none;
}

.checkout-camera-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.checkout-camera-modal__dialog {
    position: relative;
    background: white;
    border-radius: var(--checkout-border-radius, 0.5rem);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 640px;
    overflow: hidden;
}

.checkout-camera-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--checkout-gray-200, #e5e7eb);
}

.checkout-camera-modal__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--checkout-gray-800, #1f2937);
}

.checkout-camera-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--checkout-gray-600, #4b5563);
    cursor: pointer;
    padding: 0 0.25rem;
}

.checkout-camera-modal__body {
    padding: 1rem 1.25rem 0 1.25rem;
}

.checkout-camera-modal__body video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #000;
    border-radius: 6px;
}

.checkout-camera-modal__hint {
    margin: 0.625rem 0 0 0;
    font-size: 0.8125rem;
    color: var(--checkout-gray-600, #4b5563);
    text-align: center;
}

.checkout-camera-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
}

.checkout-camera-modal__footer .upload-btn--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   RUFNUMMERN-MITNAHME JE POSITION (Umbau 26.08.2026)
   --------------------------------------------------------------------------
   Zwei Ansichten fuer denselben Inhalt: Liste (Zeilen mit aufklappender
   Maske) und Karten (Kacheln mit Dialog). Die Maske selbst nutzt die
   Bootstrap-Bausteine des Checkouts (form-floating, row/col, form-check),
   damit sie sich in beiden Ansichten wie der uebrige Checkout anfuehlt.
   ========================================================================== */

/* ---------- Einstiegsfrage ---------- */
.mnp-frage {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
}

.mnp-frage .form-check-input:checked {
    background-color: var(--checkout-primary);
    border-color: var(--checkout-primary);
}

/* ---------- Aktionszeile mit Ansichtsumschalter ---------- */
.mnp-aktionszeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mnp-zaehler {
    font-size: 0.875rem;
    color: var(--checkout-gray-600);
}

.mnp-ansicht-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.mnp-ansicht-knopf[aria-pressed="true"] {
    background-color: var(--checkout-primary);
    border-color: var(--checkout-primary);
    color: #fff;
}

/* ---------- Listenansicht ---------- */
.mnp-zeile {
    position: relative;
    z-index: 0;
    border: 1px solid var(--checkout-gray-300);
    border-radius: var(--checkout-border-radius);
    padding: 1rem 1.15rem;
    margin-bottom: 0.75rem;
    background: #fff;
    /* z-index faellt erst NACH dem Ausblenden (0.3s) zurueck - sonst
       rutschte die Zeile sofort unter das noch sichtbare Overlay und
       blitzte dunkel auf. */
    transition: border-color 0.3s ease, box-shadow 0.3s ease, z-index 0s linear 0.3s;
}

/* Schleier fuer die NICHT fokussierten Zeilen im Spotlight. Ein eigener
   je Zeile statt des Seiten-Overlays, damit der Wechsel von einer Zeile
   zur naechsten ein Ueberblenden ist und kein Sprung. */
.mnp-zeile::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mnp-zeile--mit {
    border-color: var(--checkout-primary);
}

/* Rot gewinnt gegen "ausgewaehlt": eine unvollstaendige Position ist zuerst
   ein Fehler und erst danach eine markierte. */
.mnp-zeile--fehlt,
.mnp-zeile--mit.mnp-zeile--fehlt {
    border-color: var(--bs-danger, #dc3545);
}

/* Spotlight der Listenansicht: die Zeile mit dem Fokus bleibt hell, der
   Rest des INHALTS dunkelt ab. Bis zum 07.09.2026 lag das Overlay UEBER
   Navigation (1020) und Servicezeile (1021) - Folge: beim Scrollen schoben
   sich die Zeilen (auch die abgedunkelten) sichtbar UEBER Menue und Stepper
   (Befund Maurice). Jetzt liegen Overlay und Zeilen UNTER Stepper (1010)
   und Navigation: beide bleiben immer oben und hell, die Karten tauchen
   beim Scrollen darunter ab. Klicks laesst das Overlay weiter durch - ein
   Klick ausserhalb der Zeile loest es (CheckoutWizard.js,
   mnpSpotlightAnwenden). */
.mnp-fokus-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1005;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.mnp-fokus-overlay.is-sichtbar {
    opacity: 1;
    visibility: visible;
}

/* Im Spotlight liegen ALLE Zeilen ueber dem Seiten-Overlay (nur so bleibt
   der Zeilenwechsel ein Ueberblenden); die Abdunklung der uebrigen
   uebernimmt ihr ::after. 1006: knapp ueber dem Overlay (1005), aber unter
   Stepper (1010) und Navigation (1020) - s. Kommentar am Overlay. */
.mnp-liste--spotlight .mnp-zeile {
    z-index: 1006;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, z-index 0s;
}

.mnp-liste--spotlight .mnp-zeile:not(.mnp-zeile--fokus)::after {
    opacity: 1;
}

.mnp-zeile.mnp-zeile--fokus {
    border-color: var(--checkout-primary);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

/* Rot bleibt auch im Spotlight rot. */
.mnp-zeile--fehlt.mnp-zeile--fokus {
    border-color: var(--bs-danger, #dc3545);
}

.mnp-zeile-tarif {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mnp-zeile-sub {
    font-size: 0.8125rem;
    color: var(--checkout-gray-600);
    margin-top: 0.15rem;
}

.mnp-zeile-schalter {
    margin-top: 0.75rem;
}

/* ---------- Badges am Tarifnamen ---------- */
.mnp-badges {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.mnp-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 400;
    border: 1px solid var(--checkout-gray-300);
    border-radius: 0.25rem;
    padding: 0.05rem 0.4rem;
    color: var(--checkout-gray-600);
}

.mnp-badge--mit {
    border-color: var(--checkout-primary);
    color: var(--checkout-primary);
}

.mnp-badge--fehlt {
    border-color: var(--bs-danger, #dc3545);
    color: var(--bs-danger, #dc3545);
    background-color: #fdf3f3;
}

.mnp-haken {
    color: var(--checkout-success);
    font-weight: 600;
}

/* ---------- Gemeinsame Maske ---------- */
.mnp-maske {
    border-top: 1px dashed var(--checkout-gray-300);
    margin-top: 0.9rem;
    padding-top: 0.9rem;
}

/* Im Dialog steht die Maske allein - dort waere die Trennlinie oben ein
   Strich ohne Bezug. */
.modal-body > .mnp-maske {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.mnp-inhaber-frage {
    display: flex;
    align-items: center;
    gap: 0.5rem 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.mnp-frage-label {
    font-size: 0.9375rem;
}

.mnp-inhaber-optionen {
    display: flex;
    gap: 0.5rem 1.25rem;
    flex-wrap: wrap;
}

.mnp-block-titel {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--checkout-gray-600);
    margin: 1rem 0 0.5rem;
}

.mnp-uebernahme-zeile {
    font-size: 0.8125rem;
    color: var(--checkout-gray-600);
    margin: 0 0 0.75rem;
}

.mnp-uebernahme-zeile:empty {
    display: none;
}

.mnp-zeit-zeile {
    font-size: 0.9rem;
}

.mnp-zeit-optionen {
    display: flex;
    gap: 0.5rem 1.5rem;
    flex-wrap: wrap;
}

/* Abstand nach oben, damit der Hinweis nicht an den Feldern klebt - er
   kommentiert den Block, gehoert aber nicht zu ihm. */
.mnp-zustimmung {
    margin: 0.9rem 0 0.2rem;
    font-size: 0.8125rem;
    color: var(--checkout-gray-600);
}

/* Besteller als "andere Person" eingetragen (seit 21.10.2026) */
.mnp-selbst-hinweis {
    margin: 0.75rem 0 0.25rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--checkout-primary);
    background: var(--checkout-gray-100, #f5f6f7);
    font-size: 0.875rem;
    color: var(--checkout-gray-800);
}

/* ---------- Kartenansicht ---------- */
.mnp-karten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .mnp-karten { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .mnp-karten { grid-template-columns: 1fr; }
}

.mnp-kachel {
    position: relative;
    border: 1px solid var(--checkout-gray-300);
    border-radius: var(--checkout-border-radius);
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: border-color var(--checkout-transition), box-shadow var(--checkout-transition);
}

.mnp-kachel:hover {
    border-color: var(--checkout-gray-500);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.mnp-kachel--aktiv {
    border-color: var(--checkout-primary);
}

.mnp-kachel--fehlt,
.mnp-kachel--aktiv.mnp-kachel--fehlt {
    border-color: var(--bs-danger, #dc3545);
    border-width: 2px;
}

.mnp-kachel-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--checkout-gray-200);
}

.mnp-kachel-nr {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--checkout-gray-600);
}

/* Haken und Eingabefeld liegen UEBER der aufgespannten Klickflaeche
   (z-index 2 gegen deren ::after mit z-index 1), sonst oeffnete ein Klick
   darauf nur den Dialog. */
.mnp-kachel-haken,
.mnp-kachel-wer {
    position: relative;
    z-index: 2;
}

.mnp-kachel-haken {
    margin: 0;
    font-size: 0.8125rem;
}

/* Ein <button> zentriert seinen Inhalt vertikal, sobald er hoeher ist als
   noetig - bei gleich hohen Kacheln haengt der Text dann in der Mitte. */
.mnp-kachel-flaeche {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0.9rem;
    width: 100%;
    cursor: pointer;
}

.mnp-kachel-flaeche::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.mnp-kachel:has(.mnp-kachel-flaeche:focus-visible) {
    outline: 2px solid var(--checkout-primary);
    outline-offset: 2px;
}

.mnp-kachel-tarif {
    font-weight: 600;
    line-height: 1.3;
}

.mnp-kachel-meta {
    display: block;
    font-size: 0.78rem;
    color: var(--checkout-gray-600);
    margin-top: 0.25rem;
    line-height: 1.4;
}

.mnp-kachel-status {
    display: block;
    margin-top: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--checkout-gray-200);
}

.mnp-kachel-nummer {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.mnp-kachel-nummer--fehlt {
    color: var(--bs-danger, #dc3545);
    font-weight: 400;
}

.mnp-kachel-unterzeile {
    display: block;
    font-size: 0.78rem;
    color: var(--checkout-gray-600);
    margin-top: 0.15rem;
    line-height: 1.4;
}

.mnp-kachel-aus {
    font-size: 0.8125rem;
    color: var(--checkout-gray-600);
}

.mnp-kachel-fehler {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--bs-danger, #dc3545);
}

.mnp-kachel-fehler span {
    display: block;
    color: #9a5252;
    font-weight: 300;
}

/* Aktionszeile unten: schiebt den Leerraum ungleich hoher Kacheln dorthin,
   wo er nicht stoert - die Inhaltstexte bleiben oben. */
.mnp-kachel-bearbeiten {
    display: block;
    margin-top: auto;
    padding-top: 0.8rem;
    font-size: 0.75rem;
    color: var(--checkout-gray-600);
}

.mnp-kachel-bearbeiten::after {
    content: " \203A";
    font-size: 0.9rem;
}

.mnp-kachel:hover .mnp-kachel-bearbeiten {
    color: var(--checkout-primary);
}

.mnp-kachel-wer {
    padding: 0.55rem 0.9rem;
    border-top: 1px solid var(--checkout-gray-200);
    background: var(--checkout-gray-100);
}

.mnp-kachel-wer input {
    font-size: 0.78rem;
}

/* ---------- Bilanz und Sammelmeldung ---------- */
.mnp-bilanz {
    border: 1px solid var(--checkout-gray-300);
    border-radius: var(--checkout-border-radius);
    background: var(--checkout-gray-100);
    padding: 0.8rem 1rem;
    font-size: 0.875rem;
}

.mnp-sammelfehler {
    font-size: 0.875rem;
}

/* Auskunftslink im Schritt "Rufnummern-Mitnahme": normaler Textlink in
   eigener Zeile, kein Knopf. */
.mnp-info-link {
    font-size: 0.875rem;
    color: var(--checkout-gray-800);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mnp-info-link:hover {
    color: var(--checkout-primary);
}

/* Fehlermeldung der Einstiegsfrage. Eigene Klasse, weil Bootstraps
   .d-block das hidden-Attribut mit !important aushebelt. */
.mnp-frage-fehler {
    display: none;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-danger, #dc3545);
}

.mnp-frage-fehler:not([hidden]) {
    display: block;
}

/* Fehlermeldung der Inhaberfrage in der Maske. Eigene Klasse aus demselben
   Grund wie .mnp-frage-fehler: Bootstraps .d-block setzt display mit
   !important und haette das hidden-Attribut ausgehebelt. */
.mnp-feld-fehler {
    display: none;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--bs-danger, #dc3545);
}

.mnp-feld-fehler:not([hidden]) {
    display: block;
}

/* Textlinks innerhalb der Maske ("ändern", "Angaben übernehmen von").
   Bewusst KEIN .btn/.btn-link: dessen Rahmen und Polsterung liessen die
   Links wie Eingabefelder aussehen. */
.mnp-textlink {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--checkout-gray-800);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    vertical-align: baseline;
}

.mnp-textlink:hover {
    color: var(--checkout-primary);
}

.mnp-textlink:focus-visible {
    outline: 2px solid var(--checkout-primary);
    outline-offset: 2px;
}

/* "Für wen?" in der Listenzeile: neben dem Haken, immer sichtbar. */
.mnp-zeile-schalter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    flex-wrap: wrap;
}

.mnp-zeile-wer {
    flex: 0 1 300px;
}

.mnp-zeile-wer input {
    font-size: 0.8125rem;
}

/* ==========================================================================
   Vertriebsanfrage (Formular ab der Tarif-Schwelle)
   Bausteine des Checkouts (checkout-step, form-floating); hier nur, was das
   Formular zusaetzlich braucht: die Warenkorb-Tabelle mit Bild je Anschluss.
   ========================================================================== */
.vertriebsanfrage__hinweis {
    font-size: 0.95rem;
    line-height: 1.5;
}

.vertriebsanfrage__tabellenhinweis {
    margin: -0.5rem 0 1rem;
}

.vertriebsanfrage__warenkorb {
    margin-bottom: 0;
}

.vertriebsanfrage__warenkorb th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--checkout-gray-600);
    text-transform: none;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid var(--checkout-gray-300);
    white-space: nowrap;
}

.vertriebsanfrage__warenkorb td {
    padding: 0.85rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--checkout-gray-200);
}

.vertriebsanfrage__nr {
    width: 4rem;
    white-space: nowrap;
    font-weight: 600;
    color: var(--checkout-gray-800);
}

.vertriebsanfrage__bild {
    width: 4.5rem;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}

.vertriebsanfrage__thumb {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border: 1px solid var(--checkout-gray-200);
    border-radius: 4px;
    background: #fff;
}

.vertriebsanfrage__geraet {
    font-weight: 500;
}

/* Anmerkungen: schwebendes Label IM Feld (Bootstrap-Verhalten), abweichend
   von den uebrigen Feldern. Die Checkout-Regeln setzen das Label mit
   !important ueber das Feld - deshalb hier ebenfalls !important, sonst
   greifen sie weiter. Der Innenabstand oben laesst dem nach oben
   gerutschten Label Platz, der eingegebene Text beginnt darunter. */
.checkout-wizard .form-floating.vertriebsanfrage__floating {
    display: block;
}

.checkout-wizard .form-floating.vertriebsanfrage__floating > label {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 2;
    height: auto !important;
    margin: 0;
    padding: 1rem 1rem;
    font-size: 1rem;
    color: var(--checkout-gray-600);
    pointer-events: none;
    transform-origin: 0 0;
    transform: none !important;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.checkout-wizard .form-floating.vertriebsanfrage__floating > .form-control:focus ~ label,
.checkout-wizard .form-floating.vertriebsanfrage__floating > .form-control:not(:placeholder-shown) ~ label {
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
    color: var(--checkout-gray-600);
}

/* Bootstrap legt hinter das nach oben gerutschte Label einen weissen Kasten
   (label::after) - der deckte den oberen Feldrand ab, sobald das Feld den
   Fokus hatte. Das Label steht hier ohnehin im Feld, der Kasten ist unnoetig. */
.checkout-wizard .form-floating.vertriebsanfrage__floating > label::after {
    display: none;
}

.checkout-wizard .form-floating.vertriebsanfrage__floating > .form-control::placeholder {
    color: transparent;
}

.checkout-wizard .form-floating.vertriebsanfrage__floating > .vertriebsanfrage__anmerkungen {
    min-height: 10rem;
    padding: 2.4rem 1rem 0.75rem;
    line-height: 1.5;
    resize: vertical;
}

/* Fusszeile: Textlink und Knopf teilen sich die untere Kante */
.checkout-wizard .vertriebsanfrage__navigation {
    align-items: flex-end;
}

/* Kartenliste fuer kleine Displays (unter md): gleiche Positionen
   zusammengefasst, SIM-Arten je Gruppe aufgeschluesselt */
.vertriebsanfrage__karten {
    margin: 0;
    border-top: 1px solid var(--checkout-gray-300);
}

.vertriebsanfrage__karte {
    display: flex;
    gap: 0.9rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--checkout-gray-200);
}

.vertriebsanfrage__karte-bild {
    flex: 0 0 56px;
}

.vertriebsanfrage__karte-bild:empty {
    display: none;
}

.vertriebsanfrage__karte-text {
    flex: 1 1 auto;
    min-width: 0;
}

.vertriebsanfrage__karte-kopf {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    font-weight: 600;
    line-height: 1.35;
}

.vertriebsanfrage__menge {
    flex: 0 0 auto;
    color: var(--checkout-gray-600);
    font-weight: 500;
}

.vertriebsanfrage__karte-zeile {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-top: 0.15rem;
}

/* ==========================================================================
   Adress-Vorschlaege + Live-Pruefung (AdressVorschlag.js, 01.10.2026)
   Vorschlagsliste unter dem Feld, gelber HINWEIS (kein Fehler — die Adresse
   wird nie gesperrt) und die Quellenzeile, die die Lizenzen verlangen.
   ========================================================================== */
.adress-vorschlag-liste {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 100%;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--checkout-gray-300);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-height: 260px;
    overflow-y: auto;
}

.adress-vorschlag-liste li {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.3;
}

.adress-vorschlag-liste li small {
    color: var(--checkout-gray-600);
    margin-left: 4px;
}

.adress-vorschlag-liste li:hover,
.adress-vorschlag-liste li.aktiv {
    background: var(--checkout-gray-100);
}

.adress-hinweis {
    margin: -0.75rem 0 1rem;
    padding: 8px 12px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #664d03;
    background: #fff3cd;
    border-radius: 6px;
}

.adress-hinweis__uebernehmen {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Source attribution: compact marker, details on hover / focus / tap */
.adress-quelle {
    position: relative;
    margin: -0.5rem 0 1rem;
    font-size: 0.75rem;
    color: var(--checkout-gray-600);
}

.adress-quelle__knopf {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: help;
}

.adress-quelle__knopf:hover,
.adress-quelle__knopf:focus-visible {
    text-decoration: underline;
}

.adress-quelle__inhalt {
    display: none;
    position: absolute;
    /* Opens downwards: above it would slide under the sticky progress stepper.
       No gap to the marker, so the pointer can move into it without closing it. */
    top: 100%;
    left: 0;
    z-index: 25;
    width: min(26rem, calc(100vw - 4rem));
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.6rem 0.75rem;
    background: #fff;
    border: 1px solid var(--checkout-gray-300);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    line-height: 1.4;
}

.adress-quelle:hover .adress-quelle__inhalt,
.adress-quelle:focus-within .adress-quelle__inhalt,
.adress-quelle.offen .adress-quelle__inhalt {
    display: block;
}

.adress-quelle__alle {
    display: block;
    margin-top: 0.4rem;
    font-weight: 600;
}

.adress-quelle__inhalt ul {
    margin: 0.2rem 0 0;
    padding-left: 1.1rem;
}

/* ==========================================================================
   Bestellung in jedem Schritt (Checkout/BestellungKurz.html, 20.10.2026)
   Open on desktop, collapsed on phones (CheckoutWizard.js); hidden on the
   review step, which shows the full summary.
   ========================================================================== */
.bestellung-kurz {
    background: var(--checkout-gray-100);
    border: 1px solid var(--checkout-gray-200);
    border-radius: var(--checkout-border-radius);
    margin: 0 0 1.25rem;
}

.checkout-wizard[data-schritt="review"] .bestellung-kurz {
    display: none;
}

.bestellung-kurz__kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    list-style: none;
}

.bestellung-kurz__kopf::-webkit-details-marker {
    display: none;
}

.bestellung-kurz__titel {
    font-weight: 600;
}

.bestellung-kurz__summe {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bestellung-kurz__schalter::after {
    content: "anzeigen";
    font-size: 0.8125rem;
    color: var(--checkout-gray-600);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bestellung-kurz[open] .bestellung-kurz__schalter::after {
    content: "ausblenden";
}

.bestellung-kurz__inhalt {
    padding: 0 1rem 0.875rem;
}

.bestellung-kurz__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bestellung-kurz__position {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--checkout-gray-200);
    font-size: 0.9375rem;
}

.bestellung-kurz__name {
    min-width: 0;
}

.bestellung-kurz__tarif {
    display: block;
    font-size: 0.8125rem;
    color: var(--checkout-gray-600);
}

.bestellung-kurz__preis {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bestellung-kurz__preis small {
    color: var(--checkout-gray-600);
}

.bestellung-kurz__gesamt {
    border-top: 1px solid var(--checkout-gray-300);
    padding-top: 0.5rem;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

.bestellung-kurz__gesamt div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.bestellung-kurz__gesamt small {
    display: block;
    font-size: 0.8125rem;
    color: var(--checkout-gray-600);
}

.bestellung-kurz__aendern {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

/* ==========================================================================
   Kunden-Kennwort: Regeln als Liste (StepCustomer.html, 20.10.2026)
   Grey circle = open, green tick = met, red cross = violated.
   ========================================================================== */
.kennwort-regeln {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.125rem;
    font-size: 0.8125rem;
    color: var(--checkout-gray-600);
}

.kennwort-regeln li {
    position: relative;
    padding-left: 1.25rem;
}

.kennwort-regeln li::before {
    content: "○";
    position: absolute;
    left: 0;
}

.kennwort-regeln li.ok {
    color: var(--checkout-success);
}

.kennwort-regeln li.ok::before {
    content: "✓";
}

.kennwort-regeln li.nein {
    color: #b02a37;
}

.kennwort-regeln li.nein::before {
    content: "✕";
}

.kennwort-hinweis:empty {
    display: none;
}

/* ==========================================================================
   Checkout-Umbau PR 3 (21.10.2026): Kundenart als Frage, Begruendung am
   Feld, fehlende Unterlagen beim Weiter
   ========================================================================== */
.customer-type-frage {
    border: 0;
    padding: 0;
    margin-inline: 0;
}

.customer-type-frage__frage {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .5rem;
    float: none;
    width: auto;
}

.customer-type-frage__antworten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .75rem;
}

.customer-type-frage__antwort {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-height: 44px;
    padding: .875rem 1rem;
    border: 1px solid var(--checkout-gray-300, #dee2e6);
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color var(--checkout-transition), box-shadow var(--checkout-transition);
}

.customer-type-frage__antwort .form-check-input {
    flex-shrink: 0;
    margin-top: .2rem;
}

.customer-type-frage__antwort:has(.form-check-input:checked) {
    border-color: var(--checkout-primary);
    box-shadow: 0 0 0 1px var(--checkout-primary);
}

.customer-type-frage__beispiel {
    display: block;
    font-size: .8125rem;
    color: var(--checkout-gray-600);
    margin-top: .125rem;
}

.feld-hinweis {
    font-size: .8125rem;
    color: var(--checkout-gray-600);
    margin-top: .25rem;
}

.checkout-step__navigation {
    flex-wrap: wrap;
}

.upload-fehlt[hidden] {
    display: none !important;
}

.customer-type-frage__ausweis {
    font-size: .8125rem;
    color: var(--checkout-gray-600);
    margin: .5rem 0 0;
}

.checkout-land-hinweis {
    margin: -.75rem 0 1rem;
    font-size: .8125rem;
}

.checkout-aufklappen {
    font-size: .9rem;
}

/* ==========================================================================
   Rueckmeldungen und Barrierefreiheit (Checkout-Umbau PR 3, 21.10.2026)
   ========================================================================== */
/* Haken an jedem ausgefuellten Feld (Entscheidung 21.10.2026, Baymard 2024
   „for all fields“). Rahmen nur zart gruen, der Haken traegt die Aussage. */
.checkout-wizard .form-control.is-valid,
.checkout-wizard .form-select.is-valid {
    border-color: #a3cfbb;
}

/* Kennwortfeld: rechts sitzt das Auge (password-toggle.js) - der Haken
   rueckt davor, statt darunter zu liegen. */
.checkout-wizard .checkout-provider-password.is-valid {
    background-position: right 2.75rem center;
    padding-right: 4.5rem;
}

/* Kurze Rueckmeldung beim Bestehen - nicht bei reduzierter Bewegung. */
@keyframes checkout-haken-ein {
    from { background-size: 0 0; }
    to { background-size: calc(.75em + .375rem) calc(.75em + .375rem); }
}

.checkout-wizard .form-control.is-valid {
    animation: checkout-haken-ein .2s ease-out;
}

/* Schritt-Bestaetigung oben im naechsten Schritt (bleibt stehen).
   Seit dem Feedback vom 21.10.2026 („zu duenn“) ein hellgruener Kasten
   statt einer kleinen gruenen Zeile. Text dunkelgruen auf hellgruen:
   Kontrast ueber 7:1 (WCAG 1.4.3). */
.schritt-bestaetigung {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .9375rem;
    font-weight: 600;
    color: #0f5132;
    background: #d1e7dd;
    border: 1px solid #a3cfbb;
    border-radius: .5rem;
    padding: .625rem .875rem;
    margin: 0 0 1.25rem;
    animation: checkout-bestaetigung-ein .3s ease-out;
}

.schritt-bestaetigung__haken {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--checkout-success, #198754);
    color: #fff;
}

.schritt-bestaetigung[hidden] {
    display: none !important;
}

@keyframes checkout-bestaetigung-ein {
    from { opacity: 0; transform: translateY(-.375rem); }
    to { opacity: 1; transform: none; }
}

/* Weiter-Knopf bestaetigt kurz, bevor der Schritt wechselt. */
.checkout-wizard .checkout-next-step--bestaetigt,
.checkout-wizard .checkout-next-step--bestaetigt:hover,
.checkout-wizard .checkout-next-step--bestaetigt:focus {
    background: var(--checkout-success, #198754);
    border-color: var(--checkout-success, #198754);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

/* Leiste: erledigte Schritte zeigen den Haken statt der Zahl. Bis zum
   21.10.2026 stand dort nach dem Weiterklicken die gruene Zahl - den
   Haken rendert nur der Server, und der kennt die erledigten Schritte
   nicht. */
.stepper-item--completed .stepper-number[data-step-number] {
    font-size: 0;
}

.stepper-item--completed .stepper-number[data-step-number]::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Der gerade bestandene Schritt springt kurz auf (ein Mal). */
.stepper-item--frisch .stepper-number {
    animation: checkout-stepper-haken .45s ease-out;
}

@keyframes checkout-stepper-haken {
    0% { transform: scale(.6); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Sichtbarer Fokus fuer Tastatur (WCAG 2.2 SC 2.4.7 / 2.4.11). */
.checkout-wizard .stepper-button--clickable:focus-visible,
.checkout-wizard .checkout-aufklappen:focus-visible,
.checkout-wizard .customer-type-frage__antwort:has(input:focus-visible) {
    outline: 3px solid var(--checkout-primary);
    outline-offset: 2px;
}

/* Bewegung reduzieren (WCAG 2.2 SC 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    .checkout-wizard *,
    .checkout-wizard *::before,
    .checkout-wizard *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Die Ueberschrift bekommt beim Schrittwechsel den Fokus (fuer
   Screenreader), sie ist aber nicht bedienbar - kein Fokusrahmen. */
.checkout-wizard .checkout-step__title[tabindex="-1"]:focus {
    outline: none;
}

/* ==========================================================================
   „Ihr Vertrag“ kompakter (Feedback Auftraggeber 21.10.2026: „nimmt viel
   Raum ein“). Vertragsstart als Auswahl in einer Zeile, Kennwort-Kopf
   mit „Gilt für“ in einer Zeile, Regeln neben dem Feld.
   ========================================================================== */
.checkout-contract-start__wahl {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .5rem;
}

.checkout-contract-start__wahl .form-check {
    margin: 0;
    padding: 0;
}

.checkout-contract-start__wahl .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-contract-start__wahl .form-check-label {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    border: 1px solid var(--checkout-gray-300);
    border-radius: 2rem;
    background: #fff;
    cursor: pointer;
    font-size: .9375rem;
    transition: border-color var(--checkout-transition), background var(--checkout-transition);
}

.checkout-contract-start__wahl .form-check-label:hover {
    border-color: var(--checkout-primary);
}

.checkout-contract-start__wahl .form-check-input:checked + .form-check-label {
    border-color: var(--checkout-primary);
    background: color-mix(in srgb, var(--checkout-primary) 8%, #fff);
    color: var(--checkout-primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--checkout-primary);
}

.checkout-contract-start__wahl .form-check-input:focus-visible + .form-check-label {
    outline: 3px solid var(--checkout-primary);
    outline-offset: 2px;
}

.checkout-contract-start__feld {
    max-width: 22rem;
    margin-top: .75rem;
}

.checkout-contract-start__vorteil {
    font-size: .8125rem;
}

.provider-password-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
    margin-bottom: .25rem;
}

.provider-password-kopf .checkout-step__subtitle {
    margin: 0;
}

.provider-password-kopf .provider-password-scope {
    margin: 0;
    color: var(--checkout-gray-600);
}

.provider-password-section .kennwort-regeln {
    margin-top: 0;
}

@media (min-width: 768px) {
    .provider-password-section .kennwort-regeln {
        padding-top: .375rem;
    }
}

.mnp-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
}

.mnp-kopf .checkout-step__subtitle {
    margin: 0;
}

/* Zwischenueberschriften im Schritt enger als im uebrigen Checkout
   (2.5rem + Linie je Abschnitt war hier der groesste Platzfresser). */
.checkout-step--mnp .checkout-contract-start .checkout-step__subtitle {
    margin: 0 0 .75rem;
    padding-top: 0;
    border-top: none;
}

.checkout-step--mnp .provider-password-kopf,
.checkout-step--mnp .mnp-kopf {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--checkout-gray-200);
}

.checkout-step--mnp .provider-password-kopf .checkout-step__subtitle,
.checkout-step--mnp .mnp-kopf .checkout-step__subtitle {
    border-top: none;
    padding-top: 0;
}

.checkout-contract-start__wahl strong {
    font-weight: inherit;
}

.checkout-step--mnp legend.checkout-step__subtitle {
    float: none;
    width: auto;
}

/* ==========================================================================
   Seitenaufbau Fassung A (Entscheidung Auftraggeber 21.10.2026):
   ab 1100 px Spalte rechts mit senkrechter Leiste und Bestellung,
   768-1099 px Leiste in einer Zeile, darunter die Handy-Ansicht wie bisher.
   ========================================================================== */
.checkout-layout__seite {
    display: contents;
}

@media (min-width: 1100px) {
    .checkout-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 18.75rem;
        gap: 2rem;
        align-items: start;
    }

    .checkout-layout__haupt {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    /* Only the stepper sticks, not the whole column: stepper + order are
       ~470 px high, and at the end of a long step the column was pushed up
       under the navigation (sticky stays inside its row, measured
       21.10.2026 at 800 px window height). The column stretches over the
       whole row, so the stepper can stick all the way down. */
    .checkout-layout {
        align-items: stretch;
    }

    .checkout-layout__seite {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        grid-column: 2;
        grid-row: 1;
    }

    .checkout-layout__haupt {
        align-self: start;
    }

    .checkout-layout__seite .checkout-stepper {
        position: sticky;
        top: calc(var(--checkout-stepper-offset, 0px) + 1rem);
        z-index: 2;
        order: 0;
        margin: 0;
        padding: 1rem 1.125rem;
        border: 1px solid var(--checkout-gray-200);
        border-radius: var(--checkout-border-radius);
        box-shadow: none;
    }

    .checkout-layout__seite .stepper-list {
        flex-direction: column;
    }

    .checkout-layout__seite .stepper-item {
        flex: none;
        display: block;
    }

    .checkout-layout__seite .stepper-button {
        flex-direction: row;
        justify-content: flex-start;
        gap: .75rem;
        padding: .5rem 0;
        text-align: left;
    }

    .checkout-layout__seite .stepper-number {
        width: 1.75rem;
        height: 1.75rem;
        font-size: .8125rem;
    }

    .checkout-layout__seite .stepper-check,
    .checkout-layout__seite .stepper-item--completed .stepper-number[data-step-number]::before {
        width: 1rem;
        height: 1rem;
    }

    .checkout-layout__seite .stepper-label {
        margin-top: 0;
        font-size: .9375rem;
        text-align: left;
    }

    /* Senkrechte Verbindung von Kreis zu Kreis */
    .checkout-layout__seite .stepper-connector {
        position: absolute;
        left: calc(.875rem - 1px);
        top: 2.25rem;
        bottom: -.5rem;
        width: 2px;
        height: auto;
        margin: 0;
    }

    /* The order box sticks right under the stepper. Only at the end of a
       long step does the row run out - then it slides under the stepper,
       never the stepper under the navigation. */
    .checkout-layout__seite .bestellung-kurz {
        margin: 0;
        position: sticky;
        top: calc(var(--checkout-stepper-offset, 0px) + 2rem + var(--checkout-leiste-hoehe, 14rem));
        z-index: 1;
    }

    .checkout-layout__seite .checkout-stepper {
        background: var(--checkout-white, #fff);
        box-shadow: 0 -1rem 0 0 var(--checkout-white, #fff);
    }

    .checkout-layout__seite .bestellung-kurz__kopf {
        flex-wrap: wrap;
    }

    .checkout-layout__seite .bestellung-kurz__titel {
        white-space: nowrap;
    }
}

/* Scrolling to the step start keeps it clear of the sticky navigation -
   the confirmation box at the top of the step was hidden behind it once
   the stepper moved into the side column (21.10.2026). */
.checkout-wizard {
    scroll-margin-top: calc(var(--checkout-stepper-offset, 0px) + 1rem);
}

@media (max-width: 1099px) {
    .checkout-wizard {
        scroll-margin-top: var(--checkout-stepper-offset, 0px);
    }
}

/* Aufgeklappte Schrittliste unter dem Kreis (unter 1100 px): dieselbe
   senkrechte Liste wie in der Spalte rechts. */
.stepper-mobile {
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 3.5rem;
}

.stepper-mobile:focus-visible {
    outline: 3px solid var(--checkout-primary);
    outline-offset: 4px;
    border-radius: .5rem;
}

.stepper-mobile-text {
    display: grid;
    gap: .0625rem;
    flex: 1;
    min-width: 0;
}

.stepper-mobile-naechster {
    font-size: .8125rem;
    color: var(--checkout-gray-600);
}

.stepper-mobile-pfeil {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--checkout-gray-300);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.stepper-mobile[aria-expanded="true"] .stepper-mobile-pfeil {
    transform: rotate(180deg);
}

/* Ring waechst sichtbar um einen Schritt; vorher kurz ein Haken im Kreis. */
@property --stepper-progress {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}

.stepper-mobile-circle {
    transition: --stepper-progress .5s ease-out;
}

.stepper-mobile-haken {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--checkout-success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

.stepper-mobile-circle.gerade .stepper-mobile-haken {
    animation: checkout-ring-haken .9s ease-out;
}

@keyframes checkout-ring-haken {
    0% { opacity: 0; transform: scale(.6); }
    20% { opacity: 1; transform: scale(1.08); }
    65% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .stepper-mobile-circle {
        transition: none;
    }
}

@media (max-width: 1099px) {
    .checkout-stepper.liste-offen .stepper-list {
        margin-top: .75rem;
        padding: .5rem 1rem;
        border: 1px solid var(--checkout-gray-200);
        border-radius: var(--checkout-border-radius);
    }

    .checkout-stepper.liste-offen .stepper-item {
        position: relative;
    }

    .checkout-stepper.liste-offen .stepper-list {
        flex-direction: column;
    }

    .checkout-stepper.liste-offen .stepper-item {
        flex: none;
        display: block;
    }

    .checkout-stepper.liste-offen .stepper-button {
        flex-direction: row;
        justify-content: flex-start;
        gap: .75rem;
        padding: .5rem 0;
        text-align: left;
    }

    .checkout-stepper.liste-offen .stepper-number {
        width: 1.75rem;
        height: 1.75rem;
        font-size: .8125rem;
    }

    /* Same specificity as the base "tick instead of number" rule and
       later in the file - without this the number showed next to the tick. */
    .checkout-stepper.liste-offen .stepper-item--completed .stepper-number[data-step-number] {
        font-size: 0;
    }

    .checkout-stepper.liste-offen .stepper-check,
    .checkout-stepper.liste-offen .stepper-item--completed .stepper-number[data-step-number]::before {
        width: 1rem;
        height: 1rem;
    }

    .checkout-stepper.liste-offen .stepper-label {
        margin-top: 0;
        font-size: .9375rem;
        text-align: left;
    }

    /* Senkrechte Verbindung von Kreis zu Kreis */
    .checkout-stepper.liste-offen .stepper-connector {
        position: absolute;
        left: calc(.875rem - 1px);
        top: 2.25rem;
        bottom: -.5rem;
        width: 2px;
        height: auto;
        margin: 0;
    }

}

/* ==========================================================================
   Mikrointeraktionen (Rundgang-Demo, Entscheidung 21.10.2026)
   ========================================================================== */
/* Neuer Schritt gleitet kurz ein (0,22 s, nur beim Wechsel). */
@keyframes checkout-schritt-ein {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.checkout-step.checkout-step--neu {
    animation: checkout-schritt-ein .22s ease-out;
}

/* „Noch 3 Angaben fehlen“ neben dem Weiter-Knopf. */
.weiter-fehlt {
    font-size: .875rem;
    font-weight: 600;
    color: #b02a37;
    margin-left: auto;
    margin-right: .75rem;
    align-self: center;
}

/* Datumsfeld: Haken/Warnsymbol vor das Kalendersymbol des Browsers
   setzen, sonst liegen beide uebereinander. */
.checkout-wizard input[type="date"].is-valid,
.checkout-wizard input[type="date"].is-invalid {
    background-position: right 2.5rem center;
    padding-right: 4.25rem;
}

.weiter-fehlt:empty {
    display: none;
}

/* Alles hochgeladen: Weiter-Knopf bekommt einen gruenen Rand. */
.checkout-wizard .checkout-next-step.weiter-bereit {
    box-shadow: 0 0 0 4px #d1e7dd;
}

/* Unterlagen-Zaehler „2 von 3 Unterlagen“. */
.upload-zaehler {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
    font-weight: 600;
    margin: 0 0 .75rem;
}

.upload-zaehler__balken {
    flex: 0 1 14rem;
    height: 6px;
    background: var(--checkout-gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.upload-zaehler__balken span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--checkout-success);
    transition: width .35s ease-out;
}

/* „Alles bereit“ oben in „Prüfen und bestellen“, Haken nacheinander. */
.review-bereit {
    border: 1px solid #a3cfbb;
    background: #f3faf6;
    border-radius: var(--checkout-border-radius);
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.review-bereit__titel {
    margin: 0 0 .375rem;
    font-weight: 700;
    color: #0f5132;
}

.review-bereit__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
    font-size: .875rem;
}

.review-bereit__liste li {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    animation: checkout-bestaetigung-ein .3s ease-out both;
}

.review-bereit__liste li:nth-child(2) { animation-delay: .12s; }
.review-bereit__liste li:nth-child(3) { animation-delay: .24s; }
.review-bereit__liste li:nth-child(4) { animation-delay: .36s; }

.review-bereit__liste .schritt-bestaetigung__haken {
    width: 1.25rem;
    height: 1.25rem;
}

/* Positive Rueckmeldung der Adresspruefung. */
.adress-gefunden {
    margin: -.75rem 0 1rem;
    font-size: .8125rem;
    color: #0f5132;
}

@media (prefers-reduced-motion: reduce) {
    .review-bereit__liste li {
        animation-delay: 0s !important;
    }
}

/* Erkannte Bank wie „Adresse gefunden“: gruen, mit Haken im Text. */
.checkout-wizard .checkout-bank-erkannt {
    color: #0f5132;
}

/* Vertragsstart ohne Wahl (seit 21.10.2026 keine Vorauswahl mehr) */
.checkout-contract-start__fehler {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--bs-danger, #dc3545);
}