/* ===========================================================================
   PawFlix - "Foxfire Cinema"
   Tiefes Pflaumen-Schwarz, Glut-Orange als einziger Held-Akzent.
   =========================================================================== */

:root {
  --bg:        #17121f;
  --bg-2:      #1e1727;
  --bg-3:      #271e34;
  --bg-hi:     #322544;
  --line:      #3a2d4e;
  --ink:       #f5eefc;
  --muted:     #a596bd;
  --faint:     #6f6088;
  --ember:     #ff6a3d;
  --ember-hi:  #ffb457;
  --ember-glow: rgba(255, 106, 61, 0.45);
  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 18px 50px -20px rgba(0,0,0,0.8);
  --maxw:      1400px;
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,106,61,0.10), transparent 55%),
    radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,0.55), transparent 60%);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 .3em; }
h2 { font-size: 1.35rem; margin: 0 0 .6em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 44px); position: relative; z-index: 2; }

/* Navbar */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 22px;
  padding: 14px clamp(16px, 4vw, 44px);
  background: linear-gradient(180deg, rgba(23,18,31,0.96), rgba(23,18,31,0.72) 70%, transparent);
  backdrop-filter: blur(10px);
}
.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; display: flex; align-items: center; gap: 9px; }
.brand .paw { width: 26px; height: 26px; }
.brand .word { background: linear-gradient(100deg, var(--ember), var(--ember-hi)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: flex; gap: 6px; margin-left: 12px; }
.nav-links a { padding: 8px 14px; border-radius: 999px; color: var(--muted); font-weight: 500; font-size: .95rem; transition: color .15s, background .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--bg-hi); }
.nav-spacer { flex: 1; }
.nav-user { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .9rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #1a1020; background: linear-gradient(135deg, var(--ember), var(--ember-hi)); font-family: var(--font-display); }

/* Suchfeld */
.nav-search {
  flex: 1 1 auto; max-width: 440px; display: flex; align-items: center; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; transition: border-color .15s, box-shadow .15s;
}
.nav-search:focus-within { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255,106,61,0.16); }
.nav-search svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--faint); }
.nav-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--ink); font-family: var(--font-body); font-size: .95rem; padding: 0; }
.nav-search input::placeholder { color: var(--faint); }
.nav-search input::-webkit-search-cancel-button { filter: invert(.6); }

/* Menü + Hamburger */
.nav-menu { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-toggle { display: none; background: transparent; border: none; color: var(--ink); cursor: pointer; padding: 6px; border-radius: 8px; }
.nav-toggle:hover { background: var(--bg-hi); }
.nav-toggle svg { width: 26px; height: 26px; display: block; }
.nav-user .uname { white-space: nowrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 999px; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 1rem; background: var(--bg-hi); color: var(--ink); transition: transform .12s, background .15s, box-shadow .2s; }
.btn:hover { background: var(--line); }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(100deg, var(--ember), var(--ember-hi)); color: #1a1020; box-shadow: 0 10px 30px -10px var(--ember-glow); }
.btn.primary:hover { box-shadow: 0 14px 40px -8px var(--ember-glow); filter: brightness(1.05); }
.btn.ghost { background: rgba(255,255,255,0.06); }
.btn.small { padding: 8px 16px; font-size: .9rem; }
.btn:focus-visible { outline: 3px solid var(--ember-hi); outline-offset: 2px; }

/* Flash */
.flashes { max-width: var(--maxw); margin: 12px auto 0; padding: 0 clamp(16px,4vw,44px); position: relative; z-index: 3; }
.flash { padding: 12px 18px; border-radius: var(--radius-sm); margin-bottom: 8px; border: 1px solid var(--line); background: var(--bg-3); font-size: .95rem; }
.flash.error { border-color: #b0464e; background: #2a1720; }
.flash.ok { border-color: #4a7c59; background: #16241c; }

/* Hero */
.hero { position: relative; margin: 8px 0 30px; border-radius: 18px; overflow: hidden; min-height: min(48vh, 400px); box-shadow: var(--shadow); background: #17121f; }
.hero-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero .bg { position: absolute; inset: 0; z-index: 0; }
/* Das Poster liegt gross und unscharf dahinter - so traegt es die Farbe,
   ohne dass sein Motiv auf Breitbild zerschnitten wird. Scharf steht es
   daneben in seinem eigenen Format. */
.hero .bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(42px) saturate(150%); transform: scale(1.15); }
.hero .bg.placeholder { background: radial-gradient(80% 120% at 20% 10%, rgba(255,106,61,0.35), transparent 55%), linear-gradient(135deg, #2a1d3d, #17121f); }
.hero-slide::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14,10,19,0.88) 0%, rgba(14,10,19,0.66) 55%, rgba(14,10,19,0.78) 100%), linear-gradient(0deg, rgba(14,10,19,0.92), transparent 62%); }

.hero .inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: clamp(140px, 16vw, 225px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: end;
  padding: clamp(22px, 3.5vw, 40px);
  width: 100%;
  max-width: 1180px;
}

.hero-poster {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 2/3;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.08);
}

.hero-poster img { width: 100%; height: 100%; object-fit: cover; }

.hero .hero-text { min-width: 0; padding-bottom: 4px; }
.hero .kicker { color: var(--ember-hi); font-weight: 600; font-size: .92rem; margin-bottom: 10px; }
.hero p.desc { color: var(--muted); font-size: 1.05rem; margin: 6px 0 22px; max-width: 52ch; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Rows */
.row { margin: 30px 0; }
.row-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.row-head h2 { margin: 0; }
.row-head .count { color: var(--faint); font-size: .85rem; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 16px; overflow-x: auto; padding: 6px 2px 16px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* Card */
.card { display: block; position: relative; scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; background: var(--bg-3); aspect-ratio: 2/3; transition: transform .18s ease, box-shadow .25s ease; border: 1px solid transparent; }
.card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 22px 44px -18px var(--ember-glow); border-color: var(--line); }
.card .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .poster.placeholder { display: grid; place-items: center; padding: 18px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); background: radial-gradient(70% 90% at 30% 15%, rgba(255,106,61,0.4), transparent 60%), linear-gradient(150deg, #2c1f40, #1b1426); }
.card .grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10,7,14,0.93) 0%, rgba(10,7,14,0.55) 24%, transparent 48%); }
.card .meta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 14px; }
.card .meta .t { font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.25; }
.card .meta .s { color: var(--muted); font-size: .82rem; margin-top: 3px; }
.badge { display: inline-block; font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.1); color: var(--muted); margin-bottom: 6px; }
.badge.film { background: rgba(120,140,255,0.16); color: #a9b6ff; }
.progress-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.14); }
.progress-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--ember-hi)); }
.card .play { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .18s; }
.card:hover .play { opacity: 1; }
.card .play span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,106,61,0.92); color: #1a1020; box-shadow: 0 6px 20px rgba(0,0,0,.5); }

/* ---------------------------------------------------------------------------
   PawFlix-Siegel ("verifiziert")
   Gold statt Ember, damit es sich vom restlichen Orange abhebt und wie ein
   eigenes Qualitätszeichen liest und nicht wie ein weiterer Akzent.
   --------------------------------------------------------------------------- */
.siegel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  vertical-align: middle;
  color: #e4a6b4;
}

.siegel svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  /* Hebt das Wachs vom Untergrund ab - sonst klebt es auf hellen Postern */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.siegel-txt {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

.siegel.klein svg {
  width: 17px;
  height: 17px;
}

/* Auf einer Kachel sitzt es oben rechts auf dem Poster. Kein Kästchen
   drumherum - das Wachs ist selbst der Gegenstand und braucht keinen Rahmen. */
.card > .siegel.klein {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
}

.card > .siegel.klein svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

/* ------------------------------------------------- Siegel auf dem Poster
   Dort liegt es größer und leicht schief - aufgedrückt, nicht ausgerichtet. */
.siegel.gross {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
}

.siegel.gross svg {
  width: 62px;
  height: 62px;
  transform: rotate(-7deg);
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.62));
}

/* Auf kleinen Schirmen schrumpft das Poster auf ~170px - da wuerde ein
   62px-Siegel ein Drittel davon verdecken. */
@media (max-width: 820px) {
  .siegel.gross {
    top: 9px;
    right: 9px;
  }

  .siegel.gross svg {
    width: 42px;
    height: 42px;
  }
}

.siegel-fakt {
  display: inline-flex;
  align-items: center;
}

/* ------------------------------------------------- Haken im Verwalten-Bereich */
.siegel-wahl {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--ink);
  font-size: .92rem;
  cursor: pointer;
}

.siegel-wahl:hover {
  border-color: rgba(201, 86, 110, 0.5);
}

.siegel-wahl.ist-an {
  border-color: rgba(201, 86, 110, 0.6);
  background: rgba(176, 60, 84, 0.14);
}

.siegel-wahl.geerbt {
  cursor: default;
  color: var(--muted);
  background: transparent;
  border-style: dashed;
}

.siegel-wahl input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: #a8324b;
  cursor: pointer;
}

/* Genre-Tags */
.tag-wahl {
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}
.tag-kopf {
  display: block;
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 600;
}
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: .85rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.tag-chip:hover {
  border-color: var(--ember);
}
.tag-chip.aktiv {
  border-color: var(--ember);
  background: rgba(176, 60, 84, 0.14);
}
.tag-chip input[type="checkbox"] {
  display: none;
}

/* Genre-Chips auf der Startseite */
.genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.genre-chip {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: .88rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.genre-chip:hover {
  border-color: var(--ember);
  background: rgba(176, 60, 84, 0.14);
  color: var(--ink);
}

/* Admin-Vorschau im Verwalten-Bereich */
.admin-preview {
  border-radius: 10px;
  overflow: hidden;
}
.admin-video {
  width: 100%;
  max-height: 360px;
  background: #000;
  border-radius: 10px;
  display: block;
}
.admin-preview-btn {
  margin-top: 6px;
  gap: 5px;
}
.admin-preview-btn.offen svg {
  transform: rotate(90deg);
}
.admin-preview-slot {
  margin-top: 8px;
}
.admin-preview-slot video {
  width: 100%;
  max-height: 280px;
  background: #000;
  border-radius: 8px;
  display: block;
}

.tracklist-eingabe {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  padding: 12px 14px;
}

.tracklist-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 10px;
}

.tracklist-header svg {
  color: var(--ember);
  flex-shrink: 0;
}

.tracklist-header .nebensatz {
  font-weight: 400;
  color: var(--muted);
  font-size: .82rem;
  margin-left: 2px;
}

.tracklist-eingabe textarea {
  width: 100%;
  font-family: monospace;
  font-size: .84rem;
  line-height: 1.6;
  background: var(--bg-1);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
}

.tracklist-eingabe textarea:focus {
  border-color: var(--ember);
  outline: none;
}

.tracklist-hinweis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 6px;
  font-size: .78rem;
  color: var(--muted);
}

.tracklist-hinweis code {
  background: var(--bg-1);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .78rem;
}

.tracklist-fertig-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: .85rem;
  cursor: pointer;
  user-select: none;
}

.tracklist-fertig-label input[type="checkbox"] {
  accent-color: var(--ember);
  width: 16px;
  height: 16px;
}

/* Verwalten-Kopfzeile */
.verwalten-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 20px;
}

.musical-btn svg {
  color: var(--ember);
}

/* Musical-Tracklist-Status-Panel */
.musical-panel {
  margin-bottom: 20px;
  border: 1px solid var(--ember);
  border-radius: 14px;
  background: var(--bg-2);
  padding: 16px;
  animation: panelEin .2s ease;
}

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

.musical-panel[hidden] {
  display: none;
}

.musical-panel-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 12px;
}

.musical-panel-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.musical-panel-close:hover {
  color: var(--fg);
}

.musical-eintrag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--fg);
  transition: background .15s;
}

.musical-eintrag:hover {
  background: rgba(255, 255, 255, .06);
}

.musical-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9rem;
}

.musical-status {
  flex-shrink: 0;
  font-size: .8rem;
  color: var(--muted);
  background: var(--bg-1);
  padding: 2px 10px;
  border-radius: 10px;
}

