:root {
  --petrol: #152B2A;
  --gruen: #344E41;
  --tief: #0B1716;
  --offwhite: #EDE6DA;
  --hell: #FCF7F2;
  --orange: #FF661F;
  --rot: #B3261E;
  --ok: #2E7D4F;
  --rand: #d9d1c4;
  --text: #0B1716;
  --leise: #5f6b68;
  --flaeche: #ffffff;
  --hintergrund: var(--hell);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #EDE6DA;
    --leise: #a9b3ad;
    --flaeche: #1c3533;
    --hintergrund: #0B1716;
    --rand: #2c4643;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--hintergrund);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
#kopf {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  background: var(--petrol); color: var(--offwhite);
}
#kopf h1 { flex: 1; margin: 0; font: 600 1.15rem/1.2 'Fraunces', serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#warteschlange { background: var(--orange); color: var(--tief); border-radius: 12px; padding: 2px 8px; font-size: .8rem; font-weight: 700; }
button.symbol { background: none; border: 0; color: inherit; font-size: 1.6rem; width: 40px; height: 40px; cursor: pointer; }
main { max-width: 640px; margin: 0 auto; padding: 16px 16px calc(env(safe-area-inset-bottom) + 24px); }
h2 { font: 600 1.2rem 'Fraunces', serif; margin: 20px 0 8px; }
p.leise, .leise { color: var(--leise); font-size: .9rem; }
button, .knopf {
  font: 500 1rem 'DM Sans', sans-serif; border-radius: 12px; border: 1px solid var(--rand);
  background: var(--flaeche); color: var(--text); padding: 12px 16px; cursor: pointer; min-height: 48px;
}
a.knopf { display: inline-block; text-decoration: none; text-align: center; }
button.haupt { background: var(--petrol); color: var(--offwhite); border-color: var(--petrol); }
@media (prefers-color-scheme: dark) { a.knopf { display: inline-block; text-decoration: none; text-align: center; }
button.haupt { background: var(--offwhite); color: var(--petrol); border-color: var(--offwhite); } }
button.gefahr { color: var(--rot); border-color: var(--rot); }
button:disabled { opacity: .45; cursor: default; }
button.klein { min-height: 36px; padding: 6px 10px; font-size: .9rem; }
.breit { width: 100%; }
.reihe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.reihe > .wachsen { flex: 1; min-width: 0; }
input, select {
  font: 1rem 'DM Sans', sans-serif; padding: 12px; border-radius: 12px; border: 1px solid var(--rand);
  background: var(--flaeche); color: var(--text); min-height: 48px; width: 100%;
}
label { display: block; margin: 12px 0 4px; font-weight: 500; }
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px; padding: 14px 16px; margin: 10px 0; }
.liste { list-style: none; padding: 0; margin: 0; }
.liste li { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--rand); cursor: pointer; }
.liste li:last-child { border-bottom: 0; }
.liste .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.punkt { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--leise); flex: none; }
.punkt.voll { background: var(--ok); border-color: var(--ok); }
.punkt.teil { background: linear-gradient(90deg, var(--ok) 50%, transparent 50%); border-color: var(--ok); }
.fortschritt { height: 6px; border-radius: 3px; background: var(--rand); overflow: hidden; margin-top: 6px; }
.fortschritt > div { height: 100%; background: var(--ok); }
.einzug { padding-left: 18px; }
.fehler { background: #fde8e6; color: var(--rot); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.hinweis { background: #fff3e9; color: #7a3412; border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
@media (prefers-color-scheme: dark) { .fehler { background: #3d1513; color: #ffb4ab; } .hinweis { background: #3a2412; color: #ffd2b5; } }

/* Zählmaske */
.zaehlen { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.zaehlen .kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.zaehlen .artikel { font: 600 1.35rem/1.25 'Fraunces', serif; margin: 4px 0 2px; }
.flasche { display: block; width: 100%; max-width: 260px; height: 46vh; max-height: 420px; margin: 8px auto; touch-action: none; cursor: ns-resize; }
.flasche .umriss { fill: var(--flaeche); stroke: var(--petrol); stroke-width: 3; }
@media (prefers-color-scheme: dark) { .flasche .umriss { stroke: var(--offwhite); } }
.flasche .inhalt { fill: url(#fuellung); }
.flasche .linie { stroke: var(--orange); stroke-width: 4; }
.flasche .griff { fill: var(--orange); }
.flasche.offen .linie, .flasche.offen .griff { opacity: .35; }
.flasche text { font: 700 22px 'DM Sans', sans-serif; fill: var(--text); }
.zaehler { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0; }
.zaehler button { width: 64px; height: 64px; border-radius: 50%; font-size: 1.8rem; padding: 0; }
.zaehler input { width: 110px; text-align: center; font-size: 1.6rem; font-weight: 700; }
.zaehler .einheit { min-width: 90px; text-align: center; color: var(--leise); font-size: .9rem; }
.summe { text-align: center; font-size: 1.05rem; margin: 8px 0; min-height: 1.5em; }
.summe b { font-size: 1.3rem; }
.navi { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; }
.status { font-size: .85rem; padding: 2px 8px; border-radius: 10px; background: var(--rand); white-space: nowrap; }
.status.ok { background: var(--ok); color: #fff; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--rand); vertical-align: top; }
td.zahl, th.zahl { text-align: right; white-space: nowrap; }
.ampel { font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.ampel.bestellen { background: var(--orange); color: var(--tief); }
.ampel.reicht { background: var(--ok); color: #fff; }

#dialog { position: fixed; inset: 0; z-index: 20; background: rgba(11, 23, 22, .55); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
#dialog[hidden] { display: none; }
#dialog .karte { width: 100%; max-width: 520px; max-height: 85vh; overflow: auto; }
pre { white-space: pre-wrap; word-break: break-word; font-size: .8rem; background: var(--hintergrund); padding: 10px; border-radius: 10px; }