:root {
  color-scheme: light;
  --ci-primaer: #b01116;
  --ci-primaer-dunkel: #8c0d11;
  --ci-hintergrund: #f5f4f2;
  --ci-flaeche: #ffffff;
  --ci-flaeche-alt: #faf9f7;      /* Tabellen-Header */
  --ci-text: #222222;
  --ci-text-schwach: #777777;
  --ci-rand: #dddddd;
  --ci-ok: #2e7d32;
  --ci-warnung: #e65100;
  --ci-auswahl: #fdeeee;          /* ausgewaehlte Tabellenzeile */
  --ci-auf-primaer: #ffffff;      /* Text auf CI-Rot (Header, .btn.primaer) */
  --ci-auf-primaer-rand: rgba(255,255,255,.5);
  --ci-logo-akzent: #ffd9a0;
  --ci-status-hintergrund: #222222; /* Status-Toast: invertiert zum Schema */
  --ci-status-text: #ffffff;
  --ci-schatten: rgba(0,0,0,.15);       /* Sticky-Leiste */
  --ci-schatten-stark: rgba(0,0,0,.2);  /* Install-Hinweis */
  /* Kamera-Overlays bleiben in BEIDEN Schemata dunkel (Sucher-Optik) —
     deshalb hier definiert, aber im Dark-Block bewusst NICHT uebersteuert. */
  --ci-overlay-leiste: #222222;
  --ci-overlay-text: #ffffff;
  --ci-overlay-text-schwach: #bbbbbb;
}

/* Dark Mode nach Systemeinstellung: nur die Variablen kippen, die Regeln
   bleiben identisch. CI-Rot bleibt als Header-/Primaerfarbe (etwas heller
   fuer Kontrast auf dunklem Grund); theme-color-Meta bleibt statisch. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ci-primaer: #d2353a;
    --ci-primaer-dunkel: #a8262b;
    --ci-hintergrund: #1a1a1c;
    --ci-flaeche: #242427;
    --ci-flaeche-alt: #2c2c30;
    --ci-text: #e8e6e3;
    --ci-text-schwach: #a5a29e;
    --ci-rand: #3a3a3e;
    --ci-ok: #5dbb63;
    --ci-warnung: #ff9838;
    --ci-auswahl: #46282a;            /* dunkelrot getoent */
    --ci-status-hintergrund: #e8e6e3; /* hell auf dunklem Grund */
    --ci-status-text: #1a1a1c;
    --ci-schatten: rgba(0,0,0,.55);
    --ci-schatten-stark: rgba(0,0,0,.6);
  }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--ci-hintergrund); color: var(--ci-text); }
header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; background: var(--ci-primaer); color: var(--ci-auf-primaer); padding: .6rem 1rem; }
header .logo { font-size: 1.2rem; font-weight: 700; }
header .logo span { color: var(--ci-logo-akzent); }
header nav { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1; min-width: 0; }
@media (max-width: 700px) {
  header button { padding: .35rem .6rem; font-size: .92rem; }
}
header button { background: transparent; border: 1px solid var(--ci-auf-primaer-rand); color: var(--ci-auf-primaer); padding: .4rem .9rem; border-radius: 6px; cursor: pointer; font-size: 1rem; }
header button.aktiv, header button:hover { background: var(--ci-primaer-dunkel); }
main { max-width: 900px; margin: 1rem auto; padding: 0 .8rem; }
.btn { display: inline-block; border: 1px solid var(--ci-rand); background: var(--ci-flaeche); padding: .55rem 1rem; border-radius: 6px; cursor: pointer; font-size: 1rem; }
.btn.primaer { background: var(--ci-primaer); border-color: var(--ci-primaer); color: var(--ci-auf-primaer); }
.tabelle { width: 100%; border-collapse: collapse; background: var(--ci-flaeche); }
.tabelle th, .tabelle td { border-bottom: 1px solid var(--ci-rand); padding: .5rem .6rem; text-align: left; }
.tabelle th { background: var(--ci-flaeche-alt); cursor: pointer; user-select: none; }
.tabelle tbody tr { cursor: pointer; }
.tabelle tbody tr.ausgewaehlt { background: var(--ci-auswahl); }
.tabelle td input { width: 100%; font-size: inherit; padding: .2rem; }
.karte { background: var(--ci-flaeche); border: 1px solid var(--ci-rand); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.warnung { color: var(--ci-warnung); font-weight: 600; }
.ok { color: var(--ci-ok); }
.aktionen { display: flex; gap: .6rem; margin: .8rem 0; flex-wrap: wrap; }
.balken { background: var(--ci-primaer); height: 1.1rem; border-radius: 3px; min-width: 2px; }
.balken-zeile { display: grid; grid-template-columns: 10rem 1fr 5rem; gap: .5rem; align-items: center; margin: .3rem 0; }
/* z-index 45: ueber Sticky-Knopfleiste (10) und Install-Banner (40), unter den
   Kamera-Overlays (50) -- sonst verdeckt die Sticky-Leiste den Toast auf Mobil. */
#status-meldung { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--ci-status-hintergrund); color: var(--ci-status-text); padding: .5rem 1rem; border-radius: 6px; display: none; z-index: 45; }
@media (max-width: 600px) { .balken-zeile { grid-template-columns: 7rem 1fr 4rem; } }
/* Kamera-Overlays: #000 bleibt in beiden Schemata fix (Sucher). */
#langbon-overlay, #foto-overlay, #barcode-overlay { position: fixed; inset: 0; background: #000;
  z-index: 50; display: flex; flex-direction: column; }
