/* ============================================================================
   MBROS – mobile Basis für alle Seiten
   ----------------------------------------------------------------------------
   Diese Datei ist die gemeinsame Grundlage für iPhone und Android. Sie wird
   von den geteilten Kopf-Bausteinen geladen:
     - modules/ui_shell.php   -> mbros_ui_assets()  (Seiten mit pwa_head)
     - modules/lisa_desk.php  -> mbros_lisa_page_start()  (Lisa-Seiten)

   WICHTIG – Prinzip dieser Datei:
   Hier stehen ausschliesslich Element-Regeln (img, input, table, ...) und
   sehr wenige, tief spezifische Regeln. Jede seiteneigene Regel
   (z. B. .meineKlasse { ... } oder #id { ... }) gewinnt automatisch dagegen.
   Darum kann diese Datei gefahrlos auf allen Seiten geladen werden, auch auf
   Seiten, die noch nie für Mobil angepasst wurden.
   Layout-Anpassungen einzelner Seiten gehören weiterhin in die Seite selbst.
   ========================================================================== */

/* --- 1. Grundlagen ------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;   /* kein automatisches Aufblasen im Querformat */
    text-size-adjust: 100%;
}

img, svg, video, canvas, iframe {
    max-width: 100%;                  /* nichts läuft seitlich aus dem Bild */
}

pre, code {
    max-width: 100%;
    overflow-x: auto;                 /* Code scrollt, statt die Seite zu sprengen */
}

input, select, textarea {
    max-width: 100%;
}

table {
    max-width: 100%;
}

/* --- 2. Bedienung -------------------------------------------------------- */
:focus-visible {
    outline: 2px solid #1565a8;
    outline-offset: 2px;
}

/* --- 3. Telefon (iPhone + Android) --------------------------------------- */
@media screen and (max-width: 767px) {

    /* iOS zoomt automatisch in Eingabefelder unter 16px hinein – das verhindert
       es. Seiten mit eigener Schriftgrösse (Klassen) bleiben unberührt. */
    input, select, textarea {
        font-size: 16px;
    }

    /* In Tabellen bleibt die bisherige Schriftgrösse: dort ist Platz knapp. */
    table input, table select, table textarea {
        font-size: inherit;
    }

    /* Fingerfreundliche Knöpfe (Apple 44pt / Material 48dp). */
    .btn, button, input[type="submit"], input[type="button"], input[type="reset"] {
        min-height: 44px;
        touch-action: manipulation;    /* kein Doppeltipp-Zoom auf Knöpfen */
    }

    /* Ausnahme: dichte Tabellenzeilen behalten ihre kleinen Knöpfe. */
    table .btn, table button,
    table input[type="submit"], table input[type="button"], table input[type="reset"] {
        min-height: 0;
    }

    /* Notch und Home-Indikator im Querformat (0 auf Geräten ohne Notch). */
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}