/* Eliza Gold – Reparaturen. Farbwelt und Schrift wie azena.ai: Papier, Tinte, Helvetica leicht. */
:root {
  --papier: #F7F6F3;
  --flaeche: #FCFBF9;
  --leinen: #F1EFEB;
  --stein: #ECEAE6;
  --tinte: #2A2521;
  --tinte-kopf: #1F1D1B;
  --text: #57504A;
  --leise: #857B73;
  --linie: rgb(42 37 33 / .10);
  --linie-fest: rgb(42 37 33 / .18);
  --gold: #B8935A;
  --bronze: #735A36;

  --ja: #2C6741; --ja-grund: #DCEBDF;
  --nein: #A9520D; --nein-grund: #F9E1C8;

  --st-ng: #6F665F; --st-ng-grund: #ECEAE6;
  --st-nb: #A9520D; --st-nb-grund: #F9E1C8;
  --st-ba: #43546A; --st-ba-grund: #E2E8EF;
  --st-zp: #7A5B1F; --st-zp-grund: #F3E6C9;
  --st-ab: #2C6741; --st-ab-grund: #DCEBDF;

  --schrift: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px;
  --sh-schwebe: 3px 5px 12px rgb(34 29 26 / .08), 12px 18px 22px rgb(34 29 26 / .07), 27px 41px 29px rgb(34 29 26 / .04);
  --sh-ring: 0 0 0 1px rgb(0 0 0 / .04), 0 4px 8px rgb(0 0 0 / .04);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --rand: max(16px, env(safe-area-inset-left));
  --rand-r: max(16px, env(safe-area-inset-right));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font: 400 16px/1.45 var(--schrift);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
h1, h2, h3 { color: var(--tinte-kopf); font-weight: 300; letter-spacing: -.03em; line-height: 1.07; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.marke { margin: 0 0 6px; font-size: 13px; color: var(--leise); letter-spacing: .01em; }

/* ---------- Knöpfe und Felder ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--linie-fest); background: var(--flaeche); color: var(--tinte);
  white-space: nowrap; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.knopf:hover { background: var(--leinen); }
.knopf:active { transform: scale(.98); }
.knopf--voll { background: var(--tinte); border-color: var(--tinte); color: var(--leinen); }
.knopf--voll:hover { background: #3F5B45; border-color: #3F5B45; }
.knopf--leise { border-color: transparent; background: transparent; color: var(--text); padding: 0 12px; }
.knopf--leise:hover { background: var(--stein); }
.knopf--gefahr { border-color: transparent; background: transparent; color: var(--nein); padding: 0 12px; }
.knopf--gefahr.scharf { background: var(--nein); color: #fff; }

.feld { display: grid; gap: 6px; min-width: 0; align-content: start; }
.feld > span, .feld > label, .feld-name { font-size: 13px; color: var(--leise); }
.feld .datum { justify-self: start; min-height: 48px; padding: 0 16px; }
.feld input, .feld textarea, .reihe input, .konto-form input, .konto-form select, .suche input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--linie-fest); border-radius: var(--r-m);
  background: var(--flaeche); color: var(--tinte); font-size: 16px; /* ab 16 px zoomt iOS nicht */
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.feld textarea { resize: vertical; min-height: 72px; }
.feld input:focus, .feld textarea:focus, .reihe input:focus, .konto-form input:focus, .suche input:focus {
  outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px rgb(184 147 90 / .18);
}
.feld input:disabled, .feld textarea:disabled { background: transparent; border-style: dashed; color: var(--text); }

/* ---------- Anmeldung: gestochene Rosette, die auf den Finger antwortet ---------- */
.anmeldung {
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden;
  display: grid; place-items: center; padding: 24px var(--rand-r) 72px var(--rand);
  background: radial-gradient(120% 80% at 50% 40%, var(--flaeche) 0%, var(--papier) 55%, #EEEBE6 100%);
}
.rosette {
  position: absolute; left: 50%; top: 46%;
  width: min(112vmin, 1000px); height: min(112vmin, 1000px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.rosette path, .rosette circle { stroke-width: .6; vector-effect: non-scaling-stroke; opacity: .78; }
.rosette .ring { stroke-width: .9; opacity: .55; }
.rosette .eingang { stroke-dasharray: 1; stroke-dashoffset: 1; animation: stechen 1.4s var(--ease) forwards; }
@keyframes stechen { to { stroke-dashoffset: 0; } }
@media (max-width: 600px) {
  .rosette { width: 168vw; height: 168vw; top: 44%; }
}

.anmelde-karte {
  position: relative; z-index: 1; width: min(360px, 100%);
  display: grid; gap: 16px; padding: 32px 28px 28px;
  border-radius: var(--r-xl); border: 1px solid rgb(255 255 255 / .7);
  background: rgb(252 251 249 / .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: var(--sh-schwebe), inset 0 1px 0 rgb(255 255 255 / .8);
}
.anmelde-karte h1 { font-size: 40px; margin-bottom: 8px; }
.anmelde-karte .marke { margin: 0; }
.anmelde-karte .knopf { width: 100%; min-height: 50px; margin-top: 4px; }
.anmelde-fehler { margin: -6px 0 -6px; min-height: 1.2em; font-size: 14px; color: var(--nein); }
.anmelde-karte.wackeln { animation: wackeln .4s var(--ease); }
@keyframes wackeln { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.fuss {
  position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0;
  text-align: center; font-size: 12px; color: var(--leise); pointer-events: none;
}
.fuss span:first-child, .fuss { text-shadow: 0 0 6px var(--papier), 0 0 12px var(--papier); }
.azena { font-family: "Century Gothic", Futura, sans-serif; color: var(--tinte); letter-spacing: .02em; }

/* ---------- App ---------- */
.app {
  max-width: 1480px; margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) var(--rand-r) calc(96px + env(safe-area-inset-bottom)) var(--rand);
}
.kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 8px 0 24px; }
.kopf h1 { font-size: clamp(32px, 5vw, 48px); }
.kopf-wer { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ich { font-size: 14px; color: var(--leise); margin-right: 6px; }
@media (max-width: 700px) {
  .kopf { flex-direction: column-reverse; align-items: stretch; gap: 8px; padding-bottom: 20px; }
  .kopf-wer { justify-content: space-between; flex-wrap: nowrap; margin: 0 -12px 0 0; }
  .ich { margin-right: auto; }
}

/* Zähler = Filter */
.zaehler {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px;
  background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r-l); overflow: hidden;
}
.zaehler button {
  display: grid; gap: 4px; align-content: start; text-align: left;
  padding: 14px 16px 16px; min-height: 84px; border: 0; background: var(--flaeche);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.zaehler button:hover { background: var(--leinen); }
.zaehler .zahl { font-size: 32px; font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--tinte-kopf); font-variant-numeric: tabular-nums; }
.zaehler .name { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.3; color: var(--text); }
.zaehler .name::before { content: ""; width: 7px; height: 7px; margin-top: .45em; border-radius: 50%; background: var(--punkt, var(--tinte)); flex: none; }
.zaehler button:not([data-st]) .name::before { display: none; }
.zaehler button[aria-pressed="true"] { background: var(--tinte); }
.zaehler button[aria-pressed="true"] .zahl, .zaehler button[aria-pressed="true"] .name { color: var(--leinen); }
@media (max-width: 860px) {
  .zaehler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zaehler button { min-height: 72px; padding: 12px; }
  .zaehler .zahl { font-size: 26px; }
  .zaehler .name { font-size: 12px; }
}

.werkzeuge { display: flex; gap: 12px; align-items: center; margin: 20px 0 16px; }
.suche { flex: 1; }
@media (max-width: 1023px) { .werkzeuge #knopf-neu { display: none; } }
.knopf--schwebend {
  position: fixed; z-index: 5; right: var(--rand-r); bottom: max(16px, env(safe-area-inset-bottom));
  min-height: 52px; padding: 0 22px; box-shadow: var(--sh-schwebe);
}
@media (min-width: 1024px) { .knopf--schwebend { display: none !important; } }

.leer { text-align: center; padding: 48px 16px; color: var(--leise); }

/* Status-Pille */
.status {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 13px; white-space: nowrap; color: var(--st); background: var(--st-grund);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
[data-st="Nicht geschickt"] { --st: var(--st-ng); --st-grund: var(--st-ng-grund); --punkt: var(--st-ng); }
[data-st="Nicht bestätigt"] { --st: var(--st-nb); --st-grund: var(--st-nb-grund); --punkt: var(--st-nb); }
[data-st="Bei Abid"] { --st: var(--st-ba); --st-grund: var(--st-ba-grund); --punkt: var(--st-ba); }
[data-st="Zurück – prüfen"] { --st: var(--st-zp); --st-grund: var(--st-zp-grund); --punkt: var(--st-zp); }
[data-st="Abgeschlossen"] { --st: var(--st-ab); --st-grund: var(--st-ab-grund); --punkt: var(--st-ab); }

/* Ja / Nein */
.jn { display: inline-flex; border: 1px solid var(--linie-fest); border-radius: 999px; padding: 2px; background: var(--flaeche); }
.jn button {
  min-width: 52px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--leise); font-size: 14px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.jn button[data-wert="Ja"][aria-pressed="true"] { background: var(--ja-grund); color: var(--ja); box-shadow: inset 0 0 0 1px rgb(44 103 65 / .25); }
.jn button[data-wert="Nein"][aria-pressed="true"] { background: var(--nein-grund); color: var(--nein); box-shadow: inset 0 0 0 1px rgb(169 82 13 / .25); }
.jn button:hover:not([aria-pressed="true"]) { background: var(--leinen); color: var(--tinte); }
.wert { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 14px; color: var(--leise); }
.wert--Ja { background: var(--ja-grund); color: var(--ja); }
.wert--Nein { background: var(--nein-grund); color: var(--nein); }

/* Datumsfeld */
.datum {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--linie-fest); border-radius: 999px; background: var(--flaeche);
  color: var(--tinte); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.datum::before {
  content: ""; width: 14px; height: 14px; flex: none; opacity: .55;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='2'/%3E%3Cpath d='M1.5 6.5h13M5 1v3M11 1v3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='2'/%3E%3Cpath d='M1.5 6.5h13M5 1v3M11 1v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.datum.leer-wert { color: var(--leise); border-style: dashed; }
.datum:disabled { cursor: default; border-color: transparent; background: transparent; padding: 0 12px 0 0; }
.datum:disabled::before { display: none; }
.datum:not(:disabled):hover { background: var(--leinen); }

/* ---------- Karten (Handy, iPad) ---------- */
.liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.karte {
  display: grid; gap: 12px; padding: 16px; border-radius: var(--r-l);
  background: var(--flaeche); box-shadow: var(--sh-ring);
}
.karte-kopf { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.karte-oeffnen {
  display: grid; gap: 4px; text-align: left; min-width: 0; padding: 0; border: 0; background: none; flex: 1;
}
.karte-oeffnen .titel { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.karte .nr { font-size: 14px; color: var(--leise); font-variant-numeric: tabular-nums; flex: none; }
.karte .kunde { font-size: 20px; font-weight: 300; letter-spacing: -.02em; color: var(--tinte-kopf); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte .was { font-size: 14px; color: var(--text); }
.schritte { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.schritte li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 50px; padding: 5px 0; border-bottom: 1px solid var(--linie);
}
.schritte li:last-child { border-bottom: 0; }
.schritte .lbl { font-size: 14px; color: var(--text); }
.notiz { margin: 0; font-size: 14px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.notiz::before { content: "Notiz  "; color: var(--leise); }
.geaendert { margin: 0; font-size: 12px; color: var(--leise); }

/* ---------- Tabelle (Laden-PC) ---------- */
.tabelle-huelle { overflow-x: auto; border-radius: var(--r-l); box-shadow: var(--sh-ring); background: var(--flaeche); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 400; font-size: 12px; color: var(--leise);
  padding: 12px 10px; background: var(--flaeche); border-bottom: 1px solid var(--linie-fest); white-space: nowrap;
}
.tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr { transition: background .2s var(--ease); }
.tabelle tbody tr:hover { background: #FAF8F5; }
.tabelle .zelle-oeffnen { border: 0; background: none; padding: 6px 0; text-align: left; color: var(--tinte); width: 100%; }
.tabelle .zelle-oeffnen:hover { text-decoration: underline; text-decoration-color: var(--linie-fest); text-underline-offset: 4px; }
.tabelle .t-nr { font-variant-numeric: tabular-nums; color: var(--leise); width: 52px; }
.tabelle .t-kunde { min-width: 140px; color: var(--tinte); }
.tabelle .t-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle .t-notiz { max-width: 220px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabelle .jn button { min-width: 44px; min-height: 32px; padding: 0 10px; font-size: 13px; }
.tabelle .datum { min-height: 34px; padding: 0 12px; font-size: 14px; }

/* ---------- Blätter (Dialoge) ---------- */
dialog { color: inherit; }
dialog::backdrop { background: rgb(31 29 27 / .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.blatt {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0;
  border: 0; border-radius: var(--r-xl); background: var(--flaeche); box-shadow: var(--sh-schwebe);
}
.blatt[open] { animation: auf .28s var(--ease); }
@keyframes auf { from { opacity: 0; transform: translateY(16px); } }
.blatt-inhalt { display: grid; gap: 20px; padding: 24px; }
.blatt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.blatt-kopf h2 { font-size: 28px; }
.blatt-aktionen { display: flex; justify-content: space-between; gap: 12px; }
.blatt-aktionen .knopf--voll { margin-left: auto; min-width: 140px; }
.blatt-fehler { margin: 0; color: var(--nein); font-size: 14px; }
.blatt-fehler:empty { display: none; }
@media (max-width: 700px) {
  .blatt {
    width: 100vw; max-width: 100vw; max-height: calc(100dvh - 24px); margin: auto 0 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  .blatt[open] { animation: hoch .3s var(--ease); }
  .blatt-inhalt { padding: 20px var(--rand-r) calc(20px + env(safe-area-inset-bottom)) var(--rand); }
}
@keyframes hoch { from { transform: translateY(40px); opacity: 0; } }

.formular { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
.feld--voll { grid-column: 1 / -1; }
@media (max-width: 480px) { .formular { grid-template-columns: 96px 1fr; gap: 14px 12px; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie-fest);
  background: var(--flaeche); color: var(--tinte); font-size: 14px;
}
.chip:hover { background: var(--leinen); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--leinen); }
.chip:disabled { opacity: .5; cursor: default; }
.chip .weg { margin-left: 8px; color: var(--leise); }

.verlauf { border-top: 1px solid var(--linie); padding-top: 16px; }
.verlauf h3 { font-size: 18px; margin-bottom: 8px; }
.verlauf ol { list-style: none; margin: 0; padding: 0; display: grid; }
.verlauf li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
.verlauf li:last-child { border-bottom: 0; }
.verlauf time { color: var(--leise); font-variant-numeric: tabular-nums; }
.verlauf .wer { color: var(--tinte); }
.verlauf del { color: var(--leise); }

.abschnitt { display: grid; gap: 12px; }
.abschnitt h3 { font-size: 20px; }
.hinweis { margin: 0; font-size: 14px; color: var(--leise); }
.reihe { display: flex; gap: 8px; }
.reihe input { flex: 1; }
.konten { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linie); }
.konten li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.konten .k-name { color: var(--tinte); flex: 1; min-width: 140px; }
.konten .k-name small { display: block; color: var(--leise); font-size: 13px; }
.konten .gesperrt { opacity: .5; }
.konto-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.konto-form select { appearance: none; }
@media (max-width: 480px) { .konto-form { grid-template-columns: 1fr; } }

/* ---------- Kalender ---------- */
.kalender {
  width: 320px; padding: 16px; margin: 0; border: 0; border-radius: var(--r-l);
  background: var(--flaeche); box-shadow: var(--sh-schwebe), var(--sh-ring);
}
.kalender::backdrop { background: rgb(31 29 27 / .08); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 700px) {
  .kalender {
    width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 20px var(--rand-r) calc(20px + env(safe-area-inset-bottom)) var(--rand);
  }
  .kalender::backdrop { background: rgb(31 29 27 / .32); }
}
.kal-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kal-kopf p { margin: 0; color: var(--tinte); font-size: 16px; }
.kal-pfeil { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; color: var(--tinte); }
.kal-pfeil:hover { background: var(--stein); }
.kal-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.kal-tage .wt { font-size: 12px; color: var(--leise); padding: 6px 0; }
.kal-tage button {
  aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 50%; background: transparent;
  color: var(--tinte); font-variant-numeric: tabular-nums; font-size: 15px;
}
.kal-tage button:hover { background: var(--leinen); }
.kal-tage button.fremd { color: #C2BAB2; }
.kal-tage button.heute { box-shadow: inset 0 0 0 1px var(--gold); color: var(--bronze); }
.kal-tage button.gewaehlt { background: var(--tinte); color: var(--leinen); box-shadow: none; }
.kal-aktionen { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.kal-aktionen .knopf--voll { flex: 1; }

/* ---------- Meldung ---------- */
.toast {
  position: fixed; z-index: 50; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 999px;
  background: var(--tinte); color: var(--leinen); font-size: 14px; box-shadow: var(--sh-schwebe);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.an { opacity: 1; transform: translate(-50%, 0); }
.toast.fehler { background: var(--nein); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rosette .eingang { stroke-dashoffset: 0; }
}

/* ---------- Bereiche (Reiter) ---------- */
.bereiche {
  display: inline-flex; gap: 2px; padding: 3px; margin: -8px 0 20px;
  border-radius: 999px; background: var(--stein);
}
.bereiche button {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text); font-size: 15px;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.bereiche button:hover { color: var(--tinte); }
.bereiche button[aria-current="true"] { background: var(--flaeche); color: var(--tinte); box-shadow: var(--sh-ring); }
@media (max-width: 700px) {
  .bereiche { display: flex; width: 100%; margin-top: -4px; }
  .bereiche button { flex: 1; padding: 0 8px; font-size: 14px; }
}

.knopf--nur-breit { }
@media (max-width: 1023px) { .knopf--nur-breit { display: none !important; } }

/* ---------- Bestellungen: Notizblock je Mitarbeiter ---------- */
.best-kopf { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.chip-zahl {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px;
  border-radius: 999px; background: var(--stein); color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"] .chip-zahl { background: rgb(255 255 255 / .16); color: var(--leinen); }
.umschalter { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--stein); }
.umschalter button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-size: 14px; }
.umschalter button[aria-pressed="true"] { background: var(--flaeche); color: var(--tinte); box-shadow: var(--sh-ring); }

.block { border-radius: var(--r-l); background: var(--flaeche); box-shadow: var(--sh-ring); overflow: hidden; }
.block-titel { font-size: 22px; padding: 20px 20px 4px; }
.schnell {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .8fr) auto; gap: 8px;
  padding: 12px 20px 16px; border-bottom: 1px solid var(--linie-fest);
}
.schnell input {
  min-height: 46px; padding: 10px 14px; border: 1px solid var(--linie-fest); border-radius: var(--r-m);
  background: var(--papier); font-size: 16px; color: var(--tinte);
}
.schnell input:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px rgb(184 147 90 / .18); background: var(--flaeche); }
@media (max-width: 860px) {
  .schnell { grid-template-columns: 1fr 1fr; }
  .schnell input[name="kunde"], .schnell input[name="artikel"] { grid-column: 1 / -1; }
}

/* Linierte Seite mit goldenem Rand, wie ein Bestellblock */
.notizen {
  list-style: none; margin: 0; padding: 0;
  background: linear-gradient(to right, transparent 59px, rgb(184 147 90 / .45) 59px, rgb(184 147 90 / .45) 60px, transparent 60px);
}
.notiz-zeile {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 0 16px;
  min-height: 60px; padding: 8px 20px 8px 0; border-bottom: 1px solid rgb(108 140 170 / .16);
}
.notiz-zeile:last-child { border-bottom: 0; }
.haken {
  justify-self: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--linie-fest); background: var(--flaeche); padding: 0;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.haken:hover:not(:disabled) { border-color: var(--ja); }
.haken[aria-pressed="true"] {
  border-color: var(--ja); background: var(--ja)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.haken:disabled { opacity: .4; cursor: default; }
.notiz-text { display: grid; gap: 2px; padding: 4px 0; border: 0; background: none; text-align: left; min-width: 0; }
.n-kunde { color: var(--tinte); font-size: 16px; }
.n-was { color: var(--text); font-size: 15px; overflow-wrap: anywhere; }
.n-notiz { color: var(--leise); font-size: 13px; overflow-wrap: anywhere; }
.n-meta { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.n-meta a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie-fest); }
.n-wer { padding: 2px 8px; border-radius: 999px; background: var(--stein); color: var(--text); }
.notiz-zeile.erledigt .n-kunde, .notiz-zeile.erledigt .n-was { text-decoration: line-through; text-decoration-color: rgb(42 37 33 / .35); color: var(--leise); }
@media (max-width: 700px) {
  .notizen { background: linear-gradient(to right, transparent 51px, rgb(184 147 90 / .45) 51px, rgb(184 147 90 / .45) 52px, transparent 52px); }
  .notiz-zeile { grid-template-columns: 52px minmax(0, 1fr); padding-right: 16px; }
  .n-meta { grid-column: 2; padding-bottom: 4px; flex-wrap: wrap; }
  .block-titel { padding: 16px 16px 4px; }
  .schnell { padding: 12px 16px 16px; }
}
.block .leer { padding: 32px 20px; }

/* ---------- Trauringe ---------- */
[data-st="Bestellt"] { --st: var(--st-ng); --st-grund: var(--st-ng-grund); --punkt: var(--st-ng); }
[data-st="In Arbeit"] { --st: var(--st-ba); --st-grund: var(--st-ba-grund); --punkt: var(--st-ba); }
[data-st="Eingetroffen"] { --st: var(--st-zp); --st-grund: var(--st-zp-grund); --punkt: var(--st-zp); }
[data-st="Abgeholt"] { --st: var(--st-ab); --st-grund: var(--st-ab-grund); --punkt: var(--st-ab); }

.zaehler--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .zaehler--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zaehler--5 button:first-child { grid-column: 1 / -1; }
}

.tr-fakten { display: grid; gap: 8px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--linie); }
.tr-fakten div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; font-size: 14px; }
.tr-fakten dt { color: var(--leise); }
.tr-fakten dd { margin: 0; color: var(--tinte); overflow-wrap: anywhere; }
.tr-fakten dd b { font-weight: 500; }
.tr-fakten a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie-fest); }
.spaet { margin-left: 6px; color: var(--nein); }
.bald { margin-left: 6px; color: var(--bronze); }
.tr-fakten dd > span:not(.spaet):not(.bald) { margin-left: 6px; color: var(--leise); }

.stufen { display: flex; gap: 2px; padding: 4px; border-radius: var(--r-m); background: var(--leinen); }
.stufen button {
  flex: 1 1 auto; min-height: 38px; padding: 0 6px; border: 0; border-radius: 9px; background: transparent;
  color: var(--leise); font-size: 13px; white-space: nowrap;
}
.stufen button:hover { color: var(--tinte); background: rgb(255 255 255 / .6); }
.stufen button[aria-pressed="true"] { background: var(--st-grund); color: var(--st); box-shadow: inset 0 0 0 1px rgb(42 37 33 / .08); }

.blatt--breit { width: min(760px, calc(100vw - 32px)); }
.formular--zwei { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .formular--zwei { grid-template-columns: 1fr 1fr; gap: 14px 12px; } }
.rest { font-size: 13px; color: var(--bronze); }