/* WERKBUCH — ruhig, schwarz auf Elfenbein. Eine Schrift (System), Haarlinien statt Karten, viel Luft. */

:root {
  --bg: #F4F2ED;
  --ink: #161616;
  --ink2: #6B675F;
  --ink3: #A6A198;
  --line: rgba(22, 22, 22, .12);
  --line2: rgba(22, 22, 22, .32);
  --feld: rgba(22, 22, 22, .035);
  --rot: #9B2C2C;
  --schleier: rgba(22, 22, 22, .32);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0E0E; --ink: #ECE9E3; --ink2: #9B968D; --ink3: #5C5851;
    --line: rgba(236, 233, 227, .14); --line2: rgba(236, 233, 227, .36); --feld: rgba(236, 233, 227, .06);
    --rot: #D46A6A; --schleier: rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E0E0E; --ink: #ECE9E3; --ink2: #9B968D; --ink3: #5C5851;
  --line: rgba(236, 233, 227, .14); --line2: rgba(236, 233, 227, .36); --feld: rgba(236, 233, 227, .06);
  --rot: #D46A6A; --schleier: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  font-family: var(--sans); font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--bg);
  min-height: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .4; cursor: default; }
input::placeholder, textarea::placeholder { color: var(--ink3); }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }

/* ── Typografie ── */
.marke { font-size: 12px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--ink); }
.auge { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.titel { font-size: 30px; font-weight: 400; letter-spacing: -.015em; line-height: 1.15; }
.unter { font-size: 15px; color: var(--ink2); margin-top: 4px; }
.zahl { font-variant-numeric: tabular-nums; }
.leise { color: var(--ink2); }
.still { color: var(--ink3); }
.rot { color: var(--rot); }

/* ── Rahmen ── */
.rahmen { min-height: 100dvh; }
.register { display: none; }
.kopf {
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  padding: env(safe-area-inset-top) 20px 0;
}
.kopf-innen { height: 56px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.kopf-rechts { display: flex; align-items: center; gap: 6px; }
.sync { width: 6px; height: 6px; border-radius: 50%; background: transparent; transition: background .3s; }
.sync.offen { background: var(--ink3); }
.sync.fehler { background: var(--rot); }
.icon-knopf { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); margin-right: -12px; }
.icon-knopf svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; }

main { padding: 28px 20px calc(88px + env(safe-area-inset-bottom)); }
.teil { display: none; }
.teil.aktiv { display: block; }
.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.anzahl { font-size: 15px; color: var(--ink3); margin-left: 12px; font-weight: 400; letter-spacing: 0; }

/* Haarlinien-Knopf „+“ */
.plus { width: 40px; height: 40px; border: 1px solid var(--line2); border-radius: 50%; display: grid; place-items: center; color: var(--ink); flex: none; }
.plus svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; fill: none; }
.plus:active { background: var(--ink); color: var(--bg); }

/* Suche: nur eine Linie */
.suche { width: 100%; height: 44px; border-bottom: 1px solid var(--line); margin-bottom: 8px; font-size: 16px; -webkit-appearance: none; appearance: none; }
.suche:focus { border-bottom-color: var(--ink); }

/* Register-Zeile (Filter) */
.reiter { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter button { height: 44px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); border-bottom: 1px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.reiter button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Listen ── */
.gruppe { margin-top: 30px; }
.gruppe:first-child { margin-top: 0; }
.gruppe-kopf { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line2); }
.gruppe-kopf .auge { color: var(--ink); }
.gruppe-kopf .summe { font-size: 13px; color: var(--ink2); }
.zeile {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  min-height: 60px; padding: 12px 0; border-bottom: 1px solid var(--line);
}
button.zeile:active { opacity: .55; }
.zeile .mitte { flex: 1; min-width: 0; }
button.mitte { display: block; text-align: left; min-height: 44px; }
.zeile .haupt { display: block; font-size: 16px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile .meta { display: block; font-size: 13px; color: var(--ink2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile .rechts { text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.zeile .rechts .meta { margin-top: 3px; }
.zeile .zeit { flex: none; width: 52px; color: var(--ink2); font-variant-numeric: tabular-nums; font-size: 14px; }
.zeile .punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--rot); flex: none; }
.leer { padding: 18px 0; color: var(--ink3); font-size: 15px; border-bottom: 1px solid var(--line); }
.mehr { display: block; width: 100%; height: 48px; text-align: left; font-size: 13px; color: var(--ink2); letter-spacing: .04em; }
.text-knopf { height: 44px; font-size: 13px; color: var(--ink2); letter-spacing: .02em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line2); }
.text-knopf:active { color: var(--ink); }
.unten-link { margin-top: 26px; }

/* Bestand: −/+ */
.zaehler { display: flex; align-items: center; flex: none; }
.zaehler button { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink2); }
.zaehler button:active { color: var(--ink); }
.zaehler button svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; fill: none; }
.zaehler .menge { min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.zaehler .menge small { display: block; font-size: 11px; color: var(--ink2); letter-spacing: .06em; }
.zaehler .menge.rot small { color: var(--rot); }

/* Heute */
.heute-kopf { margin-bottom: 30px; }
.heute-kopf .titel { font-size: 34px; }
.monat { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line2); }
.monat .gross { font-size: 42px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; margin-top: 10px; font-variant-numeric: tabular-nums; }
.monat .meta { margin-top: 8px; font-size: 13px; color: var(--ink2); }

