/**
 * Die neue Oberfläche.
 *
 * Liegt über `app.css` und `mac.css` und gestaltet die Anwendung neu — nicht
 * als Korrektur einzelner Stellen, sondern als eigene Sprache. Der Rückweg
 * bleibt eine Zeile: das `<link>` in der index.html entfernen, dann ist alles
 * wie zuvor.
 *
 * **Woher der Eindruck kam.** Gemessen an der alten Fassung: 69 Verläufe,
 * 107 Schattenregeln, eine innere Lichtkante auf jeder Fläche, Versalien in
 * jedem Tabellenkopf. Das ist die Sprache der Reliefzeit — Flächen, die aus
 * dem Bildschirm treten wollen, und Tabellen, die wie Formulare aussehen.
 *
 * **Was stattdessen gilt**, aus der Recherche zu Linear, Vercel und Stripe:
 *
 *   1. **Ein Haarstrich statt Relief.** `box-shadow: 0 0 0 1px` bei sieben
 *      Prozent — kein `border`, damit beim Hervorheben nichts um einen Pixel
 *      springt. Tiefe entsteht durch Abstand, nicht durch Schatten.
 *   2. **Die Zahl führt.** 29 px, halbfett, eng gesetzt; ihre Beschriftung
 *      13 px und leise. Wer auf die Seite sieht, findet zuerst den Wert.
 *   3. **Eine Farbe für Bedienbares** (Indigo), zwei für Richtungen (Grün,
 *      Rot). Alles andere ist Grau in fünf Stufen. Warengruppen bekommen
 *      eine eigene, ruhige Reihe — sie sind Kategorien, keine Wertung.
 *   4. **Luft.** 14 px zwischen Karten, 20 px darin. Enger wird es nur auf
 *      dem Handy.
 *
 * Die Veränderung steht als Pille neben der Beschriftung, nicht darunter:
 * Dort liest man sie zusammen mit dem, worauf sie sich bezieht.
 */

:root {
  --n-grund: #f6f7f9;
  --n-flaeche: #ffffff;
  --n-strich: rgba(17, 24, 39, .07);
  --n-strich-stark: rgba(17, 24, 39, .13);
  --n-text: #0b1220;
  --n-leise: #5b6472;
  --n-sehrleise: #9aa3af;
  --n-akzent: #4f46e5;
  --n-akzent-hell: #6366f1;
  --n-akzent-leise: rgba(79, 70, 229, .09);
  --n-gut: #0f9d58;
  --n-gut-leise: rgba(15, 157, 88, .10);
  --n-ab: #e5484d;
  --n-ab-leise: rgba(229, 72, 77, .10);
  --n-r: 16px;
  --n-rk: 10px;

  /* Die Merkmale von app.css auf die neue Sprache umlegen — so folgt auch,
     was hier nicht einzeln genannt ist. */
  --bg: var(--n-grund);
  --card: var(--n-flaeche);
  --card2: #f2f4f7;
  --fg: var(--n-text);
  --muted: var(--n-leise);
  --border: var(--n-strich);
  --accent: var(--n-akzent);
  --accent2: #4338ca;
  --accent-fg: #ffffff;
  --hover: #f7f8fa;
  --ok: var(--n-gut);
  --danger: var(--n-ab);
  --grad-card: var(--n-flaeche);
  --grad-raise: var(--n-flaeche);
  --grad-chrome: var(--n-flaeche);
  --grad-accent: linear-gradient(180deg, var(--n-akzent-hell), var(--n-akzent));
  --kante: none;
  --r1: var(--n-rk);
  --r2: 12px;
  --r3: var(--n-r);
}

@media (prefers-color-scheme: dark) {
  /*
   * `:not([data-theme="hell"])` ist hier PFLICHT, nicht Feinschliff.
   *
   * Auf blossem `:root` greift dieser Block auch dann, wenn jemand
   * ausdrücklich das helle Thema gewählt hat — die Wahl steht in
   * `data-theme`, und ohne die Abfrage liest sie hier niemand. Ergebnis am
   * 07.09.2026 auf einem Gerät mit dunkler Systemeinstellung und gewähltem
   * hellem Thema: Kopfzeile weiss, Filterleiste und Rechnungszeilen
   * dunkel — zwei Themen auf einem Bildschirm.
   *
   * Aufgefallen ist es erst nach dem Umbau, weil die neue Form mehr Flächen
   * über diese Merkmale bezieht. Der Fehler ist älter.
   */
  :root:not([data-theme="hell"]) {
    --n-grund: #0b0e13;
    --n-flaeche: #141922;
    --n-strich: rgba(255, 255, 255, .08);
    --n-strich-stark: rgba(255, 255, 255, .15);
    --n-text: #e9edf3;
    --n-leise: #98a2b3;
    --n-sehrleise: #6b7280;
    --n-akzent: #818cf8;
    --n-akzent-hell: #a5b4fc;
    --n-akzent-leise: rgba(129, 140, 248, .14);
    --n-gut: #34d399;
    --n-gut-leise: rgba(52, 211, 153, .12);
    --n-ab: #f87171;
    --n-ab-leise: rgba(248, 113, 113, .12);
    --card2: #1b212c;
    --hover: #1a202a;
    --accent-fg: #0b0e13;
  }
}

body { background: var(--n-grund); color: var(--n-text); }

/* ── Flächen ─────────────────────────────────────────────────────────────── */
.awskarte, .awsbau, .awstab, .awskachel, .awsfrage,
.panel, .kachel, .zikarte, .sofeld, .bttab, .rbtab, .tstab, .sttab, .stgruppen {
  background: var(--n-flaeche) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: 0 0 0 1px var(--n-strich) !important;
  border-radius: var(--n-r) !important;
}
.awskarte { padding: 20px 22px; }
.awsgitter, .awsgitter3 { gap: 14px; margin-top: 14px; }

.modal, .bonsheet, .sheet {
  background: var(--n-flaeche) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 0 0 1px var(--n-strich),
              0 24px 60px -16px rgba(11, 18, 32, .22) !important;
}

