/* Dunkles Design in Schwarz und Grau. Alle Grundtöne tragen den Farbton der
     Firmenfarbe #45545b (199°) in sehr geringer Sättigung – das Schwarz ist
     dadurch minimal blau unterlegt statt neutral. Der Akzent ist dieselbe
     Hausfarbe, aufgehellt, weil #45545b auf Schwarz zu dunkel wäre. */
  html{touch-action:manipulation;}
  /* ── Graphit und Platin ──────────────────────────────────────────────
     Edle Grautöne statt Farbe: Die Fläche trägt, nicht der Anstrich.
     Flächen bekommen einen sehr flachen Verlauf — gerade so viel, dass
     Karten aufliegen statt aufgemalt zu wirken. Ein Verlauf, den man als
     Verlauf erkennt, ist schon zu stark.

     Standard ist HELL. Ein Kassenbildschirm steht im Tagesgeschäft, oft am
     Fenster; dort liest sich Dunkel schlecht. Das dunkle Thema ist Graphit,
     kein Schwarz — für den Abend und für Geräte, die danach fragen.

     Farbe trägt nur Bedeutung, nie Schmuck:
       Warn   „noch nicht erledigt" — ungepusht, offen, Differenz
       Gut    „stimmt"
       Messing endgültig — der Kassenabschluss
     Der Akzent selbst ist grau: gebürstetes Metall, kein Signal. */
  :root{
    color-scheme:light dark;
    --bg:#eef1f4; --card:#ffffff; --card2:#e6ebf0; --fg:#1a1e22;
    /* Von #6e767c auf #666e74: Der alte Wert kam auf dem Grund nur auf
       3,98:1 und lag damit unter der Schwelle für kleinen Text — gedämpft
       heißt leiser, nicht unlesbar. */
    --muted:#666e74;
    --raise:#ffffff; --raise2:#f3f4f6;
    --chrome:#e5e7ea; --chrome2:#dcdfe3;
    /* Messing statt Graphit.
       Der Akzent trägt Text (Knöpfe, aktive Reiter), deshalb ist er dunkler
       als das Messing der Vorlage: #a8863f mit weißer Schrift käme auf 2,9:1
       und wäre unlesbar. #8a6d2f erreicht 4,8:1 — hell genug, um warm zu
       wirken, dunkel genug, um beschriftet zu werden. Das reine Messing
       bleibt als `--messing` für Flächen, die keinen Text tragen. */
    /* Die Farben der CKV-Kasse, wie sie auf den Tasten der Kassenoberfläche
       stehen: Himmelblau, Limette, Magenta. Ausgelesen aus dem Produktbild
       auf ckv.de — die Website selbst ist schwarzweiß, die Farbigkeit steckt
       im Produkt.

       Das reine Blau #0090d8 trägt weiße Schrift nur mit 3,5:1 und ist damit
       als Knopffarbe unlesbar. Deshalb hier eine dunklere Stufe derselben
       Familie (4,98:1); das Markenblau selbst bleibt als `--marke` für
       Flächen, Balken und Verläufe, die keinen Text tragen. */
    --accent:#0071a8; --accent2:#00557a; --accent-fg:#ffffff;
    --marke:#0090d8; --marke2:#a8e43c; --marke3:#fc48c0;
    /* Limette ist die Bestätigungsfarbe der Kasse — auf ihr steht dunkler
       Text, nie weißer (weiß käme auf 1,5:1). */
    --ok:#48700e; --ok-fg:#f6fbee; --warn:#b5893a; --danger:#c0574c;
    --border:#d5d9dd; --hover:#e8f1f7; --glass:rgba(29,33,36,.045);
    --messing:#0090d8;
    /* Verläufe: nach unten eine Spur dunkler, wie Licht von oben. */
    --grad-card:linear-gradient(180deg,#ffffff 0%,#f6f7f9 100%);
    --grad-raise:linear-gradient(180deg,#ffffff 0%,#eef0f3 100%);
    --grad-chrome:linear-gradient(180deg,#e9ebee 0%,#dee1e5 100%);
    --grad-accent:linear-gradient(180deg,#0090d8 0%,#0072ab 100%);

    /* ── Ordnung ──────────────────────────────────────────────────────────
       Vorher standen sechs Eckradien nebeneinander (5, 9, 10, 11, 12, 999)
       und neunundfünfzig einzeln geschriebene Schatten. Keiner davon war
       falsch, aber zusammen ergaben sie kein Bild: Zwei Kacheln
       nebeneinander hatten unterschiedlich runde Ecken, und niemand konnte
       sagen, warum. Drei Stufen genügen — was sich nicht einordnen lässt,
       gehört meist ohnehin überdacht. */
    --r1:8px;     /* Chips, Marken, kleine Felder      */
    --r2:12px;    /* Karten, Kacheln, Eingaben          */
    --r3:18px;    /* Blätter, Dialoge, große Flächen    */
    --rr:999px;   /* rund                                */

    /* Schatten als Ebenen, nicht als Dekoration: Je höher etwas über der
       Fläche schwebt, desto weicher und weiter fällt sein Schatten. */
    --s1:0 1px 2px rgba(20,24,28,.06), 0 1px 1px rgba(20,24,28,.04);
    --s2:0 4px 14px rgba(20,24,28,.09), 0 1px 3px rgba(20,24,28,.05);
    --s3:0 18px 48px rgba(20,24,28,.18), 0 4px 12px rgba(20,24,28,.08);
    /* Die feine Lichtkante oben auf einer Karte — sie lässt eine Fläche
       gewölbt statt aufgemalt wirken. */
    --kante:inset 0 1px 0 rgba(255,255,255,.6);

    /* ── Schrift ──────────────────────────────────────────────────────────
       Bewusst KEINE mitgelieferte Schriftdatei: Sie müsste heruntergeladen,
       lizenziert und ausgeliefert werden, und beim ersten Laden hätte die
       Seite einen Moment lang die falsche. Die Systemschriften sind seit
       Jahren gut; was der Oberfläche fehlte, war nicht die Schrift, sondern
       ein System aus Größen, Gewichten und Abständen. */
    --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display",
      "Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
    --schrift-zahl:ui-rounded,-apple-system,"Segoe UI Variable Display",
      "Segoe UI",Inter,Roboto,sans-serif;
  }
  /* Graphit — nicht zu dunkel. Ein Bildschirm, der nachts wie ein Loch
     wirkt, blendet beim Blick zurück in den Raum. */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="hell"]){
      --bg:#23262a; --card:#2c3035; --card2:#212429; --fg:#eceef0; --muted:#a2aab2;
      --raise:#343940; --raise2:#2a2e33;
      --chrome:#1f2226; --chrome2:#1a1d20;
      /* Auf Anthrazit darf das Messing hell und satt sein — dort kommt es
         erst richtig zur Geltung: #d4af5f erreicht gegen den Grund 7:1. */
      /* Auf Anthrazit darf das Markenblau in voller Sättigung stehen —
         dort erreicht es 4,3:1 und wirkt wie auf dem Kassendisplay. */
      --accent:#3cb4ee; --accent2:#0090d8; --accent-fg:#04222f;
      --marke:#0090d8; --marke2:#a8e43c; --marke3:#fc48c0;
      --ok:#a8e43c; --ok-fg:#16210a; --warn:#ddae63; --danger:#e08076;
      --border:#333c44; --hover:#2b3841; --glass:rgba(255,255,255,.05);
      --messing:#3cb4ee;
      --grad-card:linear-gradient(180deg,#31353b 0%,#292d32 100%);
      --grad-raise:linear-gradient(180deg,#3a4047 0%,#31363c 100%);
      --grad-chrome:linear-gradient(180deg,#24272c 0%,#1c1f22 100%);
      --grad-accent:linear-gradient(180deg,#4cc0f5 0%,#0090d8 100%);
      /* Im Dunkeln trägt nicht der Schatten die Tiefe, sondern das Licht:
         Schatten verschwinden auf dunklem Grund, eine helle Oberkante nicht. */
      --s1:0 1px 2px rgba(0,0,0,.34);
      --s2:0 6px 18px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.3);
      --s3:0 20px 54px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.35);
      --kante:inset 0 1px 0 rgba(255,255,255,.07);
    }
  }
  :root[data-theme="dunkel"]{
    --bg:#23262a; --card:#2c3035; --card2:#212429; --fg:#eceef0; --muted:#a2aab2;
    --raise:#343940; --raise2:#2a2e33;
    --chrome:#1f2226; --chrome2:#1a1d20;
    --accent:#3cb4ee; --accent2:#0090d8; --accent-fg:#04222f;
    --marke:#0090d8; --marke2:#a8e43c; --marke3:#fc48c0;
    --ok:#a8e43c; --ok-fg:#16210a; --warn:#ddae63; --danger:#e08076;
    --border:#333c44; --hover:#2b3841; --glass:rgba(255,255,255,.05);
    --messing:#3cb4ee;
    --grad-card:linear-gradient(180deg,#31353b 0%,#292d32 100%);
    --grad-raise:linear-gradient(180deg,#3a4047 0%,#31363c 100%);
    --grad-chrome:linear-gradient(180deg,#24272c 0%,#1c1f22 100%);
    --grad-accent:linear-gradient(180deg,#4cc0f5 0%,#0090d8 100%);
  }
  /* ── Kennzeichnung des Stagings ──
     Die Marke sitzt im Namenszug, ein schmaler Streifen liegt als
     Innenschatten auf der Kopfzeile. Beides nimmt keinen Platz im Seitenfluss
     ein: der Streifen ist ein Schatten, die Marke steht in einer Zeile, die
     ohnehin höher ist als sie. Der Inhalt darunter bleibt unverschoben. */
  .stagingchip{
    flex:0 0 auto;font-size:9.5px;font-weight:900;letter-spacing:1.3px;
    text-transform:uppercase;line-height:1.25;padding:3px 7px 4px;
    border-radius:var(--r1);background:var(--warn);color:#231703;
  }
  html[data-stage="staging"] aside{box-shadow:inset 0 3px 0 var(--warn);}
  /* Auf der Anmeldeseite gibt es keine Kopfzeile – dort trägt die Karte den
     Streifen, damit auch vor dem Anmelden klar ist, wo man landet. */
  html[data-stage="staging"] .login-card{box-shadow:inset 0 3px 0 var(--warn),0 20px 60px rgba(0,0,0,.25);}
  /* Am Rechner steht die Seitenleiste dauerhaft im Bild – dort genügt die
     Marke im Namenszug. Auf dem Handy scrollt die Kopfzeile weg; was dort
     immer bleibt, ist die Fußnavigation. Sie bekommt deshalb denselben
     Streifen und eine eigene kleine Marke. Die Regeln dafür stehen im
     letzten Medienblock der Datei, sonst schlägt sie der Schatten der
     Navigation weiter oben. */

  *{box-sizing:border-box;}
  /* Zahlen dicktengleich – überall.
     Belege werden seit hundert Jahren so gesetzt, und zwar aus einem Grund:
     Spalten dürfen nicht springen, wenn sich ein Betrag ändert. In einer
     Kasse ist fast jede wichtige Angabe eine Zahl. */
  body{font-variant-numeric:tabular-nums;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--fg);}
  a{color:inherit;}
  button{font-family:inherit;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
  button *{user-select:none;-webkit-user-select:none;}
  .hidden{display:none !important;}

  /* Login */
  #login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
    background:radial-gradient(1000px 500px at 50% -10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent),var(--bg);}
  .login-card{width:100%;max-width:400px;background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r3);padding:34px;box-shadow:0 20px 60px rgba(0,0,0,.25);}
  .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;margin-bottom:22px;}
  .brand .mark{width:38px;height:38px;border-radius:var(--r2);background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-size:19px;}
  label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px;font-weight:600;}
  input{width:100%;padding:11px 13px;border-radius:var(--r2);border:1px solid var(--border);background:var(--card2);color:var(--fg);font-size:15px;}
  input:focus{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);border-color:transparent;}
  /* Schriftfarbe aus dem Thema, nicht fest: Der Akzent ist hell dunkel und
     dunkel hell – festes Weiß stünde im dunklen Thema auf Platin. */
  .btn{width:100%;margin-top:20px;padding:12px;border:none;border-radius:var(--r2);background:var(--grad-accent);color:var(--accent-fg);font-weight:700;font-size:15px;}
  .btn:active{transform:translateY(1px);}
  .err{color:var(--danger);font-size:13px;margin-top:12px;min-height:16px;}

  /* App layout */
  #app{display:grid;grid-template-columns:230px 1fr;min-height:100vh;}
  aside{background:var(--grad-chrome);border-right:1px solid var(--border);padding:20px 14px;display:flex;flex-direction:column;}
  aside .brand{padding:0 8px;}
  nav{margin-top:18px;display:flex;flex-direction:column;gap:3px;flex:1;}
  .navlink{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r2);color:var(--muted);font-weight:600;font-size:14px;border:none;background:none;text-align:left;}
  .navlink:hover{background:var(--hover);color:var(--fg);}
  .navlink.active{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--fg);}
  .navlink .ic{font-size:17px;width:20px;text-align:center;}
  .navlink.back{color:var(--muted);font-weight:600;}
  .navgroup{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);
    font-weight:700;padding:14px 12px 6px;}

  /* ── Ansichten ordnen ──
     Reihenfolge und Sichtbarkeit gehören dem Zugang. Der Ordnen-Modus zeigt
     alle Ansichten, auch die ausgeblendeten — sonst ließe sich keine wieder
     einschalten. */
  .navliste{display:flex;flex-direction:column;gap:1px;}
  .navzeile{display:flex;align-items:center;gap:2px;transition:transform .16s ease;}
  .navzeile>.navlink{flex:1;min-width:0;}
  .navzeile.zieht{transition:none;z-index:5;position:relative;}
  .navzeile.zieht>.navlink{background:var(--card);box-shadow:0 8px 22px rgba(0,0,0,.22);}
  .navzeile.versteckt>.navlink{opacity:.45;}
  .navgriff{cursor:grab;user-select:none;touch-action:none;color:var(--muted);
    font-size:13px;padding:0 3px 0 5px;line-height:1;flex:none;}
  .navzeile.zieht .navgriff{cursor:grabbing;}

  /* Der Schalter: Form trägt den Zustand, nicht nur Farbe. */
  .navschalter{flex:none;width:30px;height:17px;padding:0;margin-right:6px;cursor:pointer;
    border-radius:9px;border:1px solid var(--border);background:var(--card2);
    position:relative;transition:background .14s,border-color .14s;}
  .navschalter i{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
    background:var(--muted);transition:transform .14s,background .14s;}
  .navschalter.an{background:var(--accent);border-color:var(--accent);}
  .navschalter.an i{transform:translateX(13px);background:#fff;}
  .navschalter:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  .navordnen,.navzurueck{margin-top:8px;width:100%;text-align:left;padding:8px 12px;
    border-radius:var(--r2);border:1px dashed var(--border);background:none;
    color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;}
  .navordnen:hover,.navzurueck:hover{color:var(--fg);border-color:var(--accent);}
  .navordnen.an{border-style:solid;border-color:var(--accent);color:var(--accent);}
  .navzurueck{margin-top:4px;border:none;font-size:12px;}

  @media (max-width:900px){
    /* In der Fußleiste am Telefon wird nicht geordnet — dort ist kein Platz
       für Griffe, und das Ziehen kollidiert mit dem Wischen. */
    .navgriff,.navschalter,.navordnen,.navzurueck{display:none;}
    .navliste{flex-direction:row;flex:1;}
    .navzeile{flex:1 1 0;min-width:0;}
  }
  .brand{border:none;background:none;color:inherit;font-weight:800;font-size:19px;padding:0 8px;cursor:pointer;
    display:flex;align-items:center;gap:11px;text-align:left;}

  /* Startseite mit den Modulkacheln */
  .homehead{margin-bottom:22px;}
  .homehead h2{font-size:22px;margin:0 0 4px;}
  .homehead p{color:var(--muted);font-size:14px;margin:0;}
  /* Schmal genug, dass auf dem Handy zwei Karten nebeneinander passen. */
  .modgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;}
  .modcard{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
    -webkit-touch-callout:none;
    background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r3);padding:15px 14px 14px;color:var(--fg);
    transition:transform .12s,border-color .12s,box-shadow .12s;}
  .modcard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.22);}
  /* Anordnen: die gezogene Kachel liegt oben, die übrigen rücken weich nach. */
  .modgrid.sorting{touch-action:none;}
  .modgrid.sorting .modcard{transition:transform .14s ease;}
  .modcard.dragging{z-index:5;opacity:.95;transform:none;cursor:grabbing;
    border-color:var(--accent);box-shadow:0 22px 48px rgba(0,0,0,.55);transition:none !important;}
  .modcard:active{transform:translateY(-1px);}
  .modcard .mi{font-size:23px;line-height:1;}
  .modcard .mn{font-size:15px;font-weight:800;}
  /* Zwei Zeilen reichen – der Rest wird gekürzt, damit die Karten gleich hoch bleiben. */
  .modcard .md{font-size:11.5px;color:var(--muted);line-height:1.4;max-width:100%;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .modcard .mv{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px;}
  .modcard .chip{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--card2);
    border:1px solid var(--border);border-radius:var(--rr);padding:3px 8px;cursor:pointer;transition:.12s;}
  .modcard .chip:hover{border-color:var(--accent);color:var(--fg);background:var(--hover);}
  .modcard .mstat{font-size:11.5px;font-weight:700;color:var(--accent);min-height:0;margin-top:5px;}
  .homefoot{margin-top:26px;font-size:12px;color:var(--muted);text-align:center;min-height:16px;}
  .modcard .mwho{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;min-height:0;}
  .modcard .who{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
    color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);
    border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);border-radius:var(--rr);padding:3px 9px;}
  .modcard .who.me{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);
    border-color:color-mix(in srgb,var(--accent) 35%,transparent);}
  .modcard .who .dot{width:6px;height:6px;border-radius:50%;background:currentColor;
    animation:pulse 2s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  .userbox{border-top:1px solid var(--border);padding-top:14px;margin-top:10px;font-size:13px;color:var(--muted);}
  .logout{margin-top:10px;width:100%;padding:9px;border:1px solid var(--border);background:none;color:var(--fg);border-radius:var(--r2);font-weight:600;font-size:13px;}

  main{padding:30px 34px;overflow:auto;min-width:0;}

  /**
   * Am Rechner steht das Fenster fest, gescrollt wird nur innen.
   *
   * Vorher wuchs die Seite mit dem Inhalt und die ganze Anwendung rutschte
   * nach oben weg – an der Kasse hieß das: Kopfzeile weg, Bestellung halb
   * abgeschnitten, und erst nach dem Scrollen wieder brauchbar. Jetzt ist die
   * Hülle so hoch wie das Fenster; scrollen darf nur noch der Bereich, in dem
   * es sinnvoll ist.
   *
   * Nur ab Tabletbreite: Auf dem Telefon ist die scrollende Seite richtig,
   * weil dort die Adressleiste mitscrollt und Platz freigibt.
   */
  @media(min-width:901px){
    #app{height:100vh;height:100dvh;min-height:0;overflow:hidden;}
    main{display:flex;flex-direction:column;overflow:hidden;padding-bottom:20px;}
    .topbar{flex:0 0 auto;}
    #content{flex:1 1 auto;min-height:0;overflow:auto;}
  }
  .topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px;}
  h1{font-size:23px;margin:0;}
  .sub{color:var(--muted);font-size:14px;margin-top:3px;}
  select{padding:8px 12px;border-radius:var(--r2);border:1px solid var(--border);background:var(--card2);color:var(--fg);font-size:14px;}

  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px;}
  .kpi{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r3);
    padding:18px 20px;min-width:0;overflow:hidden;}
  .kpi .k{font-size:13px;color:var(--muted);font-weight:600;}
  .kpi .v{font-size:27px;font-weight:800;margin-top:8px;letter-spacing:-.5px;
    /* Ohne das sprengt ein Millionenbetrag die Kachel, statt sich zu fügen. */
    white-space:nowrap;max-width:100%;}
  .kpi .v.small{font-size:22px;}
  /* Gestaffelt nach Zeichenzahl — siehe zahlKlasse() in views.js. Eine reine
     CSS-Lösung skaliert mit der Kachelbreite und kennt die Textlänge nicht. */
  .kpi .v.lang{font-size:21px;letter-spacing:-.03em;}
  .kpi .v.sehrlang{font-size:18px;letter-spacing:-.035em;}
  .kpi .v.winzig{font-size:15px;letter-spacing:-.04em;}
  .kpi .v.small.lang{font-size:18px;}
  .kpi .v.small.sehrlang{font-size:16px;}
  .kpi .v.small.winzig{font-size:14px;}
  /* Zweite Zeile unter der Zahl: der Vergleich, ohne den eine Zahl allein steht. */
  .kpi .kfuss{font-size:12px;color:var(--muted);margin-top:6px;font-weight:600;}

  /* Kachelwahl der Übersicht */
  .mengekarte.kachelkarte{max-width:420px;}
  .kachelliste{margin-top:12px;max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
  .kachelzeile{display:flex;align-items:center;gap:8px;padding:7px 10px;
    border:1px solid var(--border);border-radius:var(--r2);background:var(--grad-raise);}
  .kachelan{flex:1;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;cursor:pointer;}
  .kachelan input{width:18px;height:18px;accent-color:var(--accent);}
  .kachelpfeil{padding:5px 10px;line-height:1;}
  .kachelpfeil[disabled]{opacity:.3;}
  .dlgleiste{display:flex;align-items:center;gap:8px;margin-top:16px;}
  .dlgleiste .spacer,.toolbar .spacer{flex:1;}
  .dlgleiste .linkbtn{width:auto;margin:0;padding:8px 0;}
  .btnprim{padding:8px 16px;border:1px solid transparent;border-radius:var(--r2);
    background:var(--grad-accent);color:var(--accent-fg);font-weight:700;font-size:13px;}

  .grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:16px;}
  .panel{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r3);padding:20px;}
  .panel h2{font-size:15px;margin:0 0 16px;}
  .chart{width:100%;height:200px;}
  .bar{fill:url(#g);transition:opacity .2s;}
  .bar:hover{opacity:.8;}

  table{width:100%;border-collapse:collapse;font-size:14px;}
  th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);}
  th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px;}
  td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}
  .rowlist{display:flex;flex-direction:column;gap:10px;}
  .rowitem{display:flex;align-items:center;justify-content:space-between;font-size:14px;}
  .rowitem .lbl{color:var(--muted);} .rowitem .val{font-weight:700;font-variant-numeric:tabular-nums;}
  .pill{display:inline-block;padding:3px 9px;border-radius:var(--rr);font-size:12px;font-weight:600;}
  .pill.free{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok);}
  .pill.occ{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn);}
  .tables-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
  .tcard{background:var(--card2);border:1px solid var(--border);border-radius:var(--r2);padding:14px;text-align:center;}
  .tcard .tn{font-size:20px;font-weight:800;}
  .empty{color:var(--muted);font-size:14px;padding:16px 0;text-align:center;}
  .loading{color:var(--muted);font-size:14px;}

  /* Kasse (POS) */
  .posbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
  .pos{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start;}
  @media(max-width:900px){.pos{grid-template-columns:minmax(0,1fr);}}

  /**
   * Die Kasse füllt das Fenster genau aus.
   *
   * Gescrollt wird nur die Artikelfläche – dort ist es unvermeidlich, weil
   * niemand seine Karte auf eine Bildschirmhöhe kürzt. Bereichsleiste,
   * Kategorien und das ganze Bestellfenster stehen fest: Was man zum
   * Kassieren braucht, darf nie erst herangeholt werden müssen.
   */
  @media(min-width:901px){
    #content.kasse{display:flex;flex-direction:column;overflow:hidden;}
    #content.kasse .posheader{flex:0 0 auto;}
    #content.kasse .pos{flex:1 1 auto;min-height:0;align-items:stretch;}
    #content.kasse .prodpane{min-height:0;gap:10px;}
    #content.kasse #catBar,#content.kasse #prodSizeRow{flex:0 0 auto;}
    #content.kasse #prodPane{flex:1 1 auto;min-height:0;overflow:auto;padding-right:4px;}
    /* Nicht mehr klebend, sondern schlicht so hoch wie die Spalte. */
    #content.kasse .order{position:static;height:100%;min-height:0;top:auto;}
  }
  .prodgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--prodsize,140px),1fr));gap:10px;}
  .prodbtn{min-height:var(--prodmin,76px);}
  /* Bereiche: Segmentleiste in einer Zeile. */
  .segbar{display:flex;width:fit-content;gap:3px;padding:3px;margin-bottom:8px;min-width:0;max-width:100%;
    background:var(--card2);border:1px solid var(--border);border-radius:var(--r2);overflow-x:auto;
    scrollbar-width:none;box-shadow:inset 0 1px 0 var(--glass);}
  .segbar::-webkit-scrollbar{display:none;}
  .seg{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:none;background:none;
    color:var(--muted);font-weight:700;font-size:14px;padding:9px 16px;border-radius:var(--r2);}
  .seg:hover{color:var(--fg);}
  .seg.on{color:var(--accent-fg);background:linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}

  /* Kategorien: ein Streifen zum Wischen statt einer Wand aus Knöpfen. */
  .catstrip{display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    min-width:0;max-width:100%;
    padding:2px 0 8px;margin-bottom:6px;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%);}
  .catstrip::-webkit-scrollbar{display:none;}
  .chipbtn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:0 0 auto;
    padding:9px 16px;border:1px solid var(--border);border-radius:var(--rr);font-weight:700;font-size:14px;
    background:linear-gradient(180deg,var(--raise),var(--raise2));color:var(--fg);box-shadow:inset 0 1px 0 var(--glass);}
  .chipbtn:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);}
  .chipbtn.on{border-color:transparent;color:var(--accent-fg);
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
  .seg .cnt,.chipbtn .cnt{font-size:11.5px;font-weight:800;opacity:.65;font-variant-numeric:tabular-nums;}
  .prodpane{display:flex;flex-direction:column;gap:18px;min-width:0;}
  #catBar{min-width:0;max-width:100%;}
  .prodgroup .pgh{display:flex;align-items:baseline;gap:10px;font-size:13px;font-weight:800;
    letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:9px;
    padding-bottom:7px;border-bottom:1px solid var(--border);}
  .prodgroup .pga{font-size:11px;font-weight:600;letter-spacing:.4px;color:var(--accent);
    background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:var(--rr);padding:2px 9px;text-transform:none;}
  .listrow.sub{padding-left:14px;}
  .implist{max-height:42vh;overflow:auto;margin:6px 0 4px;}
  .imparea{border:1px solid var(--border);border-radius:var(--r2);padding:12px 14px;margin-bottom:10px;background:var(--card2);}
  .imparea .impname{font-weight:800;font-size:14px;margin-bottom:4px;}
  .impcats{margin-top:10px;display:flex;flex-direction:column;gap:4px;}
  .impcat summary{cursor:pointer;font-size:13px;font-weight:700;padding:5px 0;}
  .impcat summary .sub{display:inline;}
  .impcat .rowlist{padding:4px 0 8px 14px;}
  .impwarn{border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);
    border-radius:var(--r2);padding:10px 14px;font-size:12.5px;margin-bottom:12px;}
  .impwarn ul{margin:6px 0 0;padding-left:18px;color:var(--muted);}
  .costnote{border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);
    background:color-mix(in srgb,var(--warn) 12%,transparent);border-radius:var(--r2);
    padding:12px 14px;font-size:13px;line-height:1.55;margin-bottom:14px;}
  .costnote b{color:var(--warn);}
  code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;
    background:var(--card2);border:1px solid var(--border);border-radius:var(--r1);padding:1px 5px;}
  .impwarn li{margin:2px 0;}
  input[type=file]{padding:9px 11px;font-size:14px;}
  .listrow .tree{color:var(--muted);margin-right:7px;}
  .prodbtn{background:var(--grad-raise);border:1px solid var(--border);border-radius:var(--r2);padding:14px 13px;text-align:left;color:var(--fg);display:flex;flex-direction:column;gap:6px;min-height:76px;transition:.12s;
    position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
  /* Favoriten: Stern an der Kachel, langes Antippen legt ab und nimmt weg. */
  .prodbtn.isfav{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));}
  .prodbtn.isfav::after{content:"★";position:absolute;top:7px;right:9px;font-size:12px;line-height:1;color:var(--accent);}
  .seg.fav{font-size:15px;color:var(--accent);}
  .seg.fav.on{color:var(--accent-fg);}
  .prodbtn:hover{border-color:var(--accent);background:var(--hover);}
  .prodbtn:active{transform:scale(.97);}
  .prodbtn .pn{font-weight:700;line-height:1.25;min-width:0;max-width:100%;
    font-size:clamp(11.5px,calc(10px + var(--prodsize,140px)*.029),19px);
    overflow-wrap:anywhere;hyphens:auto;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
  .prodbtn .pp{color:var(--muted);font-variant-numeric:tabular-nums;
    font-size:clamp(10.5px,calc(9px + var(--prodsize,140px)*.024),16px);}
  /* Das Bestellfenster spannt sich über die Fensterhöhe: die Positionen
     scrollen in sich, Summe und Knöpfe bleiben immer sichtbar. */
  .order{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r3);padding:18px;position:sticky;top:16px;
    display:flex;flex-direction:column;height:calc(100vh - 32px);}
  .orderbody{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;overflow:auto;}
  /* Zusammenfassung – am Rechner nicht nötig, dort steht das Panel ohnehin daneben. */
  /* Eingeklappt: eine Zeile mit dem zuletzt gebuchten Artikel, Summe und PUSH. */
  /* Gruppen in der Bestellung: neue Runde oben, Gesendetes darunter. */
  .olgroup+.olgroup{margin-top:calc(var(--olgap,9px) + 4px);}
  .olgh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;
    padding-bottom:5px;border-bottom:1px solid var(--border);
    font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);}
  .olgroup.fresh .olgh{color:var(--accent);border-bottom-color:color-mix(in srgb,var(--accent) 38%,var(--border));}
  .olgh .olgs{font-size:12.5px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--fg);
    font-variant-numeric:tabular-nums;}
  .reagain{margin-left:7px;font-size:10.5px;font-weight:800;color:var(--accent);white-space:nowrap;
    background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:var(--rr);padding:1px 7px;}
  .lbtn[disabled]{opacity:.35;}
  .ordersum{display:none;width:100%;align-items:center;gap:9px;padding:9px 12px;}
  .osmain{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;
    background:none;border:none;padding:0;color:var(--fg);text-align:left;}
  .ordersum .oschev{flex:0 0 auto;color:var(--muted);font-size:12px;width:12px;}
  .ordersum .osl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-weight:700;font-size:14.5px;}
  .ordersum .osl .q{color:var(--muted);font-weight:800;}
  .ordersum .osl .osempty{color:var(--muted);font-weight:600;}
  .ordersum .osmore{margin-left:7px;font-size:11px;font-weight:800;color:var(--muted);
    background:var(--hover);border:1px solid var(--border);border-radius:var(--rr);padding:1px 7px;}
  .ordersum .ostot{flex:0 0 auto;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;}
  .ordersum .ospush{flex:0 0 auto;padding:9px 14px;border:none;border-radius:var(--r2);font-weight:800;font-size:13px;
    color:var(--accent-fg);background:linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
  /* Kurzes Aufleuchten, wenn etwas gebucht wurde – ohne aufzuklappen. */
  @keyframes osflash{from{background:color-mix(in srgb,var(--accent) 22%,transparent);}to{background:transparent;}}
  /* Kassieren gehört in die Daumenzone, nicht hinter einen Aufklapper.
     Kräftiger als PUSH: es ist die abschließende Handlung. */
  .ordersum .oskass{flex:0 0 auto;padding:9px 15px;border:none;border-radius:var(--r2);
    font-weight:800;font-size:13px;background:var(--grad-accent);color:var(--accent-fg);}
  .ordersum.flash{animation:osflash .7s ease-out;}
  .order h2{font-size:15px;margin:0 0 4px;}
  /* Abstand und Schriftgröße kommen von oben: die Bestellung rückt bei vielen
     Positionen zusammen, statt zu scrollen (siehe bestellungEinpassen). */
  .orderlines{display:flex;flex-direction:column;gap:var(--olgap,9px);margin:14px 0;flex:1 1 auto;min-height:64px;overflow:auto;}
  .ol{display:flex;justify-content:space-between;gap:10px;font-size:var(--olfs,14px);}
  .ol .q{color:var(--muted);}
  .ordertotal{display:flex;justify-content:space-between;font-size:21px;font-weight:800;border-top:1px solid var(--border);padding-top:13px;margin-top:6px;font-variant-numeric:tabular-nums;}
  .posactions{display:flex;gap:8px;margin-top:15px;}
  /* Kassieren bleibt grün – das ist die eine Stelle, an der Farbe eine
     abschließende Handlung meint. Aus dem Thema, damit sie in beiden
     Fassungen trägt. */
  .paybtn{flex:1;padding:14px;border:none;border-radius:var(--r2);
    background:linear-gradient(180deg,var(--ok),color-mix(in srgb,var(--ok) 78%,#000));
    color:var(--ok-fg);font-weight:800;font-size:16px;}
  .paybtn:disabled{opacity:.45;cursor:not-allowed;}
  .clearbtn{padding:14px 15px;border:1px solid var(--border);background:none;color:var(--fg);border-radius:var(--r2);font-weight:600;}
  .clearbtn:disabled{opacity:.45;cursor:not-allowed;}
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ok);color:#fff;padding:13px 22px;border-radius:var(--r2);font-weight:700;box-shadow:0 12px 34px rgba(0,0,0,.32);z-index:50;font-size:15px;}
  .ol{align-items:center;}
  .olname{flex:1;min-width:0;}
  .olright{display:flex;align-items:center;gap:6px;}
  .olprice{min-width:62px;text-align:right;font-variant-numeric:tabular-nums;}
  .lbtn{width:26px;height:26px;border:1px solid var(--border);background:var(--card2);color:var(--fg);border-radius:var(--r1);font-size:15px;line-height:1;display:grid;place-items:center;padding:0;}
  .lbtn:hover{border-color:var(--accent);}
  .lbtn.rm{color:var(--danger);border-color:transparent;background:none;}
  .paysec{margin-top:12px;border-top:1px solid var(--border);padding-top:12px;}
  .methods{display:flex;gap:8px;margin-bottom:10px;}
  .mbtn{flex:1;padding:9px;border:1px solid var(--border);background:var(--card2);color:var(--fg);border-radius:var(--r2);font-weight:600;}
  .mbtn.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);}
  .given{display:flex;align-items:center;gap:10px;font-size:14px;}
  .given input{width:110px;padding:8px 10px;}
  .given label{color:var(--muted);}
  #posChange{color:var(--ok);font-weight:700;margin-left:auto;}

  /* Verwaltung: Werkzeugleiste, Aktionen, Dialoge */
  .toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px;}
  .toolbar .grp{display:flex;gap:8px;flex-wrap:wrap;}
  .btn2{padding:10px 15px;border:none;border-radius:var(--r2);background:var(--grad-accent);color:var(--accent-fg);font-weight:700;font-size:14px;}
  .btn2:active{transform:translateY(1px);}
  .btn2:disabled{opacity:.5;cursor:not-allowed;}
  .btn-ghost{padding:7px 12px;border:1px solid var(--border);background:var(--card2);color:var(--fg);border-radius:var(--r2);font-weight:600;font-size:13px;}
  .btn-ghost:hover{border-color:var(--accent);}
  .btn-danger{color:var(--danger);}
  .btn-danger:hover{border-color:var(--danger);}
  .actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;}
  td .sub{font-size:12px;margin-top:2px;}
  .pill.off{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger);}
  .pill.neutral{background:var(--hover);color:var(--muted);}

  .modal-bg{position:fixed;inset:0;background:rgba(3,7,18,.62);display:grid;place-items:center;padding:20px;z-index:60;}
  .modal{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r3);padding:24px;width:100%;max-width:500px;max-height:88vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.4);}
  .modal h3{margin:0 0 4px;font-size:17px;}
  /* Auswahl weiterer Kassenfunktionen */
  .fnlist{display:flex;flex-direction:column;gap:9px;margin-top:16px;}
  .fnitem{display:flex;align-items:center;gap:13px;width:100%;padding:13px 14px;text-align:left;
    border:1px solid var(--border);border-radius:var(--r2);background:var(--card2);color:var(--fg);}
  .fnitem:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);}
  .fnitem.soon{opacity:.62;}
  .fnic{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;font-size:19px;
    border-radius:var(--r2);background:var(--card);border:1px solid var(--border);}
  .fntx{display:flex;flex-direction:column;gap:3px;min-width:0;}
  .fnn{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .fnd{color:var(--muted);font-size:12.5px;line-height:1.4;}
  .soonbadge{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
    border:1px solid var(--border);border-radius:var(--rr);padding:2px 8px;}
  .modal label{margin-top:13px;}
  .modal label:first-of-type{margin-top:8px;}
  .fields2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
  @media(max-width:520px){.fields2{grid-template-columns:1fr;}}
  .modal select{width:100%;padding:11px 13px;font-size:15px;border-radius:var(--r2);}
  .modal-actions{display:flex;gap:8px;margin-top:22px;}
  .modal-actions>*{flex:1;margin-top:0;padding:11px;}
  /* Anmeldung an der Kasse: Namen antippen, dann PIN.
     Alles fingergerecht – dieses Fenster wird nie mit einer Maus bedient. */
  .staffgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:8px;}
  .staffbtn{padding:16px 12px;border-radius:var(--r2);border:1px solid var(--border);background:var(--card2);
    color:var(--fg);font-weight:700;font-size:15px;min-height:56px;}
  .staffbtn:active{background:var(--hover);}
  .pindots{display:flex;justify-content:center;gap:12px;margin:16px 0 18px;min-height:16px;}
  .pdot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);}
  .pdot.an{background:var(--fg);border-color:var(--fg);}
  .pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
  .pkey{padding:18px 0;border-radius:var(--r2);border:1px solid var(--border);background:var(--card2);
    color:var(--fg);font-size:21px;font-weight:700;min-height:60px;}
  .pkey:active{background:var(--hover);}
  .pkey.ok{background:var(--grad-accent);color:var(--accent-fg);border-color:transparent;}
  .pkey.del{font-size:18px;}
  .linkbtn{display:block;width:100%;margin-top:14px;padding:8px;background:none;border:none;
    color:var(--muted);font-size:13px;font-weight:600;text-decoration:underline;}
  /* Tagesabschluss: Bilanzzeilen und Zählmaske.
     Gezählt wird mit Stückelung – wer die Summe eintippt, vertippt sich. */
  .bilanz{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
    border-bottom:1px solid var(--border);font-size:14px;}
  .bilanz:last-child{border-bottom:none;}
  .bilanz.gross{font-weight:800;font-size:16px;}
  .bilanz.diffrot span:last-child,td.diffrot{color:var(--danger);font-weight:800;}
  .zaehlfeld{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;margin-top:8px;}
  .zaehlzeile{display:grid;grid-template-columns:56px 1fr 72px;align-items:center;gap:7px;}
  .zaehlzeile .zw{font-size:12.5px;color:var(--muted);font-weight:700;text-align:right;}
  .zaehlzeile input{padding:7px 9px;font-size:14px;margin:0;text-align:right;}
  .zaehlzeile .zs{font-size:12px;color:var(--muted);text-align:right;}
  .warnpanel{border-color:color-mix(in srgb,var(--warn) 55%,transparent);
    background:color-mix(in srgb,var(--warn) 8%,var(--card));}
  .offenliste{margin-top:8px;}
  /* Suche: ein Feld für alles. Sie liegt über allem, weil sie von überall
     aus erreichbar sein muss – und schließt bei Escape oder Tipp daneben. */
  .topact{display:flex;align-items:center;gap:9px;}
  .suchknopf{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r2);
    border:1px solid var(--border);background:var(--card2);color:var(--muted);
    font-size:13.5px;font-weight:600;}
  .suchknopf .lupe{font-size:16px;line-height:1;}
  .suchbg{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.45);
    display:flex;align-items:flex-start;justify-content:center;padding:14vh 16px 16px;
    backdrop-filter:blur(2px);}
  .suchkarte{width:100%;max-width:520px;background:var(--grad-card);border:1px solid var(--border);
    border-radius:var(--r3);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4);}
  .suchkarte input{width:100%;margin:0;border:none;border-radius:0;padding:17px 19px;
    font-size:17px;background:transparent;color:var(--fg);}
  .suchkarte input:focus{outline:none;}
  .suchliste{max-height:min(52vh,420px);overflow-y:auto;border-top:1px solid var(--border);}
  .suchhint{padding:16px 19px;color:var(--muted);font-size:13px;}
  .suchtreff{display:flex;align-items:center;gap:11px;width:100%;padding:12px 19px;
    background:none;border:none;border-bottom:1px solid var(--border);text-align:left;color:var(--fg);}
  .suchtreff:last-child{border-bottom:none;}
  .suchtreff:hover,.suchtreff:focus{background:var(--hover);}
  .suchtreff .sart{flex:0 0 66px;font-size:10.5px;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);}
  .suchtreff .stxt{flex:1;font-size:14.5px;font-weight:650;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .suchtreff .szus{flex:0 0 auto;font-size:12.5px;color:var(--muted);}
  /* Artikelmenü beim Halten: Menge und Favorit an einer Stelle. */
  .mengebg,.wechselbg{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.45);
    display:flex;align-items:center;justify-content:center;padding:18px;}
  .mengekarte,.wechselkarte{width:100%;max-width:330px;background:var(--grad-card);
    border:1px solid var(--border);border-radius:var(--r3);padding:18px;
    box-shadow:0 24px 60px rgba(0,0,0,.4);}
  .wechselkarte{max-width:360px;}
  .mengetitel{font-weight:800;font-size:17px;letter-spacing:-.01em;text-align:center;}
  .mengesub{text-align:center;color:var(--muted);font-size:12.5px;margin-top:3px;}
  .mengegitter{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:13px;}
  .mengetaste{padding:15px 0;border-radius:var(--r2);border:1px solid var(--border);
    background:var(--grad-raise);color:var(--fg);font-size:18px;font-weight:800;}
  .mengetaste:active{background:var(--hover);}
  .favtaste{width:100%;margin-top:11px;padding:11px;border-radius:var(--r2);
    border:1px solid var(--border);background:none;color:var(--fg);font-weight:700;font-size:14px;}
  /* Wischen storniert: die Zeile rutscht, dahinter erscheint die Absicht. */
  .ol[data-lid]{position:relative;touch-action:pan-y;}
  .ol[data-lid]::after{content:"Zurücknehmen";position:absolute;right:10px;top:50%;
    transform:translateY(-50%);font-size:11.5px;font-weight:800;color:var(--danger);
    opacity:0;transition:opacity .12s;pointer-events:none;}
  .ol.wischbereit{background:color-mix(in srgb,var(--danger) 16%,transparent);border-radius:var(--r2);}
  .ol.wischbereit::after{opacity:1;}
  .wischtipp{font-size:11.5px;color:var(--muted);text-align:center;padding:7px 0 2px;}
  /* Auswertung. Der Balken hinter dem Namen zeigt den Anteil ohne eine
     zweite Zahl – man sieht die Verteilung, bevor man sie liest. */
  .awkopf{display:flex;flex-direction:column;gap:11px;margin-bottom:16px;}
  .awzeit{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
  .awzeit input[type=date]{margin:0;padding:8px 11px;font-size:14px;width:auto;}

  /* Der Knopf, der den Kalender öffnet — er trägt den gewählten Zeitraum,
     damit man ihn nicht öffnen muss, um zu wissen, was man ansieht. */
  .awkal{display:inline-flex;align-items:center;gap:8px;margin:0;
    padding:8px 14px;font-size:14px;font-weight:700;cursor:pointer;
    color:var(--fg);background:var(--grad-card);border:1px solid var(--border);
    border-radius:var(--r2);transition:border-color .15s,transform .15s;}
  .awkal:hover{border-color:var(--accent);transform:translateY(-1px);}
  .awkalicon{font-size:15px;line-height:1;}

  /* ── Was der gewählte Zeitraum insgesamt hergibt ──
     Steht über der Auswertung und bleibt dort stehen, auch wenn darunter
     gefiltert wird: Erst der Vergleich mit dieser Zahl sagt, wie groß der
     Ausschnitt ist, den man gerade ansieht. */
  .awgesamt{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-end;
    margin:12px 0 2px;padding:12px 16px;border-radius:var(--r2);
    background:var(--grad-card);border:1px solid var(--border);}
  .awgfeld{display:flex;flex-direction:column;gap:1px;min-width:0;}
  .awgt{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--muted);}
  .awgv{font-size:20px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;}
  .awgfeld:first-child .awgv{font-size:25px;
    background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;}
  .awgf{font-size:11px;color:var(--muted);}
  .awgladt{font-size:12px;color:var(--muted);}
  @media (max-width:560px){
    .awgesamt{gap:16px;padding:10px 12px;}
    .awgv{font-size:17px;}
    .awgfeld:first-child .awgv{font-size:21px;}
  }

  /* ── Der Zeitraumkalender ──
     Zwei Monate nebeneinander, links die Schnellwahl. Auf schmalen Schirmen
     fällt beides untereinander; ein Kalender, der seitlich scrollt, ist keiner. */
  .kalmodal{max-width:min(880px,96vw);}
  .kalbau{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;}
  /* Schnellwahl und Perioden teilen sich eine Spalte: Beides ist dasselbe —
     einen Zeitraum vorwählen, ohne im Kalender zu klicken. Als drittes
     Gitterelement erzeugten die Perioden eine eigene schmale Spalte und
     wurden am Rand abgeschnitten. */
  .kallinks{display:flex;flex-direction:column;gap:10px;min-width:158px;max-width:200px;}
  .kalschnell{display:flex;flex-direction:column;gap:5px;}
  .kalschnellknopf{text-align:left;margin:0;padding:7px 11px;font-size:12.5px;font-weight:600;
    color:var(--muted);background:var(--card2);border:1px solid transparent;
    border-radius:var(--r1);cursor:pointer;transition:color .12s,background .12s;}
  .kalschnellknopf:hover{color:var(--fg);background:var(--card);border-color:var(--border);}
  .kalhaupt{min-width:0;}
  .kalkopf{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
  .kalmonate{display:grid;grid-template-columns:1fr 1fr;gap:20px;flex:1;min-width:0;}
  .kalpfeil{margin:0;padding:4px 12px;font-size:19px;line-height:1;font-weight:700;
    color:var(--muted);background:var(--card2);border:1px solid var(--border);
    border-radius:var(--r1);cursor:pointer;}
  .kalpfeil:hover{color:var(--fg);border-color:var(--accent);}
  .kalmtitel{font-size:13px;font-weight:800;text-align:center;margin-bottom:7px;}
  .kalwoche,.kaltage{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
  .kalwoche span{text-align:center;font-size:10px;font-weight:700;color:var(--muted);
    padding-bottom:3px;}

  /* Eine Tageszelle: Zahl oben, Umsatzbalken unten. Der Balken ist bewusst
     kein Punkt — er sagt nicht nur DASS Umsatz war, sondern wie viel. */
  .kalz{position:relative;margin:0;padding:0;height:38px;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    background:transparent;border:1px solid transparent;border-radius:var(--r1);
    color:var(--muted);font-size:12px;font-weight:600;overflow:hidden;
    transition:background .1s,color .1s;}
  .kalz.leer{cursor:default;pointer-events:none;}
  .kalz .kalnr{position:relative;z-index:1;padding-top:5px;}
  .kalz .kalbalken{position:absolute;left:4px;right:4px;bottom:3px;height:var(--h,0);
    max-height:20px;border-radius:2px;background:var(--grad-accent);opacity:.32;}
  .kalz.hat{color:var(--fg);font-weight:700;}
  .kalz:hover{background:var(--card2);color:var(--fg);}
  .kalz.drin{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--fg);}
  .kalz.drin .kalbalken{opacity:.6;}
  .kalz.vor{background:color-mix(in srgb,var(--accent) 8%,transparent);}
  .kalz.rand{background:var(--accent);color:#fff;border-color:var(--accent);}
  .kalz.rand .kalbalken{background:#fff;opacity:.45;}
  .kalz.heute{border-color:var(--muted);}
  .kalz.rand.heute{border-color:var(--accent);}

  .kalfuss{display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-top:13px;padding-top:11px;border-top:1px solid var(--border);flex-wrap:wrap;}
  .kalstand{font-size:13px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
  .kalsumme{font-size:12px;color:var(--muted);font-weight:600;}
  .kalsumme.leer{font-style:italic;}
  .kallegende{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);}
  .kalpunkt{display:inline-block;width:9px;height:9px;border-radius:2px;
    background:var(--card2);border:1px solid var(--border);}
  .kalpunkt.hat{background:var(--grad-accent);border-color:transparent;}
  .kalchip{font-variant-numeric:tabular-nums;}

  @media (max-width:720px){
    .kalbau{grid-template-columns:1fr;gap:12px;}
    /* Die Schnellwahl wird zur Zeile: untereinander nähme sie den halben
       Bildschirm, bevor der Kalender überhaupt anfängt. */
    .kallinks{max-width:none;min-width:0;}
    .kalschnell{flex-direction:row;flex-wrap:wrap;min-width:0;}
    .kalmonatswahl{grid-template-columns:repeat(6,1fr);}
    .kalmonate{grid-template-columns:1fr;}
    .kalmonate .kalmonat:first-child{display:none;}
    .kalz{height:42px;}
  }
  .awschnell{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap;}
  /* Zwei Leisten statt eines Dialogs je Zeile: was gruppiert wird, und
     worauf eingeschränkt ist. Beides sichtbar und beides wegklickbar. */
  /* Startbildschirm: die Frage zuerst, nicht die Antwort. Vorher stand
     „Artikel" schon da, bevor jemand gefragt worden war. */
  /* Fragen in Worten. Die KI füllt die Leisten, sie ersetzt sie nicht –
     deshalb steht danach sichtbar da, was verstanden wurde. */
  .awfrage{display:flex;gap:8px;margin:14px 0 6px;}
  .awfrage input{margin:0;flex:1;min-width:0;}
  .awfrage .btn2{flex:0 0 auto;}
  .awfragehint{margin-bottom:18px;font-size:12px;}
  /* Mikrofon: im Ruhezustand unauffällig, beim Zuhören deutlich – man muss
     aus zwei Metern Abstand sehen, ob gerade aufgenommen wird. */
  .awfrage .mikro{flex:0 0 auto;width:46px;border:1px solid var(--border);border-radius:var(--r2);
    background:var(--grad-raise);color:var(--fg);font-size:18px;line-height:1;}
  .awfrage .mikro:hover{border-color:var(--accent);}
  .awfrage .mikro[disabled]{opacity:.4;}
  .awfrage .mikro.hoert{border-color:var(--danger);color:var(--danger);animation:hoerpuls 1.1s ease-in-out infinite;}
  @keyframes hoerpuls{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 45%,transparent);}
                      50%{box-shadow:0 0 0 7px transparent;}}
  @media (prefers-reduced-motion:reduce){ .awfrage .mikro.hoert{animation:none;} }
  .awverstanden{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
    background:color-mix(in srgb,var(--accent) 10%,transparent);
    border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
    border-radius:var(--r2);padding:10px 13px;margin-bottom:11px;}
  .awverstanden .vt{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    font-weight:800;color:var(--muted);flex:0 0 auto;}
  .awverstanden .vs{font-size:14px;font-weight:650;flex:1;min-width:0;}
  .awverstanden .vf{font-size:12.5px;color:var(--warn);font-weight:700;flex-basis:100%;}
  .awverstanden .vx{background:none;border:none;color:var(--muted);font-size:13px;padding:0 2px;}
  /* Der Startbildschirm der Auswertung — kompakter als zuvor.
     Vorher füllten vierzehn Größen als Kacheln zwei Reihen und die
     Vorlagenkacheln eine dritte; der Bildschirm war voll, bevor eine
     Auswertung offen war. */
  .awstart h2{margin:2px 0 1px;font-size:18px;}
  .awstart .sub{margin-bottom:12px;}
  .awgruppe{margin-bottom:14px;}
  .awgruppentitel{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);font-weight:800;margin-bottom:6px;}
  .awstartgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:7px;}
  .awstartgitter.klein{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));}
  /* Die einzelnen Größen als Chips: ein Wort braucht keine Kachel. */
  .awdimchips{display:flex;flex-wrap:wrap;gap:6px;}
  .awdimchips .chip{font-size:12.5px;font-weight:650;padding:6px 13px;cursor:pointer;
    color:var(--fg);background:var(--card);border:1px solid var(--border);
    border-radius:var(--rr);transition:border-color .12s,transform .12s;}
  .awdimchips .chip:hover{border-color:var(--accent);transform:translateY(-1px);}
  .awstartkachel{display:flex;flex-direction:column;gap:3px;align-items:flex-start;
    padding:10px 12px;border-radius:var(--r2);border:1px solid var(--border);
    background:var(--grad-card);color:var(--fg);text-align:left;min-height:46px;}
  .awstartkachel.breit{grid-column:1/-1;}
  .awstartkachel .k{font-size:14px;font-weight:750;letter-spacing:-.01em;}
  .awstartkachel .u{font-size:11.5px;color:var(--muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
  .awstartkachel:active{background:var(--hover);}
  .awvorlagen{display:flex;gap:6px;flex-wrap:wrap;}
  .awvorlage{padding:7px 13px;border-radius:var(--rr);border:1px solid var(--border);
    background:var(--grad-raise);color:var(--fg);font-size:13px;font-weight:650;}
  .awleiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:var(--card2);border:1px solid var(--border);border-radius:var(--r2);padding:9px 12px;}
  .awleistentitel{font-size:11px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted);font-weight:800;flex:0 0 auto;}
  .awkette{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;}
  .awglied,.awfilter{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;
    border-radius:var(--r2);border:1px solid transparent;font-size:13.5px;font-weight:700;
    background:var(--grad-accent);color:var(--accent-fg);}
  .awfilter{background:color-mix(in srgb,var(--warn) 22%,transparent);
    color:var(--fg);border-color:color-mix(in srgb,var(--warn) 50%,transparent);}
  .awglied .x,.awfilter .x{opacity:.6;font-size:11px;}
  .awpfeilchen{color:var(--muted);font-weight:800;}
  .awplus{padding:6px 11px;border-radius:var(--r2);border:1px dashed var(--border);
    background:none;color:var(--muted);font-size:13px;font-weight:650;}
  .awlinks{display:flex;align-items:center;gap:8px;min-width:0;}
  .awauf{flex:0 0 auto;width:28px;height:28px;border-radius:var(--r2);border:1px solid var(--border);
    background:var(--grad-raise);color:var(--muted);font-size:11px;}
  .awsort{display:flex;gap:5px;flex-wrap:wrap;}
  .awsort .an{color:var(--fg);border-color:var(--accent);}
  .awtabelle{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;}
  .awkopfz,.awzeile,.awsumme{display:grid;grid-template-columns:minmax(0,1fr) 78px 74px 108px 74px;
    align-items:center;gap:8px;padding:9px 14px;}
  .awkopfz{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
    border-bottom:1px solid var(--border);}
  .awzeile{border-bottom:1px solid var(--border);position:relative;}
  .awzeile:last-of-type{border-bottom:none;}
  .awlabel{display:flex;align-items:center;gap:9px;background:none;border:none;padding:0;
    color:var(--fg);text-align:left;min-width:0;position:relative;font-size:14.5px;font-weight:600;}
  .awbalken{position:absolute;left:0;right:0;top:50%;height:22px;transform:translateY(-50%);
    background:color-mix(in srgb,var(--accent) 16%,transparent);width:var(--b);border-radius:var(--r1);
    pointer-events:none;}
  .awname{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .awz{text-align:right;font-size:13.5px;color:var(--muted);}
  .awz.stark{color:var(--fg);font-weight:750;}
  .awsumme{grid-template-columns:minmax(0,1fr) auto;border-top:2px solid var(--border);
    font-weight:800;font-size:15px;}
  .awunter{grid-column:1/-1;margin:9px 0 4px;padding-left:16px;
    border-left:2px solid var(--accent);}
  .awwahl{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px;}
  .awwahlbtn{padding:11px 8px;border-radius:var(--r2);border:1px solid var(--border);
    background:var(--grad-raise);color:var(--fg);font-weight:650;font-size:13.5px;}
  .awwahlbtn.journal{grid-column:1/-1;background:var(--grad-accent);color:var(--accent-fg);border-color:transparent;}
  .journal{overflow-x:auto;}
  .journal table{min-width:640px;}
  .jstorno{opacity:.6;text-decoration:line-through;}
  .belegbtn{background:none;border:none;padding:0;color:var(--accent);font-weight:750;
    font-size:13.5px;text-decoration:underline;}
  :root:not([data-theme="hell"]) .belegbtn{color:var(--fg);}
  @media (prefers-color-scheme:dark){:root:not([data-theme="hell"]) .belegbtn{color:var(--accent);}}
  .checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
  .chk{display:flex;align-items:center;gap:7px;font-size:13px;background:var(--card2);border:1px solid var(--border);padding:8px 12px;border-radius:var(--r2);font-weight:600;color:var(--fg);margin:0;}
  .chk input{width:auto;padding:0;}
  .hint{font-size:12px;color:var(--muted);margin-top:7px;}
  /* Rechtegruppen im Rollen-Editor. Zweiundvierzig Ankreuzfelder am Stück
     kann niemand überblicken – die Gruppen geben ihnen eine Ordnung, und der
     Rahmen macht sichtbar, wo eine aufhört. Der Block scrollt für sich: sonst
     wächst der Dialog über den Bildschirm hinaus und die Knöpfe unten sind
     nicht mehr erreichbar. */
  .rgroups{margin-top:10px;max-height:min(52vh,520px);overflow-y:auto;padding-right:4px;}
  .rgroup{border:1px solid var(--border);border-radius:var(--r2);padding:11px 12px 13px;margin-top:10px;background:var(--card2);}
  .rgroup .sub{font-size:12px;color:var(--muted);margin-top:2px;}
  .rghead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;}
  .rghead .rall{margin-left:auto;padding:3px 10px;font-size:12px;}
  .rgroup .checks{margin-top:9px;}
  .pill.warn{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn);}
  .listrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
  .listrow .nm{flex:1;font-weight:600;font-size:14px;}
  .tcard .tmeta{font-size:12px;color:var(--muted);margin-top:3px;}
  .tcard .actions{margin-top:9px;justify-content:center;}

  /* Grafischer Tischplan */
  .plan{position:relative;background:var(--card2);border:1px solid var(--border);border-radius:var(--r2);overflow:auto;padding:12px;}
  .plan-canvas{position:relative;min-height:120px;}
  .ptable{position:absolute;width:96px;height:96px;border-radius:var(--r3);border:2px solid var(--border);background:var(--card);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--fg);padding:6px;text-align:center;}
  .ptable.circle{border-radius:50%;}
  .ptable .pl{font-size:20px;font-weight:800;line-height:1.05;max-width:100%;overflow-wrap:anywhere;text-align:center;}
  .ptable .ps{font-size:11px;color:var(--muted);line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ptable .pt{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--warn);}
  .ptable.free{border-color:color-mix(in srgb,var(--ok) 50%,transparent);}
  .ptable.occ{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--card));}
  .ptable.book{cursor:pointer;transition:transform .12s,border-color .12s;}
  .ptable.book:hover{border-color:var(--accent);transform:translateY(-2px);}
  .ptable.book:active{transform:scale(.96);}
  .ptable.drag{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;}
  .ptable.dragging{opacity:.85;z-index:5;cursor:grabbing;box-shadow:0 14px 34px rgba(0,0,0,.38);}
  .ptable .del{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:1px solid var(--border);
    background:var(--card);color:var(--danger);font-size:12px;line-height:1;display:grid;place-items:center;padding:0;}
  /* Tisch mit Positionen, die noch nicht an Küche oder Theke gegangen sind. */
  .ptable.unpushed{border-color:var(--accent);border-style:dashed;
    box-shadow:inset 0 1px 0 var(--glass),0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent);}
  .ptable .nbadge{position:absolute;top:-9px;right:-9px;min-width:23px;height:23px;padding:0 6px;border-radius:var(--rr);
    display:grid;place-items:center;font-size:12px;font-weight:800;
    background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-fg);
    box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent) 70%,transparent);}
  .ptable .tpush{margin-top:6px;padding:4px 12px;border:none;border-radius:var(--r2);font-size:11px;font-weight:800;
    letter-spacing:.8px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-fg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
  .ptable .tpush:active{transform:scale(.94);}
  .plan-canvas{transform-origin:top left;}
  /* Umbruchmodus: Tische untereinander statt maßstäblich – nur wenn es sonst
     seitlich hinausliefe. Die Positionsangaben stehen inline, daher !important. */
  .plan.reflow{overflow-x:hidden;}
  .plan.reflow .plan-canvas{position:static;display:flex;flex-wrap:wrap;gap:10px;
    width:auto !important;height:auto !important;transform:none !important;}
  .plan.reflow .ptable{position:static !important;left:auto !important;top:auto !important;
    width:var(--tile,96px) !important;height:var(--tile,96px) !important;
    padding:4px;overflow:hidden;}
  .plan.reflow .ptable .pl{font-size:clamp(11px,calc(var(--tile,96px)*.21),26px);}
  .plan.reflow .ptable .ps{font-size:clamp(8px,calc(var(--tile,96px)*.115),13px);}
  .plan.reflow .ptable .pt{font-size:clamp(9px,calc(var(--tile,96px)*.135),15px);}
  .plan.reflow .ptable .tpush{font-size:clamp(8px,calc(var(--tile,96px)*.105),12px);
    padding:3px calc(var(--tile,96px)*.09);margin-top:calc(var(--tile,96px)*.05);}
  .plan.reflow .ptable .nbadge{transform:scale(clamp(.7,calc(var(--tile,96px)/96),1));transform-origin:top right;}
  /* Der Regler wird selten gebraucht: zugeklappt bleibt nur ein kleiner Knopf,
     aufgeklappt wird daraus die gewohnte Zeile. */
  .zoomrow{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:8px;}
  .zoomrow.open{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:8px 12px;}
  .zoomfields{display:none;align-items:center;gap:12px;flex:1 1 auto;min-width:0;}
  .zoomrow.open .zoomfields{display:flex;}
  .sizebtn{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;font-size:14px;
    border:1px solid var(--border);border-radius:var(--r2);background:var(--card2);color:var(--muted);}
  .sizebtn:hover{color:var(--fg);border-color:color-mix(in srgb,var(--accent) 55%,transparent);}
  .sizebtn.on{color:var(--accent-fg);border-color:transparent;
    background:linear-gradient(135deg,var(--accent),var(--accent2));}
  .zoomrow .zl{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;}
  .zoomrow .zv{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;min-width:52px;text-align:right;}
  .zoomrow input[type=range]{flex:1;width:auto;padding:0;accent-color:var(--accent);background:none;border:none;height:26px;}
  .plan[data-zoomable]{overflow-x:hidden;}
  .planhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
  .planhead h2{margin:0;}
  .segbar.mini{margin-bottom:0;}
  .segbar.mini .seg{font-size:12.5px;padding:6px 13px;gap:5px;}
  /* Tische als Liste – dieselben Zustände wie im Plan, nur untereinander. */
  .tlist{display:flex;flex-direction:column;gap:8px;}
  .tlrow{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;text-align:left;
    border:1px solid var(--border);border-radius:var(--r2);background:var(--card2);color:var(--fg);}
  .tlrow:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);}
  .tlrow:active{transform:scale(.995);}
  .tlrow .tlnum{flex:0 0 auto;min-width:48px;height:42px;padding:0 10px;display:grid;place-items:center;
    border:2px solid var(--border);border-radius:var(--r2);background:var(--card);font-size:18px;font-weight:800;}
  .tlrow.free .tlnum{border-color:color-mix(in srgb,var(--ok) 50%,transparent);}
  .tlrow.occ .tlnum{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--card));}
  .tlrow.unpushed .tlnum{border-color:var(--accent);border-style:dashed;}
  .tlrow .tlmid{flex:1 1 auto;min-width:0;}
  .tlrow .tlname{font-weight:700;font-size:14.5px;}
  .tlrow .tlsub{color:var(--muted);font-size:12.5px;margin-top:2px;}
  .tlrow .tltot{flex:0 0 auto;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;color:var(--warn);}
  .tlrow .tpush{flex:0 0 auto;padding:7px 14px;border:none;border-radius:var(--r2);font-size:11.5px;font-weight:800;
    letter-spacing:.8px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-fg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
  .tlrow .tpush:active{transform:scale(.94);}

  /* Kasse: Kopfzeile des aktiven Vorgangs */
  .posheader{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
  .posheader .tag{font-size:18px;font-weight:800;}
  .ol.fired .olname{color:var(--muted);}
  .firedmark{font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--border);border-radius:var(--r1);padding:1px 5px;margin-left:6px;}
  .sendbtn{flex:1;padding:14px;border:none;border-radius:var(--r2);background:var(--grad-accent);
    color:var(--accent-fg);font-weight:800;font-size:16px;letter-spacing:1.2px;}
  .sendbtn:disabled{opacity:.45;cursor:not-allowed;}
  .splitnote{font-size:12px;color:var(--accent);font-weight:700;text-align:center;margin-top:4px;}
  .splitbtn{flex:1;padding:12px;border:1px solid var(--border);background:var(--card2);color:var(--fg);
    border-radius:var(--r2);font-weight:700;font-size:14px;}
  .splitbtn.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);}
  .ol.paid{opacity:.55;}
  .ol.pick{cursor:pointer;border-radius:var(--r2);padding:4px 6px;margin:-4px -6px;}
  .ol.pick:hover{background:var(--hover);}
  .ol.sel{background:color-mix(in srgb,var(--accent) 14%,transparent);}
  .ol .cbx{display:inline-grid;place-items:center;width:19px;height:19px;border:1.5px solid var(--border);
    border-radius:var(--r1);margin-right:8px;font-size:12px;font-weight:800;color:var(--accent);vertical-align:-4px;}
  .ol.sel .cbx{border-color:var(--accent);}

  /* Bon-Darstellung – bewusst wie Thermopapier, in beiden Themes hell */
  .bonsheet{width:100%;max-width:min(780px,96vw);}
  .bonwrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;max-height:74vh;overflow:auto;padding:6px 2px 14px;}
  .bon{width:320px;background:#fff;color:#15181d;padding:22px 20px 24px;position:relative;flex:0 0 auto;
    font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:12.5px;line-height:1.5;
    box-shadow:0 18px 46px rgba(0,0,0,.45);}
  .bon::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:7px;
    background:linear-gradient(45deg,transparent 33.333%,#fff 33.333%,#fff 66.667%,transparent 66.667%) 0 0/13px 13px repeat-x,
               linear-gradient(-45deg,transparent 33.333%,#fff 33.333%,#fff 66.667%,transparent 66.667%) 0 0/13px 13px repeat-x;}
  .bonhead{text-align:center;font-size:17px;font-weight:800;letter-spacing:2px;text-transform:uppercase;}
  .bonsub{text-align:center;font-size:11px;color:#5b6472;letter-spacing:1px;text-transform:uppercase;margin-top:2px;}
  .bonrule{border-top:1px dashed #9aa3b0;margin:10px 0;}
  .bonrule.double{border-top:3px double #6b7482;}
  .bonmeta{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:#3a424e;}
  .bonitem{display:flex;gap:8px;align-items:baseline;margin-top:5px;}
  .bonitem .q{font-weight:800;min-width:30px;}
  .bonitem .n{flex:1;font-weight:700;}
  .bonitem .a{font-variant-numeric:tabular-nums;font-weight:700;}
  .bonnote{font-size:11px;color:#5b6472;padding-left:38px;}
  .bontotal{display:flex;justify-content:space-between;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;margin:4px 0;}
  .bonsec{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#5b6472;margin:8px 0 4px;}
  .bonqr{font-size:8.5px;color:#6b7482;word-break:break-all;line-height:1.35;margin-top:5px;}
  .bonfoot{text-align:center;font-size:11px;color:#3a424e;margin-top:12px;}
  .bonwarn{text-align:center;font-size:10px;color:#a4442f;border:1px solid #e0b4a8;padding:4px;margin-top:10px;}
  .bonbig{text-align:center;font-size:22px;font-weight:800;letter-spacing:1px;margin:4px 0 2px;}
  .bonfree{font-size:12px;color:#15181d;line-height:1.5;white-space:pre-wrap;}
  .bonsign{margin-top:22px;font-size:10.5px;color:#5b6472;text-align:center;}
  .bonsign .sline{border-top:1px solid #15181d;margin:0 12px 5px;height:1px;}
  .sheetactions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;justify-content:center;}
  .sheetactions button{padding:11px 16px;}
  .clickrow{cursor:pointer;}
  .clickrow:hover{background:var(--hover);}

  /* ── Serverübersicht (nur Betreiber) ── */
  /* Ampel über allem: Farbe des Rahmens und der Lampe sagt den Zustand. */
  .sysampel{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);
    border-radius:var(--r3);padding:14px 16px;margin-bottom:14px;}
  .sysampel .lampe{width:12px;height:12px;border-radius:50%;background:var(--ok);flex:0 0 auto;
    box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent);}
  .sysampel.warnung{border-color:color-mix(in srgb,var(--warn) 45%,var(--border));}
  .sysampel.warnung .lampe{background:var(--warn);box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 22%,transparent);}
  .sysampel.kritisch{border-color:color-mix(in srgb,var(--danger) 55%,var(--border));}
  .sysampel.kritisch .lampe{background:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 25%,transparent);}
  .sysampel .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  .sysampel .txt b{font-size:16px;}
  .sysampel .txt span{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;}
  .sysampel .stand{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;white-space:nowrap;}

  .syswarn{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
  .syswarn div{display:flex;gap:10px;align-items:baseline;padding:10px 13px;border-radius:var(--r2);font-size:13.5px;
    background:color-mix(in srgb,var(--warn) 11%,var(--card));border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);}
  .syswarn div.kritisch{background:color-mix(in srgb,var(--danger) 12%,var(--card));
    border-color:color-mix(in srgb,var(--danger) 40%,transparent);}
  .syswarn b{flex:0 0 auto;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);}

  .sysgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px;}
  .syscard{background:var(--card);border:1px solid var(--border);border-radius:var(--r3);padding:14px 15px;}
  .syscard .k{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.7px;}
  .syscard .v{font-size:27px;font-weight:800;margin:4px 0 9px;font-variant-numeric:tabular-nums;}
  .syscard .sub{font-size:12px;margin-top:8px;line-height:1.45;}
  .syscard.warn{border-color:color-mix(in srgb,var(--warn) 40%,var(--border));}
  .syscard.krit{border-color:color-mix(in srgb,var(--danger) 50%,var(--border));}

  .sysbar{height:7px;border-radius:var(--r1);background:var(--card2);overflow:hidden;}
  .sysbar i{display:block;height:100%;border-radius:var(--r1);background:linear-gradient(90deg,var(--accent2),var(--accent));
    transition:width .5s ease;}
  .sysbar i.warn{background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 70%,#000),var(--warn));}
  .sysbar i.krit{background:linear-gradient(90deg,color-mix(in srgb,var(--danger) 70%,#000),var(--danger));}

  .syscharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
  .syscharts h3{font-size:13px;font-weight:700;color:var(--muted);margin:0 0 8px;}
  .syschart svg{width:100%;height:110px;display:block;background:var(--card2);border-radius:var(--r2);}
  .syschart svg line{stroke:var(--border);stroke-width:.5;}
  .syschart .achse{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:5px;
    font-variant-numeric:tabular-nums;}
  .syschart .legende{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;font-size:12px;color:var(--muted);}
  .syschart .legende i{display:inline-block;width:9px;height:9px;border-radius:var(--r1);margin-right:5px;}
  .syschart .legende b{color:var(--fg);font-variant-numeric:tabular-nums;}

  .syscols{display:flex;align-items:flex-end;gap:2px;height:70px;background:var(--card2);border-radius:var(--r2);padding:6px;}
  .syscols i{flex:1;background:var(--accent2);border-radius:var(--r1);min-height:1px;}
  .syscols i.fehler{background:var(--danger);}

  .syscols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}

  .sysrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;
    border-bottom:1px solid var(--border);font-size:13.5px;}
  .sysrow:last-child{border-bottom:none;}
  .sysrow span:first-child{color:var(--muted);}
  .sysrow b{font-variant-numeric:tabular-nums;text-align:right;}
  .sysrow .sub{font-weight:400;font-size:12px;}

  .sysleer{color:var(--muted);font-size:13px;padding:14px 0;}
  .syshint{margin-top:11px;padding:10px 12px;border-radius:var(--r2);font-size:12.5px;line-height:1.5;
    background:var(--card2);border:1px solid var(--border);color:var(--muted);}
  .syshint code{background:var(--bg);padding:1px 5px;border-radius:var(--r1);font-size:12px;color:var(--fg);}

  .sysseg{display:inline-flex;gap:3px;background:var(--card2);border-radius:var(--r2);padding:3px;}
  .sysseg button{border:none;background:none;color:var(--muted);font-weight:700;font-size:12.5px;
    padding:6px 13px;border-radius:var(--r2);}
  .sysseg button.an{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-fg);}

  /* Die Kacheln sind Tasten: dahinter liegt die Aufschlüsselung. */
  .syscard{display:block;width:100%;text-align:left;color:var(--fg);font-family:inherit;}
  .syscard[data-detail]:hover{background:var(--hover);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));}
  .syscard[data-detail]:active{transform:translateY(1px);}
  .syscard .k{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
  .syscard .mehr{font-size:10.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--accent);opacity:0;
    transition:opacity .15s;}
  .syscard[data-detail]:hover .mehr{opacity:1;}

  /* Fenster mit der Aufschlüsselung */
  .modal.weit{max-width:860px;}
  .systab{width:100%;border-collapse:collapse;font-size:13px;}
  .systab th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
    font-weight:700;padding:6px 8px;border-bottom:1px solid var(--border);}
  .systab th.num,.systab td.num{text-align:right;font-variant-numeric:tabular-nums;}
  .systab td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:top;
    word-break:break-all;}
  .systab tr:last-child td{border-bottom:none;}
  .systab .sub{font-size:11.5px;}
  .systab .chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:var(--r1);
    background:var(--card2);color:var(--muted);}
  /* Der Balken sitzt unter der Zahl und macht Verhältnisse auf einen Blick klar. */
  .sysanteil{display:block;height:3px;border-radius:var(--r1);background:var(--card2);margin-top:4px;overflow:hidden;}
  .sysanteil i{display:block;height:100%;background:var(--accent2);border-radius:var(--r1);}

  /* Verbundene Geräte */
  .clver{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--r1);
    background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);white-space:nowrap;}
  .clver.alt{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);}
  .clok{font-size:12px;font-weight:700;color:var(--ok);}
  .clfehl{font-size:12px;font-weight:700;color:var(--danger);}
  .clkopf{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--r2);
    background:var(--card2);border:1px solid var(--border);}
  .clkopf .art{font-size:30px;line-height:1;}
  .clkopf b{font-size:15px;}

  /* Statuszeile auf der Startseite */
  .sysband{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:0 0 18px;
    background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:11px 14px;color:var(--fg);}
  .sysband:hover{background:var(--hover);}
  .sysband .lampe{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:var(--muted);}
  .sysband.ok .lampe{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent);}
  .sysband.warnung .lampe{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent);}
  .sysband.kritisch .lampe{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 25%,transparent);}
  .sysband.warnung{border-color:color-mix(in srgb,var(--warn) 40%,var(--border));}
  .sysband.kritisch{border-color:color-mix(in srgb,var(--danger) 50%,var(--border));}
  .sysband .txt{display:flex;align-items:baseline;gap:9px;font-size:13.5px;flex:0 0 auto;}
  .sysband .txt .sub{font-size:12px;}
  .sysband .werte{margin-left:auto;display:flex;gap:16px;font-size:12.5px;color:var(--muted);
    font-variant-numeric:tabular-nums;white-space:nowrap;}
  .sysband .werte b{color:var(--fg);}

  /* Druckausgabe: nur die Belege, ohne Oberfläche drumherum */
  /* Ab hier die schmalen Displays. Der Block steht bewusst am Ende:
     gleich starke Regeln weiter unten gewinnen, sonst greifen die
     mobilen Überschreibungen nicht. */
  @media(max-width:900px){
    /* Serverübersicht: alles untereinander, Statuszeile umbrechen lassen. */
    .sysampel{flex-wrap:wrap;}
    .sysampel .stand{width:100%;justify-content:space-between;}
    .sysgrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
    .syscard .v{font-size:23px;}
    .syscharts{grid-template-columns:1fr;}
    .syscols2{grid-template-columns:1fr;}
    .sysband{flex-wrap:wrap;}
    .sysband .werte{margin-left:0;width:100%;justify-content:space-between;gap:8px;}
    .sysband .nurbreit{display:none;}
    /* Auf dem Handy werden die Tabellen zu Zeilenblöcken – sonst wandern
       fünf Spalten aus dem Bild. */
    .systab thead{display:none;}
    .systab tr{display:block;border-bottom:1px solid var(--border);padding:6px 0;}
    .systab td{display:flex;justify-content:space-between;gap:12px;border:none;padding:3px 0;text-align:right;}
    .systab td::before{content:attr(data-l);color:var(--muted);font-size:11.5px;flex:0 0 auto;text-align:left;}
    .systab td.num{text-align:right;}
    .sysanteil{width:100%;}
    .grid2{grid-template-columns:1fr;}
    #app{grid-template-columns:1fr;}
    aside{flex-direction:row;align-items:center;justify-content:space-between;border-right:none;
      border-bottom:1px solid var(--border);padding:10px 12px;gap:8px;overflow:visible;}
    aside .brand{margin-bottom:0;white-space:nowrap;font-size:16px;}
    /* Die Ansichten des Moduls sitzen als feste Leiste am unteren Rand –
       in einer Kopfzeile scrollen sie auf schmalen Displays aus dem Bild. */
    #mainNav{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;flex:none;
      flex-direction:row;gap:2px;align-items:stretch;
      background:var(--card);border-top:1px solid var(--border);
      padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
      box-shadow:0 -6px 20px rgba(0,0,0,.16);overflow-x:auto;}
    #mainNav .navlink{flex:1 1 0;min-width:66px;flex-direction:column;justify-content:center;gap:3px;
      padding:7px 4px;font-size:11px;line-height:1.2;text-align:center;white-space:nowrap;border-radius:var(--r2);}
    #mainNav .navlink .ic{width:auto;font-size:20px;}
    #mainNav .navgroup{display:none;}
    .userbox{border-top:none;padding-top:0;margin-top:0;padding-left:8px;}
    .userbox #userName{display:none;}
    .logout{margin-top:0;width:auto;white-space:nowrap;}
    main{padding:20px 16px calc(88px + env(safe-area-inset-bottom,0px));}
    /* Die Bestellung bleibt immer im Bild: einzeilige Leiste über der
       Navigation, per Tipp auf die volle Höhe ausklappbar. */
    .order{position:fixed;top:auto;left:0;right:0;
      bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:35;
      height:auto;padding:0;border-radius:var(--r3) 16px 0 0;border-left:none;border-right:none;border-bottom:none;
      box-shadow:0 -12px 32px rgba(0,0,0,.5);}
    .ordersum{display:flex;}
    .orderbody{display:none;padding:0 16px 16px;}
    /* Aufgeklappt bis fast an den oberen Rand – mehr Platz für die Positionen. */
    .order.open{top:calc(env(safe-area-inset-top,0px) + 10px);border-radius:var(--r3);}
    .order.open .orderbody{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:auto;}
    .order.open .ordersum{border-bottom:1px solid var(--border);}
    .orderlines{flex:0 0 auto;min-height:0;overflow:visible;}
    /* Platz, damit die letzten Artikelkacheln nicht unter der Leiste liegen. */
    .prodpane{padding-bottom:76px;}
    /* Tabellen sind auf schmalen Displays zu breit – jede Zeile wird zur Karte,
       die Spaltenüberschrift wandert als Beschriftung vor den Wert. */
    .panel{padding:12px;}
    .panel table,.panel tbody,.panel tr,.panel td{display:block;width:auto;}
    .panel thead{display:none;}
    .panel tr{border:1px solid var(--border);border-radius:var(--r2);background:var(--card2);
      padding:12px 14px;margin-bottom:10px;}
    .panel tr:last-child{margin-bottom:0;}
    .panel td{border:none;padding:4px 0;display:flex;justify-content:space-between;
      align-items:baseline;gap:14px;text-align:left;}
    .panel td::before{content:attr(data-l);color:var(--muted);font-size:12px;font-weight:600;
      flex:0 0 auto;white-space:nowrap;}
    .panel td:not([data-l])::before{content:none;}
    .panel td.num{text-align:right;}
    .panel td.cellhead{display:block;font-size:15px;padding:0 0 8px;margin-bottom:6px;
      border-bottom:1px dashed var(--border);}
    .panel td.cellmain{font-size:16px;font-weight:800;}
    .panel td.cellact{display:block;padding-top:10px;}
    .panel td.cellact .actions{justify-content:flex-start;}
    .panel td.cellact .btn-ghost{flex:1 1 auto;text-align:center;}
    .toast{bottom:calc(96px + env(safe-area-inset-bottom,0px));}
  }

  @media print{
    /*
     * Nur wenn ein Blatt offen ist, wird NUR das Blatt gedruckt.
     *
     * Hier stand `body>*{display:none}` ohne Bedingung. Gemeint war: Beim
     * Drucken eines Belegs soll die Anwendung darum herum verschwinden.
     * Tatsächlich verschwand sie bei JEDEM Druck — auch ohne offenes Blatt,
     * also auch beim Drucken einer Auswertung. Wer dort auf „Drucken" ging,
     * bekam ein leeres Papier; die Regeln weiter unten, die eigens die
     * Navigation ausblenden, liefen die ganze Zeit ins Leere, weil schon
     * `#app` selbst weg war. Aufgefallen erst am 18.08.2026, als die
     * Berichte einen Druckknopf bekamen.
     */
    body:has(> .modal-bg)>*{display:none !important;}
    body>.modal-bg{display:block !important;position:static !important;background:none !important;padding:0 !important;}
    .modal-bg .bonsheet{max-width:none;}
    .modal-bg .bonwrap{max-height:none;overflow:visible;display:block;padding:0;}
    .modal-bg .bon{box-shadow:none;width:auto;max-width:76mm;margin:0 auto 12mm;page-break-inside:avoid;}
    .modal-bg .bon::after{display:none;}
    .sheetactions,.modal-actions{display:none !important;}
  }
  /* ── Feinschliff des dunklen Designs ── */
  .panel,.kpi,.modcard,.order,.tcard,.login-card{
    background:linear-gradient(180deg,var(--card),var(--card2));
    box-shadow:inset 0 1px 0 var(--glass),0 1px 3px rgba(0,0,0,.5);
  }
  .prodbtn,.ptable{
    background:linear-gradient(180deg,var(--raise),var(--raise2));
    box-shadow:inset 0 1px 0 var(--glass),0 1px 3px rgba(0,0,0,.5);
  }
  aside,#mainNav{background:linear-gradient(180deg,var(--chrome),var(--chrome2));}
  .panel{border-radius:var(--r3);}
  .modcard{border-radius:var(--r3);}
  main{background:
    radial-gradient(1100px 460px at 12% -10%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 68%),
    radial-gradient(760px 380px at 100% 0%,color-mix(in srgb,var(--accent2) 9%,transparent),transparent 62%),
    linear-gradient(180deg,color-mix(in srgb,#ffffff 2.5%,transparent),transparent 340px);}

  .btn,.btn2,.sendbtn{
    color:var(--accent-fg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
               0 10px 26px -10px color-mix(in srgb,var(--accent) 55%,transparent);
    letter-spacing:.2px;
  }
  .btn:active,.btn2:active,.sendbtn:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
  /* Kassieren bleibt grün – Geld nehmen soll sich nicht wie jeder andere Knopf anfühlen. */
  .paybtn{
    background:linear-gradient(135deg,var(--ok),color-mix(in srgb,var(--ok) 55%,#0a1a14));
    color:var(--ok-fg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 26px -10px color-mix(in srgb,var(--ok) 50%,transparent);
  }
  .btn-ghost,.clearbtn,.splitbtn,.logout,.mbtn,.sizebtn,.seg,.lbtn,.tlrow,.fnitem,.rowitem{
    background:linear-gradient(180deg,var(--raise),var(--raise2));
    box-shadow:inset 0 1px 0 var(--glass);
  }
  /* Die Segmentleiste bleibt eingelassen, damit ihre Knöpfe daraus hervortreten. */
  .segbar,.zoomrow.open{background:linear-gradient(180deg,var(--card2),var(--card));}
  .seg{border:1px solid transparent;}
  .seg.on{border-color:transparent;}
  .navlink.active{
    background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,transparent),
                                      color-mix(in srgb,var(--accent2) 14%,transparent));
    box-shadow:inset 0 1px 0 var(--glass);
  }
  .brand .mark{color:var(--accent-fg);box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent);}

  h1,.modcard .mn,.kpi .v,.ordertotal{letter-spacing:-.4px;}
  .kpi .v,.ordertotal,td.num,.olprice{font-variant-numeric:tabular-nums;}
  th{letter-spacing:.8px;}

  .ptable.free{border-color:color-mix(in srgb,var(--ok) 40%,transparent);}
  .ptable.occ{
    border-color:color-mix(in srgb,var(--warn) 65%,transparent);
    background:linear-gradient(180deg,color-mix(in srgb,var(--warn) 10%,var(--card)),var(--card2));
  }
  .ptable.book:hover{
    box-shadow:0 12px 30px -14px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 1px 0 var(--glass);
  }
  .modcard:hover{box-shadow:inset 0 1px 0 var(--glass),0 18px 40px -18px color-mix(in srgb,var(--accent) 55%,transparent);}

  .modal-bg{background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(10px) saturate(120%);}
  .modal{background:linear-gradient(180deg,var(--card),var(--card2));border-radius:var(--r3);
    box-shadow:inset 0 1px 0 var(--glass),0 30px 80px rgba(0,0,0,.7);}
  /* Eingabefelder aus dem Thema, nicht fest verdrahtet.
     Hier standen zwei feste Dunkelwerte aus der alten Farbwelt. Sie
     überschrieben die Themenfarben – im hellen Thema wurde daraus ein
     schwarzes Feld mit dunkler Schrift, also unlesbar. Gemeldet mit einem
     Bild aus der App, und es betraf JEDES Auswahl- und Eingabefeld. */
  input,select,textarea{
    background:var(--grad-raise);color:var(--fg);
    box-shadow:inset 0 1px 2px color-mix(in srgb,var(--fg) 8%,transparent);
  }
  input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent);}

  /* Der Verlauf im Diagramm ist im SVG fest verdrahtet – daher flächig im Akzent. */
  .bar{fill:var(--accent);opacity:.85;}
  .bar:hover{opacity:1;}
  /* Die Meldung ist grün – die Schrift darauf muss mit dem Thema drehen:
     im hellen Thema ist Grün dunkel, im dunklen hell. */
  .toast{background:linear-gradient(135deg,var(--ok),color-mix(in srgb,var(--ok) 55%,#0a1a14));color:var(--ok-fg);}

/* ── Gutscheine ─────────────────────────────────────────────────────────── */
/* Schnellwahl der Beträge im Verkaufsdialog. */
.vpresets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.vpreset{flex:1 1 80px;padding:14px 10px;border:1px solid var(--border);border-radius:var(--r2);font-weight:800;font-size:16px;
  background:linear-gradient(180deg,var(--raise),var(--raise2));color:var(--fg);box-shadow:inset 0 1px 0 var(--glass);}
.vpreset:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);}
.vpreset.on{border-color:transparent;color:var(--accent-fg);background:linear-gradient(135deg,var(--accent),var(--accent2));}

/* Eingesetzte Gutscheine im Kassierbereich. */
.vpay{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;}
.vpayrow{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:var(--r2);
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));
  background:color-mix(in srgb,var(--accent) 9%,transparent);font-size:13.5px;}
.vpayrow .vpn{font-weight:800;white-space:nowrap;}
.vpayrow .vpb{color:var(--muted);font-size:12px;margin-left:auto;white-space:nowrap;}
.vpayrow .vpa{font-weight:800;font-variant-numeric:tabular-nums;}
.vpadd{width:100%;text-align:center;}
.vpsum{display:flex;justify-content:space-between;font-weight:800;font-size:15px;padding-top:4px;}

/* Kamerafenster zum Scannen. */
.scanbg{padding:0;}
.scansheet{position:relative;width:100%;max-width:520px;background:#000;border-radius:var(--r3);overflow:hidden;}
.scansheet video{width:100%;max-height:70vh;display:block;object-fit:cover;background:#000;}
.scanframe{position:absolute;left:50%;top:44%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);
  border:3px solid var(--accent);border-radius:var(--r3);box-shadow:0 0 0 100vmax rgba(0,0,0,.45);}
.scanhint{position:absolute;left:0;right:0;bottom:74px;text-align:center;color:#fff;font-weight:700;font-size:14px;
  text-shadow:0 2px 8px rgba(0,0,0,.8);}
.scansheet .modal-actions{position:absolute;left:0;right:0;bottom:0;justify-content:center;padding:14px;margin:0;}
.vscan{width:100%;margin-bottom:14px;}

/* Gutscheinbon. */
.voucherbon{text-align:center;}
.voucherbon .vbamount{font-size:34px;font-weight:800;letter-spacing:-1px;margin:14px 0 4px;}
.voucherbon .vbcode{font-size:15px;font-weight:700;letter-spacing:2px;margin-bottom:12px;}
.voucherbon .vbqr{display:flex;justify-content:center;margin:10px 0 14px;}
.voucherbon .vbqr svg{width:170px;height:170px;}
.voucherbon .bonlines{text-align:left;}
.voucherbon .vbnote{margin-top:10px;font-size:11px;font-weight:700;}

/* Gutscheinmodul: Liste und Akte. */
.vcode{font-weight:800;letter-spacing:.6px;font-variant-numeric:tabular-nums;}
.vchip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.4px;padding:3px 9px;border-radius:var(--rr);
  border:1px solid var(--border);background:var(--card2);color:var(--muted);white-space:nowrap;}
.vchip.v-ACTIVE{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,transparent);}
.vchip.v-PARTIALLY_REDEEMED{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);}
.vchip.v-BLOCKED,.vchip.v-CANCELED{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);
  background:color-mix(in srgb,var(--danger) 10%,transparent);}
