/* Tablet-Rahmen der Landingpage POS (pos.html; Nutzer 13.10.2026, Zielbilder in dev/regeln/pos.md
   „Tablet-Layout POS“). Gilt nur, solange lp-tablet.js ihn eingeschaltet hat (html.lp-tablet-on, ab 992 px Breite):
   html.lp-tablet-each für ein Tablet je Rubrik (pos.html), html.lp-tablet-one für ein stehendes Tablet (Fassung v2,
   seit 14.10.2026 ungenutzt, Aufräumen nach dem Livegang), html.lp-tablet-hero für das Tablet im Hero. Bildschirm 1100 × 790, davon 22 px Statusleiste.
   Gerät neutral ohne Marke, quer: Alurand 3 px um eine glänzend schwarze Glasfront, Rahmen 24 px, Ecken 8 % der Höhe,
   Gehäusedicke unten, Tasten an der Oberkante, Kamera mit Linsenring, Statusleiste, Glanz über die ganze Glasfront,
   Schatten mit Kontaktschatten. Maße setzt lp-tablet.js als Variablen am Gerät (--dev-w, --dev-h, --dev-r, --scr-r,
   --bezel, --scr-scale). */

/* ---------- Ein Tablet je Rubrik (v3): ersetzt die Karte an ihrem Platz ---------- */
/* Einrasten macht lp-tablet.js (softSnap), nicht scroll-snap: das hielt die Seite am Ende hoher Rubriken fest */
html.lp-tablet-each .lp-tab-owned .bg-plate { display: none !important; }

/* ---------- Ein stehendes Tablet (v2): eine Fensterhöhe je Rubrik, Bühne fest am Fenster, Einrasten per softSnap ---------- */
html.lp-tablet-one .lp-scene.scene--pin { height: 100vh; }
html.lp-tablet-one .lp-scene .bg-plate { display: none !important; }
.lp-tab-stage {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  perspective: 1800px;
  transform: translate3d(0, var(--stage-y, 0px), 0);
}
html.lp-tablet-one .lp-tab-stage { display: block; }
.lp-tab-stage.is-off { visibility: hidden; }
.lp-tab-stage > .lp-tab-device {
  position: absolute;
  left: var(--dev-x);
  top: var(--dev-y);
}

/* ---------- Gerät ---------- */
.lp-tab-device {
  position: relative;
  flex: 0 0 auto;
  width: var(--dev-w);
  height: var(--dev-h);
  z-index: 1;
  pointer-events: none;
  transform-origin: 50% 58%;
  opacity: calc(var(--op, 0) * var(--fade, 1));
  transform:
    translate3d(var(--tx, 90px), var(--ty, 140px), 0)
    rotateX(var(--rx, 10deg))
    rotateZ(var(--rz, -3deg))
    scale(var(--sc, .78));
}
/* gelandet: gerade und ohne Transform, damit die Schrift scharf bleibt (keine Neigung zur Maus, Nutzer 13.10.2026) */
.lp-tab-device.is-landed {
  pointer-events: auto;
  transform: none;
}

/* Kontaktschatten direkt unter der Unterkante */
.lp-tab-floor {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -20px;
  height: 30px;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(15 23 42 / .42), rgb(15 23 42 / 0) 100%);
  filter: blur(5px);
}

