/* =========================================================================
   Bedienbarkeit auf dem Telefon — für beide Marken

   Gemessen am 08.09.2026 bei 320 Pixeln Gerätebreite über Startseite, Suche,
   Stadtseiten, Blog, Blogartikel, Lexikon und Telefonbereich.

   Apple nennt 44 Punkte als Mindestmaß für eine Tippfläche, Android 48. Auf
   dieser Seite lagen mehrere Bedienelemente deutlich darunter: das Hauptmenü
   bei 40, die Buchstaben des Lexikons bei 32, die Brotkrumen bei 16, die
   Themenchips im Blog bei 30.

   Warum eine eigene Datei: Der Tailwind-Build ist eingefroren (kein Node auf
   dem Server), neue Utility-Klassen gibt es also nicht. Und weil die Regeln
   für BEIDE Marken gelten, kann es weder in dc-lesbarkeit.css noch in
   ml-editorial.css stehen — die werden je nach Marke geladen.

   Die Selektoren greifen teilweise auf Tailwind-Klassen zu. Das ist hier
   vertretbar, gerade WEIL der Build eingefroren ist: Die Klassen im Markup
   ändern sich nicht mehr von selbst.
   ========================================================================= */

/* ------------------------------------------------ Hauptmenü ---------- */

/* Der Menüknopf ist auf jeder Seite das wichtigste Bedienelement und war
   40x40 groß. Vier Pixel fehlen — die holt ein unsichtbares Feld, ohne die
   Gestaltung des Kopfes anzufassen. */
.ml-nav-burger { position: relative; }
.ml-nav-burger::after {
    content: "";
    position: absolute;
    left: -3px; right: -3px; top: -3px; bottom: -3px;
}

/* ------------------------------------------------ Knöpfe ------------- */

/* .btn-gold und .btn-ghost tragen ihre Höhe aus der Polsterung. Bei kleiner
   Schrift (der Suchknopf) kamen davon nur 40 Pixel zusammen. */
.btn-gold, .btn-ghost, .btn-outline { min-height: 44px; }

/* ------------------------------------------------ Brotkrumen --------- */

/*
 | „Start › Alle Städte › Berlin" — 16 Pixel hohe Links, dicht nebeneinander.
 |
 | Hier kein unsichtbares Feld: Die Links stehen in EINER Zeile nebeneinander,
 | ihre Felder würden sich gegenseitig überlappen und der jeweils letzte
 | gewinnen. Stattdessen echte Polsterung mit negativem Außenabstand — die
 | Zeile bleibt optisch, wo sie war, die Fläche wächst nach oben und unten in
 | den Leerraum.
 */
nav[aria-label="Breadcrumb"] a,
nav.text-xs a {
    display: inline-block;
    padding: 9px 4px;
    margin: -9px 0;
}

/* ------------------------------------------------ Lexikon A–Z -------- */

/*
 | Die Buchstabenleiste des Lexikons: 26 Kacheln zu 32x32 Pixeln, eng an eng.
 | Das ist die Hauptnavigation der Seite und war die kleinste Tippfläche des
 | ganzen Auftritts. Hier hilft nur echte Größe — ein Überstand würde bei
 | umgebrochenen Zeilen in die Nachbarzeile ragen.
 */
.lex-az a,
.flex.flex-wrap > a.w-8.h-8 {
    width: 44px;
    height: 44px;
}

/* ------------------------------------------------ Themenchips -------- */

/* Die waagerechte Themenleiste über der Blogliste: 30 Pixel hoch. */
.inline-flex.shrink-0 { min-height: 44px; }

/* ------------------------------------------------ Seitenblätterung --- */

/*
 | Auf /blog ragte die Blätterung („‹ 1 2 3 4 5 6 ›") bei 320 Pixeln
 | 24 Pixel über den rechten Rand hinaus — der Vorwärts-Pfeil war nicht mehr
 | zu treffen. Umbrechen statt hinauswachsen, und die Ziffern dürfen enger
 | stehen, solange die Tippfläche bleibt.
 */
nav[aria-label="Seiten"] > div,
.mt-10 > nav.flex > div.flex {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
nav[aria-label="Seiten"] a,
nav[aria-label="Seiten"] span,
.mt-10 > nav.flex a,
.mt-10 > nav.flex span {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------------ Autorenzeile ------- */

/* Der Autorenname unter der Überschrift eines Artikels: 17 Pixel hoch. */
.blog-autorzeile a,
article header a.text-gold {
    display: inline-block;
    padding: 10px 4px;
    margin: -10px 0;
}

/* ------------------------------------------------ Eingabefelder ------ */

/*
 | 16 Pixel Schriftgröße in Formularfeldern — sonst zoomt iOS Safari.
 |
 | Safari auf dem iPhone vergrößert die Seite automatisch, sobald man ein
 | Feld antippt, dessen Schrift kleiner als 16 Pixel ist. Danach steht die
 | Seite schief, und man muss von Hand zurückzoomen. Gemessen am 08.09.2026
 | auf den Auswahlfeldern von /mitglieder und /szene: 14 Pixel.
 |
 | Die Klasse .input steht in resources/css/app.css mit „text-sm" — der
 | Tailwind-Build ist eingefroren, also wird sie hier übersteuert. Nur auf
 | schmalen Geräten, damit die Gestaltung am Schreibtisch bleibt, wie sie ist.
 */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .input {
        font-size: 16px;
    }
}

/* ------------------------------------------------ Kopf und Banner ---- */

/* Der Markenschriftzug im Kopf führt zur Startseite und war 30 Pixel hoch. */
.ml-kopf > a.flex { min-height: 44px; }

/*
 | Der Hinweisstreifen über der Seite („14 offene Fragen warten …") ist ein
 | Link von 16 Pixeln Höhe. Er steht allein in seinem Streifen, also darf die
 | Fläche großzügig sein — darüber und darunter ist nichts, was sie verdecken
 | könnte.
 */
.border-b.border-gold\/15 a {
    display: inline-block;
    padding: 10px 4px;
    margin: -10px 0;
}

/* Kleine Aktionslinks in Listenköpfen („Anmelden", „Alle ansehen"). */
a.text-\[11px\].uppercase {
    display: inline-block;
    padding: 10px 4px;
    margin: -10px 0;
}

/* ------------------------------------------------ Schlagwörter ------- */

/*
 | Die Schlagwort-Chips im Kopf eines Artikels waren 26 Pixel hoch — fünf
 | Stück nebeneinander, jedes ein Link auf eine Themenseite. Gemessen am
 | 08.09.2026 auf der Artikelseite.
 |
 | Sie stehen in einer umbrechenden Zeile, dicht an dicht. Ein unsichtbares
 | Feld würde deshalb in die Nachbarchips ragen; sie bekommen echte Höhe.
 | Der Innenabstand bleibt oben und unten gleich, die Zeile wächst um
 | 14 Pixel — bei fünf Chips in zwei Reihen also um zwei mal 14.
 */
.blog-schlagworte a,
header .flex.flex-wrap > a.text-xs.uppercase {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

/* Der Autorenname unter der Überschrift lag bei 40 Pixeln. */
article header a.text-gold,
.blog-autorzeile a { padding: 12px 4px; margin: -12px 0; }