/* =================================================================
   TM24 ANKAUF – RESPONSIVE OVERRIDES (LETZTE CSS-DATEI!)
   Geladen NACH ankauf.css + pills-master → kann alles überschreiben.
   Breakpoints: ≤374 | 375–479 | 480–767 | 768–1023 | ≥1024
   ================================================================= */

/* ===== GLOBALE RESPONSIVE-GUARDS ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

/* Kein horizontaler Overflow am Body */
html, body {
    overflow-x: hidden;
    /* Achtung: Nur auf html+body, NICHT auf innere Elemente */
}

/* ===== CONTAINER-GUARD ===== */
.container,
.ankauf-container,
.wizard-container {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* =================================================================
   HEADER – Safety-Net
   Die führende Definition ist in ankauf-header.css.
   Konkurrierende Regeln in wizard/footer/overlays/ankauf.css wurden
   entfernt (11.04.2026). Diese Regeln hier dienen nur als zusätzliche
   Absicherung, falls eine Legacy-Datei noch gecachte Altversionen liefert.
   ================================================================= */
@media (max-width: 768px) {
    .tm24-header-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        grid-template-columns: none !important;
    }

    .tm24-header-center {
        display: flex !important;
        visibility: visible !important;
        flex: 1 1 100% !important;
        order: 3 !important;
    }

    .tm24-header-center .header-suche-wrapper {
        display: block !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* Tablet: Suche sichtbar, Breite begrenzen */
@media (min-width: 769px) and (max-width: 1023px) {
    .header-suche-wrapper {
        max-width: 400px;
    }
}


/* =================================================================
   HERO SECTION
   ================================================================= */
@media (max-width: 767px) {
    .ankauf-hero h1 {
        font-size: 26px !important;
        line-height: 1.25;
    }
    .hero-sub {
        font-size: 15px;
    }
    .hero-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 15px;
    }
    .hero-trust-row {
        flex-direction: column;
        gap: 6px;
        align-items: center;
    }
}

@media (max-width: 374px) {
    .ankauf-hero h1 {
        font-size: 22px !important;
    }
    .hero-sub {
        font-size: 13px;
    }
}


/* =================================================================
   STEPS BAR (Wizard Fortschritt)
   ================================================================= */
@media (max-width: 767px) {
    .steps-bar {
        gap: 6px;
        padding: 0 8px;
    }
    .step-item {
        padding: 8px 10px;
        font-size: 11px;
    }
    .step-number {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
}

@media (max-width: 374px) {
    .step-item {
        padding: 6px 6px;
        font-size: 10px;
        gap: 4px;
    }
    .step-number {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }
}


/* =================================================================
   BRAND GRID (Marken-Auswahl)
   ================================================================= */
@media (max-width: 767px) {
    .brand-grid,
    #marken-grid.brand-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .brand-card {
        padding: 14px 8px;
    }
    .brand-name {
        font-size: 13px;
    }
    .brand-logo {
        width: 52px;
        height: 52px;
    }
    .brand-logo img {
        max-width: 44px;
        max-height: 44px;
    }
}

@media (max-width: 374px) {
    .brand-grid,
    #marken-grid.brand-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .brand-card {
        padding: 12px 6px;
        border-radius: 12px;
    }
    .brand-name {
        font-size: 11px;
    }
    .brand-logo {
        width: 44px;
        height: 44px;
    }
    .brand-logo img {
        max-width: 36px;
        max-height: 36px;
    }
}


/* =================================================================
   PRODUKTLINIEN-GRID (iPhone, iPad, etc.)
   ================================================================= */
@media (max-width: 767px) {
    .wizard-produktlinie-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .wizard-linie-card {
        padding: 14px 10px !important;
    }
    .wizard-linie-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 28px !important;
    }
    .wizard-linie-icon img {
        max-width: 48px !important;
        max-height: 48px !important;
    }
    .wizard-linie-name {
        font-size: 18px !important;
    }
}

@media (max-width: 479px) {
    .wizard-produktlinie-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .wizard-linie-card {
        padding: 12px 8px !important;
    }
    .wizard-linie-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
    }
    .wizard-linie-icon img {
        max-width: 40px !important;
        max-height: 40px !important;
    }
    .wizard-linie-name {
        font-size: 15px !important;
    }
}

