/* 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 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--text);
}

.wordmark .mark { color: var(--accent); flex: none; }

.wordmark span {
  background: linear-gradient(120deg, var(--text) 45%, 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, .why {
  list-style: none;
  display: flex;
  flex-direction: column;
}

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

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

/* Icon-Kachel: dezente Fläche, Akzent-Strich – keine harte Card. */
.step-icon, .why-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent);
  background: rgba(47, 216, 168, 0.07);
  border: 1px solid rgba(47, 216, 168, 0.14);
}

.step-icon svg, .why-icon svg { width: 21px; height: 21px; }

/* ---------------------------------------------------------------- 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; }
  .inputrow input { padding-left: 44px; }
  .modes { flex-direction: column; gap: 14px; }
}

/* =========================================================== Redesign */

/* Animierter Equalizer im Hero – das lebendige Signaturelement. */
.eq {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 24px;
  margin-bottom: 26px;
}

.eq span {
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.5;
  height: 28%;
  animation: eq 1.15s ease-in-out infinite;
}

.eq span:nth-child(1)  { animation-delay: -0.9s; }
.eq span:nth-child(2)  { animation-delay: -0.3s; height: 60%; }
.eq span:nth-child(3)  { animation-delay: -0.6s; }
.eq span:nth-child(4)  { animation-delay: -0.1s; opacity: 0.7; }
.eq span:nth-child(5)  { animation-delay: -0.75s; }
.eq span:nth-child(6)  { animation-delay: -0.45s; opacity: 0.7; }
.eq span:nth-child(7)  { animation-delay: -0.2s; }
.eq span:nth-child(8)  { animation-delay: -0.65s; }
.eq span:nth-child(9)  { animation-delay: -0.35s; opacity: 0.6; }
.eq span:nth-child(10) { animation-delay: -0.55s; }
.eq span:nth-child(11) { animation-delay: -0.15s; }
.eq span:nth-child(12) { animation-delay: -0.8s; }

@keyframes eq {
  0%, 100% { height: 22%; }
  50%      { height: 100%; }
}

.hero h1 .hl {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}

/* Input mit Icon links */
.inputrow { position: relative; }

.inputrow-icon {
  position: absolute;
  left: 15px;
  top: 22px;
  transform: translateY(-50%);
  display: flex;
  color: var(--faint);
  pointer-events: none;
  transition: color 0.2s;
}

.inputrow input { padding-left: 42px; }
.inputrow input:focus { }
.inputrow:focus-within .inputrow-icon { color: var(--accent); }

.trust {
  display: flex;
  align-items: center;
  gap: 7px;
}
.trust svg { color: var(--accent-dim); flex: none; }

/* =============================================================== Modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 8, 0.74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: fade 0.3s ease both;
}

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow: auto;
  padding: 40px 30px 30px;
  text-align: center;
  background: #0d1015;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  animation: pop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, transform 0.15s;
}
.modal-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); transform: none; }

/* Shazam-artiger Scanner: pulsender Kern + auslaufende Sonar-Ringe */
.scanner {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 4px auto 24px;
  display: grid;
  place-items: center;
}

.scanner .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: sonar 2.4s ease-out infinite;
}
.scanner .ring:nth-child(2) { animation-delay: 0.8s; }
.scanner .ring:nth-child(3) { animation-delay: 1.6s; }

.scanner-core {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #06231a;
  background: var(--accent);
  box-shadow: 0 0 34px rgba(47, 216, 168, 0.45);
  animation: corepulse 1.7s ease-in-out infinite;
}

@keyframes sonar {
  0%   { transform: scale(0.42); opacity: 0.55; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes corepulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* Abschluss-Zustand: Ringe stoppen, Kern wird ruhig */
.scanner.done .ring { animation: none; opacity: 0; }
.scanner.done .scanner-core { animation: none; }

.modal-status {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  min-height: 16px;
}

.modal-title {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.modal-meta {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

.modal-track {
  margin-top: 24px;
  height: 2px;
  background: var(--hairline);
  border-radius: 1px;
  overflow: hidden;
}
.modal-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-track.indeterminate .modal-fill {
  width: 30%;
  animation: sweep 1.4s ease-in-out infinite;
}

.modal-matches {
  list-style: none;
  margin-top: 16px;
  text-align: left;
}

.modal-matches li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 2px;
  border-top: 1px solid var(--hairline);
  animation: rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.modal-matches li .time {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--accent);
  min-width: 46px;
}
.modal-matches li .name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.modal-matches li .name small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.modal-error { margin-top: 20px; }
.modal-error p {
  font-size: 14.5px;
  color: #f0a0a0;
  line-height: 1.55;
  margin-bottom: 16px;
}

body.modal-open { overflow: hidden; }