/* ==========================================================================
   Podcasts — dunkles Theme, angelehnt an die Tesla-Fahrzeug-UI
   (Hauptnutzung: Center-Display im Auto, oft aus etwas Distanz bedient)
   Farb-Tokens:
     --bg            #000000  reines Schwarz, wie die Tesla-Oberfläche
     --surface        #17181C  Karten/Zeilen
     --surface-hover  #202127  Hover/Touch-Zustand
     --border         #2C2D33  dezente Trennlinien
     --text           #FFFFFF  Haupttext
     --text-muted     #8E8E96  Sekundärtext
     --accent         #3E6AE1  "Tesla-Blau" — Signalfarbe (aktiv/Play/Fokus)
     --accent-dim     #24407F  gedämpfte Variante für Ränder/Verläufe
   Ein Schriftschnitt (Inter) für die gesamte Oberfläche statt Display-/Body-
   Pairing -- passend zu einer Fahrzeug-UI, die selbst konsequent eine
   Type-Familie in verschiedenen Schnitten nutzt. Monospace nur noch für die
   laufende Zeitanzeige (verhindert Zittern beim Hochzählen der Sekunden).
   Bedienelemente sind bewusst groß dimensioniert (Touchscreen im Auto, oft
   auf Distanz bedient), auf großen Displays (>=900px) skaliert die gesamte
   Oberfläche zusätzlich hoch.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --bg: #000000;
  --surface: #17181c;
  --surface-hover: #202127;
  --border: #2c2d33;
  --text: #ffffff;
  --text-muted: #8e8e96;
  --accent: #3e6ae1;
  --accent-dim: #24407f;
  --accent-soft: rgba(62, 106, 225, 0.16);
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

@media (min-width: 900px) {
  /* Center-Display im Auto wird meist aus etwas Distanz bedient/gelesen --
     die gesamte Oberfläche (alle rem-Werte) etwas größer skalieren. */
  html {
    font-size: 118%;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Login-Seite ---------- */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(62, 106, 225, 0.12), transparent 55%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  padding: 44px 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  text-align: center;
}

.login-mark {
  display: flex;
  justify-content: center;
  gap: 6px;
  height: 30px;
  align-items: flex-end;
  margin-bottom: 22px;
}

.login-mark .bar {
  width: 6px;
  border-radius: 3px;
  background: var(--accent-dim);
  animation: meter 1.8s ease-in-out infinite;
}

.login-mark .bar:nth-child(1) { height: 40%; animation-delay: -1.2s; }
.login-mark .bar:nth-child(2) { height: 90%; animation-delay: -0.6s; }
.login-mark .bar:nth-child(3) { height: 60%; animation-delay: -1.8s; }
.login-mark .bar:nth-child(4) { height: 75%; animation-delay: -0.3s; }

