/* Die Download-Seite im System 2026-09 und das Fenster nach dem Kauf
 * (W4, 11.09.2026; Teil 1 neu gebaut in S3, 12.09.2026, und noch einmal
 * am 22.09.2026 fuer den Vertrauensauftrag).
 *
 * ZWEI TEILE:
 *   1. Die Seite. Seit dem 22.09.2026 (Entscheidungen Patrik): Buehne mit
 *      Vorzeile, h1 und der Lede DARUNTER; zwei weisse Karten im Raster,
 *      die erkannte mit dunkelgruenem Rand und Schild; unter jedem Knopf
 *      die Angabezeile und die Belege (Signatur, Pruefsumme); das
 *      Fineprint als weisse Karte; das Band am Fuss hell beschriftet.
 *      Alle neuen Klassen tragen den Vorsatz dl- — keine Regel hier
 *      schreibt eine geteilte Klasse um (.btn, .eyebrow, .box gehoeren
 *      allen Seiten), und die Kopfleiste wird von keiner Regel erreicht.
 *   2. Das Fenster, das bei ?purchase=ok aufgeht: Schleier, Dialog,
 *      erkanntes System als grosse Option, die uebrigen Dateien als flache
 *      Knoepfe. Geoeffnet und gefuellt von js/download.js; ohne JavaScript
 *      bleibt es `hidden`. Unveraendert aus W4.
 *
 * WARUM EINE EIGENE DATEI und nicht thalassa.css: Der Parallelplan vom
 * 11.09.2026 haelt thalassa.css fuer W3 und W5 frei. Diese Datei wird von
 * download.html und de/download.html direkt eingebunden, AUSSERHALB der
 * Marken von scripts/chrome/build_chrome.py — das Bauskript laesst sie
 * deshalb stehen.
 *
 * Jede Regel ist auf `body[data-page="download"]` eingegrenzt.
 */

/* ==================================================================
   1. Die Seite
   ================================================================== */

/* DIE FARBEN DES UMBAUS VOM 22.09.2026. Eigene Namen mit dl-Vorsatz statt
   --ink und --muted aus dem Auftrag: Beide Namen gibt es schon
   (tokens/palette-2026-09.css, #071b17 und #586861), und Kopfleiste,
   Kauffenster und Altschicht lesen sie. Ein gleichnamiger Wert hier
   schluege ueber die Kaskade in alles durch, was sie liest. Aus demselben
   Grund stehen die Werte an <main> und nicht an <body>: Die Kopfleiste
   liegt ausserhalb von <main>.
   Der Seitengrund bleibt, was er war (.problem: --paper, #f7f8f4); der
   Auftrag nennt Creme „wie bisher".
   KONTRASTE, gerechnet: --dl-muted 7,8 : 1 auf Weiss und 7,2 : 1 auf dem
   Seitengrund; Weiss auf --dl-green-dark 12,2 : 1; --dl-green-dark auf
   --dl-mint 8,8 : 1. --dl-mint ist deshalb nie Knopfgrund mit weisser
   Schrift — so sah der alte Windows-Knopf aus. */
body[data-page="download"] main {
  --dl-green-dark: #0B3D2E;
  --dl-mint: #BFE3D5;
  --dl-cream: var(--paper);
  --dl-ink: #17241F;
  --dl-muted: #4A554F;
  --dl-border: rgba(11, 61, 46, .08);
}

/* Die Altschicht zurueckdraengen. seiten.css legt jeden .container in eine
   Lesespalte (112 px links, 32 rechts, --spalte breit); landing.css setzt
   .eyebrow in die Monoschrift und macht .cta-band__inner zu einer Karte
   mit Verlauf; mobil.css trennt deutsche Ueberschriften unter 768 px
   automatisch (hyphens: auto) — Arpad: kein Wort mitten gebrochen;
   gemessen wird das in tests/test_s3_gerendert.py. */
