:root{
  --rinde:#17150F;
  --stapel:#221F17;
  --hoch:#2E2A1F;
  --span:#ECE6D8;
  --matt:#968E7C;
  --marke:#9BE026;
  --frost:#7FC4D6;
  --gruen:#9BE026;
  --linie:rgba(236,230,216,.10);
  --linie-stark:rgba(236,230,216,.20);

  --f-disp:'Barlow Condensed','Oswald','Arial Narrow',sans-serif;
  --f-body:'Barlow',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:#0D0C08;color:var(--span);
  font-family:var(--f-body);font-size:15px;line-height:1.45;
  display:flex;justify-content:center;overscroll-behavior:none;
}
.versteckt{display:none!important}

#app{
  width:100%;max-width:460px;background:var(--rinde);
  min-height:100%;display:flex;flex-direction:column;position:relative;
  box-shadow:0 0 80px rgba(0,0,0,.6);
}

header{padding:18px 18px 0;flex:none}
.betrieb{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-disp);text-transform:uppercase;
  letter-spacing:.16em;font-size:11px;color:var(--matt);
}
.betrieb b{color:var(--span);font-weight:600}
.kopf-rechts{display:flex;align-items:center;gap:10px}
.kopf-knopf{
  background:none;border:none;color:var(--matt);cursor:pointer;
  padding:6px;margin:-6px -6px -6px 0;display:flex;line-height:0;
}
.kopf-knopf:active{color:var(--span)}
h1{
  font-family:var(--f-disp);font-weight:600;font-size:34px;line-height:1;
  letter-spacing:-.01em;margin:12px 0 2px;text-transform:uppercase;
}
.unterzeile{font-size:13px;color:var(--matt);margin-bottom:14px}
.unterzeile b{color:var(--span);font-family:var(--f-mono);font-weight:500}
.unterzeile b.offen{color:var(--marke)}

.chips{display:flex;gap:7px;padding:0 18px 14px;flex:none;flex-wrap:wrap}
.chip{
  font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.09em;
  font-size:13px;font-weight:500;padding:7px 13px;border-radius:2px;
  background:transparent;color:var(--matt);
  border:1px solid var(--linie);cursor:pointer;
}
.chip[aria-pressed="true"]{background:var(--span);color:var(--rinde);border-color:var(--span)}
.chip .n{font-family:var(--f-mono);font-size:12px;opacity:.75;margin-left:5px}

main{flex:1;overflow-y:auto;padding:0 18px 190px;-webkit-overflow-scrolling:touch}
.karte{
  background:var(--stapel);border:1px solid var(--linie);border-radius:3px;
  padding:13px 14px;margin-bottom:9px;display:block;width:100%;
  text-align:left;color:inherit;font:inherit;cursor:pointer;
  position:relative;overflow:hidden;
}
.karte:active{background:var(--hoch)}
.kopfzeile{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:5px}
.status{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600}
.s-offen{color:var(--marke)}
.s-geplant{color:var(--span)}
.s-geliefert{color:var(--matt)}
.rechts{text-align:right;flex:none}
.menge{font-family:var(--f-mono);font-weight:500;font-size:19px;white-space:nowrap;display:block}
.menge .e{font-size:11px;color:var(--matt);margin-left:2px}
.betrag{font-family:var(--f-mono);font-size:13px;color:var(--matt);white-space:nowrap;margin-top:1px}
.name{font-family:var(--f-disp);font-size:21px;font-weight:500;line-height:1.1}
.zeile2{font-size:13px;color:var(--matt);margin-top:3px}
.zeile2 .trenn{opacity:.4;margin:0 5px}
.zufahrt{
  margin-top:9px;padding:7px 9px;background:rgba(155,224,38,.09);
  border-left:2px solid var(--marke);font-size:13px;line-height:1.35;
}
.zufahrt span{
  font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.1em;
  font-size:10px;color:var(--marke);display:block;margin-bottom:1px;
}
.eigenpreis{
  display:inline-block;margin-top:7px;padding:3px 7px;
  border:1px solid rgba(127,196,214,.45);color:var(--frost);
  font-family:var(--f-mono);font-size:11px;border-radius:2px;
}

