/* ==========================================================================
   mediagrab · einzige Styling-Quelle
   Farben, Schrift, Größen und Komponenten stehen ausschließlich hier.
   HTML, JavaScript und Java verwenden nur Klassen, Attribute und Tokens.
   Sekundärfarbe (--accent) = offizielle Farbe des aktiven Dienstes.
   ========================================================================== */

/* 1 · Schrift (lokal, OFL, siehe vendor/README.md) ------------------------- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/roboto-latin.woff2") format("woff2");
}

:root,
[data-lesen-design="light"] {
  --font-sans: "Roboto", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fs-10: 0.625rem;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --r-4: 4px;
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --r-pill: 999px;
  --h-header: 56px;
  --w-guide: 240px;
  --w-mini: 72px;
  --h-control: 36px;
  --h-field: 40px;
  --h-chip: 32px;
  --h-start-field: 76px;
  --pad-control: 16px;

  /* 2 · Offizielle Anbieterfarben */
  --c-mediagrab: #0066cc;
  --c-youtube: #ff0000;
  --c-twitch: #9146ff;
  --c-instagram: #e1306c;
  --g-instagram: linear-gradient(
    45deg,
    #feda75 0%,
    #fa7e1e 25%,
    #d62976 50%,
    #962fbf 75%,
    #4f5bd5 100%
  );
  --c-x: #0f1419;
  --c-x-on: #ffffff;
  --c-facebook: #0866ff;
  --c-tiktok: #fe2c55;
  --c-soundcloud: #ff5500;
  --c-tiktok-2: #25f4ee;
  --c-ard: #00347f;
  --c-ard-on: #ffffff;
  --c-zdf: #fa7d19;
  --c-arte: #fa481c;
  /* Musikdienste: MediaGrab liest dort nur Titeldaten und spielt eine passende Quelle */
  --c-spotify: #1db954;
  --c-spotify-on: #0f0f0f;
  --c-applemusic: #fa243c;
  --c-deezer: #a238ff;
  --c-tidal: #000000;
  --c-tidal-on: #ffffff;
  /* Webseiten aus „Lesen“: ruhiges Schiefergrau, keine Marke. */
  --c-web: #5f6b7a;

  /* 3 · Farbrollen hell */
  color-scheme: light dark;
  /* Hell nach apple.com: Seite in hellem Grau, Karten und Felder weiß darauf (--surface) */
  --bg: #f5f5f7;
  --surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-sunken: #f5f5f7;
  --chip: #e8e8ed;
  --chip-hover: #dcdce1;
  --text: #1d1d1f;
  --text-2: #636366;
  --text-disabled: #909090;
  --divider: #dcdce1;
  --control-border: #7d7d82;
  --inverse: #1d1d1f;
  --on-inverse: #ffffff;
  --seg-on-bg: #ffffff;
  --seg-on-fg: #0f0f0f;
  --link: #065fd4;
  --focus: #065fd4;
  --error: #c5221f;
  --error-soft: #fce8e6;
  --warning: #8a5300;
  --warning-soft: #fef7e0;
  --success: #137333;
  --success-soft: #e6f4ea;
  --scrim: rgba(15, 15, 15, 0.5);
  --overlay: rgba(0, 0, 0, 0.8);
  --on-overlay: #ffffff;
  --player-bg: #000000;
  --player-fade: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  --player-track: rgba(255, 255, 255, 0.24);
  --player-buffer: rgba(255, 255, 255, 0.45);
  /* Umgebungslicht (ambient.js): eine unscharfe Kopie des Bildes hinter dem Rahmen.
     Die Unschärfe bestimmt, wie weit und weich das Licht gleichmäßig aus dem Rahmen fällt.
     Auf Dunkel wirkt Licht viel stärker: dort schwächer und weicher als auf Hell. */
  --ambient-light-opacity: 0.2;
  --ambient-light-blur: 56px;
  --ambient-light-saturate: 1.15;
  --ambient-dark-opacity: 0.38;
  --ambient-dark-blur: 80px;
  --ambient-dark-saturate: 1;
  --ambient-opacity: var(--ambient-light-opacity);
  --ambient-blur: var(--ambient-light-blur);
  --ambient-saturate: var(--ambient-light-saturate);
  /* Vollbild der Sammlung: immer dunkel, unabhängig vom Thema */
  --reels-bg: #000000;
  --reels-text: #ffffff;
  --reels-text-2: #d9d9d9;
  --reels-chip: rgba(15, 15, 15, 0.55);
  --reels-chip-hover: rgba(60, 60, 60, 0.8);
  --reels-track: rgba(255, 255, 255, 0.35);
  --reels-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  --reels-shade:
    linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 40%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 16%);
  --thumb-track: rgba(255, 255, 255, 0.4);
  --thumb-1: #34424e;
  --thumb-2: #4b3f36;
  --thumb-3: #2f4538;
  --thumb-4: #41385a;
  --thumb-5: #5a4631;
  --thumb-6: #2d4a57;
  --thumb-7: #553540;
  --thumb-8: #3c3c3c;
  --thumb-ink: rgba(255, 255, 255, 0.12);
  --thumb-ink-2: rgba(255, 255, 255, 0.22);
  --thumb-icon: rgba(255, 255, 255, 0.75);
  --thumb-text: #ffffff;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
  /* Kartenrand auf „Konten verbinden“ (Abschnitt 32). --card-lift ist immer ein gültiger
     Schatten: --shadow-card ist auf Dunkel „none“, und „none“ in einer Schattenliste macht die
     ganze box-shadow-Angabe ungültig – samt Rand. */
  --card-edge: var(--divider);
  --card-lift: var(--shadow-card);
  --shadow-seg: 0 1px 3px rgba(0, 0, 0, 0.18);
  --shadow-menu: 0 4px 32px rgba(0, 0, 0, 0.16);
  --shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.28);
  /* Startseite: grauer Grund; Feld und Kacheln leuchten selbst in der Akzentfarbe */
  --start-bg: var(--bg);
  --glow-near: 34%;
  --glow-far: 14%;

  /* Sekundärfarbe: Standard mediagrab, pro Dienst unten überschrieben */
  --accent: var(--c-mediagrab);
  --accent-img: none;
  --accent-on: #ffffff;
  --accent-2: transparent;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--bg));

  font-family: var(--font-sans);
  font-size: 100%;
  font-synthesis: none;
}

/* 4 · Farbrollen dunkel ---------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f0f;
    --surface: #0f0f0f;
    --bg-elevated: #212121;
    --bg-sunken: #181818;
    --chip: #272727;
    --chip-hover: #3f3f3f;
    --text: #f1f1f1;
    --text-2: #aaaaaa;
    --text-disabled: #717171;
    --divider: #3f3f3f;
    --control-border: #717171;
    --inverse: #f1f1f1;
    --on-inverse: #0f0f0f;
    --seg-on-bg: #f1f1f1;
    --seg-on-fg: #0f0f0f;
    --link: #3ea6ff;
    --focus: #3ea6ff;
    --error: #f28b82;
    --error-soft: #3c1f1e;
    --warning: #fdd663;
    --warning-soft: #3a3016;
    --success: #81c995;
    --success-soft: #1e3325;
    --scrim: rgba(0, 0, 0, 0.7);
    --shadow-card: none;
    --shadow-seg: none;
    --card-edge: #2a2a2a;
    --card-lift: 0 0 transparent;
    --shadow-menu: 0 4px 32px rgba(0, 0, 0, 0.5);
    --shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.6);
    --ambient-opacity: var(--ambient-dark-opacity);
    --ambient-blur: var(--ambient-dark-blur);
    --ambient-saturate: var(--ambient-dark-saturate);
    --start-bg: var(--bg-sunken);
    --glow-near: 30%;
    --glow-far: 10%;
    --c-ard: #6d9eeb;
    --c-ard-on: #0f0f0f;
    --c-x: #e7e9ea;
    --c-x-on: #0f0f0f;
    --c-tidal: #e7e9ea;
    --c-tidal-on: #0f0f0f;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f0f;
  --surface: #0f0f0f;
  --bg-elevated: #212121;
  --bg-sunken: #181818;
  --chip: #272727;
  --chip-hover: #3f3f3f;
  --text: #f1f1f1;
  --text-2: #aaaaaa;
  --text-disabled: #717171;
  --divider: #3f3f3f;
  --control-border: #717171;
  --inverse: #f1f1f1;
  --on-inverse: #0f0f0f;
  --seg-on-bg: #f1f1f1;
  --seg-on-fg: #0f0f0f;
  --link: #3ea6ff;
  --focus: #3ea6ff;
  --error: #f28b82;
  --error-soft: #3c1f1e;
  --warning: #fdd663;
  --warning-soft: #3a3016;
  --success: #81c995;
  --success-soft: #1e3325;
  --scrim: rgba(0, 0, 0, 0.7);
  --shadow-card: none;
  --shadow-seg: none;
  /* Kartenrand: auf Dunkel leiser als --divider, Dunkel bleibt weicher als Hell */
  --card-edge: #2a2a2a;
  --card-lift: 0 0 transparent;
  --shadow-menu: 0 4px 32px rgba(0, 0, 0, 0.5);
  --shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.6);
  --ambient-opacity: var(--ambient-dark-opacity);
  --ambient-blur: var(--ambient-dark-blur);
  --ambient-saturate: var(--ambient-dark-saturate);
  --start-bg: var(--bg-sunken);
  --glow-near: 30%;
  --glow-far: 10%;
  /* ARD-Blau, X- und TIDAL-Schwarz sind auf Dunkel nicht erkennbar: aufgehellte Varianten */
  --c-ard: #6d9eeb;
  --c-ard-on: #0f0f0f;
  --c-x: #e7e9ea;
  --c-x-on: #0f0f0f;
  --c-tidal: #e7e9ea;
  --c-tidal-on: #0f0f0f;
}
:root[data-theme="light"] {
  color-scheme: light;
}

/* 5 · Aktiver Dienst → Sekundärfarbe; Eintragsfarbe über data-p ------------- */
:root[data-provider="youtube"] {
  --accent: var(--c-youtube);
}
:root[data-provider="twitch"] {
  --accent: var(--c-twitch);
}
:root[data-provider="soundcloud"] {
  --accent: var(--c-soundcloud);
  --accent-on: #0f0f0f;
}
.seg-opt:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}
:root[data-provider="instagram"] {
  --accent: var(--c-instagram);
  --accent-img: var(--g-instagram);
}
:root[data-provider="x"] {
  --accent: var(--c-x);
  --accent-on: var(--c-x-on);
}
:root[data-provider="facebook"] {
  --accent: var(--c-facebook);
}
:root[data-provider="tiktok"] {
  --accent: var(--c-tiktok);
  --accent-2: var(--c-tiktok-2);
}
:root[data-provider="ard"] {
  --accent: var(--c-ard);
}
:root[data-provider="zdf"] {
  --accent: var(--c-zdf);
  --accent-on: #0f0f0f;
}
:root[data-provider="web"] {
  --accent: var(--c-web);
}
:root[data-provider="arte"] {
  --accent: var(--c-arte);
}
:root[data-provider="spotify"] {
  --accent: var(--c-spotify);
  --accent-on: var(--c-spotify-on);
}
:root[data-provider="applemusic"] {
  --accent: var(--c-applemusic);
}
:root[data-provider="deezer"] {
  --accent: var(--c-deezer);
}
:root[data-provider="tidal"] {
  --accent: var(--c-tidal);
  --accent-on: var(--c-tidal-on);
}

[data-p] {
  --pc: var(--c-mediagrab);
  --pc-on: #ffffff;
  --pf: none;
}
[data-p="youtube"] {
  --pc: var(--c-youtube);
}
[data-p="twitch"] {
  --pc: var(--c-twitch);
}
[data-p="soundcloud"] {
  --pc: var(--c-soundcloud);
}
[data-p="instagram"] {
  --pc: var(--c-instagram);
  --pf: var(--g-instagram);
}
[data-p="x"] {
  --pc: var(--c-x);
  --pc-on: var(--c-x-on);
}
[data-p="facebook"] {
  --pc: var(--c-facebook);
}
[data-p="tiktok"] {
  --pc: var(--c-tiktok);
}
[data-p="ard"] {
  --pc: var(--c-ard);
  --pc-on: var(--c-ard-on);
}
[data-p="zdf"] {
  --pc: var(--c-zdf);
  --pc-on: #0f0f0f;
}
[data-p="web"] {
  --pc: var(--c-web);
}
[data-p="arte"] {
  --pc: var(--c-arte);
}
[data-p="spotify"] {
  --pc: var(--c-spotify);
  --pc-on: var(--c-spotify-on);
}
[data-p="applemusic"] {
  --pc: var(--c-applemusic);
}
[data-p="deezer"] {
  --pc: var(--c-deezer);
}
[data-p="tidal"] {
  --pc: var(--c-tidal);
  --pc-on: var(--c-tidal-on);
}

/* 6 · Basis ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  scroll-padding-top: calc(var(--h-header) + 16px);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-14);
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
button,
input,
textarea,
select,
fieldset {
  min-inline-size: 0;
  max-inline-size: 100%;
}
button,
select,
summary {
  cursor: pointer;
}
button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}
a {
  color: inherit;
  text-decoration: none;
}
p a:not(.btn),
.link {
  color: var(--link);
  font-weight: var(--fw-medium);
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
fieldset,
legend,
figure {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
fieldset {
  border: 0;
  min-width: 0;
}
code {
  font-size: 0.95em;
  padding: 1px 4px;
  border-radius: var(--r-4);
  background: var(--chip);
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.visually-hidden,
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--inverse);
  color: var(--on-inverse);
  font-weight: var(--fw-medium);
}
.skip-link:focus {
  top: 8px;
}
.muted {
  color: var(--text-2);
}
.small {
  font-size: var(--fs-12);
}
.grow {
  flex: 1 1 auto;
  min-width: 0;
}
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.optional {
  color: var(--text-2);
  font-weight: var(--fw-regular);
}

/* 7 · Symbole ---------------------------------------------------------------- */
.ico {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-20 {
  width: 20px;
  height: 20px;
}
.ico-18 {
  width: 18px;
  height: 18px;
}
.ico-16 {
  width: 16px;
  height: 16px;
}
.ico-28 {
  width: 28px;
  height: 28px;
}
.ico-32 {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}
.ico-solid {
  fill: currentColor;
  stroke: none;
}
.ico-accent {
  color: var(--accent);
}

/* 8 · Marke --------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 4px;
  border-radius: var(--r-8);
  flex: none;
}
.brand-tile {
  width: 30px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background-color: var(--accent);
  background-image: var(--accent-img);
  color: var(--accent-on);
  box-shadow: -2px -1.5px 0 var(--accent-2);
}
.brand-mark {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-word {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: -0.8px;
  color: var(--text);
}

/* 9 · Buttons --------------------------------------------------------------- */
.btn {
  position: relative;
  height: var(--h-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  padding: 0 var(--pad-control);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--chip);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover {
  background: var(--chip-hover);
}
.btn.has-ico {
  padding-left: calc(var(--pad-control) - 4px);
}
.btn-primary {
  background: var(--inverse);
  color: var(--on-inverse);
}
.btn-primary:hover {
  background: var(--inverse);
  opacity: 0.88;
}
.btn-outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--divider);
}
.btn-outline .ico {
  color: var(--accent);
}
.btn-text {
  background: transparent;
  color: var(--link);
}
.btn-text:hover {
  background: var(--chip);
}
.btn-danger {
  background: transparent;
  color: var(--error);
}
.btn-danger:hover {
  background: var(--error-soft);
}
.btn-icon {
  width: var(--h-control);
  padding: 0;
  border-radius: 50%;
  background: transparent;
}
.btn-icon:hover {
  background: var(--chip);
}
.btn-icon.tonal {
  background: var(--chip);
}
.btn-sm {
  height: 32px;
  padding: 0 12px;
}
.btn-sm.has-ico {
  padding-left: 8px;
}
.btn-sm.btn-icon {
  width: 32px;
  padding: 0;
}
.btn-lg {
  height: 48px;
  padding: 0 24px;
  font-size: var(--fs-16);
}
.btn-block {
  width: 100%;
}
.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.55;
}
.dot-badge {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--accent);
  background-image: var(--accent-img);
  box-shadow: 0 0 0 2px var(--bg);
}
.avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--chip-hover);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  list-style: none;
}
.avatar::-webkit-details-marker {
  display: none;
}
.initial-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--chip);
  color: var(--text-2);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
}

