/* Seitenlayouts. Wie alles hier: nur Tokens, keine festen Werte. */

/* ------------------------------------------------------------------ App */
.app { display: flex; min-height: 100vh; }

.topbar {
  height: var(--topbar-height);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-0);
  position: sticky; top: 0; z-index: var(--z-sticky);
}

.brand {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: var(--weight-bold); color: var(--ink-900);
  font-size: var(--text-md);
}
.brand__mark {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--brand-500), var(--deco-purple));
  display: grid; place-items: center; color: #fff; font-size: var(--text-xs);
}

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.content {
  flex: 1 1 auto;
  padding: var(--space-6);
  max-width: var(--content-max);
  width: 100%;
}

.search-wrap { flex: 1 1 320px; max-width: 420px; }

/* ------------------------------------------------------------------ Player */
.player { max-width: 1180px; margin: 0 auto; padding: var(--space-6) var(--space-4); }

.player__stage {
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
}
.player__video { width: 100%; height: 100%; display: block; background: #000; }
.player__info { padding: var(--space-6) var(--space-1); }

/* ------------------------------------------------------------------ Torseiten */
/* Login, Setup, Passwortabfrage. Der Verlauf dahinter gibt dem Glas
   überhaupt erst etwas zum Verwischen. */
.gate {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--space-6);
  background: var(--surface-1);
  background-image: var(--glass-backdrop);
  background-attachment: fixed;
}
.gate__card {
  width: min(420px, 100%);
  padding: var(--space-8);
  text-align: center;
}
.gate__card .field { text-align: left; }

@media (max-width: 860px) {
  .content { padding: var(--space-4); }
  .player { padding: var(--space-3) 0; }
  .player__stage { border-radius: 0; }
}