/*
 * style.css - Veranstaltungsmanager ABZ
 *
 * Redesign 2026: Fläche und Hierarchie werden nach Wichtigkeit vergeben.
 * Das UDE-Blau bleibt Corporate Design, wird aber als Akzent reserviert
 * statt als Vollton für jede Überschrift ausgegeben. Rechte Winkel bleiben
 * durchgängig (--border-radius: 0).
 */

:root {
    /* --- Grundpalette ------------------------------------------------- */
    --marke:         #003B7A;   /* UDE-Blau, nur noch als Akzent */
    --marke-2:       #1E6BB8;   /* hellere Variante für Hover/Verlauf */
    --marke-flaeche: #E9F0F8;   /* gedämpfte Markenfläche */

    --text:         #1A1F26;    /* Tiefschwarz mit leichtem Blaustich */
    --text-schwach: #5B6672;
    --text-zart:    #8A94A1;

    --papier:    #F4F6F9;       /* Seitengrund */
    --flaeche:   #FFFFFF;       /* Inhaltsfläche */
    --flaeche-2: #EDEFF4;       /* zurückgesetzte Fläche */
    --linie:     #D9DFE8;       /* tragende Linie des Rasters */
    --linie-2:   #E7EAF0;       /* Linie innerhalb einer Gruppe */

    /* --- Signalfarben --------------------------------------------------
       Kontrastreicher Text auf gedämpfter Fläche mit passender Randfarbe;
       die frühere Bootstrap-Pastellstufe trug zu wenig Kontrast für Text. */
    --ok-text:      #17643E;  --ok-bg:      #E4F0EA;  --ok-linie:      #B7D8C8;
    --warn-text:    #96540A;  --warn-bg:    #FBF0DF;  --warn-linie:    #EAD3A8;
    --fehler-text:  #A3231C;  --fehler-bg:  #FAE7E6;  --fehler-linie:  #EEC1BE;
    --hinweis-text: #1B4F8A;  --hinweis-bg: #E9F0F8;  --hinweis-linie: #C3D8EE;

    /* --- Schrift -------------------------------------------------------- */
    --schrift:       ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                     "Helvetica Neue", Arial, sans-serif;
    --schrift-daten: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
                     Consolas, "Liberation Mono", monospace;

    /* --- Abstandsraster ------------------------------------------------- */
    --raum-1: 4px;  --raum-2: 8px;  --raum-3: 12px; --raum-4: 16px;
    --raum-5: 24px; --raum-6: 32px; --raum-7: 48px;

    --seite-max: 1360px;        /* Arbeitsbereich, breiter als das alte Blatt */

    /* --- Altnamen --------------------------------------------------------
       Bestehende Regeln greifen weiter über diese Namen zu; sie zeigen jetzt
       auf die neue Palette, damit der Umbau ohne Suchen-und-Ersetzen wirkt. */
    --primary:    var(--marke);
    --secondary:  #002B5A;
    --gradient:   linear-gradient(135deg, #003B7A 0%, #1E6BB8 100%);
    --white:      var(--flaeche);
    --gray-light: var(--flaeche-2);
    --gray:       var(--linie);
    --ude-blue:   var(--marke);

    --success-bg: var(--ok-bg);      --success-text: var(--ok-text);
    --error-bg:   var(--fehler-bg);  --error-text:   var(--fehler-text);
    --warning-bg: var(--warn-bg);    --warning-text: var(--warn-text);
    --info-bg:    var(--hinweis-bg); --info-text:    var(--hinweis-text);

    --border-radius: 0;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--schrift);
    background-color: var(--papier);
    color: var(--text);
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Grundtypografie: Größe und Gewicht tragen die Hierarchie, nicht die Farbe. */
h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.011em;
    text-wrap: balance;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.3125rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: 0.9375rem; }

a { color: var(--marke); }

/* Zahlen fluchten spaltenweise untereinander. */
.num, td.num, .zahl { font-variant-numeric: tabular-nums; }

/* --- Seitengerüst ------------------------------------------------------
   Der schwebende weiße Kasten ist aufgelöst: kein Schlagschatten, keine
   feste Blattbreite. Die Struktur trägt jetzt das 1-px-Linienraster. */
.container {
    max-width: var(--seite-max);
    margin: 0 auto;
    background: var(--flaeche);
    border-radius: 0;
    box-shadow: none;
    border-left: 1px solid var(--linie);
    border-right: 1px solid var(--linie);
}

.content {
    padding: var(--raum-6) var(--raum-6) var(--raum-7);
}

@media (max-width: 720px) {
    .content { padding: var(--raum-4) var(--raum-4) var(--raum-6); }
}

/* --- Arbeitsbereich mit Seitenleiste ------------------------------------
   Alle Bereiche liegen offen; kein Aufklappen, kein Zielen auf Menüs, die
   beim Verrutschen der Maus wieder zuklappen. Der aktuelle Ort ist über die
   Markierung .an jederzeit ablesbar. */

.seitenleiste {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 244px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--flaeche);
    border-right: 1px solid var(--linie);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.leiste-marke {
    display: block;
    padding: 18px 20px 15px;
    border-bottom: 1px solid var(--linie);
    text-decoration: none;
    color: var(--text);
}

.leiste-marke b {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.leiste-marke span {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--text-schwach);
}

