/* Sunntech Kassa -- Kassen-Kern (Meilenstein 2). Grosse Tap-Ziele, Kontrast,
   Touch + Tastatur, Dunkelmodus. Geld/Marke: Gruen #2F5D3E auf Creme. */
/* @import statt <link> je Seite: styles.css ist die einzige Datei, die
   wirklich JEDE Seite laedt (auch die, die dieser Umbau nicht einzeln
   anfasst) -- so bekommt die Titel-Schrift alle Seiten auf einmal. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&display=swap');
/* ==== SUNNTECH DESIGN SYSTEM (Quelle: design-system/sunntech-design.css) ====
   "Sonne auf Weiss" + Dark Mode. Manueller Hell/Dunkel-Schalter via data-theme
   (Default folgt System). Alte Kassa-Tokennamen sind unten abwaertskompatibel
   auf das neue System gemappt -- bestehendes CSS laeuft unveraendert weiter. */
:root, html[data-theme="light"] {
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FCFBF8;
  --line:#EDEAE2; --line-2:#F1EEE7;
  --ink:#262420; --ink-2:#6E6A60; --ink-3:#A6A192;
  --sun:#E7962B; --sun-tief:#C87A1E; --sun-soft:#FDF1DC; --sun-line:#F0DCB4;
  --chip-bg:#E7F0E7; --chip-stroke:#234A30;
  --gruen:#2F5D3E; --gruen-tief:#234A30; --gruen-soft:#E7F0E7; --gruen-line:#CFE3CF;
  --ton:#B0503E; --ton-soft:#F7E7E2;
  --badge-sun:#E7962B; --badge-sun-ink:#3A2705;
  --badge-gruen:#2F5D3E; --badge-ton:#B0503E; --badge-ink:#FFFFFF;
  --glass:rgba(255,255,255,.72);
  --hero-a:#FFF7EA; --hero-b:#FDECCF; --hero-ink:#4A3410; --hero-sub:#8A6A2E; --hero-line:#F0DCB4;
  --card-shadow:0 1px 2px rgba(38,36,32,.05), 0 10px 26px rgba(38,36,32,.07);
}
html[data-theme="dark"] {
  --bg:#0C110E; --surface:#151B17; --surface-2:#1A211C;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.05);
  --ink:#ECEAE2; --ink-2:#A7A99E; --ink-3:#71746A;
  --sun:#F5B23E; --sun-tief:#E0912A; --sun-soft:rgba(245,178,62,.14); --sun-line:rgba(245,178,62,.28);
  --chip-bg:rgba(143,217,168,.13); --chip-stroke:#9FE3B6;
  --gruen:#46A06A; --gruen-tief:#46A06A; --gruen-soft:rgba(70,160,106,.14); --gruen-line:rgba(70,160,106,.3);
  --ton:#D4735E; --ton-soft:rgba(212,115,94,.15);
  --badge-sun:#F5B23E; --badge-sun-ink:#2A1C05;
  --badge-gruen:#46A06A; --badge-ton:#D4735E; --badge-ink:#0C110E;
  --glass:rgba(21,27,23,.66);
  --hero-a:#2C2214; --hero-b:#181712; --hero-ink:#FCE9C5; --hero-sub:#C9A868; --hero-line:rgba(245,178,62,.28);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.5);
}
/* Abwaertskompatibel: alte Kassa-Tokennamen -> neues System */
:root, html[data-theme] {
  --creme:var(--bg); --karte:var(--surface); --feld:var(--surface);
  --tinte:var(--ink); --grau:var(--ink-2); --linie:var(--line);
  --gruen-hell:var(--gruen); --treffer-aktiv:var(--gruen-soft);
  --ok:#2f7d46; --warn:#b8791f; --fehler:#b5433a;
  --radius:14px;
}
html[data-theme="dark"] { --ok:#4fae6a; --warn:#d29a3a; --fehler:#d4735e; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--creme); color: var(--tinte);
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
h1, h2, h3, .display { font-family: "Bricolage Grotesque", system-ui, sans-serif; }

/* Kopf */
.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px; background: var(--gruen); color: #fff; flex: 0 0 auto;
}
/* Befund Andrea 30.08. (echter Kassencomputer, App-Modus): die Kopfzeile hat
   viele Knoepfe — ohne Umbruch wurde rechts abgeschnitten. Jetzt bricht die
   rechte Knopfgruppe in eine zweite Zeile um, statt aus dem Bild zu laufen. */