body[data-page="download"] main .container { max-width: none; width: min(calc(100% - 40px), var(--max)); padding: 0; }
body[data-page="download"] main .eyebrow { font-family: inherit; }
body[data-page="download"] main .cta-band__inner { padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; overflow: visible; }
body[data-page="download"] main h1, body[data-page="download"] main h2,
body[data-page="download"] main h3 { hyphens: manual; }

/* DAS APP-ICON bleibt im Markup und ausgeblendet (Arpad, 20.09.2026: eine
   Wiederholung der Marke aus der Kopfleiste). Es ist `alt=""`, fuer
   Vorleseprogramme also ohnehin nicht da; kommt eine Aufnahme des
   Programms, ist es eine Zeile. */
body[data-page="download"] .dl-icon { display: none; }

/* ------------------------------------------------------------------
   DIE SEITE PASST AUF EINEN BILDSCHIRM — weiter, auch nach dem Umbau.

   Arpad am 20.09.2026: „alles muss ohne scrolling sichtbar sein. footer
   kann darunter bleiben." Gemessen in seinem Fenster, 1920x950. Patrik
   hat die Regel am 22.09.2026 ausdruecklich bestaetigt, obwohl der
   Auftrag 80-100 px Abstand um die Buehne verlangte; die Abstaende hier
   sind deshalb die kompakten, und die Buehne hat oben 40 px.

   GEMESSEN (main, Kopf 90 px darueber, Platz bis 950 also 860 px):
     vor dem Umbau     EN 707 px   DE 761 px
     nach dem Umbau    EN {{MESS_EN}} px   DE {{MESS_DE}} px
   Die Karten sind hoeher als vorher (Belege, Chips, Hinweis); dafuer ist
   die Ueberschrift der Fineprint-Karte einzeilig und das Band flacher.

   DIE GRENZE, EHRLICH: Vorher reichte ein Fenster ab rund 860 px Hoehe,
   jetzt braucht die deutsche Seite rund {{MESS_GRENZE}} px. {{MESS_1440}} tests/test_download_gerendert.py
   haelt 1920x950 in beiden Sprachen fest.
   ------------------------------------------------------------------ */
body[data-page="download"] main .section { padding: 40px 0 20px; }

/* DIE BUEHNE: Vorzeile, h1, Lede. Die Lede stand bis zum 22.09.2026
   rechts neben der h1 (section-head des Konzepts) und steht jetzt
   darunter, hoechstens 60 Zeichen breit. Das h1-Mass kommt aus dem
   Auftrag. mobil.css setzt h1 unter 768 px auf 34 px (body[data-page]
   h1); die Klasse hier ist spezifischer und haelt die 40 px Untergrenze. */
body[data-page="download"] .dl-buehne { margin: 0 0 22px; }
body[data-page="download"] .dl-buehne .eyebrow { margin-bottom: 12px; }
body[data-page="download"] .dl-titel {
  max-width: none; margin: 0 0 10px;
  font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -.03em;
  color: var(--dl-ink); text-align: left; text-wrap: balance;
}
body[data-page="download"] .dl-lede {
  max-width: 60ch; margin: 0;
  font-size: 18px; line-height: 1.6; color: var(--dl-muted);
}

/* Die Hinweise nach dem Kauf und zum System: Klassen der Altschicht
   (.notice). 18 px Abstand darunter, damit das Schild der erkannten Karte,
   das auf deren oberem Rand sitzt, den Hinweis nicht beruehrt. Die Zeile
   nach dem Kauf traegt den Kasten, den sie seit S3 hat. */
body[data-page="download"] .notice:not([hidden]) { margin: 0 0 18px; }
body[data-page="download"] .notice--ok:not([hidden]) {
  padding: 16px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--emerald-pale); color: var(--ink);
}