/* ── Leiste unten (Handy) ── */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--bg);
  border-top: 1px solid var(--line); padding: 0 8px env(safe-area-inset-bottom);
  display: flex; justify-content: space-around;
}
.leiste button { flex: 1; height: 54px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); position: relative; }
.leiste button[aria-current="true"] { color: var(--ink); }
.leiste button[aria-current="true"]::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 14px; height: 1px; background: var(--ink); transform: translateX(-50%); }

/* ── Blatt (Editor) ── */
.schleier { position: fixed; inset: 0; z-index: 20; background: var(--schleier); display: flex; align-items: flex-end; justify-content: center; }
.blatt {
  width: 100%; height: 100dvh; background: var(--bg); display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .28s cubic-bezier(.3, .8, .3, 1);
}
.schleier.auf .blatt { transform: none; }
.blatt-kopf {
  flex: none; display: flex; align-items: center; justify-content: space-between; height: 56px;
  padding: 0 20px; margin-top: env(safe-area-inset-top); border-bottom: 1px solid var(--line);
}
.blatt-kopf .mitte { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; }
.blatt-kopf button { height: 44px; min-width: 44px; font-size: 14px; color: var(--ink); flex: none; }
.blatt-kopf .links { text-align: left; margin-left: -4px; color: var(--ink2); }
.blatt-kopf .rechts { text-align: right; margin-right: -4px; font-weight: 500; }
.blatt-inhalt { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 20px calc(40px + env(safe-area-inset-bottom)); }