/* 10 · Dienst-Chips ------------------------------------------------------------ */
.chips {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: none;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chips[data-provider-chips] {
  flex-wrap: wrap;
  overflow: visible;
  min-width: 0;
  padding-block: 4px;
}
.chip {
  height: var(--h-chip);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-8);
  background: var(--chip);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.chip:hover {
  background: var(--chip-hover);
}
.chip[aria-pressed="true"],
.chip[aria-selected="true"] {
  background: var(--inverse);
  color: var(--on-inverse);
}
.chip[aria-pressed="true"] .pdot {
  box-shadow: 0 0 0 1.5px var(--on-inverse);
}
.chip[aria-disabled="true"] {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--divider);
  color: var(--text-disabled);
}
.chip[aria-disabled="true"] .pdot {
  opacity: 0.4;
}
.chip-count {
  font-weight: var(--fw-regular);
  opacity: 0.8;
}
.pdot {
  width: 8px;
  height: 8px;
  flex: none;
  display: inline-block;
  border-radius: 50%;
  background-color: var(--pc, var(--accent));
  background-image: var(--pf, var(--accent-img));
}
.pdot.lg {
  width: 10px;
  height: 10px;
}
.dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 11 · Formularbausteine -------------------------------------------------------- */
.field-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}
.field-help {
  margin-top: 6px;
  font-size: var(--fs-12);
  color: var(--text-2);
}
/* Linkfeld mit Erkennung */
.linkfield {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: var(--h-field);
  padding: 0 4px 0 16px;
  border: 1px solid var(--control-border);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.linkfield.is-detected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.linkfield:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.linkfield > .ico {
  color: var(--text-2);
}
.field-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: var(--fs-16);
}
.field-input:focus-visible {
  outline: none;
}
.field-input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-2);
}
.detect {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  flex: none;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
/* Einfügen-Knopf (paste-field.js) ----------------------------------------------- */
/* Sits inside the field on the right; shown while the field is empty (or always for lists). */
.paste-button {
  flex: none;
  color: var(--text);
}
.paste-button > .ico {
  color: var(--text-2);
}
.paste-button:hover > .ico {
  color: var(--text);
}
/* A 32px button still offers a 40px touch target. */
.paste-button::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.btn-icon.paste-button {
  width: 32px;
  height: 32px;
}
/* Header search: icon at the input's right end, before the search button. */
.global-search.has-paste {
  position: relative;
}
.global-search.has-paste > .search-input {
  padding-right: 44px;
}
.global-search > .paste-button {
  position: absolute;
  top: 4px;
  right: calc(64px + 4px);
}
/* Framed field with its label in the frame: top right corner. */
.field > .paste-button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
}
.field.has-paste > input,
.field.has-paste > textarea {
  padding-right: 120px;
}
/* Hint for the browser's own paste menu; a live region that stays in the tree while empty. */
.paste-hint {
  position: fixed;
  z-index: 95;
  max-width: min(360px, calc(100vw - 32px));
  padding: 8px 12px;
  border-radius: var(--r-12);
  background: var(--inverse);
  color: var(--on-inverse);
  box-shadow: var(--shadow-menu);
  font-size: var(--fs-14);
  line-height: 1.4;
  pointer-events: none;
  animation: paste-hint-in 160ms ease-out;
}
.paste-hint:not([data-open]) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  box-shadow: none;
  animation: none;
}
@keyframes paste-hint-in {
  from {
    opacity: 0;
    transform: translateY(var(--paste-hint-shift, 4px));
  }
}
.paste-hint[data-place="above"] {
  --paste-hint-shift: -4px;
}
@media (forced-colors: active) {
  .paste-hint {
    border: 1px solid CanvasText;
  }
}
/* Umrandetes Feld mit Beschriftung im Rahmen (Karten) */
.field {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.field > label {
  position: absolute;
  left: 14px;
  top: 5px;
  z-index: 1;
  font-size: var(--fs-12);
  color: var(--text-2);
  pointer-events: none;
}
.field > input,
.field > select,
.field > textarea {
  width: 100%;
  min-height: 48px;
  padding: 18px 40px 6px 13px;
  border: 1px solid var(--control-border);
  border-radius: var(--r-12);
  background: var(--surface);
  font-size: var(--fs-16);
}
.field > select {
  appearance: none;
}
.field > textarea {
  min-height: 112px;
  padding-top: 24px;
  resize: vertical;
}
/* File choice: a drop zone over a hidden native input (ui.js shows the name, takes drops). */
.file-field {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.file-drop {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 14px 16px;
  border: 1.5px dashed var(--control-border);
  border-radius: var(--r-12);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.file-drop:hover,
.file-field.is-dragging .file-drop {
  border-color: var(--accent);
  background: var(--bg-sunken);
}
.file-field.is-dragging .file-drop {
  border-style: solid;
}
.file-field.has-file .file-drop {
  border-style: solid;
}
.file-field > input:focus-visible + .file-drop {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.file-field > input:disabled + .file-drop {
  opacity: 0.5;
  cursor: not-allowed;
}
.file-drop-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--chip);
  color: var(--text-2);
}
.file-field.has-file .file-drop-icon,
.file-field.is-dragging .file-drop-icon {
  color: var(--accent);
}
.file-drop-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.file-drop-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  color: var(--text);
}
.file-drop-hint {
  overflow: hidden;
  font-size: var(--fs-14);
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-field.has-file .file-drop-hint {
  color: var(--text);
}
.file-field > .field-help {
  margin-top: 4px;
}
.field > .ico {
  position: absolute;
  right: 12px;
  top: 12px;
  color: var(--text-2);
  pointer-events: none;
}
.field.is-detected > input {
  border: 2px solid var(--accent);
  padding-left: 12px;
  padding-right: 168px;
}
.field > .detect {
  position: absolute;
  right: 10px;
  top: 10px;
}
.field > input:focus-visible,
.field > select:focus-visible,
.field > textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.field > .field-help {
  margin-top: 4px;
}
/* Segmente Video / Audio */
.seg {
  display: inline-flex;
  flex: none;
  gap: 2px;
  height: var(--h-control);
  padding: 3px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--chip);
}
/* In a column (card body) the switch keeps its own width instead of stretching. */
.card-body > .seg {
  align-self: flex-start;
}
.seg-opt {
  position: relative;
  display: flex;
}
.seg-opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.seg-opt span {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  white-space: nowrap;
}
.seg-opt input:checked + span {
  background: var(--seg-on-bg);
  color: var(--seg-on-fg);
  box-shadow: var(--shadow-seg);
}
.seg-opt input:checked + span .ico {
  color: var(--accent);
}
.seg-opt input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* Auswahl als Pill */
.select {
  position: relative;
  display: inline-flex;
  flex: none;
}
.select select {
  height: var(--h-control);
  padding: 0 38px 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--chip);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  appearance: none;
}
.select select:hover {
  background: var(--chip-hover);
}
.select .ico {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  pointer-events: none;
}
/* Auswahlmenü (select-menu.js): Knopf im Pill- bzw. Feldstil, Liste wie das Kontomenü.
   Das native select bleibt unsichtbar im Fluss, damit Formularprüfung und Entwürfe greifen. */
.select > select.select-native,
.field > select.select-native {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.select-trigger {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  border: 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.select > .select-trigger {
  flex: 1 1 auto;
  height: var(--h-control);
  padding: 0 38px 0 16px;
  border-radius: var(--r-pill);
  background: var(--chip);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}
.select > .select-trigger:hover {
  background: var(--chip-hover);
}
.field > .select-trigger {
  width: 100%;
  min-height: 48px;
  padding: 18px 40px 6px 13px;
  border: 1px solid var(--control-border);
  border-radius: var(--r-12);
  background: var(--surface);
  font-size: var(--fs-16);
}
.select-trigger:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.select-trigger:disabled {
  color: var(--text-disabled);
  cursor: default;
}
.select-trigger:disabled:hover {
  background: var(--chip);
}
.field > .select-trigger:disabled:hover {
  background: var(--surface);
}
.select-trigger:disabled ~ .ico {
  color: var(--text-disabled);
}
.select-trigger[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--error);
}
.select-trigger[aria-expanded="true"] ~ .ico {
  transform: rotate(180deg);
}
.select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-error {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 5;
  padding: 6px 12px;
  border-radius: var(--r-8);
  background: var(--bg-elevated);
  box-shadow:
    var(--shadow-menu),
    inset 0 0 0 1px var(--divider);
  color: var(--error);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.select-menu {
  position: fixed;
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0;
  border-radius: var(--r-12);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow:
    var(--shadow-menu),
    inset 0 0 0 1px var(--divider);
}
.select-menu:focus,
.select-menu:focus-visible {
  outline: none;
}
.select-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 16px 0 12px;
  font-size: var(--fs-14);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.select-option.is-active {
  background: var(--chip);
}
.select-option[aria-selected="true"] {
  font-weight: var(--fw-bold);
}
.select-option[aria-disabled="true"] {
  color: var(--text-disabled);
  cursor: default;
}
.select-check {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
}
.select-check .ico {
  width: 20px;
  height: 20px;
}
.select-option-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-option-detail {
  flex: none;
  margin-left: 16px;
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  color: var(--text-2);
}
@media (prefers-reduced-motion: no-preference) {
  .select-menu {
    animation: select-menu-in 0.12s ease-out;
  }
  .select-trigger ~ .ico {
    transition: transform 0.15s ease;
  }
}
@keyframes select-menu-in {
  from {
    opacity: 0;
  }
}
/* Schalter */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: var(--h-control);
  padding: 0 14px 0 10px;
  border-radius: var(--r-pill);
  background: var(--chip);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
}
.toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.knob {
  position: relative;
  width: 32px;
  height: 18px;
  flex: none;
  border-radius: 9px;
  background: var(--control-border);
}
.knob::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-elevated);
}
.toggle input:checked + .knob {
  background-color: var(--accent);
  background-image: var(--accent-img);
}
.toggle input:checked + .knob::after {
  left: 16px;
  background: var(--accent-on);
}
.toggle input:focus-visible + .knob {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* Checkbox-Zeile */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-14);
}
.check-row input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--accent);
}
.check-row small {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-12);
}

/* 12 · Hinweise, Status, Leerzustände ------------------------------------------ */
.note,
.notice:not(:empty) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 14px;
  border-radius: var(--r-12);
  background: var(--chip);
  font-size: var(--fs-14);
}
.note .ico {
  color: var(--accent);
}
.notice:empty {
  display: none;
}
.notice[data-kind="error"],
.error-message:not(:empty) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 14px;
  border-radius: var(--r-12);
  background: var(--error-soft);
  color: var(--error);
  font-size: var(--fs-14);
}
.notice[data-kind="warning"] {
  background: var(--warning-soft);
  color: var(--warning);
}
.notice[data-kind="success"] {
  background: var(--success-soft);
  color: var(--success);
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 20px;
  color: var(--text-2);
}
.empty-state strong,
.empty-state h2 {
  color: var(--text);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
}
.state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}
.state[data-state="running"],
.state[data-state="queued"] {
  color: var(--text);
}
.state[data-state="running"]::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background-color: var(--pc, var(--accent));
  background-image: var(--pf, var(--accent-img));
}
.state[data-state="failed"],
.state[data-state="cancelled"] {
  color: var(--error);
}
.state[data-state="succeeded"] {
  color: var(--success);
}
.state[data-state="partial"],
.state[data-state="warning"] {
  color: var(--warning);
}

/* 13 · Vorschaubilder, Balken, Texte --------------------------------------------- */
.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  flex: none;
  overflow: hidden;
  border-radius: var(--r-12);
  background: var(--thumb-8);
}
.thumb[data-t="1"] {
  background: var(--thumb-1);
}
.thumb[data-t="2"] {
  background: var(--thumb-2);
}
.thumb[data-t="3"] {
  background: var(--thumb-3);
}
.thumb[data-t="4"] {
  background: var(--thumb-4);
}
.thumb[data-t="5"] {
  background: var(--thumb-5);
}
.thumb[data-t="6"] {
  background: var(--thumb-6);
}
.thumb[data-t="7"] {
  background: var(--thumb-7);
}
.thumb[data-t="8"] {
  background: var(--thumb-8);
}
button.thumb {
  border: 0;
  padding: 0;
}
.thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb-brand {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--pc);
  color: var(--pc-on);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}
.thumb-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.thumb-art circle {
  fill: var(--thumb-ink-2);
}
.thumb-art path {
  fill: var(--thumb-ink);
}
.thumb-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  color: var(--thumb-icon);
}
.thumb-time,
.thumb-tag {
  position: absolute;
  bottom: 6px;
  padding: 1px 5px;
  border-radius: var(--r-4);
  background: var(--overlay);
  color: var(--on-overlay);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 18px;
}
.thumb-time {
  right: 6px;
}
.thumb-tag {
  left: 6px;
  top: 6px;
  bottom: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.thumb-tag.live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--pc, var(--accent));
  background-image: var(--pf, var(--accent-img));
}
.thumb-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--thumb-track);
}
.thumb-bar > span,
.bar > span {
  display: block;
  width: var(--value, 0%);
  height: 100%;
  background-color: var(--pc, var(--accent));
  background-image: var(--pf, var(--accent-img));
}
.bar {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--divider);
}
.thumb-side {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--overlay);
  color: var(--on-overlay);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  text-align: center;
}
.thumb-stack {
  position: relative;
  padding-top: 8px;
}
.thumb-stack::before,
.thumb-stack::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 4px;
  border-radius: 8px 8px 0 0;
  background: var(--chip-hover);
}
.thumb-stack::after {
  left: 8px;
  right: 8px;
  top: 4px;
  background: var(--text-disabled);
}
.t-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.t-title.sm {
  font-size: var(--fs-14);
  line-height: 20px;
}
.t-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--text-2);
}
.t-sub.sm {
  font-size: var(--fs-12);
  line-height: 18px;
}
.t-sub > span:last-child:not(.pdot):not(.dots) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.eq i {
  width: 3px;
  border-radius: 1px;
  background-color: var(--accent);
  background-image: var(--accent-img);
}
.eq i:nth-child(1) {
  height: 60%;
}
.eq i:nth-child(2) {
  height: 100%;
}
.eq i:nth-child(3) {
  height: 40%;
}
.now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}
.warn-text {
  color: var(--warning);
}

/* 14 · Rahmen: Kopf ------------------------------------------------------------------ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--h-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  background: var(--bg);
}
.header-start,
.header-end {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 224px;
  flex: none;
}
.header-end {
  justify-content: flex-end;
}
.header-search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 732px;
  min-width: 0;
}
.global-search {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
}
.search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--control-border);
  border-right: 0;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-16);
}
.search-input::placeholder {
  color: var(--text-2);
}
.search-submit {
  width: 64px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--control-border);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--chip);
}
.search-open,
.search-close {
  display: none;
}
/* Menüs im Kopf (details/summary) */
.menu-anchor {
  position: relative;
}
.menu-anchor > summary {
  list-style: none;
}
.menu-anchor > summary::-webkit-details-marker {
  display: none;
}
.menu,
.popover {
  transform: translateX(var(--menu-shift-x, 0px));
  position: absolute;
  z-index: 40;
  min-width: 240px;
  padding: 8px 0;
  border-radius: var(--r-12);
  background: var(--bg-elevated);
  box-shadow:
    var(--shadow-menu),
    inset 0 0 0 1px var(--divider);
}
.menu {
  top: calc(100% + 6px);
  right: 0;
}
.menu.start {
  left: 0;
  right: auto;
}
.menu-title {
  padding: 8px 16px 10px;
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
}
.menu-meta {
  padding: 0 16px 8px;
  font-size: var(--fs-12);
  color: var(--text-2);
}
.app-version {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--divider);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
  text-align: left;
  white-space: nowrap;
}
.menu-item:hover,
.menu-item:focus-visible {
  background: var(--chip);
}
.menu-form {
  margin: 0;
}
.menu-form .menu-item {
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-14);
}
.menu-item .count {
  margin-left: auto;
  font-size: var(--fs-12);
  color: var(--text-2);
}
.menu-item[aria-disabled="true"] {
  color: var(--text-disabled);
}
.menu-check {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-4);
  box-shadow: inset 0 0 0 2px var(--control-border);
}
.menu-item[aria-checked="true"] .menu-check {
  background-color: var(--accent);
  background-image: var(--accent-img);
  box-shadow: none;
  color: var(--accent-on);
}
/* Schalter am Zeilenende (Umgebungslicht im Kontomenü), neutral statt Akzentfarbe */
.menu-switch {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  margin-left: auto;
  border-radius: var(--r-pill);
  background: var(--control-border);
}
.menu-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
}
.menu-item[aria-checked="true"] .menu-switch {
  background: var(--inverse);
}
.menu-item[aria-checked="true"] .menu-switch::after {
  background: var(--on-inverse);
  transform: translateX(16px);
}
@media (prefers-reduced-motion: no-preference) {
  .menu-switch,
  .menu-switch::after {
    transition:
      background-color 0.15s ease,
      transform 0.15s ease;
  }
}
.menu-sep {
  height: 1px;
  margin: 8px 0;
  background: var(--divider);
}
/* Einheitliches Menüraster: Symbolspalte (24 px), Text, rechts ein Haken für die aktive Wahl.
   Gruppenüberschriften beginnen bündig mit dem Text der Einträge. */
.menu-group-label {
  padding: 4px 16px 4px calc(16px + 24px + 14px);
  color: var(--text-2);
  font-size: var(--fs-12);
}
.menu-item > .ico:first-child {
  flex: none;
}
.menu-mark {
  flex: none;
  margin-left: auto;
  visibility: hidden;
}
.menu-item[aria-checked="true"] .menu-mark {
  visibility: visible;
}
.anchor {
  position: relative;
  display: inline-flex;
}
.popover.picker {
  top: calc(100% + 6px);
  left: 0;
  width: 300px;
  max-width: calc(100vw - 24px);
}
.picker-form {
  display: flex;
  gap: 8px;
  padding: 4px 16px 8px;
}
.picker-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.theme-toggle:not(.menu-item) {
  display: inline-flex;
  align-items: center;
}
/* Im Menü folgt der Schalter dem Menüraster (24-px-Symbolspalte) wie alle anderen Einträge. */
.theme-toggle:not(.menu-item) svg {
  width: 20px;
  height: 20px;
}