/* DIE ZWEI KARTEN, gleich breit (minmax(0, 1fr)) und gleich hoch. Ab
   900 px nebeneinander; ihre vier Zeilen (Kopf, Knopfblock, Angabe,
   Belege) liegen ueber subgrid auf gemeinsamen Linien — sonst saesse der
   Windows-Knopf hoeher als der Mac-Knopf, sobald eine Anforderungszeile
   anders umbricht oder die Mac-Karte ihren Hinweis ueber den Chips
   traegt. Der Knopfblock steht deshalb unten in seiner Zeile: Die
   Windows-Karte hat den Platz des Hinweises ueber dem Knopf, nicht
   zwischen Knopf und Angabe. Ohne subgrid stehen die Zeilen je Karte
   fuer sich. */
body[data-page="download"] .dl-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
body[data-page="download"] .dl-karte {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 18px 24px; border: 1px solid var(--dl-border); border-radius: 20px;
  background: var(--white);
}
@media (min-width: 900px) {
  body[data-page="download"] .dl-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  @supports (grid-template-rows: subgrid) {
    body[data-page="download"] .dl-karte { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    body[data-page="download"] .dl-karte__kopf { grid-row: 1; }
    body[data-page="download"] .dl-karte__aktion { grid-row: 2; }
    body[data-page="download"] .dl-karte__meta { grid-row: 3; }
    body[data-page="download"] .dl-vertrauen { grid-row: 4; }
  }
}

/* DIE ERKANNTE PLATTFORM. download.js schreibt body[data-detected-os] und
   stellt deren Karte nach vorn. Bis zum 22.09.2026 war sie getoent und die
   andere weiss; jetzt sind beide weiss, und die erkannte traegt Rand,
   Schatten und das Schild auf ihrem oberen Rand. Ohne Skript traegt keine
   Karte das Schild — es waere eine Empfehlung ohne Grundlage. */
body[data-page="download"][data-detected-os="macos"] #dlCardMac,
body[data-page="download"][data-detected-os="windows"] #dlCardWin {
  border-color: var(--dl-green-dark); box-shadow: 0 12px 32px rgba(11, 61, 46, .08);
}
body[data-page="download"] .dl-empfehlung {
  position: absolute; top: 0; right: 22px; transform: translateY(-50%);
  display: none; align-items: center; padding: 4px 12px; border-radius: 999px;
  background: var(--dl-mint); color: var(--dl-green-dark);
  font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap;
}
body[data-page="download"][data-detected-os="macos"] #dlCardMac .dl-empfehlung,
body[data-page="download"][data-detected-os="windows"] #dlCardWin .dl-empfehlung { display: inline-flex; }

/* Kopf: Symbol (die bestehenden Zeichen, auf ruhigem Grund statt Schwarz,
   damit der Knopf das einzige dunkle Element der Karte bleibt), Name,
   Anforderung. Die Namen sind seit S3 h2 — tests/test_s3_gerendert.py
   liest sie als Ueberschrift. */
