/* ==========================================================
   TM24 Ankauf-Fixes – Mega-Menü + Kategorien-Leiste
   Diese Datei enthaelt Styles, die frueher in der Shop custom.css
   waren, aber dort entfernt wurden.
   ========================================================== */

/* ---- Kategorien-Leiste ---- */
.tm24-catsbar {
    background: #fff !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
    padding: 0 !important;
    width: 100% !important;
    z-index: 1040;
    position: relative;
}

.tm24-catsbar .container {
    max-width: 1320px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}

/* Fix for hidden kategorie buttons due to hero curve */
.page-ankauf .kategorie-bar {
    margin-top: 55px !important;
    position: relative;
    z-index: 15;
    background: transparent !important; /* Mache den Hintergrund transparent, damit es weicher wirkt */
    border-bottom: none !important;
}


/* ---- Mega-Menü Liste ---- */
.tm24-megamenu-list {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.tm24-megamenu-item {
    position: relative;
}

.tm24-megamenu-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: 'Figtree', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111 !important;
    padding: 12px 14px !important;
    text-decoration: none !important;
    transition: color .2s ease !important;
    white-space: nowrap !important;
    cursor: pointer;
}

.tm24-megamenu-link:hover {
    color: #2E2BCB !important;
    text-decoration: none !important;
}

/* ---- Chevron ---- */
.tm24-chevron {
    transition: transform .2s ease;
    opacity: .5;
    flex-shrink: 0;
}

.tm24-megamenu-item.has-dropdown:hover .tm24-chevron,
.tm24-megamenu-item.has-megapanel:hover .tm24-chevron {
    transform: rotate(180deg);
    opacity: 1;
    color: #2E2BCB;
}

/* ---- Dropdown (einfach) ---- */
.tm24-megamenu-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s;
    z-index: 1050;
    padding-top: 0;
}

.tm24-megamenu-item.has-dropdown:hover .tm24-megamenu-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tm24-megamenu-dropdown-inner {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(46, 43, 203, .10), 0 2px 8px rgba(0, 0, 0, .06);
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    border-top: 3px solid #2E2BCB;
}

.tm24-dropdown-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Figtree', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #111 !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all .15s ease !important;
    white-space: nowrap;
}

.tm24-dropdown-link::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #eee;
    flex-shrink: 0;
    transition: background .15s ease;
}

.tm24-dropdown-link:hover {
    background: rgba(46, 43, 203, .08) !important;
    color: #2E2BCB !important;
    text-decoration: none !important;
}

.tm24-dropdown-link:hover::before {
    background: #2E2BCB;
}

/* ---- Mega-Panel (grosse Dropdowns) ---- */
.tm24-megapanel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s;
    z-index: 1050;
    padding-top: 0;
}

.tm24-megamenu-item.has-megapanel:hover .tm24-megapanel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tm24-megapanel-inner {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(46, 43, 203, .12), 0 2px 8px rgba(0, 0, 0, .06);
    padding: 24px 28px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px 28px;
    min-width: 780px;
    border-top: 3px solid #2E2BCB;
}

.tm24-megapanel-3col {
    grid-template-columns: repeat(3, 1fr) !important;
    min-width: 520px !important;
}

.tm24-megapanel-4col {
    grid-template-columns: repeat(4, 1fr) !important;
    min-width: 640px !important;
}

.tm24-mega-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tm24-mega-heading {
    display: block;
    font-family: 'Figtree', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111 !important;
    padding: 6px 0 8px 0 !important;
    margin-bottom: 4px;
    border-bottom: 2px solid #2E2BCB;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .15s ease;
}

.tm24-mega-heading:hover {
    color: #2E2BCB !important;
    text-decoration: none !important;
}

.tm24-mega-sublink {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Figtree', system-ui, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #555 !important;
    padding: 5px 0 !important;
    text-decoration: none !important;
    transition: color .15s ease;
    white-space: nowrap;
}

.tm24-mega-sublink::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ccc;
    flex-shrink: 0;
    transition: background .15s ease;
}

.tm24-mega-sublink:hover {
    color: #2E2BCB !important;
    text-decoration: none !important;
}

.tm24-mega-sublink:hover::before {
    background: #2E2BCB;
}

/* ---- Mobile: Mega-Menu verstecken ---- */
@media (max-width: 768px) {
    .tm24-catsbar {
        display: none !important;
    }
}

/* ═══ Desktop Language Switcher ═══ */
.desktop-lang-switch {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 12px;
}
.desktop-lang-switch .lang-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    background: rgba(0,0,0,0.04);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
    min-width: 32px;
}
.desktop-lang-switch .lang-pill:hover {
    background: rgba(46, 43, 203, 0.1);
    color: #2E2BCB;
    text-decoration: none;
}
.desktop-lang-switch .lang-pill.active {
    background: #2E2BCB;
    color: #fff;
    box-shadow: 0 2px 8px rgba(46, 43, 203, 0.25);
}

/* ═══ Mobile Language Switcher ═══ */
.mobile-lang-switch {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: 8px;
}
.mobile-lang-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.mobile-lang-switch a:hover {
    background: rgba(46, 43, 203, 0.1);
    color: #2E2BCB;
}
.mobile-lang-switch a.active-lang {
    background: #2E2BCB;
    color: #fff;
}

/* ═══ Brand-Logo Text-Fallback (Honor, Nothing, Fairphone etc.) ═══ */
.brand-text-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: 'Figtree', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #2E2BCB;
    background: linear-gradient(135deg, #f0f0ff 0%, #e8e7ff 100%);
    border-radius: 12px;
    padding: 16px 8px;
    text-align: center;
    line-height: 1.2;
    min-height: 64px;
    -webkit-user-select: none;
    user-select: none;
    transition: all 0.2s ease;
}

.brand-card:hover .brand-text-fallback {
    color: #fff;
    background: linear-gradient(135deg, #2E2BCB 0%, #4f46e5 100%);
    transform: scale(1.02);
}

/* ═══ Bewertungen / Trust-Karten ═══ */
.trust-container {
    max-width: 960px;
    margin: 0 auto;
}

.reviews-wrap {
    position: relative;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.trust-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trust-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 43, 203, 0.08);
}

.trust-card .stars {
    color: #f5a623;
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.trust-text {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    font-style: italic;
    margin-bottom: 12px;
}

.trust-author {
    font-size: 13px;
    color: #888;
    font-weight: 600;
}

.trust-author .verified {
    color: #22c55e;
    font-weight: 700;
    font-size: 12px;
}

@media (max-width: 576px) {
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .trust-card {
        padding: 18px;
    }
}

/* ═══ Pinker Pfeil aus NOVAChild neutralisieren ═══ */
.page-ankauf .slick-next::before,
.page-ankauf .slick-prev::before,
.page-ankauf .carousel-control-next-icon,
.page-ankauf .carousel-control-prev-icon {
    color: #2E2BCB !important;
    filter: none !important;
}

/* NOVAChild Dropdown-Pfeile neutralisieren */
.page-ankauf select.form-control,
.page-ankauf .custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* ═══ B2B Banner — Professionelles Design ═══ */
.b2b-banner {
    position: relative;
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a3e 40%, #2E2BCB 100%);
    border-radius: 16px;
    padding: 48px 0;
    margin: 48px auto;
    max-width: 1140px;
    overflow: hidden;
    color: #fff;
}

/* Dekorative Kreise statt dem hässlichen abgeschnittenen Building-Icon */
.b2b-banner-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.b2b-deco-1 {
    width: 280px;
    height: 280px;
    right: -60px;
    top: -80px;
    background: rgba(46, 43, 203, 0.25);
    filter: blur(40px);
}
.b2b-deco-2 {
    width: 160px;
    height: 160px;
    right: 80px;
    bottom: -40px;
    background: rgba(99, 102, 241, 0.2);
    filter: blur(30px);
}

.b2b-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.b2b-banner-content {
    flex: 1;
}

/* Badge "B2B" */
.b2b-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 16px;
}