.kopf { flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: 9px; font-size: 18px; }
.marke .logo { border-radius: 6px; background: #fff; padding: 2px; }
.kopf-rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.pill { font-size: 13px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.16); white-space: nowrap; }
/* Buttons erben die weisse Kopf-Schrift NICHT von selbst (UA-Standard ist
   schwarz) -- darum explizit: ALLE Knoepfe in der gruenen Kopfzeile weiss. */
.kopf button { color: #fff; }
.pill.gut { background: var(--ok); } .pill.warn { background: var(--warn); } .pill.aus { background: var(--fehler); }
.ikon-knopf { font-size: 18px; background: rgba(255,255,255,.16); color: #fff; border: 0; border-radius: 8px; width: 38px; height: 34px; cursor: pointer; }
.ikon-knopf:hover { background: rgba(255,255,255,.28); }
.ikon-knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; margin: auto; }
a.ikon-knopf { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Login */
.login { flex: 1 1 auto; display: grid; place-items: center; padding: 20px; }
.login-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px; width: min(380px, 92vw); display: grid; gap: 12px; }
.login-karte h1 { margin: 0; color: var(--gruen); font-size: 22px; }
.login-karte label { display: grid; gap: 5px; font-size: 14px; color: var(--grau); }
.login-karte input { padding: 12px; font-size: 16px; border: 1px solid var(--linie); border-radius: 10px; background: var(--feld); color: var(--tinte); }

/* Kasse-Layout: Bon links, Waehler rechts */
.kasse { flex: 1 1 auto; display: grid; grid-template-columns: minmax(300px, 38%) 1fr; gap: 12px; padding: 12px; min-height: 0; }
@media (max-width: 820px) { .kasse { grid-template-columns: 1fr; } }

/* Bon */
.bon { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 0; }
.bon-kopf { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
.bon-kopf h2 { margin: 0; font-size: 17px; }
.bon-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.bon-aktionen .klein-knopf { flex: 1 1 auto; text-align: center; white-space: nowrap; font-size: 12.5px; padding: 8px 10px; }
.bon-positionen { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1 1 auto; }
.bon-leer { padding: 30px 16px; text-align: center; color: var(--grau); flex: 1 1 auto; display: grid; place-items: center; }
.pos {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  padding: 10px; border-radius: 10px;
}
.pos:nth-child(odd) { background: rgba(127,127,127,.05); }
.pos.neu { animation: neu-blink .5s ease; }
@keyframes neu-blink { from { background: var(--treffer-aktiv); } to {} }
.pos .name { font-weight: 600; }
.pos .detail { color: var(--grau); font-size: 13px; }
.pos .zeilensumme { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.pos .menge-steuer { display: flex; align-items: center; gap: 6px; grid-column: 1 / 2; }
.mengen-knopf { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--linie); background: var(--feld); color: var(--tinte); font-size: 17px; cursor: pointer; }
.mengen-knopf:disabled { opacity: .35; cursor: not-allowed; }
.pos .menge-wert { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.pos .weg { grid-column: 2; border: 0; background: transparent; color: var(--fehler); cursor: pointer; font-size: 13px; }

.bon-fuss { border-top: 1px solid var(--linie); padding: 12px 14px; display: grid; gap: 8px; }
.steuer-zeile { color: var(--grau); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 10px; }
.summe-zeile { display: flex; justify-content: space-between; font-size: 22px; font-weight: 800; }
#summe { font-variant-numeric: tabular-nums; color: var(--gruen); }

/* Waehler */
.waehler { display: flex; flex-direction: column; min-height: 0; gap: 10px; }
.such-zeile { display: flex; gap: 8px; }
.suche { flex: 1 1 auto; padding: 15px 16px; font-size: 19px; border: 2px solid var(--gruen); border-radius: 12px; background: var(--feld); color: var(--tinte); }
.suche:focus { outline: none; box-shadow: 0 0 0 4px rgba(47,125,70,.18); }
.menge-anzeige { background: var(--gruen); color: #fff; padding: 6px 12px; border-radius: 8px; font-weight: 700; align-self: flex-start; }

/* Bestand-Leiste: eine schmale Zeile unter dem Suchfeld, nur fuer den zuletzt gewaehlten Artikel. */
.bestand-leiste { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 6px 12px; min-height: 36px;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--karte); font-size: 14px; }
.bestand-leiste .bl-name { flex: 1 1 140px; min-width: 0; color: var(--grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bestand-leiste .bl-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 99px; font-variant-numeric: tabular-nums;
  background: var(--gruen-soft); color: var(--gruen-tief); border: 1px solid var(--gruen-line); }
.bestand-leiste .bl-chip b { font-size: 12px; font-weight: 600; opacity: .85; }
.bestand-leiste .bl-chip.null { background: var(--sun-soft); color: var(--sun-tief); border-color: var(--sun-line); }
.bestand-leiste .bl-chip.minus { background: var(--ton-soft); color: var(--ton); border-color: transparent; }
.bestand-leiste .bl-hinweis { color: var(--grau); font-size: 13px; }

.treffer { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); }
.treffer li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--linie); }
.treffer li:last-child { border-bottom: 0; }
.treffer li.aktiv { background: var(--treffer-aktiv); }
.treffer .t-name { font-weight: 600; }
.treffer .t-detail { color: var(--grau); font-size: 13px; }
.treffer .t-preis { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; align-self: center; }
.treffer .leer { padding: 24px; text-align: center; color: var(--grau); cursor: default; grid-column: 1 / -1; }

/* Kacheln */
.kacheln { overflow-y: auto; flex: 1 1 auto; display: grid; gap: 14px; align-content: start; }
.block h3 { margin: 0 0 8px; font-size: 14px; color: var(--grau); text-transform: uppercase; letter-spacing: .04em; }
.kachel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.kachel {
  border: 1px solid var(--linie); border-radius: 12px; padding: 14px 12px; min-height: 74px;
  background: var(--karte); color: var(--tinte); cursor: pointer; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
}
.kachel:hover { border-color: var(--gruen); }
.kachel { overflow: hidden; }
.kachel .k-name { font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.kachel .k-preis { font-variant-numeric: tabular-nums; color: var(--grau); font-size: 13px; overflow-wrap: anywhere; }
/* Produktbild (DATA NatuRe, 300x300 Freisteller auf Weiss): eine ZUGABE, kein
   tragendes Element — nur ~17% der Artikel haben eines, die Kachel muss ohne
   Bild genauso gut aussehen. Fester weisser Grund, damit Freisteller auch im
   Dark Mode sauber wirken. */
.kachel .k-bild { width: 58px; height: 58px; object-fit: contain; border-radius: 8px; background: #fff; flex: 0 0 auto; align-self: flex-start; pointer-events: none; }
.kachel.gruppe { color: #fff; border: 0; }
.kachel.gruppe .k-preis { color: rgba(255,255,255,.85); }
.zurueck-kachel { border-style: dashed; align-items: center; justify-content: center; font-weight: 700; color: var(--gruen); }
.kachel-suchzeile { display: flex; }
.kachel-suche { flex: 1; width: 100%; padding: 12px 14px; font-size: 15px; border: 2px solid var(--gruen); border-radius: 12px; background: var(--karte); color: var(--tinte); }
.kachel-suche::placeholder { color: var(--grau); }
.kachel-leer { padding: 10px 4px; }
.kachel.aktion { border-color: var(--sun); }
.k-aktion { background: var(--sun); color: #3A2705; border-radius: 4px; padding: 0 4px; font-size: 10px; font-weight: 800; letter-spacing: .5px; }

/* Knoepfe */
/* Hauptknopf = SONNE (Brief: Sonne fuehrt die Hauptaktion, Gruen = ok/Bereich) */
.haupt-knopf { padding: 14px; font-size: 17px; font-weight: 700; background: linear-gradient(180deg, var(--sun), var(--sun-tief)); color: #3A2705; border: 0; border-radius: 12px; cursor: pointer; box-shadow: 0 6px 16px rgba(231,150,43,.3); transition: background .55s ease, box-shadow .2s ease; }
.haupt-knopf:hover:not(:disabled) { box-shadow: 0 8px 20px rgba(231,150,43,.42); }
.haupt-knopf:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.klein-knopf { padding: 8px 12px; font-size: 13.5px; background: var(--feld); color: var(--tinte); border: 1px solid var(--linie); border-radius: 9px; cursor: pointer; }
.klein-knopf.gefahr { color: var(--fehler); }
.badge { background: var(--gruen); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }
.fehler { color: var(--fehler); margin: 0; font-size: 14px; }
.hinweis { color: var(--grau); margin: 0; font-size: 13px; }

/* Dialoge */
.dialog-huelle { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; }
.dialog { background: var(--karte); border-radius: var(--radius); padding: 22px; width: min(420px, 94vw); display: grid; gap: 14px; margin: auto 0; }
.zahl-dialog { width: min(500px, 96vw); }
/* Bargeld-Waehler: farbige Scheine/Muenzen im Euro-Look, addieren sich auf */
.geld-picker { display: grid; gap: 10px; }
.geld-scheine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.geld-muenzen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; justify-items: center; }
.geld { border: none; background: none; padding: 0; cursor: pointer; line-height: 0; border-radius: 8px; min-width: 0; width: 100%; }
.geld:active { transform: translateY(1px); }
.geld svg { display: block; width: 100%; height: auto; }
.geld:not(.muenze) svg { border-radius: 7px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); }
.geld.muenze { max-width: 62px; }
.geld.muenze svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.geld-aktionen { display: flex; gap: 6px; flex-wrap: wrap; }
.zahl-rueckgeld.vorschau { background: transparent; color: var(--gruen); border: 2px dashed var(--gruen); }
.dialog h3 { margin: 0; }
.dialog label { display: grid; gap: 6px; font-size: 14px; color: var(--grau); }
.dialog input[type=text], .dialog input[type=number] { padding: 12px; font-size: 17px; border: 1px solid var(--linie); border-radius: 10px; background: var(--feld); color: var(--tinte); }
.dialog .schalter { display: flex; flex-direction: row; align-items: center; gap: 10px; color: var(--tinte); }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 10px; }

/* Rotes Aufblinken bei unbekanntem Barcode */
.blitz { position: fixed; inset: 0; background: var(--fehler); opacity: 0; pointer-events: none; z-index: 40; transition: opacity .12s; }
.blitz.an { opacity: .35; }

/* Beleg (Kassenbon-Optik) */
.beleg-dialog { width: min(360px, 94vw); }
.beleg { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #111; background: #fff; padding: 16px; border: 1px solid var(--linie); border-radius: 8px; max-height: 62vh; overflow: auto; }
.beleg h4 { margin: 0 0 2px; font-size: 15px; text-align: center; }
.beleg .b-firma { text-align: center; font-weight: 700; }
.beleg .b-zeile { display: flex; justify-content: space-between; gap: 8px; }
.beleg .b-trenn { border-top: 1px dashed #999; margin: 8px 0; }
.beleg .b-pos { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; }
.beleg .b-pos .b-sub { color: #555; font-size: 12px; }
.beleg .b-summe { font-weight: 800; font-size: 15px; }
.beleg .b-klein { color: #555; font-size: 11px; word-break: break-all; }
.beleg .b-qr { display: flex; justify-content: center; margin: 10px 0; }
.beleg .b-qr svg { width: 150px; height: 150px; }
.beleg .b-nachdruck { text-align: center; color: var(--fehler); font-weight: 700; }

/* Zahldialog */
.zahl-zeile { display: flex; justify-content: space-between; font-size: 15px; }
.zahl-zeile.gross { font-size: 24px; font-weight: 800; }
.zahl-zeile.gross span:last-child { color: var(--gruen); font-variant-numeric: tabular-nums; }
.zahl-rueckgeld { background: var(--gruen); color: #fff; padding: 10px 12px; border-radius: 10px; font-size: 18px; font-weight: 700; display: flex; justify-content: space-between; }
.zahl-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.zahl-liste li { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; font-variant-numeric: tabular-nums; }
.zahl-liste li button { border: 0; background: transparent; color: var(--fehler); cursor: pointer; font-size: 13px; }
.zahl-eingabe { display: flex; gap: 8px; flex-wrap: wrap; }
.zahl-eingabe input { flex: 1 1 150px; min-width: 140px; padding: 14px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid var(--linie); border-radius: 10px; background: var(--feld); color: var(--tinte); }
.zahl-eingabe .klein-knopf { flex: 1 1 auto; font-size: 16px; padding: 12px 14px; }
.zahl-schnell { display: flex; gap: 6px; flex-wrap: wrap; }
.zahl-trinkgeld { display: grid; gap: 5px; font-size: 13px; color: var(--grau); }
.zahl-trinkgeld input { padding: 10px; font-size: 15px; border: 1px solid var(--linie); border-radius: 10px; background: var(--feld); color: var(--tinte); }

.kassa-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Offline / Sync */
.pill.sync-offen { background: var(--warn); }
.pill.sync-ok { background: var(--ok); }
.ausfall-warnung { background: var(--fehler); color: #fff; padding: 10px 16px; font-size: 14px; font-weight: 600; text-align: center; flex: 0 0 auto; }
.trenner { border: 0; border-top: 1px solid var(--linie); margin: 6px 0; }

.journal-aktionen { display: flex; gap: 8px; }
.journal-liste { max-height: 46vh; overflow: auto; display: grid; gap: 6px; }
.journal-eintrag { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; }
.journal-eintrag .j-info { font-size: 13px; }
.journal-eintrag .j-info small { color: var(--grau); }

@media print {
  /* Rollendrucker: Seitenlaenge = Inhalt (sonst druckt der Treiber sein Maximum) */
  @page { size: 72mm auto; margin: 0; }
  html, body { height: auto !important; }
  /* Alles ausser dem Beleg auch aus dem LAYOUT nehmen — visibility allein
     liess die Bildschirm-Hoehen als Leerseiten mitdrucken (Endlos-Rolle). */
  body > *:not(#beleg-huelle) { display: none !important; }
  body * { visibility: hidden !important; }
  #beleg-huelle, #beleg-huelle * { visibility: visible !important; }
  /* Ausdruck IMMER hell/schwarz -- unabhaengig vom Bildschirm-Theme (Dark Mode) */
  #beleg-huelle { --tinte:#111; --ink:#111; --creme:#fff; --karte:#fff; --linie:#ccc; --grau:#555; color:#111 !important; }
  #beleg-huelle, #beleg-huelle * { color:#111 !important; }
  /* Kleiner Innenrand: der Epson beginnt sonst ausserhalb des bedruckbaren
     Bereichs (erste Buchstaben fehlten links), und unten Platz vor der
     Abrisskante (Befund Gmunden 30.08.). */
  #beleg-huelle { position: static; background: #fff; display: block; padding: 0 2mm 10mm 4mm; }
  #beleg-huelle .dialog { box-shadow: none; width: auto; padding: 0; }
  #beleg-huelle .dialog-knoepfe { display: none !important; }
  .beleg { border: 0; max-height: none; }
}

/* ==== SUNNTECH DESIGN SYSTEM -- Bausteine ==== */
html, body { transition: background .55s ease, color .35s ease, border-color .55s ease; }
/* Symbol-Feld (handgezeichnet, gruenes Feld) */
.icon { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--chip-bg); color:var(--chip-stroke); transition:background .55s ease, color .55s ease; }
.icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.95; stroke-linecap:round; stroke-linejoin:round; filter:url(#rough); }
/* Hell/Dunkel-Schalter */
.ds-theme { display:inline-flex; border:1px solid rgba(255,255,255,.28); border-radius:999px; overflow:hidden; background:rgba(255,255,255,.16); }
.ds-theme button { border:none; background:none; cursor:pointer; padding:5px 9px; color:#fff; display:grid; place-items:center; }
.ds-theme button[aria-pressed="true"] { background:var(--sun); color:#3A2705; }
/* Variante fuer schlichte (weisse/helle) Kopfzeilen ohne farbigen Balken --
   die Modul-Apps (Kisterl, Studios, Gemueseplaner, ...) haben keinen
   gruenen Kassa-Balken, da waeren weisse Icons unsichtbar. */
.ds-theme.plain { border-color:var(--line); background:var(--surface-2); }
.ds-theme.plain button { color:var(--ink-2); }
.ds-theme.plain button[aria-pressed="true"] { color:var(--badge-sun-ink); }
/* Hero / Gruss (Sonnenaufgang) */
.ds-hero { position:relative; overflow:hidden; border:1px solid var(--hero-line); border-radius:18px; padding:14px 16px; padding-right:52px; background:radial-gradient(120% 120% at 88% -10%, rgba(245,178,62,.5), transparent 60%), linear-gradient(160deg,var(--hero-a),var(--hero-b)); box-shadow:var(--card-shadow); }
.ds-hero::after { content:""; position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #FBD68A, var(--sun) 58%, var(--sun-tief)); box-shadow:0 0 26px rgba(245,178,62,.7); }
.ds-hero h2 { color:var(--hero-ink); }
.ds-hero .sub { color:var(--hero-sub); }
/* Badges (Sonne=aktiv, Gruen=ok, Ton=wichtig[selten]) */
.ds-badge { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; border-radius:999px; padding:3px 9px; }
.ds-badge.sun { background:var(--badge-sun); color:var(--badge-sun-ink); }
.ds-badge.gruen { background:var(--badge-gruen); color:var(--badge-ink); }
.ds-badge.ton { background:var(--badge-ton); color:var(--badge-ink); }
/* Marke = Platzhalter fuer kuenftiges Sunntech-Logo (spaeter hier EINMAL tauschen) */
.brand-mark { width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #FBD68A, var(--sun) 58%, var(--sun-tief)); box-shadow:0 0 12px rgba(224,145,42,.45); }

/* Rückgabe-Modus: deutliche Kennzeichnung */
body.retoure-modus .bon { outline: 3px solid var(--fehler); outline-offset: -3px; }
body.retoure-modus .bon-kopf h2::after { content: " · RÜCKGABE"; color: var(--fehler); font-size: 13px; }
body.retoure-modus #summe { color: var(--fehler); }

/* Block 10: Lagerbuchung an der Kassa */
.lb-arten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.lb-art { padding: 14px 10px; border-radius: 12px; border: 1px solid var(--linie); background: var(--feld); color: var(--tinte); font-weight: 700; font-size: 14px; cursor: pointer; }
.lb-art.aktiv { background: var(--sun); color: #3A2705; border-color: var(--sun); }
.lb-liste { list-style: none; margin: 8px 0; padding: 0; font-size: 14px; display: grid; gap: 4px; }
.lb-liste li { display: flex; gap: 8px; align-items: center; }
/* Eigener Kopf-/Fusstext des Betriebs auf dem Bon */
.b-hinweis { font-size: 12px; text-align: center; margin: 6px 0; line-height: 1.35; white-space: pre-wrap; }