#langbon-overlay[hidden], #foto-overlay[hidden], #barcode-overlay[hidden] { display: none; }
#langbon-video, #foto-video, #barcode-video { flex: 1; object-fit: contain; min-height: 0; }
.langbon-leiste { display: flex; gap: .5rem; align-items: center;
  padding: .7rem; background: var(--ci-overlay-leiste); flex-wrap: wrap; }
.langbon-leiste span { color: var(--ci-overlay-text); margin-right: auto; }
.langbon-hinweis { color: var(--ci-overlay-text-schwach); text-align: center; margin: 0 0 .6rem;
  padding: 0 1rem; font-size: .9rem; }
.hinweis { color: var(--ci-text-schwach); }
.durchgestrichen { text-decoration: line-through; color: var(--ci-text-schwach); }
#dash-preise ul { margin: .2rem 0 .8rem; padding-left: 1.2rem; }
/* Nutri-Score-Badges: semantische Ampelfarben — bleiben in beiden Schemata
   fix (A–E muessen ueberall identisch codiert sein), weisser Text inklusive. */
.nutri-badge { display: inline-block; min-width: 1.5rem; padding: .1rem .4rem; border-radius: 4px;
  color: #fff; font-weight: 700; text-align: center; }
.nutri-a { background: #2e7d32; }
.nutri-b { background: #7cb342; }
.nutri-c { background: #f9a825; }
.nutri-d { background: #ef6c00; }
.nutri-e { background: #c62828; }

/* Knopf-Leisten am Handy zweizeilig statt zerrissen umbrechend. Bewusst als
   eigener, spaeter im Cascade stehender Block (statt im @media oben bei den
   header-button-Regeln): .aktionen/header-nav-Basisregeln stehen erst weiter
   unten im File, gleiche Spezifitaet -> Quellreihenfolge muss hier gewinnen. */
@media (max-width: 700px) {
  /* Logo+Abmelden bilden die erste Zeile, die Nav-Knöpfe ziehen komplett in
     eine eigene volle Zeile darunter (sonst quetscht sie das flex:1;min-width:0
     der Basisregel auf einen schmalen Reststreifen zusammen -- ein Knopf pro
     Zeile statt der gewuenschten 2-3 Spalten). */
  header .logo { order: 1; }
  #logout { order: 2; }
  header nav { order: 3; flex: 1 1 100%; }
  header nav button { flex: 1 1 30%; }
  /* Nur reine Knopf-Toolbars (Klasse .knopfleiste) bekommen das Grid -- eine
     .aktionen-Zeile mit Label+Input-Paaren (Kette/Datum/Summe, Dashboard-EAN,
     Einstellungen-PLZ) bleibt bei ihrem normalen Umbruch, sonst verzerrt das
     Grid diese Zeilen (Review-Fund). */
  .aktionen.knopfleiste { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .aktionen.knopfleiste > * { width: 100%; text-align: center; }
  .aktionen.knopfleiste #ekl-name, .aktionen.knopfleiste #barcode-ean { grid-column: 1 / -1; }
  /* Touch-Ziele: Zellen grosszuegiger, Knoepfe mindestens 44px hoch. */
  .tabelle td { padding: .7rem .6rem; }
  .btn, header button { min-height: 44px; }
  /* Sticky-Aktionsleiste unten (nur die Haupt-Knopfleisten der Belege- und
     Einkaufslisten-Ansicht): die Sections werden Flex-Spalten und die Leiste
     wandert per order ans Ende — erst dadurch kann sticky bottom greifen,
     denn ein Element am Anfang der Section erreicht den unteren Rand nie.
     Sie scrollt mit und klebt am unteren Rand, sobald sie ihn erreicht. */
  #view-belege, #view-einkaufsliste { display: flex; flex-direction: column; }
  /* display:flex schlaegt sonst das UA-[hidden]=display:none — ausgeblendete
     Sections muessen ausgeblendet bleiben (gleiches Muster wie die Overlays). */
  #view-belege[hidden], #view-einkaufsliste[hidden] { display: none; }
  #view-belege > .aktionen.knopfleiste,
  #view-einkaufsliste > .aktionen.knopfleiste {
    order: 99;
    position: sticky; bottom: .5rem; z-index: 10;
    background: var(--ci-hintergrund); padding: .4rem; border-radius: 8px;
    box-shadow: 0 -2px 8px var(--ci-schatten);
  }
}

/* Install-Hinweis (PWA): kleiner Banner unten, bis er angenommen oder
   weggeklickt wird (localStorage-Dismiss). */
#install-hinweis { position: fixed; bottom: 4rem; left: 50%;
  transform: translateX(-50%); display: flex; gap: .6rem; align-items: center;
  background: var(--ci-flaeche); border: 1px solid var(--ci-rand);
  border-radius: 8px; padding: .5rem .8rem; z-index: 40;
  box-shadow: 0 2px 8px var(--ci-schatten-stark); max-width: calc(100vw - 1.6rem); }
#install-hinweis[hidden] { display: none; }