.vchip.v-EXPIRED,.vchip.v-REPLACED,.vchip.v-PENDING_PAYMENT{color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);}

.vfile{max-width:620px;}
.vfhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.vfcode{font-size:19px;font-weight:800;letter-spacing:1px;}
.vfstatus{margin-top:6px;color:var(--muted);font-size:12.5px;}
.vfbal{text-align:right;line-height:1.1;}
.vfbal span{font-size:27px;font-weight:800;font-variant-numeric:tabular-nums;}
.vfbal small{display:block;color:var(--muted);font-size:12px;margin-top:3px;}
.vfbar{height:7px;border-radius:var(--rr);background:var(--card2);border:1px solid var(--border);overflow:hidden;margin:14px 0 16px;}
.vfbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));}
.vfmeta{display:flex;flex-direction:column;gap:6px;font-size:13.5px;}
.vfmeta div{display:flex;justify-content:space-between;gap:14px;}
.vfmeta span{color:var(--muted);}
.vfh{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:20px 0 8px;}
.vledger{display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow:auto;}
.vlrow{display:grid;grid-template-columns:1fr auto auto;gap:4px 12px;align-items:baseline;
  padding:8px 11px;border:1px solid var(--border);border-radius:var(--r2);background:var(--card2);font-size:13px;}