/* Player Tracklist */
.tracklist-section {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 16px;
  max-height: 60vh;
  overflow-y: auto;
}

.tracklist-section[hidden] {
  display: none;
}

#tracklist-btn.active {
  background: rgba(176,70,78,.18);
  color: var(--ember-hi);
}

.tracklist-kopf {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: .95rem;
}

.tracklist-eintrag {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
  font-size: .88rem;
}

.tracklist-eintrag:hover {
  background: var(--bg-3, rgba(255,255,255,.06));
}

.tracklist-eintrag .tl-nr {
  color: var(--muted);
  min-width: 18px;
  text-align: right;
  flex-shrink: 0;
}

.tracklist-eintrag .tl-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracklist-eintrag .tl-dauer {
  color: var(--muted);
  flex-shrink: 0;
  font-size: .82rem;
}

/* Series page */
/* ---------------------------------------------------------------------------
   Kopfbereich von Film-, Serien- und Franchise-Seite
   Die Farbe kommt vom Poster selbst: es liegt gross, unscharf und abgedunkelt
   hinter dem Kopf. Barbie wird dadurch pink, Dune blau - ohne erfundenen
   Verlauf, nur mit dem Material, das ohnehin da ist.
   --------------------------------------------------------------------------- */
.series-hero {
  position: relative;
  display: grid;
  grid-template-columns: clamp(180px, 20vw, 290px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: end;
  margin: 8px 0 40px;
  padding-top: 18px;
}

.series-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  top: -150px;
  height: calc(100% + 230px);
  background-image: var(--kunst, none);
  background-size: cover;
  background-position: 50% 30%;
  filter: blur(68px) saturate(150%);
  opacity: .55;
  z-index: -2;
  pointer-events: none;
  /* Unten ausblenden statt abschneiden - sonst sieht man eine harte Kante */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
}

/* Darueber ein Schleier, damit die Schrift immer lesbar bleibt */
.series-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  top: -150px;
  height: calc(100% + 230px);
  background: linear-gradient(180deg, rgba(23,18,31,0.66) 0%, rgba(23,18,31,0.42) 40%, rgba(23,18,31,0) 100%);
  z-index: -1;
  pointer-events: none;
}

.series-hero .poster-lg {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 2/3;
  background: var(--bg-3);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.07);
}

.series-hero .poster-lg img { width: 100%; height: 100%; object-fit: cover; }
.series-hero .poster-lg.placeholder { display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; padding: 20px; text-align: center; background: radial-gradient(70% 90% at 30% 15%, rgba(255,106,61,0.4), transparent 60%), linear-gradient(150deg, #2c1f40, #1b1426); }
.series-hero .info .desc { color: var(--muted); max-width: 60ch; margin: 8px 0 18px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; align-items: center; }

.season { margin: 26px 0; }
.season h3 { font-size: 1.15rem; margin-bottom: 12px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.season h3 .line { flex: 1; height: 1px; background: var(--line); }

.ep-list { display: flex; flex-direction: column; gap: 10px; }
.ep { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid transparent; transition: background .15s, border-color .15s; }
.ep:hover { background: var(--bg-3); border-color: var(--line); }
.ep .num { font-family: var(--font-display); font-weight: 700; color: var(--faint); font-size: 1.2rem; text-align: center; }
.ep .ep-main .t { font-weight: 600; }
.ep .ep-main .sub { color: var(--faint); font-size: .82rem; margin-top: 2px; }
.ep .ep-prog { height: 3px; background: rgba(255,255,255,0.12); border-radius: 3px; margin-top: 8px; max-width: 320px; }
.ep .ep-prog > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--ember), var(--ember-hi)); }
.ep-edit-row { display: none; grid-template-columns: 1fr 130px; gap: 10px; margin-top: 10px; }
.ep.editing .ep-edit-row { display: grid; }

/* Forms */
input[type=text], input[type=password], select, textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); font-family: var(--font-body); font-size: 1rem; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255,106,61,0.18); }
label { display: block; font-size: .9rem; color: var(--muted); margin: 14px 0 6px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-of-type { border-bottom: none; }
.toggle-row .label-main { font-weight: 600; }
.toggle-row .label-sub { color: var(--faint); font-size: .85rem; margin-top: 3px; max-width: 46ch; }
.switch { position: relative; width: 52px; height: 30px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--bg-hi); border-radius: 999px; transition: .2s; border: 1px solid var(--line); }
.switch .track::before { content: ""; position: absolute; width: 22px; height: 22px; left: 4px; top: 3px; background: var(--muted); border-radius: 50%; transition: .2s; }
.switch input:checked + .track { background: linear-gradient(100deg, var(--ember), var(--ember-hi)); border-color: transparent; }
.switch input:checked + .track::before { transform: translateX(21px); background: #1a1020; }

/* Auth */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 400px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.auth-card .brand { justify-content: center; font-size: 2rem; margin-bottom: 6px; }
.auth-card .sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: .95rem; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 20px; }
.auth-alt { text-align: center; margin-top: 18px; color: var(--muted); font-size: .9rem; }
.auth-alt a { color: var(--ember-hi); font-weight: 600; }
.first-hint { background: rgba(255,106,61,0.1); border: 1px solid rgba(255,106,61,0.3); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .88rem; color: var(--ember-hi); margin-bottom: 18px; }

