:root {
  --tinte: #1c1c1e; --grau: #6b6b70; --linie: #e3e3e6; --grund: #f6f6f8; --weiss: #fff;
  --akzent: #1f5fbf; --gruen: #1f8a4c; --gelb: #d99a00; --rot: #c8362b;
}
* { box-sizing: border-box; }
/* Ausblenden per hidden-Attribut muss JEDE Anzeigeregel schlagen (Fehler 08.09.: .login{display:grid} hielt die Anmeldemaske sichtbar) */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--grund); color: var(--tinte);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
h1, h2, h3 { margin: 0 0 .6em; font-weight: 600; }
h2 { font-size: 1.35rem; margin-top: .2em; }
h3 { font-size: 1.05rem; margin-top: 1.6em; }
.muted { color: var(--grau); }
.fehler { color: var(--rot); }
button { font: inherit; cursor: pointer; border: 1px solid var(--linie); background: var(--weiss);
  color: var(--tinte); border-radius: 8px; padding: .45em .9em; }
button.primary { background: var(--akzent); color: #fff; border-color: var(--akzent); }
button.leise { border-color: transparent; background: transparent; color: var(--grau); }
button:disabled { opacity: .5; cursor: default; }
input, select { font: inherit; padding: .45em .6em; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--weiss); width: 100%; }
label { display: block; font-size: .9rem; color: var(--grau); margin-bottom: .8em; }
label input, label select { margin-top: .25em; display: block; }

/* Anmeldung */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-box { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px;
  padding: 2rem; width: min(360px, 100%); }
.login-box h1 { font-size: 1.3rem; margin-bottom: .2em; }
.login-box button { width: 100%; margin-top: .4em; }

