/* ============================================================
   KIPPFLIX – Stylesheet
   Aesthetic: Clean Arthouse — Apple-inspired geometry, warm palette
   Fonts: Plus Jakarta Sans (headings) + DM Sans (body)
   Icons: Lucide (monochrome SVG)
   ============================================================ */

/* ============================================================
   1. CSS-VARIABLEN
   ============================================================ */
:root {
  --bg-primary:    #141414;
  --bg-secondary:  #1a1a1a;
  --bg-card:       #1f1f1f;
  --bg-elevated:   #2a2a2a;
  --accent:        #e50914;
  --accent-dark:   #b8060f;  /* C21: Dunklere Variante für :active-States */
  --accent-bright: #ff2a37;
  --gold:          #e8e8e8;
  --text-primary:  #ffffff;
  --text-secondary:#b3b3b3;
  --text-muted:    #808080;
  --border:        #2a2a2a;
  --border-warm:   #333333;

  --tier-masterpiece: #e50914;
  --tier-excellent:   #ff6b6b;
  --tier-good:        #b3b3b3;
  --tier-mixed:       #777777;
  --tier-bad:         #444444;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --nav-height: 52px;

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}


/* ============================================================
   BARRIEREFREIHEIT
   ============================================================ */

/* Skip-Link: springt zum Hauptinhalt, sichtbar nur beim Fokussieren */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 10001;
  transition: top .15s;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* Focus-Styles: sichtbare Fokus-Umrandung für Tastatur-Navigation */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   2. RESET & GRUNDSTILE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden; /* Verhindert horizontales Scrollen auf der ganzen Seite */
  /* Subtile Grain-Textur als Overlay */
  position: relative;
}

/* Grain-Textur über allem */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* Scroll-Fortschrittsbalken */
#scroll-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  z-index: 10000;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ============================================================
   3. NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: rgba(14, 12, 10, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: none;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  padding: 14px 32px 0;
}

.nav__inner {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}

/* Logo: saubere geometrische Schrift, kompaktes Wordmark */
.nav__logo {
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  user-select: none;
  display: flex;
  align-items: center;
}

/* Logo: KIPPFLIX SVG Wordmark mit Wölbung */
.nav__logo-img {
  display: block;
  height: 26px;   /* SVG hat arc-Padding → visuelle Buchstabenhöhe ~16px */
  width: auto;
}

.nav__links {
  display: flex;
  gap: 4px;
  flex: 1;
}

.nav__link {
  padding: 0 14px 8px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color 0.2s;
  border: none;
  background: none;
  letter-spacing: 0;
  position: relative;
  line-height: 1;
}

.nav__link:hover { color: var(--text-primary); }

.nav__link.active { color: var(--text-primary); }

/* Aktiv-Indikator: kleiner Punkt statt Linie */
.nav__link.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}


/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  margin-left: auto;
}
.nav__hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   4. SEKTIONEN
   ============================================================ */
.section {
  display: none;
  min-height: 100vh;
  padding-top: var(--nav-height);
  animation: sectionFade 0.4s ease;
}
.section.active { display: block; }

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

/* ============================================================
   4a. HERO
   ============================================================ */
.hero {
  position: relative;
  height: 72vh;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  padding: 56px 56px 52px;
  overflow: hidden;
}

.home-byline {
  display: flex;
  justify-content: flex-start;
  padding: 4px 32px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.6;
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  transition: background-image 0s; /* Bild-Swap ohne Flickern */
}

/* Crossfade-Transition: Hero blendet aus/ein */
.hero--transitioning .hero__backdrop,
.hero--transitioning .hero__content {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero__backdrop,
.hero__content {
  transition: opacity 0.5s ease;
}

/* Warmes, dramatisches Gradient-Overlay */
.hero__backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(10, 8, 6, 1.0)   0%,
      rgba(10, 8, 6, 0.75) 40%,
      rgba(10, 8, 6, 0.15) 100%),
    linear-gradient(to right,
      rgba(10, 8, 6, 0.6) 0%,
      transparent 60%);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 660px;
}

.hero__rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #0e0c0a;
  padding: 5px 14px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 54px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.05;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
  margin-bottom: 10px;
}

.hero__year {
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  font-weight: 500;
}