/* Player */
.player-page { max-width: 1200px; margin: 0 auto; padding: 20px clamp(16px,4vw,44px) 60px; position: relative; z-index: 2; }
.player-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.player-top .back { color: var(--muted); }
.player-top h1 { font-size: 1.5rem; margin: 0; }
.player-top .series-label { color: var(--faint); font-size: .9rem; }
.video-shell { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow); }
video.main { width: 100%; display: block; background: #000; aspect-ratio: 16/9; }
.player-controls { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.player-controls .spacer { flex: 1; }
.unplayable-note { background: #2a1720; border: 1px solid #b0464e; border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 16px; color: #ffb4bb; font-size: .9rem; }

/* VR */
#vr-stage { position: fixed; inset: 0; z-index: 999; background: #000; display: none; }
#vr-stage.on { display: block; }
#vr-stage canvas { width: 100%; height: 100%; display: block; }
#vr-exit { position: fixed; top: 16px; left: 16px; z-index: 1001; }
#vr-msg { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1001; color: var(--ink); font-family: var(--font-display); text-align: center; max-width: 80%; }

/* Empty */
.empty { text-align: center; padding: 80px 20px; color: var(--muted); }
.empty .paw-big { width: 72px; height: 72px; margin: 0 auto 20px; opacity: .8; }
.empty h2 { color: var(--ink); }
.empty code { background: var(--bg-3); padding: 2px 8px; border-radius: 6px; color: var(--ember-hi); font-size: .9em; }

/* Admin */
.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.panel h2 { display: flex; align-items: center; gap: 10px; }
.user-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.user-row:last-child { border-bottom: none; }
.user-row .u-name { font-weight: 600; flex: 1; }
.tag { font-size: .72rem; padding: 3px 9px; border-radius: 999px; background: var(--bg-hi); color: var(--muted); }
.tag.super { background: rgba(255,106,61,0.18); color: var(--ember-hi); }
.inline-form { display: inline; }

/* Intro */
#intro-overlay { position: fixed; inset: 0; z-index: 2000; background: var(--bg); display: grid; place-items: center; cursor: pointer; }
#intro-overlay canvas { display: block; }
#intro-skip { position: fixed; bottom: 26px; right: 26px; z-index: 2001; color: var(--faint); font-size: .82rem; }

/* Responsive */
/* Responsive / Handy
   Auch flache Fenster zaehlen dazu: ein Handy im Querformat ist 844px breit,
   die Kopfzeile passt da trotzdem nicht in eine Reihe. */
@media (max-width: 820px), (max-height: 520px) and (max-width: 1000px) {
  .nav { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .brand { order: 1; }
  .nav-toggle { order: 2; margin-left: auto; display: inline-flex; }
  .nav-search { order: 3; flex-basis: 100%; max-width: none; }
  .nav-menu {
    order: 4; flex-basis: 100%; display: none; flex-direction: column; align-items: stretch;
    gap: 4px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  }
  .nav.open .nav-menu { display: flex; }
  .nav-menu .nav-links { flex-direction: column; gap: 2px; margin: 0; }
  .nav-menu .nav-links a { padding: 13px 14px; border-radius: 10px; font-size: 1rem; }
  .nav-user { justify-content: flex-start; gap: 12px; padding: 12px 4px 4px; }
  .nav-user .uname { flex: 1; }

  .series-hero { grid-template-columns: 1fr; }
  .series-hero .poster-lg { max-width: 170px; }
  .ep { grid-template-columns: 36px 1fr; }
  .ep .ep-actions { grid-column: 1 / -1; }
  .ep .ep-actions .btn { width: 100%; justify-content: center; }

  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .rail { grid-auto-columns: min(44vw, 165px); gap: 12px; }
  .hero { min-height: 52vh; }
  .hero .inner { padding: 22px; }
  .hero .actions { gap: 10px; }
  .hero .actions .btn { flex: 1; justify-content: center; }
  h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .season-tabs { gap: 6px; }
  .season-tab { padding: 8px 14px; font-size: .88rem; }
  .player-controls .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .brand { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Staffel-Tabs */
.season-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0 18px; }
.season-tab {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--muted); font-family: var(--font-body);
  font-weight: 600; font-size: .92rem; cursor: pointer; transition: all .15s;
}
.season-tab:hover { color: var(--ink); border-color: var(--faint); }
.season-tab.active { background: rgba(255,106,61,0.16); color: var(--ember-hi); border-color: rgba(255,140,90,0.55); }
.season-tab:focus-visible { outline: 3px solid var(--ember-hi); outline-offset: 2px; }

.ep.watched { opacity: .72; }
.seen-tag { color: var(--faint); font-size: .8rem; margin-left: 6px; }

/* Kino-Beleuchtung (Ambient-Glow hinter dem Video, wie YouTube "Ambient Mode") */
.player-stage { position: relative; }
.ambient-glow {
  /* Schmale Fenster (Splitscreen, Handy, Tablet): Schein in Prozent - genau
     dieser Look soll bleiben. Ab 820px greift weiter unten eine Begrenzung. */
  position: absolute; z-index: 0;
  top: -16%; right: -12%; bottom: -22%; left: -12%;
  width: 124%; height: 138%;
  -webkit-filter: blur(60px) saturate(2.2) brightness(1.25);
  filter: blur(60px) saturate(2.2) brightness(1.25);
  opacity: 1; pointer-events: none; border-radius: 60px;
  transition: opacity .45s ease;
}
/* Knopf zeigt an, ob das Kino-Licht laeuft */
#ambient-toggle.active {
  background: var(--ember); color: #fff; border-color: var(--ember-hi);
}
.player-stage.ambient-off .ambient-glow { opacity: 0; }
.player-stage .video-shell { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ambient-glow { transition: none; } }

/* ---------------------------------------------------------------- Verwalten/Upload */
.mode-switch { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 20px; gap: 4px; }
.mode-btn { padding: 9px 18px; border-radius: 999px; border: none; background: transparent; color: var(--muted); font-family: var(--font-body); font-weight: 600; font-size: .92rem; cursor: pointer; transition: .15s; }
.mode-btn:hover { color: var(--ink); }
.mode-btn.active { background: linear-gradient(100deg, var(--ember), var(--ember-hi)); color: #1a1020; }

.type-switch { display: flex; gap: 10px; margin-bottom: 16px; }
.radio-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); cursor: pointer; font-weight: 600; }
.radio-pill input { accent-color: var(--ember); }
.radio-pill:has(input:checked) { border-color: var(--ember); background: rgba(255,106,61,0.12); color: var(--ember-hi); }

.hint { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .86rem; color: var(--muted); line-height: 1.6; }
.hint code { background: rgba(255,106,61,0.12); color: var(--ember-hi); padding: 1px 6px; border-radius: 5px; font-size: .92em; }

input[type=file] { padding: 10px 12px; background: var(--bg-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted); width: 100%; cursor: pointer; }
input[type=file]::file-selector-button { background: var(--bg-hi); color: var(--ink); border: none; padding: 8px 14px; border-radius: 8px; margin-right: 12px; cursor: pointer; font-family: var(--font-body); font-weight: 600; }

.edit-head { display: flex; gap: 16px; align-items: flex-start; }
.poster-sm { width: 90px; flex: 0 0 auto; aspect-ratio: 2/3; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-3); }
.poster-sm img { width: 100%; height: 100%; object-fit: cover; }
.poster-sm.placeholder { display: grid; place-items: center; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: .8rem; padding: 8px; background: radial-gradient(70% 90% at 30% 15%, rgba(255,106,61,0.4), transparent 60%), linear-gradient(150deg, #2c1f40, #1b1426); }
.poster-form { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.poster-form input[type=file] { flex: 1; min-width: 180px; }

.edit-season { font-size: 1.05rem; margin: 20px 0 10px; color: var(--ink); }
.edit-ep .ep-main { display: flex; flex-direction: column; gap: 8px; }
.edit-ep input[type=text] { width: 100%; }
.edit-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.edit-controls select { width: auto; min-width: 110px; }
.file-btn { position: relative; overflow: hidden; cursor: pointer; }

.btn.danger { background: rgba(176,70,78,0.18); color: #ff9aa2; }
.btn.danger:hover { background: rgba(176,70,78,0.32); }

@media (max-width: 820px) {
  .edit-controls { width: 100%; }
  .edit-controls .btn, .edit-controls select { flex: 1; justify-content: center; }
  .poster-sm { width: 70px; }
}

/* ---------------------------------------------------------------- Weiterschauen entfernen */
.cw-card { position: relative; }
.cw-remove {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(10,7,14,0.72); color: #fff; display: grid; place-items: center;
  opacity: 0; transition: opacity .15s, background .15s; backdrop-filter: blur(4px);
}
.cw-card:hover .cw-remove, .cw-remove:focus-visible { opacity: 1; }
.cw-remove:hover { background: rgba(176,70,78,0.9); }
@media (hover: none) { .cw-remove { opacity: 1; } }
.cw-menu {
  position: absolute; top: 42px; right: 8px; z-index: 4; width: 230px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 2px;
}
.cw-menu[hidden] { display: none; }
.cw-menu button {
  text-align: left; background: transparent; border: none; color: var(--ink); cursor: pointer;
  padding: 9px 10px; border-radius: 8px; font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  display: flex; flex-direction: column; gap: 2px; line-height: 1.25;
}
.cw-menu button small { color: var(--faint); font-weight: 400; font-size: .78rem; }
.cw-menu button:hover { background: var(--bg-hi); }
.cw-menu button[data-mode="delete"]:hover { background: rgba(176,70,78,0.22); color: #ff9aa2; }

/* ---------------------------------------------------------------- Outro / Skip */
.video-shell { position: relative; }
.outro-skip {
  position: absolute; right: 18px; bottom: 74px; z-index: 5;
  animation: outroIn .3s ease;
}
.outro-skip[hidden] { display: none; }
.outro-skip .btn { box-shadow: 0 10px 30px rgba(0,0,0,0.55); font-size: 1rem; padding: 12px 22px; }
@keyframes outroIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) { .outro-skip { right: 10px; bottom: 60px; } .outro-skip .btn { padding: 10px 16px; font-size: .92rem; } }

/* Outro-Felder im Editor */
.edit-season-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 20px 0 10px; }
.edit-season-head .edit-season { margin: 0; }
.outro-season, .outro-item {
  display: inline-flex; align-items: center; gap: 8px; color: var(--muted);
  font-size: .82rem; font-weight: 600;
}
.outro-season input { width: 110px; }
.outro-item { color: var(--faint); font-size: .78rem; }
.outro-item input { width: 78px; padding: 7px 8px; }

/* ---------------------------------------------------------------- Startseite Sektionen + Reset */
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.season-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 10px; }
.season-head h3 { margin: 0; }
.lib-expand { display: none; margin-left: auto; background: transparent; border: none; color: var(--ember-hi); cursor: pointer; padding: 4px 6px; align-items: center; }
.lib-expand svg { width: 22px; height: 22px; transition: transform .2s ease; }
.lib-expand.open svg { transform: rotate(180deg); }
.reset-item { padding: 6px 10px; }

/* Weiterschauen-Tab: Karte füllt die Kachel korrekt (behebt Overlap) */
.cw-card > .card { display: block; width: 100%; }

@media (max-width: 820px) {
  .rail { grid-auto-columns: 150px; }
  .row-head { flex-wrap: wrap; }
  .lib-expand { display: inline-flex; }
  .lib-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; grid-auto-flow: row !important; overflow: visible !important; gap: 12px; }
  .lib-grid:not(.expanded) > *:nth-child(n+3) { display: none; }
}

/* ---------------------------------------------------------------- Hero-Dots */
.hero-dots { position: absolute; z-index: 3; right: 20px; bottom: 18px; display: flex; gap: 8px; }
.hero-dots .dot { width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.35); padding: 0; transition: background .2s, width .2s; }
.hero-dots .dot.active { background: var(--ember-hi); width: 22px; border-radius: 999px; }

/* ---------------------------------------------------------------- Shelf (Handy: 2 + Pfeil) */
.row-head .shelf-toggle {
  display: none; margin-left: auto; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  align-items: center; justify-content: center; padding: 0; flex: 0 0 auto;
}
.row-head .shelf-toggle svg { width: 18px; height: 18px; transition: transform .2s; }
.shelf.expanded .shelf-toggle svg { transform: rotate(90deg); }

/* Overlap-Fix Weiterschauen-Karten: cw-card trägt das Seitenverhältnis, card füllt sie */
.cw-card { position: relative; aspect-ratio: 2 / 3; }
.cw-card .card { position: absolute; inset: 0; aspect-ratio: auto; }

@media (max-width: 620px) {
  .shelf .shelf-items { display: grid !important; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; gap: 12px; overflow: visible; padding: 0 0 6px; }
  .shelf:not(.expanded) .shelf-items > :nth-child(n+3) { display: none; }
  .row-head .shelf-toggle { display: inline-flex; }
  .cw-menu { width: min(230px, 80vw); right: 4px; }
}

/* ---------------------------------------------------------------- Sektion aufklappen (Handy) */
.expand-btn {
  display: none; margin-left: auto; align-items: center; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: .82rem; flex: 0 0 auto;
}
.expand-btn svg { transition: transform .2s ease; }
.row.expanded .expand-btn svg { transform: rotate(180deg); }
/* Nur auf echten Handys lohnt das Zusammenklappen auf zwei Kacheln */
@media (max-width: 560px) {
  .row.collapsible:not(.expanded) .rail > *:nth-child(n+3),
  .row.collapsible:not(.expanded) .grid > *:nth-child(n+3) { display: none; }
}
@media (max-width: 560px) {
  .row.collapsible .expand-btn { display: inline-flex; }
}
@media (min-width: 561px) and (max-width: 820px) {
  .row.collapsible .expand-btn { display: none; }
}

@media (max-width: 820px) {
  /* Kacheln fuellen die Breite selbst auf, statt auf zwei Spalten festgenagelt
     zu sein. Auf einem echten Handy ergibt das zwei pro Reihe, auf einem
     Fernseher mit schmal gemeldeter Ansicht entsprechend mehr - dadurch sind
     sie ueberall so gross wie die Karten in der Funktionen-Reihe. */
  .row.collapsible .rail, .row.collapsible .grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; gap: 12px;
  }
}

/* ---------------------------------------------------------------- Profil + Stats */
.nav-user .avatar { overflow: hidden; text-decoration: none; display: grid; place-items: center; }
.nav-user .avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-head { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; flex-wrap: wrap; }
.profile-avatar {
  width: 104px; height: 104px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--ember), var(--ember-hi)); box-shadow: var(--shadow);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-meta h2 { margin: 0 0 8px; }
.avatar-form { display: flex; align-items: center; gap: 10px; }
.avatar-form .hint { color: var(--faint); font-size: .8rem; }
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; text-align: center;
}
.stat-card .big { font-size: 1.7rem; font-weight: 800; color: var(--ember-hi); }
.stat-card .lbl { color: var(--muted); font-size: .85rem; margin-top: 4px; }
.stat-list { display: flex; flex-direction: column; gap: 8px; }
.stat-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 16px; text-decoration: none; color: var(--ink); transition: background .15s, border-color .15s;
}
.stat-row:hover { background: var(--bg-hi); border-color: var(--ember); }
.stat-row .name { font-weight: 600; }
.stat-row .val { color: var(--ember-hi); font-weight: 700; white-space: nowrap; }
@media (max-width: 620px) {
  .stat-cards { grid-template-columns: 1fr; }
  .stat-card { padding: 16px; }
}

/* ---------------------------------------------------------------- Eigenes Vollbild */
.fs-btn {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  width: 40px; height: 40px; border-radius: 10px; border: none; cursor: pointer;
  background: rgba(10,7,14,0.5); color: #fff; display: grid; place-items: center;
  opacity: 0; transition: opacity .15s, background .15s; backdrop-filter: blur(4px);
}
.video-shell:hover .fs-btn, .fs-btn:focus-visible { opacity: 1; }
.fs-btn:hover { background: rgba(176,70,78,0.85); }
.fs-btn .fs-ico-close { display: none; }
@media (hover: none) { .fs-btn { opacity: 1; } }

