/* ===== MARKEN-SCHRIFT (fuer die grosse "Erweiterte Antwort"-Überschrift,
       siehe .post-erweiterte-ueberschrift-text in thema/inhalt.php) - global
       hier deklariert (nicht z.B. nur in thema/inhalt.php), weil dieselbe
       Klasse auch im per AJAX nachgeladenen Beitrags-Fragment (ajax/
       beitrag_html.php) vorkommt, das kein eigenes <head> mitbringt und sich
       komplett auf bereits geladenes CSS der Seite verlaesst. font-display:
       swap statt block, damit der Titel-Text bis zum Laden der Schriftdatei
       sofort in der Fallback-Schrift sichtbar ist (kein FOIT). */
    @font-face {
        font-family: 'RotweissSans';
        src: url('/fonts/ROTWEISS_Sans-Bold.otf') format('opentype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }
    /* ===== YOUTUBE-EMBED IM PLAYER-LOOK (system/bbcode.php: __bbYoutubeEmbedHtml) =====
       Der grosse Play-Button selbst nutzt bewusst die schon global vorhandene
       .eplayer-bigplay-Klasse aus rweVideoPlayerCSS() oben (gleiches Aussehen,
       keine doppelte Pflege) - hier nur der Wrapper/Thumbnail-Teil, den es
       fuer YouTube-Embeds zusaetzlich braucht. */
    .eplayer-yt {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        background: #7a0606;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(167,9,9,0.5), 0 0 34px rgba(167,9,9,0.4);
    }
    .eplayer-yt .eplayer-yt-media {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        height: 0;
        background-size: cover;
        background-position: center;
        background-color: #000;
        cursor: pointer;
    }
    .eplayer-yt .eplayer-yt-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .eplayer-yt-badge {
        display: none !important; /* keine Plattform-Kennzeichnung (YouTube/TikTok ...) auf Vorschaubildern */
        position: absolute; top: 10px; right: 10px; z-index: 2;
        color: #fff; font-size: 1.2rem;
        filter: drop-shadow(0 1px 5px rgba(0,0,0,0.75));
        pointer-events: none;
    }

    /* ===== ADMIN: BANNER FÜR WARTENDE REGISTRIERUNGEN ===== */
    .admin-registrierung-banner {
        background: #fff3cd;
        color: #856404;
        border-bottom: 2px solid #f0ad4e;
        padding: 0.7rem 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
        flex-wrap: wrap;
        font-size: 0.9rem;
        text-align: center;
    }
    .admin-registrierung-banner a.banner-link {
        color: #856404;
        font-weight: 700;
        text-decoration: underline;
    }
    .admin-registrierung-banner .banner-close {
        background: none;
        border: none;
        color: #856404;
        font-size: 1.1rem;
        cursor: pointer;
        line-height: 1;
        padding: 0.2rem 0.4rem;
    }
    /* Glow: Konto frisch freigeschaltet */
    .freigeschaltet-glow {
        background: linear-gradient(90deg, #14833b, #1fae55); color: #fff; border-bottom: 2px solid #0e6a2f;
        padding: 0.8rem 1rem; display: flex; align-items: center; justify-content: center; gap: 0.8rem;
        flex-wrap: wrap; font-size: 0.95rem; font-weight: 600; text-align: center;
        animation: freiGlow 1.8s ease-in-out infinite;
    }
    .freigeschaltet-glow .banner-close { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 0.2rem 0.4rem; }
    @keyframes freiGlow {
        0%, 100% { box-shadow: 0 0 6px 1px rgba(46,204,113,.55), 0 0 0 rgba(46,204,113,0); }
        50% { box-shadow: 0 0 22px 6px rgba(46,204,113,.85), 0 0 40px 10px rgba(46,204,113,.35); }
    }
    @media (prefers-reduced-motion: reduce) { .freigeschaltet-glow { animation: none; box-shadow: 0 0 14px 3px rgba(46,204,113,.7); } }
/* ===== PWA STANDALONE: Aussparung für Statusleiste (Uhr/Akku) ===== */
/* In der installierten Web-App gibt es keine Browser-Chrome mehr, die die
   Statusleiste verdrängt - ohne diese Variable rendert unser fixierter Header
   direkt bei y=0 UNTER der Statusleiste, wodurch Hamburger/Suche/Glocke am
   oberen Rand unbedienbar werden. In normalen Browser-Tabs ist der Wert 0px,
   wirkt sich dort also nicht aus. */
:root { --safe-top: env(safe-area-inset-top, 0px); }

/* ===== VERIFIZIERUNGS-BADGE (global, überall wo Benutzernamen erscheinen) =====
   Optik kommt komplett aus dem inline-SVG (system/verifizierung_funktionen.php
   verifiziertBadge() / window.RWE_VERIFIED_BADGE_SVG) - hier nur Größe/Ausrichtung. */
.verifiziert-badge { display: inline-flex; width: 0.95em; height: 0.95em; margin-left: 3px; vertical-align: middle; }
.verifiziert-badge svg { width: 100%; height: 100%; display: block; }

        /* ===== RESET ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Verhindert horizontales Wackeln/Verschieben beim Wischen auf Mobile,
           falls irgendein Kind-Element (z.B. negative Margins, lange Wörter)
           minimal breiter als der Viewport wird - fängt das global ab, statt
           jede einzelne Stelle einzeln jagen zu müssen.
           overscroll-behavior-x: none unterbindet zusätzlich den seitlichen
           Rubber-Band-/Wisch-Effekt (Seite lässt sich nicht mehr seitlich
           "wegziehen" und federt nicht zurück) und die versehentliche
           Zurück-Wisch-Geste - Pinch-Zoom bleibt davon unberuehrt. */
        html, body {
            overflow-x: hidden;
            max-width: 100%;
            overscroll-behavior-x: none;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica', Arial, sans-serif;
            background: #f5f5f5;
            line-height: 1.6;
            padding-top: calc(60px + var(--safe-top));
            -webkit-text-size-adjust: 100%;
        }

        /* ===== HEADER ===== */
        .kopf {
            background: #a70909;
            color: white;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            height: calc(60px + var(--safe-top));
            padding-top: var(--safe-top);
            display: flex;
            align-items: center;
            padding-left: 12px;
            padding-right: 12px;
        }
        
        .kopf-inhalt {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        
        /* ===== LOGO ===== */
        .logo {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }
        
        .logo a {
            display: block;
            line-height: 0;
        }
        
        .logo img {
            height: 40px;
            width: auto;
            display: block;
            transition: opacity 0.2s;
        }
        
        .logo img:hover {
            opacity: 0.9;
        }
        
        /* ===== RECHTE GRUPPE ===== */
        .rechte-gruppe {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        
        /* ===== BENUTZER-MENU ===== */
        .benutzer-menu {
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }
        
        .benutzer-name {
            background: none;
            border: none;
            color: white;
            font-weight: 600;
            font-size: 0.9rem;
            font-family: inherit;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            max-width: 150px;
            text-decoration: none;
            cursor: pointer;
            transition: opacity 0.15s;
            padding: 0;
        }
        .benutzer-name:hover { opacity: 0.85; color: white; text-decoration: none; }
        .benutzer-name-text {
            /* Nur der Name selbst wird abgeschnitten (mit "…") - vorher lag
               overflow:hidden/text-overflow direkt auf dem Flex-Container
               .benutzer-name, wodurch bei wenig Platz (Mobile) auch Avatar
               und Chevron hart mit abgeschnitten wurden statt nur der Text. */
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .benutzer-name-chevron {
            font-size: 0.6rem;
            opacity: 0.75;
            transition: transform 0.18s ease;
            flex-shrink: 0;
        }
        .benutzer-name[aria-expanded="true"] .benutzer-name-chevron { transform: rotate(180deg); }

        /* ===== KONTO-MENÜ (Dropdown unter dem Benutzernamen) =====
           Rechtsbuendig statt mittig wie .glocke-panel, da .benutzer-menu
           am rechten Rand sitzt - sonst würde das Panel über den
           Viewport-Rand hinausragen. */
        .konto-menu-panel {
            position: fixed; top: calc(60px + var(--safe-top)); right: 12px;
            width: 260px; max-width: calc(100vw - 24px);
            background: #fff; z-index: 1001;
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
            border-radius: 12px;
            max-height: min(75vh, 520px);
            overflow-y: auto;
            transform: translateY(-8px);
            opacity: 0; pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
        }
        .konto-menu-panel.offen { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .konto-menu-kopf {
            display: flex; align-items: center; gap: 10px;
            padding: 14px 16px; border-bottom: 1px solid #f0e6e6;
        }
        .konto-menu-kopf .benutzer-avatar { width: 38px; height: 38px; font-size: 0.9rem; }
        .konto-menu-kopf-name { font-weight: 700; color: #333; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .konto-menu-liste { padding: 6px; }
        .konto-menu-item {
            display: flex; align-items: center; gap: 10px;
            padding: 9px 10px; border-radius: 8px;
            color: #333; text-decoration: none !important;
            font-size: 0.87rem; font-weight: 500;
        }
        .konto-menu-item:hover { background: #fdeceb; color: #a70909; }
        .konto-menu-item i { width: 18px; text-align: center; color: #a70909; font-size: 0.85rem; flex-shrink: 0; }
        .konto-menu-item .konto-menu-count {
            margin-left: auto; background: #f0e6e6; color: #a70909;
            font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 10px;
        }
        .konto-menu-trenner { height: 1px; background: #f0e6e6; margin: 6px 4px; }
        .konto-menu-item.konto-menu-logout { color: #a70909; }
        .konto-menu-item.konto-menu-logout i { color: #a70909; }

        .benutzer-avatar {
            width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.65rem; font-weight: 700; color: #fff;
            overflow: hidden; position: relative;
        }
        .benutzer-avatar img {
            width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
            position: absolute; top: 0; left: 0;
        }
        
        .btn-header {
            background: rgba(255,255,255,0.15);
            padding: 5px 12px;
            border-radius: 6px;
            color: white;
            text-decoration: none;
            font-size: 0.8rem;
            transition: background 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            border: none;
            cursor: pointer;
            min-height: 30px;
            line-height: 1;
            flex-shrink: 0;
        }
        
        .btn-header:hover {
            background: rgba(255,255,255,0.25);
            text-decoration: none;
            color: white;
        }
        
        .btn-header i {
            font-size: 0.8rem;
        }
        
        /* ===== HAMBURGER ===== */
        .hamburger {
            background: rgba(255,255,255,0.1);
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            padding: 5px 10px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            border-radius: 6px;
            min-height: 34px;
            min-width: 34px;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .hamburger:hover {
            background: rgba(255,255,255,0.2);
        }
        
        .hamburger:active {
            transform: scale(0.92);
        }

        /* Ab hier: sobald die Mobile-Footer-Nav (system/footer.php,
           gleicher Breakpoint 768px) sichtbar ist, übernehmen Glocke/PN/
           Mehr dort die Aufgabe von Glocke-Icon, PN-Menüpunkt und Hamburger
           im Header - um Dopplung zu vermeiden werden diese hier ausgeblendet.
           Nur bei eingeloggten Nutzern gesetzt (Gäste haben kein "Mehr" im
           Footer und behalten daher ihren vollen Header). */
        @media (max-width: 768px) {
            .hamburger-mobil-versteckt,
            .glocke-mobil-versteckt,
            .pn-mobil-versteckt,
            .nav-mobil-pn-versteckt {
                display: none !important;
            }
        }

        /* ===== SUCHE (HEADER-TRIGGER + LIVE-PANEL) ===== */
        .such-trigger {
            position: relative;
            background: rgba(255,255,255,0.1);
            border: none;
            color: white;
            font-size: 1.1rem;
            cursor: pointer;
            padding: 5px 10px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            border-radius: 6px;
            min-height: 34px;
            min-width: 34px;
            justify-content: center;
            flex-shrink: 0;
        }
        .such-trigger:hover { background: rgba(255,255,255,0.2); }
        .such-trigger.aktiv { background: rgba(255,255,255,0.28); }
        .such-trigger:active { transform: scale(0.92); }
        a.such-trigger { text-decoration: none; }
        .online-trigger .online-dot { color:#22c55e; font-size:11px; animation: onlineDotPuls 2s ease-in-out infinite; }
        @keyframes onlineDotPuls { 0%,100% { opacity:1; } 50% { opacity:.5; } }

        /* ===== SCREENSHOT-MODUS (nur Admin) ===== */
        /* Blendet ALLE Elemente mit der Klasse "rwe-admin-ui" auf der
           aktuellen Seite rein visuell aus (Toggle-Button siehe .kopf-mitte,
           Zustand in localStorage "rwe_admin_screenshot_modus"). Betrifft
           nur Anzeige, keine Rechte/Funktionen. */
        .rwe-screenshot-modus .rwe-admin-ui { display: none !important; }
        .screenshot-modus-trigger.ist-aktiv { background: rgba(34,197,94,0.35); }
        .screenshot-modus-trigger.ist-aktiv i { color: #22c55e; }

        /* ================================================================
           POPUP / MODAL - generische Hülle, site-weit (auch von index.php's
           eigenen Modals genutzt: Forum-Auswahl, Feed-Filter)
           ================================================================ */
        .forum-modal-overlay {
            position: fixed; top:0; left:0; right:0; bottom:0;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
            z-index: 99999; display: none;
            align-items: center; justify-content: center;
        }
        .forum-modal-overlay.active { display: flex; }
        .forum-modal {
            background: #fff; border-radius: 16px;
            max-width: 560px; width: 95%; max-height: 85vh;
            overflow: hidden; box-shadow: 0 25px 80px rgba(0,0,0,0.4);
            display: flex; flex-direction: column;
            animation: modalIn 0.25s ease;
        }
        @keyframes modalIn {
            from { opacity:0; transform: scale(0.95) translateY(10px); }
            to   { opacity:1; transform: scale(1)    translateY(0); }
        }
        .forum-modal-header {
            padding: 18px 24px; border-bottom: 1px solid #e5dfdf;
            display: flex; justify-content: space-between; align-items: center;
            background: #faf8f8; flex-shrink: 0;
        }
        .forum-modal-header h3 { margin:0; font-size:1.1rem; color:#4a3a3a; display:flex; align-items:center; gap:8px; }
        .forum-modal-header h3 i { color:#a70909; }
        .forum-modal-close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:#b0a8a8; padding:0 4px; transition:color 0.2s; }
        .forum-modal-close:hover { color:#4a3a3a; }
        .forum-modal-body { padding:20px 24px; overflow-y:auto; flex:1; }
        @media (max-width: 480px) {
            .forum-modal-body   { padding:14px 16px; }
            .forum-modal-header { padding:14px 16px; }
        }

        /* ===== USER-ONLINE PANEL (Admin) ===== */
        .online-panel-loading { text-align:center; color:#8a7f7f; padding:24px; }
        .online-section-title {
            font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing:.04em;
            color:#993234; margin: 4px 0 8px; display:flex; align-items:center; gap:8px;
        }
        .online-section-title .cnt { background:#993234; color:#fff; border-radius:10px; padding:0 8px; font-size:11px; }
        .online-section + .online-section { margin-top: 18px; }
        .online-row {
            display:flex; align-items:center; gap:10px;
            padding:8px 6px; border-bottom:1px solid #f0e6e6;
        }
        .online-row:last-child { border-bottom:none; }
        .online-av {
            width:34px; height:34px; border-radius:50%; flex-shrink:0;
            display:flex; align-items:center; justify-content:center;
            font-size:12px; font-weight:700; color:#fff; overflow:hidden;
        }
        .online-av img { width:34px; height:34px; object-fit:cover; border-radius:50%; }
        .online-info { flex:1; min-width:0; }
        .online-name { font-weight:700; color:#3a2f2f; font-size:14px; }
        .online-name .guest-badge { background:#e8e0e0; color:#7a6f6f; font-size:10px; font-weight:700; padding:1px 6px; border-radius:6px; margin-left:6px; }
        .online-meta { font-size:12px; color:#8a7f7f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .online-meta a { color:#993234 !important; }
        .online-meta.online-geo { margin-top:2px; color:#a99; }
        .online-when { font-size:11px; color:#a99; flex-shrink:0; white-space:nowrap; }
        .online-empty { color:#a99; font-size:13px; padding:6px; }
        .online-sim-note { margin-top:16px; font-size:12px; color:#8a7f7f; border-top:1px dashed #e5d5d5; padding-top:10px; }
        .online-fake-offline-liste { max-height: 260px; overflow-y: auto; }
        .online-row-fake-offline { padding: 6px 6px; }
        .btn-fake-online-setzen {
            flex-shrink: 0; background:#f0e6e6; color:#993234; border:none; border-radius:8px;
            padding: 5px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
            display:flex; align-items:center; gap:5px; white-space:nowrap;
            transition: background .15s;
        }
        .btn-fake-online-setzen:hover { background:#e5d5d5; }
        .btn-fake-online-setzen:disabled { opacity:.6; cursor:default; }
        .btn-fake-online-setzen.is-online { background:#dff5e3; color:#1e7e34; }
        .online-name .admin-badge {
            background:#1f2d3d; color:#fff; font-size:10px; font-weight:700;
            padding:1px 6px; border-radius:6px; margin-left:6px;
            display:inline-flex; align-items:center; gap:4px;
        }
        .online-name .ki-badge {
            background:#5b2a86; color:#fff; font-size:10px; font-weight:700;
            padding:1px 6px; border-radius:6px; margin-left:6px;
            display:inline-flex; align-items:center; gap:4px;
        }
        .online-meta .quelle-badge, .online-name .guest-badge.quelle-badge-ki {
            background:#5b2a86; color:#fff; font-size:10px; font-weight:700;
            padding:1px 6px; border-radius:6px; margin-left:6px;
            display:inline-flex; align-items:center; gap:4px;
        }
        .online-name .online-tagesaktivitaet-btn {
            background:none; border:none; color:#a70909; cursor:pointer;
            font-size:12px; margin-left:6px; padding:2px 4px; vertical-align:middle;
        }
        .online-name .online-tagesaktivitaet-btn:hover { color:#4a3a3a; }
        .tagesakt-datumsnav {
            display:flex; align-items:center; justify-content:center; gap:14px;
            margin-bottom:0.8rem; padding-bottom:0.6rem; border-bottom:1px solid #eee;
        }
        .tagesakt-datumsnav button {
            background:#f0eaea; border:none; color:#4a3a3a; width:26px; height:26px;
            border-radius:50%; cursor:pointer; font-size:0.75rem;
        }
        .tagesakt-datumsnav button:hover:not(:disabled) { background:#e5d5d5; }
        .tagesakt-datumsnav button:disabled { opacity:.4; cursor:default; }
        .tagesakt-datumsnav .tagesakt-datum-label { font-weight:700; color:#3a2f2f; font-size:0.9rem; min-width:120px; text-align:center; }
        .tagesakt-live {
            display:flex; align-items:center; gap:8px; padding:8px 10px;
            border-radius:8px; background:#eefaf0; border:1px solid #cdeed4;
            color:#1e7e34; font-size:0.85rem; margin-bottom:0.8rem;
        }
        .tagesakt-live i.fa-circle { font-size:8px; animation: onlineDotPuls 2s ease-in-out infinite; }
        .tagesakt-stats {
            display:grid; grid-template-columns:repeat(auto-fit, minmax(100px,1fr));
            gap:8px; margin-bottom:0.9rem;
        }
        .tagesakt-stat {
            background:#faf7f7; border-radius:8px; padding:8px 10px; text-align:center;
        }
        .tagesakt-stat .zahl { display:block; font-size:1.2rem; font-weight:700; color:#a70909; }
        .tagesakt-stat .label { font-size:0.7rem; color:#8a7f7f; }
        .tagesakt-timeline { display:flex; flex-direction:column; gap:0; }
        .tagesakt-eintrag {
            display:flex; align-items:flex-start; gap:10px; padding:8px 0;
            border-bottom:1px dashed #eee; font-size:0.85rem;
        }
        .tagesakt-eintrag:last-child { border-bottom:none; }
        .tagesakt-eintrag i.tagesakt-icon {
            width:22px; height:22px; border-radius:50%; flex-shrink:0;
            display:flex; align-items:center; justify-content:center;
            background:#f0eaea; color:#a70909; font-size:0.7rem; margin-top:1px;
        }
        .tagesakt-eintrag .tagesakt-text { flex:1; color:#333; }
        .tagesakt-eintrag .tagesakt-text a { color:#a70909; text-decoration:none; }
        .tagesakt-eintrag .tagesakt-zeit { color:#aaa; font-size:0.75rem; flex-shrink:0; white-space:nowrap; }
        .online-meta.online-stats { display:flex; gap:12px; color:#a99; }
        .online-meta.online-stats span { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
        .online-bulk-box { background:#faf5f5; border:1px solid #f0e6e6; border-radius:10px; padding:12px; }
        .online-bulk-form { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
        .online-bulk-form label {
            display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:700;
            color:#8a7f7f; text-transform:uppercase; letter-spacing:.03em;
        }
        .online-bulk-form input[type="number"] {
            width:80px; padding:6px 8px; border:1px solid #e5d5d5; border-radius:6px;
            font-size:14px; font-weight:700; color:#3a2f2f;
        }
        .btn-fake-bulk-setzen {
            background:#993234; color:#fff; border:none; border-radius:8px;
            padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer;
            display:flex; align-items:center; gap:6px; transition: background .15s;
        }
        .btn-fake-bulk-setzen:hover { background:#7a2628; }
        .btn-fake-bulk-setzen:disabled { opacity:.6; cursor:default; }
        .online-bulk-hint { margin-top:8px; font-size:11px; color:#a99; line-height:1.4; }

        /* Glocken-Panel: bewusst schmaler/kompakter als das volle Such-Panel,
           mittig unter der Glocke (die selbst mittig im Header sitzt). */
        .glocke-panel {
            position: fixed; top: calc(60px + var(--safe-top)); left: 50%;
            width: 380px; max-width: calc(100vw - 24px);
            background: #fff; z-index: 1001;
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
            max-height: min(70vh, 480px);
            overflow-y: auto;
            border-radius: 0 0 12px 12px;
            transform: translateX(-50%) translateY(-8px);
            opacity: 0; pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
        }
        .glocke-panel.offen { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

        /* ===== SUCHE MODERN (Overlay: Desktop = zentrierte Karte, Mobil = Vollbild) ===== */
        .such-overlay-bg {
            position: fixed; inset: 0; z-index: 99990;
            background: transparent;   /* Menues (Suche, Konto, Glocke, PN): Seite dahinter weder verwischen noch abdunkeln - Overlay nur zum Schliessen per Klick */
            opacity: 0; pointer-events: none; transition: opacity .18s ease;
        }
        .such-overlay-bg.aktiv { opacity: 1; pointer-events: auto; }
        .such-panel {
            position: fixed; z-index: 99991; left: 50%; top: max(5vh, calc(var(--safe-top) + 12px));
            width: 700px; max-width: calc(100vw - 24px); max-height: 82vh; max-height: 82dvh;
            display: flex; flex-direction: column; overflow: hidden;
            background: #fff; border-radius: 20px;
            box-shadow: 0 30px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
            transform: translateX(-50%) translateY(-12px) scale(.98);
            opacity: 0; pointer-events: none;
            transition: opacity .18s ease, transform .18s ease;
        }
        .such-panel.offen { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
        .such-panel-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; }
        .such-kopf { padding: 16px 16px 10px; background: linear-gradient(#fff 80%, rgba(255,255,255,0)); flex-shrink: 0; }
        .such-input-row { position: relative; display: flex; gap: 10px; align-items: center; }
        .such-input-row i.fa-search { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #a70909; font-size: 16px; pointer-events: none; }
        .such-input {
            flex: 1; min-width: 0; padding: 14px 44px 14px 44px; border: 2px solid #eadada; background: #faf6f6;
            border-radius: 14px; font-size: 16px; color: #2b2020; transition: border-color .15s, background .15s, box-shadow .15s;
        }
        .such-input:focus { outline: none; border-color: #a70909; background: #fff; box-shadow: 0 0 0 4px rgba(167,9,9,.10); }
        .such-clear { position: absolute; right: 64px; top: 50%; transform: translateY(-50%); background: #eadada; border: none; color: #7a5d5d; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; }
        .such-clear.zeigen { display: flex; }
        .such-input::-webkit-search-cancel-button, .such-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
        .such-kbd { display: none !important; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: #9a8a8a; border: 1px solid #e0cfcf; border-radius: 6px; padding: 2px 6px; background: #fff; pointer-events: none; }
        .such-close-btn { background: #f3ecec; border: none; color: #6b4b4b; border-radius: 12px; width: 44px; height: 44px; font-size: 16px; cursor: pointer; flex-shrink: 0; }
        .such-close-btn:hover { background: #eadada; }
        .such-chips { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
        .such-chips::-webkit-scrollbar { display: none; }
        .such-chips:empty { display: none; }
        .such-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ead9d9; background: #fff; color: #6b4b4b; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
        .such-chip i { font-size: 11px; color: #b97b7b; }
        .such-chip b { font-weight: 800; color: #a99; font-size: 11px; }
        .such-chip:hover { background: #fdeceb; }
        .such-chip.aktiv { background: #a70909; border-color: #a70909; color: #fff; }
        .such-chip.aktiv i, .such-chip.aktiv b { color: rgba(255,255,255,.85); }
        .such-results { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 12px; -webkit-overflow-scrolling: touch; }
        .such-hint, .such-loading { padding: 34px 10px; text-align: center; color: #9a8a8a; font-size: 14px; }
        .such-hint i { display: block; font-size: 30px; margin-bottom: 10px; color: #e7c3c3; }
        .such-loading i { margin-right: 8px; color: #a70909; }
        .such-hint small { display: block; margin-top: 6px; color: #b8a8a8; font-size: 12.5px; }
        .such-gruppe-titel { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #a99; padding: 14px 8px 6px; }
        .such-gruppe-titel i { color: #c98080; font-size: 11px; }
        .such-gruppe-titel .such-mehr { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 700; color: #a70909; background: none; border: none; cursor: pointer; font-size: 12px; padding: 0; }
        .such-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; cursor: pointer; text-decoration: none !important; color: inherit; }
        .such-item:hover, .such-item.aktiv { background: #fdeceb; }
        .such-item.aktiv { box-shadow: inset 0 0 0 1.5px rgba(167,9,9,.35); }
        .such-tile { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: #f6eeee; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; color: #a70909; font-size: 17px; }
        .such-tile img { width: 100%; height: 100%; object-fit: contain; padding: 5px; box-sizing: border-box; }
        .such-tile.foto img, .such-tile.rund img { object-fit: cover; padding: 0; }
        .such-tile.rund { border-radius: 50%; }
        .such-tile.zwei { width: 52px; gap: 0; }
        .such-tile.zwei img { width: 50%; padding: 2px; }
        .such-item-text { flex: 1; min-width: 0; }
        .such-item-titel { font-size: 14.5px; font-weight: 700; color: #7d1b1d !important; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .such-item-snippet { font-size: 12.5px; color: #6f6363; line-height: 1.4; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .such-item-meta { font-size: 11.5px; color: #a09090; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .such-badge { flex-shrink: 0; font-size: 10.5px; font-weight: 800; color: #9a6a6a; background: #f6eeee; border-radius: 999px; padding: 3px 9px; }
        .such-item mark { background: #ffe58a; color: #3a2a2a; padding: 0 1px; border-radius: 3px; }
        .such-live-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e11; margin-right: 5px; animation: onlineDotPuls 1.4s infinite; }
        .such-start { padding: 6px 4px 4px; }
        .such-schnell { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
        .such-schnell a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px; border-radius: 14px; background: #faf3f3; color: #6b2a2c !important; text-decoration: none !important; font-size: 12.5px; font-weight: 700; text-align: center; }
        .such-schnell a i { font-size: 19px; color: #a70909; }
        .such-schnell a:hover { background: #fdeceb; }
        .such-zuletzt { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: #5c4545; font-size: 14px; }
        .such-zuletzt i { color: #c9a0a0; font-size: 13px; width: 16px; text-align: center; }
        .such-zuletzt:hover { background: #fdeceb; }
        .such-alle-link { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; margin: 10px 4px 0; background: #a70909; color: #fff !important; border-radius: 12px; font-size: 14px; font-weight: 800; text-decoration: none !important; }
        .such-alle-link:hover { background: #8a0707; }
        .such-fuss { display: none; flex-shrink: 0; padding: 8px 16px; border-top: 1px solid #f0e6e6; font-size: 11.5px; color: #a99; gap: 14px; background: #fcfafa; }
        .such-fuss kbd { font-family: inherit; font-weight: 700; border: 1px solid #e0cfcf; border-radius: 5px; padding: 0 5px; background: #fff; }
        @media (min-width: 769px) { .such-fuss { display: flex; } }
        @media (max-width: 768px) {
            .such-panel { left: 0; top: 0; width: 100%; max-width: 100%; height: 50vh; height: 50dvh; max-height: none; border-radius: 0 0 22px 22px; transform: translateY(-14px); padding-top: var(--safe-top); }
            .such-overlay-bg.aktiv { background: rgba(0,0,0,.35); }
            .such-panel.offen { transform: translateY(0); }
            .such-kbd { display: none; }
            .such-schnell { grid-template-columns: repeat(2, 1fr); }
            .such-results { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
        }
        @media (prefers-reduced-motion: reduce) { .such-panel, .such-overlay-bg { transition: none; } }
        /* Scroll-Sperre waehrend die Suche offen ist (iOS ignoriert overflow:hidden auf <html>) */
        html.such-lock body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
        .such-griff { display: none; }
        @media (max-width: 768px) {
            .such-griff { display: block; width: 40px; height: 5px; border-radius: 3px; background: #e2d2d2; margin: 8px auto 0; flex-shrink: 0; }
            .such-kopf { padding-top: 6px; position: sticky; top: 0; z-index: 2; }
            .such-close-btn { width: auto; min-width: 44px; padding: 0 14px; font-size: 14px; font-weight: 700; color: #fff; background: #a70909; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
            .such-close-btn:hover, .such-close-btn:active { background: #8a0707; }
            .such-close-btn .such-close-text { display: inline; }
            .such-clear { right: 128px; width: 26px; height: 26px; }
            .such-item { padding: 11px 10px; }
            .such-chip { padding: 8px 14px; font-size: 13px; }
        }
        .such-close-text { display: none; }

        /* Glocke, Nachrichten- und Konto-Panel: eigener (heller) Hintergrund UNTER dem Header, unter dem Panel (nicht das Such-Overlay) */
        #glockeOverlayBg, #kontoMenuOverlayBg, #pnOverlayBg {
            top: calc(60px + var(--safe-top)); z-index: 998; background: rgba(0,0,0,0.35);
            backdrop-filter: none; -webkit-backdrop-filter: none;
        }

        /* ===== BENACHRICHTIGUNGSGLOCKE ===== */
        /* Eigene Mittelspalte zwischen Logo und rechter Icon-Gruppe: nimmt den
           jeweils übrigen Platz ein und zentriert die Glocke darin. Dadurch
           kann es (anders als bei fixer 50%-Positionierung) auf keiner
           Bildschirmgröße zu Überlappung mit Abmelden/Hamburger kommen, auch
           nicht bei langen Benutzernamen auf sehr schmalen Handys. */
        .kopf-mitte {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            flex: 1 1 auto;
            min-width: 0;
        }
        .glocke-trigger { position: relative; }
        /* ===== AUFMERKSAMKEIT: Glocke + PN (Header, Mobile-Footer, Menue) =====
           body.rwe-glocke-neu / rwe-pn-neu = es liegt etwas Ungelesenes an (Dauer-Animation),
           body.rwe-glocke-jetzt / rwe-pn-jetzt = gerade eben ist etwas NEUES eingetroffen (starke Animation, ~8s). */
        body.rwe-glocke-neu .glocke-trigger, body.rwe-pn-neu #kopfPnLink,
        body.rwe-glocke-neu #mfnGlockeBtn, body.rwe-pn-neu #mfnPnLink .mfn-icon-wrap { position: relative; }
        body.rwe-glocke-neu #glockeTrigger::after, body.rwe-pn-neu #kopfPnLink::after,
        body.rwe-glocke-neu #mfnGlockeBtn::after, body.rwe-pn-neu #mfnPnLink .mfn-icon-wrap::after {
            content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
            border: 3px solid #ffd23f; opacity: 0; animation: rweRing 1.2s ease-out infinite;
        }
        body.rwe-glocke-neu #glockeTrigger::before, body.rwe-pn-neu #kopfPnLink::before,
        body.rwe-glocke-neu #mfnGlockeBtn::before, body.rwe-pn-neu #mfnPnLink .mfn-icon-wrap::before {
            content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
            border: 3px solid #fff; opacity: 0; animation: rweRing 1.2s ease-out .6s infinite;
        }
        body.rwe-glocke-neu #glockeTrigger i, body.rwe-glocke-neu #mfnGlockeBtn i { transform-origin: 50% 12%; animation: rweGlockeLaeuten 1.6s ease-in-out infinite; }
        body.rwe-pn-neu #kopfPnLink i, body.rwe-pn-neu #mfnPnLink .mfn-icon-wrap i { animation: rweBriefHuepfen 1.6s ease-in-out infinite; }
        body.rwe-glocke-neu #glockeBadge, body.rwe-pn-neu #kopf-pn-badge,
        body.rwe-glocke-neu #mfnGlockeBadge, body.rwe-pn-neu #mfnNachrichtenBadge, body.rwe-pn-neu #nav-nachrichten-badge {
            background: #ffd23f !important; color: #7a0000 !important; box-shadow: 0 0 0 0 rgba(255,210,63,.9); animation: rweBadgePuls .9s ease-out infinite, rweBadgeAtmen .9s ease-in-out infinite;
        }
        body.rwe-glocke-jetzt #glockeTrigger, body.rwe-glocke-jetzt #mfnGlockeBtn,
        body.rwe-pn-jetzt #kopfPnLink, body.rwe-pn-jetzt #mfnPnLink .mfn-icon-wrap { animation: rweJetzt .55s ease-in-out 16; }
        body.rwe-glocke-jetzt #glockeTrigger i, body.rwe-glocke-jetzt #mfnGlockeBtn i { animation: rweGlockeLaeuten .5s ease-in-out 16; }
        body.rwe-pn-jetzt #kopfPnLink i, body.rwe-pn-jetzt #mfnPnLink .mfn-icon-wrap i { animation: rweBriefHuepfen .55s ease-in-out 16; }
        body.rwe-glocke-jetzt #glockeBadge, body.rwe-pn-jetzt #kopf-pn-badge, body.rwe-glocke-jetzt #mfnGlockeBadge, body.rwe-pn-jetzt #mfnNachrichtenBadge { transform: scale(1.35); }
        @keyframes rweRing { 0% { transform: scale(.6); opacity: 1; } 80%, 100% { transform: scale(2.1); opacity: 0; } }
        @keyframes rweGlockeLaeuten {
            0%, 50%, 100% { transform: rotate(0); }
            6% { transform: rotate(24deg); } 12% { transform: rotate(-22deg); } 18% { transform: rotate(18deg); }
            24% { transform: rotate(-14deg); } 30% { transform: rotate(9deg); } 36% { transform: rotate(-5deg); } 42% { transform: rotate(2deg); }
        }
        @keyframes rweBriefHuepfen {
            0%, 55%, 100% { transform: translateY(0) rotate(0); }
            10% { transform: translateY(-7px) rotate(-10deg); } 20% { transform: translateY(0) rotate(8deg); }
            30% { transform: translateY(-4px) rotate(-6deg); } 40% { transform: translateY(0) rotate(0); }
        }
        @keyframes rweBadgePuls { 0% { box-shadow: 0 0 0 0 rgba(255,210,63,.95), 0 0 8px 2px rgba(255,210,63,.8); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255,210,63,0), 0 0 8px 2px rgba(255,210,63,.3); } }
        @keyframes rweBadgeAtmen { 0%, 100% { scale: 1; } 50% { scale: 1.3; } }
        @keyframes rweJetzt { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
        @media (prefers-reduced-motion: reduce) {
            body[class*="rwe-glocke-"] #glockeTrigger i, body[class*="rwe-glocke-"] #mfnGlockeBtn i,
            body[class*="rwe-pn-"] #kopfPnLink i, body[class*="rwe-pn-"] #mfnPnLink i,
            body[class*="rwe-glocke-"] #glockeTrigger, body[class*="rwe-pn-"] #kopfPnLink { animation: none !important; }
        }
        .glocke-badge {
            position: absolute; top: 1px; right: 1px;
            background: #fff; color: #a70909; border-radius: 10px;
            padding: 0 5px; font-size: 0.65rem; font-weight: 700;
            line-height: 15px; min-width: 15px; text-align: center;
        }
        .glocke-kopf-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 2px 6px 8px; font-size: 14px; color: #333;
        }
        .glocke-alle-gelesen-btn {
            background: none; border: none; color: #a70909; font-size: 12px;
            font-weight: 700; cursor: pointer; padding: 4px 6px;
        }
        .glocke-alle-gelesen-btn:hover { text-decoration: underline; }
        .glocke-item {
            display: flex; gap: 10px; align-items: flex-start; padding: 10px 6px;
            border-radius: 8px; text-decoration: none !important; cursor: pointer;
        }
        .glocke-item:hover { background: #fdeceb; }
        .glocke-item.ungelesen { background: #fff4f4; }
        .glocke-item-icon {
            width: 32px; height: 32px; border-radius: 50%; background: #a70909;
            color: #fff; display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; font-size: 14px; margin-top: 2px; position: relative;
        }
        /* Kleines Vorschaubild (z.B. bei "Neuer Artikel") statt Icon-Kreis -
           eckiger statt rund, damit man es klar vom reinen Icon unterscheidet. */
        .glocke-item-icon.mit-bild { background: none; border-radius: 8px; overflow: hidden; }
        /* Tor-Meldungen: Vereinslogo + Spielerfoto als ZWEI getrennte Bilder nebeneinander */
        .glocke-item-icon.mit-doppel { width: auto; min-width: 32px; background: none; border-radius: 0; gap: 5px; overflow: visible; }
        .glocke-item-icon.mit-doppel img { width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; }
        .glocke-item-icon.mit-doppel img.glocke-item-bild2 { object-fit: cover; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); box-sizing: border-box; }
        /* :not(...) ist Pflicht: ohne die Ausnahme greift diese Regel (2 Klassen +
           Element = höhere Spezifität) auch auf das Badge-<img> weiter unten und
           blässt es auf 100% des Kreises auf - deckt dann den Avatar komplett zu
           (genau der "Foren-Icon-als-Avatar"-Bug vom 03.09., per echtem
           Screenshot auf /forum gefunden, nicht nur lokal vermutet). */
        .glocke-item-icon.mit-bild img:not(.glocke-item-thema-badge) { width: 100%; height: 100%; object-fit: cover; }
        /* Echtes Profilbild des Auslösers (Antwort/Erwähnung/Meldung/...) statt
           generischem Icon-Kreis - bleibt rund wie der Icon-Kreis. */
        .glocke-item-icon.mit-avatar { background: none; overflow: hidden; }
        .glocke-item-icon.mit-avatar img:not(.glocke-item-thema-badge) { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
        /* Kleines Icon des Themas (aus themen_logos, dieselbe Quelle wie die
           Vereinswappen vor Suchtreffern) - unten rechts über dem Avatar/Icon.
           BEWUSST das Themen-Icon, nicht das Forum-Icon (Nutzer-Feedback
           03.09.: "immer gesetzte Bilder des Themas, nicht Forum"). */
        .glocke-item-thema-badge {
            position: absolute; bottom: -3px; right: -3px; width: 16px; height: 16px;
            border-radius: 50%; border: 2px solid #fff; background: #fff;
            object-fit: cover;
        }
        .glocke-item-body { min-width: 0; }
        .glocke-item-text { font-size: 13.5px; color: #333 !important; line-height: 1.4; }
        .glocke-item-text .such-item-logos { vertical-align: middle; margin-right: 2px; display: inline-flex; }
        .glocke-item-zeit { font-size: 11px; color: #aaa; margin-top: 2px; }
        .glocke-leer { padding: 24px 6px; text-align: center; color: #aaa; font-size: 13px; }
        .glocke-leer i { display: block; font-size: 26px; margin-bottom: 6px; color: #eecccc; }
        /* glockeItemErstellen(eintrag, {mitLoeschen:true}) - siehe benachrichtigungen.php */
        .glocke-item-zeile { display: flex; align-items: center; gap: 2px; }
        .glocke-item-zeile .glocke-item { flex: 1 1 auto; }
        .glocke-item-loeschen {
            flex: 0 0 auto; background: none; border: none; color: #bbb;
            font-size: 13px; cursor: pointer; padding: 8px; border-radius: 8px;
        }
        .glocke-item-loeschen:hover { color: #a70909; background: #fdeceb; }
        .glocke-item-loeschen:disabled { opacity: 0.4; cursor: default; }
        /* glockeItemErstellen(eintrag, {mitGelesen:true}) - nur diese EINE
           Benachrichtigung als gelesen markieren, ohne zum verlinkten Inhalt
           zu navigieren (User-Wunsch 2026-09-06, neben "Alle als gelesen"). */
        .glocke-item-gelesen-btn {
            flex: 0 0 auto; background: none; border: none; color: #bbb;
            font-size: 13px; cursor: pointer; padding: 8px; border-radius: 8px;
        }
        .glocke-item-gelesen-btn:hover { color: #1b7a3d; background: #eaf7ee; }
        .glocke-item-gelesen-btn:disabled { opacity: 0.4; cursor: default; }
        .glocke-alle-anzeigen-link {
            display: block; text-align: center; padding: 10px 6px 4px;
            margin-top: 4px; border-top: 1px solid #f0e8e8;
            font-size: 12.5px; font-weight: 700; color: #a70909 !important;
            text-decoration: none !important;
        }
        .glocke-alle-anzeigen-link:hover { text-decoration: underline !important; }

        /* ===== GLOCKE: generischer Abo-Button (grün=aktiv, rot=inaktiv) =====
           Global statt seitenlokal, da er auf thema.php UND auf den Vereins-/
           Liga-/Spieler-Seiten unter /spieler/ verwendet wird (Transfergerüchte-Abo). */
        .glocke-abo-btn {
            background: #dc3545; color: #fff; border: 1px solid #dc3545; border-radius: 8px;
            width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 0.95rem; transition: all 0.15s ease; flex-shrink: 0;
        }
        .glocke-abo-btn:hover { background: #c82333; border-color: #c82333; }
        .glocke-abo-btn.glocke-abo-aktiv { background: #28a745; border-color: #28a745; }
        .glocke-abo-btn.glocke-abo-aktiv:hover { background: #218838; border-color: #218838; }

        /* ===== NAVIGATION (HAMBURGER MENÜ) ===== */
        .navigation {
            position: fixed;
            top: calc(60px + var(--safe-top));
            right: 0;
            width: 300px;
            height: calc(100vh - 60px - var(--safe-top));
            background: #a70909;
            padding: 16px 20px;
            /* Geschlossen per transform (nicht negativem right:) aus dem Bild
               geschoben: ein fixiertes Element mit negativem right ragt auf iOS
               aus dem Viewport heraus und laesst sich dort seitlich "wegwischen"
               (overflow-x:hidden greift dort nicht zuverlaessig); ein
               transform:translateX(100%) wird dagegen sauber weggeclippt. */
            transform: translateX(100%);
            transition: transform 0.3s ease, visibility 0s linear 0.3s;
            overflow-y: auto;
            overscroll-behavior: contain;          /* Wischen im Menue schiebt nicht die Seite dahinter mit */
            -webkit-overflow-scrolling: touch;
            box-shadow: none;
            visibility: hidden;                    /* geschlossen: nicht beruehrbar, nicht "herauswischbar", kein Schatten am Rand */
            pointer-events: none;
            z-index: 999;
        }

        .navigation.offen {
            transform: translateX(0);
            visibility: visible;
            pointer-events: auto;
            box-shadow: -2px 0 10px rgba(0,0,0,0.2);
            transition: transform 0.3s ease, visibility 0s;
        }
        /* Menue offen: Seite dahinter bleibt stehen (kein seitliches/vertikales Mitgleiten) */
        body.menue-offen { overflow: hidden; }
        body.menue-offen .navigation { touch-action: pan-y; }
        
        .navigation a {
            color: white;
            text-decoration: none;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 1rem;
            transition: background 0.3s;
            display: flex;
            align-items: center;
            gap: 14px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        
        .navigation a:hover {
            background: rgba(255,255,255,0.15);
            text-decoration: none;
            color: white;
        }
        
        .navigation a i {
            width: 22px;
            text-align: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .navigation .nav-abschnitt {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: rgba(255,255,255,0.55);
            margin: 18px 16px 6px;
        }

        .navigation .nav-abschnitt:first-child {
            margin-top: 4px;
        }

        /* ===== EIN MENUE: Konto-Karte, Schnellzugriff, Abmelden im Hauptmenue ===== */
        .navigation .nav-konto-karte { background: rgba(255,255,255,0.14); border: 0; padding: 12px 14px; margin-bottom: 10px; gap: 12px; border-radius: 14px; }
        .navigation .nav-konto-karte .benutzer-avatar { width: 46px; height: 46px; font-size: 1rem; flex-shrink: 0; }
        .navigation .nav-konto-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
        .navigation .nav-konto-text b { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .navigation .nav-konto-text small { font-size: 0.74rem; color: rgba(255,255,255,0.7); }
        .navigation .nav-konto-pfeil { width: auto; font-size: 0.8rem; opacity: 0.7; }
        .navigation .nav-schnell { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 8px; }
        .navigation .nav-schnell a { position: relative; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 4px; font-size: 0.74rem; font-weight: 700; text-align: center; background: rgba(255,255,255,0.10); border: 0; border-radius: 12px; }
        .navigation .nav-schnell a i { font-size: 1.15rem; width: auto; }
        .navigation .nav-schnell-badge { position: absolute; top: 4px; right: 6px; background: #fff; color: #a70909; border-radius: 10px; padding: 0 6px; font-size: 0.68rem; font-weight: 800; line-height: 1.5; }
        .navigation .nav-abmelden { margin-top: 14px; justify-content: center; background: rgba(0,0,0,0.22); border: 0; font-weight: 700; }
        .navigation .nav-abmelden:hover { background: rgba(0,0,0,0.38); }
        /* altes Konto-Dropdown ist im Hauptmenue aufgegangen */
        .konto-menu-panel, #kontoMenuOverlayBg { display: none !important; }

        /* ===== NAVIGATION: "LIVE" - ANZAHL LAUFENDER SPIELE, PULSIEREND ===== */
        .nav-live-badge {
            margin-left: auto;
            background: #fff;
            color: #a70909;
            border-radius: 10px;
            padding: 1px 7px;
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1.5;
            animation: navLiveBadgePuls 1.8s ease-in-out infinite;
        }

        @keyframes navLiveBadgePuls {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
            50%      { box-shadow: 0 0 0 5px rgba(255,255,255,0); }
        }

        @media (prefers-reduced-motion: reduce) {
            .nav-live-badge { animation: none; }
        }

        /* ===== NAVIGATION: AUSKLAPPBARE UNTERMENÜS (FOREN, PROFIL) ===== */
        .navigation details.nav-foren-details,
        .navigation details.nav-user-details {
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }

        .navigation details.nav-foren-details summary,
        .navigation details.nav-user-details summary {
            list-style: none;
            cursor: pointer;
            color: white;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: background 0.3s;
        }

        .navigation details.nav-foren-details summary::-webkit-details-marker,
        .navigation details.nav-user-details summary::-webkit-details-marker {
            display: none;
        }

        .navigation details.nav-foren-details summary:hover,
        .navigation details.nav-user-details summary:hover {
            background: rgba(255,255,255,0.15);
        }

        .navigation details.nav-foren-details summary i:first-child,
        .navigation details.nav-user-details summary i:first-child {
            width: 22px;
            text-align: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .navigation details.nav-foren-details summary .nav-foren-chevron,
        .navigation details.nav-user-details summary .nav-foren-chevron {
            margin-left: auto;
            font-size: 0.75rem;
            transition: transform 0.2s;
        }

        .navigation details.nav-foren-details[open] summary .nav-foren-chevron,
        .navigation details.nav-user-details[open] summary .nav-foren-chevron {
            transform: rotate(180deg);
        }

        .navigation .nav-foren-liste,
        .navigation .nav-user-liste {
            display: flex;
            flex-direction: column;
            padding: 2px 0 10px 0;
        }

        .navigation .nav-foren-liste a,
        .navigation .nav-user-liste a {
            border-bottom: none;
            padding: 8px 16px 8px 32px;
            font-size: 0.88rem;
            color: rgba(255,255,255,0.85);
        }

        .navigation .nav-foren-liste a i,
        .navigation .nav-user-liste a i {
            width: 16px;
            font-size: 0.85rem;
        }

        .navigation .nav-foren-liste a .nav-forum-bild {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .navigation .nav-foren-liste a:hover,
        .navigation .nav-user-liste a:hover {
            color: white;
        }

        .navigation .nav-foren-kategorie {
            font-size: 0.66rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: rgba(255,255,255,0.45);
            padding: 8px 16px 2px 32px;
        }

        /* ===== OVERLAY ===== */
        .overlay {
            position: fixed;
            top: calc(60px + var(--safe-top));
            left: 0;
            width: 100%;
            height: calc(100vh - 60px - var(--safe-top));
            background: rgba(0,0,0,0.5);
            z-index: 998;
            display: none;
        }
        
        .overlay.aktiv {
            display: block;
        }
        
        /* ===== CONTAINER ===== */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 12px 12px;
        }
        
        /* ===== KARTE ===== */
        .karte {
            background: white;
            border-radius: 12px;
            padding: 1.2rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        /* ============================================================
           MOBILE OPTIMIERUNG
           ============================================================ */
        
        /* ===== TABLET (768px) ===== */
        @media (max-width: 768px) {
            body {
                padding-top: calc(54px + var(--safe-top));
            }

            .kopf {
                height: calc(54px + var(--safe-top));
                padding-top: var(--safe-top);
                padding-left: 12px;
                padding-right: 12px;
            }
            
            .logo img {
                height: 34px;
            }
            
            .benutzer-name {
                font-size: 0.85rem;
                max-width: 120px;
            }

            .benutzer-avatar {
                width: 24px; height: 24px;
            }
            
            .btn-header {
                font-size: 0.75rem;
                padding: 5px 10px;
                min-height: 28px;
            }
            
            .btn-header i {
                font-size: 0.75rem;
            }
            
            .hamburger {
                font-size: 1.1rem;
                min-height: 30px;
                min-width: 30px;
                padding: 4px 8px;
            }

            .such-trigger {
                font-size: 1rem;
                min-height: 30px;
                min-width: 30px;
                padding: 4px 8px;
            }

            .glocke-panel, .konto-menu-panel, #glockeOverlayBg, #kontoMenuOverlayBg, #pnOverlayBg { top: calc(54px + var(--safe-top)); }

            .rechte-gruppe {
                gap: 6px;
            }

            .rechte-gruppe .such-trigger {
                margin-left: 12px;
            }

            .benutzer-menu {
                gap: 4px;
            }

            .navigation {
                top: calc(54px + var(--safe-top));
                right: 0;
                width: 280px;
                height: calc(100vh - 54px - var(--safe-top));
                padding: 14px 18px;
            }
            
            .navigation a {
                font-size: 0.95rem;
                padding: 10px 14px;
                gap: 12px;
            }
            
            .navigation a i {
                font-size: 1rem;
                width: 20px;
            }
            
            .overlay {
                top: calc(54px + var(--safe-top));
                height: calc(100vh - 54px - var(--safe-top));
            }
            
            .container {
                padding: 10px 10px;
            }
            
            .karte {
                padding: 1rem;
                border-radius: 10px;
            }
        }
        
        /* ===== MOBILE (480px) ===== */
        @media (max-width: 480px) {
            body {
                padding-top: calc(50px + var(--safe-top));
            }

            .kopf {
                height: calc(50px + var(--safe-top));
                padding-top: var(--safe-top);
                padding-left: 10px;
                padding-right: 10px;
            }
            
            .logo img {
                height: 30px;
            }
            
            .benutzer-name {
                font-size: 0.75rem;
                max-width: 90px;
            }

            .benutzer-avatar {
                width: 22px; height: 22px;
            }
            
            .btn-header {
                font-size: 0.65rem;
                padding: 4px 8px;
                min-height: 26px;
                gap: 4px;
            }
            
            .btn-header i {
                font-size: 0.65rem;
            }
            
            /* Login/Registrierung Text auf Mobile ausblenden */
            .btn-header .btn-text {
                display: none;
            }
            
            .hamburger {
                font-size: 1rem;
                min-height: 28px;
                min-width: 28px;
                padding: 3px 6px;
            }

            .such-trigger {
                font-size: 0.95rem;
                min-height: 28px;
                min-width: 28px;
                padding: 3px 6px;
            }

            .glocke-panel, .konto-menu-panel, #glockeOverlayBg, #kontoMenuOverlayBg, #pnOverlayBg { top: calc(50px + var(--safe-top)); }
            .such-panel-inner { padding: 10px 10px 14px; }
            .such-close-btn { display: none; }

            .rechte-gruppe {
                gap: 4px;
            }

            .rechte-gruppe .such-trigger {
                margin-left: 10px;
            }

            .benutzer-menu {
                gap: 3px;
            }

            .navigation {
                top: calc(50px + var(--safe-top));
                right: 0;
                width: 260px;
                height: calc(100vh - 50px - var(--safe-top));
                padding: 12px 16px;
            }
            
            .navigation a {
                font-size: 0.9rem;
                padding: 10px 12px;
                gap: 12px;
            }
            
            .navigation a i {
                font-size: 0.9rem;
                width: 20px;
            }
            
            .overlay {
                top: calc(50px + var(--safe-top));
                height: calc(100vh - 50px - var(--safe-top));
            }
            
            .container {
                padding: 8px 8px;
            }
            
            .karte {
                padding: 0.8rem;
                border-radius: 8px;
                margin-bottom: 0.8rem;
            }
        }
        
        /* ===== KLEINE MOBILE (400px) ===== */
        @media (max-width: 400px) {
            body {
                padding-top: calc(46px + var(--safe-top));
            }

            .kopf {
                height: calc(46px + var(--safe-top));
                padding-top: var(--safe-top);
                padding-left: 8px;
                padding-right: 8px;
            }
            
            .logo img {
                height: 26px;
            }
            
            .benutzer-name {
                font-size: 0.65rem;
                max-width: 60px;
            }

            .benutzer-avatar {
                width: 20px; height: 20px;
            }
            
            .btn-header {
                font-size: 0.55rem;
                padding: 3px 6px;
                min-height: 24px;
            }
            
            .btn-header i {
                font-size: 0.55rem;
            }
            
            .hamburger {
                font-size: 0.9rem;
                min-height: 26px;
                min-width: 26px;
                padding: 2px 5px;
            }

            .such-trigger {
                font-size: 0.85rem;
                min-height: 26px;
                min-width: 26px;
                padding: 2px 5px;
            }

            .glocke-panel, .konto-menu-panel, #glockeOverlayBg, #kontoMenuOverlayBg, #pnOverlayBg { top: calc(46px + var(--safe-top)); }

            .navigation {
                top: calc(46px + var(--safe-top));
                right: 0;
                width: 220px;
                height: calc(100vh - 46px - var(--safe-top));
                padding: 10px 14px;
            }
            
            .navigation a {
                font-size: 0.8rem;
                padding: 8px 10px;
                gap: 10px;
            }
            
            .navigation a i {
                font-size: 0.8rem;
                width: 18px;
            }
            
            .overlay {
                top: calc(46px + var(--safe-top));
                height: calc(100vh - 46px - var(--safe-top));
            }
            
            .container {
                padding: 6px 6px;
            }
            
            .karte {
                padding: 0.6rem;
                border-radius: 6px;
                margin-bottom: 0.6rem;
            }
        }

        /* Nutzer-Feedback 2026-08-02: "GIF sollte GIF Button erhalten, leider
           täuschend mit ein Bild" - Badge fuer [gif]-Einbettungen (siehe
           system/bbcode.php), global statt pro Seite, da bbcodeToHtml()
           sowohl im Forum als auch im Feed dieselbe Ausgabe erzeugt. */
        .gif-embed-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
        .gif-embed-wrap .gif-embed { display: block; }
        .gif-badge {
            position: absolute; bottom: 8px; left: 8px;
            background: rgba(0,0,0,0.75); color: #fff;
            font-size: 0.65rem; font-weight: 800; letter-spacing: 0.03em;
            padding: 2px 6px; border-radius: 4px; pointer-events: none;
        }