/* ── Schrift ─────────────────────────────────────────────────────────────── */
.btkopf, .stkopf, .awgt, .rowtrenner, .btzt, .kalmtitel,
.awskarte h4, .stbt, .awsgruppe, .awslabel, th, .awstab th {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.awskarte h4, .stbt { font-size: 15px; font-weight: 620; color: var(--n-text); margin-bottom: 16px; }
h1, h2, h3 { letter-spacing: -.02em; }
.btzeile, .btkopf, .stz, .awsz, .awsbz, .kalz, td, th, .awgv, .awsz .z {
  font-variant-numeric: tabular-nums;
}

/* ── Register ────────────────────────────────────────────────────────────── */
.awsreiter { border-bottom: 1px solid var(--n-strich); gap: 26px; margin-bottom: 22px; }
.awsreit, .pfreit {
  border: 0; background: none !important; border-radius: 0;
  padding: 0 0 13px; font-size: 14.5px; font-weight: 500; color: var(--n-sehrleise);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.awsreit:hover, .pfreit:hover { color: var(--n-text); }
.awsreit.an, .pfreit.an {
  color: var(--n-text) !important; font-weight: 620;
  border-bottom-color: var(--n-akzent) !important; background: none !important;
}
.prreiter { border-bottom: 1px solid var(--n-strich); gap: 26px; }

/* ── Chips ───────────────────────────────────────────────────────────────── */
.awschip.wahl {
  background: transparent; border: 1px solid var(--n-strich-stark);
  color: var(--n-leise); border-radius: 20px; padding: 6px 13px;
  font-size: 13px; font-weight: 500;
}
.awschip.wahl:hover { border-color: var(--n-akzent); color: var(--n-akzent); }
.awschip.wahl.an {
  background: var(--n-akzent); border-color: var(--n-akzent);
  color: #fff; font-weight: 560;
}
.awschip.wahl.gesperrt { opacity: .32; border-style: dashed; }
.awslabel { font-size: 13px; font-weight: 500; color: var(--n-sehrleise); }
.awsbau { padding: 18px 22px; gap: 14px; }

/* ── Diagramm ────────────────────────────────────────────────────────────── */
.awschart { gap: 9px; padding-top: 8px; }
.awsbal i { border-radius: 6px 6px 0 0; }
.awsbal i.jetzt {
  background: linear-gradient(180deg, var(--n-akzent-hell), var(--n-akzent));
  left: 20%; right: 20%;
}
.awsbal i.vor { background: var(--card2); opacity: 1; }
.awsbal em { color: var(--n-sehrleise); font-size: 11px; }
.awsbal .awswerte b { color: var(--n-leise); font-weight: 620; font-size: 10.5px; }
.awsbal .awswerte s { color: var(--n-sehrleise); }
.awslegende i.jetzt { background: var(--n-akzent); }
.awslegende i.vor { background: var(--card2); }

/* ── Tabellen und Listen ─────────────────────────────────────────────────── */
.awstab table { border-collapse: collapse; }
.awstab th {
  background: transparent; font-size: 12.5px; font-weight: 550;
  color: var(--n-sehrleise); border-bottom: 1px solid var(--n-strich);
  padding: 13px 20px;
}
.awstab td {
  border-bottom: 1px solid var(--n-strich); padding: 14px 20px;
  font-size: 14px; color: var(--n-text);
}
.awstab tbody tr:last-child td { border-bottom: 0; }
.awstab tbody tr:hover td { background: var(--hover); }
.awstab tr.summe td { border-top: 1px solid var(--n-strich-stark); font-weight: 640; }
.awstab .bar, .awsbz .bar, .stz .bar {
  background: var(--card2); height: 6px; border-radius: 3px; overflow: hidden;
}
.awstab .bar i, .awsbz .bar i, .stz .bar i {
  background: var(--n-akzent); opacity: .8; border-radius: 3px;
}
.awsz, .awsbz, .stz { border-bottom: 1px solid var(--n-strich); padding: 12px 0; font-size: 14px; }
.awsz .klein, .awsbz .klein { color: var(--n-sehrleise); }

/* Die Betriebstabellen tragen ihre Zeilen selbst — dort nur die Ränder
   angleichen, nicht das Raster anfassen. */
.btkopf { background: transparent !important; color: var(--n-sehrleise); font-size: 12.5px; }
.btzeile { border-top: 1px solid var(--n-strich); font-size: 13.5px; }
.btzeile.btsumme { background: transparent; border-top: 1px solid var(--n-strich-stark); }
.btwert i { background: var(--n-akzent) !important; opacity: .18; }

/* ── Kacheln ─────────────────────────────────────────────────────────────── */
.awskachel { padding: 18px 20px; gap: 7px; }
.awskachel:hover { box-shadow: 0 0 0 1px var(--n-akzent) !important; }
.awskachel .t { font-size: 15px; font-weight: 620; }
.awskachel .s { font-size: 13px; color: var(--n-leise); line-height: 1.5; }
.awskachel .zr { font-size: 12px; color: var(--n-sehrleise); }
.awsgruppe { font-size: 15px; font-weight: 620; color: var(--n-text); }

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
.btn2, .btn-primary, button.primary {
  background: var(--n-akzent) !important; background-image: none !important;
  border: 0 !important; color: #fff !important; border-radius: var(--n-rk) !important;
  font-weight: 560; box-shadow: none !important;
}
.btn2:hover, .btn-primary:hover { background: var(--accent2) !important; }
.btn-ghost, .btn-secondary {
  background: transparent !important; box-shadow: 0 0 0 1px var(--n-strich) !important;
  border: 0 !important; color: var(--n-leise) !important; border-radius: var(--n-rk) !important;
}

/* ── Eingaben ────────────────────────────────────────────────────────────── */
input, select, textarea, .blsuche, .awsverg select, .awstagwahl input {
  background: var(--n-flaeche) !important; background-image: none !important;
  border: 0 !important; box-shadow: 0 0 0 1px var(--n-strich) !important;
  border-radius: var(--n-rk) !important; color: var(--n-text) !important;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 1px var(--n-akzent), 0 0 0 4px var(--n-akzent-leise) !important;
  outline: none !important;
}

/* ── Seitenleiste und Kopf ───────────────────────────────────────────────
   Stehen vollstaendig in TEIL 2. Was hier stand, gab `aside` und `#topbar`
   eine weisse Flaeche mit umlaufendem Haarstrich — im Bild ein Kasten um die
   Kopfzeile, der den Untertitel durchschnitt. Zwei Stellen fuer dieselbe
   Sache sind eine zu viel. */
.altschild { background: var(--card2); border-color: transparent; }

/* Die Zeitraumleiste in derselben Sprache. */
#zrBar, .zrleiste { background: none !important; box-shadow: none !important; border: 0 !important; }
.zrknopf, .zrbtn {
  border-radius: var(--n-rk) !important; background: var(--n-flaeche) !important;
  box-shadow: 0 0 0 1px var(--n-strich) !important; border: 0 !important;
}
.zrknopf.an, .zrbtn.an {
  background: var(--n-akzent) !important; color: #fff !important;
  box-shadow: none !important;
}

@media (max-width: 640px) {
  .awgesamt { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .awgv { font-size: 24px; }
  .awskarte { padding: 16px 17px; }
  .awsreiter { gap: 18px; }
}

/* Die zusätzlichen Kennzahlen liegen im selben Raster und werden nur
   ausgeblendet — so bleibt die Spaltenbreite gleich, egal wie viele
   sichtbar sind. */
.awgesamt.nurwichtige .awgfeld.weitere { display: none; }
.awsmehrschalter {
  border: 0; background: none; font: inherit; font-size: 13px;
  color: var(--n-akzent); cursor: pointer; padding: 12px 2px 0; font-weight: 500;
}
.awsmehrschalter:hover { text-decoration: underline; }

/* Der Hinweistext darf die Karte nicht sprengen — zwei Zeilen, dann Schluss.
   Vollständig steht er im Titel. */
.awgesamt .awgfeld { overflow: hidden; }


/* ── Skalierung ────────────────────────────────────────────────────────────
 *
 * Ohne Obergrenze läuft der Inhalt auf jede Bildschirmbreite auseinander.
 * Bei 2560 px standen neun Kennzahlen in einer Reihe: jede Karte doppelt so
 * breit wie ihr Inhalt, die Zahl klebte links, rechts blieb Leere. Die
 * Balken wurden handbreit, und in den Listen lagen Name und Betrag so weit
 * auseinander, dass das Auge die Zeile verliert.
 *
 * Zwei Grenzen, mehr braucht es nicht:
 *
 *   1. Der Inhalt hört bei 1680 px auf und steht dann mittig. Das ist die
 *      Breite, ab der eine Textzeile nicht mehr in einem Blick erfassbar ist.
 *   2. Einzelne Karten haben eine eigene Höchstbreite. So entsteht bei mehr
 *      Platz eine weitere ZEILE statt breiterer Kacheln — mehr Übersicht
 *      statt mehr Leerraum.
 */
#content {
  max-width: 1680px;
  margin: 0 auto;
  width: 100%;
}

/* Kennzahlen: höchstens 300 px je Karte, danach wird umgebrochen.
   `display:grid` gehoert dazu — in app.css ist `.awgesamt` ein Flex-Kasten,
   und ohne die Umstellung war die Spaltenangabe wirkungslos. Sichtbar wurde
   das erst in den offenen Tischen, die dieselbe Leiste benutzen: Dort trugen
   die vier Felder lange Untertitel, die Zeile passte nicht mehr, und statt
   umzubrechen schrumpften alle vier auf die Breite von vier Buchstaben —
   „Offe", „Tisc", „Gäs", „Posi". */
.awgesamt {
  display: grid;
  /* `1fr` statt einer Hoechstbreite: Mit `minmax(206px,300px)` passten bei
     1.080 px Inhaltsbreite drei Felder in die Zeile, das vierte brach um und
     stand allein darunter — daneben 180 px Leerraum. Gegen das Auslaufen auf
     breiten Schirmen steht die Grenze an #content, dafuer braucht es hier
     keine zweite. */
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  align-items: start;
  gap: 6px 22px;
  background: var(--n-grund) !important;
  background-image: none !important;
  border: 0 !important; box-shadow: none !important;
  border-radius: var(--n-r) !important;
  padding: 14px 18px !important;
}
.awgesamt .awgfeld { border: 0 !important; }

/* Ein Balken wird nicht breiter als 64 px — darüber wirkt er wie eine
   Fläche, nicht wie ein Wert. */
.awsbal { max-width: 78px; }
.awschart { justify-content: flex-start; }

/* In den Listen bleibt der Betrag beim Namen: Der Balken darf wachsen, die
   Spalten daneben nicht. */
.awsbz { grid-template-columns: minmax(0, 1fr) minmax(80px, 220px) 104px 52px; }
.awsz { grid-template-columns: minmax(0, 1fr) 72px 104px; }
.awsgitter { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }

/* Sehr breite Schirme: lieber drei Karten nebeneinander als zwei sehr
   breite. */
@media (min-width: 1500px) {
  .awsgitter3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Lange Zahlen ──────────────────────────────────────────────────────────
   Die Stufen kommen aus dem Zeichner (`awgv.lang`, `awgv.sehrlang`). Nichts
   wird abgeschnitten und nichts gerundet — nur kleiner gesetzt. */
/*
 * Die Schriftgröße hängt an der Breite der Kachel, nicht an einer Rechnung.
 *
 * Feste Stufen nach Zeichenzahl waren zweimal knapp daneben: „8.620.279 €"
 * passte rechnerisch in 148 px und wurde trotzdem abgeschnitten — Ziffern
 * sind breiter, als eine Überschlagsrechnung vermuten lässt, und die Kachel
 * ist je nach Gerät verschieden breit.
 *
 * `container-type: inline-size` macht die Kachel zur Bezugsgröße, `cqw` ist
 * ein Prozent davon. `min(...)` nimmt den kleineren von beiden Werten: am
 * Rechner die feste Größe, auf schmalen Kacheln die mitwachsende. Die
 * Längenstufen bleiben — sie entscheiden, wie stark verkleinert wird.
 */
.awgesamt .awgfeld { container-type: inline-size; }
.awgv { white-space: nowrap; font-size: min(29px, 12cqw); }
.awgv.lang { font-size: min(25px, 8.2cqw); letter-spacing: -.025em; }
.awgv.sehrlang { font-size: min(21px, 6.6cqw); letter-spacing: -.02em; }

@media (max-width: 640px) {
  /* Auf dem Handy stehen zwei Karten nebeneinander — rund 165 px je Zahl.
     Entsprechend eine Stufe tiefer als am Rechner. */
  /* Mobil nur die Obergrenze senken; das Mitwachsen regelt `cqw`. */
  .awgv { font-size: min(23px, 12cqw); }
  .awgv.lang { font-size: min(20px, 8.2cqw); }
  .awgv.sehrlang { font-size: min(17px, 6.6cqw); }
  /*
   * Eine Kachel je Zeile bis 480 px.
   *
   * Zwei nebeneinander lassen auf einem 390-px-Gerät rund 148 px für die
   * Zahl. Das genügt für „82,82 €" und für nichts, was ein Jahr umfasst:
   * „8.620.279 €" wurde abgeschnitten, und die Schrift so weit zu verkleinern,
   * dass es passt, machte die kurzen Zahlen unleserlich klein. Eine Spalte
   * kostet Scrollen und löst beides.
   */
  .awgesamt { grid-template-columns: 1fr; gap: 10px; }
  .awgesamt .awgfeld { padding: 14px 15px; min-height: 88px; }
  /* Beschriftung und Veränderungspille dürfen nicht umbrechen — sonst
     wächst die Karte und die Reihe wird ungleich hoch. */
  .awgt { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .awgf { font-size: 11px; padding: 2px 7px; }
}
/* Sehr schmal (kleine Geräte, geteilter Bildschirm): eine Karte je Zeile,
   dann ist wieder Platz für die volle Größe. */
/* Ab 480 px ist wieder Platz für zwei Kacheln nebeneinander. */
@media (min-width: 481px) and (max-width: 640px) {
  .awgesamt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Filter auf dem Handy ──────────────────────────────────────────────────
   Am Rechner unverändert offen; auf dem Handy hinter einem Knopf, damit der
   Inhalt oben steht und nicht acht Eingabefelder. */
.blfilterknopf { display: none; }
@media (max-width: 640px) {
  .blfilterknopf {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 10px; margin-bottom: 12px; padding: 11px 14px;
    background: var(--n-flaeche); box-shadow: 0 0 0 1px var(--n-strich);
    border: 0; border-radius: var(--n-rk); font: inherit; font-size: 14px;
    font-weight: 550; color: var(--n-text); cursor: pointer;
  }
  .blfilterknopf .pfeil { color: var(--n-sehrleise); font-size: 12px; }
  #blFilter { display: none; }
  body.blfilteroffen #blFilter { display: block; }
  /* Ein Feld je Zeile: Zwei nebeneinander sind auf 390 px zu schmal für die
     Beschriftung, die dann umbricht und die Zeilen ungleich hoch macht. */
  .blfilter { grid-template-columns: 1fr; display: grid; gap: 10px; }
  .blfilter > * { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Bento — Kacheln verschiedener Größe
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Vier Spalten am Rechner. Die Umsatzkachel nimmt zwei mal zwei Felder ein
 * und trägt einen Farbverlauf; die übrigen Kennzahlen je ein Feld, die
 * Auswertungen je zwei. Auf schmalen Geräten fällt alles auf eine Spalte
 * zurück, die große Kachel behält ihre Höhe.
 */
.awbento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.awk {
  background: var(--n-flaeche);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 0 0 1px var(--n-strich), 0 1px 2px rgba(15, 23, 42, .04);
  position: relative;
  overflow: hidden;
  min-width: 0;
  container-type: inline-size;
}
.awzwei { grid-column: span 2; }
.awvier { grid-column: 1 / -1; }
.awk h4 {
  font-size: 13.5px; font-weight: 600; color: var(--n-text);
  margin: 0 0 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; text-transform: none; letter-spacing: 0;
}
.awl { font-size: 12.5px; font-weight: 500; color: var(--n-leise); display: block; }
.awv, .awmz strong {
  font-size: min(25px, 15cqw); font-weight: 660; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; display: block; margin: 7px 0 8px;
  white-space: nowrap; line-height: 1.1;
}
.awv.lang { font-size: min(21px, 11cqw); }
.awv.sehrlang { font-size: min(18px, 8.5cqw); }

/* Die große Kachel: Farbverlauf, große Zahl, weiche Kurve am Fuß. */
.awgross {
  grid-column: span 2; grid-row: span 2;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #a855f7 100%);
  box-shadow: 0 10px 30px -10px rgba(79, 70, 229, .45);
  min-height: 268px; display: flex; flex-direction: column;
}
.awgross .awl { color: rgba(255, 255, 255, .74); font-size: 13px; }
.awgrossw {
  font-size: min(46px, 11cqw); font-weight: 700; letter-spacing: -.035em;
  color: #fff; font-variant-numeric: tabular-nums; line-height: 1.05;
  margin-top: 8px; white-space: nowrap;
}
.awunter {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  font-size: 13px; color: rgba(255, 255, 255, .82);
}
.awkurve { width: calc(100% + 44px); height: 132px; margin: auto -22px -20px; display: block; }
.awkurve .fl { fill: rgba(255, 255, 255, .17); }
.awkurve .ln { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 2.5;
  stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Die Veränderung als Pille. Auf dem farbigen Grund weiß — Rot und Grün
   verschwinden dort beide im Violett, die Richtung sagt der Pfeil. */
.awpille {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 620; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap;
}
.awpille.klein { font-size: 11px; padding: 2px 8px; }
.awpille.auf { color: var(--n-gut); background: var(--n-gut-leise); }
.awpille.ab { color: var(--n-ab); background: var(--n-ab-leise); }
.awgross .awpille, .awgross .awpille.auf, .awgross .awpille.ab {
  background: rgba(255, 255, 255, .20); color: #fff; font-weight: 640;
}

/* Farben der Warengruppen — eine eigene, ruhige Reihe. Sie stehen für
   Kategorien, nicht für gut und schlecht. */
:root {
  --aw-f1: #6366f1; --aw-f2: #22d3ee; --aw-f3: #34d399;
  --aw-f4: #fbbf24; --aw-f5: #fb7185;
}
.awdonut { display: flex; align-items: center; gap: 20px; }
.awdonut svg { flex: 0 0 140px; transform: rotate(-90deg); }
.awdonut ul { flex: 1; list-style: none; display: flex; flex-direction: column;
  gap: 10px; margin: 0; padding: 0; min-width: 0; }
.awdonut li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto 36px;
  gap: 10px; align-items: center; font-size: 13px; }
.awdonut i { width: 9px; height: 9px; border-radius: 3px; }
.awdonut .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--n-leise); }
.awdonut .z { font-weight: 620; font-variant-numeric: tabular-nums; }
.awdonut .q { text-align: right; color: var(--n-sehrleise); font-size: 12px;
  font-variant-numeric: tabular-nums; }

/* Tagesbalken */
.awdia { display: flex; align-items: flex-end; gap: 7px; height: 124px; }
.awbal { flex: 1; position: relative; height: 100%; min-width: 0; }
.awbal i { position: absolute; bottom: 17px; border-radius: 5px 5px 0 0; display: block; }
.awbal i.vor { left: 5%; right: 5%; background: var(--card2); }
.awbal i.jetzt { left: 22%; right: 22%;
  background: linear-gradient(180deg, #6366f1, #4f46e5); }
.awbal em { position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
  font-style: normal; font-size: 10px; color: var(--n-sehrleise); }
.awleg { display: inline-flex; align-items: center; gap: 8px; font-size: 11px;
  color: var(--n-sehrleise); font-weight: 400; }
.awleg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 3px; }
.awleg i.jetzt { background: var(--n-akzent); }
.awleg i.vor { background: var(--card2); }

/* Listen */
.awliste { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.awliste li { display: grid; align-items: center; gap: 11px; font-size: 13.5px; }
.awtop li { grid-template-columns: 18px minmax(0, 1fr) 76px auto; }
.awza li { grid-template-columns: minmax(0, 1fr) 84px 38px; }
.awliste .r { color: var(--n-sehrleise); font-size: 12px; font-weight: 620; }
.awliste .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.awliste .bb { height: 6px; background: var(--card2); border-radius: 3px; overflow: hidden; }
.awliste .bb i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #6366f1, #a855f7); }
.awliste .z { font-weight: 620; font-variant-numeric: tabular-nums; text-align: right; }
.awliste .q { color: var(--n-sehrleise); font-size: 12px; text-align: right;
  font-variant-numeric: tabular-nums; }
.awleer { font-size: 13px; color: var(--n-sehrleise); padding: 8px 0; }

/* Weitere Kennzahlen: eine Reihe kleiner Werte über die volle Breite. */
.awminis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.awmz { min-width: 0; container-type: inline-size; }
.awmz strong { font-size: min(20px, 14cqw); margin: 5px 0 6px; }

@media (max-width: 1100px) {
  .awbento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awgross { grid-column: span 2; grid-row: span 1; min-height: 240px; }
  .awzwei { grid-column: span 2; }
}
@media (max-width: 640px) {
  .awbento { grid-template-columns: 1fr; gap: 12px; }
  .awgross, .awzwei, .awvier { grid-column: span 1; }
  .awk { padding: 16px 17px; border-radius: 16px; }
  .awgross { min-height: 210px; }
  .awdonut { flex-direction: column; align-items: stretch; gap: 14px; }
  .awdonut svg { align-self: center; }
}
/* Der Tagesverlauf hat 24 mögliche Balken statt 10 — schmaler und ohne
   Vergleichsreihe. */
.awdia.klein { height: 104px; gap: 4px; }
.awdia.klein .awbal i.jetzt { left: 12%; right: 12%; }
.awdia.klein .awbal em { font-size: 9.5px; }

/* ══════════════════════════════════════════════════════════════════════════
   TEIL 2 — DER RAHMEN

   Bis hierher lag die neue Sprache nur über den Auswertungen. Das Ergebnis
   war ein Bruch: ein Bento-Raster in einem Gehäuse aus der Reliefzeit —
   Seitenleiste mit Verlauf, Kopfzeile mit Kante, Tabellen wie Formulare.
   Dieser Teil zieht sie durch das ganze Dashboard.

   Angefasst wird nicht jede Regel einzeln, sondern das, woraus alle
   bestehen: Flächen, Rahmen, Reihen, Bedienelemente. `app.css` arbeitet
   durchgehend mit Merkmalen (--card, --border, --grad-*), deshalb genügen
   wenige Stellen, um alles mitzunehmen.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Zuerst ein Fehler, der ohne Bild nicht auffällt ──────────────────────
   `app.css` setzt seine dunklen Merkmale unter `:root:not([data-theme="hell"])`
   — Spezifität (0,2,0). Der Block oben in dieser Datei steht auf schlichtem
   `:root` (0,1,0) und verliert deshalb JEDEN Vergleich, egal wie spät er
   geladen wird. Im dunklen Thema blieb also die alte Farbwelt stehen, und
   zwar unbemerkt, weil der helle Fall richtig aussah. Beide Schreibweisen
   von `app.css` brauchen hier ihr Gegenstück. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --n-grund: #0b0e13; --n-flaeche: #141922;
    --n-strich: rgba(255,255,255,.08); --n-strich-stark: rgba(255,255,255,.15);
    --n-text: #e9edf3; --n-leise: #98a2b3; --n-sehrleise: #6b7280;
    --n-akzent: #818cf8; --n-akzent-hell: #a5b4fc;
    --n-akzent-leise: rgba(129,140,248,.14);
    --n-gut: #34d399; --n-gut-leise: rgba(52,211,153,.12);
    --n-ab: #f87171; --n-ab-leise: rgba(248,113,113,.12);
    --bg: var(--n-grund); --card: var(--n-flaeche); --card2: #1b212c;
    --fg: var(--n-text); --muted: var(--n-leise); --border: var(--n-strich);
    --accent: var(--n-akzent); --accent2: #6366f1; --accent-fg: #0b0e13;
    --hover: #1a202a; --ok: var(--n-gut); --danger: var(--n-ab);
    --marke: #818cf8; --messing: #818cf8;
    --grad-card: var(--n-flaeche); --grad-raise: var(--n-flaeche);
    --grad-chrome: var(--n-flaeche);
    --grad-accent: linear-gradient(180deg, var(--n-akzent-hell), var(--n-akzent));
    --kante: none;
    --s1: 0 1px 2px rgba(0,0,0,.4);
    --s2: 0 8px 24px -8px rgba(0,0,0,.6);
    --s3: 0 24px 60px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dunkel"] {
  --n-grund: #0b0e13; --n-flaeche: #141922;
  --n-strich: rgba(255,255,255,.08); --n-strich-stark: rgba(255,255,255,.15);
  --n-text: #e9edf3; --n-leise: #98a2b3; --n-sehrleise: #6b7280;
  --n-akzent: #818cf8; --n-akzent-hell: #a5b4fc;
  --n-akzent-leise: rgba(129,140,248,.14);
  --n-gut: #34d399; --n-gut-leise: rgba(52,211,153,.12);
  --n-ab: #f87171; --n-ab-leise: rgba(248,113,113,.12);
  --bg: var(--n-grund); --card: var(--n-flaeche); --card2: #1b212c;
  --fg: var(--n-text); --muted: var(--n-leise); --border: var(--n-strich);
  --accent: var(--n-akzent); --accent2: #6366f1; --accent-fg: #0b0e13;
  --hover: #1a202a; --ok: var(--n-gut); --danger: var(--n-ab);
  --marke: #818cf8; --messing: #818cf8;
  --grad-card: var(--n-flaeche); --grad-raise: var(--n-flaeche);
  --grad-chrome: var(--n-flaeche);
  --grad-accent: linear-gradient(180deg, var(--n-akzent-hell), var(--n-akzent));
  --kante: none;
}
/* Und die Schatten des hellen Themas: weich und weit statt kurz und hart —
   ein Schatten soll Abstand zeigen, nicht eine Kante nachzeichnen. */
:root {
  --s1: 0 1px 2px rgba(11,18,32,.05);
  --s2: 0 8px 24px -8px rgba(11,18,32,.12);
  --s3: 0 24px 60px -16px rgba(11,18,32,.20);
  --glass: rgba(11,18,32,.035);
}

/* ── Die Seitenleiste ─────────────────────────────────────────────────────
   Vorher ein Verlauf mit Trennlinie — die Leiste sah aus wie ein zweites
   Fenster neben dem Inhalt. Jetzt liegt sie auf demselben Grund, und der
   Inhaltsbereich hebt sich als helle Fläche davon ab. Das ist die Anordnung,
   die man aus jeder heutigen Anwendung kennt, und sie hat einen sachlichen
   Grund: Der Blick fällt zuerst auf das Helle, und das ist die Arbeit. */
/* Nur am Rechner. Unterhalb von 900 px stellt app.css die Leiste auf eine
   Fussleiste um (`#app{grid-template-columns:1fr}`); eine Breitenangabe ohne
   Abfrage haette das ueberschrieben, weil sie spaeter geladen wird. Das Bild
   zeigte es sofort: die Seitenleiste nahm die halbe Breite des Telefons, der
   Inhalt stand in einer 100 Pixel schmalen Spalte daneben. */
#app { background: var(--n-grund); }
@media (min-width: 901px) {
  #app { grid-template-columns: 248px 1fr; }
  aside {
    background: transparent !important;
    background-image: none !important;
    border-right: 0 !important;
    padding: 16px 12px 14px;
    gap: 2px;
  }
}
aside .brand {
  font-size: 16px; font-weight: 650; letter-spacing: -.015em;
  padding: 6px 8px 2px; margin-bottom: 10px; border-radius: var(--n-rk);
}
aside .brand .mark {
  width: 30px; height: 30px; font-size: 15px; border-radius: 9px;
  background: linear-gradient(135deg, var(--n-akzent-hell), var(--n-akzent));
  box-shadow: 0 4px 12px -4px var(--n-akzent);
}
nav { margin-top: 8px; gap: 1px; }

/* Der Eintrag: kein Kasten, sondern eine Zeile, die beim Überfahren eine
   Fläche bekommt. Der aktive trägt sie dauerhaft — plus einen kurzen
   Strich am linken Rand, damit er auch ohne Farbe erkennbar bleibt. */
.navlink {
  position: relative; padding: 8px 11px; border-radius: var(--n-rk);
  font-size: 14px; font-weight: 500; color: var(--n-leise);
  transition: background .13s ease, color .13s ease;
}
.navlink:hover { background: var(--n-akzent-leise); color: var(--n-text); }
.navlink.active {
  background: var(--n-akzent-leise) !important; color: var(--n-akzent) !important;
  font-weight: 620;
}
.navlink.active::before {
  content: ""; position: absolute; left: -12px; top: 50%;
  width: 3px; height: 17px; margin-top: -8.5px;
  border-radius: 0 3px 3px 0; background: var(--n-akzent);
}
.navlink .ic { font-size: 15px; opacity: .9; }
.navgroup {
  font-size: 10.5px; letter-spacing: .08em; color: var(--n-sehrleise);
  font-weight: 650; padding: 16px 12px 5px;
}

/* Wer angemeldet ist, gehört als Person sichtbar gemacht — die Initialen
   sind schneller zu erfassen als eine Zeile Text, und sie sagen auf einen
   Blick, dass man im richtigen Zugang ist. */
.userbox {
  border-top: 1px solid var(--n-strich); margin-top: 8px; padding: 12px 4px 2px;
}
#userName {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--n-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.logout {
  margin-top: 9px; padding: 8px; border: 0 !important;
  background: var(--n-akzent-leise) !important; color: var(--n-akzent) !important;
  border-radius: var(--n-rk); font-weight: 600; font-size: 12.5px;
  transition: background .13s;
}
.logout:hover { background: color-mix(in srgb, var(--n-akzent) 18%, transparent) !important; }

/* ── Der Arbeitsbereich ───────────────────────────────────────────────────
   Eine eigene Fläche mit weichen Ecken, abgesetzt vom Grund. Der Inhalt
   bekommt damit eine Kante, an der das Auge hält — vorher lief er randlos
   bis an den Fensterrand. */
@media (min-width: 901px) {
  main {
    background: var(--n-flaeche);
    border-radius: 20px 0 0 0;
    box-shadow: 0 0 0 1px var(--n-strich);
    padding: 26px 30px 20px;
    margin: 12px 0 0 0;
  }
}
.topbar {
  margin-bottom: 20px; padding-bottom: 0; gap: 14px;
  border-bottom: 0 !important; background: none !important;
}
h1 { font-size: 24px; font-weight: 660; letter-spacing: -.025em; }
.topbar .sub { font-size: 13px; color: var(--n-sehrleise); margin-top: 2px; }

/* Suchen und Filialwahl: zwei Bedienelemente derselben Form, damit sie als
   Paar gelesen werden. Die Tastenkürzel stehen dran — ein Kürzel, das
   niemand sieht, wird nicht benutzt. */
.suchknopf, .filialwahl {
  height: 36px; border-radius: 10px; border: 0 !important;
  background: var(--n-grund) !important; background-image: none !important;
  box-shadow: 0 0 0 1px var(--n-strich); color: var(--n-leise);
  font-size: 13.5px; transition: box-shadow .13s, color .13s;
}
.suchknopf:hover, .filialwahl:hover {
  box-shadow: 0 0 0 1px var(--n-strich-stark); color: var(--n-text);
}
.suchknopf { padding: 0 13px; gap: 8px; }
.filialwahl select {
  border: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--n-text); font-weight: 550;
}
.filialwahl .fwk { color: var(--n-sehrleise); font-size: 11px; }

/* ── Karten ──────────────────────────────────────────────────────────────
   Alles, was in `app.css` eine Kachel ist, bekommt dieselbe Form: weiße
   Fläche, ein Haarstrich statt Rahmen, weiche Ecke. Kein Verlauf, keine
   Lichtkante — die beiden waren es, die den Eindruck von 2003 trugen. */
.kpi, .modcard, .card, .kikarte, .bdk, .hfq, .hffund, .przeile, .praeintrag,
.kikosten, .zikachel, .stkarte, .btkarte, .sokarte, .vlkachel {
  background: var(--n-flaeche) !important; background-image: none !important;
  border: 0 !important; border-radius: var(--n-r) !important;
  box-shadow: 0 0 0 1px var(--n-strich) !important;
  transition: box-shadow .15s ease, transform .15s ease;
}
.kpi { padding: 17px 19px; }
.kpi .k { font-size: 12.5px; font-weight: 550; color: var(--n-leise); }
.kpi .v { font-size: 27px; font-weight: 660; letter-spacing: -.03em; margin-top: 6px; }
.kpis { gap: 14px; margin-bottom: 20px; }

/* Anfassbares hebt sich beim Überfahren an — und nur Anfassbares. Eine
   Kennzahlkachel, die sich bewegt, ohne dass ein Klick folgt, verspricht
   etwas, das sie nicht hält. */
.modcard:hover, .sokarte:hover, .vlkachel:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--n-strich-stark),
              0 12px 28px -12px rgba(11,18,32,.22) !important;
}
.modcard { padding: 16px 15px 15px; gap: 6px; }
.modcard .mn { font-size: 14.5px; font-weight: 620; letter-spacing: -.01em; }
.modcard .mi { font-size: 21px; }
.modcard .md { font-size: 11.5px; color: var(--n-sehrleise); }
.modgrid { gap: 13px; }

/* ── Tabellen ────────────────────────────────────────────────────────────
   Eine Tabelle wird gelesen, nicht ausgefüllt. Deshalb: kein Gitter,
   sondern ruhige Reihen mit einer Trennlinie in Haarstrichstärke, ein
   leiser Kopf ohne Versalien, und eine Fläche unter der Zeile, über der
   der Zeiger steht. Zahlen rechts, Text links — das macht `app.css` schon,
   es fehlte die Ruhe drumherum. */
table { font-size: 13.5px; border-collapse: separate; border-spacing: 0; }
th {
  font-size: 11.5px !important; font-weight: 600 !important;
  color: var(--n-sehrleise) !important;
  text-transform: none !important; letter-spacing: 0 !important;
  padding: 9px 10px !important; border-bottom: 1px solid var(--n-strich) !important;
  position: sticky; top: 0; background: var(--n-flaeche); z-index: 1;
}
td {
  padding: 10px !important;
  border-bottom: 1px solid var(--n-strich) !important;
  border-top: 0 !important;
}
tbody tr { transition: background .1s ease; }
tbody tr:hover > td { background: var(--n-grund); }
/* Eine Zeile, die sich anklicken lässt, muss das zeigen, bevor man klickt. */
tbody tr[data-beleg], tbody tr[onclick], tbody tr.klickbar { cursor: pointer; }
tbody tr:last-child > td { border-bottom: 0 !important; }

/* ── Bedienelemente ──────────────────────────────────────────────────────
   Eine Form für alles Drückbare: 10 px Ecke, keine Verläufe, ein weicher
   Übergang. Der Hauptknopf trägt Farbe, alle übrigen tragen einen Strich —
   wenn jeder Knopf leuchtet, führt keiner. */
.btn, .btn2, .btnprim {
  border: 0 !important; border-radius: var(--n-rk) !important;
  background: var(--n-akzent) !important; background-image: none !important;
  color: #fff !important; font-weight: 600; letter-spacing: -.005em;
  box-shadow: 0 1px 2px rgba(11,18,32,.16), 0 6px 16px -8px var(--n-akzent);
  transition: filter .13s, transform .1s, box-shadow .13s;
}
.btn:hover, .btn2:hover, .btnprim:hover { filter: brightness(1.07); }
.btn:active, .btn2:active, .btnprim:active { transform: translateY(1px); }
.btn-ghost, .ghost, .kleinbtn {
  border: 0 !important; box-shadow: 0 0 0 1px var(--n-strich) !important;
  background: transparent !important; background-image: none !important;
  color: var(--n-text) !important; border-radius: var(--n-rk) !important;
  font-weight: 550; transition: box-shadow .13s, background .13s;
}
.btn-ghost:hover, .ghost:hover, .kleinbtn:hover {
  background: var(--n-grund) !important;
  box-shadow: 0 0 0 1px var(--n-strich-stark) !important;
}

/* Chips sind Filter, keine Knöpfe — rund, leise, und angeschaltet in der
   Akzentfarbe statt in Messing. */
.chip, .filterchip, .zrchip, .awschip {
  border: 0 !important; box-shadow: 0 0 0 1px var(--n-strich);
  background: transparent !important; background-image: none !important;
  border-radius: var(--rr) !important; color: var(--n-leise) !important;
  font-weight: 550; transition: box-shadow .13s, color .13s, background .13s;
}
.chip:hover, .filterchip:hover, .zrchip:hover { color: var(--n-text) !important; }
.chip.an, .filterchip.an, .zrchip.an, .awschip.an {
  background: var(--n-akzent-leise) !important; color: var(--n-akzent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--n-akzent) 30%, transparent) !important;
  font-weight: 620;
}

input, select, textarea {
  border: 0 !important; box-shadow: 0 0 0 1px var(--n-strich);
  background: var(--n-grund) !important; color: var(--n-text);
  border-radius: var(--n-rk) !important;
  transition: box-shadow .13s ease;
}
input:focus, select:focus, textarea:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 1px var(--n-akzent),
              0 0 0 4px var(--n-akzent-leise) !important;
}
/* Wer mit der Tastatur bedient, muss sehen, wo er steht. Das galt vorher
   nur für Eingabefelder. */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--n-akzent); outline-offset: 2px; border-radius: 6px;
}