body[data-page="download"] .dl-karte__kopf { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
body[data-page="download"] .dl-karte__kopf > div { min-width: 0; }
body[data-page="download"] .dl-karte__symbol {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; color: var(--dl-green-dark); background: rgba(11, 61, 46, .06);
}
body[data-page="download"] .dl-karte__symbol svg { width: 22px; height: 22px; }
body[data-page="download"] .dl-karte h2 {
  margin: 0 0 3px; font-size: 19px; font-weight: 750; line-height: 1.25;
  letter-spacing: -.01em; color: var(--dl-ink);
}
body[data-page="download"] .dl-karte__anforderung {
  max-width: none; margin: 0; font-size: 13px; line-height: 1.45; color: var(--dl-muted);
}

/* DER KNOPF. Dunkles Tannengruen mit weisser Schrift, Kapsel, 52 px hoch,
   Pfeil links, Dateiendung im Text. `.btn` bleibt am Element: Daran
   haengen die Sperre ohne Manifest (`.btn.is-disabled`, unten) und die
   Zaehlung in tests/test_s3_gerendert.py. */
body[data-page="download"] .dl-karte__aktion {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-width: 0; margin-top: 14px;
}
body[data-page="download"] .dl-karte__steuerung { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
body[data-page="download"] .dl-knopf {
  flex: 1 1 auto; min-width: 0; min-height: 52px; gap: 10px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--dl-green-dark); color: var(--white);
  font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
body[data-page="download"] .dl-knopf svg { width: 18px; height: 18px; flex: none; }
body[data-page="download"] .dl-knopf:hover {
  color: var(--white); text-decoration: none;
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 61, 46, .22);
}

/* Ein Knopf ohne Datei sah aus wie einer mit: download.js setzt `is-disabled`
   und `aria-disabled`, premium.css kennt die Klasse aber nur fuer .dl-tile
   und .dl-alt — Kacheln, die es auf dieser Seite nicht mehr gibt (gemessen
   ohne latest.json: Deckkraft 1, Zeiger, klickbar). */
body[data-page="download"] .btn.is-disabled { opacity: .5; cursor: default; pointer-events: none; }

/* DIE BAUART DES MAC als Chip-Gruppe: Kapsel mit Rand, der gewaehlte Chip
   minzgruen mit Haken. Darunter echte Radioknoepfe — Pfeiltasten,
   Vorleseprogramm und Formularlogik kommen vom Browser; unsichtbar ist
   nur die Scheibe, das Element liegt ueber dem ganzen Chip. Der Haken ist
   das zweite Merkmal neben der Farbe (WCAG 1.4.1): Minze auf Weiss hat
   nur 1,4 : 1. Welcher Knopf, welche Angabe und welche Pruefsumme dazu
   gehoeren, sagt data-dl-bauart; ausgeblendet wird die andere Bauart. */
body[data-page="download"] .dl-bauart {
  display: inline-flex; flex: none; gap: 2px; min-width: 0; margin: 0; padding: 4px;
  border: 1px solid rgba(11, 61, 46, .16); border-radius: 999px; background: var(--white);
}
body[data-page="download"] .dl-bauart__chip { position: relative; display: flex; margin: 0; }
body[data-page="download"] .dl-bauart__chip input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
body[data-page="download"] .dl-bauart__chip span {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 14px; border-radius: 999px;
  color: var(--dl-muted); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}
body[data-page="download"] .dl-bauart__haken { display: none; width: 14px; height: 14px; flex: none; }
body[data-page="download"] .dl-bauart__chip input:checked + span { background: var(--dl-mint); color: var(--dl-green-dark); font-weight: 700; }
body[data-page="download"] .dl-bauart__chip input:checked + span .dl-bauart__haken { display: block; }
body[data-page="download"] .dl-bauart__chip input:not(:checked):hover + span { color: var(--dl-ink); background: rgba(11, 61, 46, .05); }
body[data-page="download"] #dlCardMac[data-dl-bauart-wahl="arm64"] [data-dl-bauart="x86_64"],
body[data-page="download"] #dlCardMac[data-dl-bauart-wahl="x86_64"] [data-dl-bauart="arm64"] { display: none; }

/* Hinweis, Angabe, Belege: 12-13 px in --dl-muted. Die Angabezeile und die
   Pruefsumme setzt download.js aus latest.json; ohne Manifest bleiben sie
   `hidden`. Die Signaturzeilen stehen fest im Markup, weil release.yml sie
   erzwingt (tests/test_download_wahrheit.py, DerZustandIstErzwungen). */
body[data-page="download"] .dl-karte__hinweis,
body[data-page="download"] .dl-karte__meta {
  max-width: none; margin: 0; font-size: 12px; line-height: 1.45; color: var(--dl-muted);
}
body[data-page="download"] .dl-karte__meta { margin-top: 10px; font-variant-numeric: tabular-nums; }
body[data-page="download"] .dl-vertrauen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  margin: 6px 0 0; padding: 0; list-style: none;
  color: var(--dl-muted);
}
body[data-page="download"] .dl-vertrauen__punkt {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: none; margin: 0;
  font-size: 12.5px; line-height: 1.45; color: var(--dl-muted);
}
body[data-page="download"] .dl-vertrauen__punkt[hidden] { display: none; }
body[data-page="download"] .dl-vertrauen__punkt > svg { width: 15px; height: 15px; flex: none; color: var(--dl-green-dark); }
body[data-page="download"] .dl-summe {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; margin: 0; padding: 1px 8px;
  border: 1px solid rgba(11, 61, 46, .18); border-radius: 999px; background: var(--white);
  color: var(--dl-ink); font: inherit; font-family: var(--font-mono); font-size: 12px; line-height: 1.4;
  white-space: nowrap; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease;
}
body[data-page="download"] .dl-summe:hover { border-color: var(--dl-green-dark); background: rgba(191, 227, 213, .35); }
body[data-page="download"] .dl-summe svg { width: 13px; height: 13px; flex: none; color: var(--dl-green-dark); }
body[data-page="download"] .dl-summe__status { color: var(--dl-green-dark); font-weight: 700; }
body[data-page="download"] .dl-summe__status:empty { display: none; }