@media (max-width: 374px) {
    .wizard-produktlinie-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .wizard-linie-card {
        flex-direction: row !important;
        padding: 12px !important;
        gap: 12px !important;
        align-items: center !important;
    }
    .wizard-linie-icon {
        width: 44px !important;
        height: 44px !important;
    }
    .wizard-linie-name {
        font-size: 16px !important;
        text-align: left !important;
    }
}


/* =================================================================
   SERIEN / MODELL GRID
   ================================================================= */
@media (max-width: 767px) {
    .wizard-modell-grid,
    .wizard-serie-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .wizard-modell-card,
    .wizard-serie-card {
        padding: 12px 10px;
        font-size: 13px;
        word-break: break-word;
    }
}

@media (max-width: 374px) {
    .wizard-modell-grid,
    .wizard-serie-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =================================================================
   SPEICHER-GRID
   ================================================================= */
@media (max-width: 767px) {
    .wizard-speicher-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

@media (max-width: 374px) {
    .wizard-speicher-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .wizard-speicher-card {
        padding: 10px 8px;
        font-size: 13px;
    }
}


/* =================================================================
   ZUSTAND-KARTEN
   ================================================================= */
@media (max-width: 767px) {
    .zustand-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .zustand-card {
        padding: 16px;
    }
    .zustand-card h4 {
        font-size: 16px;
    }
    .zustand-card p {
        font-size: 13px;
        line-height: 1.5;
    }
}


/* =================================================================
   FARBEN-GRID
   ================================================================= */
@media (max-width: 767px) {
    .wizard-farbe-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
}

@media (max-width: 374px) {
    .wizard-farbe-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* =================================================================
   PREISBOX / ERGEBNIS
   ================================================================= */
@media (max-width: 767px) {
    .ergebnis-box {
        padding: 20px 16px;
        margin: 8px;
        border-radius: 16px;
    }
    .ergebnis-preis {
        font-size: 36px !important;
    }
    .ergebnis-box h3 {
        font-size: 18px;
    }
}

@media (max-width: 374px) {
    .ergebnis-preis {
        font-size: 30px !important;
    }
    .ergebnis-box {
        padding: 16px 12px;
    }
}


/* =================================================================
   SCHADEN-FRAGEN
   ================================================================= */
@media (max-width: 767px) {
    .frage-row {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
    .frage-label {
        font-size: 14px;
    }
    .frage-row .btn-group {
        width: 100%;
    }
    .frage-row .btn-group .btn {
        flex: 1;
        min-height: 44px;
    }
}


/* =================================================================
   CHECKOUT / FORMULARE
   ================================================================= */
@media (max-width: 767px) {
    .checkout-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .checkout-buttons {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }

    .checkout-buttons .btn-zurueck,
    .checkout-buttons .btn-ankauf,
    .checkout-buttons button,
    .checkout-buttons a {
        width: 100% !important;
        text-align: center !important;
        min-height: 48px;
        font-size: 15px;
    }

    /* Inputs: Touch-friendly */
    .checkout-section input[type="text"],
    .checkout-section input[type="email"],
    .checkout-section input[type="tel"],
    .checkout-section select,
    .checkout-section textarea {
        width: 100% !important;
        min-height: 44px;
        font-size: 16px !important; /* Verhindert iOS-Zoom */
        padding: 10px 14px;
    }

    /* CE-Checkbox sauber */
    .pflicht-checkboxen-section {
        padding: 14px 12px;
    }
    .pflicht-checkboxen-section label {
        font-size: 13px;
        line-height: 1.5;
    }
}


/* =================================================================
   FOTO-UPLOAD
   ================================================================= */
@media (max-width: 767px) {
    .foto-slots {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
}

@media (max-width: 374px) {
    .foto-slots {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .foto-slot {
        min-height: 80px;
    }
}


/* =================================================================
   ZURÜCK-BUTTON
   ================================================================= */
@media (max-width: 767px) {
    .btn-zurueck,
    .wizard-zurueck-btn,
    [onclick*="wizardZurueck"] {
        min-height: 44px;
        font-size: 14px;
        padding: 10px 20px;
    }
}


/* =================================================================
   STICKY PRICE-BOX / SIDEBAR
   ================================================================= */
@media (max-width: 767px) {
    .ankauf-sidebar,
    .price-sticky-box {
        position: static !important;
        width: 100% !important;
        margin-top: 16px;
    }
}

@media (max-width: 900px) {
    .ankauf-layout {
        grid-template-columns: 1fr !important;
    }
}


/* =================================================================
   TRUST BAR
   ================================================================= */
@media (max-width: 767px) {
    .trust-bar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .trust-bar-item {
        padding: 10px 10px;
        gap: 8px;
    }
    .trust-bar-item i {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .trust-bar-item strong {
        font-size: 11px;
    }
}

@media (max-width: 374px) {
    .trust-bar-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .trust-bar-item strong {
        font-size: 10px;
    }
    .trust-bar-item span {
        font-size: 9px;
    }
}


/* =================================================================
   HOW-IT-WORKS
   ================================================================= */
@media (max-width: 767px) {
    .how-steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .how-it-works-section h2 {
        font-size: 22px;
    }
    .how-step {
        padding: 18px 10px 14px;
    }
    .how-step i {
        font-size: 20px;
    }
    .how-step h5 {
        font-size: 13px;
    }
    .how-step p {
        font-size: 11px;
    }
}

@media (max-width: 479px) {
    .how-steps-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .how-step {
        padding: 14px 8px 12px;
    }
}


/* =================================================================
   WHY-CARDS / BENEFITS
   ================================================================= */
@media (max-width: 767px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .why-card {
        padding: 18px 14px;
    }
}

@media (max-width: 479px) {
    .why-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .ankauf-benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
}

@media (max-width: 479px) {
    .ankauf-benefits-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =================================================================
   REVIEWS
   ================================================================= */
@media (max-width: 767px) {
    .reviews-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
}


/* =================================================================
   FAQ
   ================================================================= */
@media (max-width: 767px) {
    .mini-faq-section {
        padding: 32px 0 24px;
    }
    .mini-faq-section h2 {
        font-size: 20px;
    }
    .ankauf-faq-section {
        padding: 40px 16px 32px;
    }
    .ankauf-faq-title,
    .tm24-faq-title {
        font-size: 28px;
    }
}

@media (max-width: 479px) {
    .ankauf-faq-title,
    .tm24-faq-title {
        font-size: 22px;
    }
}


/* =================================================================
   CTA SECTIONS
   ================================================================= */
@media (max-width: 767px) {
    .between-cta-btn {
        padding: 14px 24px;
        font-size: 15px;
        width: 100%;
        max-width: 320px;
    }
    .between-cta-section {
        padding: 20px 16px;
    }
    .final-cta-section h2 {
        font-size: 22px;
    }
    .final-cta-trust {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    .tm24-final-cta {
        min-height: 60px;
        font-size: 22px;
    }
}


/* =================================================================
   PRICE-HINT
   ================================================================= */
@media (max-width: 767px) {
    .price-hint-box {
        padding: 12px 14px;
        flex-direction: column;
        gap: 8px;
    }
}


/* =================================================================
   TRUST BADGES
   ================================================================= */
@media (max-width: 767px) {
    .trust-badges-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

@media (max-width: 479px) {
    .trust-badges-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}


/* =================================================================
   FOOTER
   ================================================================= */
@media (max-width: 767px) {
    .ankauf-footer .row {
        flex-direction: column;
    }
    .ankauf-footer .col-md-4 {
        margin-bottom: 24px;
    }
    .ankauf-footer {
        padding: 32px 16px;
        text-align: center;
    }
}


/* =================================================================
   TOPBAR
   ================================================================= */
@media (max-width: 767px) {
    .ankauf-topbar-inner {
        font-size: 11px;
        gap: 8px;
    }
}

@media (max-width: 479px) {
    .ankauf-topbar-inner {
        font-size: 10px;
        gap: 6px;
    }
    /* Nur die ersten 2 Punkte zeigen, Rest ausblenden */
    .ankauf-topbar-inner span:nth-child(n+3) {
        display: none;
    }
}

@media (max-width: 374px) {
    .ankauf-topbar-inner {
        font-size: 10px;
        gap: 4px;
    }
    /* Nur 1 Punkt zeigen auf sehr kleinen Screens */
    .ankauf-topbar-inner span:nth-child(n+2) {
        display: none;
    }
}


/* =================================================================
   TABLET (768–1023px)
   ================================================================= */
/* Tablet schmal: 768–899px → 2 Spalten */
@media (min-width: 768px) and (max-width: 899px) {
    .brand-grid,
    #marken-grid.brand-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .zustand-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .how-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wizard-produktlinie-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Tablet breit: 900–1023px → 3 Spalten */
@media (min-width: 900px) and (max-width: 1023px) {
    .brand-grid,
    #marken-grid.brand-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .zustand-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .how-steps-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .wizard-produktlinie-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* =================================================================
   LAPTOP (1024–1439px)
   ================================================================= */
@media (min-width: 1024px) and (max-width: 1439px) {
    .container,
    .ankauf-container {
        max-width: 1140px;
    }
}


/* =================================================================
   GROSSER DESKTOP (≥1440px)
   ================================================================= */
@media (min-width: 1440px) {
    .container,
    .ankauf-container {
        max-width: 1320px;
    }
}


/* =================================================================
   PREMIUM MICRO-ANIMATIONS (Responsive-sicher)
   ================================================================= */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.trust-bar-item,
.how-step,
.why-card,
.trust-card {
    animation: fadeInUp 0.5s ease-out both;
}
.trust-bar-item:nth-child(2), .how-step:nth-child(2), .why-card:nth-child(2) { animation-delay: 0.08s; }
.trust-bar-item:nth-child(3), .how-step:nth-child(3), .why-card:nth-child(3) { animation-delay: 0.16s; }
.trust-bar-item:nth-child(4), .how-step:nth-child(4), .why-card:nth-child(4) { animation-delay: 0.24s; }
.how-step:nth-child(5) { animation-delay: 0.32s; }
.how-step:nth-child(6) { animation-delay: 0.40s; }

/* Premium Hover */
.how-step {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(46, 43, 203, 0.06);
}
.why-card {
    border: 1px solid rgba(46, 43, 203, 0.06);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Trust-Bar Gradient */
.trust-bar-section {
    background: linear-gradient(180deg, #fff 0%, #fafafe 100%);
    border-bottom: 1px solid #eef0fb;
}

/* CTA Shimmer */
.between-cta-btn {
    position: relative;
    overflow: hidden;
}
.between-cta-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: btn-shine 3.5s infinite;
}

/* Final-CTA Gradient */
.final-cta-section {
    background: linear-gradient(135deg, #f0f0ff 0%, #e8e7ff 50%, #f0f0ff 100%);
    border-top: 1px solid #e0e0f0;
}

.final-cta-section .hero-cta-btn {
    animation: cta-glow 2.5s ease-in-out infinite;
}

.price-hint-box {
    box-shadow: 0 2px 12px rgba(46, 43, 203, 0.06);
}


/* =================================================================
   SAFARI / WEBKIT FIXES
   ================================================================= */
@supports (-webkit-touch-callout: none) {
    /* iOS: Inputs nicht zoomen bei Fokus */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select {
        font-size: 16px;
    }

    /* Safari Flex-Gap Fix */
    .tm24-header-grid {
        -webkit-gap: 8px;
    }
}


/* =================================================================
   SLIDER (Range Inputs)
   ================================================================= */
@media (max-width: 767px) {
    input[type="range"] {
        width: 100%;
        min-height: 44px;
        -webkit-appearance: none;
    }
}


/* =================================================================
   DROPDOWN / SELECT
   ================================================================= */
@media (max-width: 767px) {
    .wizard-select,
    .ankauf-select,
    select.form-control,
    .checkout-section select {
        width: 100% !important;
        min-height: 44px;
        font-size: 16px;
        padding: 10px 14px;
        -webkit-appearance: none;
        appearance: none;
    }
}


/* =================================================================
   IMEI INFO BOX
   ================================================================= */
@media (max-width: 767px) {
    .imei-info-box {
        font-size: 11px;
        padding: 10px 12px;
    }
}