.leiste-nav {
    flex: 1;
    padding: 10px 0 20px;
}

/* Aufklappbare Themengruppen. Eingeklappt als Ausgangszustand; die Gruppe
   mit der gerade angezeigten Seite steht offen. */
.leiste-gruppe > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.leiste-gruppe > summary::-webkit-details-marker { display: none; }
.leiste-gruppe > summary::marker { content: ""; }

.leiste-gruppe > summary:hover .grp { color: var(--text-schwach); }

.leiste-gruppe > summary:focus-visible {
    outline: 2px solid var(--marke);
    outline-offset: -2px;
}

/* Die Gruppenzeile ist seit dem Aufklappen ein Bedienelement, kein blosses
   Etikett – sie braucht entsprechend Lesbarkeit. 12px statt 10px und
   --text-schwach statt --text-zart: letzteres kam auf Weiss nur auf 3,1:1
   und blieb damit unter den geforderten 4,5:1. */
.leiste-nav .grp {
    flex: 1;
    font-family: var(--schrift-daten);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-schwach);
}

/* Aufklapp-Pfeil: zeigt nach rechts, im offenen Zustand nach unten. */
.leiste-gruppe .pfeil {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--text-zart);
    transition: transform 0.15s ease;
}

.leiste-gruppe[open] > summary .pfeil { transform: rotate(90deg); }

/* Eine geschlossene Gruppe, die den aktuellen Ort enthält, bliebe sonst
   unauffindbar – deshalb bleibt sie serverseitig offen. */
.leiste-ziele { padding-bottom: 4px; }

.leiste-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 20px 8px 17px;
    border-left: 3px solid transparent;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.leiste-nav a:hover { background: var(--flaeche-2); }

.leiste-nav a.an {
    background: var(--marke-flaeche);
    border-left-color: var(--marke);
    color: var(--marke);
    font-weight: 600;
}

.leiste-fuss {
    border-top: 1px solid var(--linie);
    padding: 10px 0;
}

.leiste-persoenlich {
    display: flex;
    flex-direction: column;
}

.leiste-persoenlich a {
    padding: 6px 20px;
    color: var(--text-schwach);
    text-decoration: none;
    font-size: 0.875rem;
}

.leiste-persoenlich a:hover { color: var(--text); }
.leiste-persoenlich a.an { color: var(--marke); font-weight: 600; }

.leiste-konto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 9px;
    padding: 9px 20px 0;
    border-top: 1px solid var(--linie-2);
}

.leiste-konto .wer {
    font-size: 0.875rem;
    color: var(--text-schwach);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leiste-konto a {
    font-size: 0.875rem;
    color: var(--marke);
    text-decoration: none;
    white-space: nowrap;
}

.arbeitsflaeche {
    margin-left: 244px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Im Arbeitsbereich trägt die Seitenleiste die Begrenzung – das Blatt
   braucht dann weder Rahmen noch eigene Fläche. */
.arbeitsflaeche > .container {
    max-width: none;
    flex: 1;
    background: transparent;
    border-left: 0;
    border-right: 0;
}

.arbeitsflaeche .content {
    width: 100%;
    max-width: var(--seite-max);
    padding: 0 var(--raum-6) var(--raum-7);
}

.leiste-schalter { display: none; }
.leiste-schleier { display: none; }

@media (max-width: 1024px) {
    .seitenleiste {
        transform: translateX(-100%);
        transition: transform 0.18s ease;
    }

    body.leiste-offen .seitenleiste { transform: none; }

    .arbeitsflaeche { margin-left: 0; }

    .leiste-schalter {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 70;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 40px;
        height: 40px;
        padding: 0 9px;
        background: var(--flaeche);
        border: 1px solid var(--linie);
        cursor: pointer;
    }

    .leiste-schalter span {
        display: block;
        height: 2px;
        background: var(--text);
    }

    body.leiste-offen .leiste-schleier {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(18, 23, 31, 0.4);
    }

    /* Platz für den Schalter, damit er den Seitentitel nicht überdeckt. */
    .arbeitsflaeche .page-header { padding-left: 58px; }
}

/* --- Topleiste ---------------------------------------------------------
   Der vorhandene Seitenkopf trägt im Arbeitsbereich die Rolle der Topleiste:
   Titel links, Aktionen rechts, darunter eine Linie statt eines Abstands. */
.arbeitsflaeche .page-header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-3);
    margin: 0 calc(var(--raum-6) * -1) var(--raum-5);
    padding: var(--raum-4) var(--raum-6);
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
}

.arbeitsflaeche .page-header h1 {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.375rem;
}

@media (max-width: 720px) {
    .arbeitsflaeche .content { padding: 0 var(--raum-4) var(--raum-6); }
    .arbeitsflaeche .page-header {
        margin-left: calc(var(--raum-4) * -1);
        margin-right: calc(var(--raum-4) * -1);
        padding-left: var(--raum-4);
        padding-right: var(--raum-4);
    }
}

/* Aktionen rechts in der Topleiste. */
.kopf-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-2);
    margin-left: auto;
}

/* --- Kennzahlenstreifen -------------------------------------------------
   Vier Zahlen auf einem Streifen statt auf einer vollen Bildschirmhöhe. Die
   zweite Zeile ordnet die Zahl ein – erst dadurch wird sie beantwortbar. */
