/*
 * Die Oberfläche, ruhiger gestellt.
 *
 * Eine Schicht ÜBER `app.css`, keine Änderung darin. Der Grund ist praktisch:
 * `app.css` hat 4.290 Zeilen und 1.886 Regeln, gewachsen aus dem
 * Kassenprojekt. Sie umzuschreiben hieße, jede dieser Regeln zu prüfen —
 * diese Datei stellt stattdessen die Grundlagen neu und lässt alles Übrige
 * unberührt. Wer sie aus `index.html` nimmt, hat den alten Stand zurück.
 *
 * Woran sie sich orientiert: an der Art, wie macOS Flächen ordnet. Das heißt
 * NICHT, Apple nachzubauen, sondern vier Dinge zu übernehmen, die dort
 * konsequent durchgehalten sind:
 *
 *   1. Tiefe entsteht durch Ebenen, nicht durch Rahmen. Eine Karte liegt auf
 *      dem Grund, weil sie heller ist und einen weichen Schatten wirft — kein
 *      grauer Strich ringsum. Rahmen sind der häufigste Grund, warum eine
 *      Oberfläche „nach Formular" aussieht.
 *   2. Farbe ist ein Werkzeug, kein Schmuck. Der Akzent markiert genau eine
 *      Sache: was gerade gilt oder was der nächste Schritt ist.
 *   3. Verläufe auf Bedienelementen sind aus der Mode gekommen, weil sie
 *      Aufmerksamkeit binden, ohne etwas zu erklären. Flächen sind ruhiger.
 *   4. Sichtbarer Fokus. Wer mit der Tastatur arbeitet, muss sehen, wo er
 *      ist — ein deutlicher Ring, nicht der Standard des Browsers.
 *
 * Was ausdrücklich NICHT geändert wird: Abmessungen, Spaltenbreiten,
 * Rasterdefinitionen. Die Ansage dazu ist eindeutig — „es darf das Format
 * meiner Seite nicht verändern". Hier ändern sich Farben, Radien, Schatten,
 * Schriftschnitte und Zustände, nicht die Anordnung.
 */

/* ── Grundlagen ─────────────────────────────────────────────────────────── */

:root {
  /* Neutrale mit leichtem Blaustich — reines Grau wirkt in großen Flächen
     stumpf, ein Hauch Farbe lässt es lebendig erscheinen, ohne aufzufallen. */
  --bg: #f5f6f8;
  --card: #ffffff;
  --card2: #f0f2f5;
  --raise: #ffffff;
  --raise2: #f7f8fa;
  --chrome: #eceef1;
  --chrome2: #e6e9ed;
  --fg: #1c1f23;
  --muted: #6b7280;
  --border: #e2e5ea;

  /* Ein Blau, das auf Weiß trägt und auf Dunkel nicht grell wird. */
  --accent: #0a84ff;
  --accent2: #0069d9;
  --accent-fg: #ffffff;
  --hover: #f0f4f9;

  --ok: #2f9e44;
  --warn: #c2820a;
  --danger: #d93a2b;

  /* Flächen statt Verläufe. Die Namen bleiben, damit vorhandene Regeln
     weiterhin greifen — nur ihr Inhalt ist jetzt einfarbig. */
  --grad-card: var(--card);
  --grad-raise: var(--raise);
  --grad-chrome: var(--chrome);
  --grad-accent: var(--accent);

  /* Radien: größer und einheitlicher. 10 px für Karten, 8 für Bedienteile,
     6 für Kleinteile — darunter wirkt es eckig, darüber verspielt. */
  --r1: 10px;
  --r2: 8px;
  --r3: 6px;

  /* Schatten: weit und schwach statt eng und dunkel. Ein Schatten soll die
     Ebene zeigen, nicht die Kante betonen. */
  --s1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --s2: 0 2px 4px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.07);
  --s3: 0 8px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.05);
  --glass: rgba(255,255,255,.6);

  --fokus: 0 0 0 3.5px color-mix(in srgb, var(--accent) 28%, transparent);
}