.b2b-banner-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 18px;
    line-height: 1.3;
    color: #fff;
}

.b2b-banner-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.b2b-banner-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
}
.b2b-banner-list li:last-child {
    margin-bottom: 0;
}
.b2b-check {
    flex-shrink: 0;
    color: #4ade80;
    font-size: 16px;
}

/* CTA Button */
.b2b-banner-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.b2b-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #fff;
    color: #1a1a3e;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 40px rgba(46, 43, 203, 0.15);
    transition: all 0.25s ease;
    white-space: nowrap;
}
.b2b-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 60px rgba(46, 43, 203, 0.25);
    color: #2E2BCB;
    text-decoration: none;
}
.b2b-cta-arrow {
    transition: transform 0.25s ease;
}
.b2b-cta-btn:hover .b2b-cta-arrow {
    transform: translateX(4px);
}

.b2b-cta-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Mobile */
@media (max-width: 768px) {
    .b2b-banner {
        padding: 32px 0;
        margin: 32px 16px;
        border-radius: 14px;
    }
    .b2b-banner-inner {
        flex-direction: column;
        text-align: center;
    }
    .b2b-banner-list li {
        justify-content: center;
    }
    .b2b-banner-title {
        font-size: 20px;
    }
}

/* ═══ "So einfach geht's" Versand-Icon Fix ═══ */
/* Das Versand-Icon bei Schritt 3 wird via Font Awesome korrekt als box dargestellt.
   Falls es trotzdem als Wallet aussieht, liegt es am FA-Klasse. */
.steps-row .step-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0f0ff, #e8e7ff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 22px;
    color: #2E2BCB;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.steps-row .step-icon-circle:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(46, 43, 203, 0.15);
}

/* ═══ CHECKOUT TAB-FIX – erzwingt Tab-Sichtbarkeit (Versionsmarke: 20260329) ═══ */
/* Sicherheitsnetz: .checkout-pane ohne .active darf NIEMALS sichtbar sein */
.checkout-pane {
    display: none !important;
}
.checkout-pane.active {
    display: block !important;
    animation: fadeInUp 0.3s ease;
}

/* ═══ PHASE 1: Placeholder-Kontrast & Formular-Lesbarkeit ═══ */
.page-ankauf .form-control::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}
.page-ankauf .form-control::-webkit-input-placeholder {
    color: #6b7280 !important;
}
.page-ankauf .form-control::-moz-placeholder {
    color: #6b7280 !important;
}

/* Select-Dropdown fixes – keine ✓-Artefakte */
.page-ankauf select.form-control,
.page-ankauf .frage-select {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    background-image: none !important;
}

/* Info-Icon (i) Ausrichtung in Fragezeilen */
.ankauf-frage-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
    margin-left: 6px;
    line-height: 1;
}

/* Fragezeile saubere Alignment */
.ankauf-frage-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
}

.ankauf-frage-optional {
    color: #9ca3af;
    font-weight: 400;
    font-size: 13px;
}

/* Damage-Textarea bessere Lesbarkeit */
.ankauf-damage-textarea {
    font-size: 14px;
    color: #1f2937;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    resize: vertical;
}
.ankauf-damage-textarea::placeholder {
    color: #6b7280;
}

/* Label-Kontrast in Checkout */
.page-ankauf .form-label {
    color: #1f2937;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

/* Buttons sichtbar auf Mobile */
@media (max-width: 768px) {
    .checkout-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        padding: 16px 0;
    }
    .checkout-actions .btn-checkout-next,
    .checkout-actions .btn-checkout-back,
    .checkout-actions .btn-checkout-final {
        flex: 1;
        min-width: 140px;
    }
}

/* ===== ZUBEHÖR-CHIPS ===== */
.zubehoer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.zubehoer-chip {
    cursor: pointer;
    display: block;
}
.zubehoer-chip input[type="checkbox"] {
    display: none;
}
.zubehoer-chip-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    background: #fff;
    transition: all 0.2s ease;
    text-align: center;
    justify-content: center;
}
.zubehoer-chip-inner i {
    font-size: 16px;
    color: #888;
    transition: color 0.2s;
}
.zubehoer-chip input:checked + .zubehoer-chip-inner,
.zubehoer-chip-none input:checked + .zubehoer-chip-inner {
    border-color: #2E2BCB;
    background: #f0efff;
    color: #2E2BCB;
}
.zubehoer-chip input:checked + .zubehoer-chip-inner i,
.zubehoer-chip-none input:checked + .zubehoer-chip-inner i {
    color: #2E2BCB;
}
.zubehoer-chip:hover .zubehoer-chip-inner {
    border-color: #b0aef0;
    background: #f8f7ff;
}
/* OVERRIDE: Entferne den aggressiven roten Balken und Hintergrund von Pflicht-Reihen */
.ankauf-fragen-card .ankauf-frage-row.ankauf-frage-pflicht {
    border-left: none;
    background: transparent;
}

@media (max-width: 768px) {
    .zubehoer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .zubehoer-chip-inner {
        padding: 6px 10px;
        height: 40px;
        font-size: 12px;
    }
}

/* ===== PREISBOX TRUST-SIGNALE ===== */
.preisbox-trust {
    list-style: none;
    margin: 16px 0 0 0;
    padding: 12px 0 0 0;
    border-top: 1px solid rgba(46, 43, 203, 0.1);
}
.preisbox-trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    padding: 4px 0;
    line-height: 1.4;
}
.preisbox-trust li i {
    color: #2E8B57;
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* ===== LOCK-WARNUNG BOX – professioneller Amber-Stil ===== */
.lock-warnung-box {
    background: #fffbeb !important;
    border: 1px solid #fbbf24 !important;
    border-left: 1px solid #fbbf24 !important;
    border-radius: 10px !important;
}
.lock-warnung-text {
    color: #92400e !important;
    font-size: 13px !important;
}
.lock-warnung-text strong {
    color: #b45309 !important;
}

/* ===== HOVER-ZUSTÄNDE KLARER MACHEN ===== */
/* Ja/Nein Buttons */
.frage-btn:hover {
    border-color: #2e2bcb !important;
    background: #f8f8ff !important;
    box-shadow: 0 4px 12px rgba(46,43,203,0.08) !important;
    transform: translateY(-1px) !important;
    cursor: pointer !important;
}

/* Zubehör-Chips */
.zubehoer-chip:hover .zubehoer-chip-inner {
    border-color: #2e2bcb !important;
    background: #f8f8ff !important;
    box-shadow: 0 4px 12px rgba(46,43,203,0.08) !important;
    transform: translateY(-1px) !important;
    cursor: pointer !important;
}

/* Auswahlfelder (Akku, Defekte) */
.frage-select:hover {
    border-color: #2e2bcb !important;
    background-color: #f8f8ff !important;
    box-shadow: 0 4px 12px rgba(46,43,203,0.08) !important;
    cursor: pointer !important;
}

/* Bruchschäden-Optionen */
.ankauf-damage-option:hover {
    border-color: #2e2bcb !important;
    background: #f8f8ff !important;
    box-shadow: 0 4px 12px rgba(46,43,203,0.08) !important;
    transform: translateY(-1px) !important;
    cursor: pointer !important;
}

.mobile-nav a i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
    font-size: 1.05em;
    opacity: 0.85;
}