.login-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.login-sub {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0 0 28px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-form input[type="password"] {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 1.05rem;
  font-family: var(--font-body);
}

.login-form input[type="password"]:focus {
  border-color: var(--accent-dim);
}

.login-form button {
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.login-form button:hover {
  filter: brightness(1.12);
}

.login-error {
  margin: 18px 0 0;
  color: #ff6b6b;
  font-size: 0.9rem;
}

/* ---------- App-Shell ---------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.app-header-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.logout-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.logout-link:hover {
  color: var(--text);
  border-color: var(--accent-dim);
}

.episode-list-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 24px 160px;
}

.empty-state {
  color: var(--text-muted);
  text-align: center;
  padding: 60px 20px;
  line-height: 1.6;
}

/* ---------- Podcast-Übersicht (Ordner-Auswahl) ---------- */

.podcast-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.podcast-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.podcast-card:hover {
  background: var(--surface-hover);
  border-color: var(--accent-dim);
  transform: translateY(-1px);
}

.podcast-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.podcast-card-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.back-link {
  display: inline-block;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 8px 4px;
  margin: -8px 0 12px -4px;
  transition: color 0.15s ease;
}

.back-link:hover {
  color: var(--accent);
}

.podcast-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}

.episode-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.episode-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.episode-row:hover {
  background: var(--surface-hover);
  border-color: var(--accent-dim);
}

.episode-row.is-playing {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.episode-select {
  flex: 1;
  min-width: 0;
  display: block;
  text-align: left;
  background: none;
  border: none;
  padding: 6px 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.episode-select:hover .episode-title {
  color: var(--accent);
}

.episode-row.is-playing .episode-title {
  color: var(--accent);
}

.episode-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.episode-title {
  font-size: 1rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.episode-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.download-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.download-btn:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.download-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ---------- Sticky "Now playing"-Leiste ---------- */

.now-playing {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: rgba(15, 16, 19, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
}

.now-playing[hidden] {
  display: none;
}

.np-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.np-meter {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
  width: 26px;
}

.np-meter span {
  width: 5px;
  height: 30%;
  border-radius: 3px;
  background: var(--accent-dim);
}

.now-playing.is-playing .np-meter span {
  background: var(--accent);
  animation: meter 1s ease-in-out infinite;
}

.now-playing.is-playing .np-meter span:nth-child(1) { animation-delay: -0.9s; }
.now-playing.is-playing .np-meter span:nth-child(2) { animation-delay: -0.4s; }
.now-playing.is-playing .np-meter span:nth-child(3) { animation-delay: -0.7s; }
.now-playing.is-playing .np-meter span:nth-child(4) { animation-delay: -0.15s; }

.np-playpause {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--accent-dim);
  background: var(--accent-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.np-playpause svg {
  width: 24px;
  height: 24px;
  fill: var(--accent);
}

.np-playpause .icon-pause { display: none; }
.now-playing.is-playing .np-playpause .icon-play { display: none; }
.now-playing.is-playing .np-playpause .icon-pause { display: block; }

.np-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.np-title-wrap {
  overflow: hidden;
  white-space: nowrap;
}

.np-title-seg {
  font-size: 0.95rem;
  font-weight: 500;
}

/* Ohne Ticker (Titel passt oder Bewegung reduziert): einzeiliger Block mit
   Ellipsis wie zuvor. */
.np-title-wrap:not(.is-marquee) .np-title-track {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ein zweites (verstecktes) Segment existiert nur im Ticker-Modus -- hier
   vorsorglich ausblenden, falls JS es doch mal stehen lässt. */
.np-title-wrap:not(.is-marquee) .np-title-seg:nth-child(2) {
  display: none;
}

/* Ticker-Modus: Titel passt nicht -- zwei Kopien nebeneinander, die
   Text-Spur läuft nahtlos endlos durch (JS aktiviert das nur bei
   tatsächlichem Überlauf, siehe assets/app.js). */
.np-title-wrap.is-marquee .np-title-track {
  display: inline-flex;
  width: max-content;
  animation-name: np-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.np-title-wrap.is-marquee .np-title-seg {
  padding-right: 48px;
  white-space: nowrap;
}

@keyframes np-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.np-seek-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.np-time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  width: 38px;
  flex: none;
}

.np-time-total {
  text-align: right;
}

.np-seek {
  flex: 1;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  outline: none;
}

.np-seek::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  margin-top: -6px;
}

.np-seek::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.np-seek::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--accent) var(--progress, 0%), var(--border) var(--progress, 0%));
}

.np-download {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-decoration: none;
}

.np-download:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.np-download svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

@keyframes meter {
  0%, 100% { height: 25%; }
  50% { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .login-mark .bar,
  .now-playing.is-playing .np-meter span {
    animation: none !important;
    height: 60% !important;
  }

  /* app.js aktiviert den Ticker bei reduzierter Bewegung ohnehin nicht neu,
     dieser Block ist nur ein zusätzliches Sicherheitsnetz. */
  .np-title-wrap.is-marquee .np-title-track {
    animation: none !important;
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .np-title-wrap.is-marquee .np-title-seg:nth-child(2) {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .np-meter { display: none; }
  .np-inner { gap: 10px; }
  .np-time {
    width: 32px;
    font-size: 0.7rem;
  }
}