:root:not([data-theme="hell"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  /*
   * „hell", nicht „light".
   *
   * Diese Datei stammt aus dem Kassenprojekt und prüfte auf
   * `data-theme="light"`. Dieses Dashboard schreibt aber „hell" hinein —
   * die Abfrage traf also NIE zu, und der Block galt auch bei
   * ausdrücklich gewähltem hellem Thema. Auf einem Gerät mit dunkler
   * Systemeinstellung mischten sich dadurch beide Themen.
   *
   * Ein Wort, und es sieht im Quelltext völlig richtig aus.
   */
  :root:not([data-theme="hell"]) {
    --bg: #1b1d21;
    --card: #26292e;
    --card2: #202327;
    --raise: #2b2f35;
    --raise2: #24272c;
    --chrome: #212429;
    --chrome2: #1c1f23;
    --fg: #edeef0;
    --muted: #9aa1ab;
    --border: #343941;
    --accent: #3d9bff;
    --accent2: #1e7ce0;
    --accent-fg: #ffffff;
    --hover: #2c3138;
    --ok: #5fd07a;
    --warn: #e0b050;
    --danger: #ff6b5c;
    --grad-card: var(--card);
    --grad-raise: var(--raise);
    --grad-chrome: var(--chrome);
    --grad-accent: var(--accent);
    --glass: rgba(255,255,255,.06);
    --s1: 0 1px 2px rgba(0,0,0,.30);
    --s2: 0 2px 8px rgba(0,0,0,.35);
    --s3: 0 10px 30px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #1b1d21; --card: #26292e; --card2: #202327;
  --raise: #2b2f35; --raise2: #24272c;
  --chrome: #212429; --chrome2: #1c1f23;
  --fg: #edeef0; --muted: #9aa1ab; --border: #343941;
  --accent: #3d9bff; --accent2: #1e7ce0; --accent-fg: #ffffff;
  --hover: #2c3138; --ok: #5fd07a; --warn: #e0b050; --danger: #ff6b5c;
  --grad-card: var(--card); --grad-raise: var(--raise);
  --grad-chrome: var(--chrome); --grad-accent: var(--accent);
  --glass: rgba(255,255,255,.06);
  --s1: 0 1px 2px rgba(0,0,0,.30);
  --s2: 0 2px 8px rgba(0,0,0,.35);
  --s3: 0 10px 30px rgba(0,0,0,.45);
  color-scheme: dark;
}

/* ── Schrift ────────────────────────────────────────────────────────────── */

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, system-ui, sans-serif;
  /* Etwas mehr Zeilenhöhe: Der Bildschirm wird über Stunden gelesen. */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
}

h1, h2, h3, .homehead h2 {
  letter-spacing: -0.015em;   /* Große Schrift wirkt sonst auseinandergezogen */
  font-weight: 640;
}

/* ── Flächen: Karte, Kachel, Blatt ──────────────────────────────────────── */

.card, .kpi, .bonsheet, .hgleiste, .mdkachel, .ofkarte, .mdschl {
  background: var(--card);
  border-radius: var(--r1);
  box-shadow: var(--s1);
}

/* Der Rahmen verschwindet — die Ebene trägt jetzt. Nur dort, wo eine Karte
   auf gleicher Helligkeit liegt, bleibt eine feine Linie. */
.card, .kpi, .ofkarte, .mdschl {
  border: none;
}

.awgesamt {
  background: var(--card);
  border: none;
  border-radius: var(--r1);
  box-shadow: var(--s1);
}

/* ── Bedienteile ────────────────────────────────────────────────────────── */

.btn, .btn2, button.chip, .btn-ghost {
  border-radius: var(--r2);
  font-weight: 550;
  letter-spacing: -0.005em;
  transition: background-color .12s ease, box-shadow .12s ease,
              transform .06s ease;
}

.btn {
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  box-shadow: var(--s1);
}
.btn:hover { background: var(--accent2); }
/* Ein Hauch Nachgeben beim Drücken — das ist die einzige Bewegung, die eine
   Oberfläche wirklich braucht. */
.btn:active { transform: scale(.985); }

.btn2, .btn-ghost {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  box-shadow: var(--s1);
}
.btn2:hover, .btn-ghost:hover { background: var(--hover); }
.btn2:active, .btn-ghost:active { transform: scale(.985); }

/* Fokus: sichtbar, überall gleich, nie unterdrückt. */
.btn:focus-visible, .btn2:focus-visible, .chip:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.pfreit:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: var(--fokus);
}

input, select, textarea {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  color: var(--fg);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--fokus);
  outline: none;
}

/* ── Chips und Register: ein Segmentschalter ────────────────────────────── */

.chip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg);
  font-weight: 520;
}
.chip:hover { background: var(--hover); }
.chip.an {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-fg);
  box-shadow: none;
}

/*
 * Die Registerleisten (Auswertung, Betrieb, Berichte, Belegblatt) werden zu
 * einem Segmentschalter: eine gemeinsame Mulde, darin eine helle Pille für
 * das gewählte Register. Das ist die Form, an der man auf Anhieb sieht, dass
 * die Auswahl EINE aus mehreren ist — eine Reihe einzelner Knöpfe sagt das
 * nicht.
 */