/* ==========================================================
   TM24 FEINSCHLIFF FIXES (Aktive States, Upload, Buttons)
   ========================================================== */

/* FIX 1: Ja/Nein Button Active State */
.frage-btn.active, 
.frage-btn.active:hover {
    background: #2E2BCB !important;
    color: #fff !important;
    border-color: #2E2BCB !important;
    box-shadow: 0 4px 12px rgba(46,43,203,0.3) !important;
    font-weight: 700 !important;
}

/* FIX 3: Bildvorschau kompakt und 'contain' */
.foto-slot.gefuellt {
    padding: 4px !important;
    min-height: 80px !important;
    max-height: 120px !important;
}
.foto-slot-preview {
    object-fit: contain !important;
    max-height: 110px !important;
    width: 100% !important;
    background: #f8f8ff !important;
    border-radius: 4px !important;
}

/* FIX 4 & 9: Primary CTA Buttons – TM24 Blau (NICHT Grün) */
#btn-fragen-weiter,
.btn-checkout-next,
.btn-checkout-final {
    background-color: #2E2BCB !important;
    border-color: #2E2BCB !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 13px 28px !important;
    font-size: 15px !important;
    transition: all 0.2s ease;
}
#btn-fragen-weiter:hover,
.btn-checkout-next:hover,
.btn-checkout-final:hover {
    background-color: #2220a8 !important;
    border-color: #2220a8 !important;
    box-shadow: 0 4px 14px rgba(46, 43, 203, 0.3) !important;
    transform: translateY(-2px);
}
#btn-fragen-weiter:disabled,
.btn-checkout-next:disabled {
    background-color: #d1d5db !important;
    border-color: #d1d5db !important;
    color: #9ca3af !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}
.btn-checkout-back {
    background: #fff !important;
    border: 2px solid #e5e7eb !important;
    color: #555 !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    font-size: 14px !important;
    transition: all 0.2s ease;
}
.btn-checkout-back:hover {
    border-color: #2E2BCB !important;
    color: #2E2BCB !important;
    background: #f8f8ff !important;
}

/* ═══ CHECKOUT TABS – Schritt-Anzeige (breadcrumb) ═══ */
.checkout-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 28px;
    background: #fff;
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid #eee;
}
.checkout-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    border-radius: 10px;
    transition: all 0.2s;
    cursor: default;
    text-align: center;
}
.checkout-tab.active {
    background: #2E2BCB;
    color: #fff;
    font-weight: 700;
}
.checkout-tab.done {
    color: #16a34a;
}
.checkout-tab-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.checkout-tab.active .checkout-tab-nr {
    background: rgba(255,255,255,0.25);
}
.checkout-tab.done .checkout-tab-nr {
    background: #dcfce7;
    color: #16a34a;
}

/* ═══ CHECKOUT PANE INNER ═══ */
.checkout-pane-inner {
    max-width: 680px;
    margin: 0 auto;
}
.checkout-pane-titel {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-bottom: 20px;
}

/* ═══ CHECKOUT ITEM CARD (Schritt 1 – Zusammenfassung) ═══ */
.checkout-item-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f8f8fc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}
.checkout-item-img {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f0f0f8, #e8e7ff);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: #2E2BCB;
    font-size: 32px;
    position: relative;
}
.checkout-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}
/* Kein Gerätebild – Platzhalter */
.checkout-item-img img[src=""],
.checkout-item-img img:not([src]) {
    display: none;
}
.checkout-item-img::after {
    content: "\f10b"; /* fa-mobile */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 36px;
    color: #2E2BCB;
    opacity: 0.4;
    position: absolute;
}
.checkout-item-img img[src]:not([src=""]) ~ *,
.checkout-item-img img[src]:not([src=""]) {
    display: block !important;
}
.checkout-item-img img[src]:not([src=""]) + *,
.checkout-item-img:has(img[src]:not([src=""])) {
    /* Has bild – kein Pseudo-Element */
}
.checkout-item-img:has(img[src]:not([src=""]))::after {
    display: none;
}
.checkout-item-details {
    flex: 1;
    min-width: 0;
}
.checkout-item-name {
    font-weight: 800;
    font-size: 17px;
    color: #111;
    margin-bottom: 4px;
}
.checkout-item-meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
}
.checkout-item-preis {
    font-size: 20px;
    font-weight: 800;
    color: #2E2BCB;
}
.checkout-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* ═══ AUSZAHLUNG METHODEN (Schritt 2) ═══ */
.auszahlung-titel {
    font-size: 17px;
    font-weight: 800;
    color: #111;
    margin: 24px 0 6px;
}
.auszahlung-disclaimer {
    font-size: 12px;
    color: #888;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
}
.auszahlung-optionen {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.auszahlung-label {
    flex: 1;
    min-width: 140px;
    cursor: pointer;
}
.auszahlung-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.auszahlung-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    color: #555;
    background: #fff;
    transition: all 0.2s;
    text-align: center;
}
.auszahlung-box i {
    font-size: 18px;
}
.auszahlung-label input:checked + .auszahlung-box {
    border-color: #2E2BCB;
    background: #f0efff;
    color: #2E2BCB;
    box-shadow: 0 2px 10px rgba(46, 43, 203, 0.12);
}
.auszahlung-label:hover .auszahlung-box {
    border-color: #b0aef0;
    background: #f8f7ff;
}

/* ═══ SSL HINWEIS ═══ */
.ssl-hinweis {
    text-align: center;
    margin-top: 16px;
    font-size: 12px;
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ssl-hinweis i {
    color: #22c55e;
}

/* ═══ PFLICHT BOX (Schritt 3 – Checkboxen) ═══ */
.pflicht-box {
    background: #f9f9fc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #444;
    line-height: 1.5;
}
.check-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #2E2BCB;
    cursor: pointer;
}

