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

        html, body {
            font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
            background: var(--bg);
            color: #fff;
            overflow-x: hidden;
            max-width: 100vw;
        }

        /* HERO SLIDER - ZURÜCK! */
        .hero-slider {
            position: relative;
            width: 100%;
            height: 70vh;
            overflow: hidden;
        }

        .hero-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background-size: cover;
            background-position: center 10%;
        }

.hero-slide.active {
    opacity: 1;
}

.hero-slide-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%;
}

.hero-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: linear-gradient(transparent, rgba(15,15,15,0.8), var(--bg));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 30px 40px;
        }

        /* Feste Hoehe fuer Titel und Untertitel (T-197).
           Der Hero wechselt alle 5 Sekunden die Folie und tauscht dabei die
           Texte aus. Weil sie unterschiedlich lang sind, aenderte der Block
           seine Hoehe und schob alles darueber - gemessen am 09.08.2026 vier
           Verschiebungen im 5-Sekunden-Takt, zusammen ein CLS um 0,1 (das ist
           die Grenze fuer "gut").
           Eine blosse Mindesthoehe reicht hier nicht: Der Text waechst im
           Overlay von unten nach oben (justify-content: flex-end), eine
           Mindesthoehe wuerde kurze Titel nach oben schieben. Das Raster mit
           align-content: end laesst den Text an der Unterkante seines Kastens
           stehen - die Hoehe bleibt konstant, die Optik unveraendert. */
        .hero-title {
            font-size: 2rem;
            font-weight: 700;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
            /* margin-top explizit: seit dem Wechsel von h1 auf h2 (SEO-Audit
               30.08.2026, ein H1 pro Seite) wuerde sonst der Browser-Default
               greifen - 0.83em statt 0.67em, bei 2rem sind das 5px mehr. */
            margin-top: 0;
            margin-bottom: 8px;
            line-height: 1.1;
            display: grid;
            align-content: end;
            min-height: calc(2 * 1.1em);
        }
        .hero-meta {
            font-size: 0.95rem;
            color: var(--accent);
            text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
            margin-bottom: 8px;
            font-weight: 500;
        }
        /* Meta-Zeile als Link zum Event/Job: Tap-Ziel auf 44px aufpolstern,
           ohne die sichtbare Position zu verschieben (Padding gegen Negativ-Margin).
           align-self begrenzt die Klickflaeche auf die Textbreite. */
        a.hero-meta {
            align-self: flex-start;
            text-decoration: none;
            padding: 13px 12px 13px 0;
            margin: -13px 0 -5px;
        }
        a.hero-meta[href]:hover,
        a.hero-meta[href]:focus-visible {
            text-decoration: underline;
        }
        /* Gleiche Regel wie beim Titel, hier auf zwei Zeilen. line-height ist
           bewusst gesetzt: ohne festen Wert haengt die reservierte Hoehe an der
           Vorgabe des Browsers und faellt je nach Geraet anders aus. */
        .hero-subtitle {
            font-size: 0.9rem;
            color: #ccc;
            text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
            margin-bottom: 8px;
            line-height: 1.4;
            display: grid;
            align-content: end;
            min-height: calc(2 * 1.4em);
        }

        .hero-buttons {
            display: flex;
            justify-content: flex-start;
            gap: 10px;
            margin-top: 15px;
        }

        /* Urheberangabe im Entdecken-Hero (Foto-Pflichtangabe, gesetzlich
           noetig). Kleiner als .hero-meta, damit sie nicht mit Rubrik/Ort
           konkurriert - 12px ist dieselbe Untergrenze wie bei .card-photo-
           credit/.entdecken-credit. */
        .hero-photo-credit {
            font-size: 0.75rem;
            color: #999;
            text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
            margin-top: 4px;
        }

        /* cursor kommt seit T-169 aus tokens.css. min-height steht dort
           ebenfalls fuer jedes .btn - hier bleibt es trotzdem stehen, weil
           tests/tap-target-todo-batch-0823.test.js (T-136) die Zeile genau
           in diesem Block prueft. Der Wert ist mit der Basis identisch; wer
           den Test auf tokens.css umstellt, kann die Zeile hier loeschen. */
        .btn {
            min-height: 44px;
            padding: 10px 22px;
            border: none;
            border-radius: 6px;
            font-size: 0.9rem;
            font-weight: 600;
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .btn-primary {
            background: var(--accent);
            color: #000;
        }

        .btn-primary:hover {
            background: #fff;
            color: #000;
        }

        .btn-secondary {
            background: rgba(255,255,255,0.15);
            color: #fff;
            backdrop-filter: blur(10px);
        }

        .btn-secondary:hover {
            background: rgba(255,255,255,0.25);
        }

        /* NAVIGATION MIT LOGO */
        /* T-499 (27.09.2026, Benos Auftrag): zwei Zustaende statt eines
           dunklen Verlaufs - oben durchsichtig ueber dem Hero-Bild, ab
           .scrolled (public/js/app.js, scrollY > 100) deckend - auf
           lausitz.app dunkel, auf der sorbischen Seitenkopie weiss (Nachtrag
           28.09.2026, siehe .navbar.scrolled unten). Alles im
           Header, das vorher fest auf Weiss/#fff bzw. var(--accent) stand,
           haengt jetzt an den --header-*-Variablen unten, damit es beim
           Wechsel mitzieht statt auf dem jeweils anderen Grund unsichtbar zu
           werden. NEUE Variablennamen (nicht --accent selbst) sind Absicht:
           .navbar ist die Eltern-Flaeche des Standort-Popups
           (.location-menu-panel), das --accent fuer seinen eigenen, immer
           dunklen Grund eigenstaendig umdefiniert (Farbkopien dieser Datei
           tun das noch fuer weitere Bauteile) - ein Ueberschreiben von
           --accent hier wuerde in dieses Popup vererbt und dessen Text beim
           Scrollen falsch faerben. */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: auto;
            max-width: 100vw;
            padding: 20px 60px;
            background: transparent;
            z-index: 1000;
            transition: background-color 0.3s, padding 0.3s, box-shadow 0.3s;
            overflow-x: hidden;
            box-sizing: border-box;
            --header-fg: #fff;
            --header-accent: var(--accent);
            --header-accent-rgb: 232, 255, 0;
            --header-muted: #9a9a9a;
            --header-border-soft: rgba(255, 255, 255, 0.12);
        }

        /* Lesbarkeits-Schleier im durchsichtigen Zustand (Benos Entscheidung
           27.09.2026). Gemessen war der Header ohne ihn ueber hellen
           Hero-Motiven unbedienbar: an der Stelle von Hamburger und
           Standort-Nadel stand weisses Symbol auf reinweissem Bildpixel,
           Kontrast 1,00:1. Bei 390px lagen mehrere Stellen bei 2,6-3,0:1.
           Der fruehere Verlauf hatte 0,9 Deckkraft - das hier ist gut ein
           Drittel davon: dunkle Motive veraendert es kaum, die kritischen
           Faelle hebt es ueber die Schwelle.
           Als eigene Ebene statt als background-image der Navbar, weil ein
           Verlauf sich nicht per background-color weich ausblenden laesst -
           er waere beim Scrollen hart verschwunden, waehrend Hintergrund und
           Logo sanft wechseln. So laufen alle drei ueber dieselben 300 ms. */
        .navbar::before {
            content: '';
            position: absolute;
            inset: 0;
            /* Geformt statt bloss abgeschwaecht: ein einfacher Verlauf von
               0,35 nach transparent ist an der Stelle der Symbole (genau auf
               halber Navbar-Hoehe) schon auf 0,175 verblasst und traegt dort
               nur 1,51:1 ueber einem reinweissen Hero-Bild. Gebraucht werden
               mindestens 0,42, um die 3:1-Schwelle fuer Bedienelemente zu
               halten. Deshalb bleibt der Schleier durch das Symbolband hindurch
               nahezu gleich stark und faellt erst darunter ab - oben ist er
               dadurch deutlich leichter als der frueheren 0,9-Verlauf, im
               kritischen Bereich aber wirksam. */
            background: linear-gradient(
                rgba(0, 0, 0, 0.50) 0%,
                rgba(0, 0, 0, 0.45) 55%,
                rgba(0, 0, 0, 0) 100%
            );
            opacity: 1;
            transition: opacity 0.3s;
            pointer-events: none;
            z-index: -1;
        }

        .navbar.scrolled::before {
            opacity: 0;
        }

        /* T-468 (27.09.2026): Tap-Ziele auf mindestens 44px, ohne dass sich
           etwas sichtbar aendert. Gemessen waren Suche 38px, Filter 38px,
           Glocke 40px, Reiter 36,5px und das Schliessen der Benachrichtigungen
           24px - alle unter Benos Regel. Eine echte Vergroesserung haette die
           Kopfzeile auf jeder Seite hoeher gemacht (das war der Grund, warum
           es liegen blieb). Stattdessen waechst nur die Trefferflaeche: ein
           unsichtbares Pseudo-Element um den Knopf, mittig verankert, mit
           min 44x44. Keiner der Knoepfe benutzte ::after bisher (geprueft).
           Die Nachbarn in der Kopfzeile stehen ~46px auseinander, die
           Flaechen ueberlappen sich also nicht. */
        .search-toggle-btn,
        .nav-filter-btn,
        .notification-close,
        .main-tab {
            position: relative;
        }
        .search-toggle-btn::after,
        .nav-filter-btn::after,
        .notification-bell::after,
        .notification-close::after,
        .main-tab::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: max(100%, 44px);
            height: max(100%, 44px);
            transform: translate(-50%, -50%);
        }

        /* Gescrollt wieder deckend dunkel (Beno, 28.09.2026: "den Header
           wieder dunkel machen, wenn man runter scrollt - die Farbaenderung
           sollte nur auf der sorbischen Seite erfolgen, weil die Grundseite
           dort hell ist"). Der Weiss-Zustand von T-499 (v1.5.443) lebt
           seitdem nur noch im Farb-Anhang der sorbischen Kopie dieser Datei. Die
           --header-*-Variablen bleiben hier auf den Werten fuer dunklen
           Grund (weisse Symbole, Markengelb), das helle Logo bleibt stehen.
           Der Lesbarkeits-Schleier (::before) blendet wie bisher aus - der
           deckende Grund braucht ihn nicht. */
        .navbar.scrolled {
            background: var(--bg);
            padding: 15px 60px;
            box-shadow: 0 2px 20px rgba(0,0,0,0.5);
        }

        @media (prefers-reduced-motion: reduce) {
            .navbar,
            .navbar *,
            /* Pseudo-Elemente fasst `.navbar *` NICHT mit: der universelle
               Selektor trifft Elemente, nicht ::before. Ohne diese Zeile
               haette der Lesbarkeits-Schleier weitergeblendet, waehrend
               Hintergrund und Logo hart schalten - also genau der unruhige
               Wechsel, den diese Regel verhindern soll. */
            .navbar::before {
                transition-duration: 0.001ms !important;
            }
        }

        .nav-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow: hidden;
        }

        /* Positionierungsrahmen fuer die Logo-Ueberblendung (T-499): die
           helle Fassung bleibt im normalen Fluss und bestimmt wie bisher die
           Groesse; die dunkle Fassung liegt absolut darueber und folgt per
           object-fit/Seitenverhaeltnis derselben Hoehe, dadurch exakt
           deckungsgleich, ohne dass der Rahmen selbst eine Breite braucht. */
        .logo-swap {
            position: relative;
            display: inline-flex;
            flex-shrink: 1;
            min-width: 0;
        }

        .logo-img {
            height: 80px;
            width: auto;
            max-width: min(150px, 36vw);
            /* T-482 (26.09.2026): Filter entfernt - die neue helle Logofassung
               (lausitz-logo-white-240.webp) traegt Farbe (gelbes Blatt/Punkt),
               brightness(0) invert(1) hatte das zu einer weissen Flaeche
               gemacht. Datei ist bereits fuer dunklen Grund gebaut. */
            flex-shrink: 1;
            object-fit: contain;
            opacity: 1;
            transition: opacity 0.3s ease;
        }

        .logo-img-dark {
            position: absolute;
            top: 0;
            left: 0;
            height: 80px;
            width: auto;
            max-width: min(150px, 36vw);
            object-fit: contain;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        /* Die Ueberblendung auf die dunkle Logo-Fassung gibt es nur noch auf
           der sorbischen Seite (Farb-Anhang ihrer Kopie dieser Datei) - auf
           dunklem Grund bleibt das helle Logo stehen. */

        /* NAV ACTIONS */
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-shrink: 0;
        }

        .search-toggle {
            background: none;
            border: none;
            cursor: pointer;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;
        }

        .search-toggle svg {
            width: 24px;
            height: 24px;
            color: #fff;
            transition: color 0.2s;
        }

        .search-toggle:hover svg {
            color: var(--accent);
        }

        .search-toggle:hover {
            transform: scale(1.1);
        }

        /* HAMBURGER BUTTON */
        /* Ist ein <button>, damit Tastatur und Screenreader das Menue
           erreichen - deshalb der Reset der Button-Defaults. */
        .hamburger {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            padding: 10px;
            z-index: 1001;
            background: none;
            border: none;
            border-radius: 8px;
            -webkit-appearance: none;
            appearance: none;
        }

        .hamburger span {
            width: 25px;
            height: 3px;
            background: var(--header-fg);
            margin: 3px 0;
            transition: 0.3s;
            border-radius: 2px;
        }

        .hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }

        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(8px, -8px);
        }

        /* SLIDE-OUT MENU */
        .menu-overlay {
            position: fixed;
            top: 0;
            right: -100%;
            width: 300px;
            /* dvh statt vh: auf Mobile fahren Browserleisten ein/aus, 100vh
               haengt am eingefahrenen (grossen) Zustand und lässt das Menue
               unten ueber den sichtbaren Bereich hinausragen; 100dvh folgt
               der tatsaechlich sichtbaren Hoehe (gleiches Muster wie
               .filter-panel weiter unten in dieser Datei). */
            height: 100dvh;
            background: rgba(15,15,15,0.95);
            backdrop-filter: blur(20px);
            z-index: 1000;
            transition: right 0.3s ease;
            padding: 80px 30px 30px 30px;
            /* Fix 26.09.2026: Inhalt (Sprachumschalter + wachsende
               Menue-Liste) konnte hoeher werden als der Bildschirm; bei
               overflow-y:visible (Default) war der ueberstehende Rest weder
               per Scroll noch per scrollTo() erreichbar. overflow-y:auto
               aendert am Regelfall (Inhalt passt) nichts - es zeigt nur
               dann einen Scrollbereich, wenn er noetig ist. overscroll-
               behavior:contain verhindert, dass ein Ueberscrollen am Ende
               der Liste auf die Seite dahinter durchschlaegt (kein
               body-Scroll-Lock vorhanden, siehe toggleMenu() in app.js). */
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .menu-overlay.open {
            right: 0;
        }

        .menu-links {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .menu-link {
            color: #fff;
            text-decoration: none;
            font-weight: 500;
            font-size: 1.2rem;
            padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            transition: color 0.3s;
        }

        .menu-link:hover {
            color: var(--accent);
        }

        /* TAB SWITCHER */
        .tab-switcher {
            display: flex;
            justify-content: flex-start;
            gap: 10px;
            padding: 20px 60px;
            background: transparent;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .tab-switcher::-webkit-scrollbar { display: none; }
        .main-tab {
            padding: 10px 24px;
            background: rgba(255,255,255,0.08);
            border: none;
            border-radius: 6px;
            color: #aaa;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .main-tab:hover {
            background: rgba(255,255,255,0.15);
            color: #fff;
        }
        .main-tab.active {
            background: var(--accent);
            color: #000;
            font-weight: 600;
        }

        /* KINO SECTIONS */
        .kino-venue-section {
            margin-bottom: 40px;
        }
        .kino-venue-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--accent);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .kino-venue-title::before {
            content: "KINO";
        }

        /* CONTENT SECTIONS */
        .content {
            padding: 0 60px;
            margin-bottom: 50px;
        }

        .jobs-landing-header {
            margin-bottom: 22px;
        }

        .jobs-landing-subtitle {
            margin: 0 0 14px;
            color: #9a9a9a;
            font-size: 0.95rem;
            line-height: 1.4;
        }

        .jobs-landing-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 8px;
        }

        section {
            margin: 0;
            padding: 0;
        }

        .section-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 6px;
            margin-top: 0;
            color: #fff;
        }

        #category-sections {
            margin: 0;
            padding: 0;
        }

        /* OPTIMIERTE SWIPEABLE CAROUSEL */
        .carousel-container {
            position: relative;
            margin-bottom: 8px;
            overflow: hidden;
        }

        .carousel {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            gap: 15px;
            padding: 10px 0 20px 0;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }

        .carousel::-webkit-scrollbar {
            display: none;
        }

        .event-card {
            flex: 0 0 300px;
            /* Einheitliches Kartenformat 4:5 (Breite:Hoehe) statt fester
               Pixelhoehe: im Such-Grid ist die Breite flexibel (1fr) - eine
               feste Hoehe verzerrt dort das Verhaeltnis, aspect-ratio nicht. */
            aspect-ratio: 4 / 5;
            border-radius: 12px;
            overflow: hidden;
            background: #1a1a1a;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            scroll-snap-align: start;
        }

        .event-card:hover {
            transform: scale(1.02);
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        /* Wie das Bild in die Flaeche gelegt wird (contain + unscharfe
           Fuellung), steht in /css/card-image.css - hier nur Groesse,
           Grundfarbe und das Einblenden nach dem Lazy-Load. */
        .card-image {
            width: 100%;
            height: 60%;
            position: relative;
            background-color: #1a1a1a;
            opacity: 0.6;
            transition: opacity 0.3s ease;
        }

        .card-image.loaded {
            opacity: 1;
        }

        .card-category {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: rgba(0,0,0,0.7);
            color: var(--accent);
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            z-index: 2;
        }

        /* Ticket-Hinweis auf der Karte. OBEN rechts, weil unten links die
           Kategorie und unten rechts Merken/Kalender sitzen - die drei
           Ecken sind belegt, die vierte ist frei.
           Erscheint nur, wenn es wirklich einen Ticketshop gibt (heute eine
           Handvoll Events); der Rest der Karten bleibt unveraendert. */
        .card-ticket-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.7);
            color: var(--accent);
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.2px;
            z-index: 2;
            max-width: 60%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .card-ticket-badge.sold-out {
            color: #ff8a80;
        }

        /* T-046: Abgesagt/Verschoben auf der Karte.
           Sitzt links oben, weil rechts oben schon der Ticket-Hinweis steht -
           beide koennen gleichzeitig auftreten (ein abgesagter Termin hatte
           womoeglich einen Vorverkauf). Flaechig statt nur farbiger Text: die
           Karte wird ueberflogen, und ein Ausfall ist die eine Information,
           die dabei nicht untergehen darf. */
        .card-lifecycle-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            z-index: 3;
            background: #ff6b6b;
            color: #fff;
        }
        /* Verschoben ist kein Ausfall, sondern eine Terminaenderung - die
           beiden Faelle muessen auf einen Blick unterscheidbar bleiben. */
        .card-lifecycle-postponed {
            background: #ffc861;
            color: #1a1a1a;
        }
        /* Ein abgesagter Termin wird zurueckgenommen, nicht versteckt: die
           Karte bleibt anklickbar (dort steht die Begruendung), tritt aber
           optisch zurueck. */
        .event-card:has(.card-lifecycle-cancelled) .card-title,
        .event-card:has(.card-lifecycle-cancelled) .card-date {
            opacity: 0.72;
        }

        /* Urheberangabe fuer ein live nachgeladenes Google-Venue-Foto
           (T-072, Stufe 2 der Bild-Fallback-Kette). Sitzt bewusst NICHT im
           .card-image (verschachtelte <a> waeren ungueltiges HTML, siehe
           JS-Kommentar bei createEventCard), sondern als Geschwister von
           .card-link direkt am unteren Rand der Bildflaeche (60% Kartenhoehe)
           - eine eigene, bisher ungenutzte Zone: Kategorie sitzt links unten
           IM Bild, Merken/Kalender sitzen rechts unten IM Content-Bereich
           darunter. Erscheint nur, wenn ein Live-Foto tatsaechlich geladen
           hat (siehe loadGoogleVenuePhotoCard in app.js) - ohne Attribution
           bleibt die Karte beim Platzhalter, nie ein Bild ohne Angabe. */
        .card-photo-credit {
            position: absolute;
            bottom: calc(40% + 8px);
            right: 8px;
            max-width: calc(100% - 16px);
            z-index: 2;
        }
        .card-photo-credit a {
            position: relative;
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: rgba(0,0,0,0.7);
            color: #ccc;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.75rem;
            text-decoration: none;
        }
        /* .card-photo-credit span: Entdecken-Karten haben keine Zielseite fuer
           den Fotografen (anders als das Google-Live-Foto oben, das immer
           verlinkt) - reine Textangabe, dieselbe Optik als eigene Regel statt
           per Komma an .card-photo-credit a angehaengt, damit die bestehende
           Pruefung in tests/event-card-google-photo-fallback.test.js (sucht
           woertlich ".card-photo-credit a {") unveraendert greift. Ohne die
           Hover-/Tastatur-Fokus-Regeln und die vergroesserte Tap-Flaeche
           unten, die nur fuer echte Links sinnvoll sind. */
        .card-photo-credit span {
            position: relative;
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: rgba(0,0,0,0.7);
            color: #ccc;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.75rem;
            text-decoration: none;
        }
        .card-photo-credit a:hover,
        .card-photo-credit a:focus-visible {
            color: var(--accent);
        }
        /* Unsichtbar vergroesserte Tap-Flaeche, gleiches Muster wie
           .calendar-btn/.bookmark-btn - der Abstand zu diesen Buttons ist
           gross genug (unterschiedliche Zonen), eine Ueberlappung entsteht
           dadurch nicht.
           Die sichtbare Flaeche ist bei 12px Schrift + 4px Padding oben/unten
           nur 22px hoch (gemessen 24.08.2026) - 10px Zuschlag jeder Seite
           waere mit 42px knapp UNTER der 44px-Regel geblieben. 12px schliessen
           die Luecke mit Rand. */
        .card-photo-credit a::after {
            content: '';
            position: absolute;
            top: -12px;
            bottom: -12px;
            left: -10px;
            right: -10px;
        }

        .calendar-btn {
            position: absolute;
            bottom: 12px;
            right: 13px;
            background: transparent;
            border: none;
            width: 24px;
            height: 24px;
            cursor: pointer;
            z-index: 3;
            transition: all 0.2s;
            padding: 0;
            opacity: 0.5;
        }
        /* Unsichtbar vergroesserte Tap-Flaeche (T-080, 04.08.2026), gleiches
           Muster wie .card-share-btn und .bookmark-btn: das Icon bleibt
           optisch 24px, die Trefferflaeche wird 44px hoch.
           Rechts 8px, weil dieser Button der aeusserste ist - bis zum
           Kartenrand sind es 13px, dort steht kein Nachbar im Weg. Links nur
           3px: zum Herz sind es am Desktop 11px, unter 768px wachsen die
           Icons aber auf 28px bei gleichem Raster und die Luecke schrumpft
           auf 7px. 3px je Seite lassen 1px Abstand, 5px haetten sich am Handy
           um 4px ueberlappt. */
        .calendar-btn::after {
            content: '';
            position: absolute;
            top: -10px;
            bottom: -10px;
            left: -3px;
            right: -8px;
        }
        .calendar-btn:hover {
            opacity: 1;
            transform: scale(1.15);
        }
        .calendar-btn svg {
            width: 100%;
            height: 100%;
            fill: #999;
        }
        .calendar-btn:hover svg {
            fill: var(--accent);
        }

        /* Mobile: Kalender, Merken und Teilen bilden ein einheitliches
           28px-Raster. Die anderen beiden Buttons setzen ihre Groesse
           dynamisch in bookmarks.js bzw. share-cards.js. */
        @media (max-width: 768px) {
            .calendar-btn {
                width: 28px;
                height: 28px;
                right: 13px;
                opacity: 0.7;
            }
        }

        .card-content {
            padding: 12px 15px;
            height: 40%;
            position: relative;
        }

        .card-date {
            color: var(--accent);
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .card-title {
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 4px;
            line-height: 1.2;
        }

        /* Zwei Zeilen Titel, dann "..." (Beno, 24.09.2026). Der Kartentext
           steht in einem 40%-Block, Merken/Kalender/Teilen sitzen absolut am
           unteren Rand: ab der dritten Titelzeile rutschte der Ort in die
           Buttonreihe (gemessen bei 390px: Ort ab 275px, Buttons ab 273px).
           Der Ort bleibt aus demselben Grund einzeilig - ein zweizeiliger
           Venue-Name ("Deutsch-Sorbisches Volkstheater Bautzen") landete
           sonst genauso unter den Buttons. overflow-wrap faengt Titel ohne
           Leerzeichen (URLs, Hashtags) ab, die sonst die Karte sprengen. */
        .event-card .card-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            overflow-wrap: anywhere;
        }

        .card-location {
            color: #999;
            font-size: 0.85rem;
            margin-bottom: 0;
        }

        .event-card .card-location {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* SCROLL BUTTONS */
        .carousel-controls {
            position: absolute;
            /* Mitte des KARTENBILDS statt der ganzen Karte: das Bild ist 60 %
               der Karte (.card-image), das Karussell hat 10px/20px Innenabstand
               -> Bildmitte bei 10px + 30 % von (100 % - 30px) = 30 % + 1px.
               Bei top: 50% sass der Pfeil genau auf der Bildunterkante und
               verdeckte das Kategorie-Label unten links (Beno, 01.10.2026). */
            top: calc(30% + 1px);
            transform: translateY(-50%);
            background: rgba(0,0,0,0.7);
            color: var(--accent);
            border: 2px solid var(--accent);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            cursor: pointer;
            display: none; /* Hidden by default, shown on desktop */
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 100;
            font-size: 2rem;
            font-weight: bold;
        }

        /* Only show on desktop (>1024px) */
        @media (min-width: 1025px) {
            .carousel-controls {
                display: flex;
            }
            .carousel-container:hover .carousel-controls {
                opacity: 1;
            }
        }

        .carousel-prev {
            left: 10px;
        }

        .carousel-next {
            right: 10px;
        }

        .carousel-controls:hover {
            background: var(--accent);
            color: #000;
        }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            .section-title {
                font-size: 1rem;
                margin-bottom: 4px;
                margin-top: 0;
            }
            .carousel-container {
                margin-bottom: 4px;
            }
            .tab-switcher {
                padding: 15px 15px;
            }
            .main-tab {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
            .navbar {
                padding: 15px 16px;
            }
            .content {
                padding: 5px 15px;
            }

            .jobs-landing-actions {
                gap: 8px;
            }

            .logo-img,
            .logo-img-dark {
                height: 64px;
            }

            .hero-overlay {
                padding: 30px 20px;
            }

            .hero-title {
            font-size: 2rem;
            font-weight: 700;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
            margin-top: 0;
            margin-bottom: 8px;
            line-height: 1.1;
        }
            .hero-meta {
            font-size: 0.95rem;
            color: var(--accent);
            text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
            margin-bottom: 8px;
            font-weight: 500;
        }
        .hero-subtitle {
            font-size: 0.9rem;
            color: #ccc;
            text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
            margin-bottom: 8px;
        }

            .event-card {
                flex: 0 0 250px;
            }

            .hero-buttons {
            display: flex;
            justify-content: flex-start;
            gap: 10px;
            margin-top: 15px;
        }
            .menu-overlay {
                width: 250px;
            }
        }
        .site-footer {
            background: #111;
            border-top: 1px solid #222;
            margin-top: 80px;
            padding: 50px 20px 20px;
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 50px;
            justify-content: space-between;
        }
        
        .footer-brand {
            max-width: 280px;
        }
        
        .footer-logo {
            /* width:auto ist Pflicht: das <img> traegt seine Dateibreite als
               CLS-Attribut und wuerde sonst auf diese Breite x 80 gestreckt. */
            height: 80px;
            width: auto;
            /* T-482 (26.09.2026): Filter entfernt, siehe .logo-img oben. */
            margin-bottom: 8px;
        }
        
        .footer-tagline {
            color: #999;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        
        .footer-links {
            display: flex;
            gap: 60px;
            flex-wrap: wrap;
        }
        
        .footer-column h2,
.footer-column .footer-heading {
            color: var(--accent);
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }
        
        .footer-column a {
            display: block;
            color: #888;
            text-decoration: none;
            font-size: 0.95rem;
            /* 44px-Tap-Ziel (Regel 31.07.2026): Zeile ~18px + 2x13px Padding */
            padding: 13px 0;
            transition: color 0.2s;
        }
        
        .footer-column a:hover {
            color: #fff;
        }
        
        .footer-bottom {
            max-width: 1200px;
            margin: 40px auto 0;
            padding-top: 20px;
            border-top: 1px solid #222;
            text-align: center;
        }

        .footer-funding {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 18px;
            padding: 18px 22px;
            background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
            border: 1px solid #2a2a2a;
            border-radius: 18px;
            text-align: left;
        }

        .footer-funding-copy {
            max-width: 780px;
        }

        .footer-funding-label {
            display: inline-block;
            margin-bottom: 8px;
            color: var(--accent);
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
        }

        .footer-funding-text {
            color: #c8c8c8;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .footer-funding-logo-wrap {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 96px;
            min-height: 96px;
            padding: 14px;
            border-radius: 16px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
        }

        .footer-funding-logo {
            display: block;
            width: 54px;
            height: auto;
        }
        
        .footer-bottom p {
            color: #999;
            font-size: 0.85rem;
        }

        /* Herz in der Fusszeile in CI-Gelb (Beno, 04.08.2026). Farbe kommt aus
           dem Token, damit sie mit dem Rest der Akzentfarbe wandert. Das
           Zeichen ist bewusst U+2764 ohne Variantenselektor: die Emoji-Form
           (U+2764 U+FE0F) waere rot und ignorierte color. */
        .footer-heart {
            color: var(--accent);
            font-style: normal;
        }

        @media (max-width: 768px) {
            .site-footer {
                padding: 40px 15px 15px;
                margin-top: 60px;
            }
            
            .footer-content {
                gap: 30px;
            }
            
            .footer-brand {
                max-width: 100%;
                text-align: center;
            }
            
            .footer-links {
                width: 100%;
                justify-content: space-around;
                gap: 30px;
            }
            
            .footer-column {
                text-align: center;
            }
            
            .footer-bottom {
                margin-top: 25px;
                padding-top: 15px;
            }

            .footer-funding {
                flex-direction: column-reverse;
                text-align: center;
                padding: 18px;
            }

            .footer-funding-copy {
                max-width: 100%;
            }
        }

/* ==========================================
   GLOBAL SEARCH STYLES
   ========================================== */

/* NAVBAR SEARCH - Full width row below nav-content */
.nav-search {
    width: 100%;
    max-width: 100%;
    padding: 10px 60px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    justify-content: center;
    box-sizing: border-box;
    z-index: 1002;
    overflow: hidden;
}

/* Reserve the first rows while the public events API is loading. Without this
   shell, the whole event area appears at once and shifts the page visibly. */
.events-loading-skeleton {
    display: grid;
    gap: 28px;
    padding-top: 26px;
}

.events-skeleton-row {
    display: grid;
    gap: 12px;
}

.events-skeleton-title {
    width: min(220px, 56%);
    height: 28px;
    border-radius: 6px;
}

.events-skeleton-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.events-skeleton-cards span {
    display: block;
    min-height: 260px;
    border-radius: 10px;
}

.events-skeleton-title,
.events-skeleton-cards span {
    background: linear-gradient(105deg, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0.11) 38%, rgba(255,255,255,0.05) 56%);
    background-size: 220% 100%;
    animation: events-skeleton-shimmer 1.5s linear infinite;
}

@keyframes events-skeleton-shimmer {
    to { background-position-x: -220%; }
}

@media (max-width: 768px) {
    .nav-search {
        padding: 10px 20px;
    }
}

/* DATE PICKER BAR - immer sichtbar über der Suchzeile */
.search-datebar {
    width: 100%;
    max-width: 880px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    box-sizing: border-box;
}

.search-datebar-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--header-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Scroller (Schnellfilter) und Datum-Umschalter teilen sich eine Zeile;
   der Umschalter steht ausserhalb des Scrollers und bleibt so immer im
   Viewport (Such-QA 31.07.). */
.search-datebar-quickrow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.search-datebar .filter-date-quick {
    margin-bottom: 0;
    gap: 6px;
}

.search-datebar .date-quick-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.search-datebar-range {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.search-datebar-field {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.search-datebar-field label {
    /* T-494: vorher 0,72rem = 11,52px, unter der 12px-Regel. */
    font-size: 0.75rem;
    color: var(--header-muted);
    white-space: nowrap;
}

.search-datebar .filter-date {
    padding: 7px 10px;
    font-size: 0.82rem;
    min-width: 132px;
}

@media (max-width: 560px) {
    .search-datebar {
        gap: 8px;
    }

    .search-datebar-label {
        width: 100%;
    }

    .search-datebar-quickrow {
        width: 100%;
    }

    .search-datebar .filter-date-quick {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .search-datebar .date-range-toggle {
        flex: 0 0 auto;
    }

    .search-datebar .filter-date-quick::-webkit-scrollbar {
        display: none;
    }

    .search-datebar .date-quick-btn {
        flex: 0 0 auto;
    }

    .search-datebar-range {
        width: 100%;
        margin-left: 0;
    }

    .search-datebar-field {
        flex: 1;
    }

    .search-datebar .filter-date {
        width: 100%;
        min-width: 0;
    }
}

.nav-search-wrapper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    position: relative;
    width: 100%;
    max-width: 880px;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.nav-search-input-shell {
    position: relative;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.nav-search-controls {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
    min-width: 0;
}

.nav-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #888;
    pointer-events: none;
    z-index: 1;
}

.nav-search-mode-pill {
    flex: 0 0 auto;
    min-width: 72px;
    text-align: center;
    padding: 9px 12px;
    border-radius: 999px;
    /* T-499: die Pille hat selbst keinen deckenden Grund - sie liegt direkt
       auf .nav-search, das seinerseits keinen eigenen Hintergrund setzt und
       damit den der .navbar durchscheinen laesst (transparent oben, weiss
       gescrollt). --header-accent-rgb traegt deshalb pro Zustand die
       passende Farbe, nicht das feste Markengelb. */
    background: rgba(var(--header-accent-rgb), 0.12);
    border: 1px solid rgba(var(--header-accent-rgb), 0.35);
    color: var(--header-accent);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nav-search-input {
    width: 100%;
    flex: 1;
    padding: 12px 38px 12px 42px;
    background: #2a2a2a;
    border: 2px solid var(--accent);
    border-radius: 25px;
    color: #fff;
    font-size: 0.95rem;
    transition: all 0.2s;
    min-width: 150px;
}

.nav-search-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #bfbfbf;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.nav-search-clear:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.nav-search-input::placeholder {
    color: #a0a0a0;
}

.nav-search-input:focus {
    outline: none;
    background: #333;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232, 255, 0, 0.15);
}

.nav-filter-btn {
    position: relative;
    background: #242424;
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.2s;
    min-width: 44px;
    min-height: 44px;
}

.nav-filter-btn svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

/* Nur :hover - der Knopf bleibt dabei auf seinem eigenen deckenden
   #242424-Grund (siehe .nav-filter-btn oben), unberuehrt vom Header-Zustand.
   Markengelb bleibt hier deshalb richtig, siehe .active gleich darunter. */
.nav-filter-btn:hover svg {
    color: var(--accent);
}

/* .active ERSETZT den deckenden Grund durch eine durchsichtige Tinte (siehe
   Regel direkt darunter) - der Knopf liegt dann wieder frei auf .navbar,
   deshalb hier --header-accent statt des festen Markengelbs (T-499). */
.nav-filter-btn.active svg {
    color: var(--header-accent);
}

.nav-filter-btn.active {
    background: rgba(var(--header-accent-rgb), 0.15);
    border-color: rgba(var(--header-accent-rgb), 0.35);
}

.nav-search-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--header-border-soft);
    color: var(--header-fg);
    font-size: 1.35rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 12px;
    min-width: 44px;
    min-height: 44px;
}

.nav-search-close:hover {
    color: var(--header-accent);
    border-color: rgba(var(--header-accent-rgb), 0.35);
}

@supports (padding: max(0px)) {
    .nav-search {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
}

/* Nav actions container (right side) */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Search toggle button in navbar */
.search-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-toggle-btn svg {
    width: 22px;
    height: 22px;
    color: var(--header-fg);
    transition: color 0.2s;
}

.search-toggle-btn:hover svg {
    color: var(--header-accent);
}

.search-wrapper {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #888;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 14px 90px 14px 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    border-radius: 50px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.search-input::placeholder {
    color: #888;
}

.search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent);
}

.search-clear {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    transition: color 0.2s;
    z-index: 10;
}

.search-clear:hover {
    color: #fff;
}


/* MOBILE SEARCH */
@media (max-width: 768px) {
    .nav-search {
        position: fixed;
        top: calc(70px + env(safe-area-inset-top));
        left: 0;
        right: 0;
        padding: 8px 12px 10px;
        background: linear-gradient(180deg, rgba(8, 8, 8, 0.96), rgba(8, 8, 8, 0.92));
        backdrop-filter: blur(8px);
    }

    .search-container {
        padding: 10px 12px;
        top: 56px;
    }
    
    .search-wrapper {
        max-width: 100%;
    }
    
    .search-input {
        padding: 10px 80px 10px 40px;
        font-size: 0.9rem;
        border-radius: 25px;
    }

    .nav-search-wrapper {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
    }

    .nav-search-mode-pill {
        min-width: 0;
        padding: 8px 10px;
        font-size: 0.75rem;
        letter-spacing: 0.06em;
    }

    .nav-search-input {
        min-width: 0;
        font-size: 0.88rem;
        padding: 11px 40px 11px 40px;
    }

    .nav-search-icon {
        left: 12px;
        width: 17px;
        height: 17px;
    }

    .nav-search-clear {
        right: 8px;
        width: 22px;
        height: 22px;
        font-size: 1.05rem;
    }

    .nav-filter-btn,
    .nav-search-close {
        width: 40px;
        height: 40px;
        min-width: 40px;
        padding: 0;
        border-radius: 12px;
    }

    .nav-search-close {
        font-size: 1.25rem;
    }
    
    .search-icon {
        left: 12px;
        width: 18px;
        height: 18px;
    }
    
    .search-clear {
        right: 10px;
        font-size: 1.2rem;
        padding: 6px;
    }
    
}

@media (max-width: 560px) {
    .navbar {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .nav-search {
        left: 0;
        right: 0;
        width: auto;
        padding: 8px max(10px, env(safe-area-inset-right)) 12px max(10px, env(safe-area-inset-left));
    }

    .nav-search-wrapper {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "mode controls"
            "shell shell";
        align-items: center;
        row-gap: 10px;
        column-gap: 10px;
        max-width: 100%;
    }

    .nav-search-mode-pill {
        grid-area: mode;
        justify-self: start;
        max-width: 100%;
        padding: 8px 14px;
        font-size: 0.75rem;
    }

    .nav-search-input-shell {
        grid-area: shell;
        width: 100%;
    }

    .nav-search-controls {
        grid-area: controls;
        justify-self: end;
    }

    .nav-search-input {
        min-height: 46px;
        border-radius: 24px;
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .nav-search {
        padding: 8px max(8px, env(safe-area-inset-right)) 12px max(8px, env(safe-area-inset-left));
    }

    .nav-search-wrapper {
        row-gap: 8px;
        column-gap: 8px;
    }

    .nav-search-mode-pill {
        padding: 7px 12px;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }

    .nav-search-controls {
        gap: 6px;
    }

    .nav-filter-btn,
    .nav-search-close {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        border-radius: 10px;
    }
}

/* ==========================================
   FILTER PANEL STYLES
   ========================================== */

.filter-panel {
    display: none;
    position: fixed;
    top: calc(70px + 62px + env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    max-width: 760px;
    margin: 0 auto;
    background: rgba(7, 7, 7, 0.98);
    border-radius: 18px;
    padding: 18px;
    border: 1px solid rgba(232, 255, 0, 0.22);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.45);
    z-index: 1000;
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    animation: filterSlideDown 0.3s ease;
}

@media (max-width: 768px) {
    .filter-panel {
        left: 8px;
        right: 8px;
        top: calc(70px + 56px + env(safe-area-inset-top));
        max-height: calc(100dvh - 138px);
        padding: 14px;
        border-radius: 14px;
    }
}

.filter-panel.visible {
    display: block;
}

@keyframes filterSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-section {
    margin-bottom: 20px;
}

.filter-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.filter-panel-title {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}

.filter-panel-subtitle {
    margin-top: 4px;
    color: #919191;
    font-size: 0.85rem;
}

.filter-panel-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(232, 255, 0, 0.28);
    background: rgba(232, 255, 0, 0.08);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.filter-section:last-of-type {
    margin-bottom: 15px;
}

.filter-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.filter-grid {
    display: grid;
    grid-template-columns: 1fr 170px;
    gap: 10px;
}

.search-mode-field {
    min-width: 0;
}

.search-mode-field .filter-select {
    width: 100%;
}

.filter-select {
    flex: 1;
    padding: 12px 16px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent);
    background-color: #222;
}

.filter-select option {
    background: #1a1a1a;
    color: #fff;
}

.filter-text-input {
    background-image: none;
    cursor: text;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 16px;
}

.filter-location-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.filter-secondary-btn {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1f1f1f;
    color: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-secondary-btn:hover {
    border-color: rgba(232, 255, 0, 0.35);
    color: var(--accent);
}

.filter-location-status {
    margin-top: 8px;
    font-size: 0.82rem;
    color: #888;
}

.filter-location-status.active {
    color: #c7d96a;
}

.filter-loading-inline {
    display: inline-block;
    color: #777;
    font-size: 0.84rem;
}

/* Category Chips */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chip {
    /* 44px Tap-Ziel (T-025, gemessen am 03.08.: 29px bei 390px Viewport).
       inline-flex statt der impliziten inline-block-Darstellung, damit
       min-height greift und der Text darin senkrecht mittig sitzt - mit
       Padding allein waere der Chip nur hoeher, die Schrift aber oben. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 20px;
    color: #ccc;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.filter-chip:hover {
    background: #252525;
    color: #fff;
}

.filter-chip.active {
    background: rgba(232, 255, 0, 0.2);
    border-color: var(--accent);
    color: var(--accent);
}

.filter-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #333;
    border-radius: 10px;
    background: #171717;
    color: #fff;
    cursor: pointer;
}

.filter-checkbox-row input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
}

/* Date Quick Buttons */
.filter-date-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.date-quick-btn {
    /* 44px Tap-Ziel wie bei .filter-chip (T-025, gemessen 33px). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #ccc;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.date-quick-btn:hover {
    background: #252525;
    color: #fff;
}

/* .active ersetzt den deckenden #1a1a1a-Grund durch eine Tinte - dieser
   Knopf lebt ausschliesslich in .search-datebar (Header), liegt dann wieder
   frei auf .navbar, deshalb --header-accent statt des festen Markengelbs
   (T-499, gleiche Begruendung wie .nav-filter-btn.active). */
.date-quick-btn.active {
    background: rgba(var(--header-accent-rgb), 0.2);
    border-color: var(--header-accent);
    color: var(--header-accent);
}

/* Date Inputs */
.filter-date {
    width: 100%;
    padding: 10px 12px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-date:focus {
    outline: none;
    border-color: var(--accent);
}

.filter-date::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* Filter Actions */
.filter-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-reset {
    background: none;
    border: none;
    color: #888;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 10px 0;
    transition: color 0.2s;
}

.filter-reset:hover {
    color: #fff;
}

.filter-apply {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 0.95rem;
}

/* Mobile Filter Adjustments */
@media (max-width: 768px) {
    .filter-panel {
        padding: 15px;
        border-radius: 12px;
        margin-top: 10px;
    }
    
    .filter-section {
        margin-bottom: 16px;
    }
    
    .filter-chips {
        gap: 6px;
    }
    
    .filter-chip {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .filter-grid {
        grid-template-columns: 1fr;
    }
    
    .filter-date-quick {
        gap: 6px;
    }
    
    .date-quick-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .filter-actions {
        flex-direction: column-reverse;
        gap: 12px;
    }
    
    .filter-apply {
        width: 100%;
        justify-content: center;
    }
    
    .filter-reset {
        width: 100%;
        text-align: center;
    }

    .nav-search-wrapper {
        gap: 8px;
    }

    .nav-search-mode-pill {
        min-width: 0;
        padding: 8px 10px;
        font-size: 0.75rem;
    }
}


/* ==========================================
   NEWS SECTION STYLES
   ========================================== */

/* News uses event-card carousel styles - only extras here */

.card-image.no-image {
    background: #1a1a1a;
}

/* Fallback-Look, wenn ein Kartenbild nicht geladen werden kann (onerror im
   LazyLoader). Gebrandeter Verlauf statt leerer dunkler Kasten. */
.card-image.fallback-visual {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(232,255,0,0.10), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(120,140,255,0.20), transparent 48%),
        linear-gradient(140deg, #111318 0%, #171b22 45%, #0f1014 100%);
    background-size: cover;
    background-color: #12141a;
}

.news-card-link .card-content {
    display: flex;
    flex-direction: column;
}

.news-card-source {
    margin-top: auto;
    padding-top: 8px;
    font-size: 0.75rem;
    color: #888;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Loading Spinner (shared) */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==========================================
   MEDIEN / VIDEO SECTION STYLES
   ========================================== */

/* Video cards use event-card styles - extras here */
.video-card {
    position: relative;
}

.video-card .card-image {
    position: relative;
}

.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    transition: background 0.3s ease;
    /* Ueber den Bildebenen aus card-image.css (::before/::after, z-index 0) -
       ohne z-index laege der Play-Button darunter. */
    z-index: 1;
}

.video-card:hover .video-play-overlay {
    background: rgba(0,0,0,0.5);
}

.video-play-btn {
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.video-card:hover .video-play-btn {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--accent);
}

.video-play-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--accent);
    margin-left: 4px;
}

.video-card .card-category {
    background: rgba(232, 255, 0, 0.9);
    color: #000;
}

/* Video Lightbox */
.video-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.video-lightbox.active {
    display: flex;
}

.video-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.95);
    cursor: pointer;
}

.video-lightbox-content {
    position: relative;
    width: 90vw;
    max-width: 1200px;
    aspect-ratio: 16/9;
    z-index: 1;
}

.video-lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.video-lightbox-close:hover {
    color: var(--accent);
}

.video-lightbox-player {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.video-lightbox-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.external-consent-placeholder {
    width: 100%;
    height: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(232, 255, 0, 0.12), transparent 42%),
        #090909;
    color: #fff;
}

.external-consent-placeholder strong {
    color: var(--accent);
    font-size: 1.05rem;
}

.external-consent-placeholder p {
    max-width: 560px;
    margin: 0;
    color: #ccc;
    line-height: 1.45;
}

.external-consent-placeholder a {
    color: var(--accent);
    font-size: 0.9rem;
}

.external-consent-button {
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #000;
    padding: 11px 16px;
    min-height: 44px;
    font-weight: 700;
    cursor: pointer;
}

.external-content-locked {
    background:
        linear-gradient(135deg, rgba(232, 255, 0, 0.14), rgba(255, 255, 255, 0.04)),
        #151515 !important;
}

.external-content-chip {
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    /* Sitzt bei den Mediathek-Quellkarten direkt in .card-image und muss
       ueber deren Bildebenen liegen (card-image.css). */
    position: relative;
    z-index: 2;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .video-lightbox-content {
        width: 95vw;
        max-width: none;
        aspect-ratio: 16/9;
    }
    
    .video-lightbox-close {
        position: absolute;
        top: -45px;
        right: 0;
        background: rgba(255,255,255,0.2);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        font-size: 30px;
    }
    
    .video-lightbox-player {
        border-radius: 0;
    }
    
    .video-lightbox-player iframe {
        width: 100%;
        height: 100%;
    }
}

/* ==========================================
   MEDIEN: Source-Card overlays + Modal
   ========================================== */

.medien-source-card .medien-source-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    z-index: 2;
}

.medien-source-card.is-loading .card-image {
    background: linear-gradient(100deg, #141414 30%, #1d1d1d 50%, #141414 70%);
    background-size: 200% 100%;
    animation: medien-skeleton 1.4s ease-in-out infinite;
}
.medien-source-card.is-loading .medien-source-count.is-loading {
    background: rgba(0, 0, 0, 0.55);
    color: #aaa;
}
@keyframes medien-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.medien-source-card .medien-source-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transition: opacity 180ms ease;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
    z-index: 1;
}
.medien-source-card:hover .medien-source-play,
.medien-source-card:focus-visible .medien-source-play { opacity: 1; }

.medien-source-description {
    color: #bdbdbd;
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 4px 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.medien-modal-title-wrap { min-width: 0; flex: 1 1 auto; }
.medien-modal-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.medien-modal-description {
    margin-top: 6px;
    color: #b5b5b5;
    font-size: 0.85rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 860px) {
    .medien-modal-description { -webkit-line-clamp: 3; font-size: 0.82rem; }
}

/* Source modal (player + playlist sidebar) */
.medien-modal {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.medien-modal.is-open { display: flex; }

.medien-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.86);
    backdrop-filter: blur(3px);
}

.medien-modal-content {
    position: relative;
    width: min(1180px, 100%);
    max-height: 94vh;
    background: #0d0d0d;
    border: 1px solid #222;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.medien-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #222;
    background: #0a0a0a;
    flex-shrink: 0;
}
/* Spalte: Titelzeile (Badge + Titel) oben, Beschreibung darunter. Als Zeile
   hat die Beschreibung den Titel bis v1.5.456 auf 0px Breite gedrueckt -
   bei jeder Quelle mit Beschreibung war der Name im Kopf unsichtbar. */
.medien-modal-title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.medien-modal-badge {
    background: var(--accent);
    color: #000;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.medien-modal-title {
    margin: 0;
    font-size: 1.05rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.medien-modal-close {
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
}
.medien-modal-close:hover { color: #fff; background: #1a1a1a; }

.medien-modal-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.medien-modal-player {
    background: #000;
    aspect-ratio: 16 / 9;
    min-height: 0;
    position: relative;
}
.medien-modal-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.medien-modal-sidebar {
    border-left: 1px solid #222;
    background: #0b0b0b;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.medien-modal-sidebar-title {
    padding: 12px 14px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ad20f;
    border-bottom: 1px solid #1a1a1a;
}
.medien-modal-list {
    overflow-y: auto;
    flex: 1 1 auto;
    padding: 6px;
    -webkit-overflow-scrolling: touch;
}
.medien-modal-list::-webkit-scrollbar { width: 6px; }
.medien-modal-list::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

.medien-modal-list-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    transition: background-color 120ms ease;
}
.medien-modal-list-item:hover,
.medien-modal-list-item:focus-visible {
    background: #1a1a1a;
    outline: none;
}
.medien-modal-list-item.active {
    background: #1f2a00;
}
.medien-modal-list-thumb {
    width: 110px;
    aspect-ratio: 16 / 9;
    background-color: #111;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
}
.medien-modal-list-title {
    color: #eee;
    font-size: 0.86rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Podcast-Listeneintraege zeigen zusaetzlich Datum/Dauer unter dem Titel -
   YouTube-Eintraege haben dieses Element nicht (nur .medien-modal-list-title
   direkt im Grid) und bleiben unveraendert. */
.medien-modal-list-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.medien-modal-list-meta {
    color: #888;
    font-size: 0.75rem;
}

/* Podcast-Player: Text + <audio> statt 16:9-Video, deshalb per Modifier-
   Klasse vom festen YouTube-Seitenverhaeltnis befreit (siehe .medien-modal-
   player weiter oben) und stattdessen scrollbar. */
.medien-modal-player.is-podcast {
    aspect-ratio: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.medien-podcast-player {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.medien-podcast-player-image {
    aspect-ratio: 1 / 1;
    max-height: 280px;
    background-color: #111;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.medien-podcast-player-body {
    padding: 16px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.medien-podcast-player-title {
    margin: 0;
    font-size: 1.05rem;
    color: #fff;
    line-height: 1.3;
}
.medien-podcast-player-meta {
    color: #9ad20f;
    font-size: 0.8rem;
    font-weight: 600;
}
.medien-podcast-audio {
    width: 100%;
    display: block;
}
.medien-podcast-player-description {
    color: #ccc;
    font-size: 0.88rem;
    line-height: 1.5;
}
.medien-podcast-website-link {
    color: var(--accent);
    font-size: 0.85rem;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Mobile: stack player + playlist */
@media (max-width: 860px) {
    .medien-modal {
        padding: 0;
        align-items: stretch;
    }
    .medien-modal-content {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }
    .medien-modal-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }
    .medien-modal-sidebar {
        border-left: none;
        border-top: 1px solid #222;
        max-height: 55vh;
    }
    .medien-modal-list-thumb {
        width: 92px;
    }
    .medien-modal-list-item {
        grid-template-columns: 92px 1fr;
    }
    .medien-podcast-player-image {
        max-height: 200px;
    }
}

/* ==========================================
   NOTIFICATION CENTER
   ========================================== */

/* Bell Button */
.notification-bell {
    position: relative;
    background: none;
    border: none;
    color: var(--header-fg);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s;
}

.notification-bell:hover {
    color: var(--header-accent);
}

.notification-bell svg {
    width: 22px;
    height: 22px;
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--accent);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Notification Center Panel */
.notification-center {
    position: fixed;
    top: 60px;
    right: 10px;
    width: calc(100% - 20px);
    max-width: 360px;
    max-height: calc(100vh - 80px);
    background: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.notification-center.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.notification-overlay.active {
    opacity: 1;
    visibility: visible;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.notification-title {
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
}

.notification-close {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.notification-close:hover {
    color: #fff;
}

.notification-list {
    overflow-y: auto;
    flex: 1;
    padding: 8px 0;
}

.notification-empty {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.notification-empty p {
    margin: 0;
}

.notification-hint {
    font-size: 0.85rem;
    margin-top: 8px !important;
    color: #888;
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    transition: background 0.2s;
}

.notification-item:hover {
    background: rgba(255,255,255,0.05);
}

.notification-item.unread {
    background: rgba(232,255,0,0.05);
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
}

.notification-item {
    position: relative;
    padding-left: 24px;
}

.notification-icon {
    width: 40px;
    height: 40px;
    background: #2a2a2a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-text {
    font-size: 0.9rem;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
    max-height: 2.6em; /* 2 Zeilen */
    word-wrap: break-word;
}

/* Expanded State */
.notification-item.expanded .notification-text {
    display: block;
    -webkit-line-clamp: unset;
    max-height: 500px; /* Genug für langen Text */
}

/* Expand Indicator */
.notification-item .expand-indicator {
    font-size: 0.75rem;
    color: var(--accent);
    margin-top: 4px;
    display: none;
    font-weight: 500;
}

.notification-item.has-more .expand-indicator {
    display: block;
}

.notification-item.expanded .expand-indicator::before {
    content: '▲ Weniger';
}

.notification-item:not(.expanded) .expand-indicator::before {
    content: '▼ Mehr lesen';
}

.notification-time {
    font-size: 0.75rem;
    color: #666;
}

/* ==========================================
   SEARCH RESULTS
   ========================================== */

.search-results-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: rgba(18, 18, 18, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.search-results-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.search-results-subtitle {
    margin-top: 4px;
    color: #8f8f8f;
    font-size: 0.85rem;
    line-height: 1.35;
}

.search-results-meta {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(232, 255, 0, 0.25);
    background: rgba(232, 255, 0, 0.08);
}

.search-results-group-title {
    margin: 18px 0 10px;
    color: var(--accent);
    font-size: 1rem;
    font-weight: 700;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Search Results Grid */
.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 10px 0;
}

@media (max-width: 600px) {
    /* Eine Karte pro Reihe (Beno, 02.09.2026). Bei 390px ist die Karte damit
       358px breit statt 167px - erst dadurch passt der Kartentext in die
       4:5-Flaeche, und die Suche sieht aus wie die Startseite. Zwei Spalten
       koennen das nicht: zwei Karussell-Karten waeren 512px breit. */
    .search-results-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .search-results-head {
        flex-direction: column;
    }
}

/* Empty State */
.search-empty {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.search-empty p {
    margin-bottom: 10px;
}

.search-empty-hint {
    font-size: 0.85rem;
    color: #555;
}

/* Card description for search results */
.card-desc {
    font-size: 0.8rem;
    color: #888;
    margin-top: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================================
   UI-Audit 30.07.2026 - Suche/Filter kompakter, Cards als echte Links,
   sichtbarer Tastaturfokus. Kein Farb- oder Konzeptwechsel.
   ========================================================================== */

/* --- Filter-Button: Anzahl aktiver Filter sichtbar machen --------------- */
.nav-filter-btn {
    position: relative;
}

.nav-filter-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--accent);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
}

.nav-filter-count[hidden] {
    display: none;
}

/* --- Von/Bis mobil erst auf Klick ("Datum") ---------------------------- */
.date-range-toggle {
    display: none;
}

@media (max-width: 560px) {
    /* Der Label-Text kostete eine ganze Zeile - die Chips erklaeren sich selbst. */
    .search-datebar-label {
        display: none;
    }

    .date-range-toggle {
        display: inline-flex;
        align-items: center;
    }

    .search-datebar .search-datebar-range {
        display: none;
    }

    .search-datebar.range-open .search-datebar-range {
        display: flex;
        flex-wrap: wrap;
    }
}

/* --- Tap-Ziele auf Touch-Geraeten (Richtwert 44px, Such-QA 31.07.) -----
   pointer:coarse statt Breiten-Media-Query: auch Tablets sind Touch. Am
   Desktop (Maus) bleiben die kompakten Masse. */
@media (pointer: coarse) {
    .date-quick-btn,
    .search-datebar .date-quick-btn,
    .filter-chip,
    .filter-secondary-btn {
        min-height: 44px;
    }

    .nav-filter-btn,
    .nav-search-close,
    .search-toggle-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .nav-search-clear {
        width: 40px;
        height: 40px;
    }

    /* Platz fuer den groesseren Clear-Button, sonst ueberlappt seine
       Trefferflaeche die letzten Zeichen im Eingabefeld. */
    .nav-search-input {
        padding-right: 54px;
    }
}

/* --- Filter-Panel: Aktionen bleiben unten sichtbar --------------------- */
.filter-panel {
    /* Panel selbst scrollt nicht mehr - das macht der Inhalt, damit
       "Anwenden"/"Zuruecksetzen" nie unter die Kante rutschen. */
    display: none;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.filter-panel.visible {
    display: flex;
}

.filter-panel-header,
.filter-panel-scroll,
.filter-panel .filter-actions {
    padding-left: 18px;
    padding-right: 18px;
}

.filter-panel-header {
    padding-top: 18px;
    padding-bottom: 12px;
}

.filter-panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.filter-panel .filter-actions {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    background: rgba(7, 7, 7, 0.98);
}

@media (max-width: 768px) {
    .filter-panel {
        padding: 0;
    }

    .filter-panel-header,
    .filter-panel-scroll,
    .filter-panel .filter-actions {
        padding-left: 14px;
        padding-right: 14px;
    }

    .filter-panel-header {
        padding-top: 14px;
        padding-bottom: 10px;
    }
}

/* --- Event-Card als echter Link ---------------------------------------- */
.event-card > .card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.event-card > .card-link .card-image {
    flex: 0 0 60%;
}

.event-card > .card-link .card-content {
    flex: 1 1 auto;
    height: auto;
}

/* --- Suchergebnisse: dieselbe Karte wie im Karussell ---------------------
   Steht bewusst NACH den `.event-card > .card-link`-Regeln darueber: die
   setzen `flex: 0 0 60%` auf das Bild, und bei gleicher Spezifitaet gewinnt
   die spaetere Regel. Ein Block weiter oben in der Datei wurde stillschweigend
   ueberstimmt - das Bild blieb bei 60% einer Hoehe, die es selbst mitbestimmt.

   Vorgeschichte (01.09.2026, "NOX - Festival fuer Elektronische Musik"): Im
   Such-Grid stand die Karte bei 390px auf 167px Breite und mit
   `aspect-ratio: 4/5` damit auf 208px Hoehe. Textflaeche 83px - gebraucht
   werden 125px, und zwar schon fuer einen EINZEILIGEN Titel: 81px fuer Datum,
   Titel und Ort plus die 44px, in denen Merken und Teilen sitzen (die haengen
   mit `bottom: 12px` an der Karte, nicht am Text). Die Ortszeile lag deshalb
   ausserhalb der Karte und wurde von `overflow: hidden` abgeschnitten, und das
   Herz sass auf der zweiten Titelzeile.

   Die Karussell-Karte hat bei denselben 4:5 genau 125px Textflaeche - sie ist
   aber 250px breit. Der Unterschied war also nie das Layout, sondern die
   Breite. Alles proportional mitzuschrumpfen scheidet aus: 13,6px Text mal
   167/250 sind 9,1px, und 12px ist die Untergrenze aus der Mobile-Regel.

   Beno hat sich am 02.09.2026 fuer die Breite entschieden: auf dem Handy eine
   Karte pro Reihe. Damit sieht die Suche aus wie die Startseite, zum Preis
   von halb so vielen Treffern je Bildschirm.

   Zwei Regeln tragen das:

   1. Die 4:5-Proportion kommt als `min-height` zurueck, nicht als
      `aspect-ratio`. 50cqw ist exakt die Contenthoehe eines 4:5-Blattes
      (Bild 4:3 = 75cqw, Text 50cqw, zusammen 125cqw = 4:5). Solange der Text
      hineinpasst, ist die Karte also auf den Pixel wie im Karussell; passt er
      nicht - drei Zeilen Titel in einer schmalen Desktop-Spalte -, waechst sie
      um die fehlenden Pixel, statt den Ort abzuschneiden. Ein festes
      `aspect-ratio` kann das nicht: es erzeugt eine Hoehe, die der Inhalt
      ueberlaeuft.
   2. Die Icon-Reihe bekommt ihre 44px als Padding reserviert. Der Text kann
      dann gar nicht erst dorthin wachsen, wo Merken und Teilen stehen.

   Nur im Such-Grid. Die Karussell-Karten sind unberuehrt. */
.search-results-grid .event-card {
    aspect-ratio: auto;
    /* Bezugsgroesse fuer die cqw-Rechnung unten. */
    container-type: inline-size;
}

.search-results-grid .event-card .card-image,
.search-results-grid .event-card > .card-link .card-image {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 4 / 3;
}

.search-results-grid .event-card .card-content,
.search-results-grid .event-card > .card-link .card-content {
    height: auto;
    min-height: 50cqw;
}

/* Platz fuer die Icon-Reihe am Kartenfuss - aber nur auf Karten, die
   ueberhaupt welche bekommen (bookmarks.js und share-cards.js haengen sie an
   [data-event-id] bzw. [data-job-id]). Auf einer Location-Karte waere der
   Streifen nur Leerraum. 44px = 12px Abstand + 28px Icon am Handy + 4px
   Luft. Zaehlt dank `box-sizing: border-box` in die min-height hinein, die
   4:5-Geometrie bleibt also exakt. */
.search-results-grid .event-card[data-event-id] .card-content,
.search-results-grid .event-card[data-job-id] .card-content {
    padding-bottom: 44px;
}

/* Drei Zeilen sind genug: eine einzelne sehr lange Ueberschrift wuerde sonst
   die ganze Rasterreihe aufblaehen. */
.search-results-grid .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Sichtbarer Tastaturfokus ----------------------------------------- */
/* .nav-search-clear bleibt hier: der Ring liegt innerhalb der immer
   dunklen .nav-search-input (#2a2a2a) - --header-accent waere dort in der
   gescrollten Weiss-Fassung zu dunkel fuer diesen Grund (2,3:1 statt 12,8:1
   mit dem festen Markengelb, gemessen). */
.card-link:focus-visible,
.bookmark-btn:focus-visible,
.calendar-btn:focus-visible,
.nav-search-clear:focus-visible,
.filter-chip:focus-visible,
.menu-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* T-499: die uebrigen Fokusringe hier liegen frei auf .navbar (Ring reicht
   ueber den eigenen Rand hinaus in den Abstand zwischen den Kopfzeilen-
   Knoepfen) und muessen deshalb dem Header-Zustand folgen statt dem festen
   Markengelb, das auf Weiss kaum sichtbar waere. */
.hamburger:focus-visible,
.nav-filter-btn:focus-visible,
.search-toggle-btn:focus-visible,
.notification-bell:focus-visible,
.nav-search-close:focus-visible,
.date-quick-btn:focus-visible {
    outline: 2px solid var(--header-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.card-link:focus-visible {
    outline-offset: -2px;
}

/* Die Merk-/Kalender-Icons stehen sonst nur auf opacity .5 - im Fokus
   muessen sie voll sichtbar sein. */
.bookmark-btn:focus-visible,
.calendar-btn:focus-visible {
    opacity: 1;
}

/* --- Standort-Menü im Header ------------------------------------------ */
.location-menu {
    position: relative;
}

.location-menu-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--header-fg);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.location-menu-toggle:hover,
.location-menu-toggle.is-active,
.location-menu.is-open .location-menu-toggle {
    color: var(--header-accent);
    background: rgba(var(--header-accent-rgb), 0.1);
}

.location-menu-toggle svg {
    width: 22px;
    height: 22px;
}

.location-menu-panel {
    position: fixed;
    top: 74px;
    right: 60px;
    z-index: 1105;
    width: min(340px, calc(100vw - 20px));
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: #1a1a1a;
    color: var(--text);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.location-menu-eyebrow,
.location-menu-copy,
.location-menu-hint,
.location-menu-status {
    margin: 0;
}

.location-menu-eyebrow {
    color: var(--accent);
    /* 0.72rem waren gemessene 11.52px und damit unter dem Richtwert von 12px
       (Regel Beno, 31.07.2026). Bei einer Auszeichnung mit Sperrung faellt das
       doppelt auf. Gemessen bei 390/834/1440 am 24.08.2026. */
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    /* S2.7: Markup steht seit 25.09.2026 in Normalschreibung (public/js/
       location-bar.js), damit die Woerterbuch-Ernte greift - text-transform
       zieht die Optik unveraendert gross (siehe tests/i18n-versalien-labels
       -Muster, dieselbe Loesung wie bei den Detailseiten-Labels). */
    text-transform: uppercase;
}

.location-menu-copy {
    margin-top: 7px;
    font-size: 0.92rem;
    line-height: 1.42;
}

.location-menu-hint,
.location-menu-status {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.8rem;
}

.location-menu-status {
    min-height: 1em;
}

.location-menu-status.is-error {
    color: #ff8080;
}

.location-menu-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.location-menu-btn {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    font: inherit;
    font-size: 0.86rem;
    cursor: pointer;
}

.location-menu-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.location-menu-btn-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 700;
}

.location-menu-btn-primary:hover {
    background: #fff;
    border-color: #fff;
}

.location-menu-btn-quiet {
    color: var(--muted);
}

.location-menu-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.location-menu-picker {
    display: grid;
    gap: 5px;
    margin-top: 12px;
}

.location-menu-label {
    color: var(--muted);
    font-size: 0.78rem;
}

.location-menu-select {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

/* .location-menu-toggle liegt im Header (T-499: --header-accent). Das
   Popup (.location-menu-panel) bleibt immer dunkel, unabhaengig vom
   Header-Zustand - seine Kinder bleiben deshalb beim festen Markengelb. */
.location-menu-toggle:focus-visible {
    outline: 2px solid var(--header-accent);
    outline-offset: 2px;
}

.location-menu-btn:focus-visible,
.location-menu-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .location-menu-panel {
        top: 60px;
        right: 10px;
    }
}

/* --- Naehe-Sortierung: Bedienleiste (Legacy, nicht mehr auf der Landing) */
/* Mobile first entworfen und auf 390/834/1440 px gemessen: die Leiste ist
   auf dem Handy einspaltig, ab Tablet steht der Text neben den Knoepfen. */
.location-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.location-bar.is-active {
    border-color: rgba(232, 255, 0, 0.35);
}

.location-bar-text {
    margin: 0;
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.4;
}

.location-bar-pin {
    color: var(--accent);
    margin-right: 6px;
}

.location-bar-hint {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    margin-top: 2px;
}

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

.location-bar-btn {
    /* 44px Mindesthoehe: Tap-Ziel-Regel, gilt auch fuer den Desktop. */
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    flex: 1 1 auto;
}

.location-bar-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.location-bar-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.location-bar-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    font-weight: 600;
}

.location-bar-btn-primary:hover {
    background: #fff;
    border-color: #fff;
}

.location-bar-btn-quiet {
    flex: 0 1 auto;
    color: var(--muted);
}

.location-bar-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.location-bar-label {
    color: var(--muted);
    font-size: 0.78rem;
}

.location-bar-select {
    min-height: 44px;
    /* Ohne min-width quetscht Safari das Select im Flex-Container auf wenige
       Pixel zusammen - dieselbe Falle wie bei den Suchfeldern. */
    min-width: 80px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
}

.location-bar-status {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    min-height: 1em;
}

.location-bar-status.is-error {
    color: #ff8080;
}

.location-bar-btn:focus-visible,
.location-bar-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (min-width: 700px) {
    .location-bar {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .location-bar-text {
        flex: 1 1 240px;
    }

    .location-bar-btn {
        flex: 0 0 auto;
    }

    .location-bar-picker {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
    }

    .location-bar-select {
        width: auto;
        min-width: 200px;
    }

    .location-bar-status {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   SPRACH-UMSCHALTER (Serbska Phase 1, docs/SERBSKA.md)
   Deutsch | Hornjoserbsce | Dolnoserbski - im Menue-Overlay (#langSwitcher,
   ganz oben, vor den Menuepunkten) und im Footer der Detailseiten. Dropdown
   statt Button-Reihe seit 26.09.2026: ein zugeklappter Knopf mit Flagge+Name,
   die Liste klappt darunter auf. Diese Regeln sind identisch mit dem
   Client-eigenen <style> in public/js/i18n.js (ensureSwitcherStyles) - dort
   stehen sie zusaetzlich mit var(--x, Rueckfall), weil nicht jede Seite mit
   #langSwitcher dieses Stylesheet laedt. Mobile first: Tap-Ziele bleiben
   immer >= 44px hoch (Regel 31.07.2026).
   ========================================================================== */
.lang-switcher {
    position: relative;
    margin-top: 8px;
}

.lang-switcher__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
}

.lang-switcher__toggle:hover,
.lang-switcher__toggle:focus-visible {
    border-color: var(--accent);
}

.lang-switcher__toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.lang-switcher__flag {
    flex: 0 0 auto;
    display: inline-flex;
    width: 22px;
    height: 16px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.lang-switcher__flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lang-switcher__name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lang-switcher__chevron {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--text);
    transition: transform 0.2s;
}

.lang-switcher.is-open .lang-switcher__chevron {
    transform: rotate(180deg);
}

.lang-switcher__panel {
    list-style: none;
    margin: 6px 0 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.lang-switcher__panel[hidden] {
    display: none;
}

.lang-switcher__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.lang-switcher__btn:hover,
.lang-switcher__btn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

.lang-switcher__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.lang-switcher__btn.is-active {
    background: var(--accent);
    color: var(--accent-contrast);
}

.lang-switcher__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0, 0, 0, 0);
}

/* =====================================================
   ENTDECKEN (Tab #entdecken, js/entdecken.js)
   Mobile first: eine Kartenspalte, Chips in einer waagerecht
   scrollenden Zeile statt vier Umbruchzeilen fuer zehn Staedte.
   ===================================================== */
.entdecken-header {
    margin-bottom: 12px;
}

.entdecken-subtitle {
    color: var(--muted, #aaa);
    font-size: 0.9rem;
    margin: 0;
}

.entdecken-chip-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 8px;
    margin-bottom: 4px;
}

.entdecken-chip-row::-webkit-scrollbar { display: none; }

.entdecken-chip-row .filter-chip {
    flex: 0 0 auto;
    min-height: 44px;
    gap: 6px;
}

.entdecken-count {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Karten sind seit v1.5.450 dieselben .event-card wie bei Events/Jobs
   (Beno: "sollten genauso aussehen") - .entdecken-place-card ist nur der
   Zusatzhaken fuer die Tastatur-Fokusmarkierung, .entdecken-grid/-card/
   -card-media/-card-body/-card-title/-card-teaser sind damit entfallen. */
.entdecken-place-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* "Ortsansicht Oybin": das Foto zeigt die Gemeinde, nicht den Ort selbst -
   das muss auf dem Bild stehen, nicht erst in der Detailansicht. Sitzt oben
   links, weil .card-category (Rubrik) unten links und .card-photo-credit
   unten rechts im selben .card-image liegen (T-072-Konvention). z-index wie
   von card-image.css fuer Overlays im Bild verlangt (sonst unter ::after). */
.entdecken-card-caption {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 1;
    max-width: calc(100% - 16px);
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entdecken-dialog-figure[hidden] {
    display: none;
}

/* Nur noch von der Detailansicht (openDetail) benutzt, nicht mehr von der
   Karte - die zeigt die Rubrik jetzt ueber .card-category. */
.entdecken-card-meta {
    margin: 0 0 4px;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
}

.entdecken-credit {
    margin: 0;
    color: #888;
    font-size: 0.75rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.entdecken-credit a,
.entdecken-source a {
    color: inherit;
    text-decoration: underline;
}

.entdecken-empty {
    color: #999;
    font-size: 0.9rem;
    padding: 24px 0;
}

.entdecken-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.entdecken-source {
    margin: 24px 0 8px;
    color: #888;
    font-size: 0.75rem;
    line-height: 1.5;
}

.entdecken-dialog {
    /* margin: auto ausdruecklich - der globale Reset setzt 0 und nimmt dem
       Modal damit die Zentrierung (gemessen: links oben bei x=0). */
    margin: auto;
    width: min(640px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: 0;
    border: 1px solid #333;
    border-radius: 12px;
    background: #111;
    color: #eee;
    overflow: auto;
}

.entdecken-dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.entdecken-dialog-inner {
    position: relative;
    padding: 16px;
}

.entdecken-dialog-close {
    position: sticky;
    top: 0;
    float: right;
    width: 44px;
    height: 44px;
    margin: -8px -8px 0 8px;
    border: none;
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

.entdecken-dialog-figure {
    margin: 0 0 12px;
}

.entdecken-dialog-figure img {
    display: block;
    width: 100%;
    max-height: 50vh;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
}

.entdecken-dialog-title {
    margin: 0 0 10px;
    font-size: 1.25rem;
    line-height: 1.3;
    color: #fff;
    overflow-wrap: anywhere;
}

.entdecken-dialog-text {
    white-space: pre-line;
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 16px;
}

.entdecken-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.entdecken-dialog-actions .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

@media (min-width: 1100px) {
    .entdecken-dialog-inner {
        padding: 24px;
    }
}

/* Fuenf Haupt-Tabs seit "Entdecken" (v1.5.446): bei 390px lag der fuenfte
   mit den Standardabstaenden zur Haelfte ausserhalb (gemessen 486px rechte
   Kante). Enger gesetzt passen alle ohne Wischen; die 44px-Trefferflaeche
   kommt weiter aus der ::after-Regel (T-468), nicht aus dem Padding. */
@media (max-width: 420px) {
    .tab-switcher {
        gap: 6px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .main-tab {
        padding: 10px 11px;
    }
}

/* Entdecken-Karten (v1.5.450): Urheberangabe als eigene Zeile unter dem
   Text statt als Overlay - auf dem Bild lag sie ueber dem Rubrik-Label
   (.card-category sitzt bei Event-Karten unten links im Bild) und wurde
   abgeschnitten. Pflichtangabe, deshalb vollstaendig lesbar. */
/* Event-Karten haben eine feste Hoehe mit overflow:hidden - die
   Urheberzeile laege dann unsichtbar darunter (gemessen: 313px Karte, Zeile
   ab 465px). Entdecken-Karten wachsen deshalb mit; im Karussell (flex,
   stretch) sind die Karten einer Reihe trotzdem gleich hoch. */
.entdecken-place-card {
    height: auto;
    display: flex;
    flex-direction: column;
}

.entdecken-place-card .card-content {
    flex: 1 1 auto;
}

.entdecken-card-credit {
    margin: 0;
    padding: 0 14px 12px;
    color: #888;
    font-size: 0.75rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Entdecken-Hero: Titel und Untertitel auf zwei Zeilen begrenzen. Die
   .hero-title/.hero-subtitle-Kaesten haben feste Zwei-Zeilen-Hoehe (T-197,
   kein Springen beim Folienwechsel); DZT-Namen sind oft laenger ("Film-
   schaufenster - Walk of Goerliwood (Kaufhaus)") und liefen sonst in den
   Untertitel. Der innere Span kuerzt, der Kasten bleibt unveraendert. */
.entdecken-hero-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   SERBSKA-FARBEN (docs/SERBSKA.md, eigenstaendige Kopie, 24.09.2026)
   --------------------------------------------------------------------------
   Ab hier weicht diese Kopie farblich von public/css/main.css ab (Benos
   Auftrag: "die Farben, die du jetzt hast, finde ich gut, das darf bleiben" -
   das helle Design/Blau/Rot/Weiss der vorherigen eigenen /serbska-Seite;
   "der Rest soll erstmal eine 1:1-Kopie der lausitz.app sein" - Layout,
   Struktur und Verhalten oben in dieser Datei bleiben unveraendert Kopie).

   main.css nutzt Design-Tokens (tokens.css: --bg/--surface/--text/--muted/
   --accent/--border/--panel-*) an rund 100 Stellen - die Root-Ueberschreibung
   unten faerbt dadurch die meisten Komponenten automatisch um, weil sie am
   ENDE der Datei steht und bei gleicher Selektor-Spezifitaet (:root gegen
   :root) die spaetere Regel in derselben Kaskade gewinnt. Der Rest dieser
   Datei behandelt die Stellen, die stattdessen feste Hex-/rgba-Werte tragen
   (siehe Auftragstext "~89 hartkodierte Farben") und ohne gezielte Korrektur
   entweder unlesbar wuerden (heller Text auf hellem Grund) oder mit dem
   neuen Akzent zusammenstossen (dunkler Akzent auf dunklem Chip).
   ========================================================================== */

:root {
    --bg: #f7f7f5;
    --surface: #ffffff;
    --border: rgba(0, 0, 0, 0.12);
    --text: #111111;
    --muted: #5c5c5c;
    --accent: #0033a0;
    --accent-contrast: #ffffff;
    --accent-soft: rgba(0, 51, 160, 0.12);
    --panel-surface: #ffffff;
    --panel-border: rgba(0, 0, 0, 0.12);
    /* Zweiter Akzent (sorbische Flagge) - Datum/Badges, wo die Hauptseite
       den Akzent (#e8ff00) dafuer nutzt (Auftragstext). */
    --serbska-red: #d52b1e;
}

html, body {
    color: var(--text);
}

/* --------------------------------------------------------------------------
   Auf dunklem Grund gebliebene Chrome-Flaechen (Kopfzeile, Ausklapp-Menue,
   Filter-Panel, Benachrichtigungen, Medien-Player, Fusszeile). Sie sind
   weiter oben in dieser Datei bereits als eigenstaendige dunkle Flaechen
   gebaut (fest weisser Text, teils per Token) und bleiben hier bewusst
   dunkel: eine schwebende dunkle Menueflaeche oder ein dunkler Modal-Dialog
   ueber einer hellen Seite ist ein gaengiges, unauffaelliges Muster - jede
   einzelne Komponente separat zu einer hellen Variante umzubauen waere viel
   Aufwand fuer eine Seite, die laut Auftrag "erstmal" eine Kopie sein soll.
   Wo diese Flaechen main.css-Tokens verwenden (z.B. .lang-switcher__btn im
   Menue, .filter-panel-mode im Filter-Panel, Fusszeilen-Ueberschriften),
   pinnt der Block die Tokens lokal auf ihre urspruenglichen dunklen Werte
   zurueck - sonst wuerden sie den hellen Text der Root-Ueberschreibung erben
   und auf ihrem eigenen dunklen Grund verschwinden. */
.navbar,
.menu-overlay,
.filter-panel,
.notification-center,
.medien-modal-content,
.site-footer {
    --bg: #0f0f0f;
    --surface: #1a1a1a;
    --border: rgba(255, 255, 255, 0.1);
    --text: #ffffff;
    --muted: #888888;
    /* Fix 24.09.2026 (Review): dieser Block pinnte den Akzent bis dahin auf
       das Neongelb der Hauptapp (#e8ff00) zurueck statt auf Blau - genau das
       Gelb, das Beno fuer Serbska explizit ausgeschlossen hat. Jetzt ein
       helleres Blau statt des dunklen Root-Werts (#0033A0 weiter oben in
       dieser Datei): #0033A0 auf dem fast schwarzen Grund dieser Flaechen
       haette zu wenig Kontrast (Kontrastrechnung: ~1,4:1 gegen #0f0f0f,
       WCAG AA verlangt 3:1 fuer UI-Elemente/grosse Flaechen) - #4D7CFF
       kommt auf ~5,1:1. .navbar ist seit diesem Fix mit in der Selektor-
       liste: sie blieb zwar schon dunkel (eigene background-Regel gleich
       darunter), hatte aber keinen eigenen --accent und erbte dadurch den
       hellen Root-Wert - der aktive Sprachbutton/das Filter-Icon waren auf
       dem dunklen Grund kaum noch zu erkennen. */
    --accent: #4d7cff;
    /* Text AUF dieser hellen Akzentflaeche: Weiss kaeme nur auf 3,72:1
       (gemessen 24.09.2026 am aktiven Sprachknopf im Menue), Schwarz auf
       5,6:1. Unten im hellen Seitenbereich bleibt --accent das dunkle
       #0033a0 mit weissem Text - beide Faelle brauchen ihr eigenes
       Gegenstueck. */
    --accent-contrast: #000000;
    --accent-soft: rgba(77, 124, 255, 0.15);
    --panel-surface: #111111;
    --panel-border: #222222;
}

/* T-499 (27.09.2026, Benos Auftrag) und Nachtrag 28.09.2026: oben
   durchsichtig ueber dem Hero-Bild, ab .scrolled deckend WEISS - seit
   v1.5.451 nur noch hier. Beno: "die Farbaenderung sollte nur auf Serbska
   erfolgen, weil die Grundseite dort hell ist" - public/css/main.css ist
   gescrollt wieder dunkel. Deshalb stehen Hintergrund, Header-Farben und
   die Logo-Ueberblendung jetzt in diesem Anhang statt in main.css.
   Gemessen (contrast.js, WCAG-Formel): #141414 auf Weiss 18,4:1; das dunkle
   Markenblau #0033a0 gegen Weiss 10,6:1. Oben das hellere Blau #4d7cff
   (~5,1:1 gegen den dunklen Verlauf/Hero). */
.navbar {
    --header-accent: #4d7cff;
    --header-accent-rgb: 77, 124, 255;
}

.navbar.scrolled {
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
    --header-fg: #141414;
    --header-muted: #5c5c5c;
    --header-border-soft: rgba(0, 0, 0, 0.15);
}

.navbar.scrolled .logo-img {
    opacity: 0;
}

.navbar.scrolled .logo-img-dark {
    opacity: 1;
}

.navbar.scrolled {
    --header-accent: #0033a0;
    --header-accent-rgb: 0, 51, 160;
}

/* --------------------------------------------------------------------------
   Literale Hex-/rgba-Akzentwerte (Fix 24.09.2026, Review): main.css bindet
   den Akzent an rund 20 weiteren Stellen NICHT ueber das --accent-Token ein,
   sondern schreibt #e8ff00/rgba(232,255,0,...) direkt in die Regel - dort
   greift die --accent-Neudefinition oben nicht, das Neongelb blieb bis zu
   diesem Fix unveraendert stehen (Suchleiste/Filter-Icons in der Kopfzeile,
   Filter-Panel, Benachrichtigungen, Video-Lightbox/Freigabe-Overlay,
   Kartenbild-Fallback, Standort-Menue). Dieselben Selektoren wie in der
   Kopie oben, hier am Dateiende platziert - bei gleicher Spezifitaet
   gewinnt in derselben Kaskade die spaeter stehende Regel, ein Aendern der
   Originalzeilen (vor dem SERBSKA-FARBEN-Marker) ist deshalb nicht noetig
   und wuerde ausserdem den 1:1-Kopie-Test brechen (tests/serbska-shell.
   test.js: "main.css-Struktur davor unveraendert"). Alle auf demselben
   dunklen Grund wie oben - deshalb dieselbe hellere Blau-Variante
   (rgb(77,124,255) = #4D7CFF), nur die Deckkraft (letzter rgba-Wert) bleibt
   wie im Original.
   -------------------------------------------------------------------------- */
/* T-499 (27.09.2026): .nav-search-mode-pill/.nav-filter-btn.active/
   .nav-search-close:hover/.date-quick-btn.active sind hier ABSICHTLICH
   NICHT mehr aufgefuehrt - main.css bindet ihre Akzentfarbe seit T-499 ueber
   --header-accent-rgb ein (nicht mehr fest verdrahtetes Gelb), und dieses
   Token variiert oben am .navbar/.navbar.scrolled-Block bereits korrekt pro
   Zustand (helles Blau oben, dunkles Markenblau gescrollt). Eine literale
   rgba(77,124,255,...)-Zeile hier wuerde das UNABHAENGIG vom Scroll-Zustand
   auf das helle Blau zurueckziehen - falsch fuer den gescrollten weissen
   Header. .nav-search-input:focus bleibt: der Fokusring liegt auf dem
   IMMER dunklen Eingabefeld (#2a2a2a/#333), unberuehrt vom Header-Zustand. */
.nav-search-input:focus {
    box-shadow: 0 0 0 3px rgba(77, 124, 255, 0.15);
}
.filter-panel {
    border-color: rgba(77, 124, 255, 0.22);
}
.filter-panel-mode {
    border-color: rgba(77, 124, 255, 0.28);
    background: rgba(77, 124, 255, 0.08);
}
.filter-secondary-btn:hover {
    border-color: rgba(77, 124, 255, 0.35);
}
/* .date-quick-btn.active ist hier NICHT mehr mit aufgefuehrt (siehe Kommentar
   oben) - .filter-chip.active bleibt: die Kategorie-Chips leben im immer
   dunklen .filter-panel, nicht im Header. */
.filter-chip.active {
    background: rgba(77, 124, 255, 0.2);
}
/* Kartenbild-Fallback (kein Foto geladen): kompletter background-image-Wert
   neu, weil eine einzelne Gradient-Ebene sich nicht per Kaskade einzeln
   ueberschreiben laesst - die beiden anderen Ebenen und background-size/
   -color bleiben wie im Original. */
.card-image.fallback-visual {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(77, 124, 255, 0.10), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(120, 140, 255, 0.20), transparent 48%),
        linear-gradient(140deg, #111318 0%, #171b22 45%, #0f1014 100%);
}
/* Kontrastrechnung (WCAG-Formel): Schwarz auf #4D7CFF ~5,6:1, Weiss auf
   #4D7CFF nur ~3,7:1 (unter 4,5:1 fuer Fliesstext) - hier bleibt darum das
   urspruengliche schwarze Badge-Label, nur der Grundton wechselt. */
.video-card .card-category {
    background: rgba(77, 124, 255, 0.9);
}
.external-consent-placeholder {
    background:
        radial-gradient(circle at 50% 0%, rgba(77, 124, 255, 0.12), transparent 42%),
        #090909;
}
.external-content-locked {
    background:
        linear-gradient(135deg, rgba(77, 124, 255, 0.14), rgba(255, 255, 255, 0.04)),
        #151515 !important;
}
.notification-item.unread {
    background: rgba(77, 124, 255, 0.05);
}
/* .search-results-meta sitzt NICHT im dunklen Chrome, sondern in
   #search-content (eigenes <main>, wie events-content/jobs-content/
   news-content) - also auf dem HELLEN Root-Hintergrund. Deshalb hier
   ausnahmsweise die dunklere Markenfarbe wie bei .location-bar.is-active
   unten, nicht das helle Chrome-Blau der uebrigen Regeln in diesem
   Abschnitt. */
.search-results-meta {
    border-color: rgba(0, 51, 160, 0.25);
    background: rgba(0, 51, 160, 0.08);
}
/* .location-menu-toggle selbst NICHT mehr hier (T-499, gleicher Grund wie
   beim Block oben): main.css bindet dessen Hover-/Aktiv-Tinte seit T-499
   ueber --header-accent-rgb ein, das oben am .navbar/.navbar.scrolled-Block
   schon pro Zustand variiert. Das Popup (.location-menu-panel) bleibt
   davon unberuehrt - es ist nicht Teil dieser Regel. */
/* .location-bar ist NICHT Teil der dunklen Chrome-Liste oben (Kommentar an
   ihrer urspruenglichen Stelle: "Legacy, nicht mehr auf der Landing") - sie
   sitzt auf var(--surface), also dem HELLEN Root-Hintergrund. Deshalb hier
   die dunklere Markenfarbe (#0033A0, wie --accent im :root oben), nicht das
   helle Chrome-Blau. */
.location-bar.is-active {
    border-color: rgba(0, 51, 160, 0.35);
}

/* --------------------------------------------------------------------------
   Hero: bleibt ein Foto mit dunklem Verlauf-Scrim (sonst kein lesbarer
   weisser Titel auf beliebigem Foto) - nur der Verlauf endet jetzt wieder
   dunkel statt im (jetzt hellen) --bg.
   -------------------------------------------------------------------------- */
.hero-overlay {
    background: linear-gradient(transparent, rgba(15, 15, 15, 0.85), rgba(15, 15, 15, 0.95));
}
.hero-title {
    color: #ffffff;
}
.hero-meta,
a.hero-meta {
    color: var(--serbska-red);
}

/* --------------------------------------------------------------------------
   Hauptknopf: main.css setzt schwarzen Text auf die Akzentflaeche - das war
   fuer das Neongelb der Hauptseite richtig, auf dem dunklen Blau hier ergibt
   es 1,98:1 (gemessen 24.09.2026 am Medien-Hero, unlesbar). Weiss auf
   #0033a0 sind 10,4:1.
   -------------------------------------------------------------------------- */
html body .btn-primary {
    color: var(--accent-contrast);
}
html body .btn-primary:hover {
    background: #ffffff;
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   Karten (Events, Serbska-Medien): main.css setzt Kartenflaeche und
   Kartentext hart auf Dunkel (#1a1a1a / vererbtes #fff von body) - hier auf
   die helle Flaeche umgestellt.
   -------------------------------------------------------------------------- */
.event-card {
    background: var(--surface);
}
.card-title {
    color: var(--text);
}
.card-location {
    color: var(--muted);
}
.card-date {
    color: var(--serbska-red);
}
.calendar-btn svg {
    fill: var(--muted);
}

/* Badges/Chips SITZEN auf dem Kartenbild (fester dunkler rgba(0,0,0,.7)-
   Chip, unabhaengig vom Seitenhintergrund) - dort bleibt der zweite Akzent
   (Rot) hell genug fuer Kontrast; der neue Marken-Akzent (dunkles Blau)
   waere auf dem dunklen Chip kaum lesbar. */
.card-category,
.card-ticket-badge,
.card-photo-credit a:hover,
.card-photo-credit a:focus-visible {
    color: var(--serbska-red);
}
.carousel-controls {
    color: var(--serbska-red);
    border-color: var(--serbska-red);
}

/* Serbska-Medien-Karte (public/serbska/app.js, renderSerbskaMediaCard):
   ersetzt das fehlende Vorschaubild (keine Videos, nur externe Links) durch
   eine flaechige Akzentkachel mit Anfangsbuchstabe - gleiche Kartensilhouette
   wie ueberall sonst (.event-card/.card-image/.card-content/.card-title). */
.serbska-media-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
/* .card-image.no-image in der Klassenliste (statt eigener content:none-Regel):
   nutzt die bestehende Regel in public/css/card-image.css, die die geteilten
   ::before/::after-Ebenen (Bild-Weichzeichner-Duplikat) fuer Karten ohne
   echtes Foto abschaltet - ohne sie wuerden die Ebenen den Farbverlauf
   dieser Kachel geblurrt/dupliziert darueberlegen. .card-image.no-image
   selbst setzt eine dunkle Grundfarbe (main.css, weiter oben in dieser
   Datei uebernommen) - hier mit passender Spezifitaet (zwei Klassen)
   uebersteuert. */
.card-image.serbska-media-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    background: linear-gradient(135deg, var(--accent), #001d5c);
}
.serbska-media-card-icon span {
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Serbska-Medien-Hero (public/serbska/app.js, setupSerbskaMedienHero):
   Der Medien-Hero der Hauptseite zeigt YouTube-Vorschaubilder. Hier gibt es
   nur externe Links ohne eigene Bilder - statt fremde Vorschaubilder zu
   ziehen (Urheberrecht, TODO T-076) traegt jede Folie eine Farbflaeche in
   den Serbska-Farben mit dem Anfangsbuchstaben, wie die Medien-Karten.
   Der dunkle Verlauf-Scrim des Overlays liegt darueber, der weisse Titel
   bleibt also auf jeder Kachel lesbar.
   -------------------------------------------------------------------------- */
.serbska-medien-hero-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Vorschaubild der Medienkarte (v1.5.440, Screenshot der Startseite aus
   public/images/serbska-media/ oder Upload aus dem Admin). Das Bild zeigt den
   oberen Rand der Seite - dort stehen Logo und Titel. Der Buchstabe darunter
   ist nur sichtbar, solange das Bild laedt oder wenn es fehlt. */
.card-image.serbska-media-card-shot {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #001d5c;
    background-size: cover;
    background-position: top center;
    opacity: 1;
}
.card-image.serbska-media-card-shot span {
    color: rgba(255, 255, 255, 0.35);
    font-size: 2.2rem;
    font-weight: 700;
}
.card-image.serbska-media-card-shot.loaded:not(.fallback-visual) span {
    display: none;
}
/* Untertitel: zwei Zeilen statt einer abgeschnittenen, damit der kurze Satz
   auf dem Handy ganz lesbar bleibt. */
.serbska-media-card .serbska-media-subtitle {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}
.serbska-medien-hero-slide.has-image {
    background-size: cover;
    background-position: top center;
}

.serbska-medien-hero-tone-1 { background-image: linear-gradient(135deg, var(--accent), #001d5c); }
.serbska-medien-hero-tone-2 { background-image: linear-gradient(135deg, var(--serbska-red), #7a160d); }
.serbska-medien-hero-tone-3 { background-image: linear-gradient(135deg, var(--accent), var(--serbska-red)); }
.serbska-medien-hero-tone-4 { background-image: linear-gradient(135deg, #001d5c, #0a0a1e); }

/* Der Buchstabe ist Schmuck, kein Inhalt (die Folie ist aria-hidden) -
   deshalb dezent und weit oben, damit er nicht mit dem Titel im unteren
   Overlay-Drittel kollidiert. */
.serbska-medien-hero-initial {
    font-size: 7rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.18);
    transform: translateY(-18%);
    user-select: none;
}
@media (max-width: 600px) {
    .serbska-medien-hero-initial { font-size: 5rem; }
}

/* --------------------------------------------------------------------------
   Tab-Switcher: main.css nutzt einen hellen Transparenz-Tint fuer den
   dunklen Grund (rgba(255,255,255,...)) - auf hellem Grund ist das fast
   unsichtbar. Aktiver Tab bekommt eine dunkle Akzentflaeche mit
   hartkodiertem schwarzem Text (main.css) - darauf ist Weiss lesbar.
   -------------------------------------------------------------------------- */
.main-tab {
    background: rgba(0, 0, 0, 0.06);
    color: #555555;
}
.main-tab:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #111111;
}
.main-tab.active {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Section-Titles (main.css-Klasse .section-title, z.B. "Aktuelle Events").
   Die SEO-Terminliste (.ssr-event-list/.ssr-events-text, T-217) ist NICHT
   hier, sondern im <style>-Block direkt in public/serbska/index.html farblich
   angepasst - dort steht sie auch im Original (nicht in main.css) und laedt
   NACH dieser Datei, eine Ueberschreibung hier haette also nie gegriffen.
   -------------------------------------------------------------------------- */
.section-title {
    color: var(--text);
}

/* ==========================================================================
   GETEILTE JS-WIDGETS (Fix 24.09.2026, Review): /js/help-widget.js,
   /js/calendar-menu.js, /js/install-prompt.js, /js/pwa-update.js, /js/
   beta-banner.js, /js/push-notifications.js, /js/share-cards.js und /js/
   bookmarks(-jobs).js sind echte GETEILTE Infrastruktur (von public/index.html
   UND public/serbska/index.html identisch eingebunden, siehe docs/SERBSKA.md
   "Architektur Phase 2") - sie duerfen nicht editiert werden, sonst faerbt
   sich die Hauptapp mit ("Aenderungen an Serbska duerfen in der Hauptapp
   nicht sichtbar sein"). Mehrere von ihnen injizieren beim Laden per JS ein
   eigenes <style>-Tag mit hartkodiertem #e8ff00/rgba(232,255,0,...) statt
   var(--accent) - Cookie-Banner, PWA-Install-Hinweis, Update-Toast,
   Push-Banner, Hilfe/Bug-Button, Kalender-/Teilen-Menue, "Deine Events"-
   Verlauf. Sichtbar auf JEDEM Aufruf von /serbska, nicht nur beim Farb-
   Audit von main.css oben.
   Zwei Besonderheiten, die eine normale spaeter-gewinnt-Ueberschreibung
   nicht zuverlaessig treffen wuerde:
   1. Diese <style>-Tags werden erst beim Skript-Start per JS ans <head>
      angehaengt - IMMER NACH dieser verlinkten main.css. Bei gleicher
      Spezifitaet gewinnt in der Kaskade, was zuletzt im Dokument steht -
      das waere dann das Widget-Style, nicht diese Datei. Deshalb hier
      durchgaengig um "html body" erweiterte Selektoren (hoehere
      Spezifitaet gewinnt IMMER, unabhaengig von der Reihenfolge).
   2. pwa-update.js setzt seine Farbe als Inline-style.cssText direkt am
      Element, nicht als Stylesheet-Regel - dagegen hilft auch hoehere
      Spezifitaet nichts (Inline schlaegt jedes Stylesheet). Nur dort
      deshalb zusaetzlich !important auf der ID.
   install-prompt.js nutzt zudem ein ANDERES Token (--ev-accent, fuer die
   Event-App-Branding-Seiten /e/:slug) mit demselben #e8ff00-Fallback - hier
   nie definiert, der Fallback greift also auch auf der Hauptapp schon
   immer. Deshalb direkte Werte statt eines --ev-accent-Overrides.
   NICHT behoben: /js/story-share.js zeichnet die Story-Sharing-Grafik
   direkt auf einen <canvas> (ACCENT = '#e8ff00' als privater Modul-
   Konstante, kein Hook von aussen) - siehe TODO-Log (T-Nummer dort).
   -------------------------------------------------------------------------- */
html body .help-fab {
    border: 1px solid rgba(77, 124, 255, 0.18);
}
html body .help-fab:hover {
    border-color: rgba(77, 124, 255, 0.32);
}
html body .help-option:hover {
    border-color: #4d7cff;
    background: #12172b;
}
html body .bug-form input:focus,
html body .bug-form textarea:focus,
html body .bug-form select:focus {
    border-color: #4d7cff;
}
html body .bug-form-actions .btn-submit {
    background: #4d7cff;
}
html body .bug-form-actions .btn-submit:hover {
    background: #3968e6;
}
html body .calendar-menu a:hover,
html body .calendar-menu a:focus-visible {
    background: rgba(77, 124, 255, 0.10);
}
html body .install-prompt {
    border-color: rgba(77, 124, 255, 0.25);
}
html body .install-prompt__text b {
    color: #4d7cff;
}
html body .install-prompt__btn {
    background: #4d7cff;
    color: #000;
}
html body .install-prompt__btn--secondary {
    /* Die Regel darueber faerbt JEDEN Knopf des Hinweises blau - der zweite
       ist im Original aber ein Umriss-Knopf (background:transparent). Ohne
       diese Zeile stand blauer Text auf blauer Flaeche, der Knopf war leer
       (gefunden 24.09.2026 bei der Hero-Messung). */
    background: transparent;
    color: #4d7cff;
    border-color: rgba(77, 124, 255, 0.5);
}
#pwa-update-hint {
    background: #4d7cff !important;
    color: #000 !important;
}
html body .beta-banner-content {
    border-top-color: rgba(77, 124, 255, 0.3);
}
html body .beta-banner-quick a {
    color: #4d7cff;
}
html body .cookie-toggle.active {
    background: #4d7cff;
}
html body .beta-banner-button {
    background: #4d7cff;
}
html body .cookie-toggle:focus-visible {
    outline-color: #4d7cff;
}
html body .push-banner {
    border-color: rgba(77, 124, 255, 0.3);
}
html body .push-btn-primary {
    background: #4d7cff;
}
html body .push-settings-hint a {
    color: #4d7cff;
}
html body .push-toggle input:checked + .push-toggle-slider {
    background-color: #4d7cff;
}
html body .card-share-menu button:hover,
html body .card-share-menu button:focus-visible {
    background: rgba(77, 124, 255, 0.10);
}
html body .share-toast {
    border-color: rgba(77, 124, 255, 0.35);
}
html body #bookmarked-section,
html body #bookmarked-jobs-section {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(77, 124, 255, 0.05) 100%);
}