/* Schriftart lokal eingebunden statt von Google Fonts geladen.
           Beim externen Laden würde die IP-Adresse jedes Besuchers an
           Google übertragen, noch bevor er irgendetwas anklickt.
           Bangers steht unter der Open Font License, lokales Hosten ist
           ausdrücklich erlaubt. */
        @font-face {
            font-family: 'Bangers';
            font-style: normal;
            font-weight: 400;
            /* swap: Text bleibt sofort lesbar, auch bevor die Schrift
               geladen ist - dann eben kurz in der Ersatzschrift. */
            font-display: swap;
            src: url('fonts/bangers.woff2') format('woff2');
        }

        :root {
            --bg-color: #121212;
            --card-bg: rgba(30, 30, 30, 0.85);
            --accent-color: #890000;
            --text-color: #e0e0e0;
            --text-muted: #b0b0b0;
            --border-color: #333333;
        }

        /* Sanftes Scrollen für Anker */
        html {
            scroll-behavior: smooth;
        }

        /* Stilische Scrollbar für Webkit-Browser */
        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(18, 18, 18, 0.9);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 5px;
            border: 2px solid var(--bg-color);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent-color);
        }

        /* Für Firefox */
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) var(--bg-color);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            /* Grauer Verlauf statt eines Fotos als Standard-Hintergrund
               (Issue #69): das frühere bg.jpg stammte nicht von TMDB und
               hatte damit keine geklärte Nutzungserlaubnis (siehe README/
               CLAUDE.md zur sonst durchgängigen Sorgfalt bei Bildquellen).
               background-image bewusst als eigene Eigenschaft statt im
               background-Kurzschreibweise: wird per JS (hintergrundAktualisieren
               in app.js) auf ein TMDB-Hintergrundbild der aktiven Liste
               umgeschaltet, sobald eines gewählt ist - ohne gewähltes Bild
               entfernt das JS die Inline-Eigenschaft wieder, dieser
               Verlauf hier greift dann automatisch als Fallback. */
            background-image: linear-gradient(to right, var(--bg-color), var(--border-color) 50%, var(--bg-color));
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: var(--text-color);
            line-height: 1.6;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 950px;
            margin: 0 auto;
            padding: 20px;
            padding-bottom: 60px; 
        }

        /* Fixierte Kopfzeile oben für den Titel */
        .header-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: rgba(18, 18, 18, 0.95);
            backdrop-filter: blur(8px);
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0,0,0,0.7);
            padding: 8px 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }

        /* Hamburger-Button: nur auf Mobile sichtbar (siehe Media Query),
           liegt links im Header über dem Titel */
        .nav-toggle {
            display: none;
            position: absolute;
            top: 50%;
            left: 12px;
            transform: translateY(-50%);
            width: 38px;
            height: 38px;
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            padding: 0;
            z-index: 1010;
        }

        .nav-toggle span {
            display: block;
            width: 20px;
            height: 2px;
            margin: 4px auto;
            background-color: var(--text-color);
            border-radius: 2px;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }

        .nav-toggle.open span:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }
        .nav-toggle.open span:nth-child(2) {
            opacity: 0;
        }
        .nav-toggle.open span:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }

        /* H1 als kompakter Titel in der Top-Bar */
		.header-bar h1 {
            font-family: 'Bangers', cursive, sans-serif;
            text-align: center;
            color: #ffffff;
            /* Skaliert automatisch, bricht nicht um und bleibt in einer Zeile */
            font-size: clamp(1rem, 3vw, 4rem); 
            white-space: nowrap;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            border-bottom: none;
            padding-bottom: 0;
            text-shadow: 3px 3px 0px #e50914, 5px 5px 10px rgba(0,0,0,0.9);
        }

        /* Standard-Navigation (Desktop) */
        .quick-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
        }

        .quick-nav a {
            position: relative;
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.75rem;
            padding: 4px 10px;
            border-radius: 4px;
            border: 1px solid transparent;
            background-color: rgba(255,255,255,0.05);
            transition: border-color 0.2s ease, color 0.2s ease;
            overflow: hidden;
        }

        /* Hintergrund wird zur Laufzeit per JS als Fortschritts-Füllung
           gesetzt (siehe applyNavFill) - je mehr Filme in dieser Sektion
           (bzw. insgesamt beim Home-Button) als "gesehen" markiert sind,
           desto weiter füllt sich der Button grün von links nach rechts. */
        .quick-nav a:hover {
            color: #ffffff;
            border-color: var(--accent-color);
        }

        /* Zähler "(n/n)" im Nav-Button - auf Desktop ausgeblendet (Pills sind
           dort bewusst kompakt), auf Mobile eingeblendet, siehe Media Query */
        .nav-progress {
            display: none;
        }

        /* Trennt Home/Gruppe von den Sektionen. Auf Desktop ein
           senkrechter Strich zwischen den Pillen. */
        .nav-trenner {
            width: 1px;
            align-self: stretch;
            min-height: 20px;
            background: var(--border-color);
            margin: 0 4px;
        }

        .quick-nav a.nav-groups,
        .quick-nav a.nav-konto,
        .quick-nav a.nav-streaming,
        .quick-nav a.nav-listen { white-space: nowrap; }

        /* Icon grau statt bunt - gleicher Look wie eine nicht bewertete
           (inaktive) Popcorn-Tüte, siehe .popcorn weiter unten */
        .nav-home-icon,
        .nav-groups-icon,
        .nav-konto-icon,
        .nav-streaming-icon,
        .nav-listen-icon {
            filter: grayscale(1) opacity(0.35);
        }

        /* Schließen-Button (X) ist nur für das mobile Drawer-Menü gedacht -
           auf Desktop komplett ausgeblendet (siehe Media Query fürs Mobile-Styling) */
        .nav-close {
            display: none;
        }

        /* Standard Abstandhalter für Desktop.
           padding-bottom reserviert Platz für den fixierten Footer unten -
           ohne das würde die letzte Filmkarte teilweise dahinter
           verschwinden (Bug #15). Footer ist ca. 37px hoch (Text + Padding
           + Border), 60px lässt komfortablen Sicherheitsabstand. */
        .content-wrapper {
            margin-top: 150px;
            padding-bottom: 60px;
        }

        h2 {
            color: var(--accent-color);
            font-size: 1.8rem;
            margin-top: 10px;
            margin-bottom: 20px;
            border-left: 5px solid var(--accent-color);
            padding-left: 15px;
            scroll-margin-top: 180px;
			-webkit-text-stroke: 0.5px var(--border-color);
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        }

        /* Überschrift der aktiven Liste (z. B. "Marvel Cinematic Universe") -
           bewusst deutlich größer als die Sektions-Überschriften darunter,
           damit klar erkennbar ist: das ist die übergeordnete Ebene. Kommt
           dynamisch aus lists/manifest.json, siehe renderContent(). */
        .listen-titel {
            color: var(--text-color);
            font-size: 2.3rem;
            font-weight: bold;
            text-align: center;
            margin: 0 0 30px;
            border-left: none;
            padding-left: 0;
            text-shadow: 0 2px 6px rgba(0,0,0,0.8);
        }

        /* Desktop: Poster-Bleed-Effekt (Issue #14).
           aspect-ratio 50/11 koppelt die Kartenhöhe an die Poster-Breite (22%),
           sodass der sichtbare Poster-Ausschnitt quadratisch ist. Da die Poster
           im Format 2:3 vorliegen, entspricht ein quadratischer Ausschnitt mit
           object-position:top exakt den oberen 2/3 des Posters - Gesichter/Köpfe
           bleiben dadurch zuverlässig sichtbar. */
        .movie-card {
            position: relative;
            overflow: hidden;
            background-color: var(--card-bg);
            backdrop-filter: blur(5px);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 0;
            margin-bottom: 15px;
            display: flex;
            gap: 0;
            align-items: stretch;
            aspect-ratio: 50 / 11;
            transition: transform 0.2s ease, border-color 0.2s ease;
        }

        /* Statischer grüner Rand, sobald der Film bewertet ("gesehen") wurde -
           analog zum roten Hover-Rand, aber dauerhaft sichtbar. Regel bewusst
           VOR :hover platziert, damit ein Hover (rot) auch bei bereits
           gesehenen Karten kurzzeitig Vorrang hat. */
        .movie-card.watched {
            border-color: #4caf50;
        }

        .movie-card:hover {
            transform: translateY(-3px);
            border-color: var(--accent-color);
        }

        .movie-poster {
            position: absolute;
            top: 0;
            left: 0;
            width: 22%;
            height: 100%;
            background-color: #2a2a2a;
            border: none;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 0.75rem;
            color: var(--text-muted);
            overflow: hidden;
            cursor: pointer;
            -webkit-mask-image: linear-gradient(to right, black 58%, transparent 96%);
            mask-image: linear-gradient(to right, black 58%, transparent 96%);
        }

        /* Umschließt Titel + Beschreibung (Issue #33 CR). Auf Desktop nicht
           klickbar (nur das Poster öffnet dort die Großansicht) - die
           Mobile-Ausnahme steht im @media-Block weiter unten. */
        .movie-oben {
            cursor: default;
        }

        .movie-poster img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
        }

        /* Platzhalter, wenn ein Posterbild nicht geladen werden kann.
           Verhindert das kaputte Bild-Symbol des Browsers. */
        .movie-poster.poster-missing {
            -webkit-mask-image: none;
            mask-image: none;
            background-color: #242424;
            border-right: 1px solid var(--border-color);
        }

        .movie-poster.poster-missing::before {
            content: "🎬";
            font-size: 1.8rem;
            opacity: 0.35;
        }

        /* Rückwärts-Verlauf sorgt dafür, dass der Text auch über der
           ausfadenden Poster-Kante lesbar bleibt. Vertikal zentriert, damit
           bei kurzen Beschreibungen kein großer Leerraum unten entsteht. */
        .movie-content {
            position: relative;
            z-index: 1;
            flex-grow: 1;
            margin-left: 19%;
            padding: 18px 24px 18px 16px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: linear-gradient(to right,
                rgba(30, 30, 30, 0) 0%,
                var(--card-bg) 30%,
                var(--card-bg) 100%);
        }

        .movie-title-row {
            display: flex;
            align-items: baseline;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 8px;
        }

        .movie-title {
            font-size: 1.3rem;
            font-weight: bold;
            color: #ffffff;
            min-width: 0;
        }

        /* Kurzzeitiger Ladezustand, bis Titel/Laufzeit von TMDB
           eingetroffen sind (meist nur beim ersten Besuch spürbar, siehe
           Zwischenspeicherung in tmdbDetailsFuerAlleLaden). */
        .movie-title.laedt {
            color: var(--text-muted);
            font-weight: normal;
            font-style: italic;
        }

        /* --- Fortschritts-Anzeige (Issue #3) ---
           Der frühere separate Fortschrittsbalken wurde entfernt - der
           Fortschritt wird stattdessen direkt in die Navigations-Buttons
           integriert (siehe applyNavFill im Script-Bereich). */

        /* Zähler direkt neben der Sektions-Überschrift, bewusst nicht in
           Akzentfarbe (h2 ist rot), damit er sich als Nebeninfo abhebt */
        .section-count {
            font-size: 0.9rem;
            font-weight: normal;
            color: var(--text-muted);
            margin-left: 8px;
        }

        /* Zeilenbegrenzung statt freier Länge: die feste Kartenhöhe
           (aspect-ratio auf .movie-card) verträgt nur wenige Zeilen. Bei
           kuratierten Listen ist die handgeschriebene Beschreibung kurz
           genug, bei eigenen Listen kommt aber oft die vollständige
           TMDB-Synopse zum Einsatz (Issue #35) - ohne Begrenzung würde die
           Karte den Titel und die Bewertung aus dem sichtbaren Bereich
           schieben (justify-content: center in .movie-content). */
        .movie-desc {
            color: var(--text-muted);
            font-size: 0.95rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Gemeinsame untere Zeile der Karte: links Laufzeit + IMDb/TMDb-Icons,
           rechts die Popcorn-Bewertung. margin-top: auto sorgt dafür, dass die
           Zeile immer unten in der Karte sitzt (siehe .movie-content: flex column). */
        .movie-meta-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: auto;
            padding-top: 10px;
        }

        .movie-meta-left {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .movie-runtime {
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
            gap: 4px;
            font-size: 0.85rem;
            font-weight: normal;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .runtime-icon {
            font-size: 0.95em;
        }

        /* Altersfreigabe (FSK) rechts neben dem Titel, links von der
           Laufzeit (Issue #67). Bleibt leer, solange TMDB noch nicht
           geantwortet hat oder keine deutsche Freigabe kennt - :empty
           blendet den Rahmen dann komplett aus, statt eine leere Box zu zeigen. */
        .movie-altersfreigabe {
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
            font-size: 0.75rem;
            font-weight: bold;
            color: var(--text-muted);
            border: 1px solid var(--text-muted);
            border-radius: 4px;
            padding: 1px 6px;
            white-space: nowrap;
        }

        .movie-altersfreigabe:empty {
            display: none;
        }

        .meta-icon {
            height: 18px;
            width: auto;
            display: block;
            opacity: 0.8;
            transition: opacity 0.15s ease, transform 0.15s ease;
        }

        .meta-icon:hover {
            opacity: 1;
            transform: scale(1.12);
        }

        /* Streaming-Anbieter-Logos auf der Filmkarte (Issue #33), unter der
           TMDB/Trailer/Popcorn-Zeile. Zeile bleibt leer/kollabiert, solange
           keine Auswahl getroffen oder die TMDB-Antwort noch nicht da ist -
           kein Layout-Sprung. */
        .movie-anbieter-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            padding-top: 8px;
        }

        .movie-anbieter-row:empty { display: none; }

        .justwatch-icon {
            height: 20px;
            width: auto;
            display: block;
        }

        .anbieter-logo {
            height: 30px;
            width: auto;
            border-radius: 4px;
            display: block;
        }

        /* Nur leihbar/käuflich statt im Abo: fast komplett entsättigt statt
           nur transparenter - bei bloßer Transparenz blieben die Farben
           (z. B. Disney Plus und Prime Video, beide bläulich) kaum
           unterscheidbar von den kräftigen Abo-Logos. Gleiches Muster wie
           bei nicht bewerteten Popcorn-Tüten (.popcorn) und Nav-Icons. */
        .anbieter-logo.anbieter-kauf {
            filter: grayscale(0.9) opacity(0.45);
        }

        .anbieter-attribution {
            font-size: 0.68rem;
            color: var(--text-muted);
            margin-left: 2px;
            /* Reihe zentriert per align-items sonst alle Elemente auf
               Logo-Mitte - der deutlich kleinere Text wirkt dadurch wie
               "schwebend". Stattdessen an der Unterkante der Logos halten. */
            align-self: flex-end;
        }

        /* Bewertung: Popcorn-Tüten statt Sterne */
        .movie-rating {
            display: flex;
            gap: 6px;
        }

        .popcorn {
            font-size: 1.25rem;
            line-height: 1;
            cursor: pointer;
            user-select: none;
            filter: grayscale(1) opacity(0.35);
            transition: filter 0.15s ease, transform 0.1s ease;
        }

        .popcorn.filled {
            filter: none;
        }

        .popcorn:hover {
            transform: scale(1.2);
        }

        /* --- Eigene Listen (Relaunch Stufe 2) --- */
        .eigene-werkzeuge {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            margin-bottom: 16px;
        }

        .eigene-werkzeuge .gruppen-btn { width: auto; }

        .eigene-formular {
            flex-basis: 100%;
            margin-top: 4px;
            padding: 14px;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-color);
            border-radius: 8px;
        }

        .eigene-formular .gruppen-btn { margin-right: 8px; margin-top: 6px; }

        .eigene-hinweis {
            color: var(--text-muted);
            font-size: 0.88rem;
            margin: 0;
        }

        /* Konto-Liste ohne Anmeldung/Internet (Issue #37) - dezent
           hervorgehoben, damit der Grund für die Sperre auffällt. */
        .eigene-gesperrt {
            padding: 10px 12px;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-color);
            border-radius: 6px;
        }

        .eigene-fehler {
            color: #ef5350;
            font-size: 0.85rem;
            margin: 6px 0 10px;
        }

        /* TMDB-Live-Suche im "Film hinzufügen"-Formular (Issue #49) */
        .eigene-suche-ergebnisse {
            max-height: 260px;
            overflow-y: auto;
            margin-bottom: 10px;
        }

        .eigene-suche-treffer,
        .eigene-suche-auswahl {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 4px;
        }

        .eigene-suche-treffer {
            cursor: pointer;
            border-radius: 6px;
        }

        .eigene-suche-treffer:hover {
            background: rgba(255,255,255,0.06);
        }

        .eigene-suche-auswahl {
            margin-bottom: 10px;
        }

        .eigene-suche-auswahl .gruppen-btn {
            margin-left: auto;
        }

        .eigene-suche-poster {
            width: 32px;
            height: 48px;
            object-fit: cover;
            border-radius: 4px;
            flex-shrink: 0;
        }

        .eigene-suche-poster-leer {
            background: rgba(255,255,255,0.06);
        }

        /* Entfernen-Button und Sortier-Pfeile sitzen oben rechts auf der
           Filmkarte - dieselbe Position wie .overlay-schliessen, nur
           kleiner, da mehrere Karten gleichzeitig sichtbar sind. */
        .eigener-film-entfernen {
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 2;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: rgba(18, 18, 18, 0.85);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            font-size: 0.85rem;
            cursor: pointer;
        }

        .eigener-film-entfernen:hover {
            border-color: #d32f2f;
            color: #ef5350;
        }

        .eigene-pfeile {
            position: absolute;
            top: 8px;
            right: 42px;
            z-index: 2;
            display: flex;
            gap: 4px;
        }

        .eigene-pfeile button {
            width: 26px;
            height: 26px;
            border-radius: 6px;
            background: rgba(18, 18, 18, 0.85);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            font-size: 0.75rem;
            cursor: pointer;
        }

        .eigene-pfeile button:disabled {
            opacity: 0.3;
            cursor: default;
        }

        .movie-card[draggable="true"] {
            cursor: grab;
        }

        /* Overlay / Lightbox Styling */
        #poster-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 2000;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            padding-top: 160px;
            padding-bottom: 80px;
            cursor: pointer;
        }

        #poster-overlay img {
            max-width: 90%;
            max-height: 100%;
            border-radius: 8px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.7);
            object-fit: contain;
        }

        /* Wrapper um Poster + Trailer: fängt Klicks ab (stopPropagation),
           damit Klicks auf Bild/Button das Overlay nicht mehr schließen -
           nur noch ein Klick auf den dunklen Rand drumherum oder der
           explizite Schließen-Button tun das. */
        .overlay-inhalt {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            cursor: default;
            max-width: 90%;
        }

        .overlay-schliessen {
            position: absolute;
            top: -14px;
            right: -14px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: rgba(18, 18, 18, 0.95);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            font-size: 1rem;
            cursor: pointer;
            z-index: 1;
        }

        /* Kompakter Trailer-Button auf der Filmkarte, neben dem TMDB-Icon */
        .trailer-karten-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            color: var(--text-muted);
            font-size: 0.78rem;
            padding: 3px 10px;
            cursor: pointer;
            transition: border-color 0.15s ease, color 0.15s ease;
        }

        .trailer-karten-btn:hover {
            border-color: var(--accent-color);
            color: var(--text-color);
        }

        .trailer-status {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .trailer-player {
            width: min(90vw, 640px);
            aspect-ratio: 16 / 9;
        }

        .trailer-player iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 8px;
        }

        /* Fixierter Footer unten */
        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgba(18, 18, 18, 0.95);
            backdrop-filter: blur(8px);
            text-align: center;
            color: var(--text-muted);
            font-size: 0.85rem;
            border-top: 1px solid var(--border-color);
            padding: 10px 0;
            z-index: 1000;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.7);
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
            box-sizing: border-box;
        }

        /* --- Ausklappbare, vertikale Navigation links für Tablets & Smartphones --- */
        /* ---------- Gruppen-Fenster (Issue #16) ---------- */
        #gruppen-fenster {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.75);
            z-index: 2000;
            padding: 20px;
            overflow-y: auto;
        }

        #gruppen-fenster.offen {
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        .gruppen-box {
            background: #171717;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            width: 100%;
            max-width: 520px;
            margin: 40px auto;
            box-shadow: 0 10px 40px rgba(0,0,0,0.7);
        }

        .gruppen-kopf {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px;
            border-bottom: 1px solid var(--border-color);
            font-weight: bold;
            color: var(--accent-color);
            font-size: 1.1rem;
        }

        .gruppen-schliessen {
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-color);
            width: 32px;
            height: 32px;
            cursor: pointer;
            font-size: 1rem;
        }

        #gruppen-inhalt { padding: 18px; }

        .gruppen-hinweis {
            font-size: 0.88rem;
            color: var(--text-muted);
            margin: 0 0 14px;
            line-height: 1.55;
        }

        .gruppen-untertitel {
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 0.95rem;
        }

        .gruppen-zeile { margin-bottom: 10px; display: flex; gap: 8px; }

        /* Hintergrundbild-Auswahl auf der Inhaltsseite einer eigenen Liste (Issue #69) */
        .hintergrund-thumbs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .hintergrund-thumb {
            width: 72px;
            height: 44px;
            padding: 0;
            border-radius: 6px;
            border: 2px solid transparent;
            background: rgba(255,255,255,0.05);
            overflow: hidden;
            cursor: pointer;
            color: var(--text-color);
        }

        .hintergrund-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .hintergrund-thumb.aktiv {
            border-color: var(--accent-color);
        }

        .hintergrund-thumb-leer {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .gruppen-zeile input {
            flex: 1;
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-color);
            padding: 10px 12px;
            font-size: 0.95rem;
            min-width: 0;
        }

        .gruppen-btn {
            background: var(--accent-color);
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 11px 18px;
            font-size: 0.95rem;
            cursor: pointer;
            width: 100%;
        }

        .gruppen-btn.schmal { width: auto; padding: 8px 12px; font-size: 0.82rem; }
        .gruppen-btn.grau {
            background: rgba(255,255,255,0.06);
            border: 1px solid var(--border-color);
        }

        .gruppen-link-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            text-decoration: underline;
            cursor: pointer;
            font-size: 0.82rem;
            padding: 0 0 0 8px;
        }

        .gruppen-trenner {
            text-align: center;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin: 14px 0 10px;
        }

        .gruppen-konto {
            font-size: 0.85rem;
            color: var(--text-muted);
            padding-bottom: 12px;
            margin-bottom: 14px;
            border-bottom: 1px solid var(--border-color);
        }

        .gruppen-eintrag {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 12px 14px;
            margin-bottom: 10px;
            background: rgba(255,255,255,0.02);
        }

        .gruppen-eintrag-kopf {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .gruppen-name { font-weight: bold; }

        .gruppen-status {
            font-size: 0.7rem;
            border: 1px solid #b8860b;
            color: #d4a017;
            border-radius: 10px;
            padding: 1px 8px;
        }

        .gruppen-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }

        .gruppen-linkfeld {
            width: 100%;
            margin-top: 10px;
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-muted);
            padding: 8px 10px;
            font-size: 0.8rem;
            box-sizing: border-box;
        }

        .gruppen-block {
            margin-bottom: 18px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border-color);
        }

        .gruppen-block:last-child { border-bottom: none; padding-bottom: 0; }

        .gruppen-einladung {
            border: 1px solid var(--accent-color);
            border-radius: 8px;
            padding: 14px;
            margin-bottom: 18px;
            background: rgba(137, 0, 0, 0.08);
        }

        .gruppen-einladung .gruppen-btn { margin-top: 8px; }

        .gruppen-check {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 10px;
            cursor: pointer;
        }

        /* Anbieterauswahl (Issue #33) - Grid aus Checkbox-Kacheln statt
           einer schlichten Liste, da hier zusätzlich ein Logo pro Zeile
           sitzt und bis zu 9 Einträge übersichtlich bleiben müssen. */
        .anbieter-liste {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 8px;
            margin-bottom: 10px;
        }

        .anbieter-check {
            margin-bottom: 0;
            padding: 8px 10px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
        }

        .anbieter-check.deaktiviert {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .anbieter-check-logo {
            height: 20px;
            width: auto;
            border-radius: 3px;
        }

        .anbieter-zaehler {
            text-align: right;
            font-size: 0.8rem;
        }

        .gruppen-zeile select {
            flex: 1;
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-color);
            padding: 10px 12px;
            font-size: 0.95rem;
            min-width: 0;
        }

        .gruppen-status-box {
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 10px 12px;
            margin-bottom: 12px;
            font-size: 0.85rem;
        }

        .gruppen-mitglieder {
            margin: 8px 0 0;
            padding-left: 20px;
            color: var(--text-muted);
        }

        .gruppen-mitglieder li { margin-bottom: 3px; }

        .gruppen-zeitstempel {
            margin-top: 8px;
            font-size: 0.78rem;
            color: var(--text-muted);
        }

        .gruppen-verwaltung {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--border-color);
        }

        .mitglied-zeile {
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 10px 12px;
            margin-bottom: 8px;
            background: rgba(255,255,255,0.02);
        }

        .mitglied-kopf {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 8px;
        }

        .mitglied-name { font-weight: bold; }

        .mitglied-anzahl {
            font-size: 0.78rem;
            color: var(--text-muted);
        }

        /* TMDB-Attribution. Das Logo muss unverändert bleiben (Farbe,
           Seitenverhältnis, nicht gespiegelt oder gedreht) und weniger
           prominent sein als das eigene Logo - deshalb bewusst klein. */
        .tmdb-attribution {
            margin-top: 14px;
            padding: 12px 14px;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-color);
            border-radius: 6px;
        }

        .tmdb-untertitel {
            font-size: 0.85rem;
            font-weight: bold;
            color: var(--text-color);
            margin-bottom: 10px;
        }

        .tmdb-logo {
            height: 26px;
            width: auto;
            display: block;
            margin-bottom: 10px;
        }

        .tmdb-notice {
            font-size: 0.85rem !important;
            color: var(--text-color) !important;
            margin-bottom: 6px !important;
        }

        .tmdb-erklaerung {
            font-size: 0.8rem !important;
            color: var(--text-muted) !important;
            margin-bottom: 6px !important;
        }

        /* JustWatch-Hinweis im Infos-Bereich, gleiche Box wie die
           TMDB-Attribution darüber (.tmdb-attribution) - eigenes Icon
           (nur der Pfeil, siehe justwatch-icon.svg) plus Schriftzug als
           Text, da das Symbol allein "JustWatch" nicht erkennbar macht. */
        .justwatch-attribution-zeile {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            color: var(--text-color);
        }

        .justwatch-attribution-logo {
            height: 22px;
            width: auto;
        }

        /* --- Datenschutzhinweise (Issue #22) --- */
        .ds-block {
            margin-bottom: 16px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border-color);
        }

        .ds-block:last-of-type { border-bottom: none; }

        .ds-titel {
            font-weight: bold;
            font-size: 0.95rem;
            margin-bottom: 6px;
            color: var(--text-color);
        }

        .ds-block p,
        .ds-block ul {
            font-size: 0.88rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin: 0 0 8px;
        }

        .ds-block ul { padding-left: 20px; }
        .ds-block li { margin-bottom: 4px; }
        .ds-block a { color: var(--text-color); }

        .ds-verweis { margin-top: 16px; }

        /* Link in der Fußzeile - sieht aus wie Text, ist aber ein Knopf,
           damit kein Sprung in der Adresszeile entsteht. */
        .footer-link {
            background: none;
            border: none;
            padding: 0;
            color: var(--text-muted);
            font-size: inherit;
            font-family: inherit;
            text-decoration: underline;
            cursor: pointer;
        }

        .footer-link:hover { color: var(--text-color); }

        .footer-trenner { margin: 0 6px; opacity: 0.6; }

        /* Hervorgehobener Warnhinweis im Löschablauf */
        .gruppen-warnung {
            background: rgba(211,47,47,0.15);
            border: 1px solid #d32f2f;
            border-radius: 6px;
            padding: 12px 14px;
            margin-bottom: 14px;
            font-size: 0.9rem;
            line-height: 1.55;
            color: #ef9a9a;
        }

        .gruppen-btn.gefahr {
            background: rgba(211,47,47,0.15);
            border: 1px solid #d32f2f;
            color: #ef5350;
            margin-top: 6px;
        }

        .gruppen-anlegen {
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid var(--border-color);
        }

        .gruppen-meldung {
            display: none;
            margin: 14px 18px 0;
            padding: 10px 12px;
            border-radius: 6px;
            font-size: 0.85rem;
        }

        .gruppen-meldung.erfolg { background: rgba(76,175,80,0.15); color: #4caf50; }
        .gruppen-meldung.fehler { background: rgba(211,47,47,0.15); color: #ef5350; }

        /* Bewertungen der Gruppe unter der Meta-Zeile (Issue #16) */
        .movie-group-slot:empty { display: none; }

        .movie-group {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 12px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
            font-size: 0.82rem;
            color: var(--text-muted);
        }

        .movie-group.verdeckt { font-style: italic; opacity: 0.8; }

        .gruppe-schnitt {
            color: var(--text-color);
            font-weight: bold;
            white-space: nowrap;
        }

        .gruppe-person { white-space: nowrap; }
        .gruppe-person strong { color: var(--text-color); }

        @media screen and (max-width: 768px) {
            body {
                padding: 10px;
            }

            .container {
                max-width: 100%;
                padding: 5px;
            }

            /* H1 bleibt oben, wird aber kompakter */
            .header-bar {
                padding: 6px 10px;
                gap: 2px;
            }

            .header-bar h1 {
                font-size: clamp(0.8rem, 3.8vw, 1.5rem); 
                white-space: nowrap;
                text-shadow: 2px 2px 0px #e50914, 3px 3px 6px rgba(0,0,0,0.9);
            }

            /* Verstecke die normale Navigation im Header auf Mobile */
            .header-bar .quick-nav {
                display: none;
            }

            /* Hamburger-Button auf Mobile einblenden */
            .nav-toggle {
                display: block;
            }

            /* Halbtransparenter Hintergrund hinter dem Drawer.
               Deckt IMMER den kompletten Bildschirm ab (0 bis 100vh),
               dadurch kein Überlappen/Reinragen in Header oder Footer mehr,
               egal wie hoch diese je nach Gerät gerade sind. */
            .nav-backdrop {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.6);
                /* WICHTIG: niedriger als der z-index von .header-bar (1000)!
                   Das Menü liegt im HTML verschachtelt innerhalb von
                   .header-bar, welches durch position:fixed + z-index einen
                   eigenen Stacking-Context bildet. Der z-index des Menüs
                   (weiter unten, 1500) wirkt deshalb NUR innerhalb dieses
                   Headers, nicht gegenüber diesem Backdrop hier. Wäre dieser
                   Wert höher als 1000, würde er den kompletten Header samt
                   Menü optisch überdecken und dessen Klicks abfangen -
                   sichtbar bliebe alles (halbtransparent), klickbar aber nicht. */
                z-index: 900;
            }

            .nav-backdrop.open {
                display: block;
            }

            /* Vollflächiges Drawer-Panel links, klar vom Content abgesetzt
               durch einen durchgehenden, blickdichten Hintergrund
               (kein durchscheinender roter Rand mehr) */
            .quick-nav.mobile-sidebar {
                display: flex;
                flex-direction: column;
                position: fixed;
                top: 0;
                left: 0;
                width: min(58vw, 220px);
                height: 100vh;
                height: 100dvh;
                background-color: #161616;
                border-right: 1px solid var(--border-color);
                box-shadow: 4px 0 24px rgba(0,0,0,0.6);
                z-index: 1500;
                padding: 64px 12px 20px;
                gap: 6px;
                transform: translateX(-100%);
                transition: transform 0.25s ease;
                overflow-y: auto;
                box-sizing: border-box;
                align-items: stretch;
            }

            /* Wenn die Klasse 'open' aktiv ist, fährt das Panel ein */
            .quick-nav.mobile-sidebar.open {
                transform: translateX(0);
            }

            /* Schließen-Button oben im Drawer - nur hier sichtbar */
            .nav-close {
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 16px;
                right: 16px;
                width: 34px;
                height: 34px;
                background: rgba(255,255,255,0.05);
                border: 1px solid var(--border-color);
                border-radius: 6px;
                color: var(--text-color);
                font-size: 1.1rem;
                line-height: 1;
                cursor: pointer;
            }

            /* Normale, waagerechte Links im Drawer statt gedrehtem Text */
            .quick-nav.mobile-sidebar a {
                writing-mode: horizontal-tb;
                transform: none;
                font-size: 0.82rem;
                padding: 10px 12px;
                text-align: left;
                white-space: normal;
                background-color: rgba(255,255,255,0.03);
                border-radius: 6px;
                color: var(--text-muted);
                text-decoration: none;
                border: 1px solid var(--border-color);
                touch-action: manipulation;
                -webkit-tap-highlight-color: rgba(255,255,255,0.15);
            }

            .quick-nav.mobile-sidebar {
                touch-action: pan-y;
            }

            /* Im aufgeklappten Menü stehen die Einträge untereinander -
               der Trenner wird dort zur waagerechten Linie. */
            .nav-trenner {
                width: 100%;
                height: 1px;
                min-height: 0;
                align-self: auto;
                margin: 6px 0;
            }

            /* Auf schmalen Geräten darf der Gruppenname umbrechen,
               statt das Menü in die Breite zu ziehen. */
            .quick-nav.mobile-sidebar a.nav-groups { white-space: normal; }

            /* Zähler "(n/n)" nur im mobilen Drawer sichtbar - ergänzt die
               grüne Füllung um genaue Zahlen für einen besseren Überblick */
            .nav-progress {
                display: inline;
                font-size: 0.72rem;
                color: var(--text-muted);
                margin-left: 4px;
            }

            .quick-nav.mobile-sidebar a:active,
            .quick-nav.mobile-sidebar a:hover {
                color: #ffffff;
                background-color: var(--accent-color);
            }

            /* Abstandhalter oben dynamisch an die kleinere Header-Größe angepasst.
               padding-bottom analog zu Desktop, an kleineren Mobile-Footer
               angepasst (Bug #15) */
            .content-wrapper {
                margin-top: clamp(60px, 12vw, 85px);
                padding-bottom: 50px;
            }

            h2 {
                font-size: 1.3rem;
                /* Dynamischer Anker-Abstand, damit H2 perfekt unter dem Header sitzt */
                scroll-margin-top: clamp(65px, 14vw, 90px);
            }

            .listen-titel {
                font-size: 1.6rem;
                margin-bottom: 20px;
            }

            /* --- Poster-Bleed-Effekt (nur Mobile): Poster liegt als
               durchgehender Hintergrund HINTER der kompletten Karte (nicht
               mehr als eigene seitliche Box), object-position:top verhindert
               dass Köpfe/Gesichter beim Zuschneiden verloren gehen (Poster
               werden praktisch immer von UNTEN statt mittig beschnitten).
               Fade-Zone in festen Pixeln (nicht Prozent), damit sie bei
               unterschiedlich langen Beschreibungen (= unterschiedlich hohen
               Karten) immer an derselben Stelle sitzt statt mitzuwandern.
               Text-Schatten als zusätzliche Sicherheit für Lesbarkeit,
               unabhängig davon wie hell/unruhig ein Poster-Motiv ist. */
            .movie-card {
                position: relative;
                overflow: hidden;
                padding: 0;
                gap: 0;
                /* Desktop koppelt Kartenhöhe per aspect-ratio an die
                   Poster-Breite - auf Mobile richtet sich die Höhe dagegen
                   nach dem Inhalt, daher hier zurücksetzen. */
                aspect-ratio: auto;
            }

            .movie-poster {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                border: none;
                border-radius: 0;
                /* Desktop nutzt eine horizontale Mask für den seitlichen
                   Fade - auf Mobile übernimmt das der ::after-Verlauf
                   (vertikal), daher Mask hier deaktivieren. */
                -webkit-mask-image: none;
                mask-image: none;
            }

            .movie-poster::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(to bottom,
                    rgba(18, 18, 18, 0) 0px,
                    rgba(18, 18, 18, 0) 120px,
                    var(--card-bg) 185px,
                    var(--card-bg) 100%);
            }

            .movie-poster img {
                object-position: top;
            }

            /* Mobile: Poster liegt als Kartenhintergrund UNTER dem Text
               (siehe .movie-poster oben), daher öffnet hier zusätzlich zum
               Poster auch Titel+Beschreibung die Großansicht - der untere
               Bereich (TMDB/Trailer/Anbieter) bleibt bewusst außen vor. */
            .movie-oben {
                cursor: pointer;
            }

            /* Auf Mobile ist das Poster der Kartenhintergrund. Fehlt es, würde
               oben ein großer leerer Bereich stehen bleiben - deshalb hier
               Platzhalter-Symbol weglassen und den Textabstand zurücknehmen. */
            .movie-poster.poster-missing {
                background-color: transparent;
                border-right: none;
            }

            .movie-poster.poster-missing::before {
                content: none;
            }

            .movie-card.no-poster .movie-content {
                padding-top: 14px;
            }

            .movie-content {
                position: relative;
                z-index: 1;
                margin-left: 0;
                padding: 195px 14px 14px;
                /* Desktop-Rückwärtsverlauf und vertikale Zentrierung gelten
                   nur dort - auf Mobile liegt der Text unter dem Poster. */
                background: none;
                justify-content: flex-start;
            }

            .movie-title,
            .movie-desc,
            .movie-runtime,
            .movie-altersfreigabe {
                text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
            }

            .movie-title {
                font-size: 1rem;
            }

            .movie-desc {
                font-size: 0.8rem;
            }

            .popcorn {
                font-size: 1.1rem;
            }

            .movie-runtime,
            .movie-altersfreigabe {
                font-size: 0.75rem;
            }

            .meta-icon {
                height: 15px;
            }

            .movie-meta-row {
                gap: 6px;
            }

            .movie-meta-left {
                gap: 8px;
            }

            .movie-rating {
                gap: 4px;
            }

            /* Trailer-Button auf Mobile deutlich kompakter, sonst passt
               er nicht mehr neben TMDB-Icon und Bewertung in eine Zeile */
            .trailer-karten-btn {
                font-size: 0.66rem;
                padding: 2px 6px;
                gap: 2px;
                border-radius: 9px;
            }

            footer {
                font-size: 0.7rem;
                padding: 8px 5px;
            }
        }