@media (max-width: 768px) {
    .checkout-tabs {
        padding: 4px;
        gap: 2px;
    }
    .checkout-tab {
        padding: 10px 8px;
        font-size: 11px;
        gap: 4px;
    }
    .checkout-tab-nr {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }
    .checkout-item-card {
        gap: 14px;
        padding: 14px;
    }
    .checkout-item-img {
        width: 60px;
        height: 60px;
    }
    .checkout-item-name {
        font-size: 15px;
    }
    .checkout-item-preis {
        font-size: 17px;
    }
    .checkout-actions {
        justify-content: stretch;
    }
    .checkout-actions .btn-checkout-next,
    .checkout-actions .btn-checkout-back,
    .checkout-actions .btn-checkout-final {
        flex: 1;
        min-width: 0;
        text-align: center;
    }
    .auszahlung-optionen {
        flex-direction: column;
    }
    .auszahlung-label {
        min-width: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN UPGRADE v2 – inspiriert von Mockup-Layouts
   TM24-Farben (#2E2BCB) bleiben erhalten – nur Optik verbessert
   ═══════════════════════════════════════════════════════════════ */

/* ── Zustand-Optionen: größer, mit Einzel-Inset-Border im aktiven Zustand ── */
.ankauf-zustand-option {
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) auto !important;
    gap: 20px !important;
    padding: 22px 24px !important;
    cursor: pointer;
    border: 1px solid #e5e7ef;
    border-bottom: none;
    background: #fff;
    transition: background 0.18s ease, box-shadow 0.18s ease;
    align-items: center !important;
}
.ankauf-zustand-option:last-child { border-bottom: 1px solid #e5e7ef !important; }
.ankauf-zustand-option:hover { background: #fafbff !important; }
.ankauf-zustand-option.selected,
.ankauf-zustand-option:has(input:checked) {
    background: #f1f2ff !important;
    box-shadow: inset 3px 0 0 #2E2BCB !important;
    border-color: #c5c4f7 !important;
}

/* Radio Dot – größer und runder */
.ankauf-radio-dot {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 2px solid #c9cfdd !important;
    background: #fff;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
}
.ankauf-zustand-option:has(input:checked) .ankauf-radio-dot {
    border-color: #2E2BCB !important;
}
.ankauf-zustand-option:has(input:checked) .ankauf-radio-dot::after {
    content: '' !important;
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #2E2BCB;
}

/* Zustand-Texte: Schriften etwas größer */
.ankauf-zustand-info strong {
    display: block;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 4px;
}
.ankauf-zustand-info span {
    font-size: 14px !important;
    color: #7b8494;
    line-height: 1.5;
}
.ankauf-zustand-preis {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #2E2BCB !important;
    white-space: nowrap;
    padding-left: 16px;
}

/* ── Fragen-Reihen: mehr Padding, klarer ── */
.ankauf-frage-row {
    padding: 20px 24px !important;
    gap: 20px !important;
    min-height: 80px;
    align-items: center !important;
}

/* ── Ja/Nein Buttons: echte Pills, markanter ── */
.frage-buttons {
    display: flex !important;
    gap: 10px !important;
    flex-shrink: 0;
}
.frage-btn {
    min-width: 90px !important;
    height: 48px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    border: 2px solid #d9dee8 !important;
    background: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #3f495c !important;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.frage-btn:hover {
    border-color: #2E2BCB !important;
    color: #2E2BCB !important;
    background: #f1f2ff !important;
    box-shadow: 0 4px 12px rgba(46,43,203,0.1) !important;
    transform: translateY(-1px) !important;
}
.frage-btn.active,
.frage-btn.active:hover {
    background: #2E2BCB !important;
    color: #fff !important;
    border-color: #2E2BCB !important;
    box-shadow: 0 8px 20px rgba(46,43,203,0.25) !important;
    transform: none !important;
}

/* ── Akkuzustand Select: Pill-Stil ── */
.frage-select {
    height: 48px !important;
    padding: 0 20px !important;
    border: 2px solid #d9dee8 !important;
    border-radius: 999px !important;
    background: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #22304b !important;
    min-width: 240px !important;
    cursor: pointer;
    transition: border-color 0.18s;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}
.frage-select:focus {
    border-color: #2E2BCB !important;
    outline: none;
}

/* ── Preisbox rechts: Zahl viel größer, wirkt premium ── */
.ankauf-preisbox {
    border-radius: 20px !important;
    padding: 32px 28px !important;
    text-align: center;
    box-shadow: 0 10px 32px rgba(46,43,203,0.10) !important;
    border: 1px solid #e5e7ef !important;
}
.ankauf-preisbox-label {
    font-size: 16px !important;
    color: #8a93a4 !important;
    margin-bottom: 12px !important;
}
.ankauf-preisbox-betrag {
    font-size: 62px !important;
    font-weight: 900 !important;
    color: #16a34a !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 14px !important;
    text-shadow: 0 2px 12px rgba(22,163,74,0.15);
}
.ankauf-preisbox-zustand {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #1f2430 !important;
    margin-bottom: 6px !important;
}
.ankauf-preisbox-geraet {
    font-size: 15px !important;
    color: #8a93a4 !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
}
.ankauf-preisbox-hinweis {
    font-size: 13px !important;
    color: #b2b7c3 !important;
    margin-bottom: 22px !important;
}
.ankauf-preisbox-cta {
    width: 100% !important;
    min-height: 72px !important;
    border-radius: 18px !important;
    background: linear-gradient(90deg, #2E2BCB 0%, #4340e0 100%) !important;
    color: #fff !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 28px rgba(46,43,203,0.28) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ankauf-preisbox-cta:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 36px rgba(46,43,203,0.38) !important;
    background: linear-gradient(90deg, #1a18a0 0%, #2E2BCB 100%) !important;
}
.ankauf-preisbox-cta:disabled {
    background: #d1d5db !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* ── Fragen-Karte Box: mehr Schatten, runderen Radius ── */
.ankauf-fragen-card {
    border-radius: 20px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.06) !important;
    overflow: hidden;
    border: 1px solid #e5e7ef !important;
}

/* ── Warn-Reihen: amber statt rot-aggressiv ── */
.ankauf-frage-row.lock-warnung-box,
.ankauf-frage-pflicht {
    background: #fffbeb !important;
    box-shadow: inset 4px 0 0 #f59e0b !important;
    border-left: none !important;
}

/* ── Foto-Upload Slots: größer, dezentere optionale Slots ── */
.foto-slots-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 14px !important;
}
.foto-slot {
    min-height: 200px !important;
    border-radius: 20px !important;
    border: 2px dashed #2E2BCB !important;
    background: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    padding: 16px !important;
    position: relative;
}
.foto-slot:hover {
    background: #f1f2ff !important;
    border-color: #4f4de8 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(46,43,203,0.1);
}
.foto-slot.optional-foto {
    border-color: #e3e5ec !important;
    background: #fcfcfd !important;
    opacity: 0.75;
}
.foto-slot.optional-foto:hover {
    opacity: 1;
    border-color: #a5a3f0 !important;
    background: #f8f8ff !important;
}
.foto-slot.gefuellt {
    border-style: solid !important;
    border-color: #2E2BCB !important;
    padding: 4px !important;
}

/* ── Checkout Bestätigungen: größere Checkboxen mit Custom-UI ── */
.checkout-confirm-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid #f0f0f5;
}
.checkout-confirm-item:last-child { border-bottom: none; }
.checkout-confirm-item input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    border-radius: 6px !important;
    border: 2px solid #cfd5e2 !important;
    cursor: pointer;
    accent-color: #2E2BCB;
    margin-top: 2px;
}
.checkout-confirm-item label {
    font-size: 16px !important;
    line-height: 1.65 !important;
    cursor: pointer;
    color: #1f2430;
}

/* ── Form-Felder im Checkout: taller inputs ── */
.checkout-form-box .form-control,
.checkout-formular .form-control {
    height: 54px !important;
    border: 2px solid #d9dee8 !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1f2430 !important;
    padding: 0 18px !important;
    transition: border-color 0.2s;
    background: #fff;
}
.checkout-form-box .form-control:focus,
.checkout-formular .form-control:focus {
    border-color: #2E2BCB !important;
    box-shadow: 0 0 0 3px rgba(46,43,203,0.08) !important;
    outline: none;
}
.checkout-form-box textarea.form-control,
.checkout-formular textarea.form-control {
    height: auto !important;
    min-height: 100px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    border-radius: 14px !important;
    resize: vertical;
}

/* ── Auszahlung Pills: größer und klarer ── */
.auszahlung-card {
    border-radius: 18px !important;
    border: 2px solid #e5e7ef !important;
    padding: 18px 22px !important;
    cursor: pointer;
    min-width: 180px !important;
    transition: all 0.18s ease;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: #fff;
    text-align: center;
}
.auszahlung-card:hover {
    border-color: #a5a3f0 !important;
    background: #f8f8ff !important;
}
.auszahlung-card.active {
    border-color: #2E2BCB !important;
    background: #f1f2ff !important;
    color: #2E2BCB !important;
    box-shadow: 0 4px 16px rgba(46,43,203,0.14) !important;
}
.auszahlung-icon {
    font-size: 20px !important;
}
.auszahlung-name {
    font-size: 15px !important;
    font-weight: 800 !important;
}

/* ── Sektion-Nummer Badges ── */
.ankauf-section-nr {
    background: #f1f2ff !important;
    color: #2E2BCB !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    border: 2px solid #2E2BCB !important;
    flex-shrink: 0;
}

/* ── Abschluss Seite (Pflicht-Confirm Seite) Optik ── */
.checkout-form-box hr,
.checkout-formular hr {
    border: none;
    border-top: 1px solid #f0f0f5;
    margin: 20px 0;
}
.checkout-form-box h4,
.checkout-formular h4 {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #111 !important;
    margin-bottom: 16px;
}

/* ── Mobile Responsive: 2-Spalten für Foto-Grid ── */
@media (max-width: 768px) {
    .foto-slots-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
    .foto-slot {
        min-height: 150px !important;
    }
    .ankauf-zustand-option {
        grid-template-columns: 32px minmax(0,1fr) !important;
        gap: 14px !important;
    }
    .ankauf-zustand-preis {
        grid-column: 1 / -1;
        padding-left: 46px;
        font-size: 17px !important;
    }
    .ankauf-frage-row {
        flex-wrap: wrap !important;
        gap: 14px !important;
    }
    .frage-buttons {
        width: 100%;
    }
    .frage-btn {
        flex: 1 !important;
    }
    .frage-select {
        width: 100% !important;
        min-width: 0 !important;
    }
    .ankauf-preisbox-betrag {
        font-size: 48px !important;
    }
    .auszahlung-optionen {
        flex-direction: column !important;
    }
    .auszahlung-card {
        min-width: 0 !important;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FLOW v7 – Neue Komponenten: Gruppen, Chips, Warn-Box, Danke
   ═══════════════════════════════════════════════════════════════ */

/* Zustand Hint */
.ankauf-zustand-hint {
    font-size: 13.5px;
    color: #64748b;
    margin: -4px 0 16px;
    padding-left: 2px;
}

/* Defekt-Gruppen */
.ankauf-defekt-gruppe {
    background: #fff;
    border: 1.5px solid #e8eaf2;
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 16px;
    transition: border-color 0.2s;
}
.ankauf-defekt-gruppe:hover {
    border-color: #c7c9f0;
}
.ankauf-defekt-gruppe.ankauf-frage-pflicht {
    border-color: #e0e0f8;
    background: #fafafe;
}
.ankauf-defekt-gruppe-titel {
    font-size: 14px;
    font-weight: 700;
    color: #2E2BCB;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ankauf-defekt-gruppe-titel i {
    font-size: 15px;
    opacity: 0.85;
}

/* Chip-Grid für Schadensauswahl */
.ankauf-chip-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin: 12px 0 10px;
}
.ankauf-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}

/* === NEU: Chip mit Haken-Indikator === */
.ankauf-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 9px 12px;
    border: 1.5px solid #d1d5e8;
    border-radius: 50px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    background: #fff;
    transition: all 0.18s ease;
    user-select: none;
    position: relative;
}
.ankauf-chip:hover {
    border-color: #2E2BCB;
    background: #f1f2ff;
    color: #2E2BCB;
}
.ankauf-chip input[type="checkbox"] {
    display: none;
}
/* Icon */
.ankauf-chip .chip-icon {
    font-size: 13px;
    opacity: 0.7;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
/* Text */
.ankauf-chip .chip-text {
    flex: 1;
}
/* Haken-Kreis (immer da, leer wenn nicht ausgewählt) */
.ankauf-chip .chip-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #d1d5e8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s ease;
    background: #f9fafb;
}
.ankauf-chip .chip-check i {
    font-size: 10px;
    color: transparent;
    transition: color 0.15s;
}

/* === AUSGEWÄHLT === */
.ankauf-chip.chip-checked,
.ankauf-chip:has(input:checked) {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #14532d;
    box-shadow: 0 0 0 2px rgba(22,163,74,0.12);
}
.ankauf-chip.chip-checked .chip-icon,
.ankauf-chip:has(input:checked) .chip-icon {
    opacity: 1;
    color: #16a34a;
}
.ankauf-chip.chip-checked .chip-check,
.ankauf-chip:has(input:checked) .chip-check {
    background: #16a34a;
    border-color: #16a34a;
    transform: scale(1.1);
}
.ankauf-chip.chip-checked .chip-check i,
.ankauf-chip:has(input:checked) .chip-check i {
    color: #fff;
}

/* Akku Hilfetext */
.akku-hilfetext {
    font-size: 12.5px;
    color: #64748b;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 10px 0 0;
    padding: 10px 14px;
    background: #f8f9ff;
    border-radius: 10px;
    border: 1px solid #e8eaf2;
    line-height: 1.5;
}
.akku-hilfetext i {
    color: #2E2BCB;
    margin-top: 1px;
    flex-shrink: 0;
}

/* TM24 Select – besseres Styling */
.frage-select.tm24-select,
select.tm24-select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232E2BCB' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    padding: 12px 40px 12px 16px !important;
    border: 2px solid #e0e2f0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 500;
    color: #1e293b;
    width: 100%;
    max-width: 280px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.frage-select.tm24-select:focus,
select.tm24-select:focus {
    outline: none;
    border-color: #2E2BCB !important;
    box-shadow: 0 0 0 3px rgba(46,43,203,0.08);
}

/* TM24 Warn-Box */
.tm24-warn-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px;
    background: #fffbeb;
    border: 1.5px solid #f59e0b;
    border-radius: 12px;
    font-size: 13.5px;
    color: #78350f;
    line-height: 1.55;
}
.tm24-warn-box > i {
    color: #f59e0b;
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}
.tm24-warn-list {
    margin: 8px 0 6px 16px;
    padding: 0;
    font-size: 13px;
    line-height: 1.8;
}

/* Danke-Seite – komplett neu */
.danke-wrap {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 20px;
}
.danke-icon-wrap {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #e8f5e9, #c8f5d0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 4px 20px rgba(25,191,91,0.2);
}
.danke-icon-wrap i {
    font-size: 38px;
    color: #16a34a;
}
.danke-titel {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
.danke-text {
    font-size: 16px;
    color: #4b5563;
    margin-bottom: 32px;
    line-height: 1.6;
}
.danke-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 32px;
    text-align: left;
}
.danke-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1.5px solid #e8eaf2;
    border-radius: 14px;
    padding: 16px;
}
.danke-step-icon {
    width: 38px;
    height: 38px;
    background: #eef0ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.danke-step-icon i {
    font-size: 16px;
    color: #2E2BCB;
}
.danke-step-text {
    font-size: 13.5px;
    color: #374151;
    line-height: 1.5;
}
.danke-step-text strong {
    display: block;
    font-size: 14px;
    color: #111827;
    margin-bottom: 2px;
}
.danke-tracking-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #2E2BCB, #4340e8);
    color: #fff;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(46,43,203,0.25);
}
.danke-tracking-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(46,43,203,0.35);
}

