/* CSU Naila — eigenes Stylesheet (ergänzt Bootstrap 5)
   „App-Look": moderne, App-artige Oberfläche in den CSU-Farben
   (CSU-Blau #008AC5, Hellblau, dunkles Navy). Token-basiert: Farben, Flächen,
   Radien und Schatten hängen an CSS-Variablen, der Dark Mode tauscht nur
   die Token — nicht die Komponenten. (Token-Namen --csu-* bleiben als
   technische IDs erhalten; nur die Werte sind CSU.) */

/* Hausschrift Figtree (selbst gehostet, kein CDN) */
@font-face {
    font-family: 'Figtree';
    src: url('../fonts/figtree-latin.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Figtree';
    src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --csu-orange: #008ac5;
    --csu-orange-dark: #00719f;
    --csu-orange-soft: #e1f2fb;
    --csu-green: #005a87;
    --csu-green-dark: #003f5f;
    --csu-petrol: #0a2438;
    --csu-petrol-2: #12405f;
    --csu-ink: #1c2a33;
    --csu-bg: #f4f4ef;
    --csu-surface: #ffffff;
    --csu-surface-2: #ecebe4;
    --csu-border: #e6e4db;
    /* Vier Radius-Stufen — eine Quelle, keine Ad-hoc-Werte mehr:
       -pill = voll rund (Badges, Buttons, Pillen), -lg = große Flächen,
       (Basis) = Karten, -sm = Formulare/kleine Elemente. */
    --csu-radius-pill: 999px;   /* voll rund (Badges, Buttons, Chips) */
    --csu-radius: 1.25rem;      /* Karten */
    --csu-radius-lg: 1.5rem;    /* große Flächen (Hero, Sidebar, Footer) */
    --csu-radius-sm: 0.75rem;   /* Formulare, kleine Elemente */
    --csu-shadow: 0 2px 4px rgba(12, 42, 49, 0.04), 0 10px 30px rgba(12, 42, 49, 0.08);
    --csu-shadow-hover: 0 4px 8px rgba(12, 42, 49, 0.06), 0 18px 44px rgba(12, 42, 49, 0.14);
}

/* Im Portal wirken die großen Marketing-Radien zu „bubbly" — dort etwas
   sachlicher. Nur die Karten-/Großflächen-Stufen; -sm und -pill bleiben.
   Der öffentliche Bereich (body ohne .portal) behält die großzügige Optik. */
body.portal {
    --csu-radius: 0.85rem;
    --csu-radius-lg: 1.1rem;
}

body {
    background-color: var(--csu-bg);
    color: var(--csu-ink);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Figtree', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.015em;
}

h1, .h1, h2, .h2 { font-weight: 800; }

/* Abschnitts-Überschriften mit orangem Akzent */
.section-title {
    position: relative;
    padding-bottom: 0.6rem;
}

.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    border-radius: var(--csu-radius-pill);
    background: linear-gradient(90deg, var(--csu-orange), #ffb85c);
}

/* Navigation: Glas-Leiste; im öffentlichen Bereich (Container statt fluid)
   als schwebende Pille im App-Stil. */
.navbar-csu {
    background-color: color-mix(in srgb, var(--csu-surface) 84%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: none;
    border-bottom: 1px solid var(--csu-border);
}

.navbar-csu .nav-link {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--csu-ink);
    border-radius: var(--csu-radius-pill);
    padding-inline: 0.85rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.navbar-csu .nav-link.active,
.navbar-csu .nav-link:hover {
    color: var(--csu-orange-dark);
    background-color: var(--csu-orange-soft);
}

/* Öffentliche Seite: schwebende Pill-Navbar */
.navbar-csu:has(> .container) {
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0.7rem 0.9rem 0;
}
.navbar-csu > .container {
    background: color-mix(in srgb, var(--csu-surface) 84%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--csu-border);
    border-radius: var(--csu-radius-lg);
    box-shadow: var(--csu-shadow);
    padding: 0.45rem 1rem;
}

.brand-title {
    font-weight: 800;
    line-height: 1.05;
}

.brand-sub {
    font-size: 0.72rem;
    color: var(--csu-orange-dark);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Vereins-Logo (Sonne über den Frankenwald-Hügeln): Sonne bleibt orange,
   Wortmarke folgt currentColor, Hügel-Grün über CSS-Variablen themefähig. */
:root {
    --logo-hill-1: #005a87;
    --logo-hill-2: #003f5f;
}
[data-bs-theme="dark"] {
    /* dunkles Hügel-Grün säuft auf Petrol ab -> aufhellen */
    --logo-hill-1: #7fb8e6;
    --logo-hill-2: #4a94c9;
}
.brand-logo {
    height: 44px;
    width: auto;
    display: block;
    color: #005a87; /* Wortmarke in CSU-Blau */
}
.brand-sun {
    height: 38px;
    width: auto;
    display: block;
    flex: 0 0 auto;
}
[data-bs-theme="dark"] .brand-logo {
    color: #eef4f4;
}

/* Eigenes hochgeladenes Logo (Einstellungen): Bild + Wortmarke als HTML */
.brand-logo-custom {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    height: 44px;
}
.brand-logo-custom img {
    height: 100%;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}
.brand-logo-custom .bl-words { line-height: 1.15; }
.brand-logo-custom .bl-name {
    display: block;
    font-weight: 800;
    font-size: 1.05rem;
    color: #005a87;
}
.brand-logo-custom .bl-tag {
    display: block;
    font-size: .8rem;
    font-style: italic;
    font-weight: 600;
    color: #008ac5;
}
[data-bs-theme="dark"] .brand-logo-custom .bl-name { color: #eef4f4; }
img.brand-sun { object-fit: contain; }
/* Logo-Bilder passen sich per prefers-color-scheme selbst an (SVG), daher hier
   keine Theme-Umschaltung mehr nötig. */
@media (max-width: 575.98px) {
    .brand-logo { height: 36px; }
}

.dropdown-menu {
    border: 1px solid var(--csu-border);
    border-radius: var(--csu-radius-sm);
    box-shadow: var(--csu-shadow-hover);
    overflow: hidden;
}

.dropdown-item {
    padding: 0.55rem 1.1rem;
}

.dropdown-item:hover {
    background-color: var(--csu-orange-soft);
    color: var(--csu-orange-dark);
}

/* Hero — Naila-Foto mit Petrol/Teal-Overlay (Logo-Türkis) und Sonne,
   abgerundet wie eine App-Karte.
   Ebenen (oben zuerst gemalt): Sonnen-Glow → dunkles Petrol-Overlay →
   Foto → als background-color der bisherige Petrol-Verlauf ist NICHT
   möglich (color ist einfarbig), daher liegt der Verlauf als UNTERSTE
   background-Ebene: fehlt das Foto (Datei nicht vorhanden), lädt der
   Foto-Layer einfach nicht und Overlay+Sonne liegen auf dem Verlauf →
   sieht praktisch aus wie vorher. Das Overlay hält den weißen Text lesbar
   (das Foto ist hell). */
.hero {
    color: #fff;
    background:
        radial-gradient(ellipse 60% 42% at 50% 0%, rgba(0, 138, 197, 0.5), transparent 68%),
        linear-gradient(160deg, rgba(8, 38, 45, 0.82) 0%, rgba(12, 52, 61, 0.72) 45%, rgba(21, 96, 110, 0.6) 100%),
        url('../img/naila-hero.jpg') center / cover no-repeat,
        linear-gradient(160deg, #0a2c33 0%, #0f3f49 45%, #155f86 100%);
    padding: 5.5rem 0 7.5rem;
    position: relative;
    overflow: hidden;
    margin: 0.9rem 0.9rem 0;
    border-radius: var(--csu-radius-lg);
}

.hero::before {
    /* weiche Sonnenkugel oben in der Mitte */
    content: "";
    position: absolute;
    left: 50%;
    top: -90px;
    transform: translateX(-50%);
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, #7fb8e6, var(--csu-orange) 55%, transparent 72%);
    filter: blur(2px);
    opacity: 0.9;
    pointer-events: none;
}

.hero::after {
    /* sanfte Hügelsilhouette am unteren Rand */
    content: "";
    position: absolute;
    inset: auto 0 -2px 0;
    height: 90px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 90" preserveAspectRatio="none"><path d="M0,64 C240,10 420,90 720,52 C1020,14 1200,80 1440,38 L1440,90 L0,90 Z" fill="%23f4f4ef"/></svg>') bottom / 100% 100% no-repeat;
}

.hero .motto {
    display: inline-block;
    /* Dunkle Petrol-Pille mit orangem Rand: hebt sich klar vom Sonnen-Glow ab
       (vorher helles, blasses Transparent auf Orange = kaum lesbar). */
    background: rgba(7, 34, 40, 0.6);
    border: 1px solid rgba(0, 138, 197, 0.7);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.82rem;
    padding: 0.5rem 1.2rem;
    border-radius: var(--csu-radius-pill);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.hero h1 {
    font-weight: 800;
    text-wrap: balance;
    letter-spacing: -0.03em;
}

/* Buttons in Vereinsfarben */
.btn-csu {
    background: linear-gradient(135deg, var(--csu-orange), #e06d00);
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: var(--csu-radius-pill);
    padding-inline: 1.4rem;
    box-shadow: 0 6px 18px rgba(0, 138, 197, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-csu:hover, .btn-csu:focus {
    background: linear-gradient(135deg, var(--csu-orange-dark), #c86800);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 138, 197, 0.45);
}

.btn-outline-secondary {
    border-radius: var(--csu-radius-pill);
}

.btn-outline-success, .btn-outline-danger, .btn-success {
    border-radius: var(--csu-radius-pill);
}

.text-csu { color: var(--csu-orange-dark); }
.bg-csu-green { background-color: var(--csu-green); }
.border-csu { border: 1.5px solid color-mix(in srgb, var(--csu-orange) 45%, var(--csu-border)) !important; }

/* Feature-Kacheln auf der Startseite — farbige Tints im App-Stil */
.feature-tile {
    background: var(--csu-surface);
    border-radius: var(--csu-radius);
    padding: 1.75rem;
    height: 100%;
    box-shadow: var(--csu-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--csu-shadow-hover);
}

.feature-tile .icon-bubble {
    width: 54px;
    height: 54px;
    border-radius: var(--csu-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--csu-orange-dark);
    background: var(--csu-orange-soft);
    margin-bottom: 0.9rem;
}

/* Tint-Verläufe subtiler: Surface hält länger (bis 40%), der Tint kommt
   abgeschwächt (color-mix mit Surface) — ruhigerer App-Look, Tint bleibt
   aber erkennbar. */
.feature-tile.tile-orange { background: linear-gradient(140deg, var(--csu-surface) 40%, color-mix(in srgb, #e1f2fb 55%, var(--csu-surface))); }
.feature-tile.tile-orange .icon-bubble { background: var(--csu-orange); color: #fff; }
.feature-tile.tile-green { background: linear-gradient(140deg, var(--csu-surface) 40%, color-mix(in srgb, #e4eef5 55%, var(--csu-surface))); }
.feature-tile.tile-green .icon-bubble { background: var(--csu-green); color: #fff; }
.feature-tile.tile-petrol { background: linear-gradient(140deg, var(--csu-surface) 40%, color-mix(in srgb, #e0eaf2 55%, var(--csu-surface))); }
.feature-tile.tile-petrol .icon-bubble { background: var(--csu-petrol); color: #fff; }
[data-bs-theme="dark"] .feature-tile.tile-orange { background: linear-gradient(140deg, var(--csu-surface) 40%, color-mix(in srgb, #3c2c12 55%, var(--csu-surface))); }
[data-bs-theme="dark"] .feature-tile.tile-green { background: linear-gradient(140deg, var(--csu-surface) 40%, color-mix(in srgb, #173a1d 55%, var(--csu-surface))); }
[data-bs-theme="dark"] .feature-tile.tile-petrol { background: linear-gradient(140deg, var(--csu-surface) 40%, color-mix(in srgb, #0d3350 55%, var(--csu-surface))); }

footer.site-footer {
    background-color: var(--csu-petrol);
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0.9rem 0.9rem;
    border-radius: var(--csu-radius-lg);
}

footer.site-footer a {
    color: #ffce8a;
    text-decoration: none;
}

footer.site-footer a:hover {
    text-decoration: underline;
}

/* Karten */
.card {
    border: 1px solid var(--csu-border);
    border-radius: var(--csu-radius);
    box-shadow: var(--csu-shadow);
}

a.card, .card:has(.stretched-link) {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:has(.stretched-link):hover {
    transform: translateY(-4px);
    box-shadow: var(--csu-shadow-hover);
}

.card .card-title {
    font-weight: 700;
}

/* Getönte Karten (Dashboard-Bento) */
.card-tint-orange {
    background: linear-gradient(145deg, var(--csu-surface) 40%, color-mix(in srgb, #ffe9cc 55%, var(--csu-surface)));
    border-color: color-mix(in srgb, var(--csu-orange) 30%, var(--csu-border));
}
.card-tint-green {
    background: linear-gradient(145deg, var(--csu-surface) 40%, color-mix(in srgb, #e2eedf 55%, var(--csu-surface)));
    border-color: color-mix(in srgb, var(--csu-green) 25%, var(--csu-border));
}
[data-bs-theme="dark"] .card-tint-orange { background: linear-gradient(145deg, var(--csu-surface) 40%, color-mix(in srgb, #42300f 55%, var(--csu-surface))); }
[data-bs-theme="dark"] .card-tint-green { background: linear-gradient(145deg, var(--csu-surface) 40%, color-mix(in srgb, #16391c 55%, var(--csu-surface))); }

/* Hero-Karte im Dashboard („Nächste Sitzung"): Verlauf mit Sonnen-Glow */
.dash-hero {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 178, 84, 0.38), rgba(0, 138, 197, 0.16) 28%, transparent 52%),
        linear-gradient(150deg, var(--csu-petrol), #0f3a57 55%, #155f86);
    border: none;
    color: #fff;
}
.dash-hero .card-title,
.dash-hero .text-csu { color: #fff; }
.dash-hero .text-muted { color: rgba(255, 255, 255, 0.75) !important; }
.dash-hero a:not(.btn) { color: #ffd28a; }
.dash-hero .btn-outline-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}

.list-group-item:first-child { border-top-left-radius: var(--csu-radius); border-top-right-radius: var(--csu-radius); }
.list-group-item:last-child { border-bottom-left-radius: var(--csu-radius); border-bottom-right-radius: var(--csu-radius); }

.badge {
    border-radius: var(--csu-radius-pill);
    font-weight: 600;
}

/* Portal-Layout: Sidebar als schwebende Karte mit Pill-Navigation */
.portal-sidebar {
    background-color: transparent;
    border-right: none;
    min-height: 100%;
}

/* Innerer Nav-Container: hält die vertikalen Abstände zwischen den Gruppen
   (früher via .nav gap-1) — auch auf Mobil, wo #portal-nav nicht scrollt. */
.portal-sidebar .portal-nav-scroll {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (min-width: 992px) {
    .portal-sidebar #portal-nav {
        background: var(--csu-surface);
        border: 1px solid var(--csu-border);
        border-radius: var(--csu-radius-lg);
        box-shadow: var(--csu-shadow);
        padding: 0.75rem 0.5rem 0.75rem 0.65rem;
        position: sticky;
        top: 84px;
        /* Nie über den Bildschirm hinaus wachsen: auf Viewport-Höhe begrenzen.
           Abzug = Navbar (84px) + py-lg-3-Innenabstände der Spalte (2rem), sonst
           wäre die Seite ~12px höher als der Viewport → unnötiger rechter
           Seiten-Scrollbalken trotz kurzem Inhalt. */
        max-height: calc(100vh - 84px - 2rem);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: hidden; /* rundet die Ecken sauber ab, klippt die innere Scrollleiste */
    }
    /* Eigentlicher Scroll-Bereich — nach INNEN gesetzt, damit die Scrollleiste
       innerhalb der Karte liegt (nicht auf den runden Ecken) und die Chevron-Pfeile
       Abstand zum Rand haben. Scrollt bei langem Menü (aufgeklappter Baum) intern. */
    .portal-sidebar .portal-nav-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 0.3rem;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--bs-secondary-color) 45%, transparent) transparent;
    }
}

/* Dezenter, abgerundeter Scrollbalken (WebKit/Blink) — neutral wie der
   Seiten-Scrollbalken, schwebt dank transparentem Rand + background-clip. */
.portal-sidebar .portal-nav-scroll::-webkit-scrollbar { width: 10px; }
.portal-sidebar .portal-nav-scroll::-webkit-scrollbar-track { background: transparent; }
.portal-sidebar .portal-nav-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--bs-secondary-color) 38%, transparent);
    border-radius: var(--csu-radius-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
}
.portal-sidebar .portal-nav-scroll::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--bs-secondary-color) 60%, transparent);
    background-clip: padding-box;
}

.portal-sidebar .nav-link {
    color: #45525e;
    border-radius: var(--csu-radius-pill);
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.portal-sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--csu-orange), #e06d00);
    color: #fff;
    box-shadow: 0 5px 16px rgba(0, 138, 197, 0.35);
}

.portal-sidebar .nav-link:hover:not(.active) {
    background-color: var(--csu-orange-soft);
    color: var(--csu-orange-dark);
}

.portal-sidebar .sidebar-heading {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /* #9aa4ad war auf hellem Grund ~2.6:1 → unter WCAG AA. #5c6b74 ≈ 4.6:1. */
    color: #5c6b74;
    font-weight: 700;
}

/* Aufklappbare Sidebar-Gruppen */
.portal-sidebar .sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.portal-sidebar .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0.35rem 0.75rem;
    margin-top: 0.75rem;
    border-radius: var(--csu-radius-pill);
}
.portal-sidebar .sidebar-group:first-child .sidebar-toggle {
    margin-top: 0;
}
.portal-sidebar .sidebar-toggle:hover {
    background-color: var(--csu-orange-soft);
    color: var(--csu-orange-dark);
}
.portal-sidebar .sidebar-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}
.portal-sidebar .sidebar-group.collapsed .sidebar-chevron {
    transform: rotate(-90deg);
}
.portal-sidebar .sidebar-group.collapsed .sidebar-links {
    display: none;
}

/* Unter-Cluster (z. B. innerhalb „Schriftführer"): klar tiefer eingerückt als
   die Hauptüberschrift, die Links darunter noch eine Stufe weiter. */
.portal-sidebar .sidebar-subheading {
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #aab2ba;
    font-weight: 600;
}
.portal-sidebar .sidebar-subtoggle {
    margin-top: 0.35rem;
    padding: 0.3rem 0.75rem 0.1rem 1.4rem;
}
.portal-sidebar .sidebar-links .sidebar-group .nav-link {
    padding-left: 1.75rem;
    font-size: 0.95em;
}
[data-bs-theme="dark"] .portal-sidebar .sidebar-subheading {
    color: #7c9a9d;
}

/* Mobile Bottom-Tab-Bar im Portal (App-Gefühl): schwebende Glas-Leiste,
   nur unter lg sichtbar; liegt unter dem Offcanvas (z-index < 1045). */
.portal-tabbar {
    position: fixed;
    /* Breit: nur kleiner Rand seitlich -> Leiste ist BREITER als die Inhaltskarten
       (die haben ~0.75rem Rand). Unten aber GENUG Abstand halten (runde Ecken +
       Home-Indikator bei iPhone/Android) — nicht zu weit nach unten! */
    left: 0.4rem;
    right: 0.4rem;
    /* Unten mind. 1.5rem, auf Geräten mit Home-Indikator (iPhone) automatisch bis
       ÜBER die Safe-Area -> Leiste liegt nie im Bereich der runden Ecken/Gesten. */
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    z-index: 1030;
    /* fast deckend, damit der Inhalt NICHT durchscheint (sonst „geht" die Leiste unter) */
    background: color-mix(in srgb, var(--csu-surface) 97%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--csu-border);
    border-radius: var(--csu-radius-lg);
    /* Light: weicher, petrol-getönter Schwebeschatten (hebt Weiß-auf-Weiß sauber ab) */
    box-shadow:
        0 10px 30px rgba(16, 42, 48, 0.22),
        0 3px 10px rgba(16, 42, 48, 0.14);
    /* keine innere Safe-Area-Polsterung mehr — die Leiste schwebt bereits über
       der Safe-Area (siehe bottom), sonst würde sie unnötig hoch/leer wirken */
    padding: 0.4rem 0.3rem;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Sanfter Verlauf zur Seitenfarbe UNTER der Leiste: verdeckt Inhalt, der sonst
   im Spalt zwischen schwebender Leiste und Bildschirmrand durchblitzt. */
.portal-tabbar::after {
    content: "";
    position: absolute;
    left: -0.4rem;
    right: -0.4rem;
    bottom: -3rem;
    height: 3.6rem;
    background: linear-gradient(to bottom, transparent, var(--csu-bg) 65%);
    z-index: -1;
    pointer-events: none;
}
/* Dark Mode: leicht hellere, gehobene Oberfläche + kräftigerer Rand -> hebt sich
   deutlicher von den Karten/Seite ab als die fast gleichfarbige Karte. */
[data-bs-theme="dark"] .portal-tabbar {
    /* Dark: „flach" — KEIN Schatten (der wirkt auf dunklem Grund matschig).
       Die Leiste hebt sich allein durch die etwas hellere Fläche + klaren Rand
       + zarte obere Lichtkante ab. */
    background: color-mix(in srgb, var(--csu-surface-2) 80%, var(--csu-surface));
    border-color: color-mix(in srgb, var(--csu-surface-2) 88%, #ffffff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Beim Tippen (Tastatur offen) rutscht die Leiste aus dem Bild — der Platz
   gehört dann dem Eingabefeld (Klasse setzt tabbar.js bei Fokus). */
body.typing .portal-tabbar {
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
}
.portal-tabbar .tabbar-inner {
    display: flex;
    align-items: stretch;
}
/* „Übersicht" links, „Mehr" rechts fest verankert (gleich breite Randplätze) */
.portal-tabbar > .tabbar-inner > .tab-edge {
    flex: 1 1 0;
    min-width: 0;
}
/* Mittelzone: 1–3 Favoriten mittig mit gleichen Abständen (space-evenly),
   unabhängig von der Anzahl — leere Slots sind d-none und fallen aus dem Fluss. */
.portal-tabbar .tab-favs {
    flex: 3 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
}
.portal-tabbar .tab-favs .tab {
    flex: 0 0 auto;
    min-width: 3.4rem;
}
.portal-tabbar .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.67rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    text-decoration: none;
    position: relative;
    padding: 0.2rem 0;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}
/* Nach dem Schließen des „Mehr"-Sheets springt der Fokus auf den Button zurück —
   der blaue Browser-Fokusrahmen sieht bei Touch/Maus unschön aus. Für Zeiger-
   Eingabe unterdrücken, für Tastatur-Navigation (Barrierefreiheit) sichtbar
   lassen: ein dezenter Ring am Icon-Feld statt eckigem Kasten. */
.portal-tabbar .tab:focus {
    outline: none;
    box-shadow: none;
}
.portal-tabbar .tab:focus-visible .tico {
    outline: 2px solid var(--csu-orange);
    outline-offset: 2px;
}
.portal-tabbar .tab .tico {
    width: 46px;
    height: 30px;
    border-radius: var(--csu-radius-pill);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    line-height: 1;
}
/* Bunte Bereichs-Icons: Icon nimmt die Bereichsfarbe (--tab-ico je Tab gesetzt),
   das Label bleibt dezent — so bleibt die Leiste ruhig, die Icons sind aber bunt. */
.portal-tabbar .tab .tico i { color: var(--tab-ico, currentColor); }
.portal-tabbar .tab.active { color: var(--csu-orange-dark); }
.portal-tabbar .tab.active .tico { background: var(--csu-orange-soft); }
/* Aktiver Tab: Icon immer im Orange (überschreibt die Bereichsfarbe) */
.portal-tabbar .tab.active .tico i { color: var(--csu-orange-dark); }
.portal-tabbar .tab .tab-dot,
.more-tile .tab-dot {
    position: absolute;
    top: -1px;
    right: calc(50% - 22px);
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    border-radius: var(--csu-radius-pill);
    padding: 0.02rem 0.32rem;
    line-height: 1.3;
}
.more-tile .tab-dot { top: -4px; }
@media (min-width: 992px) {
    .portal-tabbar { display: none; }
}

/* „Mehr"-Bottom-Sheet: alle Bereiche als Kachel-Raster, Stern = Tab-Favorit */
.portal-more.offcanvas-bottom {
    height: auto;
    max-height: 82vh;
    border: 0;
    border-top-left-radius: var(--csu-radius-lg);
    border-top-right-radius: var(--csu-radius-lg);
    background: var(--csu-surface);
    box-shadow: 0 -12px 48px rgba(12, 42, 49, 0.3);
    padding-bottom: env(safe-area-inset-bottom);
}
.portal-more::before {
    /* Grabber-Griff wie bei nativen Sheets */
    content: "";
    display: block;
    width: 44px;
    height: 5px;
    border-radius: var(--csu-radius-pill);
    background: var(--csu-border);
    margin: 0.6rem auto 0;
}
/* Kacheln im „Mehr"-Sheet per Gedrückt-Halten sortierbar: iOS-Link-Vorschau und
   Textauswahl unterdrücken, sonst stört der Long-Press. */
.more-tile {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.more-tile.tile-dragging {
    opacity: 0.9;
    transform: scale(1.06);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
    z-index: 5;
    cursor: grabbing;
}

.more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    padding-bottom: 0.5rem;
}
@media (min-width: 480px) {
    .more-grid { grid-template-columns: repeat(4, 1fr); }
}
.more-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.9rem 0.4rem 0.7rem;
    border: 1px solid var(--csu-border);
    border-radius: var(--csu-radius-sm);
    background: var(--csu-bg);
    text-decoration: none;
    color: var(--csu-ink);
    font-weight: 600;
    font-size: 0.78rem;
    text-align: center;
}
.more-tile.active {
    border-color: color-mix(in srgb, var(--csu-orange) 55%, var(--csu-border));
    background: var(--csu-orange-soft);
}
.more-tile .more-ico {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: var(--csu-radius-sm);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    /* bunte Bereichs-Kachel: zarter Farbwash + Icon in der Bereichsfarbe */
    background: color-mix(in srgb, var(--tab-ico, var(--csu-orange)) 18%, transparent);
    color: var(--tab-ico, var(--csu-orange-dark));
}
.more-tile .more-ico .tab-dot { right: -6px; }
.more-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.more-star {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.more-star.is-fav { color: var(--csu-orange); }
[data-bs-theme="dark"] .more-tile { background: var(--csu-surface-2); }
/* Platz für die Tab-Bar, damit sie keine Inhalte verdeckt; beim Tippen ist
   die Leiste ausgeblendet -> Platzhalter einklappen (Tastatur braucht Raum) */
@media (max-width: 991.98px) {
    body:has(.portal-tabbar) main.container-fluid,
    body:has(.portal-tabbar) > .container-fluid.flex-grow-1 {
        padding-bottom: 6.5rem;
    }
    body.typing:has(.portal-tabbar) main.container-fluid,
    body.typing:has(.portal-tabbar) > .container-fluid.flex-grow-1 {
        padding-bottom: 1rem;
    }
}

/* Amts-Hub-Kacheln (Übersichtsseiten Schriftführer/Kasse/Vorstand/Admin) */
.hub-tile {
    border: 1px solid var(--csu-border);
    border-radius: var(--csu-radius);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.hub-tile:hover {
    transform: translateY(-2px);
    border-color: var(--csu-orange);
    box-shadow: 0 6px 18px rgba(20, 40, 45, 0.12);
}
.hub-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--csu-radius-sm);
    background: var(--csu-orange-soft);
    color: var(--csu-orange-dark);
    font-size: 1.3rem;
}
[data-bs-theme="dark"] .hub-tile {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Avatare */
.avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-lg {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px var(--csu-surface), var(--csu-shadow);
}

.avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--csu-green), var(--csu-green-dark));
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.avatar-placeholder.avatar-lg-ph {
    width: 120px;
    height: 120px;
    font-size: 2.5rem;
    box-shadow: 0 0 0 4px var(--csu-surface), var(--csu-shadow);
}

/* Profilbild-Zuschnitt: quadratische Bühne mit runder Maske; touch-action:none,
   damit Ziehen/Pinchen nicht die Seite scrollt/zoomt. */
.avatar-crop-stage {
    position: relative;
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: var(--csu-radius-sm);
    overflow: hidden;
    background: #111;
    touch-action: none;
    cursor: grab;
}

.avatar-crop-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.avatar-crop-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle closest-side, transparent 0 97%, rgba(0, 0, 0, .55) 100%);
}

.avatar-crop-mask::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}

.notification-unread {
    border-left: 4px solid var(--csu-orange);
    /* #fff8ec war auf weißer Fläche praktisch unsichtbar (~1.02:1). */
    background-color: var(--csu-orange-soft);
}

/* Personen-Karten im öffentlichen Bereich */
.person-card .person-icon {
    font-size: 3rem;
    color: var(--csu-green);
}

/* Formulare */
.form-control, .form-select {
    border-radius: var(--csu-radius-sm);
}

.form-control:focus, .form-select:focus {
    border-color: var(--csu-orange);
    box-shadow: 0 0 0 0.2rem rgba(0, 138, 197, 0.18);
}

/* Zahlen/Beträge fluchten spaltenweise (Kassenbuch, Berichte, Beiträge).
   Utility .num für Einzelwerte; die rechtsbündigen Zellen der Kasse-Tabellen
   bekommen es automatisch, damit Salden sauber untereinander stehen. */
.num,
.table td.text-end,
.table th.text-end {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Tabellen luftiger */
.table > :not(caption) > * > * {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

/* Bündig in einer Karte liegende Tabellen: die eckige Kopfzeile (und die untere
   Zeile) an die Kartenrundung anpassen — sonst ragen die eckigen Ecken sichtbar
   aus dem abgerundeten Kartenrahmen. Das Clipping stört den horizontalen Scroll
   der inneren .table-responsive nicht (die scrollt in ihrem eigenen Container). */
.card:has(> .table-responsive),
.card:has(> .table) {
    overflow: hidden;
}

/* Mobile: Portal-Navigation als Offcanvas, kompaktere Abstände */
#portalSidebar {
    --bs-offcanvas-width: 290px;
}

@media (max-width: 991.98px) {
    .hero {
        padding: 3.5rem 0 5.5rem;
        margin: 0.6rem 0.6rem 0;
        border-radius: var(--csu-radius);
    }

    .portal-sidebar {
        border-right: none;
    }

    h1.h3 {
        font-size: 1.35rem;
    }
}

/* ---------------------------------------------------------------------------
   Dunkles Design — Petrol-Ton des Freie-Wähler-Logos, dunkler abgetönt.
   Bootstrap übernimmt via data-bs-theme="dark" Karten, Tabellen, Formulare;
   hier werden nur die Token getauscht + wenige Sonderfälle nachgezogen.
--------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
    --csu-bg: #071a29;             /* Seite: tiefes Navy */
    --csu-surface: #102c42;        /* Karten, Navigation, Sidebar */
    --csu-surface-2: #15405e;      /* Hover-Flächen */
    --csu-border: #1d425c;
    --csu-ink: #dce7f0;
    --csu-orange: #33a3d4;         /* Akzent auf Dunkel leicht aufgehellt */
    --csu-orange-dark: #7fb8e6;
    --csu-orange-soft: rgba(0, 138, 197, 0.14);
    --csu-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
    --csu-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.5);
    --bs-body-bg: #071a29;
    --bs-body-color: #dce7f0;
    --bs-secondary-color: #8fa8bd; /* .text-muted */
    --bs-border-color: #1d425c;
}

[data-bs-theme="dark"] .navbar-csu {
    background-color: color-mix(in srgb, var(--csu-surface) 88%, transparent);
}

[data-bs-theme="dark"] .navbar-csu:has(> .container) {
    background: transparent;
}

[data-bs-theme="dark"] .navbar-csu > .container {
    background: color-mix(in srgb, var(--csu-surface) 88%, transparent);
}

[data-bs-theme="dark"] .navbar-csu .nav-link {
    color: var(--csu-ink);
}

[data-bs-theme="dark"] .navbar-csu .nav-link.active,
[data-bs-theme="dark"] .navbar-csu .nav-link:hover {
    color: var(--csu-orange-dark);
    background-color: var(--csu-orange-soft);
}

[data-bs-theme="dark"] .brand-title {
    color: #f2f7f7;
}

[data-bs-theme="dark"] .brand-sub {
    color: var(--csu-orange);
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .feature-tile,
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--csu-surface);
    color: var(--csu-ink);
}

[data-bs-theme="dark"] .card { border-color: var(--csu-border); }

[data-bs-theme="dark"] .dropdown-item {
    color: var(--csu-ink);
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: var(--csu-orange-soft);
    color: var(--csu-orange-dark);
}

[data-bs-theme="dark"] .portal-sidebar #portal-nav {
    background-color: var(--csu-surface);
    border-color: var(--csu-border);
}

[data-bs-theme="dark"] .portal-sidebar .nav-link {
    color: #b9cdcf;
}

[data-bs-theme="dark"] .portal-sidebar .nav-link:hover:not(.active) {
    background-color: var(--csu-orange-soft);
    color: var(--csu-orange-dark);
}

[data-bs-theme="dark"] .portal-sidebar .sidebar-heading {
    color: #6f8f92;
}

[data-bs-theme="dark"] .offcanvas {
    background-color: var(--csu-surface);
}

[data-bs-theme="dark"] .icon-bubble {
    background: var(--csu-orange-soft);
    color: var(--csu-orange-dark);
}

[data-bs-theme="dark"] .hero {
    /* Dark: Foto stärker abgedunkelt, damit es zum tiefen Petrol passt. */
    background:
        radial-gradient(ellipse 60% 42% at 50% 0%, rgba(0, 138, 197, 0.35), transparent 68%),
        linear-gradient(160deg, rgba(14, 52, 58, 0.9) 0%, rgba(11, 44, 49, 0.85) 50%, rgba(9, 34, 39, 0.82) 100%),
        url('../img/naila-hero.jpg') center / cover no-repeat,
        linear-gradient(160deg, #0d3350 0%, #0a2438 50%, #081f30 100%);
}

[data-bs-theme="dark"] .hero::after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 90" preserveAspectRatio="none"><path d="M0,64 C240,10 420,90 720,52 C1020,14 1200,80 1440,38 L1440,90 L0,90 Z" fill="%23071a29"/></svg>') bottom / 100% 100% no-repeat;
}

[data-bs-theme="dark"] footer.site-footer {
    background-color: #051a20;
}

[data-bs-theme="dark"] .notification-unread {
    background-color: rgba(0, 138, 197, 0.10);
}

[data-bs-theme="dark"] .list-group-item {
    background-color: transparent;
    color: var(--csu-ink);
}

[data-bs-theme="dark"] .avatar-lg,
[data-bs-theme="dark"] .avatar-placeholder.avatar-lg-ph {
    box-shadow: 0 0 0 4px var(--csu-surface), var(--csu-shadow);
}

[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--csu-surface-2) !important;
    color: var(--csu-ink) !important;
    border-color: #1d425c !important;
}

[data-bs-theme="dark"] .person-card .person-icon {
    color: #7db87e;
}

[data-bs-theme="dark"] .text-csu {
    color: var(--csu-orange-dark);
}

.theme-toggle {
    color: inherit;
}

/* --- Quill-Editor (WYSIWYG) ------------------------------------------------ */
/* Quill setzt .ql-container auf height:100%, was in Bootstrap-Rows (Flex) zur
   Spaltenhöhe aufgelöst wird und den Editor über den Formular-Button laufen
   lässt -> auf auto zurücksetzen, Höhe über den Inhaltsbereich steuern. */
.quill-editor.ql-container {
    height: auto;
    font-size: 1rem;
    font-family: inherit;
}

.quill-editor .ql-editor {
    height: auto;
    min-height: 200px;
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--bs-border-color);
    border-radius: 0;
}

.ql-toolbar.ql-snow {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
}

.ql-container.ql-snow {
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

[data-bs-theme="dark"] .ql-toolbar.ql-snow,
[data-bs-theme="dark"] .ql-container.ql-snow {
    background-color: var(--csu-surface);
    color: var(--csu-ink);
}

[data-bs-theme="dark"] .ql-snow .ql-stroke {
    stroke: var(--csu-ink);
}

[data-bs-theme="dark"] .ql-snow .ql-fill {
    fill: var(--csu-ink);
}

[data-bs-theme="dark"] .ql-snow .ql-picker {
    color: var(--csu-ink);
}

[data-bs-theme="dark"] .ql-snow .ql-picker-options {
    background-color: var(--csu-surface-2);
}

[data-bs-theme="dark"] .ql-snow .ql-tooltip {
    background-color: var(--csu-surface-2);
    color: var(--csu-ink);
    box-shadow: none;
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ql-snow .ql-tooltip input[type="text"] {
    background-color: var(--csu-surface);
    color: var(--csu-ink);
    border-color: var(--bs-border-color);
}

/* Rich-Text-Ausgabe (News, Einladungstexte) */
.rich-text img {
    max-width: 100%;
    height: auto;
}

/* Tabellen INNERHALB einer Karte im Dark Mode: Bootstrap setzt --bs-table-bg
   auf die Seitenfarbe (--bs-body-bg, tiefes Petrol). In einer Karte (heller
   --csu-surface) wirken die Zellen dann dunkler als die Karte → die Zwischen-
   räume um die Zellen/Eingabefelder sehen aus wie „Löcher". Tabellen in Karten
   erben deshalb den Karten-Hintergrund, dann verschmelzen Zellen und Karte. */
[data-bs-theme="dark"] .card .table {
    --bs-table-bg: var(--csu-surface);
}

/* Helle Bootstrap-Tabellenzeilen (z. B. Summen-tfoot) im Dark Mode anpassen,
   sonst bleibt der Balken weiß. */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td {
    --bs-table-bg: var(--csu-surface-2);
    --bs-table-color: var(--csu-ink);
    color: var(--csu-ink);
}

/* Breite Tabellen auf schmalen Screens horizontal scrollen lassen, statt die
   inhaltsreichste Spalte zu quetschen (wirkt zusammen mit .table-responsive). */
.table-scroll {
    min-width: 720px;
}

/* ---------------------------------------------------------------------------
   News-Bilder & Slideshow (Aktuelles/Home/Detail)
   --------------------------------------------------------------------------- */
.news-card {
    overflow: hidden; /* Bild-Ecken an Card-Radius anpassen */
}
/* Ganze Kachel klickbar (stretched-link an der Überschrift): dezenter
   Hinweis beim Überfahren, dass der Beitrag sich öffnet. */
.news-card:hover .card-title a { text-decoration: underline; }
.news-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e9eef0;
}
.news-media > img,
.news-media .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-media.carousel .carousel-inner,
.news-media.carousel .carousel-item {
    height: 100%;
}
/* Große Galerie auf der Detailseite: ganzes Bild zeigen, nichts abschneiden */
.news-media-lg {
    border-radius: var(--csu-radius);
    box-shadow: var(--csu-shadow);
}
/* Einzelbild: natürliches Seitenverhältnis, komplett sichtbar (kein Crop) */
.news-media-lg:not(.carousel) {
    aspect-ratio: auto;
}
.news-media-lg:not(.carousel) > img {
    height: auto;
    object-fit: contain;
}
/* Mehrere Bilder (Carousel): fester Rahmen, aber ganzes Bild (ggf. mit Rand) */
.news-media-lg.carousel {
    aspect-ratio: 3 / 2;
}
.news-media-lg.carousel .carousel-item img {
    object-fit: contain;
}
/* Gebrandeter Platzhalter, falls ein (alter) Beitrag kein Bild hat */
.news-media-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #fff2df 0%, #ffdcb8 100%);
}
[data-bs-theme="dark"] .news-media {
    background: #0d3350;
}
[data-bs-theme="dark"] .news-media-fallback {
    background: linear-gradient(135deg, #123c43 0%, #0d3350 100%);
}
.news-fallback-sun {
    height: 46%;
    width: auto;
    opacity: 0.92;
}
/* Carousel-Bedienelemente auf hellen Bildern sichtbar machen. z-index 2 hält
   Pfeile/Punkte über dem .stretched-link-Overlay (z-index 1) der klickbaren
   News-Kachel — so bedienen sie den Slider, ohne den Artikel zu öffnen. */
.news-media .carousel-control-prev,
.news-media .carousel-control-next {
    width: 14%;
    z-index: 2;
}
.news-media .carousel-indicators {
    z-index: 2;
}
.news-media .carousel-control-prev-icon,
.news-media .carousel-control-next-icon {
    background-color: rgba(20, 40, 45, 0.45);
    border-radius: 50%;
    padding: 0.85rem;
    background-size: 55%;
}
.news-media .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Sehr schmale Displays (iPhone & Co.): kompakte Portal-Navbar, damit
   Hamburger + Logo + Schriftzug + Icons nebeneinander passen und die
   Seite nicht horizontal scrollt. */
@media (max-width: 430px) {
    .navbar-csu .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    .navbar-csu .navbar-nav .nav-link {
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }
    .navbar-csu .navbar-nav {
        gap: 0 !important;
    }
    .navbar-csu .avatar-img,
    .navbar-csu .navbar-nav .avatar-placeholder {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    .navbar-csu .brand-title {
        font-size: 0.85rem !important;
    }
}

/* --- Editierbare Website-Seiten: moderne Inhalts-Darstellung --- */
.page-content h2 { color: var(--csu-ink); font-weight: 700; margin-top: 1.75rem; margin-bottom: 0.75rem; }
.page-content h2:first-child { margin-top: 0; }
.page-content h3 { color: var(--csu-orange-dark); font-size: 1.15rem; font-weight: 700; margin-top: 1.5rem; }
[data-bs-theme="dark"] .page-content h2 { color: var(--bs-body-color); }

/* Chronik: alternierende Zeitleiste mit Jahrzehnt-Markern und Stationskarten.
   Desktop: mittige Linie, Karten wechseln links/rechts, je EIN Punkt auf der
   Linie (dockt den Eintrag an). Mobil: einspaltig mit Linie links. */
.chronik-alt { position: relative; margin-top: 1rem; }
.chronik-alt::before {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    top: .3rem; bottom: .3rem; width: 2px; border-radius: 2px;
    background: linear-gradient(var(--csu-orange) 0%, var(--bs-border-color) 92%);
}
/* Jahrzehnt-Marker als Pille mittig auf der Linie */
.chronik-era { position: relative; text-align: center; margin: 1.8rem 0 1.3rem; }
.chronik-era:first-child { margin-top: 0; }
.chronik-era span {
    position: relative; z-index: 1; display: inline-block;
    font-size: 1.1rem; font-weight: 800; color: #fff; background: var(--csu-orange);
    padding: .3rem 1.05rem; border-radius: var(--csu-radius-pill); box-shadow: 0 4px 12px rgba(0, 138, 197, .3);
}
/* Station (halbe Breite, wechselnd) */
.chronik-item { position: relative; width: 50%; padding: 0 2rem; margin-bottom: 1rem; }
.chronik-item.ch-left { left: 0; text-align: right; }
.chronik-item.ch-right { left: 50%; text-align: left; }
/* EIN Punkt pro Eintrag, mittig auf der Linie */
.chronik-item::before {
    content: ""; position: absolute; top: 1.05rem; z-index: 1;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--csu-orange); box-shadow: 0 0 0 4px var(--csu-orange-soft);
}
.chronik-item.ch-left::before { right: -7.5px; }
.chronik-item.ch-right::before { left: -7.5px; }
.chronik-card {
    display: inline-block; text-align: left; max-width: 100%; border-radius: var(--csu-radius-sm);
    padding: .75rem 1rem;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.chronik-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.4rem rgba(0, 0, 0, .1);
    border-color: var(--csu-orange);
}
.chronik-date { font-weight: 700; font-size: .95rem; color: var(--csu-orange-dark); margin-bottom: .1rem; }
.chronik-text { line-height: 1.5; font-size: .96rem; }
[data-bs-theme="dark"] .chronik-date { color: var(--csu-orange); }
[data-bs-theme="dark"] .chronik-item::before { box-shadow: 0 0 0 4px rgba(0, 138, 197, .22); }
/* Mobil + kleine Tablets: einspaltig, Linie links */
@media (max-width: 767.98px) {
    .chronik-alt::before { left: 9px; transform: none; }
    .chronik-era { text-align: left; padding-left: 0; }
    .chronik-item,
    .chronik-item.ch-left,
    .chronik-item.ch-right { width: 100%; left: 0; text-align: left; padding: 0 0 0 2.4rem; }
    .chronik-item.ch-left::before,
    .chronik-item.ch-right::before { left: 2px; right: auto; }
}

/* „Mitmachen"-Karte auf Über uns */
.bg-csu-light { background: var(--csu-orange-soft); }
[data-bs-theme="dark"] .bg-csu-light { background: rgba(0, 138, 197, 0.12); }

/* --- Mitglieder-Chat --- */
/* Konversations-Bildschirm: Desktop wie gehabt (Karte mit fester Höhe), auf
   Mobil füllt der Chat die komplette Fläche zwischen Navbar und Tab-Leiste —
   nur die Nachrichtenliste scrollt, die Eingabezeile klebt unten. --app-vh
   setzt tabbar.js aus visualViewport (Tastatur!), Fallback 100dvh. */
.chat-card { max-width: 800px; }
.chat-body { height: calc(100vh - 250px); min-height: 380px; }
.chat-back { color: var(--csu-orange-dark); }
/* Sprachnachricht: Player braucht Breite, sonst wirkt die Blase gequetscht */
/* Eigener Sprachnachricht-Player (transparent in der Blase, WhatsApp-Stil) */
.chat-voice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: min(260px, 62vw);
}
.chat-voice-play {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: inherit;
    background: rgba(127, 127, 127, 0.22);
    font-size: 1.2rem;
    line-height: 1;
}
.chat-voice-play:hover { background: rgba(127, 127, 127, 0.32); }
.chat-voice-body { flex: 1 1 auto; min-width: 0; }
.chat-voice-track {
    height: 4px;
    border-radius: var(--csu-radius-pill);
    background: rgba(127, 127, 127, 0.3);
    cursor: pointer;
    position: relative;
}
.chat-voice-bar {
    height: 100%;
    width: 0;
    border-radius: var(--csu-radius-pill);
    background: currentColor;
    opacity: 0.85;
}
.chat-voice-time {
    display: block;
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 0.3rem;
}
.chat-voice-play:disabled { opacity: 0.5; cursor: default; }
.chat-voice-error { opacity: 0.7; }
/* Mobil: Name des Chats mittig in der Glas-Navbar (statt eigener Kopfzeile) */
.nav-center-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    font-size: 1.02rem;
    pointer-events: none;
}
@media (min-width: 992px) {
    .nav-center-title { display: none; }
}
@media (max-width: 991.98px) {
    .has-nav-title .brand-title,
    .has-nav-title .brand-sub { display: none !important; }
    body:has(.chat-screen) > .container-fluid.flex-grow-1 { padding-bottom: 0 !important; }
    body:has(.chat-screen) .col-12.col-lg-10 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .chat-screen {
        display: flex;
        flex-direction: column;
        /* Unten Platz für die SCHWEBENDE Tab-Leiste: sie sitzt bei
           max(1.5rem, safe-area) hoch + eigener Höhe. Der Abstand passt sich so
           automatisch an Geräte mit/ohne Home-Indikator an (der frühere feste
           166px kannte die angehobene Leiste nicht → Eingabezeile schwebte zu
           hoch). Grundwert (Navbar + Leistenhöhe) + Safe-Area der Leiste. */
        --chat-offset: calc(134px + max(1.5rem, env(safe-area-inset-bottom, 0px)));
        height: calc(var(--app-vh, 100dvh) - var(--chat-offset));
        transition: height 0.15s ease;
    }
    body.typing .chat-screen { --chat-offset: 78px; }
    .chat-screen .chat-card { flex: 1 1 auto; min-height: 0; max-width: none; }
    .chat-screen .chat-body { height: auto; min-height: 0; flex: 1 1 auto; }
}
.chat-bubble {
    position: relative; max-width: 100%; padding: 0.45rem 0.7rem;
    border-radius: var(--csu-radius-sm); font-size: 0.95rem;
}
.chat-mine { background: var(--csu-orange-soft); border-bottom-right-radius: 0.3rem; }
.chat-theirs { background: var(--bs-secondary-bg); border-bottom-left-radius: 0.3rem; }
[data-bs-theme="dark"] .chat-mine { background: rgba(0, 138, 197, 0.22); }
/* Umbruch nur an Wortgrenzen (bei Bedarf lange Wörter/URLs). Bootstraps
   .text-break setzt word-break:break-word — das kollabiert die Blase auf
   Ein-Zeichen-Breite (min-content) und bricht dann MITTEN im Wort. Deshalb
   hier überschreiben: normale Wortumbrüche, nur überlange Wörter brechen. */
.chat-bubble .text-break {
    white-space: pre-wrap;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}
.chat-sender { font-size: 0.75rem; font-weight: 700; color: var(--csu-orange-dark); }
[data-bs-theme="dark"] .chat-sender { color: var(--csu-orange); }
/* Uhrzeit + Häkchen dezent in der Ecke der Blase (WhatsApp-Stil), immer sichtbar. */
.chat-meta {
    display: block; text-align: right; white-space: nowrap;
    font-size: 0.64rem; line-height: 1; margin-top: 3px;
    color: var(--bs-secondary-color);
}
.chat-ticks { font-size: 0.8rem; vertical-align: -1px; margin-left: 0.2rem; }
.chat-ticks.chat-read { color: var(--csu-green); }
[data-bs-theme="dark"] .chat-ticks.chat-read { color: #7dd87f; }
.chat-image { max-width: min(240px, 100%); max-height: 260px; object-fit: cover; display: block; }
.chat-bubble { cursor: default; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.chat-bubble.chat-longpress { transform: scale(0.97); transition: transform 0.1s; }
.chat-deleted { font-style: italic; opacity: 0.75; }
.chat-deleted-text { color: var(--bs-secondary-color); font-size: 0.9rem; }
.chat-shift { max-width: 82%; }

/* Composer im iPhone-Stil: runde Buttons ([+] und Mikro), Senden-Pfeil
   erscheint im Eingabefeld, sobald Text drinsteht (Toggle in chat.js). */
.chat-roundbtn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--csu-border);
    background: var(--csu-surface-2);
    color: var(--csu-ink);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    padding: 0;
    flex: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.chat-roundbtn:hover { background: var(--csu-orange-soft); color: var(--csu-orange-dark); }
.chat-inputwrap .chat-input {
    padding-right: 46px;
    border-radius: var(--csu-radius-pill);
    min-height: 42px;
}
.chat-send {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, var(--csu-orange), #e06d00);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 138, 197, 0.35);
}
/* Mikro im Eingabefeld (iPhone-Stil): weicht dem Senden-Pfeil, sobald Text da ist */
.chat-mic {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    cursor: pointer;
}
.chat-mic:hover { color: var(--csu-orange-dark); background: var(--csu-orange-soft); }
.chat-filelink { color: inherit; font-weight: 600; }
/* Online-Punkt (aktive Sitzung in den letzten 5 Minuten) */
.online-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2fbf4f;
    box-shadow: 0 0 0 2px color-mix(in srgb, #2fbf4f 25%, transparent);
    margin-left: 0.3rem;
    vertical-align: 2px;
}
.chat-filelink i { color: var(--csu-orange-dark); }
[data-bs-theme="dark"] .chat-filelink i { color: var(--csu-orange); }

/* "schreibt …"-Hinweis: schwebt oben über dem Nachrichtenbereich */
.chat-typing {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    background: linear-gradient(to bottom, var(--bs-body-bg) 60%, transparent);
    pointer-events: none;
}
.chat-typing-dots span {
    animation: chat-typing-blink 1.2s infinite both;
}
.chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-typing-blink {
    0%, 60%, 100% { opacity: 0.25; }
    30% { opacity: 1; }
}
.chat-sound-toggle.active i { color: var(--csu-orange-dark); }
[data-bs-theme="dark"] .chat-sound-toggle.active i { color: var(--csu-orange); }

/* Echtzeit-Toasts: mobil OBEN (unter der Navbar, mittig), Desktop oben rechts —
   unten würden sie auf dem Handy mit Tab-Bar und Tastatur kollidieren. */
#csu-toast-wrap {
    position: fixed;
    z-index: 1090;
    top: calc(env(safe-area-inset-top, 0px) + 4.75rem);
    left: 0.75rem;
    right: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    pointer-events: none;
}
@media (min-width: 992px) {
    #csu-toast-wrap {
        top: 4.75rem;
        left: auto;
        right: 1rem;
        align-items: flex-end;
    }
}
.csu-toast {
    pointer-events: auto;
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--csu-orange);
    border-radius: var(--csu-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 0.6rem 2rem 0.6rem 0.85rem;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.csu-toast.show { opacity: 1; transform: none; }
.csu-toast-link { cursor: pointer; }
.csu-toast-title { font-weight: 600; font-size: 0.9rem; }
.csu-toast-body {
    font-size: 0.82rem;
    color: var(--bs-secondary-color);
    margin-top: 0.1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.csu-toast-close {
    position: absolute;
    top: 0.2rem;
    right: 0.4rem;
    border: 0;
    background: transparent;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

/* ---- Bild einfügen / Drag&Drop (paste-upload.js) ---------------------- */
.paste-upload-hint kbd {
    font-size: .72em;
    padding: .1em .35em;
}
.paste-upload-previews:empty { display: none !important; }
.paste-thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--csu-radius-sm);
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}
.paste-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.paste-thumb-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .8rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.paste-thumb-del:hover { background: rgba(0, 0, 0, .8); }
.paste-dropactive {
    outline: 2px dashed var(--csu-orange, #008ac5);
    outline-offset: 3px;
    border-radius: var(--bs-border-radius, .5rem);
}
input.paste-upload-flash {
    animation: paste-flash .6s ease;
}
@keyframes paste-flash {
    0% { box-shadow: 0 0 0 0 rgba(0, 138, 197, .5); }
    100% { box-shadow: 0 0 0 6px rgba(0, 138, 197, 0); }
}

/* ── Glocken-Popup (Benachrichtigungen) ───────────────────────────────── */
#notif-dd { position: relative; }

.notif-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 0.4rem;
    width: 360px;
    max-width: calc(100vw - 1rem);
    max-height: min(70vh, 30rem);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--csu-radius-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}
/* Nur im aufgeklappten Zustand sichtbar — sonst greift Bootstraps
   .dropdown-menu { display:none }. WICHTIG: kein display auf der Basis,
   sonst steht das Popup dauerhaft offen. */
.notif-panel.show {
    display: flex;
    flex-direction: column;
    animation: notif-pop 0.18s ease;
}
@keyframes notif-pop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* Mobil: als volle Leiste unter der Navbar „reinschweben" statt schmales Dropdown */
@media (max-width: 575.98px) {
    .notif-panel.dropdown-menu {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + 3.75rem) !important;
        right: 0.5rem !important;
        left: 0.5rem !important;
        margin-top: 0;
        width: auto;
        max-width: none;
        max-height: 75vh;
    }
}

.notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.9rem;
}
.notif-readall { font-size: 0.78rem; color: var(--csu-orange-dark); }

.notif-panel-body { overflow-y: auto; flex: 1 1 auto; }

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--bs-border-color);
    color: inherit;
    text-decoration: none;
    position: relative;
}
a.notif-item { cursor: pointer; }
a.notif-item:hover { background: var(--bs-tertiary-bg); }
.notif-item:last-child { border-bottom: 0; }
.notif-item.notif-unread { background-color: #fff8ec; }
[data-bs-theme="dark"] .notif-item.notif-unread { background-color: rgba(0, 138, 197, 0.10); }

.notif-ico {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}
.notif-main { min-width: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.notif-title {
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-unread .notif-title { font-weight: 600; }
.notif-body {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    margin-top: 0.1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notif-time { font-size: 0.72rem; color: var(--bs-secondary-color); margin-top: 0.15rem; }
.notif-dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--csu-orange);
    margin-top: 0.5rem;
}

/* Farbtöne je Kategorie */
.notif-tone-chat      { background: #e7f0ff; color: #1d4ed8; }
.notif-tone-meeting,
.notif-tone-calendar  { background: #e6f4ec; color: #1c7c46; }
.notif-tone-vote,
.notif-tone-poll      { background: #efe7ff; color: #6d28d9; }
.notif-tone-task      { background: #e6f6f4; color: #0f766e; }
.notif-tone-money     { background: #fdf0d6; color: #b45309; }
.notif-tone-doc       { background: #eef1f4; color: #475569; }
.notif-tone-inventory { background: #f0ece4; color: #7c5e2a; }
.notif-tone-photo     { background: #fde8f0; color: #be1d6a; }
.notif-tone-birthday  { background: #fdeaea; color: #c2410c; }
.notif-tone-feedback  { background: #fdeaea; color: #b91c1c; }
.notif-tone-members   { background: #e6f4ec; color: #1c7c46; }
.notif-tone-news      { background: #fdf0d6; color: #b45309; }
.notif-tone-fraktion  { background: #eef1f4; color: #475569; }
.notif-tone-default   { background: var(--csu-orange-soft); color: var(--csu-orange-dark); }

[data-bs-theme="dark"] .notif-tone-chat      { background: rgba(59,130,246,.18); color: #93c5fd; }
[data-bs-theme="dark"] .notif-tone-meeting,
[data-bs-theme="dark"] .notif-tone-calendar,
[data-bs-theme="dark"] .notif-tone-members   { background: rgba(34,197,94,.18); color: #86efac; }
[data-bs-theme="dark"] .notif-tone-vote,
[data-bs-theme="dark"] .notif-tone-poll      { background: rgba(139,92,246,.20); color: #c4b5fd; }
[data-bs-theme="dark"] .notif-tone-task      { background: rgba(20,184,166,.18); color: #5eead4; }
[data-bs-theme="dark"] .notif-tone-money,
[data-bs-theme="dark"] .notif-tone-news      { background: rgba(245,158,11,.18); color: #fcd34d; }
[data-bs-theme="dark"] .notif-tone-doc,
[data-bs-theme="dark"] .notif-tone-fraktion  { background: rgba(148,163,184,.20); color: #cbd5e1; }
[data-bs-theme="dark"] .notif-tone-inventory { background: rgba(180,140,60,.20); color: #e6c99a; }
[data-bs-theme="dark"] .notif-tone-photo     { background: rgba(236,72,153,.18); color: #f9a8d4; }
[data-bs-theme="dark"] .notif-tone-birthday,
[data-bs-theme="dark"] .notif-tone-feedback  { background: rgba(239,68,68,.18); color: #fca5a5; }

.notif-panel-foot {
    display: block;
    text-align: center;
    padding: 0.6rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--csu-orange-dark);
    text-decoration: none;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}
.notif-panel-foot:hover { color: var(--csu-orange); background: var(--bs-secondary-bg); }

/* ── „Was ist neu"-Banner + Punkt ─────────────────────────────────────── */
.changelog-banner {
    background: var(--csu-orange-soft);
    color: var(--csu-orange-dark);
    border-bottom: 1px solid color-mix(in srgb, var(--csu-orange) 35%, transparent);
}
.changelog-banner .bi-stars { color: var(--csu-orange); }
.changelog-banner .alert-link { color: var(--csu-orange-dark); font-weight: 600; }
[data-bs-theme="dark"] .changelog-banner {
    background: rgba(0, 138, 197, 0.12);
    color: #fcd34d;
}
[data-bs-theme="dark"] .changelog-banner .alert-link { color: #fcd34d; }

/* ── Verwaltungs-Baum in der Sidebar (Desktop) ────────────────────────── */
.nav-tree-parent { display: flex; align-items: center; }
.nav-tree-parent .nav-link { flex: 1 1 auto; min-width: 0; }
.nav-tree-toggle {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: inherit;
    padding: 0.3rem 0.45rem;
    opacity: 0.5;
    line-height: 1;
    border-radius: var(--csu-radius-sm);
}
.nav-tree-toggle:hover { opacity: 1; background: var(--csu-orange-soft); }
.nav-tree-toggle .bi { display: block; transition: transform 0.15s ease; }
.nav-tree.collapsed .nav-tree-toggle .bi { transform: rotate(-90deg); }
.nav-tree.collapsed .nav-tree-children { display: none; }
.nav-tree-children {
    margin: 0.05rem 0 0.35rem 1.15rem;
    padding-left: 0.4rem;
    border-left: 1px solid var(--bs-border-color);
}
.nav-tree-children .nav-link {
    font-size: 0.875rem;
    padding-top: 0.32rem;
    padding-bottom: 0.32rem;
}
.nav-tree-children .nav-link .bi { font-size: 0.92em; }

/* kleiner „neu"-Punkt an der Build-Zeile */
.changelog-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--csu-orange);
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* --- Nutzungs-Statistik (Admin): Heatmap + 30-Tage-Balken --- */
.usage-heatmap-wrap { overflow-x: auto; padding-bottom: 0.25rem; }
.usage-heatmap { display: flex; gap: 3px; min-width: max-content; }
.hm-days { display: flex; flex-direction: column; gap: 3px; margin-right: 4px; }
.hm-days span { height: 13px; line-height: 13px; font-size: 0.6rem; color: var(--bs-secondary-color); }
.hm-week { display: flex; flex-direction: column; gap: 3px; }
.hm-cell { width: 13px; height: 13px; border-radius: 3px; display: inline-block; background: var(--csu-border); }
.hm-future { visibility: hidden; }
.hm-0 { background: var(--csu-border); }
.hm-1 { background: rgba(0, 138, 197, 0.30); }
.hm-2 { background: rgba(0, 138, 197, 0.55); }
.hm-3 { background: rgba(0, 138, 197, 0.80); }
.hm-4 { background: var(--csu-orange); }
.usage-legend { display: inline-flex; align-items: center; gap: 3px; }
.usage-legend .hm-cell { width: 12px; height: 12px; }

.usage-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.usage-bar { flex: 1 1 0; min-width: 4px; height: 100%; display: flex; align-items: flex-end; }
.usage-bar > span { display: block; width: 100%; background: var(--csu-orange); border-radius: 3px 3px 0 0; }

/* --- Hilfe: „?"-Icon in Überschriften + Anker-Ziele auf der Hilfeseite --- */
.help-hint { color: var(--bs-secondary-color); text-decoration: none; font-size: 0.8em; margin-left: 0.4rem; opacity: 0.75; vertical-align: middle; }
.help-hint:hover, .help-hint:focus { color: var(--csu-orange); opacity: 1; }
.help-section { scroll-margin-top: 5rem; transition: box-shadow 0.4s ease; }
.help-section:target { box-shadow: 0 0 0 3px rgba(0, 138, 197, 0.55); }
.help-toc a { text-decoration: none; }

/* --- Live-Passwort-Prüfliste (Passwort ändern / Reset / Erst-Login) --- */
.password-policy-list { list-style: none; padding-left: 0; margin-bottom: 0; }
.password-policy-list li { color: var(--bs-secondary-color); line-height: 1.6; }
.password-policy-list li::before { content: "○"; display: inline-block; width: 1.3em; text-align: center; }
.password-policy-list li.is-ok { color: var(--bs-success); }
.password-policy-list li.is-ok::before { content: "✓"; font-weight: 700; }

/* === Kompakt-Modus (nur Portal) ====================================
   Umschalter im Profil-Menü (.dense-toggle, dense.js); Zustand pro Gerät
   in localStorage `csu-dense`, Klasse .dense wird schon im <head> gesetzt
   (kein Aufblitzen). Reduziert gezielt die spürbaren Abstände, ohne die
   Lesbarkeit zu opfern. Greift nur im Portal, weil dense.js nur dort läuft;
   der öffentliche Bereich behält seine großzügige Optik.
   Trick: wir überschreiben Bootstraps Spacer-/Gutter-Variablen — dann
   ziehen Karten und Grids automatisch mit, ohne jede Regel einzeln zu jagen.
   Die Card-Spacer MÜSSEN im .card-Scope gesetzt werden: Bootstrap deklariert
   `--bs-card-spacer-y:1rem` direkt auf `.card`, das würde einen Wert auf
   html.dense überstimmen. Auf `html.dense .card` gewinnt unser Wert. */
html.dense .card {
    --bs-card-spacer-y: 0.7rem;
    --bs-card-spacer-x: 0.85rem;
}

/* Grid-Abstände (Bento/Kachel-Reihen) etwas enger:
   die üppigen g-4 (1.5rem) auf ~1rem, g-3 (1rem) auf ~0.65rem. */
html.dense .g-4,
html.dense .gy-4 { --bs-gutter-y: 1rem; }
html.dense .g-4,
html.dense .gx-4 { --bs-gutter-x: 1rem; }
html.dense .g-3,
html.dense .gy-3 { --bs-gutter-y: 0.65rem; }
html.dense .g-3,
html.dense .gx-3 { --bs-gutter-x: 0.65rem; }

/* Tabellen: Zeilen dichter (Kassenbuch, Mitgliederliste …) */
html.dense .table > :not(caption) > * > * {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Feature-/Dashboard-Kacheln: weniger Innenabstand */
html.dense .feature-tile { padding: 1.1rem; }
html.dense .feature-tile .icon-bubble { margin-bottom: 0.5rem; }

/* Große vertikale Abstände zwischen Abschnitten zusammenziehen.
   Nur die üppigen Utility-Stufen (mb-4/mb-5, py-4/py-5) im Portal-Main. */
html.dense main .mb-5 { margin-bottom: 1.5rem !important; }
html.dense main .mb-4 { margin-bottom: 1rem !important; }
html.dense main .py-5 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
html.dense main .py-4 { padding-top: 1.1rem !important; padding-bottom: 1.1rem !important; }

/* Seiten-Überschrift und Karten-Titel etwas kompakter */
html.dense main h1 { margin-bottom: 0.65rem; }
html.dense .card .card-title { margin-bottom: 0.4rem; }

/* === XXL-Modus (Barrierefreiheit, nur Portal) ==========================
   Umschalter im Profil-Menü (.xxl-toggle, xxl.js); Zustand pro Gerät in
   localStorage `csu-xxl`, Klasse .xxl wird schon im <head> gesetzt.
   Zielgruppe: ältere Mitglieder — deutlich größere Schrift, kräftigere
   Kontraste und größere Klick-/Touchflächen. Der Kern ist die root-
   Schriftgröße: fast alles im Portal ist in rem gesetzt (Bootstrap +
   custom.css) und wächst dadurch automatisch mit — inklusive Abstände.
   Funktioniert in allen Design-Themen, weil nur Größen/Deckkraft
   verändert werden, keine Themen-Farben. */
html.xxl { font-size: 115%; }
html.xxl body { line-height: 1.65; }

/* Gedämpfte Texte kräftiger: --bs-secondary-color speist .text-muted,
   .form-text & Co. — color-mix folgt automatisch Hell/Dunkel. `html.xxl`
   gewinnt gegen Bootstraps :root und [data-bs-theme] (beide liegen auf
   demselben <html>-Element, unsere Spezifität ist höher). */
html.xxl {
    --bs-secondary-color: color-mix(in srgb, var(--bs-body-color) 82%, transparent);
    --bs-tertiary-color:  color-mix(in srgb, var(--bs-body-color) 66%, transparent);
}

/* Bedienelemente: größere Flächen (Fitts' Law, zittrige Finger) */
html.xxl .btn { padding: 0.6rem 1.1rem; }
html.xxl .btn-sm { padding: 0.45rem 0.85rem; font-size: 0.95rem; }
html.xxl .form-control, html.xxl .form-select { padding: 0.55rem 0.8rem; }
html.xxl .form-check-input { width: 1.4em; height: 1.4em; margin-top: 0.1em; }
html.xxl .form-switch .form-check-input { width: 2.6em; }
html.xxl .dropdown-item { padding-top: 0.55rem; padding-bottom: 0.55rem; }
html.xxl .portal-sidebar .nav-link { padding-top: 0.55rem; padding-bottom: 0.55rem; }
html.xxl .nav-tree-children .nav-link { padding-top: 0.45rem; padding-bottom: 0.45rem; }

/* Tabellen: luftigere Zeilen, damit Zahlen/Namen klar getrennt bleiben */
html.xxl .table > :not(caption) > * > * {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

/* Kleingedrucktes nicht unter die Lesbarkeitsgrenze fallen lassen */
html.xxl .small, html.xxl small { font-size: 0.92em; }

/* Mobile Tab-Bar: Beschriftung + Symbole mitwachsen lassen */
html.xxl .portal-tabbar .tab { font-size: 0.78rem; }
html.xxl .portal-tabbar .tico { font-size: 1.35rem; }

/* === Saisonale Akzente (partials/seasonal.php, Setting `seasonal_accents`) ===
   Dezente Deko-Ebene über den Hero-Bereichen: Schneeflocken im Dezember,
   pulsierender Sonnen-Glow im Juli. pointer-events:none — Klicks gehen
   durch; prefers-reduced-motion hält alles still. */
.has-season { position: relative; overflow: hidden; }
.season-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}
.season-flake {
    position: absolute;
    top: -12%;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
    animation: csu-snowfall linear infinite;
    will-change: top, transform;
}
@keyframes csu-snowfall {
    0%   { top: -12%; transform: translateX(0) rotate(0deg); opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translateX(9px) rotate(180deg); }
    92%  { opacity: 0.9; }
    100% { top: 112%; transform: translateX(-7px) rotate(360deg); opacity: 0; }
}
.season-sun {
    position: absolute;
    top: -70px;
    right: -50px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 205, 90, 0.55), rgba(0, 138, 197, 0.22) 45%, transparent 70%);
    animation: csu-sunpulse 5.5s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
/* Auf der öffentlichen Startseite sitzt die Sonnenkugel mittig — der
   saisonale Glow legt sich als warmes Pulsieren darüber (deutlich
   gedämpfter, die Hero-Sonne leuchtet ja schon von selbst). */
.hero .season-sun {
    left: 50%;
    right: auto;
    margin-left: -120px;
    top: -110px;
    background: radial-gradient(circle, rgba(255, 205, 90, 0.28), rgba(0, 138, 197, 0.1) 45%, transparent 70%);
}
@keyframes csu-sunpulse {
    from { transform: scale(1);    opacity: 0.65; }
    to   { transform: scale(1.22); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .season-flake, .season-sun { animation: none; }
    .season-flake { top: 20%; opacity: 0.5; }
}

/* === Skeleton-Loading beim Seitenwechsel (page-loader.js) ==============
   Overlay mit Platzhalter-Balken statt weißer Fläche, wenn eine
   Navigation spürbar dauert (> ~220 ms). Farben hängen an den Tokens
   und funktionieren dadurch in Hell/Dunkel und allen Design-Themen. */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: var(--csu-bg, var(--bs-body-bg));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.page-loader.on {
    opacity: 1;
    pointer-events: auto;
}
.page-loader-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 5.5rem 1.25rem 2rem;
}
.skel {
    position: relative;
    overflow: hidden;
    border-radius: var(--csu-radius-sm, 0.5rem);
    background: color-mix(in srgb, var(--csu-ink, var(--bs-body-color)) 9%, transparent);
}
.skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--csu-surface, #fff) 60%, transparent), transparent);
    animation: csu-shimmer 1.3s ease-in-out infinite;
}
.skel-title { height: 2.1rem; width: min(46%, 300px); margin-bottom: 0.9rem; }
.skel-line  { height: 1rem;   width: min(68%, 480px); margin-bottom: 1.6rem; }
.skel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.skel-card  { height: 9.5rem; border-radius: var(--csu-radius, 1rem); }
.skel-block { height: 14rem;  border-radius: var(--csu-radius, 1rem); }
@media (max-width: 767.98px) {
    .skel-grid { grid-template-columns: 1fr; }
    .skel-card { height: 6.5rem; }
}
@keyframes csu-shimmer {
    to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .skel::after { animation: none; }
}

/* === Mobile Kartenlisten: Tabellen unter 992px als gestapelte Karten =========
   Tabellen mit der Klasse .table-cards werden auf schmalen Bildschirmen nicht
   horizontal gescrollt, sondern Zeile für Zeile als Karte gestapelt. Jede Zelle
   trägt ein data-label; das erscheint links, der Wert rechts (WhatsApp-artige
   Zwei-Spalten-Zeile). Leere Zellen werden ausgeblendet — dadurch verschwinden
   im Kassenbuch automatisch die jeweils leere Einnahme- ODER Ausgabe-Spalte.
   Betrifft Kassenbuch, Beiträge, Inventar, Mitgliederliste. */
@media (max-width: 991.98px) {
    /* Der horizontale Scroll-Zwang entfällt im Kartenmodus */
    .table-cards.table-scroll,
    .table-cards { min-width: 0; }
    .card:has(> .table-responsive) .table-responsive:has(.table-cards) { overflow: visible; }

    /* Die UMGEBENDE Karte legt ihren Kartenlook ab, sonst liegt Karte auf Karte
       (im Dark-Modus fällt der fehlende Kontrast sonst unangenehm auf). Nur die
       einzelnen Zeilen erscheinen als Karten. */
    .card:has(> .table-responsive > .table-cards),
    .card:has(> .card-header + .table-responsive > .table-cards) {
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .table-cards thead { display: none; }

    .table-cards,
    .table-cards tbody,
    .table-cards tr,
    .table-cards td { display: block; width: auto; }

    /* Jede Datenzeile = eine Karte. Hebt sich über surface-2 (die hellere
       Flächenfarbe) klar vom Seitenhintergrund ab — im Light wie im Dark. */
    .table-cards tbody tr {
        border: 1px solid var(--csu-border);
        border-radius: var(--csu-radius-sm);
        padding: 0.6rem 0.85rem;
        margin: 0.6rem 0;
        background: var(--csu-surface);
        box-shadow: var(--csu-shadow);
    }
    [data-bs-theme="dark"] .table-cards tbody tr {
        background: var(--csu-surface-2);
        border-color: color-mix(in srgb, var(--csu-surface-2) 70%, #ffffff 30%);
    }
    /* Bootstrap-Zell-Rahmen/-Padding im Kartenmodus zurücknehmen.
       WICHTIG: Bootstrap malt auf jede td den Tabellen-Hintergrund
       (--bs-table-bg = Seitenfarbe) via background + inset-box-shadow.
       Das würde die hellere Zeilen-Karte übermalen (dunkle „Löcher" im
       Dark-Modus). Deshalb Zellen transparent + den box-shadow-Trick aus. */
    .table-cards tbody td {
        border: 0 !important;
        padding: 0.28rem 0 !important;
        text-align: left !important;
        white-space: normal !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Zelle = Label links / Wert rechts */
    .table-cards tbody td[data-label]::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 40%;
        padding-right: 0.75rem;
        font-weight: 600;
        color: var(--bs-secondary-color);
    }
    .table-cards tbody td[data-label] {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.5rem;
    }
    /* Wert-Text darf umbrechen und bündig rechts stehen */
    .table-cards tbody td[data-label] > * { text-align: right; }

    /* Leere Zellen (z. B. die nicht-befüllte Einnahme/Ausgabe-Spalte) weg.
       :empty greift, weil die betroffenen td dann wirklich keinen Inhalt haben. */
    .table-cards tbody td:empty { display: none; }

    /* Zellen ohne Label (Avatar, Aktionsspalte): volle Breite, keine ::before-Zeile.
       Aktionen ans Ende, Buttons dürfen sich breit machen. */
    .table-cards tbody td.cell-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        justify-content: flex-end;
        margin-top: 0.5rem;
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--csu-border) !important;
    }
    .table-cards tbody td.cell-actions form { margin: 0; }

    /* Deko-/Avatar-Zelle ohne data-label und ohne .cell-actions einfach zentriert */
    .table-cards tbody td.cell-avatar { text-align: center !important; }

    /* Summen-/Leerzeilen-Fußzeile bleibt einfache Zeile */
    .table-cards tfoot { display: block; }
    .table-cards tfoot tr { display: block; margin: 0.6rem 0.75rem; }
    .table-cards tfoot th { display: flex; justify-content: space-between; border: 0; }
}

/* === Befehlspalette (⌘/Strg+K) ============================================= */
.cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 1rem;
    background: rgba(7, 34, 40, 0.55);
    backdrop-filter: blur(3px);
}
body.cmdk-open { overflow: hidden; }

.cmdk-panel {
    width: 100%;
    max-width: 560px;
    background: var(--csu-surface);
    border: 1px solid var(--csu-border);
    border-radius: var(--csu-radius);
    box-shadow: var(--csu-shadow-hover);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.cmdk-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--csu-border);
}
.cmdk-search .bi-search { color: var(--bs-secondary-color); font-size: 1.05rem; }
.cmdk-search input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    color: var(--csu-ink);
    font-size: 1.05rem;
    outline: none;
}
.cmdk-esc {
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    border: 1px solid var(--csu-border);
    border-radius: var(--csu-radius-sm);
    padding: 0.1rem 0.4rem;
}

.cmdk-results {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    overflow-y: auto;
}
.cmdk-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--csu-radius-sm);
    cursor: pointer;
}
.cmdk-item .bi { color: var(--csu-orange-dark); width: 1.2rem; text-align: center; flex: 0 0 auto; }
.cmdk-item .cmdk-label { flex: 1 1 auto; font-weight: 600; }
.cmdk-item .cmdk-group { font-size: 0.8rem; color: var(--bs-secondary-color); }
.cmdk-item.is-active { background: var(--csu-orange-soft); }
.cmdk-item.is-active .cmdk-label { color: var(--csu-orange-dark); }

.cmdk-empty {
    padding: 1.2rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* ---------------------------------------------------------------------------
   Portal-Design-Feinschliff („App-Look Stufe 2"): verbindet das Portal optisch
   mit der überarbeiteten Landingpage — Icon-Kacheln in Kartenköpfen, farbige
   Bereichs-Icons in der Sidebar (gleiche Farbquelle wie Tab-Bar/„Mehr"-Sheet),
   sichtbarer Suchen-Knopf (Befehlspalette), sanfte Einblend-Animation.
--------------------------------------------------------------------------- */

/* Suchen-Knopf in der Kopfleiste: sieht aus wie ein Eingabefeld, öffnet die
   Befehlspalette (⌘/Strg+K). Nur Desktop; mobil ein schlichtes Lupen-Icon. */
.nav-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--csu-border);
    background: color-mix(in srgb, var(--csu-surface-2) 55%, var(--csu-surface));
    color: var(--bs-secondary-color);
    border-radius: var(--csu-radius-pill);
    padding: 0.4rem 0.6rem 0.4rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 600;
    min-width: 200px;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.nav-search-btn:hover {
    border-color: color-mix(in srgb, var(--csu-orange) 45%, var(--csu-border));
    color: var(--csu-ink);
    background: var(--csu-surface);
}
.nav-search-btn span { flex: 1 1 auto; text-align: left; }
.nav-search-btn kbd {
    font-size: 0.72rem;
    background: var(--csu-surface);
    color: var(--bs-secondary-color);
    border: 1px solid var(--csu-border);
    border-radius: 0.45rem;
    padding: 0.1rem 0.4rem;
}

/* Sidebar: Bereichs-Icons als getönte Farb-Chips (--nav-ico kommt aus
   portal_tab_color() im Layout — dieselbe Farbwelt wie die mobilen Kacheln).
   Aktiver Punkt: weißes Icon auf halbtransparentem Weiß. */
.portal-sidebar .nav-link {
    display: flex;
    align-items: center;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.portal-sidebar .nav-link .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    border-radius: 0.55rem;
    font-size: 0.92rem;
    background: color-mix(in srgb, var(--nav-ico, var(--csu-orange)) 14%, var(--csu-surface));
    color: var(--nav-ico, currentColor);
    transition: transform 0.15s ease;
}
.portal-sidebar .nav-link.active .bi {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.portal-sidebar .nav-link:hover:not(.active) .bi { transform: scale(1.1); }
/* Unterpunkte im Verwaltungs-Baum: schlichte Glyphen (ruhigere Hierarchie) */
.portal-sidebar .nav-tree-children .nav-link .bi {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    color: var(--bs-secondary-color);
}
.portal-sidebar .nav-tree-children .nav-link.active .bi { color: #fff; }

/* Kartenköpfe: das führende Icon wird zur kleinen abgerundeten Kachel im
   App-Stil (wie „Mehr"-Sheet und Hub-Kacheln) — gilt portalweit, rein CSS.
   --tile (optional, z. B. im Dashboard gesetzt) färbt die Kachel je Bereich;
   ohne --tile bleibt das Brand-Orange. */
body.portal .card-title > .bi:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.05rem;
    height: 2.05rem;
    flex: 0 0 auto;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--tile, var(--csu-orange)) 14%, var(--csu-surface));
    color: color-mix(in srgb, var(--tile, var(--csu-orange-dark)) 82%, var(--csu-ink)) !important; /* schlägt .text-csu */
    font-size: 1rem;
    vertical-align: middle;
    margin-top: -0.2rem;
}
[data-bs-theme="dark"] body.portal .card-title > .bi:first-child {
    color: color-mix(in srgb, var(--tile, var(--csu-orange-dark)) 70%, #fff) !important;
}
/* Auf der dunklen Hero-Karte („Nächste Sitzung") hell hinterlegen */
body.portal .dash-hero .card-title > .bi:first-child {
    background: rgba(255, 255, 255, 0.16);
    color: #ffd28a !important;
}

/* Begrüßung auf der Übersicht: Hero-Banner im Stil der Startseite —
   Petrol-Verlauf mit Sonnen-Glow, weißer Gruß + Datum, Info-Chips rechts. */
.dash-greet-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.4rem 1.6rem;
    border-radius: var(--csu-radius-lg);
    color: #fff;
    background:
        radial-gradient(circle at 88% -20%, rgba(255, 178, 84, 0.5), rgba(0, 138, 197, 0.18) 30%, transparent 55%),
        linear-gradient(150deg, var(--csu-petrol), #0f3a57 55%, #155f86);
    box-shadow: var(--csu-shadow);
}
.dash-greet-hero h1 { color: #fff; margin-bottom: 0.15rem; }
.dash-greet-hero .dash-date {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
}
.dash-greet-hero .dash-date .bi { color: #ffc06a; }
.dash-greet-hero .help-hint { color: rgba(255, 255, 255, 0.65); }
.dash-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.dash-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.9rem;
    border-radius: var(--csu-radius-pill);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.dash-chip:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    transform: translateY(-1px);
}
.dash-chip .bi { color: #ffc06a; }
/* Dunkles Design: kräftigeres Petrol mit weniger Orange-Schleier, sonst
   verschwimmt der Banner mit dem dunklen Seitenhintergrund (Olivstich). */
[data-bs-theme="dark"] .dash-greet-hero {
    background:
        radial-gradient(circle at 92% -30%, rgba(0, 138, 197, 0.22), rgba(0, 138, 197, 0.06) 28%, transparent 45%),
        linear-gradient(150deg, #0d3640, #124a54 60%, #17545f);
    border: 1px solid var(--csu-border);
}

/* Portal-Hintergrund: statt flacher Fläche zwei sehr dezente Farb-Glows
   (Orange oben rechts, Petrol oben links) — hell wie dunkel über Token. */
body.portal {
    background:
        radial-gradient(58rem 30rem at 88% -6%, color-mix(in srgb, var(--csu-orange) 7%, transparent), transparent 60%),
        radial-gradient(48rem 26rem at -8% -2%, color-mix(in srgb, #155f86 9%, transparent), transparent 55%),
        var(--csu-bg);
    background-attachment: fixed;
}
/* Dunkel: Orange-Glow fast raus (wirkt sonst oliv), dafür mehr Petrol-Tiefe */
[data-bs-theme="dark"] body.portal {
    background:
        radial-gradient(58rem 30rem at 88% -6%, rgba(0, 138, 197, 0.05), transparent 60%),
        radial-gradient(48rem 26rem at -8% -2%, rgba(21, 96, 110, 0.3), transparent 55%),
        var(--csu-bg);
    background-attachment: fixed;
}

/* Leerzustände (z. B. „keine Sitzung"): mittig, großes gedämpftes Icon */
.empty-state {
    text-align: center;
    padding: 1.6rem 0.5rem;
}
.empty-state .bi {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.35rem;
    color: color-mix(in srgb, var(--bs-secondary-color) 55%, transparent);
}

/* Sanfte, gestaffelte Einblend-Animation für Karten-Raster (Dashboard, Hubs).
   Nur bei erlaubter Bewegung; ab dem 9. Element ohne Verzögerung. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes csu-rise {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: none; }
    }
    body.portal .row.g-4 > [class*="col"] {
        animation: csu-rise 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    }
    body.portal .row.g-4 > [class*="col"]:nth-child(2) { animation-delay: 0.05s; }
    body.portal .row.g-4 > [class*="col"]:nth-child(3) { animation-delay: 0.10s; }
    body.portal .row.g-4 > [class*="col"]:nth-child(4) { animation-delay: 0.15s; }
    body.portal .row.g-4 > [class*="col"]:nth-child(5) { animation-delay: 0.20s; }
    body.portal .row.g-4 > [class*="col"]:nth-child(6) { animation-delay: 0.25s; }
    body.portal .row.g-4 > [class*="col"]:nth-child(7) { animation-delay: 0.30s; }
    body.portal .row.g-4 > [class*="col"]:nth-child(8) { animation-delay: 0.35s; }
}

/* Sekundär-Buttons („Zum Kalender", „Alle ansehen" …) als ruhige Ghost-Buttons
   in den Oberflächen-Tokens statt Bootstrap-Grau — hell wie dunkel stimmig. */
body.portal .btn-outline-secondary {
    --bs-btn-color: var(--csu-ink);
    --bs-btn-border-color: var(--csu-border);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--csu-ink);
    --bs-btn-hover-bg: var(--csu-surface-2);
    --bs-btn-hover-border-color: var(--csu-border);
    --bs-btn-active-color: var(--csu-ink);
    --bs-btn-active-bg: var(--csu-surface-2);
    --bs-btn-active-border-color: var(--csu-border);
}
body.portal .dash-hero .btn-outline-secondary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.45);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.6);
}

/* Listenzeilen in Karten: beim Überfahren dezent einrücken + orange tönen */
body.portal .list-group-item-action {
    transition: background-color 0.15s ease, padding-left 0.18s ease;
}
body.portal .list-group-item-action.px-0:hover {
    padding-left: 0.45rem !important; /* px-0 ist ein !important-Utility */
    background-color: color-mix(in srgb, var(--csu-orange) 6%, transparent);
}