/* 15 · Rahmen: Navigation links („Guide“), kompakt und mobil ---------------------- */
body.app-layout {
  display: grid;
  grid-template-columns: var(--w-guide) minmax(0, 1fr);
  grid-template-rows: var(--h-header) minmax(0, 1fr);
  align-items: start;
}
body.app-layout > .app-header {
  grid-column: 1 / -1;
}
body.app-layout > .app-nav {
  grid-row: 2;
  grid-column: 1;
}
body.app-layout > main {
  grid-row: 2;
  grid-column: 2;
  min-width: 0;
}
.app-nav {
  position: sticky;
  /* Above the page's Umgebungslicht, like the header. */
  z-index: 1;
  top: var(--h-header);
  width: var(--w-guide);
  height: calc(100vh - var(--h-header));
  flex: none;
  overflow-y: auto;
  padding: 0 12px 12px;
  background: var(--bg);
  scrollbar-width: thin;
}
.nav-section {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  border-bottom: 1px solid var(--divider);
}
.nav-section:last-child,
.nav-section:has(+ .nav-section[hidden]:last-child) {
  border-bottom: 0;
}
.nav-title {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
  text-align: left;
}
.nav-item:hover {
  background: var(--chip);
}
.nav-item[aria-current="page"] {
  background: var(--chip);
  font-weight: var(--fw-medium);
}
.nav-item[aria-current="page"] .ico {
  color: var(--accent);
  stroke-width: 2.25;
}
.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background-color: var(--accent);
  background-image: var(--accent-img);
}
.nav-label {
  flex: 1 1 auto;
  min-width: 0;
}
.nav-count {
  font-size: var(--fs-12);
  color: var(--text-2);
}
.nav-foot {
  padding: 16px 12px;
  font-size: var(--fs-12);
  color: var(--text-2);
}
/* Kompakte Leiste (Menüknopf oder schmale Fenster) */
body.app-layout.nav-compact {
  grid-template-columns: var(--w-mini) minmax(0, 1fr);
}
body.nav-compact .app-nav {
  width: var(--w-mini);
  padding: 4px;
}
body.nav-compact .nav-section {
  padding: 0;
  border: 0;
}
body.nav-compact .nav-section + .nav-section,
body.nav-compact .nav-title,
body.nav-compact .nav-count,
body.nav-compact .nav-foot {
  display: none;
}
body.nav-compact .nav-item {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 74px;
  padding: 0;
  font-size: var(--fs-10);
  text-align: center;
}
body.nav-compact .nav-item[aria-current="page"]::before {
  display: none;
}
body.nav-compact .nav-label {
  flex: none;
}

/* 16 · Seitenflächen ---------------------------------------------------------------- */
/* Stil 1: weißer Seitenhintergrund */
.page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 24px 48px;
  max-width: 1720px;
}
/* Mix: graue Arbeitsfläche mit Karten */
.workspace {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: calc(100vh - var(--h-header));
  padding: 24px 32px 48px;
  border-top-left-radius: var(--r-16);
  background: var(--bg-sunken);
}
.page-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.collection-overview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.collection-overview > [role="status"]:empty {
  display: none;
}
.page-head h1,
.page-title {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: 32px;
}
.page-head .end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.count {
  font-size: var(--fs-14);
  color: var(--text-2);
}
.sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sec-head h2 {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: 28px;
}
.sec-head .end {
  margin-left: auto;
}
.page > .chips {
  min-height: 56px;
  gap: 12px;
  margin-bottom: -8px;
}

/* 17 · Karten (Mix) ------------------------------------------------------------------ */
.card {
  border-radius: var(--r-12);
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px var(--divider),
    var(--shadow-card);
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px 0;
}
.card-title {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: 26px;
}
.card-head .end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card > .notice:not(:empty),
.card > .error-message:not(:empty) {
  margin: 12px 20px 0;
}
.card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px 20px;
}
.tabs {
  display: flex;
  gap: 28px;
  margin-top: 8px;
  padding: 0 20px;
  border-bottom: 1px solid var(--divider);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs.tight {
  gap: 18px;
  padding: 0 16px;
}
.tabs.bare {
  margin-top: 0;
  padding: 0;
}
.tab {
  position: relative;
  height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}
.tab[aria-selected="true"] {
  color: var(--text);
}
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background-color: var(--accent);
  background-image: var(--accent-img);
}
.tab:disabled {
  color: var(--text-disabled);
}
/* Listenzeilen in Karten */
.row-list {
  display: flex;
  flex-direction: column;
}
/* Status and actions have fixed widths, so they line up from row to row. */
.row-item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 220px 240px;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--divider);
}
.row-item:first-child {
  border-top: 0;
}
.row-item .thumb {
  width: 160px;
  border-radius: var(--r-8);
}
.row-body,
.row-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.row-body {
  gap: 4px;
}
.row-status {
  align-items: center;
  text-align: center;
}
/* Slots: same-sized main actions stacked in the first column, copy and remove beside them. */
.row-item .actions {
  display: grid;
  grid-template-columns: 160px 32px 32px;
  justify-content: end;
  align-items: center;
  gap: 4px;
}
.row-item .row-action {
  grid-column: 1;
  width: 100%;
  padding: 0 12px;
}
.row-item .row-copy {
  grid-row: 1;
  grid-column: 2;
}
.row-item .row-remove {
  grid-row: 1;
  grid-column: 3;
}
.row-detail {
  grid-column: 2 / -1;
  font-size: var(--fs-12);
  color: var(--text-2);
}
.row-detail summary {
  color: var(--link);
  font-weight: var(--fw-medium);
}
.row-detail ul {
  margin-top: 6px;
  padding-left: 18px;
  list-style: disc;
}

/* 18 · Kacheln (Stil 1) -------------------------------------------------------------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 16px;
}
.tile-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.tile-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tile .actions {
  margin-top: 4px;
}
.tile-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.tile-link {
  display: block;
  border-radius: var(--r-12);
}
.tile-errors summary {
  width: fit-content;
  cursor: pointer;
}
.tile-errors ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

/* 19 · Download (Mix) --------------------------------------------------------------- */
.dl-form {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  gap: 20px;
}
.dl-form-batch {
  grid-template-columns: minmax(0, 1fr);
}
.dl-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.dl-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.dl-controls .btn-primary {
  margin-left: auto;
}
.dl-preview-empty {
  display: grid;
  place-items: center;
  color: var(--thumb-icon);
}
.draft-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-12);
  color: var(--text-2);
}
.draft-line:has(> .draft-status:empty):has(> [hidden]) {
  display: none;
}

/* 20 · Player (eigene Steuerleiste) --------------------------------------------------- */
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-12);
  background: var(--player-bg);
  color: var(--on-overlay);
}
.player video,
.player audio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--player-bg);
}
.player .thumb {
  position: absolute;
  inset: 0;
  border-radius: 0;
  aspect-ratio: auto;
}
.player-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 48px 12px 2px;
  background: var(--player-fade);
  transition: opacity 0.2s;
}
.player[data-idle="true"] .player-ui {
  opacity: 0;
}
.scrub {
  position: relative;
  height: 16px;
  margin: 0 0 2px;
  cursor: pointer;
  touch-action: none;
}
.scrub::before,
.scrub-buf,
.scrub-play {
  position: absolute;
  left: 0;
  top: 6px;
  height: 4px;
}
.scrub::before {
  content: "";
  right: 0;
  background: var(--player-track);
}
.scrub-buf {
  width: var(--buffer, 0%);
  background: var(--player-buffer);
}
.scrub-play {
  width: var(--progress, 0%);
  background-color: var(--accent);
  background-image: var(--accent-img);
}
.scrub-knob {
  position: absolute;
  left: var(--progress, 0%);
  top: 1px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--accent);
}
.ctrl-row {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
}
.ctrl-row .btn-icon {
  width: 40px;
  height: 40px;
  color: var(--on-overlay);
}
.ctrl-row .btn-icon:hover {
  background: transparent;
  opacity: 0.8;
}
.ctrl-row .btn-icon:disabled {
  opacity: 0.4;
}
.ctrl-time {
  padding: 0 8px;
  font-size: var(--fs-14);
  font-variant-numeric: tabular-nums;
}
/* The quality label is the button that opens the quality choice. */
.ctrl-row .ctrl-quality {
  height: 32px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--on-overlay);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ctrl-row .ctrl-quality:hover,
.ctrl-row .ctrl-quality[aria-expanded="true"] {
  background: var(--thumb-ink-2);
}
.ctrl-row .ctrl-quality:disabled {
  opacity: 0.4;
}
.ctrl-volume {
  width: 72px;
  accent-color: var(--on-overlay);
}
.ctrl-audio,
.ctrl-volume-panel {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ctrl-audio {
  position: relative;
}
.ctrl-volume-toggle {
  display: none;
}
.player-menu {
  top: auto;
  bottom: 52px;
  right: 12px;
  min-width: 200px;
  max-height: min(calc(100% - 64px), 22rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* A choice list: a plain check marks the current entry, no boxes. */
.player-menu .menu-check {
  width: 18px;
  height: 18px;
  border-radius: 0;
  box-shadow: none;
}
.player-menu .menu-item[aria-checked="true"] {
  font-weight: var(--fw-bold);
}
.player-menu .menu-item[aria-checked="true"] .menu-check {
  background: none;
  color: var(--text);
}
.menu-hint {
  padding: 0 12px 6px;
  color: var(--text-2);
  font-size: var(--fs-12);
}
.player-start {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: 24px;
  background: var(--overlay);
  text-align: center;
}
.player-start .btn-primary {
  background: var(--on-overlay);
  color: var(--player-bg);
}
.player-start p {
  max-width: 420px;
  color: var(--on-overlay);
  font-size: var(--fs-14);
}
.player-tag {
  z-index: 2;
  left: 12px;
  top: 12px;
  transition: opacity 0.2s;
}
.player[data-idle="true"] .player-tag {
  opacity: 0;
}
.player-audio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--on-overlay);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  pointer-events: none;
}
.player-big {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--overlay);
  color: var(--on-overlay);
}
.player-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--thumb-icon);
}
.player-empty strong {
  color: var(--on-overlay);
  font-size: var(--fs-18);
}
.airplay-button[hidden] {
  display: none;
}
.airplay-button[aria-pressed="true"] {
  color: var(--accent);
}
.cast-control {
  position: relative;
  display: inline-flex;
}
.cast-button[hidden],
.cast-menu[hidden],
.cast-menu-item[hidden],
.cast-status[hidden] {
  display: none;
}
.cast-button[aria-pressed="true"] {
  color: var(--accent);
}
.cast-button.is-loading svg {
  animation: cast-pulse 1s ease-in-out infinite alternate;
}
.cast-menu {
  position: fixed;
  z-index: 1000;
  width: max-content;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--divider);
  border-radius: var(--r-8);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-menu);
  color: var(--text);
}
.cast-menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-4);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.cast-menu-item:hover,
.cast-menu-item:focus-visible {
  background: var(--chip-hover);
}
.cast-status {
  display: block;
  max-width: 300px;
  padding: 8px 10px;
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: 1.4;
}
.cast-status[data-kind="error"] {
  color: var(--error);
}
@keyframes cast-pulse {
  to {
    opacity: 0.45;
  }
}
.player:fullscreen {
  border-radius: 0;
}

/* Bilder im Raum: Story-Balken, Tippzonen links/Mitte/rechts, eigene Steuerleiste. */
.room-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--player-bg);
}
.room-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.player.is-slide > .player-ui,
.player.is-slide > .player-big {
  display: none;
}
.slide-zones {
  position: absolute;
  inset: 0 0 52px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.slide-zone {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.slide-paused {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--overlay);
  color: var(--on-overlay);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  pointer-events: none;
}
.slide-controls {
  padding-top: 32px;
}
.player[data-slide-idle="true"] .slide-controls {
  opacity: 0;
}
.slide-step svg {
  transform: scaleX(-1);
}
.story-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  z-index: 3;
  display: flex;
  gap: 4px;
  pointer-events: none;
}
.story-segment {
  flex: 1 1 0;
  height: 3px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--player-track);
}
.story-segment i {
  display: block;
  height: 100%;
  background: var(--on-overlay);
  transform: scaleX(0);
  transform-origin: left;
}
.story-segment[data-state="done"] i {
  transform: scaleX(1);
}
.player.has-story .player-tag {
  top: 22px;
}

/* 20a · Umgebungslicht (ambient.js) ------------------------------------------------ */
/* Layers: page background, then the light, then everything that matters (player, cards,
   navigation, header, side columns), which therefore never take on the light. The layer has
   exactly the frame's box; its blur lets the light fall out of every edge and corner evenly.
   Blur is drawn outside the box without growing the page, so nothing has to be cut off. */
/* A modal dialog already is a positioned layer of its own and keeps its fixed position. */
:where([data-ambient-host]:not(dialog)) {
  position: relative;
  isolation: isolate;
}
.ambient {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.ambient[data-active] {
  opacity: calc(var(--ambient-opacity) * var(--ambient-strength, 1));
}
.ambient > canvas,
.ambient > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slightly larger than the frame, so the light starts at full strength right at its edge. */
  transform: scale(var(--ambient-scale, 1.1));
  filter: blur(var(--ambient-blur)) saturate(var(--ambient-saturate));
}
/* Full-screen viewer: always dark; the light stands beside the column at full height. */
.reels {
  --ambient-opacity: var(--ambient-dark-opacity);
  --ambient-blur: calc(var(--ambient-dark-blur) * 1.5);
  --ambient-saturate: var(--ambient-dark-saturate);
  --ambient-strength: 1;
}
:root[data-ambient="off"] .ambient {
  display: none;
}
/* Phones: the light shows as a weaker tint below the player and behind the title. */
@media (max-width: 760px) {
  .ambient {
    --ambient-strength: 0.6;
  }
  :root:not([data-ambient="off"]) .watch-main {
    background: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ambient {
    transition: none;
  }
}

/* 21 · Stream (Mix) und Raum (Stil 1) ------------------------------------------------ */
.watch-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.watch-main {
  flex: 1 1 auto;
  min-width: 0;
}
.watch-main > .player {
  border-radius: 0;
}
.watch-side {
  width: 380px;
  flex: none;
}
.video-title {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: 28px;
  overflow-wrap: anywhere;
}
.owner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.owner-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.owner .owner-actions {
  margin-left: auto;
}
.owner > .grow {
  flex: 1 1 180px;
  min-width: 0;
}
.owner > .grow > p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: var(--r-12);
  background: var(--chip);
  font-size: var(--fs-14);
}
.side-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
}
.side-item {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 4px;
  border: 0;
  border-radius: var(--r-12);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.side-item:hover,
.side-item[aria-current="true"] {
  background: var(--chip);
}
.side-item .thumb {
  width: 144px;
  border-radius: var(--r-8);
}
.side-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.side-title,
.title-action {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}
.title-action:hover {
  text-decoration: underline;
}
.side-body .actions {
  margin-top: 2px;
}
.room-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 24px 48px 8px;
}
.room-primary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--chip);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}
.role-pill .ico {
  color: var(--accent);
}

/* 22 · Warteschlange (Playlist-Box) ------------------------------------------------- */
.q-box {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--r-12);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--divider);
  overflow: hidden;
}
.room-layout .q-box {
  width: 402px;
  flex: none;
}
.q-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
  background: var(--chip);
}
.q-head h2 {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: 24px;
}
.q-head .end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.q-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  max-height: 560px;
  overflow-y: auto;
}
.q-row {
  display: grid;
  grid-template-columns: 24px 24px 160px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--r-12);
}
.q-row:hover,
.q-row[aria-current="true"] {
  background: var(--chip);
}
.q-row .thumb {
  width: 160px;
  border-radius: var(--r-8);
}
.q-row.sm {
  grid-template-columns: 20px 20px 112px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 6px 8px;
}
.q-row.sm .thumb {
  width: 112px;
}
/* "Weiterschauen" and "Zuletzt" beside the player: no position and no handle. */
.q-row.sm.continue-row,
.q-row.sm.history-row {
  grid-template-columns: 112px minmax(0, 1fr) auto;
}
.q-row[data-dragging="true"] {
  opacity: 0.5;
}
.q-row[data-drop="true"] {
  box-shadow: inset 0 2px 0 var(--accent);
}
.q-index {
  font-size: var(--fs-12);
  color: var(--text-2);
  text-align: center;
}
.q-handle {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  cursor: grab;
}
.q-handle .ico {
  stroke-width: 3;
}
/* Collection rows without moving (newest first, members) drop the handle's column. */
.pl-list .q-row:has(> .q-handle[hidden]) {
  grid-template-columns: 24px 160px minmax(0, 1fr) auto;
}
.q-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--divider);
}
.q-foot .linkfield {
  flex: 1 1 auto;
}
.q-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 14px;
}
.q-empty {
  padding: 16px;
  color: var(--text-2);
}