/* Preisliste-Zeile über der Kundenliste */
.preiszeile{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer;
  background:transparent;border:1px dashed var(--linie-stark);border-radius:3px;
  padding:13px 14px;margin-bottom:16px;
}
.preiszeile:active{background:var(--stapel)}
.preiszeile .lbl{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--matt)}
.preiszeile .wert{font-family:var(--f-mono);font-size:21px;font-weight:500}
.preiszeile .seit{font-size:12px;color:var(--matt);margin-top:1px}

.gruppe{margin:22px 0 9px;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--linie);padding-bottom:5px}
.gruppe h2{font-family:var(--f-disp);font-size:19px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.gruppe .sum{font-family:var(--f-mono);font-size:14px;color:var(--matt)}
.pos{background:var(--stapel);border:1px solid var(--linie);border-radius:3px;padding:12px 14px;margin-bottom:7px;position:relative}
.pos.aeltest{border-color:rgba(155,224,38,.4)}
.spray{
  position:absolute;left:-9px;top:14px;width:34px;height:20px;
  background:var(--marke);opacity:.9;
  border-radius:48% 52% 40% 60%/60% 45% 55% 40%;
  transform:rotate(-9deg);pointer-events:none;
}
.spray::after{content:"";position:absolute;right:-7px;top:6px;width:6px;height:5px;background:var(--marke);border-radius:50%;opacity:.8}
.pos-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-left:26px}
.jahr{font-family:var(--f-mono);font-size:20px;font-weight:600;letter-spacing:-.02em}
.pos-rm{font-family:var(--f-mono);font-size:20px;font-weight:500}
.pos-rm .e{font-size:11px;color:var(--matt);margin-left:2px}
.pos-meta{font-size:12px;color:var(--matt);padding-left:26px;margin-top:1px}
.pos-meta .zuerst{color:var(--marke);font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:600}
.balken{height:5px;background:var(--hoch);margin-top:10px;border-radius:1px;overflow:hidden}
.balken i{display:block;height:100%;background:var(--span);opacity:.55}
.pos.aeltest .balken i{background:var(--marke);opacity:.85}

.meterware{
  border:1px dashed var(--linie-stark);border-radius:3px;
  padding:11px 13px;margin-bottom:4px;font-size:13px;color:var(--matt);line-height:1.35;
}
.meterware b{
  display:block;font-family:var(--f-disp);text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--span);margin-bottom:2px;
}
.leer{text-align:center;padding:52px 24px;color:var(--matt)}
.leer b{display:block;font-family:var(--f-disp);font-size:20px;color:var(--span);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}

.aktion{
  position:absolute;left:18px;right:18px;bottom:82px;height:54px;
  border:none;border-radius:3px;background:var(--marke);color:var(--rinde);
  font-family:var(--f-disp);font-size:19px;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;cursor:pointer;
  box-shadow:0 8px 28px rgba(23,21,15,.9);
}
.aktion:active{transform:translateY(1px)}

nav{
  position:absolute;left:0;right:0;bottom:0;display:flex;background:var(--rinde);
  border-top:1px solid var(--linie-stark);padding-bottom:env(safe-area-inset-bottom);
}
nav button{
  flex:1;background:none;border:none;cursor:pointer;padding:13px 2px 15px;
  color:var(--matt);font-family:var(--f-disp);text-transform:uppercase;
  letter-spacing:.07em;font-size:12px;font-weight:500;
  border-top:2px solid transparent;margin-top:-1px;
}
nav button[aria-current="true"]{color:var(--span);border-top-color:var(--marke)}
nav .badge{
  font-family:var(--f-mono);font-size:10px;background:var(--marke);color:var(--rinde);
  border-radius:8px;padding:0 5px;margin-left:3px;letter-spacing:0;
}