/* Meta-Zeile im Hero: Jahr · Laufzeit · Genre · Regisseur */
.hero__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}
.hero__meta-row span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 3px 10px;
  backdrop-filter: blur(4px);
}
.hero__meta-runtime--short { color: #10b981 !important; } /* Kurzfilm: grün */
.hero__meta-runtime--long  { color: #f59e0b !important; } /* Sehr lang: amber */
.hero__meta-director {
  cursor: pointer;
}
.hero__meta-director:hover {
  background: rgba(229,9,20,.15) !important; /* C36: amber → roter Hover-Hintergrund */
  color: var(--accent) !important;
}

/* Scroll-Indikator am unteren Rand des Hero-Bereichs */
.hero__scroll-indicator {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  animation: scrollBounce 2s ease-in-out infinite;
  transition: background 0.2s, color 0.2s;
  z-index: 5;
}
.hero__scroll-indicator:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

.hero__tagline {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 17px;
  margin-bottom: 28px;
  font-family: var(--font-display);
  font-weight: 700;
}

.hero__overview {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 24px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.hero__buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   5. STATS-LEISTE
   ============================================================ */
.stats-bar {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 56px;
  display: flex;
  gap: 48px;
  align-items: center;
  flex-wrap: wrap;
}

.stats-bar__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stats-bar__number {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0;
}
.stats-bar__item--genre { cursor: pointer; }
.stats-bar__item--genre:hover .stats-bar__genre { color: var(--accent); }
.stats-bar__genre {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  transition: color .15s;
}

/* Mini-Histogramm in der Stats-Leiste */
.stats-bar__item--hist {
  align-items: center;        /* überschreibt baseline — damit das div sichtbar ist */
  flex-direction: column;
  gap: 4px;
}
.stats-hist {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
  width: 60px;
}
.stats-hist__bar {
  flex: 1;
  background: var(--accent);
  opacity: 0.5;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: opacity 0.15s;
}
.stats-bar__item--hist:hover .stats-hist__bar { opacity: 1; }

/* Schnellfilter-Chips */
.quick-filters {
  padding: 14px 56px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
}
.quick-filter-chip {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-warm);
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.quick-filter-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(229,9,20,0.06);
}

/* ============================================================
   6. HOME STRIPS
   ============================================================ */
.home-content { padding: 40px 56px; }

/* "Teile Kippflix"-Banner auf der Startseite */
.home-share-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 56px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  flex-wrap: wrap;
}
.home-share-banner__text {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.home-share-banner__btn {
  padding: 5px 14px;
  border-radius: 14px;
  border: 1px solid var(--accent);
  background: none;
  color: var(--accent);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.home-share-banner__btn:hover { background: var(--accent); color: #0e0c0a; }
.home-share-banner__close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}
.home-share-banner__close:hover { color: var(--text-secondary); }

/* Stimmungs-Widget auf der Startseite */
.home-mood-widget {
  padding: 20px 56px 0;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.home-mood-label {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.home-mood-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.home-mood-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}
.home-mood-btn:hover {
  border-color: var(--accent);
  background: rgba(229,9,20,0.06);
  color: var(--accent);
  transform: translateY(-1px);
}
.home-mood-btn__label { font-weight: 500; }

/* Streaming-Provider-Zeile auf der Startseite */
.home-streaming-row {
  padding: 18px 56px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.home-streaming-label {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.home-streaming-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.home-streaming-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.home-streaming-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(229,9,20,0.06);
}
.home-streaming-chip__count {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 0 5px;
}

/* --- Genre-Kacheln auf Startseite --- */
.home-genre-row {
  margin: 0 0 32px;
}
.home-genre-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.home-genre-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.home-genre-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  transition: transform 0.15s, border-color 0.15s;
}
.home-genre-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  color: var(--accent);
}
.home-genre-chip__count {
  font-size: 10px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 0 5px;
}

.strip-section { margin-bottom: 48px; }

.strip-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.strip-section__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.strip-section__show-all {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 0;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
  flex-shrink: 0;
}
.strip-section__show-all:hover { color: var(--accent-bright); }

.strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.strip::-webkit-scrollbar { height: 3px; }
.strip::-webkit-scrollbar-track { background: transparent; }
.strip::-webkit-scrollbar-thumb {
  background: var(--border-warm);
  border-radius: 2px;
}

.strip .card {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 158px;
}

/* ============================================================
   7. FILMKARTEN
   ============================================================ */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  transform: translateY(-2px);
}

/* Subtiler Tier-Glow am unteren Rand + linker Streifen beim Hover */
.card.tier-masterpiece { box-shadow: 0 2px 12px rgba(229,9,20,0.10); }
.card.tier-excellent   { box-shadow: 0 2px 12px rgba(255,107,107,0.08); }
.card.tier-good        { box-shadow: none; }
.card.tier-masterpiece:hover { box-shadow: 0 6px 20px rgba(229,9,20,0.22); }
.card.tier-excellent:hover   { box-shadow: 0 6px 20px rgba(180,180,180,0.12); }
.card.tier-good:hover        { box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.card.tier-mixed:hover       { box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.card.tier-bad:hover         { box-shadow: 0 6px 20px rgba(0,0,0,0.3); }

.card__poster {
  position: relative;
  aspect-ratio: 2/3;
  background: var(--bg-elevated);
  overflow: hidden;
}

.card__poster img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .card__poster img { transform: none; }


.card__poster-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  background: var(--bg-elevated);
}
/* Tier-Farbtönung wenn kein Poster vorhanden */
.card.tier-masterpiece .card__poster-placeholder { background: linear-gradient(135deg, rgba(232,184,109,0.12), var(--bg-elevated)); }
.card.tier-excellent   .card__poster-placeholder { background: linear-gradient(135deg, rgba(16,185,129,0.10), var(--bg-elevated)); }
.card.tier-good        .card__poster-placeholder { background: linear-gradient(135deg, rgba(59,130,246,0.08), var(--bg-elevated)); }
.card.tier-mixed       .card__poster-placeholder { background: linear-gradient(135deg, rgba(139,92,246,0.08), var(--bg-elevated)); }

.card__poster .card__tier {
  position: absolute;
  top: 8px; right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 3px;
  background: rgba(0,0,0,0.65);
  z-index: 3;
  cursor: default;
  pointer-events: auto;
}
.card__tier--sideways svg { transform: rotate(90deg); }
.card__poster .card__tier:hover {
  background: rgba(0,0,0,0.85);
  filter: brightness(1.4);
  transition: filter 0.15s ease, background 0.15s ease;
}

.card__poster .card__tier.tier-masterpiece { color: #f59e0b; border: 1px solid rgba(255,255,255,0.4); }
.card__poster .card__tier.tier-excellent   { color: #a78bfa; border: 1px solid rgba(255,255,255,0.3); }
.card__poster .card__tier.tier-good        { color: #a8a29e; border: 1px solid rgba(255,255,255,0.15); }
.card__poster .card__tier.tier-mixed       { color: #6b7280; border: 1px solid rgba(255,255,255,0.08); }
.card__poster .card__tier.tier-bad         { color: #4b5563; border: 1px solid rgba(255,255,255,0.06); }

/* Rating-Badge unten links auf Postern */
.card__rating-badge {
  position: absolute;
  bottom: 8px; left: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  pointer-events: none;
}

/* Watchlist-Herz-Button auf Karten */
.card__watchlist-btn {
  position: absolute;
  bottom: 8px; right: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(14, 12, 10, 0.7);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s, background 0.2s;
  line-height: 1;
}
.card:hover .card__watchlist-btn { opacity: 1; }
.card__watchlist-btn.active {
  color: #e8534a;
  background: rgba(232, 83, 74, 0.15);
  border-color: rgba(232, 83, 74, 0.4);
  opacity: 1;
}
.card__watchlist-btn:hover { background: rgba(232, 83, 74, 0.2); color: #e8534a; }

/* "Gesehen"-Markierung entfernt — passt nicht zu Freunde-Empfehlungs-Kontext */
.card__seen-badge { display: none; }

/* Watchlist-Button im Modal */
.watchlist-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-warm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.watchlist-btn:hover { border-color: #e8534a; color: #e8534a; }
.watchlist-btn.active {
  background: rgba(232, 83, 74, 0.1);
  border-color: #e8534a;
  color: #e8534a;
}

.card__info {
  padding: 10px 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card__title {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.card__meta {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}
.card__meta-badge {
  font-size: 9px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--text-muted);
  line-height: 1.5;
}

.card__rating {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 4px;
}

.card__gem {
  font-size: 10px;
  color: var(--gold);
}
.card__streaming-badge {
  display: inline-block;
  font-size: 8px; font-weight: 700;
  background: rgba(16,185,129,.15);
  color: #10b981;
  border-radius: 3px; padding: 1px 4px;
  margin-left: 3px; vertical-align: middle;
  letter-spacing: .3px;
}

/* ============================================================
   7b. DISCOVER GRID
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 18px;
}
/* Größen-Varianten */
.card-grid--small  { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.card-grid--large  { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }

/* Erweiterter Info-Block: nur im Large-Grid sichtbar */
.card__extra { display: none; margin-top: 6px; }
.card-grid--large .card__extra { display: block; }
.card__extra-genre {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
  margin: 0 3px 3px 0;
}
.card__extra-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Größen-Toggle-Buttons */
.grid-size-toggle {
  display: flex;
  gap: 4px;
  align-items: center;
}
.grid-size-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  font-size: 11px;
}
.grid-size-btn:hover,
.grid-size-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

/* Staggered animation für Karten — nur opacity, kein transform (verhindert Hover-Konflikt) */
.card-grid .card {
  animation: cardIn 0.3s ease backwards;
}
.card-grid .card:nth-child(1)  { animation-delay: 0.02s; }
.card-grid .card:nth-child(2)  { animation-delay: 0.04s; }
.card-grid .card:nth-child(3)  { animation-delay: 0.06s; }
.card-grid .card:nth-child(4)  { animation-delay: 0.08s; }
.card-grid .card:nth-child(5)  { animation-delay: 0.10s; }
.card-grid .card:nth-child(6)  { animation-delay: 0.12s; }
.card-grid .card:nth-child(7)  { animation-delay: 0.14s; }
.card-grid .card:nth-child(8)  { animation-delay: 0.16s; }

@keyframes cardIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   8. ENTDECKEN & FILTER
   ============================================================ */
.discover { padding: 32px 56px 56px; }

.discover__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 24px;
}
.discover__title { flex-basis: 100%; }
#discover-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
}
#filter-advancedlogic {
  margin-left: auto;
  align-self: flex-end;
  margin-bottom: 8px;
}
#filter-negate {
  align-self: flex-end;
  margin-bottom: 8px;
  margin-left: 6px;
}
.filters, .discover__count { flex-basis: 100%; }

.discover__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

#random-film-btn {
  font-size: 13px;
}

.filters {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.filter-search {
  display: flex;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  gap: 8px;
  flex: 1;
  min-width: 200px;
  transition: border-color 0.2s;
}
.filter-search:focus-within { border-color: var(--accent); }

.filter-search__icon { color: var(--text-muted); font-size: 14px; }

.filter-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  padding: 9px 0;
  width: 100%;
}
.filter-search input::placeholder { color: var(--text-muted); }

.filter-select {
  background: var(--bg-elevated);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  padding: 9px 28px 9px 10px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a5248'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 120px;
  transition: border-color 0.2s;
}
.filter-select:focus { border-color: var(--accent); }
.filter-select option { background: var(--bg-card); }

.filter-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.filter-toggle.active {
  background: rgba(229, 9, 20, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}
.filter-toggle.disabled,
.filter-toggle:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.filter-toggle-count {
  font-size: 11px;
  opacity: 0.6;
  margin-left: 2px;
}

.btn-reset {
  background: none;
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.btn-reset:hover { border-color: var(--accent); color: var(--accent); }

.discover__count {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
  letter-spacing: 0.3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.discover__count strong { color: var(--text-secondary); }

/* Ausklappbare "Weitere Filter"-Sektion */
.filter-more-details {
  width: 100%;
  flex-basis: 100%;
}
.filter-more-summary {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 2px;
  user-select: none;
  list-style: none; /* Pfeil-Dreieck selbst gestalten */
  display: flex;
  align-items: center;
  gap: 5px;
}
.filter-more-summary::before {
  content: '▸';
  font-size: 10px;
  transition: transform 0.15s ease;
  display: inline-block;
}
.filter-more-details[open] .filter-more-summary::before {
  transform: rotate(90deg);
}
.filter-more-summary::-webkit-details-marker { display: none; }
.filter-more-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
}

/* Multi-Select Filter: Wrapper mit Dropdown + Chips */
.filter-multiselect-wrap {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

/* Chip-Zeile unter dem Dropdown */
.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Einzelner aktiver Filter-Chip */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.filter-chip__x {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1;
  font-family: inherit;
}
.filter-chip__x:hover { color: #fff; }

/* AND/OR Toggle */
.filter-op-toggle {
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.filter-op-toggle button {
  padding: 3px 7px;
  background: var(--bg-card);
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.filter-op-toggle button + button {
  border-left: 1px solid var(--border);
}
.filter-op-toggle button.active {
  background: var(--accent);
  color: #fff;
}

/* Verbinder zwischen zwei Filter-Gruppen */
.filter-and-connector {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  align-self: center;
}

/* Chip der zweiten Gruppe: leicht andere Farbe zur Unterscheidung */
.filter-chip--group2 {
  background: var(--tier-excellent, #10b981);
}

/* Sortier-Pills über dem Discover-Grid */
.sort-pills-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.sort-pill {
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.sort-pill:hover {
  border-color: var(--accent);
  color: var(--text-secondary);
}
.sort-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* Empfehlungs-Quicklinks in Entdecken */
.discover-quicklinks {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.discover-quicklink {
  padding: 6px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.discover-quicklink:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(229,9,20,0.06);
}

/* Aktive Filter als klickbare Chips direkt neben dem Zähler */
.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 12px;
  background: rgba(229, 9, 20, 0.12);
  border: 1px solid rgba(229, 9, 20, 0.35);
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.active-filter-chip:hover {
  background: rgba(229, 9, 20, 0.22);
}

/* Gruppe von Chips desselben Filtertyps */
.active-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  border-radius: 14px;
  background: rgba(229, 9, 20, 0.06);
  border: 1px solid rgba(229, 9, 20, 0.2);
}
.active-filter-group .active-filter-chip {
  border: none;
  background: transparent;
  padding: 1px 7px;
}
.active-filter-group .active-filter-chip:hover {
  background: rgba(229, 9, 20, 0.15);
  border-radius: 10px;
}

/* AND/OR-Toggle zwischen Multi-Select-Chips in der Zeige-Zeile */
.active-filter-op-toggle {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #818cf8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.active-filter-op-toggle:hover {
  background: rgba(99, 102, 241, 0.22);
}

/* UND-Badge zwischen zwei verknüpften Filter-Gruppen */
.active-filter-and-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #34d399;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.no-results {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
}
.no-results__icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.no-results__text { font-size: 16px; color: var(--text-secondary); margin-bottom: 8px; }

/* ============================================================
   9. FINDER-WIZARD
   ============================================================ */
.finder {
  padding: 48px 40px;
  max-width: 860px;
  margin: 0 auto;
  /* Enhancement 23: Overflow-Schutz — verhindert horizontales Scrollen durch
     breite Elemente (z.B. langer Fragen-Text, Provider-Chips).
     clip statt hidden — hidden erstellt BFC → erzwingt overflow-y:auto → ungewollter Scrollbalken neben Finder */
  overflow-x: clip;
  /* S20: Scroll-Bounce auf iOS auf diesen Container beschränken */
  overscroll-behavior: contain;
}

.finder__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-align: center;
  margin-bottom: 8px;
}

.finder__subtitle {
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 40px;
  font-size: 15px;
}

.finder__progress {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 44px;
}

.finder__progress-step {
  width: 40px; height: 3px;
  background: var(--border-warm);
  border-radius: 2px;
  transition: background 0.3s ease;
}
.finder__progress-step.done   { background: var(--accent); }
.finder__progress-step.active { background: var(--accent-bright); }

.finder__question { text-align: center; }

.finder__question-number {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.finder__question-text {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 36px;
  line-height: 1.2;
}

.finder__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.finder__option {
  background: var(--bg-card);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* S1: Text nicht beim Tap selektierbar */
  user-select: none;
  /* S2: Kein blauer Flash auf iOS/Android beim Antippen */
  -webkit-tap-highlight-color: transparent;
}
.finder__option:hover {
  border-color: var(--accent);
  background: var(--bg-elevated);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
/* S6: Active-State mit leichter Skalierung für taktiles Feedback */
.finder__option:active {
  transform: scale(0.97);
  box-shadow: none;
}
.finder__option.selected {
  border-color: var(--accent);
  background: rgba(229, 9, 20, 0.1);
}

.finder__option-icon  {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.finder__option-icon .kf-icon { stroke-width: 1.5; }
.finder__option-label { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.finder__option-desc  { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.finder__option-count {
  font-size: 11px; font-weight: 600;
  color: var(--accent); margin-top: 6px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 10px; padding: 2px 8px; display: inline-block;
}

.finder__nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}

/* Enhancement 25: .finder__results war für klassisches Show/Hide — nicht mehr genutzt
   (Ergebnisse werden jetzt per innerHTML ins #finder-wizard gerendert).
   Klassen behalten für mögliche zukünftige Nutzung. */
.finder__results { display: none; }
.finder__results.visible { display: block; }

.finder__results-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
}
.finder__results-subtitle {
  font-size: 14px; /* Enhancement 21: explizite Schriftgröße für Konsistenz */
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 16px;
}
.finder__answer-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 10px 0 14px;
}
.finder__answer-chip {
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 20px;
  padding: 3px 10px;
}

.finder-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

.finder-card {
  background: var(--bg-card);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.finder-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}

.finder-card__backdrop {
  height: 160px;
  background: var(--bg-elevated);
  overflow: hidden;
  position: relative;
}
.finder-card__backdrop img { width: 100%; height: 100%; object-fit: cover; }
.finder-card__backdrop::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,26,22,0.85), transparent);
}

.finder-card__body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.finder-card__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  /* S25: Lange Titel sauber abschneiden */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finder-card__meta {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.finder-card__rating {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-family: var(--font-display);
  color: var(--gold);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.finder-card__rating span { font-size: 14px; color: var(--text-secondary); }
.finder-card__reason {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  /* S24: Max 2 Zeilen, dann Ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.finder-card__streaming {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto;
}
/* Finder-Karte: Badges + Action-Buttons */
.finder-card__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.finder-card__badge {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.finder-card__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.finder-card__watchlist-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-warm);
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.finder-card__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.finder-card__share-btn:hover { border-color: #10b981; color: #10b981; }
.finder-card__watchlist-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.finder-card__watchlist-btn.active {
  border-color: rgba(229,9,20,0.6);
  color: var(--accent);
  background: rgba(229,9,20,0.08);
}

.streaming-logo {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border);
}
.streaming-text {
  font-size: 11px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.load-more-btn {
  display: block;
  width: fit-content;
  margin: 8px auto 0;
  padding: 13px 40px;
  background: none;
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  letter-spacing: 0.3px;
}
.load-more-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.finder__reset-btn {
  display: block;
  margin: 0 auto;
  padding: 13px 36px;
  background: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  letter-spacing: 0.5px;
}
.finder__reset-btn:hover { background: var(--accent); color: #0e0c0a; }

/* ── Finder: Modus-Auswahl ──────────────────────────────────────── */
.finder__mode-selection { text-align: center; }

.finder__mode-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.finder__mode-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  text-align: center;
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  /* S2: Kein blauer Flash auf iOS/Android beim Antippen */
  -webkit-tap-highlight-color: transparent;
  /* S1: Text nicht beim Tap selektierbar */
  user-select: none;
}
.finder__mode-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
/* S7: Active-State mit leichter Skalierung für taktiles Feedback */
.finder__mode-card:active {
  transform: scale(0.97);
  box-shadow: none;
}
.finder__mode-card-icon {
  margin-bottom: 14px;
  color: var(--accent);
}
.finder__mode-card-label {
  font-weight: 700;
  font-size: 20px;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.finder__mode-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.finder__mode-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.finder__mode-card-features span {
  font-size: 11px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 20px;
}

/* Letzte Suche */
.finder__last-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.finder__last-search-label {
  font-size: 12px;
  color: var(--text-muted);
}
.finder__last-search-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.finder__last-search-chip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

/* Enhancement 19: Match-Badge auf Finder-Karte — oben links, klickbar */
/* S8: Min 32x32px Touch-Bereich */
.finder-card__match-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: rgba(0,0,0,0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  min-height: 32px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.finder-card__match-badge:hover { background: rgba(0,0,0,0.95); }

/* Top-Pick Karte */
.finder-card--top-pick {
  border: 1.5px solid var(--gold, #f59e0b);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.15), 0 4px 20px rgba(245,158,11,0.1);
}
.finder-card__top-pick-label {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--gold, #f59e0b);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  letter-spacing: 0.3px;
}

/* Watchlist-Button — unten links (tier-badge oben rechts bleibt unberührt) */
.finder-card__wl-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 2;
  background: rgba(0,0,0,0.65);
  border: none;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  backdrop-filter: blur(4px);
}
.finder-card__wl-btn:hover,
.finder-card__wl-btn.active { color: var(--accent); background: rgba(0,0,0,0.85); }

/* Enhancement 22: Nicht-für-mich-Button — unten rechts, Animation konsistent 0.2s */
.finder-card__dismiss-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(0,0,0,0.55);
  border: none;
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
  backdrop-filter: blur(4px);
}
.finder-card:hover .finder-card__dismiss-btn { opacity: 1; }
.finder-card__dismiss-btn:hover { color: var(--accent); }

/* Provider-Kacheln */
.finder__provider-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.finder__provider-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 72px;
  /* S3: Responsiveres Touch-Feeling, kein Delay */
  touch-action: manipulation;
  /* S2: Kein blauer Flash */
  -webkit-tap-highlight-color: transparent;
}
.finder__provider-tile:hover { border-color: var(--provider-color, var(--accent)); }
.finder__provider-tile.selected {
  border-color: var(--provider-color, var(--accent));
  background: color-mix(in srgb, var(--provider-color, var(--accent)) 15%, var(--bg-elevated));
}
/* Anbieter ohne Treffer: gedimmt und deaktiviert */
/* S45: Etwas mehr Opacity (0.5 statt 0.4) + border gestrichelt für klareren Empty-State */
.finder__provider-tile.empty,
.finder__provider-tile:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  border-style: dashed;
  filter: grayscale(0.4);
}
.finder__provider-tile-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.finder__provider-tile-count {
  font-size: 11px;
  color: var(--text-muted);
}

/* Fragen-Slide-Animation */
@keyframes finder-slide-from-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes finder-slide-from-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.finder__question--enter-right {
  animation: finder-slide-from-right 0.22s ease-out both;
}
.finder__question--enter-left {
  animation: finder-slide-from-left 0.22s ease-out both;
}

/* Score-Breakdown-Popup */
.finder-score-popup {
  position: fixed;
  z-index: 9999;
  background: var(--bg-elevated);
  border: 1px solid var(--border-warm);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 200px;
  max-width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  font-size: 13px;
}
.finder-score-popup__title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.finder-score-popup__list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.finder-score-popup__list li {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
}
.finder-score-popup__list li strong {
  color: var(--gold, #f5c518);
  margin-left: 12px;
}
.finder-score-popup__total {
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-warm);
  padding-top: 6px;
}

/* Live Pool-Zähler in Fragen */
.finder__pool-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 8px;
  font-weight: 400;
}

/* Zu-zweit Toggle-Button */
.finder__partner-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-warm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.finder__partner-toggle:hover {
  border-color: rgba(100, 180, 255, 0.5);
  color: var(--text-primary);
}
.finder__partner-toggle.active {
  border-color: rgba(100, 180, 255, 0.7);
  background: rgba(100, 180, 255, 0.1);
  color: #64b4ff;
}
.finder__partner-toggle-hint {
  font-size: 12px;
  opacity: 0.75;
}

/* ── Finder: Optionale Schritte ─────────────────────────────────── */
.finder__progress-step.optional {
  background: transparent;
  border: 1px dashed var(--border-warm);
}
.finder__progress-step.optional.done {
  background: var(--accent);
  border-style: solid;
}
.finder__progress-step.optional.active {
  background: transparent;
  border: 1.5px dashed var(--accent-bright);
}

.finder__optional-badge {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-warm);
  border-radius: 20px;
  padding: 1px 8px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.3px;
  font-family: var(--font-body);
}

/* Enhancement 20: Skip-Button font-size auf 14px (konsistent mit btn-secondary) */
.finder__skip-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 8px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
  font-family: inherit;
}
.finder__skip-btn:hover { color: var(--text-secondary); }

/* Streaming-Anbieter-Chips (erscheinen nach "Muss streambar sein") */
#finder-provider-chips-wrap {
  margin-top: 20px;
}
.finder__provider-section {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.finder__provider-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.finder__provider-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
/* Enhancement 25: .finder__provider-chips + .finder__provider-chip sind verwaiste Selektoren.
   Die aktuelle Implementierung nutzt .finder__provider-tiles + .finder__provider-tile.
   Klassen bleiben als Fallback erhalten, werden aber nicht aktiv generiert. */
.finder__provider-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.finder__provider-chip {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.finder__provider-chip:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text-primary);
}
.finder__provider-chip.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.finder__question-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: -4px;
  margin-bottom: 4px;
}

/* ── Finder: Favoriten-Inputs ───────────────────────────────────── */
.finder__fav-input-wrap {
  position: relative;
  max-width: 400px;
  margin: 20px auto 8px;
}

.finder__fav-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 9px 12px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
}
.finder__fav-input:focus { border-color: var(--accent); }
.finder__fav-input:disabled { opacity: 0.4; cursor: not-allowed; }

.finder__fav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  z-index: 500;
  max-height: 200px;
  overflow-y: auto;
}

.finder__fav-drop-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 12px 3px;
}
.finder__fav-drop-divider {
  height: 1px;
  background: var(--border-warm);
  margin: 4px 0;
}
.finder__fav-drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  transition: background 0.15s;
}
.finder__fav-drop-item:hover,
.finder__fav-drop-item--active { background: var(--bg-elevated); }
.finder__fav-drop-poster {
  width: 32px;
  height: 48px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.finder__fav-drop-poster--empty {
  background: var(--bg-elevated);
}
.finder__fav-drop-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.finder__fav-drop-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finder__fav-drop-meta { font-size: 12px; color: var(--text-muted); flex-shrink: 0; margin-left: auto; padding-left: 8px; }
/* Im Film-Dropdown sitzt meta in einer column-flex — margin-left:auto zurücksetzen */
.finder__fav-drop-info .finder__fav-drop-meta { margin-left: 0; padding-left: 0; }

.finder__fav-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  justify-content: center;
}

.finder__fav-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-warm);
  border-radius: 20px;
  padding: 4px 10px 4px 12px;
  font-size: 13px;
  color: var(--text-primary);
}

.finder__fav-chip-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  transition: color 0.2s;
  font-family: inherit;
}
.finder__fav-chip-remove:hover { color: var(--accent); }

/* ── Finder: Personen-Gruppen ───────────────────────────────────── */
.finder__fav-persons {
  max-width: 440px;
  margin: 20px auto 0;
  text-align: left;
}

.finder__fav-person-group {
  margin-bottom: 16px;
  position: relative;
}

.finder__fav-person-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.finder__fav-person-group .finder__fav-input-wrap {
  margin: 0;
  max-width: 100%;
}

.finder__fav-person-group .finder__fav-chips {
  justify-content: flex-start;
  margin-top: 6px;
}

/* ============================================================
   10. TOP-LISTEN
   ============================================================ */
.lists { padding: 32px 56px 56px; }

.lists__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 28px;
}

.lists__tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}

