/* ==========================================================================
   Alpha Music Converter — Landingpage 2026
   Design system: siehe AlphaMusicConverter/DESIGN.md (Single Source of Truth).
   Änderungen an Farben/Typo IMMER dort nachziehen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — selbst gehostet (kein Google-Fonts-Call → DSGVO-sauber)
   Quelle: AlphaMusicConverter/research/CI_and_Frames_Logos/Fronts/
   Lizenz: SIL OFL, siehe assets/fonts/OFL-*.txt
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Doto";
  src: url("../assets/fonts/Doto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Doto";
  src: url("../assets/fonts/Doto-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Grundflächen */
  --ink: #000000;
  --paper: #d5d5d4;
  --paper-2: #f5f5f5;
  --white: #ffffff;
  --ink-55: rgba(0, 0, 0, 0.56);
  --ink-40: rgba(0, 0, 0, 0.40);

  /* Pastell-Flächen + "hot"-Akzent je Paar */
  --green: #cff7d7;   --green-hot: #5dff7e;   /* 01 Analyze */
  --purple: #e6cef9;  --purple-hot: #c987fd;  /* 02 Compose */
  --red: #ff5159;     --red-hot: #e2010b;     /* 03 Refine  */
  --beige: #ecdfd8;   --beige-hot: #f5aa82;   /* 04 Export  */

  /* Semantisch — nur Status, nie Deko */
  --good: #5dff7e;
  --caution: #f5aa82;
  --clash: #e2010b;

  /* Typo */
  --font-display: "Doto", ui-monospace, monospace;
  --font-ui: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* Form */
  --stroke: 2px solid var(--ink);
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-xs: 9px;
  --r-pill: 999px;
  --shadow-hard: 4px 4px 0 0 var(--ink);
  --shadow-hard-lg: 6px 6px 0 0 var(--ink);
  --shadow-hard-sm: 2px 2px 0 0 var(--ink);

  /* Layout */
  --container: 1080px;
  --gutter: clamp(16px, 4vw, 48px);

  /* Motion */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-card: cubic-bezier(.32, .72, 0, 1);
  --dur-fast: 120ms;
  --dur: 260ms;
  --dur-slow: 360ms;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.font-doto {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

.container {
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sichtbarer Fokus-Ring — nie entfernen (DESIGN.md §11) */
:focus-visible {
  outline: 3px solid rgba(0, 0, 0, .35);
  outline-offset: 2px;
}

/* Skip-Link für Tastatur-/Screenreader-Nutzer */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. Komponenten
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.btn {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 22px;
  background: var(--white);
  color: var(--ink);
  border: var(--stroke);
  border-radius: var(--r-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.96); }

/* Hover übernimmt die "hot"-Farbe der Sektion, in der der Button steht */
.btn-primary:hover { background: var(--green-hot); }
.btn-compose:hover { background: var(--purple-hot); }
.btn-refine:hover  { background: var(--red-hot); color: #fff; }
.btn-export:hover  { background: var(--beige-hot); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--white); }

/* Großer CTA mit hartem Schatten (Hero / Final Band) */
.btn-lg {
  min-height: 64px;
  padding: 0 40px;
  font-size: 20px;
  box-shadow: var(--shadow-hard);
}
.btn-lg:hover {
  transform: translate(4px, -4px);
  box-shadow: var(--shadow-hard-lg);
}
.btn-lg:active { transform: scale(.97); }

.card {
  background: var(--white);
  color: var(--ink);
  border: var(--stroke);
  border-radius: var(--r-md);
  padding: clamp(20px, 3vw, 32px);
}

.panel {
  border: var(--stroke);
  border-radius: var(--r-lg);
}

.input {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  background: var(--white);
  color: var(--ink);
  border: var(--stroke);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  outline: none;
}
.input::placeholder { color: var(--ink-40); }
.input:focus { outline: 3px solid rgba(0, 0, 0, .16); outline-offset: 1px; }

/* Sektions-Nummer "01 Analyze" */
.step-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1;
  letter-spacing: .04em;
  margin-bottom: 24px;
}

/* Demo-Panel in den Step-Sektionen — hebt beim Hover der Sektion an */
.demo-panel {
  background: var(--white);
  border: var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-hard);
  transition: transform var(--dur) var(--ease-card);
}
.step-section:hover .demo-panel { transform: translate(8px, -8px); }