/* 23 · Sammlung als Profil (eigene und geteilte Sammlung) --------------------------- */
.profile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 935px;
  margin: 0 auto;
  padding-top: 16px;
}
.profile-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.profile-top {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.profile-cover {
  display: grid;
  flex: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 2px;
  width: 112px;
  height: 112px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--divider);
}
.profile-cover[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}
.profile-cover[data-count="2"] > .thumb,
.profile-cover[data-count="3"] > .thumb:first-child {
  grid-row: span 2;
}
.profile-cover > .thumb,
.profile-cover > .thumb[data-orientation] {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.profile-cover .thumb-time,
.profile-cover .thumb-tag {
  display: none;
}
.profile-stats {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-around;
  gap: 8px;
  min-width: 0;
  text-align: center;
}
.profile-stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.profile-stat strong {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: 24px;
  white-space: nowrap;
}
.profile-stat span {
  color: var(--text-2);
  font-size: var(--fs-12);
}
.profile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.profile-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
}
.profile-actions > .btn {
  min-width: 0;
  border-radius: var(--r-8);
}
.profile-actions > .menu-anchor > .btn-icon {
  border-radius: var(--r-8);
  background: var(--chip);
}
.menu-item.danger {
  color: var(--error);
}
.channel-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}
.channel-row::-webkit-scrollbar {
  display: none;
}
.channel-chip {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
}
button.channel-chip {
  cursor: pointer;
}
.channel-chip[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}
/* The ring takes the provider colour or gradient; the inner disc stays a calm surface. */
.channel-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 3px solid transparent;
  border-radius: var(--r-16);
  background-color: var(--pc);
  background-image: linear-gradient(var(--chip), var(--chip)), var(--pf, none);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
}
.channel-chip[data-avatar="round"] .channel-avatar {
  border-radius: 50%;
}
button.channel-chip:hover .channel-avatar {
  background-image: linear-gradient(var(--chip-hover), var(--chip-hover)), var(--pf, none);
}
.channel-name {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--fs-12);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-tabs {
  display: flex;
  border-bottom: 1px solid var(--divider);
}
.profile-tab {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.profile-tab:hover {
  color: var(--text);
}
.profile-tab[aria-selected="true"] {
  border-bottom-color: var(--text);
  color: var(--text);
}
/* Reihenfolge der Einträge: Neueste zuerst oder die eigene, rechts unter den Reitern. */
.profile-order {
  display: flex;
  justify-content: flex-end;
  padding-block: 8px;
}
.profile-order[hidden] {
  display: none;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}
.profile-grid > li {
  min-width: 0;
}
.grid-tile,
.profile-grid .grid-tile[data-orientation] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
}
.grid-tile > img,
.grid-tile > .thumb-video {
  transition: transform 0.2s;
}
.grid-tile:hover > img,
.grid-tile:hover > .thumb-video {
  transform: scale(1.03);
}
.grid-tile:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}
.grid-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 2px var(--on-overlay);
}
.grid-mark {
  position: absolute;
  top: 6px;
  left: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--overlay);
  color: var(--on-overlay);
}
.grid-tile .thumb-tag {
  top: auto;
  bottom: 6px;
}
.grid-state {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px 8px;
  background: var(--overlay);
  color: var(--on-overlay);
  font-size: var(--fs-12);
  text-align: center;
}
.grid-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 8px;
  border: 0;
  background: var(--chip);
  color: var(--text);
  font: inherit;
  font-weight: var(--fw-medium);
  text-align: center;
  cursor: pointer;
}
.grid-add:hover {
  background: var(--chip-hover);
}
.grid-empty {
  grid-column: 1 / -1;
}
.pl-title {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: 28px;
  overflow-wrap: anywhere;
}
.profile-panel {
  min-width: 0;
}
.profile > [role="status"]:empty {
  display: none;
}
.shared-overview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.share-collab {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}
.member-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
}
.member-name {
  min-width: 0;
  overflow: hidden;
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Meine geteilten Links: one row per public link, title left, share and end right. */
.share-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.share-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 4px 0;
  border-top: 1px solid var(--divider);
}
.share-link-row:first-child {
  border-top: 0;
}
.share-link-row .row-body {
  flex: 1 1 auto;
  min-width: 0;
}
.share-link-row .row-body a {
  color: inherit;
  text-decoration: none;
}
.share-link-row .row-body a:hover,
.share-link-row .row-body a:focus-visible {
  text-decoration: underline;
}
.share-link-row .actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}
.share-links-empty {
  padding: 8px 0;
}
/* Window with the link when copying and sharing were refused; placed next to its button. */
.popover.share-link-floating {
  position: fixed;
  top: var(--share-y, 12px);
  right: auto;
  bottom: auto;
  left: var(--share-x, 12px);
  z-index: 60;
  width: 300px;
  max-width: calc(100vw - 24px);
}
.pl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-row .linkfield,
.form-row .grow {
  flex: 1 1 auto;
}
.form-row.wrap {
  flex-wrap: wrap;
}
.select.grow select {
  width: 100%;
  min-width: 0;
}

/* 24 · Räume-Übersicht (Stil 1) ------------------------------------------------------ */
.composer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: var(--r-16);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.composer-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px 340px;
  gap: 24px;
}
.composer-vr {
  background: var(--divider);
}
.composer-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.composer-block > .seg,
.composer-block > .btn {
  align-self: flex-start;
}
.composer-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
}

/* 25 · Dialoge ------------------------------------------------------------------- */
.dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--r-12);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-dialog);
}
.dialog.wide {
  width: min(760px, calc(100vw - 32px));
}
.dialog::backdrop {
  background: var(--scrim);
}

/* Bild-im-Bild-Ebene: ein anderer Bereich über der Seite, deren Video im PiP weiterläuft. */
html.pip-layer-open,
html.pip-layer-open body {
  overflow: hidden;
}
.pip-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--text);
}
.pip-layer[open] {
  display: flex;
  flex-direction: column;
}
.pip-layer::backdrop {
  background: var(--bg);
}
.pip-layer-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: max(4px, env(safe-area-inset-top)) 16px 4px;
  border-bottom: 1px solid var(--divider);
  background: var(--bg-elevated);
}
.pip-layer-status {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--fs-14);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pip-layer-status strong {
  color: var(--text);
  font-weight: var(--fw-medium);
}
.pip-layer-frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--bg);
}
.dialog-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 0;
}
.dialog-title {
  flex: 1 1 auto;
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
}
.dialog-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px;
}
.dialog-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 24px 20px;
}
.dialog-foot .hint {
  margin-right: auto;
  font-size: var(--fs-12);
  color: var(--text-2);
}
.dialog-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dialog-foot.flush {
  padding: 4px 0 0;
}
.dialog-body > .seg,
.dialog-form > .select {
  align-self: flex-start;
}
.dialog-foot .draft-line {
  margin-right: auto;
}
.item-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}

/* 26 · Suche (Stil 1) ---------------------------------------------------------------- */
.search-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.search-hint {
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: 1.6;
}
#search-type-hint {
  margin: 0 0 24px;
}
.search-collection-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid var(--divider);
  border-radius: var(--r-12);
  scroll-margin-top: 80px;
}
.search-collection-head h2 {
  font-size: var(--fs-20);
  overflow-wrap: anywhere;
}
.search-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0;
}
.collection-result {
  align-items: center;
  padding: 16px;
  border: 1px solid var(--divider);
  border-radius: var(--r-12);
}
.result.collection-result .collection-thumb {
  width: 96px;
  height: 96px;
  aspect-ratio: 1;
  border-radius: var(--r-12);
}
.collection-result[data-avatar="round"] .collection-thumb {
  border-radius: 50%;
}
.collection-monogram {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: 28px;
  font-weight: var(--fw-medium);
  color: var(--on-overlay);
}
.results {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1096px;
}
.sources {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-12);
  color: var(--text-2);
}
.sources .warn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--warning-soft);
  color: var(--warning);
  font-weight: var(--fw-medium);
}
.result {
  display: flex;
  gap: 16px;
}
.result .thumb {
  width: 360px;
}
.result-title {
  font-size: var(--fs-18);
  font-weight: var(--fw-regular);
  line-height: 26px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.result-meta {
  font-size: var(--fs-12);
  line-height: 18px;
  color: var(--text-2);
}
.result-owner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  font-size: var(--fs-12);
  color: var(--text-2);
}
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.search-pagination {
  display: flex;
  justify-content: center;
  max-width: 1096px;
  padding: 24px 0;
}
/* Sichtbares Listenende: nach der letzten Seite kommt nichts mehr nach. */
.list-end {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-14);
  text-align: center;
}

/* 26a · Stream: Inhalte aus der Kopfsuche, Auswahl und Galerie ------------------ */
#browse-status:not([data-kind]) {
  padding: 0;
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-12);
}
#browse-status .notice-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
#browse-branch-statuses {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
#browse-branch-statuses > .notice {
  margin: 0;
}
#browse-provider-filter {
  flex-wrap: wrap;
  overflow: visible;
  min-width: 0;
  padding-block: 4px;
}
.browse-toolbar {
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-12);
  background: var(--chip);
}
.browse-toolbar .chip-count {
  min-width: max-content;
}
.browse-results .browse-result {
  min-width: 0;
  padding: 12px;
  border-radius: var(--r-12);
}
.browse-results .browse-result[data-selected="true"] {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.browse-results .browse-result[data-locked="true"] {
  opacity: 0.7;
}
.browse-results .browse-result > .grow {
  min-width: 0;
}
.browse-results .browse-thumb {
  display: grid;
  place-items: center;
  color: var(--on-overlay);
  cursor: pointer;
}
.browse-results .browse-thumb-placeholder {
  padding: 16px;
  text-align: center;
}
.browse-results .browse-item-title,
.browse-results .browse-item-meta {
  margin: 0;
}
.browse-results .browse-check {
  align-items: center;
  min-height: var(--h-control);
  cursor: pointer;
}
.browse-select {
  position: relative;
  display: inline-flex;
  gap: 8px;
  color: var(--text-2);
  font-size: var(--fs-12);
}
.browse-select-mark {
  display: grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--chip);
}
.browse-select-mark::after {
  content: "";
  width: 11px;
  height: 6px;
  margin-top: -3px;
  border-bottom: 2px solid var(--text-2);
  border-left: 2px solid var(--text-2);
  transform: rotate(-45deg);
}
.browse-select:hover .browse-select-mark {
  background: var(--chip-hover);
}
.browse-select input:checked + .browse-select-mark {
  background: var(--accent);
}
.browse-select input:checked + .browse-select-mark::after {
  border-color: var(--accent-on);
}
.browse-select input:focus-visible + .browse-select-mark {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.browse-select input:disabled + .browse-select-mark {
  opacity: 0.5;
}
.browse-select:has(input:disabled) {
  cursor: default;
}
.browse-results .collection-result[data-avatar="round"] .collection-thumb {
  border-radius: 50%;
}
.browse-results.media-grid .browse-result {
  padding: 8px;
}
.browse-results.media-grid .browse-item-actions {
  flex-wrap: wrap;
  align-items: center;
}
.browse-results.media-grid .browse-item-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: 22px;
}
.browse-channel-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.browse-channel-head[hidden] {
  display: none;
}
.browse-channel-avatar {
  position: relative;
  display: grid;
  flex: none;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--thumb-8);
}
.browse-channel-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.browse-channel-text {
  min-width: 0;
}
.browse-channel-name {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
}
.browse-channel-text .field-help {
  margin: 4px 0 0;
}
.browse-more {
  padding-top: 8px;
  padding-bottom: 8px;
  overflow-anchor: none;
}
.browse-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 12px;
}
.browse-gallery img,
.browse-gallery video {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--r-8);
  background: var(--player-bg);
}
/* 27 · Gastseiten: Raum als Gast, geteilte Sammlung, Anmeldung ---------------------- */
.guest-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--h-header);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--divider);
}
.guest-label {
  font-size: var(--fs-14);
  color: var(--text-2);
}
.guest-header .end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.guest-layout .room-layout {
  max-width: 1760px;
  margin: 0 auto;
  padding: 20px 24px 48px;
}
.guest-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}
.share-shell {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 24px 48px;
}
.share-header {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--divider);
}
.share-shell > .profile-head,
.share-shell > .profile-tabs,
.share-shell > .profile-order,
.share-shell > .profile-panel,
.share-shell > .empty-state {
  width: 100%;
  max-width: 935px;
  margin-inline: auto;
}
.share-eyebrow {
  color: var(--c-mediagrab);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.share-title {
  font-size: var(--fs-24);
  line-height: 32px;
}
.share-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.platform-heading {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  align-items: start;
  gap: 24px 20px;
}
.media-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--divider);
  border-radius: var(--r-16);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.media-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  min-width: 0;
}
.media-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.media-platform {
  margin-left: auto;
  color: var(--text-2);
  font-size: var(--fs-10);
}
.media-stage {
  background: var(--bg-sunken);
}
.media-gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.media-gallery-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  border-top: 1px solid var(--divider);
  color: var(--text-2);
  font-size: var(--fs-12);
}
.project-prepare-select {
  min-width: 0;
  max-width: 100%;
  flex: 1;
}
.media-entry {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.media-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  background: var(--player-bg);
}
.media-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}
audio.media-content {
  top: auto;
  height: 54px;
}
.media-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-wrap: anywhere;
}
.media-uploader,
.media-alt-status {
  font-size: var(--fs-12);
  color: var(--text-2);
}
.media-caption {
  white-space: pre-line;
}
.media-card[data-shape="portrait"] .media-frame,
.media-card .media-frame[data-orientation="portrait"] {
  aspect-ratio: 9 / 16;
}
.media-card .media-frame[data-orientation="landscape"] {
  aspect-ratio: 16 / 9;
}
.media-card .media-frame[data-orientation="square"] {
  aspect-ratio: 1;
}
.media-frame .player-ui {
  padding-right: 8px;
  padding-left: 8px;
}
.media-frame .ctrl-volume {
  width: 48px;
}
.media-frame .ctrl-time {
  padding: 0 4px;
  font-size: var(--fs-12);
}
.media-frame .ctrl-row .btn-icon {
  width: 32px;
  height: 36px;
}
.media-recovery,
.media-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 200px;
  padding: 24px;
  color: var(--text-2);
  text-align: center;
}
.media-card[data-shape="portrait"] .media-gallery:empty + .media-recovery {
  aspect-ratio: 9 / 16;
}
.media-recovery-mark {
  font-size: 40px;
  color: var(--accent);
}
.media-recovery[data-loading="true"] .media-recovery-mark {
  animation: share-loading 1.5s linear infinite;
}
@keyframes share-loading {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .media-recovery[data-loading="true"] .media-recovery-mark {
    animation: none;
  }
}
.media-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}
.media-card-header .media-uploader {
  color: var(--text);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-description summary {
  cursor: pointer;
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}
.media-description[open] summary {
  margin-bottom: 12px;
}
.media-source .btn {
  width: 100%;
  background: var(--bg-sunken);
  border: 1px solid var(--divider);
}
/* A single shared entry: one card, centred, at most as wide as a phone column on large screens. */
.share-entry {
  align-items: center;
  gap: 16px;
}
.share-entry-card {
  display: block;
  width: 100%;
  max-width: 560px;
}
.share-entry-open {
  display: flex;
  justify-content: center;
}
.dialog-foot .foot-start {
  margin-right: auto;
}
.q-row .actions .btn[data-shared="true"] {
  color: var(--c-mediagrab);
}
.share-error-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 560px;
  margin: 48px auto;
  padding: 32px;
  border-radius: var(--r-16);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.share-error-card h1 {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
}

/* 28 · Schmale Fenster ------------------------------------------------------------- */
@media (max-width: 1320px) {
  .tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .watch-side {
    width: 340px;
  }
  .room-layout .q-box {
    width: 360px;
  }
}
@media (max-width: 1200px) {
  body.app-layout {
    grid-template-columns: var(--w-mini) minmax(0, 1fr);
  }
  .app-nav {
    width: var(--w-mini);
    padding: 4px;
  }
  .nav-section {
    padding: 0;
    border: 0;
  }
  .nav-section + .nav-section,
  .nav-title,
  .nav-count,
  .nav-foot {
    display: none;
  }
  .nav-item {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 74px;
    padding: 0;
    font-size: var(--fs-10);
    text-align: center;
  }
  .nav-item[aria-current="page"]::before {
    display: none;
  }
  .nav-label {
    flex: none;
  }
  .header-start,
  .header-end {
    width: auto;
  }
  .watch-layout,
  .room-layout {
    flex-direction: column;
    align-items: stretch;
  }
  .watch-side,
  .room-layout .q-box {
    width: auto;
  }
  .composer-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .composer-vr {
    height: 1px;
  }
}
@media (max-width: 960px) {
  .tile-grid,
  .tile-grid.cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tile-grid.cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .row-item {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .row-item .thumb {
    width: 120px;
  }
  .row-status,
  .row-item .actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
  /* Below the text, the status reads from the left like the rest of the row. */
  .row-status {
    align-items: flex-start;
    text-align: left;
  }
  .dl-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .dl-form > .thumb {
    max-width: 320px;
  }
  .result .thumb {
    width: 240px;
  }
}
@media (max-width: 760px) {
  :root {
    --h-header: 56px;
  }
  .app-header {
    gap: 4px;
    padding: 0 4px 0 12px;
  }
  .header-search {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .global-search {
    display: none;
  }
  .search-open {
    display: inline-flex;
  }
  body.search-expanded .search-close {
    display: inline-flex;
  }
  body.search-expanded .brand,
  body.search-expanded .header-end,
  body.search-expanded .search-open {
    display: none;
  }
  body.search-expanded .header-search {
    flex: 1 1 auto;
    margin-left: 0;
  }
  body.search-expanded .global-search {
    display: flex;
  }
  .nav-toggle,
  .header-end .new-menu {
    display: none;
  }
  body.app-layout {
    display: block;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  /* Whatever focus or a script scrolls into view stops above the fixed bottom navigation. */
  html:has(body.app-layout) {
    scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom) + 16px);
  }
  .app-nav,
  body.nav-compact .app-nav {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: 100%;
    height: calc(64px + env(safe-area-inset-bottom));
    display: block;
    padding: 0 0 env(safe-area-inset-bottom);
    overflow: hidden;
    border-top: 1px solid var(--divider);
  }
  .app-nav .nav-section:first-child {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    height: 64px;
    padding: 0;
    border: 0;
  }
  .nav-item,
  body.nav-compact .nav-item {
    min-height: 64px;
    border-radius: 0;
  }
  .nav-item[aria-current="page"] {
    background: transparent;
  }
  .page {
    padding: 8px 12px 32px;
  }
  .workspace {
    padding: 16px 12px 32px;
    border-radius: 0;
  }
  .browse-toolbar .btn {
    width: 100%;
  }
  #browse-branch-statuses {
    grid-template-columns: minmax(0, 1fr);
  }
  #browse-branch-statuses .btn,
  .browse-actions .btn,
  .browse-action-status .btn {
    width: 100%;
    height: auto;
    min-height: 44px;
    padding-block: 8px;
    white-space: normal;
    text-align: center;
  }
  .browse-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .browse-results .browse-item-actions {
    align-items: center;
    flex-direction: row;
  }
  .browse-results .browse-item-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .browse-results.media-grid .browse-item-actions .btn {
    flex: 0 0 auto;
  }
  /* On a phone both queue buttons show only their icons, so "Ansehen", the queue buttons and
     the select mark share one line instead of pushing the mark onto a line of its own. */
  .browse-results .browse-item-actions .browse-queue,
  .browse-results .browse-item-actions .browse-queue-next {
    flex: none;
    width: 32px;
    padding: 0;
    border-radius: 50%;
  }
  .browse-results .browse-item-actions .browse-queue-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .browse-results .browse-item-actions .browse-select {
    flex: none;
  }
  .chips[data-provider-chips] .chip,
  #browse-provider-filter .chip {
    min-height: 44px;
  }
  .collection-overview > .page-head .end {
    flex-basis: 100%;
    margin-left: 0;
  }
  .collection-overview > .page-head .btn-primary {
    flex: 1;
  }
  .composer-block > .seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    height: auto;
    border-radius: var(--r-12);
  }
  .composer-block > .seg .seg-opt span {
    flex-direction: column;
    width: 100%;
    padding: 8px 4px;
    border-radius: var(--r-8);
    white-space: normal;
  }
  .tile-grid,
  .tile-grid.cols-2,
  .tile-grid.cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .card-head,
  .card-body {
    padding-left: 16px;
    padding-right: 16px;
  }
  .tabs {
    padding: 0 16px;
    gap: 20px;
  }
  .row-item {
    grid-template-columns: 88px minmax(0, 1fr);
    padding: 12px 16px;
    gap: 12px;
  }
  .row-item .thumb {
    width: 88px;
  }
  .row-item .actions,
  .row-detail {
    grid-column: 1 / -1;
  }
  .menu-item {
    min-height: 44px;
    height: auto;
    white-space: normal;
  }
  .menu,
  .popover {
    min-width: min(240px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
  .dl-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dl-controls .btn-primary,
  .dl-controls .seg {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
  }
  .dl-controls .select,
  .dl-controls .toggle {
    min-width: 0;
    max-width: 100%;
  }
  .dl-controls .select select {
    width: 100%;
    min-width: 0;
    padding-left: 12px;
  }
  .select select,
  .picker-input {
    font-size: 16px;
  }
  .dl-controls .toggle {
    height: auto;
    min-height: 44px;
    padding-block: 8px;
    padding-right: 8px;
    gap: 6px;
    font-size: var(--fs-12);
    white-space: normal;
  }
  .dl-controls > .note {
    grid-column: 1 / -1;
  }
  .dl-controls .seg .seg-opt {
    flex: 1 1 0;
  }
  .dl-controls .seg-opt span {
    width: 100%;
    justify-content: center;
  }
  .field.is-detected > input {
    padding-right: 12px;
  }
  .field > .detect {
    position: static;
    align-self: flex-start;
    margin-top: 6px;
  }
  .result {
    flex-direction: column;
  }
  .result.collection-result {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }
  .result.collection-result .collection-thumb {
    width: 56px;
    height: 56px;
  }
  .result .thumb {
    width: 100%;
  }
  .room-layout {
    padding: 0 0 32px;
  }
  .room-layout .player,
  .watch-main > .player {
    border-radius: 0;
    width: 100%;
    min-width: 0;
  }
  .watch-main > .player:has(.player-empty:not([hidden])) {
    width: 100%;
    aspect-ratio: auto;
    min-height: 280px;
  }
  .room-primary > :not(.player) {
    margin: 0 12px;
  }
  .ctrl-row .ctrl-quality {
    padding: 0 6px;
  }
  .ctrl-volume-toggle {
    display: inline-flex;
  }
  .ctrl-volume-panel {
    display: none;
    position: absolute;
    bottom: 48px;
    left: 0;
    width: 184px;
    padding: 6px 8px;
    border-radius: var(--r-8);
    background: var(--player-bg);
    box-shadow: var(--shadow-menu);
  }
  .ctrl-audio[data-volume-open="true"] .ctrl-volume-panel {
    display: flex;
  }
  .ctrl-volume-panel .ctrl-volume {
    flex: 1;
    min-width: 0;
    height: 40px;
    order: -1;
  }
  .q-row {
    grid-template-columns: 20px 20px 112px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .q-row .thumb {
    width: 112px;
  }
  .pl-list .q-row:has(> .q-handle[hidden]) {
    grid-template-columns: 20px 112px minmax(0, 1fr) auto;
  }
  .dialog {
    max-height: calc(100dvh - 24px);
  }
  .dialog-head,
  .dialog-body,
  .dialog-foot {
    padding-left: 16px;
    padding-right: 16px;
  }
  .form-row {
    flex-wrap: wrap;
  }
  .form-row > .field,
  .form-row > .select {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 100%;
  }
  .guest-main,
  .share-shell {
    padding: 16px 12px;
  }
  .guest-header {
    height: 56px;
    padding: 0 12px;
  }
}
@media (max-width: 360px) {
  .q-row,
  .q-row.sm,
  .pl-list .q-row:has(> .q-handle[hidden]) {
    grid-template-columns: 20px 88px minmax(0, 1fr) auto;
  }
  .q-row .q-handle {
    display: none;
  }
  .q-row .thumb,
  .q-row.sm .thumb {
    width: 88px;
  }
}

/* 29 · Zugänglichkeit -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
@media (forced-colors: active) {
  .btn,
  .chip,
  .seg,
  .linkfield,
  .card,
  .q-box {
    border: 1px solid CanvasText;
  }
  .nav-item[aria-current="page"],
  .chip[aria-pressed="true"],
  .tab[aria-selected="true"] {
    outline: 2px solid Highlight;
  }
}
@media print {
  .app-header,
  .app-nav {
    display: none;
  }
}

#external-playlist-load {
  margin: 0 12px 16px 0;
}
.external-playlist {
  margin: 0 0 20px;
}
.external-playlist > .actions {
  flex-wrap: wrap;
  margin: 12px 0;
}
.external-playlist-items {
  max-height: 320px;
  overflow-y: auto;
}
.external-playlist-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  cursor: pointer;
}
.external-playlist-item > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.external-playlist-item > span > span {
  display: block;
}
.external-playlist-item:has([data-unavailable="true"]) {
  opacity: 0.55;
  cursor: default;
}
/* Download · Mehrere Links ------------------------------------------------------- */
/* Switch "Ein Link | Mehrere Links", a glowing link field and one row per link. */
.batch {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.batch-field {
  --tone: var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 56px;
  padding: 0 8px 0 20px;
  border: 2px solid var(--tone);
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  box-shadow: 0 0 20px -4px color-mix(in srgb, var(--tone) var(--glow-near), transparent);
  transition: box-shadow 300ms var(--ease-soft);
}
.batch-field:focus-within {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--tone) 22%, transparent),
    0 0 28px 0 color-mix(in srgb, var(--tone) var(--glow-near), transparent);
}
.batch-field-icon {
  flex: none;
  color: var(--tone);
}
.batch-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-16);
  text-overflow: ellipsis;
}
.batch-input:focus-visible {
  outline: none;
}
.batch-input::placeholder {
  color: var(--text-2);
}
.batch-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--divider);
  border-radius: var(--r-12);
  overflow: hidden;
}
.batch-list:empty {
  display: none;
}
.batch-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 8px 10px 12px;
}
.batch-row + .batch-row {
  border-top: 1px solid var(--divider);
}
.batch-badge {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-8);
  background-color: var(--pc, var(--chip));
  background-image: var(--pf, none);
  color: var(--pc-on, var(--text));
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
}
.batch-row[data-status="unsupported"] .batch-badge {
  background: var(--error-soft);
  color: var(--error);
}
.batch-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.batch-title,
.batch-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batch-title {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}
.batch-link {
  font-size: var(--fs-12);
  color: var(--text-2);
}
.batch-row:not([data-status="ready"]) .batch-title {
  color: var(--text-2);
}
.batch-state {
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.batch-state[data-status="ready"] {
  background: var(--success-soft);
  color: var(--success);
}
.batch-state[data-status="duplicate"],
.batch-state[data-status="over"] {
  background: var(--warning-soft);
  color: var(--warning);
}
.batch-state[data-status="unsupported"] {
  background: var(--error-soft);
  color: var(--error);
  cursor: help;
}
.batch-remove {
  color: var(--text-2);
}
.batch-remove:hover {
  color: var(--text);
}
.batch-remove:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.batch-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}
.batch-summary {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--text-2);
}
/* Narrow screens: the state moves below the link, the remove button stays at the end. */
@media (max-width: 560px) {
  .batch-field {
    padding-left: 16px;
  }
  .batch-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "badge text remove"
      "badge state remove";
    row-gap: 4px;
  }
  .batch-badge {
    grid-area: badge;
  }
  .batch-text {
    grid-area: text;
  }
  .batch-state {
    grid-area: state;
    justify-self: start;
  }
  .batch-remove {
    grid-area: remove;
  }
}

