/* Rahmen des Navigators (templates/base.html): Navigation, Profilmenue, Neuigkeiten, Toasts,
   Seitenlader, Handy-Leiste, Fusszeile, Bestaetigungsleiste und Einwilligungsfrage.
   Bis 23.10.2026 stand dieses CSS als Style-Block im {% block head %} von base.html; es wird dort
   weiter ueber den Block geladen, damit {{ super() }} in den Kind-Templates gleich wirkt.
   Gemeinsame Seitenbausteine (nv-*) stehen in static/css/app.css, auch die Toasts (.nv-toasts).
   Seit 23.10.2026: nur dunkler Modus, kein animierter Hintergrund, keine Partikel, Hover ohne Spruenge,
   sichtbarer Fokus (2 px Lila mit 2 px Abstand). */

:root {
    /* Brand Colors (unslop-ignore: Navigator-Lila; die Bootstrap-Verlaeufe fuer Erfolg, Warnung, Gefahr
       waren nirgends genutzt und sind seit 23.10.2026 weg) */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* unslop-ignore */

    /* Glass Morphism */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    /* Animations */
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* unslop-ignore: Inter ist die Hausschrift des Navigators */

    /* Spacing */
    --navbar-height: 70px;
    --content-padding: 2rem;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    transition: all var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

/* Grundflaeche: dunkler Verlauf, ruhig (data-bs-theme="dark" setzt base.html immer) */
[data-bs-theme="dark"] body {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
}

/* Mobile and iOS Safari specific fixes */
@media (max-width: 768px) {
    body {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
        background-attachment: scroll !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
    }

    html {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
    }
}

/* iOS Safari specific fix */
@supports (-webkit-touch-callout: none) {
    body {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
        background-attachment: scroll !important;
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
    }

    html {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
    }

    [data-bs-theme="dark"] body {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
        background-attachment: scroll !important;
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
    }
}

/* Bedeutungsfarben der Bootstrap-Klassen .text-success und .text-danger in der Palette (Gruen #4ade80, Rot
   #f87171, wie .nv-pos und .nv-neg). Bootstrap setzt die Farbe selbst mit !important aus --bs-success-rgb bzw.
   --bs-danger-rgb; die Variable am Element genuegt deshalb, ohne eigenes !important (bis 23.10.2026 hier
   #59e0a6 und #dc6150 mit !important). Neue Seiten nehmen .nv-pos, .nv-neg oder .nv-status. */
[data-bs-theme="dark"] .text-success { --bs-success-rgb: 74, 222, 128; }
[data-bs-theme="dark"] .text-danger { --bs-danger-rgb: 248, 113, 113; }

/* Glass Morphism Navbar */
.navbar-glass {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: all var(--transition-smooth);
    width: 100% !important;
    z-index: 1030;
    margin: 0 !important;
    border-radius: 0;
    padding: 0.75rem 0;
}

.navbar-glass .navbar-brand {
    border-radius: 10px;
}

.navbar-glass .navbar-brand img {
    max-width: 200px;
}

/* Abstand der Navigationspunkte ueber Bootstraps Variablen statt padding mit !important (bis 23.10.2026):
   gleiche Werte (0.5rem oben und unten, 1rem seitlich, auch im aufgeklappten Handy-Menue), aber die
   schmaleren Breiten unten koennen sie ohne !important verkleinern */
.navbar-glass { --bs-navbar-nav-link-padding-x: 1rem; }
.navbar-glass .navbar-nav { --bs-nav-link-padding-x: 1rem; --bs-nav-link-padding-y: 0.5rem; }

.navbar-glass .nav-link {
    position: relative;
    margin: 0 0.5rem;
    border-radius: 12px;
    transition: all var(--transition-smooth);
    font-weight: 500;
}

/* Breiten 992 bis 1439 px: mit allen acht Punkten (Admin) lief die Leiste bis 23.10.2026 waagrecht ueber
   (bei 1024 px 1.374 px breit, beim Nutzer 1.286 px). Hier ruecken die Punkte zusammen, unter 1200 px
   werden Logo und Profilknopf kleiner (der Name steht im geoeffneten Profilmenue). Ab 1440 px bleibt die
   Leiste, wie sie war. */
@media (min-width: 992px) and (max-width: 1439.98px) {
    .navbar-glass { --bs-navbar-nav-link-padding-x: 0.5rem; }
    .navbar-glass .nav-link { margin: 0 2px; }
    .navbar-glass .pd-toggle-name { max-width: 120px; }
}

/* ab 1440 px: lange Namen (ueber 140 px) mit Auslassung, sonst laeuft die Admin-Leiste bei genau 1440 px
   ueber; kurze Namen wie bisher */
@media (min-width: 1440px) {
    .navbar-glass .pd-toggle-name { max-width: 140px; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-glass { --bs-navbar-nav-link-padding-x: 0.375rem; }
    .navbar-glass .navbar-brand { margin-right: 8px; }
    .navbar-glass .navbar-brand img { max-width: 132px; }
    .navbar-glass .pd-toggle-name { display: none; }
}

.navbar-glass .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-gradient); /* unslop-ignore: Navigator-Lila als leichte Flaeche fuer Hover und Auswahl */
    border-radius: 12px;
    opacity: 0;
    transition: all var(--transition-smooth);
    z-index: -1;
}

