/* =============================================================================
   Radl Shop Weis – mobile.css
   Lädt nach screen.css – überschreibt und ergänzt für mobile Geräte
   ============================================================================= */


/* -------------------------
   HAMBURGER-BUTTON (immer versteckt auf Desktop)
   ------------------------- */
.hamburger {
    display: none;
}


/* =============================================================================
   BREAKPOINT: Tablet / kleiner Desktop  (max-width: 1024px)
   ============================================================================= */
@media (max-width: 1024px) {

    .hero-title {
        font-size: 36px;
    }

    .section-heading {
        font-size: 28px;
    }

    .leasing-box {
        padding: var(--spacing-md);
    }
}


/* =============================================================================
   BREAKPOINT: Tablet / großes Handy  (max-width: 768px)
   ============================================================================= */
@media (max-width: 768px) {

    /* ── Scroll-Offset ── */
    section[id] {
        scroll-margin-top: 72px;
    }

    /* ── Abstände ── */
    .brands,
    .service,
    .leasing,
    .contact {
        padding-block: var(--spacing-2xl);
    }

    .section-header {
        margin-bottom: var(--spacing-lg);
    }

    /* ── Hamburger-Button einblenden ── */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 200;
        flex-shrink: 0;
    }

    .hamburger-line {
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--color-dark);
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Hamburger → X wenn geöffnet */
    .hamburger--active .hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .hamburger--active .hamburger-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .hamburger--active .hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* ── Navigation: ausklappbar ── */
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background-color: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        padding: 0 var(--container-pad);
        z-index: 99;
    }

    .main-nav--open {
        display: flex;
    }

    .nav-link {
        font-size: var(--font-size-sm) !important;
        padding: 16px 0;
        border-bottom: 1px solid var(--color-border);
        width: 100%;
    }

    .nav-link:last-child {
        border-bottom: none;
    }

    /* ── Hero ── */
    .hero-title {
        font-size: 28px;
    }

    .hero-desc {
        font-size: var(--font-size-sm);
    }

    /* ── Karussell ── */
    .carousel-track {
        aspect-ratio: 4 / 3;
    }

    .carousel-btn {
        width: 32px;
        height: 32px;
    }

    /* ── Service-Karten ── */
    .service-card {
        padding: var(--spacing-md);
    }

    /* ── Leasing ── */
    .leasing-box {
        padding: var(--spacing-md);
    }

    .leasing-box h3 {
        font-size: var(--font-size-md);
    }

    /* ── Kontakt ── */
    .contact-card {
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--color-border);
    }

    .contact-card:last-child {
        border-bottom: none;
    }

    /* ── Footer ── */
    .site-footer {
        padding-top: var(--spacing-xl);
    }

    .footer-brand > p {
        max-width: 100%;
    }
}


/* =============================================================================
   BREAKPOINT: Smartphone  (max-width: 480px)
   ============================================================================= */
@media (max-width: 480px) {

    /* ── Schriftgrößen ── */
    .hero-title {
        font-size: 24px;
        line-height: 1.2;
    }

    .section-heading {
        font-size: 22px;
    }

    .section-heading-sm {
        font-size: var(--font-size-md);
    }

    /* ── Hero ── */
    .hero .container {
        padding-block: var(--spacing-xl);
    }

    .hero-feature-text strong {
        font-size: var(--font-size-sm);
    }

    /* ── Karussell ── */
    .carousel-track {
        aspect-ratio: 1 / 1;
    }

    .carousel-btn--prev { left: 8px; }
    .carousel-btn--next { right: 8px; }

    /* ── Marken ── */
    .brands-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xs);
    }

    .brand-box {
        width: 100%;
        height: 90px;
    }

    /* ── Leasing Vorteile ── */
    .check-list li {
        font-size: var(--font-size-xs);
    }

    /* ── Kontakt Telefon ── */
    .contact-phone {
        font-size: var(--font-size-lg);
    }

    /* ── Footer ── */
    .footer-logo span {
        font-size: var(--font-size-md);
    }

    .footer-bottom p {
        font-size: 12px;
    }
}