/* 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:#edeef0; --card:#ffffff; --card2:#e7e9ec; --fg:#1d2124; --muted:#6e767c;
    --raise:#ffffff; --raise2:#f3f4f6;
    --chrome:#e5e7ea; --chrome2:#dcdfe3;
    --accent:#3c4650; --accent2:#2c343c; --accent-fg:#f7f9fa;
    --ok:#4e8f73; --ok-fg:#f4faf7; --warn:#b5893a; --danger:#c0574c;
    --border:#d3d7da; --hover:#e9ebee; --glass:rgba(29,33,36,.045);
    --messing:#9a8352;
    /* 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,#48535e 0%,#333c45 100%);
  }
  /* 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;
      --accent:#cbd4dc; --accent2:#aab5be; --accent-fg:#1d2227;
      --ok:#7fbf9f; --ok-fg:#0d1a14; --warn:#ddae63; --danger:#e08076;
      --border:#3a3f45; --hover:#333840; --glass:rgba(255,255,255,.05);
      --messing:#c2a85f;
      --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,#d7dfe6 0%,#bcc6cf 100%);
    }
  }
  :root[data-theme="dunkel"]{
    --bg:#23262a; --card:#2c3035; --card2:#212429; --fg:#eceef0; --muted:#a2aab2;
    --raise:#343940; --raise2:#2a2e33;
    --chrome:#1f2226; --chrome2:#1a1d20;
    --accent:#cbd4dc; --accent2:#aab5be; --accent-fg:#1d2227;
    --ok:#7fbf9f; --ok-fg:#0d1a14; --warn:#ddae63; --danger:#e08076;
    --border:#3a3f45; --hover:#333840; --glass:rgba(255,255,255,.05);
    --messing:#c2a85f;
    --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,#d7dfe6 0%,#bcc6cf 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:6px;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:18px;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:10px;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:10px;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:10px;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:10px;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;}
  .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:15px;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:999px;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:999px;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:9px;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:9px;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:15px;padding:18px 20px;}
  .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;}
  .kpi .v.small{font-size:22px;}
  /* 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:10px;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:9px;
    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:15px;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:999px;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:12px;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:12px;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:9px;}
  .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:999px;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:999px;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:12px;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:10px;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:10px;
    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:5px;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:13px;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:15px;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:999px;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:999px;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:11px;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:11px;
    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:12px;
    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:12px;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:12px;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:7px;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:9px;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:10px;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:9px;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:16px;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:13px;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:11px;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:999px;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:10px;}
  .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:12px;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:12px;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:11px;
    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:16px;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:18px;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:12px;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:12px;
    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:10px;}
  .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;}
  .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:10px;
    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:12px;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;}
  .awstart h2{margin:4px 0 2px;font-size:20px;}
  .awstart .sub{margin-bottom:18px;}
  .awgruppe{margin-bottom:22px;}
  .awgruppentitel{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);font-weight:800;margin-bottom:9px;}
  .awstartgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:9px;}
  .awstartgitter.klein{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));}
  .awstartkachel{display:flex;flex-direction:column;gap:3px;align-items:flex-start;
    padding:14px 15px;border-radius:13px;border:1px solid var(--border);
    background:var(--grad-card);color:var(--fg);text-align:left;min-height:56px;}
  .awstartkachel.breit{grid-column:1/-1;}
  .awstartkachel .k{font-size:15px;font-weight:750;letter-spacing:-.01em;}
  .awstartkachel .u{font-size:12px;color:var(--muted);}
  .awstartkachel:active{background:var(--hover);}
  .awvorlagen{display:flex;gap:6px;flex-wrap:wrap;}
  .awvorlage{padding:7px 13px;border-radius:999px;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:12px;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:9px;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:9px;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:8px;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:15px;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:5px;
    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:11px;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:9px;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:11px;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:12px;overflow:auto;padding:12px;}
  .plan-canvas{position:relative;min-height:120px;}
  .ptable{position:absolute;width:96px;height:96px;border-radius:14px;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:999px;
    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:8px;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:12px;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:9px;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:13px;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:11px;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:9px;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:5px;padding:1px 5px;margin-left:6px;}
  .sendbtn{flex:1;padding:14px;border:none;border-radius:12px;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:12px;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:8px;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:5px;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:15px;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:11px;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:15px;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:5px;background:var(--card2);overflow:hidden;}
  .sysbar i{display:block;height:100%;border-radius:5px;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:11px;}
  .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:3px;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:11px;padding:6px;}
  .syscols i{flex:1;background:var(--accent2);border-radius:2px;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:10px;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:5px;font-size:12px;color:var(--fg);}

  .sysseg{display:inline-flex;gap:3px;background:var(--card2);border-radius:10px;padding:3px;}
  .sysseg button{border:none;background:none;color:var(--muted);font-weight:700;font-size:12.5px;
    padding:6px 13px;border-radius:8px;}
  .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:6px;
    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:3px;background:var(--card2);margin-top:4px;overflow:hidden;}
  .sysanteil i{display:block;height:100%;background:var(--accent2);border-radius:3px;}

  /* Verbundene Geräte */
  .clver{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:7px;
    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:13px;
    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:13px;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:10px;}
    #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:16px 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:16px;}
    .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:12px;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{
    body>*{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:18px;}
  .modcard{border-radius:15px;}
  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:20px;
    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:12px;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:11px;
  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:18px;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:18px;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:999px;
  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:999px;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:11px;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:8px 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:3px 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:3px;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:13px;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:12px;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:11px;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:5px 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:12px;
  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:13px;
  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:5px;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:13px;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:12px;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:9px;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:10px;
  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:7px;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:5px;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:999px;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:16px;
    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:13px;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 .kw{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
    font-variant-numeric:tabular-nums;}
  .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:8px;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:999px;background:var(--glass);overflow:hidden;}
  .awbz .bb i{display:block;height:100%;border-radius:999px;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:5px 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%;}

  .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;}
  .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;
    stroke-dasharray:3000;stroke-dashoffset:3000;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;}
  .flaeche .fx{fill:var(--muted);font-size:19px;text-anchor:middle;}
  .flaeche .fmax{position:absolute;top:0;right:0;font-size:11.5px;color:var(--muted);}
  .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:3px;}
  .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:9px;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:9px;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;}
  }