/* Eingebettete Medienbibliothek. Alle Regeln sind auf die Hauptansicht begrenzt. */
.mediaPageCard { width: min(var(--seitenbreite), 100%); }
.mediaHead { display: flex; align-items: center; gap: var(--sp-3); }
.mediaTitleBlock { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.mediaTitleBlock h2 { white-space: nowrap; }
.mSummary { color: var(--muted); font-size: 0.85em; }
.mHeadControls { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* Der Chat-/Projektname unter dem Dateinamen ist ein Verweis. Bewusst
 * dezent: Er soll die Kachel nicht überstrahlen, aber erkennbar sein –
 * deshalb unterstrichen erst beim Zeigen, gefärbt immer. */
.mHerkunftLink { color: var(--accent-ink); text-decoration: none; }
.mHerkunftLink:hover, .mHerkunftLink:focus-visible { text-decoration: underline; }
.mViewToggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; }
.mViewToggle button { border: 0; border-radius: 0; background: var(--surface); color: var(--muted); }
.mViewToggle button:hover { background: var(--surface-2); color: var(--text); }
.mViewToggle button.active { background: var(--accent-subtle); color: var(--accent-ink); font-weight: 600; }
.mError {
    margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-control); border: 1px solid var(--danger);
    background: var(--surface); color: var(--danger);
}
.mContent { padding: var(--sp-4) 0; width: 100%; }
.mEmpty { color: var(--muted); text-align: center; margin: 40px 8px; }
.mGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: var(--sp-3); }
.mCard {
    display: flex; flex-direction: column; min-width: 0;
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; background: var(--surface);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mCard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.mCard:focus-within { border-color: var(--accent); }
.mThumb {
    width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 0; background: var(--surface-2); color: var(--muted);
    font-size: 2.4em; padding: var(--sp-1); margin: 0;
}
.mThumb.kind-image { cursor: zoom-in; }
.mThumb:disabled { opacity: 1; cursor: default; }
.mThumb img { width: 100%; height: 100%; object-fit: contain; }
.mMeta { padding: var(--sp-2) var(--sp-3); flex: 1; min-width: 0; }
.mName {
    font-weight: 600; overflow: hidden; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35;
}
.mSub { font-size: 0.78em; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mSub.mDim { opacity: 0.8; }
.mBadge { display: inline-block; padding: 0 6px; border-radius: var(--radius-control); background: var(--surface-2); border: 1px solid var(--border); }
.mBadge.kind-image { color: var(--accent-ink); }
/* Eine gefuellte Hauptaktion (Download), eine flache daneben (Zum Chat) –
 * dieselbe Regel wie in den Studio-Leisten. */
.mActions {
    /*
     * IMMER UNTEREINANDER, BEIDE ÜBER DIE VOLLE BREITE.
     *
     * NUTZERENTSCHEIDUNG (27.08.2026): „die buttons wären denke ich mit
     * jeweils 100% besser ausgestattet an der stelle."
     *
     * Der Anlauf davor entschied das über eine Container-Anfrage: schmale
     * Kachel untereinander, breite nebeneinander. Das war klug gedacht und
     * in der Sache falsch – eine Kachel ist per Raster rund 160 px breit,
     * also praktisch IMMER unter der Grenze. Die Anfrage hätte nie etwas
     * anderes entschieden, aber jeder, der die Regel liest, müsste zwei
     * Fälle im Kopf behalten. Eine Bedingung, die nur einen Ausgang hat,
     * ist keine Bedingung, sondern eine Behauptung.
     *
     * Zwei Knöpfe auf voller Breite haben ausserdem die grössere
     * Trefferfläche – am Telefon der Punkt, der zählt.
     */
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: 0 var(--sp-3) var(--sp-3);
}
.mActions > * { width: 100%; }
/* Breite kommt aus .mActions > * – hier nur die Trefferfläche. */
.mDownload { min-width: 0; min-height: var(--tap); }
.mZumChat {
    display: inline-flex; min-width: 0; align-items: center; justify-content: center;
    gap: 6px; min-height: var(--tap); padding-inline: var(--sp-3);
    border: 1px solid var(--border); border-radius: var(--radius-control);
    background: var(--surface); color: var(--accent-ink);
    text-decoration: none; font-size: 0.85em; font-weight: 650; white-space: nowrap;
}
.mZumChat:hover { border-color: var(--border-strong); background: var(--surface-2); }
.mChatGroup { margin-bottom: var(--sp-5); }
/* Klebt UNTER dem Seitenkopf: Der Abstand ist die GEMESSENE Kopfhöhe
 * (--seitenkopf-hoehe, gesetzt beim Öffnen und bei resize) – vorher standen
 * hier 58px/104px aus einer alten Kopfgeneration, und nach jedem Umbau des
 * Kopfes klebten die Gruppenköpfe mit Lücke oder darunter. */
.mChatHead {
    display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2);
    flex-wrap: wrap; position: sticky; top: var(--seitenkopf-hoehe, 0px); z-index: 1;
    background: var(--bg); padding: var(--sp-2) 0;
}
.mChatTitle { font-weight: 700; color: var(--accent-ink); }
.mChatCount { color: var(--muted); font-size: 0.82em; }
.mChatOpen { margin-left: auto; color: var(--accent-ink); text-decoration: none; font-size: 0.82em; }
.mChatOpen:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
    .mCard { transition: none; }
    .mCard:hover { transform: none; }
}
@media (max-width: 760px) {
    .railGroupGap { display: none; }
    .mediaPageCard { padding: var(--sp-3); }
    .mGrid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
    .mContent { padding-top: var(--sp-3); }
}


