/* Eigene Ergänzungen zur Vorlage (SmartAdmin 5, Theme Lunar) */

:root {
    --app-header-height: 3.5rem;
    --titelzeile-hoehe: 3rem;
}

/* Logo: schwarze Wortmarke auf transparentem Grund, auf der dunklen Navigation invertiert */
.app-logo {
    padding: 0 0 0 10px;
}
.app-logo > img {
    width: auto;
    height: 2.25rem;
    min-width: 0;
    filter: invert(1);
}
/* eingeklapptes Menü: dort ist nur Platz für 4,4rem, das Bild würde gestaucht */
.set-nav-minified .app-logo > img {
    display: none;
}

/* Menü scrollt selbst, wenn die Fensterhöhe nicht reicht: normaler Scrollbalken
   (Mausrad, Touchpad, Tastatur, Ziehen) statt smartSlimscroll der Vorlage */
.app-sidebar .primary-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .3) transparent;
}

/* Menütexte umbrechen statt unter den Pfeil laufen; die Vorlage setzt line-height 2 */
.primary-nav ul li a .nav-link-text {
    white-space: normal;
    line-height: 1.35;
}
.primary-nav ul li a:has(.collapse-sign) {
    padding-right: 2.25rem;
}

/* Menüpunkte, die noch nicht übertragen sind: kein Link, ausgegraut;
   Gruppen ohne umgesetzte Seite nur ausgegraut, damit man sie aufklappen kann */
.primary-nav li.inaktiv > a {
    opacity: .4;
    pointer-events: none;
}
.primary-nav li.inaktiv-gruppe > a {
    opacity: .45;
}

/* Hauptpunkte: geöffnet als umrandeter Block. Die Linie ist immer da, geschlossen unsichtbar,
   damit beim Auf- und Zuklappen nichts springt (die Vorlage setzt .open erst nach der Animation).
   Im eingeklappten Menü bleibt sie unsichtbar, dort ist nur das Icon zu sehen */
#js-nav-menu > li {
    border: 1px dashed transparent;
    border-radius: 10px;
    padding: 10px;
    margin: 0 -10px 0 -10px;
}
#js-nav-menu > li.open {
    border-color: #ffffff8a;
}
.set-nav-minified:not(.set-nav-collapsed) .app-sidebar:not(:hover) #js-nav-menu > li.open {
    border-color: transparent;
}

/* ===== Icons: nur SmartAdmin Icons (<i class="sa sa-…">) =====
   die Vorlage gestaltet Menü und Kopf nur für ihre SVG-Icons, daher Größe und Farbe hier */
.primary-nav ul li a > i.sa {
    font-size: var(--app-nav-svgicon-size);
    width: var(--app-nav-svgicon-size);
    flex-shrink: 0;
    text-align: center;
    opacity: .75;
}
.primary-nav ul li a > i.sa::before {
    color: currentColor;
}
.primary-nav ul li a:hover > i.sa,
.primary-nav ul li.active > a > i.sa {
    opacity: 1;
}
.app-header .btn-system > i.sa {
    position: relative;
    z-index: 1;
}
.mobile-menu-icon > i.sa {
    font-size: 1.5rem;
    color: rgba(var(--bs-light-rgb), 1);
}
/* Pfeil zum Einklappen des Menüs, verhält sich wie das SVG der Vorlage */
.collapse-icon > i.sa {
    font-size: .6875rem;
    margin-left: .5625rem;
    color: var(--collapse-icon-border);
    transition: all .1s ease-in-out;
}
.collapse-icon:hover > i.sa {
    margin-left: .75rem;
    color: var(--collapse-icon-border-hover);
}
.set-nav-minified:not(.set-nav-collapsed) .collapse-icon > i.sa {
    transform: scaleX(-1);
    margin-left: .75rem;
}
.set-nav-minified:not(.set-nav-collapsed) .collapse-icon:hover > i.sa {
    margin-left: 1.125rem;
}

/* Titelzeile: fest unter dem Kopf, rechts neben dem Menü.
   position: sticky geht nicht, weil .app-body und .content-wrapper overflow-x setzen */
.app-titelzeile {
    position: fixed;
    top: var(--app-header-height);
    left: var(--menu-width);
    right: 0;
    z-index: calc(var(--z-index-master) - 1);
    height: var(--titelzeile-hoehe);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 2rem;
    background-color: var(--bs-body-bg);
    background-image: linear-gradient(var(--app-content-background, transparent), var(--app-content-background, transparent));
    border-bottom: 1px solid var(--app-layout-border-color);
    transition: left 470ms cubic-bezier(.34, 1.25, .3, 1);
}
.set-nav-minified .app-titelzeile {
    left: var(--menu-width-minified);
}
/* Platzverteilung (14.10.2026): wird es eng, gibt zuerst der feste Seitentitel nach (bis 14rem), dann der letzte
   Brotkrumen-Eintrag (z. B. "Institut bearbeiten: Wallraf-Richartz-Museum & Fondation Corboud"); die festen Einträge
   schrumpfen nie (schon 2px weniger ergäben „Buchungssyst…“). Die Vorlage kürzt jeden Eintrag auf 10,6rem
   (per !important beim Zeigen und unter 576px) */
.app-titelzeile .subheader-title {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1000 auto;                        /* Gewicht 1000: nimmt den Platzmangel zuerst auf ... */
    min-width: 14rem;                         /* ... aber nie unter 14rem */
}
.app-titelzeile .app-breadcrumb {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;                         /* in sehr schmalen Fenstern abschneiden statt über den Rand laufen */
}
.app-titelzeile .breadcrumb {
    margin: 0;
    flex-wrap: nowrap;
}
/* drei Klassen wie in der Vorlage (.app-breadcrumb .breadcrumb .breadcrumb-item), sonst verliert max-width */
.app-titelzeile .breadcrumb .breadcrumb-item {
    flex: 0 0 auto;
    max-width: 13rem;                         /* „Museen & Institutionen“ passt ganz hinein */
}
.app-titelzeile .breadcrumb .breadcrumb-item.active {
    flex-shrink: 1;
    min-width: 8rem;
    max-width: 40rem !important;
}
/* Platz für die Titelzeile */
.app-content .content-wrapper {
    padding-top: calc(var(--titelzeile-hoehe) + 1.5rem);
}
/* Sprungziele (#anker), scrollIntoView und Tab-Fokus landen nicht unter dem festen Kopf und der Titelzeile;
   nur Seiten mit Rahmen (Laschenseiten im iframe haben keinen festen Kopf) */
html.set-header-fixed {
    scroll-padding-top: calc(var(--app-header-height) + var(--titelzeile-hoehe) + .5rem);
}
@media only screen and (max-width: 991.98px) {
    .app-titelzeile,
    .set-nav-minified .app-titelzeile {
        left: 0;
        padding: 0 var(--mobile-page-padding);
    }
    .app-content .content-wrapper {
        padding-top: calc(var(--titelzeile-hoehe) + var(--mobile-page-padding));
    }
}

/* ===== Speicherleiste: fest am unteren Fensterrand, rechts neben dem Menü (Gegenstück zur Titelzeile) =====
   <body class="mit-speicherleiste"> … <div class="app-speicherleiste">Text, Knöpfe</div>
   Der Knopf ist grün ("gespeichert") und wird rot ("Speichern"), sobald etwas geändert ist (Seitenskript, z. B.
   js/institute.js setzt .geaendert und tauscht btn-success/btn-rot). Liegt unter Lasche und Hilfe (Offcanvas 1045). */
:root {
    --speicherleiste-hoehe: 3.75rem;
    /* "rot" für Ungespeichertes: die Vorlage Lunar setzt --bs-danger auf Orchidee (#d87be0, auf Weiß nur 2,7:1) */
    --app-rot: #c62828;
    --app-rot-text: #c62828;
    /* Hintergrund gewählter Einträge (Marken) in den Auswahllisten und gesetzter Filterfelder;
       im Darkmode dunkles Petrol (Wunsch 12.10.2026), damit die helle Schrift lesbar bleibt */
    --app-marke-bg: #afebed;
    /* dunkles Orange (04.11.2026, derzeit ungenutzt in Reserve; weiß auf #b45309 = 4,6:1) */
    --app-orange: #b45309;
    --app-orange-text: #b45309;
    /* Hellorange (Wunsch 04.11.2026): Suchen-Knopf der Angebotsliste bei geänderter, noch nicht
       gesuchter Auswahl; braucht dunkle Schrift (weiß auf #f28a3b nur 2,5:1, dunkel 8,4:1) */
    --app-hellorange: #f28a3b;
}
[data-bs-theme="dark"] {
    --app-rot-text: #ff8a80;
    --app-marke-bg: #0a5558;
    --app-orange-text: #ffa94d;
}
.app-speicherleiste {
    position: fixed;
    left: var(--menu-width);
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-index-master) - 1);
    height: var(--speicherleiste-hoehe);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: 0 2rem;
    background-color: var(--bs-body-bg);
    border-top: 2px solid var(--bs-secondary-color);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .14);
    transition: left 470ms cubic-bezier(.34, 1.25, .3, 1);
}
.set-nav-minified .app-speicherleiste {
    left: var(--menu-width-minified);
}
/* die Vorlage blendet jedes Kind von .main-content mit transform ein (.main-content > * { animation … .7s });
   solange das läuft, wäre dieses Kind der Bezugsrahmen für position: fixed und die Leiste säße am Formularende */
.main-content > :has(.app-speicherleiste) {
    animation: none;
}.app-speicherleiste.geaendert {
    border-top-color: var(--app-rot);
}
.app-speicherleiste-text {
    margin-right: auto;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-speicherleiste.geaendert .app-speicherleiste-text {
    color: var(--app-rot-text);
}
.app-speicherleiste .btn {
    min-width: 9rem;
    font-weight: 600;
}
/* roter Text (echtes Rot, .text-danger ist in der Lunar-Vorlage Orchidee), z. B. "inaktiv" in der Reihen-Liste */
.text-rot {
    color: var(--app-rot-text);
}
/* roter Knopf "Speichern" (weiß auf --app-rot = 5,6:1) */
.btn.btn-rot {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-rot);
    --bs-btn-border-color: var(--app-rot);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #a81f1f;
    --bs-btn-hover-border-color: #a81f1f;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8f1a1a;
    --bs-btn-active-border-color: #8f1a1a;
    --bs-btn-focus-shadow-rgb: 198, 40, 40;
    color: #fff;
    background-color: var(--app-rot);
    border-color: var(--app-rot);
}
.btn.btn-rot:hover,
.btn.btn-rot:focus-visible {
    color: #fff;
    background-color: #a81f1f;
    border-color: #a81f1f;
}/* Platz, damit die Leiste weder Inhalt noch Seitenfuß verdeckt */
.mit-speicherleiste .app-footer {
    margin-bottom: var(--speicherleiste-hoehe);
}
html:has(body.mit-speicherleiste) {
    scroll-padding-bottom: calc(var(--speicherleiste-hoehe) + .5rem);
}@media only screen and (max-width: 991.98px) {
    .app-speicherleiste,
    .set-nav-minified .app-speicherleiste {
        left: 0;
        padding: 0 var(--mobile-page-padding);
    }
}
/* ===== Lasche für Details (App_UserControls/uc-lasche.ascx, js/lasche.js) =====
   Bootstrap-Offcanvas rechts, ohne Abdunkeln: die Liste bleibt bedienbar; der Kopf bleibt sichtbar */
/* .offcanvas davor: die Vorlage setzt top und width über .offcanvas.offcanvas-end, das ist spezifischer als .app-lasche */
.offcanvas.app-lasche {
    top: var(--app-header-height);
    height: calc(100% - var(--app-header-height));
    width: 40vw;
    min-width: 400px;
    border-left: 1px solid var(--app-layout-border-color);
    box-shadow: -5px 0 15px rgba(0, 0, 0, .15);
}
.offcanvas.app-lasche.app-lasche-breit {
    width: 60vw;
}
.app-lasche .offcanvas-header {
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--app-layout-border-color);
}
/* Marke neben dem Laschentitel, z. B. "im Web freigegeben" (Vorgabe 29.10.2026); margin-right:auto haelt sie
   beim Titel, der Schliessen-Knopf bleibt rechts */
.app-lasche .lasche-marke {
    margin-left: .6rem;
    margin-right: auto;
    font-size: 1.25rem;             /* wie der Laschentitel (.offcanvas-title = h5) daneben */
    line-height: 1.2;
    white-space: nowrap;
}
.app-lasche .lasche-marke.ja .sa {
    color: var(--bs-success);
}
.app-lasche .lasche-marke.nein {
    color: var(--bs-secondary-color);
}
.app-lasche .offcanvas-body {
    position: relative;
}
.app-lasche iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
.app-lasche-laden {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-body-bg);
}
@media only screen and (max-width: 767.98px) {
    .offcanvas.app-lasche,
    .offcanvas.app-lasche.app-lasche-breit {
        width: 100vw;
        min-width: 0;
    }
}

/* ===== Hilfe und Notizen (App_UserControls/uc-hilfe.ascx, js/hilfe.js) =====
   Offcanvas rechts wie die Lasche. Reiter oben und Knopfleiste unten bleiben stehen,
   Text bzw. Editor füllen die Höhe dazwischen: dafür die Flex-Kette mit min-height: 0 */
.offcanvas.app-hilfe {
    top: var(--app-header-height);
    height: calc(100% - var(--app-header-height));
    width: 40vw;
    min-width: 420px;
    border-left: 1px solid var(--app-layout-border-color);
    box-shadow: -5px 0 15px rgba(0, 0, 0, .15);
}
.app-hilfe .offcanvas-header {
    padding: .5rem 1rem 0;
    border-bottom: 1px solid var(--app-layout-border-color);
}
.app-hilfe .offcanvas-header .nav-tabs {
    border-bottom: 0;
}
.app-hilfe .offcanvas-body {
    display: flex;
    min-height: 0;
}
/* nur der sichtbare Reiter wird zur Spalte; min-width: 0, damit die Werkzeugleiste des Editors
   nicht über den Rand wächst, sondern überzählige Knöpfe in „…“ sammelt */
.app-hilfe .tab-pane.active {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.hilfe-zurueck,
.hilfe-titel,
.hilfe-stempel,
.hilfe-leiste,
.hilfe-bearbeiten > label,
.hilfe-bearbeiten > input {
    flex: 0 0 auto;
}
.hilfe-zurueck {
    margin-bottom: .5rem;
}
.hilfe-titel {
    margin: 0 0 .15rem;
    font-weight: 600;
    color: var(--bs-primary);
    word-break: break-word;
}
.hilfe-stempel {
    color: var(--bs-secondary-color);
}
.hilfe-panel > .hilfe-text {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color);
    word-wrap: break-word;
}
.hilfe-hinweis {
    color: var(--bs-secondary-color);
    font-style: italic;
}
.hilfe-bearbeiten {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: .75rem;
}
.hilfe-knoepfe {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color);
}
.hilfe-knoepfe > span {
    display: inline-flex;
    gap: .4rem;
}

/* Textfeld und feste Werkzeugleiste; .ck.ck-editor__editable, weil der Editor sonst den Rahmen entfernt */
.hilfe-leiste .ck.ck-toolbar {
    border-color: var(--bs-border-color);
    border-bottom: 0;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}