/* ── Dialoge ─────────────────────────────────────────────────────────────
   Der Grund dahinter wird nicht nur dunkler, sondern unscharf: Damit tritt
   der Dialog hervor, ohne dass er einen schweren Schatten braucht. */
.modal-bg {
  background: rgba(11,18,32,.42) !important;
  backdrop-filter: blur(8px) saturate(.9);
  -webkit-backdrop-filter: blur(8px) saturate(.9);
}
.modal, .bonsheet, .sheet, .awsblatt, .stblatt {
  border-radius: 18px !important;
  box-shadow: 0 0 0 1px var(--n-strich),
              0 32px 80px -20px rgba(11,18,32,.35) !important;
}

/* ── Der Bon ─────────────────────────────────────────────────────────────
   Er darf und soll nach Papier aussehen — das ist keine Altbackenheit,
   sondern die Sache selbst: Wer einen Beleg prüft, vergleicht ihn mit dem
   ausgedruckten. Modernisiert wird nur, was ihn umgibt: die Hülle, in der
   er liegt. */
.bonwrap { padding: 22px; }
.bonpapier {
  border-radius: 12px !important;
  box-shadow: 0 0 0 1px var(--n-strich), 0 10px 30px -14px rgba(11,18,32,.28) !important;
}

/* ── Offene Tische ───────────────────────────────────────────────────────
   Die Kachel heißt `.ofkarte`; `.oftisch` ist nur der Titel darin. Der
   Unterschied war im Quelltext nicht zu sehen und im Bild sofort: Der
   Tischname bekam die Kartenform und saß als Kästchen in der Karte, während
   die Karte selbst unverändert blieb. */