/* UNTER BEIDEN KARTEN: Stand der Veroeffentlichung und der Weg zur
   Anleitung. Der Trennpunkt haengt am Datum — ohne Manifest steht nur der
   Verweis da, ohne verwaisten Punkt davor. */
body[data-page="download"] .dl-fusszeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0;
  max-width: none; margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--dl-muted);
}
body[data-page="download"] main .section .container > p.dl-fusszeile,
body[data-page="download"] main .section .container > p.dl-ausnahme { max-width: none; }
body[data-page="download"] .dl-fusszeile__stand[hidden] { display: none; }
body[data-page="download"] .dl-fusszeile__stand::after { content: "\00B7"; content: "\00B7" / ""; margin: 0 10px; }

/* Textverweise mit Pfeil statt Knopfoptik (Auftrag Punkt 4): weniger
   Konkurrenz zu den Downloadknoepfen. Der Pfeil ist ein Zierzeichen und
   wird nicht vorgelesen (Alternativtext ""); Browser ohne diese Schreibweise
   nehmen die erste Zeile. */
body[data-page="download"] .dl-textlink { color: var(--dl-green-dark); font-weight: 600; text-decoration: none; }
body[data-page="download"] .dl-textlink::after {
  content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: .35em;
  transition: transform 150ms ease;
}
body[data-page="download"] .dl-textlink:hover { color: var(--dl-green-dark); text-decoration: underline; text-underline-offset: 3px; }
body[data-page="download"] .dl-textlink:hover::after { transform: translateX(2px); }

/* Die sichtbare Ausnahme unter den Karten (Befund C6): Mass der Fussnote
   des Konzepts, 15 px, gedaempft; der Anfang in voller Tinte. */
body[data-page="download"] .dl-ausnahme { max-width: none; margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--dl-muted); }
body[data-page="download"] .dl-ausnahme strong { color: var(--dl-ink); }

/* DAS FINEPRINT als weisse Karte (vorher .box--mist). --box-zeilen ist der
   Regler von boxen.css: zwei sichtbare Zeilen, wie seit S3
   (tests/test_s3_gerendert.py zaehlt sie). Die Ueberschrift ist seit S3
   h2 statt h3 und seit dem 22.09.2026 einzeilig — 20 px statt 29. */
body[data-page="download"] .boxen { margin-top: 14px; }
body[data-page="download"] .dl-infokarte {
  --box-zeilen: 2; min-height: 0; padding: 18px 24px;
  border: 1px solid var(--dl-border); border-radius: 20px; background: var(--white);
}
/* boxen.css hebt jede .box beim Ueberfahren um 3 px. Diese ist keine
   Kachel, sondern ein Hinweis mit einem Verweis darin. */
body[data-page="download"] .dl-infokarte:hover { transform: none; box-shadow: none; }
/* Vorzeile: .moment-card .number des Konzepts, aber in --emerald-dark
   statt --emerald — Smaragd auf Weiss hat nur 2,5 : 1. */