/* 30 · Hochkant-Medien (Shorts, TikTok, Reels) ------------------------------------- */
/* Upright media keep their 9:16 frame: narrow tiles and a player without wide bars. */
.thumb[data-orientation="portrait"] {
  aspect-ratio: 9 / 16;
}
.result .thumb[data-orientation="portrait"] {
  width: auto;
  height: calc(360px * 9 / 16);
}
/* In list rows an upright tile keeps the row height and sits centred in its column. */
.q-row .thumb[data-orientation="portrait"] {
  width: auto;
  height: calc(160px * 9 / 16);
  justify-self: center;
}
.q-row.sm .thumb[data-orientation="portrait"] {
  height: calc(112px * 9 / 16);
}
.player[data-orientation="portrait"] {
  aspect-ratio: 9 / 16;
  width: min(100%, calc(78vh * 9 / 16));
  margin-inline: auto;
}
@media (max-width: 960px) {
  .result .thumb[data-orientation="portrait"] {
    height: calc(240px * 9 / 16);
  }
}
@media (max-width: 760px) {
  .result .thumb[data-orientation="portrait"] {
    width: min(100%, 220px);
    height: auto;
  }
}

/* 31 · Vollbild der Sammlung (reels.js) ------------------------------------------- */
/* Always dark: one upright slide per entry, swiped vertically; caption and rail overlay it. */
.reels {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--reels-bg);
  color: var(--reels-text);
}
.reels[open] {
  display: flex;
  justify-content: center;
}
.reels::backdrop {
  background: var(--reels-bg);
}
.reels-column {
  position: relative;
  width: 100%;
  height: 100%;
}
.reels-track {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.reels-track::-webkit-scrollbar {
  display: none;
}
.reels-track:focus {
  outline: none;
}
.reels-slide {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.reels-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--reels-shade);
  pointer-events: none;
}
.reels-backdrop {
  position: absolute;
  inset: -40px;
}
.reels-backdrop > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(32px) brightness(0.5);
}
.reels-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.reels-poster > .thumb,
.reels-poster > .thumb[data-orientation] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.reels-poster > .thumb:has(> img) {
  background: transparent;
}
.reels-poster > .thumb:has(> img) > .thumb-art,
.reels-poster .thumb-time,
.reels-poster .thumb-tag {
  display: none;
}
.reels-poster > .thumb > img,
.reels-poster > .thumb > .thumb-video {
  object-fit: contain;
}
.reels-poster-mark {
  max-width: 80%;
  color: var(--reels-text-2);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  text-align: center;
  overflow-wrap: anywhere;
}
.reels-slide:has(> .reels-slot:not(:empty)) > .reels-poster {
  visibility: hidden;
}
.reels-slot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  max-height: 100%;
}
.reels-slot:empty {
  display: none;
}
/* Media inside a slide: the owner's viewer card or the shared page's card stage. */
.reels-slot .viewer-card,
.reels-slot .media-stage {
  width: 100%;
  max-height: 100dvh;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.reels-slot .media-frame,
.reels-slot .player[data-orientation="portrait"] {
  width: 100%;
  max-height: 100dvh;
  margin: 0;
  background: transparent;
}
.reels-slot .media-frame[data-orientation="portrait"] {
  aspect-ratio: 9 / 16;
}
.reels-slot .media-frame[data-orientation="square"] {
  aspect-ratio: 1;
}
/* Upright videos fill the slide; their controls stay clear of the caption. */
.reels-slot .media-frame[data-orientation="portrait"] .player-ui {
  padding-right: 80px;
  padding-bottom: 132px;
}
.reels-slot .media-gallery-nav {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 3;
  gap: 8px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--reels-chip);
  color: var(--reels-text);
  transform: translateX(-50%);
}
.reels-slot .media-gallery-nav .btn-icon {
  color: inherit;
}
.reels-slot .media-alt-status {
  display: none;
}
.reels-slot .viewer-message,
.reels-slot .media-recovery,
.reels-slot .media-unavailable {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  color: var(--reels-text);
  text-align: center;
}
.reels-top,
.reels-caption,
.reels-action-label {
  text-shadow: var(--reels-text-shadow);
}
.reels-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 0;
  pointer-events: none;
}
.reels-progress {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
}
.reels-segment {
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--reels-track);
}
.reels-segment-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--reels-text);
}
.reels-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reels-position {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reels .btn-icon {
  width: 44px;
  height: 44px;
  background: var(--reels-chip);
  color: var(--reels-text);
  pointer-events: auto;
}
.reels .btn-icon:hover {
  background: var(--reels-chip-hover);
}
.reels .btn-icon:disabled {
  opacity: 0.4;
}
.reels-rail {
  position: absolute;
  right: 8px;
  bottom: 112px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.reels-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--reels-text);
  font: inherit;
  font-size: var(--fs-12);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.reels-action::-webkit-details-marker {
  display: none;
}
.reels-action:disabled {
  cursor: default;
  opacity: 0.4;
}
.reels-action-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--reels-chip);
}
.reels-action:hover .reels-action-icon {
  background: var(--reels-chip-hover);
}
.reels-action:focus-visible {
  outline: none;
}
.reels-action:focus-visible .reels-action-icon {
  outline: 3px solid var(--focus);
}
.reels-menu {
  position: relative;
}
.reels-menu-panel {
  top: auto;
  right: calc(100% + 8px);
  bottom: 0;
  color: var(--text);
}
.reels-caption {
  position: absolute;
  left: 0;
  right: 72px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0 16px 24px;
  pointer-events: none;
}
.reels-caption button {
  pointer-events: auto;
}
.reels-channel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.reels-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--reels-text);
  font: inherit;
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.reels-channel:disabled {
  cursor: default;
}
.reels-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid transparent;
  border-radius: var(--r-8);
  background-color: var(--pc, var(--reels-text));
  background-image: linear-gradient(var(--chip), var(--chip)), var(--pf, none);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--text);
}
.reels-channel[data-avatar="round"] .reels-avatar {
  border-radius: 50%;
}
.reels-channel-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reels-channel:not(:disabled):hover .reels-channel-name {
  text-decoration: underline;
}
.reels-badge {
  flex: none;
  padding: 2px 6px;
  border-radius: var(--r-4);
  background: var(--reels-chip);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}
.reels-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: 22px;
  overflow-wrap: anywhere;
}
.reels-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--reels-text-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: pre-line;
}
.reels-description[data-open="true"] {
  display: block;
  max-height: 30vh;
  overflow-y: auto;
  pointer-events: auto;
}
.reels-more-text {
  padding: 0;
  border: 0;
  background: none;
  color: var(--reels-text);
  font: inherit;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.reels-meta {
  color: var(--reels-text-2);
  font-size: var(--fs-12);
}
/* Muted speaker in the top bar, a little apart from the close button (colors from .reels .btn-icon). */
.reels-unmute {
  flex: none;
  margin-right: 4px;
}
.reels-notice {
  position: absolute;
  left: 16px;
  right: 80px;
  bottom: 168px;
  z-index: 4;
}
.reels-notice:empty {
  display: none;
}
.reels-nav {
  display: none;
}
/* Infos start hidden: a tap in the middle third (or "i") shows them. Hidden controls stay
   focusable, and focus reaching one shows them again; progress, position and close stay. */
.reels-caption,
.reels-rail,
.reels-nav,
.reels-slide::after,
.reels-slot .media-gallery-nav .btn-icon {
  transition: opacity 0.2s;
}
.reels[data-chrome="hidden"] :is(.reels-caption, .reels-rail, .reels-nav),
.reels[data-chrome="hidden"] .reels-slide::after,
.reels[data-chrome="hidden"] .reels-slot :is(.player-ui, .player-menu),
.reels[data-chrome="hidden"] .reels-slot .media-gallery-nav .btn-icon {
  opacity: 0;
  pointer-events: none;
}
.reels[data-chrome="hidden"] :is(.reels-caption, .reels-rail, .reels-slot .player-ui) * {
  pointer-events: none;
}
@media (max-width: 767px) {
  /* Phones: the rail and its labels overlay the right edge, so every player keeps its
     controls left of it. */
  .reels-slot .media-frame .player-ui,
  .reels-slot .media-frame[data-orientation="portrait"] .player-ui {
    padding-right: 88px;
  }
  /* Embedded players draw their own controls; the whole frame stays left of the rail. */
  .reels-slot .media-frame:has(> iframe) {
    width: calc(100% - 88px);
    margin: 0 88px 0 0;
  }
}
@media (min-width: 768px) {
  /* Desktop: an upright column in the middle, the rail beside it, steps on the far right. */
  .reels-column {
    flex: none;
    width: min(calc(100dvh * 9 / 16), calc(100vw - 240px));
  }
  .reels-rail {
    right: -72px;
    bottom: 24px;
  }
  .reels-caption {
    right: 0;
  }
  .reels-nav {
    position: absolute;
    top: 50%;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transform: translateY(-50%);
  }
  .reels-slide {
    border-radius: var(--r-12);
  }
}
.channel-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--divider);
  text-underline-offset: 2px;
  cursor: pointer;
}
.channel-link:hover {
  color: var(--link);
  text-decoration-color: currentColor;
}
.channel-link[aria-busy="true"] {
  cursor: progress;
}
.thumb .thumb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 32 · Konten verbinden ------------------------------------------------------------- */
/* Karten dieser Seite behalten ihren Rand auch auf Dunkel (Tokens --card-edge/--card-lift). */
.accounts-page .card {
  box-shadow:
    inset 0 0 0 1px var(--card-edge),
    var(--card-lift);
}
.account-intro {
  display: block;
  max-width: 72ch;
}
.account-card .actions {
  gap: 8px;
}
.connect-dialog {
  overflow-y: auto;
}
.connect-dialog .dialog-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.connect-way {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--r-12);
  background: var(--bg-sunken);
}
.connect-way h3 {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: 24px;
}
.connect-way .field-help {
  margin-top: 0;
}
.connect-way code {
  overflow-wrap: anywhere;
}
.connect-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 20px;
  list-style: decimal;
  font-size: var(--fs-14);
  line-height: 20px;
}
.connect-steps > li > .actions,
.connect-steps > li > details,
.connect-steps > li > ol {
  margin-top: 8px;
}
.connect-steps > li::marker {
  font-weight: var(--fw-bold);
}
.connect-substeps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 20px;
  list-style: lower-alpha;
}
.connect-steps details > summary {
  width: fit-content;
  font-size: var(--fs-14);
  color: var(--link);
  font-weight: var(--fw-medium);
}
.connect-steps details[open] > summary {
  margin-bottom: 8px;
}
.connect-way[hidden] {
  display: none;
}
.connect-text {
  min-height: 96px;
  font-size: var(--fs-12);
}
/* "Weitere Wege": the Firefox add-on, folded away below the main ways. */
.connect-more > summary {
  width: fit-content;
  padding-block: 4px;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--link);
}
.connect-more[open] > summary {
  margin-bottom: 12px;
}