.lists__tab {
  padding: 10px 20px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.lists__tab:hover { color: var(--text-secondary); }
.lists__tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

/* Serien-Listen-Gruppen-Header */
.series-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--text-muted);
}
.series-group-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Watchlist Top-3 Widget */
.watchlist-top3 {
  margin-bottom: 24px;
  padding: 16px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: var(--radius-md);
}
.watchlist-top3__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.watchlist-top3__cards {
  display: flex;
  gap: 10px;
}
.watchlist-top3__card {
  flex: 1;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 2/3;
  background: var(--bg-elevated);
  max-width: 120px;
  transition: transform 0.2s;
}
.watchlist-top3__card:hover { transform: translateY(-3px); }
.watchlist-top3__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.watchlist-top3__rank {
  position: absolute;
  top: 5px; left: 5px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #0e0c0a;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.watchlist-top3__share {
  position: absolute;
  top: 5px; right: 5px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.watchlist-top3__card:hover .watchlist-top3__share { opacity: 1; }
.watchlist-top3__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  padding: 16px 6px 6px;
}
.watchlist-top3__movie-title { font-size: 10px; font-weight: 600; color: #fff; line-height: 1.2; }
.watchlist-top3__rating { font-size: 9px; color: var(--accent); margin-top: 2px; }

/* "Geeignet für..." Chips im Modal */
.modal__suitability {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.suit-chip {
  padding: 3px 10px;
  border-radius: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Zahlen-Badge auf Tab-Buttons */
.tab-count {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--bg-elevated);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  vertical-align: middle;
}
.lists__tab.active .tab-count {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.lists__panel { display: none; }
.lists__panel.active { display: block; animation: sectionFade 0.2s ease; }

/* ============================================================
   STATISTIK-DASHBOARD
   ============================================================ */
.stats-dashboard { padding: 8px 0; }

.stats-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.stats-tile {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  transition: border-color .2s, transform .15s;
}
.stats-tile[onclick] { cursor: pointer; }
.stats-tile[onclick]:hover { border-color: var(--accent); transform: translateY(-2px); }
.stats-tile__number {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -1px;
}
.stats-tile__label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.stats-tile__sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  opacity: 0.7;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.stats-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.stats-section__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.stat-bars { display: flex; flex-direction: column; gap: 8px; }

/* Stacked Tier-Bar */
.tier-stack-bar {
  display: flex; border-radius: 8px; overflow: hidden; height: 20px;
  gap: 2px; margin-bottom: 12px;
}
.tier-stack-segment { height: 100%; transition: opacity .2s; }
.tier-stack-segment:hover { opacity: 0.8; }
.tier-stack-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.tier-stack-item {
  display: flex; align-items: center; gap: 5px; font-size: 12px;
  color: var(--text-secondary);
}
.tier-stack-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tier-stack-item strong { color: var(--text-primary); font-weight: 600; }
.stat-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 48px;
  align-items: center;
  gap: 10px;
}
.stat-bar-row--clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 3px 6px;
  margin: 0 -6px;
  transition: background .15s;
}
.stat-bar-row--clickable:hover { background: rgba(255,255,255,.05); }
.stat-bar-row--clickable:hover .stat-bar-label { color: var(--accent); }
.stat-bar-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-bar-track {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.stat-bar-count {
  font-size: 12px;
  color: var(--text-muted);
  text-align: left;
}

.decade-group { margin-bottom: 40px; }
.decade-group__header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.decade-group__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--accent);
  margin: 0;
}
.decade-group__stats {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.decade-group__stats span {
  font-size: 12px; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 20px; padding: 2px 8px;
}
.decade-group__all-btn {
  font-size: 12px; font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 20px; padding: 3px 10px;
  cursor: pointer; display: flex; align-items: center; gap: 4px;
  transition: background .15s;
}
.decade-group__all-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* Masterpiece Hero-Banner */
/* Gem of Day Karte */
.gem-of-day {
  display: flex; gap: 16px; align-items: center;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius-md); padding: 16px; cursor: pointer;
  margin-bottom: 20px; transition: border-color .2s;
}
.gem-of-day:hover { border-color: var(--accent); }
.gem-of-day__poster { width: 60px; height: 90px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.gem-of-day__label { font-size: 11px; color: var(--accent); font-weight: 600; margin-bottom: 4px; }
.gem-of-day__title { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.gem-of-day__meta { font-size: 12px; color: var(--text-muted); }

/* Film des Monats Karte */
.film-of-month {
  display: flex;
  gap: 16px;
  align-items: center;
  background: color-mix(in srgb, #8b5cf6 6%, var(--bg-card));
  border: 1px solid color-mix(in srgb, #8b5cf6 25%, transparent);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: border-color .2s;
}
.film-of-month:hover { border-color: #8b5cf6; }
.film-of-month__poster { width: 60px; height: 90px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.film-of-month__badge {
  font-size: 11px;
  color: #8b5cf6;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.film-of-month__title { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.film-of-month__meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.film-of-month__tagline { font-size: 12px; font-style: italic; color: var(--text-muted); }

.masterpiece-hero {
  height: 180px;
  background-size: cover; background-position: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background-color: var(--bg-elevated);
}
.masterpiece-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 40%, rgba(0,0,0,.2));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px;
}
.masterpiece-hero__rank {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 4px;
}
.masterpiece-hero__title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.masterpiece-hero__meta { color: rgba(255,255,255,.7); font-size: 13px; margin-top: 4px; }

.rank-list { display: flex; flex-direction: column; gap: 8px; }

.rank-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.rank-item:hover { border-color: var(--border-warm); background: var(--bg-elevated); }

.rank-item__number {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-muted);
  min-width: 32px;
  text-align: center;
}
.rank-item:nth-child(1) .rank-item__number { color: var(--tier-masterpiece); }
.rank-item:nth-child(2) .rank-item__number { color: var(--tier-excellent); }
.rank-item:nth-child(3) .rank-item__number { color: var(--tier-good); }

.rank-item__poster {
  width: 44px; height: 66px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.rank-item__info { flex: 1; min-width: 0; }
.rank-item__title {
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-item__meta { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.rank-item__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0;
}
.rank-item__rating {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--gold);
}
.rank-item__tier {
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; border-radius: 4px; padding: 2px 6px;
}
.rank-item__tier.tier-masterpiece { background: rgba(229,9,20,.12); color: var(--tier-masterpiece); }
.rank-item__tier.tier-excellent   { background: rgba(16,185,129,.12); color: #10b981; }
.rank-item__tier.tier-good        { background: rgba(59,130,246,.12); color: #60a5fa; }
.rank-item__wl-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  padding: 2px 4px;
  transition: color 0.15s, transform 0.15s;
  line-height: 1;
}
.rank-item__wl-btn:hover { color: #f87171; transform: scale(1.2); }
.rank-item__wl-btn.active { color: #f87171; }
.rank-item__type-label {
  font-size: 9px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; color: var(--text-muted); margin-left: 6px;
  vertical-align: middle; font-weight: 500;
}

.season-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.season-badge {
  font-size: 11px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 20px;
  color: var(--text-muted);
}

/* ============================================================
   11. MODAL
   ============================================================ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px) saturate(0.8);
  -webkit-backdrop-filter: blur(6px) saturate(0.8);
  animation: overlayFadeIn 0.25s ease;
  z-index: 2000;
  overflow-y: auto;
  padding: 24px;
  align-items: flex-start;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
/* Hintergrund wird leicht geblurrt wenn Modal offen */
body.modal-open #main-content,
body.modal-open nav {
  filter: blur(2px) brightness(0.6);
  transition: filter 0.25s ease;
  pointer-events: none;
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 880px;
  margin: auto;
  overflow: hidden;
  animation: modalIn 0.3s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Zyklus 1 (M-Mobile): Bottom-Sheet-Animation auf Mobile */
@keyframes sheetSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.modal__backdrop {
  position: relative;
  height: 280px;
  background: var(--bg-elevated);
  overflow: hidden;
}
.modal__backdrop img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.modal__backdrop::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(22,19,16,0.95));
}

.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.modal__close:hover { background: var(--accent); border-color: var(--accent); color: #0e0c0a; }

/* Link-Kopieren-Button im Modal (neben Schließen-Button) */
.modal__copy-link {
  position: absolute;
  top: 16px; right: 58px; /* links neben dem Schließen-Button */
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.modal__copy-link:hover { background: rgba(229,9,20,0.4); border-color: var(--accent); }

/* Empfehlen-Button im Modal (neben dem Kopieren-Button) */
.modal__share-btn {
  position: absolute;
  top: 16px; right: 100px; /* links neben dem Link-Button */
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.modal__share-btn:hover { background: rgba(16,185,129,0.35); border-color: #10b981; color: #10b981; }

.modal__backdrop-title {
  position: absolute;
  bottom: 18px; left: 28px; right: 60px;
  z-index: 1;
}
.modal__backdrop-title h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  line-height: 1.15;
}
.modal__context-crumb {
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 20px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.modal__context-crumb button { color: var(--text-secondary); }
.modal__context-crumb button:hover { color: var(--accent); }
.modal__original-title {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  margin-top: 2px;
  letter-spacing: 0.1px;
}
.modal__backdrop-title .modal__year {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 5px;
}

.modal__body {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 28px;
  padding: 28px;
}

.modal__keyboard-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 28px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  opacity: 0.6;
}

.modal__poster img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-warm);
}
.modal__poster-placeholder {
  width: 100%;
  aspect-ratio: 2/3;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}

.modal__details { display: flex; flex-direction: column; gap: 22px; }

.modal__rating-block {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.modal__rating-number {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--gold);
  line-height: 1;
}

/* SVG Rating-Ring */
.rating-ring { flex-shrink: 0; }
.rating-ring__fill {
  transition: stroke-dasharray 1s ease;
  animation: ringFill 1s ease forwards;
}
@keyframes ringFill {
  from { stroke-dasharray: 0 999; }
}
.modal__rating-info { display: flex; flex-direction: column; gap: 5px; }
.modal__tier-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;    /* Pill-Form — Apple-like */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  background: var(--bg-elevated);
  border: 1px solid var(--border-warm);
  border-radius: 2px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
}
.tag--genre { color: var(--text-primary); }
.tag--keyword { font-size: 11px; color: var(--text-muted); }
.tag--similar { cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
.tag--similar:hover { border-color: var(--accent); color: var(--accent); }
.tag--person {
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tag--person:hover {
  border-color: #f0c040;
  color: #f0c040;        /* IMDb Gelb */
}
.tag--person-wrap {
  display: inline-flex; align-items: center; gap: 1px;
}
.tag--person-internal {
  font-size: 10px; font-weight: 700;
  background: none; border: none; cursor: pointer;
  color: var(--accent); padding: 0 2px;
  opacity: 0.7; transition: opacity .15s;
}
.tag--person-internal:hover { opacity: 1; }

.ratings-comparison { display: flex; gap: 10px; flex-wrap: wrap; }
.ext-rating {
  background: var(--bg-elevated);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  text-align: center;
  min-width: 72px;
}
.ext-rating__source {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}
.ext-rating__value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Konsens-Badge: leicht hervorgehoben */
.ext-rating--consensus {
  border-color: var(--accent);
  background: rgba(229,9,20,0.06);
}
.ext-rating--consensus .ext-rating__source { color: var(--accent); }
.ext-rating--consensus .ext-rating__value  { color: var(--accent-bright); }

/* CSS-Tooltip via data-tooltip Attribut — erscheint UNTER dem Element */
[data-tooltip] {
  position: relative;
  cursor: default;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border-warm);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  max-width: 320px;
  white-space: normal;
  text-align: center;
}
/* Kleiner Pfeil nach oben */
[data-tooltip]::before {
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--border-warm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 101;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
}

.detail-row {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  flex-wrap: wrap;
}
.detail-row__label {
  color: var(--text-muted);
  min-width: 100px;
  flex-shrink: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-top: 2px;
}
.detail-row__value { color: var(--text-secondary); }

/* Bewertungs-Vergleichs-Zeile im Modal */
.rating-compare-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.rating-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 11px;
}
.rating-compare-chip__src {
  color: var(--text-muted);
  font-weight: 600;
}
.rating-compare-chip__val {
  color: var(--text-secondary);
}

/* Filmreihen-Fortschrittsbalken */
.collection-progress-bar {
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.collection-progress-bar__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.favorite-quote {
  background: var(--bg-elevated);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 14px;
  font-family: var(--font-display);
}

.modal__overview {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* Rating-Balken */
.modal__rating-bar-wrap {
  position: relative;
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 3px;
  overflow: visible;
}
.modal__rating-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 100%;
}
.modal__rating-bar-label {
  position: absolute;
  right: 0;
  top: 10px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.tagline { color: var(--text-muted); font-style: italic; font-size: 14px; }
.awards  { color: var(--gold); font-size: 13px; font-style: italic; }

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #0e0c0a;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  letter-spacing: 0.3px;
}
.btn-primary:hover { background: var(--accent-bright); transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}
.btn-secondary:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); }

.modal__section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   12. SCROLL-TO-TOP
   ============================================================ */
.scroll-top-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-warm);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.2s, color 0.2s;
  pointer-events: none;
}
.scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   13. HILFSSTILE
   ============================================================ */
.divider { border: none; border-top: 1px solid var(--border); margin: 8px 0; }

/* Lucide Icons – Monochrome SVG-Ikonographie im Apple-Stil */
.kf-icon {
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  flex-shrink: 0;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-muted);
  font-size: 14px;
  gap: 12px;
  letter-spacing: 0.5px;
}

.loading-spinner {
  width: 32px; height: 32px;
  border: 2px solid var(--border-warm);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   SKELETON-SHIMMER (Lade-Platzhalter für Filmkarten)
   ============================================================ */
@keyframes skeleton-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* C37: Alle Animationen für Nutzer mit Bewegungsempfindlichkeit reduzieren */
  .skeleton-film-poster,
  .skeleton-film-title,
  .skeleton-film-title--short { animation: none; }
  /* Kern-Animationen: Fade statt Slide */
  .section { animation: none; }
  .card-grid .card { animation: none; }
  .modal { animation: none; }
  /* Finder-Slide: kein Translate, nur Fade */
  .finder__question-body { animation: none !important; }
  /* Scroll-Bounce: stillstehen */
  .hero__scroll-indicator { animation: none; }
  /* Rating-Ring: direkt vollständig */
  .rating-ring__fill { animation: none; }
}
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding: 16px 0;
}
.skeleton-film-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-secondary);
}
.skeleton-film-poster {
  width: 100%;
  aspect-ratio: 2/3;
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 0%,
    var(--bg-elevated)  50%,
    var(--bg-secondary) 100%
  );
  background-size: 600px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-film-title {
  height: 12px;
  margin: 10px 8px 6px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 0%,
    var(--bg-elevated)  50%,
    var(--bg-secondary) 100%
  );
  background-size: 600px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite .1s;
}
.skeleton-film-title--short {
  width: 60%;
  height: 10px;
  margin: 0 8px 10px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 0%,
    var(--bg-elevated)  50%,
    var(--bg-secondary) 100%
  );
  background-size: 600px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite .2s;
}

/* Ladespinner im Modal (erscheint kurz während Detail-Batch geladen wird) */
.modal__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

