/* ============================================================
   programm.css - die Downloadseite
   Setzt auf legal.css auf und ergaenzt nur das, was es dort
   nicht gibt: den Kasten mit dem Herunterladen-Knopf.
   ============================================================ */

.laden {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 0 8px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.laden-kopf { display: flex; flex-direction: column; gap: 2px; }
.laden-was { font-weight: 700; color: var(--text); }
.laden-wie { font-size: 13px; color: var(--dim); }

/* Unter .legal geschrieben, nicht als blosses .knopf: legal.css setzt
   ".legal a { color: var(--accent) }", und eine Klasse allein verliert
   gegen Klasse+Element. Die Beschriftung war dadurch lavender auf
   lavender - also unsichtbar. */
.legal .knopf {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.legal .knopf:hover { filter: brightness(1.08); text-decoration: none; }

/* Die Pruefsumme ist zum Vergleichen da, nicht zum Lesen: kleine
   feste Schrift, und sie darf mitten im Wort umbrechen - sonst
   sprengt sie am Handy die Seite. */
.pruefsumme {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
  color: var(--dim);
  overflow-wrap: anywhere;
}