/* --------------------------------------------------------------------------
   Galoppierendes Pixel-Pferd (Sektion „This is how it works")

   assets/img/horse-gallop.svg ist ein Sprite-Streifen mit 8 Frames
   nebeneinander (je 42x34 Zellen). Der Container zeigt genau ein Frame,
   der Streifen wandert in 8 Schritten durch. Erzeugt von src/build-horse.mjs.
   -------------------------------------------------------------------------- */
.horse {
  --horse-frames: 8;
  width: clamp(160px, 24vw, 300px);
  aspect-ratio: 21 / 17;
  overflow: hidden;
  flex-shrink: 0;
}
.horse__strip {
  display: block;
  width: calc(var(--horse-frames) * 100%);
  height: 100%;
  max-width: none;                 /* Tailwind-Preflight setzt max-width:100% */
  image-rendering: pixelated;
  animation: horse-run .72s steps(var(--horse-frames)) infinite;
}
@keyframes horse-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Ohne Animation nur ein stehendes Pferd zeigen, nicht den ganzen Streifen */
@media (prefers-reduced-motion: reduce) {
  .horse__strip { animation: none !important; }
}

/* Demo-Modal — natives <dialog> via showModal() */
.demo-modal {
  width: min(880px, calc(100vw - 2 * var(--gutter)));
  padding: 0;
  background: var(--white);
  color: var(--ink);
  border: var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop, 0 24px 60px rgba(0, 0, 0, .32));
}
.demo-modal::backdrop { background: rgba(0, 0, 0, .55); }

.demo-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: var(--stroke);
}
.demo-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.demo-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--white);
  border: var(--stroke);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.demo-modal__close:hover { background: var(--green-hot); }

/* 16:9-Bühne — der Platzhalter bzw. später das iframe füllt sie komplett */
.demo-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper);
}
.demo-modal__frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.demo-modal__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: var(--gutter);
}

/* --------------------------------------------------------------------------
   Download-Modal — Registrierung vor dem Download
   Markup erzeugt js/site.js, damit es auf allen Seiten ohne Duplikat existiert.
   -------------------------------------------------------------------------- */
.dl-modal {
  width: min(520px, 100%);
  padding: 0;
  background: var(--paper-2);
  color: var(--ink);
  border: var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.dl-modal::backdrop { background: rgba(0, 0, 0, .55); }

.dl-modal__inner { padding: clamp(24px, 5vw, 36px); }

.dl-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.dl-modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.1;
  letter-spacing: .03em;
  margin: 0;
}
.dl-modal__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--white);
  border: var(--stroke);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.dl-modal__close:hover { background: var(--green-hot); }

.dl-modal__lead { font-size: 15px; color: var(--ink-55); line-height: 1.55; margin: 0 0 20px; }

/* Bewusst nur EIN Feld: Auf der Website wird ausschliesslich die E-Mail
   erhoben. Nickname und Passwort legt der Nutzer erst in der Desktop-App an
   (Marcel, 2026-08-19) — dort wird der Account in die DB geschrieben und fuer
   die 10 Gratis-Tracks freigeschaltet. */
.dl-modal__form { display: flex; flex-direction: column; gap: 10px; }
.dl-modal__form .input { width: 100%; height: 52px; font-size: 16px; }
.dl-modal__form .btn { min-height: 52px; font-size: 16px; }

.dl-modal__fine { font-size: 12px; color: var(--ink-55); line-height: 1.5; margin: 14px 0 0; }
.dl-modal__fine a { color: var(--ink); }

/* Bestätigung nach dem Absenden */
.dl-modal__done { display: none; text-align: center; padding: 8px 0 4px; }
.dl-modal.is-done .dl-modal__form,
.dl-modal.is-done .dl-modal__lead,
.dl-modal.is-done .dl-modal__perks,
.dl-modal.is-done .dl-modal__fine { display: none; }
.dl-modal.is-done .dl-modal__done { display: block; }
.dl-modal__done .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 14px;
  background: var(--green-hot);
  border: var(--stroke);
  border-radius: 999px;
}

