/*
 * Mobile/Tablet-Optimierungen.
 * Alle Regeln liegen bewusst in Media Queries < 1024px,
 * damit die Desktop-Darstellung (>= 1024px) unverändert bleibt.
 * Wird nach den seitenspezifischen <style>-Blöcken geladen.
 */

/* ── Tablet & Mobile (< 1024px) ── */
@media (max-width: 1023px) {
    /* Hero-Text darf nicht über den orangen Balken (80px) liegen */
    .hero-body {
        padding-left: calc(80px + 2rem);
        padding-right: 2rem;
    }

    /* Lange Wörter/URLs umbrechen statt horizontal überlaufen */
    .hero h1,
    .sh-title,
    .cta-headline,
    .branche h3,
    .doc-wrap h2,
    .page-header h1 {
        overflow-wrap: break-word;
    }

    /* Grid-Kinder dürfen schrumpfen (verhindert Überlauf auf NIS-2) */
    .intro-grid > *,
    .praxis-grid > *,
    .komp-body > *,
    .branchen-grid > * {
        min-width: 0;
    }
}

/* ── Smartphone (<= 640px) ── */
@media (max-width: 640px) {
    /* Hero: Balken 40px + Abstand */
    .hero-body {
        padding-left: calc(40px + 1.25rem);
        padding-right: 1.25rem;
    }
    .hero-eyebrow {
        margin-bottom: 1.5rem;
    }
    .hero h1 {
        margin-bottom: 1.75rem;
    }
    .hero-buttons a {
        text-align: center;
    }

    /* Sektionen: etwas weniger Leerraum oben/unten */
    .s-branchen,
    .s-komp,
    .s-leist,
    .s-trans,
    .s-faq,
    .s-intro {
        padding-top: 4rem;
        padding-bottom: 4rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .sh {
        margin-bottom: 2rem;
    }

    /* Startseite – Leistungen: Beschreibung + Link-Wrapper in Spalte 2 */
    .leist-row > :nth-child(n+3) {
        grid-column: 2;
        min-width: 0;
    }
    .leist-row:hover {
        margin: 0;
        padding: 2rem 0;
    }

    /* Startseite – "Außerdem im Portfolio": Name über Beschreibung */
    .leist-more-item {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    /* Startseite – Branchen-Hinweis */
    .branchen-note {
        padding: 1.5rem 1.25rem;
        gap: 1rem;
    }
    .branchen-note p {
        flex-basis: 100%;
    }

    /* Startseite – Transparenz-Kacheln */
    .trans-cell {
        padding: 2rem 1.5rem;
    }

    /* Zertifikats-Raster: breites ISO-Zertifikat nicht zu hoch */
    .cert-tile--wide {
        height: 160px;
    }
    .cert-tile--wide img {
        max-height: 140px;
        max-width: 100%;
    }

    /* NIS-2 – Faktenkarte: Label über Text */
    .fact-card {
        padding: 1.5rem 1.25rem 1rem;
    }
    .fact-card dl > div,
    .praxis-card dl > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
    .praxis-card {
        padding: 1.5rem 1.25rem 1rem;
    }

    /* FAQ-Zeilen: schmalere Marker-Spalte */
    .faq-row {
        grid-template-columns: 24px 1fr;
        gap: 1rem;
    }

    /* Mobiles Menü: größere Tippfläche */
    #mobile-menu a {
        padding: 0.85rem 0;
    }
    .nav-toggle {
        padding: 10px;
    }

    /* Lange Links (z. B. Datenschutz) umbrechen */
    main a,
    p a,
    li a,
    dd a {
        overflow-wrap: anywhere;
    }
}

/* ── Sehr schmale Geräte (<= 400px, z. B. iPhone SE) ── */
@media (max-width: 400px) {
    /* CTA-Buttons dürfen umbrechen statt aus dem Bild zu laufen */
    .btn-orange {
        white-space: normal;
        max-width: 100%;
        text-align: center;
    }
    /* Lange Überschriften auf Rechtsseiten (z. B. Impressum) */
    .doc-wrap h2 {
        max-width: 100%;
    }
}