@media (max-width: 600px) {
    .danke-steps { grid-template-columns: 1fr; }
    .ankauf-chip-grid { gap: 6px; }
    .ankauf-chip { padding: 7px 12px; font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL + OVERFLOW FIX – Gruppe wird nicht vom Header verdeckt
   ═══════════════════════════════════════════════════════════════ */

/* Verhindert Clipping der Gruppenboxen */
.ankauf-left,
.ankauf-fragen,
#ankauf-fragen {
    overflow: visible !important;
}

/* Scroll-Abstand: Sticky-Header (ca. 72px) + Puffer */
.ankauf-defekt-gruppe {
    scroll-margin-top: 90px;
}

/* Ersten Block nicht am oberen Rand abschneiden */
.ankauf-defekt-gruppe:first-of-type {
    margin-top: 4px;
}

/* Ankauf-Fragen-Bereich: oben nicht zu nah am Header */
.ankauf-fragen {
    padding-top: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════
   FOTO-UPLOAD CARD – komplett neu, professionell
   ═══════════════════════════════════════════════════════════════ */

.foto-upload-card {
    background: #fff;
    border: 2px solid #e8eaf2;
    border-radius: 18px;
    overflow: hidden;
}

.foto-upload-card-header {
    padding: 20px 22px 16px;
    border-bottom: 1px solid #f1f3f9;
}

.foto-upload-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 8px;
}

.foto-upload-card-title i {
    font-size: 18px;
    color: #2E2BCB;
}

.foto-upload-badge-optional {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: #f1f5ff;
    color: #6366f1;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 2px;
}

.foto-upload-card-sub {
    font-size: 14px;
    color: #4b5563;
    margin: 0;
    line-height: 1.55;
}

.foto-upload-trust {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 22px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-bottom: 1px solid #bbf7d0;
    font-size: 13px;
    color: #166534;
    line-height: 1.5;
}

.foto-upload-trust i {
    color: #16a34a;
    font-size: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}

/* Die Slots + Progress innerhalb der Card */
.foto-upload-card .foto-slots,
.foto-upload-card .foto-progress,
.foto-upload-card .foto-extra-upload {
    padding: 16px 22px;
}

/* ═══════════════════════════════════════════════════════════════
   TM24 INFO-BOX – Tooltip bei Klick auf (i)
   ═══════════════════════════════════════════════════════════════ */
.tm24-info-box {
    margin-top: 12px;
    padding: 16px 18px;
    background: #f8f9ff;
    border: 1.5px solid #d1d5eb;
    border-radius: 14px;
    font-size: 13.5px;
    color: #374151;
    line-height: 1.6;
    animation: fadeInDown 0.2s ease;
}
@keyframes fadeInDown {
    from { opacity:0; transform:translateY(-6px); }
    to   { opacity:1; transform:translateY(0); }
}
.tm24-info-box-title {
    font-size: 14px;
    font-weight: 700;
    color: #2E2BCB;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}
.tm24-info-box p {
    margin: 0 0 6px;
}
.tm24-info-box-list {
    margin: 8px 0 8px 4px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tm24-info-box-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
}
.tm24-info-box-list li i {
    color: #2E2BCB;
    font-size: 13px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.tm24-info-box-note {
    margin-top: 10px !important;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 12.5px;
    color: #78350f;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}
.tm24-info-box-note i {
    color: #d97706;
    margin-top: 1px;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   WIZARD-BACK-BTN � nur blaue Schrift, gut lesbar
   --------------------------------------------------------------- */
.wizard-back-btn {
    color: #2E2BCB !important;
    border-color: #d0d2ef !important;
    background: #f5f5ff !important;
}
.wizard-back-btn:hover {
    background: #eeeeff !important;
    border-color: #2E2BCB !important;
    color: #1a18a0 !important;
}

/* ===== CHIP OVERRIDES v2: 4-Spalten, eckig, gruen Hover ===== */
.ankauf-chip-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    padding-top: 8px !important;
}
.ankauf-chip {
    border-radius: 12px !important;
    padding: 12px 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}
.ankauf-chip .chip-icon {
    font-size: 16px !important;
    margin-bottom: 2px !important;
    opacity: 0.75 !important;
}
.ankauf-chip .chip-text {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
}
.ankauf-chip .chip-check {
    border-radius: 4px !important;
    width: 18px !important;
    height: 18px !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
}
.ankauf-chip:hover {
    border-color: #16a34a !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
}
.ankauf-chip:hover .chip-icon,
.ankauf-chip:hover .chip-text {
    color: #15803d !important;
}
/* Ausgewaehlt */
.ankauf-chip.chip-checked,
.ankauf-chip:has(input:checked) {
    border-color: #16a34a !important;
    background: #f0fdf4 !important;
    box-shadow: 0 0 0 2px rgba(22,163,74,0.2) !important;
}
.ankauf-chip.chip-checked .chip-text,
.ankauf-chip:has(input:checked) .chip-text {
    color: #14532d !important;
}
.ankauf-chip.chip-checked .chip-check,
.ankauf-chip:has(input:checked) .chip-check {
    background: #16a34a !important;
    border-color: #16a34a !important;
    border-radius: 4px !important;
}
/* Bessere Lesbarkeit Labels ueberall */
.ankauf-frage-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}
.ankauf-defekt-gruppe-titel {
    font-size: 13px !important;
    font-weight: 800 !important;
}
/* Responsive: 2 Spalten auf Mobile */
@media (max-width: 640px) {
    .ankauf-chip-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== FRAGE-ROW in GRUPPE: Ja/Nein Buttons sichtbar ===== */
.ankauf-defekt-gruppe .ankauf-frage-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f1f3f9 !important;
}
.ankauf-defekt-gruppe .ankauf-frage-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}
.ankauf-defekt-gruppe .ankauf-frage-buttons {
    display: flex !important;
    flex-shrink: 0 !important;
    gap: 8px !important;
}

/* ===== SO EINFACH GEHT'S � Step-Karten mit Hover ===== */
.steps-row > div {
    padding: 6px !important;
}
.steps-row > div > * {
    /* Wrapper fuer Card-Stil */
}
/* Step-Karte via Wrapper rund um den Inhalt */
.col-md-3.col-6.mb-4 {
    padding: 8px !important;
}
/* Echter Card-Wrapper */
.steps-row .col-md-3,
.steps-row .col-6 {
    padding: 8px !important;
}

/* Innerhalb jeder COL: step-icon + h5 + p in echte Card */
.steps-row .col-md-3 > .step-icon-circle,
.steps-row .col-6 > .step-icon-circle {
    /* Icon bleibt */
}

/* Wrapper-Card erzeugen mit CSS mit :has oder direkt auf COL */
.steps-row .col-md-3,
.steps-row .col-6 {
    background: #fff;
    border: 1.5px solid #e8eaf2;
    border-radius: 18px;
    padding: 28px 20px !important;
    transition: all 0.22s ease;
    cursor: default;
}
.steps-row .col-md-3:hover,
.steps-row .col-6:hover {
    border-color: #2E2BCB;
    box-shadow: 0 8px 24px rgba(46,43,203,0.10);
    transform: translateY(-3px);
}
/* Titel-Text lesbarer */
.steps-row h5 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin-top: 14px !important;
    margin-bottom: 8px !important;
}
.steps-row p.text-muted {
    font-size: 13.5px !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
}
/* Section-Hintergrund leicht anpassen */
.ankauf-info-section {
    background: #f5f7ff !important;
    padding: 48px 0 !important;
}
.ankauf-info-section h2 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin-bottom: 32px !important;
}