/* Freie Tracks als kleiner Vertrauensanker unter dem Feld */
.dl-modal__perks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 20px; padding: 0; list-style: none; }
.dl-modal__perks li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-55); }

/* FAQ-Accordion — natives <details>/<summary>, damit Tastatur- und
   Screenreader-Bedienung ohne JS funktioniert. */
.faq-item {
  background: var(--white);
  border: var(--stroke);
  border-radius: var(--r-md);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.faq-item[open] { box-shadow: var(--shadow-hard); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
}
/* Default-Dreieck in beiden Engines abschalten */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-chevron {
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease-out);
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  padding: 0 20px 20px;
  max-width: 68ch;
  color: var(--ink-55);
  font-size: 15px;
  line-height: 1.6;
}
.faq-answer p { margin: 0; }
.faq-answer p + p { margin-top: .75em; }

@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-item[open] .faq-answer { animation: faq-reveal var(--dur) var(--ease-out); }

/* --------------------------------------------------------------------------
   4b. Unterseiten (pricing / privacy / imprint / compatibility)
   -------------------------------------------------------------------------- */
.subpage {
  padding-block: clamp(96px, 12vw, 144px) clamp(48px, 8vw, 96px);
}
.subpage__inner { width: min(760px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.subpage__inner--wide { width: min(960px, 100%); }

.subpage h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.05;
  letter-spacing: .03em;
  margin: 0 0 16px;
}
.subpage__lead {
  font-size: 18px;
  color: var(--ink-55);
  margin: 0 0 40px;
  max-width: 60ch;
}
.subpage h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 40px 0 12px;
  letter-spacing: -.01em;
}
.subpage h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
.subpage p, .subpage li { color: var(--ink-55); line-height: 1.65; }
.subpage p { margin: 0 0 14px; max-width: 68ch; }
.subpage ul { margin: 0 0 14px; padding-left: 1.2em; max-width: 68ch; }
.subpage li { margin-bottom: 6px; }
.subpage a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
/* Buttons sind keine Fließtext-Links — Unterstreichung zurücknehmen */
.subpage a.btn { text-decoration: none; }

/* Platzhalter-Block für noch fehlende Rechtstexte */
.todo-box {
  background: var(--beige);
  border: var(--stroke);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin: 0 0 32px;
}
.todo-box p, .todo-box li { color: var(--ink); }
.todo-box > :last-child { margin-bottom: 0; }

/* Preis-Karten */
.plan-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 720px) { .plan-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.plan {
  background: var(--white);
  border: var(--stroke);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.plan--featured { background: var(--green); box-shadow: var(--shadow-hard); }
.plan__name { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-55); margin: 0 0 10px; }
/* Bewusst Space Grotesk statt Doto: Doto ist Punkt-Matrix und macht Preise
   auf Distanz schlecht lesbar (Marcel, 2026-08-19). */
.plan__price {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 52px;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0 0 4px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan__meta { font-size: 13px; color: var(--ink-55); margin: 0 0 20px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 24px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); margin-bottom: 10px; font-size: 15px; }
.plan .btn { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------------------
   4c. Geräte-Kompatibilitätssuche
   -------------------------------------------------------------------------- */
.dev-search { position: relative; margin-bottom: 12px; }
.dev-search .input { width: 100%; padding-left: 44px; height: 56px; font-size: 17px; }
.dev-search__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--ink-40);
}
.dev-hint { font-size: 13px; color: var(--ink-55); margin: 0 0 24px; }

.dev-results { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; }

.dev-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--white);
  border: var(--stroke);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.dev-card--yes { background: var(--green); }
.dev-card--no  { background: var(--white); }
.dev-card__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border: var(--stroke); border-radius: 999px; background: var(--white);
}
.dev-card--yes .dev-card__mark { background: var(--green-hot); }
.dev-card__name { font-weight: 600; font-size: 17px; margin: 0; color: var(--ink); line-height: 1.3; }
.dev-card__meta { font-size: 13px; color: var(--ink-55); margin: 4px 0 0; }
.dev-card__note { font-size: 13px; color: var(--ink-55); margin: 8px 0 0; }

