/* Seite /app – nur Werte aus frontend/design-tokens/tokens.css */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--a-grund);
  color: var(--a-text);
  font-family: var(--a-schrift);
  font-size: var(--a-groesse-3);
  line-height: var(--a-zeile);
}
a { color: var(--a-akzent); }
code { font-family: var(--a-schrift-mono); font-size: var(--a-groesse-2); background: var(--a-flaeche-2); border-radius: var(--a-radius-s); padding: 0 var(--a-abstand-1); }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a-abstand-3); padding: var(--a-abstand-3) var(--a-abstand-4); border-bottom: var(--a-linie-dicke) solid var(--a-linie); min-height: var(--a-kopf-hoehe); }
.marke { display: inline-flex; align-items: center; gap: var(--a-abstand-2); color: var(--a-text); text-decoration: none; font-family: var(--a-schrift-anzeige); font-weight: var(--a-gewicht-fett); }
.inhalt { max-width: var(--a-inhalt-breite); margin: 0 auto; padding: var(--a-abstand-5) var(--a-abstand-4) var(--a-abstand-7); }
h1 { font-family: var(--a-schrift-anzeige); font-size: var(--a-groesse-5); line-height: 1.25; margin: 0 0 var(--a-abstand-2); }
h2 { font-size: var(--a-groesse-4); margin: 0; }
.unter { color: var(--a-text-leise); margin: 0 0 var(--a-abstand-5); }
.leise { color: var(--a-text-leise); }
.klein { font-size: var(--a-groesse-2); }
.karte { background: var(--a-flaeche); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); padding: var(--a-abstand-5); margin-bottom: var(--a-abstand-4); box-shadow: var(--a-schatten-1); }
.karte p { margin: var(--a-abstand-2) 0; }
.titelzeile { display: flex; align-items: center; gap: var(--a-abstand-3); flex-wrap: wrap; margin-bottom: var(--a-abstand-2); }
.nr { display: inline-flex; align-items: center; justify-content: center; width: var(--a-knopf-klein); height: var(--a-knopf-klein); border-radius: var(--a-radius-rund); background: var(--a-akzent-weich); color: var(--a-akzent); font-weight: var(--a-gewicht-fett); font-size: var(--a-groesse-2); }
.pille { display: inline-block; padding: var(--a-abstand-1) var(--a-abstand-3); border-radius: var(--a-radius-rund); font-size: var(--a-groesse-2); font-weight: var(--a-gewicht-mittel); background: var(--a-flaeche-2); color: var(--a-text-leise); }
.pille.gut { background: var(--a-gut-weich); color: var(--a-gut); }
.pille.warn { background: var(--a-warn-weich); color: var(--a-warn); }
.pille.fehler { background: var(--a-fehler-weich); color: var(--a-fehler); }
.hinweis { background: var(--a-warn-weich); border-radius: var(--a-radius-s); padding: var(--a-abstand-3); font-size: var(--a-groesse-2); }
.paket { margin: var(--a-abstand-4) 0; padding: var(--a-abstand-4); background: var(--a-grund); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-abstand-4); }
.paket-text { flex: 1 1 var(--a-feld-min); min-width: 0; }
.paket-name { font-weight: var(--a-gewicht-fett); }
.paket-zeile { color: var(--a-text-leise); font-size: var(--a-groesse-2); }
.sha { font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); word-break: break-all; color: var(--a-text-leise); margin-top: var(--a-abstand-1); }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: var(--a-feld-hoehe); padding: 0 var(--a-abstand-5); border-radius: var(--a-radius-rund); background: var(--a-akzent); color: var(--a-text-auf-akzent); font: inherit; font-weight: var(--a-gewicht-fett); text-decoration: none; border: 0; cursor: pointer; transition: opacity var(--a-dauer-kurz) var(--a-kurve); }
.knopf:hover { opacity: 0.9; }
.knopf.zweit { background: var(--a-flaeche-2); color: var(--a-text); border: var(--a-linie-dicke) solid var(--a-linie); }
:focus-visible { outline: var(--a-fokus-dicke) solid var(--a-akzent); outline-offset: var(--a-fokus-dicke); }
.schritte { margin: var(--a-abstand-3) 0 0; padding-left: var(--a-abstand-5); }
.schritte li { margin: var(--a-abstand-2) 0; }
.fehlerbox { color: var(--a-fehler); }
.laden { display: inline-flex; align-items: center; gap: var(--a-abstand-3); color: var(--a-text-leise); }
.kreisel { width: var(--a-abstand-4); height: var(--a-abstand-4); border-radius: var(--a-radius-rund); border: var(--a-fokus-dicke) solid var(--a-linie); border-top-color: var(--a-akzent); animation: dreh 0.8s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kreisel { animation: none; } }
/* hidden gilt auch fuer Knoepfe und Karten mit eigenem display (steht zuletzt, gleiche Gewichtung) */
[hidden] { display: none; }

/* Seite /apps */
.karten-liste { display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.hinweis { margin: var(--a-abstand-2) 0 0; color: var(--a-text-leise); font-size: var(--a-groesse-2); }
.gross .paket { border-color: var(--a-akzent); }
.gross .knopf { font-size: var(--a-groesse-3); flex: 1 1 var(--a-feld-min); }
.qr-karte { display: none; }
body[data-geraet="windows"] .qr-karte, body[data-geraet="mac"] .qr-karte, body[data-geraet="andere"] .qr-karte { display: block; }
.qr { display: block; width: 100%; max-width: var(--a-feld-min); height: auto; border-radius: var(--a-radius-m); }
.qr-grund { fill: var(--a-grund); }
.qr-modul { fill: var(--a-text); }
:root[data-theme="dunkel"] .qr-grund { fill: var(--a-text); }
:root[data-theme="dunkel"] .qr-modul { fill: var(--a-grund); }