.vlrow .vlt{font-weight:700;}
.vlrow .vla{font-weight:800;font-variant-numeric:tabular-nums;}
.vlrow .vla.pos{color:var(--ok);} .vlrow .vla.neg{color:var(--danger);}
.vlrow .vlb{color:var(--muted);font-variant-numeric:tabular-nums;}
.vlrow .vld{grid-column:1/-1;color:var(--muted);font-size:11.5px;}
.vlrow .vlr{grid-column:1/-1;color:var(--muted);font-size:12px;font-style:italic;}
.vfactions{flex-wrap:wrap;}

/* Gutscheinauswertung. */
.hint{margin-top:12px;font-size:12.5px;color:var(--muted);line-height:1.5;}
.agchart{display:flex;align-items:flex-end;gap:8px;height:190px;padding-top:8px;}
.agcol{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;}
.agbar{position:relative;width:100%;max-width:64px;min-height:3px;border-radius:var(--r2) 8px 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 26%,transparent),color-mix(in srgb,var(--accent) 10%,transparent));
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-bottom:none;overflow:hidden;}
.agbar .agopen{position:absolute;left:0;right:0;bottom:0;display:block;
  background:linear-gradient(180deg,var(--accent),var(--accent2));}
.aglabel{font-size:11px;color:var(--muted);text-align:center;white-space:nowrap;}
.agval{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;}
.serchart{display:flex;align-items:flex-end;gap:2px;height:150px;}
.sercol{position:relative;display:flex;align-items:flex-end;gap:1px;height:100%;}
.sercol i{display:block;flex:1;min-height:2px;border-radius:var(--r1) 3px 0 0;}
.sersold{background:linear-gradient(180deg,var(--accent),var(--accent2));}
.serred{background:linear-gradient(180deg,var(--ok),color-mix(in srgb,var(--ok) 45%,#0a1a14));}
.serlegend{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--muted);}
.serlegend span{display:flex;align-items:center;gap:6px;}
.serlegend i{width:11px;height:11px;border-radius:var(--r1);display:inline-block;}
.upgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.upgrid div{background:var(--card2);border:1px solid var(--border);border-radius:var(--r2);padding:14px;}
.upgrid div.hi{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);}
.upgrid span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;}
.upgrid b{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;}
.upgrid small{display:block;margin-top:4px;font-size:11px;color:var(--muted);}