/* „Noch nicht unterstützt“ — Gerät melden */
.dev-tell { margin-top: 14px; }
.dev-tell__row { display: flex; flex-wrap: wrap; gap: 10px; }
.dev-tell .input { flex: 1 1 220px; }

/* --------------------------------------------------------------------------
   4d. Consent-Banner — Plattenteller statt Keks
   Markup wird von js/site.js erzeugt, deshalb steht hier nur das Styling.
   -------------------------------------------------------------------------- */
.cc {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(0, 0, 0, .55);
  animation: cc-fade var(--dur) var(--ease-out) both;
}
@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }

.cc__panel {
  width: min(760px, 100%);
  max-height: calc(100dvh - 2 * var(--gutter));
  overflow-y: auto;
  background: var(--paper-2);
  border: var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  padding: clamp(22px, 4vw, 36px);
  text-align: center;
  animation: cc-rise var(--dur-slow) var(--ease-card) both;
}
@keyframes cc-rise {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.cc__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: var(--white);
  border: var(--stroke);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  margin: 0 0 16px;
}
.cc__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.05;
  letter-spacing: .03em;
  margin: 0 0 12px;
}
.cc__lead {
  font-size: 15px;
  color: var(--ink-55);
  max-width: 52ch;
  margin: 0 auto 26px;
  line-height: 1.55;
}

/* Die drei Optionen */
.cc__options {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-bottom: 22px;
}
@media (min-width: 640px) { .cc__options { grid-template-columns: repeat(3, 1fr); } }

.cc-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--white);
  border: var(--stroke);
  border-radius: var(--r-md);
  padding: 18px 14px 16px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.cc-opt:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard-sm); }
.cc-opt[aria-checked="true"] { background: var(--green); box-shadow: var(--shadow-hard); }
.cc-opt__name { font-weight: 600; font-size: 15px; margin-top: 10px; }
.cc-opt__desc { font-size: 12px; color: var(--ink-55); line-height: 1.45; }

/* --- Plattenteller, 3D gekippt --- */
.deck {
  width: 108px;
  height: 74px;                 /* gekippt braucht es weniger Hoehe als Breite */
  display: grid;
  place-items: center;
  perspective: 520px;
}
.deck__inner {
  width: 108px;
  height: 108px;
  transform: rotateX(58deg) rotateZ(-12deg);
  transform-style: preserve-3d;
}
.deck svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Platte dreht sich nur in der gewaehlten Karte */
.cc-opt[aria-checked="true"] .deck__spin { animation: deck-spin 3.4s linear infinite; transform-origin: 60px 60px; }

@keyframes deck-spin { to { transform: rotate(360deg); } }

/* Tonarm: bei „nichts" abgehoben */
.deck__arm { transform-origin: 104px 18px; transition: transform var(--dur) var(--ease-card); }
.cc-opt[data-consent="none"] .deck__arm { transform: rotate(-24deg); }

/* Bestaetigen + Fusszeile */
.cc__confirm { min-height: 52px; padding: 0 30px; font-size: 16px; }
.cc__foot { font-size: 12px; color: var(--ink-55); margin: 14px 0 0; }
.cc__foot a { color: var(--ink); }

.cc__details {
  margin-top: 18px;
  background: var(--white);
  border: var(--stroke);
  border-radius: var(--r-md);
  text-align: left;
}
.cc__details summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 14px;
}
.cc__details summary::-webkit-details-marker { display: none; }
.cc__details summary::marker { content: ""; }
.cc__details .cc__detailsBody { padding: 0 18px 16px; font-size: 13px; color: var(--ink-55); line-height: 1.6; }
.cc__details p { margin: 0 0 8px; }
.cc__details p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .cc, .cc__panel { animation: none !important; }
  .cc-opt[aria-checked="true"] .deck__spin { animation: none !important; }
}

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */
#navbar {
  transition: background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
  border-bottom: 2px solid transparent;
}
#navbar.is-scrolled {
  background: var(--paper);
  border-bottom-color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}

