/* =================================================================
   TM24 ANKAUF – MOBILE OPTIMIERUNGEN (2026-05-12)
   Datei: css/mobile-ankauf.css
   Geladen NACH ankauf-responsive.css – letzte Instanz für Mobile Fixes
   Breakpoints: ≤374 | 375–479 | 480–767
   ================================================================= */

/* =================================================================
   1. GLOBAL – iOS Zoom Prevention
   Input-Felder mit mindestens 16px Schriftgröße
   ================================================================= */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Touch-Targets mindestens 44px */
    button,
    .btn,
    [role="button"],
    a.btn,
    .frage-btn,
    .btn-back,
    .btn-checkout-next,
    .btn-checkout-back,
    .btn-checkout-final {
        min-height: 44px;
    }
}


/* =================================================================
   2. HEADER – Mobile kompakter
   ================================================================= */
@media (max-width: 479px) {
    .ankauf-topbar {
        padding: 6px 0 !important;
    }

    .ankauf-topbar-inner {
        font-size: 10px !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    /* Header-Logo kleiner */
    .tm24-header-logo img {
        max-height: 28px !important;
    }

    .tm24-header-logo .header-brand-text {
        font-size: 20px !important;
    }
}

@media (max-width: 374px) {
    .tm24-header-logo img {
        max-height: 24px !important;
    }
}


/* =================================================================
   3. SECTION HEAD – Mobiloptimiert
   ================================================================= */
@media (max-width: 479px) {
    .tm24-section-head {
        padding: 28px 14px 22px !important;
    }

    .tm24-section-head h2 {
        font-size: 28px !important;
    }

    .tm24-section-badge {
        font-size: 12px !important;
        padding: 7px 14px !important;
        margin-bottom: 10px !important;
    }

    .tm24-section-head p {
        font-size: 15px !important;
        max-width: 280px !important;
    }

    .tm24-section-head__wordmark {
        font-size: 40px !important;
    }
}

@media (max-width: 374px) {
    .tm24-section-head h2 {
        font-size: 24px !important;
    }

    .tm24-section-head__wordmark {
        font-size: 34px !important;
    }
}


/* =================================================================
   4. WIZARD CARD GRID – Hauptfix für abgeschnittene Preise
   Auf Smartphones ≤479px: 1-Spalte, Karten als Zeile
   ================================================================= */
@media (max-width: 599px) {
    .wizard-card-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Generische Cards (Marken etc.) – horizontale Zeile */
    .wizard-card:not(.wizard-card--vertical) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 14px 16px !important;
        gap: 12px !important;
        min-height: 64px !important;
        border-radius: 14px !important;
        overflow: visible !important;
    }

    .wizard-card:not(.wizard-card--vertical) .wizard-card-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        flex-shrink: 0 !important;
        border-radius: 12px !important;
    }

    .wizard-card:not(.wizard-card--vertical) .wizard-card-icon img {
        max-width: 40px !important;
        max-height: 40px !important;
        object-fit: contain !important;
    }

    .wizard-card-name {
        font-size: 18px !important;
        flex: 1 !important;
        min-width: 0 !important;
        word-break: break-word !important;
    }

    .wizard-card-preis {
        font-size: 17px !important;
        white-space: nowrap !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    /* ============================================================
       VERTIKALE CARDS (Modell-Auswahl mit Bildern) – GRID Layout
       Bild links | Name+Preis mitte | Button rechts
       ============================================================ */
    .wizard-card--vertical {
        display: grid !important;
        grid-template-columns: 72px 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "img name  btn"
            "img price btn" !important;
        align-items: center !important;
        gap: 4px 12px !important;
        padding: 16px !important;
        min-height: 100px !important;
        text-align: left !important;
        flex-direction: row !important;
    }

    .wizard-card--vertical .wizard-card-icon {
        grid-area: img !important;
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        margin: 0 !important;
        align-self: center !important;
        border-radius: 12px !important;
    }

    .wizard-card--vertical .wizard-card-icon img {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
        object-fit: contain !important;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08)) !important;
    }

    .wizard-card--vertical .wizard-card-name {
        grid-area: name !important;
        font-size: 20px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        align-self: end !important;
    }

    .wizard-card--vertical .wizard-card-preis {
        grid-area: price !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
        white-space: nowrap !important;
        align-self: start !important;
    }

    .wizard-card--vertical .wizard-card-cta {
        grid-area: btn !important;
        width: auto !important;
        min-width: 120px !important;
        max-width: 150px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
        margin-top: 0 !important;
        white-space: nowrap !important;
        align-self: center !important;
    }

    /* Pfeil-Icon in der Card */
    .wizard-card-arrow {
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================================
   SEHR KLEINE PHONES (≤430px) – Button unter Text
   ============================================================ */
@media (max-width: 430px) {
    .wizard-card--vertical {
        grid-template-columns: 64px 1fr !important;
        grid-template-areas:
            "img name"
            "img price"
            "btn btn" !important;
        gap: 3px 10px !important;
        padding: 14px !important;
    }

    .wizard-card--vertical .wizard-card-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
    }

    .wizard-card--vertical .wizard-card-icon img {
        width: 52px !important;
        height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
    }

    .wizard-card--vertical .wizard-card-name {
        font-size: 18px !important;
    }

    .wizard-card--vertical .wizard-card-preis {
        font-size: 16px !important;
    }

    .wizard-card--vertical .wizard-card-cta {
        width: 100% !important;
        max-width: none !important;
        min-width: unset !important;
        margin-top: 4px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        justify-content: center !important;
    }
}