.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    margin-bottom: var(--raum-5);
    background: var(--linie);
    border: 1px solid var(--linie);
}

.kennzahlen > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--raum-3) var(--raum-4) var(--raum-4);
    background: var(--flaeche);
}

.kennzahlen .lbl {
    font-family: var(--schrift-daten);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-zart);
}

.kennzahlen .wert {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.kennzahlen .einordnung {
    font-size: 0.8125rem;
    color: var(--text-schwach);
}

.kennzahlen .einordnung.acht { color: var(--warn-text); }
.kennzahlen .einordnung.gut  { color: var(--ok-text); }

/* --- Dashboard-Karten ---------------------------------------------------- */

.dash-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: var(--raum-5);
    align-items: start;
}

.dash-karte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
}

.dash-karte > header {
    display: flex;
    align-items: baseline;
    gap: var(--raum-3);
    padding: var(--raum-3) var(--raum-4);
    border-bottom: 1px solid var(--linie);
}

.dash-karte > header h2 {
    flex: 1;
    margin: 0;
    font-size: 1rem;
}

.dash-karte .mehr {
    font-size: 0.8125rem;
    color: var(--marke);
    text-decoration: none;
    white-space: nowrap;
}

.dash-karte .empty-state { padding: var(--raum-5); }

/* Eine Zeile "Als Nächstes": Datumsmarke, Text, Belegung. */
.dash-zeile {
    display: grid;
    grid-template-columns: 46px 1fr 118px;
    gap: var(--raum-3);
    align-items: center;
    padding: var(--raum-3) var(--raum-4);
    border-bottom: 1px solid var(--linie-2);
}

.dash-zeile:last-child { border-bottom: 0; }

.dash-zeile .datum {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0 5px;
    background: var(--flaeche-2);
    border: 1px solid var(--linie);
    font-family: var(--schrift-daten);
    font-size: 0.625rem;
    text-transform: uppercase;
    color: var(--text-schwach);
    line-height: 1.1;
}

.dash-zeile .datum b {
    font-size: 1rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.dash-zeile .txt { min-width: 0; }

.dash-zeile .txt a {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-zeile .txt a:hover { color: var(--marke); }

.dash-zeile .txt > span {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-schwach);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Belegungsbalken, auch in Listen verwendet. */
.balken { display: block; }

.balken .spur {
    display: block;
    height: 6px;
    background: var(--flaeche-2);
    border: 1px solid var(--linie);
}

.balken .fuell {
    display: block;
    height: 100%;
    background: var(--marke);
}

.balken .fuell.hoch { background: var(--warn-text); }
.balken .fuell.voll { background: var(--fehler-text); }

.balken .zt {
    display: block;
    margin-top: 3px;
    font-family: var(--schrift-daten);
    font-size: 0.625rem;
    color: var(--text-schwach);
    font-variant-numeric: tabular-nums;
}

/* Eine Zeile "Braucht Aufmerksamkeit". */
.dash-acht {
    display: grid;
    grid-template-columns: 3px 1fr auto;
    gap: var(--raum-3);
    align-items: center;
    padding: var(--raum-3) var(--raum-4);
    border-bottom: 1px solid var(--linie-2);
}

.dash-acht:last-child { border-bottom: 0; }

.dash-acht .strich {
    align-self: stretch;
    background: var(--linie);
}

.dash-acht.krit .strich { background: var(--fehler-text); }
.dash-acht.warn .strich { background: var(--warn-text); }

.dash-acht .txt { min-width: 0; }

.dash-acht .txt b {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-acht .txt span {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-schwach);
}

.dash-acht .tun {
    font-size: 0.8125rem;
    color: var(--marke);
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .dash-zeile { grid-template-columns: 46px 1fr; }
    .dash-zeile .balken { grid-column: 2; }
}

/* --- Liste mit Werkzeugleiste -------------------------------------------
   Eine Zeile je Datensatz, Spaltenflucht für Datum, Belegung und Status.
   Die Filter liegen offen in der Werkzeugleiste statt in einem zugeklappten
   Aufklappbereich. */

.liste-karte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    margin-bottom: var(--raum-5);
}

.werkzeug {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-3) var(--raum-5);
    padding: var(--raum-2) var(--raum-4);
    border-bottom: 1px solid var(--linie);
}

/* Registerkarten */
.reiter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-4);
    margin-bottom: -1px;
}

.reiter a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0 9px;
    border-bottom: 2px solid transparent;
    color: var(--text-schwach);
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
}

.reiter a:hover { color: var(--text); }

.reiter a.an {
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--marke);
}

.reiter .zahl {
    padding: 1px 6px;
    background: var(--flaeche-2);
    border: 1px solid var(--linie);
    font-family: var(--schrift-daten);
    font-size: 0.6875rem;
    color: var(--text-schwach);
    font-variant-numeric: tabular-nums;
}

.reiter a.an .zahl {
    background: var(--marke-flaeche);
    border-color: var(--hinweis-linie);
    color: var(--marke);
}

/* Filter und Suche in der Werkzeugleiste */
.werkzeug form { margin: 0; }

.werkzeug-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--raum-3);
}

.werkzeug-filter .form-group { margin: 0; }