/* Gehäuse: Alurand, oben heller, unten dunkler; Schatten 1,5-fach gegenüber der ersten Fassung */
.lp-tab-shell {
  position: absolute;
  inset: 0;
  border-radius: var(--dev-r, 56px);
  background: linear-gradient(180deg, #d5d9df 0%, #a7adb5 10%, #7d838c 45%, #5a6068 80%, #474c53 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .75),
    inset 0 -1px 0 rgb(0 0 0 / .35),
    0 0 0 .5px rgb(15 23 42 / .5),
    0 40px 80px -18px rgb(15 23 42 / .62),
    0 18px 36px -12px rgb(15 23 42 / .34);
}
/* Gehäusedicke unten: Metallkante, das Tablet wirkt leicht von oben gesehen */
.lp-tab-shell::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 12px;
  bottom: calc(-1 * 7px);
  z-index: -1;
  border-radius: var(--dev-r, 56px);
  background: linear-gradient(180deg, #2b2f35 0%, #3e434a 70%, #6f757e 90%, #4a4f56 96%, #2a2d32 100%);
}
/* Tasten an der Oberkante: Ein/Aus links, Lautstärke rechts */
.lp-tab-key {
  position: absolute;
  top: -3px;
  height: 8px;
  z-index: -1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #b9bec5 0%, #7d838c 60%, #5a6068 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55);
}
.lp-tab-key--power { left: 11%; width: 5.2%; }
.lp-tab-key--vol1 { right: 13%; width: 4.4%; }
.lp-tab-key--vol2 { right: 18.4%; width: 4.4%; }

/* Glasfront: glänzend schwarz, innerhalb des Alurands */
.lp-tab-glass {
  position: absolute;
  inset: 3px;
  overflow: hidden;
  border-radius: calc(var(--dev-r, 56px) - 3px);
  background: linear-gradient(180deg, #17191d 0%, #0b0c0f 45%, #060708 100%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .8);
}
/* Glanz auf dem schwarzen Rahmen (liegt unter dem Bildschirm, kräftiger) */
.lp-tab-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg,
    transparent 0 18%,
    rgb(255 255 255 / .17) 33%,
    rgb(255 255 255 / .07) 46%,
    transparent 58%);
}
.lp-tab-cam {
  position: absolute;
  top: calc((var(--bezel, 24px) - 3px) / 2 - 5px);
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #5a6f93 0 10%, #1b2638 28%, #0a0f18 52%, #030405 74%);
  box-shadow: 0 0 0 1.5px #1d2025, 0 0 0 2.5px rgb(255 255 255 / .07);
}
.lp-tab-screen {
  position: absolute;
  inset: calc(var(--bezel, 24px) - 3px);
  z-index: 1;
  overflow: hidden;
  border-radius: var(--scr-r, 24px);
  background: #000;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .7);
  isolation: isolate;
}
.lp-tab-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1100px;
  height: 790px;
  /* zoom statt transform: scale, sonst zeichnen Browser runde Rahmen mit Lücken an den Ecken und die Schrift weich */
  zoom: var(--scr-scale, 1);
  background: var(--cin-background, #f3f4f6);
}
/* Glanz über die ganze Glasfront: heller Streifen mit leicht dunklerem Rand (4 %), damit er auch auf Weiß zu sehen
   ist; Darkmode 6 % ohne Rand. Klicks gehen durch. Zum Prüfen ?glanz=N (Prozent) */
.lp-tab-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(118deg,
    transparent 0 21%,
    rgb(15 23 42 / var(--lp-glare-edge, .04)) 28%,
    rgb(255 255 255 / var(--lp-glare, .06)) 34%,
    rgb(255 255 255 / calc(var(--lp-glare, .06) * .42)) 46%,
    rgb(15 23 42 / calc(var(--lp-glare-edge, .04) * .5)) 53%,
    transparent 58%);
}
html[data-bs-theme="dark"] .lp-tab-glare { --lp-glare-edge: 0; }

/* Statusleiste im Bildschirm: Uhrzeit und Datum links, WLAN und Akku rechts, Farben wie die App */
.lp-tab-status {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22px;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--cin-foreground, #111827);
  background: var(--cin-background, #f3f4f6);
  user-select: none;
  transition: color .4s ease, background-color .4s ease;
}
/* Hero: Die Leiste folgt der sichtbaren Folie, die Folie Darkmode ist fest dunkel (Nutzer 14.10.2026: „oberer Balken
   auch schwarz“; die Kopie liegt im Shadow-DOM, daher am Merkmal der Folie); Farben wie --cin-foreground und
   --cin-background der dunklen App in pos-app.css. Bei dunkler Seite ist die Leiste über die Variablen ohnehin dunkel. */
.lp-tab-device--hero:has(.hp-slide.is-on[data-hero="darkmode"]) .lp-tab-status {
  color: #e6edf3;
  background: #0d1117;
}
.lp-tab-date { font-weight: 500; opacity: .72; }
.lp-tab-sys { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; }
.lp-tab-sys .bi-wifi { font-size: 14px; }
.lp-tab-sys .bi-battery-full { font-size: 17px; }

html[data-bs-theme="dark"] .lp-tab-floor { background: radial-gradient(50% 50% at 50% 50%, rgb(0 0 0 / .75), rgb(0 0 0 / 0) 100%); }
html[data-bs-theme="dark"] .lp-tab-shell {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .6),
    inset 0 -1px 0 rgb(0 0 0 / .4),
    0 0 0 .5px rgb(0 0 0 / .8),
    0 40px 80px -18px rgb(0 0 0 / .85),
    0 18px 36px -12px rgb(0 0 0 / .6);
}

