/*
 * Copyright (c) 2026 Dave Stänz, axpol GmbH
 * Alle Rechte vorbehalten.
 *
 * Zweck : Gestaltung der oeffentlichen Seite von Downloads (Mockup downloads_v3 Bild 1, 2, 9) - Farben als
 *         Variablen, hell und dunkel nach dem Geraet, Bruch 640 px (Handy: eine Spalte). Keine Inline-Stile (CSP).
 */
:root{--grund:#f6f8fa;--karte:#fff;--linie:#d9dfe5;--text:#15191e;--leise:#6b7681;--akzent:#0e7490;
  --akzent-text:#fff;--hell:#e6f4f7;--ok:#12855f;--warn:#b45309;--rot:#b4271c;--blau:#1e5bd6;
  --f:"Inter Tight","Helvetica Neue",Arial,sans-serif;--m:"IBM Plex Mono",ui-monospace,monospace}
@media (prefers-color-scheme:dark){:root{--grund:#0d1117;--karte:#161b22;--linie:#2a3038;--text:#e6edf3;
  --leise:#8b96a1;--hell:#10313a}}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--text);font:14px/1.5 var(--f)}
a{color:var(--akzent)}
code,pre{font-family:var(--m);font-size:12px}
.umbruch{overflow-wrap:anywhere}
.kopf{background:var(--karte);border-bottom:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;padding:10px 16px}
.marke{font-weight:700;font-size:16px;color:var(--text);text-decoration:none}
.marke span{color:var(--akzent)}
.suche{flex:1 1 220px;max-width:460px}
.suche input{width:100%;border:1px solid var(--linie);border-radius:7px;padding:6px 10px;background:var(--grund);
  color:var(--text);font:inherit}
.rechts{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sprachen a{color:var(--leise);text-decoration:none;margin:0 3px}
.sprachen a[aria-current]{color:var(--text);font-weight:700}
.knopf{display:inline-block;border:1px solid var(--linie);border-radius:7px;padding:5px 12px;background:var(--karte);
  color:var(--text);text-decoration:none;font:inherit;cursor:pointer;white-space:nowrap}
.knopf.haupt{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-text)}
.inhalt{max-width:1200px;margin:0 auto;padding:16px}
.zwei-spalten{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px}
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.bereiche{display:flex;flex-direction:column;gap:3px}
.bereiche small{font:600 11px var(--m);color:var(--leise);text-transform:uppercase;margin:8px 0 2px}
.bereiche a{padding:5px 10px;border-radius:7px;color:var(--text);text-decoration:none;display:flex;
  justify-content:space-between}
.bereiche a[aria-current]{background:var(--akzent);color:var(--akzent-text)}
.karten{display:flex;flex-direction:column;gap:8px}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:9px;padding:10px 12px;display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center}
.karte h2{margin:0;font-size:15px}
.karte h2 a{color:var(--text);text-decoration:none}
.karte p{margin:2px 0 0;color:var(--leise);font-size:12.5px}
.karte.gesperrt h2{color:var(--leise)}
.aktionen{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.typ{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;font:700 10px var(--m);color:#fff;
  background:#3a434c}
.typ-exe,.typ-dmg,.typ-elf,.typ-iso,.typ-img,.typ-targz,.typ-tar{background:var(--akzent)}
.typ-pdf{background:var(--rot)}
.typ-zip{background:#6d28d9}
.sicht{border:1px solid var(--linie);border-radius:999px;padding:1px 8px;font-size:11.5px;white-space:nowrap}
.sicht.oeff{color:var(--ok)}
.sicht.konto{color:var(--blau)}
.streifen{border:1px solid #f0c48a;background:#fff6ea;color:#7a3d06;border-radius:8px;padding:8px 12px}
.streifen.blau{border-color:#b7cbf3;background:#eef3fc;color:#173f8f}
.streifen.gruen{border-color:#9fd6c2;background:#eaf7f1;color:#0b5c41}
.streifen.rot{border-color:#efb1aa;background:#fdeeee;color:#7f1d1d}
.leise{color:var(--leise)}
.warn{color:var(--warn)}
.beschreibung{max-width:800px}
.pruef{background:var(--hell);border:1px solid var(--linie);border-radius:8px;padding:8px 12px;margin:8px 0;
  font-size:13px}
.code{background:#0d1117;color:#cfd6dd;border-radius:8px;padding:10px 12px;overflow-x:auto}
.haft{background:var(--karte);border:1px solid var(--linie);border-left:4px solid var(--warn);border-radius:8px;
  padding:8px 12px;margin:8px 0}
.haft h2,.haft h3{margin:0 0 4px;font-size:14px}
.haft p{margin:0;white-space:pre-line}
.laden{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:8px 0}
.bestaetigen{display:flex;gap:8px;align-items:flex-start}
table{width:100%;border-collapse:collapse;background:var(--karte);border:1px solid var(--linie);border-radius:8px;
  margin:8px 0}
th{text-align:left;font:600 11px var(--m);color:var(--leise);text-transform:uppercase;padding:6px 8px;
  border-bottom:1px solid var(--linie)}
td{padding:6px 8px;border-bottom:1px solid var(--linie);vertical-align:top}
tr.grau td{color:var(--leise)}
td.nein{color:var(--rot)}
td.ja{color:var(--ok)}
td.warnung{color:var(--warn)}
.chip{border:1px solid var(--linie);border-radius:999px;padding:1px 8px;font-size:11.5px}
.chip.gruen{color:var(--ok)}
.chip.rot{color:var(--rot)}
.bilder{display:flex;flex-wrap:wrap;gap:8px}
.bilder img{max-width:160px;max-height:120px;border:1px solid var(--linie);border-radius:6px;object-fit:contain;
  background:#fff}
.melden form{display:flex;flex-direction:column;gap:8px;max-width:480px}
.melden label{display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.melden textarea,.melden input,.melden select{font:inherit;border:1px solid var(--linie);border-radius:6px;
  padding:5px 8px;background:var(--karte);color:var(--text)}
.ablage{display:block;border:2px dashed var(--akzent);background:var(--hell);border-radius:10px;padding:18px;
  text-align:center;cursor:pointer}
.ablage progress{width:100%;margin-top:8px}
.ablage progress[hidden]{display:none}
.fuss{border-top:1px solid var(--linie);background:var(--karte);color:var(--leise);font-size:12px;padding:10px 16px;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}
h1{font-size:20px;margin:4px 0 12px}
h3{font-size:14px;margin:12px 0 4px}
@media (max-width:639px){
  .zwei-spalten,.zwei{grid-template-columns:minmax(0,1fr)}
  .karte{grid-template-columns:40px minmax(0,1fr)}
  .aktionen{grid-column:1/-1;justify-content:flex-start}
  .rechts{margin-left:0}
}