.navbar-glass .nav-link:hover::before,
.navbar-glass .nav-link.active::before {
    opacity: 0.2;
}

.navbar-glass .nav-link:hover {
    color: white !important;
}

/* Ungelesene Support-Antworten am Navigationspunkt (Zaehler wie bei den Neuigkeiten) */
.nav-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--notify-accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* Besucher ohne Login: Logo links, Anmelden und Registrieren rechts */
.nav-gast {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.nav-gast__kurz { display: none; }

/* Profilmenue (19.10.2026): Flaeche wie die Popover im Dashboard (dunkles Glas, 1px heller Rand,
   weicher Schatten), Kopf mit Avatar, Name und Paket, Zeilen mit 10px Radius, Symbole gedaempft
   weiss, Hover nur heller Hintergrund. Gilt in beiden Themes, das Dashboard ist ebenfalls dunkel.
   Oeffnen 120 ms ueber opacity und translate (Bootstrap positioniert Navbar-Dropdowns statisch). */
.pd-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-toggle.dropdown-toggle::after {
    display: none;
}

.pd-toggle-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-chevron {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    transition: transform 120ms ease;
}

.pd-toggle[aria-expanded="true"] .pd-chevron {
    transform: rotate(180deg);
}

.pd-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.pd-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #2c3040; /* opak in der Kreisfarbe: ein PNG mit transparentem Hintergrund liesse sonst die Initialen durchscheinen (B11, 22.10.2026) */
}

.pd-initialen {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}

/* Mit geladenem Bild bleiben die Initialen im DOM, aber unsichtbar; onerror am Bild nimmt die Klasse wieder weg */
.pd-avatar--bild .pd-initialen {
    visibility: hidden;
}

.profile-dropdown {
    min-width: 264px;
    padding: 6px;
    margin-top: 0.5rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* unslop-ignore: Navigator-Schrift */
    font-size: 14px;
    background: rgba(24, 28, 40, 0.98);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.profile-dropdown.show,
.notify-dropdown.show {
    animation: pdOpen 120ms ease-out;
}

@keyframes pdOpen {
    from { opacity: 0; translate: 0 -4px; }
    to { opacity: 1; translate: 0 0; }
}

/* Kopf ist seit 22.10.2026 der Link auf /mein-konto (Wunsch Marko, statt des Eintrags "Konto verwalten"):
   als dropdown-item bekommt er Hover- und Fokus-Flaeche und die Pfeiltasten-Navigation von Bootstrap */
.profile-dropdown .pd-head {
    padding: 8px 10px;
    white-space: normal;
}

.profile-dropdown .pd-head:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.45);
    outline-offset: -2px;
}