/* Formular: Linien statt Kästen */
.feld { display: block; width: 100%; }
.feld .auge { display: block; margin-bottom: 2px; }
.feld input, .feld textarea, .feld .wahlfeld { width: 100%; min-height: 46px; border-bottom: 1px solid var(--line); font-size: 17px; padding: 8px 0; -webkit-appearance: none; appearance: none; }
.feld input:focus, .feld textarea:focus { border-bottom-color: var(--ink); }
.feld textarea { resize: none; line-height: 1.5; }
.feld + .feld { margin-top: 18px; }
.zweier { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.zweier .feld + .feld { margin-top: 0; }
.wahlfeld { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.wahlfeld .still { font-size: 13px; letter-spacing: .04em; }
.wahlfeld.leer-wahl { color: var(--ink3); }
.abschnitt { margin-top: 34px; padding-bottom: 10px; border-bottom: 1px solid var(--line2); display: flex; justify-content: space-between; align-items: baseline; }
.abschnitt .auge { color: var(--ink); }
.abschnitt .text-knopf { height: 36px; display: flex; align-items: flex-end; }

input[type="date"], input[type="time"] { min-width: 0; text-align: left; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }

/* Wahl (Stand, Design): Textreihe mit Linie */
.wahl { display: flex; gap: 22px; border-bottom: 1px solid var(--line); }
.wahl button { height: 46px; font-size: 13px; letter-spacing: .04em; color: var(--ink3); border-bottom: 1px solid transparent; margin-bottom: -1px; }
.wahl button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* Schalter */
.schalterzeile { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--line); }
.schalterzeile span { font-size: 16px; }
/* Schalter: 48×40 Tap-Fläche, gezeichnet wird eine 40×24-Spur */
.schalter { width: 48px; height: 40px; position: relative; flex: none; margin-right: -4px; }
.schalter::before { content: ""; position: absolute; left: 4px; top: 8px; width: 40px; height: 24px; border: 1px solid var(--line2); border-radius: 12px; transition: background .2s, border-color .2s; }
.schalter::after { content: ""; position: absolute; top: 12px; left: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform .2s; }
.schalter[aria-checked="true"]::before { background: var(--ink); border-color: var(--ink); }
.schalter[aria-checked="true"]::after { background: var(--bg); transform: translateX(16px); }

/* Positionen */
.posten { border-bottom: 1px solid var(--line); padding: 10px 0 12px; }
.posten .oben { display: flex; align-items: center; gap: 8px; }
.posten .oben input { flex: 1; min-width: 0; height: 40px; font-size: 16px; }
.posten .x { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink3); margin-right: -12px; }
.posten .x svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; fill: none; }
.posten .unten { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 14px; color: var(--ink2); }
.posten .unten input { height: 36px; font-size: 15px; color: var(--ink); background: var(--feld); padding: 0 10px; width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.posten .unten input.preis { width: 92px; }
.posten .unten .ergebnis { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.posten-aktionen { display: flex; gap: 24px; }
.arbeit { display: flex; align-items: center; gap: 8px; min-height: 56px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink2); flex-wrap: wrap; }
.arbeit .textlabel { color: var(--ink); font-size: 16px; margin-right: auto; }
.arbeit input { height: 36px; font-size: 15px; color: var(--ink); background: var(--feld); padding: 0 10px; width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.arbeit .ergebnis { color: var(--ink); min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.gesamt { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line2); display: flex; justify-content: space-between; align-items: baseline; }
.gesamt .gross { font-size: 30px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gesamt-detail { font-size: 13px; color: var(--ink2); margin-top: 6px; text-align: right; min-height: 19px; }
.gesamt-detail + .feld { margin-top: 30px; }

/* Knöpfe */
.knopf { display: block; width: 100%; height: 50px; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; border-radius: 2px; margin-top: 30px; }
.knopf:active { opacity: .75; }
.knopf.linie { background: none; color: var(--ink); border: 1px solid var(--line2); }
.knopf.rot { background: none; color: var(--rot); margin-top: 14px; height: 44px; }
.knopf + .knopf { margin-top: 12px; }
.aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 26px; }
.aktionen button, .aktionen a { height: 50px; display: grid; place-items: center; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.aktionen > * + * { border-left: 1px solid var(--line); }

/* Detail (Kunde) */
.detail-kopf .titel { font-size: 28px; }
.detail-kopf .unter { margin-top: 6px; }
.detail-zeilen { margin-top: 26px; }
.detail-zeilen div { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; gap: 20px; }
.detail-zeilen .auge { width: 92px; flex: none; padding-top: 4px; }
.detail-zeilen p { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }

/* Notiz-Editor */
.notiz-text { width: 100%; min-height: 60dvh; font-size: 17px; line-height: 1.6; resize: none; }

/* Menü-Liste */
.menue .zeile { min-height: 56px; }
.menue .zeile .haupt { font-size: 16px; }
.menue .feld { margin-top: 18px; }
.version { margin-top: 30px; font-size: 12px; color: var(--ink3); letter-spacing: .04em; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translate(-50%, 8px); z-index: 30; background: var(--ink); color: var(--bg); font-size: 13px; letter-spacing: .04em; padding: 10px 18px; border-radius: 2px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; white-space: nowrap; }
.toast.zeigen { opacity: 1; transform: translate(-50%, 0); }

/* ── Login ── */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login form { width: 100%; max-width: 320px; text-align: center; }
.login .marke { display: block; }
.login p { margin-top: 14px; font-size: 14px; color: var(--ink2); }
.login input { width: 100%; height: 48px; margin-top: 44px; border-bottom: 1px solid var(--line2); text-align: center; font-size: 17px; letter-spacing: .2em; -webkit-appearance: none; appearance: none; }
.login input:focus { border-bottom-color: var(--ink); }
.login .fehler { min-height: 20px; margin-top: 12px; font-size: 13px; color: var(--rot); }
.login .knopf { margin-top: 14px; }

/* ── Desktop ── */
@media (min-width: 900px) {
  .rahmen { display: grid; grid-template-columns: 240px 1fr; }
  .register { display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; padding: 40px 36px; border-right: 1px solid var(--line); }
  .register nav { margin-top: 56px; display: flex; flex-direction: column; gap: 4px; }
  .register nav button { height: 40px; text-align: left; font-size: 13px; letter-spacing: .06em; color: var(--ink3); display: flex; align-items: center; gap: 14px; }
  .register nav button::before { content: ""; width: 10px; height: 1px; background: currentColor; opacity: 0; transition: opacity .2s; }
  .register nav button[aria-current="true"] { color: var(--ink); }
  .register nav button[aria-current="true"]::before { opacity: 1; }
  .register nav button:hover { color: var(--ink); }
  .register-fuss { margin-top: auto; }
  .register-fuss button { height: 40px; font-size: 13px; letter-spacing: .06em; color: var(--ink3); }
  .register-fuss button:hover { color: var(--ink); }
  .kopf { padding: 0 64px; }
  .kopf .marke { visibility: hidden; }
  .kopf-innen { max-width: 680px; height: 40px; border-bottom: 0; }
  .icon-knopf { display: none; }
  main { padding: 48px 64px 80px; max-width: 808px; }
  .leiste { display: none; }
  .zeile:hover .haupt { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line2); }
  .toast { bottom: 36px; }

  .schleier { align-items: center; }
  .blatt { width: 560px; height: auto; max-height: calc(100dvh - 80px); border: 1px solid var(--line2); transform: none; opacity: 0; transition: opacity .18s; }
  .schleier.auf .blatt { opacity: 1; }
  .blatt-kopf { padding: 0 28px; margin-top: 0; }
  .blatt-inhalt { padding: 28px 28px 36px; }
  .notiz-text { min-height: 50vh; }
}

@media (prefers-reduced-motion: reduce) {
  .blatt, .toast, .schalter::before, .schalter::after, .sync { transition: none; }
}