.hilfe-feld,
.ck.ck-editor__editable.hilfe-feld {
    flex: 1 1 auto;
    min-height: 8rem;
    overflow-y: auto;
    padding: .5rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.hilfe-leiste:not(:empty) + .hilfe-feld {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.hilfe-feld:focus,
.ck.ck-editor__editable.hilfe-feld.ck-focused {
    outline: 0;
    border-color: var(--bs-primary);
    box-shadow: none;
}
/* schwebende Teile des Editors (Link-Eingabe, Tabellenwerkzeuge, Tooltips) über dem Offcanvas (1045) */
.ck.ck-balloon-panel {
    z-index: 1060 !important;
}
/* Werkzeugleiste im Dunkelmodus (Hilfe-Lasche und Felder der Institutsseite) */
[data-bs-theme="dark"] .app-hilfe,
[data-bs-theme="dark"] .inst-feld-leiste {
    --ck-color-base-background: var(--bs-body-bg);
    --ck-color-base-border: var(--bs-border-color);
    --ck-color-text: var(--bs-body-color);
    --ck-color-toolbar-background: var(--bs-tertiary-bg);
    --ck-color-toolbar-border: var(--bs-border-color);
    --ck-color-button-default-hover-background: var(--bs-secondary-bg);
    --ck-color-button-on-background: var(--bs-secondary-bg);
    --ck-color-button-on-hover-background: var(--bs-secondary-bg);
    --ck-color-dropdown-panel-background: var(--bs-body-bg);
    --ck-color-dropdown-panel-border: var(--bs-border-color);
    --ck-color-list-background: var(--bs-body-bg);
    --ck-color-list-button-hover-background: var(--bs-secondary-bg);
    --ck-color-panel-background: var(--bs-body-bg);
    --ck-color-panel-border: var(--bs-border-color);
}

/* Inhalt: Lese- und Bearbeitungsansicht gleich, .app-hilfe davor überstimmt die Vorgaben des Editors */
.app-hilfe .hilfe-text > :first-child {
    margin-top: 0;
}
.app-hilfe .hilfe-text h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: .9rem 0 .35rem;
}
.app-hilfe .hilfe-text h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: .7rem 0 .3rem;
}
.app-hilfe .hilfe-text p {
    margin: 0 0 .6rem;
}
.app-hilfe .hilfe-text ul,
.app-hilfe .hilfe-text ol {
    padding-left: 1.2rem;
}
.app-hilfe .hilfe-text img {
    max-width: 100%;
    height: auto;
}
.app-hilfe .hilfe-text hr {
    height: 0;
    margin: .8rem 0;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    background: none;
    opacity: 1;
}
.app-hilfe .hilfe-text blockquote {
    margin: .6rem 0;
    padding: .1rem 0 .1rem .75rem;
    border-left: 3px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-style: italic;
}
.app-hilfe .hilfe-text figure.table {
    width: 100%;
    margin: .6rem 0;
}
.app-hilfe .hilfe-text table {
    width: 100%;
    border-collapse: collapse;
}
.app-hilfe .hilfe-text td,
.app-hilfe .hilfe-text th {
    padding: .2rem .35rem;
    border: 1px solid var(--bs-border-color);
}
.app-hilfe .hilfe-text th {
    background-color: var(--bs-tertiary-bg);
    font-weight: 600;
    text-align: left;
}

/* Fragezeichen an Elementen mit data-help-key: grau = noch leer, grün = Text vorhanden */
.hilfe-fragezeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    margin-left: .35rem;
    border-radius: 50%;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    color: #fff;
    background-color: var(--bs-secondary-color);
}
.hilfe-fragezeichen.vorhanden {
    background-color: var(--bs-success);
}
.hilfe-fragezeichen:hover,
.hilfe-fragezeichen:focus-visible {
    filter: brightness(1.15);
}
@media print {
    .hilfe-fragezeichen {
        display: none !important;
    }
}

/* zwei Hilfe-Knöpfe in der Kopfzeile (uc-rahmen-oben):
   links gefülltes Fragezeichen wie an den Elementen (blendet sie ein), eingeschaltet blau mit Ring;
   rechts das umrandete Symbol für Hilfe und Notizen, blau solange die Lasche offen ist */
.app-fragezeichen-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    color: #fff;
    background-color: var(--bs-secondary-color);
    transition: background-color .15s, box-shadow .15s;
}
.app-fragezeichen-knopf.active .app-fragezeichen-symbol {
    background-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .3);
}
.app-hilfe-knopf.active > i.sa,
.app-hilfe-knopf.active > i.sa::before {
    color: var(--bs-primary);
}
/* heller Kreis wie beim Überfahren (Vorlage: .btn-system.show::before) */
.app-header .app-hilfe-knopf.active::before {
    background: rgba(var(--primary), .15);
}

@media only screen and (max-width: 767.98px) {
    .offcanvas.app-hilfe {
        width: 100vw;
        min-width: 0;
    }
}

/* ===== Schriftgrößen: überall mindestens 0.9rem (Vorgabe 15.09.2026);
   die Vorlage setzt 0.875rem als Grundgröße und viele Kleinschriften darunter ===== */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"],
body {
    --bs-body-font-size: .9rem;
}
body {
    font-size: .9rem;
}
.table.table-sm,
.btn-sm,
.btn-xs,
.form-control-sm,
.form-select-sm,
.input-group-text,
.form-label,
.form-text,
.form-check-label,
.dropdown-menu,
.dropdown-item,
.badge,
small,
.small,
.breadcrumb,
.nav-tabs .nav-link,
.nav-title,
.primary-nav ul li a,
.primary-nav ul li ul li a,
.primary-nav ul li ul li ul li a,
.panel-hdr,
.app-footer,
.alert,
.ts-control,
.ts-dropdown,
.ts-wrapper .option,
.ts-wrapper .item {
    font-size: .9rem;
}
/* Textfarbe der Auswahllisten nach Thema: die Tom-Select-Vorlage setzt fest #343a40, im Darkmode also grau auf dunkel;
   dort die Einträge weiß (Wunsch 12.10.2026), farbige Einträge (verwaltung-md) behalten ihre Farbe */
