/* assets/css/download.css — "Hol dir BoothDock" (Markup: _sections/download.php).

   Drei Kacheln nebeneinander (seit 30.09.2026): Windows mit Installer,
   iPad mit dem offiziellen App-Store-Badge, Mac als Ankuendigung.
   Deshalb liegt der Unterschied in der Farbe des Etiketts, nicht in der
   Groesse der Kachel - eine kleinere iPad-Kachel haette ausgesehen, als
   waere die Fassung weniger ernst gemeint. */

.download .eyebrow { color: var(--accent); }

.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 30px;
}

.dl-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.dl-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 4px 11px;
  border-radius: 999px;
}
/* "In Vorbereitung" (Mac) bleibt neutral: das Etikett soll einordnen,
   nicht warnen. Vor dem 30.09.2026 trug die iPad-Kachel dieses Etikett. */
.dl-tag-beta {
  color: var(--ink-muted);
  background: var(--surface-2);
  border-color: var(--line);
}

.dl-card h3 { font-size: 19px; font-weight: 800; margin: 0; letter-spacing: -.01em; }

.dl-meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-muted);
}
.dl-meta b { color: var(--ink); font-weight: 700; }
.dl-soon { font-style: normal; }

.dl-card .btn { margin: 2px 0 0; }

.dl-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.dl-note a { color: var(--accent-strong); }

.dl-fuss {
  margin: 24px 0 0;
  max-width: 78ch;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-muted);
}

@media (max-width: 860px) {
  .dl-grid { grid-template-columns: 1fr; gap: 16px; }
  .dl-card { padding: 24px 20px 22px; }
}

/* Auftritt "zeile" - unter den Preisen, kein eigener Abschnitt.
   Leiser als eine Kachel: Rahmen statt Flaeche, Geist-Knopf statt
   Vollton. Der laute Knopf daneben heisst "Kostenlos starten", und der
   soll lauter bleiben - wer hier klickt, hat sich schon entschieden. */
.dl-zeile {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  margin-top: 26px; padding: 18px 22px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2);
}
.dl-zeile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dl-zeile-text b { font-size: 15px; font-weight: 700; }
.dl-zeile-text span { font-size: 13.5px; color: var(--ink-muted); line-height: 1.5; }
.dl-zeile-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dl-zeile .btn { font-size: 13.5px; }

/* Auftritt "voll" auf /changelog/: dort ist die Kachel-Ueberschrift ein
   h2, nicht h3 - die Seite hat keine eigene Sektionsueberschrift darueber. */
.dl-h { font-size: 19px; font-weight: 800; margin: 0; letter-spacing: -.01em; }

@media (max-width: 560px) {
  .dl-zeile { flex-direction: column; align-items: stretch; }
  .dl-zeile-knoepfe .btn { width: 100%; text-align: center; }
}