.werkzeug-filter .form-group label {
    display: block;
    margin-bottom: 2px;
    font-family: var(--schrift-daten);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-zart);
}

.werkzeug-filter .actions {
    display: flex;
    gap: var(--raum-2);
}

.werkzeug-suche { margin-left: auto; }

.werkzeug-suche input {
    width: 240px;
    max-width: 100%;
    padding: 7px 10px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 0;
    font: inherit;
    font-size: 0.875rem;
    color: var(--text);
}

.werkzeug-suche input:focus {
    outline: none;
    border-color: var(--marke);
}

/* Die Tabelle selbst */
.liste { width: 100%; border-collapse: collapse; }

.liste thead th {
    padding: 9px 12px;
    background: var(--flaeche-2);
    border-bottom: 1px solid var(--linie);
    font-family: var(--schrift-daten);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-schwach);
    text-align: left;
    white-space: nowrap;
}

.liste tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--linie-2);
    font-size: 0.875rem;
    vertical-align: middle;
}

.liste tbody tr:last-child td { border-bottom: 0; }
.liste tbody tr:hover td { background: var(--flaeche-2); }

.liste .num, .liste th.num { text-align: right; font-variant-numeric: tabular-nums; }

.liste .haupt {
    display: block;
    font-weight: 600;
    color: var(--text);
}

.liste .neben {
    display: block;
    margin-top: 1px;
    font-size: 0.8125rem;
    color: var(--text-schwach);
}

/* Status-Chip; als <button> auch der Umschalter in der Veranstaltungsliste. */
.chip {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid var(--linie);
    border-radius: 0;
    background: var(--flaeche-2);
    color: var(--text-schwach);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
}

.chip.ok   { background: var(--ok-bg);     border-color: var(--ok-linie);     color: var(--ok-text); }
.chip.warn { background: var(--warn-bg);   border-color: var(--warn-linie);   color: var(--warn-text); }
.chip.krit { background: var(--fehler-bg); border-color: var(--fehler-linie); color: var(--fehler-text); }
.chip.neut { background: var(--flaeche-2); border-color: var(--linie);        color: var(--text-schwach); }

@media (max-width: 900px) {
    .werkzeug-suche { margin-left: 0; width: 100%; }
    .werkzeug-suche input { width: 100%; }
}

/* --- Öffentliches Kartengitter ------------------------------------------
   Außen entscheidet nicht Dichte, sondern ob jemand in wenigen Sekunden den
   passenden Termin findet und sieht, dass noch etwas frei ist. Zwei Karten
   nebeneinander statt einer pro Bildschirmbreite; Datum, Zeit und Ort in
   fester Spaltenflucht, damit sich Veranstaltungen zeilenweise vergleichen
   lassen. Dieselbe Kartensprache trägt die Embed-Ansicht. */

.va-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: var(--raum-5);
    align-items: start;
}

.va-karte {
    display: flex;
    flex-direction: column;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    padding: var(--raum-5);
    transition: border-color 0.15s ease;
}

.va-karte:hover { border-color: var(--marke); }

.va-karte .bild {
    margin: calc(var(--raum-5) * -1) calc(var(--raum-5) * -1) var(--raum-4);
    border-bottom: 1px solid var(--linie);
    background: var(--flaeche);
    height: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.va-karte .bild img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Titel links, Verfügbarkeit rechts – die Frage vor dem Klick. */
.va-karte .kopfz {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--raum-3);
}

.va-karte .kopfz h3 {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.3;
}

.va-karte .kopfz .chip { cursor: default; }

.va-karte .marken {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--raum-2);
}

.va-karte .kat {
    padding: 1px 8px;
    border: 1px solid var(--linie);
    border-left-width: 3px;
    font-size: 0.75rem;
    color: var(--text-schwach);
}

.va-karte .meta {
    display: grid;
    gap: 3px;
    margin: var(--raum-4) 0 0;
}

.va-karte .meta > div {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: var(--raum-3);
    align-items: baseline;
}

.va-karte .meta dt {
    font-family: var(--schrift-daten);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-zart);
}

.va-karte .meta dd {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text);
}

.va-karte .kurz {
    margin: var(--raum-4) 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-schwach);
    max-width: none;
}

.va-karte .fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum-3);
    margin-top: auto;
    padding-top: var(--raum-4);
}

/* Der Abstand nach oben darf nicht kollabieren, wenn die Karte kurz ist. */
.va-karte .meta + .fuss,
.va-karte .kurz + .fuss { margin-top: var(--raum-4); }

.va-karte .frei {
    font-size: 0.8125rem;
    color: var(--text-schwach);
}

.va-karte .fuss .btn {
    padding: 9px 18px;
    font-size: 0.875rem;
}

@media (max-width: 560px) {
    .va-karte .meta > div { grid-template-columns: 56px 1fr; }
    .va-karte .fuss .btn { width: 100%; text-align: center; }
}

/* Footer */
.branding-footer {
    background: white;
    padding: 20px 2rem;
    display: flex;
    justify-content: center;
    border-top: 1px solid #eee;
    margin-top: 0;
}

.branding-content {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ude-logo img {
    height: 45px;
    width: auto;
}

.abz-logo img {
    height: 45px;
    width: auto;
}

/* Navigation */
.navbar {
    background: var(--ude-blue);
    padding: 0 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
    height: 50px;
}

.nav-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
}