.ts-control,
.ts-control input,
.ts-dropdown {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ts-dropdown,
[data-bs-theme="dark"] .ts-dropdown .active:not(.verwaltung-md) {
    color: #fff;
}

/* ===== Suchfilter: kräftiger abgesetzt, Beschriftungen und Ränder deutlicher ===== */
.suchfilter .panel-container {
    background-color: rgba(var(--bs-primary-rgb), .06);
    border: 1px solid rgba(var(--bs-primary-rgb), .25);
}
.suchfilter .form-label {
    margin-bottom: .125rem;
    color: var(--bs-body-color);
    font-weight: 600;
}
.suchfilter .form-text {
    color: var(--bs-body-color);
    opacity: .8;
}
.suchfilter .form-control,
.suchfilter .form-select,
.suchfilter .ts-wrapper .ts-control {
    border-color: var(--bs-secondary-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.suchfilter .form-control:focus,
.suchfilter .ts-wrapper.focus .ts-control {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
/* gewählte Einträge der Mehrfachauswahl als deutliche Marken */
.suchfilter .ts-wrapper.multi .ts-control > .item {
    background-color: var(--app-marke-bg);
    border: 1px solid rgba(var(--bs-primary-rgb), .4);
    color: var(--bs-body-color);
    border-radius: .25rem;
    padding: 0 .35rem;
}
.suchfilter .ts-wrapper.multi .ts-control > .item .remove {
    border-left: 1px solid rgba(var(--bs-primary-rgb), .4);
}
/* Eintrag "alle" (leerer Wert) ist keine Auswahl: nur hellgrauer Text, ohne Marke und Kreuzchen */
.suchfilter .ts-wrapper .ts-control > .item[data-value=""] {
    background: none;
    border: 0;
    padding: 0;
    color: var(--bs-secondary-color);
}
.suchfilter .ts-wrapper .ts-control > .item[data-value=""] .remove {
    display: none;
}
/* Filterfelder, die das Ergebnis einschränken (Klasse .gesetzt per Skript der Seite, z. B. kalender_tabelle) */
.suchfilter .form-control.gesetzt,
.suchfilter .form-select.gesetzt,
.suchfilter .ts-wrapper.gesetzt .ts-control {
    background-color: var(--app-marke-bg);
}
/* Filter reagieren aufeinander (js/filter_verfuegbar.js): gewählter Eintrag, der mit den übrigen Filtern
   keine Treffer ergibt; während der Abfrage ein Wartezeiger auf den Auswahlfeldern */
.suchfilter .ts-wrapper.multi .ts-control > .item.ohne-treffer {
    text-decoration: line-through;
    opacity: .6;
}
form.verfuegbar-laedt .ts-wrapper .ts-control {
    cursor: progress;
}
/* vom Museumsdienst verwaltete Institute in der Auswahlliste (Klasse aus kalender_tabelle, Farbe des MD);
   die Tom-Select-Liste hängt im body, daher ohne .suchfilter davor */
.ts-dropdown .option.verwaltung-md,
.ts-wrapper .item.verwaltung-md,
select.mehrfach option.verwaltung-md,
select.einfach option.verwaltung-md {
    color: #009ba0;
}
/* Zwischentitel in Auswahllisten (<optgroup>, z. B. Institut ueber den Ausstellungen): deutlich abgesetzt, Eintraege eingerueckt */
.ts-dropdown .optgroup-header {
    font-weight: 600;
    color: var(--bs-primary);
    background-color: var(--bs-tertiary-bg);
}
.ts-dropdown .optgroup .option {
    padding-left: 1.5rem;
}
/* nicht waehlbare Eintraege (z. B. Raeume ohne Buchung im Monat) ausgegraut */
.ts-dropdown .option[aria-disabled="true"] {
    opacity: .45;
    cursor: default;
}
/* vor dem Aufbau durch Tom Select nicht als hohe Liste erscheinen */
select.mehrfach:not(.tomselected) {
    height: calc(1.5em + .75rem + 2px);
    overflow: hidden;
}
/* Beschriftung links neben dem Feld (spart Höhe); das Feld nimmt den Rest der Breite */
.suchfilter .feld {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.suchfilter .feld > label {
    margin: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}
.suchfilter .feld > .form-control,
.suchfilter .feld > .form-select,
.suchfilter .feld > .ts-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}
/* Variante .label-oben: Label klein oberhalb des Felds, die volle Spaltenbreite gehört dem Feld
   (z. B. buchbare_angebote_ajax); die Knopfspalte steht dann per align-items-end bündig zu den Feldern */
.suchfilter.label-oben .feld {
    display: block;
}
.suchfilter.label-oben .feld > label {
    display: block;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    margin-bottom: .125rem;
}
/* fetter Anfang eines Eintrags in der Aufklappliste (data-fett, js/filter.js); das Theme setzt
   in .ts-dropdown eine eigene Schriftstaerke, daher !important */
.ts-dropdown .option strong {
    font-weight: 700 !important;
}
/* aufklappbare weitere Filter: Pfeil dreht sich */
.suchfilter .weitere-filter .sa {
    display: inline-block;
    transition: transform .2s;
}
.suchfilter .weitere-filter[aria-expanded="true"] .sa {
    transform: rotate(180deg);
}
.suchfilter .filtergruppe {
    font-weight: 600;
    white-space: nowrap;
}
/* Angebotsliste (Wunsch 04.11.2026): weicht die Auswahl von der angezeigten Liste ab, wird der Suchen-Knopf
   hellorange (dunkle Schrift wegen des Kontrasts, siehe --app-hellorange; Hover/Aktiv eine Spur dunkler);
   die voraussichtliche Treffermenge steht im Knopftext selbst ("n Angebote anzeigen", js/angebote_filter.js,
   gerechnet aus den Ausgrau-Daten, ohne eigene Abfrage) */
.suchfilter .btn-primary.geaendert {
    --bs-btn-bg: var(--app-hellorange);
    --bs-btn-border-color: var(--app-hellorange);
    --bs-btn-color: #212529;
    --bs-btn-hover-bg: #e97c28;
    --bs-btn-hover-border-color: #e97c28;
    --bs-btn-hover-color: #212529;
    --bs-btn-active-bg: #dd7626;
    --bs-btn-active-border-color: #dd7626;
    --bs-btn-active-color: #212529;
    --bs-btn-focus-shadow-rgb: 242, 138, 59;
    background-color: var(--app-hellorange);
    border-color: var(--app-hellorange);
    color: #212529;
}
.panel-toolbar #schnellfilter {
    width: 14rem;
}

/* ===== "zuletzt gesucht" in der Kopfzeile ===== */
/* 50rem breit, js/verlauf.js begrenzt beim Aufklappen auf den Platz bis 50px vor dem rechten Rand */
.app-verlauf .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
    width: 50rem;
}
.app-verlauf .dropdown-item {
    white-space: normal;
}
/* Eintrag mit Kreuzchen zum Entfernen rechts daneben (js/verlauf.js) */
.app-verlauf-eintrag {
    display: flex;
    align-items: center;
}
.app-verlauf-eintrag .dropdown-item {
    flex: 1 1 auto;
    min-width: 0;
}
.app-verlauf-loeschen {
    flex: 0 0 auto;
    margin: 0 .25rem;
}
.app-verlauf-loeschen .btn {
    padding: .125rem .375rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    opacity: .5;
}
.app-verlauf-eintrag:hover .app-verlauf-loeschen .btn,
.app-verlauf-loeschen .btn:focus-visible {
    opacity: 1;
}
.app-verlauf-loeschen .btn:hover {
    color: var(--bs-danger);
}

/* ===== angemeldetes Konto in der Kopfzeile (uc-rahmen-oben): Kurzname und Anbieter ===== */
.app-benutzer .btn {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-benutzer .dropdown-menu {
    min-width: 16rem;
}

/* ===== Anmeldung (login.aspx) ===== */
.anmeldung {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.anmeldung .card {
    width: 100%;
    max-width: 26rem;
}
.anmeldung-logo {
    display: block;
    max-width: 100%;
    max-height: 4rem;
}

/* ===== Listen (Terminübersicht u. a.) ===== */
.liste td,
.liste th {
    vertical-align: top;
}
.liste tr.tag > th {
    background-color: rgba(var(--bs-primary-rgb), .08);
    font-weight: 600;
}
.liste tr.tag.faellig > th {
    background-color: rgba(var(--bs-warning-rgb), .2);
}
.liste .nr {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.liste .nr-indiv {
    background-color: rgba(var(--bs-info-rgb), .2);
}
.liste .nr-raum {
    font-weight: 600;
}
.liste .anmeldepflichtig {
    font-weight: 600;
}
.liste .raum,
.laschenseite .raum {
    color: var(--bs-info);
}
.liste .veranstalter {
    color: var(--bs-warning);
}
.liste .notiz {
    color: var(--bs-pink);
}
.liste tr.deakt td,
.laschenseite tr.deakt td {
    text-decoration: line-through;
    opacity: .55;
}
.liste .storno,
.laschenseite .storno,
.laschenseite tr.storno td {
    text-decoration: line-through;
    opacity: .6;
}
/* Mitarbeiterstatus: 1 angefragt, 2 zugesagt, 3/10/20 abgesagt bzw. storniert */
.liste .status1, .laschenseite .status1 { color: #cc9900; }
.liste .status2, .laschenseite .status2 { color: #339933; }
.liste .status3, .laschenseite .status3,
.liste .status10, .laschenseite .status10,
.liste .status20, .laschenseite .status20 {
    opacity: .5;
    text-decoration: line-through;
}

/* sortierbare Spalten (js/sortieren.js): Pfeil an der sortierten Spalte */
.liste th.sortierkopf {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.liste th.sortierkopf:hover {
    background-color: rgba(var(--bs-primary-rgb), .06);
}
.liste th[aria-sort="ascending"]::after,
.liste th[aria-sort="descending"]::after {
    font-family: "smartadmin-icons";
    font-weight: 400;
    content: "\f2fc";   /* sa-chevron-up */
    font-size: .7rem;
    margin-left: .25rem;
    opacity: .7;
}
.liste th[aria-sort="descending"]::after {
    content: "\f2f9";   /* sa-chevron-down */
}
@media print {
    .liste th[aria-sort]::after { content: none; }
}

/* ===== Angebotslisten (02_angebote_buchbar) ===== */
/* Titel oeffnet die Lasche */
.liste.angebote .titel {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
.liste.angebote .titel:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}
.liste.angebote .ausstellung {
    color: var(--bs-info-text-emphasis);
}
.liste .verfuegbarkeitsplan,
.laschenseite .verfuegbarkeitsplan {
    color: #ff8935;
}

/* ===== Seiten in der Lasche (uc-laschenseite-*): ohne Rahmen, dicht gesetzt ===== */
.laschenseite {
    padding: .75rem 1rem 1.5rem;
}
.laschenseite .kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .75rem;
}
.laschenseite .kopf h1 {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    margin: .15rem 0;
}
.laschenseite .kopf .knoepfe {
    margin-left: auto;
    white-space: nowrap;
}
.laschenseite .nr {
    display: inline-block;
    padding: 0 .4rem;
    border-radius: .25rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.laschenseite .nr-indiv {
    background-color: rgba(var(--bs-info-rgb), .2);
}
.laschenseite .nr-oeff {
    background-color: rgba(var(--bs-primary-rgb), .12);
}
.laschenseite .nr-raum {
    background-color: rgba(var(--bs-secondary-rgb), .15);
}
.laschenseite .marken:empty {
    display: none;
}
.laschenseite h2 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--bs-primary);
    margin: 1.25rem 0 .5rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.laschenseite h2 .badge {
    font-size: .7rem;
    vertical-align: middle;
}
.laschenseite dl.daten {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .15rem .75rem;
    margin: 0;
}
.laschenseite dl.daten dt {
    font-weight: 600;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
.laschenseite dl.daten dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* "linien": Zeilenlinien zur besseren Lesbarkeit (Vorgabe 24.09.2026, zuerst in der Raum-Lasche).
   Beschriftung und Wert tragen je die halbe Linie, deshalb kein Spaltenabstand (der risse sie auf);
   die letzte Zeile bleibt ohne Linie, darunter steht schon die nächste Überschrift */
.laschenseite dl.daten.linien {
    gap: 0;
}
.laschenseite dl.daten.linien dt,
.laschenseite dl.daten.linien dd {
    padding: .3rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}
.laschenseite dl.daten.linien dt {
    padding-right: .75rem;
}
.laschenseite dl.daten.linien > :nth-last-child(-n+2) {
    border-bottom: 0;
}
.laschenseite .termin {
    padding: .5rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    margin-bottom: .5rem;
}
.laschenseite .termin.aktiv {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .2);
}
.laschenseite .termin.deakt,
.laschenseite .termin.storno-termin {
    opacity: .6;
}
.laschenseite .kundenkarte {
    background-color: rgba(var(--bs-info-rgb), .08);
    border-radius: .375rem;
    padding: .5rem .75rem;
    height: 100%;
}
.laschenseite .bild img {
    max-width: 100%;
    height: auto;
    border-radius: .25rem;
}
.laschenseite .text p:last-child {
    margin-bottom: 0;
}
.laschenseite tr.aktiv td {
    background-color: rgba(var(--bs-primary-rgb), .08);
}
/* Fusszeile der Lasche: eingegeben/geaendert, fest am unteren Rand (Vorgabe 17.09.2026);
   der Inhalt bekommt unten Platz, damit nichts darunter verschwindet */
.laschenseite:has(> .fuss) {
    padding-bottom: 3.5rem;
}
.laschenseite .fuss {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: .45rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-secondary-color);
}

/* ===== Angebot in der Lasche (02_angebote_buchbar/data-source/einzelangebot_details_lasche) ===== */
/* Reiter deutlicher (Vorgabe 17.09.2026): hinterlegte Leiste, aktiver Reiter weiss mit farbiger Oberkante */
.laschenseite .angebot-reiter {
    margin: 1rem -.25rem .9rem;   /* unter dem Kopf (Kopf steht seit 17.09.2026 einmal ueber den Reitern) */
    padding: .35rem .35rem 0;
    gap: .25rem;
    background-color: var(--bs-tertiary-bg);
    border-bottom: 2px solid var(--bs-primary);
    border-radius: .375rem .375rem 0 0;
}
.laschenseite .angebot-reiter .nav-link {
    padding: .5rem .9rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: .375rem .375rem 0 0;
}
.laschenseite .angebot-reiter .nav-link:hover {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .08);
}
.laschenseite .angebot-reiter .nav-link.active {
    color: var(--bs-primary);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    box-shadow: inset 0 3px 0 var(--bs-primary);
}
/* Rahmen um die Diagramme der Statistik (Vorgabe 17.09.2026) */
.laschenseite .diagramm {
    height: 100%;
    padding: .5rem .75rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
}
.laschenseite .diagramm h2 {
    margin-top: 0;
}
.laschenseite .kopf .kopf-text {
    flex: 1 1 16rem;
    min-width: 0;
}
.laschenseite .kopf .knoepfe {
    margin-left: 0;
    margin-bottom: 20px;   /* Abstand zu den Reitern (Vorgabe 17.09.2026) */
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
/* Knoepfe im Kopf etwas kleiner (Vorgabe 17.09.2026): weniger Innenabstand; Schrift bleibt bei der Mindestgroesse 0.9rem */
.laschenseite .kopf .knoepfe .btn {
    padding: .1rem .45rem;
    font-size: .9rem;
    line-height: 1.35;
}
.laschenseite .kopf .knoepfe .btn .sa {
    font-size: .85em;
}
/* Instituts-Lasche (data-source/institut_details.aspx, Vorgabe 13.10.2026): die Beschriftungen aller Datenlisten
   (Kontakt, Gruppen, Öffnungszeiten-Texte) gleich breit, damit die Inhalte in einer Linie stehen; die Spalte ist
   fest statt max-content, lange Beschriftungen dürfen umbrechen */
.laschenseite dl.daten.inst-daten {
    grid-template-columns: 11rem minmax(0, 1fr);
}
.laschenseite dl.daten.inst-daten dt {
    white-space: normal;
}
/* Ausnahme Raum-Lasche (Vorgabe 23.09.2026): "Belegung" und "Bearbeiten" in normaler Knopfgröße wie "Suchen" in den Listen;
   die Instituts-Lasche (12.10.2026) trägt dieselbe Klasse */
.laschenseite .kopf.raum-kopf .knoepfe .btn,
.laschenseite .kopf.reihe-kopf .knoepfe .btn,
.laschenseite .kopf.veranstalter-kopf .knoepfe .btn,
.laschenseite .kopf.preis-kopf .knoepfe .btn {
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
    line-height: var(--bs-btn-line-height);
}
.laschenseite .kopf.raum-kopf .knoepfe .btn .sa,
.laschenseite .kopf.reihe-kopf .knoepfe .btn .sa,
.laschenseite .kopf.veranstalter-kopf .knoepfe .btn .sa,
.laschenseite .kopf.preis-kopf .knoepfe .btn .sa {
    font-size: 1em;
}
/* "verlaesst die Lasche": sa-arrow-up um 45 Grad nach links gedreht (es gibt keinen diagonalen Pfeil im Icon-Font) */
.sa-pfeil-links-oben {
    display: inline-block;
    transform: rotate(-45deg);
}
/* Freigaben rechts oben: normale Haken mit Beschriftung, etwas groesser, untereinander (Vorgabe 17.09.2026) */
.laschenseite .freigaben {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-left: auto;
}
.laschenseite .freigabe {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
}
.laschenseite .freigabe .haken {
    font-size: 1.35rem;
    width: 1.35rem;
    text-align: center;
}
.laschenseite .freigabe.ja .haken {
    color: var(--bs-success);
}
.laschenseite .freigabe.nein {
    color: var(--bs-secondary-color);
}
/* Kennzahlen der Statistik */
.laschenseite .kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .5rem;
}
/* zwei feste Spalten à 50 % (Zuschlag-Ansicht, Wunsch 04.11.2026): der dritte Kasten (Rechnungsposten)
   beginnt so die zweite Zeile; minmax(0, …) lässt die Kästen in der schmalen Vorschau schrumpfen */
.laschenseite .kennzahlen.zweispaltig {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.laschenseite .kennzahl {
    padding: .5rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background-color: #b0e0e680;
}
.laschenseite .kennzahl .titel {
    color: var(--bs-secondary-color);
    font-weight: 600;
}
.laschenseite .kennzahl .zahl {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.laschenseite .kennzahl .zusatz {
    color: var(--bs-secondary-color);
}
/* Lasche Ausstellung (Kopfumbau Vorgabe 29.10.2026): Lage-Marke klein neben der Text-Laufzeit,
   Angebots-Knoepfe unter der Freigabe */
.laschenseite .kopf .laufzeit .badge {
    font-size: .65rem;
    vertical-align: middle;
}
.laschenseite .freigaben .btn {
    white-space: nowrap;
}
/* Knoepfe "Angebote"/"Neues Angebot" rechts oben im Reiter Angebote: etwas nach oben gerueckt (Vorgabe 29.10.2026) */
.laschenseite h2 .float-end {
    margin-top: -20px;
}
/* Sprachumschalter deutsch/englisch bzw. roter Hinweis rechts ueber den Kurzangaben (Vorgabe 29.10.2026);
   echtes Rot statt --bs-danger (in Lunar Orchidee) */
.laschenseite .rot {
    color: var(--app-rot-text);
}
.laschenseite .sprachwahl {
    font-size: .8rem;
    margin-bottom: 10px;            /* Abstand zu den Kurzangaben (Vorgabe 29.10.2026) */
}
/* Mengen-Zahlen in den Reitern kleiner */
.laschenseite .angebot-reiter .badge {
    font-size: .65rem;
    vertical-align: middle;
}
.laschenseite h2 .float-end .btn + .btn {
    margin-left: .35rem;
}
/* Bildunterschrift des Referenzbildes direkt unter dem Bild (Vorgabe 05.11.2026) */
.laschenseite .ausstellung-vorspann .bild-bu {
    font-size: .8em;
    line-height: 100%;
    margin-top: .25rem;
}
/* Referenzbild links (figure: 25 % breit, Bild hoechstens 200 px hoch, mit der Unterschrift vom Kurztext
   umflossen), oberhalb der Reiter */
.laschenseite .ausstellung-vorspann {
    display: flow-root;             /* schliesst den Float ein, alles Weitere beginnt darunter */
    margin-bottom: .5rem;
}
.laschenseite .ausstellung-vorspann .referenzbild {
    float: left;
    width: 25%;
    margin: .15rem .75rem .25rem 0;
}
.laschenseite .ausstellung-vorspann .referenzbild img {
    width: 100%;
    max-height: 200px;
    object-fit: contain;            /* nie verzerren, wenn die Hoehe die 200 px kappt */
    object-position: left top;
}
/* die weiteren Bilder als Reihe ueber dem Langtext, alle 100 px hoch */
.laschenseite .ausstellung-weitere-bilder {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}
.laschenseite .ausstellung-weitere-bilder img {
    height: 100px;
    width: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
}
/* Reiter "Bilder": Kacheln, Hauptbild gruen gerahmt */
.ausstellung-bearbeiten .ausstellung-bilder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .75rem;
}
.ausstellung-bearbeiten .bild-karte {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    overflow: hidden;
    background-color: var(--bs-body-bg);
}
.ausstellung-bearbeiten .bild-karte.haupt {
    border-color: var(--bs-success);
}
.ausstellung-bearbeiten .bild-karte img {
    display: block;
    width: 100%;
    height: 10rem;
    object-fit: contain;
    background-color: #f3f4f6;
}
.ausstellung-bearbeiten .bild-karte .bild-info {
    padding: .5rem .75rem;
}
.ausstellung-bearbeiten .bild-karte .knoepfe {
    margin-top: .4rem;
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}
/* kleine Teaser-Vorschau im Reiter Angaben */
.ausstellung-bearbeiten .ausstellung-teaservorschau {
    display: block;
    max-width: 100%;
    max-height: 11rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
}
/* Handzuschnitt (forms/ausstellung_bild_zuschnitt.aspx): Pan/Zoom-Flaeche mit Ausschnittrahmen */
.ausstellung-zuschnitt #zuschnittWrap {
    position: relative;
    min-height: 160px;      /* die Hoehe setzt js/ausstellung_bild_zuschnitt.js auf die Hoehe des gezoomten Bildes */
    overflow: hidden;
    border-radius: .5rem;
    background-color: #3a3a3a;
    background-image:
        linear-gradient(45deg, #555 25%, transparent 25%),
        linear-gradient(-45deg, #555 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #555 75%),
        linear-gradient(-45deg, transparent 75%, #555 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.ausstellung-zuschnitt #zuschnittWrap.zieht {
    cursor: grabbing;
}
.ausstellung-zuschnitt #zuschnittBild {
    position: absolute;
    display: none;
    pointer-events: none;
    max-width: none;
}
.ausstellung-zuschnitt #zuschnittRahmen {
    position: absolute;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .48);
    border: 1px solid rgba(255, 255, 255, .9);
    cursor: move;
    touch-action: none;
}
.ausstellung-zuschnitt .hdl {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid #444;
    touch-action: none;
}
.ausstellung-zuschnitt .hdl.nw { top: -6px; left: -6px; cursor: nw-resize; }
.ausstellung-zuschnitt .hdl.ne { top: -6px; right: -6px; cursor: ne-resize; }
.ausstellung-zuschnitt .hdl.se { bottom: -6px; right: -6px; cursor: se-resize; }
.ausstellung-zuschnitt .hdl.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
.ausstellung-zuschnitt .zuschnitt-leiste {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}
.ausstellung-zuschnitt .zuschnitt-leiste .feld label {
    display: block;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    margin-bottom: .1rem;
}
.ausstellung-zuschnitt .zuschnitt-leiste .feld input {
    width: 5.5rem;
    font-variant-numeric: tabular-nums;
}
.ausstellung-zuschnitt .zuschnitt-leiste .zoom {
    flex: 0 1 300px;
    min-width: 220px;
}
.ausstellung-zuschnitt .zuschnitt-leiste .zoomzahl {
    width: 6.5rem;
    flex: 0 0 auto;
}
.ausstellung-zuschnitt .zuschnitt-leiste .ziele {
    align-self: center;
}
.ausstellung-zuschnitt .zuschnitt-vorschau {
    max-height: 160px;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
}
/* Saeulen: eine Farbe, 4px gerundete Oberkante, 2px Abstand, Wert beim Zeigen (title) */
.laschenseite .balken {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 8rem;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 1.4rem;
    position: relative;
}
.laschenseite .balken .saeule {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    position: relative;
    cursor: default;
}
.laschenseite .balken .saeule:hover {
    background-color: rgba(var(--bs-primary-rgb), .06);
}
.laschenseite .balken .wert {
    display: block;
    width: 70%;
    max-width: 2.25rem;
    margin: 0 auto;
    border-radius: 4px 4px 0 0;
    background-color: var(--bs-primary);
}
.laschenseite .balken .wert.leer {
    height: 0 !important;
}
.laschenseite .balken .zahl {
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.laschenseite .balken .beschriftung {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.4rem;
    text-align: center;
    font-size: .9rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
/* Monatsverlauf mit Jahr als zweiter Beschriftungszeile, Trennlinie am Januar */
.laschenseite .balken.mit-jahr {
    padding-bottom: 2.6rem;
}
/* Beschriftung von oben ausrichten: erste Zeile Jahr (oder leer), darunter der Monat, alle Monate auf einer Linie */
.laschenseite .balken.mit-jahr .beschriftung {
    top: 100%;
    bottom: auto;
    overflow: visible;
}
/* Jahr linksbuendig ab der Januar-Saeule, darf in die leere Jahreszeile daneben laufen */
.laschenseite .balken .beschriftung .jahr {
    display: block;
    text-align: left;
    padding-left: 3px;
    font-weight: 600;
    color: var(--bs-body-color);
}
/* Besuchergruppen: 100-%-Balken mit Legende; Farben = Slots 1-4 der geprueften Referenzpalette (dataviz),
   feste Reihenfolge, 2px Abstand zwischen den Segmenten, eigene Stufen fuer den Dunkelmodus */
.laschenseite {
    --reihe-1: #2a78d6;
    --reihe-2: #eb6834;
    --reihe-3: #1baf7a;
    --reihe-4: #eda100;
}
[data-bs-theme="dark"] .laschenseite {
    --reihe-1: #3987e5;
    --reihe-2: #d95926;
    --reihe-3: #199e70;
    --reihe-4: #c98500;
}
.laschenseite .anteile {
    display: flex;
    gap: 2px;
    height: 1.5rem;
    margin: .25rem 0 .75rem;
}
.laschenseite .anteile .segment {
    flex-basis: 0;
    min-width: 3px;
}
.laschenseite .anteile .segment:first-child {
    border-radius: 4px 0 0 4px;
}
.laschenseite .anteile .segment:last-child {
    border-radius: 0 4px 4px 0;
}
.laschenseite .anteile .segment:only-child {
    border-radius: 4px;
}
.laschenseite .reihe1 { background-color: var(--reihe-1); }
.laschenseite .reihe2 { background-color: var(--reihe-2); }
.laschenseite .reihe3 { background-color: var(--reihe-3); }
.laschenseite .reihe4 { background-color: var(--reihe-4); }
.laschenseite ul.legende {
    list-style: none;
    padding: 0;
    margin: 0;
}
.laschenseite ul.legende li {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    padding: .1rem 0;
}
.laschenseite ul.legende .farbe {
    flex: 0 0 auto;
    width: .8rem;
    height: .8rem;
    border-radius: 2px;
    align-self: center;
}
.laschenseite ul.legende .name {
    flex: 1 1 auto;
    min-width: 0;
}
.laschenseite ul.legende .wert {
    color: var(--bs-secondary-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.laschenseite .balken .saeule.neues-jahr {
    border-left: 1px dashed var(--bs-border-color);
}
.laschenseite ol.besuchergruppen {
    padding-left: 1.25rem;
    margin-bottom: 0;
}
/* Zeiten je Wochentag (Staffelung im Angebot) */
.laschenseite table.zeiten th {
    padding: 0 .5rem 0 0;
    font-weight: 600;
    vertical-align: top;
    white-space: nowrap;
    hyphens: manual;
}
.laschenseite .liste th,
.laschenseite .liste .gueltig {
    white-space: nowrap;
}
.laschenseite table.zeiten td {
    padding: 0;
}

/* ===== Feiertage (06_ressourcen/feiertage_oeffnungszeiten.aspx, forms/feiertag_bearbeiten.aspx) ===== */
.feiertage .sp-info {
    width: 2.5rem;
}
.feiertage .sp-datum {
    width: 8rem;
}
.feiertage .sp-wochentag {
    width: 9rem;
}
.feiertage .sp-datum-lang {
    width: 14rem;
}
/* wie in den Angebotslisten: i in der ersten Spalte und der Titel öffnen die Lasche */
.liste.feiertage .titel {
    color: inherit;
    text-decoration: none;
}
.liste.feiertage .titel:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}
.feiertage tr.vorbei > td {
    color: var(--bs-secondary-color);
}
.feiertage tr.naechster > td {
    font-weight: 600;
}
.feiertag-formular {
    max-width: 32rem;
}

/* ===== Ausstellungen (06_ressourcen/ausstellungen.aspx, data-source/ausstellung_details.aspx) ===== */
.ausstellungen .sp-info {
    width: 2.5rem;
}
.ausstellungen .sp-laufzeit {
    width: 13rem;
}
.ausstellungen .sp-inst {
    width: 5rem;
}
.ausstellungen .sp-stand,
.ausstellungen .sp-angebote {
    width: 7rem;
}
.ausstellungen .sp-web {
    width: 3rem;
}
.ausstellungen .sp-id {
    width: 5rem;
}
/* wie in den Angebotslisten: i in der ersten Spalte und der Titel öffnen die Lasche */
.liste.ausstellungen .titel,
.liste.ausstellung-angebote .titel,
.liste.ausstellung-termine .titel {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
.liste.ausstellungen .titel:hover,
.liste.ausstellung-angebote .titel:hover,
.liste.ausstellung-termine .titel:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}
/* Lasche, Reiter "Termine": der Titel ist schlicht, die Art davor ist fett; die Nummer ist ein Link ohne Unterstreichung */
.liste.ausstellung-termine .titel {
    font-weight: 400;
}
.liste.ausstellung-termine a:has(> .nr) {
    color: inherit;
    text-decoration: none;
}
/* Marke "kommt" mit weißer Schrift (Vorgabe 18.09.2026) */
.liste.ausstellungen .badge.bg-info,
.laschenseite .marken .badge.bg-info {
    color: #fff;
}
/* Zahl der aktiven Angebote führt in die Angebotsliste */
.liste.ausstellungen .angebote-link {
    font-weight: 600;
}
/* Lasche: abgelaufene und deaktivierte Angebote zurückgenommen, die Marke am Titel sagt warum */
.ausstellung-angebote tr.inaktiv > td {
    color: var(--bs-secondary-color);
}
.ausstellung-angebote tr.inaktiv .titel {
    font-weight: 400;
}
/* Formular (forms/ausstellung_bearbeiten.aspx): Titel ueber den Reitern groesser, Laufzeit klein daneben */
.ausstellung-bearbeiten .ausstellung-titel .titel {
    font-size: 1.4rem;
    font-weight: 600;
}
.ausstellung-bearbeiten .ausstellung-titel .laufzeit {
    margin-left: .35rem;
}

/* ===== Räume (06_ressourcen/raeume.aspx, data-source/raum_details.aspx, forms/raum_bearbeiten.aspx) ===== */
/* erste Spalte: i und Stift nebeneinander */
.raeume .sp-info {
    width: 4.6rem;
}
.raeume .sp-info + th {
    padding-left: .25rem;
}
.raeume .sp-inst {
    width: 5rem;
}
.raeume .sp-art {
    width: 12rem;
}
.raeume .sp-warnung {
    width: 8rem;
}
.raeume .sp-id {
    width: 5rem;
}
/* wie in den anderen Listen: i in der ersten Spalte und der Titel öffnen die Lasche */
.liste.raeume .titel {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
.liste.raeume .titel:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}
/* deaktivierte Räume zurückgenommen, die Marke am Titel sagt warum (nicht durchgestrichen wie stornierte Termine) */
.raeume tr.inaktiv > td {
    color: var(--bs-secondary-color);
}
.raeume tr.inaktiv .titel {
    font-weight: 400;
}
/* Raum bearbeiten (forms/raum_bearbeiten.aspx): eigene Seite mit Reitern, Kästen und fester Speicherleiste wie die
   Institutsseite (Vorgabe 23.09.2026); Reiter und Feldränder mit denselben Kontrasten */
.raum-bearbeiten .nav-tabs {
    border-bottom-color: var(--bs-secondary-color);
}
.raum-bearbeiten .nav-tabs .nav-link {
    color: var(--bs-body-color);
    font-weight: 600;
}
.raum-bearbeiten .nav-tabs .nav-link.active {
    font-weight: 700;
    border-color: var(--bs-secondary-color) var(--bs-secondary-color) var(--bs-body-bg);
}
.raum-bearbeiten .inst-gruppe {
    padding-top: .25rem;
}
.raum-bearbeiten .col-form-label,
.raum-bearbeiten .form-label {
    font-weight: 600;
    hyphens: auto;
}
.raum-bearbeiten .form-label {
    margin-bottom: .2rem;
}
/* Grundangaben und Gruppen nebeneinander: beide Kästen gleich hoch, der Abstand nach unten kommt von der Zeile */
.raum-bearbeiten .raum-kaesten {
    margin-bottom: 2.25rem;
}
.raum-bearbeiten .raum-kaesten .inst-gruppe {
    height: 100%;
    margin-bottom: 0;
}
.raum-bearbeiten .form-control,
.raum-bearbeiten .form-select {
    border-color: var(--bs-secondary-color);
}
.raum-bearbeiten .form-text {
    color: var(--bs-body-color);
    opacity: .85;
}
.raum-bearbeiten .zahl {
    max-width: 22rem;
}
.raum-bearbeiten input.zahl {
    max-width: 7rem;
}
/* Zahl und Einheit bleiben in einer Zeile, auch im schmalen Kasten "Gruppen" (1/3 der Breite) */
.raum-bearbeiten .input-group.zahl {
    flex-wrap: nowrap;
}
.raum-bearbeiten .input-group.zahl > .form-control {
    flex: 0 0 4.5rem;
}
.raum-bearbeiten .input-group.zahl > .input-group-text {
    white-space: normal;
    line-height: 1.2;
}
.raum-bearbeiten textarea {
    min-height: 4.5rem;
}
.raum-bearbeiten .panel-hdr .panel-toolbar {
    gap: .3rem;
}
/* Kopf: Raumtitel gross, Marken (Raumart, deaktiviert) und "nsd · Nr. 62" rechts daneben (Vorgabe 23.09.2026) */
.raum-bearbeiten .panel-hdr h2.raum-titel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .6rem;
    height: auto;
    padding: .4rem 0;
    font-size: 1.45rem;
    line-height: 1.3;
}
.raum-bearbeiten .panel-hdr h2.raum-titel .titel {
    font-weight: 700;
}
.raum-bearbeiten .panel-hdr h2.raum-titel .badge {
    font-size: .74rem;
    font-weight: 600;
}
.raum-bearbeiten .panel-hdr h2.raum-titel .nr {
    font-size: 1rem;
    white-space: nowrap;      /* "nsd · Nr. 62" bleibt zusammen, der Titel darf umbrechen */
}
/* ===== Belegung der nächsten 7 Tage in der Raum-Lasche (Vorgabe 23.09.2026, Wochenansicht wie in Outlook) =====
   Zeitachse links, sieben Tagesspalten; die Lage der Streifen, Linien und Blöcke rechnet raum_details.aspx.vb
   in Pixel aus (--wochenhoehe = Höhe des gezeigten Ausschnitts). */
/* Reiter der Lasche (Angaben / Belegung, Vorgabe 24.09.2026) wie auf der Bearbeiten-Seite; die Reihen-Lasche
   (Reiheninformationen / Veranstaltungen, 28.09.2026) nutzt dieselben Regeln über die Klasse raum-reiter */
.laschenseite .nav-tabs.raum-reiter {
    border-bottom-color: var(--bs-secondary-color);
}
.laschenseite .nav-tabs.raum-reiter .nav-link {
    color: var(--bs-body-color);
    font-weight: 600;
    padding: .35rem .8rem;
}
.laschenseite .nav-tabs.raum-reiter .nav-link.active {
    font-weight: 700;
    border-color: var(--bs-secondary-color) var(--bs-secondary-color) var(--bs-body-bg);
}
.laschenseite .nav-tabs.raum-reiter .badge {
    font-size: .7rem;
    vertical-align: .05rem;
}
/* Zeitraum und Legende über dem Gitter (Vorgabe 24.09.2026); kein float: ein Grid weicht Floats aus und würde schmaler */
.raum-woche-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .25rem 1rem;
    margin-bottom: .25rem;
    font-size: .8rem;
}
.raum-woche-legende {
    font-size: .8rem;
    color: var(--bs-body-color);
}
.raum-woche-legende .probe {
    display: inline-block;
    width: 1rem;
    height: .75rem;
    margin: 0 .2rem 0 .6rem;
    border-radius: .15rem;
    vertical-align: -.05rem;
}
.raum-woche-legende .probe.indiv { background-color: var(--k-indiv); }
.raum-woche-legende .probe.oeff { background-color: var(--k-oeff); }
.raum-woche-legende .probe.raum { background-color: var(--k-raum); }
.raum-woche {
    display: grid;
    width: 100%;                /* volle Breite der Lasche (Vorgabe 24.09.2026) */
    grid-template-columns: 3.2rem repeat(7, minmax(0, 1fr));
    gap: 1px;
    background-color: var(--bs-border-color);
    border: 1px solid var(--bs-secondary-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}
.raum-woche .zeitachse,
.raum-woche .tag {
    background-color: var(--bs-body-bg);
    min-width: 0;
}
.raum-woche .kopf {
    padding: .25rem .3rem;
    text-align: center;
    line-height: 1.25;
    background-color: rgba(var(--bs-primary-rgb), .1);
    border-bottom: 1px solid var(--bs-secondary-color);
    min-height: 3.1rem;
}
.raum-woche .kopf .wochentag {
    font-weight: 700;
}
.raum-woche .kopf .datum {
    margin-left: .2rem;
    white-space: nowrap;
}
/* Feiertag, Schließung, Sonderöffnung: das Icon bleibt lesbar, auch wenn der Text nicht in die Spalte passt */
.raum-woche .kopf .hinweis {
    display: block;
    font-size: .75rem;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.raum-woche .kopf .hinweis.zu {
    color: var(--app-rot-text, #c62828);
    font-weight: 600;
}
.raum-woche .heute > .kopf {
    background-color: rgba(var(--bs-primary-rgb), .3);
}
.raum-woche .wochenende > .kopf,
.raum-woche .feiertag > .kopf {
    background-color: rgba(var(--bs-secondary-rgb), .18);
}
.raum-woche .streifen {
    position: relative;
    height: var(--wochenhoehe);
    overflow: hidden;      /* ein Block bleibt in seiner Tagesspalte */
}
.raum-woche .tag.geschlossen .streifen {
    background-image: repeating-linear-gradient(135deg, rgba(var(--bs-secondary-rgb), .18) 0 6px, transparent 6px 12px);
}
/* Öffnungszeit als heller Streifen, darüber die Stundenlinien */
.raum-woche .offen {
    position: absolute;
    left: 0;
    right: 0;
    background-color: rgba(var(--bs-primary-rgb), .09);
}
.raum-woche .linie {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--bs-border-color);
}
.raum-woche .zeitachse .streifen {
    background-color: rgba(var(--bs-secondary-rgb), .06);
}
.raum-woche .stunde {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--bs-border-color);
    font-size: .78rem;
    color: var(--bs-body-color);
    text-align: right;
    padding-right: .25rem;
}
.raum-woche .stunde span {
    position: relative;
    top: -.05rem;
}
/* eine Belegung; bei Überschneidung stehen sie nebeneinander (Spur/Spuren aus dem Codebehind).
   Nicht anklickbar (Vorgabe 24.09.2026): die Einzelheiten zeigt die Info-Blase beim Überfahren */
.raum-woche .block {
    position: absolute;
    overflow: hidden;
    padding: .05rem .2rem;
    border: 1px solid var(--bs-secondary-color);
    border-left-width: 3px;
    border-radius: .2rem;
    font-size: .78rem;
    line-height: 1.2;
    color: var(--bs-body-color);
    text-decoration: none;
    background-color: var(--bs-body-bg);
    cursor: default;
}
.raum-woche .block:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -1px;
}
.raum-woche .block:hover {
    z-index: 3;
    box-shadow: 0 .15rem .5rem rgba(0, 0, 0, .28);
}
.raum-woche .block .zeit {
    font-weight: 600;
    white-space: nowrap;
}
.raum-woche .block .nr {
    padding: 0 .15rem;
}
/* Farben wie in der Kalenderansicht (--k-oeff / --k-indiv / --k-raum), hier als heller Hintergrund mit farbiger Kante */
.raum-woche .block.indiv {
    border-left-color: var(--k-indiv);
    background-color: color-mix(in srgb, var(--k-indiv) 16%, var(--bs-body-bg));
}
.raum-woche .block.oeff {
    border-left-color: var(--k-oeff);
    background-color: color-mix(in srgb, var(--k-oeff) 16%, var(--bs-body-bg));
}
.raum-woche .block.raum {
    border-left-color: var(--k-raum);
    background-color: color-mix(in srgb, var(--k-raum) 16%, var(--bs-body-bg));
}
@media (max-width: 991.98px) {
    .raum-woche {
        font-size: .8rem;
    }
    .raum-woche .kopf .datum {
        display: block;
        margin-left: 0;
    }
}

/* Zeiten des Raums in der Details-Lasche (uc-verfuegbarkeit): die Kästen der Institutsseite, etwas dichter;
   die Wochentabelle darf schmaler werden als auf der Institutsseite (Lasche breit = 60vw) */
.laschenseite .inst-gruppe {
    margin-bottom: 1.25rem;
}
.laschenseite .inst-woche {
    min-width: 38rem;
}
.laschenseite .inst-gruppe > h3 {
    font-size: 1rem;
}

/* Knopf "zurück zur Übersicht" im Kopf, rechts neben "Menü einklappen" (uc-rahmen-oben, auf Detailseiten) */
.app-header .app-uebersicht-knopf {
    white-space: nowrap;
}

/* ===== Museen & Institutionen (06_ressourcen/institute.aspx = Liste, forms/institut_bearbeiten.aspx + js/institut_bearbeiten.js = Formular) =====
   Kräftige Kontraste (Vorgabe 18.09.2026), gerechnet für hell und dunkel: Texte in --bs-body-color (hell 7,5:1),
   Ränder von Feldern in --bs-secondary-color (hell 3,5:1, wie .suchfilter; --bs-border-color hätte nur 1,3:1),
   Akzentlinien in --bs-link-color (--bs-primary hat keinen Dunkel-Wert). Gruppen sind getönte Kästen mit
   Kopfbalken, die Felder darin bleiben in --bs-body-bg. "Geändert" ist rot wie der Speichern-Knopf (--app-rot). */
.institute .verwaltung-md,
.laschenseite .verwaltung-md,
.reihen .verwaltung-md,
.veranstalter-liste .verwaltung-md {
    color: #009ba0;
}
.institute .badge.bg-md,
.laschenseite .badge.bg-md {
    background-color: #009ba0;
}
/* Übersicht (Vorgabe 12.10.2026): erste Spalte i (Lasche), zweite Spalte Stift (Bearbeiten) */
.institute .sp-info,
.institute .sp-bearbeiten {
    width: 2.5rem;
}
.institute .sp-bearbeiten + th {
    padding-left: .25rem;
}
.institute .text-muted {
    color: var(--bs-body-color) !important;   /* .text-muted trägt selbst !important und hat hell nur 3,8:1 */
    opacity: .85;
}
.institute .liste .titel {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
.institute .liste .titel.verwaltung-md {
    color: #009ba0;
}
.institute .liste .titel:hover,
.institute .liste a.leise:hover {
    color: var(--bs-link-color);
    text-decoration: underline;
}
.institute .liste a.leise {
    color: inherit;
    text-decoration: none;
}
.institute .panel-hdr .panel-toolbar {
    gap: .3rem;
}
/* Bearbeiten-Seite (forms/institut_bearbeiten.aspx): über dem Formular die Institutswahl als filterbare Auswahlliste
   mit den vollen Namen (Vorgabe 29.10.2026, ersetzt die Kürzel-Knopfleiste); MD-Institute färbt die allgemeine Regel
   .ts-dropdown .option.verwaltung-md / .ts-wrapper .item.verwaltung-md in der MD-Farbe */
.institut-bearbeiten .inst-wahl {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 2.25rem;                   /* Luft zur Kopfzeile (Vorgabe 14.10.2026) */
}
/* Feld nur so breit wie der längste Name (Breite setzt js/institut_bearbeiten.js; ohne JavaScript
   misst sich das normale Auswahlfeld selbst); auf schmalen Fenstern darf es schrumpfen */
.institut-bearbeiten .inst-wahl > .ts-wrapper,
.institut-bearbeiten .inst-wahl > .form-select {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}
/* Blätterknöpfe voriges/nächstes Institut links und rechts der Auswahl: schmal, in der Höhe des Felds */
.institut-bearbeiten .inst-wahl .inst-blaettern {
    padding-left: .45rem;
    padding-right: .45rem;
    flex-shrink: 0;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-secondary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary-color);
    --bs-btn-hover-border-color: var(--bs-secondary-color);
}
.institut-bearbeiten .inst-wahl .inst-blaettern.disabled {
    opacity: .4;
}
/* Ränder wie die übrigen Felder der Seite (kräftige Kontraste, Vorgabe 18.09.2026) */
.institut-bearbeiten .inst-wahl .ts-wrapper .ts-control {
    border-color: var(--bs-secondary-color);
    background-color: var(--bs-body-bg);
}
.institut-bearbeiten .inst-wahl .ts-wrapper.focus .ts-control {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
/* gewählter Eintrag einzeilig (lange Institutsnamen, wie im Suchfilter des Wochenplans) */
.institut-bearbeiten .inst-wahl .ts-wrapper.single .ts-control > .item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 600;
}
/* der Eintrag "Institut wählen …" (leerer Wert) ist keine Auswahl: gedämpft wie in den Suchfiltern */
.institut-bearbeiten .inst-wahl .ts-wrapper .ts-control > .item[data-value=""] {
    color: var(--bs-secondary-color);
    font-weight: 400;
}
/* Kopfzeile über dem Kasten (Vorgabe 14.10.2026): Name mit "Kürzel · Nr." links, die Marken rechts */
.institut-bearbeiten .inst-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .3rem .75rem;
    margin-bottom: 1.75rem;                   /* Luft zu den Reitern (Vorgabe 14.10.2026) */
}
.institut-bearbeiten .inst-kopf h2 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
}
.institut-bearbeiten .inst-kopf h2 .nr {
    font-size: 1rem;
    white-space: nowrap;
}
.institut-bearbeiten .inst-kopf-marken {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
/* Reiter über dem Kasten (Vorgabe 14.10.2026): die Leiste hat keine eigene Linie, der weiße Kasten darunter ist der
   Reiterinhalt; der aktive Reiter überdeckt mit seinem weißen Unterrand die Oberkante des Kastens */
.institut-bearbeiten .inst-reiter {
    border-bottom: 0;
}
.institut-bearbeiten .inst-reiter .nav-link {
    position: relative;
    z-index: 1;
    background-color: transparent;
}
.institut-bearbeiten .inst-reiter .nav-link.active {
    background-color: var(--bs-body-bg);
    border-bottom-color: var(--bs-body-bg);
}
.institut-bearbeiten .inst-reiterkasten {
    border-top-left-radius: 0;
}
.institute dl.daten {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .15rem .75rem;
}
.institute dl.daten dt {
    font-weight: 700;
    color: var(--bs-body-color);
}
.institute dl.daten dd {
    margin: 0;
}
.inst-nur-lesen {
    font-weight: 600;
    color: var(--bs-body-color);
}
/* Reiter: deutlicher Rand, aktiver Reiter fett */
.institute .nav-tabs {
    border-bottom-color: var(--bs-secondary-color);
}
.institute .nav-tabs .nav-link {
    color: var(--bs-body-color);
    font-weight: 600;
}
.institute .nav-tabs .nav-link.active {
    font-weight: 700;
    border-color: var(--bs-secondary-color) var(--bs-secondary-color) var(--bs-body-bg);
}

/* Gruppe: getönter Kasten mit Kopfbalken */
.inst-gruppe {
    margin-bottom: 2.25rem;
    padding: 0 .9rem .9rem;
    border: 1px solid rgba(var(--bs-primary-rgb), .45);
    border-radius: var(--bs-border-radius);
    background-color: rgba(var(--bs-primary-rgb), .06);
}
.inst-gruppe > .row.mb-3:last-child {
    margin-bottom: 0 !important;              /* .mb-3 trägt selbst !important */
}
.inst-gruppe > h3,
.inst-gruppe > summary > h3 {
    margin: 0 -.9rem .9rem;
    padding: .5rem .9rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bs-body-color);
    border-bottom: 2px solid var(--bs-link-color);
    border-radius: calc(var(--bs-border-radius) - 1px) calc(var(--bs-border-radius) - 1px) 0 0;
    background-color: rgba(var(--bs-primary-rgb), .12);
}
.inst-gruppe h3 small {
    display: inline;
    margin: 0;
    font-size: .9rem;
}
.inst-gruppe h3 .badge {
    border-color: var(--bs-secondary-color) !important;
}
/* Gruppen des Reiters "Informationen" klappen auf und zu, leere sind zu.
   "details" davor: .inst-gruppe:not([open]) träfe sonst auch <section class="inst-gruppe"> */
.inst-gruppe > summary {
    display: block;
    cursor: pointer;
    list-style: none;
}
.inst-gruppe > summary::-webkit-details-marker {
    display: none;
}
.inst-gruppe > summary > h3::before {
    content: "\25B8";
    display: inline-block;
    width: 1.1rem;
    color: var(--bs-body-color);
}
.inst-gruppe[open] > summary > h3::before {
    content: "\25BE";
}
details.inst-gruppe:not([open]) {
    margin-bottom: .75rem;
    padding-bottom: 0;
}
details.inst-gruppe:not([open]) > summary > h3 {
    margin-bottom: 0;
    border-bottom: 0;
    border-radius: calc(var(--bs-border-radius) - 1px);
    background-color: transparent;
    font-weight: 600;
}
.inst-gruppe .form-text,
.inst-vergangen > summary,
.inst-ausnahmen tr.vorbei > td {
    color: var(--bs-body-color);
}
/* Reiter Öffnungszeiten der Institute (Vorgabe 14.10.2026): keine Kästen, normale Zwischenüberschriften,
   die Abschnitte durch 2px gestrichelte Linien getrennt */
.inst-abschnitte .inst-gruppe {
    margin: 0 -1rem;                          /* bis zum Kastenrand (.panel-content hat 1rem Innenabstand) ... */
    padding: 0 1rem 2.5rem;                   /* ... der Inhalt behält den Abstand; unten Luft vor der Linie */
    border: 0;
    border-radius: 0;
    background: none;
}
.inst-abschnitte .inst-gruppe:first-child {
    padding-top: 1.25rem;                     /* Luft über der ersten Überschrift */
}
.inst-abschnitte .inst-gruppe:last-child {
    padding-bottom: .5rem;
}
.inst-abschnitte .inst-gruppe + .inst-gruppe {
    padding-top: 2.5rem;                      /* Luft nach der Linie */
    border-top: 2px dashed var(--bs-secondary-color);   /* Linie von Rand zu Rand */
}
.inst-abschnitte .inst-gruppe > h3 {
    margin: 0 0 .75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 1.1rem;
}
/* Zwischenüberschriften der Abschnitte in Petrol (Vorgabe 14.10.2026), auch im Reiter Wochenplan-Verteiler;
   der Zusatz in <small class="text-muted"> bleibt grau */
.institut-bearbeiten section.inst-gruppe > h3 {
    color: #2f9497;
}

/* ein Feld: Titel, Werkzeugleiste (erst beim Bearbeiten), Inhalt */
.inst-feld-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 1.75rem;
    margin-bottom: .2rem;
}
.inst-feld-titel,
.inst-haken .form-check-label {
    font-weight: 700;
    color: var(--bs-body-color);
}
.inst-feld-knoepfe {
    margin-left: auto;
    white-space: nowrap;
}
.inst-feld-knoepfe .btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-secondary-color);
    --bs-btn-bg: var(--bs-body-bg);
}
.inst-feld-inhalt > :last-child,
.inst-konflikt > :last-child {
    margin-bottom: 0;
}
.inst-feld > .inst-feld-inhalt,
.inst-feld > .ck.ck-editor__editable.inst-feld-inhalt,
.inst-feld > .form-control {
    border: 1px solid var(--bs-secondary-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.inst-feld > .inst-feld-inhalt,
.inst-feld > .ck.ck-editor__editable.inst-feld-inhalt {
    min-height: 2.6rem;
    padding: .45rem .7rem;
    overflow-wrap: anywhere;
}
.inst-feld > .inst-feld-inhalt:empty::before {
    content: "leer";
    color: var(--bs-body-color);
    opacity: .85;                             /* hell 5,4:1, dunkel 8,9:1 */
    font-style: italic;
}
.inst-feld.bearbeitbar:not(.aktiv) > .inst-feld-inhalt {
    cursor: text;
}
.inst-feld.bearbeitbar:not(.aktiv) > .inst-feld-inhalt:hover {
    border-color: var(--bs-link-color);
    box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .2);
}
.inst-feld.laedt > .inst-feld-inhalt {
    opacity: .6;
}
.inst-feld-leiste .ck.ck-toolbar {
    border-color: var(--bs-secondary-color);
    border-bottom: 0;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}
.inst-feld.aktiv > .inst-feld-inhalt,
.inst-feld.aktiv > .ck.ck-editor__editable.inst-feld-inhalt {
    min-height: 6rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.inst-feld > .ck.ck-editor__editable.inst-feld-inhalt.ck-focused,
.inst-feld > .form-control:focus {
    border-color: var(--bs-link-color);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
/* geändert: roter Balken links und rote Marke, der Rand bleibt kräftig */
.inst-feld.geaendert > .inst-feld-inhalt,
.inst-feld.geaendert > .ck.ck-editor__editable.inst-feld-inhalt,
.inst-feld.geaendert > .form-control {
    box-shadow: inset 4px 0 0 var(--app-rot);
}
.inst-feld.geaendert > .ck.ck-editor__editable.inst-feld-inhalt.ck-focused,
.inst-feld.geaendert > .form-control:focus {
    box-shadow: inset 4px 0 0 var(--app-rot), 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
.badge.inst-geaendert-marke {
    background-color: var(--app-rot);
    color: #fff;
}
.inst-konflikt {
    margin-top: .5rem;
    padding: .45rem .7rem;
    border: 1px dashed var(--bs-secondary-color);
    background: var(--bs-body-bg);
    user-select: all;
}
/* Schalter (Merkmale) */
.inst-haken {
    padding: .6rem .8rem;
    border-right: 1px solid var(--bs-secondary-color);
    /* border-radius: var(--bs-border-radius); */
    /* background-color: var(--bs-body-bg); */
    height: 100%;
}
.inst-haken.geaendert {
    box-shadow: inset 4px 0 0 var(--app-rot);
}
.inst-haken .form-check-input {
    cursor: pointer;
}
.inst-haken .form-check-input:not(:checked) {
    border-color: var(--bs-secondary-color);
}
.inst-haken .form-check-input:disabled {
    cursor: default;
}
.inst-haken .form-check-input:disabled ~ .form-check-label {
    opacity: 1;
}
/* Grund, warum ein Schalter gesperrt ist ("Der Haken kann nicht entfernt werden, da Angebote zugeordnet sind") */
.inst-gesperrt {
    margin-top: .4rem;
    padding: .35rem .6rem;
    border-left: 4px solid var(--bs-secondary-color);
    background-color: rgba(var(--bs-primary-rgb), .08);
    color: var(--bs-body-color);
    font-weight: 600;
}
/* Hinweis unter einem Schalter, der nichts sperrt (z. B. "Dem Institut ist 1 Raum zugeordnet ...") */
.inst-notiz {
    margin-top: .4rem;
    padding: .35rem .6rem;
    border-left: 4px solid var(--bs-link-color);
    color: var(--bs-body-color);
}
.inst-gesperrt code {
    color: inherit;
    font-weight: 700;
}
/* Öffnungszeiten in der Woche */
.inst-woche,
.inst-ausnahmen {
    font-weight: 400;                         /* die Vorlage setzt .table auf 300 */
}
.inst-woche {
    --bs-table-border-color: var(--bs-secondary-color);
    --bs-table-bg: var(--bs-body-bg);
    table-layout: fixed;
    min-width: 46rem;
}
.inst-woche th {
    --bs-table-bg-type: rgba(var(--bs-primary-rgb), .12);
    text-align: center;
    font-weight: 700;
}
.inst-woche td {
    height: 3rem;
    text-align: center;
    vertical-align: top;
}
.inst-woche td .text-muted {
    font-style: italic;
}
.inst-zeit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    white-space: nowrap;
    font-weight: 600;
}
.inst-zeit .btn {
    padding: 0 .2rem;
}
.inst-ausnahmen {
    --bs-table-bg: var(--bs-body-bg);
    --bs-table-border-color: var(--bs-secondary-color);
}
.inst-ausnahmen thead th {
    --bs-table-bg-type: rgba(var(--bs-primary-rgb), .12);
    font-weight: 700;
}
/* Zeile "Neue Zeit" / "Neuer Eintrag" */
.inst-neu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
    padding: .5rem .75rem;
    /* border: 1px solid rgba(var(--bs-primary-rgb), .45); */
    /* border-left: 4px solid var(--bs-link-color); */
    /* border-radius: var(--bs-border-radius); */
    /* background-color: rgba(var(--bs-primary-rgb), .08); */
    margin-top: 15px;
}
.inst-neu-titel {
    font-weight: 700;
    color: var(--bs-body-color);
    margin-right: .25rem;
}
.inst-neu label {
    margin: 0;
    color: var(--bs-body-color);
    font-weight: 600;
}
/* Wochentags-Knöpfe über die Knopf-Variablen: :hover und .btn-check:checked + .btn der Vorlage bleiben erhalten */
.inst-tage {
    display: inline-flex;
    gap: .2rem;
}
.inst-tage .btn {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-secondary-color);
    min-width: 2.6rem;
}
.inst-neu .form-control,
.inst-neu .form-select {
    width: auto;
    border-color: var(--bs-secondary-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.inst-neu .form-control::placeholder {
    color: var(--bs-body-color);
    opacity: .8;
}
.inst-neu .form-control:focus,
.inst-neu .form-select:focus {
    border-color: var(--bs-link-color);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
.inst-neu .inst-neu-text {
    flex: 1 1 14rem;
    min-width: 12rem;
}
.inst-neu .form-text {
    flex-basis: 100%;
    margin: 0;
}
/* "Neuer Eintrag" bei Schließungen in Zeilen: Überschrift / Typ + Titel / von + bis + Eintragen (institut_bearbeiten) */
.inst-neu-zeilen {
    flex-direction: column;
    align-items: stretch;
}
.inst-neu-zeilen .inst-neu-titel {
    margin-right: 0;
}
.inst-neu-zeilen .inst-neu-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
}
.inst-neu-zeilen .inst-neu-zeile label {
    min-width: 2.2rem;                        /* "Typ" und "von" stehen untereinander bündig */
}
.inst-neu-zeilen .form-text {
    flex-basis: auto;
}
.inst-ausnahmen .sp-art {
    width: 10rem;
}
.inst-ausnahmen .sp-tag {
    width: 10rem;
}
.inst-vergangen > summary {
    cursor: pointer;
    font-weight: 600;
}
.inst-inhalt .sp-institut {
    width: 28%;
}
@media print {
    .institute .tab-content > .tab-pane {
        display: block;
        opacity: 1;
        break-inside: avoid-page;
    }
}
/* ===== Support-Todos (App_UserControls/uc-support.ascx, 00_support, js/support.js) ===== */
/* kleinste Schrift hier 1rem (Vorgabe 17.09.2026), steht nach der allgemeinen Regel und ist spezifischer;
   im Kasten der Startseite Reiter und Listen dagegen 0.85rem (zweite Vorgabe 17.09.2026) */
.support,
.support-archiv,
.support-formular,
.support .btn,
.support-archiv small,
.support-archiv .badge,
.support-formular small,
.support-formular .badge,
.support-formular .btn,
.support-formular .alert,
.support-formular .form-label,
.support-formular .form-text,
.support-formular .form-check-label,
.support-formular .form-control:not(.form-control-lg) {
    font-size: 1rem;
}
.support .nav-tabs .nav-link,
.support .nav-tabs .badge,
.support .tab-content,
.support .tab-content .table,
.support .tab-content small,
.support .tab-content .small,
.support .tab-content .badge,
.support .tab-content .alert {
    font-size: .85rem;
}
.support .tab-content {
    max-height: 70vh;
    overflow-y: auto;
}
.support-liste tr.todo,
.support-archiv tr.todo {
    cursor: pointer;
}
/* Vorgabe 16.09.2026 */
.support-liste tr > td {
    padding: 7px 5px 7px 20px;
}
.support-liste tr.todo.active > td,
.support-archiv tr.todo.active > td {
    background-color: rgba(var(--bs-primary-rgb), .08);
}
.support-liste tr.prio-kopf > th {
    padding-top: 1rem;
    border-bottom-width: 2px;
    font-weight: 600;
}
.support-liste tr.prio1 > th {
    color: var(--bs-danger);
}
.support-liste tr.prio2 > th {
    color: var(--bs-primary);
}
.support-liste tr.prio3 > th {
    color: var(--bs-secondary-color);
}
.support-liste .todo-kopf {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
}
/* Beschreibung nur angerissen, vollständig in der Lasche */
.support-liste .todo-text {
    max-height: 3em;
    overflow: hidden;
    white-space: pre-line;
}
/* gezogene Zeile wird zum Platzhalter, der mitwandert */
.support-liste tr.support-platzhalter > td {
    border: 2px dashed var(--bs-warning) !important;
    background-color: rgba(var(--bs-warning-rgb), .12);
}
.support-liste tr.support-platzhalter > td > * {
    visibility: hidden;
}

.support-formular .prio-auswahl {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    padding-top: .4rem;
}
.support-formular .prio-auswahl label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
}
.support-formular .prio1 input:checked { background-color: var(--bs-danger); border-color: var(--bs-danger); }
.support-formular .prio3 input:checked { background-color: var(--bs-secondary); border-color: var(--bs-secondary); }
.support-formular .prio1:has(input:checked) { color: var(--bs-danger); font-weight: 600; }
.support-formular .prio2:has(input:checked) { color: var(--bs-primary); font-weight: 600; }
.support-formular .prio3:has(input:checked) { font-weight: 600; }
.support-formular textarea.mitwachsen {
    overflow-y: hidden;
    resize: none;
}
.support-formular textarea.korrektur {
    border-color: var(--bs-warning);
}
.support-block {
    padding: 1rem;
    margin: 0 -1rem 1rem;
    background-color: var(--bs-tertiary-bg);
}
.support-block .haken {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    margin-bottom: 1rem;
}
.support-block .haken label {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}
.support-block .haken input {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
}
.support-block .haken small {
    color: var(--bs-secondary-color);
}
/* Farben je Haken wie im Kollwitz-Workspace: erledigt grün, getestet blau, zurück orange, archiviert grau */
.support-block .haken-erledigt:checked { background-color: var(--bs-success); border-color: var(--bs-success); }
.support-block .haken-getestet:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.support-block .haken-zurueck:checked { background-color: var(--bs-warning); border-color: var(--bs-warning); }
.support-block .haken-archiviert:checked { background-color: var(--bs-secondary); border-color: var(--bs-secondary); }
.support-block label:has(.haken-erledigt:checked) { color: var(--bs-success); }
.support-block label:has(.haken-getestet:checked) { color: var(--bs-primary); }
.support-block label:has(.haken-zurueck:checked) { color: var(--bs-warning-text-emphasis); }

/* ===== Kalenderansicht (01_uebersichten/kalender.aspx, js/kalender.js) =====
   Zeitstrahl: je Tag eine Zeile, waagerecht 24 Stunden. Lage und Breite der Balken rechnet das CSS aus
   den Minuten (--von, --dauer) mal der Stundenbreite (--px, Zoom aus kalender.js); Ueberschneidungen
   liegen in Spuren (--spur) untereinander. Kopf und Tagesbeschriftung bleiben beim Scrollen stehen. */
:root {
    --k-oeff: #2c6bb3;
    --k-indiv: #1f9d8a;
    --k-raum: #6c757d;
    --k-app: #c9a227;
}
.kalender-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin: .25rem 0 .5rem;
}
.kalender-legende .titel {
    font-weight: 600;
    margin-right: .5rem;
}
.kalender-legende .eintrag {
    white-space: nowrap;
}
.kalender-legende .probe {
    display: inline-block;
    width: 1.1rem;
    height: .8rem;
    border-radius: .2rem;
    vertical-align: -.05rem;
    background-color: var(--k-raum);
}
.kalender-legende .probe.oeff,
.kalender .balken.oeff { background-color: var(--k-oeff); }
.kalender-legende .probe.indiv,
.kalender .balken.indiv { background-color: var(--k-indiv); }
.kalender-legende .probe.raum,
.kalender .balken.raum { background-color: var(--k-raum); }
.kalender-legende .probe.app,
.kalender .balken.app { background-color: var(--k-app); }
.kalender-legende .probe.konflikt {
    background-color: transparent;
    border: 2px solid var(--bs-danger);
}

.kalender {
    --px: 2px;                 /* Pixel je Minute, setzt kalender.js */
    --labelbreite: 9.5rem;
    --spurhoehe: 1.55rem;
    --k-linie: var(--bs-border-color);
    position: relative;
    overflow: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background-color: var(--bs-body-bg);
    overscroll-behavior: contain;
}
.kalender .k-kopf {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    width: max-content;
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}
.kalender .k-ecke {
    position: sticky;
    left: 0;
    z-index: 7;
    flex: 0 0 var(--labelbreite);
    background-color: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
}
.kalender .k-stunden {
    position: relative;
    width: calc(var(--px) * 1440);
    height: 1.6rem;
}
.kalender .k-stunde {
    position: absolute;
    top: 0;
    left: calc(var(--px) * var(--von));
    padding: .15rem .3rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
    border-left: 1px solid var(--k-linie);
    cursor: pointer;
    user-select: none;
}
.kalender .k-stunde:hover {
    color: var(--bs-primary);
}
.kalender .k-tag {
    display: flex;
    width: max-content;
    border-bottom: 1px solid var(--k-linie);
}
.kalender .k-tag.sonntag {
    border-bottom: 2px solid var(--bs-secondary);
}
/* Zeile unter der Maus zur Orientierung: Schattenwurf (Vorgabe 15.09.2026); z-index ueber den festen
   Tagesbeschriftungen der anderen Zeilen (3), unter dem festen Kopf (6) */
.kalender .k-tag:hover {
    position: relative;
    z-index: 4;
    -webkit-box-shadow: 8px 0 12px 9px rgba(0, 0, 0, .28);
    box-shadow: 8px 0 12px 9px rgba(0, 0, 0, .28);
}
.kalender .k-label {
    position: sticky;
    left: 0;
    z-index: 3;
    flex: 0 0 var(--labelbreite);
    padding: 15px .4rem;
    background-color: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
    font-size: .85rem;
    line-height: 1.25;
}
.kalender .k-label .wt {
    display: inline-block;
    width: 1.9rem;
}
.kalender .k-label .nr {
    font-weight: 600;
}
.kalender .k-label .kw {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    margin-left: .2rem;
}
.kalender .k-label .ft {
    font-size: .75rem;
    color: var(--bs-danger);
}
.kalender .k-label .badge {
    font-size: .65rem;
    vertical-align: .1rem;
}
.kalender .k-tag.wochenende .k-label .wt,
.kalender .k-tag.feiertag .k-label .wt {
    color: var(--bs-danger);
}
.kalender .k-tag.faellig .k-label {
    background-color: rgba(var(--bs-warning-rgb), .18);
}
.kalender .k-spur {
    position: relative;
    width: calc(var(--px) * 1440);
    /* je Tag oben und unten 15px Luft (Wunsch 15.09.2026); die Balken beginnen bei --spur 0 unter dem oberen Rand */
    padding: 15px 0;
    box-sizing: content-box;
    /* min-height: bei einer hoeheren Beschriftung (Feiertag) waechst die Spur mit */
    min-height: calc(var(--spuren) * var(--spurhoehe));
    background-image: linear-gradient(to right, var(--k-linie) 1px, transparent 1px);
    background-size: calc(var(--px) * 60) 100%;
}
.kalender .k-tag.wochenende .k-spur,
.kalender .k-tag.feiertag .k-spur {
    background-color: rgba(var(--bs-secondary-rgb), .09);
}
.kalender .k-tag.heute .k-spur {
    background-color: rgba(var(--bs-warning-rgb), .08);
}
.kalender .k-jetzt {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--px) * var(--von));
    border-left: 2px solid var(--bs-danger);
    z-index: 1;
}
.kalender .balken {
    position: absolute;
    left: calc(var(--px) * var(--von));
    width: calc(var(--px) * var(--dauer));
    top: calc(15px + var(--spur) * var(--spurhoehe));
    height: calc(var(--spurhoehe) - .2rem);
    min-width: .6rem;
    box-sizing: border-box;
    padding: 0 .3rem;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
    font-size: .8rem;
    line-height: calc(var(--spurhoehe) - .35rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    text-decoration: none;
    z-index: 2;
}
.kalender .balken.app {
    color: #222;
}
.kalender .balken b,
.kalender .balken .zeit {
    font-weight: 600;
    opacity: .85;
}
.kalender .balken .nr {
    background-color: rgba(255, 255, 255, .25);
    border-radius: .2rem;
    padding: 0 .2rem;
    font-variant-numeric: tabular-nums;
}
/* beim Zeigen nur der Tooltip, keine Verbreiterung (Wunsch 15.09.2026); in der Lasche geoeffnet: Rahmen */
.kalender .balken:hover,
.kalender .balken:focus {
    filter: brightness(1.12);
    color: #fff;
}
.kalender .balken.app:hover,
.kalender .balken.app:focus {
    color: #222;
}
.kalender .balken.active {
    z-index: 3;
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}
/* nicht freigegeben, deaktiviert, storniert (nur mit dem Haken "auch ... anzeigen") */
.kalender .balken.gedimmt {
    opacity: .5;
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, .35) 6px 8px);
    text-decoration: line-through;
}
.kalender .balken.gedimmt:hover {
    opacity: .9;
}
/* Doppelbelegung eines Raums (K24) */
.kalender .balken.konflikt {
    border: 2px solid #f00;
}
.kalender-legende .probe.konflikt {
    border-color: #f00;
}
/* Termin ohne Dauer: als Punkt, der Text steht im Tooltip */
.kalender .balken.punkt {
    width: .8rem;
    min-width: .8rem;
    padding: 0;
    border-radius: 50%;
    color: transparent;
}
/* Ziehen mit der Maus (kalender.js) */
.kalender {
    cursor: grab;
}
.kalender.ziehen {
    cursor: grabbing;
    user-select: none;
}
.kalender.ziehen .balken {
    pointer-events: none;
}
/* Info-Popup der Balken (Bootstrap-Popover, js/kalender.js): heller Kasten, farbiger Streifen je Quelle,
   Kopfzeile mit Art, Nummer und Statusmarken, darunter Beschriftung/Wert */
