/* ================================================================
   MOBILE.CSS  –  Performance & Mobile-Optimierungen
   Wird als LETZTES CSS geladen (nach allen Section-CSS).
   ================================================================ */
@import url('../css/variables.css?v=2');

/* ── GPU-Compositing für scrollende Animationen ──────────────── */
.promo-bar__track,
.hr-track {
    will-change: transform;
    transform: translateZ(0);
}

/* ── Promo-Bar: kompakter auf kleinen Bildschirmen ── */
@media (max-width: 600px) {
    .promo-bar__item {
        padding: 0 1.4rem;
        font-size: 0.82rem;
    }
}

/* ── Generelle Touch-UX ──────────────────────────────────────── */
@media (max-width: 1050px) {
    /* Kein blauer Highlight-Blitz beim Tippen */
    a, button, [role="button"] {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.04);
    }

    /* Smooth-Scroll für die gesamte Seite */
    html { scroll-behavior: smooth; }
}

/* ── Badges: Animation auf Mobile verlangsamen ───────────────── */
@media (max-width: 768px) {
    .contact-location__badge--main {
        animation-duration: 3s, 5s;
    }
    .contact-location__badge--branch {
        animation-duration: 4s;
    }
}

/* ── Prefers-Reduced-Motion: ALLE Animationen deaktivieren ───── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:       0.01ms !important;
        animation-iteration-count: 1     !important;
        transition-duration:      0.05ms !important;
        scroll-behavior:          auto   !important;
    }

    /* Promo-Bar: statisch halten */
    .promo-bar__track {
        animation: none !important;
    }

    /* Review-Marquee: scrollbar statt Auto-Scroll */
    .hr-track {
        animation: none !important;
        overflow-y: auto;
        max-height: 200px;
    }
}

/* ── Bilder: Layout-Shift verhindern ─────────────────────────── */
img {
    height: auto;
    max-width: 100%;
}

/* ── Keine horizontale Überlaufzone auf der Seite ────────────── */
html {
    background: #07192f;
    overscroll-behavior-y: none;
}

/* ── Skalierung für sehr große Monitore (4K, 5K, Ultrawide) ─── */
@media (min-width: 2000px) {
    html { font-size: 20px; }   /* 16px * 1.25 = 20px → ~125% */
}

@media (min-width: 2800px) {
    html { font-size: 22px; }   /* 5K / Ultrawide leicht größer */
}

body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
    background: #07192f;
    overscroll-behavior-y: none;
}

/* Sektionen: horizontalen Überlauf lokal abfangen */
section,
.hero-section,
.promo-section,
.benefits-section,
.license-section,
.pricing-section,
.first-aid-section,
.truck-license-section,
.absolventen-section,
.contact-section,
.faq-section {
    overflow-x: hidden;
}

/* ── Benefits-Bild: feste Höhe auf Mobile lockern ────────────── */
@media (max-width: 768px) {
    .benefits-image {
        max-height: 320px;
        object-fit: cover;
        width: 100%;
    }
}

/* ── License-Cards: keine feste Höhe auf kleinen Geräten ──────── */
@media (max-width: 600px) {
    .license-card {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* ── Absolventen / Team: Raster auf Mobile ────────────────────── */
@media (max-width: 480px) {
    /* Sicherstellen dass alle Text-Größen mindestens 14px sind */
    .hr-text    { font-size: 0.875rem; }
    .hr-author  { font-size: 0.875rem; }
    .hr-time    { font-size: 0.75rem;  }

    .map-placeholder { font-size: 0.875rem; }

    /* Footer Ortsinformationen */
    .footer-location__addr  { font-size: 0.85rem; }
    .footer-tagline         { font-size: 0.85rem; }
}