.ofgitter { gap: 12px; }
.ofkarte {
  background: var(--n-flaeche) !important; background-image: none !important;
  border: 0 !important; box-shadow: 0 0 0 1px var(--n-strich) !important;
  border-radius: var(--n-r) !important; padding: 15px 16px !important;
  transition: box-shadow .15s, transform .15s;
}
.ofkarte:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--n-strich-stark),
              0 12px 28px -12px rgba(11,18,32,.22) !important;
}
.oftisch b { font-size: 17px; font-weight: 660; letter-spacing: -.02em; }
.ofbetrag { font-weight: 660; letter-spacing: -.02em; }

/* Ein Tisch, an dem lange nichts passiert, ist der Grund, warum es diese
   Ansicht gibt. Der Rand allein sagte das nur halb: Er saß links außen,
   während der Hinweis unten in der Karte steht. Beide tragen jetzt dieselbe
   Farbe, und es ist Bernstein, nicht Rot — es ist eine Vermutung („seit 41
   Min nichts gebucht"), keine Störung. */
.ofkarte.wartet {
  border-left: 0 !important;
  box-shadow: 0 0 0 1px var(--n-strich), inset 3px 0 0 var(--n-warn) !important;
}
.ofwartet { color: var(--n-warn) !important; font-weight: 600; }
.ofdoppelt { color: var(--n-ab) !important; font-weight: 600; }
.ofkarte.auf {
  box-shadow: 0 0 0 1px var(--n-strich-stark),
              0 18px 44px -18px rgba(11,18,32,.28) !important;
}
:root { --n-warn: #b45309; }
:root[data-theme="dunkel"] { --n-warn: #fbbf24; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) { --n-warn: #fbbf24; }
}
/* Der Stand oben: der Punkt ist die Auskunft, nicht der Text. */
.ofstand { color: var(--n-leise); font-size: 13.5px; }
.ofstand .ofpunkt { background: var(--n-gut) !important; box-shadow: none !important; }
.ofstand .sub { color: var(--n-sehrleise); }

/* ── Warten ──────────────────────────────────────────────────────────────
   „Lädt …" ist eine Auskunft über das Programm, kein Zustand der Sache.
   Ein ruhiger Streifen sagt dasselbe und springt nicht ins Auge. */
.loading {
  color: var(--n-sehrleise); font-size: 13.5px;
  padding: 26px 0; text-align: center;
}
.loading::after {
  content: ""; display: block; height: 2px; width: 120px; margin: 12px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--n-akzent), transparent);
  background-size: 200% 100%;
  animation: nladen 1.1s ease-in-out infinite;
}
@keyframes nladen { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
@media (prefers-reduced-motion: reduce) {
  .loading::after { animation: none; opacity: .4; }
  * { transition-duration: .01ms !important; }
}

/* ── Leere Zustände ──────────────────────────────────────────────────────
   Sie erscheinen oft und tragen viel: Wer nichts findet, will wissen, ob er
   falsch gesucht hat oder ob nichts da ist. */
.empty, .bleer, .awleer {
  color: var(--n-sehrleise); font-size: 13.5px;
  background: var(--n-grund); border: 0 !important;
  border-radius: var(--n-r); padding: 30px 22px; text-align: center;
}

/* ── Die Anmeldung ───────────────────────────────────────────────────────
   Sie ist das Erste, was jemand sieht — und die einzige Seite, auf der die
   Farbe groß auftreten darf. */
#login {
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(99,102,241,.16), transparent 60%),
    radial-gradient(700px 460px at 92% 108%, rgba(34,211,238,.13), transparent 60%),
    var(--n-grund) !important;
}
.login-card {
  background: var(--n-flaeche) !important; background-image: none !important;
  border: 0 !important; border-radius: 20px !important; padding: 32px 30px;
  box-shadow: 0 0 0 1px var(--n-strich),
              0 30px 70px -24px rgba(11,18,32,.28) !important;
}
.login-card .brand { font-size: 18px; margin-bottom: 20px; }
.login-card label { font-size: 12.5px; color: var(--n-leise); }

/* ── Am Telefon ──────────────────────────────────────────────────────────
   Der Arbeitsbereich behält seine Ecke nicht — dort ist jeder Pixel Breite
   Inhalt. Die Fußleiste bekommt dafür die Form, die sie am Gerät braucht. */
@media (max-width: 900px) {
  main { background: transparent; box-shadow: none; margin: 0; border-radius: 0; }
  /*
   * KEIN `backdrop-filter` auf `aside` — und das ist keine Geschmacksfrage.
   *
   * `backdrop-filter` (wie `transform`, `filter`, `contain` und
   * `will-change`) macht das Element zum Bezugsrahmen für alle
   * `position: fixed`-Nachfahren. Die Fußleiste `#mainNav` liegt im `aside`
   * und ist `fixed; bottom: 0` — mit dem Filter darüber bezog sich ihr
   * „unten" plötzlich auf das 50 Pixel hohe `aside` statt auf das Fenster.
   * Ergebnis am Telefon: Die Navigation klebte OBEN und lag über dem
   * Namenszug und dem Abmelden-Knopf.
   *
   * Die Glasoptik gehört deshalb an `#mainNav` selbst — dort hat sie keine
   * fixed-Kinder, die sie einfangen könnte.
   */
  aside {
    background: var(--n-flaeche) !important;
    box-shadow: 0 1px 0 var(--n-strich);
  }
  .navlink.active::before { display: none; }
  .navlink.active { background: var(--n-akzent-leise) !important; }
  h1 { font-size: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TEIL 3 — NACHGEBESSERT AM BILD

   Jede Regel hier geht auf ein Standbild zurück, nicht auf eine Vermutung.
   Das Werkzeug dafür ist `werkzeuge/ansicht-bild.mjs`.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Die Tabelle braucht eine Fläche ─────────────────────────────────────
   Ohne sie schwebten die Zeilen im Weißen: Es war nicht zu sehen, wo die
   Tabelle anfängt und wo sie aufhört, und die feste Kopfzeile klebte an
   nichts. Eine Karte darum, und die Kopfzeile hat einen Grund, auf dem sie
   liegen kann. Nur im Inhaltsbereich — Tabellen in Dialogen und im Bon
   bringen ihre eigene Hülle mit. */
#content > table,
#content > .tabelle > table,
#content > div > table:only-child {
  background: var(--n-flaeche);
  box-shadow: 0 0 0 1px var(--n-strich);
  border-radius: var(--n-r);
  overflow: hidden;
}
#content > table th:first-child,
#content > table td:first-child { padding-left: 18px !important; }
#content > table th:last-child,
#content > table td:last-child { padding-right: 18px !important; }

/* Zahlen gehören rechts und untereinander — sonst vergleicht man Ziffern,
   die nicht übereinanderstehen. `app.css` kennt dafür `.r`; wo eine Spalte
   nur Beträge trägt, gilt es auch ohne Klasse. */
td.r, th.r, td.rechts, th.rechts { text-align: right; }

/* ── Kopfzeile ───────────────────────────────────────────────────────────
   „FILIALE" stand in Versalien und in derselben Stärke wie der Filialname —
   das Etikett schrie lauter als die Angabe. */
.filialwahl .fwk {
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 11.5px; font-weight: 500; color: var(--n-sehrleise);
}
.filialwahl { padding: 0 4px 0 11px; gap: 9px; }
/* Das Tastenkürzel gehört an den Knopf, nicht in die Anleitung. */
.suchknopf::after {
  content: "⌘K"; margin-left: 5px; font-size: 11px; font-weight: 600;
  color: var(--n-sehrleise); background: var(--n-flaeche);
  box-shadow: 0 0 0 1px var(--n-strich); border-radius: 5px; padding: 2px 5px;
}
@media (max-width: 900px) { .suchknopf::after { display: none; } }

/* ── Ansichten ordnen ────────────────────────────────────────────────────
   Der gestrichelte Rahmen war die einzige gestrichelte Linie der ganzen
   Oberfläche und zog dadurch mehr Aufmerksamkeit auf sich als die
   Navigation darüber. */
.navordnen, .navzurueck {
  border: 0 !important; background: none !important;
  color: var(--n-sehrleise) !important; font-size: 12px; font-weight: 550;
  padding: 8px 11px; border-radius: var(--n-rk);
  transition: background .13s, color .13s;
}
.navordnen:hover, .navzurueck:hover {
  background: var(--n-akzent-leise) !important; color: var(--n-akzent) !important;
}
.navordnen.an {
  background: var(--n-akzent-leise) !important; color: var(--n-akzent) !important;
}

/* Das ALT-Schild ist ein Hinweis, kein Etikett — es soll lesbar sein und
   sonst nichts. */
.altschild {
  background: var(--n-grund) !important; color: var(--n-sehrleise) !important;
  box-shadow: 0 0 0 1px var(--n-strich); border: 0 !important;
  font-size: 9px; font-weight: 650; letter-spacing: .06em;
  padding: 2px 5px; border-radius: 5px;
}

/* ── Der Vergleichsbalken im Dunkeln ─────────────────────────────────────
   Er stand in hellem Grau — auf weißem Grund ein leiser Schatten, auf
   dunklem ein weißer Klotz, der den eigentlichen Balken erschlug. */
:root[data-theme="dunkel"] .awbal i.vor,
:root[data-theme="dunkel"] .awsbal i.vor { background: rgba(255,255,255,.09) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .awbal i.vor,
  :root:not([data-theme="hell"]) .awsbal i.vor { background: rgba(255,255,255,.09) !important; }
}

/* ── Die Karten im Dunkeln ───────────────────────────────────────────────
   Fläche und Grund lagen nur fünf Helligkeitsstufen auseinander; die Karten
   verschwanden im Hintergrund. Ein Deut heller, und der Haarstrich sitzt
   sichtbar dazwischen. */
:root[data-theme="dunkel"] { --n-flaeche: #171d27; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) { --n-flaeche: #171d27; }
}

/* Das Kürzel am Suchknopf. Den Text setzt `suchKuerzelSetzen()` — Strg oder
   Befehl, je nach Gerät. */
.kbdchip {
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--n-sehrleise); background: var(--n-flaeche);
  box-shadow: 0 0 0 1px var(--n-strich); border-radius: 5px; padding: 3px 5px;
  margin-left: 3px;
}
.kbdchip:empty { display: none; }
.suchknopf::after { content: none; }
@media (max-width: 900px) { .kbdchip { display: none; } }
/* Beide Bedienelemente der Kopfzeile gleich hoch — der Auswahlkasten brachte
   sein eigenes Innenmaß mit und wuchs dadurch über den Suchknopf hinaus. */
.filialwahl select { padding: 0 4px !important; height: 34px; }

/* ══════════════════════════════════════════════════════════════════════════
   TEIL 4 — DIE BAUTEILE, DIE AN DEN MERKMALEN VORBEIGEHEN

   Die Merkmale (--card, --grad-*, --border) nehmen fast alles mit. Ein paar
   Bauteile in `app.css` tragen ihre Farbe aber fest: die Heldenkachel, die
   Segmentleiste, die Chip-Knöpfe. Sie blieben deshalb im alten Stil stehen —
   mitten in neuen Ansichten, was schlimmer aussieht als überall alt.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Die Heldenkachel ────────────────────────────────────────────────────
   Sie ist richtig gedacht: eine Zahl trägt, die anderen tragen nicht. Nur
   ihre Mittel waren die alten — Firmenblau, Lichtkante, Textschatten, ein
   Glanzstreifen darüber. Sie bekommt jetzt denselben Verlauf wie die große
   Umsatzkachel im Bento, damit alte und neue Ansichten dieselbe Sprache
   sprechen. */