.popover.kalender-info {
    max-width: 30rem;
    font-size: .9rem;
    border: 1px solid var(--bs-border-color);
    border-left: 5px solid var(--k-raum);
    /* kraeftiger Schatten, damit sich das Popup vom Zeitstrahl abhebt (Wunsch 16.09.2026) */
    -webkit-box-shadow: 0 10px 30px 6px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
    box-shadow: 0 10px 30px 6px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
}
.popover.kalender-info.oeff { border-left-color: var(--k-oeff); }
.popover.kalender-info.indiv { border-left-color: var(--k-indiv); }
.popover.kalender-info.app { border-left-color: var(--k-app); }
.popover.kalender-info .popover-header {
    font-size: .95rem;
    font-weight: 600;
    padding: .5rem .75rem;
    background-color: rgba(var(--bs-primary-rgb), .06);
}
.popover.kalender-info .popover-header .nr {
    font-variant-numeric: tabular-nums;
}
.popover.kalender-info .popover-header .nr-indiv {
    background-color: rgba(var(--bs-info-rgb), .2);
    border-radius: .25rem;
    padding: 0 .3rem;
}
.popover.kalender-info .popover-header .badge {
    font-size: .7rem;
    font-weight: 500;
    vertical-align: .1rem;
    margin-left: .25rem;
}
/* Doppelbelegung im gleichen Rot wie der Balkenrand */
.badge.bg-konflikt {
    background-color: #f00;
    color: #fff;
}
.popover.kalender-info .popover-body {
    padding: .5rem .75rem .6rem;
}
.popover.kalender-info dl.daten {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .2rem .75rem;
    margin: 0;
}
.popover.kalender-info dl.daten dt {
    font-weight: 600;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
.popover.kalender-info dl.daten dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Monatswahl mit Pfeilen im Filter */
.suchfilter .feld > .input-group {
    flex: 1 1 auto;
    min-width: 0;
}
.suchfilter .input-group.monat .form-select {
    min-width: 8rem;
}

/* ===== Wochenplan (01_uebersichten/kalender_wochenplan.aspx) =====
   Zeitraum mit Pfeilen im Filter, Preisspalte, Fuss mit Anzahlen und Verteiler (auch im Druck) */
.suchfilter .input-group.zeitraum .form-control {
    min-width: 10.5rem;
    flex: 0 1 auto;
    font-size: 1.05rem;
}
/* gewählter Eintrag der Einfachauswahl einzeilig (lange Institutsnamen), der volle Name steht in der Liste und im Titel */
.suchfilter .ts-wrapper.single .ts-control > .item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.suchfilter .input-group.zeitraum .btn {
    white-space: nowrap;
}
.wochenplan .panel-hdr h2 .zeitraum {
    font-weight: 400;
    color: var(--bs-secondary-color);
    margin-left: .5rem;
}
.liste .preis {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
}
.wochenplan-fuss {
    padding: .75rem 1rem;
}
.wochenplan-fuss .verteiler h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: .75rem 0 .25rem;
}
.wochenplan-fuss .verteiler p:last-child {
    margin-bottom: 0;
}

