/* cjube. – Website (Cjube-B-003)
 * Erbe des alten cjube: Logo „cjube.“ in Play, schwarze Würfel, Weiß, Rot als Akzent.
 * Dunkel wie ein Kino, Bild zuerst. Kein Framework, keine fremden Server.
 */

@font-face { font-family: "Play"; src: url("schrift/play-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Play"; src: url("schrift/play-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
    --grund: #0c0c0e;
    --flaeche: #16161a;
    --flaeche-2: #1f1f25;
    /* Cjube-B-031: Kanal-Bereich der Startseite – einen Hauch heller als --flaeche, damit er sich vom Grund abhebt */
    --flaeche-bereich: #1c1c22;
    --linie: #2a2a31;
    --text: #ececef;
    --leise: #9a9aa4;
    --rot: #e3262f;
    --rot-hell: #ff4a52;
    --radius: 10px;
    --breite: 1480px;
    --rand: clamp(16px, 4vw, 40px);
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --marke: "Play", var(--schrift);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font: 16px/1.55 var(--schrift);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--marke); font-weight: 700; line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--rot-hell); outline-offset: 2px; border-radius: 4px; }
.sprung { position: absolute; left: -999px; top: 8px; background: var(--rot); color: #fff; padding: 8px 12px; z-index: 100; border-radius: 6px; }
.sprung:focus { left: 8px; }

/* --- Kopf ------------------------------------------------------------------ */
.kopf {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 24px;
    padding: 12px var(--rand);
    background: rgba(12, 12, 14, .82);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.logo { font: 700 30px/1 var(--marke); letter-spacing: -.03em; color: #fff; }
.logo span, .fuss-logo > span:first-child, .buehne h1 span { color: var(--rot); }
.nav { display: flex; gap: 4px 18px; flex-wrap: wrap; align-items: center; font: 400 17px/1 var(--marke); }
.nav a { color: var(--leise); padding: 6px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav .zufall { background: var(--rot); color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 14px; }
.nav .zufall:hover { background: var(--rot-hell); }
.suchfeld { margin-left: auto; }
.suchfeld input, .suchfeld-gross input {
    background: var(--flaeche); border: 1px solid var(--linie); color: var(--text);
    border-radius: 999px; padding: 8px 14px; font: inherit; width: 220px; max-width: 40vw;
}
.suchfeld input:focus, .suchfeld-gross input:focus { outline: none; border-color: var(--leise); }

/* --- Inhalt ------------------------------------------------------------------ */
.inhalt { flex: 1; width: 100%; max-width: var(--breite); margin: 0 auto; padding: 24px var(--rand) 64px; }
.abschnitt { font-size: 22px; margin: 40px 0 16px; }
.vorzeile { font: 400 14px/1.3 var(--marke); text-transform: uppercase; letter-spacing: .08em; color: var(--rot-hell); margin: 0 0 6px; }
.einleitung { color: var(--leise); max-width: 70ch; font-size: 17px; }
.anzahl { color: var(--leise); font-size: 14px; }

/* Bühne der Startseite: die grinsenden Würfel von damals */
.buehne {
    position: relative; overflow: hidden;
    border-radius: 16px; min-height: 340px;
    display: flex; align-items: flex-end;
    padding: clamp(24px, 5vw, 56px);
    background: linear-gradient(180deg, rgba(12, 12, 14, .05) 0%, rgba(12, 12, 14, .55) 55%, rgba(12, 12, 14, .96) 100%), url("bild/cjubees.webp") center 40% / cover no-repeat;
    margin-bottom: 8px;
}
.buehne-klein { min-height: 260px; }
.buehne h1 { font-size: clamp(56px, 10vw, 112px); letter-spacing: -.04em; margin: 0; }
.slogan { font: 400 clamp(18px, 2.4vw, 26px)/1.2 var(--marke); margin: 0 0 12px; color: #fff; }
.buehne-text > p { max-width: 56ch; color: #d7d7dc; }
.buehne-knoepfe, .seitenkopf-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 18px; }

.knopf {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px;
    background: var(--flaeche-2); border: 1px solid var(--linie);
    color: var(--text); font: 700 15px/1 var(--marke); cursor: pointer;
}
.knopf:hover { background: #2a2a32; color: #fff; }
.knopf-rot { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf-rot:hover { background: var(--rot-hell); border-color: var(--rot-hell); }
.knopf-gross { font-size: 20px; padding: 14px 28px; }
.tv-link { font: 700 14px/1 var(--marke); color: var(--rot-hell); }
.tv-link:hover { color: #fff; }

/* --- Karten und Raster --------------------------------------------------------- */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 28px 20px; }
.karte { min-width: 0; }
.karte-link { display: block; }
.karte-bild {
    position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--radius); background: var(--flaeche);
}
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.karte-link:hover .karte-bild img { transform: scale(1.04); filter: brightness(1.08); }
.dauer, .marke {
    position: absolute; bottom: 8px; padding: 2px 6px; border-radius: 4px;
    font: 700 12px/1.3 var(--marke); background: rgba(0, 0, 0, .78); color: #fff;
}
.dauer { right: 8px; }
.marke { left: 8px; background: rgba(227, 38, 47, .9); }
.karte-titel {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 10px; font-weight: 600; line-height: 1.35;
}
.karte-tags { margin: 6px 0 0; font-size: 13px; color: var(--leise); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.karte-tags a:hover { color: #fff; }
.mehr { text-align: center; margin: 36px 0 0; }

/* Reihen: Kanäle als Band wie im Fernsehprogramm */
.reihe { margin-top: 36px; }
.reihe-kopf { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.reihe-kopf h2 { font-size: 22px; margin: 0; }
/* /channels: Kanalnamen größer (Cjube-B-022) */
.seite-sammlungen .reihe-kopf h2 { font-size: 30px; }
/* Startseite (Cjube-B-025): Überschriften so groß wie auf /channels */
.seite-start .reihe-kopf h2, .seite-start h2.abschnitt { font-size: 30px; }
.seite-start .reihe-kopf .abschnitt { margin: 0; }
.latest { margin-top: 36px; }
/* Kanal-Bereich zwischen „Latest“ und „More latest“: hellere Fläche über die ganze Breite, feine
   Linien oben und unten. Fläche per box-shadow, Linien per border-image nach außen verlängert,
   clip-path schneidet oben und unten ab – so entsteht kein Querscrollen. */
.kanaele-bereich {
    margin: 48px 0; padding: 18px 0 36px; background: var(--flaeche-bereich);
    box-shadow: 0 0 0 100vmax var(--flaeche-bereich); clip-path: inset(0 -100vmax);
    border-block: 1px solid var(--linie);
    border-image: linear-gradient(var(--linie), var(--linie)) 1 / 1px 0 / 0 100vmax;
}
.kanaele-bereich .reihe:first-of-type { margin-top: 8px; }
.kanaele-bereich-kopf { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.kanaele-bereich-kopf a { color: var(--leise); }
.kanaele-bereich-kopf a:hover { color: var(--text); }
.reihe-band {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 22%);
    gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px;
    scrollbar-width: thin; scrollbar-color: var(--linie) transparent;
}
.reihe-band > * { scroll-snap-align: start; }
.reihe-alle {
    display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--radius); padding: 12px; text-align: center;
    background: var(--flaeche-2); border: 2px solid var(--leise); color: var(--text);
    font: 700 22px/1.2 var(--marke);
}
/* Cjube-B-025: deutlich als „weiter“ erkennbar, mit Anzahl */
.reihe-alle:hover, .reihe-alle:focus-visible { border-color: var(--rot); color: #fff; }

/* --- Seitenköpfe, Tags --------------------------------------------------------- */
.seitenkopf { margin: 8px 0 28px; }
.seitenkopf h1 { font-size: clamp(32px, 5vw, 54px); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; align-items: center; }
.tag { padding: 5px 11px; border-radius: 999px; background: var(--flaeche-2); border: 1px solid var(--linie); font-size: 14px; color: #d4d4da; }
.tag:hover { border-color: var(--leise); color: #fff; }
.tag small { color: var(--leise); margin-left: 4px; }
.tag-person { border-color: #3d3550; }
.tag-reihe { border-color: #35453f; }
.nachbarn .vorzeile { width: 100%; margin-bottom: 0; }
.wolke { line-height: 2.1; max-width: 1100px; }
.wolke a { margin-right: 14px; color: var(--leise); white-space: nowrap; font-family: var(--marke); }
.wolke a:hover { color: #fff; }
.wolke-1 { font-size: 14px; } .wolke-2 { font-size: 17px; } .wolke-3 { font-size: 21px; color: #c3c3ca !important; }
.wolke-4 { font-size: 26px; color: #e1e1e6 !important; } .wolke-5 { font-size: 32px; color: #fff !important; }

/* --- Video-Seite -------------------------------------------------------------- */
/* Eine Ansicht für Video und TV (Cjube-B-023): links Player und Text, rechts „Next in …“ und Programm */
.ansicht { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
/* Breit: Player und Text liegen im selben Raster wie die Leiste (display: contents am <article>).
   So schaltet „Wide“ (Cjube-B-026) nur die Bereiche um – der Player bleibt, wo er im DOM ist, und
   lädt nicht neu. Standard: Player und Text links, Leiste rechts daneben. */
@media (min-width: 1100px) {
    /* Nachtrag Cjube-B-026: Die Leiste ist so hoch wie Player und Text links (contain: size – sie
       bestimmt die Höhe der Zeilen nicht mit), die Liste füllt den Rest und scrollt. Darunter
       „More like this“ über die ganze Breite – ohne Lücke unter dem Video. Mindesthöhe, damit neben
       einem kleinen Player noch ein paar Einträge Platz haben. */
    .ansicht-zweispaltig {
        grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto auto auto;
        grid-template-areas: "player leiste" "text leiste" "verwandt verwandt"; gap: 12px 24px;
    }
    .ansicht-zweispaltig > .video { display: contents; }
    .ansicht-zweispaltig > .video > .player { grid-area: player; }
    .ansicht-zweispaltig > .video > .video-text { grid-area: text; align-self: start; min-width: 0; }
    .ansicht-zweispaltig > .ansicht-leiste { grid-area: leiste; align-self: stretch; contain: size; min-height: 560px; overflow: hidden; }
    .ansicht-zweispaltig > .ansicht-leiste > .programm { flex: 1 1 0; min-height: 0; max-height: none; }
    .ansicht-zweispaltig > .verwandt { grid-area: verwandt; min-width: 0; margin-top: 12px; }
    .ansicht-zweispaltig > .verwandt .abschnitt { margin-top: 12px; }
    [data-tv].ansicht-zweispaltig > .ansicht-leiste { min-height: 70vh; }
    /* Wide: Player über die ganze Fensterbreite (ohne Satzspiegel), darunter links Text und „More like
       this“ (so viele Spalten, wie Platz ist), rechts die Leiste in ihrer natürlichen Höhe, die Liste
       etwa 10 Einträge. Die letzte Zeile (1fr) nimmt auf, was die Leiste länger ist als links. */
    html.cjube-wide .inhalt:has(> .ansicht-zweispaltig) { max-width: none; }
    .cjube-wide .ansicht-zweispaltig {
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas: "player player" "text leiste" "verwandt leiste" ". leiste";
    }
    /* Cjube-B-031: „Next in …“ in Wide 15 px tiefer – Luft zum Player darüber */
    .cjube-wide .ansicht-zweispaltig > .ansicht-leiste { align-self: start; contain: none; min-height: 0; overflow: visible; padding-top: 15px; }
    .cjube-wide .ansicht-zweispaltig > .ansicht-leiste > .programm { flex: none; max-height: 720px; }
    .cjube-wide .ansicht-zweispaltig > .video > .player { max-height: 85vh; }
    .cjube-wide .ansicht-zweispaltig > .verwandt .abschnitt { margin-top: 0; }
}
/* Knopf „Wide“ nur, wo es zwei Spalten gibt (Cjube-B-026) */
@media (max-width: 1099px) { .wide-knopf { display: none !important; } }
.ansicht:not(.ansicht-zweispaltig) .wide-knopf { display: none !important; }
.wide-symbol { display: inline-block; width: 18px; height: 11px; border: 2px solid currentColor; border-radius: 2px; vertical-align: -1px; }
.wide-knopf[aria-pressed=true] .wide-symbol { width: 14px; height: 9px; }
.video { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.ansicht-leiste { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ansicht-leiste h2, .ansicht-naechstes h2 { font-size: 16px; color: var(--leise); margin: 0 0 8px; }
.ansicht-naechstes:empty { display: none; }
.ansicht-steuerung { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.knopf-an { border-color: var(--rot); }
.programm { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 420px; border-top: 1px solid var(--linie); }
/* Cjube-B-025: neben dem Player etwa 6 Einträge, damit „More like this“ nah bleibt; im TV-Modus höher */
[data-tv] .programm { max-height: 62vh; }
.programm a { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--linie); color: var(--leise); font-size: 14px; }
.programm img { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; flex: none; }
.programm a:hover, .programm .laeuft a { color: #fff; }
.programm .laeuft a { background: var(--flaeche-2); box-shadow: inset 3px 0 0 var(--rot); }
.player {
    position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh;
    border-radius: 14px; overflow: hidden; background: #000;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); }
.player-start {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
    display: grid; place-items: center;
    background: var(--rot); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transition: transform .15s ease, background .15s;
}
.player-start:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--rot-hell); }
/* Cjube-B-030: Dreieck mittig (Grid), optisch etwas nach rechts – als Anteil der Knopfgröße, in jeder Größe gleich */
.player-start span {
    display: block; width: 30%; height: 36%; margin-left: 8%;
    background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.player-hinweis {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 18px; z-index: 1; pointer-events: none;
    font-size: 13px; color: #cfcfd5; background: linear-gradient(transparent, rgba(0, 0, 0, .85));
    display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
}
.player-hinweis label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; pointer-events: auto; }
/* Cjube-B-030: flache Player (unter ~240 px) – der Hinweis steht unter dem Player, eine kompakte Zeile */
.player-hinweis.player-hinweis-unten {
    position: static; pointer-events: auto; background: none; padding: 8px 2px 0; font-size: 12px; color: var(--leise); gap: 4px 12px;
}
.player.belegt + .player-hinweis-unten { display: none; }
/* Weiße Balken bei breiten Videos (Cjube-B-030): Chrome malt ein iframe deckend, wenn dessen Seite
   ein anderes Farbschema hat als die Website (cjube: dark). Gleiches Schema → durchsichtig, der
   schwarze Hintergrund des Players bzw. Docks zeigt sich. */
.player iframe, .spielbuehne iframe, .tv-player iframe { color-scheme: light; background: #000; }
.player-weg .player-hinweis { top: 50%; bottom: auto; transform: translateY(-50%); background: none; font-size: 16px; justify-content: center; text-align: center; }
.video-text h1 { font-size: clamp(26px, 3.4vw, 40px); }
.video-meta { color: var(--leise); font-size: 15px; }
.video-meta a { color: #cfcfd6; border-bottom: 1px solid var(--linie); }
.video-meta a:hover { border-color: var(--leise); }
.kuratortext { font-size: 18px; max-width: 70ch; }
.quelltext { color: var(--leise); max-width: 80ch; margin-top: 16px; }
.quelltext summary { cursor: pointer; font-size: 14px; }
.quelltext p { white-space: pre-line; font-size: 14px; }
.verwandt { margin-top: 24px; }

/* --- TV (Cjube-B-023: Player der einen Ansicht, mit Start-Schirm) ----------------- */
.tv-player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; max-height: 82vh; }
.tv-player iframe, .tv-player > div:not(.tv-start) { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.tv-start { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 12px; padding: 24px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .72), rgba(0, 0, 0, .35)); }
.tv-sender { font: 700 clamp(28px, 4vw, 52px)/1 var(--marke); margin: 0; }
.tv-start .knopf { justify-self: center; }
.tv-start .player-hinweis { position: static; background: none; max-width: 52ch; justify-content: center; }

/* --- Archiv, Suche, Texte ------------------------------------------------------- */
.jahre { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-width: 760px; }
.jahre a { display: grid; grid-template-columns: 80px 1fr 130px; align-items: center; gap: 16px; padding: 12px 16px; background: var(--flaeche); border-radius: var(--radius); }
.jahre a:hover { background: var(--flaeche-2); }
.jahr { font: 700 26px/1 var(--marke); }
.balken { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--rot) var(--anteil, 0%), var(--linie) var(--anteil, 0%)); }
.jahre-kurz { display: flex; gap: 14px; font-family: var(--marke); color: var(--leise); }
.jahre-kurz [aria-current] { color: #fff; }
.suchfeld-gross { display: flex; gap: 10px; flex-wrap: wrap; max-width: 680px; }
.suchfeld-gross input { flex: 1; width: auto; max-width: none; font-size: 18px; padding: 12px 18px; }
.text { max-width: 72ch; }
.text-bild { border-radius: 14px; margin-bottom: 24px; }
.text-inhalt { font-size: 17px; }
.text-inhalt a { color: var(--rot-hell); }

/* Vorschläge beim Tippen im Suchfeld (Cjube-B-024) */
.suchfeld, .suchfeld-gross { position: relative; }
.suchvorschlaege {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: min(440px, calc(100vw - 32px));
    max-height: 70vh; overflow-y: auto; overflow-x: hidden; padding: 6px; display: grid; gap: 2px;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.suchfeld-gross .suchvorschlaege { left: 0; right: auto; }
.suchvorschlaege-titel { margin: 8px 8px 2px; font-size: 12px; color: var(--leise); text-transform: uppercase; letter-spacing: .06em; }
.suchvorschlaege a { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; color: var(--text); font-size: 15px; }
.suchvorschlaege a { min-width: 0; }
.suchvorschlaege a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suchvorschlaege a small { flex: none; color: var(--leise); }
.suchvorschlaege img { width: 64px; height: 36px; object-fit: cover; border-radius: 4px; flex: none; }
.suchvorschlaege a:hover, .suchvorschlaege a[aria-selected=true] { background: var(--flaeche-2); }
.suchvorschlaege-meint { font-style: italic; }

/* Teilen (Cjube-B-025): eigener Knopf unter dem Player, teilt nur die cjube-Adresse */
.teilen { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: flex-end; margin: 0 0 8px; }
.teilen:not(:has(:not([hidden]))) { display: none; }
.teilen-meldung { color: var(--leise); font-size: 14px; }
.teilen-meldung:empty { display: none; }
.teilen-feld { width: min(100%, 420px); background: var(--flaeche); border: 1px solid var(--linie); color: var(--text); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 14px; }
.seitenkopf .teilen { justify-content: flex-start; margin-top: 12px; }

/* Bühne und Dock (Cjube-B-027): Der Player lebt außerhalb von <main>. Groß liegt die Bühne genau
   über dem Platzhalter (Maße setzt cjube.js), angedockt unten rechts mit Senderleiste darunter –
   nie darüber (YouTube: nichts vor dem Player, mindestens 200 × 200 px sichtbar). */
.spielbuehne { position: absolute; z-index: 10; background: #000; border-radius: 14px; overflow: hidden; }
.spielbuehne-video { position: relative; width: 100%; height: 100%; }
.spielbuehne-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Cjube-B-030: eigener Vollbild-Knopf – die Bühne füllt den Bildschirm, das iframe darin */
.spielbuehne:fullscreen { border-radius: 0; background: #000; }
.spielbuehne:fullscreen .spielbuehne-video { height: 100%; aspect-ratio: auto; min-height: 0; }
.spielbuehne:fullscreen .spielbuehne-leiste { display: none; }
.spielbuehne:-webkit-full-screen { border-radius: 0; background: #000; }
.spielbuehne:not(.angedockt) .spielbuehne-leiste { display: none; }
.spielbuehne.angedockt {
    position: fixed; z-index: 30; right: 16px; bottom: 16px; width: 400px; height: auto; border-radius: 12px;
    background: var(--flaeche-2); border: 1px solid var(--linie); box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
.spielbuehne.angedockt .spielbuehne-video { height: auto; aspect-ratio: 16 / 9; min-height: 200px; background: #000; }
.spielbuehne-leiste { display: flex; gap: 8px; align-items: center; padding: 8px 10px; }
.spielbuehne-text { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.3; overflow: hidden; }
.spielbuehne-sender { display: block; color: var(--rot-hell); font-family: var(--marke); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.spielbuehne-sender:empty { display: none; }
.spielbuehne-titel { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.spielbuehne-knoepfe { display: flex; gap: 6px; margin: 0; flex: none; }
.spielbuehne-knoepfe .knopf { padding: 6px 10px; font-size: 14px; }
.player.belegt > * { visibility: hidden; }
@media (max-width: 699px) {
    .spielbuehne.angedockt { left: 0; right: 0; bottom: 0; width: 100%; border-radius: 0; border-width: 1px 0 0; }
    .mit-dock body { padding-bottom: calc(56.25vw + 52px); }
}
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
html.laedt main { opacity: .7; transition: opacity .2s .15s; }

/* --- „My channel“ (Cjube-B-028) -------------------------------------------------------------- */
/* ＋ auf Karten: oben rechts über dem Bild; ✓ = drin (rot). Ohne JavaScript versteckt. */
.karte { position: relative; }
.merken {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
    min-width: 34px; height: 34px; padding: 0 8px; border-radius: 17px; border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(12, 12, 14, .72); color: #fff; font: 700 18px/1 var(--marke);
}
.merken:hover { background: rgba(40, 40, 48, .92); }
.merken[aria-pressed="true"] { background: var(--rot); border-color: var(--rot); }
.merken:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.karte > .merken { position: absolute; top: 8px; right: 8px; }
.merken.merken-gross { height: auto; font-size: 15px; border-radius: 999px; padding: 8px 14px; }
.programm li { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--linie); }
.programm li > a { flex: 1; min-width: 0; border-bottom: 0; }
.programm li.laeuft { background: var(--flaeche-2); box-shadow: inset 3px 0 0 var(--rot); }
.programm li.laeuft > a { background: none; box-shadow: none; }
.programm li > .merken { flex: none; margin-right: 4px; min-width: 30px; height: 30px; font-size: 16px; }
.spielbuehne-knoepfe .merken { height: auto; border-radius: 8px; }
.ansicht-ende { color: var(--leise); margin: 0; }
.nav .nav-mein { color: #fff; }
.mein-meldung {
    position: fixed; left: 16px; bottom: 16px; z-index: 40; margin: 0; max-width: calc(100vw - 32px);
    padding: 10px 14px; border-radius: 10px; background: var(--flaeche-2); color: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
    font-size: 15px;
}
html.mit-dock .mein-meldung { bottom: auto; top: 16px; }
.mein-hinweis { color: var(--rot-hell); max-width: 70ch; }
.mein-teilen-hinweis { color: var(--leise); font-size: 14px; }
.mein-richtung { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.mein-richtung [aria-pressed="true"] { border-color: var(--rot); color: #fff; }
.mein-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); max-width: 900px; }
.mein-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--linie); background: var(--grund, transparent); }
.mein-zeile.zieht { background: var(--flaeche-2); box-shadow: 0 6px 24px rgba(0, 0, 0, .5); position: relative; z-index: 2; }
.mein-anfasser {
    flex: none; width: 36px; height: 44px; border: 0; border-radius: 8px; background: none; color: var(--leise);
    font-size: 20px; cursor: grab; touch-action: none;
}
.mein-anfasser:hover, .mein-anfasser:focus-visible { background: var(--flaeche-2); color: #fff; }
.mein-zeile.zieht .mein-anfasser { cursor: grabbing; }
.mein-video { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--text); }
.mein-video img { width: 128px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; background: var(--flaeche); }
.mein-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mein-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mein-kanal { color: var(--leise); font-size: 14px; }
.mein-weg .mein-text { color: var(--leise); font-style: italic; }
.mein-knoepfe { display: flex; gap: 2px; flex: none; }
.knopf-leise { border: 0; background: none; color: var(--leise); font: inherit; cursor: pointer; padding: 8px 10px; border-radius: 8px; }
.knopf-leise:hover, .knopf-leise:focus-visible { background: var(--flaeche-2); color: #fff; }
.mein-leer { color: var(--leise); }
.mein-leeren { margin: 16px 0 0; }
.mein-sync { margin: 40px 0 0; max-width: 900px; padding: 20px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.mein-sync h2 { margin: 0 0 8px; font-size: 22px; }
.mein-sync .teilen { justify-content: flex-start; }
.mein-sync-erklaerung { border-left: 3px solid var(--rot); padding-left: 14px; max-width: 70ch; }
.mein-sync-hinweis { color: var(--leise); font-size: 14px; }
@media (max-width: 699px) {
    .mein-video img { width: 96px; height: 54px; }
    .mein-knoepfe [data-mein-hoch], .mein-knoepfe [data-mein-runter] { display: none; }
}

/* --- Fuß ------------------------------------------------------------------------ */
.fuss {
    border-top: 1px solid var(--linie); padding: 28px var(--rand) 40px; color: var(--leise);
    display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between;
}
.fuss-logo { margin: 0; font: 700 22px/1 var(--marke); color: #fff; }
.fuss-logo > span:last-child { font-weight: 400; font-size: 15px; color: var(--leise); margin-left: 8px; }
.fuss-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.fuss-nav button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }

/* --- Schmale Bildschirme --------------------------------------------------------- */
@media (max-width: 760px) {
    .kopf { flex-wrap: wrap; gap: 10px 16px; }
    .suchfeld { order: 3; width: 100%; margin: 0; }
    .suchfeld input { width: 100%; max-width: none; }
    .nav { font-size: 15px; gap: 4px 14px; }
    .reihe-band { grid-auto-columns: 72%; }
    .seite-sammlungen .reihe-kopf h2, .seite-start .reihe-kopf h2, .seite-start h2.abschnitt { font-size: 24px; }
    .reihe-alle { font-size: 18px; }
    .jahre a { grid-template-columns: 64px 1fr; }
    .jahre .anzahl { grid-column: 1 / -1; }
    .player-start { width: 68px; height: 68px; }
    /* Cjube-B-030: sehr breite Formate am Handy nicht flacher als 200 px – Vorschaubild mit Balken */
    .player { min-height: 200px; }
    .player .player-bild { object-fit: contain; }
}
/* hidden gilt immer – auch gegen display: grid/flex einer Klasse */
[hidden] { display: none !important; }

/* Einreichen (Cjube-B-004) – auch als kleines Fenster des Lesezeichens (560 px) */
.einreichen h1 { font-size: clamp(26px, 4vw, 36px); }
.einreichen-form { display: grid; gap: 16px; margin-top: 18px; }
.einreichen-form label { display: grid; gap: 6px; font-family: var(--marke); }
.einreichen-form input, .einreichen-form textarea {
    width: 100%; background: var(--flaeche); border: 1px solid var(--linie); color: var(--text);
    border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 16px;
}
.einreichen-form textarea { resize: vertical; min-height: 96px; }
.einreichen-form input:focus, .einreichen-form textarea:focus { outline: none; border-color: var(--leise); }
.einreichen-titel { margin: 0; padding: 10px 14px; border-left: 3px solid var(--rot); background: var(--flaeche); color: #ddd; }
.einreichen-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; }
.einreichen-ergebnis { min-height: 1.5em; margin: 0; font-size: 17px; }
.einreichen-ergebnis.ok { color: #7bd88f; }
.einreichen-ergebnis.fehler { color: #ff7b80; }
.einreichen-ergebnis a { color: #fff; border-bottom: 1px solid var(--rot); }
.leise { color: var(--leise); font-family: inherit; font-size: 14px; }
.textknopf { background: none; border: 0; padding: 0; color: var(--leise); font: inherit; text-decoration: underline; cursor: pointer; }
/* Ablage (Cjube-B-011): ziehen und einfügen, Ergebnisliste, Overlay beim Darüberziehen */
.einreichen-zone { margin-top: 18px; padding: 22px; border: 2px dashed var(--linie); border-radius: 14px; background: var(--flaeche); display: grid; gap: 12px; }
.einreichen-zone-text { margin: 0; font-family: var(--marke); font-size: 18px; }
.einreichen-zone textarea { width: 100%; background: var(--grund, #111); border: 1px solid var(--linie); color: var(--text); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; resize: vertical; }
/* Studio (Cjube-B-013): zwei Zonen ab ~300 px, Liste zum Kuratieren */
.einreichen { max-width: 900px; }
.einreichen-zonen { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 300px) { .einreichen-zonen { grid-template-columns: 1fr 1fr; } }
.einreichen-zonen .einreichen-zone { margin-top: 0; }
.einreichen-zone-titel { margin: 0; font-family: var(--marke); font-size: 20px; color: #fff; }
.einreichen-zone-studio { border-color: var(--rot); }
.studio { margin-top: 18px; display: grid; gap: 14px; }
/* Cjube-B-020: Rahmen „collect & curate“ um die Liste; Kachel, die das Lesezeichen schon fand */
.einreichen-zone.studio { gap: 14px; min-width: 0; }
.studio-ablage { min-height: 0; }
.studio-tastatur { margin: 0; font-size: 13px; }
.studio-zeile.hervor { outline: 2px solid var(--rot-hell); outline-offset: 2px; }
.einreichen-hinweis { margin: 18px 0 0; padding: 10px 14px; border-left: 3px solid var(--rot); background: var(--flaeche); }
.einreichen [data-studio] { padding: 16px; }
.studio-hinweis { margin: 0; }
.studio-kopf { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.studio label, .studio-feld { display: grid; gap: 4px; font-family: var(--marke); }
.studio input[type=text], .studio textarea { width: 100%; background: var(--flaeche); border: 1px solid var(--linie); color: var(--text); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 15px; }
.studio-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* Kacheln einen Hauch heller als der Grund, mit feiner Linie (Cjube-B-017) */
.studio-zeile { padding: 12px; border-radius: 12px; background: var(--flaeche-2); border: 1px solid var(--linie); display: grid; gap: 10px; }
.studio-zeile-kopf { display: flex; gap: 10px; align-items: center; }
/* Schmale Fenster (Lesezeichen-Popup, Handy, Cjube-B-020): Titel unter Bild und Knöpfe, kleineres Bild */
@media (max-width: 420px) {
    .studio-zeile-kopf { flex-wrap: wrap; }
    .studio-zeile-kopf img, .studio-zeile-kopf .studio-bild-leer { width: 96px; height: 54px; }
    .studio-quelle { flex-basis: 100%; order: 3; }
    .einreichen [data-studio] { padding: 12px; }
}
.studio-zeile-kopf img, .studio-bild-leer { width: 120px; height: 68px; object-fit: cover; border-radius: 6px; background: #222; flex: none; }
.studio-quelle { display: grid; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.studio-griff { cursor: grab; color: var(--leise); user-select: none; }
.studio-aktionen { display: flex; gap: 8px; }
.studio-aktionen .textknopf { text-decoration: none; font-size: 18px; }
.studio-felder { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.studio-kanaele, .studio-schalter { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: inherit; }
.studio-kanaele label, .studio-schalter label { display: inline-flex; gap: 4px; align-items: center; font-family: inherit; }
/* „publish“ und „now“ (Nachtrag Cjube-B-020): abgesetzt von den Kanälen, „now“ eingerückt als Teil von „publish“ */
.studio-schalter:not(:empty) { flex-direction: column; align-items: flex-start; gap: 4px; border-top: 1px solid var(--linie); padding-top: 10px; }
.studio-schalter .studio-sofort { padding-left: 6px; flex-wrap: wrap; }
.studio-sofort-pfeil { color: var(--leise); }
.studio-sofort:has(input:disabled) { opacity: .5; }
/* Kanäle gruppiert (Cjube-B-017): Startseite oben, die übrigen abgesetzt darunter */
.studio-kanaele { display: grid; gap: 8px; }
.studio-kanaele-reihe { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.studio-kanaele-weitere.abgesetzt { border-top: 1px solid var(--linie); padding-top: 8px; }
.studio-kanaele-titel { flex-basis: 100%; font-size: 13px; }
.studio-status { margin: 0; min-height: 0; }
.studio-reiter { display: flex; gap: 8px; margin: 18px 0 0; }
.studio-reiter [aria-selected=true] { background: var(--rot); color: #fff; }
.polieren { margin-top: 18px; display: grid; gap: 12px; }
.polieren-filter { display: grid; gap: 4px; max-width: 320px; font-family: var(--marke); }
.polieren-filter select { background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; font: inherit; }
.polieren-vorschlag { margin: 0; padding: 8px 12px; border-left: 3px solid var(--rot); background: rgba(255, 255, 255, .04); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
/* Tags beim Tippen vervollständigen (Cjube-B-018) – gleiche Optik wie die Quell-Tag-Chips */
.cjube-tagleiste { display: grid; gap: 6px; margin-top: 6px; }
.cjube-tagleiste-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.cjube-tagvorschlag, .cjube-tagmeintest { border: 1px solid #7bd88f; border-radius: 999px; padding: 3px 10px; background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.cjube-tagvorschlag span { color: var(--leise); font-size: 12px; }
.cjube-tagvorschlag.aktiv, .cjube-tagvorschlag:hover { background: rgba(123, 216, 143, .16); }
.cjube-tagleiste-hinweis { color: var(--leise); font-size: 13px; }
.cjube-tagmeintest { padding: 1px 8px; font-size: 13px; border-style: dashed; }
/* Tags der Quelle als Chips (Cjube-B-016) */
.studio-quelltags { display: grid; gap: 6px; }
.quell-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.quell-chip { border: 1px solid var(--linie); border-radius: 999px; padding: 3px 10px; background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.quell-chip span { color: var(--leise); font-size: 12px; }
.quell-chip.bekannt { border-color: #7bd88f; }
.quell-chip.neu { border-style: dashed; }
.quell-chip.gesetzt { opacity: .45; text-decoration: line-through; cursor: default; }
.einreichen-liste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.einreichen-liste li { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: var(--flaeche); overflow-wrap: anywhere; }
.einreichen-liste .zeile-ergebnis { color: var(--leise); }
.einreichen-liste .ok .zeile-ergebnis { color: #7bd88f; }
.einreichen-liste .fehler .zeile-ergebnis { color: #ff7b80; }
.einreichen-liste a { color: #fff; border-bottom: 1px solid var(--rot); }
.einreichen-werkzeuge { margin-top: 26px; border-top: 1px solid var(--linie); padding-top: 14px; }
.einreichen-werkzeuge .lesezeichen { cursor: grab; margin-right: 10px; }
.einreichen-drop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(227, 38, 47, .18); border: 4px dashed var(--rot); pointer-events: none; }
.einreichen-drop p { font-family: var(--marke); font-size: 28px; color: #fff; background: rgba(0, 0, 0, .7); padding: 14px 24px; border-radius: 12px; }
.seite-einreichen .kopf .nav, .seite-einreichen .kopf .suchfeld { display: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }