/* =========================================================================
   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: 44px;
    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-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    margin: -14px 0;
}

/* Kleine Aktionslinks in Listenköpfen („Anmelden", „Alle ansehen"). */
a.text-\[11px\].uppercase {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    margin: -13px 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: 44px;
    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; }

/* ------------------------------------------------ Städteübersicht ---- */

/*
 | /staedte ist eine reine Navigationsseite: 16 Bundesländer als Aufklapper,
 | darin über hundert Stadtlinks. Gemessen am 08.09.2026: die Stadtlinks
 | 34 Pixel, die Bundeslandzeile 28, der Bundeslandlink darin 24.
 |
 | Die Links stehen in einer umbrechenden Zeile mit Abstand — echte Höhe ist
 | hier richtig, ein Überstand würde in die Nachbarzeile ragen.
 */
details .flex.flex-wrap > a.inline-flex.items-center { min-height: 44px; }
details > summary.cursor-pointer { min-height: 44px; display: flex; align-items: center; }
details > summary h2 > a { display: inline-flex; align-items: center; min-height: 44px; }

/* ------------------------------------------------ Autorenzeilen ------ */

/* „Redaktion Dominacall24" unter einem Lexikoneintrag: 16 Pixel. */
article > .text-xs a,
article > div.text-xs.text-sand-200\/70 a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -14px 0;
}

/*
 | AUSDRÜCKLICH NICHT vergrößert: die Lexikonverweise im Fließtext (.lex-link).
 |
 | Sie stehen mitten im Satz, oft mehrere in einem Absatz. Eine größere Fläche
 | würde die Zeilen darüber und darunter überlappen und dort die Berührung
 | abfangen — man träfe den Verweis statt der Textstelle, die man lesen wollte.
 | Die Mindestgröße für Tippflächen (WCAG 2.5.8) nimmt Links im Fließtext aus
 | genau diesem Grund ausdrücklich aus.
 */

/* ------------------------------------------------ Fußzeile ----------- */

/*
 | Die Linklisten in der Fußzeile: 15 Pixel hoch, 5 Pixel Abstand — ein
 | 20-Pixel-Raster aus Bedienelementen. Gefunden am 08.09.2026 in einem
 | Durchgang, der die Seite wirklich abscrollt; die Runden davor hatten nur
 | den sichtbaren Bereich geprüft und die Fußzeile nie erreicht.
 |
 | Hier hilft kein Überstand: Bei 20 Pixeln Raster würden sich die Flächen
 | gegenseitig überlappen und der jeweils letzte gewinnen. Die Zeilen werden
 | deshalb wirklich höher. Die Fußzeile wächst dadurch auf dem Telefon
 | spürbar — das ist der richtige Preis für eine Liste, in der man sonst
 | ständig danebentippt.
 */
footer ul.text-xs > li > a,
footer ul.text-xs > li > button,
ul.space-y-1.text-xs > li > a,
ul.space-y-1.text-xs > li > button {
    display: flex;
    align-items: center;
    min-height: 44px;
}

/* ------------------------------------------------ Ort in der Karte --- */

/*
 | Der Ortsname in einer Anzeigenkarte („Duisburg") ist ein eigener Link auf
 | die Stadtseite — 16 Pixel hoch, mitten in einer Karte, die als Ganzes
 | anklickbar ist.
 |
 | Hier NICHT auf 44 gehen: Der Ortslink liegt über der Klickfläche der Karte.
 | Je größer er wird, desto mehr Fläche nimmt er der Hauptaktion weg — man
 | landete auf der Stadtseite, wo man die Anzeige öffnen wollte. 28 Pixel sind
 | der Kompromiss: knapp doppelt so groß wie vorher, und die Karte bleibt die
 | Karte.
 */
.dc-karte-ort {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin: -6px 0;
}

/* ------------------------------------------------ Weitere Textlinks -- */

/*
 | Alles unter 20 Pixeln, gefunden im vollständigen Durchgang vom 08.09.2026:
 |
 | „von Marcus Dark" — der Autorenlink am Fuß jeder Blog-Karte (16 px)
 | „Alle Artikel →"  — der Abschluss der Blog-Sektion auf der Startseite (17 px)
 | Überschriften-Links im Inhalt, etwa ein Stadtname in einer h3 (30 px)
 | Die Leiste der Admin-Vorschau („Kunden-Sicht", „Anbieter-Sicht") — die
 |   sieht zwar nur ein Admin, benutzt wird sie aber täglich.
 |
 | Alle stehen einzeln oder mit genug Abstand, deshalb echte Höhe statt
 | unsichtbarer Fläche.
 */
.mt-auto.pt-3 > a.text-gold,
.mt-6.text-center > a.text-sm,
.blog-content h2 > a,
.blog-content h3 > a,
.dc-vorschauleiste a,
div.flex.items-center > a.px-3.py-1 {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Der Autorenlink sitzt am Kartenfuß — negativer Außenabstand hält die
   Karte auf ihrer Höhe. */
.mt-auto.pt-3 > a.text-gold { margin: -14px 0; }

/* ------------------------------------------------ MissLiberty -------- */

/*
 | Dieselben Muster, andere Klassen: Die Fußzeile von MissLiberty benutzt
 | space-y-1.5 statt space-y-1 und war deshalb von der Regel oben nicht
 | erfasst („Forum", 21 Pixel). Dazu die Profilnamen in den Listen (30),
 | die Profilkarte auf der Startseite (31) und der Abschlusslink einer
 | Sektion („Alle Themen →", 16).
 */
ul.space-y-1\.5 > li > a,
ul.space-y-1\.5 > li > button,
footer ul > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
}

.ml-theme .font-serif > a,
div.flex.items-baseline > a.text-xs,
.ml-buehne__innen > .card > a.flex {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Der Sektionsabschluss steht rechts neben einer Überschrift — negativer
   Außenabstand hält die Zeile auf ihrer Höhe. */
div.flex.items-baseline > a.text-xs { margin: -14px 0; }