@media print {
    .app-titelzeile {
        position: static;
    }
    .app-content .content-wrapper {
        padding-top: 1.5rem;
    }
    /* die Vorlage blendet nur header, nav und footer aus */
    .app-header,
    .app-sidebar,
    .app-footer,
    .app-lasche,
    .backdrop,
    .no-print {
        display: none !important;
    }
    /* die Vorlage baut Kopf, Menü und Inhalt als Raster; ohne Menü bliebe dessen Spalte leer,
       und overflow-x der Inhaltsbereiche schnitte breite Tabellen rechts ab */
    .app-wrap,
    .app-body,
    .app-content,
    .app-content .content-wrapper,
    .main-content {
        display: block !important;
        overflow: visible !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        animation: none !important;
    }
    .table-responsive {
        overflow: visible !important;
    }
    .panel,
    .panel .panel-container,
    .panel .panel-content {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .panel .panel-hdr {
        border: 0 !important;
        padding: 0 0 .25rem !important;
        background: none !important;
    }
    /* Listen: Kopfzeile auf jeder Seite, Zeilen nicht teilen, Tageskopf mit Linie (falls Hintergründe nicht gedruckt werden);
       .table.liste, weil die Bildschirmregel .table.table-sm (0,9rem) sonst spezifischer ist */
    .table.liste {
        font-size: 8.5pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .liste thead {
        display: table-header-group;
    }
    .liste tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .liste tr.tag > th {
        border-top: 2px solid #444;
        page-break-after: avoid;
        break-after: avoid;
    }
    .liste td,
    .liste th {
        padding: 2px 4px;
    }
    .liste a {
        color: inherit;
        text-decoration: none;
    }
}

/* ===== Uploads / Dokumente (99_admin/uploads.aspx, forms/upload_bearbeiten.aspx) ===== */
.uploads .sp-info {
    width: 2.5rem;
}
.uploads .sp-groesse {
    width: 6rem;
}
.uploads .sp-datum {
    width: 7rem;
}
.uploads .sp-vorlagen {
    width: 6rem;
}
.uploads .sp-id {
    width: 4rem;
}
/* Kopf der Liste: Anbieter (u_isMaster waehlt, sonst nur der Name) */
.uploads-anbieter {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}
.uploads-anbieter .form-label {
    font-weight: 600;
}
/* wie in den anderen Listen: i in der ersten Spalte und der Titel öffnen die Lasche */
.liste.uploads .titel {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
.liste.uploads .titel:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}
/* Dateityp als kleine Marke vor dem Dateinamen (PDF rot abgesetzt, sonst grau) */
.dateityp {
    display: inline-block;
    min-width: 2.6rem;
    padding: .05rem .3rem;
    border-radius: .25rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.4;
    text-align: center;
    vertical-align: middle;
    background-color: rgba(var(--bs-secondary-rgb), .18);
    color: var(--bs-body-color);
}
.dateityp.pdf {
    background-color: rgba(198, 40, 40, .12);
    color: var(--app-rot-text);
}
/* Eintrag ohne Datei im Ablageordner: zurückgenommen, die Marke am Titel sagt warum */
.uploads tr.fehlt > td {
    color: var(--bs-secondary-color);
}
/* nach dem Speichern in der Lasche: die betroffene Zeile hervorgehoben (uploads.aspx?ok=...&id=...) */
.liste tr.markiert > td {
    background-color: rgba(var(--bs-success-rgb), .12);
}
/* Lasche: Formular und Liste der Textvorlagen */
.upload-formular {
    max-width: 36rem;
}
.laschenseite .vorlagen td {
    font-size: .9rem;
}

/* ===== Schalter mit Beschriftung in der Fläche (03.11.2026, zuerst „deaktivieren“ der Reihe) =====
   Aufbau: <label class="schalter-inline"><span class="visually-hidden">Zweck</span>
           <input type="checkbox" …><span class="flaeche" data-an="deaktiviert" data-aus="aktiviert"></span></label>
   Der Text in der Fläche nennt den ZUSTAND: data-an = Haken gesetzt, data-aus = Haken leer. */
.schalter-inline {
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}
.schalter-inline input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.schalter-inline .flaeche {
    position: relative;
    display: inline-block;
    min-width: 8.75em;
    height: 2em;
    font-size: .875rem;
    border-radius: 1em;
    background-color: var(--bs-success);
    transition: background-color .15s ease-in-out;
}
/* der Knauf */
.schalter-inline .flaeche::before {
    content: "";
    position: absolute;
    top: .25em;
    left: .25em;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    transition: left .15s ease-in-out;
}
/* die Beschriftung im freien Teil der Fläche (weiß auf Grün bzw. --app-rot) */
.schalter-inline .flaeche::after {
    content: attr(data-aus);
    position: absolute;
    top: 0;
    left: 1.9em;
    right: .8em;
    line-height: 2em;
    text-align: center;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}
.schalter-inline input:checked + .flaeche {
    background-color: var(--app-rot);
}
.schalter-inline input:checked + .flaeche::before {
    left: calc(100% - 1.75em);
}
.schalter-inline input:checked + .flaeche::after {
    content: attr(data-an);
    left: .8em;
    right: 1.9em;
}
.schalter-inline input:focus-visible + .flaeche {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

/* ===== Reihen für öffentliche Veranstaltungen (99_admin/marken.aspx, forms/marke_bearbeiten.aspx, data-source/marke_details.aspx) ===== */
/* erste Spalte: i und Stift nebeneinander */
.reihen .sp-info {
    width: 4.6rem;
}
.reihen .sp-info + th {
    padding-left: .25rem;
}
.reihen .sp-aktiv {
    width: 7.5rem;
}
.reihen .sp-institute {
    width: 16rem;
}
.reihen .sp-zahl {
    width: 8rem;
}
.reihen .sp-kuenftig {
    width: 5.5rem;
}
.reihen .sp-id {
    width: 4rem;
}
/* wie in den anderen Listen: i in der ersten Spalte und der Titel öffnen die Lasche */
.liste.reihen .titel {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
.liste.reihen .titel:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}
/* inaktive Reihen zurückgenommen, die Marke am Titel sagt warum */
.reihen tr.inaktiv > td {
    color: var(--bs-secondary-color);
}
.reihen tr.inaktiv .titel {
    font-weight: 400;
}
/* Anriss der Beschreibung, der ganze Text steht im title */
.reihen .beschreibung {
    color: var(--bs-body-color);
    opacity: .85;
}
/* Reihe bearbeiten (forms/marke_bearbeiten.aspx): eigene Seite mit Kästen und fester Speicherleiste wie die Raumseite */
.reihe-bearbeiten .col-form-label,
.reihe-bearbeiten .form-label {
    font-weight: 600;
    hyphens: auto;
}
.reihe-bearbeiten .form-label {
    margin-bottom: .2rem;
}
.reihe-bearbeiten .reihe-kaesten {
    margin-bottom: 2.25rem;
}
.reihe-bearbeiten .reihe-kaesten .inst-gruppe {
    height: 100%;
    margin-bottom: 0;
}
.reihe-bearbeiten .form-control,
.reihe-bearbeiten .form-select,
.reihe-bearbeiten .ts-wrapper .ts-control {
    border-color: var(--bs-secondary-color);
}
.reihe-bearbeiten .ts-wrapper.focus .ts-control {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
/* gewählte Institute als deutliche Marken (wie im Suchfilter) */
.reihe-bearbeiten .ts-wrapper.multi .ts-control > .item {
    background-color: var(--app-marke-bg);
    border: 1px solid rgba(var(--bs-primary-rgb), .4);
    color: var(--bs-body-color);
    border-radius: .25rem;
    padding: 0 .35rem;
}
.reihe-bearbeiten .ts-wrapper.multi .ts-control > .item .remove {
    border-left: 1px solid rgba(var(--bs-primary-rgb), .4);
}
.reihe-bearbeiten .form-text {
    color: var(--bs-body-color);
    opacity: .85;
}
.reihe-bearbeiten input.zahl {
    max-width: 7rem;
}
.reihe-bearbeiten .panel-hdr .panel-toolbar {
    gap: .3rem;
}
/* Kopf: Titel gross, Marken (inaktiv, Führungen) und "Nr. 35" rechts daneben (wie die Raumseite) */
.reihe-bearbeiten .panel-hdr h2.reihe-titel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .6rem;
    height: auto;
    padding: .4rem 0;
    font-size: 1.45rem;
    line-height: 1.3;
}
.reihe-bearbeiten .panel-hdr h2.reihe-titel .titel {
    font-weight: 700;
}
.reihe-bearbeiten .panel-hdr h2.reihe-titel .badge {
    font-size: .74rem;
    font-weight: 600;
}
.reihe-bearbeiten .panel-hdr h2.reihe-titel .nr {
    font-size: 1rem;
    white-space: nowrap;
}
/* Beschreibung im Editor (Aufbau wie ein Feld der Institutsseite, .inst-feld): mehr Höhe, weil es hier das einzige Textfeld ist */
.reihe-bearbeiten .inst-feld.aktiv > .inst-feld-inhalt,
.reihe-bearbeiten .inst-feld.aktiv > .ck.ck-editor__editable.inst-feld-inhalt {
    min-height: 11rem;
}
.reihe-bearbeiten .inst-feld > .inst-feld-inhalt > :last-child {
    margin-bottom: 0;
}
/* Lasche: Beschreibung, Institute in zwei Spalten, Veranstaltungen */
.laschenseite .reihe-text > :last-child {
    margin-bottom: 0;
}
.laschenseite .reihe-institute {
    columns: 2;
    column-gap: 1rem;
    margin: 0;
    padding-left: 1.1rem;
}
.laschenseite .reihe-institute li {
    break-inside: avoid;
}
.laschenseite .reihe-institute li.verwaltung-md {
    color: #009ba0;
}
.laschenseite .veranstaltungen td {
    font-size: .9rem;
}
.laschenseite .veranstaltungen tr.deakt > td {
    color: var(--bs-secondary-color);
}

/* ===== Veranstalter für öffentliche Veranstaltungen (99_admin/veranstalter.aspx; Lasche: data-source/veranstalter_details.aspx + forms/veranstalter_bearbeiten.aspx) ===== */
/* erste Spalte: ein Icon (Stift bzw. i), das die Lasche öffnet (Vorgabe 28.09.2026) */
.veranstalter-liste .sp-info {
    width: 2.5rem;
}
.veranstalter-liste .sp-info + th {
    padding-left: .25rem;
}
.veranstalter-liste .sp-kuerzel {
    width: 7rem;
}
.veranstalter-liste .sp-institute {
    width: 16rem;
}
.veranstalter-liste .sp-zahl {
    width: 8rem;
}
.veranstalter-liste .sp-kuenftig {
    width: 5.5rem;
}
.veranstalter-liste .sp-id {
    width: 4rem;
}
/* wie in den anderen Listen: Icon in der ersten Spalte und der Name öffnen die Lasche */
.liste.veranstalter-liste .titel {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
.liste.veranstalter-liste .titel:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}
/* Formular in der Lasche: Beschriftungen fett, Felder mit deutlichem Rand, Institute als Marken wie im Reihen-Formular */
.veranstalter-formular .form-label {
    font-weight: 600;
    margin-bottom: .2rem;
}
.veranstalter-formular .form-control,
.veranstalter-formular .form-select,
.veranstalter-formular .ts-wrapper .ts-control {
    border-color: var(--bs-secondary-color);
}
.veranstalter-formular .ts-wrapper.focus .ts-control {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
.veranstalter-formular .ts-wrapper.multi .ts-control > .item {
    background-color: var(--app-marke-bg);
    border: 1px solid rgba(var(--bs-primary-rgb), .4);
    color: var(--bs-body-color);
    border-radius: .25rem;
    padding: 0 .35rem;
}
.veranstalter-formular .ts-wrapper.multi .ts-control > .item .remove {
    border-left: 1px solid rgba(var(--bs-primary-rgb), .4);
}
/* vom Museumsdienst verwaltete Institute farbig: die Markenregel darüber ist spezifischer als die allgemeine
   Regel .ts-wrapper .item.verwaltung-md (Suchfilter), deshalb hier noch einmal mit der Marke */
.veranstalter-formular .ts-wrapper.multi .ts-control > .item.verwaltung-md,
.laschenseite .veranstalter-institute li.verwaltung-md {
    color: #009ba0;
}
.veranstalter-formular .form-text {
    color: var(--bs-body-color);
    opacity: .85;
}
.veranstalter-formular input.kurz {
    max-width: 12rem;
}
/* Lasche ohne Recht: Institute in zwei Spalten wie in der Reihen-Lasche */
.laschenseite .veranstalter-institute {
    columns: 2;
    column-gap: 1rem;
    margin: 0;
    padding-left: 1.1rem;
}
.laschenseite .veranstalter-institute li {
    break-inside: avoid;
}
/* Reiter "Termine": Titel schlicht, die Art davor fett; Nummer als Link ohne Unterstreichung */
.laschenseite .veranstalter-termine td {
    font-size: .9rem;
}
.laschenseite .veranstalter-termine .titel {
    color: inherit;
    text-decoration: none;
}
.laschenseite .veranstalter-termine .titel:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}
.laschenseite .veranstalter-termine a:has(> .nr) {
    color: inherit;
    text-decoration: none;
}

/* ===== Textvorlagen (99_admin/textvorlagen.aspx, data-source/textvorlage_details.aspx) ===== */
/* links die Liste, rechts das Formular; ab xl bleibt die Liste beim Scrollen stehen und scrollt selbst.
   position: sticky klebt am nächsten Vorfahren mit overflow, und die Vorlage setzt overflow-x auf .app-body und
   .content-wrapper: die Liste hätte dann dort geklebt und wäre um "top" nach unten gedrückt worden (viel Platz über
   der Liste, kein Kleben beim Scrollen). Auf dieser Seite scrollt das Fenster, deshalb hier overflow: visible */
@media (min-width: 1200px) {
    .textvorlagen-seite .app-body,
    .textvorlagen-seite .app-content .content-wrapper {
        overflow: visible;
    }
    /* Filter- und Listen-Panel kleben gemeinsam; der Filter behält seine Höhe, die Liste füllt den Rest und scrollt */
    .textvorlagen .tv-links {
        position: sticky;
        top: calc(var(--app-header-height) + var(--titelzeile-hoehe) + 1rem);
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--app-header-height) - var(--titelzeile-hoehe) - 1.75rem);
    }
    .mit-speicherleiste .textvorlagen .tv-links {
        max-height: calc(100vh - var(--app-header-height) - var(--titelzeile-hoehe) - var(--speicherleiste-hoehe) - 1.75rem);
    }
    .textvorlagen .tv-filter {
        flex: 0 0 auto;
    }
    .textvorlagen .tv-liste {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 12rem;
        margin-bottom: 0;
    }
    .textvorlagen .tv-liste .panel-container {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
    }
}
.textvorlagen .tv-filter {
    margin-bottom: 1rem;
}
/* Tooltip-Blase am Plus der Zuordnungszeilen: breiter, linksbündig, zeigt nach rechts in die Formularspalte */
.tooltip.tv-tooltip {
    --bs-tooltip-max-width: 26rem;
}
.tooltip.tv-tooltip .tooltip-inner {
    max-width: 26rem;
    padding: .55rem .75rem;
    text-align: left;
    font-size: .82rem;
    line-height: 1.4;
}
/* Bereichsknöpfe im Filter-Panel (Wunsch 30.10.2026): vier Knöpfe in einer Zeile, je ein Viertel der Breite, alle gleich
   hoch – so hoch wie der höchste (Grid-Zeile, align-items: stretch), nicht quadratisch; Text mittig mit weichen
   Trennstellen (&shy;), die Zahl darunter; je einer gewählt (aria-pressed) */
.textvorlagen .tv-bereiche {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: .45rem;
    margin-top: .2rem;
}
.textvorlagen .tv-bereichknopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;            /* Text oben bündig, Zahl unten (Wunsch 30.10.2026) */
    gap: .35rem;
    min-width: 0;
    padding: .45rem .25rem;
    border: 1px solid var(--bs-secondary-color);
    border-radius: .4rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    hyphens: manual;
    overflow-wrap: break-word;
}
.textvorlagen .tv-bereichknopf .titel {
    display: block;
}
.textvorlagen .tv-bereichknopf:hover {
    background-color: rgba(var(--bs-primary-rgb), .08);
    border-color: var(--bs-link-color);
}
.textvorlagen .tv-bereichknopf[aria-pressed="true"] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    font-weight: 700;
}
/* Zahl unter der Beschriftung, ohne Marke, etwas größer als der Text (Wunsch 30.10.2026); Farbe wie der Knopf */
.textvorlagen .tv-bereichknopf .zahl {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.textvorlagen .tv-bereichknopf.ohne-treffer {
    opacity: .5;
}
.textvorlagen .tv-kopf {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .6rem .75rem .75rem;
}
.textvorlagen .tv-anbieter {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.textvorlagen .tv-anbieter .form-label {
    font-weight: 600;
    white-space: nowrap;
}
.textvorlagen .tv-kopf .form-control,
.textvorlagen .tv-kopf .form-select {
    border-color: var(--bs-secondary-color);
}
/* Baum als Tabelle (Tree-Table): Knotenzeilen Bereich (aria-level 1) und Zuordnung (2), Vorlagen (3);
   Einrückung nach aria-level, der Pfeil dreht nach aria-expanded, Zeilen klappen und öffnen per Klick (js/textvorlagen.js) */
.textvorlagen .tv-baum {
    width: 100%;
    table-layout: fixed;                      /* Spaltenbreiten unabhängig vom Inhalt: Chromium rechnet die Mindestbreite
                                                 der umbrechenden Titelzelle sonst als Titel + Marke und schiebt die Nummer
                                                 aus dem Bild; die Breite der Nummernspalte kommt vom Kopf (.nr) */
    font-size: .9rem;
}
.textvorlagen .tv-baum > thead > tr > th {
    padding: .3rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}
.textvorlagen .tv-baum > tbody > tr > th,
.textvorlagen .tv-baum > tbody > tr > td {
    padding: .3rem .5rem;
    vertical-align: middle;
}
/* Knotenzeilen mit hängendem Einzug: der Pfeil (1,6rem) steht vor dem Text, Folgezeilen beginnen unter dem Text.
   Ebene 2 (Zuordnung) ist nicht eingerückt – Ebene 1 ist schon durch den Kopfbalken abgegrenzt (Rückmeldung 19.10.2026);
   Vorlagen (Ebene 3, ohne Pfeil) beginnen bündig mit dem Text ihrer Zuordnung */
.textvorlagen .tv-baum tr.tv-knoten > :first-child {
    text-indent: -1.6rem;
}
.textvorlagen .tv-baum tr.tv-knoten > :first-child > * {
    text-indent: 0;                           /* text-indent erbt: Badge, Icon und Knopf (inline-block) sonst verschoben */
}
.textvorlagen .tv-baum tr[aria-level="1"] > :first-child,
.textvorlagen .tv-baum tr[aria-level="2"] > :first-child {
    padding-left: 2.1rem;
}
.textvorlagen .tv-baum tr.tv-eintrag > :first-child,
.textvorlagen .tv-baum tr.tv-leer > :first-child {
    text-indent: 0;
}
/* Pfeil vor einem Knoten: Chevron, zugeklappt nach rechts gedreht */
.textvorlagen .tv-toggle {
    width: 1.5rem;
    margin-right: .1rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    line-height: 1;
    vertical-align: baseline;
}
.textvorlagen .tv-toggle .sa {
    display: inline-block;
    font-size: 1.1rem;                        /* gut sichtbar (Rückmeldung 19.10.2026) */
    vertical-align: -.15em;
    transition: transform .15s;
}
.textvorlagen .tv-baum tr[aria-expanded="false"] .tv-toggle .sa {
    transform: rotate(-90deg);
}
/* Knotenzeilen: Zuordnung als Kopfbalken wie die Gruppenkästen der Formulare (seit 21.10.2026; die Bereiche stehen
   als Knöpfe im Filter-Panel), zugeklappt ohne Hintergrund */
.textvorlagen .tv-baum tr.tv-knoten {
    cursor: pointer;
    user-select: none;
}
/* Kopfzeilen in der Primärfarbe mit weißer Schrift, .8rem, auch eingeklappt (Wunsch 30.10.2026; vorher dunkelgrau .95rem);
   box-shadow: none hebt den Hover-Schimmer von table-hover auf, beim Zeigen dunkelt eine innere Schattierung ab;
   Zahl und Papierflieger hell, damit sie auf der Farbe lesbar bleiben */
.textvorlagen .tv-baum tr.tv-zuordnung > td {
    padding-top: .45rem;
    padding-bottom: .45rem;
    background-color: var(--bs-primary);
    box-shadow: none;
    border-bottom: 1px solid #fff;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
}
.textvorlagen .tv-baum tr.tv-zuordnung:hover > td {
    box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .12);
}
.textvorlagen .tv-baum tr.tv-zuordnung .text-muted {
    color: rgba(255, 255, 255, .7) !important;   /* Bootstrap setzt text-muted mit !important */
}
.textvorlagen .tv-baum tr.tv-zuordnung .text-success {
    color: #8fe3b0 !important;
}
/* großes Plus rechts in der Zuordnungszeile mit Tooltip-Blase (Wunsch 30.10.2026, vorher Knopf "Hinzuf.");
   float, damit der Titel daneben umbricht */
.textvorlagen .tv-baum .tv-plus {
    float: right;
    margin: -.15rem 0 0 .5rem;
    padding: 0 .2rem;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    text-decoration: none;
    opacity: .9;
}
.textvorlagen .tv-baum .tv-plus:hover,
.textvorlagen .tv-baum .tv-plus:focus-visible {
    color: #fff;
    opacity: 1;
    transform: scale(1.15);
}
.textvorlagen .tv-baum tr.tv-leer > td {
    font-size: .85rem;
    font-style: italic;
    color: var(--bs-secondary-color);
}
/* Vorlage: ganze Zeile klickbar; Titel und Marken teilen sich die erste Zelle (Marken rechts, bei Platznot darunter –
   die Liste ist nur rund 300 px breit), die Nummer steht in der schmalen zweiten Spalte; gewählt mit Balken links */
.textvorlagen .tv-baum tr.tv-eintrag {
    cursor: pointer;
}
.textvorlagen .tv-baum .tv-vorlage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .5rem;
}
.textvorlagen .tv-baum .tv-vorlage > a {
    flex: 1 1 9rem;
    min-width: 0;
}
.textvorlagen .tv-baum tr.tv-eintrag > td:first-child {
    border-left: 3px solid transparent;
}
.textvorlagen .tv-baum tr.tv-eintrag a {
    color: inherit;
    text-decoration: none;
}
.textvorlagen .tv-baum tr.tv-eintrag:hover > td {
    color: var(--bs-primary);
}
.textvorlagen .tv-baum tr.tv-eintrag.active > td {
    background-color: rgba(var(--bs-primary-rgb), .14);
    font-weight: 600;
}
.textvorlagen .tv-baum tr.tv-eintrag.active > td:first-child {
    border-left-color: var(--bs-primary);
}
.textvorlagen .tv-baum tr.tv-eintrag.archiviert > td {
    color: var(--bs-secondary-color);
}
.textvorlagen .tv-baum .tv-titel {
    overflow-wrap: break-word;                /* nicht "anywhere": das ließe die Spalte auf ein Zeichen schrumpfen */
}
.textvorlagen .tv-baum .tv-marken {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    margin-left: auto;
    font-size: .72rem;
}
.textvorlagen .tv-baum .tv-marken:empty {
    display: none;
}
.textvorlagen .tv-baum .tv-marken .badge {
    font-size: .68rem;
}
/* Sprache der Vorlage (en/fr): gelb mit schwarzer Schrift (Wunsch 21.10.2026), fest statt --bs-warning, weil Lunar das umfärbt */
.textvorlagen .tv-baum .tv-marken .tv-sprache {
    background-color: #ffd60a;
    color: #000;
    text-transform: uppercase;
}
.textvorlagen .tv-baum .tv-marken .anhaenge {
    color: var(--bs-secondary-color);
}
.textvorlagen .tv-baum .nr {
    width: 3rem;
    text-align: right;
    font-weight: 400;
    color: var(--bs-secondary-color);
}
/* Nummer im Überblick rechts (span) */
.textvorlagen .tv-nr {
    display: inline-block;
    min-width: 2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    color: var(--bs-secondary-color);
}
/* Überblick ohne gewählte Vorlage */
.textvorlagen .tv-h3 {
    margin: 1.25rem 0 .5rem;
    font-size: 1.05rem;
    font-weight: 700;
}
.textvorlagen .tv-automatisch td {
    vertical-align: top;
}
.textvorlagen .tv-automatisch .tv-nr {
    min-width: 0;
}
.textvorlagen .tv-erklaerungen dt {
    margin-top: .5rem;
    font-weight: 600;
}
.textvorlagen .tv-erklaerungen dd {
    margin-bottom: .25rem;
    color: var(--bs-body-color);
    opacity: .9;
}
/* Formular: Kopf wie Reihen- und Raumseite, Beschriftungen fett, Felder mit deutlichem Rand */
.textvorlagen .tv-kopf-formular h2.tv-titel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .6rem;
    height: auto;
    padding: .4rem 0;
    font-size: 1.45rem;
    line-height: 1.3;
}
.textvorlagen .tv-kopf-formular h2.tv-titel .titel {
    font-weight: 700;
}
.textvorlagen .tv-kopf-formular h2.tv-titel .badge {
    font-size: .74rem;
    font-weight: 600;
}
.textvorlagen .tv-kopf-formular h2.tv-titel .nr {
    font-size: 1rem;
    white-space: nowrap;
}
/* Kopf im weißen Kasten (Wunsch 30.10.2026): Titel links, Knopf rechts, darunter die Gruppenkästen */
.textvorlagen .tv-kopf-formular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding-bottom: .75rem;
}
.textvorlagen .tv-kopf-formular h2.tv-titel {
    margin: 0;
}
.textvorlagen .tv-kopf-knoepfe {
    display: flex;
    gap: .3rem;
    margin-left: auto;
}
.textvorlagen .col-form-label,
.textvorlagen .form-label {
    font-weight: 600;
    hyphens: auto;
}
.textvorlagen .panel-content .form-control,
.textvorlagen .panel-content .form-select,
.textvorlagen .ts-wrapper .ts-control {
    border-color: var(--bs-secondary-color);
}
.textvorlagen .ts-wrapper.focus .ts-control {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
.textvorlagen .ts-wrapper.multi .ts-control > .item {
    background-color: var(--app-marke-bg);
    border: 1px solid rgba(var(--bs-primary-rgb), .4);
    color: var(--bs-body-color);
    border-radius: .25rem;
    padding: 0 .35rem;
}
.textvorlagen .ts-wrapper.multi .ts-control > .item .remove {
    border-left: 1px solid rgba(var(--bs-primary-rgb), .4);
}
.textvorlagen .form-text {
    color: var(--bs-body-color);
    opacity: .85;
}
.textvorlagen .tv-kurz {
    max-width: 14rem;
}
/* Text: Kopfzeile mit Umschalter Editor / Quelltext und Vorschau */
.textvorlagen .tv-text > h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.textvorlagen .tv-text-knoepfe {
    display: flex;
    gap: .4rem;
    margin-left: auto;
    font-weight: 400;
}
/* Grundangaben (3/4) und Standard-Anhänge (1/4) nebeneinander, beide Kästen gleich hoch (Wunsch 30.10.2026) */
.textvorlagen .tv-kaesten {
    margin-bottom: 2.25rem;
}
.textvorlagen .tv-kaesten .inst-gruppe {
    height: 100%;
    margin-bottom: 0;
}
/* Kopfbalken "Grundangaben" mit Schieberegler "Vorlage archivieren" rechts und Info-Zeichen mit Tooltip (Wunsch 30.10.2026) */
.textvorlagen .inst-gruppe > h3.tv-h3-schalter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.textvorlagen .tv-archiv-schalter {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 0 auto;
    min-height: 0;
    font-size: .85rem;
    font-weight: 500;
}
.textvorlagen .tv-archiv-schalter .form-check-input {
    float: none;
    margin: 0;
    cursor: pointer;
}
.textvorlagen .tv-archiv-schalter .form-check-label {
    cursor: pointer;
}
/* Info-Zeichen mit Tooltip: am Schieberegler und an den Beschriftungen "Interner Titel" und "Sprache" (statt Hinweistext
   unter dem Feld, Wunsch 30.10.2026) */
.textvorlagen .tv-info {
    color: var(--bs-secondary-color);
    font-size: 1rem;
    vertical-align: -.1em;
    cursor: help;
}
.textvorlagen .tv-info:hover,
.textvorlagen .tv-info:focus-visible {
    color: var(--bs-primary);
}
/* TinyMCE (seit 30.10.2026 statt CKEditor 5, vendor/tinymce): Rahmen wie die Formularfelder, Höhe wächst ohne Obergrenze
   mit dem Inhalt (autoresize, min 420 px); solange der Editor lädt, ist der Kasten blass */
.textvorlagen .tv-text .tv-editor .tox-tinymce {
    border: 1px solid var(--bs-secondary-color);
    border-radius: var(--bs-border-radius);
}
.textvorlagen .tv-text .tv-editor.laedt {
    min-height: 6rem;
    opacity: .6;
}
.textvorlagen .tv-text .tv-editor > textarea {
    width: 100%;
    min-height: 22rem;
}
/* Quelltext: Höhe folgt dem Inhalt (js/textvorlagen.js setzt sie nach jeder Eingabe), deshalb kein Ziehgriff und kein
   senkrechter Rollbalken; waagerecht rollt der Kasten bei langen Zeilen */
.textvorlagen .tv-quelltext textarea {
    min-height: 12rem;
    resize: none;
    overflow-y: hidden;
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: .85rem;
    line-height: 1.45;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    tab-size: 2;
}
.textvorlagen .tv-vorschau {
    /* steht als Reiter an der Stelle des Editors, daher kein Abstand nach oben; nur der Rahmen, keine Kopfzeile
       (Umschalter Beispieldaten/Platzhalter sind seit 30.10.2026 eigene Reiter in der Leiste "Text der Mail") */
    border: 1px solid var(--bs-secondary-color);
    border-radius: var(--bs-border-radius);
    background-color: #fff;
}
/* während der Endpunkt die Beispieldaten liefert, bleibt der alte Stand blass stehen */
.textvorlagen .tv-vorschau.laedt iframe {
    opacity: .55;
    transition: opacity .15s;
}
/* Vorschau: Höhe folgt dem Inhalt (js/textvorlagen.js misst das Dokument nach dem Laden); 30rem nur bis zur ersten Messung */
.textvorlagen .tv-vorschau iframe {
    display: block;
    width: 100%;
    min-height: 12rem;
    height: 30rem;
    border: 0;
    border-radius: var(--bs-border-radius);
    background-color: #fff;
}
/* Platzhalter als Chips */
.textvorlagen .tv-platzhalter > summary {
    cursor: pointer;
    font-weight: 600;
}
.textvorlagen .tv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: .5rem 0;
}
.textvorlagen .tv-chip {
    padding: .1rem .45rem;
    border: 1px solid var(--bs-secondary-color);
    border-radius: .3rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: .8rem;
    cursor: pointer;
}
.textvorlagen .tv-chip.allgemein {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .08);
}
/* Angaben zum Museum: eigene Zeile mit Beschriftung, Chips gruen abgesetzt */
.textvorlagen .tv-chips-institut {
    align-items: center;
    padding-top: .4rem;
    border-top: 1px dashed var(--bs-border-color);
}
.textvorlagen .tv-chips-titel {
    font-size: .85rem;
    color: var(--bs-secondary-color);
    margin-right: .2rem;
}
.textvorlagen .tv-chip.institut {
    border-color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), .08);
}
.textvorlagen .tv-chip:hover,
.textvorlagen .tv-chip:focus-visible {
    background-color: rgba(var(--bs-primary-rgb), .18);
}
/* Lasche: Vorschau der gespeicherten Mail */
.laschenseite .tv-vorschau-lasche {
    display: block;
    width: 100%;
    height: 40rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: #fff;
}
/* ===== Eintrittspreise (99_admin/eintrittspreise.aspx): drei Spalten (Wunsch 01.11.2026) =====
   links die Institute mit der Zahl der aktuellen Posten (Filter), in der Mitte die Tabelle, rechts die Vorschau
   (Ansicht eintrittspreis_details?vorschau=1 im iframe). Kleben wie die Textvorlagen-Liste: overflow der Vorlage
   aufheben (body.eintrittspreise-seite), sticky unter Kopf + Titelzeile; unterhalb xl stapeln die Spalten.
   Die Veranstaltungsentgelte (99_admin/veranstaltungsentgelte.aspx) nutzen denselben Aufbau: ihr Container
   traegt zusaetzlich die Klasse veranstaltungsentgelte, der Body veranstaltungsentgelte-seite.
   Honorare (99_admin/honorare.aspx) und Zuschlaege (99_admin/zuschlaege.aspx) nutzen dieselben Container-
   Klassen (eintrittspreise veranstaltungsentgelte); nur ihre Body-Klassen honorare-seite und zuschlaege-seite
   stehen eigens in der Overflow-Regel unten (03.11.2026) */