/* ===== INFO-BOX Z-INDEX FIX � erscheint UBER allem ===== */
.ankauf-frage-row {
    position: relative !important;
}
.tm24-info-box {
    position: relative !important;
    z-index: 999 !important;
}
.ankauf-defekt-gruppe {
    overflow: visible !important;
    position: relative !important;
    z-index: auto !important;
}
.ankauf-left,
.ankauf-fragen,
#ankauf-fragen,
.ankauf-fragen > * {
    overflow: visible !important;
}

/* ===== CHIP SELECTED: Gruen -> Blau ===== */
.ankauf-chip.chip-checked,
.ankauf-chip:has(input:checked) {
    border-color: #2E2BCB !important;
    background: #eef0ff !important;
    color: #1a18a0 !important;
    box-shadow: 0 0 0 2px rgba(46,43,203,0.12) !important;
}
.ankauf-chip.chip-checked .chip-text,
.ankauf-chip:has(input:checked) .chip-text {
    color: #1a18a0 !important;
}
.ankauf-chip.chip-checked .chip-icon,
.ankauf-chip:has(input:checked) .chip-icon {
    color: #2E2BCB !important;
    opacity: 1 !important;
}
.ankauf-chip.chip-checked .chip-check,
.ankauf-chip:has(input:checked) .chip-check {
    background: #2E2BCB !important;
    border-color: #2E2BCB !important;
}