.profile-dropdown .pd-head-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-dropdown .pd-name {
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown .pd-paket {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
}

.profile-dropdown .pd-group {
    padding: 6px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.profile-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 0;
    border-radius: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.profile-dropdown .dropdown-item:hover,
.profile-dropdown .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.profile-dropdown .dropdown-item i {
    width: 18px;
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
}

.profile-dropdown .dropdown-item:hover i,
.profile-dropdown .dropdown-item:focus i {
    color: rgba(255, 255, 255, 0.85);
}

.profile-dropdown .dropdown-item.pd-logout,
.profile-dropdown .dropdown-item.pd-logout i {
    color: #f87171;
}

.profile-dropdown .dropdown-item.pd-logout:hover,
.profile-dropdown .dropdown-item.pd-logout:focus {
    background: transparent;
    color: #fca5a5;
}

.profile-dropdown .dropdown-item.pd-logout:hover i,
.profile-dropdown .dropdown-item.pd-logout:focus i {
    color: #fca5a5;
}

.profile-dropdown .dropdown-divider {
    margin: 6px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .profile-dropdown.show,
    .notify-dropdown.show {
        animation: none;
    }

    .pd-chevron {
        transition: none;
    }
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    padding: 0.5rem 0;
    z-index: 1020;
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }

    .mobile-nav-item {
        flex: 1;
        text-align: center;
        padding: 0.5rem;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        transition: all var(--transition-fast);
        border-radius: 10px;
        margin: 0 0.25rem;
    }

    .mobile-nav-item:hover,
    .mobile-nav-item.active {
        color: white;
        background: rgba(102, 126, 234, 0.2);
    }

    .mobile-nav-item i {
        display: block;
        font-size: 1.2rem;
        margin-bottom: 0.25rem;
    }

    .mobile-nav-item span {
        font-size: 0.8rem;
        font-weight: 500;
    }
}

/* Loading States */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
}

.page-loader.active {
    opacity: 1;
    visibility: visible;
}

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(102, 126, 234, 0.3);
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Enhanced Footer */
.footer-enhanced {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    padding: 2.5rem 0 2rem;
    margin-top: auto;
    text-align: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem 1.75rem;
    margin-bottom: 1.25rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: #fff;
}

/* Discord-Knopf: normaler Knopf, Discord-Blau nur als Flaeche dieses einen Knopfs (Markenfarbe von Discord) */
.footer-discord-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    background: #5865F2; /* unslop-ignore: Discord-Markenfarbe, nur dieser Knopf */
    color: #fff !important;
    font-weight: 600;
    font-size: 0.9rem !important;
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.footer-discord-btn:hover {
    background: #4752c4;
    color: #fff !important;
}

/* Begruessung neuer Mitglieder mit Hinweis auf den Discord-Server (Modal, Haut .nv-modal aus app.css) */
.discord-welcome .modal-dialog {
    max-width: 420px;
}

.discord-welcome .modal-body {
    position: relative;
    padding: 32px 28px 20px;
    text-align: center;
}

.discord-welcome__close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.discord-welcome__icon {
    display: block;
    margin: 0 auto 16px;
    opacity: 0.9;
}

.discord-welcome__title {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

.discord-welcome__text {
    margin: 0 0 24px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}

.discord-welcome__cta {
    width: 100%;
    margin-bottom: 8px;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin: 0;
}

/* Mobil: Logo und Kopfleiste kompakt (das 200px-Logo machte die Leiste 127px hoch) */
@media (max-width: 768px) {
    .navbar-glass { padding: 0.35rem 0; }
    .navbar-glass .navbar-brand img { max-width: 110px !important; }
    .navbar-glass .navbar-toggler { padding: 0.45rem 0.7rem; }
    .nav-gast .nv-btn { padding: 0 12px; }
}

/* Mobile Footer adjustment - add padding to avoid overlap with bottom nav */
@media (max-width: 768px) {
    .footer-enhanced {
        padding-bottom: 6rem;
        /* Extra space for mobile bottom nav */
        margin-bottom: 0;
    }
}

/* Die Navbar liegt im normalen Fluss: der Inhalt folgt ihr direkt,
   kein JS-berechneter Offset (der maß sonst das aufgeklappte Burger-Menü mit) */
#main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
    margin-top: 0 !important;
}

