/* tunescout – dunkel, eine Akzentfarbe, keine Cards, dezente Bewegung. */

:root {
  --bg: #0a0c0f;
  --text: #e8ebee;
  --muted: #8a929b;
  --faint: #565e66;
  --accent: #2fd8a8;
  --accent-dim: #1d8a6c;
  --hairline: rgba(255, 255, 255, 0.07);
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Ein einziger, kaum sichtbarer Akzent-Glow – der erlaubte Gradient. */
.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 380px at 50% -120px, rgba(47, 216, 168, 0.09), transparent 70%);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px clamp(20px, 6vw, 64px);
}

header nav {
  display: flex;
  gap: 24px;
}

header nav a {
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

header nav a:hover { color: var(--text); }

.wordmark {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: linear-gradient(120deg, var(--text) 40%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

main {
  flex: 1;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(24px, 8vh, 96px) 20px 48px;
}

footer {
  margin-top: 80px;
  border-top: 1px solid var(--hairline);
  padding: 40px clamp(20px, 6vw, 64px) 28px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  max-width: 680px;
  margin: 0 auto;
}

.footer-mark {
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
}

.footer-inner p {
  margin-top: 8px;
  font-size: 13px;
  color: var(--faint);
  line-height: 1.6;
}

.footer-inner nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-inner nav a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-inner nav a:hover { color: var(--text); }

.footer-note {
  max-width: 680px;
  margin: 36px auto 0;
  font-size: 12px;
  color: var(--faint);
}

/* ---------------------------------------------------------- Bewegung */

.rise { animation: rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

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

/* -------------------------------------------------------------- Hero */

.hero h1 {
  font-size: clamp(30px, 5.4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
}

.sub {
  margin-top: 14px;
  color: var(--muted);
  font-size: 16px;
}

/* -------------------------------------------------------------- Form */

.analyze { margin-top: 40px; }

.inputrow {
  display: flex;
  gap: 10px;
}

.inputrow input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.25s, background 0.2s;
}

.inputrow input::placeholder { color: var(--faint); }

.inputrow input:focus {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px rgba(47, 216, 168, 0.13);
  background: rgba(255, 255, 255, 0.05);
}

button {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #06231a;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  padding: 13px 22px;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}

button:hover { filter: brightness(1.08); transform: translateY(-1px); }
button:active { transform: none; filter: brightness(0.95); }

button.secondary {
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-dim);
}

button.secondary:hover { background: rgba(47, 216, 168, 0.08); }

/* Modus-Auswahl: schlichte Radio-Zeilen, kein Segmented-Kasten. */
.modes {
  display: flex;
  gap: 28px;
  margin-top: 22px;
}

.modes label {
  display: flex;
  align-items: baseline;
  gap: 9px;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.15s;
}

.modes label:hover { color: var(--text); }

.modes input {
  accent-color: var(--accent);
  translate: 0 1px;
}

.modes span { font-size: 14.5px; font-weight: 550; }

.modes small {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--faint);
  margin-top: 2px;
}

.modes input:checked + span { color: var(--text); }

.deep-toggle {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 20px;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.15s;
}

.deep-toggle:hover { color: var(--text); }
.deep-toggle input { accent-color: var(--accent); translate: 0 1px; }
.deep-toggle span { font-size: 14.5px; font-weight: 550; }

.deep-toggle small {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--faint);
  margin-top: 2px;
}

.deep-toggle input:checked + span { color: var(--text); }

.trust {
  margin-top: 26px;
  font-size: 13px;
  color: var(--faint);
}

/* ------------------------------------------------- Landing-Sektionen */

.landing { margin-top: clamp(72px, 12vh, 120px); }

.landing h2 {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin-bottom: 28px;
}

.landing h3 {
  font-size: 15.5px;
  font-weight: 600;
}

.landing p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}

.steps {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.steps li {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
}

.step-n {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  padding-top: 3px;
}

.steps p { margin-top: 6px; }

.why { list-style: none; }

.why li {
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
}

.why p { margin-top: 7px; }

/* ---------------------------------------------------------------- FAQ */

#faq details { border-top: 1px solid var(--hairline); }
#faq details:last-child { border-bottom: 1px solid var(--hairline); }

#faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 0;
  font-size: 15px;
  font-weight: 550;
  transition: color 0.15s;
}

#faq summary::-webkit-details-marker { display: none; }

#faq summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 16px;
  color: var(--faint);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s;
}

#faq summary:hover::after { color: var(--accent); }

#faq details[open] summary::after {
  transform: rotate(45deg);
  color: var(--accent);
}

#faq details p {
  padding: 0 28px 18px 0;
  animation: rise 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#faq em { font-style: normal; color: var(--text); }

@media (max-width: 540px) {
  header nav { display: none; }
  .footer-inner { flex-direction: column; }
}

/* ---------------------------------------------------- Status & Titel */

.status {
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  min-height: 18px;
  transition: color 0.2s;
}

.status.error { color: #f07f7f; text-transform: none; letter-spacing: 0; }
.status.done { color: var(--faint); }

.video-title {
  margin-top: 10px;
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.meta {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}

.meta a { color: var(--muted); text-underline-offset: 3px; }
.meta a:hover { color: var(--text); }

/* ------------------------------------------------------ Fortschritt */

.track {
  margin-top: 28px;
  height: 2px;
  background: var(--hairline);
  border-radius: 1px;
  overflow: hidden;
}

.track .fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Solange die Gesamtzahl unbekannt ist: wandernder Schimmer. */
.track.indeterminate .fill {
  width: 30%;
  animation: sweep 1.4s ease-in-out infinite;
}

@keyframes sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

/* ------------------------------------------------------------ Liste */

.matches {
  list-style: none;
  margin-top: 26px;
}

.match {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--hairline);
  animation: rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition: background 0.15s;
}

.match:first-child { border-top: 1px solid var(--hairline); }
.match:hover { background: rgba(255, 255, 255, 0.02); }

.match .time {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  min-width: 52px;
}

a.time:hover { text-decoration: underline; text-underline-offset: 3px; }

.match .cover {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
}

.match .name {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
}

.match .name small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.match .links {
  display: flex;
  gap: 14px;
  margin-top: 7px;
}

.match .links a {
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
  text-decoration: none;
  transition: color 0.15s;
}

.match .links a:hover { color: var(--accent); }

.match.miss {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 13px;
  padding: 9px 2px;
  animation: none;
}

.empty {
  margin-top: 30px;
  color: var(--muted);
}

/* ---------------------------------------------------------- Aktionen */

.actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 36px;
}

.back {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

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

@media (max-width: 540px) {
  .inputrow { flex-direction: column; }
  .modes { flex-direction: column; gap: 14px; }
}