.eintrittspreise {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}
.eintrittspreise .ep-links {
    flex: 1 1 14rem;
    max-width: 20rem;
}
.eintrittspreise .ep-mitte {
    flex: 1 1 26rem;
    min-width: 0;
}
.eintrittspreise .ep-vorschau {
    flex: 1 1 100%;
}
/* Institutsliste links: Name + Zahl der aktuellen Posten, dicht gesetzt */
.eintrittspreise .ep-institute .list-group-item {
    font-size: .85rem;
    padding: .4rem .75rem;
}
.eintrittspreise .ep-institute .badge {
    font-variant-numeric: tabular-nums;
}
/* Tarifordnungsliste der Veranstaltungsentgelte (Wünsche 03.11.2026): Status aktuell/künftig als kleines Badge
   in der Kleinzeile; die Postenzahl steht in Klammern hinter dem Titel, der Stift rechts daneben */
.veranstaltungsentgelte .ep-institute .badge {
    font-size: .68rem;
}
/* gewählte Tarifordnung: fette Schrift und 3px-Linie links statt der vollen Bootstrap-Einfärbung */
.veranstaltungsentgelte .ep-institute .list-group-item.active {
    background-color: rgba(var(--bs-primary-rgb), .08);
    color: inherit;
    border-color: var(--bs-list-group-border-color);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--bs-primary);
}
/* Zeile, deren Eintrag rechts in der Vorschau steht */
.eintrittspreise tr.vorschau-aktiv td {
    background-color: rgba(var(--bs-primary-rgb), .08);
}
/* abgelaufene Zeilen gedimmt, wenn eingeblendet */
.eintrittspreise tr.abgelaufen td {
    opacity: .65;
}
.eintrittspreise .ep-vorschau-rahmen {
    display: block;
    width: 100%;
    border: 0;
    height: 26rem;
}
@media (min-width: 1200px) {
    .eintrittspreise-seite .app-body,
    .eintrittspreise-seite .app-content .content-wrapper,
    .veranstaltungsentgelte-seite .app-body,
    .veranstaltungsentgelte-seite .app-content .content-wrapper,
    .honorare-seite .app-body,
    .honorare-seite .app-content .content-wrapper,
    .zuschlaege-seite .app-body,
    .zuschlaege-seite .app-content .content-wrapper {
        overflow: visible;
    }
    /* linke Spalte klebt und scrollt bei vielen Instituten selbst */
    .eintrittspreise .ep-links {
        position: sticky;
        top: calc(var(--app-header-height) + var(--titelzeile-hoehe) + 1rem);
        flex: 0 0 13rem;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--app-header-height) - var(--titelzeile-hoehe) - 1.75rem);
    }
    .eintrittspreise .ep-links .panel {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .eintrittspreise .ep-links .panel-container {
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
    }
    /* Vorschau rechts: ein Drittel, klebt beim Scrollen; der iframe nutzt die Fensterhoehe */
    .eintrittspreise .ep-vorschau {
        position: sticky;
        top: calc(var(--app-header-height) + var(--titelzeile-hoehe) + 1rem);
        flex: 0 0 33%;
    }
    .eintrittspreise .ep-vorschau-rahmen {
        height: calc(100vh - var(--app-header-height) - var(--titelzeile-hoehe) - 5.5rem);
    }
}

/* Spaltenueberschriften oberhalb der Kaesten (Wunsch 01.11.2026): Institute / Eintrittspreise / Vorschau */
.eintrittspreise .ep-spalte-titel {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-primary);
    margin: 0 0 .5rem;
}