/* Kopf */
.kopf { display: flex; align-items: center; gap: 1.5rem; padding: .7rem 1.2rem; background: var(--weiss);
  border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
.marke { font-weight: 700; }
.reiter { display: flex; gap: .3rem; flex: 1; }
.reiter button { border-color: transparent; background: transparent; }
.reiter button.aktiv { background: var(--grund); border-color: var(--linie); font-weight: 600; }
.reiter button[hidden] { display: none; }
.wer { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.pille { font-size: .75rem; padding: .1em .55em; border-radius: 999px; background: var(--grund);
  border: 1px solid var(--linie); text-transform: uppercase; letter-spacing: .03em; }

main { max-width: 1200px; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; }
.fuss { max-width: 1200px; margin: 0 auto; padding: 0 1.2rem 2rem; font-size: .8rem; }

/* Tabellen */
.tabelle-wrap { overflow-x: auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .55em .8em; border-bottom: 1px solid var(--linie); white-space: nowrap; vertical-align: top; }
th { font-weight: 600; color: var(--grau); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: 0; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tr.klick { cursor: pointer; } tr.klick:hover td { background: var(--grund); }
.leer { padding: 1rem; color: var(--grau); }

/* Status-Pillen */
.status { display: inline-block; padding: .1em .55em; border-radius: 999px; font-size: .8rem; border: 1px solid var(--linie); }
.status.grenzfall { background: #fff4d6; border-color: #f2d48a; }
.status.in_pruefung { background: #e6efff; border-color: #b9cff5; }
.status.abgelehnt { background: #fde5e2; border-color: #f2b1aa; }
.status.freigegeben, .status.im_lostopf, .status.auto_ok, .status.ausgezahlt, .status.gewonnen { background: #e3f5ea; border-color: #a9dfc0; }
.status.eingegangen, .status.quarantaene { background: var(--grund); }

/* Ampel */
.ampel { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: .9rem 1rem; }
.kachel .titel { font-size: .8rem; color: var(--grau); text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: .5em; }
.kachel .wert { font-size: 1.15rem; font-weight: 600; margin-top: .3em; }
.kachel .hinweis { font-size: .82rem; color: var(--grau); margin-top: .2em; }
.punkt { width: .7em; height: .7em; border-radius: 50%; display: inline-block; background: var(--grau); }
.punkt.gruen { background: var(--gruen); } .punkt.gelb { background: var(--gelb); } .punkt.rot { background: var(--rot); }
.kachel button { margin-top: .6em; font-size: .85rem; }

.filter { display: flex; gap: 1rem; margin-bottom: .8rem; flex-wrap: wrap; }
.filter label { margin: 0; min-width: 220px; }

/* Prüfung: ein Fall pro Bildschirm */
.klein { font-size: .82rem; }
.gross { font-size: 1.05rem; }
button.gross { padding: .6em 1.2em; font-weight: 600; }
button.warnung { background: var(--rot); border-color: var(--rot); color: #fff; }
kbd { font: inherit; font-size: .8em; border: 1px solid rgba(255,255,255,.45); border-radius: 4px;
  padding: 0 .35em; margin-left: .4em; opacity: .85; }
button:not(.primary):not(.warnung) kbd { border-color: var(--linie); }

.fall-leer { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px;
  padding: 2rem; text-align: center; }
.fall-leer .gross { font-weight: 600; margin: 0 0 .3em; }
.fall-leer button { margin-top: .8em; }

.fall { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 1.1rem 1.2rem; }
.fall-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  flex-wrap: wrap; border-bottom: 1px solid var(--linie); padding-bottom: .9rem; }
.fall-kopf h3 { margin: .15em 0; font-size: 1.2rem; }
.fall-kampagne, .fall-meta { font-size: .85rem; }
.fall-kopf-rechts { text-align: right; font-size: .85rem; }
.fall-kopf-rechts > div + div { margin-top: .35em; }

.fall-aktion { display: flex; gap: 1.2rem; align-items: flex-end; flex-wrap: wrap; padding: .9rem 0; }
.fall-knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; }
.fall-notiz { margin: 0; flex: 1; min-width: 240px; }

.ablehn { background: #fdf4f3; border: 1px solid #f2b1aa; border-radius: 10px; padding: .9rem 1rem; margin-bottom: .9rem; }
.ablehn-gruende { display: flex; gap: .5rem; flex-wrap: wrap; margin: .7em 0; }
.ablehn-gruende button { background: var(--weiss); }
.ablehn-gruende button b { font-weight: 600; margin-right: .35em; color: var(--grau); }

.fall-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; }
@media (max-width: 900px) { .fall-raster { grid-template-columns: minmax(0, 1fr); } }
.fall-raster h4 { font-size: .8rem; color: var(--grau); text-transform: uppercase;
  letter-spacing: .03em; margin: 1.4em 0 .5em; }
.fall-raster > div > h4:first-child { margin-top: .6em; }
.fall-raster table td:first-child { color: var(--grau); width: 11em; }
.fall-raster table td { white-space: normal; }

.gruende { list-style: none; margin: 0; padding: 0; }
.gruende li { border-left: 3px solid var(--gelb); background: #fffaf0; border-radius: 0 8px 8px 0;
  padding: .5em .7em; margin-bottom: .4em; }
.gruende li .quelle { display: block; font-size: .75rem; color: var(--grau);
  text-transform: uppercase; letter-spacing: .03em; }

ul.pos { margin: 0; padding-left: 1.1em; }
.bon-bild { width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 10px;
  background: var(--grund); display: block; }
.roh { margin-top: 1.6em; font-size: .85rem; }
.roh summary { cursor: pointer; color: var(--grau); }
.roh pre { background: var(--grund); border: 1px solid var(--linie); border-radius: 8px;
  padding: .7rem; overflow: auto; max-height: 320px; font-size: .78rem; }

/* Kampagnen-Steckbrief */
.kampagnen-leiste { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; flex-wrap: wrap; }
.steckbrief { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px;
  padding: 1.1rem 1.2rem; margin-top: 1.6rem; }
.steckbrief-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  flex-wrap: wrap; border-bottom: 1px solid var(--linie); padding-bottom: .8rem; margin-bottom: 1rem; }
.steckbrief-kopf h3 { margin: 0; }
textarea { font: inherit; padding: .45em .6em; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--weiss); width: 100%; margin-top: .25em; display: block; resize: vertical; }

/* Zwei Spalten: bei drei blieben fuer Name und Produktnamen nur ~130 Pixel uebrig. */
.feld-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1.2rem; }
@media (max-width: 700px) { .feld-raster { grid-template-columns: minmax(0, 1fr); } }
.feld-raster fieldset { border: 1px solid var(--linie); border-radius: 10px; padding: .9rem 1rem 1rem;
  margin: 0; min-width: 0; }
.feld-raster fieldset.breit { grid-column: 1 / -1; }
.feld-raster legend { font-size: .78rem; color: var(--grau); text-transform: uppercase;
  letter-spacing: .04em; padding: 0 .4em; font-weight: 600; }
.feld-raster label { margin-bottom: 1em; }
.feld-raster label:last-child { margin-bottom: 0; }
.hinweis-feld { display: block; font-size: .78rem; color: var(--grau); margin-top: .3em; line-height: 1.35; }
.hinweis-feld.warnung { color: var(--gelb); font-weight: 600; }
.feld-titel { display: block; font-size: .9rem; color: var(--grau); margin-bottom: .5em; }
label.kasten-wahl { display: flex; align-items: center; gap: .5em; color: var(--tinte); font-size: .95rem; }
label.kasten-wahl input { width: auto; margin: 0; }

.abgeleitet { border-top: 1px dashed var(--linie); padding-top: .7em; margin-top: .3em; }
.schalter-vorschau { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5em; }
.schalter-vorschau span { font-size: .78rem; padding: .15em .6em; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--grund); }
.schalter-vorschau span.an { background: #e3f5ea; border-color: #a9dfc0; }

/* Produktname bekommt eine eigene Zeile — in einer Rasterspalte blieben sonst
   knapp 130 Pixel uebrig, zu wenig fuer "Testprodukt A 250g". */
.staffel-zeile { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center;
  border-left: 3px solid var(--linie); padding-left: .6rem; margin-bottom: .7em; }
.staffel-zeile input.produkt { flex: 1 1 100%; }
.staffel-zeile input.cent { flex: 0 1 110px; }
.staffel-zeile button { flex: none; margin-left: auto; }
.staffel-zeile .einheit { flex: none; color: var(--grau); font-size: .9rem; }

.kasten { border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; font-size: .92rem; }
.fehler-kasten { background: #fdf4f3; border: 1px solid #f2b1aa; color: var(--rot); }
.fehler-kasten ul { margin: .4em 0 0; padding-left: 1.2em; }
.fehler-kasten strong { color: var(--rot); }

.steckbrief-fuss { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  border-top: 1px solid var(--linie); margin-top: 1.2rem; padding-top: 1rem; }
fieldset[disabled] { opacity: .6; }

.meldung { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--tinte); color: #fff;
  padding: .6em 1em; border-radius: 10px; font-size: .9rem; max-width: 90vw; z-index: 5; }
.meldung.fehler { background: var(--rot); }