/* ============================================
   RESPONSIVE DESIGN – GOLDANKAUF LANDINGPAGE
============================================ */

/* ---------- Tablet (max 900px) ---------- */
@media (max-width: 900px) {

    .mini-menu {
        top: 18px;
        gap: 20px;
    }

    .mini-menu a {
        font-size: 1.1rem;
        padding: 8px 16px;
    }

    .hero-center h1 {
        font-size: 2.2rem;
    }

    .hero-left,
    .hero-right {
        padding: 20px 28px;
        font-size: 1.1rem;
    }

    .hero-left { left: 20px; }
    .hero-right { right: 20px; }

    .hero-bottom {
        font-size: 0.9rem;
        bottom: 15px;
    }
}

/* ---------- Smartphone (max 600px) ---------- */
@media (max-width: 600px) {

    .mini-menu {
        top: 15px;
        gap: 12px;
    }

    .mini-menu a {
        font-size: 0.95rem;
        padding: 6px 12px;
    }

    .hero-center h1 {
        font-size: 1.8rem;
    }

    .hero-left,
    .hero-right {
        padding: 18px 22px;
        font-size: 1rem;
    }

    .hero-left { left: 10px; }
    .hero-right { right: 10px; }

    .hero-bottom {
        font-size: 0.8rem;
        bottom: 12px;
        padding: 0 10px;
    }
}

/* ---------- Very Small Devices (max 400px) ---------- */
@media (max-width: 400px) {

    .mini-menu {
        top: 12px;
        gap: 10px;
    }

    .mini-menu a {
        font-size: 0.85rem;
        padding: 5px 10px;
    }

    .hero-center h1 {
        font-size: 1.5rem;
    }

    .hero-left,
    .hero-right {
        padding: 15px 18px;
        font-size: 0.9rem;
    }

    .hero-left { left: 8px; }
    .hero-right { right: 8px; }

    .hero-bottom {
        font-size: 0.75rem;
        bottom: 10px;
    }
}