.nav-brand {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-links {
    display: flex;
    gap: 0;
    align-items: stretch;
    height: 100%;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0 15px;
    height: 50px;
    display: flex;
    align-items: center;
    transition: background 0.2s;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-links a:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-links a:hover {
    background: rgba(255, 255, 255, 0.15);
}

.nav-menu {
    display: flex;
    align-items: stretch;
    height: 100%;
}

/* Dropdown Styles */
.dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
}

.dropdown > a::after {
    content: " ▾";
    font-size: 0.8em;
    margin-left: 5px;
    opacity: 0.7;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--primary);
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
}

.dropdown-content a {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    height: auto !important;
    padding: 12px 20px !important;
}

.dropdown-content a:first-child {
    border-left: none !important;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a:hover {
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 992px) {
    .dropdown {
        flex-direction: column;
        width: 100%;
    }
    .dropdown-content {
        position: static;
        display: block;
        background: rgba(0, 0, 0, 0.1);
        box-shadow: none;
        width: 100%;
        min-width: 0;
    }
    .dropdown > a {
        background: rgba(255, 255, 255, 0.05);
    }
    .dropdown-content a {
        padding-left: 40px !important;
    }
}

.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 5px;
    z-index: 1001;
    align-self: center;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: white;
    transition: 0.3s;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    border: 2px solid transparent;
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
    box-sizing: border-box;
    appearance: none;

    /* Dynamische Breite + Einzeiliger Text */
    white-space: nowrap;
    min-width: fit-content;
    width: auto;
}

/* Form Sections */
.form-section {
    background: var(--flaeche);
    border-radius: 0;
    padding: var(--raum-5);
    margin-bottom: var(--raum-5);
    border: 1px solid var(--linie);
    box-shadow: none;
}

.form-section.section-details {
    border-left: 4px solid var(--primary);
}

.form-section.section-termin {
    background: linear-gradient(135deg, #e8f4fc 0%, #f0f7fb 100%);
    border-left: 4px solid var(--primary);
}

.section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gray-light);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 16px;
}

.form-row-full {
    grid-column: 1 / -1;
}

.radio-group {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.radio-card {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border: 2px solid #ddd;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    font-weight: 500;
}

.radio-card:hover {
    border-color: var(--primary);
    background: #f5f9fc;
}

.radio-card.selected,
.radio-card:has(input:checked) {
    border-color: var(--primary);
    background: #e3f2fd;
}

.radio-card input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.termin-felder {
    margin-top: 20px;
    padding: 20px;
    background: white;
    border-radius: 0;
    border: 1px solid #e0e0e0;
}

.termin-felder h4 {
    margin: 0 0 15px 0;
    color: var(--primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.termin-felder .form-help {
    margin-bottom: 16px;
}

/* Modern Buttons */
.btn-primary {
    background: var(--gradient);
    color: white;
    padding: 12px 28px;
    font-size: 1rem;
    white-space: nowrap;
    min-width: fit-content;
}

.btn-primary:hover {
    background: var(--secondary);
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    background: white;
    color: #555;
    border: 2px solid #ddd;
    padding: 12px 28px;
    font-size: 1rem;
    white-space: nowrap;
    min-width: fit-content;
}

.btn-secondary:hover {
    background: #f8f9fa;
    border-color: #ccc;
}

/* Mehrere Einzeltermine: Hinzufügen-/Entfernen-Buttons */
.btn-add-termin {
    padding: 8px 16px;
    font-size: 0.9rem;
    margin-top: 4px;
}

.einzeltermin-remove-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.btn-remove-termin {
    background: #fff;
    color: #c0392b;
    border: 2px solid #e0c0bc;
    border-radius: 0;
    width: 42px;
    height: 44px;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.btn-remove-termin:hover {
    background: #fbeae8;
    border-color: #c0392b;
}

.form-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding: 15px;
    border-top: 1px solid #eee;
    
    /* Fixierung der Leiste unten */
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 100;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
}

/* Klickbare Platzhalter für Mails */
.placeholder-badge {
    display: inline-block;
    padding: 3px 8px;
    margin: 2px 4px 2px 0;
    background: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0; /* Keine runden Ecken */
    font-size: 0.85rem;
    color: #495057;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s;
}
.placeholder-badge:hover {
    background: #d3d9df;
}

/* Hervorhebung der Platzhalter IM Editor */
.editor-placeholder-mark {
    background-color: #e3f2fd !important;
    color: #003b7a !important;
    padding: 0 4px !important;
    border-radius: 2px !important;
    font-family: monospace !important;
    font-weight: bold !important;
}


.btn-success {
    background: #28a745;
    color: white;
    white-space: nowrap;
    min-width: fit-content;
}

.btn-danger {
    background: #dc3545;
    color: white;
    white-space: nowrap;
    min-width: fit-content;
}

.btn-logout {
    background: #cc0000 !important;
    color: white !important;
    white-space: nowrap;
    min-width: fit-content;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
    white-space: nowrap;
    min-width: fit-content;
}

/* Forms */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 0;
    font-family: inherit;
    font-size: 1rem;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 59, 122, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #444;
}

.form-group label .required {
    color: #dc3545;
}

.form-help {
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
}

/* Filter Bar Utility */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.filter-bar .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 200px;
}

.filter-bar .form-group label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #777;
    margin-bottom: 6px;
}

