* {
            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;
}