/*
 * Basedarium – editor-modern.css
 * Version: 9.0.0 (2026)
 *
 * Diese Datei ersetzt die verstreuten, teils gegeneinander kämpfenden
 * @media-Regeln für .v5EditorGrid / .v66EditorGrid / .mediaLibraryGrid /
 * .settingsGridV66 / .categoryAdminGrid / .userRightsForm / .dashboardGrid
 * aus style.css (Stand V5.3–V8.3), OHNE die alten Regeln zu löschen.
 *
 * Warum ein neues, additives File statt direktem Umbau von style.css:
 * style.css enthält für dieselben Klassen ca. 25 sich überschneidende
 * Breakpoints mit "!important"-Ketten aus verschiedenen Versionsständen.
 * Das blind zu löschen wäre riskant, ohne es live im Browser zu sehen.
 * Diese Datei wird NACH style.css geladen und gewinnt daher zuverlässig,
 * ohne dass die Bestandsregeln entfernt werden müssen. Sobald das neue
 * Verhalten bestätigt ist, können die alten Blöcke in style.css bei
 * Bedarf ersatzlos gestrichen werden (sie werden dann nie mehr greifen).
 *
 * Kernprinzip: Statt für jede Fensterbreite eine eigene Spaltenzahl
 * fest zu verdrahten (max-width:1500px / 1700px / 1800px / 2200px / 2600px …),
 * bestimmt das Grid seine Spaltenzahl selbst über "auto-fit" + "minmax()".
 * Zusätzlich reagieren die Editor-Bereiche über Container Queries auf die
 * tatsächlich verfügbare Breite ihres Wrappers – nicht auf die Fensterbreite.
 * Das ist der relevante Unterschied: Ein schmaleres Browserfenster auf einem
 * 4K-Monitor bricht damit genauso sauber um wie ein kleiner Laptop-Bildschirm.
 */

/* ------------------------------------------------------------------ */
/* 1) Container-Kontext                                                */
/* ------------------------------------------------------------------ */
.wrap.wideWrap,
.wrap.adminPage,
.wrap.settingsPage,
.wrap.familyAdmin,
.wrap.dashboardWrap {
    container-type: inline-size;
    container-name: adminWrap;
}

/* ------------------------------------------------------------------ */
/* 2) Exponat-Editor (.v5EditorGrid / .v66EditorGrid)                  */
/* ------------------------------------------------------------------ */
body .v5EditorGrid,
body .v66EditorGrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
    gap: clamp(10px, 1.2vw, 22px) !important;
    align-items: start !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: clamp(13px, .9vw, 16px);
}
body .v5EditorGrid > *,
body .v66EditorGrid > * {
    min-width: 0 !important;
    max-width: none !important;
}
body .v5EditorGrid .dataPane,
body .v5EditorGrid .mediaPane,
body .v66EditorGrid .dataPane,
body .v66EditorGrid .mediaPane {
    max-height: none !important;
    overflow: visible !important;
}
body .v5EditorGrid textarea,
body .v66EditorGrid textarea {
    min-height: clamp(70px, 9vw, 130px) !important;
}
body .v5EditorGrid textarea[name="main_text"],
body .v66EditorGrid textarea[name="main_text"] {
    min-height: clamp(140px, 16vw, 240px) !important;
}
body .v5EditorGrid .promptPane textarea#generatedPrompt,
body .v66EditorGrid .promptPane textarea#generatedPrompt {
    min-height: clamp(180px, 20vw, 320px) !important;
}

/* Live-Vorschau: sticky nur, solange genug Breite für eine eigene Spalte da ist */
body .v5EditorGrid .livePanel,
body .v66EditorGrid .livePanel {
    position: sticky !important;
    top: 80px !important;
    max-width: none !important;
}
@container adminWrap (max-width: 1100px) {
    body .v5EditorGrid .livePanel,
    body .v66EditorGrid .livePanel {
        position: static !important;
    }
}

/* ------------------------------------------------------------------ */
/* 3) Medienbibliothek                                                  */
/* ------------------------------------------------------------------ */
body .mediaLibraryGrid,
body .v5EditorGrid .mediaPane .mediaLibraryGrid,
body .v66EditorGrid .mediaLibraryGrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)) !important;
    gap: 10px !important;
    max-height: min(70vh, 620px) !important;
    overflow-y: auto !important;
}

/* ------------------------------------------------------------------ */
/* 4) Dokument-Upload-Zeile                                             */
/* ------------------------------------------------------------------ */
body .docUploadRow {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)) !important;
    gap: 8px !important;
}

/* ------------------------------------------------------------------ */
/* 5) Einstellungen                                                     */
/* ------------------------------------------------------------------ */
body .settingsGrid,
body .settingsGridV66 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
}

/* ------------------------------------------------------------------ */
/* 6) Kategorien-Verwaltung                                             */
/* ------------------------------------------------------------------ */
body .categoryAdminGrid,
body .categoriesPage .categoryAdminGrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)) !important;
    gap: 14px !important;
}

/* ------------------------------------------------------------------ */
/* 7) Benutzerrechte-Formular                                           */
/* ------------------------------------------------------------------ */
body .userRightsForm {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
    gap: 8px !important;
    align-items: center !important;
}

/* ------------------------------------------------------------------ */
/* 8) Dashboard                                                         */
/* ------------------------------------------------------------------ */
body .dashboardGrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
    gap: 18px !important;
}
body .dashboardStats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)) !important;
}

/* ------------------------------------------------------------------ */
/* 9) Live-Tabs (Vorschau-Umschalter)                                   */
/* ------------------------------------------------------------------ */
body .liveTabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 90px), 1fr)) !important;
    gap: 8px !important;
}

/* ------------------------------------------------------------------ */
/* 11) Sichtbarkeits-Dropdown in der Exponat-Übersicht (exhibits.php)  */
/* ------------------------------------------------------------------ */
.visibilityQuickForm {
    display: inline-block;
    margin: 0;
}
.visibilityQuickForm select.statusBadge {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-family: inherit;
    padding-right: 26px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    opacity: .92;
}
.visibilityQuickForm select.statusBadge:hover,
.visibilityQuickForm select.statusBadge:focus {
    opacity: 1;
    outline: 2px solid rgba(255,255,255,.35);
    outline-offset: 1px;
}

/* ------------------------------------------------------------------ */
/* 13) Startseite 2.0 – "Tor zur Geschichte"-Hero                       */
/* ------------------------------------------------------------------ */
.srOnly {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.gateHero {
    position: relative;
    width: 100%;
    aspect-ratio: 2200 / 943;
    background-size: cover;
    background-position: center;
    background-color: #05090c;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.gateHero:after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 34%;
    background: linear-gradient(to top, rgba(3,8,11,.82), rgba(3,8,11,0));
    pointer-events: none;
}
.gateHeroFoot {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: clamp(14px, 3vw, 34px) 16px clamp(20px, 4vw, 40px);
    width: 100%;
}
.gateHeroFoot p {
    color: #f0e6d2;
    font-size: clamp(14px, 1.4vw, 19px);
    letter-spacing: .04em;
    margin: 0 0 14px;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.highlightGrid .exhibitCardThumb {
    background: rgba(200,161,90,.05);
    border: 1px solid rgba(200,161,90,.22);
}
.highlightGrid .exhibitCardThumb img {
    height: 190px;
}

/* ------------------------------------------------------------------ */
/* 14) Breiter Wrapper: fluid statt fester 1280–3600px Wertetabelle    */
/* ------------------------------------------------------------------ */
body .wideWrap {
    max-width: min(96vw, 2400px) !important;
    width: auto !important;
}