.filter-bar input,
.filter-bar select,
.filter-bar .btn {
    height: 42px;
    box-sizing: border-box;
    vertical-align: middle;
}

.filter-bar .btn {
    padding: 0 20px;
}

.filter-bar .btn-sm {
    height: 32px;
    padding: 0 12px;
}

.filter-bar .actions {
    display: flex;
    gap: 8px;
}

/* Alerts */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 0;
    font-weight: 500;
}

.alert.success {
    background: var(--success-bg);
    color: var(--success-text);
}

.alert.error {
    background: var(--error-bg);
    color: var(--error-text);
}

.alert.warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid #ffeaa7;
}

.alert.info {
    background: var(--info-bg);
    color: var(--info-text);
}

/* Cards */
.card {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 0;
    padding: var(--raum-5);
    margin-bottom: var(--raum-5);
    box-shadow: none;
}

.card-header {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Event Cards */
.event-card {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    padding: var(--raum-5);
    transition: border-color 0.15s ease;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.event-card:hover {
    border-color: var(--marke);
    box-shadow: none;
    transform: none;
}

.event-card h3 {
    margin: 0 0 10px 0;
    color: var(--text);
}

.event-card .event-meta {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-card .event-description {
    color: #555;
    margin-bottom: 20px;
}

.event-card .event-slots {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 20px;
}

.event-card .btn {
    align-self: center;
    margin-top: 10px;
    width: 100%;
    max-width: 280px;
    justify-content: center;
}

/* Slot Grid */
.slot-grid {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.slot-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #eee;
    transition: all 0.2s;
}

.slot-item:hover {
    background: #e3f2fd;
    border-color: var(--primary);
}

.slot-item.booked {
    background: #fff3cd;
    border-color: #ffc107;
}

.slot-item.full {
    background: #f8d7da;
    border-color: #dc3545;
    opacity: 0.7;
}

.slot-item.past {
    background: #e9ecef;
    color: #888;
    opacity: 0.6;
}

.slot-item.cancelled {
    background: #f8d7da;
    border-color: #dc3545;
    text-decoration: line-through;
}

.slot-date {
    font-weight: 600;
    color: var(--primary);
}

.slot-time {
    color: #666;
}

.slot-spots {
    font-size: 0.85rem;
    color: #888;
}

.slot-spots.available {
    color: #28a745;
}

.slot-spots.full {
    color: #dc3545;
}

/* Tables */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.responsive-table th {
    background: #f8f9fa;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #555;
    border-bottom: 2px solid #dee2e6;
}

.responsive-table th.sortable {
    padding: 0;
}

.responsive-table th.sortable .sort-link,
.responsive-table th.sortable .sort-link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 12px;
    color: #555;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

.responsive-table th.sortable .sort-link:hover {
    background: #e9ecef;
    color: var(--primary);
}

.responsive-table th.sortable .sort-link .sort-icon {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
}

.responsive-table th.sortable .sort-link .sort-icon.placeholder {
    color: #cbd5e1;
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.responsive-table th.sortable .sort-link:hover .sort-icon.placeholder {
    opacity: 1;
    color: var(--primary);
}

.responsive-table th:first-child {
    border-left: 10px solid transparent;
}

.responsive-table tr.va-row-aktiv td:first-child {
    border-left: 10px solid #28a745;
}

.responsive-table tr.va-row-inaktiv td:first-child {
    border-left: 10px solid #dc3545;
}

/* Klickbarer Status-Umschalter in der Veranstaltungsliste */
.status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.status-toggle .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.status-toggle-aktiv {
    background: #e6f7ec;
    color: #1e7e34;
    border-color: #b7e4c7;
}
.status-toggle-inaktiv {
    background: #fdecea;
    color: #c0392b;
    border-color: #f5c6cb;
}
.status-toggle:hover {
    filter: brightness(0.96);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

.responsive-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.responsive-table tr:hover {
    background: #f8f9ff;
}

/* Horizontal scrollbarer Wrapper für breite Tabellen (z. B. Buchungen mit
   vielen Formularspalten). Verhindert das Ausbrechen aus dem Layout. */
.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

.table-scroll .responsive-table {
    min-width: 100%;
    width: auto;
    margin-bottom: 0;
}

/* Mit der Maus greifen und nach links/rechts schieben (Drag-to-Scroll). */
.table-scroll.is-draggable {
    cursor: grab;
}

.table-scroll.grabbing {
    cursor: grabbing;
    user-select: none;
}

/* Sticky-Spalten: die letzten beiden Spalten (Status + Aktionen) bleiben beim
   horizontalen Scrollen rechts fixiert. Der Offset der vorletzten Spalte wird
   per JS als --last-col-w (Breite der letzten Spalte) gesetzt. */
.table-scroll .responsive-table.sticky-end th:last-child,
.table-scroll .responsive-table.sticky-end td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
}

.table-scroll .responsive-table.sticky-end th:nth-last-child(2),
.table-scroll .responsive-table.sticky-end td:nth-last-child(2) {
    position: sticky;
    right: var(--last-col-w, 120px);
    z-index: 2;
    box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.12);
}

/* Solide Hintergründe, damit durchscrollende Zellen nicht durchscheinen */
.table-scroll .responsive-table.sticky-end td:last-child,
.table-scroll .responsive-table.sticky-end td:nth-last-child(2) {
    background: #fff;
}

.table-scroll .responsive-table.sticky-end th:last-child,
.table-scroll .responsive-table.sticky-end th:nth-last-child(2) {
    background: #f8f9fa;
}

.table-scroll .responsive-table.sticky-end tr:hover td:last-child,
.table-scroll .responsive-table.sticky-end tr:hover td:nth-last-child(2) {
    background: #f8f9ff;
}

/* Badges — gedämpfte Fläche, kontrastreicher Text, eigene Randfarbe. */
.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 0;
    border: 1px solid transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
}

.badge-success {
    background: var(--ok-bg);
    color: var(--ok-text);
    border-color: var(--ok-linie);
}

.badge-warning {
    background: var(--warn-bg);
    color: var(--warn-text);
    border-color: var(--warn-linie);
}

.badge-danger {
    background: var(--fehler-bg);
    color: var(--fehler-text);
    border-color: var(--fehler-linie);
}

.badge-info {
    background: var(--hinweis-bg);
    color: var(--hinweis-text);
    border-color: var(--hinweis-linie);
}

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--flaeche);
    padding: var(--raum-4) var(--raum-5);
    border: 1px solid var(--linie);
    text-align: left;
    border-radius: 0;
    box-shadow: none;
}