/* ===== CTA BUTTON TEXT � Lesbarkeit verbessert ===== */
.ankauf-preisbox-cta,
.ankauf-mobile-footer-cta {
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 17px !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}
.ankauf-preisbox-cta:disabled,
.ankauf-mobile-footer-cta:disabled {
    color: #9ca3af !important;
    text-shadow: none !important;
    background: #e5e7eb !important;
}

/* ===== BTN-BACK = wie wizard-back-btn (Pill, blau) ===== */
.btn-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f5f5ff !important;
    border: 1.5px solid #d0d2ef !important;
    border-radius: 50px !important;
    padding: 9px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2E2BCB !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    margin-bottom: 20px !important;
}
.btn-back:hover {
    background: #eeeeff !important;
    border-color: #2E2BCB !important;
    color: #1a18a0 !important;
}

/* ===== CHECKOUT TAB 1: Preis gross + gruen, Zustand lesbar, Button gruen psych ===== */

/* Preis � gross, gruen, psychologisch */
#checkout-preis-anzeige {
    display: block !important;
    font-size: 38px !important;
    font-weight: 900 !important;
    color: #16a34a !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
    margin: 4px 0 2px !important;
}

/* Zustand lesbar */
#checkout-meta {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 4px !important;
}

/* Geraetename lesbar */
#checkout-name {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    line-height: 1.35 !important;
}

/* Weiter-Button: gruen, gross, psych */
.btn-checkout-next {
    background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 15px 28px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
    box-shadow: 0 8px 24px rgba(22,163,74,0.30) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.btn-checkout-next:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(22,163,74,0.42) !important;
    background: linear-gradient(90deg, #15803d 0%, #16a34a 100%) !important;
}

/* ===== HERO CTA + TRUST ITEMS � gruen, psych, lesbar ===== */
.hero-cta-btn {
    display: inline-block !important;
    background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 18px 36px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 10px 30px rgba(22,163,74,0.40), 0 0 0 4px rgba(255,255,255,0.15) !important;
    transition: all 0.22s ease !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    margin-top: 8px !important;
}
.hero-cta-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 16px 40px rgba(22,163,74,0.55) !important;
    background: linear-gradient(90deg, #15803d 0%, #16a34a 100%) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Trust Items � weiss, gross genug, gut lesbar auf blauem Hintergrund */
.hero-trust-item {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
    letter-spacing: 0.2px !important;
}
.hero-trust-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
    justify-content: center !important;
}

/* ===== ALLE CTA-BUTTONS: Text maximal lesbar ===== */
.hero-cta-btn,
.ankauf-preisbox-cta,
.ankauf-mobile-footer-cta,
.btn-checkout-next,
#btn-fragen-weiter,
#btn-fragen-weiter-mobile {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.30) !important;
    -webkit-font-smoothing: antialiased !important;
    letter-spacing: 0.4px !important;
}

/* ===== FAQ-FOOTER TRUST ITEMS: kleine Kaesten, lesbar ===== */
.tm24-faq-footer-line {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-bottom: 28px !important;
}
.tm24-faq-footer-line > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #fff !important;
    border: 1.5px solid #d1fae5 !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #064e3b !important;
    box-shadow: 0 2px 8px rgba(16,185,129,0.10) !important;
    transition: all 0.18s ease !important;
}
.tm24-faq-footer-line > span:hover {
    border-color: #10b981 !important;
    box-shadow: 0 4px 14px rgba(16,185,129,0.18) !important;
    transform: translateY(-2px) !important;
}
.tm24-faq-footer-line > span i {
    color: #16a34a !important;
    font-size: 13px !important;
}

/* ===== TRUST CARDS: Blau statt Gruen (Haekchen bleiben gruen) ===== */
.tm24-faq-footer-line > span {
    background: #f0f1ff !important;
    border: 1.5px solid #c7c9f0 !important;
    color: #1e1b8a !important;
}
.tm24-faq-footer-line > span:hover {
    border-color: #2E2BCB !important;
    background: #e8eaff !important;
    box-shadow: 0 4px 14px rgba(46,43,203,0.14) !important;
}
.tm24-faq-footer-line > span i {
    color: #16a34a !important;
}

/* ===== HERO CTA: Kein Leuchteffekt ===== */
.hero-cta-btn {
    box-shadow: none !important;
}
.hero-cta-btn:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
}

/* ===== PRODUKTLINIE ICONS: kein Container, direkt gross und modern ===== */
.wizard-linie-icon {
    background: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 52px !important;
    margin-bottom: 12px !important;
    color: #2E2BCB !important;
    transition: transform 0.2s ease !important;
}
.wizard-linie-card:hover .wizard-linie-icon {
    transform: scale(1.15) !important;
    color: #1a18a0 !important;
}
.wizard-linie-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

/* Auch step-icon-circle (So einfach geht's): kein Kasten */
.step-icon-circle {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 44px !important;
    width: auto !important;
    height: auto !important;
    color: #2E2BCB !important;
    margin: 0 auto 12px !important;
}

