/*
 * responsive.css – Breakpoints
 * Praxis Wagenseil Joomla 6 Template v2.5
 */

/* ─── Tablet (≤ 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
    :root {
        --container-pad: 60px;
        --section-padding: 60px;
    }

    .site-header__inner  { padding: 24px var(--container-pad); }
    .topbar__inner       { padding: 0 var(--container-pad); }
    .section__inner      { padding-inline: var(--container-pad); }

    .site-footer__inner       { padding: 60px var(--container-pad); }
    .site-footer__bottom-inner { padding-inline: var(--container-pad); }

    .sprechzeiten-grid { grid-template-columns: 1fr; }
    .kontakt-grid      { grid-template-columns: 1fr; }
    .site-footer__grid { grid-template-columns: repeat(2, 1fr); }

    .hero { background-position: center center, 0% 0px; }
}

/* ─── Mobile (≤ 767px) ──────────────────────────────────────── */
@media (max-width: 767px) {
    :root {
        --container-pad:   5px;
        --section-padding: 32px;
    }

    .site-header__inner {
        padding: 0 var(--container-pad);
        justify-content: space-between;
    }

    .topbar .container { padding-inline: var(--container-pad); }

    .site-header__logo { width: 70%; }

    .nav-toggle {
        display: flex;
        width: 17%;
        justify-content: flex-end;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-primary);
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-4);
        box-shadow: var(--shadow-lg);
        border-top: 1px solid #5F9CD1;
        gap: 0;
    }

    .main-nav.is-open { display: flex; }
    .main-nav ul      { flex-direction: column; gap: 0; }
    .main-nav ul li   { margin: 0; }

    .main-nav ul li ul {
        position: static;
        box-shadow: none;
        display: flex;
        padding-left: var(--space-4);
    }

    .hero {
        background-image:
            linear-gradient(0deg, #3B7FBC00 0%, #3B7FBC 18%),
            url('../images/hero-background-mobile.png');
        background-position: center center, 100% 594px;
        background-size: cover, 100% auto;
        padding-top: 16px;
        padding-bottom: 200px;
    }

    .hero__content  { max-width: 100%; }
    .hero__title    { font-size: 34px; line-height: 1.4; }
    .hero__label,
    .hero__text     { font-size: 16px; }

    .team-grid          { grid-template-columns: repeat(2, 1fr); }
    .site-footer__grid  { grid-template-columns: 1fr; gap: var(--space-8); }

    .angebot-accordion summary              { font-size: 16px; }
    .angebot-accordion__content ul li       { font-size: 16px; }

    .hero__actions,
    .sprechzeiten-actions { flex-direction: column; align-items: flex-start; }

    .btn { font-size: 16px; }

    .sprechzeiten-card      { padding: var(--space-6); }
    .section--hinweise      { padding-block: var(--space-8); }
}

/* ─── Klein-Mobile (≤ 480px) ────────────────────────────────── */
@media (max-width: 480px) {
    .team-grid          { grid-template-columns: 1fr; }
    .kontakt-map iframe { height: 250px; }
}

/* ─── Print ──────────────────────────────────────────────────── */
@media print {
    .topbar, .site-header, .nav-toggle,
    .hero__actions, .sprechzeiten-actions,
    .sprechzeiten-cta, .site-footer { display: none; }
    body  { font-size: 12pt; color: #000; }
    a     { color: #000; text-decoration: none; }
}