/* V3: Modal Slim-Preview – zeigt Backdrop + Titel sofort aus den Slim-Daten */
.modal__slim-preview-backdrop {
  position: relative;
  height: 260px;
  background-size: cover;
  background-position: center top;
  overflow: hidden;
}
.modal__slim-preview-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%);
}
.modal__slim-preview-info {
  position: absolute;
  bottom: 18px; left: 22px; right: 22px;
  z-index: 1;
}
.modal__slim-preview-tier {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--accent);
  margin-bottom: 4px;
}
.modal__slim-preview-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 30px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.15;
}
.modal__slim-preview-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}
.modal__slim-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  color: var(--text-muted);
  font-size: 14px;
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  /* Modal */
  .modal__body { grid-template-columns: 150px 1fr; gap: 18px; padding: 18px; }
  .modal__backdrop { height: 220px; }

  /* Hero & Layout */
  .hero { padding: 28px 28px 40px; }
  .home-content, .discover, .lists { padding-left: 28px; padding-right: 28px; }

  /* Nav: Hamburger schon bei 900px aktivieren */
  .nav__links {
    display: none;
    position: fixed;
    top: var(--nav-height); left: 0; right: 0;
    background: rgba(14,12,10,0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 12px;
    flex-direction: column;
    gap: 4px;
    z-index: 999;
  }
  .nav__links.open { display: flex; }
  /* M6: Nav-Links auf Mobile: größere Touch-Targets (min 44px) */
  .nav__link { padding: 12px 16px; width: 100%; text-align: left; min-height: 44px; }
  .nav__link.active::after { display: none; }
  .nav__link.active { background: rgba(229,9,20,0.08); color: var(--accent); }
  /* M6: Hamburger-Button: mindestens 44×44px Touch-Target */
  .nav__hamburger { display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

  /* Stats-Bar: horizontal scrollbar statt Umbruch */
  .stats-bar {
    padding: 12px 28px;
    gap: 28px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .stats-bar::-webkit-scrollbar { display: none; }

  /* Listen-Tabs: horizontal scrollbar statt Zeilenumbruch */
  /* M25: Statistik-Tabs – smooth scroll auf Mobile */
  .lists__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-scroll-snap-type: x proximity;
    scroll-snap-type: x proximity;
  }
  .lists__tabs::-webkit-scrollbar { display: none; }
  /* M25: Tab-Buttons: Touch-freundliche Größe */
  .lists__tab { min-height: 44px; padding: 10px 16px; flex-shrink: 0; }

  /* Filter & Quick-Filter: scrollbar */
  /* M4: Filter-Bereich wrapping auf Mobile verhindern, horizontal scrollen */
  .filters { overflow-x: auto; flex-wrap: nowrap; }
  .quick-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .quick-filters::-webkit-scrollbar { display: none; }

  /* Stats-Dashboard: 2 Spalten */
  .stats-overview { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: 1fr; }

  /* M6: Keyboard-Shortcut-Hinweise ausblenden auf Mobile (irrelevant auf Touch-Geräten) */
  .nav__shortcut-hint { display: none; }
  /* M6: ESC-Hint in Schnellsuche auf Mobile ausblenden */
  .quicksearch-esc { display: none; }
  /* M6: Shortcuts-Overlay auf Mobile: etwas anders gestaltet */
  .shortcuts-box { min-width: 90vw; }
}

@media (max-width: 640px) {
  /* ── Größen-Reset: alles systematisch kompakter auf Mobile ───── */

  /* Nav: kleiner, spart 8px Platz am oberen Rand */
  :root { --nav-height: 44px; }
  .nav__logo-img { height: 21px; }

  /* Seiten-Titel: von 32px auf 22px */
  .discover__title,
  .lists__title,
  .finder__title { font-size: 22px; }

  /* Stats-Leiste: Zahl links, Icon zentriert über Text rechts daneben */
  .stats-bar__item {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }
  /* Icon über Label: zweiter Span wird zur Spalte (SVG oben, Text unten) */
  .stats-bar__item > span:not(.stats-bar__number) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 9px;
  }
  .stats-bar__number { font-size: 18px; }
  .stats-bar__genre  { font-size: 14px; }
  .stats-bar__label  { font-size: 10px; }

  /* Home-Streifen: kompaktere Karten und weniger Abstand */
  .strip .card { width: 110px; }
  .strip-section__title { font-size: 14px; }
  .strip-section { margin-bottom: 22px; }
  .strip { gap: 8px; }

  /* Discover-Grid: 3 Spalten statt 2 (kleinere Karten) */
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }
  .card__info { padding: 7px 8px 9px; gap: 4px; }

  /* Quick-Filter-Chips: kompakter */
  .quick-filter-chip { min-height: 32px; padding: 6px 12px; font-size: 12px; }

  /* Listen-Tabs: etwas schlanker */
  .lists__tab { min-height: 38px; padding: 8px 12px; font-size: 12px; }

  /* Section-Padding: 12px statt 16px */
  .home-content, .discover, .lists, .finder {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* M3: Modal auf Mobile: einspaltig, besser nutzbar */
  .modal__body { grid-template-columns: 1fr; }
  .modal__poster { display: none; }
  /* M3: Modal-Backdrop etwas kleiner auf kleinen Screens */
  .modal__backdrop { height: 180px; }

  /* M3: Modal-Buttons: Touch-freundlichere Abstände */
  .modal__actions { flex-wrap: wrap; gap: 8px; }
  .modal__actions .btn-primary,
  .modal__actions .btn-secondary { min-height: 44px; padding: 10px 18px; }

  /* M24: Modal Prev/Next Buttons: größer und besser positioniert */
  .modal__list-nav { padding: 14px 12px; }
  .modal__list-nav-btn { min-height: 44px; padding: 10px 12px; font-size: 13px; }
  .modal__history-btn { min-height: 44px; padding: 10px 14px; }

  /* M5: Hero: kleinere Höhe, kompakteres Padding */
  .hero { height: 55vh; min-height: 340px; padding: 16px 20px 28px; }
  /* M5: Hero-Text kleiner auf Mobile */
  .hero__overview { font-size: 13px; margin-bottom: 16px; }
  .hero__tagline { font-size: 14px; margin-bottom: 16px; }
  /* M5: Hero-Buttons: Touch-freundlich (min 44px) */
  .hero__buttons { gap: 8px; }
  .hero__buttons .btn-primary,
  .hero__buttons .btn-secondary { min-height: 44px; padding: 10px 16px; font-size: 13px; }

  /* M7: Grid: kleinere Karten auf Mobile */
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  /* M7: Karten-Watchlist-Button: auf Mobile immer sichtbar (kein Hover nötig) */
  .card__watchlist-btn { opacity: 1; }

  /* M20: Allgemeine Abstände auf Mobile reduzieren */
  .home-content, .discover, .lists, .finder {
    padding-left: 16px;
    padding-right: 16px;
  }
  .stats-bar { gap: 20px; padding: 12px 16px; }
  /* FILTER-FIX: Die 900px-Regel setzt flex-wrap:nowrap + overflow-x:auto
     → das macht den Filter horizontal scrollbar (furchtbare UX).
     Auf Mobile (<640px) alles zurücksetzen und vertikal stapeln. */
  .filters {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow: visible !important;
    padding: 12px;
    gap: 8px;
    align-items: stretch;
  }
  /* Suchfeld: volle Breite */
  .filter-search {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
  }
  /* Dropdowns: jeweils halb breit (2 nebeneinander) */
  .filter-select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    width: auto;
  }
  /* Toggle-Buttons (Geheimtipps, Unterschätzt, Überbewertet): zu dritt */
  .filter-toggle {
    flex: 1 1 calc(33% - 6px);
    min-width: 0;
    justify-content: center;
    text-align: center;
    font-size: 12px;
  }
  /* "Weitere Filter" + filter-and-connector: volle Breite */
  .filter-more-details,
  .filter-and-connector {
    flex: 0 0 100%;
    width: 100%;
  }
  /* "Weitere Filter"-Summary: größerer Touch-Target, klar sichtbar */
  .filter-more-summary {
    min-height: 44px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 4px 0;
  }
  /* Inhalte der erweiterten Filter: gleiche 2-Spalten-Logik */
  .filter-more-body { gap: 8px; padding-top: 12px; }
  .filter-more-body .filter-select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  /* Toggle-Buttons in "Weitere Filter": 2 pro Zeile (mehr Platz als draußen) */
  .filter-more-body .filter-toggle { flex: 1 1 calc(50% - 4px); min-width: 0; }
  /* Personen-Inputs: volle Breite (komplexes Element) */
  .filter-more-body .person-filter-wrap { flex: 0 0 100%; width: 100%; }
  /* filter-select: iOS-Zoom verhindern (min 16px) + ausreichende Höhe */
  .filter-select { font-size: 16px; padding: 10px 28px 10px 10px; }
  .filter-search input { font-size: 16px; }

  /* M8: Finder-Optionen: 2 Spalten auf Mobile */
  .finder__options { grid-template-columns: 1fr 1fr; }

  /* M4: Quick-Filter: kleineres Padding, Touch-freundlich */
  .quick-filters { padding: 10px 16px; }
  /* M1: Quick-Filter-Chips: mindestens 44px hoch (Touch-Targets) */
  .quick-filter-chip { min-height: 36px; padding: 8px 14px; font-size: 13px; }

  /* M11: Jahres-Chart: etwas kompakter auf Mobile */
  .month-bars { gap: 4px; }
  .month-bar-col { min-width: 20px; }

  /* M11: Trophäen: 3 Spalten auf Mobile */
  .trophy-grid { grid-template-columns: repeat(3, 1fr); }
  .finder-result-grid { grid-template-columns: 1fr; }

  /* M10: Quick-Search Overlay: Padding-Top kleiner auf Mobile */
  .quicksearch-overlay { padding-top: 16px; }
  .quicksearch-box { width: 96vw; }
  /* M22: Input-Styling: iOS-Zoom verhindern (font-size min 16px) */
  .quicksearch-input { font-size: 16px; }

  /* M16: Watchlist-Tab: Share-Button Touch-freundlich */
  #list-watchlist .btn-secondary { min-height: 44px; }

  /* M2: Font-Sizes auf Mobile: mindestens 14px für Fließtext */
  .discover__count { font-size: 13px; }
  .modal__notes-input { font-size: 16px; } /* M22: iOS-Zoom verhindern */

  /* M21: Overflow-x verhindern – overflow-x:clip statt hidden, damit
     overflow-y:scroll nicht blockiert wird (hidden erstellt BFC → klemmt Finder-Scroll) */
  .section { overflow-x: clip; }

  /* M15: Streaming-Chips: wrapping und Größe */
  .streaming-logo { width: 32px; height: 32px; }
  .streaming-text { font-size: 12px; padding: 4px 10px; }

  /* M13: Genre-Kacheln auf Startseite: größere Touch-Targets */
  .home-genre-chip { min-height: 36px; padding: 8px 14px; font-size: 13px; }
  .home-streaming-chip { min-height: 36px; padding: 8px 12px; }

  /* M14: Mood-Buttons: Touch-freundlich */
  .home-mood-btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }

  /* M18: Finder-Ergebnis-Karten auf Mobile */
  .finder-result-grid { gap: 12px; }
  .finder-card { padding: 16px; }

  /* M8: Finder-Mode-Karten: volle Breite auf Mobile */
  .finder__mode-cards { flex-direction: column; align-items: center; gap: 12px; }
  .finder__mode-card { width: 100%; max-width: 100%; padding: 20px 24px; }

  /* M8: Finder-Fortschrittsbalken: kleiner auf Mobile */
  .finder__progress { gap: 4px; }
  .finder__progress-step { width: 8px; height: 8px; }

  /* M9: Top-Listen Tab-Leiste: Touch-freundlich */
  .lists__tab { font-size: 13px; padding: 10px 14px; }

  /* M12: Scroll-to-Top Button: bessere Position auf Mobile (weniger Abstand zum Rand) */
  #scroll-top-btn, .scroll-top-btn { bottom: 16px; right: 16px; }

  /* M23: Person-Filter-Dropdowns: Touch-freundlich */
  .person-drop-item { min-height: 44px; padding: 12px 16px; font-size: 14px; }
  .person-tag-input { min-height: 44px; }
  .person-inner-input { font-size: 16px; } /* M22: iOS-Zoom verhindern */

  /* M4: Filter-Select: Touch-freundlich, iOS-Zoom verhindern */
  .filter-select { font-size: 16px; min-height: 44px; padding: 10px 32px 10px 12px; }
  .filter-search input { font-size: 16px; } /* M22: iOS-Zoom verhindern */

  /* M9: Regisseur-Suche in Top-Listen: Touch-freundlich */
  #list-directors input { font-size: 16px; min-height: 44px; }

  /* M17: Quick-Decide Overlay: Mobile-Layout */
  .quick-decide-box { flex-direction: column; gap: 12px; max-width: 100%; }
  .quick-decide-poster img { width: 100%; max-width: 140px; border-radius: 8px; }
  .quick-decide-title { font-size: 16px; }

  /* B-Review: Modal-Tastaturhinweis auf Touch-Geräten ausblenden (irrelevant ohne Tastatur) */
  .modal__keyboard-hint { display: none; }

  /* ── Zyklus 1: Modal als Bottom Sheet ────────────────────────── */
  /* Overlay: Modal ans untere Bildschirmende schieben */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
    overflow: hidden;
  }
  /* Modal: slide von unten, oben gerundet wie ein iOS-Sheet */
  .modal {
    border-radius: 20px 20px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    animation: sheetSlideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    margin: 0;
  }
  /* Pull-Handle: kleiner Balken oben im Modal signalisiert "wischbar" */
  .modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    margin: 10px auto 0;
  }

  /* ── Zyklus 2: Einklappbarer Filter-Toggle ────────────────────── */
  /* Toggle-Button (wird per JS injiziert) */
  .mobile-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 14px;
    margin-bottom: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
  }
  .mobile-filter-toggle__chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }
  .mobile-filter-toggle.open .mobile-filter-toggle__chevron {
    transform: rotate(180deg);
  }
  /* Badge: zeigt Anzahl aktiver Filter */
  .mobile-filter-badge {
    background: var(--accent);
    color: #0e0c0a;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    margin-left: 6px;
  }
  /* Eingeklappter Filter-Container: versteckt */
  .filters--mobile-collapsed {
    display: none !important;
  }

  /* ── Zyklus 3 / V2: Scroll-Fade-Indikator ────────────────────── */
  /* Maske nur wenn NICHT am Scroll-Ende (JS setzt .strip--at-end) */
  .strip:not(.strip--at-end) {
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
  }
  .strip { padding-right: 24px; } /* Peek-Luft für die letzte Karte */
  .lists__tabs {
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, black 88%, transparent 100%);
  }
  .stats-bar {
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, black 88%, transparent 100%);
  }

  /* ── Zyklus 4: Hero kompakter + Strip-Peek-Effekt ─────────────── */
  /* Overview-Text im Hero auf Mobile ausblenden: zu viel Text, stiehlt Platz */
  .hero__overview { display: none; }
  /* Hero etwas flacher: mehr Raum für Kategorien-Streifen */
  .hero { height: 48vh; min-height: 300px; }
  /* Strip-Section: weniger Bottom-Abstand, kompakter */
  .strip-section { margin-bottom: 28px; }
  .strip-section__title { font-size: 17px; }

  /* ── Zyklus 5: Touch-Active-States ───────────────────────────── */
  /* :active statt :hover — auf Touch-Geräten gibt es kein Hovern */
  .btn-primary:active {
    background: var(--accent-dark, #b8873e);
    transform: scale(0.97);
  }
  .btn-secondary:active {
    background: rgba(229, 9, 20, 0.15);
    transform: scale(0.97);
  }
  .card:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }
  .quick-filter-chip:active {
    background: rgba(229, 9, 20, 0.15);
    border-color: var(--accent);
    color: var(--accent);
  }
  .lists__tab:active {
    background: rgba(229, 9, 20, 0.1);
  }
  .strip-section__show-all:active { color: var(--accent-bright); }
  /* Quick-Filter-Chips: kompakter auf Mobile */
  .quick-filter-chip { min-height: 30px; font-size: 11px; padding: 4px 8px; }
  /* Watchlist-Button auf Karten: sichtbar + kleiner Touch-Target */
  .card__watchlist-btn { width: 26px; height: 26px; min-width: unset; min-height: unset; }

  /* ── V5: Sort-Pills horizontal scrollbar auf Mobile ──────────── */
  .sort-pills-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px; /* verhindert Clipping durch overflow */
  }
  .sort-pills-row::-webkit-scrollbar { display: none; }
  .sort-pill { flex-shrink: 0; }

  /* ── Enhancement 1: Finder-Optionskacheln Touch-Targets ──────── */
  /* Mindest-Höhe 44px für Touch-freundliche Bedienung */
  .finder__option { min-height: 44px; padding: 16px 12px; }
  /* S22: Beschreibungstext von 12px auf 13px für bessere Lesbarkeit auf Mobile */
  .finder__option-desc { font-size: 13px; }

  /* ── Enhancement 2: Provider-Kacheln Mobile ─────────────────── */
  /* Horizontal scrollbar statt wrapping auf engen Screens */
  .finder__provider-tiles {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .finder__provider-tiles::-webkit-scrollbar { display: none; }
  .finder__provider-tile {
    flex-shrink: 0;
    min-width: 68px;
    min-height: 44px; /* Touch-Target */
    justify-content: center;
  }

  /* ── Enhancement 3: Score-Popup Mobile ──────────────────────── */
  /* Popup auf Mobile stets horizontal zentriert */
  /* S17 + S26: Score-Popup auf Mobile zentriert, font-size 14px für bessere Lesbarkeit */
  .finder-score-popup {
    left: 50% !important;
    transform: translateX(-50%);
    min-width: min(280px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    font-size: 14px;
  }

  /* ── Enhancement 4: Dismiss/Watchlist Touch-Targets ─────────── */
  .finder-card__wl-btn {
    width: 36px; height: 36px;
    bottom: 6px; left: 6px;
  }
  .finder-card__dismiss-btn {
    width: 36px; height: 36px;
    bottom: 6px; right: 6px;
    /* Auf Touch-Geräten immer sichtbar (kein Hover) */
    opacity: 0.8;
  }

  /* ── Enhancement 5: Modus-Auswahl auf 375px ─────────────────── */
  .finder__mode-card { padding: 18px 16px; }
  .finder__mode-card-label { font-size: 18px; }
  .finder__mode-card-features span { font-size: 10px; padding: 2px 8px; }

  /* ── Enhancement 6: Finder Nav-Buttons ──────────────────────── */
  .finder__nav { gap: 10px; margin-top: 24px; }
  .finder__nav .btn-primary,
  .finder__nav .btn-secondary { min-height: 44px; padding: 10px 18px; }

  /* ── Enhancement 7: Lieblingsfilm-Input Mobile ───────────────── */
  /* font-size 16px verhindert iOS-Zoom beim Fokus */
  .finder__fav-input { font-size: 16px; min-height: 44px; }
  .finder__fav-drop-item { min-height: 44px; padding: 10px 12px; }

  /* ── Enhancement 8: Fortschritts-Dots Mobile ────────────────── */
  .finder__progress-step { border-radius: 50%; } /* Kreise statt Balken → deutlicher */
  .finder__pool-count { font-size: 11px; }

  /* ── Enhancement 9: Top-Pick-Banner Mobile ──────────────────── */
  .finder-card__top-pick-label { font-size: 10px; padding: 3px 8px; }

  /* ── Enhancement 10 / S23: Match-Badge Mobile ───────────────── */
  /* S23: 11px statt 10px — Match-Prozent muss lesbar bleiben */
  .finder-card__match-badge { font-size: 11px; padding: 4px 8px; }

  /* ── Enhancement 11: Antwort-Zusammenfassung Mobile ─────────── */
  .finder__answer-chip { font-size: 10px; padding: 3px 8px; max-width: 90vw; word-break: break-word; }

  /* ── Enhancement 12: Fragen-Text Mobile ─────────────────────── */
  .finder__question-text { font-size: 22px; margin-bottom: 24px; line-height: 1.25; }
  .finder__question-number { font-size: 11px; margin-bottom: 6px; }
  .finder__question-sub { font-size: 13px; }

  /* ── Enhancement 13: Finder gesamt auf 375px ────────────────── */
  /* Verhindert horizontalen Overflow im Wizard — clip statt hidden (kein BFC) */
  #finder-wizard { overflow-x: clip; }

  /* ── Enhancement 14: Zu-zweit Toggle Mobile ─────────────────── */
  .finder__partner-toggle { font-size: 13px; padding: 8px 14px; }

  /* ── Enhancement 15: Keyboard-UX / iOS-Zoom ─────────────────── */
  .finder__fav-input { font-size: 16px; } /* bereits in E7, Sicherheit */

  /* ── Enhancement 16: Letzte-Suche-Chip Mobile ───────────────── */
  .finder__last-search { flex-wrap: wrap; gap: 6px; }
  .finder__last-search-chip { max-width: 90vw; white-space: normal; text-align: left; line-height: 1.4; }

  /* ── Enhancement 17: Ergebnis-Grid Mobile ───────────────────── */
  /* finder-card__actions: Buttons nebeneinander, Touch-freundlich */
  .finder-card__watchlist-btn,
  .finder-card__share-btn { min-height: 40px; padding: 8px 12px; font-size: 12px; }
  /* Finder-Karte: kein padding (bereits abgedeckt, Sicherheit) */
  .finder-card__backdrop { height: 140px; }

  /* ── Enhancement 18: Home-Section Padding Fixes ──────────────── */
  /* C11: home-byline: 32px → 16px Seitenabstand */
  .home-byline { padding-left: 16px; padding-right: 16px; }
  /* C12: home-share-banner: 56px → 16px Seitenabstand */
  .home-share-banner { padding-left: 16px; padding-right: 16px; }
  /* C13: home-mood-widget: 56px → 16px Seitenabstand */
  .home-mood-widget { padding-left: 16px; padding-right: 16px; }
  /* C14: home-streaming-row: 56px → 16px Seitenabstand */
  .home-streaming-row { padding-left: 16px; padding-right: 16px; }

  /* ── Enhancement 19: Hero & Home-Content Mobile ──────────────── */
  /* C15: Hero: 28px Seitenabstand (aus 900px-Regel) → 16px auf Mobile */
  .hero { padding-left: 16px; padding-right: 16px; padding-bottom: 32px; }
  /* C16: home-content: 40px Top-Abstand auf Mobile reduzieren */
  .home-content { padding-top: 24px; }

  /* ── Enhancement 20: Strip-Karten kompakter auf 375px ────────── */
  /* C17: 158px → 140px — 2,5 Karten passen auf 375px Screen */
  .strip .card { width: 140px; }

  /* ── Enhancement 21: Discover-Titel Mobile ───────────────────── */
  /* C18: 32px → 24px, spart Höhe auf kleinen Screens */
  .discover__title { font-size: 24px; margin-bottom: 12px; }

  /* ── Enhancement 22: Aktive Filter-Chips Scroll ─────────────── */
  /* C19: filter-chip-row als horizontal-scrollbarer Strip auf Mobile */
  .filter-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-chip-row::-webkit-scrollbar { display: none; }

  /* ── Enhancement 23: Modal body kompakter auf 375px ─────────── */
  /* C20: padding 18px (aus 900px) → 12px auf Mobile */
  .modal__body { padding: 12px; gap: 12px; }

  /* ── Enhancement 24-26: Seiten-Titel auf Mobile verkleinern ─── */
  /* C22: Finder-Titel: 32px → 22px spart Höhe über dem Wizard */
  .finder__title { font-size: 22px; margin-bottom: 20px; }
  /* C23: Listen-Titel: 32px → 22px, konsistent mit Discover */
  .lists__title { font-size: 22px; margin-bottom: 16px; }
  /* C23b: Lists-Tabs Abstand reduzieren */
  .lists__tabs { margin-bottom: 20px; }

  /* ── Enhancement 27: Genre-Chips horizontal scroll ───────────── */
  /* C24: Kacheln wrappen nicht mehr → horizontaler Strip (wie Streaming) */
  .home-genre-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .home-genre-chips::-webkit-scrollbar { display: none; }
  .home-genre-chip { flex-shrink: 0; }

  /* ── Enhancement 28: Strip-Section Header kompakter ─────────── */
  /* C25: margin-bottom 20px → 12px, spart Höhe auf Mobile */
  .strip-section__header { margin-bottom: 12px; }
  /* C26: Strip-Section Abstand unten: 48px → 32px (bereits als 28px, Sicherheit) */
  .strip-section { margin-bottom: 28px; }

  /* ── Enhancement 29: Genre-Row Abstand Mobile ─────────────────── */
  /* C27: margin-bottom 32px → 20px auf kleinen Screens */
  .home-genre-row { margin-bottom: 20px; }

  /* ── Enhancement 30: stats-tile Numbers Mobile ───────────────── */
  /* C28: 36px → 28px, bleibt prominent aber passt ins Grid */
  .stats-tile__number { font-size: 28px; }

  /* ── Enhancement 31: Streaming-Chips horizontal scroll ──────── */
  /* C29: Home-Streaming-Chips als horizontaler Strip, kein Wrapping */
  .home-streaming-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .home-streaming-chips::-webkit-scrollbar { display: none; }
  .home-streaming-chip { flex-shrink: 0; }

  /* ── Enhancement 32: Modal Backdrop-Buttons Touch-Target ────── */
  /* C31: close/copy/share Buttons: 34px → 44px auf Mobile */
  .modal__close,
  .modal__copy-link,
  .modal__share-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  /* Abstände anpassen damit Buttons nicht überlappen */
  .modal__copy-link { right: 68px; }
  .modal__share-btn { right: 120px; }

  /* ── Enhancement 33: Mood-Widget auf Mobile vereinfachen ─────── */
  /* C32: Mood-Buttons: 2 Spalten statt flexibles Wrapping */
  .home-mood-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* ── Enhancement 34: stat-bar-row auf Mobile anpassen ─────────── */
  /* C33: Label-Spalte von 110px auf 90px verkleinern (passt besser auf 375px) */
  .stat-bar-row { grid-template-columns: 90px 1fr 40px; gap: 8px; }

  /* ── Enhancement 35: hero-content Max-Width auf Mobile ────────── */
  /* C34: hero content nimmt immer volle Breite, kein max-width-Limit */
  .hero__content { max-width: 100%; }

  /* ── Enhancement 36: Discover Count Zeile ─────────────────────── */
  /* C35: discover count + reset button nebeneinander, kein Umbruch */
  .discover__count { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

  /* ── Enhancement 37: Rating-Zahl im Modal kompakter ─────────── */
  /* C38: 52px → 38px auf Mobile – bleibt groß, spart aber Höhe */
  .modal__rating-number { font-size: 38px; }

  /* ── Enhancement 38: Hero Scroll-Indikator ausblenden ─────────── */
  /* C39: Bounce-Animation + Indikator auf Mobile unnötig (kein Desktop-Scroll) */
  .hero__scroll-indicator { display: none; }

  /* ── Enhancement 39: Filter-Reset Touch-Target ─────────────────── */
  /* C40: btn-reset min-height auf 44px für Touch-Freundlichkeit */
  .btn-reset { min-height: 44px; padding: 8px 14px; }

  /* ── Enhancement 40: Stats-Bar Zahlen kompakter ─────────────────── */
  /* C41: 26px → 20px, Stats-Leiste bleibt lesbar aber nimmt weniger Höhe */
  .stats-bar__number { font-size: 20px; }
  .stats-bar__genre { font-size: 16px; }

  /* ── Enhancement 41: Card-Grid Abstand Mobile ──────────────────── */
  /* C42: gap 16px → 10px, mehr Karten auf kleinen Screens sichtbar */
  .card-grid { gap: 10px; }

  /* ── Enhancement 42: Seiten-Titel Margins Mobile ───────────────── */
  /* C43: discover und listen margin-bottom weiter reduzieren */
  .discover { padding-top: 20px; }
  .lists { padding-top: 20px; }

  /* ── Enhancement 43: Strip-Section Show-All Touch-Target ──────── */
  /* C44: "Alle anzeigen"-Button: größerer Touch-Bereich */
  .strip-section__show-all { min-height: 36px; padding: 6px 4px; font-size: 12px; }

  /* ── Enhancement 44: Modal-Tier-Badge kompakter ─────────────────── */
  /* C45: Tier-Badge font-size auf 10px statt 11px auf Mobile */
  .modal__tier-badge { font-size: 10px; padding: 2px 8px; }

  /* ── Enhancement 45: Finder Antwort-Chips Zeilenumbruch vermeiden */
  /* C46: Chip-Text auf sehr kleinen Screens zulassen */
  .finder__answer-chip { font-size: 10px; }

  /* ── Enhancement 46: Quick-Filter Chips :active state ──────────── */
  /* C47: Sicherstellen dass :active state korrekt für Touch funktioniert */
  .quick-filter-chip:active {
    background: rgba(229,9,20,0.12);
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(0.97);
  }

  /* ── Enhancement 47: Home-Byline Opacity erhöhen auf Mobile ─────── */
  /* C48: Byline-Text besser lesbar auf kleinen Screens */
  .home-byline { opacity: 0.8; }

  /* ── Enhancement 48: Discover header-left gap ──────────────────── */
  /* C49: Abstände im Discover-Header kompakter auf Mobile */
  #discover-header-left { gap: 4px; margin-bottom: 6px; }

  /* ── Enhancement 49: Modal-Backdrop-Titel Abstände ─────────────── */
  /* C50: modal backdrop title linksbündig kompakter auf Mobile */
  .modal__backdrop-title { left: 14px; bottom: 12px; right: 56px; }

  /* ══════════════════════════════════════════════════════════════
     FINAL SIZE COMPACT OVERRIDE
     Überschreibt alle M-Regeln weiter oben.
     Ziel: 25–40% kleinere Buttons/Text auf Mobile.
     AUSNAHME: font-size 16px bei allen Input-Elementen bleibt
     (iOS Auto-Zoom-Schutz).
     ══════════════════════════════════════════════════════════════ */

  /* Quick-Filter-Chips */
  .quick-filter-chip { min-height: 30px; padding: 4px 10px; font-size: 11px; }

  /* Chip-Buttons auf Startseite */
  .home-genre-chip   { min-height: 30px; padding: 4px 10px; font-size: 11px; }
  .home-streaming-chip { min-height: 30px; padding: 4px 8px; font-size: 11px; }
  .home-mood-btn     { min-height: 36px; padding: 6px 12px; font-size: 12px; }

  /* Listen-Tabs */
  .lists__tab { min-height: 34px; padding: 6px 10px; font-size: 11px; }

  /* Filter-Bereich */
  .filter-toggle     { min-height: 26px; font-size: 11px; padding: 3px 6px; }
  .filter-more-summary { min-height: 30px; font-size: 11px; padding: 3px 0; }
  .mobile-filter-toggle { padding: 7px 12px; font-size: 12px; }
  .btn-reset         { min-height: 34px; padding: 5px 10px; font-size: 11px; }

  /* Person-Filter-Dropdown-Items */
  .person-drop-item  { min-height: 36px; padding: 8px 12px; font-size: 12px; }
  .person-tag-input  { min-height: 36px; }

  /* Hero-Buttons: etwas kleiner, bleiben aber als primäre Aktion erkennbar */
  .hero__buttons .btn-primary,
  .hero__buttons .btn-secondary { min-height: 38px; padding: 7px 14px; font-size: 12px; }

  /* Modal-Buttons */
  .modal__actions .btn-primary,
  .modal__actions .btn-secondary { min-height: 40px; padding: 8px 14px; font-size: 12px; }
  .modal__list-nav-btn  { min-height: 36px; padding: 7px 10px; font-size: 12px; }
  .modal__history-btn   { min-height: 36px; padding: 7px 12px; }
  .modal__rating-number { font-size: 32px; }

  /* Finder */
  .finder__option      { min-height: 36px; padding: 10px 10px; }
  .finder__option-desc { font-size: 11px; }
  .finder__mode-card   { padding: 14px 16px; }
  .finder__mode-card-label { font-size: 16px; }
  .finder__question-text { font-size: 18px; margin-bottom: 16px; }
  .finder__nav .btn-primary,
  .finder__nav .btn-secondary { min-height: 38px; padding: 7px 14px; }
  .finder__fav-drop-item { min-height: 36px; padding: 7px 12px; font-size: 12px; }
  .finder__provider-tile { min-height: 36px; min-width: 56px; }

  /* Seiten-Titel */
  .discover__title { font-size: 20px; }
  .lists__title    { font-size: 20px; }
  .finder__title   { font-size: 20px; }

  /* Streaming-Logos in Modal */
  .streaming-logo { width: 28px; height: 28px; }
  .streaming-text { font-size: 11px; padding: 3px 8px; }

  /* Quick-Decide */
  .quick-decide-title { font-size: 14px; }

  /* Watchlist Button in Listen-Tab */
  #list-watchlist .btn-secondary { min-height: 36px; }

  /* N1: Card-Grid: minmax(100px) → 3 Spalten auf 375px (M7-Regel überschreiben) */
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }

  /* N2: Modal-Details: Abstand zwischen Sektionen kompakter */
  .modal__details { gap: 14px; }

  /* N3: Scroll-to-Top-Button auf Mobile kleiner */
  #scroll-top-btn, .scroll-top-btn { width: 36px; height: 36px; font-size: 14px; }

  /* N4: Ext-Ratings (Metacritic, RT, IMDB) kompakter */
  .ext-rating { padding: 6px 10px; min-width: 58px; }
  .ext-rating__value { font-size: 15px; }
  .ext-rating__source { font-size: 9px; }

  /* N5: Tags kleiner auf Mobile */
  .tag { font-size: 11px; padding: 3px 8px; }
  .tag--keyword { font-size: 10px; }
  .tag-list { gap: 4px; }

  /* N6: Rank-Items kompakter */
  .rank-item { padding: 8px 10px; gap: 8px; }
  .rank-item__title { font-size: 12px; }
  .rank-item__number { font-size: 20px; width: 28px; }
  .rank-item__poster { width: 32px; }
  .rank-item__rating { font-size: 12px; }

  /* N7: Hero-Rating-Badge kleiner */
  .hero__rating-badge { font-size: 10px; padding: 3px 10px; }

  /* N8: Modal-Backdrop-Titel Überschrift kleiner */
  .modal__backdrop-title h2 { font-size: 18px; }

  /* N9: Stats-Tile Padding auf Mobile */
  .stats-tile { padding: 12px; }
  .stats-tile__label { font-size: 11px; }

  /* N10: Finder-Skip-Button kleiner */
  .finder__skip-btn { font-size: 12px; padding: 6px 10px; min-height: 32px; }

  /* N11: Sort-Pills auf Mobile kompakter */
  .sort-pill { padding: 5px 10px; font-size: 11px; }

  /* N12: Masterpiece-Hero kompakter */
  .masterpiece-hero { padding: 16px; }
  .masterpiece-hero__rank { font-size: 11px; }
  .masterpiece-hero__title { font-size: 16px; }
  .masterpiece-hero__meta { font-size: 11px; }

  /* N13: Season-Badges kleiner */
  .season-badge { font-size: 10px; padding: 1px 6px; }

  /* N14: Filter-Chip kleiner (schon im COMPACT OVERRIDE, Verstärkung) */
  .filter-chip { font-size: 11px; padding: 3px 8px; }
  .filter-chip__x { padding: 0 3px; }

  /* N15: Finder-Ergebnis-Karten kompakter */
  .finder-card__body { padding: 12px; gap: 6px; }
  .finder-card__title { font-size: 14px; }
  .finder-card__rating { font-size: 24px; }
  .finder-card__meta { font-size: 11px; gap: 6px; }
  .finder-card__reason { font-size: 11px; }

  /* N16: Stats-Sektion auf Mobile */
  .stats-section { padding: 12px; }
  .stats-section__title { font-size: 12px; margin-bottom: 10px; }

  /* N17: Trophy-Grid kompakter (bereits 3 Spalten, Padding reduzieren) */
  .trophy-grid { gap: 8px; }

  /* N18: Modal-Sektion-Titel kleiner */
  .modal__section-title { font-size: 9px; padding-top: 8px; margin-bottom: 6px; }

  /* N19: Similar-Minicards im Modal */
  .similar-minicard__title { font-size: 11px; }

  /* N20: Discover-Header kompakter */
  .discover__header { margin-bottom: 14px; }
  .discover__count { font-size: 11px; }

  /* N21: Lists-Tabs margin kleiner */
  .lists__tabs { margin-bottom: 16px; }

  /* N22: Stats-Bar gap kleiner */
  .stats-bar { gap: 14px; }

  /* N23: Hero-Tagline kleiner */
  .hero__tagline { font-size: 12px; margin-bottom: 10px; }

  /* N24: Quick-Search-Box Result-Titel kleiner */
  .quicksearch-result__title { font-size: 13px; }
  .quicksearch-result__meta { font-size: 11px; }

  /* N25: Watchlist Top3 kompakter */
  .watchlist-top3 { padding: 12px; margin-bottom: 16px; }
  .watchlist-top3__title { font-size: 11px; margin-bottom: 8px; }

  /* N26: Nav-Layout Mobile — Logo LINKS, Suche/? rechts neben Hamburger
     Problem: margin-left:auto auf .nav__logo UND .nav__hamburger → freier Raum wird geteilt.
     Fix: Logo + Hamburger-Margin auf 0, nur search-btn bekommt margin-left:auto */
  .nav__logo { margin-left: 0; }
  .nav__hamburger { margin-left: 0; }
  .nav__search-btn { margin-left: auto; }

  /* N27: Nav-Icons — Lupe+? etwas größer, Hamburger kleiner, besser eingerückt */
  .nav__logo-img { height: 24px; }                          /* Logo etwas höher */
  .nav__search-btn { min-height: 36px; padding: 6px 7px; } /* Lupe größer */
  .nav__shortcuts-btn { min-height: 36px; padding: 6px 6px; } /* ? größer */
  .nav__hamburger { min-width: 28px; min-height: 28px; padding: 3px; margin-right: 2px; } /* Hamburger kleiner, etwas Abstand rechts */

  /* N28: Filter-Select Dropdowns (Entdecken) kompakter
     WICHTIG: font-size bleibt 16px (iOS Zoom-Schutz!) */
  .filter-select { min-height: 36px; padding: 6px 28px 6px 10px; }

  /* ── Enhancement Cycles E1–E50 ─────────────────────────────── */

  /* E1: Nav-Höhe 44px → 40px spart 4px vertikalen Platz */
  :root { --nav-height: 40px; }

  /* E2: Strip-Karten auf Mobile schmaler (110→100px) + gap kleiner */
  .strip .card { width: 100px; }
  .strip { gap: 6px; }

  /* E3: Strip-Section-Abstand kompakter */
  .strip-section { margin-bottom: 16px; }
  .strip-section__header { margin-bottom: 12px; }

  /* E4: Home-Content horizontale Padding auf 10px reduzieren */
  .home-content { padding-left: 10px; padding-right: 10px; }

  /* E5: Card-Info-Padding noch kompakter */
  .card__info { padding: 5px 6px 7px; gap: 3px; }

  /* E6: Card-Watchlist-Button auf Mobile kleiner (28→22px) */
  .card__watchlist-btn { width: 22px; height: 22px; font-size: 11px; }

  /* E7: Hero Höhe etwas reduzieren + padding */
  .hero { height: 50vh; min-height: 300px; padding: 12px 14px 20px; }

  /* E8: Hero Rating-Badge kompakter */
  .hero__rating-badge { padding: 3px 10px; font-size: 11px; margin-bottom: 10px; }

  /* E9: Hero Overview-Text Margin reduzieren */
  .hero__overview { margin-bottom: 10px; }

  /* E10: Hero-Byline Padding compact */
  .home-byline { padding: 2px 12px 0; font-size: 11px; }

  /* E11: Modal-Backdrop Höhe reduzieren (180→150px) */
  .modal__backdrop { height: 150px; }

  /* E12: Modal-Aktionen kompakter auf Mobile */
  .modal__actions { gap: 6px; }

  /* E13: Modal-Prev/Next kompakter */
  .modal__list-nav { padding: 10px 10px; }

  /* E14: Modal Pull-Handle dezenter */
  .modal::before { margin: 8px auto 0; }

  /* E15: Discover padding reduce */
  .discover { padding-left: 10px; padding-right: 10px; }

  /* E16: Discover Filter-Bereich padding */
  .filters { padding: 10px; gap: 6px; }

  /* E17: Discover Header Abstand reduzieren */
  .discover__header { margin-bottom: 10px; }

  /* E18: Sort-Pills-Row weniger margin */
  .sort-row { margin-bottom: 8px; gap: 4px; }

  /* E19: Lists Padding reduce */
  .lists { padding-left: 10px; padding-right: 10px; }

  /* E20: Finder Padding reduce */
  .finder { padding-left: 10px; padding-right: 10px; }

  /* E21: Finder-Mode-Card kompakter */
  .finder__mode-card { padding: 12px 14px; }
  .finder__mode-cards { gap: 8px; }

  /* E22: Finder-Ergebnis-Karten kompakter */
  .finder-card { padding: 12px; }
  .finder-result-grid { gap: 8px; }

  /* E23: Finder Frage-Navigation kompakter */
  .finder__nav { margin-top: 8px; gap: 6px; }
  .finder__progress { margin-bottom: 10px; }

  /* E24: Stats-Abstand reduzieren */
  .stats-section { padding: 10px; }
  .stats-overview { gap: 8px; }

  /* E25: Home-Genre-Chips auf Mobile wrap optimieren */
  .home-genre-chips { gap: 5px; }
  .home-genre-row { margin: 0 0 16px; }

  /* E26: Home-Streaming-Row Padding */
  .home-streaming-row { padding: 10px 10px 0; gap: 8px; }

  /* E27: Home-Share-Banner Padding */
  .home-share-banner { padding-left: 10px; padding-right: 10px; }

  /* E28: Home-Mood-Widget Padding */
  .home-mood-widget { padding-left: 10px; padding-right: 10px; }
  .home-mood-buttons { gap: 5px; }

  /* E29: Quick-Decide Box kompakter */
  .quick-decide-box { gap: 8px; }
  .quick-decide-poster img { max-width: 100px; }
  .quick-decide-content { gap: 6px; }

  /* E30: Rank-Item Poster noch kleiner auf Mobile */
  .rank-item__poster { width: 28px; }
  .rank-item { gap: 6px; }

  /* E31: Statistik-Heatmap kompakter */
  .heatmap { gap: 2px; }
  .heatmap__cell { width: 10px; height: 10px; border-radius: 2px; }

  /* E32: Direktoren-Suche Tab compakter */
  #list-directors input { min-height: 36px; padding: 6px 10px; font-size: 16px; }

  /* E33: Quick-Search Treffer-Liste kompakter */
  .quicksearch-result { padding: 8px 12px; gap: 8px; }
  .quicksearch-result__poster { width: 28px; }

  /* E34: Footer auf Mobile kompakter */
  .site-footer { padding: 20px 12px; margin-top: 32px; }

  /* E35: Section-Titel Line-Height auf Mobile */
  .discover__title, .lists__title, .finder__title { line-height: 1.1; margin-bottom: 8px; }

  /* ── Visual Consistency E36–E45 ─────────────────────────────── */

  /* E36: Sort-Pill active Farbe explizit rot setzen */
  .sort-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  /* E37: Filter-Toggle active Farbe sicherstellen */
  .filter-toggle.active { background: rgba(229,9,20,0.12); color: var(--accent); border-color: var(--accent); }

  /* E38: Mobile-Filter-Toggle active state */
  .mobile-filter-toggle.active { color: var(--accent); border-color: var(--accent); }

  /* E39: Watchlist-Btn in Modal active konsistent */
  .watchlist-btn.active { color: var(--accent); border-color: var(--accent); }

  /* E40: Quick-Filter chip active konsistent */
  .quick-filter-chip.active { background: rgba(229,9,20,0.12); color: var(--accent); border-color: var(--accent); }

  /* E41: Home-Genre-Chip active konsistent */
  .home-genre-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(229,9,20,0.06); }

  /* E42: Home-Streaming-Chip active konsistent */
  .home-streaming-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(229,9,20,0.06); }

  /* E43: Mood-Button active konsistent */
  .home-mood-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(229,9,20,0.08); }

  /* E44: Card-Info gap + title font */
  .card__title { font-size: 10px; line-height: 1.2; }
  .card__year { font-size: 9px; }

  /* E45: Stat-Tile Wert-Schrift konsistente Größe */
  .stats-tile__value { font-size: 22px; }

  /* ── Bugfixes E46–E50 ────────────────────────────────────────── */

  /* E46: Filter-select appearance auf Mobile sicherstellen (Pfeil sichtbar) */
  .filter-select { -webkit-appearance: auto; appearance: auto; }

  /* E47: Quicksearch-Input focus border */
  .quicksearch-input:focus { border-color: var(--accent); outline: none; }

  /* E48: Modal auf Mobile — max-height erhöhen damit mehr Content sichtbar */
  .modal { max-height: 94vh; }

  /* E49: Finder-Option Text-Overflow verhindern */
  .finder__option { overflow: hidden; }
  .finder__option-label { overflow: hidden; text-overflow: ellipsis; }

  /* E50: Nav-Dropdown auf Mobile etwas kompakter */
  .nav__link { padding: 10px 14px; min-height: 40px; }

  /* ── Enhancement Cycles F1–F50 ─────────────────────────────── */

  /* F1: Nav-Inner: kleine horizontale Padding damit Icons nicht am Rand kleben */
  .nav__inner { padding-left: 12px; padding-right: 8px; gap: 2px; }

  /* F2: Strip-Scroll-Padding: Links und rechts etwas Luft beim Scrollen */
  .strip { padding-left: 2px; padding-right: 12px; scroll-padding-left: 2px; }

  /* F3: Home-Section padding-top nach Nav: kompakter */
  .home-content { padding-top: 12px; }

  /* F4: Hero-Content max-width auf Mobile volle Breite */
  .hero__content { max-width: 100%; }

  /* F5: Hero-Titel: schlanker auf sehr kleinen Screens */
  .hero__title { font-size: clamp(22px, 6vw, 34px); }

  /* F6: Hero-Meta (Regisseur, Laufzeit) kompakter */
  .hero__meta { font-size: 11px; gap: 10px; margin-bottom: 10px; }

  /* F7: Modal-Backdrop-Titel kompakter */
  .modal__backdrop-title h2 { font-size: 16px; line-height: 1.2; }
  .modal__backdrop-title { left: 12px; bottom: 10px; right: 50px; }

  /* F8: Modal-Streaming-Row kompakter */
  .modal__streaming { gap: 6px; }
  .streaming-logo { width: 26px; height: 26px; }

  /* F9: Modal-Cast-Chips kompakter */
  .cast-chip { font-size: 10px; padding: 3px 7px; }
  .cast-chip__role { font-size: 9px; }

  /* F10: Modal-Ähnliche-Filme: schmaler */
  .similar-minicard { width: 70px; }
  .similar-minicard__title { font-size: 10px; }

  /* F11: Modal-Tab-Bar wenn vorhanden: scrollen ohne sichtbare Scrollbar */
  .modal__tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .modal__tabs::-webkit-scrollbar { display: none; }

  /* F12: Stats-Tiles Grid 2×2 bleibt, aber Padding noch kompakter */
  .stats-tile { padding: 10px; }
  .stats-tile__value { font-size: 20px; }
  .stats-tile__label { font-size: 10px; }

  /* F13: Stats-Bar-Items Separator optisch leichter */
  .stats-bar__item + .stats-bar__item { border-left: 1px solid rgba(255,255,255,0.06); padding-left: 14px; }

  /* F14: Stats-Heatmap Zellen noch etwas kleiner */
  .heatmap__cell { width: 9px; height: 9px; }

  /* F15: Stats-Trend-Chart kompakter */
  .trend-bar { min-height: 60px; }

  /* F16: Lists-Tab badge kompakter */
  .lists__tab-badge { font-size: 9px; padding: 1px 4px; }

  /* F17: Rank-Item: Jahr-Text kleiner */
  .rank-item__year { font-size: 10px; }
  .rank-item__meta { font-size: 10px; }

  /* F18: Rank-Item-Tier-Badge kleiner */
  .rank-item__tier { font-size: 9px; padding: 1px 5px; }

  /* F19: Masterpiece-Hero Badge kompakter */
  .masterpiece-hero__badge { font-size: 9px; padding: 1px 5px; }

  /* F20: Top-Listen Tab: Regisseur-Suche label kleiner */
  .directors-search-label { font-size: 11px; }

  /* F21: Finder-Überschrift über Fragen kleiner */
  .finder__step-label { font-size: 10px; }
  .finder__results-title { font-size: 18px; margin-bottom: 12px; }

  /* F22: Finder-Karte: Begründungstext kompakter */
  .finder-card__reason { font-size: 10px; line-height: 1.3; }
  .finder-card__tier-badge { font-size: 9px; padding: 1px 5px; }

  /* F23: Quick-Decide: Text kompakter */
  .quick-decide-genre { font-size: 10px; }
  .quick-decide-meta { font-size: 11px; }

  /* F24: Genre-Kacheln auf Startseite: count Badge kleiner */
  .home-genre-chip__count { font-size: 9px; padding: 0 4px; }

  /* F25: Streaming-Chip Label kleiner */
  .home-streaming-chip { font-size: 10px; padding: 3px 8px; }
  .home-streaming-label { font-size: 10px; }

  /* F26: Mood-Widget-Titel kleiner */
  .home-mood-label { font-size: 10px; }

  /* F27: Share-Banner Text kleiner */
  .home-share-text { font-size: 11px; }
  .home-share-btn { font-size: 11px; padding: 5px 10px; }

  /* F28: Load-More Button kompakter */
  .btn-load-more { min-height: 34px; padding: 6px 16px; font-size: 11px; }

  /* F29: Filter-Chip-Leiste (aktive Filter) kompakter */
  .active-filters { gap: 4px; margin-bottom: 6px; }

  /* F30: Discover-Count-Row kompakter */
  .discover__count-row { margin-bottom: 6px; gap: 6px; }

  /* F31: Ext-Rating-Row im Modal kompakter */
  .ext-ratings { gap: 6px; }

  /* F32: Modal Section padding */
  .modal__content { padding: 12px; }

  /* F33: Watchlist-Tab: leerer Zustand kompakter */
  .watchlist-empty { padding: 20px 12px; font-size: 13px; }

  /* F34: Scroll-to-Top Button noch etwas nach innen */
  #scroll-top-btn, .scroll-top-btn { bottom: 12px; right: 12px; }

  /* F35: Seiten-Abstand unten */
  .section { padding-bottom: 40px; }

  /* ── Visual Consistency F36–F45 ─────────────────────────────── */

  /* F36: Btn-secondary auf Mobile: border konsistent */
  .btn-secondary { border-color: var(--border-warm); }
  .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

  /* F37: Filter-More-Summary Icon-Rotation bei open */
  .filter-more-summary[open] .filter-more-arrow,
  details[open] .filter-more-arrow { transform: rotate(180deg); }

  /* F38: Sort-Pill gap konsistent */
  .sort-row { gap: 5px; }

  /* F39: Strip-Section Titel Farbe konsistent (muted) */
  .strip-section__title { color: var(--text-secondary); }

  /* F40: Strip-Section All-Link Farbe */
  .strip-section__all { font-size: 11px; color: var(--text-muted); }

  /* F41: Modal-Tier-Excellent Badge: pink → konsistenter */
  .modal__tier.tier-excellent { color: var(--tier-excellent); }

  /* F42: Card-Tier-Badge auf Poster: konsistente Größe */
  .card__poster .card__tier { padding: 4px; }

  /* F43: Home-Stats Item-Gap konsistenter */
  .stats-bar { gap: 12px; }

  /* F44: Quick-Filter-Row padding kleiner */
  .quick-filters { padding: 8px 12px; }

  /* F45: Filter-AND-Connector Text kleiner */
  .filter-and-connector { font-size: 10px; }

  /* ── Bugfixes F46–F50 ────────────────────────────────────────── */

  /* F46: Home-Content padding-top: section padding-top zieht nav-height ab;
     ohne explizites padding-top startet content direkt unter nav */
  .home-content { padding-top: 0; }

  /* F47: Modal-Overlay: overflow verhindert Bounce-Scrollen auf iOS */
  .modal-overlay { overscroll-behavior: contain; }

  /* F48: Nav-Links-Dropdown: overflow-y scroll wenn viele Links */
  .nav__links.open { overflow-y: auto; max-height: calc(100vh - 40px); }

  /* F49: filter-select: auf Mobile kein min-height von 36px wenn in filter-more-body */
  .filter-more-body .filter-select { min-height: 34px; }

  /* F50: Card-Grid gap fix: E-Regeln haben gap:8px, N-Regeln auch — sicherstellen */
  .card-grid { gap: 7px; }

  /* ══════════════════════════════════════════════════════════════
     GEZIELTE ITERATIONS-FIXES — überschreibt alles oben
     Ziel 1: Nav-Ausrichtung (Root Cause)
     Ziel 2: Typographie-Skala
     Ziel 3: Element-Größen
     Ziel 4: Abstände / Padding
     Ziel 5: Konsistenz-Polish
     ══════════════════════════════════════════════════════════════ */

  /* ── Ziel 1: Nav — Root Cause beheben ──────────────────────────
     Problem: .nav hat padding:14px 32px 0 + align-items:flex-start
     → Content startet 14px von oben, Icons mit min-height:36px laufen
       über die 40px Nav-Höhe hinaus, Logo hängt zu tief.
     Fix: padding auf 0, flex-items mittig zentrieren.             */
  .nav { padding: 0 14px; align-items: center; }
  .nav__inner { align-items: center; gap: 4px; padding: 0; }

  /* Hamburger: Span-Linien kleiner (waren 22px) + Gap anpassen */
  .nav__hamburger { gap: 4px; padding: 2px; min-width: 24px; min-height: 24px; }
  .nav__hamburger span { width: 16px; }
  /* Transforms für schmalere Spans anpassen (gap:4 + height/2:1 = 5px) */
  .nav__hamburger.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav__hamburger.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  /* Lupe und ? — kleinere Targets, passen in die 40px Nav */
  .nav__search-btn    { min-height: 28px; padding: 4px 6px; }
  .nav__shortcuts-btn { min-height: 28px; padding: 4px 5px; }

  /* Logo: etwas kleiner damit es bündig im 40px Nav wirkt */
  .nav__logo-img { height: 20px; }

  /* ── Ziel 2: Typographie-Skala (zu große Schriften) ────────────
     Identifizierte Übeltäter und ihre letzten Werte:            */

  /* Stats-Zahlen: 20px → 13px */
  .stats-bar__number { font-size: 13px; }
  .stats-bar__genre  { font-size: 10px; }
  .stats-bar__label  { font-size: 8px; }

  /* Modal-Bewertungszahl: 32px → 20px */
  .modal__rating-number { font-size: 20px; }

  /* Finder-Frage: 18px → 14px */
  .finder__question-text { font-size: 14px; margin-bottom: 10px; }

  /* Strip-Titel: 17px → 11px (die 17px-Regel steht vor dem FINAL OVERRIDE) */
  .strip-section__title { font-size: 11px; }

  /* Seiten-Titel: 20px → 16px */
  .discover__title, .lists__title, .finder__title { font-size: 16px; margin-bottom: 6px; }

  /* Stats-Tile Wert: 20px → 15px */
  .stats-tile__value { font-size: 15px; }
  .stats-tile__label { font-size: 8px; }

  /* Hero-Titel: clamp runter */
  .hero__title { font-size: clamp(16px, 5vw, 26px); }

  /* Finder-Mode-Card */
  .finder__mode-card-label { font-size: 13px; }
  .finder__mode-card-desc  { font-size: 10px; }

  /* ── Ziel 3: Element-Größen ─────────────────────────────────── */

  /* Mood-Buttons */
  .home-mood-btn { min-height: 30px; padding: 4px 10px; font-size: 11px; }

  /* Genre + Streaming Chips */
  .home-genre-chip     { min-height: 24px; padding: 2px 8px; font-size: 10px; }
  .home-streaming-chip { min-height: 24px; padding: 2px 7px; font-size: 10px; }

  /* Quick-Filter-Chips */
  .quick-filter-chip { min-height: 24px; padding: 2px 8px; font-size: 10px; }

  /* Filter-Toggle-Buttons */
  .filter-toggle { min-height: 26px; font-size: 10px; padding: 3px 6px; }
  .filter-more-summary { min-height: 30px; font-size: 10px; }

  /* Listen-Tabs */
  .lists__tab { min-height: 28px; padding: 4px 7px; font-size: 10px; }

  /* Sort-Pills */
  .sort-pill { padding: 3px 7px; font-size: 10px; }

  /* Finder-Optionen */
  .finder__option { min-height: 30px; padding: 7px 9px; }
  .finder__option-label { font-size: 12px; }
  .finder__option-desc  { font-size: 10px; }

  /* Hero-Buttons */
  .hero__buttons .btn-primary,
  .hero__buttons .btn-secondary { min-height: 32px; padding: 5px 11px; font-size: 11px; }

  /* Modal-Buttons */
  .modal__actions .btn-primary,
  .modal__actions .btn-secondary { min-height: 34px; padding: 5px 11px; font-size: 11px; }

  /* Btn-Reset */
  .btn-reset { min-height: 28px; padding: 3px 8px; font-size: 10px; }

  /* ── Ziel 4: Abstände und Padding ───────────────────────────── */

  /* Nav-Höhe auf 38px reduzieren */
  :root { --nav-height: 38px; }

  /* Stats-Bar kompakter */
  .stats-bar { gap: 10px; padding: 6px 12px; }
  .stats-bar__item { gap: 1px; }

  /* Filter-Bereich: weniger Padding */
  .filters { padding: 8px; gap: 5px; }

  /* Card-Grid: enger */
  .card-grid { gap: 5px; }

  /* Strip enger */
  .strip-section { margin-bottom: 12px; }
  .strip-section__header { margin-bottom: 8px; }
  .strip { gap: 5px; }
  .strip .card { width: 90px; }

  /* Sections: Rand weiter reduzieren */
  .home-content, .discover, .lists, .finder { padding-left: 10px; padding-right: 10px; }

  /* Modal: kompakter */
  .modal__body { padding: 10px; gap: 8px; }
  .modal__backdrop { height: 140px; }
  .modal__actions { gap: 5px; }

  /* ── Ziel 5: Konsistenz-Polish ──────────────────────────────── */

  /* Scroll-to-Top Button */
  #scroll-top-btn, .scroll-top-btn { width: 30px; height: 30px; font-size: 12px; }

  /* Tags einheitlich */
  .tag { font-size: 10px; padding: 2px 6px; }

  /* Card: Titel und Jahr */
  .card__title { font-size: 10px; line-height: 1.15; }
  .card__year  { font-size: 9px; }
  .card__info  { padding: 4px 5px 6px; gap: 2px; }

  /* Quick-Decide */
  .quick-decide-title { font-size: 12px; }

  /* Watchlist-Btn (Liste) */
  #list-watchlist .btn-secondary { min-height: 32px; }

  /* Person-Filter kleiner */
  .person-drop-item { min-height: 32px; padding: 6px 10px; font-size: 11px; }
  .person-tag-input { min-height: 32px; }

  /* ── Entdecken-Seite: gezielte Nacharbeit ───────────────────── */

  /* filter-more-summary: "Weitere Filter"-Zeile kompakter */
  .filter-more-summary { min-height: 28px; font-size: 10px; padding: 2px 0; }

  /* filter-more-body: innere Dropdowns und Toggles */
  .filter-more-body { padding-top: 8px; gap: 5px; }
  .filter-more-body .filter-select  { min-height: 34px; }
  .filter-more-body .filter-toggle  { min-height: 24px; padding: 2px 5px; font-size: 10px; }

  /* active-filters Chip-Leiste */
  .active-filters { gap: 3px; flex-wrap: wrap; }
  .filter-chip    { font-size: 10px; padding: 2px 6px; min-height: 22px; }
  .filter-chip__x { padding: 0 2px; font-size: 10px; }

  /* filter-and-connector */
  .filter-and-connector { font-size: 9px; }

  /* mobile-filter-toggle (Button zum Ein-/Ausklappen der Filter) */
  .mobile-filter-toggle { padding: 5px 10px; font-size: 11px; min-height: 28px; }

  /* Discover: Zähler-Zeile */
  .discover__count { font-size: 10px; }

  /* ── Finder-Seite: gezielte Nacharbeit ─────────────────────── */

  /* Finder-Nav-Buttons (Weiter/Zurück): waren noch 38px */
  .finder__nav .btn-primary,
  .finder__nav .btn-secondary { min-height: 30px; padding: 5px 12px; font-size: 11px; }

  /* Finder-Card Bewertungszahl: 24px → 17px */
  .finder-card__rating { font-size: 17px; }
  .finder-card__rating-max { font-size: 11px; }
  .finder-card__title { font-size: 13px; }
  .finder-card__meta  { font-size: 10px; gap: 4px; }
  .finder-card__body  { padding: 10px; gap: 5px; }

  /* Finder-Provider-Tiles (Streaming-Anbieter-Auswahl) */
  .finder__provider-tile { min-height: 30px; min-width: 46px; padding: 4px 6px; }

  /* Finder-Favoriten-Dropdown */
  .finder__fav-drop-item { min-height: 30px; padding: 5px 10px; font-size: 11px; }

  /* Finder-Ergebnis-Titel */
  .finder__results-title { font-size: 16px; margin-bottom: 8px; }

  /* Finder-Skip-Button */
  .finder__skip-btn { font-size: 11px; padding: 4px 8px; min-height: 26px; }

  /* Finder-Fortschritts-Schritte */
  .finder__progress-step { width: 6px; height: 6px; }
  .finder__progress { gap: 3px; margin-bottom: 8px; }

  /* ── Entdecken: fehlende Mobile-Overrides ───────────────────── */

  /* filter-select: min-height war noch 44px aus früherer Regel */
  .filter-select { min-height: 34px; padding: 5px 26px 5px 9px; font-size: 16px; }

  /* filter-toggle-count Badge */
  .filter-toggle-count { font-size: 9px; padding: 0 3px; }

  /* AND/OR-Mini-Toggle in Filterkombis */
  .filter-toggle-mini { font-size: 10px; padding: 2px 5px; min-height: 22px; }

  /* Mobiles Filter-Badge (Anzahl aktiver Filter) */
  .mobile-filter-badge { font-size: 9px; padding: 1px 4px; }

  /* ── Finder: fehlende Mobile-Overrides ─────────────────────── */

  /* Untertitel unter "Für dich" */
  .finder__subtitle { font-size: 11px; margin-bottom: 12px; }

  /* Modus-Karten-Icons: inline style="32px" mit !important überschreiben */
  .finder__mode-card-icon svg,
  .finder__mode-card-icon i { width: 20px !important; height: 20px !important; }

  /* Modus-Karten: padding noch compakter */
  .finder__mode-card { padding: 10px 12px; }

  /* Options-Icons: inline style="28px" überschreiben */
  .finder__option-icon svg,
  .finder__option-icon i { width: 16px !important; height: 16px !important; }

  /* Optionen-Anzahl-Badge */
  .finder__option-count { font-size: 9px; padding: 1px 4px; }

  /* Pool-Anzeige ("X Filme") */
  .finder__pool-count { font-size: 9px; }

  /* Frage-Untertitel und optionale Schritt-Badge */
  .finder__question-sub    { font-size: 11px; margin-bottom: 10px; }
  .finder__optional-badge  { font-size: 9px; padding: 1px 4px; }
  .finder__question-number { font-size: 10px; }

  /* Nav-Abstand verringern */
  .finder__nav { margin-top: 10px; gap: 6px; }

  /* Provider-Beschriftungen */
  .finder__provider-label { font-size: 11px; margin-bottom: 6px; }
  .finder__provider-hint  { font-size: 9px; }
  .finder__provider-tile-name  { font-size: 10px; }
  .finder__provider-tile-count { font-size: 9px; }

  /* Favoriten-Input: font-size 16px bleibt (iOS), nur Höhe reduzieren */
  .finder__fav-input { min-height: 34px; padding: 5px 10px; font-size: 16px; }
  .finder__fav-chips { gap: 4px; }

  /* Letzter Suche Chip */
  .finder__last-search-chip { font-size: 10px; padding: 3px 8px; }

  /* Finder-Card (Ergebnis): äußeres padding */
  .finder-card { padding: 10px; }

  /* ── Entdecken: appearance-Fix + Suchfeld ───────────────────
     E46 hatte appearance:auto gesetzt → iOS gibt native Darstellung (~44px).
     Zurück auf none, damit unser min-height:34px greift.               */
  .filter-select { -webkit-appearance: none !important; appearance: none !important; }

  /* Suchfeld-Input: Padding von 9px auf 5px reduzieren → ~26px statt 34px */
  .filter-search input { padding: 5px 0; }

  /* filter-search: kein align-items:stretch (verhindert künstliche Hochrechnung) */
  .filters { align-items: flex-start; }

  /* Suchfeld-Container: leicht kompakter */
  .filter-search { padding: 0 10px; min-height: 28px; }

  /* ── Finder: Gap + Abstände reduzieren ──────────────────────
     Option-Kacheln: gap 10px → 4px zwischen Icon/Label/Desc    */
  .finder__option { gap: 4px; }

  /* Options-Grid: Gap zwischen den Kacheln kleiner */
  .finder__options { gap: 6px; }

  /* Mode-Card-Icon: Margin unten 14px → 6px */
  .finder__mode-card-icon { margin-bottom: 6px; }

  /* Mode-Card-Features: margin-top + gap kleiner */
  .finder__mode-card-features { margin-top: 6px; gap: 3px; }
  .finder__mode-card-features span { font-size: 9px; padding: 1px 6px; }

  /* Letzte-Suche: weniger Abstand */
  .finder__last-search { margin-bottom: 8px; gap: 5px; }
  .finder__last-search-label { font-size: 10px; }

  /* Finder Überschriften: question-text auf Modus-Auswahl-Screen kompakter */
  .finder__mode-selection .finder__question-text { font-size: 13px; margin-bottom: 12px; }

  /* ── Screenshot-Fixes: Entdecken ────────────────────────────
     height statt min-height: erzwingt feste Höhe unabhängig von
     früheren min-height-Regeln. */
  .filter-select {
    height: 25px !important;
    min-height: unset !important;
    padding: 0 18px 0 6px !important;
    font-size: 11px !important;
    line-height: 25px !important;
    box-sizing: border-box !important;
  }

  /* Suchfeld: gleiche Logik — feste Höhe */
  .filter-search { height: 25px !important; min-height: unset !important; padding: 0 8px !important; box-sizing: border-box !important; }
  .filter-search input { height: 100% !important; padding: 0 !important; font-size: 11px !important; line-height: 25px !important; }

  /* filter-toggle: 3-Spalten → 2-Spalten (verhindert "Überbewertet"-Overflow) */
  .filter-toggle {
    flex: 1 1 calc(50% - 5px) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .filter-more-body .filter-toggle { flex: 1 1 calc(50% - 4px) !important; }

  /* Discover-Header-Buttons: normaler Flow auf Mobile (kein margin-left:auto →
     verhindert dass "Erweiterte Logik" aus dem Screen läuft) */
  .discover__header { gap: 4px; align-items: center; }
  #discover-header-left { flex-direction: row; flex-wrap: wrap; gap: 4px; align-items: center; }
  #filter-advancedlogic { margin-left: 0 !important; }
  #filter-negate        { margin-left: 0 !important; }

  /* Alle drei Header-Buttons gleich groß */
  #random-film-btn,
  #filter-advancedlogic,
  #filter-negate {
    font-size: 10px !important;
    padding: 3px 7px !important;
    min-height: 24px !important;
    height: auto !important;
  }

  /* person-tag-input und person-drop-item kompakter */
  .person-tag-input { height: 25px !important; min-height: unset !important; padding: 0 8px !important; box-sizing: border-box !important; }
  .person-inner-input { font-size: 11px !important; padding: 0 !important; height: 100% !important; }
  .person-drop-item { min-height: 25px !important; padding: 4px 10px !important; font-size: 11px !important; }
}

