/* Filament-Lager: Werkzeug-Look nach Nicoles Datenanwendungs-Baukasten.
   Kanten statt Rundungen, Seite weiss, Flaechen hellgrau, 4 px Sonnenblume oben,
   Systemschrift, Rot nur fuer Fehler und die rote Ampel. */

* { box-sizing: border-box; border-radius: 0; }

:root {
  --sonnenblume: #FFC500;
  --anthrazit: #232B2F;
  --mandarine: #FF7A00;
  --rot: #E02020;
  --gruen: #2E9E4F;
  --gelb: #F5C400;
  --grau: #9AA3A8;
  --hellgrau: #f1f2f3;
  --linie: #d9dcdf;
  --text: #232B2F;
  --text-dezent: #5f6a70;
  --schatten: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  --schatten-hoch: 0 4px 12px rgba(0,0,0,.14);
  --nav-hoehe: 64px;
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.45; color: var(--text); background: #fff;
  padding-bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom));
}
a { color: var(--mandarine); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.4rem; margin: 12px 0 8px; }
h2 { font-size: 1.1rem; margin: 8px 0; }
h2.gruppe { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: var(--text-dezent); margin: 20px 0 6px; display: flex; justify-content: space-between; align-items: baseline; }
/* Namen und Inhalte nie in Versalien: Filament-Ueberschriften bleiben normal. */
h2.filament-titel { font-size: 1rem; margin: 18px 0 4px; display: flex; align-items: center; gap: 8px; }
small, .klein { font-size: .85rem; }
.dezent { color: var(--text-dezent); }
.rot-text { color: var(--rot); font-weight: 700; }
.gelb-text { color: #a07d00; font-weight: 700; }

.kopf {
  background: var(--anthrazit); color: #fff; height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; padding-top: env(safe-area-inset-top); border-top: 4px solid var(--sonnenblume);
  position: sticky; top: 0; z-index: 5;
}
.kopf .marke { color: #fff; font-weight: 700; letter-spacing: .04em; }
.inhalt { max-width: 720px; margin: 0 auto; padding: 8px 16px 24px; }

.flaeche { background: var(--hellgrau); border-top: 4px solid var(--sonnenblume); box-shadow: var(--schatten); padding: 14px 16px; margin: 12px 0; }
.flaeche:hover { box-shadow: var(--schatten-hoch); }
.meldung { padding: 10px 14px; margin: 8px 0; border-left: 4px solid; font-weight: 600; }
.meldung.ok { background: #eef8f0; border-color: var(--gruen); }
.meldung.fehler { background: #fdecec; border-color: var(--rot); color: #8a1010; }
.leer-hinweis { color: var(--text-dezent); padding: 24px 8px; text-align: center; }

/* Listen */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { border-bottom: 1px solid var(--linie); }
.liste.menue > li { background: var(--hellgrau); margin-bottom: 6px; border: 0; }
.zeile { display: flex; align-items: center; gap: 12px; padding: 12px 4px; color: inherit; min-height: 56px; }
a.zeile:hover { text-decoration: none; background: var(--hellgrau); }
.liste.kompakt .zeile { min-height: 44px; padding: 8px 4px; }
.zeile-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.zeile-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile-text small { color: var(--text-dezent); }
.zeile.storniert { opacity: .55; }
.zeile.storniert strong { text-decoration: line-through; }
.zeile.storno strong { color: var(--text-dezent); }
.bestand { text-align: center; min-width: 52px; display: flex; flex-direction: column; line-height: 1.1; }
.bestand b { font-size: 1.6rem; }
.bestand small { color: var(--text-dezent); font-size: .7rem; }
.bestand.leer b { color: var(--rot); }
.verweis { white-space: nowrap; }
.mini { width: 44px; height: 44px; object-fit: cover; display: block; border: 1px solid var(--linie); }

.ampel { width: 14px; height: 14px; display: inline-block; flex-shrink: 0; }
.ampel.gross { width: 22px; height: 22px; }
.ampel-rot { background: var(--rot); }
.ampel-gelb { background: var(--gelb); }
.ampel-gruen { background: var(--gruen); }
.ampel-grau { background: var(--grau); }
.farbpunkt { width: 18px; height: 18px; display: inline-block; flex-shrink: 0; border: 1px solid rgba(0,0,0,.25); vertical-align: middle; }
.farbpunkt.gross { width: 34px; height: 34px; }
.tropfen { font-size: .95em; }
.tropfen-gelb { filter: hue-rotate(160deg) saturate(2); }
.tropfen-rot { filter: hue-rotate(140deg) saturate(3) brightness(.9); }

/* Werkzeugleiste, Chips */
.werkzeugleiste input[type=search] { width: 100%; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 4px; }
.chip { padding: 6px 12px; background: var(--hellgrau); color: var(--text); font-size: .9rem; border: 1px solid var(--linie); }
.chip.klein { font-size: .8rem; padding: 4px 8px; }
.chip.aktiv { background: var(--anthrazit); color: #fff; border-color: var(--anthrazit); }
.chip-abstand { flex: 1; }

/* Formulare */
label { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-size: .9rem; color: var(--text-dezent); }
label > input, label > select, label > textarea, label > span > input, label > span > select { font-size: 16px; color: var(--text); }
input, select, textarea, button { font: inherit; }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), select, textarea {
  padding: 10px 12px; border: 1px solid var(--linie); background: #fff; width: 100%; min-height: 44px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sonnenblume); outline-offset: 0; border-color: var(--anthrazit); }
input[type=color] { width: 44px; height: 44px; padding: 0; border: 1px solid var(--linie); background: #fff; }
.farbwahl, .mit-knopf { display: flex; gap: 6px; align-items: center; }
.farbwahl input[name=farbe_hex], .mit-knopf input { flex: 1; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 420px) { .zweispaltig { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--linie); padding: 8px 12px; margin: 10px 0; }
legend { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dezent); padding: 0 4px; }
.kontrollkaestchen, .option { flex-direction: row; align-items: center; gap: 10px; color: var(--text); font-size: 1rem; }
.option { padding: 8px 4px; border-bottom: 1px solid var(--linie); margin: 0; }
.option:last-of-type { border-bottom: 0; }
.option span { display: flex; flex-direction: column; }
.option small { color: var(--text-dezent); }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--anthrazit); }
.formular small { color: var(--text-dezent); font-size: .8rem; }
.kompakt-formular { padding: 10px 12px; }
.kompakt-formular label { margin: 4px 0; }
.inline-formular { display: flex; gap: 8px; align-items: center; width: 100%; }
.inline-formular strong { flex: 1; }
.inline-formular input { width: 90px !important; }
.notiz { white-space: pre-wrap; background: #fff; padding: 8px 10px; border-left: 3px solid var(--sonnenblume); }

.foto-feld { display: flex; flex-direction: column; gap: 6px; }
.foto-feld input[type=file] { font-size: .9rem; }
.foto-feld img { max-width: 100%; max-height: 220px; object-fit: contain; border: 1px solid var(--linie); background: #fff; }
.muster, .belegfoto { max-width: 100%; max-height: 260px; display: block; margin: 8px 0; border: 1px solid var(--linie); }

/* Knoepfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px;
  background: #fff; color: var(--text); border: 1px solid var(--anthrazit); font-weight: 600; cursor: pointer; text-decoration: none;
}
.knopf:hover { background: var(--hellgrau); text-decoration: none; }
.knopf.primaer { background: var(--anthrazit); color: #fff; border-color: var(--anthrazit); }
.knopf.primaer:hover { background: #000; }
.knopf.klein { min-height: 36px; padding: 4px 12px; font-size: .9rem; }
.knopf.breit { width: 100%; }
.knopf.dezent-knopf { border-color: var(--linie); color: var(--text-dezent); }
.knopf:disabled { opacity: .5; cursor: wait; }
.aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.aktionen form { display: contents; }

/* Detailkarten */
.kopfkarte h1, .kopfkarte h2 { margin: 0; }
.kopfkarte-zeile, .karte-kopf { display: flex; gap: 12px; align-items: center; }
.kopfkarte-zeile p { margin: 2px 0 0; }
.kennzahlen { display: flex; gap: 8px; margin: 12px 0 4px; }
.kennzahlen > div { flex: 1; background: #fff; padding: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kennzahlen b { font-size: 1.7rem; line-height: 1; }
.kennzahlen small { color: var(--text-dezent); font-size: .75rem; }

.karte { margin: 14px 0; }
.karte-gelb { border-top-color: var(--gelb); }
.karte-rot { border-top-color: var(--rot); }
.karte h2 { font-size: 1.15rem; }
.karte-kopf small { color: var(--text-dezent); }
.fakten { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 10px 0; }
.fakten div { background: #fff; padding: 6px 10px; }
.fakten dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dezent); }
.fakten dd { margin: 0; font-weight: 600; }
.notiz-formular { display: flex; gap: 6px; margin: 8px 0; }
.notiz-formular input { flex: 1; }
.karte-aktionen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.umlagern-inline select { min-width: 160px; min-height: 44px; }

.anmeldung { max-width: 380px; margin: 40px auto; }

/* Einkauf */
.position { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.position .zeile-text { flex: 1; }
.position input[type=number] { width: 64px !important; min-height: 40px; padding: 6px; text-align: center; }
.position select { width: auto; min-height: 40px; padding: 6px 8px; max-width: 130px; }
.position .preis { width: 84px !important; min-height: 40px; padding: 6px; }
.position .entfernen { border: 0; background: none; color: var(--rot); font-size: 1.4rem; padding: 4px 8px; cursor: pointer; }
.wahlknoepfe { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 8px 0; }
@media (max-width: 360px) { .wahlknoepfe { grid-template-columns: 1fr; } }
.summe { display: flex; justify-content: space-between; padding: 8px 0; font-weight: 600; }

/* Scanner und Auswahl-Dialog */
dialog { border: 0; border-top: 4px solid var(--sonnenblume); padding: 0; width: min(96vw, 520px); max-height: 90vh; box-shadow: var(--schatten-hoch); }
dialog::backdrop { background: rgba(0,0,0,.6); }
.dialog-inhalt { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; max-height: 85vh; }
.scanner video { width: 100%; max-height: 60vh; background: #000; object-fit: cover; }
.scanner-status { min-height: 1.4em; color: var(--text-dezent); }
.wahl-liste { overflow: auto; max-height: 55vh; }

/* Navigation unten */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-hoehe) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); background: var(--anthrazit); display: flex; z-index: 5;
  border-top: 1px solid #3a4448;
}
.nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #b8c0c4; font-size: .7rem; text-decoration: none; }
.nav a svg { width: 24px; height: 24px; }
.nav a.aktiv { color: var(--sonnenblume); }
@media (min-width: 720px) { .nav { max-width: 720px; margin: 0 auto; } }