/* 600–767px: 2-Spalten aber kompakter */
@media (min-width: 600px) and (max-width: 767px) {
    .wizard-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .wizard-card {
        padding: 14px 12px !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    .wizard-card-name {
        font-size: 16px !important;
        word-break: break-word !important;
    }

    .wizard-card-preis {
        font-size: 15px !important;
    }

    /* Vertikale Cards auf Tablet-Phones: column statt row */
    .wizard-card--vertical {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        padding: 18px 14px 14px !important;
        gap: 6px !important;
    }

    .wizard-card--vertical .wizard-card-icon {
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        margin: 0 auto 6px !important;
    }

    .wizard-card--vertical .wizard-card-icon img {
        width: auto !important;
        height: 100px !important;
        max-width: 120px !important;
        max-height: 100px !important;
        object-fit: contain !important;
    }

    .wizard-card--vertical .wizard-card-name {
        font-size: 18px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .wizard-card--vertical .wizard-card-preis {
        font-size: 16px !important;
        font-weight: 900 !important;
        margin: 2px 0 6px !important;
    }

    .wizard-card--vertical .wizard-card-cta {
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        margin-top: 2px !important;
    }

    .wizard-card-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .wizard-card-icon img {
        max-width: 34px !important;
        max-height: 34px !important;
    }
}


/* =================================================================
   5. SPEICHER-KARTEN – Mobile optimiert
   ================================================================= */
@media (max-width: 479px) {
    .wizard-speicher-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .wizard-speicher-card {
        padding: 20px 10px 16px !important;
        border-radius: 14px !important;
    }

    .wizard-speicher-card .wizard-speicher-gb,
    .wizard-speicher-gb {
        font-size: 20px !important;
    }

    .wizard-speicher-card .wizard-speicher-preis,
    .wizard-speicher-preis {
        font-size: 16px !important;
    }
}


/* =================================================================
   6. FARBEN-GRID – Mobile 2 Spalten
   ================================================================= */
@media (max-width: 479px) {
    .wizard-farbe-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .wizard-farbe-name {
        font-size: 14px !important;
    }

    .wizard-farbe-preis {
        font-size: 16px !important;
    }

    .wizard-farbe-kreis {
        width: 36px !important;
        height: 36px !important;
    }
}


/* =================================================================
   7. ZUSTAND-KARTEN – Mobile Fullwidth & lesbar
   ================================================================= */
@media (max-width: 479px) {
    .ankauf-zustand-option {
        padding: 14px 12px !important;
        gap: 10px !important;
    }

    .ankauf-zustand-info strong {
        font-size: 14px !important;
    }

    .ankauf-zustand-info span {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    /* Zustands-Preise: NICHT abschneiden */
    .ankauf-zustand-preis {
        font-size: 16px !important;
        white-space: nowrap !important;
    }

    /* Zustand-Beschreibung im neuen Design */
    .zustand-card {
        padding: 16px 14px !important;
    }

    .zustand-card h4 {
        font-size: 15px !important;
    }

    .zustand-card p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .zustand-preis-display {
        font-size: 18px !important;
    }
}


/* =================================================================
   8. PREISBOX / ERGEBNIS – Mobile prominent
   ================================================================= */
@media (max-width: 479px) {
    .ankauf-preisbox {
        border-radius: 16px !important;
        margin: 0 !important;
    }

    .ankauf-preisbox-betrag {
        font-size: 36px !important;
    }

    .ankauf-preisbox-cta {
        font-size: 16px !important;
        padding: 14px 24px !important;
        width: 100% !important;
        min-height: 48px !important;
    }

    .ergebnis-box {
        padding: 20px 14px !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }

    .ergebnis-preis {
        font-size: 32px !important;
    }
}


/* =================================================================
   9. CHECKOUT – Mobile Formulare
   ================================================================= */
@media (max-width: 479px) {
    .checkout-content {
        border-radius: 14px !important;
        margin: 0 8px !important;
    }

    .checkout-pane-inner {
        padding: 20px 14px !important;
    }

    .checkout-pane-titel {
        font-size: 17px !important;
    }

    .checkout-item-card {
        padding: 14px !important;
        gap: 12px !important;
    }

    .checkout-item-name {
        font-size: 15px !important;
    }

    .checkout-item-preis {
        font-size: 20px !important;
    }

    .checkout-tab {
        padding: 10px 4px !important;
        font-size: 10px !important;
    }

    .checkout-tab-nr {
        width: 22px !important;
        height: 22px !important;
        font-size: 10px !important;
    }

    /* Checkout Buttons fullwidth */
    .checkout-actions {
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }

    .btn-checkout-next,
    .btn-checkout-final,
    .btn-checkout-back {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Auszahlungs-Optionen: 1 Spalte auf kleinstem Handy */
    .auszahlung-optionen {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}


/* =================================================================
   10. FOTO-UPLOAD – Mobile sauber
   ================================================================= */
@media (max-width: 479px) {
    .ankauf-foto-drop-zone {
        padding: 20px 14px !important;
        min-height: 100px !important;
    }

    .ankauf-foto-previews {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
}


/* =================================================================
   11. FRAGEN / DEFEKT-BEREICH – Mobile
   ================================================================= */
@media (max-width: 479px) {
    .fragen-box {
        padding: 20px 14px !important;
    }

    .frage-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .frage-buttons {
        width: 100% !important;
    }

    .frage-btn {
        flex: 1 !important;
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .frage-select {
        width: 100% !important;
        min-width: unset !important;
        min-height: 44px !important;
    }
}


/* =================================================================
   12. HOW-IT-WORKS – Mobile 1x1
   ================================================================= */
@media (max-width: 479px) {
    .how-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .how-step {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 16px !important;
        text-align: left !important;
    }

    .how-step .step-icon,
    .how-step .step-icon-circle {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        font-size: 20px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .how-step h5 {
        margin: 0 0 4px !important;
        font-size: 14px !important;
    }

    .how-step p {
        margin: 0 !important;
        font-size: 12px !important;
    }
}


/* =================================================================
   13. WHY TM24 – Mobile Cards
   ================================================================= */
@media (max-width: 479px) {
    .why-grid,
    .why-tm24-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .why-card,
    .why-tm24-card {
        padding: 16px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
    }

    .why-card .why-icon,
    .why-tm24-card .why-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        font-size: 18px !important;
        flex-shrink: 0 !important;
    }
}


/* =================================================================
   14. TRUST BAR – Mobile optimiert
   ================================================================= */
@media (max-width: 479px) {
    .trust-bar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .trust-bar-item {
        padding: 8px !important;
        gap: 6px !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    .trust-bar-item i {
        font-size: 16px !important;
    }

    .trust-bar-item strong {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .trust-bar-item span {
        display: none !important;
    }
}


/* =================================================================
   15. FOOTER – Mobile 1 Spalte
   ================================================================= */
@media (max-width: 767px) {
    .tm24-footer-main {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 36px 20px 24px !important;
        text-align: center !important;
    }

    .tm24-footer-brand {
        font-size: 28px !important;
    }

    .tm24-footer-text {
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .tm24-footer-links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 16px !important;
    }

    .tm24-footer-links li {
        margin-bottom: 0 !important;
    }

    .tm24-footer-contact {
        text-align: center !important;
    }

    .tm24-footer-bottom {
        font-size: 12px !important;
        padding: 14px 16px !important;
    }
}


/* =================================================================
   16. FAQ SECTION – Mobile sauber
   ================================================================= */
@media (max-width: 479px) {
    .tm24-faq {
        padding: 20px 12px 10px !important;
    }

    .faq-question {
        font-size: 14px !important;
        padding: 14px !important;
    }

    .faq-answer {
        padding: 0 14px 14px !important;
        font-size: 13px !important;
    }
}


/* =================================================================
   17. CTA SECTIONS – Mobile Fullwidth
   ================================================================= */
@media (max-width: 479px) {
    .between-cta-btn {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }

    .final-cta-section h2 {
        font-size: 20px !important;
    }

    .tm24-final-cta,
    .hero-cta-btn {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 18px !important;
        min-height: 52px !important;
    }
}


/* =================================================================
   18. REVIEWS – Mobile Stack
   ================================================================= */
@media (max-width: 479px) {
    .reviews-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .trust-card {
        padding: 16px !important;
    }
}


/* =================================================================
   19. MOBILE STICKY FOOTER – Nicht verdecken
   ================================================================= */
@media (max-width: 767px) {
    .ankauf-mobile-footer {
        padding: 10px 16px !important;
        gap: 8px !important;
    }

    .ankauf-mobile-footer-preis {
        font-size: 18px !important;
    }

    .ankauf-mobile-footer-cta {
        font-size: 14px !important;
        padding: 10px 20px !important;
        min-height: 44px !important;
    }

    /* Inhalt nicht hinter Sticky-Footer verstecken */
    body.has-mobile-footer {
        padding-bottom: 80px !important;
    }
}


/* =================================================================
   20. B2B BANNER – Mobile sauber
   ================================================================= */
@media (max-width: 479px) {
    .b2b-banner {
        padding: 24px 16px !important;
        text-align: center !important;
    }

    .b2b-banner h3 {
        font-size: 20px !important;
    }

    .b2b-cta-btn {
        width: 100% !important;
        font-size: 15px !important;
        padding: 14px 24px !important;
    }
}


/* =================================================================
   21. COOKIE BANNER – Mobile optimiert
   ================================================================= */
@media (max-width: 479px) {
    .cookie-content {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    .cookie-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .cookie-btn-accept,
    .cookie-btn-reject {
        width: 100% !important;
        min-height: 44px !important;
    }
}


/* =================================================================
   22. WHATSAPP FLOAT – Mobile kleiner
   ================================================================= */
@media (max-width: 479px) {
    .whatsapp-float {
        width: 48px !important;
        height: 48px !important;
        font-size: 24px !important;
        bottom: 14px !important;
        right: 14px !important;
    }
}


/* =================================================================
   23. SEARCH BOX – Mobile prominent
   ================================================================= */
@media (max-width: 767px) {
    .suche-wrapper {
        margin: 16px auto 0 !important;
        padding: 0 4px !important;
    }

    .suche-input {
        font-size: 16px !important;
        padding: 14px 16px 14px 46px !important;
    }

    .suche-ergebnisse {
        max-height: 300px !important;
    }

    .suche-item {
        padding: 12px 14px !important;
    }
}


/* =================================================================
   24. OVERFLOW-SCHUTZ – Letzte Sicherheitsebene
   ================================================================= */
@media (max-width: 767px) {
    /* Verhindere Overflow durch zu breite Elemente */
    .wizard-speicher-card,
    .wizard-farbe-card,
    .brand-card,
    .how-step,
    .why-card,
    .trust-card,
    .ankauf-zustand-option,
    .checkout-content,
    .ergebnis-box,
    .fragen-box {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* wizard-card: KEIN overflow:hidden, sonst Preise abgeschnitten */
    .wizard-card {
        max-width: 100% !important;
        overflow: visible !important;
    }

    /* Lange Texte umbrechen */
    .wizard-card-name,
    .wizard-farbe-name,
    .checkout-item-name {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Preise nie umbrechen */
    .wizard-card-preis,
    .wizard-farbe-preis,
    .wizard-speicher-preis,
    .ergebnis-preis,
    .ankauf-zustand-preis,
    .zustand-preis-display {
        white-space: nowrap !important;
        overflow: visible !important;
    }
}


/* =================================================================
   25. FLYER HERO – Mobile Fix
   ================================================================= */
@media (max-width: 479px) {
    .flyer-hero {
        padding: 24px 14px !important;
        min-height: auto !important;
    }

    .flyer-hero h1,
    .flyer-hero-title {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    .flyer-hero-sub {
        font-size: 14px !important;
    }

    .flyer-hero-cta {
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px 24px !important;
    }
}


/* =================================================================
   26. LANDSCAPE MODE – Querformat
   ================================================================= */
@media (max-height: 500px) and (orientation: landscape) {
    .ankauf-topbar {
        padding: 4px 0 !important;
    }

    .tm24-section-head {
        padding: 20px 14px 16px !important;
    }

    .ankauf-hero {
        min-height: auto !important;
        padding: 20px !important;
    }
}