.kpi.held {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #a855f7 100%) !important;
  box-shadow: 0 10px 30px -12px rgba(79,70,229,.5) !important;
  color: #fff !important;
}
.kpi.held::after { content: none !important; }
.kpi.held .v { color: #fff !important; text-shadow: none !important; }
.kpi.held .k, .kpi.held .kfuss { color: rgba(255,255,255,.82) !important; }
.kpi.held .kfuss.auf { color: #c9f7dd !important; }
.kpi.held .kfuss.ab { color: #ffd7d3 !important; }
.kpi:not(.held), .bdk, .kikarte {
  background: var(--n-flaeche) !important; background-image: none !important;
}
.kpi:not(.held)::after, .bdk::after, .kikarte::after { content: none !important; }

/* ── Die Segmentleiste ───────────────────────────────────────────────────
   Sie steht in Betrieb, Sortiment und Prüfung — überall dort, wo zwischen
   Sichten derselben Daten gewechselt wird. Vorher: eingelassener Träger mit
   Lichtkante, das gewählte Feld in Blau mit Verlauf. Jetzt der Standard, den
   jeder kennt: ein ruhiger Träger, und das Gewählte liegt als weiße Fläche
   darauf. Das liest sich schneller, weil die Erhöhung selbst die Auswahl
   zeigt — Farbe ist dann nur noch Bestätigung. */
.segbar {
  background: var(--n-grund) !important; border: 0 !important;
  box-shadow: none !important; border-radius: 11px !important;
  padding: 3px !important; gap: 2px !important;
}
.seg {
  font-weight: 550 !important; font-size: 13.5px !important;
  padding: 7px 14px !important; border-radius: 8px !important;
  color: var(--n-leise) !important; background: none !important;
  transition: background .13s, color .13s, box-shadow .13s;
}
.seg:hover { color: var(--n-text) !important; }
.seg.on {
  background: var(--n-flaeche) !important; background-image: none !important;
  color: var(--n-text) !important; font-weight: 620 !important;
  box-shadow: 0 1px 2px rgba(11,18,32,.10), 0 0 0 1px var(--n-strich) !important;
}
.seg .cnt, .chipbtn .cnt { font-weight: 600; opacity: .55; }

/* ── Chip-Knöpfe ─────────────────────────────────────────────────────────
   Dieselbe Form wie die Filterchips — es gab keinen Grund für zwei. */
.chipbtn {
  background: transparent !important; background-image: none !important;
  border: 0 !important; box-shadow: 0 0 0 1px var(--n-strich) !important;
  color: var(--n-leise) !important; font-weight: 550 !important;
  font-size: 13.5px !important; padding: 7px 14px !important;
  transition: box-shadow .13s, color .13s, background .13s;
}
.chipbtn:hover { color: var(--n-text) !important; }
.chipbtn.on {
  background: var(--n-akzent-leise) !important; color: var(--n-akzent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--n-akzent) 30%, transparent) !important;
  font-weight: 620 !important;
}

/* ── Versalien ───────────────────────────────────────────────────────────
   In `app.css` stehen ein Dutzend Überschriften in Großbuchstaben mit
   gesperrtem Satz. Das war die Formularsprache; gelesen wird es schlechter,
   weil Versalien keine Ober- und Unterlängen haben, an denen das Auge Wörter
   erkennt. Ausgenommen bleibt die Gruppenüberschrift der Seitenleiste — dort
   ist es ein Etikett über einer Liste, kein Text. */
.prodgroup .pgh, .rowtrenner, .btkopf, .stkopf, .kalmtitel, .bttitel,
.sokopf, .zikopf, .prkopf, .hfkopf {
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 13px !important; font-weight: 620 !important;
  color: var(--n-leise) !important;
}

/* ── Die Lichtkanten ─────────────────────────────────────────────────────
   Dreiundzwanzig Stellen setzen `inset 0 1px 0 rgba(255,255,255,…)` — den
   hellen Strich an der Oberkante, der eine Fläche gewölbt wirken lässt. Das
   ist genau das Mittel, das die Oberfläche alt aussehen ließ. `--glass` ist
   in dieser Datei schon fast durchsichtig gesetzt; hier fallen die
   verbliebenen festen Werte. */
.btn, .btn2, .sendbtn, .chipbtn.on, .seg.on, .modcard, .modal,
.segbar, .kpi.held, .kpi.held:hover {
  --kante: none;
}

/* ── Der Lichtschleier auf den Kacheln ───────────────────────────────────
   `app.css` legt über jede Kennzahlkachel ein Pseudoelement mit
   `--grad-glanz` — im Bild ein bläulicher Schimmer in der oberen rechten
   Ecke. Einzeln kaum zu benennen, über vierzehn Kacheln hinweg genau der
   Eindruck, den der Umbau loswerden soll: eine Fläche, die glänzt, statt
   eine Zahl zu tragen. Er kam über `::before`, nicht `::after` — deshalb
   griff die Abschaltung eine Regel weiter oben nicht. */
.kpi:not(.held)::before, .bdk::before, .kikarte::before,
.kpi.held::after { content: none !important; }
:root { --grad-glanz: none; --grad-streif: none; --grad-warm: var(--n-flaeche); }

/* ── Chips außerhalb der Modulkacheln ────────────────────────────────────
   `.chip` war in `app.css` nur innerhalb von `.modcard` vollständig
   beschrieben; als eigenständiges Filterelement fehlten Innenmaß und
   Anzeigeart, und die Chips lagen als nackter Text nebeneinander. */
.chip, .filterchip, .zrchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px; line-height: 1.2;
  border-radius: var(--rr); cursor: pointer;
}

/* ── Der leere Zustand ───────────────────────────────────────────────────
   Das gestrichelte Kästchen war die einzige gestrichelte Linie weit und
   breit und zog den Blick auf die Stelle, an der nichts ist. */
.empty::before, .bleer::before, .awleer::before { display: none !important; }
.empty, .bleer, .awleer { border-style: none !important; }

/* ── Die Fläche eines Knopfes ist nicht die Farbe einer Schrift ──────────
   Im dunklen Thema ist der Akzent aufgehellt (#818cf8) — nötig, weil er dort
   als Schrift auf dunklem Grund steht. Als Knopffläche mit weißer Schrift
   ergibt derselbe Ton 2,4:1 und ist unlesbar. Die Fläche bekommt deshalb
   eine eigene Marke, die in beiden Themen dieselbe bleibt: Auf ihr steht
   Weiß mit 4,8:1, hell wie dunkel. */
:root { --n-knopf: #4f46e5; }
:root[data-theme="dunkel"] { --n-knopf: #5b52e8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) { --n-knopf: #5b52e8; }
}
.btn, .btn2, .btnprim, .sendbtn {
  background: var(--n-knopf) !important; color: #fff !important;
  box-shadow: 0 1px 2px rgba(11,18,32,.18), 0 6px 16px -8px var(--n-knopf);
}

/* ── Die Modulkacheln der Startseite ─────────────────────────────────────
   `repeat(auto-fit, minmax(158px, 1fr))` verteilt den ganzen Platz auf die
   vorhandenen Kacheln. Dieses Projekt hat genau EIN Modul — die eine Kachel
   wurde dadurch 1.080 Pixel breit, mit dem Namen klein in der linken Ecke.
   `auto-fill` und eine Höchstbreite lassen sie so groß werden, wie sie sein
   soll, und den Rest der Reihe leer. */
.modgrid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 250px));
  justify-content: start;
}

/* ══════════════════════════════════════════════════════════════════════════
   TEIL 5 — AM TELEFON

   Am Gerät gilt dieselbe Sprache, aber andere Maße: Der Daumen braucht
   Fläche, der Bildschirm hat keine übrig. Die Fußleiste ist das wichtigste
   Bedienelement der Anwendung — sie liegt unter dem Daumen und ist das
   Einzige, was immer sichtbar ist.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Die Kopfzeile am Gerät: der Name der Anwendung und der Zugang, mehr
     nicht. Sie ist eine Zeile hoch und liegt über dem Inhalt, damit sie beim
     Scrollen nicht wegläuft. */
  /*
   * Die Kopfzeile scrollt mit — sie ist NICHT klebend.
   *
   * Sie war es, und das kostete die Fußleiste ihre Verlässlichkeit: Die
   * Fußleiste (`#mainNav`) liegt im Markup INNERHALB des `aside`. Ein
   * klebender Vorfahre bringt Safari auf iOS beim Scrollen aus dem Tritt —
   * das fixierte Kind wird dann zeitweise gar nicht gezeichnet. Gemeldet als
   * „die Leiste verschwindet oft beim Scrollen".
   *
   * Von beiden ist die Fußleiste das wichtigere Element: Sie liegt unter dem
   * Daumen und ist der einzige Weg zwischen den Ansichten. Der Namenszug
   * oben darf dafür mitscrollen — das tut er in jeder mobilen Anwendung.
   */
  aside {
    position: static;
    padding: 9px 12px !important;
    border-bottom: 0 !important;
    box-shadow: 0 1px 0 var(--n-strich);
  }
  aside .brand { font-size: 15px !important; }
  aside .brand .mark { width: 26px; height: 26px; font-size: 13px; }

  /* Die Fußleiste: getöntes Glas, weiche Oberkante, und die aktive Ansicht
     als Pille statt als bloße Farbe. Der Balken links wäre dort sinnlos —
     die Einträge stehen nebeneinander, nicht untereinander. */
  #mainNav {
    /*
     * Eine eigene Zeichenebene. Ohne sie zeichnet Safari die fixierte Leiste
     * beim Schwungscrollen erst nach, wenn die Bewegung steht — sie blinkt
     * dann weg und kommt zurück. `translateZ(0)` ist hier unschädlich: Die
     * Leiste hat selbst keine fixierten Kinder, die der dadurch entstehende
     * Bezugsrahmen einfangen könnte.
     */
    transform: translateZ(0);
    background: color-mix(in srgb, var(--n-flaeche) 86%, transparent) !important;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-top: 0 !important;
    box-shadow: 0 -1px 0 var(--n-strich), 0 -8px 24px -12px rgba(11,18,32,.18) !important;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom,0px)) !important;
  }
  #mainNav .navlink {
    border-radius: 11px !important; font-size: 10.5px !important;
    padding: 6px 3px !important; gap: 2px !important;
    /* 44 px ist die Untergrenze für eine Fingerfläche. */
    min-height: 46px;
  }
  #mainNav .navlink .ic { font-size: 18px !important; }
  #mainNav .navlink.active {
    background: var(--n-akzent-leise) !important; color: var(--n-akzent) !important;
  }
  #mainNav .navlink.active::before { display: none !important; }
  /* Das ALT-Schild passt in eine 66 Pixel breite Fingerfläche nicht hinein —
     dort steht ohnehin der Name schon gekürzt. */
  #mainNav .altschild { display: none !important; }

  /* Der Inhalt bekommt den ganzen Platz. Kein Kartenrand, keine Rundung —
     jeder Pixel Breite ist Inhalt. */
  main { padding: 16px 13px calc(84px + env(safe-area-inset-bottom,0px)) !important; }
  #content > table, #content > .tabelle > table {
    border-radius: 12px;
  }
  h1 { font-size: 19px !important; }
  .topbar { gap: 10px; margin-bottom: 14px; }
  .topbar .sub { font-size: 12px; }
  /* Suchen und Filiale nebeneinander, beide gleich hoch, keiner gekürzt. */
  .topact { flex-wrap: wrap; gap: 7px; }
  .suchknopf .stext { display: none; }
  .suchknopf { padding: 0 11px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px; }
  .kpi .v { font-size: 22px; }
  .segbar { overflow-x: auto; }
}

/* Die Restzeile in Ring und Listen: dieselbe Form, aber grau — sie ist eine
   Auskunft über das Fehlende, keine eigene Gruppe. */
:root { --aw-rest: #cbd5e1; }
:root[data-theme="dunkel"] { --aw-rest: #3f4757; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) { --aw-rest: #3f4757; }
}
.awdonut li.awrest .n, .awliste li.awrest .n { color: var(--n-sehrleise); }
.awliste li.awrest .bb i { background: var(--aw-rest); }

/* Die Servicekräfte tragen vier Angaben je Zeile — Name, Balken, Betrag,
   Anteil. In das Raster der Zahlungsarten (drei Spalten) gelegt, rutschte
   der Anteil in die nächste Zeile und der Betrag wurde abgeschnitten. */
.awkraft li { grid-template-columns: minmax(0, 1fr) 62px 86px 40px; }
@media (max-width: 1100px) {
  .awkraft li { grid-template-columns: minmax(0, 1fr) 50px 84px 38px; }
}

/* ── Aufklappbare Kacheln ────────────────────────────────────────────────
   Eine geöffnete Kachel nimmt zwei Rasterzeilen statt einer — so bleibt das
   Bento in Form, während sie Platz für zwölf weitere Zeilen bekommt. Reicht
   auch das nicht (198 Artikel), scrollt die Liste in sich selbst; das ist
   allemal besser, als die Nachbarkacheln über den halben Bildschirm nach
   unten zu schieben. */
.awk.awoffen { grid-row: span 2; }
.awk.awoffen .awliste,
.awk.awoffen .awdonut ul {
  max-height: 430px; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin;
}
.awk.awoffen .awdonut { align-items: start; }

/* Die Restzeile ist der Schalter — sie muss aussehen, als ließe sie sich
   drücken, und zwar bevor jemand darauf zeigt. */
.awliste li.awklapp, .awdonut li.awklapp {
  cursor: pointer; border-radius: 8px;
  margin: 2px -8px -2px; padding: 5px 8px;
  transition: background .12s;
}
.awliste li.awklapp:hover, .awdonut li.awklapp:hover { background: var(--n-akzent-leise); }
.awliste li.awklapp .n, .awdonut li.awklapp .n {
  color: var(--n-akzent); font-weight: 550;
}
.awliste li.awklapp .n::after { content: " ›"; }
.awk.awoffen li.awklapp .n::after { content: " ‹"; }

/* Der Schalter unter einer offenen Liste — außerhalb des Scrollbereichs,
   damit er erreichbar bleibt, wenn die Liste lang ist. */
.awszu {
  display: block; width: 100%; margin-top: 10px; padding: 7px 0;
  border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 550;
  color: var(--n-akzent); cursor: pointer; border-radius: 8px;
  transition: background .12s;
}
.awszu:hover { background: var(--n-akzent-leise); }
.awszu::before { content: "‹ "; }

/* ══════════════════════════════════════════════════════════════════════════
   DIE EIGENE AUSWERTUNG
   ══════════════════════════════════════════════════════════════════════════ */

/* Ein gesetzter Filter: Größe fett, Wert normal, ein Kreuz zum Entfernen.
   Er sieht anders aus als die Wahlchips daneben — er ist keine Möglichkeit,
   sondern ein Zustand. */
.awschip.gesetzt {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--n-akzent-leise) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--n-akzent) 26%, transparent) !important;
  color: var(--n-text) !important; padding: 5px 6px 5px 12px;
  border-radius: var(--rr); font-size: 13px;
}
.awschip.gesetzt b { font-weight: 620; color: var(--n-akzent); }
.awsweg {
  border: 0; background: none; cursor: pointer; line-height: 1;
  font-size: 15px; color: var(--n-sehrleise); padding: 0 5px;
  border-radius: 50%; transition: color .12s, background .12s;
}
.awsweg:hover { color: var(--n-ab); background: var(--n-ab-leise); }
.awstrenn {
  width: 1px; height: 20px; background: var(--n-strich); margin: 0 4px; flex: none;
}