.stat-card .number {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: var(--raum-1);
    font-variant-numeric: tabular-nums;
}

.stat-card .label {
    color: var(--text-schwach);
    font-size: 0.8125rem;
}

/* Success Animation */
.success-animation {
    margin: 0 auto 30px;
    width: 80px;
    height: 80px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d4edda;
    color: #28a745;
    animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-checkmark {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawCheck 0.6s 0.3s ease-in-out forwards;
}

@keyframes drawCheck {
    to {
        stroke-dashoffset: 0;
    }
}


/* Accessibility */
/* Sprunglink für Tastaturnutzer: parkt außerhalb des Bildes und fährt erst
   bei Fokus ein. Die Verschiebung geht bewusst über translateY(-100%) statt
   über einen festen Pixelwert – der müsste die Höhe des Links raten und
   liefe bei jeder Änderung an Schriftgröße oder Zeilenhöhe wieder aus dem
   Tritt (zuletzt blieb so ein blauer Streifen von 1 px stehen). */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    background: var(--marke);
    color: #fff;
    padding: 8px 12px;
    z-index: 10001;
    transition: transform 0.2s;
    text-decoration: none;
    font-weight: 700;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Page Header */
.page-header {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eee;
}

.page-header h1 {
    margin: 0;
    color: var(--text);
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.page-header p {
    color: #666;
    margin: 6px 0 0;
}

/* Beschreibungs-Absatz (ohne Link) wird zum Info-Icon (siehe footer.php) */
.page-header > p:not(:has(a)) {
    display: none;
}

.page-header-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: none;
    border: 1.5px solid #999;
    color: #777;
    font: italic 700 12px/1 Georgia, "Times New Roman", serif;
    cursor: help;
    position: relative;
    vertical-align: middle;
}

.page-header-info::before {
    content: "i";
}

.page-header-tip {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 100;
    display: none;
    width: max-content;
    max-width: 340px;
    padding: 8px 10px;
    background: #333;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.page-header-info:hover .page-header-tip,
.page-header-info:focus .page-header-tip,
.page-header-info:focus-within .page-header-tip {
    display: block;
}

/* Admin Actions */
.admin-actions,
.card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Login Page */
.login-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    background: white;
    border: 1px solid #eee;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.login-container h1 {
    text-align: center;
    color: var(--primary);
    margin-bottom: 30px;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
}

/* Teilnehmerliste-Modal: Kopfbereich (X + Buttons) fix, nur die Liste scrollt */
#teilnehmer-modal .modal-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#teilnehmer-modal .modal-actions-bar {
    flex-shrink: 0;
}
/* Spalten-Panel: bei vielen Spalten eigenen Scrollbereich, damit alle
   Spalten erreichbar bleiben (sonst läuft es aus dem Modal heraus) */
#teilnehmer-spalten-panel-wrap {
    max-height: 40vh;
    overflow-y: auto;
}
#teilnehmer-modal-content {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: #888;
}