/* ===== FOTO-GRID: nicht gequetscht, gute Proportionen ===== */
.foto-slots-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 10px !important;
}
.foto-slot {
    min-height: 130px !important;
    max-height: 160px !important;
    padding: 12px 8px !important;
    flex-direction: column !important;
    gap: 6px !important;
}
/* Icons in Slots: passende Gr��e */
.foto-slot i,
.foto-slot .foto-icon {
    font-size: 26px !important;
    margin-bottom: 4px !important;
}
/* Text in Slots: klein aber gut lesbar */
.foto-slot-name,
.foto-slot > div,
.foto-slot span {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* ===== MODEL-ICON: Kasten weg, Icon direkt gross + blau ===== */
.model-icon {
    background: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 36px !important;
    color: #2E2BCB !important;
    margin-bottom: 6px !important;
}
.model-icon i,
.model-icon svg {
    font-size: 36px !important;
}
/* Model-Icon-Small auch */
.model-icon-sm {
    background: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 28px !important;
    color: #2E2BCB !important;
}

/* ===== VERKAUF ABSCHLIESSEN: gruen + psych ===== */
.btn-checkout-final,
#btn-submit {
    background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 15px 28px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
    box-shadow: 0 6px 20px rgba(22,163,74,0.28) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.btn-checkout-final:hover,
#btn-submit:hover {
    background: linear-gradient(90deg, #15803d 0%, #16a34a 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(22,163,74,0.40) !important;
}

/* ===== PFLICHT-CHECKBOXEN: lange Karten, blau wenn angehakt ===== */
.checkout-confirm-item {
    background: #fff !important;
    border: 1.5px solid #e5e7ef !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin-bottom: 8px !important;
    border-bottom: 1.5px solid #e5e7ef !important;
    transition: all 0.18s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}
.checkout-confirm-item:last-child {
    border-bottom: 1.5px solid #e5e7ef !important;
    margin-bottom: 0 !important;
}
.checkout-confirm-item:has(input:checked) {
    background: #eef0ff !important;
    border-color: #2E2BCB !important;
    box-shadow: 0 0 0 2px rgba(46,43,203,0.08) !important;
}
.checkout-confirm-item label {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #1f2430 !important;
    cursor: pointer !important;
}

/* ===== WIZARD-CARD-ICON: Kasten weg, Icon direkt gross ===== */
.wizard-card-icon {
    background: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 44px !important;
    color: #2E2BCB !important;
    margin: 0 auto 12px !important;
}
.wizard-card:hover .wizard-card-icon {
    background: none !important;
    color: #1a18a0 !important;
    transform: scale(1.12) !important;
}
.wizard-card-icon i {
    font-size: 44px !important;
}

/* ===== PFLICHT-BOX: jede Best�tigung als eigene lange Karte ===== */
.pflicht-box {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Jede Zeile = eigene Karte */
.check-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    background: #ffffff !important;
    border: 1.5px solid #e5e7ef !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    position: relative !important;
}
.check-label:hover {
    border-color: #a5a3f0 !important;
    background: #f8f8ff !important;
    transform: translateX(3px) !important;
}

/* Checkbox verstecken, Custom-Checkbox stattdessen */
.check-label input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 6px !important;
    background: #fff !important;
    cursor: pointer !important;
    margin-top: 2px !important;
    position: relative !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}

/* Wenn gecheckt: grner Haken-Kreis */
.check-label input[type="checkbox"]:checked {
    background: #16a34a !important;
    border-color: #16a34a !important;
}
.check-label input[type="checkbox"]:checked::after {
    content: "?" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* Wenn gecheckt: Karte leicht blau + Rahmen */
.check-label:has(input:checked) {
    background: #eef0ff !important;
    border-color: #2E2BCB !important;
    box-shadow: 0 0 0 2px rgba(46,43,203,0.07) !important;
}

/* Text in Karte */
.check-label > span {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #1f2430 !important;
}

/* ===== CHECKBOX HAKEN: SVG statt ::after (kein ? mehr) ===== */
.check-label input[type="checkbox"]:checked {
    background: #16a34a !important;
    border-color: #16a34a !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8l4 4 7-7'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 13px !important;
}
.check-label input[type="checkbox"]:checked::after {
    display: none !important;
    content: none !important;
}

/* ===== DANKE-SEITE: Gr�ne Preis-Banner oben ===== */
.danke-preis-banner {
    background: linear-gradient(135deg, #2E2BCB 0%, #4340e0 100%) !important;
    border-radius: 20px !important;
    padding: 28px 32px !important;
    margin-bottom: 28px !important;
    text-align: center !important;
    box-shadow: 0 8px 32px rgba(46,43,203,0.28) !important;
    position: relative !important;
    overflow: hidden !important;
}
.danke-preis-banner::before {
    content: "" !important;
    position: absolute !important;
    top: -30px !important; right: -30px !important;
    width: 120px !important; height: 120px !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 50% !important;
}
.danke-preis-label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.9) !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 8px !important;
}
.danke-preis-betrag {
    font-size: 52px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: -1px !important;
    line-height: 1.1 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    margin-bottom: 6px !important;
}
.danke-preis-sub {
    font-size: 12px !important;
    color: rgba(255,255,255,0.75) !important;
    font-weight: 500 !important;
}

/* ===== DANKE-SEITE: Alles in einem grossen Kasten ===== */
#schritt-danke {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 16px 40px !important;
}

/* Gr�ne Preisbox � kein eigenes Padding n�tig, im Kasten oben */
.danke-preis-banner {
    border-radius: 20px 20px 0 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* Haupt-Karten-Wrapper: umschlie�t Preis + Rest */
.danke-wrap {
    background: #ffffff !important;
    border-radius: 0 0 24px 24px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08) !important;
    padding: 32px 36px 36px !important;
    border: 1px solid #e8eaef !important;
    border-top: none !important;
}

/* Gesamter Kasten (Preis + Wrap zusammen) */
#schritt-danke > .danke-preis-banner,
#schritt-danke > .danke-wrap {
    display: block !important;
}

/* Step-Karten im 2x2 Grid */
.danke-steps {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin: 24px 0 28px !important;
}
.danke-step {
    background: #f8f9ff !important;
    border: 1.5px solid #e8eaef !important;
    border-radius: 14px !important;
    padding: 18px 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    transition: all 0.18s !important;
}
.danke-step:hover {
    border-color: #2E2BCB !important;
    background: #eef0ff !important;
}
.danke-step-icon {
    background: #eef0ff !important;
    border-radius: 10px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2E2BCB !important;
    font-size: 18px !important;
}
.danke-step-text strong {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    display: block !important;
    margin-bottom: 4px !important;
}
.danke-step-text {
    font-size: 13px !important;
    color: #4b5563 !important;
    line-height: 1.5 !important;
}

/* Tracking-Button */
.danke-tracking-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(90deg, #2E2BCB 0%, #4f4de8 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 14px 28px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(46,43,203,0.22) !important;
    transition: all 0.2s !important;
}
.danke-tracking-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(46,43,203,0.32) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Danke Titel + Text */
.danke-titel {
    font-size: 30px !important;
    font-weight: 900 !important;
    color: #111827 !important;
    margin: 12px 0 8px !important;
}
.danke-text {
    font-size: 15px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

/* Check Icon */
.danke-icon-wrap {
    font-size: 44px !important;
    color: #16a34a !important;
    margin-bottom: 4px !important;
}

/* === FOTO-SLOT BADGE AUSBLENDEN === */
.foto-slot-badge { display: none !important; }

/* === PREISBOX TEXT LESBARER === */
.ankauf-preisbox-geraet {
    font-size: 15px !important;
    color: #334155 !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 10px !important;
}
.ankauf-preisbox-zustand {
    font-size: 15px !important;
    color: #16a34a !important;
    font-weight: 700 !important;
}
.ankauf-preisbox-hinweis {
    font-size: 12px !important;
    color: #94a3b8 !important;
}
/* === STEP PILLS LESBARER === */
.step-item {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    padding: 12px 20px !important;
    gap: 12px !important;
    letter-spacing: -0.01em !important;
}
.step-item.active {
    color: #2E2BCB !important;
    background: #f0f0ff !important;
    font-size: 15px !important;
}
.step-item.done {
    color: #16a34a !important;
}
.step-number {
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
}
.step-item.active .step-number {
    background: #2E2BCB !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(46,43,203,0.3) !important;
}
.step-item.done .step-number {
    background: #16a34a !important;
    color: #fff !important;
}