/* frontend/public/css/mobile.css
   ---------------------------------------------------------------------------
   Mobil-Ebene fuer die Website. Wird als LETZTES Stylesheet geladen und
   gewinnt damit gegen die verstreuten Regeln in header.css, footer.css,
   responsive.css und den Seiten-Stylesheets.

   Alles steht in Media-Queries - nichts darf auf den Desktop durchschlagen.
   --------------------------------------------------------------------------- */

/* iOS Safari vergroessert Text beim Drehen ins Querformat automatisch
   ("text auto-sizing"). Das liess die Seite dort viel zu gross wirken. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Aktive Seite auch im Footer kenntlich machen (Klasse setzt mobile-ui.js).
   Bewusst ausserhalb der Media-Query: gilt auch am Desktop. */
footer .footer-nav a.active {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

@media (max-width: 900px) {

    /* ── 1) Nichts laeuft ueber den Rand ──────────────────────────────── */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }

    /* ── 2) Kopfzeile und Burger ──────────────────────────────────────── */
    body > header,
    header:not(.shop-header):not(.admin-header) {
        position: relative;
        z-index: 1600;          /* ueber der Verdunkelung des Menues */
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .5rem .8rem;
        flex-wrap: wrap;
    }

    header .logo img,
    header .admin-logo-img {
        max-height: 36px;
        width: auto;
    }

    /* Der Burger hat weisse Balken - auf hellem Grund waere er unsichtbar.
       Deshalb eigener Rahmen und ausreichend grosse Tap-Flaeche. */
    /* Die Balken sind im Original weiss - auf heller Kopfzeile unsichtbar.
       currentColor nimmt die Textfarbe der Kopfzeile und passt immer. */
    .burger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        width: 36px;
        height: 36px;
        margin-left: auto;
        padding: 0;
        color: inherit;
        border: 1px solid currentColor;
        border-radius: 10px;
        background: transparent;
        opacity: .85;
    }

    .burger div {
        width: 17px;
        height: 2px;
        background-color: currentColor !important;
    }

    /* ── 3) Navigation ─────────────────────────────────────────────────
       Bewusst OHNE Abhaengigkeit von der Klasse .active: Je nach Skript
       traegt mal das <nav>, mal die Liste die Klasse. Die Regeln gelten
       daher fuer den Container generell - sichtbar wird er ohnehin erst,
       wenn das Skript ihn einblendet. */
    header nav {
        display: none;
    }

    /* WICHTIG: jede Variante als EIGENE Regel. Kennt ein Browser einen
       Selektor in einer Liste nicht (z.B. :has()), verwirft er die ganze
       Regel - dann fehlte display:block und das Menue blieb unsichtbar. */
    header nav.active {
        display: block !important;
    }

    header nav .nav-links.active {
        display: block !important;
    }

    header nav[style*="block"] {
        display: block !important;
    }

    /* Container: im Fluss unter der Kopfzeile, weisser Grund */
    header nav {
        position: static !important;
        float: none !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        max-height: 75vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        order: 10;
        margin: .4rem 0 0;
        padding: .3rem !important;
        background: #fff !important;
        border: 1px solid var(--c-border);
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    }

    /* Liste immer als Spalte - als Flex-Zeile liefen die Eintraege
       nach rechts aus dem Bild, sichtbar blieb nur der erste. */
    header .nav-links,
    header ul.nav-links {
        display: block !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        background: transparent !important;
    }

    header .nav-links > li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        white-space: normal !important;
    }

    header .nav-links > li + li {
        border-top: 1px solid #f1f5f9;
    }

    /* responsive.css faerbt die Links weiss (fuer den blauen Balken) -
       auf weissem Grund waeren sie unsichtbar. */
    /* Sehr hohe Spezifitaet: sowohl responsive.css (.nav-links > li > a)
       als auch die Theme-CSS (body > header .nav-links > li > a mit
       !important) faerben die Links WEISS. Zusaetzlich -webkit-text-fill-color,
       weil diese Eigenschaft auf iOS die Farbe ueberschreibt. */
    html body header nav .nav-links a,
    html body header nav .nav-links li a,
    html body header nav .nav-links > li > a,
    html body header nav .nav-dropdown a {
        display: block !important;
        width: 100% !important;
        padding: .75rem .7rem !important;
        font-size: 1rem !important;
        line-height: 1.3;
        white-space: normal !important;
        color: var(--c-text) !important;
        -webkit-text-fill-color: var(--c-text) !important;
        background: transparent !important;
        border-bottom: 0 !important;
        text-shadow: none !important;
    }

    html body header nav .nav-links li.active > a {
        color: var(--c-primary) !important;
        -webkit-text-fill-color: var(--c-primary) !important;
        font-weight: 700;
    }

    /* Untermenue im Fluss */
    header .nav-dropdown {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 .3rem 1rem !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #f9fafb !important;
    }

    header .nav-dropdown.mob-open {
        display: block !important;
    }

    /* Der Klickfaenger wird jetzt von mobile-ui.js erzeugt. */

    /* ── 4) Seiteninhalte einspaltig ──────────────────────────────────── */
    main {
        padding: 0 .7rem;
        box-sizing: border-box;
    }

    .contact-layout,
    main .home-features,
    .home-hero,
    .fe-partner-grid,
    .ref-grid,
    .dl-page,
    .cform-row,
    .cform-row-2 {
        display: block !important;
        width: 100%;
        max-width: 100%;
    }

    /* Karten-Raster: zwei Spalten, auf sehr schmalen Geraeten eine */
    .fe-partner-grid,
    .ref-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: .7rem;
    }

    main .home-features {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .8rem;
    }

    .feature {
        width: auto !important;
        max-width: 100%;
    }

    /* Downloads: Kategorienleiste ueber den Inhalt statt daneben */
    .dl-cat-nav {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin-bottom: .8rem;
    }

    .dl-cat-nav a {
        flex: 1 1 auto;
        text-align: center;
        padding: .5rem .6rem;
        font-size: .82rem;
    }

    .dl-main {
        width: 100%;
    }

    /* ── 5) Kontaktformular ───────────────────────────────────────────── */
    .cform-group input:not([type="radio"]):not([type="checkbox"]),
    .cform-group select,
    .cform-group textarea {
        width: 100% !important;
        box-sizing: border-box;
        font-size: 1rem;            /* verhindert das Zoomen beim Tippen (iOS) */
    }

    /* Kein flex: Der Satz enthaelt einen Link, dadurch wuerde jeder Textteil
       zu einem eigenen Flex-Element und der Satz in Bloecke zerfallen. */
    .cform-check-label {
        display: block !important;
        text-align: left;
        line-height: 1.4;
        font-size: .85rem;
    }

    .cform-check-label input[type="checkbox"] {
        float: left;
        margin: .15rem .5rem 0 0 !important;
    }

    .cform-group input[type="checkbox"],
    .cform-group input[type="radio"] {
        width: 20px !important;
        min-width: 20px;
        height: 20px;
        margin: .15rem 0 0 !important;
        flex: 0 0 auto;
    }

    .contact-layout {
        padding: 1.2rem .2rem 2rem !important;
        gap: 1.2rem !important;
        max-width: 100% !important;
    }

    .contact-info {
        position: static !important;
        width: 100%;
    }

    .cform-btn {
        width: 100%;
        padding: .8rem !important;
        font-size: .95rem !important;
    }

    /* ── 6) Ueberschriften und Textmasse ──────────────────────────────── */
    h1 { font-size: 1.45rem !important; }
    h2 { font-size: 1.2rem !important; }
    h3 { font-size: 1.05rem !important; }

    .about-header,
    .career-header,
    .ref-header,
    .dl-header,
    .imprint-header {
        padding: .8rem .6rem !important;
    }

    /* ── 7) Tabellen umbrechen statt abschneiden ──────────────────────── */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── 8) Footer flach ──────────────────────────────────────────────── */
    body > footer {
        padding: .6rem .6rem !important;
    }

    /* responsive.css stellt die Links auf Spalte - das kostet viel Hoehe */
    body > footer .footer-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: .2rem .8rem;
        margin: 0 0 .2rem;
        padding: 0;
    }

    body > footer .footer-nav a {
        padding: .15rem .1rem !important;
        font-size: .85rem !important;
    }

    body > footer .footer-container {
        padding: 0 !important;
    }

    body > footer .footer-nav a {
        font-size: .85rem;
        white-space: nowrap;
    }

    body > footer p {
        margin: .2rem 0 !important;
        font-size: .74rem;
        line-height: 1.3;
        text-align: center;
    }
}

@media (max-width: 380px) {
    .fe-partner-grid,
    .ref-grid {
        grid-template-columns: 1fr !important;
    }
}