body[data-page="download"] .dl-infokarte .number { color: var(--emerald-dark); font-size: 13px; font-weight: 850; letter-spacing: .12em; }
body[data-page="download"] .dl-infokarte h2 {
  max-width: none; margin: 6px 0; font-size: 20px; font-weight: 750; line-height: 1.25;
  letter-spacing: -.02em; color: var(--dl-ink); text-wrap: balance;
}
body[data-page="download"] .dl-infokarte .box__text { max-width: none; margin: 0; font-size: 13px; line-height: 1.55; color: var(--dl-muted); }
body[data-page="download"] .dl-infokarte .box__text p { max-width: none; margin: 0 0 8px; font-size: inherit; line-height: inherit; color: inherit; }
body[data-page="download"] .dl-infokarte .box__text strong { color: var(--dl-ink); }
/* Die beiden Fussnoten (* Ton, ** Berechtigungen) mit haengendem Zeichen:
   Der Text der Folgezeilen steht buendig unter dem ersten Wort, nicht
   unter dem Sternchen. */
body[data-page="download"] .dl-fussnote { padding-left: 1.2em; text-indent: -1.2em; }
body[data-page="download"] .dl-fussnote--zwei { padding-left: 1.8em; text-indent: -1.8em; }
body[data-page="download"] .dl-fussnote strong { color: var(--dl-green-dark); }
/* „Read more" ist der Knopf aus boxen.js; hier nur die Optik eines
   Textverweises mit Pfeil. Aufgeklappt zeigt der Pfeil nach oben. */
body[data-page="download"] .dl-infokarte .box__mehr { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--dl-green-dark); }
body[data-page="download"] .dl-infokarte .box__mehr::after {
  content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: 6px;
  transition: transform 150ms ease;
}
body[data-page="download"] .dl-infokarte .box__mehr:hover { text-decoration: underline; text-underline-offset: 3px; }
body[data-page="download"] .dl-infokarte.is-offen .box__mehr::after { transform: rotate(-90deg); }

/* DAS BAND AM FUSS. Die Ueberschrift stand bis zum 22.09.2026 in --ink auf
   dem dunklen Grund (gemessen: rgb(7,27,23) auf rgb(23,72,60), rund
   1,9 : 1) — kaum lesbar. Jetzt Weiss, der Satz darunter in Creme; der
   Hauptknopf minzgruen mit dunkler Schrift, der zweite Weg ein
   Textverweis. Der Grund des Bandes bleibt. */
