/* ---------------------------------------------------------------------------
   Mobil-Korrekturen fuer die Blogartikel
   ---------------------------------------------------------------------------
   Auf einem 390-Punkte-Telefon waren 26 der 36 Artikel zwischen 407 und 718
   Punkte breit. Weil die Navigation aus header.js fest positioniert ist und
   mit der Layoutbreite mitwaechst, lag der Menue-Knopf dabei ausserhalb des
   Bildschirms — die Seiten waren nicht mehr bedienbar.

   Drei Ursachen, in jedem Artikel eine Mischung daraus:

     1. Das zweispaltige Raster (250px Inhaltsverzeichnis + Text) brach nicht
        um. Teils fehlte die Regel, teils stand sie in einem verschachtelten
        und damit wirkungslosen Teil des Stilblocks, teils zielte sie auf
        .article-container waehrend das Markup .content-wrapper benutzt.
     2. Die artikeleigene Navigationsleiste (.btn-solid) brach nicht um.
     3. Vergleichstabellen ohne eigenen Rollbereich zogen die Seite auf.

   Statt 26 Dateien einzeln zu flicken — mit dem Risiko, wieder in einem toten
   Block zu landen — stehen die Regeln hier zentral. Die Datei wird als letztes
   im Kopf eingebunden und gewinnt damit gegen die Regeln in der Seite selbst.

   minmax(0, 1fr) statt 1fr ist entscheidend: eine Rasterspalte schrumpft
   sonst nicht unter die Mindestbreite ihres Inhalts.
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {

    /* Letzte Absicherung. Nach den Korrekturen oben ragt auf sechs Artikeln
       zwar kein Inhaltselement mehr heraus, die Layoutbreite blieb aber
       aufgezogen — und die feste Navigation folgt ihr, wodurch der
       Menue-Knopf ausserhalb des Bildschirms landet.
       Beides muss gesetzt sein: steht es nur auf einem der beiden, zieht der
       Browser die Layoutbreite trotzdem auf. Breite Tabellen haben weiter
       unten ihren eigenen Rollbereich, es geht also nichts verloren. */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }
}

@media (max-width: 1024px) {

    .content-wrapper,
    .article-container {
        /* !important, weil die Seiten die Zweispaltigkeit teils mit gleicher
           Spezifitaet setzen und die Reihenfolge der Stilbloecke je Datei
           abweicht. */
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 40px;
    }

    .toc-sidebar,
    aside.toc,
    .toc {
        position: static !important;
        top: auto !important;
        max-height: none;
    }

    .toc-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* Manche Artikel weisen dem Textteil fest die zweite Rasterspalte zu.
       Bei nur noch einer Spalte legt der Browser dafuer eine implizite
       zweite an — der Text stand dann rechts neben der Seite statt darin.
       Gemessen: article-content bei 120..470 in einem 0..390 breiten Raster. */
    .content-wrapper > *,
    .article-container > * {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 768px) {

    /* Die Leiste im Artikel selbst. Sie ist meist per Flexbox gesetzt und
       ohne Umbruch, wodurch vier Knoepfe die Seite auf ueber 700 Punkte
       schoben. */
    nav {
        height: auto;
        padding: 15px 20px;
        flex-wrap: wrap;
    }

    #nav-links,
    .nav-links,
    /* In einigen Artikeln steckt die Knopfreihe in einem namenlosen div. */
    nav > div {
        flex-wrap: wrap;
        min-width: 0;
        gap: 8px;
    }

    .btn-solid,
    .btn-nav {
        padding: 8px 12px;
        font-size: .75rem;
    }

    .content-wrapper,
    .article-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Ohne min-width: 0 waechst ein Rasterkind mit seinem Inhalt mit,
       statt ihn umbrechen oder rollen zu lassen. */
    .content-wrapper > *,
    .article-container > *,
    .article-content {
        min-width: 0;
    }

    .article-content {
        padding: 30px 20px;
    }

    .pros-cons,
    .related-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    /* Kennzahlen-Raster mit festen Spaltenbreiten: die Spalten schrumpfen
       nicht mit, sondern schieben die Seite auf. minmax(0, 1fr) erlaubt
       ihnen, unter die Mindestbreite ihres Inhalts zu gehen. */
    .stats-grid,
    .stat-grid,
    .stats-row {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    }

    .stats-inline {
        flex-direction: column;
    }

    /* Breite Tabellen bekommen einen eigenen Rollbereich, damit nicht die
       ganze Seite seitlich rutscht. display:block allein genuegt nicht: die
       inneren Gruppen bleiben Tabellenteile und liefen aus dem Rollbereich
       heraus — gemessen ein thead von 586 Punkten in einer 308 Punkte
       breiten Tabelle. Sie muessen selbst wieder Tabelle werden, damit der
       Rollbereich sie umschliesst. */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table > thead,
    table > tbody,
    table > tfoot {
        display: table;
        width: max-content;
        min-width: 100%;
    }

    /* AOS setzt Elemente vor ihrer Einblendung auf opacity 0 und schiebt sie
       je nach Richtung um 100 Punkte zur Seite. Was unterhalb des sichtbaren
       Bereichs liegt, behaelt diese Verschiebung — auf einem schmalen Schirm
       zieht sie die Seite auf und die feste Navigation waechst mit, bis der
       Menue-Knopf draussen liegt. Auf dem Telefon ist eine bedienbare Seite
       mehr wert als die Einblendung. */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

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

    /* Lange ungetrennte Zeichenketten (Adressen, Dateinamen) sprengen sonst
       ihren Kasten. */
    p,
    li,
    td,
    th,
    h1,
    h2,
    h3 {
        overflow-wrap: break-word;
    }
}