/* Kunden. */
.cfile{max-width:660px;}
.cstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:16px 0 4px;}
.cstats div{background:var(--card2);border:1px solid var(--border);border-radius:var(--r2);padding:11px 13px;}
.cstats span{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;}
.cstats b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;}
.cfav{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;}
.cfav div{background:var(--card2);border:1px solid var(--border);border-radius:var(--r2);padding:9px 12px;}
.cfav b{display:block;font-size:13.5px;}
.cfav span{font-size:11.5px;color:var(--muted);}
.cweek{display:flex;align-items:flex-end;gap:6px;height:80px;}
.cweek div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%;}
.cweek i{display:block;width:100%;min-height:3px;border-radius:var(--r1) 5px 0 0;
  background:linear-gradient(180deg,var(--accent),var(--accent2));}
.cweek span{font-size:10.5px;color:var(--muted);}
.cbtn{margin-left:auto;}
.cbtn.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent);}
.cpick{display:flex;flex-direction:column;gap:7px;margin-top:12px;max-height:44vh;overflow:auto;}
.cpickrow{display:block;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r2);
  background:linear-gradient(180deg,var(--raise),var(--raise2));color:var(--fg);}
.cpickrow:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);}
.cpickrow b{display:block;font-size:14px;}
.cpickrow span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.cpickrow small{display:block;font-size:11px;color:var(--muted);margin-top:3px;}
.checkline{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:13.5px;cursor:pointer;}
.checkline input{width:auto;margin-top:2px;}

/* Hinweis auf dünne Datenlage – gehört über die Zahlen, nicht darunter. */
.cover{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;padding:13px 15px;border-radius:var(--r2);
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,transparent);}
.cover b{font-size:14px;color:var(--warn);}
.cover span{font-size:12.5px;color:var(--muted);line-height:1.5;}
.cover.low{border-color:color-mix(in srgb,var(--danger) 40%,transparent);
  background:color-mix(in srgb,var(--danger) 9%,transparent);}
.cover.low b{color:var(--danger);}

/* Plattformverwaltung. */
.pfile{max-width:680px;}
/* Im Formular sollen die beiden Spalten gleich breit sein – die Aufteilung
   1,6 zu 1 stammt aus dem Seitenlayout und passt hier nicht. */
.pfile .grid2{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:0;}
.pfile .sysseg{display:flex;width:100%;}
.pfile .sysseg button{flex:1;text-align:center;}
.pfile .systab{margin-top:4px;}
.pfile .systab td{vertical-align:middle;}
.pfile .actions{display:flex;gap:8px;flex-wrap:wrap;}
/* Unwiderrufliches sieht auch so aus. */
.btn-ghost.gefahr{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--border));}
.btn-ghost.gefahr:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);}
.btn-ghost.schmal{padding:4px 10px;font-size:12.5px;}
/* Kennungen sollen sich abheben, ohne die Zeile zu sprengen. */
code.klein{font-size:11px;background:var(--card2);padding:2px 6px;border-radius:var(--r1);word-break:break-all;}
/* Abweichende Preise je Standort: Name links, im Haus und außer Haus daneben. */
.sprices{display:flex;flex-direction:column;gap:7px;margin-top:6px;}
.sprice{display:grid;grid-template-columns:1fr 90px 90px;gap:8px;align-items:center;}
.sprice .nm{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sprice input{padding:8px 10px;font-size:14px;text-align:right;}
/* Kopfzeile über den beiden Preisspalten – ohne sie war nicht zu erkennen,
   welches Feld „im Haus" und welches „außer Haus" meint. */
.sprice.kopf{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;}
.sprice.kopf span:not(.nm){text-align:right;padding-right:10px;}
/* Steht kein eigener Preis drin, zeigt das Feld den des Betriebs – deutlich
   blasser, damit ein Vorschlag nicht wie ein gesetzter Wert aussieht. */
input::placeholder{color:var(--muted);opacity:.55;}
.sprice input::placeholder{font-style:italic;}

/* Filterleiste der Artikelübersicht */
.filterbar{gap:8px;flex-wrap:wrap;}
.filterbar input,.filterbar select{width:auto;flex:0 1 auto;min-width:150px;padding:9px 11px;font-size:14px;}
.filterbar input{flex:1 1 240px;}
.filterbar .sub{margin-left:auto;white-space:nowrap;}
/* Abweichende Preise unter dem allgemeinen – klein, aber lesbar. */
td .sub.abw{font-size:11.5px;line-height:1.5;margin-top:3px;color:var(--warn);}
tr.inaktiv{opacity:.55;}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;margin:12px 0 4px;}
.mtile{display:flex;flex-direction:column;gap:4px;padding:13px;border-radius:var(--r2);text-align:left;
  border:1px solid var(--border);background:linear-gradient(180deg,var(--raise),var(--raise2));color:var(--fg);}
.mtile b{font-size:14.5px;}
.mtile span{font-size:11.5px;color:var(--muted);}
.mtile.on{border-color:transparent;color:var(--accent-fg);
  background:linear-gradient(135deg,var(--accent),var(--accent2));}
.mtile.on span{color:color-mix(in srgb,var(--accent-fg) 75%,transparent);}
.mtile[disabled]{opacity:.6;cursor:default;}
.storegrid{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.storerow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--r2);background:var(--card2);}
.storerow .sname{font-weight:700;font-size:13.5px;}
.sflags{display:flex;gap:6px;}
.sflag{display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:var(--r2);font-size:11.5px;font-weight:800;
  border:1px solid var(--border);background:var(--card);color:var(--muted);}
.sflag i{font-style:normal;}
.sflag.an{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,transparent);}
.sflag.aus{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);
  background:color-mix(in srgb,var(--danger) 10%,transparent);}

/* Support-Modus.
 *
 * Vorher klebte hier eine Leiste am unteren Bildrand. Sie war unübersehbar –
 * und im Weg: sie lag über der Abmeldetaste und über den unteren Zeilen der
 * Kasse, gemeldet aus dem laufenden Betrieb. Eine Kennzeichnung, die man
 * wegschieben möchte, um arbeiten zu können, ist die falsche Kennzeichnung.
 *
 * Jetzt zwei Teile, die beide nichts verdecken:
 *
 *   1. ein Schild in der Kopfzeile, IM FLUSS – es schiebt den Inhalt, statt
 *      darüber zu liegen. Dort steht der Name des Betriebs und der Knopf zum
 *      Verlassen, also genau dort, wo man ohnehin nachsieht, wo man ist.
 *   2. ein drei Pixel schmaler Streifen am oberen Bildrand, fest, ohne
 *      Bedienelemente. Er bleibt beim Scrollen stehen und ist nicht
 *      anklickbar – er kann also gar nichts verdecken. Genau so machen es
 *      Entwicklerwerkzeuge, wenn eine Sitzung fremd ist.
 */
.ebchip{display:inline-flex;align-items:center;gap:9px;padding:6px 8px 6px 12px;border-radius:var(--r2);
  font-size:12.5px;font-weight:800;line-height:1.3;
  background:color-mix(in srgb,var(--warn) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);color:var(--warn);}
.ebchip b{font-weight:900;}
.ebchip .ebleave{padding:4px 10px;border-radius:var(--r1);border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);
  background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn);font-weight:800;font-size:12px;}
/* Der Streifen. `pointer-events:none` ist hier keine Feinheit, sondern der
   Punkt: darunter muss sich alles anklicken lassen. */
body.entered::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:80;
  background:var(--warn);pointer-events:none;}