@media (max-width: 380px) {
  /* M8: Finder-Optionen: eine Spalte auf sehr kleinen Screens */
  .finder__options { grid-template-columns: 1fr; }
  /* Noch kompaktere Abstände auf kleinen Screens */
  .home-content, .discover, .lists, .finder {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* S31 + S32: Landscape-Modus auf Mobile — Finder kompakter */
@media (max-height: 480px) and (orientation: landscape) {
  /* Finder: weniger vertikaler Abstand damit alles auf einen Blick passt */
  .finder { padding-top: 16px; padding-bottom: 16px; }
  .finder__question-text { font-size: 20px; margin-bottom: 16px; }
  .finder__option { padding: 10px 12px; min-height: 40px; }
  .finder__progress { margin-bottom: 16px; }
  .finder__nav { margin-top: 12px; }
  .finder__results-title { font-size: 22px; }
}

/* ============================================================
   KEYBOARD-SHORTCUT-OVERLAY
   ============================================================ */
/* Poster-Zoom Overlay */
.poster-zoom-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
  animation: fadeIn .15s ease;
}
.poster-zoom-img {
  max-height: 90vh; max-width: 90vw;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8);
}
.modal__poster-img { cursor: zoom-in; }

/* Quick-Decide Overlay */
.quick-decide-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.quick-decide-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 500px; width: 100%;
  display: flex; gap: 20px;
  padding: 24px;
  position: relative;
}
.quick-decide-close {
  position: absolute; top: 12px; right: 16px;
  cursor: pointer; color: var(--text-muted); font-size: 18px;
}
.quick-decide-poster img {
  width: 120px; border-radius: 8px;
  flex-shrink: 0;
}
.quick-decide-info { flex: 1; }
.quick-decide-title { font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.quick-decide-meta { color: var(--text-secondary); font-size: 13px; margin-bottom: 6px; }
.quick-decide-rating { color: var(--accent); font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.quick-decide-desc { color: var(--text-secondary); font-size: 12px; line-height: 1.5; margin-bottom: 14px; }
.quick-decide-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.shortcuts-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  z-index: 3500;
  align-items: center;
  justify-content: center;
}
.shortcuts-overlay.open { display: flex; }

.shortcuts-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-width: 280px;
  max-width: 360px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.shortcuts-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.shortcuts-header button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
}
.shortcuts-grid { display: flex; flex-direction: column; gap: 10px; }
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.shortcut-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  font-family: monospace;
  color: var(--text-primary);
  box-shadow: 0 1px 0 var(--border);
}
.shortcut-row span { color: var(--text-secondary); }

