/* =========================================================================
   /download/ - seiteneigene Regeln

   Alle Werte stammen aus den Tokens von site.css. Ergänzt werden nur die
   beiden Bauformen, für die das Seitensystem kein Bauteil hat: der
   Freigabeblock und die Versionsliste. Die gemeinsame site.css bleibt
   unberührt.

   Phase 2A - Übernahme in das Theme
   ---------------------------------
   Diese Regeln standen im statischen Master als <style>-Block im Kopf von
   download/index.html. Sie liegen jetzt als eigene Datei im Theme und
   werden ausschliesslich auf /download/ geladen (siehe
   scriptomat_page_styles() in inc/assets.php). Die Regeln sind unverändert.

   Entfallen ist der leere Abschnitt des Masters zur Wortmarke: sie steht in
   WordPress zentral in header.php.

   WICHTIG - Ladereihenfolge
   -------------------------
   .steps wird hier bewusst neu gesetzt und überschreibt die gleichnamige
   Regel aus site.css. Im Master gelang das, weil der <style>-Block hinter
   dem Stylesheet stand. In WordPress sichert das die als Abhängigkeit
   eingetragene Handle 'scriptomat-site': diese Datei wird immer danach
   ausgeliefert. Die Abhängigkeit darf nicht entfernt werden.
   ========================================================================= */

/* --- 1. Freigabeblock ---------------------------------------------------
   Links die aktuelle Fassung, rechts die drei Schritte. Kein Kästchen,
   kein Schatten: die Fassung steht hinter der minten Randmarkierung, die
   Schritte hinter Haarlinien. */
.release {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 80px;
  margin-top: 56px;
  align-items: start;
}
.release__now {
  border-left: 3px solid var(--brand);
  padding-left: 28px;
}
.release__version {
  margin: 0;
  font-family: var(--display);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.release__date {
  margin: 16px 0 0;
  font-size: 19px;
  color: var(--ink-quiet);
}
.release__note {
  margin: 20px 0 0;
  max-width: 38ch;
  font-size: 19px;
  line-height: 1.58;
  color: var(--ink-body);
}
.release__action { margin-top: 34px; }

.release__steps-title {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.steps {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 4px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink-quiet);
}

/* --- 2. Versionsliste ---------------------------------------------------
   Eine Zeile je Fassung, eine Haarlinie dazwischen. Die Randmarkierung
   trennt den aktiven Stand vom Bestand: Mint für die aktuelle Fassung,
   Grau für alles davor - dieselbe Unterscheidung wie in .matrix. */
.releases {
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}
.releases li {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: baseline;
  padding: 24px 0 24px 27px;
  border-top: 1px solid var(--line-cool);
  border-left: 3px solid #C3C6CE;
}
.releases li:last-child { border-bottom: 1px solid var(--line-cool); }
.releases li[data-state="current"] { border-left-color: var(--brand); }
.releases__version {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.releases__date { font-size: 19px; color: var(--ink-body); }
.releases__state { font-size: 17px; color: var(--ink-quiet); white-space: nowrap; }
.releases li[data-state="current"] .releases__state {
  font-family: var(--display);
  font-weight: 600;
  color: var(--brand-text);
}
.releases__note {
  margin: 28px 0 0;
  max-width: 68ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-quiet);
}

/* --- 3. Schmalere Fenster ---------------------------------------------- */
@media (max-width: 1180px) {
  .release { gap: 52px; }
  .release__version { font-size: 62px; }
}
@media (max-width: 860px) {
  .release { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .releases li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-top: 22px;
    padding-bottom: 22px;
  }
  .releases__state { white-space: normal; }
}
@media (max-width: 560px) {
  .release__version { font-size: 50px; }
  .release__now { padding-left: 20px; }
  .releases li { padding-left: 20px; }
}