@media(max-width:900px){
  /* Auf dem Handy bekommt das Schild die volle Breite der Kopfzeile – sonst
     drängt es sich neben die Filialauswahl und beides wird zu schmal. */
  .ebchip{width:100%;justify-content:space-between;}
  /* Auf dem Handy stehen die Filter untereinander statt gequetscht.
     Dieser Block ist der letzte der Datei – nur hier gewinnen gleich starke
     Regeln gegen die Grundregeln weiter oben. */
  .filterbar input,.filterbar select{flex:1 1 100%;min-width:0;}
  /* Die Fußnavigation ist auf dem Handy das einzige, was immer im Bild
     bleibt. Der Streifen ist derselbe wie auf der Anmeldekarte, die Marke
     sitzt in der Fläche über dem Home-Indikator – dort steht nichts anderes.
     Beides liegt innerhalb der Leiste und verschiebt nichts. */
  html[data-stage="staging"] #mainNav{
    box-shadow:inset 0 3px 0 var(--warn),0 -6px 20px rgba(0,0,0,.16);}
  /* Mittig, nicht links: am linken Rand lag die Marke über der ersten Kachel
     der Fußnavigation und wurde vom abgerundeten Bildschirmeck angeschnitten.
     In der Mitte steht unter den Beschriftungen nichts. `translateX` statt
     `left:50%`, damit sie unabhängig von ihrer eigenen Breite mittig sitzt. */
  html[data-stage="staging"] #mainNav::after{
    content:"Staging";position:absolute;left:50%;transform:translateX(-50%);
    bottom:max(3px,calc(env(safe-area-inset-bottom,0px) - 20px));
    font-size:8.5px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;
    padding:2px 7px 3px;border-radius:var(--r1);pointer-events:none;
    background:var(--warn);color:#231703;}

  .zaehlfeld{grid-template-columns:1fr;}
  /* Auf dem Handy zählen Name und Umsatz – der Rest wandert unter den Namen. */
  .awkopfz{display:none;}
  .awzeile{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;}
  .awzeile .awz{font-size:12px;}
  .awzeile .awz:not(.stark){grid-column:1;text-align:left;}
  .awunter{padding-left:9px;}
  /* Auf dem Handy nur die Lupe – der Platz gehört dem Titel. */
  .suchknopf .stext{display:none;}
  .suchknopf{padding:8px 11px;}
  .suchbg{padding:8vh 12px 12px;}
  .filterbar .sub{margin-left:0;}
  .sprice{grid-template-columns:1fr 80px 80px;}
}

  /* ---- Zeitraumwahl der Übersicht ----
     Die Übersicht stand fest auf 30 Tagen. Liegt nur ein Geschäftstag vor,
     zeigte sie 29 leere Tage. Die Leiste macht den Zeitraum sichtbar und
     änderbar — und nennt daneben, wofür überhaupt Zahlen da sind. */
  .zrleiste{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
  .zrleiste .chip,.awsort .chip{font-size:12px;font-weight:600;color:var(--muted);background:var(--card2);
    border:1px solid var(--line);border-radius:var(--rr);padding:4px 11px;cursor:pointer;
    transition:border-color .12s,color .12s,background .12s;}
  .zrleiste .chip:hover,.awsort .chip:hover{border-color:var(--accent);color:var(--fg);background:var(--hover);}
  .zrleiste .chip.an,.awsort .chip.an{border-color:var(--accent);color:#fff;background:var(--accent);}
  .zrleiste .sub{margin-left:4px;font-size:11.5px;}
  @media(max-width:900px){
    .zrleiste{width:100%;}
    .zrleiste .sub{width:100%;margin-left:0;}
  }

  /* ═══ Antwortkarte der Auswertung ═══════════════════════════════════════
     Eine Tabelle beantwortet keine Frage, sie zeigt Zahlen. Oben steht
     deshalb das Ergebnis, darunter der Vergleich – die Tabelle klappt auf,
     wer die Herleitung sehen will. */
  .awantwort{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r3);
    padding:18px 18px 14px;margin-bottom:14px;
    animation:awauf .38s cubic-bezier(.2,.8,.2,1) both;}
  @keyframes awauf{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  .awtitel{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--muted);
    text-transform:uppercase;margin-bottom:12px;}
  .awantwort .awfuss{font-size:11.5px;color:var(--muted);margin:-8px 0 12px;}

  .awkarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px;}
  .awkarte{background:var(--raise2);border:1px solid var(--border);border-radius:var(--r2);padding:13px 15px;
    animation:awauf .45s cubic-bezier(.2,.8,.2,1) both;}
  .awkarte:nth-child(2){animation-delay:.06s;}
  .awkarte:nth-child(3){animation-delay:.12s;}
  .awkarte{container-type:inline-size;}
  /* Die Zahl richtet sich nach der Kachelbreite, nicht nach einer festen
     Größe: „5.461.697,51 €" lief sonst rechts heraus. Untergrenze 15 px,
     damit sie auf schmalen Geräten lesbar bleibt. */
  .awkarte .kw{font-size:clamp(15px, 13cqw, 23px);font-weight:800;
    letter-spacing:-.02em;line-height:1.1;
    font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%;}
  @supports not (container-type: inline-size){
    .awkarte .kw{font-size:20px;}
  }
  .awkarte .kt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
    color:var(--muted);margin-top:5px;}
  .awkarte .kf{font-size:12px;color:var(--muted);margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* Rangfolge: waagerechte Balken, Namen bleiben lesbar. */
  .awbalkenliste{display:flex;flex-direction:column;gap:7px;}
  .awbz{display:grid;grid-template-columns:minmax(90px,190px) 1fr auto;gap:11px;align-items:center;
    cursor:pointer;padding:3px 4px;border-radius:var(--r2);transition:background .12s;}
  .awbz:hover{background:var(--hover);}
  .awbz .bn{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .awbz .bb{height:9px;border-radius:var(--rr);background:var(--glass);overflow:hidden;}
  .awbz .bb i{display:block;height:100%;border-radius:var(--rr);background:var(--grad-accent);
    animation:awbreit .5s cubic-bezier(.2,.8,.2,1) both;}
  @keyframes awbreit{from{transform:scaleX(0);transform-origin:left;}to{transform:none;}}
  .awbz .bv{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}

  /* Verlauf: Säulen in der Reihenfolge der Zeit. */
  .awverlauf{display:flex;align-items:flex-end;gap:3px;height:150px;padding-top:6px;}
  .awverlauf .vs{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
    height:100%;cursor:pointer;min-width:0;}
  .awverlauf .vs i{display:block;width:100%;border-radius:var(--r1) 5px 2px 2px;background:var(--grad-accent);
    transition:filter .12s;animation:awhoch .5s cubic-bezier(.2,.8,.2,1) both;}
  @keyframes awhoch{from{transform:scaleY(0);transform-origin:bottom;}to{transform:none;}}
  .awverlauf .vs:hover i{filter:brightness(1.25);}
  .awverlauf .vs span{font-size:9.5px;color:var(--muted);margin-top:5px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
  /* Der Wert über der Säule. Er darf die Säule nicht kürzen – deshalb nimmt
     die Zeile ihren Platz aus der Höhe des Kastens, nicht aus dem Balken. */
  .awverlauf.mitzahlen{padding-top:22px;}
  .awverlauf .vw{font-size:11px;font-weight:800;color:var(--fg);
    margin-bottom:4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
    white-space:nowrap;line-height:1;}
  .awverlauf .vs:hover .vw{color:var(--accent);}
  /* Wird es sehr eng, verschwindet die Zahl statt sich zu überlappen. Die
     genaue steht ohnehin im Tooltip und in der Tabelle darunter. */
  @container (max-width: 260px){ .awverlauf .vw{display:none;} }

  .awmehr{margin-top:14px;background:none;border:0;color:var(--muted);font-size:12.5px;
    font-weight:600;cursor:pointer;padding:4px 0;}
  .awmehr:hover{color:var(--fg);}
  .awtabelle.zu{display:none;}
  /* Mit eigener Kennzahlspalte wird die Tabelle eine Spalte breiter. */
  .awtabelle.mitkz .awkopfz,.awtabelle.mitkz .awzeile{
    grid-template-columns:minmax(0,1fr) 78px 74px 104px 108px 74px;}
  @media(max-width:900px){
    .awtabelle.mitkz .awzeile{grid-template-columns:minmax(0,1fr) auto;}
    .awbz{grid-template-columns:minmax(70px,120px) 1fr auto;}
  }
  @media (prefers-reduced-motion:reduce){
    .awantwort,.awkarte,.awbz .bb i,.awverlauf .vs i{animation:none;}
  }

  /* ═══ Übersicht: Verlauf, Ring, Rangliste ═══════════════════════════════
     Von Hand gezeichnet — das Projekt liefert die Oberfläche als reine
     Dateikopie aus, ohne Bündelschritt und ohne Nachladen aus dem Netz.
     Alle Bewegungen sind kurz und laufen weich aus; wer Bewegung abbestellt
     hat (prefers-reduced-motion), sieht sofort den Endzustand. */

  .panel.weit{margin-bottom:16px;}

  /* Kennzahl-Kacheln: gestaffelt einblenden statt alle auf einmal. */
  .kpi{animation:kpiauf .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--verzug,0ms);}
  @keyframes kpiauf{from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}}
  .kpi .v{font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
  .kpi .kfuss.auf{color:var(--ok);font-weight:600;}
  .kpi .kfuss.ab{color:var(--danger);font-weight:600;}
  .kpi{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s;}
  .kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px -12px var(--glass);}

  /* ── Flächendiagramm ── */
  .flaeche{position:relative;}
  .flaeche svg{width:100%;height:260px;display:block;overflow:visible;margin-top:6px;}
  .flaeche .ff{fill:url(#fgrad);opacity:0;animation:ffauf .6s ease-out .25s forwards;}
  @keyframes ffauf{to{opacity:1;}}
  .fg1{stop-color:var(--accent);stop-opacity:.30;}
  .fg2{stop-color:var(--accent);stop-opacity:.02;}
  .flaeche .fl{fill:none;stroke:var(--accent);stroke-width:2.5;
    stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
    /* Passt zu `pathLength="1"` am Pfad: ein Strich über die ganze Länge,
       egal ob der Zeitraum eine Woche oder zwei Jahre umfasst. Vorher stand
       hier 3000 — bei langen Zeiträumen wiederholte sich das Muster und die
       Linie bekam Lücken. */
    stroke-dasharray:1;stroke-dashoffset:1;animation:flzeichnen 1.1s cubic-bezier(.4,0,.2,1) forwards;}
  @keyframes flzeichnen{to{stroke-dashoffset:0;}}
  .flaeche .fp{fill:var(--accent);opacity:0;cursor:pointer;transition:opacity .12s,r .12s;}
  .flaeche:hover .fp{opacity:.28;}
  .flaeche .fp:hover{opacity:1;}
  /* Tage ohne Umsatz sind dauerhaft zu sehen, nicht erst beim Überfahren:
     Sie sind der Grund, warum die Reihe lückenlos gezeichnet wird. Ein
     hohler Ring statt eines Punktes — die Linie liegt dort ohnehin auf der
     Grundlinie, der Ring sagt „hier war zu", nicht „hier fehlt ein Wert". */
  .flaeche .fp.leer{fill:none;stroke:var(--muted);stroke-width:2;opacity:.5;r:4;}
  .flaeche:hover .fp.leer{opacity:.7;}
  .flaeche .fp.leer:hover{opacity:1;stroke:var(--accent);}
  /* Beschriftung liegt als HTML ÜBER der Zeichnung.
     Die Zeichenfläche wird auf die Kachelbreite gezogen (preserveAspectRatio
     none) — richtig für Fläche und Linie, aber jeder Text darin würde mit
     verzerrt: auseinandergezogen auf breiten, gestaucht auf schmalen Kacheln.
     Als HTML bleibt die Schrift, wie sie ist. */
  .flaeche{padding-bottom:22px;}
  .flaeche .fwerte,.flaeche .fmarken{position:absolute;left:0;right:0;
    pointer-events:none;height:0;}
  .flaeche .fwerte{top:0;}
  .flaeche .fmarken{bottom:4px;}
  .flaeche .fw,.flaeche .fx{position:absolute;transform:translateX(-50%);
    white-space:nowrap;font-variant-numeric:tabular-nums;}
  /* Der Wert sitzt über seinem Punkt, nicht darauf. */
  .flaeche .fw{font-size:11.5px;font-weight:800;color:var(--fg);
    margin-top:-19px;letter-spacing:-.02em;}
  .flaeche .fw.spitze{color:var(--accent);}
  /* Am Rand würde die Zahl über die Kante hinausragen. */
  .flaeche .fw.links,.flaeche .fx.links{transform:none;}
  .flaeche .fw.rechts,.flaeche .fx.rechts{transform:translateX(-100%);}
  .flaeche .fx{font-size:11px;color:var(--muted);}
  .flaeche .fmax{position:absolute;top:0;right:0;font-size:11.5px;color:var(--muted);}
  /* Sehr schmale Kacheln: Der Verlauf bleibt, die Zahlen weichen. */
  @container (max-width: 300px){ .flaeche .fw{display:none;} }
  .einwert{display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:34px 0;gap:6px;}
  .einwert .v{font-size:34px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
  .einwert .l{font-size:12.5px;color:var(--muted);}

  /* ── Ring der Zahlarten ── */
  .ring{display:grid;grid-template-columns:130px minmax(0,1fr);gap:18px;align-items:center;}
  .rsvg{width:130px;height:130px;transform:rotate(-90deg);}
  .rbg{fill:none;stroke:var(--glass);stroke-width:15;}
  .rs{fill:none;stroke-width:15;stroke-linecap:butt;
    animation:rsauf .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--verzug,0ms);
    transition:stroke-width .15s;}
  .rs:hover{stroke-width:18;}
  @keyframes rsauf{from{opacity:0;}to{opacity:1;}}
  .f0{stroke:var(--accent);}      .f1{stroke:var(--ok);}
  .f2{stroke:var(--messing);}     .f3{stroke:var(--warn);}
  .f4{stroke:var(--danger);}      .f5{stroke:var(--muted);}
  .rp.f0{background:var(--accent);} .rp.f1{background:var(--ok);}
  .rp.f2{background:var(--messing);} .rp.f3{background:var(--warn);}
  .rp.f4{background:var(--danger);} .rp.f5{background:var(--muted);}
  .rliste{display:flex;flex-direction:column;gap:6px;min-width:0;}
  .rz{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:9px;align-items:center;
    font-size:13px;padding:2px 0;}
  .rp{width:10px;height:10px;border-radius:var(--r1);}
  .rl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ra{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;}
  .rv{font-weight:700;font-variant-numeric:tabular-nums;}

  /* ── Rangliste der Artikel ── */
  .toplist{display:flex;flex-direction:column;gap:2px;}
  .tz{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;
    align-items:center;padding:9px 10px;border-radius:var(--r2);overflow:hidden;
    animation:kpiauf .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--verzug,0ms);}
  .tz:hover{background:var(--hover);}
  .tb{position:absolute;inset:0 auto 0 0;width:var(--b,0%);background:var(--glass);
    border-radius:var(--r2);z-index:0;animation:awbreit .55s cubic-bezier(.2,.8,.2,1) both;}
  .tn,.tm,.tv{position:relative;z-index:1;}
  .tn{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tm{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
  .tv{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;}

  @media(max-width:900px){
    .ring{grid-template-columns:1fr;justify-items:center;}
    .rliste{width:100%;}
    .flaeche svg{height:210px;}
  }
  @media (prefers-reduced-motion:reduce){
    .kpi,.tz,.tb,.rs,.flaeche .ff,.flaeche .fl{animation:none;}
    .flaeche .ff{opacity:1;} .flaeche .fl{stroke-dashoffset:0;}
  }

  /* ═══ Beleg als Kassenbon ═══════════════════════════════════════════════
     Papierrolle statt Tabelle: Wer einen Beleg prüft, sucht die Position
     dort, wo sie auf dem Ausdruck stünde. Der Bon bleibt hell, auch im
     dunklen Erscheinungsbild – Papier ist weiß, und genau das macht die
     Nachbildung erkennbar. Dicktengleiche Schrift, damit Beträge
     untereinander stehen. */
  .bon{display:flex;justify-content:center;padding:8px 0 18px;}
  .bonpapier{width:min(380px,100%);background:#fdfdfb;color:#1a1a1a;
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
    font-size:12.5px;line-height:1.55;padding:22px 20px 16px;
    box-shadow:0 10px 30px -12px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.12);
    /* Gezackter Abriss oben und unten – ohne Bild, nur aus Verläufen. */
    --zacke:8px;
    -webkit-mask:
      linear-gradient(#000 0 0) padding-box,
      conic-gradient(from -45deg at 50% 0,#0000 25%,#000 0) 50% 0/16px var(--zacke) repeat-x border-box,
      conic-gradient(from 135deg at 50% 100%,#0000 25%,#000 0) 50% 100%/16px var(--zacke) repeat-x border-box;
    mask:
      linear-gradient(#000 0 0) padding-box,
      conic-gradient(from -45deg at 50% 0,#0000 25%,#000 0) 50% 0/16px var(--zacke) repeat-x border-box,
      conic-gradient(from 135deg at 50% 100%,#0000 25%,#000 0) 50% 100%/16px var(--zacke) repeat-x border-box;
    border-block:var(--zacke) solid #0000;
    animation:bonein .4s cubic-bezier(.2,.8,.2,1) both;}
  @keyframes bonein{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}

  .bkopf{text-align:center;margin-bottom:10px;}
  .bfirma{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
  .bklein{font-size:11.5px;color:#555;}
  .bstorno{margin-top:7px;font-weight:700;letter-spacing:.12em;color:#b3261e;}

  /* Gestrichelt wie die Perforation auf dem Ausdruck. */
  .btrenn{border-top:1px dashed #b9b9b4;margin:9px 0;}

  .bpos{display:grid;grid-template-columns:2.6em minmax(0,1fr) 5.4em;gap:6px;align-items:start;}
  .bpos .bm{text-align:right;}
  .bpos .bs{text-align:right;font-variant-numeric:tabular-nums;}
  .bpos .bn{overflow-wrap:anywhere;}
  .bpos .be{display:block;font-size:11px;color:#666;}
  .bkopfz{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#666;}

  .bzeile{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums;}
  .bzeile.gross{font-size:16px;font-weight:700;letter-spacing:.04em;margin:2px 0 4px;}
  .bzeile.klein{font-size:11.5px;color:#555;}

  .bst{display:grid;grid-template-columns:3.4em repeat(3,minmax(0,1fr));gap:6px;
    font-size:11.5px;text-align:right;font-variant-numeric:tabular-nums;}
  .bst span:first-child{text-align:left;}

  .bleer{text-align:center;color:#777;padding:12px 0;}
  .bbewirtung{font-size:11.5px;}
  .bfussnote{margin-top:14px;text-align:center;font-size:10.5px;color:#8a8a84;
    letter-spacing:.04em;}
  .bon.storno .bonpapier{box-shadow:0 10px 30px -12px rgba(179,38,30,.5),0 0 0 1px rgba(179,38,30,.25);}

  /* Beim Drucken zählt nur der Bon. */
  @media print{
    .bonpapier{box-shadow:none;-webkit-mask:none;mask:none;border-block:0;width:100%;}
    .sheetactions{display:none;}
  }
  @media (prefers-reduced-motion:reduce){ .bonpapier{animation:none;} }

  /* ── Klickbare Kacheln ──
     Als <button> ausgeführt, damit Tastatur und Vorleseprogramme sie
     erreichen. Die Grundstile eines Knopfes müssen dafür zurückgenommen
     werden, sonst sitzt die Zahl plötzlich mittig in einem Rahmen. */
  button.kpi{font:inherit;color:inherit;text-align:left;border:1px solid var(--border);
    width:100%;cursor:pointer;}
  .kpi.klick{position:relative;}
  .kpi.klick:hover{border-color:var(--accent);}
  .kpi.klick:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .kpi .kpfeil{position:absolute;top:12px;right:12px;font-size:16px;color:var(--muted);
    opacity:0;transform:translateX(-4px);
    transition:opacity .16s,transform .16s,color .16s;}
  .kpi.klick:hover .kpfeil,.kpi.klick:focus-visible .kpfeil{opacity:1;transform:none;color:var(--accent);}
  .kpi.klick:active{transform:translateY(0) scale(.995);}

  /* ═══ Belegliste ════════════════════════════════════════════════════════
     Eine Zeile je Bon, anklickbar wie ein Knopf – dahinter öffnet sich der
     Bon selbst. Seitenweise nachgeladen: Ein Geschäftstag bringt hier über
     tausend Belege, und niemand liest sie am Stück. */
  .blsuche{min-width:240px;max-width:100%;}
  .blkopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    margin-bottom:10px;font-size:12.5px;color:var(--muted);}
  .blkopf .blsum{font-size:15px;font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums;}

  .blliste{display:flex;flex-direction:column;gap:2px;}
  .blz{display:grid;grid-template-columns:112px 74px minmax(0,1fr) 68px 118px 104px;
    gap:12px;align-items:center;width:100%;text-align:left;
    font:inherit;color:inherit;background:var(--grad-card);
    border:1px solid var(--border);border-radius:var(--r2);padding:10px 13px;cursor:pointer;
    transition:border-color .13s,transform .13s,background .13s;
    animation:kpiauf .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--verzug,0ms);}
  .blz:hover{border-color:var(--accent);background:var(--hover);transform:translateX(2px);}
  .blz:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .blz.storniert{opacity:.62;}

  .blnr{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .blzeit{display:flex;flex-direction:column;line-height:1.25;font-size:11.5px;color:var(--muted);}
  .blzeit b{font-size:13px;color:var(--fg);font-variant-numeric:tabular-nums;}
  .blwo,.blart{font-size:12.5px;color:var(--muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .blpos{font-size:11.5px;color:var(--muted);text-align:right;white-space:nowrap;}
  .blsumme{font-size:14px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}

  .blpill{display:inline-block;margin-left:5px;font-size:10px;font-weight:700;
    padding:1px 6px;border-radius:var(--r1);vertical-align:1px;}
  .blpill.off{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger);}
  .blpill.neutral{background:var(--glass);color:var(--muted);}

  .blmehr{display:block;width:100%;margin-top:12px;padding:11px;border-radius:var(--r2);
    border:1px dashed var(--border);background:none;color:var(--fg);font:inherit;
    font-weight:600;cursor:pointer;transition:border-color .13s,background .13s;}
  .blmehr:hover{border-color:var(--accent);background:var(--hover);}
  .blmehr .sub{font-weight:400;margin-left:6px;}
  .blende{text-align:center;color:var(--muted);font-size:12px;padding:12px 0;}

  @media(max-width:900px){
    .blz{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;}
    .blzeit{flex-direction:row;gap:6px;align-items:baseline;}
    .blwo{grid-column:1/-1;}
    .blpos,.blart{display:none;}
    .blsuche{width:100%;}
  }
  @media (prefers-reduced-motion:reduce){ .blz{animation:none;} }

  /* ── Filterleiste der Belegliste ── */
  .blfilter{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px;
    padding:12px 14px;background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r2);}
  .blf{display:flex;flex-direction:column;gap:4px;min-width:0;}
  .blf>span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
  .blf select,.blf input{min-width:150px;}
  .blf.schmal select,.blf.schmal input{min-width:96px;width:96px;}
  .blfilter .chip{align-self:flex-end;}
  @media(max-width:900px){
    .blfilter{gap:9px;padding:11px;}
    .blf{flex:1 1 45%;}
    .blf select,.blf input{min-width:0;width:100%;}
    .blf.schmal select,.blf.schmal input{width:100%;}
  }

  /* ═══ Board: Auswertungen zum Zusammenstellen ═══════════════════════════
     Mehrere Antworten nebeneinander statt einer, die jede Frage überschreibt.
     Kacheln lassen sich am Griff ziehen; die übrigen rutschen weich an ihre
     neue Stelle, weil das Gitter eine Übergangszeit auf transform hat. */
  .bdleiste{display:flex;align-items:center;gap:10px;margin:22px 0 12px;}
  .bdtitel{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}

  /* Festes Raster statt auto-fill: Nur so lässt sich eine Kachel „zwei von
     vier Spalten breit" machen. Auf schmalen Geräten fällt es auf zwei und
     dann auf eine Spalte zurück – die gespeicherte Breite bleibt erhalten und
     greift wieder, sobald Platz da ist. */
  .bdgitter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
    align-items:start;}
  .bdk.b1{grid-column:span 1;} .bdk.b2{grid-column:span 2;}
  .bdk.b3{grid-column:span 3;} .bdk.b4{grid-column:span 4;}
  .bdk.h1{min-height:210px;} .bdk.h2{min-height:300px;}
  .bdk.h3{min-height:400px;} .bdk.h4{min-height:520px;}
  /* Der Inhalt füllt, was die Kachelhöhe übrig lässt. */
  .bdk .bdinhalt{display:flex;flex-direction:column;justify-content:flex-start;}
  .bdk.h2 .awverlauf{height:170px;} .bdk.h3 .awverlauf{height:250px;}
  .bdk.h4 .awverlauf{height:360px;}
  .bdk.h3 .rsvg,.bdk.h4 .rsvg{width:120px;height:120px;}
  .bdk.h3 .ring,.bdk.h4 .ring{grid-template-columns:120px minmax(0,1fr);}

  @media(max-width:1180px){
    .bdgitter{grid-template-columns:repeat(2,minmax(0,1fr));}
    .bdk.b3,.bdk.b4{grid-column:span 2;}
  }
  @media(max-width:720px){
    .bdgitter{grid-template-columns:1fr;}
    .bdk.b2,.bdk.b3,.bdk.b4{grid-column:span 1;}
  }

  /* Anfasser unten rechts. Gerastert, nicht stufenlos: krumme Breiten sehen
     nach Unfall aus und passen auf dem nächsten Bildschirm ohnehin nicht. */
  .bdk{position:relative;}
  .bdgroesse{position:absolute;right:3px;bottom:3px;width:18px;height:18px;
    cursor:nwse-resize;touch-action:none;opacity:0;transition:opacity .15s;
    background:linear-gradient(135deg,transparent 48%,var(--muted) 48%,var(--muted) 60%,
      transparent 60%,transparent 72%,var(--muted) 72%,var(--muted) 84%,transparent 84%);
    border-radius:0 0 12px 0;}
  .bdk:hover .bdgroesse{opacity:.75;}
  .bdgroesse:hover{opacity:1 !important;}
  .bdk.groesst{outline:2px dashed var(--accent);outline-offset:2px;user-select:none;}
  .bdk.groesst .bdmass{opacity:1;color:var(--accent);font-weight:700;}

  .bdfuss{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;}
  .bdmass{font-size:10.5px;color:var(--muted);opacity:0;transition:opacity .15s;
    font-variant-numeric:tabular-nums;}
  .bdk:hover .bdmass{opacity:.7;}
  .bdk{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r3);
    padding:14px 15px 10px;display:flex;flex-direction:column;min-width:0;
    /* Bezugsrahmen für die Beschriftung darin: Ob eine Zahl über die Säule
       passt, entscheidet die Breite DIESER Kachel — eine 1×1-Kachel ist
       schmal, auch auf einem breiten Bildschirm. Das Fenster zu messen, wie
       es eine gewöhnliche Medienabfrage täte, ginge hier immer daneben. */
    container-type:inline-size;
    transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .14s,opacity .18s;
    animation:kpiauf .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--verzug,0ms);}
  .bdk:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));}
  .bdk.zieht{opacity:.9;box-shadow:0 18px 40px -16px var(--glass);transform:scale(1.015);
    z-index:5;cursor:grabbing;}

  .bdkopf{display:flex;align-items:flex-start;gap:9px;margin-bottom:10px;}
  .bdgriff{background:none;border:0;color:var(--muted);font-size:15px;cursor:grab;padding:2px 3px;
    border-radius:var(--r1);touch-action:none;line-height:1;}
  .bdgriff:hover{color:var(--fg);background:var(--hover);}
  .bdgriff:active{cursor:grabbing;}
  .bdnamen{display:flex;flex-direction:column;min-width:0;flex:1;}
  .bdname{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .bdunter{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .bdwerkzeug{display:flex;gap:2px;opacity:0;transition:opacity .15s;}
  .bdk:hover .bdwerkzeug,.bdk:focus-within .bdwerkzeug{opacity:1;}
  .bdw{background:none;border:0;color:var(--muted);cursor:pointer;font-size:12.5px;
    padding:3px 6px;border-radius:var(--r1);line-height:1;}
  .bdw:hover{background:var(--hover);color:var(--fg);}

  .bdinhalt{flex:1;min-height:96px;}
  .bdinhalt .awverlauf{height:118px;}
  .bdinhalt .ring{grid-template-columns:96px minmax(0,1fr);gap:12px;}
  .bdinhalt .rsvg{width:96px;height:96px;}
  .bdinhalt .rz{font-size:12px;}
  .bdk.breit .awverlauf{height:170px;}

  .bdzahl{display:flex;flex-direction:column;gap:3px;padding:10px 0 6px;}
  .bdzahl .w{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
  .bdzahl .l{font-size:13px;font-weight:600;}
  .bdzahl .s{font-size:11.5px;color:var(--muted);}

  .bdtab{display:flex;flex-direction:column;}
  .bdtz{display:flex;justify-content:space-between;gap:10px;padding:5px 6px;border-radius:var(--r1);
    font-size:12.5px;cursor:pointer;}
  .bdtz:hover{background:var(--hover);}
  .bdtz .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .bdtz .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}

  .bdmehr{align-self:flex-start;background:none;border:0;color:var(--muted);
    font-size:12px;font-weight:600;cursor:pointer;padding:3px 0;}
  .bdmehr:hover{color:var(--accent);}

  /* Platzhalter, solange die Zahlen unterwegs sind – kein Textblitzen. */
  .bdskelett{height:96px;border-radius:var(--r2);
    background:linear-gradient(100deg,var(--glass) 30%,var(--hover) 50%,var(--glass) 70%);
    background-size:220% 100%;animation:bdwellen 1.3s ease-in-out infinite;}
  @keyframes bdwellen{from{background-position:180% 0;}to{background-position:-20% 0;}}
  .empty.klein{padding:22px 0;font-size:12.5px;}

  .vpin{background:none;border:0;color:var(--muted);font-size:12px;font-weight:600;
    cursor:pointer;padding:2px 6px;border-radius:var(--r1);}
  .vpin:hover{background:var(--hover);color:var(--fg);}

  @media(max-width:900px){
    .bdgitter{grid-template-columns:1fr;}
    .bdwerkzeug{opacity:1;}
  }
  @media (prefers-reduced-motion:reduce){
    .bdk{animation:none;transition:none;} .bdskelett{animation:none;}
  }

  /* ── Einzelantwort ──
     Eine Frage, die genau einen Wert meint, bekommt genau einen Wert. Eine
     Bestenliste mit einem Balken, der zwangsläufig die volle Breite hat,
     beantwortet nichts – sie verkleidet die Zahl nur. */
  .awantwort.einzel .awzahl{display:flex;flex-direction:column;gap:2px;margin:6px 0 14px;}
  .awantwort.einzel .awzahl .w{font-size:42px;font-weight:800;letter-spacing:-.03em;
    line-height:1.05;font-variant-numeric:tabular-nums;}
  .awantwort.einzel .awzahl .l{font-size:15px;font-weight:600;color:var(--muted);}
  .awneben{display:flex;flex-wrap:wrap;gap:10px;}
  .awneben .an{display:flex;flex-direction:column;gap:1px;background:var(--raise2);
    border:1px solid var(--border);border-radius:var(--r2);padding:8px 12px;min-width:88px;}
  .awneben .an b{font-size:15px;font-variant-numeric:tabular-nums;}
  .awneben .an{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
  .awverstanden .vf{line-height:1.4;}

  /* ── Rückfrage bei nicht gefundenen Angaben ── */
  .awrueck{background:color-mix(in srgb,var(--warn) 10%,var(--card));
    border:1px solid color-mix(in srgb,var(--warn) 40%,var(--border));
    border-radius:var(--r2);padding:12px 14px;margin-bottom:12px;
    animation:awauf .35s cubic-bezier(.2,.8,.2,1) both;}
  .awrz+.awrz{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
  .awrt{font-weight:700;font-size:13.5px;margin-bottom:7px;}
  .awrv{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
  .awrv .sub{margin-right:2px;}
  .awrueck .chip{font-size:12px;font-weight:600;color:var(--fg);background:var(--card2);
    border:1px solid var(--border);border-radius:var(--rr);padding:4px 11px;cursor:pointer;}
  .awrueck .chip:hover{border-color:var(--accent);background:var(--hover);}
  .awrueck .chip .sub{font-size:10.5px;}

  /* ═══ Berichtsbaukasten ═════════════════════════════════════════════════
     Alle Größen liegen sichtbar nebeneinander und wandern per Ziehen dorthin,
     wo sie wirken. Er sitzt über der Vorschau, nicht daneben: Wer etwas
     ändert, will sofort sehen, was dabei herauskommt. */
  .bkbox{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r3);
    padding:14px 16px;margin:12px 0 16px;
    animation:awauf .35s cubic-bezier(.2,.8,.2,1) both;}
  .bkkopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
  .bktitel{font-size:14px;font-weight:800;letter-spacing:.01em;}

  .bkraum{display:grid;grid-template-columns:minmax(180px,232px) minmax(0,1fr);gap:14px;align-items:start;}
  .bkzonentitel{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted);margin-bottom:7px;display:flex;gap:6px;align-items:baseline;}
  .bkzonentitel .sub{text-transform:none;letter-spacing:0;font-size:10.5px;}

  .bkfelder{display:flex;flex-wrap:wrap;gap:6px;}
  .bkfeld{font:inherit;font-size:12.5px;font-weight:600;color:var(--fg);background:var(--raise2);
    border:1px solid var(--border);border-radius:var(--r2);padding:6px 10px;cursor:grab;
    touch-action:none;user-select:none;transition:border-color .12s,transform .12s,opacity .12s;}
  .bkfeld:hover{border-color:var(--accent);transform:translateY(-1px);}
  .bkfeld.benutzt{opacity:.42;}
  .bkfeld.wandert{opacity:.35;}
  .bkfeld.schatten{position:fixed;z-index:999;pointer-events:none;box-shadow:0 12px 28px -10px rgba(0,0,0,.5);
    transform:rotate(-1.5deg);}

  .bkzonen{display:flex;flex-direction:column;gap:10px;min-width:0;}
  .bkzone{border:1px dashed var(--border);border-radius:var(--r2);padding:10px 12px;
    transition:border-color .14s,background .14s;}
  .bkzone.drueber{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);}
  .bkablage{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:34px;}
  .bkleer{font-size:12px;color:var(--muted);font-style:italic;}
  .bkpfeil{color:var(--muted);}

  .bkchip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
    background:var(--card2);border:1px solid var(--border);border-radius:var(--rr);padding:5px 10px;
    transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .15s,border-color .12s;}
  .bkchip.zieht{box-shadow:0 10px 22px -10px var(--glass);transform:scale(1.04);}
  .bkchip.fest{background:color-mix(in srgb,var(--warn) 12%,var(--card2));}
  .bkchip.wahl{cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;color:var(--fg);}
  .bkchip.wahl:hover{border-color:var(--accent);}
  .bkchip.wahl.an{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);}
  .bkgriff{cursor:grab;color:var(--muted);touch-action:none;font-size:12px;line-height:1;}
  .bkgriff:active{cursor:grabbing;}
  .bkx{background:none;border:0;color:var(--muted);cursor:pointer;font-size:11px;padding:0 1px;
    line-height:1;border-radius:var(--r1);}
  .bkx:hover{color:var(--danger);}
  .bkhinweis{font-size:11.5px;color:var(--muted);margin-top:7px;}

  .bkwerte{display:flex;flex-direction:column;gap:3px;max-height:52vh;overflow:auto;}
  .bkwert{display:flex;justify-content:space-between;gap:12px;font:inherit;font-size:13px;
    color:inherit;background:none;border:0;border-radius:var(--r2);padding:8px 10px;cursor:pointer;
    text-align:left;}
  .bkwert:hover{background:var(--hover);}

  @media(max-width:900px){
    .bkraum{grid-template-columns:1fr;}
    .bkfeld{padding:8px 12px;}
  }
  @media (prefers-reduced-motion:reduce){ .bkbox,.bkchip,.bkfeld{animation:none;transition:none;} }

  /* ═══ KI-Auswertung ═════════════════════════════════════════════════════
     Der Bildschirm, der von selbst anfängt. Jede Karte trägt die Zahlen, auf
     denen sie beruht — und den Vermerk, dass die Zahlen aus der Datenbank
     kommen und nur die Formulierung von der KI. */
  .kifrage{display:flex;gap:8px;align-items:center;margin-bottom:10px;}
  .kifrage input{flex:1;min-width:0;font-size:15px;padding:13px 15px;border-radius:var(--r2);}
  .kivorschlaege{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
  .kivor{font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--card2);
    border:1px solid var(--border);border-radius:var(--rr);padding:6px 12px;cursor:pointer;
    transition:border-color .12s,color .12s,transform .12s;}
  .kivor:hover{border-color:var(--accent);color:var(--fg);transform:translateY(-1px);}

  .kikopf{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r3);
    padding:14px 16px;margin-bottom:14px;}
  .kikopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    flex-wrap:wrap;margin-bottom:10px;}
  .kitag{font-size:14px;font-weight:700;}
  .kizahlen{display:flex;flex-wrap:wrap;gap:20px;}
  .kizahlen span{display:flex;flex-direction:column;font-size:11px;color:var(--muted);
    text-transform:uppercase;letter-spacing:.04em;}
  .kizahlen b{font-size:20px;color:var(--fg);text-transform:none;letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;}

  .kikarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;
    align-items:start;}
  .kikarte{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r3);
    padding:15px 16px;display:flex;flex-direction:column;gap:9px;
    animation:kpiauf .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--verzug,0ms);
    transition:border-color .14s,transform .16s;}
  .kikarte:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));transform:translateY(-2px);}
  .kikarte header{display:flex;align-items:center;gap:8px;}
  .kititel{font-size:14px;font-weight:800;}
  .kipill{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn);
    border-radius:var(--r1);padding:2px 7px;}
  .kitext{margin:0;font-size:13.5px;line-height:1.55;}
  .kirat{margin:0;font-size:13px;line-height:1.5;background:var(--raise2);
    border-left:3px solid var(--accent);border-radius:0 9px 9px 0;padding:9px 12px;}
  .kirat span{display:block;font-size:10px;font-weight:800;text-transform:uppercase;
    letter-spacing:.07em;color:var(--muted);margin-bottom:3px;}
  .kizahlenliste{display:flex;flex-wrap:wrap;gap:8px;}
  .kiz{display:flex;flex-direction:column;font-size:10.5px;color:var(--muted);
    text-transform:uppercase;letter-spacing:.03em;background:var(--card2);
    border:1px solid var(--border);border-radius:var(--r2);padding:6px 10px;}
  .kiz b{font-size:13px;color:var(--fg);text-transform:none;letter-spacing:0;
    font-variant-numeric:tabular-nums;}
  .kimehr{align-self:flex-start;background:none;border:0;color:var(--accent);font:inherit;
    font-size:12.5px;font-weight:600;cursor:pointer;padding:2px 0;}
  .kimehr:hover{text-decoration:underline;}
  .kiquelle{font-size:10.5px;color:var(--muted);border-top:1px solid var(--border);padding-top:7px;}

  /* Die Antwort auf eine gestellte Frage – sitzt über den Erkenntnissen. */
  .kiantwort{background:var(--grad-raise);border:1px solid var(--accent);border-radius:var(--r3);
    padding:15px 17px;margin-bottom:16px;
    animation:awauf .35s cubic-bezier(.2,.8,.2,1) both;}
  .kiafrage{font-size:15px;font-weight:700;margin-bottom:3px;}
  .kiaverstanden{font-size:12.5px;color:var(--muted);margin-bottom:12px;}
  .kiawarnung{font-size:12.5px;color:var(--warn);font-weight:600;margin-bottom:10px;line-height:1.45;}
  .kieinzel{display:flex;flex-direction:column;gap:2px;margin:4px 0 12px;}
  .kieinzel .w{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.05;
    font-variant-numeric:tabular-nums;}
  .kieinzel .l{font-size:15px;font-weight:600;}
  .kieinzel .s{font-size:12px;color:var(--muted);}
  .kiaktionen{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
  .kiaktionen .chip{font-size:12px;font-weight:600;color:var(--fg);background:var(--card2);
    border:1px solid var(--border);border-radius:var(--rr);padding:5px 12px;cursor:pointer;}
  .kiaktionen .chip:hover{border-color:var(--accent);background:var(--hover);}

  @media(max-width:900px){
    .kikarten{grid-template-columns:1fr;}
    .kizahlen{gap:14px;}
  }
  @media (prefers-reduced-motion:reduce){ .kikarte,.kiantwort{animation:none;} }

  /* Neu-berechnen-Knopf: zeigt, wann zuletzt gerechnet wurde, und dreht sich
     dabei. Ohne diesen Stempel weiß niemand, wie alt die Karten sind. */
  #kiNeu{display:inline-flex;align-items:center;gap:7px;}
  #kiNeu .sub{font-size:10.5px;opacity:.8;}
  #kiNeu:disabled{opacity:.7;cursor:progress;}
  .kidreh{display:inline-block;font-size:13px;}
  #kiNeu.rechnet .kidreh{animation:kidreh 1s linear infinite;}
  @keyframes kidreh{to{transform:rotate(360deg);}}

  /* ── Import-Dialog ── */
  /* ── Abrechnungsarten ──
     Eine Zeile je Art mit zwei Fragen, die nichts miteinander zu tun haben:
     zählt sie zum Umsatz, geht sie in die Kasse. Wo die Kasse selbst
     antwortet, sind die Knöpfe gesperrt statt versteckt — man soll sehen,
     dass die Antwort feststeht, nicht dass sie fehlt. */
  .bawarn{padding:10px 13px;margin-bottom:11px;border-radius:var(--r2);font-size:12.5px;
    color:var(--fg);background:color-mix(in srgb,var(--warn) 12%,var(--card));
    border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);}
  .baliste{margin-top:12px;max-height:min(58vh,520px);overflow:auto;}
  .bakopf,.bazeile{display:grid;
    grid-template-columns:44px minmax(0,1fr) 76px 96px 96px 96px 104px;
    gap:8px;align-items:center;padding:7px 9px;}
  .bakopf{position:sticky;top:0;z-index:1;background:var(--card);
    font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);border-bottom:1px solid var(--border);}
  .bazeile{border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent);
    font-size:13px;}
  .bazeile.offen{background:color-mix(in srgb,var(--warn) 8%,transparent);}
  .banr{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;}
  .baname{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .basub{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
  .bawahlen{display:flex;gap:3px;}
  .bawahl{margin:0;padding:3px 9px;font-size:11.5px;font-weight:700;cursor:pointer;
    color:var(--muted);background:var(--card2);border:1px solid transparent;
    border-radius:var(--r1);}
  .bawahl:hover:not(:disabled){color:var(--fg);border-color:var(--border);}
  .bawahl.an{color:#fff;background:var(--accent);border-color:var(--accent);}
  .bawahl:disabled{cursor:default;opacity:.75;}
  .bawahl.an:disabled{opacity:1;background:color-mix(in srgb,var(--accent) 62%,var(--card2));}
  .baquelle{font-size:11px;color:var(--muted);}
  .baquelle.gepflegt{color:var(--accent);font-weight:700;}
  .baquelle.unbekannt{color:var(--warn);font-weight:700;}
  @media (max-width:720px){
    .bakopf{display:none;}
    .bazeile{grid-template-columns:44px minmax(0,1fr);grid-auto-rows:min-content;
      row-gap:4px;padding:10px 9px;}
    .bazeile>.basub,.bazeile>.bawahlen,.bazeile>.baquelle{grid-column:2;}
  }

  /* ── Auswertung Test: das Cockpit ──
     Als Spielwiese erkennbar. Die Kacheln sind Knöpfe: Ein Klick öffnet
     Formel, Datenlage und den Weg in die Tiefe — die Zahl allein beantwortet
     selten die Frage, die man tatsächlich hat. */
  .atkopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
  .atmarke{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:#fff;background:var(--warn);
    padding:3px 9px;border-radius:var(--rr);flex:none;}
  .atwahl{display:flex;gap:5px;flex-wrap:wrap;align-items:center;flex:1;}
  .atwahl .spacer{flex:1;}
  .atwahl .chip{font-size:12px;font-weight:600;padding:5px 11px;cursor:pointer;
    color:var(--muted);background:var(--card2);border:1px solid transparent;
    border-radius:var(--r1);}
  .atwahl .chip:hover{color:var(--fg);border-color:var(--border);}
  .atwahl .chip.an{color:#fff;background:var(--accent);border-color:var(--accent);}

  /* 190 statt 168: Ein Millionenbetrag braucht Platz, und schmaler wird das
     Gitter auf kleinen Geräten ohnehin von selbst. */
  .atgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:9px;margin-bottom:16px;}
  .atk{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    min-width:0;overflow:hidden;
    padding:12px 14px;border-radius:var(--r2);border:1px solid var(--border);
    background:var(--grad-card);color:var(--fg);text-align:left;cursor:pointer;
    transition:border-color .14s,transform .14s;}
  .atk:hover{border-color:var(--accent);transform:translateY(-1px);}
  .atk.auf{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
  .atk.schwach{opacity:.82;}
  .atkt{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--muted);
    display:flex;align-items:center;gap:5px;}
  .atwarn{color:var(--warn);font-size:12px;}
  .atkw{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.12;
    font-variant-numeric:tabular-nums;
    /* Ohne das sprengt eine lange Zahl das Gitter, statt sich zu fügen. */
    max-width:100%;white-space:nowrap;}
  /* Gestaffelt statt umgebrochen: Eine zweizeilige Zahl verschöbe die
     Nachbarkacheln, und ungleich hohe Zeilen lesen sich schlecht. */
  .atkw.lang{font-size:20px;letter-spacing:-.03em;}
  .atkw.sehrlang{font-size:17px;letter-spacing:-.035em;}
  .atkw.winzig{font-size:15px;letter-spacing:-.035em;}
  .atkv{font-size:11.5px;font-weight:700;}
  .atkv.gut{color:var(--ok,#2e7d32);}
  .atkv.schlecht{color:var(--warn);}
  .atkv.leer{color:var(--muted);font-weight:600;}

  .atdetail{border:1px solid var(--accent);border-radius:var(--r2);padding:14px 16px;
    margin-bottom:16px;background:var(--card);}
  .atdkopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
  .atdkopf b{font-size:15px;}
  .atdkopf .linkbtn{margin-left:auto;}
  .atdzeilen{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
  .atdz{display:flex;align-items:baseline;gap:10px;font-size:13px;flex-wrap:wrap;}
  .atdz>span:first-child{min-width:88px;font-size:10.5px;font-weight:800;
    letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
  .atguete.hoch{color:var(--ok,#2e7d32);font-weight:700;}
  .atguete.mittel{color:var(--warn);font-weight:700;}
  .atguete.niedrig{color:var(--danger,#a4343a);font-weight:700;}
  .atdhinweis{font-size:12.5px;color:var(--muted);line-height:1.5;
    padding:8px 11px;border-radius:var(--r1);background:var(--card2);}
  .atdrill{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
  .atdrill .chip{font-size:12px;padding:5px 11px;cursor:pointer;color:var(--fg);
    background:var(--card2);border:1px solid var(--border);border-radius:var(--r1);}
  .atdrill .chip:hover{border-color:var(--accent);}

  .atgesperrt{border:1px dashed var(--border);border-radius:var(--r2);
    padding:12px 14px;margin-bottom:16px;}
  .atgt{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    color:var(--muted);display:block;margin-bottom:7px;}
  .atgz{display:flex;align-items:baseline;gap:10px;font-size:12.5px;margin-bottom:4px;
    flex-wrap:wrap;}

  /* ── Berichtsbau ──
     Alle Entscheidungen untereinander in einer Zeile je Frage: Zeilen,
     Spalten, Kennzahlen, Vergleich. Vorher gab es dafür zwei Wege — eine
     Leiste über der Auswertung und ein Extra-Fenster —, die dasselbe konnten
     und beide nur eine Kennzahl. */
  .brbau{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;
    padding:12px 14px;border-radius:var(--r2);border:1px solid var(--border);
    background:var(--grad-card);}
  .brzeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .brzeile .spacer{flex:1;}
  .brlabel{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);min-width:74px;}
  .brwahl{display:flex;gap:5px;flex-wrap:wrap;flex:1;min-width:0;}
  .brbau .chip{font-size:12px;font-weight:600;padding:5px 11px;cursor:pointer;
    color:var(--muted);background:var(--card2);border:1px solid transparent;
    border-radius:var(--r1);}
  .brbau .chip:hover{color:var(--fg);border-color:var(--border);}
  .brbau .chip.an{color:#fff;background:var(--accent);border-color:var(--accent);}
  .brgeoeffnet{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;}

  /* Die Ergebnistabelle. Bei einer Kreuztabelle wird die erste Spalte
     festgehalten — sonst weiß man nach dem dritten Wischen nicht mehr, in
     welcher Zeile man ist. */
  .brtabelle{border:1px solid var(--border);border-radius:var(--r2);overflow:auto;
    background:var(--card);max-height:min(70vh,760px);}
  .brtkopf,.brtz{display:grid;align-items:center;gap:0;
    grid-template-columns:minmax(150px,1.6fr) repeat(var(--spalten,1),minmax(96px,1fr)) minmax(96px,1fr);}
  .brtkopf.einfach,.brtz.einfach{grid-template-columns:minmax(180px,2fr) repeat(auto-fit,minmax(96px,1fr));}
  .brtkopf{position:sticky;top:0;z-index:2;background:var(--card2);
    font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
    color:var(--muted);border-bottom:1px solid var(--border);}
  .brtkopf span{padding:8px 10px;}
  .brtecke{position:sticky;left:0;z-index:3;background:var(--card2);}
  .brts{text-align:right;}
  .brtsumme{background:color-mix(in srgb,var(--accent) 7%,transparent);font-weight:800;}
  .brtz{font-size:13px;border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent);
    font-variant-numeric:tabular-nums;cursor:pointer;}
  .brtz:hover{background:var(--card2);}
  .brtn{position:sticky;left:0;z-index:1;background:inherit;padding:7px 10px;font-weight:650;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .brtz:not(:hover) .brtn{background:var(--card);}
  .brtw{padding:7px 10px;text-align:right;display:flex;flex-direction:column;
    align-items:flex-end;gap:1px;}
  .brtw b{font-weight:650;}
  .brtrenn{display:block;height:1px;}
  .brtv{color:var(--muted);font-size:12px;}
  .brtgesamt{font-weight:800;background:var(--card2);position:sticky;bottom:0;z-index:2;
    border-top:2px solid var(--border);cursor:default;}
  .brtgesamt .brtn{background:var(--card2);}
  .brdelta{font-size:11px;font-weight:700;}
  .brdelta.auf{color:var(--ok,#2e7d32);}
  .brdelta.ab{color:var(--warn);}

  /* Die Liste der gespeicherten Berichte. */
  .brliste{display:flex;flex-direction:column;gap:6px;max-height:min(60vh,540px);overflow:auto;}
  .brzeileliste{display:flex;align-items:stretch;gap:6px;}
  .brlaufen{flex:1;display:flex;flex-direction:column;gap:1px;align-items:flex-start;
    padding:9px 12px;border-radius:var(--r2);border:1px solid var(--border);
    background:var(--grad-card);color:var(--fg);text-align:left;cursor:pointer;}
  .brlaufen:hover{border-color:var(--accent);}
  .brln{font-size:14px;font-weight:750;}
  .brlf{font-size:12px;color:var(--muted);}
  .brlm{font-size:11px;color:var(--muted);opacity:.8;}

  /* ── Fertige Berichte ──
     Kacheln nach Rhythmus, darunter der geöffnete Bericht aus Blöcken. */
  .brgruppe{margin-bottom:18px;}
  .brgt{font-size:12px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
    color:var(--muted);margin:0 0 8px;}
  .brvorlagen{display:grid;gap:8px;
    grid-template-columns:repeat(auto-fill,minmax(232px,1fr));}
  .brkachel{display:flex;flex-direction:column;gap:3px;align-items:flex-start;
    padding:12px 14px;border-radius:var(--r2);border:1px solid var(--border);
    background:var(--grad-card);color:var(--fg);text-align:left;cursor:pointer;}
  .brkachel:hover{border-color:var(--accent);}
  /* Beim Ziehen: angehoben, halbdurchsichtig, über den anderen. Ohne
     Übergang, sonst hinkt die Kachel dem Finger hinterher. */
  .brkachel.zieht{opacity:.9;z-index:5;position:relative;cursor:grabbing;
    box-shadow:var(--s3);border-color:var(--accent);transition:none;}
  /* Wo sie landen würde. */
  .brkachel.zielstelle{border-color:var(--accent);border-style:dashed;
    background:color-mix(in srgb,var(--accent) 7%,var(--card));}
  .brkachel{transition:box-shadow .12s ease,border-color .12s ease;
    touch-action:none;}

  .brkn{font-size:14px;font-weight:750;}
  .brkz{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--accent);}
  .brkb{font-size:12px;color:var(--muted);line-height:1.4;}

  .brvkopf{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
  .brvname{font-size:15px;font-weight:750;}
  .brvspacer{flex:1;}
  /* Das Schild sagt, welcher Zeitraum tatsächlich galt — die Leiste oben
     bleibt sichtbar, wirkt hier aber nicht. Ohne das Schild sucht man den
     Fehler in der Leiste. */
  .brzeitschild{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
    background:color-mix(in srgb,var(--accent) 14%,transparent);
    color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);}
  .brzeitschild.frei{background:transparent;color:var(--muted);border-color:var(--border);}

  /* Blättern von Tag zu Tag — nur bei Berichten über einen einzelnen Tag. */
  .brtagnav{display:inline-flex;align-items:center;gap:6px;}
  .brtagnav .chip{padding:3px 10px;font-size:14px;line-height:1.2;cursor:pointer;}
  .brtagnav .chip[disabled]{opacity:.35;cursor:default;}
  .brtagname{font-size:13px;font-weight:750;font-variant-numeric:tabular-nums;
    min-width:9.5ch;text-align:center;}

  .brblock{margin-bottom:22px;}
  .brbt{font-size:13px;font-weight:750;margin:0 0 8px;}

  @media (max-width:720px){
    .brlabel{min-width:0;flex-basis:100%;}
    .brtn{position:static;}
    .brtecke{position:static;}
    .brvorlagen{grid-template-columns:1fr;}
  }

  /* ── Die eine Zeitraumleiste ──
     Sie gehört zum Rahmen: immer an derselben Stelle, immer sichtbar, gilt
     für jede Ansicht, die über einen Zeitraum geht. Vorher brachte jede
     Ansicht ihre eigene mit, an leicht anderer Stelle und mit leicht anderer
     Schnellwahl. */
  .zrbar{position:sticky;top:0;z-index:30;display:flex;flex-direction:column;gap:6px;
    padding:10px 0 11px;margin-bottom:4px;
    background:color-mix(in srgb,var(--bg) 88%,transparent);
    backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
    border-bottom:1px solid var(--border);}
  .zrzeile{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
  .zrzeile .spacer{flex:1;}
  .zrunten{gap:10px;}
  .zrspanne{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;}
  .zrbar .chip{font-size:12px;font-weight:600;color:var(--muted);background:var(--card2);
    border:1px solid transparent;border-radius:var(--r1);padding:5px 11px;cursor:pointer;}
  .zrbar .chip:hover{color:var(--fg);border-color:var(--border);}
  .zrbar .chip.an{color:#fff;background:var(--accent);border-color:var(--accent);}
  .zrbar .sub{font-size:11.5px;}
  @media (max-width:640px){
    .zrbar{position:static;backdrop-filter:none;}
    .zrbar .sub{display:none;}
    .zrspanne{font-size:12px;}
  }

  /* ── Betrieb ──
     Tabellen mit einem Balken hinter der Leitspalte: Die Zahl bleibt lesbar,
     das Verhältnis sieht man ohne sie zu vergleichen. Dieselbe Machart wie im
     Board, nur schmaler — hier stehen oft sechzig Zeilen untereinander. */
  .btreiter{margin-bottom:14px;}
  .btzt{font-size:13px;font-weight:800;margin:20px 0 8px;}
  .bttab{border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;
    background:var(--card);}
  .btkopf,.btzeile{display:grid;grid-template-columns:minmax(0,2fr) repeat(auto-fit,minmax(80px,1fr));
    gap:10px;padding:7px 12px;align-items:center;}
  .btkopf{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);background:var(--card2);}
  .btzeile{font-size:13px;border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent);
    font-variant-numeric:tabular-nums;}
  .btzeile:hover{background:var(--card2);}
  .btzeile>span:first-child{font-weight:600;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-variant-numeric:normal;}
  .btzeile.btsumme{font-weight:800;background:var(--card2);}
  .btr{text-align:right;}
  .btwert{position:relative;display:flex;align-items:center;justify-content:flex-end;
    padding:2px 6px;border-radius:var(--r1);overflow:hidden;}
  .btwert i{position:absolute;left:0;top:0;bottom:0;background:var(--grad-accent);
    opacity:.22;border-radius:var(--r1);}
  .btwert b{position:relative;font-weight:700;}
  @media (max-width:720px){
    .btkopf{display:none;}
    .btzeile{grid-template-columns:1fr auto;row-gap:2px;}
    .btzeile>span:first-child{grid-column:1/-1;}
  }

  /* Zwischenüberschrift in einer Kennzahlenliste – etwa „nach Abrechnungsart". */
  .rowtrenner{margin:12px 0 3px;padding-bottom:4px;font-size:10.5px;font-weight:700;
    letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
    border-bottom:1px solid var(--border);}
  .rowtrenner:first-child{margin-top:0;}

  .imablage{border:2px dashed rgba(127,127,127,.45);border-radius:var(--r2);padding:24px 16px;
    text-align:center;cursor:pointer;transition:border-color .15s,background .15s;}
  .imablage:hover,.imablage.drueber{border-color:var(--accent);background:rgba(59,130,246,.06);}
  .imablage .gross{font-size:1.9rem;line-height:1;margin-bottom:7px;}
  .imgewaehlt{margin-top:12px;padding:10px 12px;border-radius:var(--r2);background:var(--card2);
    font-size:13px;}
  .imbalken{height:8px;border-radius:var(--r1);background:var(--glass);margin-top:14px;overflow:hidden;}
  .imbalken i{display:block;height:100%;width:0;background:var(--grad-accent);transition:width .15s;}
  .improtokoll{margin-top:12px;padding:11px 12px;border-radius:var(--r2);background:var(--card2);
    font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.5;
    white-space:pre-wrap;max-height:220px;overflow:auto;}

  /* ── Die Rückfrage vor dem Überschreiben ──
     Sie steht im Protokollfeld, also dort, wo man ohnehin hinsieht — nicht
     als zweites Fenster über dem ersten. Deshalb muss sie die Schriftart des
     Protokolls (Schreibmaschine) wieder verlassen: Was zu lesen und zu
     entscheiden ist, gehört in die Schrift der Oberfläche. */
  .imfrage{font-family:inherit;font-size:13px;white-space:normal;line-height:1.55;}
  .imftitel{font-weight:800;color:var(--warn);margin-bottom:9px;font-size:13.5px;}
  .imtage{display:flex;flex-direction:column;gap:5px;margin-bottom:11px;}
  .imtagz{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;
    padding:7px 9px;border-radius:var(--r1);background:var(--card);
    border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);}
  .imtagd{font-weight:800;font-variant-numeric:tabular-nums;}
  .imtagf{font-size:11px;color:var(--muted);max-width:42%;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;}
  .imfhinweis{color:var(--muted);margin-bottom:12px;}
  .imfknoepfe{display:flex;gap:9px;align-items:center;}
  @media (max-width:560px){
    .imtagz{grid-template-columns:1fr;gap:2px;}
    .imtagf{max-width:100%;}
  }

  /* ── Wächter und Angeheftetes ──
     Reihenfolge mit Absicht: erst die Ausnahme, dann das Feste, dann das
     Aufgefallene. Wer öffnet, soll nicht scrollen müssen, um zu sehen, dass
     etwas aus dem Rahmen fällt. */
  .kiwache{border:1px solid var(--border);border-radius:var(--r3);padding:12px 14px;margin-bottom:14px;
    background:var(--grad-card);}
  .kiwache.schlaegtan{border-color:var(--warn);
    background:color-mix(in srgb,var(--warn) 9%,var(--card));}
  .kiwkopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
  .kiwtitel{font-size:13px;font-weight:800;}
  .kiwliste{display:flex;flex-direction:column;gap:4px;}
  .kiw{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px;align-items:center;
    font-size:12.5px;padding:6px 8px;border-radius:var(--r2);}
  .kiw.an{background:color-mix(in srgb,var(--warn) 16%,transparent);font-weight:600;}
  .kiwn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .kiwv{font-weight:800;font-variant-numeric:tabular-nums;}
  .kiwg{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .kiwleer{display:flex;align-items:center;gap:10px;justify-content:space-between;
    font-size:12.5px;color:var(--muted);border:1px dashed var(--border);border-radius:var(--r2);
    padding:10px 14px;margin-bottom:14px;}

  .kiabschnitt{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted);margin:4px 0 8px;}
  .kifavgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;
    margin-bottom:16px;}
  .kifav{background:var(--grad-raise);border:1px solid var(--border);border-radius:var(--r2);
    padding:12px 13px;min-width:0;}
  .kifav header{display:flex;align-items:flex-start;gap:8px;justify-content:space-between;
    font-size:12.5px;font-weight:700;margin-bottom:8px;}
  .kifav header span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .kifavinhalt .kieinzel .w{font-size:26px;}
  .kifavinhalt .awbz{grid-template-columns:minmax(60px,110px) 1fr auto;font-size:12px;}

  .imzahl{font-weight:700;font-size:13px;margin-bottom:6px;}
  .imzeile{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;
    font-size:12.5px;padding:4px 0;border-top:1px solid var(--border);}
  .imzeile:first-of-type{border-top:0;}
  .imzeile span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* ── Kundenwahl ──
     Wer für CKV arbeitet, wechselt hier zwischen Betrieben. Der Knopf trägt
     den Namen des Betriebs, in dem man sich befindet — wer fremde Zahlen
     ansieht, soll das nicht vergessen können. */
  .kundenknopf{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;
    color:var(--fg);background:var(--card2);border:1px solid var(--border);border-radius:var(--r2);
    padding:6px 11px;cursor:pointer;transition:border-color .12s,background .12s;}
  .kundenknopf:hover{border-color:var(--accent);background:var(--hover);}
  .kundenknopf .kk{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);}
  .kundenknopf .kpfeil{color:var(--muted);font-size:10px;}

  .kundenliste{display:flex;flex-direction:column;gap:4px;max-height:56vh;overflow:auto;}
  .kundenzeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;
    font:inherit;color:inherit;text-align:left;background:none;border:1px solid var(--border);
    border-radius:var(--r2);padding:11px 13px;cursor:pointer;transition:border-color .12s,background .12s;}
  .kundenzeile:hover{border-color:var(--accent);background:var(--hover);}
  .kundenzeile.an{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);}
  .kundenzeile .kn{font-size:14px;font-weight:700;}
  .kundenzeile .ks{grid-column:1;font-size:11.5px;color:var(--muted);}
  .kundenzeile .khier{grid-row:1;font-size:10px;font-weight:800;text-transform:uppercase;
    letter-spacing:.06em;color:var(--accent);align-self:center;}
  .kundenraus{margin-top:8px;font:inherit;font-size:12.5px;color:var(--muted);background:none;
    border:1px dashed var(--border);border-radius:var(--r2);padding:9px;cursor:pointer;}
  .kundenraus:hover{border-color:var(--danger);color:var(--danger);}

/* ── Was die KI gekostet hat ──────────────────────────────────────────────
   Steht bewusst unten und zugeklappt: Die Frage kommt selten, aber wenn sie
   kommt, soll sie nicht in einer Rechnung von Anthropic enden, die niemand
   zuordnen kann. Zugeklappt zeigt die Zeile genau eine Zahl. */
.kikosten{margin:22px 0 8px;border:1px solid var(--border);border-radius:var(--r3);
  background:var(--card2);overflow:hidden;}
.kikkopf{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;
  user-select:none;transition:background .14s;}
.kikkopf:hover{background:var(--raise2);}
.kiktitel{font-size:13px;font-weight:800;}
.kikbetrag{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--accent);}
.kiksub{font-size:11.5px;color:var(--muted);margin-left:auto;}
.kikpfeil{font-size:11px;color:var(--muted);}
.kikbody{padding:0 14px 14px;display:flex;flex-direction:column;gap:12px;}
.kikleiste{display:flex;gap:7px;flex-wrap:wrap;}
.kikzahlen{display:flex;flex-wrap:wrap;gap:16px;}
.kikzahlen span{display:flex;flex-direction:column;font-size:10.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;}
.kikzahlen b{font-size:15px;font-weight:800;color:var(--fg);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.kikzahlen .warn b{color:var(--warn);}
.kiktab{width:100%;border-collapse:collapse;font-size:12.5px;}
.kiktab th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:700;padding:0 8px 5px 0;border-bottom:1px solid var(--border);}
.kiktab td{padding:6px 8px 6px 0;border-bottom:1px solid var(--border);}
.kiktab tr:last-child td{border-bottom:0;}
.kiktab .num{text-align:right;font-variant-numeric:tabular-nums;}

/* ── Prüfbogen: der Weg zum Beleg ─────────────────────────────────────────
   Der Bon bleibt Papier. Der Prüfbogen daneben ist bewusst kein Papier,
   sondern eine Liste: Er wird gelesen, nicht abgeheftet, und er darf breit
   sein. */
.pfblatt{max-width:min(980px,94vw);display:flex;flex-direction:column;}
.pfspur{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:10px 14px 0;font-size:12px;}
.pfschritt{background:none;border:0;color:var(--muted);cursor:pointer;padding:2px 4px;
  border-radius:var(--r1);font:inherit;}
.pfschritt:hover:not(:disabled){color:var(--fg);background:var(--raise2);}
.pfschritt.an{color:var(--fg);font-weight:700;cursor:default;}
.pfpfeil{color:var(--muted);opacity:.6;}
.pfinhalt{overflow:auto;padding:10px 14px;flex:1;min-height:0;}

.pfreiter{display:flex;gap:6px;margin-bottom:12px;}
.pfreit{background:var(--card2);border:1px solid var(--border);border-radius:var(--r2);
  padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:all .14s;}
.pfreit:hover{color:var(--fg);}
.pfreit.an{background:var(--accent);border-color:var(--accent);color:#fff;}
.pfz{background:rgba(255,255,255,.22);border-radius:var(--r3);padding:1px 7px;font-size:10.5px;}
.pfreit:not(.an) .pfz{background:var(--raise2);color:var(--muted);}

.pfkopf{display:flex;flex-wrap:wrap;gap:18px;padding:12px 14px;margin-bottom:12px;
  background:var(--card2);border:1px solid var(--border);border-radius:var(--r2);}
.pfk{display:flex;flex-direction:column;font-size:10.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;}
.pfk b{font-size:15px;font-weight:800;color:var(--fg);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;text-transform:none;}
.pfsprung{margin-bottom:12px;}

/* Der Zeitstrahl. Feste Spalten, damit Uhrzeit und Betrag untereinander
   stehen — sonst sucht das Auge in jeder Zeile neu. */
.pfstrang{display:flex;flex-direction:column;}
.pfstrang.lang{max-height:none;}
.pfzeile{display:grid;grid-template-columns:76px 84px 1fr auto 82px;gap:10px;align-items:baseline;
  padding:6px 8px;border-bottom:1px solid var(--border);font-size:12.5px;}
.pfzeile:last-child{border-bottom:0;}
.pfzeile.klick{cursor:pointer;border-radius:var(--r1);}
.pfzeile.klick:hover{background:var(--raise2);}
.pfuhr{font-variant-numeric:tabular-nums;color:var(--muted);font-size:11.5px;}
.pfart{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);}
/* Umbuchungen und Ablagen sind das Besondere — sie heben sich ab, ohne zu
   schreien. Buchungen sind die Regel und bleiben ruhig. */
.pfzeile.umbuchung .pfart{color:var(--accent);}
.pfzeile.ablage .pfart{color:var(--warn);}
.pfzeile.zahlung .pfart,.pfzeile.beleg .pfart{color:var(--ok,#3aa76d);}
.pfzeile.storno{opacity:.55;text-decoration:line-through;}
.pft{min-width:0;line-height:1.45;}
.pfweg{color:var(--muted);font-size:11.5px;white-space:nowrap;}
.pfmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.pfwer{background:none;border:0;padding:1px 6px;border-radius:var(--r1);font:inherit;font-size:11.5px;
  color:var(--accent);cursor:pointer;white-space:nowrap;}
.pfwer:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);}
.pfger{font-size:10.5px;color:var(--muted);background:var(--card2);
  border-radius:var(--r1);padding:1px 6px;white-space:nowrap;}
.pfbetrag{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;}

@media (max-width:720px){
  /* Auf dem Telefon fällt die Gerätespalte weg und der Text darf umbrechen —
     Uhrzeit, was geschah und Betrag bleiben. */
  .pfzeile{grid-template-columns:62px 1fr 74px;}
  .pfart{display:none;}
  .pfmeta{grid-column:2;justify-content:flex-start;}
}
.pfsprung{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
/* Ein gesetzter Tischfilter muss man sehen und wieder loswerden können —
   sonst rätselt jemand über eine Liste, die plötzlich fast leer ist. */
.bltisch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 12px;margin-bottom:8px;border-radius:var(--r2);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));font-size:12.5px;}

/* ── Hilfe ────────────────────────────────────────────────────────────────
   Eine Suchzeile, eine Antwort, die Fundstellen darunter. Die Fundstelle ist
   nicht Beiwerk zur Antwort, sondern ihr Beleg — deshalb steht sie nicht
   kleingedruckt am Rand, sondern als eigener Block. */
.hfsuche{display:flex;gap:8px;align-items:center;margin-bottom:10px;}
.hfsuche input{flex:1;min-width:0;padding:11px 14px;border-radius:var(--r2);
  border:1px solid var(--border);background:var(--card2);color:var(--fg);font-size:14px;}
.hfsuche input:focus{outline:none;border-color:var(--accent);}
.hfleiste{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.hfschalter{display:inline-flex;align-items:center;gap:7px;font-size:12px;cursor:pointer;
  background:var(--card2);border:1px solid var(--border);border-radius:var(--r2);padding:5px 11px;}
.hfschalter input{accent-color:var(--accent);}
.hfvorschlaege{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;}

.hfkarte{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r3);
  padding:15px 17px;margin-bottom:14px;}
.hfsatz{font-size:14px;line-height:1.6;}
.hfsatz p{margin:0 0 9px;}
.hfsatz p:last-child{margin-bottom:0;}
.hfliste{margin:0 0 9px;padding-left:22px;display:flex;flex-direction:column;gap:5px;}
.hfref{font-size:11px;font-weight:800;color:var(--accent);vertical-align:super;}
.hfhinweis{margin-top:11px;padding-top:10px;border-top:1px solid var(--border);
  font-size:11.5px;color:var(--muted);line-height:1.5;}

.hffunde h3,.hfquellen h3{font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin:0 0 9px;}
.hffund{border:1px solid var(--border);border-radius:var(--r2);margin-bottom:7px;overflow:hidden;
  background:var(--card2);}
.hffkopf{width:100%;display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:none;border:0;color:var(--fg);cursor:pointer;text-align:left;font:inherit;}
.hffkopf:hover{background:var(--raise2);}
.hffnr{font-size:11px;font-weight:800;color:var(--accent);}
.hfft{flex:1;min-width:0;font-size:12.5px;font-weight:700;display:flex;flex-direction:column;gap:1px;}
.hffs{font-size:11px;font-weight:400;color:var(--muted);}
.hffpfeil{color:var(--muted);font-size:11px;}
/* Der Originaltext bleibt so stehen, wie er im Handbuch steht — mit seinen
   Umbrüchen. Wer prüft, will die Vorlage sehen, nicht eine Nacherzählung. */
.hfftext{margin:0;padding:11px 13px;border-top:1px solid var(--border);
  font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
  max-height:340px;overflow:auto;color:var(--fg);opacity:.9;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.hffuss{padding:9px 13px;border-top:1px solid var(--border);}

.hfquellen{margin-top:24px;}
.hfq{border:1px solid var(--border);border-radius:var(--r2);padding:11px 13px;margin-bottom:7px;
  background:var(--card2);}
.hfqkopf{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.hfqtitel{font-size:13px;font-weight:800;}
.hfqpill{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn);
  border-radius:var(--r1);padding:2px 7px;}
.hfqsub{font-size:12px;line-height:1.5;color:var(--fg);opacity:.85;margin-top:5px;}
.hfqfuss{font-size:11px;color:var(--muted);margin-top:5px;}

/* ══════════════════════════════════════════════════════════════════════════
   BEWEGUNG
   ══════════════════════════════════════════════════════════════════════════
   Ein Wechsel zwischen zwei Ansichten war bisher ein Schnitt. Die View
   Transitions API macht daraus eine Bewegung: Der Browser fotografiert den
   alten Zustand, lässt die Änderung geschehen und blendet zwischen beiden
   über — gleichnamige Elemente wandern dabei von ihrer alten an ihre neue
   Stelle.

   Zwei Grundsätze für alles hier unten:

   1. Kurz. Übergänge sollen den Zusammenhang zeigen, nicht vorgeführt werden.
      Was länger als eine Drittelsekunde dauert, wird beim zehnten Mal lästig.
   2. Abschaltbar. Wer „Bewegung reduzieren" eingestellt hat, bekommt gar
      keine — für manche ist Bewegung auf dem Bildschirm nicht Zierde,
      sondern Übelkeit. Am Ende dieses Blocks steht die Regel, die alles
      aushebelt. */

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.26s;
  animation-timing-function:cubic-bezier(.22,.9,.28,1);
}

/* Vorwärts: der neue Inhalt kommt von unten und aus der Tiefe. Rückwärts
   dasselbe seitenverkehrt — ohne diesen Unterschied fühlt sich „zurück" an
   wie ein weiterer Schritt vorwärts. */
@keyframes vtRein{ from{ opacity:0; transform:translateY(10px) scale(.985); } }
@keyframes vtRaus{ to{ opacity:0; transform:translateY(-6px) scale(1.008); } }
@keyframes vtReinZurueck{ from{ opacity:0; transform:translateY(-8px) scale(1.01); } }
@keyframes vtRausZurueck{ to{ opacity:0; transform:translateY(6px) scale(.99); } }

::view-transition-new(root){ animation-name:vtRein; }
::view-transition-old(root){ animation-name:vtRaus; }
html[data-uebergang="zurueck"]::view-transition-new(root){ animation-name:vtReinZurueck; }
html[data-uebergang="zurueck"]::view-transition-old(root){ animation-name:vtRausZurueck; }

/* Die Kopfzeile bleibt stehen, während darunter gewechselt wird. Sie ist der
   feste Punkt, an dem man sieht: dieselbe Anwendung, andere Ansicht. */
#topbar{ view-transition-name:kopfleiste; }
#mainNav{ view-transition-name:seitenleiste; }

/* Aus der Belegzeile wächst das Blatt.
   Beide tragen währenddessen denselben Namen — für den Browser ist es ein
   Element, das seine Gestalt ändert. Den Namen an der Zeile setzt und
   entfernt `benannterUebergang()`; hier steht nur die Zielseite. */
.pfblatt{ view-transition-name:blattmorph; }
::view-transition-old(blattmorph),
::view-transition-new(blattmorph){
  animation-duration:.32s;
  animation-timing-function:cubic-bezier(.2,.85,.25,1);
  /* Höhe mitwachsen lassen statt den Inhalt zu stauchen: Eine Zeile ist
     flach, ein Blatt hoch — ohne das würde die Schrift kurz verzerrt. */
  height:100%;
  overflow:clip;
}

/* ── Beim Scrollen erscheinen ──────────────────────────────────────────────
   Bisher liefen die Einblendungen auf einem Zeitgeber: Alles startete beim
   Zeichnen, also auch das, was weit unterhalb des Bildrands lag — und war
   längst verpufft, wenn man dorthin scrollte. Scroll-getriebene Animationen
   hängen stattdessen am Scrollstand: Eine Karte steigt genau dann ein, wenn
   sie in Sicht kommt.

   Nur mit @supports: Wo der Browser es nicht kennt, bleiben die bisherigen
   Einblendungen, und niemand sieht einen Unterschied. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes einsteigen{
      from{ opacity:0; transform:translateY(14px); }
      to{ opacity:1; transform:none; }
    }
    .kikarte,.hffund,.hfq,.bdkachel,.blz,.pfzeile{
      animation:einsteigen linear both;
      animation-timeline:view();
      /* Die Bewegung ist vorbei, bevor das Element in der Mitte steht —
         sonst zappelt beim Scrollen der halbe Bildschirm. */
      animation-range:entry 0% entry 34%;
    }
    /* Lange Listen nicht einzeln beleben: Bei 549 Zeilen im Prüfbogen wäre
       jede eigene Bewegung Unruhe statt Führung. */
    .pfstrang.lang .pfzeile{ animation:none; }
  }
}

/* ── Rückmeldung unter dem Finger ─────────────────────────────────────────
   Ein Knopf, der beim Drücken nichts tut, fühlt sich kaputt an — besonders
   auf dem Tablet, wo es keinen Mauszeiger gibt, der vorher darüberfährt. */
.chip,.btn2,.btn-ghost,.kivor,.navlink,.blz,.kikarte,.pfreit{
  transition:transform .13s cubic-bezier(.2,.8,.2,1),
             background-color .14s, border-color .14s, box-shadow .16s;
}
.chip:active,.btn2:active,.btn-ghost:active,.kivor:active,.pfreit:active{
  transform:scale(.965);
}
.blz:active,.pfzeile.klick:active{ transform:scale(.995); }
.navlink:active{ transform:translateX(2px); }

/* Der Reiterwechsel im Prüfbogen: Der aktive Reiter bekommt einen
   mitwandernden Grund statt eines springenden. */
.pfreit.an{ view-transition-name:reiteraktiv; }

/* ── Warten als Formwandel, nicht als Spinner ─────────────────────────────
   Bisher stand beim Ansichtswechsel „Lädt …" mitten im leeren Feld. Das ist
   ehrlich, aber es zeigt nichts: Der Bildschirm springt von einem Wort auf
   eine volle Seite. Ein Gerüst in der Form dessen, was kommt, macht aus dem
   Sprung ein Ausfüllen — und der Übergang oben hat etwas, worauf er zielen
   kann.

   Die Zahlen zählen sich beim Erscheinen selbst hoch (`zahlenHochzaehlen`);
   dafür braucht es hier nichts. */
.warteform{display:flex;flex-direction:column;gap:14px;}
.warteform .wfleiste{height:34px;border-radius:var(--r2);}
.warteform .wfreihe{display:flex;gap:12px;flex-wrap:wrap;}
.warteform .wfkachel{flex:1 1 190px;height:104px;border-radius:var(--r3);}
.warteform .wfblock{height:220px;border-radius:var(--r3);}
.warteform>*,.warteform .wfkachel{
  background:linear-gradient(100deg,var(--card2) 30%,var(--hover) 50%,var(--card2) 70%);
  background-size:220% 100%;
}
@media (prefers-reduced-motion: no-preference){
  .warteform>*,.warteform .wfkachel{ animation:bdwellen 1.4s linear infinite; }
}
.warteform .wfreihe{background:none;animation:none;}

/* ── Die eine Regel, die alles aushebelt ──────────────────────────────────
   Steht bewusst am Ende: Was danach noch käme, würde sie übergehen. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
  .chip:active,.btn2:active,.btn-ghost:active,.kivor:active,
  .pfreit:active,.blz:active,.navlink:active{ transform:none; }
}

/* ── Protokoll ────────────────────────────────────────────────────────────
   Eine dichte Liste: Wer hier sucht, überfliegt hunderte Zeilen und hält bei
   einer an. Deshalb feste Spalten, ruhige Farben und Einzelheiten erst auf
   Klick — was immer sichtbar ist, muss auf einen Blick erfassbar sein. */
.prreiter{display:flex;gap:6px;margin-bottom:14px;}
.prleiste{flex-wrap:wrap;gap:10px;align-items:flex-end;}
.prliste{border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;}
.przeile{display:grid;grid-template-columns:78px minmax(120px,1fr) minmax(150px,1.4fr) 52px 46px 68px;
  gap:10px;align-items:center;padding:7px 12px;border-bottom:1px solid var(--border);
  font-size:12.5px;cursor:pointer;transition:background-color .12s;}
.przeile:last-of-type{border-bottom:0;}
.przeile:hover{background:var(--raise2);}
.przeile.fehler{background:color-mix(in srgb,var(--danger) 7%,transparent);}
.przeile.klick{grid-template-columns:minmax(140px,1fr) minmax(160px,1.2fr) auto;}
.pruhr{display:flex;flex-direction:column;color:var(--muted);font-size:10.5px;
  font-variant-numeric:tabular-nums;}
.pruhr b{font-size:12px;color:var(--fg);font-weight:700;}
.prwer{font-weight:700;display:flex;align-items:center;gap:6px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prpill{font-size:9px;font-weight:800;letter-spacing:.06em;background:var(--accent);
  color:var(--accent-fg);border-radius:var(--r1);padding:1px 5px;flex:none;}
.prwas{color:var(--fg);opacity:.9;display:flex;align-items:center;gap:8px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prkunde{font-size:10.5px;color:var(--muted);background:var(--card2);
  border-radius:var(--r1);padding:1px 6px;flex:none;}
.prmeth{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.04em;}
.prstatus{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--muted);}
.prstatus.fehler{color:var(--danger);font-weight:800;}
.prdauer{text-align:right;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;}
/* Die Einzelheiten: alles, was man zum Nachvollziehen braucht, aber nicht
   ständig sehen will. */
.prdetail{padding:9px 12px 11px;background:var(--card2);border-bottom:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:8px 22px;}
.prd{display:flex;flex-direction:column;gap:2px;min-width:0;}
.prd span{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.prd code{font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all;}

.praend{display:flex;flex-direction:column;gap:8px;}
.praeintrag{border:1px solid var(--border);border-radius:var(--r2);padding:11px 14px;
  background:var(--card2);cursor:pointer;transition:border-color .14s;}
.praeintrag:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));}
.prakopf{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.pradatum{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;}
.pratitel{font-size:13px;font-weight:800;flex:1;min-width:0;}
.prapill{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  border-radius:var(--r1);padding:2px 7px;flex:none;}
.prapill.db{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);}
.prapill.app{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok);}
.pratext{margin-top:9px;font-size:12.5px;line-height:1.6;white-space:pre-wrap;}
.praquelle{margin-top:8px;font-size:10.5px;color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}