.backdrop{position:fixed;inset:0;background:rgba(5,5,3,.72);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.backdrop.auf{opacity:1;pointer-events:auto}
.blatt{
  position:absolute;left:0;right:0;bottom:0;z-index:50;background:var(--stapel);
  border-top:1px solid var(--linie-stark);border-radius:10px 10px 0 0;
  transform:translateY(101%);transition:transform .26s cubic-bezier(.3,.9,.3,1);
  max-height:92%;display:flex;flex-direction:column;
}
.blatt.auf{transform:translateY(0)}
.blatt-kopf{padding:16px 18px 12px;border-bottom:1px solid var(--linie);display:flex;justify-content:space-between;align-items:center;flex:none;gap:10px}
.blatt-kopf h3{font-family:var(--f-disp);font-size:23px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.zu{background:none;border:none;color:var(--matt);font-size:26px;line-height:1;cursor:pointer;padding:0 4px;flex:none}
.blatt-inhalt{padding:16px 18px 20px;overflow-y:auto}

label{
  display:block;font-family:var(--f-disp);text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--matt);
  margin:15px 0 6px;font-weight:500;
}
label:first-child{margin-top:0}
input,select,textarea{
  width:100%;background:var(--hoch);color:var(--span);
  border:1px solid var(--linie);border-radius:3px;padding:13px 12px;
  font-family:var(--f-body);font-size:16px;
}
input[inputmode="decimal"],input[inputmode="numeric"],input[type="tel"]{font-family:var(--f-mono);font-size:18px}
textarea{resize:none;min-height:64px;line-height:1.4}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--matt) 50%),linear-gradient(135deg,var(--matt) 50%,transparent 50%);background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;background-size:5px 5px;background-repeat:no-repeat}
.paar{display:flex;gap:10px}
.paar>div{flex:1}
.wahl{display:flex;gap:7px;flex-wrap:wrap}
.wahl button{
  flex:1;min-width:62px;padding:12px 6px;background:var(--hoch);
  border:1px solid var(--linie);border-radius:3px;color:var(--matt);
  font-family:var(--f-mono);font-size:15px;cursor:pointer;
}
.wahl button[aria-pressed="true"]{background:var(--span);color:var(--rinde);border-color:var(--span)}

.jahrgang{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:var(--hoch);border:1px solid var(--linie);border-radius:3px;
  padding:13px 14px;margin-bottom:7px;color:inherit;
}
.jahrgang[aria-pressed="true"]{border-color:var(--marke);background:rgba(155,224,38,.10)}
.jahrgang .j{font-family:var(--f-mono);font-size:19px;font-weight:600;flex:none;width:56px}
.jahrgang .v{flex:1;font-size:13px;color:var(--matt)}
.jahrgang .tag{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--marke);font-weight:600}

/* Preis-Vorschau im Bestellformular */
.summe{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:16px;padding:12px 13px;background:var(--hoch);border-radius:3px;
}
.summe .lbl{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--matt)}
.summe .lbl small{display:block;letter-spacing:0;text-transform:none;font-size:12px;font-family:var(--f-body);margin-top:2px}
.summe .wert{font-family:var(--f-mono);font-size:22px;font-weight:500}

/* Historie */
.hist{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--linie)}
.hist:last-child{border-bottom:none}
.hist .l{flex:1;min-width:0}
.hist .d{font-family:var(--f-mono);font-size:13px}
.hist .w{font-size:13px;color:var(--matt)}
.hist .r{text-align:right;flex:none}
.hist .b{font-family:var(--f-mono);font-size:15px}
.kennzahlen{display:flex;gap:9px;margin:4px 0 6px}
.kennzahlen div{flex:1;background:var(--hoch);border-radius:3px;padding:10px 11px}
.kennzahlen .k{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--matt)}
.kennzahlen .v{font-family:var(--f-mono);font-size:17px;font-weight:500;margin-top:2px}

.preisposten{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--linie)}
.preisposten .p{font-family:var(--f-mono);font-size:18px;font-weight:500}
.preisposten .ab{font-size:13px;color:var(--matt)}
.preisposten .jetzt{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--marke);font-weight:600}
.preisposten.alt .p,.preisposten.alt .ab{color:var(--matt)}