/* ============================================================
   GLOBALE SCHNELLSUCHE
   ============================================================ */
.quicksearch-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.quicksearch-overlay.open { display: flex; }

.quicksearch-box {
  width: min(600px, 90vw);
  background: var(--bg-card);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}

.quicksearch-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.quicksearch-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--text-primary);
}
.quicksearch-input::placeholder { color: var(--text-muted); }

.quicksearch-esc {
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: monospace;
}
.quicksearch-clear {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px;
  display: flex; align-items: center; padding: 0 4px;
  line-height: 1;
}
.quicksearch-clear:hover { color: var(--text-primary); }

.quicksearch-results { max-height: 420px; overflow-y: auto; }

.quicksearch-hint {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Suchhistorie */
.quicksearch-history { padding: 16px 16px 8px; }
.quicksearch-history-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.quicksearch-history-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.quicksearch-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.quicksearch-history-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.quicksearch-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.quicksearch-item:last-child { border-bottom: none; }
.quicksearch-item:hover { background: var(--bg-elevated); }

.quicksearch-item__poster {
  width: 36px;
  height: 54px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.quicksearch-item__poster--placeholder {
  background: var(--bg-secondary);
}

.quicksearch-item__info { flex: 1; min-width: 0; }
.quicksearch-item__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quicksearch-item__meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.quicksearch-item__tier {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  flex-shrink: 0;
}

/* Modal-History-Navigation */
.modal__history-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.modal__history-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-warm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.modal__history-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Modal Liste-Navigation (Prev/Next durch gefilterte Filme) */
.modal__list-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  margin-top: 4px;
}
.modal__list-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  max-width: 180px;
}
.modal__list-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.modal__list-nav-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal__list-nav-pos { font-size: 11px; color: var(--text-muted); }