/* ── Deuten auf Wunsch ────────────────────────────────────────────────────
   Eine Schaltfläche, die Geld kostet, soll sagen wie viel. */
.kideutung{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 15px;margin-bottom:14px;border-radius:var(--r2);
  background:var(--card2);border:1px solid var(--border);}
.kideutung.fertig{background:none;border-style:dashed;padding:8px 13px;}
.kidtext{flex:1;min-width:220px;display:flex;flex-direction:column;gap:3px;}
.kidtext b{font-size:13px;}
.kidtext span{font-size:12px;color:var(--muted);line-height:1.5;}
.kidok{font-size:12px;font-weight:700;color:var(--ok);}

/* ══════════════════════════════════════════════════════════════════════════
   ACHSEN UND RASTER
   ══════════════════════════════════════════════════════════════════════════
   Ein Balken ohne Skala ist eine Abbildung, kein Werkzeug: Man sieht, dass
   einer höher ist, aber nicht, wie hoch. Die Achse links und das Raster
   dahinter beantworten das, ohne den Blick vom Diagramm zu nehmen. */
.dg{display:grid;grid-template-columns:auto 1fr;gap:8px;}
.dgy{position:relative;width:38px;min-height:100%;}
.dgy span{position:absolute;right:0;transform:translateY(50%);
  font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap;line-height:1;}