/* --------------------------------------------------------------------------
   6. Animationen
   -------------------------------------------------------------------------- */

/* "Power-on" Reveal (Signatur aus der App) */
@keyframes poweron {
  from { opacity: .15; filter: blur(5px); }
  to   { opacity: 1;   filter: blur(0); }
}
.reveal { animation: poweron var(--dur-slow) var(--ease-out) both; }

/* Typewriter — "This is how / it works" */
.type-line-1,
.type-line-2 {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: .12em solid transparent;
}
.type-line-1 { animation: type1 6s infinite; }
.type-line-2 { animation: type2 6s infinite; }

@keyframes type1 {
  0%      { width: 0;      border-right-color: currentColor; animation-timing-function: steps(11, end); }
  25%     { width: 11.5ch; border-right-color: currentColor; animation-timing-function: step-end; }
  26%     { width: 11.5ch; border-right-color: transparent; }
  100%    { width: 11.5ch; border-right-color: transparent; }
}
@keyframes type2 {
  0%      { width: 0;     border-right-color: transparent; animation-timing-function: step-end; }
  25%     { width: 0;     border-right-color: currentColor; animation-timing-function: steps(8, end); }
  45%     { width: 8.5ch; border-right-color: currentColor; animation-timing-function: step-end; }
  55%     { width: 8.5ch; border-right-color: transparent; }
  65%     { width: 8.5ch; border-right-color: currentColor; }
  75%     { width: 8.5ch; border-right-color: transparent; }
  85%     { width: 8.5ch; border-right-color: currentColor; }
  100%    { width: 8.5ch; border-right-color: transparent; }
}

/* 01 Analyze — Fortschritt + rotierende Status-Zeilen */
@keyframes load-bar {
  0%   { width: 5%; }
  25%  { width: 100%; }
  100% { width: 100%; }
}
@keyframes status-1 {
  0%   { opacity: 0; transform: translateY(5px); }
  4%   { opacity: 1; transform: translateY(0); }
  21%  { opacity: 1; transform: translateY(0); }
  25%  { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 0; }
}
@keyframes status-2 {
  0%, 21% { opacity: 0; transform: translateY(5px); }
  25%     { opacity: 1; transform: translateY(0); }
  46%     { opacity: 1; transform: translateY(0); }
  50%     { opacity: 0; transform: translateY(-5px); }
  100%    { opacity: 0; }
}
@keyframes status-3 {
  0%, 46% { opacity: 0; transform: translateY(5px); }
  50%     { opacity: 1; transform: translateY(0); }
  71%     { opacity: 1; transform: translateY(0); }
  75%     { opacity: 0; transform: translateY(-5px); }
  100%    { opacity: 0; }
}
@keyframes status-4 {
  0%, 71% { opacity: 0; transform: translateY(5px); }
  75%     { opacity: 1; transform: translateY(0); }
  96%     { opacity: 1; transform: translateY(0); }
  100%    { opacity: 0; transform: translateY(-5px); }
}
.status-line { position: absolute; right: 0; top: 0; width: 100%; opacity: 0; }
.status-line:nth-child(1) { animation: status-1 12s infinite; }
.status-line:nth-child(2) { animation: status-2 12s infinite; }
.status-line:nth-child(3) { animation: status-3 12s infinite; }
.status-line:nth-child(4) { animation: status-4 12s infinite; }

@keyframes dots {
  0%, 33%   { content: "."; }
  34%, 66%  { content: ".."; }
  67%, 100% { content: "..."; }
}
.loading-dots::after {
  content: ".";
  animation: dots 1.5s infinite;
  display: inline-block;
  width: 12px;
  text-align: left;
}