body[data-page="download"] main .dl-band { padding: 12px 0; }
body[data-page="download"] .dl-band h2 {
  margin: 0; color: var(--white); font-size: clamp(20px, 2vw, 24px); letter-spacing: -.02em; line-height: 1.2;
}
body[data-page="download"] .dl-band .cta-band__inner > div > span { color: var(--dl-cream); font-size: 14px; line-height: 1.5; }
body[data-page="download"] .dl-band .hero-actions { align-items: center; gap: 12px 22px; }
body[data-page="download"] .dl-band__knopf {
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--dl-mint); color: var(--dl-green-dark); font-size: 15px; font-weight: 700; text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
body[data-page="download"] .dl-band__knopf:hover {
  background: var(--white); color: var(--dl-green-dark); text-decoration: none;
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
body[data-page="download"] .dl-textlink--hell,
body[data-page="download"] .dl-textlink--hell:hover { color: var(--white); }
/* Die deutsche Fassung brach hier bei 1920 um (S3: die Knopfgruppe bekam
   zu wenig Breite); die Gruppe nimmt sich weiter, was sie braucht. */
@media (min-width: 901px) {
  body[data-page="download"] .cta-band .hero-actions { flex: 0 0 auto; flex-wrap: nowrap; }
  body[data-page="download"] .cta-band__inner > :first-child { min-width: 0; }
}

/* FOKUS. 3 px Minze mit 2 px Abstand, wie im Auftrag — und in diesem
   Abstand ein dunkelgruener Ring: Minze allein hat auf dem Seitengrund
   1,3 : 1 und auf Weiss 1,4 : 1, der Ring waere also kaum zu sehen
   (WCAG 1.4.11 verlangt 3 : 1). Der dunkle Ring hat dort 7 : 1 und mehr,
   auf dem dunklen Band traegt die Minze selbst (7,5 : 1). */
body[data-page="download"] .dl-knopf:focus-visible,
body[data-page="download"] .dl-band__knopf:focus-visible,
body[data-page="download"] .dl-textlink:focus-visible,
body[data-page="download"] .dl-summe:focus-visible,
body[data-page="download"] .dl-infokarte .box__mehr:focus-visible,
body[data-page="download"] .dl-bauart__chip input:focus-visible + span {
  outline: 3px solid var(--dl-mint); outline-offset: 2px; box-shadow: 0 0 0 2px var(--dl-green-dark);
}
body[data-page="download"] .dl-textlink:focus-visible,
body[data-page="download"] .dl-infokarte .box__mehr:focus-visible { border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  body[data-page="download"] .dl-knopf,
  body[data-page="download"] .dl-band__knopf,
  body[data-page="download"] .dl-bauart__chip span,
  body[data-page="download"] .dl-textlink::after,
  body[data-page="download"] .dl-infokarte .box__mehr::after { transition: none; }
  body[data-page="download"] .dl-knopf:hover,
  body[data-page="download"] .dl-band__knopf:hover,
  body[data-page="download"] .dl-textlink:hover::after { transform: none; }
}

@media (max-width: 760px) {
  body[data-page="download"] main .container { width: min(calc(100% - 32px), var(--max)); }
  body[data-page="download"] main .section { padding: 36px 0 32px; }
  body[data-page="download"] .dl-lede { font-size: 18px; }
  body[data-page="download"] .cta-band .hero-actions { width: 100%; justify-content: center; }
  body[data-page="download"] .dl-band .dl-textlink { padding: 8px 0; }
}
/* Telefon: Chips ueber dem Knopf, beide volle Breite (Auftrag). */
@media (max-width: 560px) {
  body[data-page="download"] .dl-karte { padding: 20px; }
  body[data-page="download"] .dl-karte__steuerung { flex-direction: column; }
  body[data-page="download"] .dl-bauart { display: flex; }
  body[data-page="download"] .dl-bauart__chip { flex: 1 1 0; }
  body[data-page="download"] .dl-bauart__chip span { width: 100%; }
  body[data-page="download"] .dl-knopf { width: 100%; }
  body[data-page="download"] .dl-fusszeile { flex-direction: column; align-items: flex-start; }
  body[data-page="download"] .dl-fusszeile__stand::after { content: none; }
}

/* ==================================================================
   2. Das Fenster nach dem Kauf
   ================================================================== */
body[data-page="download"] .kauf-schleier {
  position: fixed;
  inset: 0;
  z-index: 200;               /* ueber der klebenden Kopfzeile (rahmen.css: 81) */
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: var(--surface-scrim);
}
body[data-page="download"] .kauf-schleier[hidden] { display: none; }
html.kauf-offen, html.kauf-offen body { overflow: hidden; }

body[data-page="download"] .kauf-dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto;
  padding: var(--space-8);
  background: var(--surface-card);
  color: var(--text-body);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-xl);
}
body[data-page="download"] .kauf-dialog:focus { outline: none; }
body[data-page="download"] .kauf-dialog:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-page="download"] .kauf-dialog { animation: kauf-auf 180ms var(--ease-standard, ease-out) both; }
  @keyframes kauf-auf {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

body[data-page="download"] .kauf-dialog__schliessen {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  border: var(--border-width) solid var(--border-control);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
body[data-page="download"] .kauf-dialog__schliessen:hover { border-color: var(--text-body); background: var(--surface-hover); }
body[data-page="download"] .kauf-dialog__schliessen:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: var(--focus-glow);
}
body[data-page="download"] .kauf-dialog__haken { width: 44px; height: 44px; }
body[data-page="download"] .kauf-dialog__haken svg { width: 22px; height: 22px; }
body[data-page="download"] .kauf-dialog__kicker {
  margin: var(--space-4) 0 var(--space-1);
  font-family: var(--font-core);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
body[data-page="download"] .kauf-dialog h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-core);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  text-wrap: balance;
  padding-right: 48px;
}
body[data-page="download"] .kauf-dialog__satz {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* Die grosse Option: das erkannte System. */
body[data-page="download"] .kauf-primaer {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-primary-50);
  border: var(--border-width) solid var(--color-primary-100);
  border-radius: var(--radius-card);
}
/* `display: grid` schlaegt das `hidden`-Attribut des Browsers — auf dem
   Telefon stand sonst ein leerer gruener Kasten ueber dem Hinweis. */