/* 32a · Tresor und API-Zugang auf „Konten verbinden“ ------------------------------------ */
.vault-card {
  margin-block: 16px 24px;
}
.vault-card[data-state="locked"] {
  border-color: var(--warning);
}
.vault-wraps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}
.vault-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 8px 12px;
  border-radius: var(--r-12);
  background: var(--bg-sunken);
}
.vault-wrap > .field-help {
  margin: 0;
}
.vault-wrap > .btn {
  margin-inline-start: auto;
}
.vault-pairing {
  margin-block: 12px;
  padding: 12px;
  border-radius: var(--r-12);
  background: var(--warning-soft);
}
.account-oauth {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block-end: 12px;
  margin-block-end: 4px;
  border-block-end: 1px solid var(--divider);
}
.account-oauth[data-state="connected"] > .t-sub {
  color: var(--success);
}
#global-accounts {
  margin-block-start: 32px;
}
.page > .section-title,
#global-accounts > .section-title {
  margin-block: 24px 12px;
  font-size: var(--fs-18);
}

/* Watch lobby: "Meine Cookies nutzen" when creating a room. */
.watch-own-cookies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-block: 12px;
}

/* 32b · Anbieter-Last (provider-load.js) ------------------------------------------- */
#provider-load {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block-start: 32px;
}
#provider-load[hidden] {
  display: none;
}
#provider-load > .section-title {
  margin-block: 0;
  font-size: var(--fs-18);
}
.load-card[data-state="paused"] {
  box-shadow:
    inset 0 0 0 1px var(--error),
    var(--card-lift);
}
.load-meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.load-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--text-2);
}
.load-meter-head strong {
  color: var(--text);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.load-bar {
  height: 8px;
  border-radius: var(--r-pill);
}
.load-bar > span {
  border-radius: inherit;
}
.load-bar[data-level="high"] > span {
  background: var(--warning);
}
.load-bar[data-level="paused"] > span {
  background: var(--error);
}
.load-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.load-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--r-8);
  background: var(--bg-sunken);
}
.load-stat dt {
  font-size: var(--fs-12);
  line-height: 16px;
  color: var(--text-2);
}
.load-stat dd {
  margin: 0;
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: 24px;
  font-variant-numeric: tabular-nums;
}
.load-stat[data-kind="warning"] {
  background: var(--warning-soft);
}
.load-stat[data-kind="warning"] dd {
  color: var(--warning);
}
.load-stat[data-kind="error"] {
  background: var(--error-soft);
}
.load-stat[data-kind="error"] dd {
  color: var(--error);
}
/* Unter dem 24-Stunden-Wert: dieselbe Zahl für die letzte Stunde, klein und leise;
   steht nach den Kachelfarben, damit sie die Zeile nicht mitfärben. */
.load-stat dd.load-stat-hour {
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  line-height: 16px;
  color: var(--text-2);
}
.load-stat dd.load-stat-hour[data-now] {
  font-weight: var(--fw-medium);
  color: var(--text);
}
.notice.load-pause {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: start;
}
.load-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.load-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
  font-size: var(--fs-14);
  line-height: 20px;
}
.load-feature > .load-bar,
.load-feature > .load-feature-split {
  grid-column: 1 / -1;
}
.load-feature > .load-bar {
  height: 6px;
}
.load-feature > .load-bar > span {
  background: var(--accent);
  background-image: var(--accent-img);
}
.load-feature-count {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
#provider-signals {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
}
#provider-signals-heading {
  font-weight: var(--fw-medium);
  color: var(--text);
}
.load-updated {
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  .load-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 33 · Startseite von Stream (home.js) ----------------------------------------------- */
/* Regale wischen seitwärts und rasten ein; das Raster darunter lädt beim Scrollen nach. */
.home {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.home-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.home-top:not(:has(> :not([hidden]))) {
  display: none;
}
.home-chips {
  flex: 1 1 auto;
  min-width: 0;
}
.home-return,
.home-results {
  flex: none;
  margin-left: auto;
}
.home-results:not([hidden]) + .home-return {
  margin-left: 0;
}
/* "×" on "Weiterschauen" and queue cards: shown on hover and focus, always on touch screens. */
.home-card {
  position: relative;
}
.home-card-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  background: var(--overlay);
  color: var(--thumb-text);
  opacity: 0;
}
.home-card:hover > .home-card-remove,
.home-card:focus-within > .home-card-remove {
  opacity: 1;
}
@media (hover: none) {
  .home-card-remove {
    opacity: 1;
  }
}
.home-card[aria-current="true"] .home-card-title {
  color: var(--accent);
}
/* Grey cards while the first answer of the home page loads. */
.home-skeleton {
  pointer-events: none;
}
.home-skeleton-line {
  display: block;
  height: 14px;
  width: 85%;
  border-radius: var(--r-4);
  background: var(--chip);
}
.home-skeleton-line.short {
  width: 55%;
}
.home-skeleton-thumb,
.home-skeleton-line {
  animation: home-skeleton 1.4s ease-in-out infinite alternate;
}
@keyframes home-skeleton {
  to {
    opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-skeleton-thumb,
  .home-skeleton-line {
    animation: none;
  }
}
.home-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-status:not(:has(> :not(:empty))) {
  display: none;
}
.home-status-line:empty {
  display: none;
}
.shelf,
.home-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.shelf-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--h-control);
}
.shelf-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: 28px;
}
.shelf-nav {
  display: flex;
  gap: 4px;
}
.shelf-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.shelf-track::-webkit-scrollbar {
  display: none;
}
.shelf-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
}
.home-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
/* Drawn preview of a card without a picture: channel and title on the card's tone. */
.thumb.is-poster > .thumb-art {
  display: none;
}
.home-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 36px;
  border-top: 4px solid var(--pc, var(--thumb-ink-2));
  color: var(--thumb-text);
  text-align: left;
}
.home-poster-channel {
  overflow: hidden;
  color: var(--thumb-icon);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-poster-channel::before {
  content: "";
  display: inline-block;
  margin-right: 6px;
  vertical-align: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pc, var(--thumb-icon));
}
.home-poster-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.home-card > .thumb {
  width: 100%;
  cursor: pointer;
}
/* Upright entries keep the cards' 16:9 frame, so one Short does not stretch a whole shelf. */
.home-card > .thumb[data-orientation="portrait"] {
  aspect-ratio: 16 / 9;
}
.home-card > .thumb[data-orientation="portrait"] > img {
  object-fit: contain;
}
/* The drawn preview leaves the corner free for a tag such as "Short". */
.thumb:has(> .thumb-tag) > .home-poster {
  padding-top: 32px;
}
.home-card-body {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.home-card-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-card-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: 22px;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.home-channel {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.home-channel:hover {
  color: var(--text);
}
.home-card-more {
  flex: none;
  margin-right: -8px;
}
.home-grid {
  gap: 32px 16px;
}
.home-fresh {
  position: sticky;
  top: calc(var(--h-header) + 8px);
  z-index: 5;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.home-fresh:not(:has(> :not([hidden]))) {
  display: none;
}
.home-new,
.home-new:hover {
  pointer-events: auto;
  background: var(--inverse);
  color: var(--on-inverse);
  box-shadow: var(--shadow-menu);
}
.home-more {
  max-width: none;
  padding: 8px 0;
}
.home-empty > .ico {
  color: var(--text-2);
}
.home-empty > p {
  max-width: 560px;
}
/* Das ⋮-Menü und „Speichern in …“ liegen über den Regalen, die sonst abschneiden würden. */
.home-pop {
  position: fixed;
  z-index: 40;
  top: var(--pop-top, 0px);
  left: var(--pop-left, 0px);
  display: block;
  width: var(--pop-width, 0px);
  height: var(--pop-height, 0px);
  pointer-events: none;
}
.home-pop > * {
  pointer-events: auto;
}
.home-pop .popover.picker {
  left: auto;
  right: 0;
}
.home-pop.up .menu,
.home-pop.up .popover.picker {
  top: auto;
  bottom: calc(100% + 6px);
}
/* Persönliche Regale aus verbundenen Konten: Zeilen über dem Raster, Karten zum Verbinden. */
.home-personal,
.home-personal-shelves {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.home-personal-shelves:empty {
  display: none;
}
.home-connect-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home-connect {
  color: var(--text);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.home-connect[data-p]::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pc, var(--accent));
}
.home-connect:hover {
  text-decoration: underline;
}
.shelf-hide,
.shelf-clear {
  flex: none;
}
.home-shelves-restore {
  align-self: flex-start;
}
.home-hidden-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-hidden-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--divider);
}
.home-hidden-row:first-child {
  border-top: 0;
}
/* „Startseite“ über dem Videotitel und im Kopf der Suchtreffer. */
#stream-home-button {
  align-self: flex-start;
}
#browse-home {
  margin-left: auto;
}
.home-hidden-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Shelves stack above the grid; wide pages move them into a side column beside it. */
.home {
  container-type: inline-size;
}
.home-layout,
.home-side,
.home-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.home-side:not(:has(> :not([hidden]))) {
  display: none;
}
.shelf-more {
  display: none;
  align-self: flex-start;
}
@container (min-width: 1100px) {
  .home-layout.has-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 32px;
  }
  .home-layout.has-side > .home-side {
    grid-column: 2;
    grid-row: 1;
  }
  .home-layout.has-side > .home-main {
    grid-column: 1;
    grid-row: 1;
  }
  .home-side .shelf-nav {
    display: none;
  }
  .home-side .shelf-track {
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .home-side .shelf-card {
    flex: none;
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }
  .home-side .shelf-card > .thumb {
    border-radius: var(--r-8);
  }
  .home-side .shelf-card > .home-card-remove {
    top: 4px;
    right: auto;
    left: 132px;
  }
  .home-side .home-card-title {
    font-size: var(--fs-14);
    line-height: 20px;
  }
  .home-side .home-poster {
    gap: 2px;
    padding: 8px 10px 26px;
    border-top-width: 3px;
  }
  .home-side .home-poster-title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: var(--fs-12);
  }
  /* Kept in step with SIDE_ENTRIES in home.js. */
  .home-side .shelf:not(.is-expanded) .shelf-card:nth-child(n + 6) {
    display: none;
  }
  .home-side .shelf[data-many] .shelf-more {
    display: inline-flex;
  }
}
@media (max-width: 760px) {
  .home {
    gap: 24px;
  }
  .home-top {
    flex-wrap: wrap;
  }
  .shelf-nav {
    display: none;
  }
  .shelf-track {
    gap: 12px;
    margin-inline: -12px;
    padding-inline: 12px;
    scroll-padding-inline: 12px;
  }
  .shelf-card {
    flex-basis: 72vw;
  }
  /* Wie in der App: eine Spalte, Vorschaubilder über die volle Breite. */
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .home-grid .home-card > .thumb {
    width: calc(100% + 24px);
    max-width: none;
    margin-inline: -12px;
    border-radius: 0;
  }
}

/* 34 · Lesen (lesen.html, lesen.js) ------------------------------------------------- */
/* Werkzeugleiste: Verlauf, Adresse als Pill, Umschalter, Medien-Chip, Menü */
.lesen-bar {
  position: sticky;
  top: var(--h-header);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  background: var(--bg);
  transition: transform 0.2s ease;
}
/* Die Kopfzeilen-Suche ist das einzige Eingabefeld; hier steht nur die offene Domain. */
.lesen-where {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 12px;
  height: var(--h-control);
  border-radius: var(--r-pill);
  background: var(--chip);
  color: var(--text);
  font-size: var(--fs-14);
}
.lesen-where > .ico {
  flex: none;
  color: var(--success);
}
.lesen-where-host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lesen-bar-space {
  flex: 1 1 auto;
}
.lesen-media-toggle .ico {
  color: var(--text-2);
}
.lesen-media-toggle[aria-pressed="true"] .ico {
  color: inherit;
}
/* Inhalt links, Medienleiste rechts */
.lesen-layout {
  /* Lesespalte und Schrift wachsen ab etwa 1400 px Breite stufenlos mit: 680 → 960 px und
     18 → 21 px, so bleiben es rund 75–85 Zeichen pro Zeile. Darunter bleibt alles wie bisher. */
  --lesen-column: clamp(680px, calc(53.85vw - 74px), 960px);
  --lesen-text: clamp(var(--fs-18), calc(0.577vw + 0.62rem), 1.3125rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 32px;
  margin-top: 8px;
}
.lesen-main {
  min-width: 0;
}
/* „Hell lesen“ im dunklen App-Theme: Die Textspalte nimmt die hellen Tokens (:root-Block oben)
   an und liegt wie ein Blatt Papier auf der dunklen Fläche – Abstand, runde Ecken, feiner Rand
   und leichter Schatten. */
.lesen-doc[data-lesen-design="light"] {
  color-scheme: light;
  background: var(--surface);
  color: var(--text);
  margin-top: 8px;
  padding: 24px 28px 48px;
  border-radius: var(--r-16);
  box-shadow:
    0 0 0 1px var(--divider),
    var(--shadow-card);
}
.lesen-skeleton,
.lesen-problem,
.lesen-provider,
.lesen-doc {
  width: 100%;
  max-width: var(--lesen-column);
  margin-inline: auto;
}
/* Startzustand: links Weiterlesen und Verlauf, rechts angeheftete Seiten */
.lesen-note {
  max-width: var(--lesen-column);
  margin: 0 auto 12px;
}
.lesen-start {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  max-width: 1040px;
  margin: 8px auto 0;
  padding-bottom: 48px;
}
.lesen-start h2 {
  color: var(--text);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
}
.lesen-start-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.lesen-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: var(--r-16);
  background: var(--bg-sunken);
}
.lesen-intro > .ico {
  color: var(--accent);
}
.lesen-start .lesen-intro-title {
  font-size: var(--fs-20);
}
.lesen-intro p {
  max-width: 56ch;
  color: var(--text-2);
}
.lesen-continue {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  border-radius: var(--r-16);
  background: var(--bg-sunken);
}
.lesen-continue-meta {
  color: var(--text-2);
  font-size: var(--fs-12);
}
.lesen-start .lesen-continue-title {
  font-size: var(--fs-20);
  line-height: 1.3;
}
.lesen-progress {
  width: 100%;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--chip);
  overflow: hidden;
}
.lesen-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.lesen-start-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.lesen-recent-list,
.lesen-pins {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lesen-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px;
  margin-inline: -8px;
  border-radius: var(--r-12);
  color: var(--text);
  text-decoration: none;
}
.lesen-recent-item:hover,
.lesen-recent-item:focus-visible {
  background: var(--chip);
}
.lesen-recent-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lesen-recent-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-medium);
}
.lesen-recent-meta {
  color: var(--text-2);
  font-size: var(--fs-12);
}
.lesen-letter {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-8);
  background: var(--thumb-8);
  color: var(--thumb-text);
  font-weight: var(--fw-bold);
}
.lesen-letter[data-tone="1"] {
  background: var(--thumb-1);
}
.lesen-letter[data-tone="2"] {
  background: var(--thumb-2);
}
.lesen-letter[data-tone="3"] {
  background: var(--thumb-3);
}
.lesen-letter[data-tone="4"] {
  background: var(--thumb-4);
}
.lesen-letter[data-tone="5"] {
  background: var(--thumb-5);
}
.lesen-letter[data-tone="6"] {
  background: var(--thumb-6);
}
.lesen-letter[data-tone="7"] {
  background: var(--thumb-7);
}
.lesen-start-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.lesen-pins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.lesen-pin-item {
  position: relative;
}
.lesen-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 96px;
  padding: 14px 8px 10px;
  border-radius: var(--r-12);
  background: var(--bg-sunken);
  color: var(--text);
  font-size: var(--fs-12);
  text-align: center;
  text-decoration: none;
}
.lesen-pin:hover,
.lesen-pin:focus-visible {
  background: var(--chip);
}
.lesen-pin-title {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lesen-pin-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  opacity: 0;
}
.lesen-pin-item:hover .lesen-pin-remove,
.lesen-pin-remove:focus-visible {
  opacity: 1;
}
.lesen-pins-hint {
  max-width: 40ch;
}
.lesen-problem-title {
  color: var(--text);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: 32px;
}
.lesen-skeleton {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
}
.lesen-skeleton .lesen-skeleton-title {
  height: 28px;
  width: 90%;
}
.lesen-skeleton-block {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-12);
  background: var(--chip);
  animation: home-skeleton 1.4s ease-in-out infinite alternate;
}
.lesen-problem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 40px 0;
}
.lesen-problem p {
  color: var(--text-2);
  font-size: var(--fs-16);
}
.lesen-provider {
  margin-top: 24px;
}
.lesen-provider[data-p] {
  box-shadow:
    inset 4px 0 0 var(--pc),
    inset 0 0 0 1px var(--divider);
}
.lesen-provider-title {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
}
/* Lesetext */
.lesen-doc {
  padding-bottom: 48px;
  color: var(--text);
  font-size: var(--lesen-text);
  line-height: 1.65;
  overflow-wrap: break-word;
}
.lesen-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--divider);
}
.lesen-site,
.lesen-meta {
  color: var(--text-2);
  font-size: var(--fs-14);
  line-height: 1.4;
}
.lesen-site {
  font-weight: var(--fw-medium);
}
.lesen-title {
  font-size: 2rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.lesen-doc > .notice {
  margin-bottom: 16px;
}
.lesen-body :where(p, ul, ol, blockquote, pre, table, figure) {
  margin: 0 0 1em;
}
.lesen-body :where(h2, h3, h4, h5, h6) {
  margin: 1.6em 0 0.5em;
  font-weight: var(--fw-bold);
  line-height: 1.3;
}
.lesen-body h2 {
  font-size: var(--fs-24);
}
.lesen-body h3 {
  font-size: var(--fs-20);
}
.lesen-body :where(h4, h5, h6) {
  font-size: var(--fs-18);
}
.lesen-body a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lesen-body ul {
  padding-left: 1.5em;
  list-style: disc;
}
.lesen-body ol {
  padding-left: 1.5em;
  list-style: decimal;
}
.lesen-body li + li {
  margin-top: 0.35em;
}
.lesen-body blockquote {
  padding-left: 1em;
  border-left: 3px solid var(--divider);
  color: var(--text-2);
}
.lesen-body pre {
  overflow-x: auto;
  padding: 12px 16px;
  border-radius: var(--r-8);
  background: var(--chip);
  font-size: var(--fs-14);
  line-height: 1.5;
}
.lesen-body pre code {
  padding: 0;
  background: none;
}
.lesen-body figure {
  margin-block: 1.5em;
}
.lesen-body figcaption {
  margin-top: 6px;
  color: var(--text-2);
  font-size: var(--fs-14);
  line-height: 1.45;
}
.lesen-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--fs-14);
  line-height: 1.45;
}
.lesen-body :where(td, th) {
  padding: 6px 10px;
  border: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}