/* Dateien wandern Ordner → USB */
@keyframes transfer-file-1 {
  0%   { left: 15%; opacity: 0; transform: scale(.5) translateY(0); }
  15%  { opacity: 1; transform: scale(1) translateY(-16px); }
  85%  { opacity: 1; transform: scale(1) translateY(16px); }
  100% { left: 75%; opacity: 0; transform: scale(.5) translateY(0); }
}
@keyframes transfer-file-2 {
  0%   { left: 15%; opacity: 0; transform: scale(.5) translateY(0); }
  15%  { opacity: 1; transform: scale(1) translateY(16px); }
  85%  { opacity: 1; transform: scale(1) translateY(-16px); }
  100% { left: 75%; opacity: 0; transform: scale(.5) translateY(0); }
}
.transfer-file { position: absolute; top: calc(50% - 10px); }
.transfer-file--1 { animation: transfer-file-1 2.5s infinite cubic-bezier(.4, 0, .2, 1); }
.transfer-file--2 { animation: transfer-file-2 2.5s infinite cubic-bezier(.4, 0, .2, 1) .8s; }
.transfer-file--3 { animation: transfer-file-1 2.5s infinite cubic-bezier(.4, 0, .2, 1) 1.6s; }

/* 03 Refine — Drag & Swap im Setlist-Editor */
@keyframes dragSwap {
  0%, 15%   { transform: translate(0, 0);      box-shadow: 0 0 0 0 var(--ink); }
  20%       { transform: translate(-4px, -4px); box-shadow: var(--shadow-hard); }
  35%       { transform: translate(-4px, -60px); box-shadow: var(--shadow-hard); }
  45%, 55%  { transform: translate(0, -56px);  box-shadow: 0 0 0 0 var(--ink); }
  65%       { transform: translate(-4px, -60px); box-shadow: var(--shadow-hard); }
  80%       { transform: translate(-4px, -4px); box-shadow: var(--shadow-hard); }
  85%, 100% { transform: translate(0, 0);      box-shadow: 0 0 0 0 var(--ink); }
}
@keyframes displaceDown {
  0%, 20%   { transform: translateY(0); }
  35%, 65%  { transform: translateY(56px); }
  80%, 100% { transform: translateY(0); }
}
.drag-item     { animation: dragSwap 6s infinite ease-in-out; z-index: 10; }
.displace-item { animation: displaceDown 6s infinite ease-in-out; z-index: 1; }

/* 04 Export — Schreib-Sequenz auf den Stick.
   Ein Zyklus (9s) erzählt: Playlist wird angelegt → Tracks laufen durch und
   bekommen je ein Verdict ("Copied" = neu geschrieben / "Linked" = liegt schon
   auf dem Stick, wird nur verknüpft) → Fortschritt → Bilanz mit 0 Duplikaten.
   Die Staffelung läuft über inline `animation-delay` im Markup. */
@keyframes exp-in {
  0%   { opacity: 0; transform: translateX(-10px); }
  6%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes exp-chip {
  0%   { opacity: 0; transform: scale(.75); }
  4%   { opacity: 1; transform: scale(1.12); }
  8%   { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes exp-progress {
  0%, 8% { width: 4%; }
  68%    { width: 100%; }
  100%   { width: 100%; }
}
@keyframes exp-writing {
  0%, 6%    { opacity: 0; }
  10%, 64%  { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes exp-done {
  0%, 68%   { opacity: 0; transform: translateY(4px); }
  75%, 100% { opacity: 1; transform: translateY(0); }
}

.exp-row     { animation: exp-in 9s infinite both var(--ease-out); }
.exp-chip    { animation: exp-chip 9s infinite both var(--ease-out); }
.exp-bar     { animation: exp-progress 9s infinite ease-in-out; }
.exp-writing { animation: exp-writing 9s infinite; }
.exp-done    { animation: exp-done 9s infinite both var(--ease-out); }

/* --------------------------------------------------------------------------
   7. Reduced motion — DESIGN.md §9
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Typewriter-Zeilen ohne Animation vollständig zeigen */
  .type-line-1, .type-line-2 { width: auto !important; border-right-color: transparent !important; }
  /* Rotierende Status-Zeilen: nur die erste sichtbar lassen */
  .status-line { opacity: 0; }
  .status-line:nth-child(1) { opacity: 1; }
  /* 04 Export ohne Animation im Endzustand zeigen, nicht doppelt beschriften */
  .exp-bar { width: 100% !important; }
  .exp-writing { opacity: 0 !important; }
  .exp-done { opacity: 1 !important; }
}