.video-shell:fullscreen, .video-shell:-webkit-full-screen {
  width: 100%; height: 100%; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.video-shell:fullscreen video, .video-shell:-webkit-full-screen video {
  width: 100%; height: 100%; object-fit: contain; border-radius: 0;
}
.video-shell:fullscreen .fs-btn, .video-shell:-webkit-full-screen .fs-btn { opacity: 1; }
.video-shell:fullscreen .fs-ico-open, .video-shell:-webkit-full-screen .fs-ico-open { display: none; }
.video-shell:fullscreen .fs-ico-close, .video-shell:-webkit-full-screen .fs-ico-close { display: block; }
/* Overlays im Vollbild klar sichtbar über der nativen Steuerleiste */
.video-shell:fullscreen .outro-skip, .video-shell:-webkit-full-screen .outro-skip { z-index: 20; bottom: 90px; }

/* ---------------------------------------------------------------- Favoriten (Herzen) */
.fav-heart {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 9px; line-height: 0; transition: color .15s, background .15s, border-color .15s;
}
.fav-heart svg { fill: none; stroke: currentColor; stroke-width: 2; }
.fav-heart:hover { color: #ff5a6a; border-color: #ff5a6a; }
.fav-heart.is-fav { color: #ff5a6a; border-color: rgba(255,90,106,0.55); background: rgba(255,90,106,0.14); }
.fav-heart.is-fav svg { fill: #ff5a6a; stroke: #ff5a6a; }
.fav-heart.labeled { padding: 10px 15px; font-family: var(--font-body); font-weight: 700; font-size: .88rem; }
.fav-heart.labeled .lbl-fav { line-height: 1; }

/* Herz-Overlay auf Favoriten-Karten */
.fav-remove-wrap { position: relative; }
.fav-remove-wrap .fav-heart {
  position: absolute; top: 8px; left: 8px; z-index: 3; padding: 8px;
  background: rgba(10,7,14,0.6); border-color: transparent; backdrop-filter: blur(4px);
}
.fav-remove-wrap .fav-heart.is-fav { color: #ff5a6a; background: rgba(10,7,14,0.62); }
.fav-remove-wrap .fav-heart.is-fav svg { fill: #ff5a6a; stroke: #ff5a6a; }

.season-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- ⋯ Menü (Serienseite) */
.menu-wrap { position: relative; display: inline-block; }
.icon-btn { padding: 9px 12px; line-height: 0; }
.menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 240px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 2px;
}
.menu[hidden] { display: none; }
.menu-item {
  text-align: left; background: transparent; border: none; color: var(--ink); cursor: pointer;
  padding: 10px 12px; border-radius: 8px; font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  display: flex; align-items: center; gap: 9px; white-space: nowrap; width: 100%;
}
.menu-item:hover { background: var(--bg-hi); }
.menu-sep { height: 1px; background: var(--line); margin: 4px 4px; }
.menu-item .mheart { color: var(--muted); font-size: 1.05rem; }
.menu-item.is-fav .mheart { color: #ff5a6a; }
.menu-item .when-fav { display: none; }
.menu-item.is-fav .when-fav { display: inline; }
.menu-item.is-fav .when-notfav { display: none; }
@media (max-width: 620px) { .menu { right: 0; left: auto; } }

/* ---------------------------------------------------------------- Stats-Detail */
.stat-row .plays { color: var(--faint); font-weight: 400; font-size: .82rem; }
.stat-row .chev { color: var(--faint); margin-left: 4px; }
.season-stat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.season-stat-head h2 { margin: 0; }
.season-stat-meta { color: var(--ember-hi); font-weight: 600; font-size: .9rem; }
.stat-row .ep-count { display: inline-block; min-width: 34px; color: #ff8a94; font-weight: 800; }
.stat-row .ep-count.zero { color: var(--faint); font-weight: 600; }
.stat-row.dim { opacity: .55; }
.stat-row.dim:hover { opacity: 1; }

/* ---------------------------------------------------------------- Franchise-Editor */
.fr-series-list { display: flex; flex-direction: column; gap: 8px; }
.fr-series-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; text-decoration: none; color: var(--ink); transition: border-color .15s, background .15s;
}
.fr-series-row:hover { border-color: var(--ember); background: var(--bg-hi); }

/* ---------------------------------------------------------------- Upload-Fortschritt */
.upload-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(6,4,9,0.82); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.upload-overlay[hidden] { display: none; }
.upload-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 26px; width: 100%; max-width: 460px; box-shadow: var(--shadow); }
.upload-title { font-weight: 800; font-size: 1.1rem; margin-bottom: 16px; word-break: break-word; }
.upload-bar { height: 12px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.upload-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ember), var(--ember-hi)); border-radius: 999px; transition: width .2s ease; }
.upload-stats { display: flex; justify-content: space-between; margin-top: 10px; font-weight: 700; gap: 12px; }
.upload-stats #up-detail { color: var(--muted); font-weight: 500; }
.upload-eta { color: var(--ember-hi); font-size: .9rem; margin-top: 6px; min-height: 1.2em; }
.upload-note { color: var(--faint); font-size: .8rem; margin-top: 14px; }

/* ---------------------------------------------------------------- TV-Modus (Fernbedienung) */
.tv-mode :focus { outline: none; }
.tv-mode a:focus, .tv-mode button:focus, .tv-mode input:focus, .tv-mode select:focus, .tv-mode [tabindex]:focus {
  outline: 3px solid var(--ember-hi) !important; outline-offset: 3px; border-radius: 8px;
  scroll-margin: 100px;
}
.tv-mode .card:focus {
  transform: scale(1.08); z-index: 6;
  outline: 4px solid var(--ember-hi) !important; outline-offset: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
}
.tv-mode .hero-slide:focus { outline: none; }
.tv-mode .season-tab:focus, .tv-mode .btn:focus { transform: translateY(-1px); }
/* Früher wurde hier im TV-Modus alles vergrößert - das war für die Bedienung
   mit simuliertem Mauszeiger gedacht. Mit der eigenen App und D-Pad-Navigation
   ist das unnötig; die Größe stellst du in den Einstellungen selbst ein. */

/* ============================================================================
   Kompatibilitaet mit aelteren (TV-)Browsern
   Hier stehen NUR Ersatz-Regeln fuer Browser, die moderne CSS-Eigenschaften
   nicht kennen. Kann der Browser das Original, schaltet der @supports-Block
   direkt wieder darauf zurueck -> auf Handy/Tablet/PC aendert sich NICHTS.
   ========================================================================== */

/* --- 1. "inset: 0" kennen alte Engines nicht -> Kanten einzeln angeben --- */
.hero-slide, .hero .bg, .hero-slide::after,
.card .poster, .card .grad, .card .play,
.cw-card .card, .upload-overlay {
  top: 0; right: 0; bottom: 0; left: 0;
}

/* --- 2. "aspect-ratio" (erst ab Chrome 88) -> Hoehe ueber padding-Trick ---
   Ohne das fallen die Poster-Karten auf Hoehe 0 zusammen. 2:3 = 150% */
.card::before,
.cw-card::before,
.series-hero .poster-lg::before,
.poster-sm::before { content: ""; display: block; padding-top: 150%; }
video.main { height: auto; }

@supports (aspect-ratio: 2 / 3) {
  .card::before,
  .cw-card::before,
  .series-hero .poster-lg::before,
  .poster-sm::before { display: none; }
}

/* --- 3. CSS-Grid (erst ab Chrome 57) -> Flexbox als Ersatz --- */
.grid { display: flex; flex-wrap: wrap; margin: -8px; max-width: calc(100% + 16px); }
.grid > * { flex: 1 1 190px; margin: 8px; min-width: 160px; }
.rail { display: flex; flex-wrap: nowrap; }
.rail > * { flex: 0 0 200px; margin-right: 16px; }

@supports (display: grid) {
  .grid { display: grid; margin: 0; }
  .grid > * { flex: none; margin: 0; min-width: 0; }
  .rail { display: grid; }
  .rail > * { flex: none; margin-right: 0; }
}

/* --- 4. "place-items: center" (ab Chrome 59) -> Flex-Zentrierung --- */
.card .poster.placeholder,
.card .play,
.card .play span { display: flex; align-items: center; justify-content: center; }

@supports (place-items: center) {
  .card .poster.placeholder,
  .card .play,
  .card .play span { display: grid; }
}

/* --- 5. clamp() (ab Chrome 79) -> fester Wert als Ersatz --- */
.hero .inner { padding: 32px; }
@supports (padding: clamp(1px, 1vw, 2px)) {
  .hero .inner { padding: clamp(24px, 5vw, 56px); }
}

/* Weiterschauen-Karte: aeussere Huelle gibt die Hoehe vor, die innere nicht */
.cw-card .card::before { display: none; }

/* ============================================================================
   Ersatz-Vollbild (fuer WebView-Apps ohne echte Vollbild-Unterstuetzung)
   ========================================================================== */
.video-shell.fake-fs {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; z-index: 9999;
  margin: 0; border-radius: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.video-shell.fake-fs video {
  width: 100%; height: 100%; border-radius: 0;
  -o-object-fit: contain; object-fit: contain;
}
.video-shell.fake-fs .outro-skip { z-index: 20; bottom: 150px; }
html.fake-fs-on, html.fake-fs-on body { overflow: hidden; }

/* ============================================================================
   TV-Modus: eigene Player-Knoepfe (per D-Pad erreichbar)
   ========================================================================== */
.tv-pbar {
  position: absolute; left: 50%; bottom: 78px; z-index: 25;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  display: flex; background: rgba(10,7,14,0.82);
  border: 1px solid var(--line); border-radius: 18px; padding: 10px;
}
.tv-pbar .tv-pbtn { margin-right: 12px; }
.tv-pbar .tv-pbtn:last-child { margin-right: 0; }
.tv-pbtn {
  width: 108px; min-height: 84px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-3); border: 3px solid transparent; border-radius: 14px;
  color: var(--ink); font-family: var(--font-body); font-weight: 700;
}
.tv-plbl { font-size: .82rem; margin-top: 5px; }
.tv-pbtn:hover { background: var(--bg-hi); }
.tv-pbtn:focus {
  background: var(--ember); border-color: #fff; color: #fff;
  outline: none !important;
  -webkit-transform: scale(1.08); transform: scale(1.08);
}
.video-shell.fake-fs .tv-pbar { bottom: 110px; }

/* Fokus im TV-Modus deutlicher sichtbar machen */
.tv-mode a:focus, .tv-mode button:focus,
.tv-mode input:focus, .tv-mode select:focus, .tv-mode [tabindex]:focus {
  outline: 4px solid var(--ember-hi) !important; outline-offset: 3px;
  border-radius: 8px;
}
.tv-mode .card:focus {
  -webkit-transform: scale(1.08); transform: scale(1.08); z-index: 6;
  outline: 4px solid var(--ember-hi) !important; outline-offset: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
}

/* ============================================================================
   Profilauswahl ("Wer schaut?")
   ========================================================================== */
.profiles-wrap { text-align: center; padding-top: 8vh; }
.profiles-title { font-size: 2.1rem; margin: 0 0 6px; }
.profiles-sub { color: var(--muted); margin: 0 0 34px; }
.profiles-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin: 0 auto; max-width: 900px;
}
.profile-pick { width: 170px; margin: 0 12px 26px; }
.profile-circle {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 132px; height: 132px; margin: 0 auto 12px;
  border-radius: 50%; overflow: hidden; text-decoration: none;
  background: linear-gradient(135deg, var(--ember), var(--ember-hi));
  border: 4px solid transparent; box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s;
}
.profile-circle img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.profile-circle .initial { font-size: 3rem; font-weight: 800; color: #fff; }
.profile-circle:hover, .profile-circle:focus {
  border-color: #fff; outline: none !important;
  -webkit-transform: scale(1.07); transform: scale(1.07);
}
.profile-circle.add {
  background: var(--bg-2); border: 3px dashed var(--line); color: var(--muted);
}
.profile-circle.add:hover { color: var(--ember-hi); border-color: var(--ember-hi); }
.profile-circle .lock {
  position: absolute; right: 8px; bottom: 8px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10,7,14,0.82); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.profile-name { font-weight: 700; font-size: 1.05rem; }
.profile-drop {
  display: inline-block; margin-top: 4px; font-size: .78rem;
  color: var(--faint); text-decoration: none;
}
.profile-drop:hover { color: #ff5a6a; }
.profiles-hint { color: var(--faint); font-size: .85rem; margin-top: 20px; }

/* Checkbox-Zeile im Login */
.check-row {
  display: flex; align-items: center; margin: 4px 0 16px;
  font-weight: 500; color: var(--muted); cursor: pointer;
}
.check-row input { width: auto; margin: 0 9px 0 0; }

@media (max-width: 620px) {
  .profile-pick { width: 128px; margin: 0 8px 20px; }
  .profile-circle { width: 100px; height: 100px; }
  .profile-circle .initial { font-size: 2.3rem; }
}

/* ============================================================================
   Verwalten: Suchergebnisse
   ========================================================================== */
.mgr-results { margin-top: 14px; max-height: 460px; overflow-y: auto; }
.mgr-row {
  display: flex; align-items: center; text-decoration: none; color: var(--ink);
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 7px;
}
.mgr-row:hover, .mgr-row:focus { border-color: var(--ember); background: var(--bg-hi); outline: none !important; }
.mgr-thumb {
  width: 40px; height: 60px; flex: 0 0 40px; border-radius: 6px; overflow: hidden;
  background: var(--bg-2); margin-right: 12px;
}
.mgr-thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.mgr-thumb.placeholder { background: linear-gradient(135deg, var(--bg-2), var(--bg-hi)); }
.mgr-main { flex: 1; min-width: 0; }
.mgr-title { display: block; font-weight: 700; }
.mgr-sub { display: block; color: var(--faint); font-size: .82rem; }

/* Ersatz-Vollbild: alles ausser dem Video ausblenden (Kopfzeile, Titel usw.) */
html.fake-fs-on body > *:not(.video-shell) { display: none !important; }
html.fake-fs-on { background: #000; }
.fs-holder { display: none; }

/* ============================================================================
   TV-Modus: Bedienleiste blendet sich nach ein paar Sekunden aus
   ========================================================================== */
.tv-pbar, #fs-btn, .fs-btn {
  transition: opacity .3s ease;
}
/* ausgeblendet, solange nichts passiert */
.ui-idle { opacity: 0 !important; pointer-events: none !important; }
.video-shell.ui-hidden video::-webkit-media-controls { opacity: 0; }
.video-shell.ui-hidden { cursor: none; }
/* Der "Nächste Folge"-Knopf bleibt immer sichtbar */
.video-shell.ui-hidden .outro-skip { opacity: 1; pointer-events: auto; }

/* ============================================================================
   Problem melden (Dialog + Admin-Liste)
   ========================================================================== */
.report-back {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 300;
  background: rgba(6,4,9,0.8); display: flex; align-items: center;
  justify-content: center; padding: 20px;
}
.report-back[hidden] { display: none; }
.report-box {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; width: 100%; max-width: 480px; box-shadow: var(--shadow);
}
.report-box h3 { margin: 0 0 6px; font-size: 1.2rem; }
.report-what { color: var(--ember-hi); font-weight: 600; margin: 0 0 14px; word-break: break-word; }
.report-box textarea {
  width: 100%; resize: vertical; min-height: 90px; font-family: var(--font-body);
}
.report-msg { min-height: 1.2em; margin: 8px 0 0; font-size: .88rem; }
.report-msg.ok { color: #6ee7a8; }
.report-msg.error { color: #ff5a6a; }
.report-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.flag-btn { white-space: nowrap; }

.report-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.report-row {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; transition: opacity .25s ease;
}
.report-main { flex: 1; min-width: 220px; }
.report-title { font-weight: 700; margin-bottom: 4px; }
.report-body { white-space: pre-wrap; word-break: break-word; margin-bottom: 8px; }
.report-meta { color: var(--faint); font-size: .8rem; }
.report-key { display: block; margin-top: 2px; opacity: .7; word-break: break-all; }
.report-side { display: flex; gap: 8px; align-items: center; }

/* Zeitangabe im Melde-Dialog */
.report-time-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.report-time-row > span { color: var(--muted); font-weight: 600; font-size: .9rem; }
.report-time-row input { width: 130px; margin: 0; }
.report-hint { color: var(--faint); font-size: .8rem; margin: 6px 0 0; }
.report-at { color: var(--ember-hi); font-weight: 700; }

/* ============================================================================
   Player: nichts darf seitlich hinausragen -> kein waagerechter Schieberegler
   ========================================================================== */
.player-stage { position: relative; max-width: 100%; }
.video-shell, video.main, .player-controls { max-width: 100%; }
video.main { width: 100%; height: auto; }
/* Bedienleiste bricht um statt zu ueberlaufen */
.player-controls { flex-wrap: wrap; row-gap: 10px; }
.player-controls .spacer { flex: 1 1 0; min-width: 0; }
.player-controls .btn { max-width: 100%; }
/* schwebende Elemente im Video sicher innerhalb halten */
.tv-pbar { max-width: calc(100% - 24px); flex-wrap: wrap; row-gap: 8px; justify-content: center; }
.outro-skip { max-width: calc(100% - 36px); }
.outro-skip .btn { max-width: 100%; white-space: normal; }
/* Titelzeile ueber dem Video darf lange Namen umbrechen */
.player-head, .player-title { max-width: 100%; overflow-wrap: anywhere; }

/* Sicherheitsnetz nur fuer die Player-Seite: seitlich wird abgeschnitten statt
   gescrollt. "clip" erzeugt - anders als "hidden" - keinen Scrollbereich,
   die angeheftete Navigationsleiste bleibt also unberuehrt. */
/* Abgeschnitten wird erst am FENSTERRAND (siehe html-Regel weiter unten),
   damit der Kino-Licht-Schein rund um den Player voll sichtbar bleibt. */
.player-top { max-width: 100%; }
.player-top h1 { overflow-wrap: anywhere; }
.series-label { overflow-wrap: anywhere; }

/* Aeltere Browser kennen "overflow: clip" nicht - dort den Ueberstand
   sicherheitshalber weglassen, damit garantiert kein Schieberegler kommt. */

/* Auf schmalen Bildschirmen weniger Ueberstand - da ist seitlich kaum Platz */



/* Ab breiten Fenstern waechst der Schein NICHT weiter mit: der Ueberstand wird
   auf die Groesse begrenzt, die er bei einem schmalen Fenster hat. Darunter
   (Splitscreen, Handy, Tablet) bleibt alles unveraendert. */
@media (min-width: 820px) {
  .ambient-glow {
    /* Ein <canvas> ist ein ersetztes Element: mit "width: auto" waere es nur
       48x27 Pixel gross. Die Groesse muss darum ausgerechnet werden. */
    top: -62px; left: -86px; right: auto; bottom: auto;
    width: calc(100% + 172px);   /* 2 x 86 */
    height: calc(100% + 150px);  /* 62 + 88 */
  }
}

/* ============================================================================
   Navigationsleiste: darf bei keiner Bildschirmbreite ueberlaufen.
   Zwischen Handy-Menue (unter 820px) und breitem Bildschirm wird sie
   schrittweise kompakter, statt rechts aus dem Bild zu laufen.
   ========================================================================== */
.nav-inner, nav .container { min-width: 0; }
.nav-links { min-width: 0; flex-shrink: 1; }
.nav-search { min-width: 0; flex-shrink: 1; }
.nav-user { min-width: 0; flex-shrink: 0; }
.nav-act { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

/* ab hier wird es eng: Name weg, Knoepfe nur noch als Symbol */
@media (max-width: 1250px) {
  .nav-user .uname { display: none; }
  .nav-act .nav-act-text { display: none; }
  .nav-act { padding: 8px 10px; }
  .nav-links a { padding: 8px 10px; font-size: .9rem; }
  .nav-links { gap: 2px; margin-left: 6px; }
}
/* noch enger: Suchfeld schrumpft mit */
@media (max-width: 1050px) {
  .nav-search { max-width: 200px; }
  .nav-links a { padding: 7px 8px; font-size: .86rem; }
}
/* im Handy-Menue wieder mit Beschriftung, da ist Platz */
@media (max-width: 820px) {
  .nav-user .uname { display: block; }
  .nav-act .nav-act-text { display: inline; }
  .nav-act { padding: 10px 16px; }
}

/* Hinweis, falls das Kino-Licht auf Ersatzfarben ausweichen muss */
.ambient-note {
  position: relative; z-index: 3; text-align: center;
  color: var(--faint); font-size: .82rem; margin: 10px 0 0;
}
.ambient-note[hidden] { display: none; }

/* ============================================================================
   Waagerechten Schieberegler verhindern - aber erst am Fensterrand.
   "clip" (nicht "hidden") erzeugt keinen Scrollbereich, die angeheftete
   Navigationsleiste bleibt also funktionsfaehig. Der Kino-Licht-Schein darf
   dadurch weiterhin ueber den Player hinausleuchten.
   ========================================================================== */
html { overflow-x: clip; }

/* Nur fuer Browser, die "clip" nicht kennen: seitlichen Ueberstand auf den
   vorhandenen Innenabstand begrenzen. Nach oben/unten bleibt er voll. */
@supports not (overflow-x: clip) {
  .ambient-glow { left: -14px; right: auto; width: calc(100% + 28px); }
}

/* ============================================================================
   Lautstärke + Verstärker
   ========================================================================== */
/* Im Ruhezustand NICHT positioniert - so legt sich der Kino-Licht-Schein
   genau wie ueber die anderen Knoepfe. Erst beim Aufklappen kommt der
   Bereich nach vorne, damit das Regler-Feld richtig sitzt und bedienbar ist. */
.vol-wrap { display: inline-block; }
.vol-wrap.open { position: relative; z-index: 50; }
#vol-btn.boosted { background: var(--ember); color: #fff; border-color: var(--ember-hi); }
.vol-panel {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  z-index: 40; width: 260px; max-width: 80vw;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; box-shadow: var(--shadow);
}
.vol-panel[hidden] { display: none; }
.vol-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.vol-head b { color: var(--ember-hi); }
.vol-panel input[type="range"] { width: 100%; margin: 0; accent-color: var(--ember); }
.vol-marks { display: flex; justify-content: space-between; color: var(--faint); font-size: .72rem; margin-top: 4px; }
.vol-warn { color: #ffb26b; font-size: .78rem; margin: 8px 0 0; }
.vol-warn[hidden] { display: none; }

/* ============================================================================
   Partyraum - gemeinsam schauen
   ========================================================================== */
.room-code { color: var(--ember-hi); letter-spacing: .12em; font-weight: 800; }
.room-locked {
  position: absolute; top: 12px; left: 12px; z-index: 6;
  background: rgba(10,7,14,0.72); color: var(--muted);
  border-radius: 999px; padding: 7px 14px; font-size: .82rem; font-weight: 600;
  pointer-events: none; backdrop-filter: blur(4px);
}
.room-bar {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-top: 18px;
}
.room-people { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.room-people-label { color: var(--faint); font-size: .85rem; }
.room-person {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-size: .84rem; font-weight: 600;
}
.room-person.owner { border-color: var(--ember); color: var(--ember-hi); }
.room-progress { color: var(--faint); font-size: .82rem; }
.room-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.chat-box {
  position: relative; z-index: 3; margin-top: 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden;
}
.chat-list {
  height: 240px; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.chat-msg { line-height: 1.45; word-break: break-word; }
.chat-msg b { color: var(--ember-hi); }
.chat-msg i { color: var(--faint); font-size: .72rem; font-style: normal; margin-left: 8px; }
.chat-msg.system { color: var(--faint); font-size: .85rem; font-style: italic; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; margin: 0; }

/* Karten auf der Startseite */
.room-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; color: var(--ink);
  background: linear-gradient(160deg, var(--bg-2), var(--bg-hi));
  border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 20px; transition: border-color .15s, transform .15s;
}
.room-card::before { content: ""; display: block; padding-top: 150%; }
@supports (aspect-ratio: 2 / 3) {
  .room-card::before { display: none; }
  .room-card { aspect-ratio: 2 / 3; }
}
.room-card:hover, .room-card:focus {
  border-color: var(--ember); color: var(--ember-hi);
  -webkit-transform: translateY(-3px); transform: translateY(-3px);
  outline: none !important;
}
.room-card .ico { font-size: 2.6rem; line-height: 1; margin-bottom: 10px; }
.room-card .t { font-weight: 800; font-size: 1rem; }
.room-card .s { color: var(--faint); font-size: .8rem; margin-top: 4px; }
@media (max-width: 620px) { .chat-list { height: 190px; } }

/* ============================================================================
   Wunschliste
   ========================================================================== */
.wish-arten { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.wish-art { position: relative; }
.wish-art input { position: absolute; opacity: 0; width: 0; height: 0; }
.wish-art span {
  display: inline-block; cursor: pointer;
  background: var(--bg-3); border: 2px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-weight: 600; font-size: .9rem;
  transition: border-color .15s, background .15s, color .15s;
}
.wish-art input:checked + span {
  background: var(--ember); border-color: var(--ember-hi); color: #fff;
}
.wish-art input:focus-visible + span { outline: 3px solid var(--ember-hi); outline-offset: 2px; }
.wish-note { display: block; color: var(--faint); font-size: .82rem; margin-top: 3px; }
.wish-status { font-size: .82rem; font-weight: 700; color: var(--faint); white-space: nowrap; }
.wish-status.ok { color: #6ee7a8; }
.wish-status.nope { color: #ff8a94; }

/* Regler für die Darstellungsgröße in den Einstellungen */
.zoom-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.zoom-row input[type="range"] { flex: 1; min-width: 140px; margin: 0; accent-color: var(--ember); }
.zoom-row b { color: var(--ember-hi); min-width: 56px; }

/* ============================================================================
   TV-Modus: immer ein dichtes Raster.
   Der Fernseher meldet oft eine sehr schmale Ansicht, wodurch sonst die
   Handy-Regeln greifen (zwei riesige Kacheln pro Reihe + Aufklapp-Pfeil).
   Auf einem Fernseher will man aber mehrere Reihen gleichzeitig sehen.
   ========================================================================== */
.tv-mode .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px; overflow: visible !important; padding: 14px;
  -webkit-mask-image: none !important; mask-image: none !important;
}
.tv-mode .rail {
  display: grid; grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px; overflow: visible !important; padding: 14px;
  -webkit-mask-image: none !important; mask-image: none !important;
}
.tv-mode .rail > * { flex: none; margin-right: 0; min-width: 0; }

/* Aufklapp-Beschränkung der Handy-Ansicht hier wieder aufheben */
.tv-mode .row.collapsible .rail,
.tv-mode .row.collapsible .grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-auto-flow: row;
}
/* Im TV-Modus zeigen wir zunaechst nur die ersten 12 Karten.
   tv.js laedt per IntersectionObserver stueckweise nach (tv-lazy). */
.tv-mode .row.collapsible:not(.expanded) .rail > *:nth-child(n+3),
.tv-mode .row.collapsible:not(.expanded) .grid > *:nth-child(n+3) { display: block; }
.tv-mode .row .rail > .tv-lazy,
.tv-mode .row .grid > .tv-lazy { display: none; }
.tv-mode .row.collapsible .expand-btn { display: none; }

/* Kopfbereich und Abstände kompakter, damit mehr Reihen aufs Bild passen */
.tv-mode .hero { min-height: 34vh; }
.tv-mode .row { margin-bottom: 22px; overflow: visible !important; }
.tv-mode .row-head { margin-bottom: 10px; }
.tv-mode .row-head h2 { font-size: 1.15rem; }
.tv-mode .card .meta { padding: 10px; }
.tv-mode .card .t { font-size: .88rem; }
.tv-mode .card .s { font-size: .74rem; }
.tv-mode .room-card .ico { font-size: 2rem; }
.tv-mode .room-card .t { font-size: .88rem; }

/* Einladungslink-Knopf im Partyraum */
.einladung-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  vertical-align: middle;
  margin-left: 8px;
  white-space: nowrap;
}

.einladung-btn svg {
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .einladung-btn {
    margin-left: 0;
    margin-top: 6px;
  }
}

/* Fassungen (Sprache / Auflösung je Datei) im Verwalten-Bereich */
.fassungen {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
}

.fassungen-head {
  font-size: .88rem;
  margin-bottom: 8px;
  color: var(--muted);
}

.fassung {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.fassung:first-of-type {
  border-top: none;
}

.fassung.ist-standard {
  box-shadow: inset 3px 0 0 var(--ember);
  padding-left: 9px;
  margin-left: -9px;
  border-radius: 4px;
}

.fassung-datei {
  flex: 1 1 160px;
  min-width: 0;
  font-size: .85rem;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fassung-feld {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: .78rem;
  color: var(--muted);
  margin: 0;
  flex: 0 1 130px;
}

.fassung-feld input {
  margin: 0;
  padding: 6px 9px;
  font-size: .9rem;
}

.fassung-std {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--muted);
  white-space: nowrap;
  margin: 0;
  cursor: pointer;
}

.fassung-std input {
  margin: 0;
  width: auto;
  accent-color: var(--ember);
}

@media (max-width: 560px) {
  .fassung-datei {
    flex: 1 1 100%;
  }

  .fassung-feld {
    flex: 1 1 calc(50% - 5px);
  }
}

/* Fassungswahl: Sprache und Auflösung getrennt wählen
   (Infokarte des Films und Menü im Player) */
.fass-wrap {
  display: inline-block;
}

.fass-wrap.open {
  position: relative;
  z-index: 50;
}

.fass-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 40;
  width: 280px;
  max-width: 86vw;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.fass-panel[hidden] {
  display: none;
}

.fass-wahl {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.player-controls .fass-wahl {
  gap: 14px;
}

.hero-copy .fass-wahl {
  margin-top: 18px;
}

.fass-achse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fass-achse-kopf {
  flex: 0 0 auto;
  font-size: .88rem;
  color: var(--muted);
  min-width: 78px;
}

.fass-chip {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, opacity .15s;
}

.fass-panel .fass-chip {
  background: var(--bg);
}

.fass-chip:hover,
.fass-chip:focus-visible {
  border-color: var(--ember);
  background: var(--bg-hi);
}

.fass-chip.aktiv {
  background: rgba(255, 106, 61, 0.16);
  border-color: rgba(255, 140, 90, 0.55);
  color: var(--ember-hi);
  font-weight: 700;
}

/* Kombination gibt es nicht - bleibt klickbar, wechselt dann die andere Achse */
.fass-chip.nicht-da {
  opacity: .42;
}

.fass-chip.nicht-da:hover {
  opacity: .75;
}

.fass-hinweis {
  color: var(--ember-hi);
  font-size: .8rem;
  margin: 0;
}

.fass-hinweis[hidden] {
  display: none;
}

.fass-note {
  color: var(--faint);
  font-size: .76rem;
  margin: 12px 0 0;
  line-height: 1.4;
}

@media (max-width: 560px) {
  .fass-achse-kopf {
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* ============================================================================
   Untertitel - eigene Einblendung über dem Video
   ========================================================================== */
.untertitel-lage {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 13%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  text-align: center;
  text-wrap: balance;
}

.untertitel-lage .ut-zeile {
  display: inline-block;
  max-width: 100%;
  background: rgba(8, 6, 11, 0.7);
  background: rgba(8, 6, 11, var(--ut-deck, 0.7));
  color: #fff;
  color: var(--ut-farbe, #fff);
  font-weight: 600;
  line-height: 1.3;
  padding: 2px 10px;
  border-radius: 6px;
  /* Doppelt abgesichert: Schatten für den Fall, dass der Hintergrund
     auf alten Fernseher-Browsern durchscheinend bleibt. */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
}

/* Groesse per Faktor. Drei Zeilen, absteigend nach Anspruch - was ein
   Browser nicht versteht, ignoriert er, und die Zeile darueber bleibt
   stehen. Der Huawei-Browser auf EMUI hat so immer einen gueltigen Wert. */
.untertitel-lage .ut-zeile { font-size: 1.25rem; }
.untertitel-lage .ut-zeile { font-size: clamp(0.95rem, 2.9vh, 1.8rem); }
.untertitel-lage .ut-zeile {
  font-size: calc(var(--ut-gr, 1) * clamp(0.95rem, 2.9vh, 1.8rem));
}

/* Wenn der "Naechste Folge"-Knopf auftaucht, nach oben ausweichen.
   Die Klasse setzt untertitel.js - :has() kennen aeltere Engines nicht. */
.untertitel-lage.ut-hoch {
  bottom: 24%;
}

.video-shell:has(.outro-skip:not([hidden])) .untertitel-lage {
  bottom: 24%;
}

/* Untertitel-Knopf und Menü */
.ut-wrap {
  display: inline-block;
}

.ut-wrap.open {
  position: relative;
  z-index: 50;
}

#ut-btn.an {
  border-color: var(--ember);
  color: var(--ember-hi);
}

.ut-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 40;
  width: 260px;
  max-width: 86vw;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--shadow);
}

.ut-panel[hidden] {
  display: none;
}

.ut-head {
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  padding: 2px 6px 10px;
}

.ut-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--ink);
  font: inherit;
  font-size: .94rem;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
}

.ut-opt:hover,
.ut-opt:focus-visible {
  background: var(--bg-hi);
}

.ut-opt.aktiv {
  background: rgba(255, 106, 61, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 140, 90, 0.5);
  color: var(--ember-hi);
  font-weight: 600;
}

.ut-opt-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ut-anzahl {
  flex: 0 0 auto;
  font-size: .7rem;
  color: var(--faint);
}

.ut-opt.aktiv .ut-anzahl {
  color: var(--ember-hi);
  opacity: .8;
}

.ut-marke {
  flex: 0 0 auto;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #ffb26b;
  background: rgba(255, 178, 107, 0.14);
  border: 1px solid rgba(255, 178, 107, 0.34);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1.4;
}

.ut-opt.aktiv .ut-marke {
  color: #ffd0a0;
  border-color: rgba(255, 208, 160, 0.5);
}

.ut-groesse {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px 2px;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--muted);
}

.ut-groesse b {
  flex: 1;
  text-align: center;
  color: var(--ink);
  font-size: .85rem;
}

.ut-gr-btn {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  width: 30px;
  height: 28px;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.ut-gr-btn:hover {
  border-color: var(--ember);
}

.ut-meldung {
  color: #ffb26b;
  font-size: .78rem;
  margin: 8px 6px 2px;
}

.ut-meldung[hidden] {
  display: none;
}

/* Im TV-Modus sitzt unten die eigene Knopfleiste - Untertitel höher legen */
.tv-mode .untertitel-lage {
  bottom: 20%;
}

/* Erweitertes Lautstärke-Menü: Bass und Festsetzung */
.vol-panel {
  width: 290px;
}

.vol-trenn {
  height: 1px;
  background: var(--line);
  margin: 14px 0 10px;
}

.vol-schalter {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
  font-size: .92rem;
  color: var(--ink);
  cursor: pointer;
}

.vol-schalter input {
  width: auto;
  margin: 0;
  accent-color: var(--ember);
  flex: 0 0 auto;
}

.vol-erklaer {
  color: var(--faint);
  font-size: .76rem;
  line-height: 1.4;
  margin: 0 0 10px;
}

/* Zielpegel ausgegraut, solange die Festsetzung aus ist */
.vol-panel.fix-aus #fix-range,
.vol-panel.fix-aus #fix-label {
  opacity: .45;
}

.vol-panel input[type="range"]:disabled {
  cursor: not-allowed;
}

/* Untertitel-Aussehen: Größe, Deckkraft, Farbe */
.ut-panel {
  width: 285px;
}

.ut-trenn {
  height: 1px;
  background: var(--line);
  margin: 12px 0 10px;
}

.ut-zeile-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .82rem;
  color: var(--muted);
  margin: 10px 2px 5px;
}

.ut-zeile-kopf b {
  color: var(--ember-hi);
  font-size: .85rem;
}

.ut-panel input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--ember);
}

.ut-regler {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ut-regler input[type="range"] {
  flex: 1;
  min-width: 0;
}

.ut-gr-btn {
  flex: 0 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  width: 30px;
  height: 28px;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.ut-gr-btn:hover {
  border-color: var(--ember);
}

.ut-farben {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ut-farbe {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
  padding: 0;
  transition: transform .12s, border-color .12s;
}

.ut-farbe:hover {
  transform: scale(1.1);
}

.ut-farbe.aktiv {
  border-color: var(--ember-hi);
  box-shadow: 0 0 0 2px rgba(255, 106, 61, 0.35);
}

/* ============================================================================
   Suchfilter: Auflösung, Sprache, Untertitel
   ========================================================================== */
.suchfilter {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 24px;
}

.sf-gruppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
}

.sf-gruppe + .sf-gruppe {
  border-top: 1px solid var(--line);
}

.sf-kopf {
  flex: 0 0 auto;
  min-width: 92px;
  font-size: .9rem;
  color: var(--muted);
}

.sf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sf-chip {
  display: inline-flex;
  align-items: center;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: .87rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

/* Der Haken selbst bleibt unsichtbar, aber bedienbar und per Tastatur
   erreichbar - der Chip ist die Anzeige. */
.sf-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.sf-chip:hover {
  border-color: var(--ember);
  background: var(--bg-hi);
}

.sf-chip.aktiv {
  background: rgba(255, 106, 61, 0.16);
  border-color: rgba(255, 140, 90, 0.55);
  color: var(--ember-hi);
  font-weight: 700;
}

/* Der Siegel-Haken trägt seinen eigenen Bordeauxton, auch wenn er an ist -
   sonst sähe er aus wie ein weiterer Qualitäts-Haken wie "nur 4K". */
.sf-chip.siegel-chip {
  gap: 6px;
  padding-left: 10px;
}

.sf-chip.siegel-chip .siegel svg {
  width: 17px;
  height: 17px;
}

.sf-chip.siegel-chip.aktiv {
  background: rgba(176, 60, 84, 0.2);
  border-color: rgba(201, 86, 110, 0.6);
  color: #e9a8b6;
}

.sf-chip:focus-within,
.sf-chip:focus {
  box-shadow: 0 0 0 3px rgba(255, 106, 61, 0.3);
}

.tv-mode .sf-chip:focus {
  outline: 4px solid var(--ember-hi) !important;
  outline-offset: 3px;
}

.tracklist-eintrag:focus {
  background: var(--bg-3, rgba(255,255,255,.06));
  box-shadow: 0 0 0 3px rgba(255, 106, 61, 0.3);
  outline: none;
}

.tv-mode .tracklist-eintrag:focus {
  outline: 4px solid var(--ember-hi) !important;
  outline-offset: 2px;
}

.sf-chip.sf-modus {
  border-style: dashed;
  font-size: .82rem;
}

.sf-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

@media (max-width: 560px) {
  .sf-kopf {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ============================================================================
   Aufklapp-Menüs im Player auf dem Handy
   Mittig über dem Knopf ist auf schmalen Schirmen keine gute Idee - die
   Menüs sind breiter als der Platz neben dem Knopf und werden am Rand
   abgeschnitten. Darum unten als Leiste über die ganze Breite.
   ========================================================================== */
@media (max-width: 640px) {
  .vol-panel,
  .ut-panel,
  .fass-panel {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;
    width: auto;
    max-width: none;
    -webkit-transform: none;
    transform: none;
    max-height: 76vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 120;
    border-radius: 18px;
    /* Der riesige Schatten legt sich über den Rest der Seite, damit klar
       ist, dass gerade dieses Menü dran ist. */
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5), 0 0 0 100vmax rgba(6, 4, 9, 0.55);
  }

  /* Auf dem Handy sind die Reihen untereinander besser lesbar */
  .fass-achse-kopf {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Sehr flache Fenster (Handy quer): Menü darf scrollen statt abzuschneiden */
@media (max-height: 520px) {
  .vol-panel,
  .ut-panel,
  .fass-panel {
    max-height: 82vh;
    overflow-y: auto;
  }
}

/* ============================================================================
   Knopfreihe unter dem Video auf dem Handy
   Als umbrechende Reihe sah das zerfranst aus: vier ungleiche Zeilen, weil
   die Menü-Knöpfe in eigenen Hüllen stecken und darum nicht mitwachsen.
   Auf schmalen Schirmen deshalb ein ruhiges Raster aus zwei Spalten.
   ========================================================================== */
@media (max-width: 560px) {
  .player-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .player-controls .spacer {
    display: none;
  }

  /* Hüllen und Knöpfe füllen ihre Zelle ganz aus */
  .player-controls > .btn,
  .player-controls > .vol-wrap,
  .player-controls > .ut-wrap,
  .player-controls > .fass-wrap {
    width: 100%;
    min-width: 0;
  }

  .player-controls .vol-wrap > .btn,
  .player-controls .ut-wrap > .btn,
  .player-controls .fass-wrap > .btn {
    width: 100%;
  }

  .player-controls .btn {
    justify-content: center;
    padding: 11px 10px;
    font-size: .9rem;
    gap: 7px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Lange Beschriftungen wie "Deutsch · 1080p" dürfen gekürzt werden,
     das Symbol davor bleibt aber stehen. */
  .player-controls .btn svg {
    flex: 0 0 auto;
  }

  .player-controls .ut-btn-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ===========================================================================
   Detailseiten: Rangfolge statt Buntheit
   Genau ein Knopf pro Seite ist orange. Alles andere tritt zurueck.
   =========================================================================== */
.series-hero .info {
  padding-bottom: 6px;
}

.series-hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
  text-wrap: balance;
}

/* Eine Zeile mit Fakten - ohne Trennpunkte, nur mit Abstand */
.hero-fakten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  color: var(--muted);
  font-size: .95rem;
  margin: 0 0 20px;
}

.hero-fakten b {
  color: var(--ink);
  font-weight: 600;
}

.hero-fakten .gesehen {
  color: var(--ember-hi);
  font-weight: 600;
}

/* Fortschritt direkt unter den Fakten, schmal und ruhig */
.hero-fortschritt {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  margin: -8px 0 22px;
  color: var(--muted);
  font-size: .88rem;
}

.hero-fortschritt .balken {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.hero-fortschritt .balken span {
  display: block;
  height: 100%;
  background: var(--ember);
  border-radius: 999px;
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 6px;
}

/* Nebenhandlungen: nur Umriss, Farbe erst beim Anfassen */
.hero-actions .btn.still {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink);
  padding: 11px 18px;
  font-size: .95rem;
  backdrop-filter: blur(6px);
}

.hero-actions .btn.still:hover,
.hero-actions .btn.still:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.hero-actions .btn.still svg {
  width: 17px;
  height: 17px;
  opacity: .85;
}

/* Favorit: leer, bis er gesetzt ist */
.hero-actions .fav-heart.labeled {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink);
  border-radius: 999px;
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.hero-actions .fav-heart.labeled svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.hero-actions .fav-heart.labeled:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.hero-actions .fav-heart.labeled.is-fav {
  color: #ff5d7a;
  border-color: rgba(255, 93, 122, 0.5);
  background: rgba(255, 93, 122, 0.12);
}

.hero-actions .fav-heart.labeled.is-fav svg {
  fill: currentColor;
  stroke: none;
}

/* Der eine Hauptknopf */
.series-hero .btn.primary {
  padding: 14px 28px;
  font-size: 1.05rem;
  box-shadow: 0 10px 30px -10px var(--ember-glow);
}

/* Zurueck-Zeile ueber dem Kopfbereich */
.zurueck {
  position: relative;
  z-index: 3;
  margin: 14px 0 0;
  font-size: .92rem;
}

.zurueck a {
  color: var(--muted);
  padding: 6px 0;
  display: inline-block;
}

.zurueck a:hover {
  color: var(--ink);
}

.hero-fakten a {
  color: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.hero-fakten a:hover {
  border-bottom-color: var(--ember);
}

/* Waagerechte Reihe mit Kacheln, die ueber den Rand hinausgeht */
.rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.rail > .card {
  flex: 0 0 clamp(128px, 16vw, 172px);
  scroll-snap-align: start;
}

/* Die Reihe läuft rechts weich aus - das zeigt, dass es weitergeht,
   statt wie ein Fehler abgeschnitten auszusehen. */
.rail {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
}

/* ---------------------------------------------------------------------------
   Folgenliste
   Vorher stand in jeder Zeile ein greller Knopf - acht davon untereinander.
   Jetzt ist die Liste ruhig: Nummer, Titel, Dauerbalken. Der Knopf kommt
   beim Drüberfahren, hervorgehoben ist nur die Folge, bei der es weitergeht.
   --------------------------------------------------------------------------- */
.ep-list {
  gap: 2px;
}

.ep {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
}

.ep:hover,
.ep:focus-within {
  background: var(--bg-2);
  border-color: var(--line);
}

.ep .num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--faint);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ep .ep-main .t {
  font-weight: 600;
  font-size: 1rem;
}

.ep .ep-main .sub {
  color: var(--faint);
  font-size: .84rem;
  margin-top: 2px;
}

/* Abspiel-Knopf tritt zurück, bis die Zeile angefasst wird */
.ep .ep-actions .btn.primary {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  box-shadow: none;
}

.ep:hover .ep-actions .btn.primary,
.ep:focus-within .ep-actions .btn.primary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Genau die eine Folge, bei der es weitergeht, bleibt sichtbar orange */
.ep.weiter {
  background: var(--bg-2);
  border-color: rgba(255, 140, 90, 0.35);
}

.ep.weiter .num {
  color: var(--ember-hi);
}

.ep.weiter .ep-actions .btn.primary {
  background: linear-gradient(100deg, var(--ember), var(--ember-hi));
  color: #1a1020;
  border-color: transparent;
  font-weight: 700;
}

/* Melde-Knopf nur noch als Symbol, grau, bis man ihn braucht */
.ep .ep-actions .flag-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--faint);
  padding: 9px 10px;
}

.ep:hover .ep-actions .flag-btn {
  color: var(--muted);
  border-color: var(--line);
}

.ep .ep-actions .flag-btn:hover {
  color: var(--ink);
}

/* Beschreibungstext im Kopfbereich */
.hero-text {
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.6;
  margin: 0 0 22px;
}

/* ---------------------------------------------------------------------------
   Kopfbereich auf dem Handy
   Das Poster steht nicht mehr allein in einer Spalte mit leerem Rest, sondern
   der Titel fliesst daneben. Die Knöpfe darunter als festes Raster.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .series-hero {
    display: block;
    padding-top: 10px;
    margin-bottom: 28px;
  }

  .series-hero .poster-lg {
    float: left;
    width: 42%;
    max-width: 190px;
    margin: 4px 18px 14px 0;
  }

  .series-hero h1 {
    font-size: clamp(1.55rem, 7.5vw, 2.2rem);
    margin-bottom: 10px;
  }

  .hero-fakten {
    gap: 4px 14px;
    font-size: .88rem;
    margin-bottom: 16px;
  }

  .hero-fortschritt {
    margin-bottom: 16px;
  }

  /* Knopfreihe unter dem Poster. Sie daneben fliessen zu lassen klingt
     verlockend, aber ein Raster rechnet seine Spalten auf der vollen Breite
     aus und laeuft dann rechts raus - ausprobiert, sieht kaputt aus. */
  .hero-actions {
    clear: both;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 4px;
  }

  .hero-actions > .btn.primary {
    grid-column: 1 / -1;
  }

  .hero-actions .btn,
  .hero-actions .fav-heart.labeled {
    width: 100%;
    justify-content: center;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-actions .menu-wrap {
    width: 100%;
  }

  .hero-actions .menu-wrap .btn {
    width: 100%;
  }

  .series-hero .fass-wahl {
    clear: both;
    margin-top: 18px;
  }
}

/* ===========================================================================
   Kopfzeile
   Vorher kämpften zwei grosse Pillen rechts mit dem Seiteninhalt um
   Aufmerksamkeit. Jetzt sind es ruhige Symbole, der Name bleibt der Anker.
   =========================================================================== */
.nav-search .nav-lupe {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  cursor: text;
  color: var(--faint);
  margin: 0;
}

.nav-search .nav-lupe svg {
  width: 18px;
  height: 18px;
  display: block;
}

.nav-act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 500;
  transition: color .15s, background .15s, border-color .15s;
}

.nav-act:hover,
.nav-act:focus-visible {
  color: var(--ink);
  background: var(--bg-hi);
  border-color: var(--line);
}

.nav-act svg {
  flex: 0 0 auto;
}

/* Ab mittlerer Breite reichen die Symbole */
@media (max-width: 1250px) {
  .nav-act .nav-act-text { display: none; }
}

/* Auf dem Handy schrumpft die Suche auf die Lupe und öffnet sich beim Tippen */
@media (max-width: 760px) {
  .nav-search {
    max-width: 44px;
    padding: 9px 12px;
    overflow: hidden;
    transition: max-width .22s ease;
  }

  .nav-search input {
    width: 0;
    min-width: 0;
    padding: 0;
    opacity: 0;
    transition: opacity .15s;
  }

  .nav-search:focus-within {
    max-width: min(100%, 420px);
  }

  .nav-search:focus-within input {
    width: auto;
    flex: 1;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-search { transition: none; }
}

/* ---------------------------------------------------------------------------
   Funktionskarten
   Gestrichelte Rahmen mit Emoji sahen aus wie Platzhalter. Jetzt flache
   Karten im Querformat mit gezeichneten Symbolen - sie stehen neben
   Filmpostern und sollen sich klar als etwas anderes zu erkennen geben,
   ohne lauter zu sein.
   --------------------------------------------------------------------------- */
.room-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  align-content: center;
  column-gap: 14px;
  row-gap: 2px;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  aspect-ratio: auto;
  transition: border-color .15s, background .15s;
}

.room-card::before { display: none; }

@supports (aspect-ratio: 2 / 3) {
  .room-card { aspect-ratio: auto; }
}

.room-card:hover,
.room-card:focus-visible {
  border-color: var(--ember);
  background: var(--bg-3);
  color: var(--ink);
  transform: none;
}

.room-card .ico {
  grid-row: 1 / 3;
  grid-column: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(255, 106, 61, 0.14);
  color: var(--ember-hi);
  font-size: 0;
  margin: 0;
}

.room-card .ico svg {
  width: 22px;
  height: 22px;
  display: block;
}

.room-card .t {
  grid-column: 2;
  grid-row: 1;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.25;
}

.room-card .s {
  grid-column: 2;
  grid-row: 2;
  color: var(--faint);
  font-size: .82rem;
  line-height: 1.35;
}

/* Die Funktionsreihe braucht keine Poster-Spalten */
.row.funktionen .grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Hero-Titel darf gross werden, bricht aber sauber um */
.hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 10px;
  text-wrap: balance;
}

@media (max-width: 700px) {
  /* Die Folien liegen absolut uebereinander - der Hero braucht darum eine
     eigene Hoehe, sonst faellt er auf null zusammen. */
  .hero { min-height: 252px; }

  .hero .inner {
    grid-template-columns: 38% minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
    align-items: center;
  }

  .hero p.desc { display: none; }

  .hero .actions .btn {
    padding: 11px 18px;
    font-size: .95rem;
  }
}

/* Kachel-Abzeichen nur dort, wo Gemischtes nebeneinander steht.
   In einer Reihe, die "Filme" heisst, sagt ein Abzeichen "FILM" nichts. */
.row.einheitlich .card .badge {
  display: none;
}

.hero .kicker {
  color: var(--ember-hi);
}

.hero h1 {
  color: var(--ink);
}

/* ===========================================================================
   Profil
   Statt drei gleicher Kästen mit grossen Zahlen steht hier ein Satz:
   wie lange du geschaut hast, und woraus sich das zusammensetzt.
   Die Listen darunter sind der eigentliche Inhalt.
   =========================================================================== */
.profil-kopf {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 30px 0 34px;
}

.profil-kopf .profile-avatar {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
}

.profil-text {
  flex: 1;
  min-width: 200px;
}

.profil-text h1 {
  margin: 0 0 6px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.03em;
}

.profil-bilanz {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.profil-bilanz b {
  color: var(--ember-hi);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.profil-kopf .avatar-form {
  margin-left: auto;
}

@media (max-width: 620px) {
  .profil-kopf { gap: 16px; }
  .profil-kopf .profile-avatar { width: 68px; height: 68px; }
  .profil-kopf .avatar-form { margin-left: 0; width: 100%; }
  .profil-kopf .avatar-form .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Zurückhaltender Knopf
   Für alles, was wichtig genug für einen Knopf ist, aber nicht die
   Hauptsache der Seite. Genau ein Knopf pro Seite darf orange sein.
   --------------------------------------------------------------------------- */
.btn.still {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink);
  padding: 11px 18px;
  font-size: .95rem;
  box-shadow: none;
}

.btn.still:hover,
.btn.still:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: none;
}

.btn.still svg {
  width: 17px;
  height: 17px;
  opacity: .85;
}

/* Technische Angaben: nützlich, aber nicht die Hauptsache */
.diagnose {
  font-size: .82rem;
  color: var(--faint);
  line-height: 1.6;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 0 0;
  margin-top: 14px;
}

.diagnose b {
  color: var(--muted);
  font-weight: 600;
}

.diagnose code {
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  padding: 1px 6px;
  border-radius: 5px;
}

/* Knappes beschriftetes Feld für die Zeilen im Verwalten-Bereich */
.feld-knapp {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: .76rem;
  color: var(--faint);
  margin: 0;
  flex: 0 1 132px;
  min-width: 108px;
}

.feld-knapp input {
  margin: 0;
  padding: 7px 10px;
  font-size: .9rem;
}

.edit-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

/* Erledigt-Knöpfe in langen Listen: ruhig, bis man draufgeht.
   Sonst leuchten zwanzig orange Pillen untereinander. */
.btn.still.haken {
  padding: 8px 14px;
  font-size: .88rem;
  color: var(--muted);
}

.btn.still.haken:hover,
.btn.still.haken:focus-visible {
  color: #8ee6a8;
  border-color: rgba(142, 230, 168, 0.45);
  background: rgba(142, 230, 168, 0.12);
}

.btn.still.haken svg {
  opacity: .7;
}

.btn.still.haken:hover svg {
  opacity: 1;
}

/* Beiläufiger Zusatz mitten im Text.
   Vorher wurde dafür .hint benutzt - das ist aber ein Kasten mit Rahmen und
   Polsterung und hat sich über den Text daneben gelegt. */
.nebensatz {
  color: var(--faint);
  font-size: .86rem;
  font-weight: 400;
}

/* ===========================================================================
   Feinschliff aus dem Durchgang über alle Bildschirmformate
   =========================================================================== */

/* Kacheltitel: höchstens zwei Zeilen, dann abgeschnitten - sonst laufen
   lange Titel wie "Harry Potter und die Kammer des Schreckens" aus der
   Kachel heraus. */
.card .meta .t {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.card .meta .s {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Lange Titel dürfen auf schmalen Schirmen umbrechen statt rauszuragen */
.hero h1,
.series-hero h1 {
  overflow-wrap: anywhere;
}

/* Kino-Licht: overflow NICHT begrenzen, sonst wird der Ambient-Schein
   abgeschnitten. Gegen seitliches Ueberlaufen sorgt html { overflow-x: clip }
   weiter oben. Der border-radius gehoert auf die video-shell (dort schon). */

/* Admin: die Knopfreihen einer Nutzerzeile dürfen umbrechen */
.user-row {
  flex-wrap: wrap;
  row-gap: 8px;
}

@media (max-width: 620px) {
  .user-row .inline-form,
  .user-row .inline-form .btn {
    width: 100%;
  }

  .user-row .inline-form .btn {
    justify-content: center;
  }

  .user-row .u-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------------------------
   Flache Fenster (Handy im Querformat, Splitscreen oben/unten)
   Hier ist Höhe knapp, Breite reichlich. Das Poster wird klein und der Titel
   steht daneben - sonst füllt allein das Poster den ganzen Schirm.
   --------------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  .series-hero {
    display: grid;
    grid-template-columns: clamp(96px, 14vw, 150px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding-top: 8px;
    margin-bottom: 22px;
  }

  .series-hero .poster-lg {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
  }

  .series-hero h1 {
    font-size: clamp(1.4rem, 3.4vw, 2rem);
    margin-bottom: 8px;
  }

  .hero-fakten {
    margin-bottom: 12px;
    font-size: .86rem;
  }

  .hero-fortschritt {
    margin-bottom: 12px;
  }

  .hero-actions {
    display: flex;
    gap: 8px;
  }

  .hero-actions > .btn.primary {
    grid-column: auto;
  }

  .hero-actions .btn,
  .hero-actions .fav-heart.labeled {
    width: auto;
    padding: 9px 16px;
    font-size: .9rem;
  }

  .series-hero .btn.primary {
    padding: 10px 20px;
    font-size: .98rem;
  }

  .series-hero .fass-wahl {
    margin-top: 12px;
    gap: 8px;
  }

  /* Der Hero auf der Startseite darf flacher werden */
  .hero { min-height: 190px; }
  .hero .inner { grid-template-columns: 110px minmax(0, 1fr); padding: 14px 18px; }
  .hero h1 { font-size: clamp(1.3rem, 3vw, 1.9rem); }
  .hero p.desc { display: none; }
}

/* Mittlere Breiten (Tablet im Splitscreen): das Poster etwas kleiner,
   damit rechts daneben weniger leere Fläche entsteht. */
@media (min-width: 540px) and (max-width: 700px) {
  .series-hero .poster-lg {
    width: 34%;
    max-width: 168px;
  }
}

/* ==========================================================================
   Player Admin-Panel (unter dem Video)
   ========================================================================== */

.admin-player-btn {
  color: var(--ember-hi) !important;
  border-color: var(--ember-hi) !important;
}

.admin-player-btn.aktiv {
  background: var(--ember-hi) !important;
  color: #fff !important;
}

.admin-player-section {
  margin-top: 18px;
  background: var(--bg-2);
  border: 1px solid var(--ember-hi);
  border-radius: 16px;
  overflow: hidden;
}

.admin-player-section[hidden] {
  display: none;
}

.admin-player-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: .95rem;
}

.admin-player-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-player-status {
  font-size: .82rem;
  color: var(--muted);
  transition: color .2s;
}

.admin-player-status.ok {
  color: #4caf50;
}

.admin-player-status.err {
  color: #f44336;
}

/* Akkordeon-Gruppen */
.ap-gruppe {
  border-bottom: 1px solid var(--line);
}

.ap-gruppe:last-child {
  border-bottom: none;
}

.ap-gruppe > summary {
  padding: 12px 18px;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s;
}

.ap-gruppe > summary:hover {
  background: rgba(255,255,255,.04);
}

.ap-gruppe > summary::before {
  content: '▸';
  font-size: .8rem;
  color: var(--muted);
  transition: transform .2s;
}

.ap-gruppe[open] > summary::before {
  transform: rotate(90deg);
}

.ap-gruppe > summary::-webkit-details-marker {
  display: none;
}

.ap-gruppe-body {
  padding: 0 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-label .nebensatz {
  font-weight: 400;
  color: var(--muted);
  font-size: .8rem;
}

.ap-input {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font-size: .88rem;
}

.ap-input:focus {
  border-color: var(--ember-hi);
  outline: none;
}

.ap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ap-tags .tag-chip {
  font-size: .8rem;
  padding: 4px 12px;
}

.ap-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
}

.ap-check-label input {
  accent-color: var(--ember-hi);
}

.ap-info {
  font-size: .85rem;
  color: var(--muted);
  padding: 2px 0;
}

.ap-tracklist-kopf {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

.ap-tracklist-kopf .btn-sm {
  font-size: .78rem;
  padding: 3px 12px;
  border-color: var(--ember-hi);
  color: var(--ember-hi);
}

.ap-tracklist-kopf .btn-sm:hover {
  background: var(--ember-hi);
  color: #fff;
}

.ap-textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .82rem;
  resize: vertical;
  min-height: 80px;
}

.ap-textarea:focus {
  border-color: var(--ember-hi);
  outline: none;
}

.btn-sm {
  font-size: .82rem;
  padding: 4px 14px;
}

/* ---------- Admin-Panel Split-Screen (Desktop) ---------- */
@media (min-width: 900px) {
  .player-page.ap-offen {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr minmax(300px, 28%);
    grid-template-rows: auto auto 1fr;
    gap: 0 20px;
  }

  .player-page.ap-offen .player-top {
    grid-column: 1 / -1;
  }

  .player-page.ap-offen .player-stage {
    grid-column: 1;
    grid-row: 2;
  }

  .player-page.ap-offen .player-controls {
    grid-column: 1;
    grid-row: 3;
  }

  .player-page.ap-offen .tracklist-section {
    grid-column: 1;
  }

  .player-page.ap-offen .ambient-note {
    grid-column: 1;
  }

  .player-page.ap-offen .admin-player-section {
    grid-column: 2;
    grid-row: 2 / -1;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    position: sticky;
    top: 20px;
  }
}

/* ---------- Tracklist-Tabelle (Verwalten + Player Admin) ---------- */
.tl-tabelle-kopf {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.tl-tabelle-wrap {
  overflow-x: auto;
}
.tl-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.tl-tabelle th {
  text-align: left;
  padding: 5px 6px;
  border-bottom: 2px solid var(--ember);
  font-weight: 600;
  font-size: .82rem;
  color: var(--ember-hi);
  white-space: nowrap;
}
.tl-tabelle td {
  padding: 2px 3px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: middle;
}
.tl-nr {
  width: 32px;
  text-align: center;
  color: var(--ember);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tl-start, .tl-ende {
  width: 80px;
}
.tl-ende-btn {
  background: rgba(255,255,255,.06);
  border: 1px dashed var(--ember);
  border-radius: 4px;
  padding: 2px 4px;
  color: var(--ember);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .78rem;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.tl-ende-btn:hover {
  background: rgba(176,70,78,.15);
}
.tl-sel {
  width: 30px;
  text-align: center;
}
.tl-input {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: 2px 4px;
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .78rem;
}
.tl-input:focus {
  border-color: var(--ember-hi);
  outline: none;
  background: rgba(255,255,255,.1);
}
.tl-zeit {
  text-align: center;
}
.tl-name {
  font-family: inherit;
}
.tl-check {
  accent-color: var(--ember);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.tl-leer {
  text-align: center;
  color: var(--muted);
  padding: 18px 8px;
  font-size: .88rem;
}
.tl-tabelle tbody tr:hover {
  background: rgba(255,255,255,.04);
}