/* =====================================================================
   LORO „Mehr zum Thema“-Box (2026-10-20)
   Inhaltselement „Menü ausgewählter Seiten“ (menu_pages) mit Layout 120
   „Mehr zum Thema (Box)“, Ausgabe durch
   fileadmin/templates/ContentElements/Templates/MehrZumThema.html,
   das diese Datei per f:asset.css einbindet (Versionsnummer automatisch
   aus dem Dateidatum; style.css und sys_template bleiben unberührt).
   Optik NUR hier ändern – wirkt auf allen Seiten mit der Box
   (danach Seiten-Cache dieser Seiten leeren).
   Vorbild im Haus: graues Schnellfinder-Panel .sf-filter-panel
   (#f8f9fa, Radius 12px) mit Raster „Label links, Inhalt rechts“
   (.filter-row: Grundlinie, 16px Spaltenabstand). Desktop nebeneinander, Handy untereinander (Betreiber 20.10. abends).
   Bereich grau #6c757d (wie .text-muted). Überschrift und Links behalten
   die gewohnte Seitenoptik (h2 1.25rem #006aac, Links #006aac/#005590).
   Anordnung wie mit Tabulator: Spalte 1 = längster Bereich der Box
   (höchstens 12em, darüber Umbruch), Spalte 2 = Links, alle Links einer
   Box beginnen an derselben Stelle (CSS-Grid mit subgrid je Zeile).
   ===================================================================== */
.loro-mehr {
    margin: 2rem 0 1rem;
    padding: 16px 22px 14px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 40, 70, .06);
}
.loro-mehr .loro-mehr__kopf {
    margin: 0 0 6px;
}
.loro-mehr .loro-mehr__kopf > * {
    margin: 0;
}
.loro-mehr .loro-mehr__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: fit-content(12em) minmax(0, 1fr);
    column-gap: 16px;
}
.loro-mehr .loro-mehr__eintrag {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: baseline;
    margin: 0;
    padding: 3px 0;
    line-height: 1.5;
}
.loro-mehr .loro-mehr__bereich {
    grid-column: 1;
    color: #6c757d;
    font-size: .85rem;
}
.loro-mehr .loro-mehr__eintrag > a {
    grid-column: 2;
}
/* Browser ohne subgrid: Zeilen ohne gemeinsames Raster, Bereich mit fester Mindestbreite */
@supports not (grid-template-columns: subgrid) {
    .loro-mehr .loro-mehr__liste { display: block; }
    .loro-mehr .loro-mehr__eintrag { display: block; }
    .loro-mehr .loro-mehr__bereich { display: inline-block; min-width: 10em; margin-right: 16px; }
}
/* Handy: Bereich klein über dem Link (wie .filter-row mobil), keine schmale Spalte mit Umbrüchen */
@media (max-width: 576px) {
    .loro-mehr {
        margin: 1.5rem 0 .5rem;
        padding: 14px 16px 12px;
    }
    .loro-mehr .loro-mehr__liste,
    .loro-mehr .loro-mehr__eintrag {
        display: block;
    }
    .loro-mehr .loro-mehr__eintrag {
        padding: 5px 0;
        line-height: 1.35;
    }
    .loro-mehr .loro-mehr__bereich {
        display: block;
        font-size: .8rem;
        margin: 0;
        min-width: 0;
    }
}
@media print {
    .loro-mehr {
        box-shadow: none;
        background: none;
    }
}
/* === „Mehr zum Thema“-Box ENDE === */