/* ===========================================================================
   Gemeinsame Grundregeln fuer schmale Bildschirme (Handy, Hochkant-Tablet).

   Wichtig: Alles steht innerhalb von @media. Am Rechner greift keine einzige
   Regel dieser Datei - die gewohnte Darstellung bleibt unveraendert.

   Eingebunden ist die Datei als letzte im Kopf jeder Vorlage. Dadurch
   ueberschreibt sie die Vorgaben der Seite, die fuer breite Bildschirme
   gedacht sind. Seiteneigene Regeln, die genauer zielen (z. B. ".liste
   table" statt "table"), gewinnen weiterhin.
   =========================================================================== */

@media (max-width: 820px) {

    /* --- Nichts darf breiter sein als der Bildschirm --------------------- */
    html {
        /* Verhindert, dass iOS beim Drehen die Schrift eigenmaechtig vergroessert */
        -webkit-text-size-adjust: 100%;
    }

    body {
        /* Ein einziges zu breites Element wuerde sonst die ganze Seite
           seitlich verschiebbar machen - der haeufigste Grund fuer das
           Gefuehl "die Seite verrutscht staendig". */
        overflow-x: hidden;
    }

    img, video, canvas, svg, iframe {
        max-width: 100%;
    }

    img, video {
        height: auto;
    }

    pre {
        overflow-x: auto;
    }

    /* --- Tabellen ------------------------------------------------------- */
    /* Eine Tabelle mit acht Spalten passt auf kein Handy. Statt die Seite zu
       sprengen, wird sie zu einem waagerecht schiebbaren Streifen. Die
       Spalten bleiben erhalten, man wischt seitlich. */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Eingaben ------------------------------------------------------- */
    input, select, textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    input:not([type=checkbox]):not([type=radio]), select, textarea {
        /* Unter 16px zoomt iOS beim Antippen automatisch in das Feld hinein
           und kommt nicht wieder heraus. Das ist der Grund, warum Formulare
           auf dem iPhone oft "springen". */
        font-size: 16px;
    }

    /* --- Bedienelemente ------------------------------------------------- */
    button, .btn, input[type=submit], input[type=button], input[type=reset] {
        /* Ein Finger trifft zuverlaessig ab etwa 40px Hoehe. */
        min-height: 40px;
    }

    /* --- Dialoge -------------------------------------------------------- */
    /* Viele Dialoge haben eine feste Breite (600px, 800px). max-width sticht
       eine feste Breite aus, auch wenn sie direkt am Element steht. */
    [class*="modal"], [class*="dialog"], [class*="popup"], [class*="sheet"] {
        max-width: calc(100vw - 20px);
    }
}