:root {
  --bg: #F4F8FB;
  --karte: #FFFFFF;
  --ink: #12222E;
  --ink2: #5A6B78;
  --rand: #DCE6EE;
  --spur: #E8EFF5;
  --blau: #1F6FB2;
  --blau-dunkel: #175789;
  --blau-hell: #E3F0FA;
  --gruen: #1E8A4C;
  --gruen-hell: #E5F4EB;
  --gelb: #A86B00;
  --gelb-hell: #FFF4DC;
  --rot: #B83A2A;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E171E; --karte: #16222C; --ink: #E8F0F6; --ink2: #9AAAB7;
    --rand: #26343F; --spur: #1E2B35; --blau: #5AA8E6; --blau-dunkel: #7DBBEC;
    --blau-hell: #17324A; --gruen: #4CC27F; --gruen-hell: #173A27;
    --gelb: #F0B54A; --gelb-hell: #3A2E14; --rot: #F07A68;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--blau); }
h1 { font-size: 26px; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: 18px; margin: 0; }
h3 { font-size: 17px; margin: 0; }
p { margin: 0; }

.seite {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 560px; margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(100px + env(safe-area-inset-bottom));
}
.mitte { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 32px 0 8px; }
.mitte img { border-radius: 14px; }

.kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.klein-zeile { font-size: 14px; padding: 6px 0; border-top: 1px solid var(--spur); }
.paar { display: flex; gap: 10px; }
.paar > * { flex: 1 1 0; min-width: 0; }
.spalte { display: flex; flex-direction: column; gap: 12px; }
.abschnitt { margin-top: 10px; }

.karte {
  background: var(--karte); border: 1px solid var(--rand); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
a.karte { color: inherit; text-decoration: none; }
details.karte summary { cursor: pointer; font-weight: 600; }

.label { display: block; font-size: 14px; font-weight: 600; color: var(--ink2); margin-bottom: 4px; }
.klein { font-size: 14px; color: var(--ink2); display: block; }
.fussnote { font-size: 13px; color: var(--ink2); line-height: 1.5; }
.leer-text { color: var(--ink2); padding: 8px 0; }
.warn-text { color: var(--rot); }
.gross-text { font-size: 19px; }
.zahl { font-weight: 700; font-variant-numeric: tabular-nums; }
.zahl.gross { font-size: 22px; }

.meldung { background: var(--blau-hell); color: var(--ink); border-radius: 12px; padding: 12px 14px; font-weight: 500; }
.meldung.warn { background: var(--gelb-hell); }

input[type=text], input[type=tel], input[type=password], input[type=number],
input[type=datetime-local], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--rand); border-radius: 12px; padding: 12px; min-height: 48px;
}
textarea { resize: vertical; }
.haken-zeile { display: flex; gap: 10px; align-items: center; }
.haken-zeile input { width: 22px; height: 22px; }

.knopf {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 12px 18px; border-radius: 14px; border: 0;
  background: var(--blau); color: #fff; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; width: 100%;
}
.knopf:active { background: var(--blau-dunkel); }
.knopf.gruen { background: var(--gruen); }
.knopf.zweit { background: transparent; color: var(--blau); border: 1px solid var(--rand); }
.knopf.warn { color: var(--rot); }
.klein-knopf { min-height: 40px; padding: 8px 14px; font-size: 15px; width: auto; }
.knopfreihe { display: flex; gap: 10px; }
.knopfreihe > * { flex: 1; }
.unten { margin-top: 18px; }
a.knopf { color: #fff; }
a.knopf.zweit { color: var(--blau); }

/* Termine */
.termine .termin { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.termine .termin strong { font-size: 18px; text-align: right; }
.tragerl-zahl { display: flex; align-items: center; gap: 8px; background: var(--karte); border: 1px solid var(--rand); border-radius: 14px; padding: 8px 12px; }
.tragerl-zahl .zahl { font-size: 28px; color: var(--blau); }
.tragerl-zahl .klein { font-size: 12px; line-height: 1.2; }

/* Bestellformular */
.stepper-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; }
.stepper { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.stepper button {
  width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--rand);
  background: var(--blau-hell); color: var(--blau); font-size: 26px; font-weight: 600; cursor: pointer;
}
.stepper input { width: 60px; text-align: center; font-size: 22px; font-weight: 700; padding: 8px 4px; }
.rechnung { background: var(--bg); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.rechnung .summe { font-size: 20px; font-weight: 700; border-top: 1px solid var(--rand); padding-top: 8px; }

/* Schritte einer Bestellung */
.schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.schritte li { display: flex; gap: 12px; align-items: flex-start; }
.schritte li > div { display: flex; flex-direction: column; gap: 6px; }
.schritte .breit { flex: 1; }
.punkt { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--rand); flex-shrink: 0; margin-top: 1px; position: relative; }
.schritte li.halb .punkt { border-color: var(--gelb); background: var(--gelb-hell); }
.schritte li.fertig .punkt { border-color: var(--gruen); background: var(--gruen); }
.schritte li.fertig .punkt::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 700; position: absolute; inset: 0; display: grid; place-items: center; }
.schritte li.fertig strong { color: var(--ink2); }

.haken {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 10px 14px; border-radius: 14px; border: 2px solid var(--blau);
  background: var(--karte); color: var(--blau); font: inherit; font-weight: 600; cursor: pointer;
}
.haken .kasten { width: 26px; height: 26px; border-radius: 7px; border: 2px solid currentColor; display: grid; place-items: center; flex-shrink: 0; }
.haken.an { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen); }
.haken.an .kasten { background: var(--gruen); border-color: var(--gruen); }
.haken.an .kasten::after { content: "✓"; color: #fff; font-size: 16px; }

.marke { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 99px; }
.marke.gut { background: var(--gruen-hell); color: var(--gruen); }

/* Admin */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kachel { background: var(--karte); border: 1px solid var(--rand); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kachel .klein { font-size: 12.5px; }
.bestellung.erledigt { opacity: 0.6; }
.bestellung .offen { color: var(--gelb); }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.aktionen form { display: flex; gap: 6px; align-items: center; }
.mit-zahl input { width: 64px; min-height: 44px; padding: 8px; text-align: center; }
.pille {
  min-height: 44px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--rand);
  background: var(--karte); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.pille.an { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen); }
.pille.hinweis { background: var(--gelb-hell); border-color: var(--gelb); color: var(--gelb); }
details.mini summary { font-size: 13px; color: var(--ink2); cursor: pointer; }
details.mini form { margin-top: 8px; }
.kundenzeile { flex-direction: row; justify-content: space-between; align-items: center; }
.kundenzeile.inaktiv { opacity: 0.55; }
.pfeil { font-size: 26px; color: var(--ink2); }

.qr { background: #fff; border-radius: 12px; padding: 8px; align-self: center; width: 200px; }
.qr svg { width: 100%; height: auto; display: block; }
.qr-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.qr-karte { border: 1px dashed var(--ink2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: #fff; color: #111; }
.qr-karte span { font-size: 13px; }

.tableiste {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around;
  background: var(--karte); border-top: 1px solid var(--rand);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink2); text-decoration: none; font-size: 12px; font-weight: 600; padding: 4px 16px; min-width: 72px; }
.tab svg { width: 24px; height: 24px; }
.tab.an { color: var(--blau); }

@media print {
  body { background: #fff; }
  .nicht-drucken, .tableiste { display: none !important; }
  .seite { max-width: none; padding: 0; }
  .qr-raster { grid-template-columns: repeat(3, 1fr); }
  .qr-karte { break-inside: avoid; }
}