.prreiter, .pfreiter, .btreiter, .awreiter {
  background: var(--chrome);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  border: none;
}

.pfreit {
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--muted);
  font-weight: 540;
  box-shadow: none;
  transition: background-color .12s ease, color .12s ease;
}
.pfreit:hover { color: var(--fg); background: color-mix(in srgb, var(--card) 55%, transparent); }
.pfreit.an {
  background: var(--card);
  color: var(--fg);
  box-shadow: var(--s1);
}

/* ── Seitenleiste ───────────────────────────────────────────────────────── */

aside {
  background: color-mix(in srgb, var(--chrome) 82%, transparent);
  border-right: 1px solid var(--border);
}

/*
 * Die Unschärfe NUR am breiten Bildschirm.
 *
 * `backdrop-filter` macht sein Element zum Bezugsrahmen für jedes
 * `position: fixed` darin — das ist keine Nebenwirkung, das steht so in der
 * Spezifikation. Unter 900 px ist `aside` die schmale Kopfleiste, und
 * `#mainNav` liegt darin als feste Leiste mit `bottom: 0`. Statt am unteren
 * Bildschirmrand klebte das Menü damit am unteren Rand der 50 Pixel hohen
 * Kopfzeile — auf dem Telefon nicht mehr erreichbar.
 *
 * Am breiten Bildschirm ist `aside` eine volle Spalte ohne festes Kind, dort
 * schadet der Filter nichts.
 */