body[data-page="download"] .kauf-primaer[hidden] { display: none; }
body[data-page="download"] .kauf-primaer__titel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}
body[data-page="download"] .kauf-primaer__titel svg { width: 22px; height: 22px; flex: none; color: var(--color-primary-700); }
body[data-page="download"] .kauf-primaer__meta {
  margin: 0;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: var(--text-body);
}
body[data-page="download"] .kauf-primaer__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Ein Knopf mit seiner Angabezeile: Version, Groesse, SHA-256 aus dem
   Manifest — klein, in Mono, weil es Technik ist. Fehlt das Manifest,
   bleibt die Zeile `hidden`; der Knopf bleibt. */
body[data-page="download"] .kauf-knopf {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
body[data-page="download"] .kauf-primaer .kauf-knopf { flex: 1 1 220px; }
body[data-page="download"] .kauf-primaer .kauf-knopf .btn { width: 100%; justify-content: center; }
body[data-page="download"] .kauf-knopf__zeile {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
body[data-page="download"] .kauf-knopf__zeile[hidden] { display: none; }

/* Die uebrigen Dateien: flache Knoepfe, immer sichtbar. */
body[data-page="download"] .kauf-weitere {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}
body[data-page="download"] .kauf-weitere[hidden] { display: none; }
body[data-page="download"] .kauf-weitere__label {
  flex: 0 0 100%;
  font-size: var(--fs-body-m);
  color: var(--text-muted);
}
body[data-page="download"] .kauf-weitere .btn { padding: 10px 14px; font-size: 14px; }
body[data-page="download"] .kauf-weitere .kauf-knopf__zeile { display: none; }

/* Telefon: kein Download, sondern der Weg zum Rechner. */
body[data-page="download"] .kauf-mobil {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-muted);
  border-radius: var(--radius-card);
}
body[data-page="download"] .kauf-mobil[hidden] { display: none; }
body[data-page="download"] .kauf-mobil p { margin: 0; font-size: var(--fs-body-l); line-height: var(--lh-body); color: var(--text-body); }
body[data-page="download"] .kauf-mobil__adresse { font-family: var(--font-mono); font-size: var(--fs-body-m); color: var(--text-body); overflow-wrap: anywhere; }

/* Der Hinweis, der nur steht, wo er stimmt (Windows, solange der Schalter
   in js/config.js auf true steht). Kein Warnrot: eine Erklaerung. */
body[data-page="download"] .kauf-hinweis {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-primary-700);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: var(--text-body);
}
body[data-page="download"] .kauf-hinweis[hidden] { display: none; }

/* Wie es weitergeht. */
body[data-page="download"] .kauf-weiter {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
}
body[data-page="download"] .kauf-weiter__schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}
body[data-page="download"] .kauf-weiter__schritte li + li::before {
  content: "\2192";
  margin-right: 12px;
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}
body[data-page="download"] .kauf-weiter p {
  margin: 0;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: var(--text-body);
}
body[data-page="download"] .kauf-weiter a { color: var(--text-link); }

@media (max-width: 480px) {
  body[data-page="download"] .kauf-dialog { padding: var(--space-6) var(--space-5); border-radius: var(--radius-card); }
  body[data-page="download"] .kauf-dialog h2 { font-size: 1.75rem; }
}