.lesen-body th {
  background: var(--bg-sunken);
}
.lesen-body hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--divider);
}
/* Medien im Text mit eigener Aktionsleiste (Überfahren, Fokus oder langes Drücken) */
/* Nur Text: Medien im Artikel ausgeblendet, die Medienleiste behält sie. */
.lesen-doc[data-media="aus"] .lesen-medium,
.lesen-doc[data-media="aus"] figure:has(.lesen-medium) {
  display: none;
}
.lesen-text-media[aria-pressed="true"] .lesen-text-media-off,
.lesen-text-media[aria-pressed="false"] .lesen-text-media-on {
  display: none;
}
.lesen-medium {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 1em auto;
  border-radius: var(--r-8);
}
.lesen-medium > :where(img, video) {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-8);
}
.lesen-medium-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.lesen-medium-actions .btn-icon {
  color: var(--on-overlay);
}
.lesen-medium-actions .btn-icon:hover {
  background: var(--reels-chip-hover);
}
.lesen-medium:hover > .lesen-medium-actions,
.lesen-medium:focus-within > .lesen-medium-actions,
.lesen-medium[data-actions="open"] > .lesen-medium-actions {
  opacity: 1;
  pointer-events: auto;
}
.lesen-medium[data-kind="audio"] {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.lesen-medium[data-kind="audio"] > audio {
  flex: 1 1 auto;
  min-width: 0;
}
.lesen-medium[data-kind="audio"] > .lesen-medium-actions {
  position: static;
  background: var(--chip);
  opacity: 1;
  pointer-events: auto;
}
.lesen-medium[data-kind="audio"] .lesen-medium-actions .btn-icon {
  color: var(--text);
}
.lesen-medium.is-located {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
/* Linkliste, wenn kein Artikel erkannt wird */
.lesen-links h2 {
  margin-top: 0;
}
.lesen-links ul {
  margin-top: 12px;
  padding: 0;
  list-style: none;
}
.lesen-links li + li {
  margin-top: 0;
  border-top: 1px solid var(--divider);
}
.lesen-links a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding: 10px 4px;
  color: var(--text);
  text-decoration: none;
}
.lesen-link-text {
  color: var(--link);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}
.lesen-links a:hover .lesen-link-text {
  text-decoration: underline;
}
.lesen-link-host {
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: 1.4;
}
/* Medienleiste rechts; auf dem Handy ein Bereich, der von unten hochgezogen wird */
.lesen-media {
  position: sticky;
  top: calc(var(--h-header) + 72px);
  width: 280px;
  max-height: calc(100vh - var(--h-header) - 88px);
  display: none;
  flex-direction: column;
  padding: 12px;
  border-radius: var(--r-12);
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.lesen-media[data-open="true"] {
  display: flex;
}
.lesen-sheet-toggle {
  display: none;
}
.lesen-media-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}
.lesen-media-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lesen-media-title {
  flex: 1 1 auto;
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
}
.lesen-selection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: var(--r-12);
  background: var(--chip);
}
.lesen-selection-count {
  color: var(--text-2);
  font-size: var(--fs-12);
}
.lesen-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lesen-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 0;
}
.lesen-tile-item {
  position: relative;
  min-width: 0;
}
.lesen-tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-8);
  background: none;
  color: inherit;
}
.lesen-tile:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.lesen-tile-thumb {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--r-8);
}
.lesen-tile .thumb-brand {
  padding: 4px;
  font-size: var(--fs-12);
  text-align: center;
}
.lesen-tile .thumb-tag {
  top: auto;
  bottom: 4px;
  left: 4px;
  max-width: calc(100% - 8px);
  overflow: hidden;
  font-size: var(--fs-10);
  white-space: nowrap;
}
.lesen-tile .thumb-tag .ico {
  width: 12px;
  height: 12px;
}
.lesen-tile-check {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--accent);
}
.lesen-tile-item:has(.lesen-tile-check:checked) .lesen-tile-thumb {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
/* Betrachter: alle Medien der Seite zum Durchwischen */
.lesen-viewer {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--reels-bg);
  color: var(--reels-text);
  overflow: hidden;
}
.lesen-viewer[open] {
  display: flex;
  flex-direction: column;
}
.lesen-viewer::backdrop {
  background: var(--overlay);
}
.lesen-viewer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.lesen-viewer-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lesen-viewer-head .btn,
.lesen-viewer .media-gallery-nav .btn-icon {
  background: var(--reels-chip);
  color: var(--reels-text);
}
.lesen-viewer-head .btn:hover,
.lesen-viewer .media-gallery-nav .btn-icon:hover {
  background: var(--reels-chip-hover);
}
.lesen-viewer-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.lesen-viewer .media-gallery {
  flex: 1 1 auto;
  min-height: 0;
}
.lesen-viewer .media-entry {
  height: 100%;
}
.lesen-viewer .media-frame {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
  background: transparent;
}
.lesen-viewer .media-alt-status {
  padding: 0 16px 8px;
  color: var(--reels-text-2);
}
.lesen-viewer .media-gallery-nav {
  border-top-color: transparent;
  color: var(--reels-text-2);
}
.lesen-viewer-provider .thumb-brand {
  font-size: var(--fs-24);
}
.lesen-viewer-provider-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px 16px;
}
.lesen-viewer-provider-body .muted {
  color: var(--reels-text-2);
}
.lesen-viewer-provider-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
}
@media (prefers-reduced-motion: reduce) {
  .lesen-bar,
  .lesen-medium-actions {
    transition: none;
  }
  .lesen-skeleton-block {
    animation: none;
  }
}
@media (hover: none) {
  .lesen-medium-actions .btn-icon {
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 767px) {
  .lesen-bar {
    gap: 6px;
    margin-inline: -12px;
    padding-inline: 12px;
  }
  .lesen-bar[data-hidden="true"] {
    transform: translateY(-100%);
  }
  .lesen-nav,
  .lesen-chip-label,
  .lesen-media-title,
  .lesen-media-close {
    display: none;
  }
  .lesen-paste-label {
    display: none;
  }
  .lesen-paste {
    min-width: 44px;
    height: 44px;
  }
  .lesen-where {
    height: 44px;
  }
  .lesen-start {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .lesen-doc[data-lesen-design="light"] {
    padding: 16px 16px 40px;
    border-radius: var(--r-12);
  }
  .lesen-pin-remove {
    opacity: 1;
  }
  .lesen-bar .btn-icon,
  .lesen-media-toggle,
  .lesen-media-head .btn-sm {
    min-width: 44px;
    height: 44px;
  }
  .lesen-layout {
    display: block;
  }
  .lesen-main {
    padding-bottom: 64px;
  }
  .lesen-title {
    font-size: var(--fs-24);
  }
  .lesen-media,
  .lesen-media[data-open="true"] {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 25;
    width: auto;
    max-height: 70vh;
    display: flex;
    padding: 0 12px 12px;
    border-radius: var(--r-16) var(--r-16) 0 0;
    background: var(--bg-elevated);
    box-shadow:
      var(--shadow-menu),
      inset 0 0 0 1px var(--divider);
  }
  .lesen-sheet-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 8px 0 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
  }
  .lesen-sheet-grip {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: var(--r-pill);
    background: var(--divider);
  }
  .lesen-media[data-open="true"] .lesen-sheet-toggle .ico {
    transform: rotate(180deg);
  }
  .lesen-media:not([data-open="true"]) .lesen-media-body {
    display: none;
  }
  .lesen-media-head {
    justify-content: flex-end;
  }
  .lesen-tile-check {
    width: 24px;
    height: 24px;
  }
}

/* Lesen, Stufe 2: Auswahl „Speichern in …“ / „Gemeinsam ansehen in …“ und der Hinweis danach.
   Die Auswahl ist ein Menü im gemeinsamen Raster und steht fest am Fenster bei ihrem Auslöser. */
.menu.lesen-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  transform: none;
  width: 300px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lesen-picker .menu-item .grow {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lesen-picker .menu-meta:empty {
  display: none;
}
.lesen-saved {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 35;
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  transform: translateX(-50%);
  box-shadow:
    var(--shadow-menu),
    inset 0 0 0 1px var(--divider);
}
.lesen-saved:not([data-kind]) {
  background: var(--bg-elevated);
}
.lesen-saved-text {
  flex: 1 1 auto;
  min-width: 0;
}
.lesen-saved-problems {
  flex: 1 1 100%;
  order: 1;
  margin: 0;
  padding-left: 20px;
  color: var(--text-2);
  font-size: var(--fs-12);
  list-style: disc;
}
.lesen-saved[data-kind] .lesen-saved-problems {
  color: inherit;
}
.lesen-saved-close {
  margin: -6px -8px -6px 0;
  color: inherit;
}
@media (max-width: 767px) {
  .lesen-saved {
    bottom: calc(64px + 64px + env(safe-area-inset-bottom));
  }
  .lesen-saved-close {
    min-width: 44px;
    height: 44px;
  }
}

/* Sammlungen: Lesezeichen aus Lesen (Anbieter „web“) als Kachel mit Titel und Seite; ein Tipp
   öffnet die Seite wieder in Lesen. */
.grid-tile.grid-web {
  text-decoration: none;
}
.grid-web-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 24px 10px 10px;
  background: linear-gradient(transparent, var(--overlay));
  color: var(--on-overlay);
  text-align: left;
}
.grid-web-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}
.grid-web-site {
  overflow: hidden;
  font-size: var(--fs-12);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid-web .grid-mark {
  color: var(--on-overlay);
}

/* 35 · Startseite: ein Linkfeld, passende Aktionen als Kacheln (start.js) ----------- */
body[data-area="start"] {
  background: var(--start-bg);
}
body[data-area="start"] .app-header,
body[data-area="start"] .app-nav {
  background: transparent;
}
body[data-area="start"] .header-search,
body[data-area="start"] .new-menu,
body[data-area="start"] .jobs-link {
  display: none;
}
/* Ohne Anmeldung: Anmelden statt Konto, alles andere ausgegraut */
:root[data-signed-out] .account-menu {
  display: none;
}
:root[data-signed-out] .app-nav .nav-item:not([aria-current="page"]) {
  color: var(--text-disabled);
}
:root[data-signed-out] .app-nav .nav-section + .nav-section {
  display: none;
}
.login-link {
  background: var(--bg-elevated);
  color: var(--link);
}
.btn-outline.login-link .ico {
  color: var(--link);
}
.start-page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--h-header));
  padding: 24px 32px 10vh;
}
/* Die Gruppe wird in der Listenansicht ("?") zum Rahmen: Feld und Aktionen sind dann eine Box. */
.start-group {
  --tone: var(--accent);
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  border: 2px solid transparent;
  border-radius: var(--r-20);
  transition:
    border-color 450ms var(--ease-soft),
    background-color 450ms var(--ease-soft),
    box-shadow 600ms var(--ease-soft);
}
.start-group[data-state="error"] {
  --tone: var(--error);
}
/* Feld und Box leuchten selbst in ihrem Ton, als wären sie die Lichtquelle. */
.start-field,
.start-group[data-view="list"] {
  box-shadow:
    0 0 24px -2px color-mix(in srgb, var(--tone) var(--glow-near), transparent),
    0 0 80px 4px color-mix(in srgb, var(--tone) var(--glow-far), transparent);
}
.start-field:focus-within,
.start-group[data-view="list"]:focus-within {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--tone) 22%, transparent),
    0 0 28px 0 color-mix(in srgb, var(--tone) var(--glow-near), transparent),
    0 0 96px 8px color-mix(in srgb, var(--tone) var(--glow-far), transparent);
}
.start-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--h-start-field);
  padding: 0 12px 0 22px;
  border: 2px solid var(--tone);
  border-radius: var(--r-20);
  background: var(--bg-elevated);
  transition:
    border-color 450ms var(--ease-soft),
    background-color 450ms var(--ease-soft),
    box-shadow 600ms var(--ease-soft);
}
/* A recognised link makes the field hop once; a refused one shakes it. */
.start-group[data-state="ok"] .start-field,
.start-group[data-state="ok"][data-view="list"] {
  animation: start-hop 640ms var(--ease-soft);
}
.start-group[data-state="error"] .start-field,
.start-group[data-state="error"][data-view="list"] {
  animation: start-shake 520ms ease-out;
}
.start-group[data-view="list"] {
  border-color: var(--tone);
  background: var(--bg-elevated);
}
.start-group[data-view="list"] .start-field,
.start-group[data-view="list"] .start-field:focus-within {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.start-field-icon {
  color: var(--tone);
  transition: color 300ms ease;
}
.start-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: var(--fs-20);
}
.start-input:focus-visible {
  outline: none;
}
.start-input::placeholder {
  color: var(--text-2);
}
.start-paste {
  height: 44px;
}
.start-clear {
  width: 44px;
  height: 44px;
  color: var(--text-2);
}
.start-help-button {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: 50%;
  background: var(--chip);
  color: var(--text-2);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}