.hinweis{margin-top:14px;padding:10px 12px;font-size:13px;line-height:1.4;background:rgba(155,224,38,.10);border-left:2px solid var(--marke)}
.hinweis.ruhig,.hinweis.gut{background:rgba(236,230,216,.06);border-color:var(--linie-stark)}
.hinweis.schlecht{background:rgba(214,110,110,.14);border-color:#D66E6E}
.speichern{
  width:100%;margin-top:20px;height:54px;border:none;border-radius:3px;
  background:var(--marke);color:var(--rinde);cursor:pointer;
  font-family:var(--f-disp);font-size:19px;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;
}
.speichern:disabled{opacity:.5}
.sekundaer{
  width:100%;margin-top:9px;height:48px;background:transparent;
  border:1px solid var(--linie-stark);border-radius:3px;color:var(--matt);
  cursor:pointer;font-family:var(--f-disp);font-size:16px;
  text-transform:uppercase;letter-spacing:.09em;
}
.trennlinie{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--linie)}
.abschnitt{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--matt);margin-bottom:4px}

.toast{
  position:fixed;bottom:96px;left:50%;transform:translate(-50%,14px);
  background:var(--span);color:var(--rinde);padding:11px 18px;border-radius:3px;
  z-index:80;font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.08em;
  font-size:15px;font-weight:600;opacity:0;pointer-events:none;
  transition:all .22s;white-space:nowrap;max-width:88vw;
}
.toast.auf{opacity:1;transform:translate(-50%,0)}
.toast.schlecht{background:#D66E6E;color:var(--rinde)}

:focus-visible{outline:2px solid var(--marke);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ==================================================================
   Anmeldung
   ================================================================== */
.anmeldung{
  position:fixed;inset:0;z-index:100;background:var(--rinde);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.anmeldung-karte{width:100%;max-width:340px}
.anmeldung-karte .marke-zeile{
  font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.16em;
  font-size:11px;color:var(--matt);
}
.anmeldung-karte h1{margin:8px 0 4px}
.anmeldung-karte .unter{font-size:13px;color:var(--matt);margin-bottom:22px}
.anmeldung-fehler{
  margin-top:14px;padding:10px 12px;font-size:13px;line-height:1.4;
  background:rgba(214,110,110,.14);border-left:2px solid #D66E6E;
}

/* ==================================================================
   Telefonzeile mit Stiftknopf
   ================================================================== */
.telzeile{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  background:var(--hoch);border-radius:3px;padding:4px 4px 4px 13px;
}
.telzeile .tel{
  flex:1;min-width:0;font-family:var(--f-mono);font-size:17px;
  color:var(--span);text-decoration:none;padding:10px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.telzeile .tel.leer{color:var(--matt);font-family:var(--f-body);font-size:14px}
.telzeile input{
  flex:1;min-width:0;background:transparent;border:none;border-radius:0;
  padding:10px 0;font-family:var(--f-mono);font-size:17px;
}
.telzeile input:focus{outline:none;box-shadow:inset 0 -1px 0 var(--marke)}
.telzeile .stift{
  flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-left:1px solid var(--linie);
  color:var(--matt);cursor:pointer;
}
.telzeile .stift:active{color:var(--marke)}

/* ==================================================================
   Einstellungen
   ================================================================== */
.menue{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.menue button{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  width:100%;text-align:left;cursor:pointer;color:inherit;
  background:var(--hoch);border:1px solid var(--linie);border-radius:3px;
  padding:15px 14px;font-family:var(--f-disp);font-size:17px;
  text-transform:uppercase;letter-spacing:.06em;
}
.menue button:active{border-color:var(--linie-stark)}
.menue button .pfeil{color:var(--matt);font-size:20px;line-height:1}
.menue button small{
  display:block;font-family:var(--f-body);font-size:12px;letter-spacing:0;
  text-transform:none;color:var(--matt);margin-top:2px;
}

.eintrag{
  display:flex;align-items:center;gap:10px;
  background:var(--stapel);border:1px solid var(--linie);border-radius:3px;
  padding:11px 6px 11px 13px;margin-bottom:7px;
}
.eintrag.still{opacity:.55}
.eintrag .txt{flex:1;min-width:0}
.eintrag .txt b{font-family:var(--f-disp);font-size:18px;font-weight:500;display:block;line-height:1.15}
.eintrag .txt span{font-size:12px;color:var(--matt)}
.eintrag .knopf{
  flex:none;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--matt);cursor:pointer;border-radius:3px;
}
.eintrag .knopf:active{background:var(--hoch);color:var(--span)}
.rollenmarke{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:2px;
  font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.1em;
  font-size:10px;font-weight:600;color:var(--frost);
  border:1px solid rgba(127,196,214,.45);
}