/* Der Filterdialog: erst die Größen als Raster, dann die Werte als Liste. */
.awsfwahl { display: flex; flex-wrap: wrap; gap: 8px; }
.awsfgr {
  border: 0; box-shadow: 0 0 0 1px var(--n-strich); background: none;
  border-radius: var(--n-rk); padding: 9px 15px; font: inherit; font-size: 13.5px;
  color: var(--n-text); cursor: pointer; transition: box-shadow .12s, background .12s;
}
.awsfgr:hover { background: var(--n-akzent-leise); box-shadow: 0 0 0 1px var(--n-akzent); }
.awsfsuche { margin-bottom: 10px; }
.awsfsuche input { width: 100%; padding: 9px 12px; }
.awsfliste { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.awsfwert {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 0; background: none; font: inherit; font-size: 13.5px; text-align: left;
  color: var(--n-text); padding: 9px 11px; border-radius: 9px; cursor: pointer;
  transition: background .1s;
}
.awsfwert:hover { background: var(--n-akzent-leise); }
.awsfwert .sub { color: var(--n-sehrleise); font-size: 12.5px; white-space: nowrap; }

/* Die Brotkrume des Aufklappens. */
.awskrume {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 2px 0 14px; font-size: 13px;
}
.awskr {
  border: 0; background: none; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--n-akzent); padding: 4px 9px; border-radius: 8px;
  transition: background .12s;
}
.awskr:hover { background: var(--n-akzent-leise); }
.awskr.an { color: var(--n-text); font-weight: 620; cursor: default; }
.awskr.an:hover { background: none; }
.awskrp { color: var(--n-sehrleise); }

/* Sortierbare Spaltenköpfe. Der Pfeil steht nur an der Spalte, nach der
   wirklich sortiert wird — ein Pfeil an jeder Spalte sagt nichts. */
.awstab th[data-awssort] { cursor: pointer; user-select: none; }
.awstab th[data-awssort]:hover { color: var(--n-text) !important; }
.awstab th.sortab::after { content: " ↓"; color: var(--n-akzent); }
.awstab th.sortauf::after { content: " ↑"; color: var(--n-akzent); }

/* Die Kreuztabelle: viele schmale Spalten, deshalb eng gesetzt und
   waagerecht scrollbar — das Blatt darunter darf nicht mitwandern. */
.awstab { overflow-x: auto; }
.awstab.kreuz table { font-size: 13px; }
.awstab.kreuz td.zelle {
  /* Die Hitze macht die Tabelle lesbar, ohne eine zweite Zahl zu brauchen. */
  background: color-mix(in srgb, var(--n-akzent) calc(var(--hitze, 0) * 26%), transparent);
  white-space: nowrap;
}
.awstab.kreuz td.summe, .awstab.kreuz th.summe {
  border-left: 1px solid var(--n-strich) !important;
}
.awskappe { color: var(--n-sehrleise); font-size: 12.5px; margin: 8px 2px 0; }

/* Anklickbare Ergebniszeilen. */
.awstab tr.klickbar { cursor: pointer; }
.awstab tr.klickbar:hover > td { background: var(--n-akzent-leise); }
.awstipp { color: var(--n-sehrleise); }

/* Die Balkenansicht. */
.awsbalken { display: flex; flex-direction: column; gap: 3px; }
.awsbtitel { font-size: 13px; color: var(--n-leise); margin-bottom: 8px; }
.awsbz {
  display: grid; grid-template-columns: minmax(90px, 210px) 1fr 104px;
  align-items: center; gap: 12px; padding: 6px 8px; border-radius: 9px;
  font-size: 13.5px; transition: background .1s;
}
.awsbz.klickbar { cursor: pointer; }
.awsbz.klickbar:hover { background: var(--n-akzent-leise); }
.awsbz .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.awsbz .bar { height: 20px; background: var(--card2); border-radius: 5px; overflow: hidden; }
.awsbz .bar i {
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #6366f1, #a855f7);
}
.awsbz .z { text-align: right; font-weight: 620; font-variant-numeric: tabular-nums; }

.awsfuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.awszeilenwahl { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.awszeilenwahl input { width: auto; }

@media (max-width: 700px) {
  .awsbz { grid-template-columns: minmax(70px, 130px) 1fr 84px; gap: 8px; font-size: 12.5px; }
  .awskrume { font-size: 12px; }
}

/* Zwölf Ansichten passen in keine Telefonbreite — die Fußleiste scrollt
   waagerecht. Damit man das sieht, blendet der rechte Rand aus: Eine harte
   Kante liest sich als Ende der Liste, ein Verlauf als „hier geht es
   weiter". (Wer die Leiste kürzen will, blendet Ansichten über „Ansichten
   ordnen" aus — am Rechner.) */
@media (max-width: 900px) {
  #mainNav {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
}

/* Eine gesperrte Kennzahl muss als gesperrt zu erkennen sein — vorher hing
   die Kennzeichnung an `border-style: dashed`, und diese Oberfläche hat
   keine Ränder mehr, sondern Haarstriche aus `box-shadow`. Der gestrichelte
   Rand war damit unsichtbar, und „je Tisch" sah bei einer Warengruppen-
   auswertung genauso wählbar aus wie „Umsatz". */
.awschip.wahl.gesperrt {
  opacity: 1 !important;
  color: var(--n-sehrleise) !important;
  background: repeating-linear-gradient(135deg,
      transparent 0 5px, var(--n-grund) 5px 10px) !important;
  box-shadow: 0 0 0 1px var(--n-strich) !important;
  cursor: not-allowed;
}
.awschip.wahl.gesperrt:hover { color: var(--n-sehrleise) !important; }

/* Zeilen der Übersicht, die in die Auswertung führen. */
.awdonut li.awstiefer, .awliste li.awstiefer { cursor: pointer; border-radius: 8px; }
.awdonut li.awstiefer:hover, .awliste li.awstiefer:hover {
  background: var(--n-akzent-leise);
  box-shadow: 0 0 0 6px var(--n-akzent-leise);
}

/* ── Das PDF-Blatt ───────────────────────────────────────────────────────
   Dieselbe Sprache wie die übrigen Dialoge: Haarstrich statt Rahmen, weiche
   Ecke, die Bedienelemente als Chips in einer Zeile. Der Betrachter selbst
   bleibt dunkel — so machen es alle PDF-Betrachter, und die Seite hebt sich
   davon ab wie Papier auf einer Unterlage. */
.pdfblatt {
  width: min(1080px, 94vw); height: min(92dvh, 1240px);
  background: var(--n-flaeche) !important;
  border: 0 !important; border-radius: 18px !important;
  box-shadow: 0 0 0 1px var(--n-strich),
              0 32px 80px -20px rgba(11,18,32,.35) !important;
}
.pdfkopf {
  gap: 9px; padding: 13px 16px;
  border-bottom: 1px solid var(--n-strich) !important;
  background: none !important;
}
.pdftitel { font-size: 14.5px; font-weight: 620; letter-spacing: -.01em; }
.pdfkopf .sub { font-size: 12px; color: var(--n-sehrleise); }
.pdfkopf .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; font-size: 13px; font-weight: 550;
  border: 0 !important; box-shadow: 0 0 0 1px var(--n-strich) !important;
  background: transparent !important; color: var(--n-text) !important;
  border-radius: var(--rr); cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
.pdfkopf .chip:hover {
  background: var(--n-akzent-leise) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--n-akzent) 30%, transparent) !important;
  color: var(--n-akzent) !important;
}
.pdfkopf .chip[hidden] { display: none !important; }
.pdfrahmen { background: #3c4048; }
.pdfnotfall { background: var(--n-grund); }

@media (max-width: 760px) {
  /* Am Telefon nimmt das Blatt den ganzen Schirm; die Knöpfe rücken unter
     den Titel, statt ihn auf zwei Buchstaben zu quetschen. */
  .pdfblatt { width: 100vw; height: 100dvh; border-radius: 0 !important; }
  .pdfkopf { flex-wrap: wrap; }
  .pdfkopf .spacer { display: none; }
  .pdfkopf .chip { flex: 1 1 auto; justify-content: center; }
}

/* Der Abstandhalter war nie definiert.
   `<span class="spacer">` steht an mehreren Stellen im Markup und sollte
   dort das Folgende an den rechten Rand schieben — es gab dazu aber keine
   Regel, weder in app.css noch in mac.css. Die Knöpfe im PDF-Kopf klebten
   deshalb am Titel, und in der Reiterleiste stand die Vergleichswahl mitten
   in der Zeile. Ein leeres Element, das nichts tut, sieht im Quelltext aus
   wie eine Absicht — im Bild sieht man, dass keine dahintersteht. */
.spacer { flex: 1 1 auto; min-width: 0; }

/* Der Filterdialog hat jetzt zwei Gruppen: Werte und Merkmale. */
.awsflabel {
  font-size: 12px; font-weight: 620; color: var(--n-sehrleise);
  margin: 16px 0 8px;
}
.awsflabel:first-child { margin-top: 4px; }
.awsfhilfe {
  font-size: 13px; color: var(--n-leise); line-height: 1.5;
  margin: 0 0 12px; max-width: 56ch;
}
/* Ein Merkmal fragt nach einer Eigenschaft, nicht nach einem Wert — es
   bekommt deshalb eine eigene, ruhigere Form. */
.awsfgr.merkmal {
  background: var(--n-grund) !important;
  box-shadow: 0 0 0 1px var(--n-strich) !important;
}
.awsfgr.merkmal:hover {
  background: var(--n-akzent-leise) !important;
  box-shadow: 0 0 0 1px var(--n-akzent) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TEIL 6 — AM TELEFON GILT EIN ANDERES MASS

   Die Regeln oben sind für den Rechner gemacht: 20 px Innenabstand, 14 px
   zwischen Karten, eine Kennzahl je 186 px. Auf 390 px Breite ergibt das
   eine Spalte statt vier — die vier Zahlen der offenen Tische füllten so
   449 Pixel, fast eine halbe Bildschirmhöhe, für vier Zahlen.

   Gemessen, nicht geschätzt: `werkzeuge/ansicht-bild.mjs` rendert bei
   390 × 844 und liest die tatsächlichen Höhen aus.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Erst ein Fehler von oben ───────────────────────────────────────────
   `.btn` bekam die Akzentfarbe mit `!important` — und traf damit auch
   `.btn.ghost`. „Aktualisieren" und „Stand verwerfen" standen als zwei
   vollflächig violette Knöpfe nebeneinander, obwohl beide Nebensache sind.
   Wenn jeder Knopf leuchtet, führt keiner. */
.btn.ghost, .btn-ghost, button.ghost {
  background: transparent !important;
  background-image: none !important;
  color: var(--n-text) !important;
  box-shadow: 0 0 0 1px var(--n-strich) !important;
  font-weight: 550;
}
.btn.ghost:hover, .btn-ghost:hover, button.ghost:hover {
  background: var(--n-grund) !important;
  box-shadow: 0 0 0 1px var(--n-strich-stark) !important;
}

@media (max-width: 760px) {
  /* ── Kennzahlenleiste: zwei Spalten statt einer ──────────────────────
     Zwei nebeneinander sind noch lesbar und halbieren die Höhe. Die
     Beschriftung darüber, der Wert darunter, die Erläuterung klein — die
     Reihenfolge bleibt, nur enger. */
  .awgesamt {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px 14px !important;
    padding: 12px 14px !important;
  }
  .awgesamt .awgfeld { padding: 6px 0 !important; }
  .awgt { font-size: 10.5px !important; }
  .awgv { font-size: 19px !important; line-height: 1.2; }
  .awgf { font-size: 10.5px !important; line-height: 1.3; }

  /* ── Filter- und Sortierchips ────────────────────────────────────────
     Sie brauchten drei Zeilen. Enger gesetzt passen sie in zwei, und wo es
     viele sind, wandern sie in eine Zeile zum Wischen — mit Verlauf am
     Rand, damit man sieht, dass es weitergeht. */
  .ofwahl, .awschips, .catstrip {
    gap: 6px !important;
  }
  .chip, .awschip, .chipbtn, .filterchip, .zrchip {
    font-size: 12.5px !important; padding: 6px 11px !important;
  }
  .ofwahl {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
  }
  .ofwahl::-webkit-scrollbar { display: none; }
  .ofwahl > * { flex: 0 0 auto; }
  .ofwahl .btn, .ofwahl .btn-ghost {
    font-size: 12.5px !important; padding: 6px 12px !important; width: auto;
    margin: 0 !important;
  }

  /* ── Der Stand ───────────────────────────────────────────────────────
     Der Hinweis „der Betrieb ist inzwischen weiter" stand in Warnfarbe über
     zwei Zeilen und war das Auffälligste auf dem Schirm — dabei ist er eine
     Fußnote zum Alter der Daten. */
  .ofstand { font-size: 12.5px; line-height: 1.35; }
  .ofstand .sub { font-size: 11.5px; }

  /* ── Karten und Kacheln enger ────────────────────────────────────────*/
  .ofkarte { padding: 11px 12px !important; }
  .oftisch b { font-size: 15.5px; }
  .ofzeile { font-size: 12px; }
  .awk { padding: 13px 14px; }
  .awbento { gap: 10px; }
  .awskarte, .awsbau { padding: 13px 14px !important; }
  .awsbau { gap: 10px; }
  .awszeile { gap: 6px; }
  .awslabel { font-size: 12px; }

  /* Der Zeitraum ist auf jedem Schirm dasselbe: eine Reihe Knöpfe. Er
     braucht keine drei Zeilen. */
  #zrBar, .zrleiste {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
  }
  #zrBar::-webkit-scrollbar, .zrleiste::-webkit-scrollbar { display: none; }
  #zrBar > *, .zrleiste > * { flex: 0 0 auto; }

  /* Tabellen: kleinere Schrift, weniger Innenabstand — die Spaltenzahl
     bestimmt hier alles. */
  table { font-size: 12.5px; }
  th { padding: 7px 8px !important; font-size: 11px !important; }
  td { padding: 8px !important; }
  #content > table th:first-child, #content > table td:first-child { padding-left: 12px !important; }
  #content > table th:last-child, #content > table td:last-child { padding-right: 12px !important; }

  /* Dialoge nehmen den ganzen Schirm — auf 390 px ist ein Rand ringsum
     verschenkte Fläche. */
  .modal {
    width: 100% !important; max-width: 100% !important;
    max-height: 92dvh; border-radius: 18px 18px 0 0 !important;
    margin-top: auto;
  }
  /* Kein Rand um das Blatt — am Telefon ist jeder Pixel Breite Inhalt, und
     unten soll es am Schirmrand kleben, nicht darüber schweben. */
  .modal-bg { align-items: flex-end; padding: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TEIL 7 — ALS APP AM TELEFON

   Vom Startbildschirm gestartet fehlt die Browserleiste. Damit ist die
   Anwendung selbst für die Sicherheitsbereiche zuständig: oben die
   Statusleiste und die Kamera-Insel, unten der Streifen für die Wischgeste.
   Ohne das klebt der Namenszug an der Uhrzeit.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  aside { padding-top: calc(9px + env(safe-area-inset-top, 0px)) !important; }
  #login { padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   TEIL 8 — WÄHLEN MIT DEM DAUMEN

   Filter, Zeitraum und Auswahllisten sind am Rechner Reihen kleiner Chips.
   Am Telefon sind sie das Wichtigste überhaupt — man wählt öfter, als man
   liest —, und dort gelten andere Maße: 44 Pixel Fingerfläche (Apple HIG),
   nichts, was in zwei Zeilen umbricht, und Listen, die von unten kommen
   statt in der Mitte zu schweben.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* ── Fingerflächen ───────────────────────────────────────────────────
     Ein Chip mit 6 px Innenabstand misst 28 Pixel Höhe. Das trifft man mit
     der Maus, nicht mit dem Daumen. Die Schrift bleibt klein, die Fläche
     wächst — das ist der Unterschied zwischen „passt mehr drauf" und
     „lässt sich bedienen". */
  .chip, .awschip, .chipbtn, .filterchip, .zrchip, .zrknopf, .zrbtn, .seg {
    min-height: 40px; display: inline-flex; align-items: center;
    padding: 0 14px !important;
  }
  .awschip.gesetzt { padding: 0 6px 0 12px !important; }
  .awsweg { min-width: 32px; min-height: 32px; display: inline-flex;
            align-items: center; justify-content: center; }

  /* ── Der Baukasten: eine Zeile je Frage, waagerecht zu wischen ────────
     Untereinander gestapelt füllten die fünf Zeilen des Baukastens den
     halben Schirm, bevor eine einzige Zahl zu sehen war. Jede Zeile wischt
     jetzt für sich; die Beschriftung steht darüber statt daneben. */
  .awszeile {
    display: block !important;
  }
  .awslabel {
    display: block; margin-bottom: 5px;
    font-size: 11.5px; font-weight: 620; color: var(--n-sehrleise);
  }
  .awschips {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    scrollbar-width: none; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
  .awschips::-webkit-scrollbar { display: none; }
  .awschips > * { flex: 0 0 auto; }

  /* ── Auswahllisten kommen von unten ──────────────────────────────────
     Ein Dialog in der Bildschirmmitte ist am Telefon der falsche Ort: Er
     liegt außerhalb der Daumenreichweite, und die Liste darin bekommt nur
     die Hälfte der Höhe. Von unten hereingeschoben ist beides gelöst. */
  .awsfliste { max-height: 58vh; }
  .awsfwert { min-height: 46px; padding: 11px 13px; }
  .awsfgr { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; }
  .awsfsuche input { min-height: 44px; font-size: 16px; }

  /* 16 px ist keine Geschmacksfrage: Darunter zoomt Safari beim Antippen
     eines Eingabefelds in die Seite hinein — und kommt nicht von selbst
     wieder heraus. */
  input, select, textarea { font-size: 16px !important; min-height: 44px; }

  /* ── Der Kalender ────────────────────────────────────────────────────
     Zwei Monate nebeneinander passen auf keinen Telefonschirm. */
  .kalmonate { grid-template-columns: 1fr !important; }
  .kaltag { min-height: 40px; }

  /* ── Die Brotkrume bleibt lesbar ─────────────────────────────────────*/
  .awskrume { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .awskrume::-webkit-scrollbar { display: none; }
  .awskrume > * { flex: 0 0 auto; }
  .awskr { min-height: 36px; display: inline-flex; align-items: center; }

  /* ── Die Fußzeile der Auswertung ─────────────────────────────────────
     Speichern, CSV, PDF nebeneinander — sie brechen sonst einzeln um. */
  .awsfuss { gap: 7px; }
  .awsfuss .btn2, .awsfuss .btn-ghost { min-height: 44px; padding: 0 16px; }
  .awsfuss .sub { flex: 1 1 100%; font-size: 11.5px; }
}

/* Die Reiter der Auswertung: vier Wörter, die auf 390 px nicht nebeneinander
   passen. Sie brechen sonst um und schieben die Zahlen nach unten. */
@media (max-width: 760px) {
  .awsreiter, .prreiter, .streiter {
    flex-wrap: nowrap; overflow-x: auto; gap: 18px !important;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
  .awsreiter::-webkit-scrollbar, .prreiter::-webkit-scrollbar,
  .streiter::-webkit-scrollbar { display: none; }
  .awsreiter > *, .prreiter > *, .streiter > * { flex: 0 0 auto; }
  .awsreit, .pfreit { font-size: 13.5px; }
  /* Die Vergleichswahl gehört nicht in dieselbe Zeile wie die Reiter —
     dort schiebt sie sie aus dem Bild. */
  .awsverg { flex: 0 0 auto; font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TEIL 9 — KEIN SEITLICHES WISCHEN

   Gemessen bei 390 × 844: Die Seite selbst läuft nicht über
   (scrollWidth = clientWidth = 375). Was seitlich scrollte, war die
   Fußleiste — 687 Pixel Inhalt auf 375 Pixel Schirm — und die Chip-Reihen,
   die ich vorher absichtlich so gebaut hatte.

   Das war der falsche Kompromiss. Waagerechtes Wischen versteckt, was es
   gibt: Wer „Hilfe" nicht sieht, sucht sie nicht. Senkrecht zu scrollen ist
   am Telefon selbstverständlich, waagerecht nicht.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* ── Die Fußleiste: vier Einträge und „Mehr" ─────────────────────────
     Welche vier, bestimmt die Reihenfolge aus „Ansichten ordnen". Die
     gerade offene Ansicht bleibt immer sichtbar, auch wenn sie an zehnter
     Stelle steht — sonst zeigte die Leiste nirgends, wo man ist. */
  #mainNav {
    overflow-x: hidden !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  #mainNav .navliste {
    display: flex !important; width: 100%; overflow: hidden;
  }
  #mainNav .navzeile { display: none; }
  #mainNav .navzeile:nth-of-type(-n+4),
  #mainNav .navzeile.aktiv { display: flex; }
  /* Ist die aktive Ansicht eine der ersten vier, bleiben es vier Felder;
     steht sie weiter hinten, rückt sie als fünftes dazu. Beides passt. */
  #mainNav .navmehr {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; flex: 1 1 0; min-width: 58px;
    min-height: 46px; padding: 6px 3px; border: 0; background: none;
    border-radius: 11px; font: inherit; font-size: 10.5px; font-weight: 550;
    color: var(--n-leise); cursor: pointer;
  }
  #mainNav .navmehr .ic { font-size: 18px; line-height: 1; }
  #mainNav .navmehr:active { background: var(--n-akzent-leise); }
}
/* Am Rechner steht die Leiste senkrecht und hat Platz für alles. */
@media (min-width: 901px) { .navmehr { display: none; } }

/* ── Das Blatt mit allen Ansichten ───────────────────────────────────── */
.navblatt { align-items: flex-end; }
.navblattinhalt {
  width: 100%; max-height: 84dvh; overflow-y: auto;
  background: var(--n-flaeche); border-radius: 20px 20px 0 0;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -1px 0 var(--n-strich), 0 -20px 60px -20px rgba(11,18,32,.3);
}
.navblattkopf {
  font-size: 12px; font-weight: 650; color: var(--n-sehrleise);
  padding: 2px 6px 10px;
}
.navblattliste { display: flex; flex-direction: column; gap: 2px; }
.navblatteintrag {
  display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto;
  align-items: center; gap: 0 11px; text-align: left;
  border: 0; background: none; font: inherit; cursor: pointer;
  padding: 11px 10px; border-radius: 12px; min-height: 52px;
  color: var(--n-text);
}
.navblatteintrag:active { background: var(--n-grund); }
.navblatteintrag.an { background: var(--n-akzent-leise); }
.navblatteintrag.an .n { color: var(--n-akzent); font-weight: 620; }
.navblatteintrag .ic { grid-row: 1 / 3; font-size: 20px; text-align: center; }
.navblatteintrag .n { font-size: 14.5px; font-weight: 550; }
.navblatteintrag .s {
  font-size: 11.5px; color: var(--n-sehrleise); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navblattzu { width: 100%; margin-top: 12px; min-height: 46px; }

/* ── Chip-Reihen brechen um, statt zu scrollen ───────────────────────── */
@media (max-width: 760px) {
  /* `.awsreiter` steht hier NICHT mehr — Begründung beim Block „Register
     scrollen, Chips brechen um" weiter unten. */
  .awschips, .ofwahl, #zrBar, .zrleiste, .catstrip, .awskrume,
  .prreiter, .streiter {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  /* Enger gesetzt, damit der Umbruch nicht in die Höhe geht: Eine Reihe
     Chips, die umbricht, braucht zwei Zeilen — dieselbe Reihe, die scrollt,
     braucht eine. Der Unterschied ist eine Zeile, und die ist es wert. */
  .chip, .awschip, .chipbtn, .filterchip, .zrchip, .zrknopf, .zrbtn {
    min-height: 38px; padding: 0 12px !important; font-size: 12.5px !important;
  }

  /* Die Datentabelle bleibt die Ausnahme: Eine Kreuztabelle mit zwölf
     Spalten lässt sich nicht umbrechen, ohne die Kreuzung zu zerstören.
     Sie scrollt in ihrem eigenen Rahmen — und nur dort. */
  .awstab { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Und zuletzt der Riegel: Was auch immer sich verrechnet, die SEITE wandert
   nicht zur Seite. Ein waagerecht verschobenes Layout ist am Telefon der
   Eindruck, die Anwendung sei kaputt. */
html, body { overflow-x: hidden; max-width: 100%; }

/* ── Der Baukasten am Telefon: zugeklappt, bis er gebraucht wird ─────────
   Am Rechner gibt es die Kopfzeile nicht — dort stehen die fünf Zeilen
   ohnehin nebeneinander und kosten nichts. */
.awsbaukopf { display: none; }
@media (max-width: 760px) {
  .awsbaukopf {
    display: flex; align-items: center; gap: 10px; width: 100%;
    border: 0; background: none; font: inherit; text-align: left;
    padding: 4px 2px; cursor: pointer; min-height: 44px;
  }
  .awsbausatz {
    flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 550;
    color: var(--n-text); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
  }
  .awsbaupfeil {
    flex: 0 0 auto; font-size: 12.5px; font-weight: 620; color: var(--n-akzent);
    background: var(--n-akzent-leise); border-radius: var(--rr); padding: 7px 13px;
  }
  /* Zugeklappt bleibt nur die Kopfzeile. */
  .awsbau:not(.offen) .awszeile { display: none !important; }
  .awsbau:not(.offen) { padding: 6px 12px !important; }
  .awsbau.offen .awsbaukopf {
    border-bottom: 1px solid var(--n-strich); margin-bottom: 10px; padding-bottom: 10px;
  }
}

/* ── Die Fußleiste: fünf Felder, 375 Pixel ───────────────────────────────
   Vier Ansichten und „Mehr" teilen sich die Breite — 75 Pixel je Feld. Ein
   Name, der nicht hineinpasst, muss gekürzt werden und darf nicht über
   seinen Nachbarn laufen. Dafür drei Dinge: `min-width: 0` (sonst weigert
   sich ein Flex-Kind zu schrumpfen), Kürzung mit Auslassungspunkten, und
   ein eigenes Element um den Namen, das gekürzt werden kann. */
@media (max-width: 900px) {
  #mainNav .navzeile { min-width: 0; flex: 1 1 0; }
  #mainNav .navlink {
    min-width: 0; width: 100%; padding: 6px 2px !important;
    font-size: 9.5px !important; letter-spacing: -.01em; gap: 1px !important;
  }
  #mainNav .navlink .nvn {
    display: block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #mainNav .navlink .ic { font-size: 19px !important; }
  #mainNav .navmehr { font-size: 9.5px; min-width: 0; }

  /* Die Leiste liegt über dem Inhalt — bei 86 Prozent Deckkraft schien die
     Umsatzkachel durch die Beschriftung. Glas ja, aber lesbar. */
  #mainNav {
    background: color-mix(in srgb, var(--n-flaeche) 95%, transparent) !important;
  }
}

/* ── Die Reiterleiste am Telefon ─────────────────────────────────────────
   Gemessen bei 390 px: 160 Pixel hoch, vier Zeilen. Die Ursache ist der
   Abstandhalter — am Rechner schiebt er die Vergleichswahl an den rechten
   Rand, beim Umbruch zieht er sie auf die volle Breite und erzwingt damit
   eine eigene Zeile für sie und eine weitere für den letzten Reiter.

   Am Telefon gibt es keinen rechten Rand, an den etwas geschoben werden
   müsste: Die Wahl reiht sich einfach hinter die Reiter. */
@media (max-width: 760px) {
  .awsreiter .spacer { display: none !important; }
  .awsverg {
    width: auto !important; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--n-sehrleise);
  }
  .awsverg select {
    min-height: 34px; padding: 0 8px !important; font-size: 13px !important;
    max-width: 42vw;
  }
  /* Der Trennstrich unter den Reitern liegt sonst zwischen den Zeilen. */
  .awsreiter { padding-bottom: 4px; margin-bottom: 14px; }
}

/* ── Der Platz in der Fußleiste ──────────────────────────────────────────
   Gemessen: Der Knopf „Mehr" bekam 184 Pixel, die vier Ansichten je 44 —
   und in 44 Pixel passt kein Name, nicht einmal „Übersicht" (38 Pixel Text
   plus Innenabstand). Deshalb standen dort „Ausw…", „Offene …", „Rechnu…".

   Die Ursache liegt im Aufbau: `#mainNav` enthält ZWEI Kinder — die Liste
   mit den vier Ansichten und den Mehr-Knopf. Beide trugen `flex: 1 1 0` und
   teilten sich den Platz hälftig, obwohl in der einen Hälfte vier Elemente
   stehen und in der anderen eines.

   Der Knopf braucht nur seine eigene Breite; alles Übrige gehört der Liste. */
@media (max-width: 900px) {
  #mainNav .navliste { flex: 1 1 auto !important; min-width: 0; }
  #mainNav .navmehr { flex: 0 0 auto !important; width: 58px; }
}

/* ── Gespeicherte Berichte: ändern und löschen ───────────────────────────
   Die beiden Knöpfe liegen in der Kachel und dürfen sie nicht öffnen — das
   regelt die Verdrahtung. Hier geht es darum, dass sie sich zurückhalten:
   Der Bericht wird geöffnet, nicht verwaltet; Pflege ist die Ausnahme. */
.awskpflege {
  display: flex; gap: 6px; margin-top: 10px;
  opacity: .55; transition: opacity .13s;
}
.awskachel:hover .awskpflege, .awskachel:focus-within .awskpflege { opacity: 1; }
.awskbtn {
  border: 0; background: none; font: inherit; font-size: 12px; font-weight: 550;
  color: var(--n-leise); cursor: pointer; padding: 5px 10px;
  border-radius: 8px; box-shadow: 0 0 0 1px var(--n-strich);
  transition: background .12s, color .12s, box-shadow .12s;
}
.awskbtn:hover {
  background: var(--n-akzent-leise); color: var(--n-akzent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--n-akzent) 30%, transparent);
}
.awskbtn.weg:hover {
  background: var(--n-ab-leise); color: var(--n-ab);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--n-ab) 30%, transparent);
}
/* Die Kachel selbst ist anklickbar — sie war ein `button`, ist jetzt ein
   `div` mit `role="button"`. Das Aussehen darf sich davon nicht ändern. */
.awskachel {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; cursor: pointer;
}
@media (max-width: 760px) {
  /* Am Telefon gibt es kein Überfahren — die Knöpfe stehen immer sichtbar
     und in Fingergröße da. */
  .awskpflege { opacity: 1; gap: 8px; }
  .awskbtn { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; }
}

/* ── Die Knopfleiste eines Blatts ────────────────────────────────────────
   `app.css` gibt jedem Kind der Leiste denselben Anteil (`flex: 1`). Bei zwei
   Knöpfen — „Abbrechen" und „Speichern" — ist das genau richtig. Sobald ein
   Abstandhalter dazwischensteht, bekommt AUCH ER ein Viertel der Breite, und
   die Knöpfe werden auf 25 Prozent gequetscht: „PDF ansehen" lief dann links
   aus der Leiste heraus.

   Der Abstandhalter nimmt jetzt, was übrig bleibt; die Knöpfe behalten die
   Breite ihres Textes. */
.modal-actions > .spacer { flex: 1 1 auto !important; min-width: 0; padding: 0; }
.modal-actions > *:not(.spacer) { flex: 0 1 auto; white-space: nowrap; min-width: 0; }

@media (max-width: 760px) {
  /* Am Telefon reicht die Breite für drei Knöpfe nicht — sie brechen um.
     Der Abstandhalter hat dann nichts mehr zu tun: Es gibt keinen rechten
     Rand, an den etwas zu schieben wäre. */
  .modal-actions { flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .modal-actions > .spacer { display: none !important; }
  /*
   * `flex: 0 1 auto`, nicht `1 1 auto`.
   *
   * Mit dem Wachstumsfaktor 1 nimmt der erste Knopf die ganze erste Zeile
   * ein — „PDF ansehen" wurde 358 Pixel breit, die beiden anderen rutschten
   * in eine zweite Zeile, und die Leiste war 122 Pixel hoch. Ohne ihn
   * behalten alle drei die Breite ihres Textes und stehen nebeneinander.
   */
  .modal-actions > *:not(.spacer) {
    flex: 0 1 auto; min-height: 46px; padding: 0 14px !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Das Blatt selbst: voller Schirm, und der Inhalt scrollt darin — nicht
     die Knopfleiste, die muss erreichbar bleiben. */
  /* `100%` statt `100vw`: Der Hintergrund hat einen Innenabstand, und 100vw
     misst den ganzen Schirm — das Blatt ragte dadurch genau um diesen
     Abstand nach rechts hinaus. Mit `100%` füllt es den Raum, den es
     tatsächlich hat. */
  .modal.awsblatt, .modal.stblatt {
    width: 100% !important; max-width: 100% !important;
    max-height: 92dvh; display: flex; flex-direction: column;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .modal.awsblatt .modal-actions, .modal.stblatt .modal-actions { flex: 0 0 auto; }
}

/* Die volle Breite für den Hauptknopf im Blatt stammt aus der Zeit, als er
   dort allein stand („Schließen"). Seit die fertigen Berichte PDF und CSV
   daneben haben, drückt sie die beiden anderen in eine zweite Zeile — der
   erste Knopf nahm 358 von 358 Pixeln. Gleiche Selektorform wie die Regel in
   app.css, damit sie sie sicher ablöst. */
@media (max-width: 760px) {
  .awsblatt .modal-actions .btn2, .stblatt .modal-actions .btn2 {
    width: auto !important; padding: 0 14px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ZUGÄNGE
   ══════════════════════════════════════════════════════════════════════════ */
.zgkopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin: 0 0 14px;
}
.zgkopf.zgspaeter { margin-top: 34px; }
.zgkopf h3 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.zgkopf .sub { margin: 3px 0 0; font-size: 12.5px; color: var(--n-sehrleise); }
.zgzahl {
  margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--n-sehrleise);
  background: var(--n-grund); border-radius: var(--rr); padding: 2px 9px;
}

.zgliste {
  display: flex; flex-direction: column;
  background: var(--n-flaeche); border-radius: var(--n-r);
  box-shadow: 0 0 0 1px var(--n-strich); overflow: hidden;
}
.zgz {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.5fr) 150px auto;
  gap: 14px; align-items: center; padding: 13px 18px;
  border-bottom: 1px solid var(--n-strich);
}
.zgz:last-child { border-bottom: 0; }
.zgz:hover { background: var(--n-grund); }
.zgn { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zgn .t {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zgn .s {
  font-size: 12.5px; color: var(--n-sehrleise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zgich {
  margin-left: 7px; font-size: 10.5px; font-weight: 650; color: var(--n-akzent);
  background: var(--n-akzent-leise); border-radius: var(--rr); padding: 2px 7px;
}
.zgm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.zgfahne {
  font-size: 11.5px; font-weight: 620; border-radius: var(--rr); padding: 3px 9px;
  background: var(--n-grund); color: var(--n-leise);
}
.zgfahne.gut { background: var(--n-gut-leise); color: var(--n-gut); }
.zgfahne.warn { background: color-mix(in srgb, var(--n-warn) 14%, transparent); color: var(--n-warn); }
.zgfahne.ab { background: var(--n-ab-leise); color: var(--n-ab); }
.zgart { font-size: 12px; color: var(--n-sehrleise); }
.zgrollen { display: flex; gap: 5px; flex-wrap: wrap; }
.zgrollen i {
  font-style: normal; font-size: 11.5px; font-weight: 550;
  background: var(--n-akzent-leise); color: var(--n-akzent);
  border-radius: var(--rr); padding: 3px 9px;
}
/* „ohne Rolle" ist kein Etikett, sondern eine Warnung: Der Zugang sieht
   nichts. Deshalb in der Warnfarbe und nicht als weiterer grauer Chip. */
.zgrollen.leer { font-size: 11.5px; color: var(--n-warn); font-weight: 550; }
.zgl { font-size: 12px; color: var(--n-sehrleise); text-align: right; }
.zgl .nie { color: var(--n-warn); }
.zgb { display: flex; gap: 6px; justify-content: flex-end; }
.zgbtn {
  border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 550;
  color: var(--n-leise); cursor: pointer; padding: 6px 11px; border-radius: 8px;
  box-shadow: 0 0 0 1px var(--n-strich); white-space: nowrap;
  transition: background .12s, color .12s, box-shadow .12s;
}
.zgbtn:hover {
  background: var(--n-akzent-leise); color: var(--n-akzent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--n-akzent) 30%, transparent);
}

/* Die fertigen Rollen — sie stehen nur da, solange es keine gibt. */
.zgvorlagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.zgvorlage {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  border: 0; background: var(--n-flaeche); box-shadow: 0 0 0 1px var(--n-strich);
  border-radius: var(--n-r); padding: 15px 16px; cursor: pointer; font: inherit;
  transition: box-shadow .14s, transform .14s;
}
.zgvorlage:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--n-strich-stark), 0 12px 28px -12px rgba(11,18,32,.2);
}
.zgvorlage .t { font-size: 14.5px; font-weight: 620; }
.zgvorlage .s { font-size: 12.5px; color: var(--n-sehrleise); line-height: 1.4; }
.zgvorlage .z { font-size: 12px; font-weight: 600; color: var(--n-akzent); margin-top: 4px; }

.zgchecks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; }
.zgchecks label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; margin: 0; }
.zgchecks input { width: auto; min-height: 0; }
.zghinweis { margin-top: 14px; line-height: 1.5; }

/* Der Einmal-Link: ein Feld zum Herauskopieren, kein Fließtext. */
.zglinkfeld { display: flex; gap: 8px; margin-top: 14px; }
.zglinkfeld input {
  flex: 1 1 auto; min-width: 0; font-family: ui-monospace, monospace; font-size: 12.5px;
}
.zglinkfeld .btn2 { flex: 0 0 auto; }

@media (max-width: 760px) {
  /* Vier Spalten passen nicht — untereinander, und die Knöpfe in Fingergröße. */
  .zgz { grid-template-columns: 1fr; gap: 8px; padding: 13px 14px; }
  .zgl { text-align: left; }
  .zgb { justify-content: flex-start; flex-wrap: wrap; }
  .zgbtn { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; }
  .zgkopf { flex-direction: column; align-items: stretch; gap: 10px; }
  .zglinkfeld { flex-direction: column; }
}

/* ── Rechtevergabe ───────────────────────────────────────────────────────
   Ein Recht ist keine Ankreuzzeile, sondern eine Entscheidung. Deshalb
   steht unter jedem, was es bedeutet — wer „plattform:zugaenge.mandant"
   liest und nichts weiter, hakt es entweder vorsichtshalber nicht an oder
   vorsichtshalber allen. */
.ckrechteblock { margin-top: 10px; }
.ckgruppe { margin-top: 16px; }
.ckgruppentitel {
  font-size: 11.5px; font-weight: 650; color: var(--n-sehrleise);
  margin-bottom: 6px;
}
.ckrecht {
  display: grid; grid-template-columns: 20px 1fr; gap: 2px 10px;
  align-items: start; padding: 9px 10px; border-radius: 10px; margin: 0 0 2px;
  cursor: pointer; transition: background .12s;
}
.ckrecht:hover { background: var(--n-grund); }
.ckrecht input { grid-row: 1 / 3; width: auto; min-height: 0; margin-top: 2px; }
.ckrecht .n { font-size: 13.5px; font-weight: 550; }
.ckrecht .s { font-size: 12px; color: var(--n-sehrleise); line-height: 1.45; }
/* Weitreichende Rechte werden nicht versteckt, sondern benannt. */
.ckrecht.schwer .n i {
  font-style: normal; margin-left: 8px; font-size: 10.5px; font-weight: 650;
  color: var(--n-warn); background: color-mix(in srgb, var(--n-warn) 14%, transparent);
  border-radius: var(--rr); padding: 2px 8px;
}
.zgrollen i.alles { background: var(--n-ab-leise); color: var(--n-ab); }
.zgrollen i.geerbt { background: var(--n-grund); color: var(--n-sehrleise); }

/* ── Zugangsübersicht auf der Startseite ─────────────────────────────────
   Für CKV-Zugänge: wer arbeitet gerade wo. Sie steht dort, weil man sie
   sehen soll, ohne sie zu suchen — der erste Blick am Morgen. */
.hzugriff {
  margin-top: 26px; background: var(--n-flaeche); border-radius: var(--n-r);
  box-shadow: 0 0 0 1px var(--n-strich); padding: 16px 18px;
}
.hzugriff h4 {
  margin: 0 0 3px; font-size: 14px; font-weight: 620;
  display: flex; align-items: center; gap: 8px;
}
.hzugriff .sub { font-size: 12px; color: var(--n-sehrleise); margin: 0 0 12px; }
.hzliste { display: flex; flex-direction: column; gap: 2px; }
.hzz {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  align-items: center; padding: 8px 10px; border-radius: 9px; font-size: 13px;
}
.hzz:hover { background: var(--n-grund); }
.hzz .wer { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hzz .wo {
  font-size: 12px; font-weight: 550; color: var(--n-akzent);
  background: var(--n-akzent-leise); border-radius: var(--rr); padding: 3px 10px;
  white-space: nowrap;
}
.hzz .wo.ohne { color: var(--n-sehrleise); background: var(--n-grund); }
.hzz .wann { font-size: 11.5px; color: var(--n-sehrleise); white-space: nowrap; }
.hzleer { font-size: 13px; color: var(--n-sehrleise); padding: 4px 2px; }

@media (max-width: 760px) {
  .hzz { grid-template-columns: 1fr auto; }
  .hzz .wann { grid-column: 1 / -1; }
}

/* Herkunft einer Einstellung — klein, aber sie beantwortet die Frage, die
   bei jeder systemweiten Änderung als Erstes kommt: wer war das? */
.ckherkunft { margin-top: 12px; font-size: 12px; color: var(--n-sehrleise); }
/* Löschen sieht anders aus als alles Übrige — es ist das einzige Unumkehrbare. */
.zgbtn.weg { color: var(--n-sehrleise); }
.zgbtn.weg:hover {
  background: var(--n-ab-leise); color: var(--n-ab);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--n-ab) 30%, transparent);
}

/* Serverkacheln — vier Zahlen, die eine Entscheidung auslösen. */
.ckkacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ckkachel {
  background: var(--n-flaeche); border-radius: var(--n-r);
  box-shadow: 0 0 0 1px var(--n-strich); padding: 15px 17px;
  display: flex; flex-direction: column; gap: 3px;
}
.ckkachel .t { font-size: 12.5px; color: var(--n-leise); font-weight: 550; }
.ckkachel .v { font-size: 24px; font-weight: 660; letter-spacing: -.02em; }
.ckkachel .s { font-size: 11.5px; color: var(--n-sehrleise); }
/* Voll heißt voll — die Farbe kommt erst, wenn eine Entscheidung ansteht. */
.ckkachel.warn { box-shadow: 0 0 0 1px color-mix(in srgb, var(--n-warn) 45%, transparent); }
.ckkachel.warn .v { color: var(--n-warn); }
/* Ein Recht ohne Ansicht — sichtbar, aber leiser als die Warnung. */
.ckrecht .n i.ohne {
  color: var(--n-sehrleise); background: var(--n-grund);
  font-weight: 550;
}
/* Der Knopf unter der Filialliste — volle Breite, damit er als Abschluss der
   Liste gelesen wird und nicht als eine weitere Zeile darin. */
.ckfneu { width: 100%; margin-top: 12px; min-height: 44px; }