.dgfeld{position:relative;min-width:0;}
/* Das Raster liegt HINTER den Balken. Darüber zerschnitte es sie optisch und
   machte die Höhen schwerer vergleichbar. */
.dgraster{position:absolute;inset:0;pointer-events:none;z-index:0;}
.dgraster i{position:absolute;left:0;right:0;height:1px;
  background:var(--border);opacity:.6;}
.dgraster i.null{opacity:1;background:color-mix(in srgb,var(--muted) 45%,transparent);}
.dgfeld>.awverlauf{position:relative;z-index:1;}

/* Die Fläche der Übersicht bekommt dieselbe Achse. */
.flaeche.mitachse{padding-left:42px;}
.flaeche.mitachse .dgy{position:absolute;left:0;top:6px;bottom:26px;}
.flaeche.mitachse .dgraster{top:6px;bottom:26px;left:42px;right:0;}

/* ── Tooltip ──────────────────────────────────────────────────────────────
   Der eingebaute `title`-Hinweis erscheint nach einer Sekunde an einer
   Stelle, die der Browser wählt. Für ein Diagramm, in dem man entlangfährt,
   ist er unbrauchbar. */
.dgtip{position:fixed;z-index:9000;pointer-events:none;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r2);
  padding:8px 11px;box-shadow:0 8px 26px rgba(0,0,0,.18);
  display:flex;flex-direction:column;gap:3px;min-width:132px;max-width:260px;}
/* ── `hidden` heißt versteckt. Ausnahmslos. ───────────────────────────────
   Der Browser bringt dafür die Regel `[hidden]{display:none}` mit — aber sie
   stammt aus dem User-Agent-Stylesheet und wird von JEDER eigenen Regel mit
   `display` geschlagen. Wer `.dgtip{display:flex}` schreibt, hat damit
   unbemerkt `hidden` außer Kraft gesetzt.

   Genau das ist passiert: Der Diagramm-Hinweis blieb stehen, was immer das
   Skript versuchte, weil `hidden = true` schlicht wirkungslos war. Gesucht
   wurde der Fehler entsprechend lange bei den Zuhörern — er saß im
   Stylesheet.

   Dieselbe Falle steckte im Prüfbogen: `.bonwrap` trägt `display:flex`, also
   blieb beim Wechsel auf das Register „Prüfbogen" der Bon einfach stehen.

   Deshalb hier einmal für alle, und mit `!important`: „versteckt" ist keine
   Gestaltungsfrage, über die eine spätere Regel abstimmen darf. */
[hidden]{display:none !important;}
.dgtip b{font-size:12px;font-weight:800;}
.dgtip span{display:flex;justify-content:space-between;gap:14px;
  font-size:11.5px;font-variant-numeric:tabular-nums;}
.dgtip i{font-style:normal;color:var(--muted);}
@media (prefers-reduced-motion:no-preference){
  .dgtip{animation:kpiauf .12s ease-out;}
}

/* ── Weitere Darstellungen ────────────────────────────────────────────────
   Eine gemeinsame Farbreihe für alle Diagramme, die Posten unterscheiden
   müssen. Nicht der Regenbogen: acht Abstufungen derselben Akzentfarbe plus
   zwei Kontraste — so bleibt eine Kachel ruhig, und die Reihenfolge ist
   trotzdem ablesbar. */
/* Die Reihe folgt den drei Kassenfarben und füllt dazwischen mit
   Abstufungen auf: Blau führt, Limette und Magenta setzen die Kontraste.
   Bewusst nicht acht gleichberechtigte Töne — dann sähe jede Kachel aus wie
   ein Farbkasten, und die Reihenfolge wäre nicht mehr ablesbar. */
.f0{--f:var(--marke);}
.f1{--f:var(--marke2);}
.f2{--f:color-mix(in srgb,var(--marke) 62%,var(--card));}
.f3{--f:var(--marke3);}
.f4{--f:color-mix(in srgb,var(--marke2) 66%,var(--card));}
.f5{--f:color-mix(in srgb,var(--marke) 34%,var(--card));}
.f6{--f:color-mix(in srgb,var(--marke3) 55%,var(--card));}
.f7{--f:color-mix(in srgb,var(--marke2) 38%,var(--card));}

/* Donut */
.dgdonut{display:flex;align-items:center;gap:16px;flex-wrap:wrap;height:100%;}
.dgdring{position:relative;flex:none;width:128px;height:128px;}
.dgdring svg{width:100%;height:100%;display:block;}
.dgd{fill:var(--f);cursor:pointer;transition:opacity .12s;}
.dgd:hover{opacity:.75;}
.dgdmitte{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;}
.dgdmitte b{font-size:16px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;}
.dgdmitte span{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.dgdlegende{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px;}
.dgleg{display:grid;grid-template-columns:10px 1fr auto auto;gap:8px;align-items:center;
  font-size:11.5px;cursor:pointer;padding:2px 4px;border-radius:var(--r1);}
.dgleg:hover{background:var(--raise2);}
.dgpunkt{width:9px;height:9px;border-radius:var(--r1);background:var(--f);}
.dgln{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dglp{color:var(--muted);font-variant-numeric:tabular-nums;}
.dglw{font-weight:700;font-variant-numeric:tabular-nums;}

/* Balken + Linie */
.dgkombi{grid-template-columns:auto 1fr auto;}
.dgkombi .dgy.rechts{order:3;}
.dgkombi .dgy.rechts span{right:auto;left:0;}
.dgline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;}
.dgline polyline{fill:none;stroke:var(--warn);stroke-width:2;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;}
.dglegende2{grid-column:1/-1;display:flex;gap:16px;justify-content:center;
  margin-top:6px;font-size:10.5px;color:var(--muted);}
.dglegende2 span{display:flex;align-items:center;gap:5px;}
.dglegende2 i{width:11px;height:9px;border-radius:var(--r1);background:var(--accent);}
.dglegende2 i.linie{height:2px;border-radius:var(--r1);background:var(--warn);}

/* Baumkarte */
.dgtree{position:relative;width:100%;height:100%;min-height:150px;}
.dgtk{position:absolute;background:var(--f);border:1px solid var(--card);
  border-radius:var(--r1);overflow:hidden;padding:5px 7px;cursor:pointer;
  display:flex;flex-direction:column;gap:1px;transition:filter .12s;}
.dgtk:hover{filter:brightness(1.15);}
.dgtk b{font-size:10.5px;font-weight:700;color:var(--accent-fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;mix-blend-mode:luminosity;}
.dgtk span{font-size:10px;color:var(--accent-fg);opacity:.85;
  font-variant-numeric:tabular-nums;mix-blend-mode:luminosity;}

/* Kennzahlkarte */
.dgkennzahl{position:relative;display:flex;flex-direction:column;
  justify-content:center;height:100%;gap:3px;padding-bottom:22px;}
.dgkennzahl b{font-size:30px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;}
.dgkennzahl .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.dgspark{position:absolute;left:0;right:0;bottom:20px;height:38px;width:100%;opacity:.5;}
.dgspark polyline{fill:none;stroke:var(--accent);stroke-width:2;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;}
.dgwandel{position:absolute;bottom:0;left:0;font-size:11px;font-weight:700;
  display:flex;align-items:baseline;gap:6px;}
.dgwandel.auf{color:var(--ok);} .dgwandel.ab{color:var(--danger);}
.dgwandel i{font-style:normal;font-weight:400;color:var(--muted);font-size:10px;}

/* ── Kreuzfilter ──────────────────────────────────────────────────────────
   Ein Filter, den man nicht sieht, ist die sicherste Art, jemanden über
   halbe Zahlen rätseln zu lassen. Deshalb liegt die Leiste über dem Board,
   in der Akzentfarbe, und jede Einschränkung trägt ihr eigenes ✕. */
.bdkreuz{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 13px;margin-bottom:12px;border-radius:var(--r2);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));}
.bdkl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);}
.bdkchip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r2);
  padding:4px 9px;cursor:pointer;transition:border-color .13s,transform .13s;}
.bdkchip:hover{border-color:var(--danger);}
.bdkchip:active{transform:scale(.96);}
.bdkchip i{font-style:normal;font-size:10px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;}
.bdkchip b{font-size:10px;color:var(--muted);}
.bdkchip:hover b{color:var(--danger);}
.bdkreuz .sub{font-size:11px;color:var(--muted);margin-left:auto;}
@media(max-width:700px){ .bdkreuz .sub{display:none;} }

/* ══════════════════════════════════════════════════════════════════════════
   AUFWERTUNG: SCHRIFT, TIEFE, LEERE ZUSTÄNDE
   ══════════════════════════════════════════════════════════════════════════
   Steht am Ende, damit es die gewachsenen Regeln darüber überschreibt, ohne
   dass jede einzeln angefasst werden musste. Was hier steht, ist bewusst
   wenig: ein Schriftsystem, drei Tiefenstufen und ein anständiger leerer
   Zustand — mehr braucht es nicht, damit eine Oberfläche zusammenhängt. */

body{font-family:var(--schrift);
  /* Zwei Feinheiten, die man einzeln nicht sieht und zusammen sofort:
     kein automatisches Vergrößern kleiner Schrift auf dem Telefon, und
     Ligaturen aus, weil sie in Artikelnamen wie „fi“ zusammenkleben. */
  -webkit-text-size-adjust:100%;font-variant-ligatures:none;}

/* ── Größenstufen ─────────────────────────────────────────────────────────
   Vorher gab es dreiundzwanzig verschiedene Schriftgrößen zwischen 9 und 34
   Pixeln — gewachsen, nicht gesetzt. Die Stufen unten fassen sie zusammen;
   entscheidend ist weniger die genaue Größe als der klare Abstand zwischen
   ihnen: Zwei Zeilen, die sich um einen halben Punkt unterscheiden, wirken
   wie ein Fehler, nicht wie eine Hierarchie. */
h1,h2,h3,.viewtitle,.bdtitel,.kititel,.pratitel,.hfqtitel{
  letter-spacing:-.02em;font-weight:800;}
.viewtitle{font-size:clamp(19px,1.5vw,23px);}
/* Große Zahlen tragen die Oberfläche — sie bekommen die engste Spur und die
   Ziffernbreite, damit Beträge untereinander stehen. */
.kpi b,.dgkennzahl b,.einwert .v,.dgdmitte b,.bdzahl .w{
  font-family:var(--schrift-zahl);letter-spacing:-.035em;
  font-variant-numeric:tabular-nums lining-nums;}

/* ── Tiefe ────────────────────────────────────────────────────────────────
   Drei Ebenen, mehr nicht: was aufliegt (Karten), was schwebt (Menüs,
   Hinweise) und was den Bildschirm übernimmt (Blätter, Dialoge). */
.card,.kikarte,.bdk,.hfq,.hffund,.przeile,.praeintrag,.kikosten{
  box-shadow:var(--s1),var(--kante);}
.dgtip,.kundenliste,.modal{box-shadow:var(--s2);}
.bonsheet,.pfblatt,.modal-bg>div{box-shadow:var(--s3);}

/* Mattes Glas in der Kopfleiste: Sie liegt über dem scrollenden Inhalt und
   soll das zeigen, statt ihn zu verdecken. Nur wo der Browser es kann —
   sonst bleibt die volle Deckung, und niemand vermisst etwas. */
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)){
  #topbar{background:color-mix(in srgb,var(--chrome) 78%,transparent);
    -webkit-backdrop-filter:saturate(1.6) blur(14px);
    backdrop-filter:saturate(1.6) blur(14px);}
  .modal-bg{background:color-mix(in srgb,var(--bg) 55%,transparent);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
}

/* Die Kachel hebt sich beim Überfahren an, statt nur die Farbe zu wechseln —
   das ist der Unterschied zwischen „anklickbar“ und „lebendig“. */
.bdk,.kikarte,.hfq{transition:box-shadow .18s cubic-bezier(.2,.8,.2,1),
  transform .18s cubic-bezier(.2,.8,.2,1),border-color .16s;}
.bdk:hover,.kikarte:hover{box-shadow:var(--s2),var(--kante);transform:translateY(-2px);}

/* ── Leere Zustände ───────────────────────────────────────────────────────
   „Keine Buchungen im Zeitraum“ war richtig und half niemandem: Es sagt, was
   fehlt, nicht was zu tun wäre. Ein leerer Bildschirm ist der Moment, in dem
   jemand am ehesten aufgibt — er verdient mehr Sorgfalt als ein voller. */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:34px 22px;text-align:center;color:var(--muted);
  font-size:13px;line-height:1.55;}
.empty::before{content:"";display:block;width:38px;height:38px;opacity:.5;
  border:2px dashed currentColor;border-radius:var(--r2);margin-bottom:3px;}
.empty.klein{padding:18px 12px;font-size:12px;}
.empty.klein::before{width:26px;height:26px;}
.empty b{color:var(--fg);font-size:14px;font-weight:800;}
/* Wo ein Vorschlag danebensteht, tritt das Symbol zurück – dann trägt der
   Text die Aussage. */
.empty:has(.chip)::before,.empty:has(button)::before{display:none;}
.empty .chip{margin-top:5px;}

/* ══════════════════════════════════════════════════════════════════════════
   FARBE UND VERLÄUFE
   ══════════════════════════════════════════════════════════════════════════
   Die Oberfläche war korrekt und leblos: vierzehn graue Rechtecke, in denen
   der Tagesumsatz genauso viel Aufmerksamkeit bekam wie der Kartenanteil.
   Das ist die Anmutung eines Buchhaltungsprogramms — und für ein Werkzeug,
   das jemand morgens vor dem Service aufschlägt, die falsche.

   Was hier passiert, ist kein Anstrich: Es sind drei Entscheidungen.

   1. Der Grund wird warm. Ein Hauch Messing im Weiß, statt Blaugrau.
   2. Es gibt eine Hauptzahl. Die erste Kachel trägt den vollen Verlauf und
      helle Schrift; alles Übrige ordnet sich ihr unter.
   3. Flächen bekommen Tiefe durch Licht, nicht durch Rahmen — Verläufe
      laufen diagonal, weil senkrechte nach Werkzeugleiste aussehen.

   Sparsam bleibt es trotzdem: EINE Farbfamilie (Messing über Bernstein bis
   Kupfer), keine zweite. Bunt wäre der andere Fehler. */

:root{
  /* Die Hauptkachel im Markenblau — aber nicht im reinen: Weiße Schrift auf
     #0090d8 käme auf 3,5:1 und wäre ausgerechnet dort schwach, wo die
     wichtigste Zahl des Bildschirms steht. Der Verlauf beginnt deshalb bei
     #0082c6 (4,2:1) und wird nach unten tiefer; das reine Markenblau liegt
     als Lichtstreif darüber. */
  --grad-held:linear-gradient(138deg,#007ab9 0%,#00679e 45%,#004d73 100%);
  --grad-warm:linear-gradient(155deg,#ffffff 0%,#f3f7fb 100%);
  --grad-glanz:linear-gradient(135deg,
    color-mix(in srgb,var(--marke) 20%,transparent) 0%,
    transparent 44%);
  /* Der Schimmer über der Hauptkachel: ein Lichtstreif, wie er über poliertem
     Metall steht. Ohne ihn wirkt der Verlauf flach aufgedruckt. */
  --grad-streif:linear-gradient(112deg,transparent 30%,
    rgba(255,255,255,.16) 46%,transparent 62%);
  --bg:#eef1f4;
  --card2:#e6ebf0;
  --raise2:#f2f6fa;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="hell"]){
    --grad-held:linear-gradient(138deg,#0a7db7 0%,#00699c 48%,#004f75 100%);
    --grad-warm:linear-gradient(155deg,#2b3239 0%,#242a30 100%);
    --bg:#1e2429;
    --card2:#1c2126;
    --raise2:#283037;
  }
}
:root[data-theme="dunkel"]{
  --grad-held:linear-gradient(138deg,#0a7db7 0%,#00699c 48%,#004f75 100%);
  --grad-warm:linear-gradient(155deg,#2b3239 0%,#242a30 100%);
  --bg:#1e2429; --card2:#1c2126; --raise2:#283037;
}

/* ── Die Hauptzahl ────────────────────────────────────────────────────────
   Sie trägt Farbe, alles andere trägt sie nicht. Genau darin liegt die
   Wirkung: Ein Bildschirm, auf dem alles hervorgehoben ist, hebt nichts
   hervor. */
.kpi.held{
  background:var(--grad-held);
  border-color:transparent;
  color:#fffdf6;
  box-shadow:var(--s2),inset 0 1px 0 rgba(255,255,255,.22);
  position:relative;overflow:hidden;
}
.kpi.held::after{content:"";position:absolute;inset:0;
  background:var(--grad-streif);pointer-events:none;}
.kpi.held .k{color:rgba(255,253,246,.82);}
.kpi.held .v{color:#fffdf6;text-shadow:0 1px 2px rgba(60,42,10,.24);}
.kpi.held .kfuss{color:rgba(255,253,246,.9);}
.kpi.held .kfuss.auf{color:#d6f5e2;} .kpi.held .kfuss.ab{color:#ffd9d3;}
.kpi.held .kpfeil{color:rgba(255,253,246,.7);}
.kpi.held:hover{box-shadow:var(--s3),inset 0 1px 0 rgba(255,255,255,.3);}

/* Die übrigen Kacheln: warmes Papier statt kaltem Grau, und in der oberen
   Ecke ein Hauch der Akzentfarbe — kaum sichtbar einzeln, spürbar über
   vierzehn Kacheln hinweg. */
.kpi:not(.held),.bdk,.kikarte{
  background:var(--grad-warm);
  position:relative;
}
/* Der Lichtschleier liegt hinter dem Inhalt, nicht davor.
   Vorher stand hier `.bdk>*{position:relative}`, damit der Inhalt über dem
   Schleier liegt. Das hatte eine Nebenwirkung, die zwei Tage lang wie ein
   ganz anderer Fehler aussah: `.bdgroesse` — der Anfasser zum Verbreitern
   der Kachel — ist ein direktes Kind und war `position:absolute` in der
   unteren Ecke. Die Regel überschrieb das, der Anfasser rutschte aus seiner
   Ecke in den Textfluss, und die Kachelbreite ließ sich nicht mehr ändern.

   `isolation:isolate` erreicht dasselbe ohne Kollateralschaden: Es macht die
   Kachel zum eigenen Stapelkontext, sodass ein z-index:0 am Schleier genügt,
   um ihn unter allem zu halten. Kein Kind muss dafür angefasst werden. */
.kpi:not(.held),.bdk,.kikarte{isolation:isolate;}
.kpi:not(.held)::before,.bdk::before,.kikarte::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  background:var(--grad-glanz);pointer-events:none;opacity:.55;}

/* ── Diagramme ───────────────────────────────────────────────────────────
   Balken in Vollton wirken gedruckt. Ein Verlauf von oben nach unten gibt
   ihnen Volumen — und weil er an der Spitze am hellsten ist, führt er den
   Blick genau dorthin, wo der Wert abzulesen ist. */
.awverlauf .vs i{background:linear-gradient(180deg,
  var(--marke) 0%, var(--accent) 64%,
  color-mix(in srgb,var(--accent) 78%,#000) 100%);}
.awbz .bb i{background:linear-gradient(90deg,var(--accent) 0%,var(--marke) 100%);}
.dgd{filter:saturate(1.05);}
.flaeche .fg1{stop-color:var(--messing);stop-opacity:.42;}
.flaeche .fg2{stop-color:var(--messing);stop-opacity:.03;}
.flaeche .fl{stroke:var(--accent);}

/* ── Kopfbereich ─────────────────────────────────────────────────────────
   Ein warmer Schein hinter der Kopfzeile, wie Licht über einer Theke. Er
   liegt hinter allem, bewegt sich nicht und ist so schwach, dass man ihn
   erst bemerkt, wenn er fehlt. */
body::before{content:"";position:fixed;inset:0 0 auto 0;height:320px;z-index:-1;
  background:
    radial-gradient(58% 100% at 14% 0%,
      color-mix(in srgb,var(--marke) 22%,transparent) 0%,transparent 68%),
    radial-gradient(44% 86% at 82% 0%,
      color-mix(in srgb,var(--marke2) 20%,transparent) 0%,transparent 70%),
    radial-gradient(26% 60% at 55% 0%,
      color-mix(in srgb,var(--marke3) 8%,transparent) 0%,transparent 72%);
  pointer-events:none;}

/* Knöpfe der Handlung: derselbe Verlauf wie die Hauptzahl, damit klar ist,
   dass beides zusammengehört. */
.btn2,.chip.an{background:var(--grad-held);border-color:transparent;color:#fffdf6;}
.btn2:hover{filter:brightness(1.07);}

/* ── Kacheln umordnen ─────────────────────────────────────────────────────
   Der Griff war sechzehn Pixel groß und saß in der Kachelecke — man musste
   ihn suchen und dann treffen. Jetzt zieht die ganze Kopfzeile; der Griff
   bleibt als Hinweis, dass hier etwas geht, und wird beim Überfahren
   deutlicher. */
.bdkopf,.kpikopf{cursor:grab;}
.bdkopf:active,.kpikopf:active{cursor:grabbing;}
/* Knöpfe im Kopf behalten ihren eigenen Zeiger: Sie tun etwas anderes. */
.bdkopf button:not(.bdgriff),.kpikopf button{cursor:pointer;}

.kpikopf{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.kpigriff{opacity:0;transition:opacity .15s;font-size:12px;color:var(--muted);
  letter-spacing:-1px;flex:none;}
.kpi:hover .kpigriff,.bdk:hover .bdgriff{opacity:.75;}
.kpi.held .kpigriff{color:rgba(255,255,255,.75);}

/* Die Kachel am Zeiger: sie folgt ihm wirklich, angehoben und leicht
   geneigt. Vorher blieb sie im Raster stehen und nur die Reihenfolge sprang —
   man sah nicht, dass man etwas in der Hand hat. */
.kpi.zieht,.bdk.zieht{opacity:.92;transform:scale(1.03) rotate(-.6deg);
  box-shadow:var(--s3);cursor:grabbing;}
/* Der Platzhalter zeigt, wo die Kachel landet. Ohne ihn zieht man ins
   Ungewisse und sieht das Ergebnis erst beim Loslassen. */
.kachelplatz{border:2px dashed color-mix(in srgb,var(--accent) 55%,var(--border));
  border-radius:var(--r3);background:color-mix(in srgb,var(--accent) 7%,transparent);
  min-height:120px;}
.kachelplatz.b1{grid-column:span 1;} .kachelplatz.b2{grid-column:span 2;}
.kachelplatz.b3{grid-column:span 3;} .kachelplatz.b4{grid-column:span 4;}
@media(max-width:1100px){ .kachelplatz.b3,.kachelplatz.b4{grid-column:span 2;} }
/* Während des Ziehens nichts markieren: Sonst färbt sich beim Überfahren die
   halbe Seite blau, weil der Zeiger eine Auswahl aufzieht. */
body.zieht-gerade{user-select:none;-webkit-user-select:none;cursor:grabbing;}
body.zieht-gerade .kpi:not(.zieht),body.zieht-gerade .bdk:not(.zieht){
  transition:transform .16s cubic-bezier(.2,.8,.2,1);}
@media (prefers-reduced-motion:reduce){
  .kpi.zieht,.bdk.zieht{transform:none;}
}

/* Filialwahl in der Kopfzeile — mit Etikett, damit sie nicht mit dem
   Kundenwähler daneben verwechselt wird. Beide sahen gleich aus, und bei
   einem Betrieb mit einer Filiale stand sogar zweimal derselbe Name da. */
.filialwahl{display:inline-flex;align-items:center;gap:7px;
  background:var(--grad-raise);border:1px solid var(--border);
  border-radius:var(--rr);padding:3px 5px 3px 12px;}
.filialwahl .fwk{font-size:10px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);}
.filialwahl select{border:0;background:none;font:inherit;font-weight:700;
  font-size:13px;color:var(--fg);padding:3px 4px;cursor:pointer;max-width:170px;}
.filialwahl select:focus{outline:none;}

/* ── Kontextleiste: Kunde und Filiale ────────────────────────────────────
   Die beiden sagen, WO man gerade ist — in wessen Betrieb und an welchem
   Standort. Das ist die wichtigste Angabe der ganzen Kopfzeile: Wer sie
   übersieht, liest fremde Zahlen für die eigenen.

   Vorher standen sie als zwei verschiedene Bauteile nebeneinander — ein
   Knopf und ein nacktes Auswahlfeld, unterschiedlich hoch, unterschiedlich
   rund, beide blass. Jetzt teilen sie eine Form und tragen beide ihr
   Etikett; unterschieden werden sie durch die Farbe, nicht durch die Bauart:
   Der Kunde führt, die Filiale ordnet sich unter. */
.kundenknopf,.filialwahl{
  display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 12px;border-radius:var(--rr);
  border:1px solid var(--border);background:var(--card);
  font:inherit;font-size:13px;color:var(--fg);
  box-shadow:var(--s1);
  transition:border-color .14s,box-shadow .14s,background .14s;}
.kundenknopf{cursor:pointer;}

/* Der Kunde trägt die Akzentfarbe — er ist der Kontext, in dem alles andere
   gelesen wird. Ein zurückhaltendes Feld an dieser Stelle wäre falsche
   Bescheidenheit. */
.kundenknopf{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--border));
  background:color-mix(in srgb,var(--accent) 8%,var(--card));}
.kundenknopf:hover{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,var(--card));
  box-shadow:var(--s2);}
.kundenknopf b{font-weight:800;letter-spacing:-.01em;}

/* Die Etiketten beider Felder sehen gleich aus — nur die Farbe trennt sie. */
.kundenknopf .kk,.filialwahl .fwk{
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding-right:8px;margin-right:0;
  border-right:1px solid color-mix(in srgb,var(--muted) 28%,transparent);}
.kundenknopf .kk{color:var(--accent);}
.filialwahl .fwk{color:var(--muted);}
.kundenknopf .kpfeil{color:var(--accent);font-size:9px;opacity:.8;}

.filialwahl:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  box-shadow:var(--s2);}
.filialwahl select{border:0;background:none;font:inherit;font-weight:700;
  font-size:13px;color:var(--fg);padding:0;cursor:pointer;max-width:170px;
  /* Der eigene Pfeil des Betriebssystems sieht auf jedem Gerät anders aus
     und passt zu nichts — deshalb ein eigener, wie beim Kundenwähler. */
  appearance:none;-webkit-appearance:none;
  padding-right:16px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 8px) 52%,calc(100% - 4px) 52%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;}
.filialwahl select:focus{outline:none;}
.kundenknopf:focus-visible,.filialwahl:focus-within{
  outline:2px solid var(--accent);outline-offset:2px;}

@media(max-width:640px){
  /* Auf dem Telefon zählt der Name, nicht das Etikett. */
  .kundenknopf .kk,.filialwahl .fwk{display:none;}
  .kundenknopf,.filialwahl{padding:0 10px;gap:6px;}
}

/* ── Sortiment ───────────────────────────────────────────────────────────
   Vier Register über dieselben Positionen. Die Tabellen übernehmen den
   Betrieb-Stil (.bttab), damit nicht zwei Tabellenarten nebeneinander
   stehen; eigen sind nur Brotkrume, Anteilsbalken und die Feldertafel. */

.soreiter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;}

.sokrume{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0 0 10px;
  font-size:13px;}
.sokrume .sopfeil{color:var(--muted);}
.sowahl{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 12px;}
.sowahl .sub{margin-right:2px;}

/* Der Anteilsbalken sitzt hinter der Zahl, nicht daneben: Die Spalte soll
   ihre Breite behalten, wenn sich der Anteil ändert. */
.sobalken{display:inline-block;width:46px;height:5px;border-radius:3px;
  background:var(--border);margin-right:6px;vertical-align:middle;overflow:hidden;}
.sobalken i{display:block;height:100%;background:var(--accent);border-radius:3px;}

.btzeile.klickbar{cursor:pointer;}
.btzeile.klickbar:hover{background:var(--hover);}
.btr.warn{color:var(--warn);font-weight:600;}

.sofelder{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
.sofeld{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--card);}
.sofkopf{display:flex;align-items:baseline;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--border);background:var(--bg);}
.sofkopf .sozahl{margin-left:auto;font-weight:700;color:var(--muted);}
.soliste{padding:6px 12px 12px;}
.sozeile{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:baseline;
  padding:4px 0;border-bottom:1px solid var(--border);font-size:13px;}
.sozeile:last-child{border-bottom:0;}
.sozeile b{font-variant-numeric:tabular-nums;}

/* ── Ziele ───────────────────────────────────────────────────────────────
   Der Balken trägt zwei Angaben: die Füllung ist das Ist, der senkrechte
   Strich ist der Stand, der nach Wochentagsgewicht heute fällig wäre. Ohne
   diese Marke sagt ein halb voller Balken am 20. eines Monats nichts. */

.zikopfzeile{display:flex;justify-content:flex-end;margin:0 0 12px;}
.ziform{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  border:1px solid var(--border);border-radius:10px;padding:12px;margin:0 0 14px;
  background:var(--card);}
.ziform label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);}
.ziform .sub{flex-basis:100%;}

.zigitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;}
.zikarte{border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--card);}
.zikarte.gut{border-color:color-mix(in srgb,var(--ok) 45%,transparent);}
.zikarte.verfehlt{border-color:color-mix(in srgb,var(--danger) 35%,transparent);}
.zikopf{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;}
.zikopf .linkbtn{margin-left:auto;}
.zizahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px;}
.zizahlen span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);}
.zizahlen b{font-size:15px;font-variant-numeric:tabular-nums;}