/* =====================================================================
 * DER BIBLIOTHEKSKOPF – EINE DEFINITION
 * =====================================================================
 *
 * NUTZERBEFUND (27.08.2026, Bildschirmfoto): Zwischen „Medien", dem
 * Untertitel und der Bestandszeile klafften jeweils rund vierzig Pixel
 * Leerraum, und die Werkzeuge standen darunter in DREI Zeilen statt zwei.
 *
 * ZWEI URSACHEN, und beide sind lehrreich:
 *
 * 1. DIE GESTRECKTE FLEX-ZEILE. Der Titelblock ist eine Flex-ZEILE mit
 *    `flex-wrap: wrap`. Steht er in einem Kopf, der auf schmalen Fenstern
 *    zur SPALTE wird, dann macht `flex: 1` aus ihm ein Element, das sich
 *    ueber die ganze Hoehe streckt. Eine mehrzeilige Flex-Box verteilt
 *    ihre Zeilen aber per Vorgabe (`align-content: stretch`) ueber genau
 *    diese Hoehe – aus drei umgebrochenen Zeilen wurden drei Zeilen mit
 *    vierzig Pixeln Abstand. Es war also kein Abstand, den jemand gesetzt
 *    hat, sondern uebrige Hoehe, die verteilt wurde.
 *
 * 2. ZWEI MOBIL-BLOECKE, die sich gegenseitig ueberschrieben: Der eine
 *    setzte `.mediaTitleBlock { width: 100% }`, der andere weiter unten
 *    `width: auto`. Dazu drei `!important`, die es nur brauchte, weil die
 *    Regeln aus app.css (`.modalOverlay.fullPage .tasksHead`, 0-3-0)
 *    schwerer wiegen als `.mediaHead` (0-1-0).
 *
 * Beides ist hier zusammengefasst. Die Selektoren tragen jetzt DIESELBE
 * Spezifitaet wie die allgemeine Kopfregel und gewinnen ueber die
 * Reihenfolge – kein `!important` mehr. Das ist derselbe Griff wie beim
 * Seitenmuster in app.css; er steht dort begruendet.
 */
.modalOverlay.fullPage .mediaHead {
    align-items: center;
    padding: 10px var(--seiten-rand, 0px) 14px;
    margin-bottom: 12px;
    background: var(--bg);
}
.modalOverlay.fullPage .mediaHead .mediaTitleBlock {
    display: flex;
    align-items: baseline;
    /*
     * DAS EIGENTLICHE HEILMITTEL: Umgebrochene Zeilen sammeln sich oben,
     * statt sich ueber die uebrige Hoehe zu verteilen. Ohne diese Zeile
     * entstehen die vierzig Pixel aus dem Bildschirmfoto wieder – und zwar
     * ohne dass irgendwo ein Abstand steht, den man suchen koennte.
     */
    align-content: flex-start;
    gap: 4px 10px;
    min-width: 0;
}
.mediaTitleBlock h2 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.2;
}
.mediaTitleBlock .mSummary {
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.78rem;
    white-space: nowrap;
}
.mediaPageCard .mContent { padding-top: 8px; }