/* Mobile: Seite darf nie horizontal pannen; breite Inhalte (Tabellen etc.)
   scrollen in ihren eigenen Containern */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
}

/* Sichtbarer Fokus nur bei Tastaturbedienung: 2 px Navigator-Lila mit 2 px Abstand */
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-brand:focus-visible,
.navbar-toggler:focus-visible,
.notify-bell:focus-visible,
.mobile-nav-item:focus-visible,
.footer-links a:focus-visible,
.footer-copyright a:focus-visible,
.ec-confirm a:focus-visible,
.ec-confirm button:focus-visible,
.ec-prompt button:focus-visible {
    outline: 2px solid #8b7cf6; /* unslop-ignore: Navigator-Lila */
    outline-offset: 2px;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.dropdown-item:focus-visible {
    outline: 2px solid #8b7cf6; /* unslop-ignore: Navigator-Lila */
    outline-offset: -2px;
}

/* Reduced Motion Support: verbleibende Animationen und Uebergaenge aus */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print Styles */
@media print {

    .navbar-glass,
    .mobile-bottom-nav,
    .nv-toasts {
        display: none !important;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(139, 124, 246, 0.45); /* unslop-ignore: Navigator-Lila */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 124, 246, 0.65); /* unslop-ignore: Navigator-Lila */
}

/* Notification Bell (Announcements) - Design-Import claude.ai/design 23.08.2026 */
:root { --notify-accent: #667EEA; }
.notify-bell {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 42px; border-radius: 10px;
    border: none; background: transparent; color: #fff;
    font-size: 1.15rem; padding: 0 !important; margin: 0 !important;
    transition: background .14s ease, color .14s ease;
}
.notify-bell:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.notify-bell.show, .notify-bell[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); color: #fff; }
.notify-bell.has-unread #notifyBellIcon { animation: notifyRing 1.2s ease-in-out 1; display: inline-block; }
#notifyCountBadge {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
    padding: 0 5px; box-sizing: border-box; border-radius: 9px;
    background: var(--notify-accent); border: 2px solid #101A31; color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 14px; text-align: center; white-space: nowrap;
}
@keyframes notifyRing {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-12deg); }
    60% { transform: rotate(8deg); }
    80% { transform: rotate(-4deg); }
}
/* Neuigkeiten im Rahmen des Profilmenues (Flaeche, Rand, Radius, Schatten), Kategorie als ruhiger Text
   statt Etikett, ungelesen nur ueber Punkt und Schriftgewicht. */