.zibalken{position:relative;height:10px;border-radius:5px;background:var(--bg);
  border:1px solid var(--border);overflow:hidden;margin-bottom:8px;}
.zibalken i{display:block;height:100%;background:var(--accent);}
.zibalken u{position:absolute;top:-2px;width:2px;height:14px;background:var(--fg);
  opacity:.65;text-decoration:none;}

.zifuss{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted);}
.zifuss .gut{color:var(--ok);font-weight:600;}
.zifuss .schlecht{color:var(--danger);font-weight:600;}
.zifuss .warn{color:var(--warn);}

/* ── Druckstil für Auswertungen ──────────────────────────────────────────
   Der PDF-Weg dieses Systems. Eine serverseitige PDF-Erzeugung hätte eine
   weitere Abhängigkeit gebraucht; der Browser kann es bereits, und was er
   druckt, ist genau das, was auf dem Schirm geprüft wurde.

   Gedruckt wird der Inhalt, nicht die Bedienung: Navigation, Reiter und
   Knöpfe fallen weg, Tabellen brechen nicht mitten in einer Zeile um, und
   Farbflächen werden erzwungen — ohne sie druckt ein Balkendiagramm weiß
   auf weiß. */

@media print{
  /*
   * Ein Bericht ist ein Blatt, kein Bildschirmabzug.
   *
   * Vorher stand hier eine Liste von Klassen, die beim Drucken verschwinden
   * sollten — Navigation, Kopfzeile, Register. Eine solche Liste ist immer
   * unvollständig: `.zeitleiste` stand darin, die Klasse heißt aber `.zrbar`;
   * die untere Menüleiste des schmalen Bildschirms fehlte ganz. Auf dem
   * Papier landeten dann Logo, Abmelden-Knopf, Zeitraumleiste und Menü.
   *
   * Umgekehrt ist es dicht: Trägt die Seite ein `.druckblatt`, wird alles
   * unsichtbar und nur dieses Blatt wieder sichtbar. Was künftig an Leisten
   * dazukommt, ist damit automatisch draußen, ohne dass jemand daran denken
   * muss.
   *
   * `visibility` statt `display`, weil `display:none` auf einem Vorfahren
   * auch das Blatt selbst verschwinden ließe — Sichtbarkeit lässt sich in
   * Kindern zurückholen, Anzeige nicht. Damit das Blatt nicht dort steht, wo
   * es am Bildschirm stand (mit leerem Raum darüber), wird es nach oben
   * gesetzt.
   *
   * Die Regel greift nur, wenn ein `.druckblatt` da ist. Ansichten ohne eines
   * drucken weiter wie bisher.
   */
  body:has(.druckblatt) *{ visibility:hidden; }
  body:has(.druckblatt) .druckblatt,
  body:has(.druckblatt) .druckblatt *{ visibility:visible; }
  body:has(.druckblatt) .druckblatt{
    position:absolute; top:0; left:0; right:0; width:100%;
    margin:0 !important; padding:0 !important;
  }

  body:not(:has(> .modal-bg)) .sidebar,
  body:not(:has(> .modal-bg)) .topbar,
  body:not(:has(> .modal-bg)) .zrbar,
  body:not(:has(> .modal-bg)) .tabbar,
  body:not(:has(> .modal-bg)) .navunten,
  body:not(:has(> .modal-bg)) .prreiter,
  body:not(:has(> .modal-bg)) .soreiter,
  body:not(:has(> .modal-bg)) .zikopfzeile,
  body:not(:has(> .modal-bg)) .ziform,
  body:not(:has(> .modal-bg)) .toolbar,
  body:not(:has(> .modal-bg)) .chip,
  body:not(:has(> .modal-bg)) .linkbtn{ display:none !important; }

  /*
   * Scrollrahmen auflösen — sonst druckt der Browser einen Bildschirm.
   *
   * Ab Tabletbreite ist die Anwendung ein festes Raster: `#app` bekommt
   * `height:100vh; overflow:hidden`, und `#content` scrollt darin. Für den
   * Bildschirm ist das richtig (die Navigation bleibt stehen). Auf dem Papier
   * ist es fatal: Ein Ausschnitt mit fester Höhe kann keine zweite Seite
   * bekommen, also druckte der Browser genau ein Blatt — und weil der Inhalt
   * am Anfang seines Scrollbereichs steht, war darauf fast nichts.
   *
   * Das war der zweite Grund, warum Drucken hier nie funktioniert hat; der
   * erste war ein `body>*{display:none}` ohne Bedingung. Beide fielen erst
   * am 18.08.2026 auf, als die Berichte einen Druckknopf bekamen.
   */
  html, body,
  body:not(:has(> .modal-bg)) #app,
  body:not(:has(> .modal-bg)) main,
  body:not(:has(> .modal-bg)) #content{
    height:auto !important; min-height:0 !important; max-height:none !important;
    overflow:visible !important;
  }
  body:not(:has(> .modal-bg)) #app{ display:block !important; }
  body:not(:has(> .modal-bg)) main{ display:block !important; }
  body:not(:has(> .modal-bg)) #content{
    margin:0 !important; padding:0 !important; max-width:none !important;
  }
  /* Auch die Tabellen selbst scrollen am Bildschirm waagerecht. */
  .brtabelle, .bttab, .sotab, .atbox{ overflow:visible !important; max-height:none !important; }

  /*
   * Feste Spalten statt `auto-fit`.
   *
   * Am Bildschirm zählt `repeat(auto-fit, minmax(96px,1fr))` selbst ab, wie
   * viele Spalten in die Breite passen. Auf dem Papier steht keine Breite
   * fest, an der es abzählen könnte — alle Spuren fielen zu einer zusammen,
   * und gedruckt wurde nur die Namensspalte. Die Zahl kommt deshalb als
   * `--kz` vom Zeichner, der sie ohnehin kennt.
   */
  .brtkopf.einfach, .brtz.einfach{
    grid-template-columns:minmax(38mm,2fr)
      repeat(var(--kz,3), minmax(0,1fr)) !important;
  }
  .brtkopf, .brtz{
    grid-template-columns:minmax(32mm,1.6fr)
      repeat(var(--spalten,1), minmax(0,1fr)) minmax(0,1fr);
  }
  /* Der Farbschleier hinter der Anwendung gehört nicht aufs Papier. */
  body::before, body::after, body.entered::before{ display:none !important; }

  .bttab, .zikarte, .sofeld, .panel{
    page-break-inside:avoid; break-inside:avoid;
    box-shadow:none !important;
  }
  .btzeile, .sozeile{ page-break-inside:avoid; break-inside:avoid; }
  h2, h3, .btzt{ page-break-after:avoid; break-after:avoid; }

  /* Ohne das drucken Balken und Anteilsflächen als weiße Kästen. */
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /*
   * Papier ist weiß — auch wenn der Bildschirm dunkel ist.
   *
   * Der dunkle Modus setzt --fg auf ein helles Grau. Hintergründe druckt kein
   * Browser mit, Text schon: Wer abends im dunklen Modus auf „Drucken" geht,
   * bekäme sonst ein weißes Blatt mit fast weißer Schrift. Deshalb werden
   * hier die hellen Werte erzwungen, unabhängig von Einstellung und
   * Systemvorgabe — die Regel steht in @media print und kann den Bildschirm
   * nicht beeinflussen.
   */
  :root, :root[data-theme="dunkel"], :root:not([data-theme="hell"]){
    --bg:#ffffff; --card:#ffffff; --card2:#ffffff; --raise:#ffffff;
    --raise2:#f7f8f9;
    --fg:#17191c; --muted:#5b6167; --border:#c9ced3;
    --accent:#005b87; --accent2:#00415f; --accent-fg:#ffffff;
    --ok:#3d6009; --warn:#8a6420; --danger:#a3453b;
    --grad-card:none; --grad-warm:none; --grad-held:none; --grad-glanz:none;
    --grad-streif:none;
    --s1:none; --s2:none; --s3:none; --kante:none;
  }
  body{ background:#fff !important; color:var(--fg) !important; }

  /* ── Der Berichtskopf ──
     Am Bildschirm nicht vorhanden, auf dem Papier die halbe Miete: Ein Blatt
     ohne Zeitraum und Datenstand ist in einem halben Jahr wertlos. */
  .brdruckkopf{ display:block !important; margin:0 0 8mm; }
  /* Der Z-Zähler ist eine Angabe, keine Bedienung — er bleibt. */
  .btznr{ display:block !important; }

  /* Wiederholte Zeilen und Blöcke sauber über die Seiten verteilen. */
  .brblock{ break-inside:auto; margin-bottom:8mm; }
  .brbt{ break-after:avoid; font-size:12pt; margin:0 0 2mm; }
  .brtabelle{ border-radius:0; overflow:visible !important; }
  /*
   * Nichts klebt mehr.
   *
   * Kopfzeile, Summenzeile und die erste Spalte sind am Bildschirm `sticky` —
   * sie bleiben beim Scrollen stehen. Ohne Scrollcontainer heftet sich eine
   * `bottom:0`-Zeile an den oberen Rand: Die Summe stand mitten in der
   * Kopfzeile, mit den Werten übereinander.
   */
  .brtkopf, .brtgesamt, .brtn, .brtecke, .btkopf, .sokopf{
    position:static !important;
  }
  .brtkopf{ break-after:avoid; }
  .brtz{ break-inside:avoid; }
  .brtn, .brtecke{ position:static !important; }
  .brtgesamt{ break-before:avoid; font-weight:750; }
  /* Die Tagesnavigation und die Knopfleiste gehören auf den Bildschirm. */
  .brvkopf, .brtagnav, .brzeitschild, .brvorlagen, .brgruppe{ display:none !important; }
  /* Der Hinweis unter der Tabelle lädt zum Klicken ein — auf Papier sinnlos. */
  .brtabelle + .hint{ display:none !important; }

  /* A4, nicht was der Drucker gerade für richtig hält: Ein Bericht, der auf
     einem Rechner anders umbricht als auf dem anderen, lässt sich nicht
     vergleichen. */
  @page{ size:A4 portrait; margin:16mm 14mm 18mm; }
}

/* ── Der Berichtskopf ──────────────────────────────────────────────────────
   Steht im Markup immer, ist aber nur auf dem Papier sichtbar: Am Bildschirm
   sagen Leiste, Kopfzeile und Uhr dasselbe, dort wäre er Wiederholung. */
.brdruckkopf{ display:none; }
.btznr{ font-size:12px; color:var(--muted); margin:0 0 8px;
  font-variant-numeric:tabular-nums; }
.brdruckkopf .bdkzeile{ display:flex; align-items:flex-start; gap:10mm;
  border-bottom:1.5pt solid var(--fg); padding-bottom:3mm; }
.brdruckkopf .bdktitel{ font-size:16pt; font-weight:750; line-height:1.15; }
.brdruckkopf .bdksub{ font-size:9pt; color:var(--muted); margin-top:1mm;
  max-width:120mm; }
.brdruckkopf .bdkmarke{ margin-left:auto; text-align:right; font-size:8.5pt;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; }
.brdruckkopf .bdkfelder{ display:flex; flex-wrap:wrap; gap:3mm 8mm;
  margin-top:3mm; font-size:8.5pt; }
.brdruckkopf .bdkfeld{ display:flex; flex-direction:column; gap:.5mm; }
.brdruckkopf .bdkfeld span{ color:var(--muted); text-transform:uppercase;
  letter-spacing:.05em; font-size:7pt; font-weight:700; }
.brdruckkopf .bdkfeld b{ font-weight:650; font-variant-numeric:tabular-nums; }

/* ── Auffälligkeiten und Note ────────────────────────────────────────────
   Die Begründung steht unter jeder Meldung, nicht in einem Aufklapper: Wer
   eine Warnung liest, muss ihren Maßstab sehen, ohne danach zu suchen. */

.zialarme{display:flex;flex-direction:column;gap:10px;}
.zialarm{border:1px solid var(--border);border-left-width:3px;border-radius:8px;
  padding:11px 13px;background:var(--card);}
.zialarm.wichtig{border-left-color:var(--danger);}
.zialarm.hinweis{border-left-color:var(--warn);}
.zakopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:5px;}
.zamarke{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:1px 6px;border-radius:4px;background:var(--bg);color:var(--muted);}
.zialarm.wichtig .zamarke{color:var(--danger);}
.zakopf .sub{margin-left:auto;}
.zatext{font-size:13px;color:var(--muted);line-height:1.5;}
.zazahlen{display:flex;flex-wrap:wrap;gap:12px;margin-top:7px;font-size:12.5px;
  font-variant-numeric:tabular-nums;}
.zazahlen i{font-style:normal;color:var(--muted);margin-right:3px;}

.zinote{display:flex;align-items:center;gap:16px;border:1px solid var(--border);
  border-radius:12px;padding:16px 20px;margin:0 0 14px;background:var(--card);}
.zinote.gut{border-color:color-mix(in srgb,var(--ok) 45%,transparent);}
.zinote.mittel{border-color:color-mix(in srgb,var(--warn) 45%,transparent);}
.zinote.schlecht{border-color:color-mix(in srgb,var(--danger) 45%,transparent);}
.zinzahl{font-size:44px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.zinzahl small{font-size:16px;font-weight:600;color:var(--muted);}
.zintext b{display:block;font-size:16px;text-transform:capitalize;}
.zikarte.mittel{border-color:color-mix(in srgb,var(--warn) 40%,transparent);}
.zikarte.schlecht{border-color:color-mix(in srgb,var(--danger) 35%,transparent);}
.zinsmall{margin-left:auto;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;}

/* Fußzeile unter gekappten Listen: Gesamtzahl und Nachladen.
   Eine Liste, die sich für vollständig ausgibt, ist schlimmer als gar keine. */
.atmehr{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin:8px 0 4px;padding-top:8px;border-top:1px solid var(--border);}
.atmehr .sub{margin-right:auto;}

/* ── Kellnerabrechnung ───────────────────────────────────────────────────
   Der Abgabebetrag steht groß und zuerst — er ist der einzige Grund, warum
   abends jemand diesen Zettel in die Hand nimmt. Alles andere ist Beleg
   dafür, wie er zustande kommt. */

.abgitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;}
.abkarte{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--card);}
.abkopf{display:flex;align-items:baseline;gap:8px;padding:10px 13px;
  border-bottom:1px solid var(--border);background:var(--bg);}
.abkopf .sub{margin-left:auto;font-size:11.5px;}

.abgeld{display:flex;align-items:baseline;gap:10px;padding:12px 13px;
  background:color-mix(in srgb,var(--accent) 8%,var(--card));
  border-bottom:1px solid var(--border);}
.abgeld span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);}
.abgeld b{margin-left:auto;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;}

.abzeilen,.abarten{padding:8px 13px 12px;}
.abarten{border-top:1px solid var(--border);}
.abarten>.sub{display:block;margin-bottom:5px;font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;}

/* Drei feste Spalten statt Flex mit auto-Rand.
   Mit Flex rutschte der Hinweis hinter den Betrag und brach dort um — „−
   Trinkgeld Karte" stand plötzlich dreizeilig. Ein Grid hält Bezeichnung,
   Betrag und Hinweis in ihren Bahnen, und die Beträge stehen untereinander
   auf der Stelle. */
.abz{display:grid;grid-template-columns:1fr auto minmax(0,84px);
  align-items:baseline;column-gap:8px;padding:3px 0;font-size:13px;}
.abz b{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}
.abz .absub{font-style:normal;font-size:10.5px;line-height:1.3;color:var(--muted);}
.abz.trennung{border-top:1px solid var(--border);margin-top:6px;padding-top:7px;}

/* Abzugsposten: das Minus steht im Text, nicht zusätzlich vor der Zahl. */
.abz.minus>span,.abz.minus>b{color:var(--danger);}

/* Ein Register, das gerade verschoben wird. */
.btreiter .pfreit{transition:transform .16s ease;touch-action:none;cursor:grab;}
.btreiter .pfreit.zieht{transition:none;cursor:grabbing;z-index:2;position:relative;
  box-shadow:0 6px 18px rgba(0,0,0,.18);}
@media (prefers-reduced-motion:reduce){ .btreiter .pfreit{transition:none;} }

.abwahl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;}
.abwahl .sub{margin-right:2px;}

/* Die Abschlusszeile der Abrechnungskette — dieselbe Zahl wie oben, aber am
   Ende der Rechnung. Wer die Kette von oben durchgeht, soll unten ankommen. */
.abz.summe{border-top:1px solid var(--border);margin-top:6px;padding-top:7px;
  font-weight:700;}
.abz.summe>b{font-size:14px;}
/* Barzahlungen in der Kassenliste hervorheben — sie sind die, um die es geht. */
.abz.bar>span::after{content:" · bar";color:var(--muted);font-size:11px;}

/* Anklickbare Zahlen in den Betriebstabellen.
   Unterstrichelt statt farbig: Die Spalte bleibt ruhig, aber es ist zu
   sehen, dass hinter der Zahl noch etwas liegt. */
.bttab .btlink{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:3px;text-decoration-color:var(--muted);}
.bttab .btlink:hover{text-decoration-color:var(--accent);color:var(--accent);}
.bttab .btlink:hover b{color:var(--accent);}

/* Die Positionsliste im Dialog.
   Feste Spalten für Datum und Zeit, damit die Zahlen untereinander stehen;
   Artikel und Grund bekommen den Rest. Ohne feste Breiten quetscht der
   längste Artikelname alle anderen Spalten zusammen. */
.rbtab{max-height:54vh;overflow:auto;margin-top:6px;
  border:1px solid var(--border);border-radius:8px;}
.rbtab .btkopf,.rbtab .btzeile{
  grid-template-columns:84px 46px minmax(120px,1.4fr) minmax(90px,1fr) minmax(70px,.8fr) 52px 78px;
  column-gap:10px;padding-inline:10px;}
/* Ist nach Grund oder Kraft gefiltert, fällt die jeweilige Spalte weg. */
.rbtab.ohnegrund .btkopf,.rbtab.ohnegrund .btzeile{
  grid-template-columns:84px 46px minmax(140px,2fr) minmax(80px,1fr) 52px 78px;}
.rbtab.ohnekraft .btkopf,.rbtab.ohnekraft .btzeile{
  grid-template-columns:84px 46px minmax(140px,2fr) minmax(90px,1fr) 52px 78px;}
.rbtab.ohnegrund.ohnekraft .btkopf,.rbtab.ohnegrund.ohnekraft .btzeile{
  grid-template-columns:84px 46px 1fr 52px 78px;}
.rbtab .btkopf{position:sticky;top:0;z-index:1;background:var(--card);}
.modal .rbtab .btzeile{font-size:12.5px;align-items:center;}
.rbtab .rbtag{font-variant-numeric:tabular-nums;white-space:nowrap;}
.rbtab .rbart{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Der Dialog darf breiter werden — sieben Spalten brauchen Platz. */
.modal:has(.rbtab){max-width:min(860px,94vw);width:100%;}

/* ── TSE-Prüfung ─────────────────────────────────────────────────────────
   Das Urteil steht als Satz da, nicht als Ampel: „zu prüfen" ohne die
   Angabe, was zu prüfen wäre, ist keine Hilfe. */
.tsurteil{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border:1px solid var(--border);border-left-width:3px;border-radius:8px;
  padding:11px 14px;margin:0 0 12px;background:var(--card);}
.tsurteil.gut{border-left-color:var(--ok);}
.tsurteil.warn{border-left-color:var(--warn);}
.tsurteil b{font-size:14px;}
.tsurteil.gut b{color:var(--ok);}
.tsurteil.warn b{color:var(--warn);}
.tsurteil span{flex:1 1 320px;font-size:13px;color:var(--muted);line-height:1.5;}

.tstab .btkopf,.tstab .btzeile{
  grid-template-columns:84px 66px 96px 88px minmax(74px,1fr) minmax(74px,1fr) 62px 66px;
  column-gap:10px;}
/* Ein Rücklauf, der sich nicht mit dem Versatz zwischen Kassen erklärt. */
.tstab .btzeile.auffaellig{background:color-mix(in srgb,var(--warn) 9%,transparent);}
.tstab .btzeile.auffaellig .btr:nth-last-child(2){font-weight:700;color:var(--warn);}

/* ── Zeitraum: ganze Monate, Quartale, Jahre ─────────────────────────────
   Die Schnellwahl darüber ist auf die Gegenwart gebaut („letzte 30 Tage").
   Hier steht der Kalender selbst zur Wahl — Jahr antippen, dann Monat. Was
   keine Daten hat, ist sichtbar, aber nicht anklickbar: Eine Lücke im
   Bestand ist eine Auskunft, kein Grund, den Knopf zu verstecken. */

.kalperioden{border-top:1px solid var(--border);padding-top:10px;
  display:flex;flex-direction:column;gap:6px;min-width:0;}

.kaljahre{display:flex;flex-wrap:wrap;gap:4px;}
.kaljahr{padding:3px 10px;border:1px solid var(--border);border-radius:13px;
  background:var(--card);font-size:12.5px;font-weight:650;cursor:pointer;
  font-variant-numeric:tabular-nums;}
.kaljahr:hover{border-color:var(--accent);color:var(--accent);}
.kaljahr.an{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);}

/* Drei Spalten, nicht sechs: In einer 158 px breiten Spalte bleiben sonst
   25 px je Knopf — „Sep" passt da nicht mehr hinein. */
.kalquartale{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;}
.kalmonatswahl{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;}
.kalperiode{padding:4px 1px;border:1px solid var(--border);border-radius:6px;
  background:var(--card);font-size:11.5px;cursor:pointer;text-align:center;
  min-width:0;overflow:hidden;}
.kalperiode:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.kalperiode.leer{opacity:.35;cursor:not-allowed;}

/* ── Hintergrundarbeit ───────────────────────────────────────────────────
   Unten links, klein, außerhalb des Arbeitsbereichs. Sie soll nicht stören,
   sondern da sein, wenn man hinsieht — und von selbst verschwinden, sobald
   nichts mehr läuft. Eine Anzeige, die immer da ist, liest nach zwei Tagen
   niemand mehr. */

.hgleiste{position:fixed;left:14px;bottom:14px;z-index:60;
  display:flex;flex-direction:column;gap:8px;
  width:min(280px,calc(100vw - 28px));pointer-events:none;}

.hgzeile{background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:9px 11px;box-shadow:0 6px 22px rgba(0,0,0,.14);
  animation:hgauf .28s cubic-bezier(.2,.7,.3,1);}
@keyframes hgauf{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .hgzeile{animation:none;} }

.hgkopf{display:flex;align-items:baseline;gap:7px;margin-bottom:6px;font-size:12.5px;}
.hgkopf b{font-weight:650;}
.hgzahl{margin-left:auto;color:var(--muted);font-size:11.5px;
  font-variant-numeric:tabular-nums;}

.hgpuls{width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:hgpuls 1.8s ease-in-out infinite;flex:none;align-self:center;}
@keyframes hgpuls{0%,100%{opacity:1;}50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){ .hgpuls{animation:none;} }
.hghaken{color:var(--ok);font-weight:700;flex:none;align-self:center;}

.hgbalken{height:5px;border-radius:3px;background:var(--bg);overflow:hidden;
  border:1px solid var(--border);}
.hgbalken i{display:block;height:100%;background:var(--accent);
  transition:width .5s cubic-bezier(.4,0,.2,1);}
@media (prefers-reduced-motion:reduce){ .hgbalken i{transition:none;} }

.hgfuss{display:flex;gap:8px;margin-top:5px;font-size:11px;color:var(--muted);}
.hgdetail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hgfehler{margin-left:auto;color:var(--warn);white-space:nowrap;}

.hgzeile.fertig{border-color:color-mix(in srgb,var(--ok) 45%,transparent);}

/* Im Druck hat eine Fortschrittsanzeige nichts verloren. */
@media print{ .hgleiste{display:none !important;} }

/* ── Das PDF-Fenster ──────────────────────────────────────────────────────
   Ein Bericht wird angesehen, bevor entschieden wird, was mit ihm geschieht.

   Das Blatt füllt fast den Bildschirm: Ein PDF im Briefformat in einem kleinen
   Kasten zwingt zum Zoomen, bevor man irgendetwas erkennt. Gezeigt wird es im
   eingebauten Betrachter des Browsers — kein nachgebauter, keine fremde
   Bibliothek. Was dort steht, ist genau die Datei, die auch heruntergeladen
   wird. */
.pdfblatt{
  width:min(1000px,94vw); height:min(92vh,1200px);
  display:flex; flex-direction:column;
  background:var(--card); border-radius:var(--r3);
  border:1px solid var(--border); box-shadow:var(--s3); overflow:hidden;
}
.pdfkopf{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background:var(--card2); flex:0 0 auto;
}
.pdftitel{ font-size:14px; font-weight:750; }
.pdfkopf .sub{ font-size:11.5px; }
.pdfkopf .chip{
  font-size:12px; font-weight:600; padding:5px 11px; cursor:pointer;
  color:var(--muted); background:var(--card); border:1px solid var(--border);
  border-radius:var(--r1);
}
.pdfkopf .chip:hover{ color:var(--fg); border-color:var(--accent); }
/* Grau hinterlegt wie ein Leuchttisch: Der weiße Bogen soll sich absetzen,
   sonst schwimmt er im hellen Design mit dem Fenster zusammen. */
.pdfrahmen{ flex:1 1 auto; width:100%; border:0; background:#525659; }
/* Rückfall für Browser ohne eingebauten PDF-Betrachter. */
.pdfnotfall{ flex:1 1 auto; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; padding:24px;
  color:var(--muted); font-size:13.5px; text-align:center; }
.pdfnotfall .chip{ font-size:13px; font-weight:600; padding:8px 16px;
  cursor:pointer; color:var(--accent-fg); background:var(--accent);
  border:1px solid var(--accent); border-radius:var(--r1); }

@media (max-width:720px){
  .pdfblatt{ width:100vw; height:100vh; border-radius:0; border:0; }
  .pdfkopf .pdftitel{ font-size:13px; }
}

/* ── Kennzeichnung des Build-Systems ───────────────────────────────────────
   Rahmen und Fähnchen, die nichts kosten.

   Die Vorgabe war ausdrücklich: auffällig genug, um es nie zu übersehen —
   und so gebaut, dass sich das FORMAT der Seite nicht ändert. Kein Balken,
   der eine Zeile Höhe frisst, kein Streifen, der Breite nimmt, keine Kachel,
   die etwas nach unten schiebt.

   Beide Elemente liegen deshalb in `position:fixed` über der Seite. Sie
   stehen außerhalb des Textflusses: Kein Kasten wird schmaler, keine Zeile
   rutscht, kein Knopf springt. Nachgemessen an zwei Bildschirmfotos —
   1.165 × 688 Pixel links des Fähnchens ohne einen einzigen Unterschied. */
#systemRahmen{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  border:4px solid #c2110c;
  /* Der Schein nach innen setzt den Rahmen vom Inhalt ab, ohne eine zweite
     Linie zu ziehen — auf hellem wie auf dunklem Grund. */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
}

/* Das Fähnchen.

   Senkrecht geschrieben, weil am Rand nur eine Handbreit Platz ist und ein
   waagerechtes Schild entweder in den Inhalt ragen oder winzig sein müsste.

   `pointer-events:auto` nur hier — der Rahmen bleibt durchlässig. Das
   Fähnchen fängt auf seinen 23 × 72 Pixeln Klicks ab; genau deshalb lässt es
   sich ziehen: Wo es stört, schiebt man es weg, statt es so klein zu machen,
   dass man es übersieht. */
#systemFahne{
  position:fixed; top:50%; right:0; z-index:9999;
  transform:translateY(-50%);
  pointer-events:auto; cursor:grab; touch-action:none;
  user-select:none; -webkit-user-select:none;
  writing-mode:vertical-rl; text-orientation:mixed;
  background:#c2110c; color:#fff;
  font:700 10px/1 var(--schrift, sans-serif);
  letter-spacing:.16em; text-transform:uppercase;
  padding:12px 4px 12px 3px;
  border-radius:6px 0 0 6px;
  box-shadow:-1px 0 6px rgba(0,0,0,.28);
  transition:box-shadow .15s ease;
}
#systemFahne[data-seite="links"]{ border-radius:0 6px 6px 0;
  box-shadow:1px 0 6px rgba(0,0,0,.28); }
#systemFahne:active{ cursor:grabbing; box-shadow:0 0 0 3px rgba(194,17,12,.3); }

/* Auf dem Papier hat beides nichts zu suchen: Ein ausgedruckter Bericht soll
   aussehen wie der aus dem Live-System, sonst taugt der Vergleich nicht. Dass
   er aus dem Build kommt, steht im Kopf des Blattes. */
@media print{ #systemRahmen, #systemFahne{ display:none !important; } }