@media (min-width: 901px) {
  aside {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}

/*
 * Der obere Sicherheitsabstand.
 *
 * Als Web-App auf dem Startbildschirm (`display: standalone`) gibt es keine
 * Adressleiste — der Seiteninhalt beginnt bei Null, also unter Uhr, Empfang
 * und Batterie. Die Kopfleiste mit Namenszug und „Abmelden" lag dadurch zur
 * Hälfte hinter der Statusleiste. `viewport-fit=cover` steht schon im
 * `<meta>`; was fehlte, war der Abstand.
 */
@media (max-width: 900px) {
  aside { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
}

/* Der aktive Eintrag als gefüllte Pille — dieselbe Sprache wie im Register. */
aside a.an, aside .navitem.an, aside button.an {
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--r2);
}

/* ── Tabellen ───────────────────────────────────────────────────────────── */

.bttab, table {
  border-collapse: separate;
  border-spacing: 0;
}
.btkopf, thead th {
  color: var(--muted);
  font-weight: 560;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;   /* Versalien lesen sich in Tabellen schlechter */
}
.btzeile, tbody tr { border-bottom: 1px solid var(--border); }
.btzeile:hover, tbody tr:hover { background: var(--hover); }
.btr, .num { font-variant-numeric: tabular-nums; }

/* ── Blätter und Überlagerungen ─────────────────────────────────────────── */

.modal-bg {
  background: rgba(16,20,26,.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.bonsheet, .modal, .sheet {
  border-radius: 14px;
  box-shadow: var(--s3);
  border: none;
}

/* ── Kleinteile ─────────────────────────────────────────────────────────── */

.hint, .sub { color: var(--muted); }
.empty {
  color: var(--muted);
  background: var(--card2);
  border-radius: var(--r1);
}
.toast {
  border-radius: var(--r2);
  box-shadow: var(--s3);
  backdrop-filter: blur(8px);
}

/* Bewegung nur, wo sie hilft — und gar nicht, wo sie stört. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Die Anmeldemaske: dieselbe Sprache wie drinnen — Ebene statt Rahmen. */
.login-card {
  background: var(--card);
  border: none;
  border-radius: 14px;
  box-shadow: var(--s3);
}
.login-wrap, .login { background: var(--bg); }

/* ══ Zweiter Durchgang: Ansicht für Ansicht ═══════════════════════════════
   Der erste Durchgang hat die Grundlagen gestellt (Ebenen, Flächen, Fokus).
   Was jetzt folgt, ist die Feinarbeit an den einzelnen Bauteilen — in der
   Reihenfolge, in der man sie beim Arbeiten trifft. */

/* ── Die Zeitraumleiste ─────────────────────────────────────────────────────
   Sie steht über allem und wird bei jeder Frage benutzt. Bisher war sie eine
   Reihe gleichrangiger Knöpfe; jetzt ist sie eine eigene Fläche, die sich vom
   Inhalt abhebt — mit dem gewählten Zeitraum als einziger farbiger Stelle.

   Der Grund für die eigene Fläche: Diese Leiste gehört zum Rahmen, nicht zum
   Inhalt. Wenn sie aussieht wie der Inhalt, sucht man sie beim Wechsel der
   Ansicht jedes Mal neu. */
#zrBar {
  background: color-mix(in srgb, var(--chrome) 70%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}
.zrleiste { gap: 4px; }
.zrleiste .chip, .awsort .chip {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-weight: 530;
  border-radius: 7px;
}
.zrleiste .chip:hover, .awsort .chip:hover {
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border-color: transparent;
  color: var(--fg);
}
.zrleiste .chip.an, .awsort .chip.an {
  background: var(--card);
  border-color: transparent;
  color: var(--fg);
  box-shadow: var(--s1);
}
.zrspanne { color: var(--fg); font-weight: 560; }

/* ── Kacheln der Übersicht ──────────────────────────────────────────────────
   Eine Kennzahl ist eine Zahl mit einer Bezeichnung — mehr nicht. Deshalb:
   die Bezeichnung klein und ruhig darüber, die Zahl groß und in tabellarischen
   Ziffern, der Zusatz darunter. Keine Rahmen, keine Verläufe, keine Farbe
   außer dort, wo sie etwas bedeutet. */
.kpi, .panel {
  background: var(--card);
  border: none;
  border-radius: var(--r1);
  box-shadow: var(--s1);
}
.kpi .lbl, .lbl {
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: .01em;
}
.kpi .val, .val, .num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-weight: 640;
}
.awgfeld { border: none; }
.awgt { color: var(--muted); font-size: 11.5px; font-weight: 560; }
.awgv { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.awgf { color: var(--muted); }

/* Trennlinien zwischen Kacheln: eine Haarlinie reicht. */
.btrenn, .awgesamt .awgfeld + .awgfeld { border-color: var(--border); }

/* ── Listen und Zeilen ──────────────────────────────────────────────────────
   Zeilen, die man anklicken kann, sollen das zeigen — aber erst beim
   Hinzeigen, nicht dauerhaft. Ein Zebrastreifenmuster über eine ganze Tabelle
   ist Lärm; eine Linie und ein Wechsel beim Überfahren genügen. */
.rowitem, .bzeile, .rowlist > * {
  border-radius: var(--r3);
  transition: background-color .1s ease;
}
.rowitem:hover, .bzeile:hover { background: var(--hover); }

/* ── Werkzeugzeilen ─────────────────────────────────────────────────────── */
.toolbar { gap: 8px; align-items: center; }
.btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--fg);
}
.btn-ghost:hover { background: var(--hover); }

/* ── Suchfelder ─────────────────────────────────────────────────────────────
   Ein Suchfeld ist rund — das ist seit dreißig Jahren die Form, an der man es
   erkennt, ohne zu lesen. */
input[type="search"], .blsuche {
  border-radius: 999px;
  background: var(--card2);
  border: 1px solid transparent;
  padding-left: 14px;
}
input[type="search"]:focus, .blsuche:focus {
  background: var(--card);
  border-color: var(--accent);
}

/* ── Der Bon ────────────────────────────────────────────────────────────────
   Er darf ruhig nach Papier aussehen — das ist hier keine Verzierung, sondern
   die schnellste Art zu zeigen, dass man einen Beleg vor sich hat und keine
   Tabelle. */
.bonsheet { background: var(--card); }
.bonrule { border-color: var(--border); }
.bonmeta { color: var(--muted); }

/* ── Ladezustand ───────────────────────────────────────────────────────────
   „Lädt …" als Text ist ein Platzhalter für nichts. Ein ruhiges Pulsieren
   sagt dasselbe, ohne zu lesen zu geben. */
.loading {
  color: var(--muted);
  animation: awpuls 1.4s ease-in-out infinite;
}
@keyframes awpuls { 0%,100% { opacity:.45 } 50% { opacity:.9 } }

/* ── Abstände auf ein Raster ────────────────────────────────────────────────
   Acht Punkte, durchgehend. Der Wert selbst ist beliebig — dass es überall
   derselbe ist, macht den Unterschied. */
#content { padding: 24px; }
.homehead { margin-bottom: 20px; }
.homehead h2 { font-size: 22px; margin: 0 0 4px; }
.homehead p { color: var(--muted); margin: 0; }

/* ── Nachtrag zum zweiten Durchgang ─────────────────────────────────────────
   Drei Dinge, die erst im Standbild auffielen. Genau dafür steht in CLAUDE.md,
   dass man einen Druckstil nicht durch Lesen prüft — dasselbe gilt für den
   Bildschirm. */

/* 1 · Eine Karte in einer Karte ist keine Karte mehr.
   `.awgfeld` hatte im ersten Durchgang selbst Fläche und Schatten bekommen und
   saß damit als weißes Kästchen in der weißen Gesamtleiste. Ein Feld ist ein
   Feld: Es trägt Text, keine Ebene. Getrennt wird mit einer Haarlinie. */
.awgesamt { gap: 0; padding: 14px 4px; align-items: stretch; }
.awgfeld {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 20px;
  justify-content: center;
}
.awgfeld + .awgfeld { border-left: 1px solid var(--border); }

/* 2 · Die Leitzahl ist keine Werbefläche.
   Der Verlauf im Text (`-webkit-text-fill-color:transparent`) machte den
   Umsatz blau — die einzige Farbe auf dem Bildschirm, und sie bedeutete
   nichts. Farbe soll hier heißen „das ist anklickbar" oder „das stimmt
   nicht". Größe allein sagt „das ist die wichtigste Zahl", und zwar
   deutlicher. */
.awgfeld:first-child .awgv {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--fg);
  font-size: 30px;
  font-weight: 660;
}
.awgv { font-size: 21px; font-weight: 620; }