.empty-state h3 {
    color: #666;
    margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 902px) {
    .container {
        box-shadow: none;
    }
    
    .branding-footer {
        padding: 10px 1rem;
    }
    
    .hamburger {
        display: flex;
    }
    
    /* Mobile Buttons */
    .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .btn-sm {
        padding: 8px 12px;
    }
    
    .admin-actions,
    .card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-menu {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background: var(--ude-blue);
        flex-direction: column;
        display: none;
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        z-index: 1000;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        height: auto;
        width: 100%;
    }

    .nav-links a {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        justify-content: flex-start;
        padding: 0 2rem;
        height: 60px;
    }

    .content {
        padding: 20px;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .responsive-table thead {
        display: none;
    }

    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block;
        width: 100%;
    }

    .responsive-table tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        background: #fff;
    }

    .responsive-table td {
        position: relative;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

    /* Sticky-Spalten in der mobilen Kartenansicht deaktivieren */
    .table-scroll .responsive-table.sticky-end th:last-child,
    .table-scroll .responsive-table.sticky-end td:last-child,
    .table-scroll .responsive-table.sticky-end th:nth-last-child(2),
    .table-scroll .responsive-table.sticky-end td:nth-last-child(2) {
        position: relative;
        right: auto;
        box-shadow: none;
    }

    .responsive-table td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #666;
        display: block;
        margin-bottom: 5px;
    }
    
    /* Mobile: Event-Card Buttons zentriert */
    .event-card {
        padding: 20px;
    }
    
    .event-card .btn {
        width: 100%;
        max-width: 100%;
    }

    .responsive-table tr.va-row-aktiv {
        border-left: 10px solid #28a745 !important;
    }
    .responsive-table tr.va-row-inaktiv {
        border-left: 10px solid #dc3545 !important;
    }
    .responsive-table tr.va-row-aktiv td:first-child,
    .responsive-table tr.va-row-inaktiv td:first-child {
        border-left: none !important;
    }
}

/* Action Dropdown */
.action-dropdown {
    position: relative;
    display: inline-block;
}

.action-dropdown-toggle {
    min-width: 36px;
    letter-spacing: 2px;
}

.action-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
    z-index: 100;
}

.action-dropdown-menu.open {
    display: block;
}

.action-dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: #333;
    text-decoration: none;
    font-size: 0.9em;
    transition: background 0.15s;
}

.action-dropdown-menu a:hover {
    background: #f0f0f0;
}

/* Occupancy / Progress Bar */
.occupancy-info {
    min-width: 140px;
}

.progress-container {
    width: 100%;
    background-color: #eee;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    margin-top: 4px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #003b7a 0%, #0056b3 100%);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar.high {
    background: linear-gradient(90deg, #ffc107 0%, #ffdb4d 100%);
}

.progress-bar.full {
    background: linear-gradient(90deg, #dc3545 0%, #ff4d5a 100%);
}

@media (max-width: 768px) {
    .occupancy-info {
        min-width: 0;
        width: 100%;
    }
}

/* Print Styles for Modals */
@media print {
    body.modal-open > *:not(#teilnehmer-modal) {
        display: none !important;
    }
    body.modal-open #teilnehmer-modal {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        overflow: visible !important;
    }
    body.modal-open #teilnehmer-modal .modal-content {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        overflow: visible !important;
    }
    body.modal-open #teilnehmer-modal-content {
        overflow: visible !important;
        height: auto !important;
    }
    body.modal-open #teilnehmer-modal .modal-close,
    body.modal-open #teilnehmer-modal .modal-actions-bar {
        display: none !important;
    }
}

/* Icon spacing */
.icon-piktogramm {
    display: inline-block;
    margin-right: 6px;
}

/* Override styles for quill-html-edit-button Modal */
.ql-html-overlayContainer {
    background: rgba(0, 59, 122, 0.45) !important;
    backdrop-filter: blur(5px);
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.ql-html-popupContainer {
    background: white !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    border-radius: 0 !important; /* Sharp corners like UDE theme */
    width: 90% !important;
    max-width: 800px !important;
    height: 80% !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex;
    flex-direction: column;
}

.ql-html-textContainer {
    padding: 30px !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}

.ql-html-popupTitle {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    font-style: normal !important;
    margin: 0 0 10px 0 !important;
    display: block !important;
    border-bottom: 2px solid var(--gray-light) !important;
    padding-bottom: 12px !important;
}

.ql-html-textArea {
    position: relative !important;
    left: auto !important;
    width: 100% !important;
    flex-grow: 1 !important;
    height: 350px !important;
    border: 1px solid #ddd !important;
    margin-bottom: 60px !important; /* Spacing for absolutely positioned buttons */
}

.ql-html-buttonGroup {
    position: absolute !important;
    bottom: 20px !important;
    right: 30px !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    gap: 12px !important;
}

.ql-html-buttonOk,
.ql-html-buttonCancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-size: 0.95rem !important;
    border-radius: 0 !important;
    border: 2px solid transparent !important;
    transition: all 0.2s !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-transform: none !important;
}

.ql-html-buttonOk {
    background: var(--gradient) !important;
    color: white !important;
}

.ql-html-buttonOk:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 59, 122, 0.3) !important;
}

.ql-html-buttonCancel {
    background: white !important;
    color: #555 !important;
    border: 2px solid #ddd !important;
    margin-right: 0 !important;
}

.ql-html-buttonCancel:hover {
    background: #f8f9fa !important;
    border-color: #ccc !important;
}

/* Styling for 'Zurück' back links to match the premium design system */
.back-link,
.page-header p a,
.page-header > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 16px;
    background-color: var(--gray-light);
    border-left: 4px solid var(--primary);
    transition: background-color 0.15s ease, border-color 0.15s ease;
    margin-top: 10px;
    margin-bottom: 5px;
    box-shadow: none;
}

.back-link:hover,
.page-header p a:hover,
.page-header > a:hover {
    background-color: var(--marke-flaeche);
    color: var(--secondary);
    text-decoration: none;
    transform: none;
    box-shadow: none;
}