/* Warenkorb-Kopf im Tablet: Bei 1100 px Bildschirmbreite bleiben dem Titel neben Mehr, Kasse und Alle löschen rund
   75 px, er brach dreizeilig um (Symbol, Wort, Zahl). Nutzer 14.10.2026: Zahl neben das Symbol, darunter „Warenkorb“.
   Nur Reihenfolge per flex, das Markup bleibt wie im Tool. Die Hero-Folien sind Kopien im Shadow-DOM (landing.js
   lädt dort alle Stylesheets), deshalb zusätzlich .hp-hero-canvas; deren Fläche ist immer 1100 oder 1180 px breit. */
:is(.lp-tab-canvas, .hp-hero-canvas) .kasse-cart > .card-header > h5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: .15rem;
}
:is(.lp-tab-canvas, .hp-hero-canvas) .kasse-cart > .card-header > h5 > .bi-cart3 { order: -3; }
:is(.lp-tab-canvas, .hp-hero-canvas) .kasse-cart > .card-header > h5 > .badge { order: -2; margin-left: 0 !important; }
:is(.lp-tab-canvas, .hp-hero-canvas) .kasse-cart > .card-header > h5::after { content: ""; order: -1; flex-basis: 100%; height: 0; }

/* ---------- Module als Bildschirm: unter der Statusleiste; im stehenden Tablet blendet der neue über dem alten ein ---------- */
.lp-tab-canvas > .lp-mod {
  position: absolute;
  left: 0;
  top: 22px;
  width: 100%;
  height: calc(100% - 22px);
  max-height: none;
  margin: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transform: none !important;
  filter: none !important;
  will-change: auto;
  border-radius: 0;
  box-shadow: none !important;
  pointer-events: none !important;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.lp-tab-canvas > .lp-mod.is-leaving {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: none;
}
.lp-tab-canvas > .lp-mod.is-screen {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
  transition: opacity .4s ease, visibility 0s;
}

/* ---------- Kurztext-Karten im stehenden Tablet: oben links, blenden mit dem Bildschirm über ---------- */
.lp-tab-copies { position: absolute; inset: 0; z-index: 2; }
.lp-tab-copies > .copy {
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.lp-tab-copies > .copy.is-screen {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease, visibility 0s;
}
.lp-tab-copies > .copy.is-screen.is-dialog,
.lp-tab-copies > .copy.is-dialog .hp-copy-close { opacity: 0; pointer-events: none; }

/* „i“-Knöpfe im stehenden Tablet: alle stehen rechts neben dem einen Tablet; ausgeblendete fangen keine Klicks ab */
html.lp-tablet-one .lp-tour-btn:not(.is-in) { visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
html.lp-tablet-one .lp-tour-btn.is-in { visibility: visible; transition: opacity .45s ease, visibility 0s; }

.lp-tab-stage.is-instant .lp-mod,
.lp-tab-stage.is-instant .copy { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .lp-tab-canvas > .lp-mod,
  .lp-tab-copies > .copy { transition: none !important; }
}

/* ---------- Hero (v3): dasselbe Tablet um die Folien (lp-tablet.js mountHero) ----------
   In Ruhe gerade (geneigt wurden die runden 1-px-Rahmen unruhig, Nutzer 13.10.2026), Maus verschiebt um ±8 px.
   Auftritt beim Laden: von rechts herein, aus leichter Drehung gerade (0,9 s), danach der Reflex.
   Links bündig in der Folienspalte (Nutzer 15.10.2026, ersetzt „mittig“): der Hero-Text rückt seit dem CRM-Hero an
   die Folien, mittig blieben 108 bis 142 px Abstand. */
.lp-hero-tab {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
.lp-tab-device.lp-tab-device--hero.is-landed { transform: translate(var(--hmx, 0px), var(--hmy, 0px)); }
/* Maus auf dem Tablet: es hebt sich (lp-tablet.js, 10 px), der Schatten wird tiefer und weicher, der Kontaktschatten
   bleibt am Boden und wird blasser und breiter */
.lp-tab-device--hero .lp-tab-shell { transition: box-shadow .3s ease; }
.lp-tab-device--hero .lp-tab-floor { transition: opacity .3s ease, transform .3s ease, filter .3s ease; }
.lp-tab-device--hero.is-hover .lp-tab-shell {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .75),
    inset 0 -1px 0 rgb(0 0 0 / .35),
    0 0 0 .5px rgb(15 23 42 / .5),
    0 60px 110px -22px rgb(15 23 42 / .52),
    0 28px 52px -16px rgb(15 23 42 / .3);
}
.lp-tab-device--hero.is-hover .lp-tab-floor { opacity: .55; transform: translateY(10px) scaleX(1.05); filter: blur(9px); }
html[data-bs-theme="dark"] .lp-tab-device--hero.is-hover .lp-tab-shell {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .6),
    inset 0 -1px 0 rgb(0 0 0 / .4),
    0 0 0 .5px rgb(0 0 0 / .8),
    0 60px 110px -22px rgb(0 0 0 / .8),
    0 28px 52px -16px rgb(0 0 0 / .55);
}
.lp-hero-tab.is-entering { animation: lp-hero-in .9s cubic-bezier(.33, 1, .68, 1) both; }
@keyframes lp-hero-in {
  from { transform: perspective(1600px) translateX(120px) rotateY(-14deg) rotateX(5deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* Folien im Bildschirm unter der Statusleiste; das Tablet bleibt, der Bildschirm blendet in 0,4 s über */
html.lp-tablet-hero .lp-tab-canvas > .hp-slides {
  position: absolute;
  left: 0;
  top: 22px;
  width: 1100px;
  height: 768px;
  max-width: none;
  margin: 0;
  grid-template: 100% / 100%;
}
html.lp-tablet-hero .lp-tab-canvas .hp-slide { height: 100%; transition: opacity .4s ease; }
html.lp-tablet-hero .lp-tab-canvas .hp-hero {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none !important;
}
/* Lichtreflex nach dem Auftritt: einmal diagonal über das Glas (2,5 s, Neigung 26°, höchstens 90 % deckend; Nutzer
   14.10.2026: „noch etwas schräger … etwas verlangsamen und nochmal 10% mehr Transparency“, dann „1,5 s noch immer viel
   zu schnell 2,5“; vorher 1,2 s, 18°, 100 %). Weiß allein bleibt auf der hellen Kasse
   unsichtbar; deshalb weißer Kern mit einem Hauch Marken-Blau (#8cbaf2 wie das Wasser im Hero der Startseite). Die
   leicht dunklen Ränder (6 %) sind seit 14.10.2026 entfernt (Nutzer: „an den beiden äußeren Rändern … ein dunkler
   Balken … entferne es komplett“), nach außen läuft der Streifen ganz durchsichtig aus. Blau seit 14.10.2026 auf ein Drittel (Nutzer: „zu viel Blau, sanfter“, 18 % auf 6 %) */
.lp-tab-sweep {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.lp-tab-sweep::before {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 38%;
  opacity: 0;
  background: linear-gradient(90deg,
    rgb(140 186 242 / 0) 0,
    rgb(140 186 242 / .06) 36%,
    rgb(255 255 255 / .55) 50%,
    rgb(140 186 242 / .06) 64%,
    rgb(140 186 242 / 0) 100%);
  transform: translateX(-110%) skewX(-26deg);
}
.lp-tab-device.is-sweep .lp-tab-sweep::before {
  animation: lp-tab-sweep var(--sweep-dur, 2.5s) cubic-bezier(.45, .05, .25, 1) var(--sweep-delay, .95s) both;
}
@keyframes lp-tab-sweep {
  0% { transform: translateX(-110%) skewX(-26deg); opacity: 0; }
  12% { opacity: .9; }
  88% { opacity: .9; }
  100% { transform: translateX(380%) skewX(-26deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-tab-device--hero .lp-tab-shell,
  .lp-tab-device--hero .lp-tab-floor { transition: none; }
  .lp-hero-tab.is-entering,
  .lp-tab-device.is-sweep .lp-tab-sweep::before { animation: none; }
  html.lp-tablet-hero .lp-tab-canvas .hp-slide { transition: none; }
}

/* ---------- Seitenleiste des Tools in den Tablets (pos-nav.js, Nutzer 14.10.2026; Stand POS 0.0.20-beta) ----------
   Sichtbar nur im Gerät: --lp-pos-nav erbt vom Gerät bis in die Hero-Kopien im Shadow-DOM; Handy und Karten unter
   992 px bleiben ohne Leiste. Seit 0.0.18-beta trägt die Leiste des Tools das CI von CIN Next: Fläche, Gruppen, Hover
   und aktiver Eintrag kommen aus bs-sidebars.css des CRM (lädt die Seite). Dessen verschachtelte Regeln für
   .sidebar .offcanvas-md gelten schon für .lp-pos-nav; die Regeln für #navigation (Symbolleiste, Beschriftungen, Logo)
   aus bs-sidebars.css und die Touch-Größen aus pos-app.css (Kopie von ../pos/public/css/pos.css) stehen hier für
   .lp-pos-nav, weil jede Rubrik ihre eigene Leiste hat. Breite ausgeklappt 15rem wie das Tool auf einem 1100 px
   breiten Gerät (bs-sidebars.css: clamp(15rem, 20vw, 19rem)), eingeklappt 5rem aus .sidebar.is-compact; Filiale,
   Einklapp-Knopf und Griff kommen unverändert aus pos-app.css. Bei Updates des Tools mit beiden Dateien abgleichen. */
.lp-tab-device { --lp-pos-nav: flex; }
.lp-pos-nav {
  display: var(--lp-pos-nav, none);
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.lp-pos-nav.sidebar:not(.is-compact) { flex-basis: 15rem; width: 15rem; min-width: 15rem; max-width: 15rem; }
.lp-pos-grip { display: var(--lp-pos-nav, none); position: relative; flex: 0 0 0; width: 0; z-index: 3; }
:is(.lp-tab-canvas > .lp-mod, .hp-hero-canvas > .hp-hero-module).lp-has-nav { display: flex; }
.lp-mod.lp-has-nav > .lp-app { flex: 1 1 auto; min-width: 0; }

/* aus pos-app.css (#navigation): größere Schrift, Symbole und Zeilen für Touch, der ganze Eintrag ist antippbar */
.lp-pos-nav { font-size: var(--pos-nav-font-size); }
.lp-pos-nav .sidebar-item-wrapper,
.lp-pos-nav .sidebar-group-toggle-wrapper > .btn-toggle {
  --bs-btn-font-size: var(--pos-nav-font-size);
  --bs-btn-line-height: 1.3;
  min-height: var(--pos-nav-item-height);
}
.lp-pos-nav .sidebar-item-wrapper {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  align-items: stretch;
  text-align: left;
}
.lp-pos-nav .sidebar-item-wrapper > a {
  color: inherit;
  min-height: var(--pos-nav-item-height);
  padding: .375rem .5rem;
}
.lp-pos-nav .sidebar-item-wrapper .bi,
.lp-pos-nav .sidebar-group-toggle-wrapper > .btn-toggle .bi {
  font-size: var(--pos-nav-icon-size);
  width: 1.75rem;
  text-align: center;
  flex-shrink: 0;
}
.lp-pos-nav .sidebar-group-nav .sidebar-item + .sidebar-item { margin-top: .125rem; }
.lp-pos-nav .sidebar-logo-full img { max-height: 4rem; }
.lp-pos-nav .offcanvas-footer {
  border-top: var(--bs-border-width) solid var(--bs-border-color);
  padding: var(--cin-spacing-sm);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* aus bs-sidebars.css (#navigation): Namen und Fußzeile schrumpfen weich auf 0, Logo wird klein, Punkte werden Quadrate */
.lp-pos-nav .sidebar-menu-label,
.lp-pos-nav .offcanvas-footer span {
  max-width: 14rem;
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .2s ease, opacity .16s ease, margin .2s ease, padding .2s ease;
}
.lp-pos-nav .pos-sidebar-version { font-size: .8125rem; font-variant-numeric: tabular-nums; }
.lp-pos-nav .pos-sidebar-version span { max-width: none; white-space: normal; }
.lp-pos-nav.is-compact .sidebar-header-controls {
  min-height: 5.25rem;
  flex-direction: column;
  gap: 0 !important;
  padding: .25rem;
}
.lp-pos-nav.is-compact .sidebar-logo-toggle {
  flex: 0 0 2.75rem !important;
  width: 100%;
  height: 2.75rem;
  padding: .25rem;
}
.lp-pos-nav.is-compact .sidebar-logo-full,
.lp-pos-nav.is-compact .sidebar-logo-full img { display: none !important; }
.lp-pos-nav.is-compact .sidebar-logo-compact { display: block !important; }
/* bs-sidebars.css verschachtelt unter #navigation, .sidebar: die Liste zählt mit dem Gewicht der ID, deshalb hier !important */
.lp-pos-nav.is-compact .navigation-groups { padding: .5rem !important; }
.lp-pos-nav.is-compact .sidebar-group-toggle-wrapper { justify-content: center; gap: 0 !important; }
.lp-pos-nav.is-compact .sidebar-group-toggle-wrapper > .btn-toggle,
.lp-pos-nav.is-compact .sidebar-item-wrapper {
  flex: 0 0 var(--pos-nav-item-height) !important;
  justify-content: center;
  width: var(--pos-nav-item-height) !important;
  height: var(--pos-nav-item-height);
  margin-left: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
}
.lp-pos-nav.is-compact .sidebar-item-wrapper > a {
  flex: 0 0 100% !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 0 !important;
}
.lp-pos-nav.is-compact .sidebar-group-nav .sidebar-item-wrapper { margin-right: auto !important; margin-left: auto !important; }
.lp-pos-nav.is-compact .sidebar-menu-label,
.lp-pos-nav.is-compact .offcanvas-footer span {
  max-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}
/* Gruppen-Pfeil fällt in der Symbolleiste weg (die Pfeil-Regel von bs-sidebars.css wiegt wie #navigation, daher !important) */
.lp-pos-nav.is-compact .sidebar-group-toggle-wrapper > .btn-toggle::after { content: none !important; }
.lp-pos-nav.is-compact .pos-sidebar-location,
.lp-pos-nav.is-compact .pos-sidebar-version { display: none; }
.lp-pos-nav.is-compact .pos-sidebar-collapse .bi { transform: rotate(180deg); }
/* Logo je Darstellung (pos-app.css), nach der Regel für das kleine Logo, damit sie gewinnt */
[data-bs-theme="light"] .lp-pos-nav .pos-logo-dark,
[data-bs-theme="dark"] .lp-pos-nav .pos-logo-light { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .lp-pos-nav .sidebar-menu-label,
  .lp-pos-nav .offcanvas-footer span { transition: none; }
}

/* Scrollleisten neben der Leiste (Messung 14.10.2026): Ohne Leiste rechnete die App mit 1100 px, eingeklappt bleiben
   1028, ausgeklappt 892. Die Spalten des Tools richten sich nach dem Fenster (col-xl ab 1200 px), nicht nach der Fläche;
   Passen statt Verstecken wie in landing.css:
   - Tabellen im Tablet mit engeren Zellen (seit 15.10.2026 .25rem statt .5rem links und rechts), sonst zu breit (Bonliste);
   - „Gegeben“ in den Zahlungen eines Bons darf vor „(Rückgeld …)“ umbrechen, die Beträge bleiben einzeilig (NBSP);
   - schmaler als 960 px (Leiste ausgeklappt) stehen die col-xl-Spalten untereinander wie im Tool unter 1200 px
     Fensterbreite, also wie auf einem echten 1100 px breiten Gerät. Kasse hat keine col-xl-Spalten. */
:is(.lp-tab-canvas > .lp-mod, .hp-hero-canvas > .hp-hero-module).lp-has-nav .table > :not(caption) > * > * {
  padding-left: .25rem;
  padding-right: .25rem;
}
:is(.lp-tab-canvas > .lp-mod, .hp-hero-canvas > .hp-hero-module).lp-has-nav .bons-payments td:nth-child(4) { white-space: normal !important; }
/* Nachmessung 15.10.2026 (POS 0.0.20-beta, Leiste eingeklappt 5rem statt 4.5rem): Die Bonliste lief bei langen
   Kundennamen über (abhängig von den Demo-Daten des Tages, auch in master), die Kommissionsliste um 6 px. Deshalb Zellen
   .25rem statt .35rem, der Kunde in der Bonliste bricht um statt abzuschneiden, eine Gutscheinnummer in den Zahlungen
   eines Bons darf an jeder Stelle umbrechen. */
:is(.lp-tab-canvas > .lp-mod, .hp-hero-canvas > .hp-hero-module).lp-has-nav .bons-customer-cell { max-width: none; white-space: normal; text-overflow: clip; }
:is(.lp-tab-canvas > .lp-mod, .hp-hero-canvas > .hp-hero-module).lp-has-nav .bons-payments td:first-child { overflow-wrap: anywhere; }
:is(.lp-tab-canvas > .lp-mod, .hp-hero-canvas > .hp-hero-module).lp-has-nav > .lp-app { container-name: lp-app; container-type: inline-size; }
@container lp-app (max-width: 960px) {
  .col-12[class*="col-xl-"] { flex: 0 0 auto; width: 100%; }
  .col-md-3[class*="col-xl-"] { flex: 0 0 auto; width: 25%; }
}