.quicksearch-item__reason { color: var(--accent); }

.quicksearch-item.selected { background: var(--bg-elevated); outline: 1px solid var(--accent); }

/* ============================================================
   NOTIZEN-LISTE
   ============================================================ */
.notes-list { display: flex; flex-direction: column; gap: 1px; }
.notes-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 6px;
  padding: 12px;
}
.notes-item:hover { background: var(--bg-elevated); }
.notes-item__poster {
  width: 52px;
  height: 78px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-card);
}
.notes-item__poster--placeholder {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.notes-item__body { flex: 1; min-width: 0; }
.notes-item__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notes-item__year { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.notes-item__text {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
  /* Maximal 3 Zeilen anzeigen */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   TOP-REGISSEURE
   ============================================================ */
.director-list { display: flex; flex-direction: column; gap: 4px; }

.director-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.director-item:hover { border-color: var(--accent); background: var(--bg-card); }

.director-item__rank {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: -1px;
}
.director-item__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.director-item__meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.director-item__top {
  color: var(--text-secondary);
  margin-left: 6px;
}
.director-item__avg {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -1px;
  text-align: right;
}
.director-item__avg span {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

.finder-card__tier-badge {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.9;
}
/* Enhancement 18: Tier-Farben im Finder konsistent mit rank-item__tier */
.finder-card__tier-badge.tier-masterpiece { background: rgba(229,9,20,.12); color: var(--tier-masterpiece); }
.finder-card__tier-badge.tier-excellent   { background: rgba(167,139,250,.15); color: #a78bfa; }
.finder-card__tier-badge.tier-good        { background: rgba(59,130,246,.12); color: #60a5fa; }
.finder-card__tier-badge.tier-mixed       { background: rgba(139,92,246,.10); color: #a78bfa; }
.finder-card__tier-badge.tier-bad         { background: rgba(75,85,99,.15);   color: #9ca3af; }
.finder-card__director {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

/* Monatliches Balkendiagramm (vertikal) */
.month-bars {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 120px;
  padding-top: 8px;
}
.month-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.month-bar-fill-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.month-bar-fill {
  width: 100%;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height 0.4s ease;
}
.month-bar-count {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 3px;
  height: 14px;
}
.month-bar-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ============================================================
   JAHRZEHNT-KACHELN im Statistiken-Tab
   ============================================================ */
.decade-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.decade-tile {
  padding: 14px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s;
}
.decade-tile:hover { transform: translateY(-2px); }
.decade-tile__label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.decade-tile__count {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
}
.decade-tile__sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ============================================================
   TROPHÄEN im Statistiken-Tab
   ============================================================ */
/* Aktivitäts-Heatmap */
.heatmap-grid {
  display: flex; flex-wrap: wrap; gap: 3px;
  overflow-x: auto;
}
.heatmap-cell {
  width: 12px; height: 12px; border-radius: 2px;
  flex-shrink: 0;
}
.heatmap-cell--0 { background: var(--bg-card); border: 1px solid var(--border); }
.heatmap-cell--1 { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.heatmap-cell--2 { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.heatmap-cell--3 { background: color-mix(in srgb, var(--accent) 65%, transparent); }
.heatmap-cell--4 { background: var(--accent); }
.heatmap-legend {
  display: flex; align-items: center; gap: 4px;
  margin-top: 8px; font-size: 11px; color: var(--text-muted);
}

.trophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.trophy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  text-align: center;
  transition: transform 0.2s ease;
}
.trophy-card--earned {
  background: linear-gradient(135deg, rgba(229,9,20,0.08), rgba(229,9,20,0.03));
  border-color: rgba(229,9,20,0.35);
}
.trophy-card--locked {
  opacity: 0.4;
  filter: grayscale(1);
}
.trophy-card:hover { transform: translateY(-2px); }
.trophy-card__icon  { font-size: 28px; line-height: 1; }
.trophy-card__name  { font-size: 11px; font-weight: 700; color: var(--text-primary); }
.trophy-card__desc  { font-size: 10px; color: var(--text-muted); line-height: 1.3; }

/* ============================================================
   FILM-NOTIZEN im Modal
   ============================================================ */
.modal__notes-section {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}
.modal__notes-input {
  width: 100%;
  min-height: 72px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 10px;
  resize: vertical;
  transition: border-color 0.2s;
}
.modal__notes-input:focus {
  outline: none;
  border-color: var(--accent);
}
.modal__notes-input::placeholder { color: var(--text-muted); }

/* ============================================================
   ÄHNLICHE FILME – Mini-Poster-Karten im Modal
   ============================================================ */
.similar-minicards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.similar-minicard {
  flex: 0 0 90px;
  cursor: pointer;
  border-radius: 6px;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.similar-minicard:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}

.similar-minicard__poster {
  position: relative;
  width: 90px;
  height: 135px;  /* 2:3 Verhältnis */
  background: var(--bg-card);
  overflow: hidden;
}
.similar-minicard__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.similar-minicard__no-poster {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.similar-minicard__tier {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 8px;
  font-weight: 700;
  color: #000;
  padding: 2px 4px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.similar-minicard__title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 5px 5px 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.similar-minicard__year {
  font-size: 9px;
  color: var(--text-muted);
  padding: 0 5px 5px;
}

/* ── Person-Filter: Tag-Input mit custom Dropdown ── */
.person-filter-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 180px;
  min-width: 160px;
}

/* Tag-Input-Feld: sieht aus wie filter-select */
.person-tag-input {
  display: flex;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  min-height: 38px;
  cursor: text;
  transition: border-color 0.2s;
}
.person-tag-input:focus-within {
  border-color: var(--accent);
}

/* Der eigentliche Text-Input innerhalb des Tag-Feldes */
.person-inner-input {
  flex: 1 1 80px;
  min-width: 60px;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  padding: 2px 0;
}
.person-inner-input::placeholder { color: var(--text-muted); }

/* Chip-Zeile unterhalb des Inputs */
.person-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Einzelner Chip */
.person-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(229, 9, 20, 0.12);
  border: 1px solid rgba(229, 9, 20, 0.35);
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  padding: 2px 6px 2px 8px;
  color: var(--accent);
  white-space: nowrap;
  line-height: 1.4;
}
.person-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  opacity: 0.55;
  font-size: 14px;
  padding: 0;
  line-height: 1;
  transition: opacity 0.15s;
}
.person-chip button:hover { opacity: 1; }

/* Custom Dropdown – positioniert relativ zum .person-filter-wrap */
.person-dropdown {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  max-height: 220px;
  overflow-y: auto;
  z-index: 500;
}
.person-drop-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  transition: background 0.1s;
}
.person-drop-item:hover,
.person-drop-item:focus {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.person-drop-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
  flex-shrink: 0;
}
.person-drop-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* ODER / UND Umschalter */
.filter-toggle-mini {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-warm);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.filter-toggle-mini.active {
  background: rgba(229, 9, 20, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

/* Shortcuts-Hilfe-Button in der Navigation */
.nav__shortcuts-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  transition: color .15s;
}
.nav__shortcuts-btn:hover { color: var(--text-primary); }

.kbd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 24px;
  margin-top: 64px;
}
.site-footer__inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.site-footer__about strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.site-footer__about p { line-height: 1.6; }
.site-footer__meta p  { margin-bottom: 4px; }
.site-footer__meta a  {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer__meta a:hover { color: var(--text-primary); }
@media (max-width: 600px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* Schnellsuche-Button in der Navigation */
.nav__search-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s;
}
.nav__search-btn:hover { color: var(--text-primary); }

/* Watchlist Export/Import Aktionen */
.watchlist-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.watchlist-import-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}