/* Gestaltungssystem A1 (Betreiber-Entscheid Version A „Ruhig und hell“, 28.10.2026).
   Eine Quelle für Knopf-, Feld-, Karten- und Textklassen. Farben kommen aus den Theme-Variablen
   (hell und dunkel), nie aus festen Hex-Werten. Feste Maße: Knopfhöhe 48 px, Eckenradius 10 px. */
:root {
  --g-hoehe: 48px;
  --g-radius: 10px;
  --g-fehler: #f87171;
  --g-erfolg: #86efac;
  --g-gedaempft: #475569;
  --g-akzent-text: var(--accent, #6c63ff);
  --g-knopf-bg: var(--accent, #6c63ff);
}

html.kf-light {
  --g-akzent-text: #4338ca;
  --g-erfolg: #15803d;
  --g-fehler: #b91c1c;
  --g-warnung: #92400e;
}

html:not(.kf-light) {
  --g-warnung: #f59e0b;
  --g-gedaempft: #b6c2d1;
  --g-akzent-text: #a5a0ff;
  --g-knopf-bg: #5b52e8;
}

.g-karte {
  margin: 10px auto 0;
  max-width: 340px;
  padding: 12px;
  border: 1px solid var(--glass-border, #3a4452);
  border-radius: var(--g-radius);
  font-size: 14px;
  color: var(--text-primary, #c9d1d9);
}

.g-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--g-hoehe);
  margin-top: 8px;
  border: 0;
  border-radius: var(--g-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.g-knopf--primaer {
  background: var(--g-knopf-bg);
  color: #fff;
}

.g-link-knopf {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  min-height: var(--g-hoehe);
  min-width: 48px;
  padding: 0 6px;
  background: none;
  border: none;
  color: var(--g-akzent-text);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.g-link {
  font-size: 13px;
  color: var(--g-akzent-text);
  text-decoration: none;
}

.g-geraete-zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  color: var(--g-gedaempft);
}

.g-mitte {
  align-self: center;
}

.g-kasse {
  margin-top: 12px;
  font-size: 13px;
  text-align: center;
  color: var(--g-gedaempft);
}

.g-hervor {
  color: var(--text-primary, #e7ecf2);
  font-weight: 700;
  word-break: break-all;
}

.g-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.g-meldung {
  min-height: 18px;
  margin-top: 6px;
  color: var(--text-primary, #c9d1d9);
}

.g-meldung--fehler {
  color: var(--g-fehler);
}

.g-hinweis {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--g-gedaempft);
}

.g-rechts {
  margin: -4px 0 4px;
  text-align: right;
}

.g-text {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--g-gedaempft);
}

.g-fehlerbox {
  margin-bottom: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  font-size: 13px;
}

.g-erfolgsbox {
  margin-bottom: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.15);
  color: var(--g-erfolg);
  font-size: 13px;
}

.g-vergessen {
  padding: 0 4px;
}

.g-zentriert {
  text-align: center;
}

.g-abstand-unten {
  margin-bottom: 8px;
}

.g-zeile-block {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}

.g-auswahl {
  width: 100%;
  min-height: var(--g-hoehe);
  margin-top: 4px;
}

.g-abstand-oben-0 {
  margin-top: 0;
}

.g-abstand-oben-8 {
  margin-top: 8px;
}

.g-abstand-oben-12 {
  margin-top: 12px;
}

.g-abstand-oben-14 {
  margin: 14px 0 0;
}

.g-abstand-oben-20 {
  margin-top: 20px;
}

.g-knopf-link {
  display: inline-block;
  min-height: var(--g-hoehe);
  padding: 12px 22px;
  border-radius: var(--g-radius);
  background: var(--g-knopf-bg);
  color: #fff;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
}

.g-hinweis-gross {
  margin-top: 10px;
  font-size: max(0.85rem, 12px);
}

.g-meldung-gedaempft {
  margin-bottom: 18px;
  font-size: max(0.85rem, 12px);
  color: var(--g-gedaempft);
}

.g-trenner-unten {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
}

.g-scroll-x {
  overflow-x: auto;
}

.g-gesperrt {
  opacity: 0.45;
  cursor: not-allowed;
}

.g-feld-schmal {
  max-width: 200px;
}

.g-feld-mittel {
  max-width: 360px;
}

.g-spalte-120 {
  width: 120px;
}

.g-spalte-130 {
  width: 130px;
}

.g-reihe-umbruch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* A2a: Rollenklassen fuer die Kassenseite (feste Skala 8/16/24, Text 12/14/16, Feldhoehe 48). */
.g-relativ {
  position:relative;
}

.g-icon-mittel {
  font-size:18px;
  line-height:1;
}

.g-hinweis-unten {
  margin-bottom:16px;
  color:var(--g-gedaempft);
  font-size:14px;
}

.g-knopf-gross {
  width:100%;
  padding:16px;
  font-size:16px;
}

.g-luft-oben-8 {
  margin-top:8px;
}

.g-voll-zentriert {
  width:100%;
  justify-content:center;
}

.g-feld-flex {
  flex:1;
  min-width:0;
  padding:8px 16px;
  border-radius:8px;
  font-size:14px;
}

.g-icon-knopf {
  padding:8px 16px;
  font-size:18px;
  flex-shrink:0;
}

.g-polster-16 {
  padding:8px 16px;
}

.g-reihe-eng {
  display:flex;
  gap:8px;
  margin-bottom:8px;
}

html .g-tab-aktiv {
  color: var(--g-akzent-text) !important;
}

.g-tab-aktiv {
  flex:1;
  padding:8px 16px;
  background:rgba(108,99,255,0.15);
  border:1px solid rgba(108,99,255,0.4);
  color:var(--g-akzent-text);
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
}

.g-tab {
  flex:1;
  padding:8px 16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--g-gedaempft);
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
}

.g-reihe {
  display:flex;
  gap:8px;
  align-items:center;
}

.g-fuell {
  flex:1;
}

.g-hinweis-leise {
  color:var(--g-gedaempft);
  font-size:12px;
}

.g-kachel {
  padding:16px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:var(--text-primary, #e7ecf2);
  cursor:pointer;
  font-weight:600;
  font-size:14px;
}

.g-erfolg-klein {
  font-weight:400;
  font-size:12px;
  color:var(--g-erfolg);
}

.g-fehler-klein {
  font-weight:400;
  font-size:12px;
  color:var(--g-fehler);
}

.g-hinweis-box-violett {
  margin-top:16px;
  padding:16px;
  background:rgba(108,99,255,0.05);
  border-radius:8px;
  border:1px solid rgba(108,99,255,0.2);
  display:flex;
  align-items:center;
  gap:16px;
}

.g-check-18 {
  width:18px;
  height:18px;
  accent-color:var(--g-akzent-text);
}

.g-zeile-klickbar {
  cursor:pointer;
  font-size:14px;
  color:var(--text-primary, #e7ecf2);
}

.g-leise {
  color:var(--g-gedaempft);
}

.g-hinweis-box-gruen {
  margin-top:8px;
  padding:16px;
  background:rgba(34,197,94,0.05);
  border-radius:8px;
  border:1px solid rgba(34,197,94,0.2);
  display:flex;
  align-items:center;
  gap:16px;
}

html .g-warnung-rahmen {
  color: var(--g-warnung) !important;
  border-color: var(--g-warnung) !important;
}

html .g-erfolg-rahmen {
  color: var(--g-erfolg) !important;
  border-color: var(--g-erfolg) !important;
}

.g-dialog-breit {
  max-width:900px;
  width:95vw;
}

.g-text-links {
  text-align:left;
}

.g-hinweis-absatz {
  margin:0 0 16px;
  color:var(--g-gedaempft);
  font-size:14px;
}

.g-erfolg {
  color:var(--g-erfolg);
}

.g-dialog-mittel {
  max-width:540px;
  width:95vw;
}

.g-kopfzeile-reihe {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
  font-size:14px;
}

.g-reihe-mitte {
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:center;
  margin-bottom:8px;
}

.g-icon-gross {
  font-size:24px;
  width:48px;
  height:48px;
}

.g-zentriert-breit {
  text-align:center;
  min-width:96px;
}

.g-zahl-gross {
  font-size:30px;
  font-weight:700;
  line-height:1;
}

.g-hinweis-leise-oben {
  color:var(--g-gedaempft);
  font-size:12px;
  margin-top:8px;
}

.g-erfolg-zentriert {
  text-align:center;
  margin-bottom:16px;
  color:var(--g-erfolg);
  font-size:14px;
}

.g-liste-scroll {
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:42vh;
  overflow:auto;
}

.g-hinweis-mitte {
  font-size:14px;
  color:var(--g-gedaempft);
  margin:0 0 16px;
}

.g-mitte-hoch {
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.g-qr-bild {
  width:280px;
  height:280px;
  max-width:70vw;
  image-rendering:pixelated;
}

.g-pfad {
  font-size:12px;
  color:var(--g-gedaempft);
  word-break:break-all;
  margin-top:8px;
}

.g-luft-unten-8 {
  margin-bottom:8px;
}

.g-feldlabel {
  display:block;
  margin-bottom:8px;
  font-weight:500;
}

.g-notiz {
  text-align:left;
  resize:vertical;
  min-height:72px;
}

.g-erfolgsbox-klein {
  background:rgba(34,197,94,0.08);
  border:1px solid rgba(34,197,94,0.3);
  border-radius:8px;
  padding:8px 16px;
  font-size:12px;
  color:var(--g-erfolg);
}

.g-luft-unten-24 {
  margin-bottom:24px;
}

.g-reihe-eng-zeile {
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0 8px;
}

.g-cursor-standard {
  cursor:default;
}

.g-luft-oben-16 {
  margin-top:16px;
}

.g-reihe-umbruch-eng {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.g-grossschrift-fuell {
  text-transform:uppercase;
  flex:1;
}

.g-nicht-umbrechen {
  white-space:nowrap;
}

.g-karte-dunkel {
  max-width:420px;
  background:#111;
  border-radius:16px;
  overflow:hidden;
}

.g-kopfleiste-dunkel {
  background:#1a1a2e;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.g-titel-weiss {
  color:#fff;
  font-size:16px;
  margin:0;
}

.g-schliessen-knopf {
  color:#fff;
  background:none;
  border:none;
  font-size:20px;
  cursor:pointer;
}

.g-relativ-schwarz {
  position:relative;
  background:#000;
}

.g-bild-breit {
  width:100%;
  max-height:300px;
  display:block;
  object-fit:cover;
}

.g-scan-rahmen {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:180px;
  height:180px;
  border:3px solid #6c63ff;
  border-radius:8px;
  box-shadow:0 0 9999px rgba(0,0,0,0.5);
}

.g-ecke-oben-links {
  position:absolute;
  top:-3px;
  left:-3px;
  width:24px;
  height:24px;
  border-top:4px solid #a78bfa;
  border-left:4px solid #a78bfa;
  border-radius:4px 0 0 0;
}

.g-ecke-oben-rechts {
  position:absolute;
  top:-3px;
  right:-3px;
  width:24px;
  height:24px;
  border-top:4px solid #a78bfa;
  border-right:4px solid #a78bfa;
  border-radius:0 4px 0 0;
}

.g-ecke-unten-links {
  position:absolute;
  bottom:-3px;
  left:-3px;
  width:24px;
  height:24px;
  border-bottom:4px solid #a78bfa;
  border-left:4px solid #a78bfa;
  border-radius:0 0 0 4px;
}

.g-ecke-unten-rechts {
  position:absolute;
  bottom:-3px;
  right:-3px;
  width:24px;
  height:24px;
  border-bottom:4px solid #a78bfa;
  border-right:4px solid #a78bfa;
  border-radius:0 0 4px 0;
}

.g-leerzustand {
  padding:16px;
  text-align:center;
  color:var(--g-gedaempft);
  font-size:14px;
}

.g-zeile-klickbar-oben {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  font-size:14px;
  cursor:pointer;
}

.g-reihe-weit {
  display:flex;
  gap:16px;
  margin-bottom:8px;
}

.g-text-links-oben {
  text-align:left;
  margin-top:8px;
}

.g-warnbox-klein {
  background:rgba(251,191,36,0.08);
  border:1px solid rgba(251,191,36,0.3);
  border-radius:8px;
  padding:8px 16px;
  margin-top:16px;
  font-size:12px;
  color:var(--g-warnung);
}

.g-hinweis-blass {
  display:block;
  font-size:12px;
  font-weight:400;
  opacity:0.75;
  margin-top:8px;
}

/* Textrolle: gewinnt gegen die Seiten-CSS (Fortschritt, Hinweise). Feste Farbe je Modus, damit sie nicht von einer
   Seiten-Variable abhängt, die im Hellmodus fehlt. Kontrast ≥ 4,5:1 (gemessen: Kontrast-E2E). */
html.kf-light .g-text-primaer {
  color: #0f172a !important;
}
html:not(.kf-light) .g-text-primaer {
  color: #f1f5f9 !important;
}