/* =====================================================================
   Me-Ma-Tec Joomla Template - responsive.css
   Mobile-first Anpassungen / Breakpoints
   ===================================================================== */

/* ---------- Grosse Tablets / kleine Desktops (< 992px) ---------- */
@media (max-width: 991px) {
    .leistungen-grid,
    .usp-grid,
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-columns {
        grid-template-columns: 1fr;
    }

    /* Sidebar unter den Inhalt */
    .main-layout {
        flex-direction: column;
    }
    .mematec-sidebar {
        flex: 1 1 auto;
        width: 100%;
    }

    h1 { font-size: 2.1rem; }
    .mematec-intro h1,
    .mematec-intro h2 { font-size: 1.7rem; }

    .hero-parallelogram { width: 60%; }
}

/* ---------- Tablets / Mobile-Navigation (< 768px) ---------- */
@media (max-width: 767px) {

    /* Hamburger sichtbar */
    .nav-toggle {
        display: block;
    }

    /* Navigation als Off-Canvas / Dropdown */
    .header-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--mematec-white);
        box-shadow: var(--mematec-shadow-hover);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        z-index: 999;
    }
    .header-nav.is-open {
        max-height: 80vh;
        overflow-y: auto;
    }

    .header-nav ul.mod-menu,
    .header-nav ul.menu,
    .header-nav ul.nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 0;
    }
    .header-nav a,
    .header-nav .nav-header {
        padding: 14px 24px;
        border-bottom: 1px solid var(--mematec-border);
    }

    /* Untermenues im Mobile: normaler Fluss */
    .header-nav li ul {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-top: none;
        min-width: 0;
        background: var(--mematec-light);
        padding: 0;
        display: none;
    }
    .header-nav li.open > ul {
        display: block;
    }
    .header-nav li ul a {
        padding-left: 40px;
    }

    /* Mobile-Submenu-Toggle */
    .header-nav li.has-children > a {
        position: relative;
    }
    .header-nav li.has-children > .submenu-toggle {
        position: absolute;
        right: 10px;
        top: 6px;
        background: transparent;
        border: none;
        color: var(--mematec-dark);
        font-size: 1.2rem;
        padding: 8px 12px;
        cursor: pointer;
    }

    .header-inner {
        position: relative;
        min-height: 70px;
    }
    .header-logo img { max-height: 46px; }

    /* Grids einspaltig */
    .leistungen-grid,
    .usp-grid,
    .footer-columns {
        grid-template-columns: 1fr;
    }

    /* Topbar zentriert */
    .topbar-inner {
        justify-content: center;
        gap: 14px;
        text-align: center;
    }
    .topbar-contact {
        justify-content: center;
        gap: 14px;
    }

    /* Abschnitts-Abstaende reduzieren */
    .mematec-intro,
    .mematec-leistungen,
    .mematec-main,
    .mematec-usp,
    .mematec-cta,
    .mematec-footer { padding-top: 40px; padding-bottom: 40px; }
    .mematec-footer { padding-bottom: 0; }

    .hero-parallelogram { width: 75%; opacity: 0.85; }

    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .mematec-footer-bottom ul { justify-content: center; }

    /* Sticky-Header auf Mobile deaktivieren fuer bessere UX */
    .mematec-header.sticky-enabled.is-sticky {
        position: relative;
    }
}

/* ---------- Kleine Smartphones (< 480px) ---------- */
@media (max-width: 479px) {
    body { font-size: 15px; }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
    .container { padding-left: 15px; padding-right: 15px; }
    .mematec-card { padding: 24px 20px; }
    .topbar-item span { font-size: 0.82rem; }
    .btn, .button { padding: 12px 24px; width: 100%; text-align: center; }
    .back-to-top { bottom: 18px; right: 18px; }
}