.notify-dropdown {
    width: 392px; padding: 0; overflow: hidden;
    background: rgba(24, 28, 40, 0.98); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); backdrop-filter: blur(16px);
}
.notify-header {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #fff;
}
.notify-header .bi { font-size: 1rem; color: rgba(255, 255, 255, 0.55); }
.notify-header .notify-heading { font-size: 14.5px; font-weight: 600; }
#notifyUnreadPill { font-size: 12.5px; font-weight: 500; color: #b8adff; } /* unslop-ignore: Navigator-Lila */
#notifyMarkAll {
    margin-left: auto; padding: 5px 9px; border: none; border-radius: 8px; background: transparent;
    font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.6); cursor: pointer; white-space: nowrap;
    transition: background .14s ease, color .14s ease;
}
#notifyMarkAll:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.notify-list {
    max-height: 356px; overflow-y: auto; padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
}
.notify-item {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
    border-radius: 8px; background: transparent; color: inherit; text-decoration: none;
    cursor: pointer; text-align: left; transition: background .14s ease;
}
.notify-item:hover { background: rgba(255, 255, 255, 0.08); color: inherit; }
.notify-item.unread { background: rgba(255, 255, 255, 0.04); }
.notify-item.unread:hover { background: rgba(255, 255, 255, 0.08); }
.notify-item .notify-marker {
    flex-shrink: 0; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: transparent;
}
.notify-item.unread .notify-marker { background: var(--notify-accent); }
.notify-item .notify-main { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.notify-item .notify-toprow { display: flex; align-items: baseline; gap: 8px; }
.notify-item .notify-tag { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.notify-item .notify-date { margin-left: auto; font-size: 12px; color: rgba(255, 255, 255, 0.45); white-space: nowrap; }
.notify-item .notify-title { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.notify-item.unread .notify-title { font-weight: 600; color: #fff; }
.notify-item .notify-summary { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.6); }
.notify-empty { text-align: center; padding: 24px 12px; font-size: 13px; color: rgba(255, 255, 255, 0.5); }
.notify-more {
    display: block; text-align: center; padding: 8px 12px; border-radius: 8px;
    font-size: 12.5px; font-weight: 500; color: #b8adff; text-decoration: none; /* unslop-ignore: Navigator-Lila */
    transition: background .14s ease;
}
.notify-more:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.notify-footer { padding: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.notify-footer .notify-all-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06); font-size: 0.88rem; font-weight: 500; color: rgba(255, 255, 255, 0.9);
    text-decoration: none; transition: background .14s ease;
}
.notify-footer .notify-all-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.notify-footer .notify-all-btn .bi { color: rgba(255, 255, 255, 0.55); }
@media (max-width: 768px) {
    .notify-dropdown {
        position: fixed !important; left: 50% !important; transform: translateX(-50%) !important;
        width: calc(100vw - 20px) !important; max-width: 392px !important; top: 80px !important;
    }
}


/* Leiste bis zur E-Mail-Bestaetigung (stand bis 23.10.2026 inline in base.html): seit 23.10.2026 einzeilig
   am Desktop (40 px, hoechstens 56 px), Gelb nur als Symbol und Rahmen; auf dem Handy darf sie umbrechen */
.ec-confirm { max-width: 1100px; min-height: 40px; max-height: 56px; margin: 12px auto 0; padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .06); display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; font-size: .875rem; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.ec-confirm > .bi { flex: 0 0 auto; color: #fbbf24; }
.ec-confirm__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-confirm__aktionen { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ec-confirm form { margin: 0; display: inline; }
.ec-confirm button, .ec-confirm a { background: transparent; border: 0; padding: 0; color: #fff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
.ec-confirm .sep { color: rgba(255, 255, 255, .4); }
@media (max-width: 640px) {
    .ec-confirm { max-height: none; margin: 8px 12px 0; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; }
    .ec-confirm__text { flex: 1 1 calc(100% - 26px); white-space: normal; overflow-wrap: anywhere; }
    .ec-confirm__aktionen { padding-left: 24px; }
}

/* Einmalige Frage nach Marketing-E-Mails (stand bis 23.10.2026 inline in base.html) */
.ec-prompt { max-width: 1100px; margin: 12px auto 0; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(139, 124, 246, 0.4); background: rgba(139, 124, 246, 0.08); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ec-prompt p { flex: 1 1 320px; margin: 0; font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.92) !important; }
.ec-prompt p strong { color: #fff; }
.ec-prompt form { display: flex; gap: 8px; margin: 0; }
.ec-prompt button { min-height: 44px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.ec-yes { background: rgba(139, 124, 246, 0.28); border: 1px solid rgba(139, 124, 246, 0.6); color: #fff; } /* unslop-ignore: Navigator-Lila, Hauptknopf wie .nv-btn--primary (voller Ton haette 3,3:1 Kontrast) */
.ec-yes:hover { background: rgba(139, 124, 246, 0.42); border-color: rgba(139, 124, 246, 0.9); } /* unslop-ignore */
.ec-no:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ec-no { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.9); }
@media (max-width: 640px) { .ec-prompt { margin: 10px 12px 0; } .ec-prompt form { width: 100%; } .ec-prompt button { flex: 1; } }

/* Besucher ohne Login auf schmalen Bildschirmen: kurzer Text im Registrieren-Knopf */
@media (max-width: 420px) {
    .nav-gast__lang { display: none; }
    .nav-gast__kurz { display: inline; }
}