.start-help-button:hover {
  border-color: var(--tone);
  color: var(--text);
}
.start-help-button[aria-pressed="true"] {
  border-color: var(--tone);
  background: var(--tone);
  color: var(--accent-on);
  animation: start-pop-small 460ms var(--ease-spring);
}
.start-help-button:active {
  transform: scale(0.9);
}
/* Listenansicht: Zeilen mit Erklärung statt Kacheln */
.start-list {
  display: none;
  flex-direction: column;
  padding: 6px;
}
.start-group[data-view="list"] .start-list:not(:empty) {
  display: flex;
}
.start-group[data-view="list"] .start-actions {
  display: none;
}
.start-group[data-view="list"] .start-result-body {
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--divider);
}
.start-group[data-view="list"] .start-guest {
  padding: 4px 16px 16px;
}
.start-group[data-view="list"] .start-error {
  padding: 20px 16px;
}
/* A failed check is explained once, above the greyed-out rows. */
.start-group[data-view="list"][data-check="failed"] .start-error {
  order: -1;
  border-bottom: 1px solid var(--divider);
}
.start-list > .anchor,
.start-actions > .anchor {
  display: block;
}
.start-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-12);
  background: transparent;
  color: var(--text);
  text-align: left;
  animation: start-slide 650ms var(--ease-soft) backwards;
  animation-delay: calc(120ms + var(--i) * 70ms);
}
.start-row:hover:not(:disabled),
.start-row:focus-visible {
  background: var(--chip);
}
.start-row > .ico:first-child {
  color: var(--accent);
}
.start-row > .ico:last-child {
  color: var(--text-2);
}
.start-row:disabled {
  cursor: not-allowed;
}
.start-row[data-available="false"] {
  opacity: 0.55;
}
/* While the link is checked: a bar runs along the field, the actions wait and breathe. */
.start-progress {
  position: absolute;
  right: 22px;
  bottom: 7px;
  left: 22px;
  height: 3px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.start-progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  border-radius: inherit;
  background: var(--tone);
}
.start-group[data-check="pending"] .start-progress {
  opacity: 1;
}
.start-group[data-check="pending"] .start-progress::after {
  animation: start-scan 1100ms var(--ease-soft) infinite;
}
.start-group[data-check="pending"] .start-tile:disabled {
  opacity: 0.6;
  cursor: progress;
}
.start-group[data-check="pending"] .start-tile-icon {
  animation: start-breathe 1200ms ease-in-out infinite;
}
.start-group[data-check="pending"] .start-row:disabled {
  cursor: progress;
}
/* Checked: the actions unlock one after another with a small spring. */
.start-group[data-check="ok"] .start-tile {
  animation: start-unlock 640ms var(--ease-spring) backwards;
  animation-delay: calc(var(--i) * 70ms);
}
.start-row[data-available="false"] > .ico:last-child {
  visibility: hidden;
}
.start-row:disabled > .ico:first-child,
.start-row:disabled .start-row-label {
  color: var(--text-2);
}
.start-row-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.start-row-label {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
}
.start-row-hint {
  color: var(--text-2);
  font-size: var(--fs-14);
}
/* Aufklappen: Höhe von 0 auf Inhalt, die Gruppe bleibt dabei mittig. */
.start-result {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 900ms var(--ease-soft);
}
.start-result[data-open="true"] {
  grid-template-rows: 1fr;
}
/* "?": the shown actions are pushed away first, then the area folds before the other view opens. */
.start-group[data-switching] .start-result {
  transition: grid-template-rows 460ms cubic-bezier(0.55, 0, 0.75, 0.35) 120ms;
}
.start-group[data-switching] .start-tile {
  animation: start-push 380ms cubic-bezier(0.55, 0, 0.75, 0.35) forwards;
  animation-delay: calc(var(--i) * 45ms);
}
.start-group[data-switching] .start-row {
  animation: start-push-row 340ms cubic-bezier(0.55, 0, 0.75, 0.35) forwards;
  animation-delay: calc(var(--i) * 35ms);
}
.start-group[data-switching] .start-guest {
  animation: start-push-row 260ms ease-in forwards;
}
.start-result-clip {
  min-height: 0;
  overflow: hidden;
}
/* Erst nach dem Aufklappen darf die Sammlungsauswahl über den Rand ragen. */
.start-result[data-settled="true"] .start-result-clip {
  overflow: visible;
}
.start-result-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 2px 4px;
}
.start-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 140px));
  justify-content: center;
  gap: 12px;
}
.start-actions:empty {
  display: none;
}
/* Six actions (a post that can also be shared) stand as two even rows of three, not 5 + 1. */
@media (min-width: 640px) {
  .start-actions:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(120px, 140px));
  }
}
.start-tile {
  width: 100%;
  height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--divider);
  border-radius: var(--r-16);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 0 22px -8px color-mix(in srgb, var(--accent) var(--glow-near), transparent);
  transition:
    border-color 200ms ease,
    box-shadow 300ms ease,
    transform 360ms var(--ease-spring);
  animation: start-pop 820ms ease-out backwards;
  animation-delay: calc(240ms + var(--i) * 90ms);
}
.start-tile:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 30px -4px color-mix(in srgb, var(--accent) var(--glow-near), transparent);
  transform: translateY(-4px);
}
.start-tile:active:not(:disabled) {
  transform: scale(0.96);
  transition-duration: 120ms;
}
.start-tile:hover:not(:disabled) .start-tile-icon {
  animation: start-nudge 560ms var(--ease-spring);
}
.start-tile:disabled {
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
}
.start-tile-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
  color: var(--accent);
}
.start-guest {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: var(--text-2);
  animation: start-rise 520ms var(--ease-soft) 760ms backwards;
}
.start-guest a {
  color: var(--link);
  font-weight: var(--fw-medium);
}
.start-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  animation: start-rise 560ms var(--ease-soft) 160ms backwards;
}
.start-error-mark {
  animation: start-pop 720ms ease-out 220ms backwards;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--error-soft);
  color: var(--error);
}
.start-error-title {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
}
.start-error-reason {
  color: var(--text-2);
}
.start-error-supported {
  max-width: 440px;
  color: var(--text-2);
  font-size: var(--fs-12);
}
@keyframes start-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
/* Tiles spring up: a little too far, a little back, then rest. */
@keyframes start-pop {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.86);
  }
  55% {
    opacity: 1;
    transform: translateY(-5px) scale(1.04);
  }
  78% {
    transform: translateY(1px) scale(0.99);
  }
  100% {
    transform: none;
  }
}
@keyframes start-scan {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(290%);
  }
}
@keyframes start-breathe {
  50% {
    opacity: 0.45;
  }
}
@keyframes start-unlock {
  0% {
    opacity: 0.6;
    transform: scale(0.94);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: none;
  }
}
@keyframes start-push {
  to {
    opacity: 0;
    transform: translateY(24px) scale(0.82);
  }
}
@keyframes start-push-row {
  to {
    opacity: 0;
    transform: translateX(-18px);
  }
}
@keyframes start-slide {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  60% {
    opacity: 1;
    transform: translateY(2px);
  }
  100% {
    transform: none;
  }
}
@keyframes start-hop {
  0% {
    transform: none;
  }
  30% {
    transform: translateY(-4px) scale(1.012);
  }
  58% {
    transform: translateY(1px) scale(0.997);
  }
  100% {
    transform: none;
  }
}
@keyframes start-shake {
  0%,
  100% {
    transform: none;
  }
  18% {
    transform: translateX(-8px);
  }
  36% {
    transform: translateX(7px);
  }
  54% {
    transform: translateX(-5px);
  }
  72% {
    transform: translateX(3px);
  }
  88% {
    transform: translateX(-1px);
  }
}
@keyframes start-nudge {
  40% {
    transform: translateY(-4px) scale(1.08);
  }
}
@keyframes start-pop-small {
  0% {
    transform: scale(0.8);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: none;
  }
}
@media (max-width: 760px) {
  .start-page {
    justify-content: flex-start;
    min-height: calc(100vh - var(--h-header) - 64px);
    padding: 96px 12px 32px;
  }
  .start-field {
    height: 64px;
    gap: 10px;
    padding: 0 6px 0 14px;
    border-radius: var(--r-16);
  }
  .start-input {
    font-size: var(--fs-18);
  }
  .start-actions {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  }
  .start-tile {
    height: 112px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .start-page,
  .start-group,
  .start-field,
  .start-field-icon,
  .start-result,
  .start-tile {
    transition: none;
  }
  .start-tile,
  .start-tile-icon,
  .start-row,
  .start-guest,
  .start-error,
  .start-error-mark,
  .start-help-button,
  .start-group,
  .start-group .start-field,
  .start-progress::after {
    animation: none !important;
  }
}

/* Server-Browser: Fenster über Lesen, das Bild der echten Seite und eine eigene Vertrauensleiste. */
.rb-dialog {
  width: min(1280px, calc(100vw - 32px));
  height: calc(100vh - 32px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-12);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-dialog);
  overflow: hidden;
}
.rb-dialog[open] {
  display: flex;
  flex-direction: column;
}
.rb-dialog::backdrop {
  background: var(--scrim);
}
.rb-head,
.rb-bar,
.rb-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.rb-head {
  border-bottom: 1px solid var(--divider);
}
.rb-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-address {
  flex: 1;
  min-width: 0;
  height: var(--h-control);
  padding: 0 var(--pad-control);
  border: 1px solid var(--control-border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-14);
}
.rb-address:focus-visible,
.rb-canvas:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.rb-tabs {
  max-width: 220px;
  height: var(--h-control);
  border: 1px solid var(--control-border);
  border-radius: var(--r-8);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.rb-trust {
  margin: 0;
  padding: 6px 12px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--fs-12);
}
.rb-note {
  margin: 0;
  padding: 6px 12px;
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-12);
  color: var(--text-2);
}
.rb-note[hidden] {
  display: none;
}
.rb-note[data-state="found"] {
  background: var(--success-soft);
  color: var(--success);
}
.rb-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 12px;
  padding: 12px 16px;
  border: 1px solid var(--divider);
  border-radius: var(--r-8);
  background: var(--bg-sunken);
}
.rb-hint[hidden] {
  display: none;
}
.rb-hint p {
  flex: 1 1 320px;
  margin: 0;
  font-size: var(--fs-14);
}
.rb-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--bg-sunken);
}
.rb-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: default;
}
.rb-state {
  position: absolute;
  top: 16px;
  left: 50%;
  max-width: calc(100% - 32px);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--overlay);
  color: var(--on-overlay);
  font-size: var(--fs-14);
  transform: translateX(-50%);
}
.rb-state[hidden],
.rb-page-dialog[hidden] {
  display: none;
}
.rb-page-dialog {
  position: absolute;
  top: 64px;
  left: 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: min(420px, calc(100% - 32px));
  padding: 16px;
  border-radius: var(--r-12);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-dialog);
  transform: translateX(-50%);
}
.rb-page-dialog p {
  flex: 1 1 100%;
  margin: 0;
  overflow-wrap: anywhere;
}
.rb-foot {
  position: relative;
  border-top: 1px solid var(--divider);
}
.rb-type {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  font-size: var(--fs-16);
}
@media (pointer: fine) {
  .rb-foot {
    display: none;
  }
}
@media (max-width: 767px) {
  .rb-dialog {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .rb-head .btn:not(.btn-primary) {
    padding: 0 12px;
  }
  /* Title on its own line, the buttons below it, so "Fertig – …" is never cut off. */
  .rb-head {
    flex-wrap: wrap;
  }
  .rb-head .rb-title {
    flex: 1 0 100%;
  }
  .rb-head .btn,
  .rb-bar .btn,
  .rb-foot .btn {
    min-height: 44px;
  }
}

/* 36 · Musik: Musikrunden mit Party-Radio (musik.html, musik.js) ------------------- */
/* Angemeldete bekommen die App-Hülle; der schlanke Gast-Kopf gilt nur auf /musik/r/…. */
body:not([data-guest]) .musik-guest-header {
  display: none;
}
body.guest-layout .musik-page {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 24px;
}
.musik-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.musik-join {
  max-width: 560px;
}
.musik-state {
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--chip);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}
.musik-state[data-playing="true"] {
  color: var(--text);
}
.musik-state[data-playing="true"]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  background-image: var(--accent-img);
}
.musik-state:empty {
  display: none;
}

/* Übersicht */
.musik-rounds {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.musik-round-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--r-12);
  color: inherit;
  text-decoration: none;
}
.musik-round-link:hover,
.musik-round-link:focus-visible {
  background: var(--chip);
}
.musik-round-link .row-body {
  flex: 1 1 auto;
}
.musik-round-icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-12);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Runde: Hauptspalte und Seitenspalte */
.musik-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 20px;
}
.musik-main,
.musik-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.musik-now-body {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}
.musik-now-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-2);
}
.musik-now-empty strong {
  color: var(--text);
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
}
.musik-now-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.musik-eyebrow {
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.musik-now-title {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: 28px;
  overflow-wrap: anywhere;
}
.musik-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.musik-times {
  display: flex;
  justify-content: space-between;
  color: var(--text-2);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}
.musik-now-info .actions {
  margin-top: 8px;
}
.musik-next {
  margin: -4px 4px 0;
  color: var(--text-2);
  font-size: var(--fs-14);
  overflow-wrap: anywhere;
}
.musik-next strong {
  color: var(--text);
  font-weight: var(--fw-medium);
}
.musik-next .t-sub {
  display: inline;
}

/* Cover: Bild über einer ruhigen Fläche mit Notensymbol */
.musik-cover {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-8);
  background: var(--chip);
  color: var(--text-2);
}
.musik-cover.lg {
  width: 160px;
  height: 160px;
  border-radius: var(--r-12);
}
.musik-cover.lg .ico {
  width: 48px;
  height: 48px;
}
.musik-cover > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Anhören: großes Cover statt eines schwarzen Bildes, darunter Titel, Fortschritt, Tasten */
.musik-cover.xl {
  width: min(320px, 100%);
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-16);
}
.musik-cover.xl .ico {
  width: 72px;
  height: 72px;
}
.musik-listen-layout {
  grid-template-columns: minmax(0, 1fr) 360px;
}
.musik-listen {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 24px;
}
.musik-listen-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.musik-listen-artist {
  color: var(--text-2);
  font-size: var(--fs-16);
  overflow-wrap: anywhere;
}
.musik-listen-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.musik-listen-play {
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
}
/* .btn-icon clears the background; the main button keeps the primary colours. */
.btn-icon.musik-listen-play,
.btn-icon.musik-listen-play:hover {
  background: var(--inverse);
  color: var(--on-inverse);
}
.musik-listen-play .ico {
  width: 24px;
  height: 24px;
}
.musik-listen-queue {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0 8px 8px;
  list-style: none;
}
.musik-listen-pick {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 8px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--r-8);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.musik-listen-pick:hover {
  background: var(--chip);
}
.musik-listen-pick[aria-current="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}
.musik-listen-pos {
  grid-row: span 2;
  color: var(--text-2);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
  line-height: 20px;
}
.musik-listen-name {
  overflow: hidden;
  font-size: var(--fs-14);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.musik-listen-by {
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--fs-12);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Liedzeilen: meine Liste, Treffer, Sammlung, Verlauf */
.musik-songs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.musik-songs:empty {
  display: none;
}
.musik-history {
  padding: 8px 12px 12px;
}
.musik-song {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 4px 8px;
  border-radius: var(--r-12);
}
.musik-song:hover {
  background: var(--chip);
}
.musik-song-body,
.musik-member-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.musik-song-body .t-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.musik-fail,
.musik-history-state[data-state="failed"] {
  color: var(--error);
  font-size: var(--fs-12);
}
.musik-history-state {
  color: var(--text-2);
  font-size: var(--fs-12);
}
.musik-history-state[data-state="skipped"] {
  color: var(--warning);
}
.musik-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.musik-add {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.musik-song[draggable="true"],
.musik-member[draggable="true"] {
  cursor: grab;
}
.musik-song[data-dragging="true"],
.musik-member[data-dragging="true"] {
  opacity: 0.5;
}
.musik-song[data-drop="true"],
.musik-member[data-drop="true"] {
  box-shadow: inset 0 2px 0 var(--accent);
}

/* Reihum */
.musik-members {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 8px 12px 12px;
  list-style: none;
}
.musik-member {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 4px 6px;
  border-radius: var(--r-12);
}
.musik-member[data-playing="true"] {
  background: var(--accent-soft);
}
.musik-member[data-absent="true"] .musik-member-body,
.musik-member[data-absent="true"] .musik-turn {
  opacity: 0.55;
}
.musik-member .t-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.musik-turn {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--chip);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}
.musik-member[data-paused="true"] .musik-turn {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--divider);
}
.musik-badge {
  flex: none;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background-color: var(--accent);
  background-image: var(--accent-img);
  color: var(--accent-on);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}
.musik-member .menu {
  min-width: 220px;
}
.musik-invite {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.musik-invite .field-input {
  text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  .musik-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .musik-listen {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
  }
  .musik-cover.xl {
    align-self: center;
  }
  .musik-listen-controls {
    justify-content: center;
  }
}
@media (max-width: 560px) {
  .musik-now-body {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
  }
  .musik-now-empty {
    flex-direction: row;
  }
  .musik-cover.lg {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-width: 280px;
    align-self: center;
  }
  .musik-song,
  .musik-member {
    gap: 8px;
    padding-inline: 4px;
  }
  .musik-members,
  .musik-history {
    padding-inline: 8px;
  }
  .musik-tools .btn-icon.btn-sm {
    width: 36px;
    height: 36px;
  }
}

/* 37 · Teilen-Ziel: geteilte Links aus Handy-Apps (teilen.html, teilen.js) ---------- */
.share-page > .card {
  max-width: 720px;
}
.share-status:empty {
  display: none;
}
.share-status {
  color: var(--text-2);
  font-size: var(--fs-14);
}
.share-text {
  padding: 10px 14px;
  border-radius: var(--r-12);
  background: var(--bg-sunken);
  font-size: var(--fs-14);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.share-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.share-form .field-label {
  margin-bottom: 0;
}
.share-actions,
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.share-row .linkfield {
  flex: 1 1 240px;
}
.share-guide {
  font-size: var(--fs-14);
}
.share-details > summary {
  font-weight: var(--fw-medium);
}
.share-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  padding-left: 22px;
  list-style: decimal;
}
.share-steps code {
  overflow-wrap: anywhere;
}

/* 38 · Musikdienste: Konten-Gruppe und Playlists einlesen (accounts.js, musik.js) ---- */
#music-accounts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block-end: 8px;
}
#music-accounts[hidden] {
  display: none;
}
#music-accounts > .section-title {
  margin-block: 24px 0;
  font-size: var(--fs-18);
}
/* Music services without cookies: the sign-in row is the whole card. */
.account-card[data-cookies="none"] .account-oauth {
  padding-block-end: 0;
  margin-block-end: 0;
  border-block-end: 0;
}
/* Sentences with a link flow as text instead of the flex row of .t-sub. */
.account-card[data-cookies="none"] .card-body > .t-sub,
#bibliothek-hint {
  display: block;
}
.accounts-unset {
  margin-block-start: 24px;
}
.accounts-unset > summary {
  width: fit-content;
  padding-block: 4px;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--link);
}
.accounts-unset[open] > summary {
  margin-bottom: 8px;
}
.accounts-unset-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.account-unset {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 8px 12px;
  border-radius: var(--r-12);
  background: var(--bg-sunken);
}
.account-unset .t-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.account-unset .t-sub {
  color: var(--text-2);
}

.musik-library {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin-block-start: 12px;
}
.musik-library[hidden],
.musik-library-seg[hidden],
#bibliothek-hint[hidden] {
  display: none;
}
.musik-library > .t-sub {
  max-width: 72ch;
}
/* Many services: the switch scrolls sideways instead of widening the page on phones. */
.musik-library-seg {
  align-self: flex-start;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.musik-library-seg .seg-opt {
  flex: none;
}
.musik-library-panel:empty {
  display: none;
}
.musik-library-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.musik-library-row .t-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.musik-library-import {
  flex: none;
}
.musik-library[aria-busy="true"] .musik-songs {
  opacity: 0.7;
}