/* 3 · Der Schimmer über der Seite.
   Drei farbige Kreise lagen über den obersten 320 Pixeln; im Standbild lief
   der Hintergrund von Blau über Grün nach Grau. Fort will ich ihn nicht — er
   gibt dem Kopf Tiefe —, aber auf ein Viertel der Stärke und nur noch in
   einem Ton. */
body::before {
  height: 220px;
  background: radial-gradient(70% 100% at 20% 0%,
    color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 78%);
}

/* Überschriften in Karten: klein, ruhig, mit Luft darunter. */
.panel > b:first-child, .card > b:first-child {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02em;
  margin-bottom: 10px;
}

/* ── Listenzeilen sind Zeilen, keine Knöpfe ─────────────────────────────────
   `.rowitem`, `.tlrow` und `.fnitem` trugen denselben erhabenen Verlauf wie
   die Knöpfe. Vier Zahlarten untereinander sahen dadurch aus wie vier
   Schaltflächen, die man drücken soll. Eine Liste ist flach; getrennt wird
   mit einer Haarlinie, hervorgehoben wird beim Überfahren. */
.rowitem, .tlrow, .fnitem {
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.rowlist { gap: 0; }
.rowlist > * + * { border-top: 1px solid var(--border); }
.rowitem { padding: 9px 4px; }
.rowitem:hover, .tlrow:hover, .fnitem:hover {
  background: var(--hover);
  border-radius: var(--r3);
}
.rowitem .val { font-weight: 600; }

/* Der Schimmer noch eine Stufe leiser — bei 7 % zeichnete sich seine
   Unterkante im Standbild noch als Kante ab. */
body::before { height: 260px; }

/* ── Die Auswertungstabelle ─────────────────────────────────────────────────
   Vier Nachbesserungen, alle im Standbild aufgefallen.

   1 · Der Anteilsbalken lag INNERHALB von `.awlabel` — und das ist nur so
   breit wie sein Text. Ein Balken, der bei 100 % genau bis zum Ende des Wortes
   „Speisen" reicht, misst nichts; er sah aus wie eine Textmarkierung. Er
   gehört an die Zeile. `.awlabel` gibt dafür seinen Bezugspunkt ab, dann
   spannt der Balken über die volle Zeilenbreite und der Anteil ist wieder
   ablesbar. Dafür muss er blasser werden: Er liegt jetzt auch unter den
   Zahlen. */
.awlabel { position: static; }
.awzeile .awbalken {
  top: 0; bottom: 0; height: auto; transform: none;
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* 2 · Zahlen in Grau sind schwer zu lesen — und in einer Auswertung sind die
   Zahlen der Inhalt. Sie bekommen die Textfarbe; grau bleibt nur, was
   erklärt. */
.awz {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.awz.stark { font-weight: 620; }
.awkopfz .awz, .awkopfz > span { color: var(--muted); }

/* 3 · Der Aufklapp-Pfeil war ein Knopf mit Rahmen und Verlauf — in einer
   Liste mit vierzig Zeilen sind das vierzig kleine Kästchen. Ein Dreieck
   genügt; es dreht sich beim Öffnen. */
.awauf {
  border: none;
  background: none;
  box-shadow: none;
  color: var(--muted);
  width: 22px;
}
.awauf:hover { background: var(--hover); color: var(--fg); }

/* 4 · Die Tabelle als Karte, nicht als umrandeter Kasten. */
.awtabelle {
  background: var(--card);
  border: none;
  border-radius: var(--r1);
  box-shadow: var(--s1);
}
.awzeile { border-bottom-color: var(--border); }
.awzeile:hover { background: var(--hover); }

/* ── Der Segmentschalter ist so breit wie seine Register ───────────────────
   Er lief über die ganze Spalte, weil er ein Block ist. Ein Schalter, der
   rechts einen halben Meter leere Rille zeigt, sieht aus wie eine Leiste, in
   der etwas fehlt. */
.prreiter, .pfreiter, .btreiter, .awreiter {
  width: fit-content;
  max-width: 100%;
}

/* ── Die Belegliste ─────────────────────────────────────────────────────────
   Sechs Belege sahen aus wie sechs schwebende Karteikarten; bei fünfzig
   geladenen Zeilen ist das ein Stapel, kein Verzeichnis. Eine Liste ist EIN
   Blatt mit Zeilen darauf. Der Klickreiz muss trotzdem erkennbar bleiben —
   dafür sorgt das Hervorheben beim Überfahren, nicht ein Rahmen um jede
   Zeile. */
.blliste {
  gap: 0;
  background: var(--card);
  border-radius: var(--r1);
  box-shadow: var(--s1);
  overflow: hidden;
}
.blz {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 11px 16px;
}
.blz + .blz { border-top: 1px solid var(--border); }
.blz:hover {
  background: var(--hover);
  border-color: transparent;
  transform: none;   /* das seitliche Verrutschen ließ die Haarlinien springen */
}

/* Die Beträge sind das, wonach man in dieser Liste sucht. */
.blsumme { font-weight: 620; font-size: 14.5px; }
.blnr { font-weight: 600; color: var(--muted); }

/* „Weitere 50 laden" trug einen gestrichelten Rahmen quer über die Seite.
   Gestrichelt heißt in dieser Oberfläche sonst nirgends etwas; es ist ein
   Knopf wie jeder andere, nur ruhig. */
.blmehr {
  border: none;
  background: var(--card);
  box-shadow: var(--s1);
  border-radius: var(--r1);
  color: var(--accent);
  font-weight: 560;
}
.blmehr:hover { background: var(--hover); border-color: transparent; }
.blmehr .sub { color: var(--muted); }

/* ── Die Filterleiste ───────────────────────────────────────────────────────
   Die Beschriftungen standen auf fünf verschiedenen Höhen, weil ein `select`
   höher baut als ein `input` und die Leiste ihre Felder unten ausrichtet. Bei
   gleicher Feldhöhe steht wieder alles auf einer Linie. */
.blfilter {
  background: var(--card);
  border: none;
  border-radius: var(--r1);
  box-shadow: var(--s1);
  align-items: end;
}
.blf select, .blf input {
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r3);
}
.blf > span { font-weight: 600; letter-spacing: .04em; }
.blfilter .chip { height: 32px; align-self: end; }

/* Ein Suchfeld über die volle Seitenbreite ist eine sehr lange Pille. Es
   sucht in einer Liste, nicht in der Welt. */
.blsuchzeile { max-width: 380px; }
.blsuche { width: 100%; height: 34px; }

/* ── Offene Tische ──────────────────────────────────────────────────────────
   Die Angaben einer Kachel brachen mitten im Wort um: „1 Std 12 / Min",
   „30,77 € je / Gast". Schuld ist nicht die Schrift, sondern die Zeile — zwei
   Angaben mit `space-between` in 260 Pixeln. Sie dürfen jetzt umbrechen,
   aber als Ganzes: entweder nebeneinander oder untereinander, nie mitten
   drin. Und die Kacheln bekommen 40 Pixel mehr Grundbreite, damit der Fall
   seltener eintritt. */
.ofgitter { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ofzeile { flex-wrap: wrap; row-gap: 2px; }
.ofzeile > span { white-space: nowrap; }

/* Die Kachel ist eine Karte wie jede andere: keine Linie, sondern eine Ebene.
   Der Wartehinweis bleibt seine Kante — er ist der einzige Grund, warum man
   diese Kachel vor den anderen ansieht. */
.ofkarte { border: none; box-shadow: var(--s1); padding: 14px 16px; }
.ofkarte:hover { box-shadow: var(--s2); }
.ofkarte.wartet { border-left: 3px solid var(--warn); }
.ofbetrag { font-weight: 620; letter-spacing: -0.02em; }
.oftisch b { font-weight: 600; }

/* „War schon abgerechnet" ist ein Befund, kein Nebensatz: Der Betrag fehlt
   so lange im Umsatz. Als Fließtext in Orange las er sich wie eine Fußnote;
   als eigener Block mit Fläche liest er sich wie das, was er ist. */
.ofdoppelt {
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: var(--r3);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--fg);
  font-size: 12.5px;
  line-height: 1.45;
}
.ofwartet { font-weight: 560; }

/* Der Punkt neben „zuletzt 11:52" zeigt, dass Daten fließen. */
.ofpunkt { width: 8px; height: 8px; border-radius: 50%; box-shadow: none; }

/* ── Auswahlfelder an die Eingabefelder angleichen ──────────────────────────
   Ein `select` bringt seinen eigenen Rahmen und Pfeil mit; neben einem
   flachen `input` in derselben Zeile sah es aus wie aus einem anderen
   Programm. Gleiche Fläche, gleiche Ecken, gleicher Fokus — der Pfeil wird
   selbst gezeichnet. */
select {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--card2);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid transparent;
  border-radius: var(--r3);
  padding-right: 26px;
}
select:focus { background-color: var(--card); border-color: var(--accent); }

/* ── Berichte ───────────────────────────────────────────────────────────────
   Die Vorlagenkacheln waren die letzten Elemente mit Rahmen und Verlauf. */
.brkachel {
  border: none;
  background: var(--card);
  box-shadow: var(--s1);
  border-radius: var(--r1);
  padding: 14px 16px;
}
.brkachel:hover { box-shadow: var(--s2); border-color: transparent; }
.brkn { font-weight: 600; font-size: 14.5px; }
.brkb { line-height: 1.45; }

/* Der Zeitraum einer Vorlage stand in der Akzentfarbe. Blau heißt hier
   „anklickbar" — die ganze Kachel ist anklickbar, diese eine Zeile also
   nicht mehr als der Rest. Sie ist eine Angabe: klein, in Versalien, grau. */
.brkz {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .05em;
  font-size: 10.5px;
}

/* ── Die Berichtstabelle ────────────────────────────────────────────────────
   Drei Dinge.

   1 · Die Summenzeile war zweifarbig: „Gesamt" weiß, die Zahlen grau. Grund
   ist ein Spezifitätsstreit — `.brtz:not(:hover) .brtn` (drei Klassen) schlägt
   `.brtgesamt .brtn` (zwei). Die feststehende linke Spalte muss die Fläche
   ihrer Zeile erben, sonst schneidet sie ein weißes Loch hinein. */
.brtabelle {
  border: none;
  border-radius: var(--r1);
  box-shadow: var(--s1);
}
.brtz.brtgesamt .brtn,
.brtz.brtgesamt:not(:hover) .brtn { background: var(--card2); }

/* 2 · Der Tabellenkopf lag auf grauer Fläche. In einer Karte genügt eine
   Linie darunter — die graue Leiste sah aus wie eine zweite Karte im Kopf. */
.brtkopf, .brtecke { background: var(--card); }
.brtkopf { border-bottom: 1px solid var(--border); font-weight: 600; }

/* 3 · In der Summenzeile erbte auch der Vergleichswert das Fett und stand
   dadurch genauso laut da wie die Summe selbst. Der Vergleich ist nachrangig
   — in jeder Zeile, auch in der letzten. */
.brtgesamt .brtv { font-weight: 400; color: var(--muted); }
.brtz { border-top-color: var(--border); }
.brtz:hover { background: var(--hover); }
.brtsumme { background: color-mix(in srgb, var(--accent) 6%, transparent); font-weight: 620; }
.brtw b, .brtn { font-weight: 600; }
.brtgesamt { font-weight: 620; }

/* ── Der Bon ────────────────────────────────────────────────────────────────
   Das Papier lag auf einer weißen Karte, die auf dem unscharfen Hintergrund
   lag — zwei Ebenen, wo eine gemeint ist. Der Bon soll frei im Raum stehen;
   das Papier bringt seinen Schatten selbst mit. */
.bonsheet { background: none; box-shadow: none; border: none; }
.sheetactions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }

/* ── Fenster ────────────────────────────────────────────────────────────────
   Die Knöpfe eines Fensters füllten die ganze Breite und waren dadurch gleich
   groß und gleich wichtig — auch dann, wenn einer davon Daten löscht. Sie
   werden so breit wie ihre Beschriftung und sammeln sich rechts. */
.modal-actions { justify-content: flex-end; }
.modal-actions .btn,
.modal-actions .btn2,
.modal-actions .btn-ghost { flex: 0 0 auto; width: auto; padding: 0 18px; }

/* Ein Knopf, der etwas unwiderruflich entfernt, sieht im Fenster nicht aus
   wie ein Knopf, der etwas berechnet. In der Seite bleibt er zurückhaltend
   (roter Rahmen, weiße Fläche) — dort steht er neben seiner Erklärung. Im
   Bestätigungsfenster ist die Erklärung schon gelesen und es zählt nur noch,
   dass die Hand nicht auf dem falschen Knopf landet: rot gefüllt. */
.modal-actions .gefahr,
.modal-actions .btn2.gefahr {
  background: var(--danger);
  border-color: transparent;
  color: #fff;
  font-weight: 560;
}
.modal-actions .gefahr:hover,
.modal-actions .btn2.gefahr:hover {
  background: color-mix(in srgb, var(--danger) 85%, #000);
}
.modal { border: none; }
.modal h3 { margin-top: 0; }

/* Der Schatten des Bonblatts kam aus `.modal-bg>div` — Klasse plus Element,
   also spezifischer als jede Regel auf `.bonsheet` allein. Er zeichnete einen
   Kasten um den Bon herum, in dem gar nichts steht. Dieselbe Spezifität
   dagegen: Der Bon bringt seinen Schatten selbst mit. */
.modal-bg > .bonsheet { box-shadow: none; background: none; }

/* ── Kästchen und Punkte sind keine Eingabefelder ───────────────────────────
   Die Regel `input, select, textarea { background; border; border-radius }`
   traf auch `type="checkbox"` und `type="radio"`. Aus dem Häkchen neben „nur
   im Haus suchen" wurde dadurch ein breiter weißer Kasten, der die
   Beschriftung daneben auf drei Zeilen drückte. Sie behalten ihr eigenes
   Aussehen und bekommen nur die Akzentfarbe. */
input[type="checkbox"], input[type="radio"] {
  background: none;
  border: none;
  border-radius: 0;
  accent-color: var(--accent);
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  height: auto;
  padding: 0;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}
.hfschalter { white-space: nowrap; }

/* ── KI-Auswertung ──────────────────────────────────────────────────────────
   Die Karten trugen noch Rahmen, und in ihnen saßen die Zahlen in weiteren
   kleinen umrandeten Kästchen — drei Rahmenstärken auf engem Raum. Die Karte
   wird zur Ebene, die Zahlen zu Feldern mit ruhiger Fläche. */
.kikarte {
  background: var(--card);
  border: none;
  border-radius: var(--r1);
  box-shadow: var(--s1);
  padding: 16px 18px;
}
.kikarte:hover { box-shadow: var(--s2); border-color: transparent; transform: none; }
.kititel { font-weight: 600; font-size: 14.5px; }
.kiz {
  background: var(--card2);
  border: none;
  border-radius: var(--r3);
  font-weight: 560;
}
.kiz b { font-weight: 620; letter-spacing: -0.01em; }
.kirat { background: var(--card2); border-left-color: var(--accent); }
.kideutung {
  background: var(--card);
  border: none;
  border-radius: var(--r1);
  box-shadow: var(--s1);
  font-size: 13.5px;
}

/* ── Hilfe ──────────────────────────────────────────────────────────────── */
.hfkarte, .hffund {
  background: var(--card);
  border: none;
  border-radius: var(--r1);
  box-shadow: var(--s1);
}
.hffund { margin-bottom: 8px; }
.hffkopf:hover { background: var(--hover); }
.hfft { font-weight: 600; }

/* Die Knöpfe eines Fensters hatten durch `padding: 0 18px` ihre Höhe
   verloren — sie standen als flache Streifen da. */
.modal-actions .btn,
.modal-actions .btn2,
.modal-actions .btn-ghost { min-height: 34px; }

/* ── Der Prüfbogen ──────────────────────────────────────────────────────────
   Das Blatt hatte keine eigene Fläche — es lag durchscheinend über der
   unscharfen Seite, und der graue Kopfblock darin sah aus, als gehöre er zum
   Hintergrund. Ein Blatt ist ein Blatt. */
.pfblatt {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--s3);
  padding-bottom: 4px;
}
.pfkopf { background: var(--card2); border: none; border-radius: var(--r1); }
.pfk b { font-weight: 620; }
.pfzeile { border-bottom-color: var(--border); }
.pfzeile.klick:hover { background: var(--hover); }
.pfart { font-weight: 600; letter-spacing: .06em; }
.pfbetrag { font-weight: 600; }
.pfger { background: var(--card2); border-radius: 999px; }
.pfreit { background: var(--card2); border-color: transparent; }
.pfreit .pfz { background: var(--card); color: var(--muted); }
/* Der Zähler im aktiven Register war weiß auf Blau gedacht. Seit der aktive
   Reiter im Segmentschalter weiß ist, stand er weiß auf Weiß — die Zahl war
   schlicht weg. Eine Regel, die nur zur alten Farbe passte. */
.pfreit.an .pfz { background: var(--card2); color: var(--muted); }

/* Das Fenster war unten grau angelaufen, weil `.modal` einen Verlauf von
   `--card` nach `--card2` trägt. Eine Fläche. */
.modal { background: var(--card); }