@media (max-width: 760px) {
    /*
     * Schmal: Der Kopf wird zur Spalte. Der Titelblock ist dann KEINE
     * Flex-Zeile mehr, sondern ein schlichter Stapel – damit kann sich
     * gar nichts mehr verteilen, und Titel, Untertitel und Bestand stehen
     * so eng untereinander, wie sie zusammengehoeren.
     */
    .modalOverlay.fullPage .mediaHead {
        flex-direction: column;
        align-items: stretch;
        /*
         * OHNE DAS VERTEILT SICH ALLES ÜBER DIE HÖHE. Der allgemeine Kopf
         * steht auf `justify-content: space-between` – in einer ZEILE
         * schiebt das die Knöpfe nach rechts, in einer SPALTE reisst es
         * Titel und Werkzeuge auseinander.
         */
        justify-content: flex-start;
        gap: var(--sp-2);
        padding: var(--sp-2) var(--seiten-rand, 0px) var(--sp-3);
    }
    .modalOverlay.fullPage .mediaHead .mediaTitleBlock {
        display: block;
        width: 100%;
        /*
         * ==============================================================
         * DIE ZWEITE HÄLFTE DERSELBEN 240 PIXEL
         * ==============================================================
         *
         * NUTZERBEFUND (27.08.2026, zweites Bildschirmfoto): „Immernoch
         * oben zu viel Leerzeilen." Nach dem ersten Anlauf standen Titel,
         * Untertitel und Bestandszeile zwar eng beieinander – dafür klaffte
         * jetzt ein Loch von rund zweihundert Pixeln ZWISCHEN dem Titel und
         * den Werkzeugen.
         *
         * Die Zahl kam aus meiner eigenen Reparatur vom selben Tag: Der
         * Titelblock bekam `flex: 1 1 240px`, damit der Kopf umbricht,
         * bevor der Untertitel zur Wortsäule wird. In einer ZEILE sind
         * diese 240 px eine Breite. Wird der Kopf auf schmalen Fenstern zur
         * SPALTE, ist die Hauptachse aber die senkrechte – und aus der
         * Mindestbreite wird eine Mindest-HÖHE. Zweihundert Pixel Nichts.
         *
         * `flex-basis` bezieht sich IMMER auf die Hauptachse. Wer eine
         * Basis setzt, setzt sie also für beide Richtungen – und muss sie
         * dort zurücknehmen, wo die Richtung kippt.
         */
        flex: 0 0 auto;
    }
    .modalOverlay.fullPage .mediaHead .mediaTitleBlock p { margin: 2px 0 0; }
    .modalOverlay.fullPage .mediaHead .mediaTitleBlock .mSummary { margin-top: 2px; }
    /*
     * ZWEI ZEILEN, NICHT VIER – UND NICHT DREI.
     *
     * Die Ansichtsumschaltung braucht die volle Breite (ihre beiden
     * Beschriftungen sind die laengsten im Kopf). Typenwahl und die beiden
     * Knoepfe teilen sich die Zeile darunter.
     *
     * Die versteckte Beschriftung (.srOnly) ist absolut positioniert und
     * faellt aus dem Raster – sonst haette sie eine Zelle belegt und alles
     * um eine Stelle verschoben. Genau so entstand im Bildschirmfoto die
     * dritte Zeile.
     */
    .modalOverlay.fullPage .mediaHead .mHeadControls {
        margin-left: 0;
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: var(--sp-2);
        align-items: center;
    }
    .modalOverlay.fullPage .mediaHead .mViewToggle {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .modalOverlay.fullPage .mediaHead .mViewToggle button {
        min-width: 0;
        min-height: var(--tap);
        /* Lieber gekuerzt als umgebrochen: Ein Umbruch mitten im Wort sieht
         * kaputt aus, ein „…" sieht nach Absicht aus. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .modalOverlay.fullPage .mediaHead .mHeadControls select {
        min-width: 0;
        width: 100%;
    }
}