/* ================================================================
   APPINNOVO PORTAL - site.css
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800&display=swap');

:root {
    --ap-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ap-radius: 14px;
    --ap-radius-sm: 10px;
    --ap-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
    --ap-shadow-hover: 0 4px 20px rgba(0,0,0,0.10);
    --ap-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --ap-green: #00b894;
    --ap-green-hover: #00a381;
    --ap-blue: #4f6df5;
    --ap-blue-hover: #3d5bd9;
    --ap-red: #e74c5e;
    --ap-amber: #f0a500;
    --ap-surface: #ffffff;
    --ap-surface-hover: #f8fafb;
    --ap-surface-muted: #f1f3f5;
    --ap-border: rgba(0,0,0,0.06);
    --ap-text: #1a1a2e;
    --ap-text-muted: #6b7280;
}

[data-bs-theme="dark"] {
    --ap-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.3);
    --ap-shadow-hover: 0 4px 24px rgba(0,0,0,0.4);
    --ap-surface: #33353e;
    --ap-surface-hover: #3b3d46;
    --ap-surface-muted: #25272f;
    --ap-border: rgba(255,255,255,0.08);
    --ap-text: #e8eaed;
    --ap-text-muted: #8b8fa3;
}

body {
    font-family: var(--ap-font);
    background-color: #f5f6f8;
}

/* ================================================================
   GLOBAL DARK MODE FIXES
   ================================================================ */

[data-bs-theme="dark"] body {
    background-color: #2b2d35;
}

/* Navbar */
[data-bs-theme="dark"] .navbar-dark,
[data-bs-theme="dark"] .navbar.bg-dark {
    background-color: #0d0e14 !important;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Bootstrap Tables - comprehensive dark mode fix */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ap-text);
    --bs-table-border-color: rgba(255,255,255,0.06);
}

[data-bs-theme="dark"] .table thead,
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light th,
[data-bs-theme="dark"] .table-light td {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--ap-text-muted) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

[data-bs-theme="dark"] .table > tbody > tr {
    border-color: rgba(255,255,255,0.04);
}

[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table-warning td {
    background-color: rgba(240,165,0,0.1) !important;
    color: #f0a500 !important;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,0.02);
    color: var(--ap-text);
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255,0.04);
    color: var(--ap-text);
}

/* Cards */
[data-bs-theme="dark"] .card {
    background-color: var(--ap-surface);
    border-color: var(--ap-border);
}

[data-bs-theme="dark"] .card-header {
    background-color: rgba(255,255,255,0.02);
    border-color: var(--ap-border);
}

[data-bs-theme="dark"] .card-footer {
    background-color: rgba(255,255,255,0.02);
    border-color: var(--ap-border);
}

/* Form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: var(--ap-text);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: rgba(255,255,255,0.08);
    border-color: var(--ap-blue);
    color: var(--ap-text);
    box-shadow: 0 0 0 3px rgba(79,109,245,0.15);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--ap-text-muted);
}

[data-bs-theme="dark"] .input-group-text {
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: var(--ap-text-muted);
}

/* Buttons - outline variants for dark mode */
[data-bs-theme="dark"] .btn-outline-dark {
    color: var(--ap-text) !important;
    border-color: rgba(255,255,255,0.15) !important;
}
[data-bs-theme="dark"] .btn-outline-dark:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--ap-text-muted);
    border-color: rgba(255,255,255,0.12);
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: rgba(255,255,255,0.08);
    color: var(--ap-text);
    border-color: rgba(255,255,255,0.2);
}

[data-bs-theme="dark"] .btn-outline-danger {
    border-color: rgba(231,76,94,0.4);
}

[data-bs-theme="dark"] .btn-outline-warning {
    color: var(--ap-amber);
    border-color: rgba(240,165,0,0.4);
}
[data-bs-theme="dark"] .btn-outline-warning:hover {
    background-color: rgba(240,165,0,0.15);
    color: var(--ap-amber);
}

/* Badges */
[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: rgba(255,255,255,0.1) !important;
    color: var(--ap-text-muted);
}

/* Modals */
[data-bs-theme="dark"] .modal-content {
    background-color: #1e2028;
    border-color: rgba(255,255,255,0.06);
}

[data-bs-theme="dark"] .modal-header {
    border-color: rgba(255,255,255,0.06);
}

[data-bs-theme="dark"] .modal-footer {
    border-color: rgba(255,255,255,0.06);
}

/* Alerts */
[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(231,76,94,0.1);
    border-color: rgba(231,76,94,0.2);
    color: #f5929e;
}

/* Dropdowns */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #1e2028;
    border-color: rgba(255,255,255,0.08);
    color: var(--ap-text);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--ap-text);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: rgba(255,255,255,0.05);
    color: var(--ap-text);
}

[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active {
    background-color: var(--ap-blue);
    color: #fff;
}

/* Select options (native dropdown) */
[data-bs-theme="dark"] .form-select option {
    background-color: #1e2028;
    color: var(--ap-text);
}

/* Navbar dropdowns */
[data-bs-theme="dark"] .navbar .dropdown-menu {
    background-color: #1e2028;
}

[data-bs-theme="dark"] .navbar .dropdown-item {
    color: var(--ap-text);
}

[data-bs-theme="dark"] .navbar .dropdown-item:hover {
    background-color: rgba(255,255,255,0.06);
    color: #fff;
}

[data-bs-theme="dark"] .navbar .dropdown-header {
    color: var(--ap-text-muted);
}

[data-bs-theme="dark"] .navbar .dropdown-divider {
    border-color: rgba(255,255,255,0.08);
}

/* Tom Select (autocomplete dropdowns) */
[data-bs-theme="dark"] .ts-wrapper .ts-control {
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: var(--ap-text);
}

[data-bs-theme="dark"] .ts-wrapper .ts-control input {
    color: var(--ap-text);
}

[data-bs-theme="dark"] .ts-wrapper .ts-control input::placeholder {
    color: var(--ap-text-muted);
}

[data-bs-theme="dark"] .ts-dropdown {
    background-color: #1e2028;
    border-color: rgba(255,255,255,0.08);
    color: var(--ap-text);
}

[data-bs-theme="dark"] .ts-dropdown .option,
[data-bs-theme="dark"] .ts-dropdown .optgroup-header {
    color: var(--ap-text);
}

[data-bs-theme="dark"] .ts-dropdown .option:hover,
[data-bs-theme="dark"] .ts-dropdown .option.active {
    background-color: rgba(255,255,255,0.06);
    color: var(--ap-text);
}

[data-bs-theme="dark"] .ts-dropdown .option.selected {
    background-color: var(--ap-blue);
    color: #fff;
}

[data-bs-theme="dark"] .ts-wrapper.focus .ts-control {
    background-color: rgba(255,255,255,0.08);
    border-color: var(--ap-blue);
    box-shadow: 0 0 0 3px rgba(79,109,245,0.15);
}

[data-bs-theme="dark"] .ts-wrapper .ts-control .item {
    color: var(--ap-text);
}

[data-bs-theme="dark"] .ts-dropdown .no-results {
    color: var(--ap-text-muted);
}

/* Tom Select inside POS checkout */
[data-bs-theme="dark"] .pos-checkout .ts-wrapper .ts-control {
    background: var(--pos-checkout-input-bg);
    border-color: var(--pos-checkout-input-border);
    color: var(--pos-checkout-text);
}

[data-bs-theme="dark"] .pos-checkout .ts-wrapper .ts-control input {
    color: var(--pos-checkout-text);
}

[data-bs-theme="dark"] .pos-checkout .ts-wrapper.focus .ts-control {
    border-color: var(--pos-accent);
    box-shadow: 0 0 0 2px rgba(0,212,170,0.15);
}

/* Text helpers */
[data-bs-theme="dark"] .text-muted {
    color: var(--ap-text-muted) !important;
}

/* Table semantic variants */
[data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] .table-danger td { background-color: rgba(231,76,94,0.1) !important; color: #f5929e !important; }
[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-success td { background-color: rgba(0,184,148,0.1) !important; color: #5edfc6 !important; }
[data-bs-theme="dark"] .table-secondary,
[data-bs-theme="dark"] .table-secondary td { background-color: rgba(255,255,255,0.04) !important; color: var(--ap-text-muted) !important; }
[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-info td { background-color: rgba(13,202,240,0.1) !important; color: #6ee7f7 !important; }

/* List groups */
[data-bs-theme="dark"] .list-group-item { background-color: var(--ap-surface); color: var(--ap-text); border-color: var(--ap-border); }
[data-bs-theme="dark"] .list-group-item-action:hover { background-color: var(--ap-surface-hover); }

/* Alerts */
[data-bs-theme="dark"] .alert-warning { background-color: rgba(240,165,0,0.1); border-color: rgba(240,165,0,0.2); color: #f0c050; }
[data-bs-theme="dark"] .alert-success { background-color: rgba(0,184,148,0.1); border-color: rgba(0,184,148,0.2); color: #5edfc6; }
[data-bs-theme="dark"] .alert-info { background-color: rgba(13,202,240,0.1); border-color: rgba(13,202,240,0.2); color: #6ee7f7; }

/* bg-light / text-dark Override */
[data-bs-theme="dark"] .bg-light { background-color: rgba(255,255,255,0.05) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--ap-text) !important; }
/* AUSNAHME: Badges mit gelbem/cyanem Bootstrap-Hintergrund (bg-warning/bg-info) behalten diesen
   hellen Hintergrund auch im Darkmode — der .text-dark→hell-Override oben würde dort sonst weiße
   Schrift auf Gelb/Cyan erzeugen (unlesbar, z.B. "Online Beleg"-Pill im Warenkorb, "Wartend"-
   Status, "Nullbeleg"-Badge). Daher hier wieder dunkle Schrift erzwingen. */
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-info { color: #212529 !important; }
/* Auto-Submit-Overlay (Standortwahl) hat fest weißen Inline-Hintergrund — den .text-muted-Hinweis
   ("Anmelden…") im Dark-Mode dunkel halten, sonst hellgrau auf Weiß = unlesbar. */
[data-bs-theme="dark"] .auto-submit-overlay .text-muted { color: #6b7280 !important; }
/* Register-Card-Header erzwingt bg-white — im Dark-Mode auf dunkle Fläche kippen, damit der
   .text-muted-Untertitel wieder lesbar ist (sonst hellgrau auf Weiß). */
[data-bs-theme="dark"] .register-card .card-header.bg-white { background-color: var(--ap-surface) !important; }

/* Cards mit border-* — Text-Farben fixieren */
[data-bs-theme="dark"] .card .text-success { color: #5edfc6 !important; }
[data-bs-theme="dark"] .card .text-danger { color: #f5929e !important; }
[data-bs-theme="dark"] .card .text-info { color: #6ee7f7 !important; }
[data-bs-theme="dark"] .card .text-warning { color: #f0c050 !important; }
[data-bs-theme="dark"] .card .text-primary { color: #8ba0f8 !important; }

/* Pagination */
[data-bs-theme="dark"] .page-link { background-color: var(--ap-surface); color: var(--ap-text); border-color: var(--ap-border); }
[data-bs-theme="dark"] .page-item.active .page-link { background-color: var(--ap-blue); border-color: var(--ap-blue); }
[data-bs-theme="dark"] .page-item.disabled .page-link { background-color: rgba(255,255,255,0.03); color: var(--ap-text-muted); }

/* Form-check / switches */
[data-bs-theme="dark"] .form-check-label { color: var(--ap-text); }

/* Nav tabs/pills */
[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--ap-text-muted); }
[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: var(--ap-text); background-color: var(--ap-surface); border-color: var(--ap-border); }

/* Definition lists */
[data-bs-theme="dark"] dt { color: var(--ap-text-muted); }
[data-bs-theme="dark"] dd { color: var(--ap-text); }

/* Witz des Tages */
.card-witz { background-color: #fff9e6; border-color: #ffc107; }
[data-bs-theme="dark"] .card-witz { background-color: rgba(255,193,7,0.08); border-color: rgba(255,193,7,0.3); }
[data-bs-theme="dark"] .card-witz .card-text { color: var(--ap-text); }

/* ================================================================
   GENERAL COMPONENTS
   ================================================================ */

.card-stats {
    transition: transform var(--ap-transition);
}

.card-stats:hover {
    transform: translateY(-2px);
    box-shadow: var(--ap-shadow-hover);
}

.health-ok {
    color: var(--ap-green);
}

.health-error {
    color: var(--ap-red);
}

.badge-kin {
    font-family: 'DM Sans', monospace;
    font-size: 0.9em;
    font-weight: 600;
}

.login-container {
    max-width: 480px;
    margin: 80px auto;
}

[data-bs-theme="dark"] .login-container .card {
    background-color: var(--ap-surface);
    border-color: var(--ap-border);
    box-shadow: var(--ap-shadow);
}

.table-belege td {
    vertical-align: middle;
}

.qr-cell {
    max-width: 200px;
    word-break: break-all;
    font-size: 0.8em;
    font-family: monospace;
}

.navbar .nav-link.active {
    font-weight: 600;
}

/* Kopfzeile ueber sticky-top-Inhalte heben: die Navbar hat von Haus aus KEINEN
   eigenen Stapelkontext (kein position/z-index), Bootstraps .sticky-top setzt
   aber z-index:1020 (z.B. die Belegvorschau-Karte auf /Client/Belege). Ohne
   diese Regel klappt das Benutzer-Menue in der Kopfzeile (.dropdown-menu,
   z-index:1000) hinter einer sticky-top-Karte auf, sobald diese ueber dem
   Menue liegt. 1030 ist bewusst Bootstraps eigener .fixed-top-Wert fuer
   Navbars — sicher ueber sticky-top (1020), aber ausdruecklich UNTER
   Offcanvas (1045), Modal-Hintergrund/Warnbaendern (1050) und Modal (1055):
   die Kopfzeile darf sich nicht ueber Dialoge oder Bandhinweise legen. Gilt
   global, nicht nur im Tablet-Modus (dort stand die gleiche Anhebung schon
   lokal in _Layout.cshtml). */
.navbar {
    position: relative;
    z-index: 1030;
}

/* ================================================================
   BELEGVORSCHAU (Bon-Stil)
   ================================================================ */

.beleg-bon {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.85rem;
    padding: 1rem;
    background: #fffef8;
    line-height: 1.4;
}

.beleg-bon, #belegVorschau, #belegPrintInner,
.beleg-bon *, #belegVorschau *, #belegPrintInner * {
    font-family: 'Courier New', Courier, monospace !important;
    color: #000 !important;
}
.beleg-bon, #belegVorschau, #belegPrintInner {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
}
[data-bs-theme="dark"] .beleg-bon,
[data-bs-theme="dark"] .beleg-bon *,
[data-bs-theme="dark"] #belegVorschau,
[data-bs-theme="dark"] #belegVorschau * {
    color: #000 !important;
}
.bon-header { text-align: center; margin-bottom: 6px; }
.bon-firma { font-weight: 900; font-size: 15px; }
.bon-divider { border-top: 2px dashed #000; margin: 6px 0; }
.bon-divider-double { border-top: 3px double #000; margin: 6px 0; }
.bon-info { margin: 3px 0; }
.bon-positionen { margin: 3px 0; }
.bon-pos { margin-bottom: 4px; }
.bon-pos-name { font-weight: 900; }
.bon-summe { font-size: 15px; font-weight: 900; margin: 4px 0; }
.bon-zahlung { margin: 3px 0; }
.bon-mwst { margin: 3px 0; font-size: 12px; }
.bon-mwst-header { border-bottom: 1px solid #000; margin-bottom: 2px; padding-bottom: 2px; font-size: 12px; }
.bon-qr-data { font-size: 10px; word-break: break-all; display: block; background: #f5f5f0; padding: 4px; border-radius: 2px; }
.bon-zusatz { font-style: italic; font-size: 12px; }
.bon-card-receipt { font-size: 12px; }

.beleg-vorschau-card {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.beleg-row.table-active {
    background-color: #cfe2ff !important;
}

[data-bs-theme="dark"] .beleg-bon {
    background: #fff;
}

[data-bs-theme="dark"] .bon-qr-data {
    background: #16171d;
    color: #8b8fa3;
}

[data-bs-theme="dark"] .bon-divider { border-color: #3a3d48; }
[data-bs-theme="dark"] .bon-divider-double { border-color: #4a4d58; }
[data-bs-theme="dark"] .bon-mwst-header { border-color: #3a3d48; }

[data-bs-theme="dark"] .beleg-row.table-active {
    background-color: rgba(79,109,245,0.1) !important;
}

/* ================================================================
   API-SEITEN SIDEBAR
   ================================================================ */

.api-sidebar {
    width: 230px;
    min-height: calc(100vh - 80px);
    border-right: 1px solid #dee2e6;
    background: #fff;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

.api-sidebar-inner { padding: 1rem 0; }

.api-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: #495057;
    text-decoration: none;
    font-size: 0.875rem;
    border-left: 3px solid transparent;
    transition: background-color 0.15s, border-color 0.15s;
}

.api-nav-link:hover { background-color: #f0f4ff; color: var(--ap-blue); }
.api-nav-link.active { background-color: #e7f0ff; color: var(--ap-blue); font-weight: 600; border-left-color: var(--ap-blue); }
.api-nav-link i { width: 1.2em; text-align: center; flex-shrink: 0; }

.api-nav-group {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #adb5bd;
    padding: 0.75rem 1rem 0.25rem;
    margin-top: 0.25rem;
}

.api-content { min-width: 0; padding: 0 1rem; }

[data-bs-theme="dark"] .api-sidebar { background: var(--ap-surface-muted); border-color: var(--ap-border); }
[data-bs-theme="dark"] .api-nav-link { color: var(--ap-text-muted); }
[data-bs-theme="dark"] .api-nav-link:hover { background-color: rgba(79,109,245,0.06); color: var(--ap-blue); }
[data-bs-theme="dark"] .api-nav-link.active { background-color: rgba(79,109,245,0.1); color: var(--ap-blue); border-left-color: var(--ap-blue); }

/* ================================================================
   KASSE - POS TERMINAL
   ================================================================ */

/* POS Variables */
.pos {
    --pos-accent: #00d4aa;
    --pos-accent-hover: #00b894;
    --pos-accent-blue: #5b7fff;
    --pos-accent-red: #ff6b6b;
    --pos-accent-amber: #ffb347;
    --pos-checkout-bg: #f5f6f8;
    --pos-checkout-text: #212529;
    --pos-checkout-muted: rgba(0,0,0,0.4);
    --pos-checkout-border: rgba(0,0,0,0.08);
    --pos-checkout-input-bg: rgba(0,0,0,0.04);
    --pos-checkout-input-border: rgba(0,0,0,0.12);
    --pos-checkout-hover: rgba(0,0,0,0.08);
    --pos-tile-bg: var(--ap-surface);
    --pos-tile-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

[data-bs-theme="dark"] .pos {
    --pos-checkout-bg: #2b2d35;
    --pos-checkout-text: #e8eaed;
    --pos-checkout-muted: rgba(255,255,255,0.4);
    --pos-checkout-border: rgba(255,255,255,0.06);
    --pos-checkout-input-bg: rgba(255,255,255,0.06);
    --pos-checkout-input-border: rgba(255,255,255,0.1);
    --pos-checkout-hover: rgba(255,255,255,0.08);
    --pos-tile-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Entrance */
@keyframes posFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Terminal Layout */
body:has(.pos) { overflow: hidden; }
@media (max-width: 991.98px) { body:has(.pos) { overflow: auto; } }

.pos {
    display: flex;
    gap: 0;
    height: calc(100vh - 56px);
    margin: -1rem -0.75rem;
    font-family: var(--ap-font);
    overflow: hidden;
}

/* Layout swap */
.pos.pos-reversed { flex-direction: row-reverse; }
.pos.pos-reversed .pos-checkout { border-left: none; border-right: 2px solid var(--pos-accent); box-shadow: -4px 0 24px rgba(0,212,170,0.08); }

.pos-products {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1.25rem;
    animation: posFadeUp 0.35s ease-out;
}

.pos-checkout {
    width: 550px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--pos-checkout-bg);
    color: var(--pos-checkout-text);
    border-left: 2px solid var(--pos-accent);
    box-shadow: 4px 0 24px rgba(0,212,170,0.08);
    animation: posFadeUp 0.35s ease-out 0.06s both;
    transition: width 0.25s ease;
}
.pos-checkout.pos-checkout-compact { width: 440px; }

/* ---- Schnellaktionen Strip ---- */
.pos-quickactions {
    width: 52px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--pos-checkout-bg);
    border-left: 2px solid var(--pos-accent);
    transition: width 0.2s ease;
    overflow: hidden;
    z-index: 2;
}
.pos-quickactions.expanded { width: 210px; }

.pos-qa-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 9px;
    border-bottom: 1px solid var(--ap-border);
    min-height: 44px;
}
.pos-qa-toggle {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    background: var(--pos-accent);
    color: #fff;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.pos-qa-toggle:hover { background: var(--pos-accent-hover, #00b89e); }

.pos-qa-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pos-checkout-text, var(--ap-text));
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
}
.pos-quickactions.expanded .pos-qa-title { opacity: 1; }

.pos-qa-pin {
    margin-left: auto;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--ap-text-muted);
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.pos-quickactions.expanded .pos-qa-pin { opacity: 1; }
.pos-qa-pin:hover { background: var(--ap-surface-muted); }
.pos-qa-pin.active { color: var(--pos-accent); }

.pos-qa-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    flex: 1;
}
.pos-qa-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: none;
    background: transparent;
    color: var(--pos-checkout-text, var(--ap-text));
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.pos-qa-btn:hover { background: rgba(0,212,170,0.12); }
.pos-qa-bon-laden { position: relative; }
.pos-qa-bon-laden .parkBonBadge {
    position: absolute;
    top: 2px;
    left: 30px;
    font-size: 0.6rem;
    min-width: 16px;
    padding: 2px 5px;
    z-index: 1;
}
.pos-qa-btn i {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    color: var(--pos-accent);
}
.pos-qa-btn span:not(.parkBonBadge) {
    opacity: 0;
    transition: opacity 0.15s;
}
.pos-quickactions.expanded .pos-qa-header { padding: 8px 6px; }
.pos-quickactions.expanded .pos-qa-body { padding: 8px 6px; }
.pos-quickactions.expanded .pos-qa-btn { padding: 8px; }
.pos-quickactions.expanded .pos-qa-btn span:not(.parkBonBadge) { opacity: 1; }

.pos.pos-reversed .pos-quickactions {
    border-left: none;
    border-right: 2px solid var(--pos-accent);
}

/* ---- Search Bar ---- */
.pos-search {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.pos-search-field {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--ap-surface);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 0 1rem;
    gap: 0.6rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.pos-search-field:focus-within {
    border-color: var(--pos-accent);
    box-shadow: 0 0 0 3px rgba(0,212,170,0.12);
}

.pos-search-field i {
    color: var(--ap-text-muted);
    font-size: 1.1rem;
}

.pos-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.65rem 0;
    font-size: 0.95rem;
    color: var(--ap-text);
    outline: none;
    font-family: var(--ap-font);
}

.pos-search-input::placeholder {
    color: var(--ap-text-muted);
}

/* ---- Grid ---- */
.pos-grid-scroll {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

.pos-section { margin-bottom: 1.25rem; }
.pos-section-single { margin-bottom: 1rem; }

.pos-section-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ap-text);
    margin-bottom: 0.7rem;
    padding-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--ap-border);
}

.pos-section-label::after {
    content: '';
    flex: 1;
    height: 0;
}

.pos-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.65rem;
}

.pos-section-label-colored {
    border-radius: 10px 10px 0 0;
    padding: 0.35rem 0.75rem;
    border-bottom: none;
    margin-bottom: 0;
}

.pos-tiles-colored {
    border-radius: 0 0 14px 14px;
    padding: 0.75rem;
    margin-top: 0;
    border-top: none !important;
}

/* ---- „Heute aus" an der Kasse ----
   Gegenstueck zur Handheld-Darstellung (handheld-gastro.css: .art.ist-aus). Die Kachel wird
   blass und traegt ein rotes AUS, bleibt aber anklickbar: Steht in der Kueche doch noch eine
   Portion, soll sie verkauft werden koennen. Deshalb ausdruecklich KEIN pointer-events:none. */
.pos-tile.ist-aus,
.einfach-tile.ist-aus {
    opacity: .5;
}

.pos-tile .aus-badge,
.einfach-tile .aus-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 1px 6px;
    border-radius: 6px;
    background: #b91c1c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    pointer-events: none;   /* darf den Griff auf die Kachel nicht wegnehmen */
}

/* ---- Tile ---- */
.pos-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: 0.7rem 0.75rem;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-family: var(--ap-font);
    transition: transform 0.12s ease, box-shadow 0.18s ease;
    box-shadow: var(--pos-tile-shadow), 0 0 0 1px rgba(0,0,0,0.03);
    overflow: hidden;
    text-align: center;
    background: var(--pos-tile-bg);
    color: var(--ap-text);
}

.pos-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--pos-accent);
    border-radius: 14px 14px 0 0;
}

.pos-tile:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 28px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.03);
}

.pos-tile:active {
    transform: scale(0.96);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition-duration: 0.06s;
}

.pos-tile img {
    max-width: 40px;
    max-height: 40px;
    display: block;
    margin: 0 auto 4px;
}

.pos-tile-name {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

.pos-tile-price {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pos-accent);
    margin-top: 0;
    padding-top: 2px;
}

/* Tiles mit Custom-Farbe: Text immer lesbar */
.pos-tile[style] .pos-tile-price { color: currentColor; opacity: 0.75; }
.pos-tile[style]::before { background: currentColor; opacity: 0.2; }

/* Belegzahlung */
.pos-tile-belegzahlung {
    border: 2px dashed rgba(91,127,255,0.35) !important;
    background: rgba(91,127,255,0.03);
    color: var(--pos-accent-blue);
    box-shadow: none;
}

.pos-tile-belegzahlung::before { background: var(--pos-accent-blue); }

.pos-tile-belegzahlung .pos-tile-price {
    color: var(--pos-accent-blue);
    opacity: 0.5;
}

.pos-tile-belegzahlung:hover {
    border-color: var(--pos-accent-blue) !important;
    background: rgba(91,127,255,0.07);
    box-shadow: 0 4px 16px rgba(91,127,255,0.12);
}

/* ---- Checkout Panel ---- */
.pos-checkout-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--pos-checkout-border);
}

.pos-checkout-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pos-checkout-title i { color: var(--pos-checkout-text); }
/* Badge-Icons (Online-Beleg / E-Mail) im Warenkorb-Header NICHT die im Dark-Mode
   helle Checkout-Titel-Farbe erben lassen — sonst weißes QR-/Mail-Icon auf gelber
   bzw. blauer Pill. Icon erbt stattdessen die dunkle Badge-Eigenfarbe (.text-dark). */
.pos-checkout-title .badge i { color: inherit; }

.pos-checkout-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Cart */
.pos-cart {
    flex: 1;
    overflow-y: auto;
    min-height: 180px;
}
/* Tisch-Modus: die Positionsliste darf schrumpfen — Regeln in kasse-tisch.css
   (body.has-tisch-header), damit alles zum Tisch-Modus an einer Stelle steht. */

.pos-cart-table {
    width: 100%;
    border-collapse: collapse;
}

/* Cards-Container für Tablet- und Sunmi-Handheld-Cart. Standardmäßig versteckt;
   .pos-tablet / .pos-sunmi-Overrides (in Kasse/Index.cshtml) aktivieren ihn per
   display:flex. Diese Regel MUSS global laden, weil der Container seit
   c2dc49df immer im DOM steht — sonst wird er im Kiosk-/Vollmodus sichtbar
   und zeigt den Warenkorb doppelt über der pos-cart-table an. */
.pos-cart-cards { display: none; }

.pos-cart-table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pos-checkout-muted);
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--pos-checkout-border);
    position: sticky;
    top: 0;
    background: var(--pos-checkout-bg);
    z-index: 1;
}

.pos-cart-table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--pos-checkout-border);
    font-size: 0.95rem;
    vertical-align: middle;
    color: var(--pos-checkout-text);
}

.pos-cart-table .text-end { text-align: right; color: #212529; white-space: nowrap; }
[data-bs-theme="dark"] .pos-cart-table .text-end { color: #e8eaed; }
.pos-cart-table .text-center { text-align: center; }

.pos-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--pos-checkout-muted);
    opacity: 0.4;
    gap: 0.75rem;
}

.pos-cart-empty i { font-size: 2.5rem; }
.pos-cart-empty span { font-size: 0.85rem; font-weight: 500; }

/* Footer */
.pos-checkout-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--pos-checkout-border);
    background: rgba(0,0,0,0.03);
}
[data-bs-theme="dark"] .pos-checkout-footer {
    background: rgba(0,0,0,0.15);
}

/* Rabatt */
.pos-rabatt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    color: var(--pos-checkout-muted);
}

.pos-rabatt-input {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pos-rabatt-input input {
    width: 65px;
    text-align: right;
    background: var(--pos-checkout-input-bg);
    border: 1px solid var(--pos-checkout-input-border);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    color: var(--pos-checkout-text);
    outline: none;
    font-family: var(--ap-font);
}

.pos-rabatt-input input:focus {
    border-color: var(--pos-accent);
    box-shadow: 0 0 0 2px rgba(0,212,170,0.15);
}

.pos-rabatt-input > span {
    color: var(--pos-checkout-muted);
    font-weight: 600;
}

/* Total */
.pos-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,212,170,0.06);
    border: 1px solid rgba(0,212,170,0.12);
    border-radius: 14px;
    padding: 0.9rem 1.15rem;
    margin-bottom: 0.85rem;
}

.pos-total-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pos-checkout-text);
    opacity: 0.6;
}

.pos-total-amount {
    font-family: var(--ap-font);
    font-size: 2.4rem;
    font-weight: 800;
    color: #212529;
    letter-spacing: -1px;
    line-height: 1;
}
[data-bs-theme="dark"] .pos-total-amount { color: #e8eaed; }

/* Payment */
.pos-pay {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.pos-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: 12px;
    font-family: var(--ap-font);
    font-size: 1.05rem;
    font-weight: 700;
    min-height: 56px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #fff;
}

.pos-pay-bar {
    flex: 1;
    background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%);
    box-shadow: 0 4px 16px rgba(0,212,170,0.3);
}

.pos-pay-bar:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,212,170,0.4);
}

.pos-pay-bar:disabled { opacity: 0.2; box-shadow: none; cursor: default; }

.pos-pay-karte {
    flex: 1;
    background: linear-gradient(135deg, #5b7fff 0%, #4f6df5 100%);
    box-shadow: 0 4px 16px rgba(91,127,255,0.3);
}

.pos-pay-karte:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(91,127,255,0.4);
}

.pos-pay-karte:disabled { opacity: 0.2; box-shadow: none; cursor: default; }

.pos-pay-gemischt {
    flex: 1;
    background: linear-gradient(135deg, #ff9f43 0%, #ee5a24 100%);
    box-shadow: 0 4px 16px rgba(255,159,67,0.3);
}

.pos-pay-gemischt:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,159,67,0.4);
}

.pos-pay-gemischt:disabled { opacity: 0.2; box-shadow: none; cursor: default; }

.pos-pay-ueberweisung {
    flex: 1;
    background: linear-gradient(135deg, #8e44ad 0%, #6c3483 100%);
    box-shadow: 0 4px 16px rgba(142,68,173,0.3);
}

.pos-pay-ueberweisung:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(142,68,173,0.4);
}

.pos-pay-ueberweisung:disabled { opacity: 0.2; box-shadow: none; cursor: default; }

.pos-kiosk .pos-pay-ueberweisung { display: none !important; }
.pos-kiosk #btnUeberweisung { display: none !important; }

.pos-pay-clear {
    width: 56px;
    flex-shrink: 0;
    background: transparent;
    border: 2px solid #dc3545;
    color: #dc3545;
}

.pos-pay-clear:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* Retourgeld Numpad */
.retourgeld-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 320px;
    margin: 0 auto;
}

.retourgeld-numpad button {
    height: 72px;
    font-size: 2rem;
    font-weight: 700;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.retourgeld-numpad button:hover,
.retourgeld-numpad button:active {
    background: var(--bs-secondary-bg);
}

/* Euro-Schein Schnelltasten */
.euro-scheine {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 10px;
}

.euro-scheine button {
    flex: 1 1 auto;
    min-width: 56px;
    height: 52px;
    font-size: 1.1rem;
    font-weight: 700;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.euro-scheine button:hover,
.euro-scheine button:active {
    background: var(--bs-secondary-bg);
}

/* Nullbeleg */
.pos-nullbeleg-btn {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--pos-checkout-border);
    border-radius: 8px;
    color: var(--pos-checkout-muted);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.45rem;
    cursor: pointer;
    font-family: var(--ap-font);
    transition: all 0.15s ease;
}

.pos-nullbeleg-btn:hover {
    border-color: var(--pos-accent-amber);
    color: var(--pos-accent-amber);
}

/* ---- Checkout inner overrides ---- */
.pos-checkout .menge-btn {
    min-width: 30px;
    min-height: 30px;
    font-size: 1rem;
    font-weight: 700;
    padding: 0;
    line-height: 1;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pos-checkout-input-bg);
    border: 1px solid var(--pos-checkout-input-border);
    color: var(--pos-checkout-text);
    cursor: pointer;
    transition: background 0.1s;
}

.pos-checkout .menge-btn:hover {
    background: var(--pos-checkout-hover);
    border-color: var(--pos-accent);
}

.menge-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.menge-group .menge-count {
    font-size: 1.15rem;
    min-width: 1.5rem;
    text-align: center;
}

@media (max-width: 576px) {
    .menge-group {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 0.2rem;
        align-items: center;
    }
    .menge-group .menge-btn:first-child {
        grid-column: 1;
        grid-row: 2;
    }
    .menge-group .menge-btn:last-child {
        grid-column: 1;
        grid-row: 1;
    }
    .menge-group .menge-count {
        grid-column: 2;
        grid-row: 1 / 3;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---- Stückzahl-Stepper im "Position editieren"-Modal ---- */
.edit-menge-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.edit-menge-stepper .edit-menge-btn {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-menge-stepper .edit-menge-input {
    width: 96px;
    height: 64px;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
}

.pos-checkout .kasse-rabatt-row {
    background: rgba(255,179,71,0.08) !important;
}

.pos-checkout .kasse-rabatt-row td {
    color: var(--pos-accent-amber) !important;
}

.pos-checkout .badge.bg-secondary {
    background: var(--pos-checkout-input-bg) !important;
    color: var(--pos-checkout-muted);
}

.pos-checkout .btn-outline-danger {
    border-color: #dc3545;
    color: #dc3545;
    background: transparent;
}

.pos-checkout .btn-outline-danger:hover {
    background: rgba(220,53,69,0.15);
    color: #dc3545;
}

.pos-checkout .btn-outline-secondary {
    border-color: var(--pos-checkout-input-border);
    color: var(--pos-checkout-muted);
    background: transparent;
}

.pos-checkout .btn-outline-secondary:hover {
    background: var(--pos-checkout-hover);
    color: var(--pos-checkout-text);
}

.pos-checkout .form-control,
.pos-checkout .form-select {
    background: var(--pos-checkout-input-bg);
    border-color: var(--pos-checkout-input-border);
    color: var(--pos-checkout-text);
    font-size: 0.82rem;
}

.pos-checkout .form-control:focus,
.pos-checkout .form-select:focus {
    background: var(--pos-checkout-hover);
    border-color: var(--pos-accent);
    box-shadow: 0 0 0 2px rgba(0,212,170,0.15);
    color: var(--pos-checkout-text);
}

.pos-checkout .form-control::placeholder {
    color: var(--pos-checkout-muted);
}

.pos-checkout .form-select option {
    background: var(--pos-checkout-bg);
    color: var(--pos-checkout-text);
}

.pos-checkout .text-muted {
    color: var(--pos-checkout-muted) !important;
}

/* Navbar Bediener-Link (klickbar zum Ändern) */
.nav-bediener-link {
    cursor: pointer;
    transition: opacity 0.2s;
}
.nav-bediener-link:hover {
    opacity: 0.8;
}

/* Settings dropdown */
.pos-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 2px solid transparent;
    background: var(--ap-surface);
    color: var(--ap-text-muted);
    cursor: pointer;
    font-size: 1.15rem;
    transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.pos-settings-btn:hover,
.pos-settings-btn.show {
    border-color: var(--pos-accent);
    box-shadow: 0 0 0 3px rgba(0,212,170,0.12);
    color: var(--pos-accent);
}
.pos-settings-menu {
    min-width: 260px;
    padding: 0.75rem;
    border-radius: 14px;
    border: 1px solid var(--ap-border);
    background: var(--ap-surface);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.pos-settings-menu .form-check-label {
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
}
.pos-settings-menu .form-check-input:checked {
    background-color: var(--pos-accent);
    border-color: var(--pos-accent);
}

/* Clear button for light mode */
.pos-pay-clear {
    border: 2px solid #dc3545;
    color: #dc3545;
}

/* POS Responsive */
@media (max-width: 991.98px) {
    .pos:not(.pos-kiosk), .pos.pos-reversed:not(.pos-kiosk) {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .pos:not(.pos-kiosk) > .pos-checkout { width: 100%; border-left: none; border-right: none; border-top: 2px solid var(--pos-accent); box-shadow: 0 -4px 24px rgba(0,212,170,0.08); }
    .pos.pos-reversed:not(.pos-kiosk) > .pos-checkout { border-left: none; border-right: none; border-top: 2px solid var(--pos-accent); box-shadow: 0 -4px 24px rgba(0,212,170,0.08); }
    .pos-products { max-height: 50vh; }
    .pos-quickactions { width: 100%; flex-direction: row; border-left: none; border-top: 1px solid var(--pos-accent); }
    .pos-quickactions.expanded { width: 100%; }
    .pos-qa-header { border-bottom: none; border-right: 1px solid var(--ap-border); }
    .pos-qa-body { flex-direction: row; overflow-x: auto; }
    .pos.pos-reversed .pos-quickactions { border-right: none; border-top: 1px solid var(--pos-accent); }
    .pos-total-amount { font-size: 1.8rem; }
    .pos-tiles {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

@media (max-width: 575px) {
    /* 2x2 Grid statt Flex-Wrap: Bar/Karte/Clear bleiben IMMER in Reihe 1 sichtbar,
       Gemischt geht in Reihe 2 (volle Breite). Die alte Variante mit
       flex-basis:100% + order:-1 packte Gemischt in Reihe 1 (full width) und
       schob Bar/Karte/Clear in Reihe 2 — die wurde auf schmalen Sunmi/Handheld-
       Screens (360px logical) vom Container-Bottom abgeschnitten, Bar/Karte
       verschwanden. */
    .pos-pay {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        grid-template-rows: auto auto;
        gap: 0.5rem;
    }
    .pos-pay-bar { grid-column: 1; grid-row: 1; }
    .pos-pay-karte { grid-column: 2; grid-row: 1; }
    .pos-pay-clear { grid-column: 3; grid-row: 1; }
    .pos-pay-gemischt { grid-column: 1 / -1; grid-row: 2; }
}

@media (pointer: coarse) {
    .pos-tile {
        min-height: 92px;
        font-size: 0.9rem;
    }
    .pos-pay-btn {
        min-height: 60px;
        font-size: 1.1rem;
    }
    .pos-search-input {
        padding: 0.75rem 0;
        font-size: 1rem;
    }
    .pos-checkout .menge-btn {
        min-width: 38px;
        min-height: 38px;
        font-size: 1.1rem;
    }
}

/* ================================================================
   SUNMI-MODUS (720x1440 Portrait)
   ================================================================ */

/* Kompakte Navbar */
body.sunmi-device .navbar {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    min-height: 40px;
}
body.sunmi-device .navbar .navbar-brand { font-size: 0.85rem; }
body.sunmi-device .navbar .nav-link { font-size: 0.8rem; padding: 0.25rem 0.5rem; }

/* Tab-Leiste */
.pos-sunmi-tabs {
    display: flex;
    background: var(--pos-checkout-bg);
    border-bottom: 2px solid var(--pos-accent);
    padding: 0 0.5rem;
}

.pos-sunmi-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem;
    border: none;
    background: transparent;
    color: var(--pos-checkout-muted);
    font-size: 1.9rem;
    font-weight: 600;
    font-family: var(--ap-font);
    cursor: pointer;
    position: relative;
    transition: color 0.15s;
}

.pos-sunmi-tab.active {
    color: var(--pos-accent);
}

.pos-sunmi-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: var(--pos-accent);
    border-radius: 3px 3px 0 0;
}

.pos-sunmi-tab-badge {
    background: var(--pos-accent-red);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* POS-Container im Sunmi-Modus */
.pos-sunmi {
    flex-direction: column;
    height: calc(100vh - 40px - 44px);
}

.pos-sunmi .pos-products {
    flex: 1;
    max-height: none;
    padding: 1px;
    position: relative;
}

.pos-sunmi .pos-checkout {
    width: 100%;
    flex: 1;
    border-left: none;
    border-top: none;
    box-shadow: none;
}

/* EAN-Scanner ausblenden */
.pos-sunmi .pos-search .pos-search-field:first-child { display: none; }

/* Groessere Tiles fuer 720px Breite */
.pos-sunmi .pos-tiles {
    grid-template-columns: repeat(auto-fill, minmax(var(--tile-min, 200px), 1fr));
    gap: var(--tile-gap, 0.6rem);
}

.pos-sunmi .pos-tile {
    min-height: var(--tile-min-height, 140px);
    padding: var(--tile-pad, 0.8rem);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.3rem;
}

.pos-sunmi .pos-tile::before { height: 3px; }
.pos-sunmi .pos-tile-name { font-size: var(--tile-font-name, 1.6rem); }
.pos-sunmi .pos-tile-price { font-size: var(--tile-font-price, 1.5rem); margin-top: 0 !important; }
/* Handheld-Kachel-Foto: Groesse via Regler, --tile-foto:0 = kein Foto (.pos-foto-aus) */
.pos-sunmi .pos-tile-foto img { width: var(--tile-foto, 32px); height: var(--tile-foto, 32px); object-fit: cover; border-radius: 6px; }
.pos-sunmi.pos-foto-aus .pos-tile-foto img { display: none; }

/* Kompaktere Suche. Bei Sunmi V2s (720px) muss die Search-Bar in den Container passen,
   sonst klemmt .pos-products { overflow:hidden } den rechten Scan-Button ab.
   Daher: schmalere Gap, kompaktere Buttons, Nullbeleg auf Icon-only schrumpfen. */
.pos-sunmi .pos-search { margin-bottom: 0.5rem; align-items: center; gap: 0.4rem; padding-right: 4px; }
.pos-sunmi .pos-search-input { padding: 0.45rem 0; font-size: 0.88rem; }
.pos-sunmi .pos-search > button { padding: 0.25rem 0.45rem; }
.pos-sunmi .pos-search #sunmiNullbelegBtn { width: auto; padding: 0.3rem 0.5rem; font-size: 0; }
.pos-sunmi .pos-search #sunmiNullbelegBtn i { font-size: 1.1rem; }

/* Kompaktere Sections */
.pos-sunmi .pos-section { margin-bottom: 0.6rem; }
.pos-sunmi .pos-section-label { font-size: 1.3rem; margin-bottom: 0.5rem; }

/* Quick Actions verstecken */
.pos-sunmi .pos-quickactions { display: none; }

/* Checkout kompakter */
.pos-sunmi .pos-checkout-head { padding: 0.6rem 0.85rem; }
.pos-sunmi .pos-checkout-title { font-size: 1.9rem; margin-bottom: 0.3rem; }
.pos-sunmi .pos-cart-table td { font-size: 1.7rem; padding: 0.6rem 0.5rem; }
/* Sunmi V2s (720px portrait): Tabelle mit table-layout:fixed damit die Spalten-Widths
   garantiert respektiert werden. Ohne fixed berechnet der Browser die Spalten nach
   Content — und der Lösch-Button-Spalte landet zu schmal, der Button rutscht aus
   dem rechten Container raus. Mit fixed + expliziten Widths bleibt alles im Frame.
   Spalten: # | Artikel (rest) | Menge | Rabatt | Preis | Remove. */
.pos-sunmi .pos-cart-table { table-layout: fixed; width: 100%; }
.pos-sunmi .pos-cart-table th:nth-child(1),
.pos-sunmi .pos-cart-table td:nth-child(1) { width: 28px; padding: 0.4rem 0.2rem; }
.pos-sunmi .pos-cart-table th:nth-child(2),
.pos-sunmi .pos-cart-table td:nth-child(2) { overflow-wrap: anywhere; word-break: break-word; }
.pos-sunmi .pos-cart-table th:nth-child(3),
.pos-sunmi .pos-cart-table td:nth-child(3) { width: 96px; padding: 0.4rem 0.2rem; }
.pos-sunmi .pos-cart-table th:nth-child(4),
.pos-sunmi .pos-cart-table td:nth-child(4) { width: 62px; padding: 0.4rem 0.2rem; }
.pos-sunmi .pos-cart-table th:nth-child(5),
.pos-sunmi .pos-cart-table td:nth-child(5) { width: 80px; padding: 0.4rem 0.2rem; }
.pos-sunmi .pos-cart-table th:nth-child(6),
.pos-sunmi .pos-cart-table td:nth-child(6) { width: 52px; padding: 0.4rem 0.15rem; text-align: center; }
.pos-sunmi .pos-cart-table td:nth-child(6) .btn {
    font-size: 1.2rem;
    padding: 0.18rem 0.45rem;
    line-height: 1;
    min-width: 0;
}
/* Cart-Container darf nicht horizontal scrollen. */
.pos-sunmi .pos-cart { overflow-x: hidden; }
.pos-sunmi .pos-checkout-footer { padding: 0.6rem 0.85rem; }
.pos-sunmi .pos-total { padding: 0.6rem 0.85rem; }
.pos-sunmi .pos-total-amount { font-size: 3.6rem; }
.pos-sunmi .pos-pay-btn { min-height: 64px; font-size: 1.9rem; }

/* ================================================================
   KIOSK-MODUS (Selbstbedienung, 15.6" Display)
   Side-by-Side Layout, grosse Touch-Targets, vereinfachte UI
   ================================================================ */
.pos-kiosk {
    display: flex;
    flex-direction: row;
    margin: 0;
    overflow: hidden;
}
/* Standard: Warenkorb rechts */
.pos-kiosk .pos-products { flex: 1; overflow-y: auto; padding: 1rem; min-height: 0; }
.pos-kiosk .pos-checkout { flex-grow: 0; flex-shrink: 1; flex-basis: var(--kiosk-checkout-size, 35%); width: var(--kiosk-checkout-size, 35%); max-width: var(--kiosk-checkout-size, 35%); min-width: 0; display: flex; flex-direction: column; border-left: 2px solid var(--pos-accent, #4f6df5); max-height: 100vh; overflow: hidden; }
/* Warenkorb links */
.pos-kiosk.kiosk-left { flex-direction: row-reverse; }
.pos-kiosk.kiosk-left .pos-checkout { border-left: none; border-right: 2px solid var(--pos-accent, #4f6df5); }
/* Warenkorb oben */
.pos-kiosk.kiosk-top { flex-direction: column-reverse; }
.pos-kiosk.kiosk-top .pos-checkout { flex-grow: 0; flex-shrink: 1; flex-basis: var(--kiosk-checkout-size, 35%); height: var(--kiosk-checkout-size, 35%); max-height: var(--kiosk-checkout-size, 35%); min-height: 0; width: 100%; max-width: none; border-left: none; border-bottom: 2px solid var(--pos-accent, #4f6df5); flex-direction: row; align-items: stretch; overflow: hidden; }
.pos-kiosk.kiosk-top .pos-cart { flex: 1; overflow-y: auto; }
.pos-kiosk.kiosk-top .pos-checkout-footer { flex: 0 0 280px; }
/* Warenkorb unten */
.pos-kiosk.kiosk-bottom { flex-direction: column; }
.pos-kiosk.kiosk-bottom .pos-checkout { flex-grow: 0; flex-shrink: 1; flex-basis: var(--kiosk-checkout-size, 35%); height: var(--kiosk-checkout-size, 35%); max-height: var(--kiosk-checkout-size, 35%); min-height: 0; width: 100%; max-width: none; border-left: none; border-top: 2px solid var(--pos-accent, #4f6df5); flex-direction: row; align-items: stretch; overflow: hidden; }
.pos-kiosk.kiosk-bottom .pos-cart { flex: 1; overflow-y: auto; }
.pos-kiosk.kiosk-bottom .pos-checkout-footer { flex: 0 0 280px; }

.pos-kiosk .pos-tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pos-kiosk .pos-tile { min-height: 160px; font-size: 1rem; }
.pos-kiosk .pos-tile-name { font-size: var(--kiosk-font-name, 22px) !important; }
.pos-kiosk .pos-tile-price { font-size: var(--kiosk-font-preis, 26px) !important; font-weight: 800; }
/* Kiosk: Tile mit Foto — Bild gross, Text/Preis nebeneinander darunter */
.pos-kiosk .pos-tile-foto { flex-direction: row; flex-wrap: wrap; padding: 0.5rem; align-items: baseline; overflow: visible; }
.pos-kiosk .pos-tile-foto img { flex: 0 0 calc(100% - 1rem); min-height: 0; max-width: calc(100% - 1rem) !important; max-height: none !important; height: auto; object-fit: contain; margin: 0 auto; display: block; image-rendering: auto; align-self: center; }
.pos-kiosk .pos-tile-foto .pos-tile-name { font-size: var(--kiosk-font-name-foto, 11px) !important; line-height: 1.3; flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-kiosk .pos-tile-foto .pos-tile-price { font-size: var(--kiosk-font-preis-foto, 13px) !important; margin-top: 0; padding-top: 0; flex: 0 0 auto; text-align: right; white-space: nowrap; }
.pos-kiosk .pos-checkout-total { font-size: 2.2rem; }
.pos-kiosk .pos-pay-btn { min-height: 70px; font-size: 1.3rem; }
.pos-kiosk .pos-cart-item { font-size: 1.1rem; padding: 8px; }
.pos-kiosk .pos-cart .btn-outline-danger { font-size: 1.2rem; padding: 0.4rem 0.7rem; }
.pos-kiosk .pos-search-input { font-size: 1.2rem; height: 50px; }
.pos-kiosk .pos-kategorie-btn { font-size: 1.1rem; padding: 10px 20px; }
.pos-kiosk .pos-cart { flex: 1; overflow-y: scroll; min-height: 0; -webkit-overflow-scrolling: touch; }
.pos-kiosk .pos-checkout-footer { flex-shrink: 0; padding: 0.5rem; }
.pos-kiosk .pos-sunmi-tabs { display: none; }
/* Kiosk: Accent-Strip oberhalb der Tiles entfernen, zarter Rahmen + kleiner Schatten */
.pos-kiosk .pos-tile::before { display: none; }
.pos-kiosk .pos-tile {
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.pos-kiosk .pos-tile:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}
/* Kiosk: Rabatt + Gemischt ausblenden */
.pos-kiosk .pos-rabatt-row { display: none !important; }
.pos-kiosk .kasse-rabatt-row { display: none !important; }
.pos-kiosk .pos-cart th:nth-child(4),
.pos-kiosk .pos-cart td:nth-child(4) { display: none !important; }
/* Kiosk: Karte-Button Aufmerksamkeits-Animation */
@keyframes kioskPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79,109,245,0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px 5px rgba(79,109,245,0.4); }
}
.pos-kiosk .pos-pay-karte.kiosk-attention {
    animation: kioskPulse 1.2s ease-in-out infinite;
}
.pos-kiosk .pos-pay-gemischt { display: none !important; }
.pos-kiosk #btnGemischt { display: none !important; }
/* Kiosk: Checkout Header kompakter */
.pos-kiosk .pos-checkout-head { padding: 0.5rem; }
.pos-kiosk .pos-checkout-title { display: none !important; }
.pos-kiosk .pos-total { padding: 0.4rem 0.5rem; margin-bottom: 0.3rem; }
.pos-kiosk .pos-total-label { display: none !important; }
.pos-kiosk .pos-total-amount { white-space: nowrap; }
.pos-kiosk .pos-cart-item-price { white-space: nowrap; }

/* Kiosk-Animationen (subtil & elegant, schnell) */
@keyframes kioskFadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes kioskCartItemIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes kioskTotalFlash {
    0%   { background-color: transparent; }
    50%  { background-color: rgba(79, 109, 245, 0.15); }
    100% { background-color: transparent; }
}
@keyframes kioskPaySlideUp {
    from { transform: translateY(30px); }
    to   { transform: translateY(0); }
}
.pos-kiosk .kiosk-anim-tile {
    animation: kioskFadeSlideUp 0.25s ease both;
}
.pos-kiosk .kiosk-anim-cart-item {
    animation: kioskCartItemIn 0.25s ease both;
}
.pos-kiosk .kiosk-anim-total-flash {
    animation: kioskTotalFlash 0.3s ease;
}
.pos-kiosk .kiosk-anim-fade-out {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.kiosk-anim-pay-in {
    animation: kioskPaySlideUp 0.3s ease both;
}
.kiosk-anim-pay-out {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Kiosk: Timeout-Modal schnellere Transition */
#kioskTimeoutModal.modal.fade .modal-dialog {
    transition-duration: 0.3s;
}

/* Kiosk Info-Button und Detail-Popup */
.pos-kiosk .pos-tile { position: relative; }

.pos-kiosk .kiosk-info-btn {
    position: absolute; top: 8px; right: 8px;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    background: rgba(255,255,255,0.9);
    font-family: Georgia, serif; font-size: 18px; font-weight: 700;
    font-style: italic; color: #555;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2;
    padding: 0; line-height: 1;
}
.pos-kiosk .kiosk-info-btn:active { transform: scale(0.92); }

.kiosk-info-popup-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center; justify-content: center;
    z-index: 10000;
}
.kiosk-info-popup {
    background: #fff; border-radius: 16px;
    max-width: 520px; width: 92%;
    max-height: 90vh; overflow-y: auto;
    padding: 24px; position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.kiosk-info-popup .close-x {
    position: absolute; top: 10px; right: 14px;
    font-size: 28px; cursor: pointer; color: #888;
    background: none; border: none;
}
.kiosk-info-popup .kip-preis {
    position: absolute; top: 18px; right: 56px;
    font-size: 1.4rem; font-weight: 700; color: #222;
}
.kiosk-info-popup h2 { margin: 0 0 16px 0; padding-right: 120px; font-size: 1.5rem; }
.kiosk-info-popup .kip-foto { text-align: center; margin-bottom: 16px; }
.kiosk-info-popup .kip-foto img { max-width: 100%; max-height: 220px; border-radius: 10px; }
.kiosk-info-popup .kip-beschreibung { color: #444; margin-bottom: 16px; line-height: 1.5; }
.kiosk-info-popup .kip-section-title { font-weight: 700; color: #333; margin: 14px 0 6px; }
.kiosk-info-popup .kip-allergene { color: #555; line-height: 1.6; }
.kiosk-info-popup .kip-allergene .kip-code { display: inline-block; font-weight: 700; margin-right: 4px; color: #222; }
.kiosk-info-popup .kip-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kiosk-info-popup .kip-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f2f4ff; color: #333;
    border: 1px solid #d9defc;
    padding: 6px 12px; border-radius: 999px;
    font-size: 0.9rem;
}
.kiosk-info-popup .kip-close-btn {
    display: block; width: 100%; margin-top: 20px;
    padding: 14px; border: none; border-radius: 10px;
    background: var(--pos-accent, #4f6df5); color: #fff;
    font-size: 1.1rem; font-weight: 700; cursor: pointer;
}

/* ================================================================
   HANDY-ANPASSUNGEN fuer Sunmi-Layout (< 768px)
   Tabs, Tiles, Floating-Bar fuer kleine Screens optimiert
   ================================================================ */

@media (max-width: 767.98px) {
    /* Container: kein horizontales Scrollen */
    .pos-sunmi { overflow: hidden; }

    /* Tabs: kompakt, klar als Buttons erkennbar, kein Abschneiden */
    .pos-sunmi-tabs { padding: 0; overflow: hidden; }
    .pos-sunmi-tab {
        font-size: 1rem; padding: 0.6rem 0.4rem; gap: 0.3rem;
        overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    }
    .pos-sunmi-tab i { font-size: 1.1rem; }
    .pos-sunmi-tab-badge { font-size: 0.65rem; min-width: 16px; height: 16px; }

    /* POS-Hoehe: Navbar + Tabs + Floating-Bar beruecksichtigen */
    .pos-sunmi { height: calc(100vh - 56px - 42px); }

    /* Tiles: fuer Handy-Breite */
    .pos-sunmi .pos-tiles { grid-template-columns: repeat(auto-fill, minmax(var(--tile-min, 130px), 1fr)); gap: var(--tile-gap, 0.4rem); }
    .pos-sunmi .pos-tile { min-height: var(--tile-min-height, 80px); padding: var(--tile-pad, 0.5rem); border-radius: 10px; }
    .pos-sunmi .pos-tile-name { font-size: var(--tile-font-name, 0.9rem); }
    .pos-sunmi .pos-tile-price { font-size: var(--tile-font-price, 0.85rem); }

    /* Sektionen */
    .pos-sunmi .pos-section { margin-bottom: 0.4rem; }
    .pos-sunmi .pos-section-label { font-size: 0.9rem; margin-bottom: 0.3rem; }

    /* Checkout: kompakt damit Buttons sichtbar sind ohne Scrollen */
    .pos-sunmi .pos-checkout-head { padding: 0.4rem 0.75rem; }
    .pos-sunmi .pos-checkout-title { font-size: 1.1rem; margin-bottom: 0.2rem; }
    .pos-sunmi .pos-cart-table td { font-size: 0.9rem; padding: 0.4rem 0.35rem; }
    .pos-sunmi .pos-checkout-footer { padding: 0.4rem 0.75rem; }
    .pos-sunmi .pos-total { padding: 0.5rem 0.75rem; }
    .pos-sunmi .pos-total-amount { font-size: 1.8rem; }
    .pos-sunmi .pos-pay-btn { min-height: 48px; font-size: 1.1rem; }
    .pos-sunmi .pos-pay { gap: 0.4rem; }

    /* Suche: kompakter */
    .pos-sunmi .pos-search { margin-bottom: 0.3rem; }
    .pos-sunmi .pos-search-input { padding: 0.35rem 0; font-size: 0.85rem; }
}


/* ================================================================
   FARB-SWATCHES (Artikelformular)
   ================================================================ */
.farb-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid rgba(0,0,0,0.12);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.1s, box-shadow 0.1s;
}
.farb-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.farb-swatch-active {
    border-color: var(--bs-primary, #0d6efd) !important;
    box-shadow: 0 0 0 2px var(--bs-primary, #0d6efd);
}
[data-bs-theme="dark"] .farb-swatch {
    border-color: rgba(255,255,255,0.2);
}

/* ================================================================
   NUMPAD POPUP
   ================================================================ */

.numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 260px;
    margin: 0 auto;
}

.numpad-btn {
    width: 100%;
    height: 58px;
    font-family: var(--ap-font);
    font-size: 1.35rem;
    font-weight: 700;
    border-radius: var(--ap-radius-sm);
    border: 1px solid var(--ap-border);
    background: var(--ap-surface);
    color: var(--ap-text);
    transition: all 0.1s ease;
}

.numpad-btn:hover {
    background: var(--ap-surface-hover);
    border-color: var(--ap-blue);
    color: var(--ap-blue);
}

.numpad-btn:active {
    transform: scale(0.95);
    background: var(--ap-surface-muted);
}

.numpad-btn-delete {
    background: transparent;
    border-color: rgba(231,76,94,0.3);
    color: var(--ap-red);
}

.numpad-btn-delete:hover {
    background: rgba(231,76,94,0.06);
    border-color: var(--ap-red);
}

/* Numpad Display */
.numpad-display {
    font-family: var(--ap-font);
    font-size: 1.8rem;
    font-weight: 700;
    text-align: right;
    border: 2px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    padding: 0.6rem 1rem;
    background: var(--ap-surface-muted);
    color: var(--ap-text);
    letter-spacing: -0.5px;
    transition: border-color var(--ap-transition);
}

.numpad-display:focus {
    border-color: var(--ap-blue);
    background: var(--ap-surface);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79,109,245,0.12);
}

/* Numpad Modal */
.numpad-modal .modal-content {
    border-radius: var(--ap-radius);
    border: 1px solid var(--ap-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.numpad-modal .modal-header {
    border: none;
    padding: 1rem 1.2rem 0;
}

.numpad-modal .modal-body {
    padding: 0.8rem 1.2rem;
}

.numpad-modal .modal-footer {
    border: none;
    padding: 0 1.2rem 1rem;
    gap: 0.5rem;
}

.numpad-modal .modal-footer .btn {
    border-radius: var(--ap-radius-sm);
    font-weight: 600;
    flex: 1;
    padding: 0.6rem;
}

.numpad-confirm-btn {
    background: var(--ap-blue);
    border: none;
    color: #fff;
}

.numpad-confirm-btn:hover {
    background: var(--ap-blue-hover);
    color: #fff;
}

.numpad-grid-sm {
    max-width: 180px;
}

.numpad-grid-sm .numpad-btn {
    height: 42px;
    font-size: 1.1rem;
}

/* ================================================================
   VIRTUELLE TASTATUR
   ================================================================ */

.vkb-display {
    font-family: var(--ap-font);
    font-size: 1.4rem;
    font-weight: 600;
    border: 2px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    padding: 0.6rem 1rem;
    background: var(--ap-surface-muted);
    color: var(--ap-text);
    transition: border-color var(--ap-transition);
}

.vkb-display:focus {
    border-color: var(--ap-blue);
    background: var(--ap-surface);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79,109,245,0.12);
}

.vkb-keys {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 680px;
    margin: 0 auto;
}

.vkb-row {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.vkb-key {
    flex: 1;
    max-width: 56px;
    height: 50px;
    font-family: var(--ap-font);
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--ap-border);
    background: var(--ap-surface);
    color: var(--ap-text);
    transition: all 0.08s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vkb-key:hover {
    background: var(--ap-surface-hover);
    border-color: var(--ap-blue);
    color: var(--ap-blue);
}

.vkb-key:active {
    transform: scale(0.93);
    background: var(--ap-surface-muted);
}

.vkb-key-space {
    flex: 4;
    max-width: 240px;
}

.vkb-key-action {
    flex: 1.3;
    max-width: 72px;
    font-size: 1rem;
    background: var(--ap-surface-muted);
}

.vkb-key-action.active {
    background: var(--ap-blue);
    color: #fff;
    border-color: var(--ap-blue);
}

.vkb-key-ok {
    flex: 1.5;
    max-width: 80px;
    background: var(--ap-blue);
    color: #fff;
    border-color: var(--ap-blue);
    font-weight: 700;
}

.vkb-key-ok:hover {
    background: var(--ap-blue-hover);
    color: #fff;
}

#vkbModal .modal-content {
    border-radius: var(--ap-radius);
    border: 1px solid var(--ap-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

#vkbModal .modal-header { border: none; padding: 1rem 1.2rem 0; }
#vkbModal .modal-body { padding: 0.8rem 1.2rem; }
#vkbModal .modal-footer { border: none; padding: 0 1.2rem 1rem; gap: 0.5rem; }
#vkbModal .modal-footer .btn { border-radius: var(--ap-radius-sm); font-weight: 600; flex: 1; padding: 0.6rem; }

/* ================================================================
   TOUCH-PANEL (Fixed-Position — außerhalb Modal-Flow)
   ================================================================ */

/* Wrapper: position:fixed → kein Reflow, kein Scrollbalken-Flicker */
.touch-panel-wrapper {
    position: fixed;
    /* 10082: ueber Bootstrap-Modals UND ueber den Fixed-Overlay-Sheets
       (.kunde-sheet-overlay=10061), damit das angedockte Panel auch dort sichtbar ist. */
    z-index: 10082;
    /* width / left / top / bottom werden per JS inline gesetzt */
}

/* Panel-Basis */
.touch-panel {
    background: var(--ap-surface-muted);
    border-top: 2px solid var(--ap-blue);
    padding: 0.5rem 0 0.75rem;
}

/* ---- Side-Mode: Tastatur rechts neben dem Modal ---- */
.touch-panel-wrapper.side-mode .touch-panel {
    transform: translateX(40px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--ap-radius-sm);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.touch-panel-wrapper.side-mode.open .touch-panel {
    transform: translateX(0);
    opacity: 1;
}

/* ---- Below-Mode: Fallback — Tastatur am unteren Viewport-Rand ---- */
.touch-panel-wrapper.below-mode .touch-panel {
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.touch-panel-wrapper.below-mode.open .touch-panel {
    transform: translateY(0);
}

.touch-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.75rem 0.4rem;
}

.touch-panel-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.touch-panel-close {
    background: none;
    border: none;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: var(--ap-radius-sm);
    transition: all 0.15s;
    line-height: 1;
}

.touch-panel-close:hover {
    background: var(--ap-surface-hover);
    color: var(--ap-red);
}

.touch-panel-display {
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: right;
    border: 2px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    padding: 0.4rem 0.7rem;
    background: var(--ap-surface);
    color: var(--bs-body-color, #212529);
    width: 100%;
    margin-bottom: 0.5rem;
    transition: border-color 0.2s;
    outline: none;
}

.touch-panel-display:focus {
    border-color: var(--ap-blue);
    box-shadow: 0 0 0 3px rgba(79,109,245,0.12);
}

/* Cursor-Anzeige der Touch-Tastatur (VKB) — Text + selbst gezeichneter Cursor */
.touch-panel-caret-display {
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid var(--ap-blue);
    border-radius: var(--ap-radius-sm);
    padding: 0.4rem 0.7rem;
    background: var(--ap-surface);
    color: var(--bs-body-color, #212529);
    width: 100%;
    margin-bottom: 0.5rem;
    min-height: 2.8rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow-x: auto;
    text-align: left;
    cursor: text;
}
.touch-panel-caret-display .tp-ch { white-space: pre; }
.touch-panel-caret-display .tp-sel { background: rgba(79,109,245,0.28); border-radius: 2px; }
.tp-caret {
    display: inline-block;
    width: 2px;
    height: 1.25em;
    background: var(--ap-blue, #4f6df5);
    vertical-align: -0.22em;
    margin: 0 -1px;
    animation: tpCaretBlink 1.1s step-end infinite;
}
@keyframes tpCaretBlink { 50% { opacity: 0; } }

/* Zielfeld der Touch-Tastatur optisch als aktiv markieren (kein echter .focus(),
   da das auf Sunmi die System-Tastatur hochtriggern wuerde). !important, damit
   die Hervorhebung ueber die Basis-Stile aller Feldtypen gewinnt. */
.tp-target-active,
.tp-target-active:hover {
    border-color: var(--ap-blue) !important;
    box-shadow: 0 0 0 3px rgba(79,109,245,0.32) !important;
    background-color: rgba(79,109,245,0.06) !important;
    outline: none !important;
}

.touch-panel .numpad-grid {
    max-width: 100%;
    gap: 6px;
    padding: 0 0.5rem;
}

.touch-panel .numpad-btn {
    height: 68px;
    font-size: 1.5rem;
}

.touch-panel .vkb-keys {
    max-width: 100%;
    padding: 0 0.5rem;
}

.touch-panel .vkb-key {
    height: 50px;
    font-size: 1.05rem;
}

/* Below-Mode (Sunmi: VKB ueber ganze Viewport-Breite): max-width-Cap der Keys
 * entfernen, damit sie sich proportional auf die volle Panel-Breite verteilen.
 * Sonst bleiben sie bei 56px stehen und das Panel hat seitlich riesige Leerraeume. */
.touch-panel-wrapper.below-mode .vkb-key,
.touch-panel-wrapper.below-mode .vkb-key-space,
.touch-panel-wrapper.below-mode .vkb-key-action,
.touch-panel-wrapper.below-mode .vkb-key-ok {
    max-width: none;
}
.touch-panel-wrapper.below-mode .touch-panel .vkb-key {
    height: 60px;
    font-size: 1.2rem;
}

.touch-panel-ok {
    width: calc(100% - 1rem);
    margin: 0.4rem 0.5rem 0;
    padding: 0.55rem;
    font-weight: 700;
    font-size: 1rem;
    border-radius: var(--ap-radius-sm);
    background: var(--ap-blue);
    border: 2px solid var(--ap-blue);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.touch-panel-ok:hover {
    background: var(--ap-blue-hover);
    border-color: var(--ap-blue-hover);
}

/* ================================================================
   TOUCH/TABLET OPTIMIERUNG
   ================================================================ */

@media (pointer: coarse) {

    .touch-btn {
        min-height: 50px;
        padding: 0.6rem 1rem;
        font-size: 1rem;
    }

    .touch-btn-sm {
        min-height: 40px;
        min-width: 40px;
        padding: 0.4rem 0.6rem;
    }

    .touch-input {
        min-height: 46px;
        font-size: 1rem;
    }

    .numpad-grid-sm .numpad-btn {
        height: 50px;
        font-size: 1.25rem;
    }

    .menge-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.4rem;
    }

    .navbar-nav .nav-link {
        padding: 0.6rem 0.8rem;
    }

    .btn-sm {
        padding: 0.4rem 0.6rem;
        font-size: 0.9rem;
    }

    .form-control, .form-select {
        min-height: 46px;
    }

    .table td, .table th {
        padding: 0.6rem 0.5rem;
    }
}



/* ================================================================
   PORTAL POPUP (Alert/Confirm)
   ================================================================ */

#portalPopup .modal-content {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--ap-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

.portal-popup-header {
    border-bottom-width: 3px;
    border-bottom-style: solid;
    padding: 1rem 1.25rem;
}

.portal-popup-header .modal-title {
    font-size: 1.1rem;
    font-weight: 700;
}

#portalPopupIcon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}

#portalPopupMessage {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ap-text);
}

#portalPopupFooter {
    border-top: 1px solid var(--ap-border);
    padding: 0.75rem 1.25rem;
    gap: 0.5rem;
}

.portal-popup-btn {
    border-radius: var(--ap-radius-sm);
    font-weight: 600;
    padding: 0.55rem 1.5rem;
    min-width: 100px;
    font-family: var(--ap-font);
}

@media (pointer: coarse) {
    .portal-popup-btn {
        min-height: 48px;
        font-size: 1rem;
        padding: 0.65rem 1.5rem;
    }
}

/* ================================================================
   PRINT STYLES
   ================================================================ */

.bon-print-wrapper {
    display: none;
}

@media print {
    body.printing-bon {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.printing-bon > *:not(.bon-print-wrapper) {
        display: none !important;
    }

    body.printing-bon .bon-print-wrapper {
        display: block !important;
        width: 80mm;
        padding: 0;
        margin: 0;
        font-family: 'Courier New', Courier, monospace;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.4;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color: #000;
    }

    body.printing-bon .bon-print-wrapper .bon-header { text-align: center; margin-bottom: 8px; }
    body.printing-bon .bon-print-wrapper .bon-firma { font-weight: 900; font-size: 18px; }
    body.printing-bon .bon-print-wrapper .bon-divider { border-top: 1px dashed #000; margin: 5px 0; }
    body.printing-bon .bon-print-wrapper .bon-divider-double { border-top: 3px double #000; margin: 5px 0; }
    body.printing-bon .bon-print-wrapper .bon-pos-name { font-weight: 700; }
    body.printing-bon .bon-print-wrapper .bon-summe { font-size: 15px; font-weight: 900; }
    body.printing-bon .bon-print-wrapper .d-flex { display: flex !important; }
    body.printing-bon .bon-print-wrapper .justify-content-between { justify-content: space-between; }
    body.printing-bon .bon-print-wrapper .text-center { text-align: center; }
    body.printing-bon .bon-print-wrapper .small { font-size: 12px; }
    body.printing-bon .bon-print-wrapper .bon-mwst { font-size: 12px; }
    body.printing-bon .bon-print-wrapper .bon-mwst-header { border-bottom: 1px solid #000; font-size: 12px; }
    body.printing-bon .bon-print-wrapper .bon-qr-data { font-size: 10px; word-break: break-all; }
    body.printing-bon .bon-print-wrapper .text-muted { color: #000 !important; }
    body.printing-bon .bon-print-wrapper .d-none { display: none !important; }
    body.printing-bon .bon-print-wrapper img { display: block; margin: 0 auto; }
    body.printing-bon .bon-print-wrapper .bon-zusatz { font-size: 12px; font-weight: 500; word-wrap: break-word; overflow-wrap: break-word; }
    body.printing-bon .bon-print-wrapper .bon-card-receipt { font-size: 12px; }
}

/* ================================================================
   ONLINE-TERMINBUCHUNG
   ================================================================ */

.booking-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.booking-header {
    text-align: center;
    margin-bottom: 2rem;
}

.booking-header h1 {
    font-weight: 700;
    font-size: 1.8rem;
}

.terminart-card {
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    border-radius: var(--ap-radius-sm);
}

.terminart-card:hover {
    border-color: var(--ap-blue);
    transform: translateY(-2px);
    box-shadow: var(--ap-shadow-hover);
}

.terminart-card.selected {
    border-color: var(--ap-blue);
    background: rgba(79,109,245,0.05);
}

.slot-btn {
    min-width: 100px;
    margin: 4px;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.15s;
}

.slot-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.slot-btn.selected {
    background: var(--ap-blue) !important;
    color: #fff !important;
    border-color: var(--ap-blue) !important;
}

.slot-btn:disabled {
    opacity: 0.35;
}

/* ================================================================
   WOCHENKALENDER
   ================================================================ */

.week-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.week-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.week-day-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    overflow: hidden;
    background: var(--ap-surface);
}

.week-day-column.week-day-past {
    opacity: 0.4;
    pointer-events: none;
}

.week-day-column.week-day-today {
    border-color: var(--ap-blue);
    box-shadow: 0 0 0 1px var(--ap-blue);
}

.week-day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.25rem;
    background: var(--ap-surface-muted);
    border-bottom: 1px solid var(--ap-border);
    gap: 2px;
}

.week-day-header.today {
    background: rgba(79,109,245,0.08);
}

.week-day-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ap-text);
}

.week-day-date {
    font-size: 0.75rem;
    color: var(--ap-text-muted);
}

.week-day-slots {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0.25rem;
    gap: 4px;
    min-height: 60px;
}

.week-day-closed {
    font-size: 0.78rem;
    color: var(--ap-text-muted);
    text-align: center;
    padding: 0.75rem 0;
}

.slot-btn-week {
    min-width: unset;
    width: 100%;
    margin: 0;
    font-size: 0.8rem;
    padding: 0.3rem 0.25rem;
}

/* Mobile week calendar */
.week-calendar-mobile {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.week-mobile-day {
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    overflow: hidden;
    background: var(--ap-surface);
}

.week-mobile-day.week-day-today {
    border-color: var(--ap-blue);
}

.week-mobile-day.week-mobile-closed {
    opacity: 0.6;
}

.week-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}

.week-mobile-header:hover {
    background: var(--ap-surface-hover);
}

.week-mobile-closed .week-mobile-header {
    cursor: default;
}

.week-mobile-slots {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem 0.75rem;
    gap: 4px;
    border-top: 1px solid var(--ap-border);
}

/* ================================================================
   TAGESANSICHT
   ================================================================ */

.day-view-container {
    max-width: 600px;
    margin: 0 auto;
}

/* ================================================================
   ADMIN WOCHENKALENDER – Terminkarten
   ================================================================ */

.admin-week-termin {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border-radius: var(--ap-radius-sm);
    border-left: 3px solid var(--ap-border);
    background: var(--ap-surface);
    cursor: pointer;
    transition: box-shadow 0.15s;
    font-size: 0.8rem;
}

.admin-week-termin:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.admin-week-termin .awt-time {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--ap-text);
}

.admin-week-termin .awt-kunde {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--ap-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-week-termin .awt-badge {
    margin-top: 2px;
}

.admin-week-termin .awt-detail {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--ap-border);
}

.admin-week-termin .awt-actions {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.awt-chevron {
    font-size: 0.7rem;
    color: var(--ap-text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.awt-chevron-open {
    transform: rotate(180deg);
}

/* Status-Farben auf Terminkarten */
.awt-status-offen {
    border-left-color: #ffc107;
    background: rgba(255,193,7,0.12);
}

.awt-status-bestaetigt {
    border-left-color: #198754;
    background: rgba(25,135,84,0.10);
}

.awt-status-storniert {
    border-left-color: #dc3545;
    opacity: 0.6;
    background: rgba(220,53,69,0.08);
}

.awt-status-abgeschlossen {
    border-left-color: #6c757d;
    opacity: 0.7;
    background: rgba(108,117,125,0.08);
}

/* ================================================================
   TERMIN STATISTIK – Kompakte Inline-Chips
   ================================================================ */

.termin-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    background: var(--ap-surface);
    font-size: 0.85rem;
}

.termin-stat-value {
    font-weight: 700;
    font-size: 1rem;
}

.termin-stat-label {
    color: var(--ap-text-muted);
    font-size: 0.8rem;
}

.termin-stat-link {
    text-decoration: none;
    color: var(--ap-text);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.termin-stat-link:hover {
    border-color: var(--ap-blue);
    box-shadow: 0 0 0 1px var(--ap-blue);
    color: var(--ap-text);
}

/* ================================================================
   ZEITSTRAHL – Tages- und Wochenansicht
   ================================================================ */

.zeitstrahl-scroll {
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    background: var(--ap-surface);
}

.zeitstrahl-container {
    position: relative;
    margin-left: 52px;
}

.zeitstrahl-hour {
    position: absolute;
    left: -52px;
    right: 0;
    height: 0;
    border-top: 1px solid var(--ap-border);
}

.zeitstrahl-hour-label {
    position: absolute;
    left: 0;
    top: -9px;
    font-size: 0.7rem;
    color: var(--ap-text-muted);
    width: 46px;
    text-align: right;
    padding-right: 6px;
    user-select: none;
}

.zeitstrahl-half-hour {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed rgba(0,0,0,0.06);
}

.zeitstrahl-split-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid var(--ap-border);
    pointer-events: none;
    z-index: 0;
}

.zeitstrahl-pause {
    position: absolute;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(0,0,0,0.04) 4px,
        rgba(0,0,0,0.04) 8px
    );
    z-index: 1;
    pointer-events: none;
    border-radius: 2px;
}

.zeitstrahl-now {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #dc3545;
    z-index: 10;
    pointer-events: none;
}

.zeitstrahl-now::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    background: #dc3545;
    border-radius: 50%;
}

/* Mitarbeiter-Split */
.day-view-container.ma-split-mode { max-width: none; }
.ma-split-mode { overflow: hidden; }
.ma-split-mode .zeitstrahl-termin {
    overflow: hidden;
    padding: 5px 8px !important;
    font-size: 0.78rem;
}
.ma-split-mode .awt-kunde { white-space: normal !important; font-size: 0.82rem !important; }
.ma-split-mode .awt-time { font-size: 0.78rem !important; }

.zeitstrahl-termin {
    position: absolute;
    left: 4px;
    right: 4px;
    z-index: 5;
    overflow: hidden;
    min-height: 24px;
    box-sizing: border-box;
}

.zeitstrahl-termin.zeitstrahl-expanded {
    overflow: visible;
    height: auto !important;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 1 !important;
    background: var(--ap-surface);
}

.zeitstrahl-termin-compact {
    padding: 2px 6px;
    font-size: 0.72rem;
}

.zeitstrahl-termin-compact .awt-time {
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zeitstrahl-termin-compact .awt-chevron {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 0.6rem;
}

.zeitstrahl-termin-compact .awt-kunde {
    font-size: 0.72rem;
}

.zeitstrahl-closed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--ap-text-muted);
    font-size: 1rem;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    background: var(--ap-surface-muted);
}

/* Wochenansicht Zeitstrahl */

.week-zeitstrahl-scroll {
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    background: var(--ap-surface);
}

.week-zeitstrahl-wrapper {
    display: flex;
    min-width: 0;
}

.zeitstrahl-gutter {
    position: sticky;
    left: 0;
    width: 46px;
    min-width: 46px;
    flex-shrink: 0;
    background: var(--ap-surface);
    border-right: 1px solid var(--ap-border);
    z-index: 12;
    display: flex;
    flex-direction: column;
}

.zeitstrahl-gutter-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0.2rem;
    background: var(--ap-surface);
    border-bottom: 1px solid var(--ap-border);
    position: sticky;
    top: 0;
    z-index: 12;
}

.zeitstrahl-gutter-body {
    position: relative;
}

.zeitstrahl-gutter-label {
    position: absolute;
    right: 6px;
    font-size: 0.68rem;
    color: var(--ap-text-muted);
    transform: translateY(-50%);
    user-select: none;
}

.week-zeitstrahl-columns {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
    min-width: 0;
}

.week-zeitstrahl-col {
    border-right: 1px solid var(--ap-border);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.week-zeitstrahl-col:last-child {
    border-right: none;
}

.week-zeitstrahl-col.week-day-past {
    opacity: 0.4;
}

.week-zeitstrahl-col.week-day-today {
    background: rgba(79,109,245,0.02);
}

.week-zeitstrahl-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0.2rem;
    background: var(--ap-surface-muted);
    border-bottom: 1px solid var(--ap-border);
    position: sticky;
    top: 0;
    z-index: 11;
}

.week-zeitstrahl-header.today {
    background: rgba(79,109,245,0.08);
}

.zeitstrahl-day-body {
    position: relative;
    min-width: 0;
}

.zeitstrahl-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    pointer-events: none;
}

.zeitstrahl-closed-overlay {
    position: absolute;
    inset: 0;
    background: var(--ap-surface-muted);
    opacity: 0.6;
    z-index: 1;
}

.zeitstrahl-outside {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.03);
    pointer-events: none;
    z-index: 1;
}

/* Mobile: Wochenansicht untereinander */
@@media (max-width: 767.98px) {
    .week-zeitstrahl-columns {
        grid-template-columns: 1fr;
    }

    .week-zeitstrahl-col {
        border-right: none;
        border-bottom: 1px solid var(--ap-border);
    }

    .zeitstrahl-gutter {
        display: none;
    }

    .day-view-container {
        max-width: none;
    }
}

/* ================================================================
   INFO-CENTER (Offcanvas)
   ================================================================ */

#infoPanel .offcanvas-header {
    background: var(--ap-surface-muted);
}

#infoPanel .nav-tabs {
    border-bottom: none;
}

#infoPanel .nav-tabs .nav-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ap-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.75rem;
}

#infoPanel .nav-tabs .nav-link.active {
    color: var(--ap-blue);
    border-bottom-color: var(--ap-blue);
    background: transparent;
}

.info-card {
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    padding: 0.85rem;
    transition: box-shadow var(--ap-transition);
}

.info-card:hover {
    box-shadow: var(--ap-shadow);
}

.info-card h6 {
    font-weight: 600;
    font-size: 0.9rem;
}

.info-card p {
    font-size: 0.82rem;
    line-height: 1.45;
}

.info-feedback-form textarea {
    border-radius: var(--ap-radius-sm);
}

#infoCenterBtn {
    position: relative;
}

#infoBadge {
    font-size: 0.5rem !important;
    padding: 0.2em 0.4em;
}

/* ================================================================
   HILFE-CENTER
   ================================================================ */

.hilfe-sidebar {
    width: 250px;
    min-height: calc(100vh - 80px);
    border-right: 1px solid #dee2e6;
    background: #fff;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

.hilfe-sidebar-inner { padding: 1rem 0; }

.hilfe-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: #495057;
    text-decoration: none;
    font-size: 0.875rem;
    border-left: 3px solid transparent;
    transition: background-color 0.15s, border-color 0.15s;
}

.hilfe-nav-link:hover { background-color: #f0f4ff; color: var(--ap-blue); }
.hilfe-nav-link.active { background-color: #e7f0ff; color: var(--ap-blue); font-weight: 600; border-left-color: var(--ap-blue); }
.hilfe-nav-link i { width: 1.2em; text-align: center; flex-shrink: 0; }

.hilfe-nav-group {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #adb5bd;
    padding: 0.75rem 1rem 0.25rem;
    margin-top: 0.25rem;
}

.hilfe-content { min-width: 0; padding: 0 1rem; }

.hilfe-search .input-group-text {
    background: var(--ap-surface);
    border-right: none;
}

.hilfe-search .form-control {
    border-left: none;
}

.hilfe-search .form-control:focus {
    box-shadow: none;
    border-color: var(--ap-blue);
}

.hilfe-search .form-control:focus + .btn,
.hilfe-search .form-control:focus ~ .input-group-text {
    border-color: var(--ap-blue);
}

.hilfe-kategorie-card {
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    transition: transform var(--ap-transition), box-shadow var(--ap-transition);
    cursor: pointer;
    background: var(--ap-surface);
}

.hilfe-kategorie-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ap-shadow-hover);
    border-color: var(--ap-blue);
}

.hilfe-kat-icon {
    font-size: 2rem;
    color: var(--ap-blue);
}

.hilfe-artikel-item {
    border-radius: var(--ap-radius-sm) !important;
    margin-bottom: 0.25rem;
    transition: background-color 0.15s;
}

.hilfe-artikel-inhalt {
    font-size: 0.95rem;
    line-height: 1.7;
}

.hilfe-artikel-inhalt h1,
.hilfe-artikel-inhalt h2,
.hilfe-artikel-inhalt h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.hilfe-artikel-inhalt img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ap-radius-sm);
    margin: 1rem 0;
}

.hilfe-artikel-inhalt code {
    background: var(--ap-surface-muted);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.88em;
}

.hilfe-artikel-inhalt pre {
    background: var(--ap-surface-muted);
    padding: 1rem;
    border-radius: var(--ap-radius-sm);
    overflow-x: auto;
}

.hilfe-artikel-inhalt table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.hilfe-artikel-inhalt table th,
.hilfe-artikel-inhalt table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ap-border);
}

.hilfe-artikel-inhalt table th {
    background: var(--ap-surface-muted);
    font-weight: 600;
}

.hilfe-lang-toggle .btn {
    font-weight: 600;
    font-size: 0.8rem;
}

[data-bs-theme="dark"] .hilfe-sidebar { background: var(--ap-surface-muted); border-color: var(--ap-border); }
[data-bs-theme="dark"] .hilfe-nav-link { color: var(--ap-text-muted); }
[data-bs-theme="dark"] .hilfe-nav-link:hover { background-color: rgba(79,109,245,0.06); color: var(--ap-blue); }
[data-bs-theme="dark"] .hilfe-nav-link.active { background-color: rgba(79,109,245,0.1); color: var(--ap-blue); border-left-color: var(--ap-blue); }

/* ================================================================
   HILFE-SIDEBAR (Offcanvas)
   ================================================================ */

#hilfePanel .offcanvas-header { background: var(--ap-surface-muted); }
#hilfePanel .hilfe-artikel-inhalt h3 { font-size: 1.1rem; margin-top: 1.5rem; }
#hilfePanel .hilfe-artikel-inhalt ul,
#hilfePanel .hilfe-artikel-inhalt ol { padding-left: 1.25rem; }
#hilfePanel .hilfe-artikel-inhalt p { font-size: 0.92rem; line-height: 1.6; }
#hilfePinBtn { transition: all 0.15s; }

/* ================================================================
   SLOT-GRID (Neuer Termin Modal – Wochenansicht)
   ================================================================ */

.slot-grid {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
}

.slot-grid-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-width: 0;
}

.slot-grid-day {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--ap-border);
}

.slot-grid-day:last-child {
    border-right: none;
}

.slot-grid-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0.2rem;
    background: var(--ap-surface-muted);
    border-bottom: 1px solid var(--ap-border);
    font-size: 0.78rem;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.slot-grid-header .slot-grid-date {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--ap-text-muted);
}

.slot-grid-header.today {
    background: rgba(79,109,245,0.1);
}

.slot-grid-slots {
    display: flex;
    flex-direction: column;
    padding: 2px;
    gap: 1px;
}

.slot-btn {
    display: block;
    width: 100%;
    border: none;
    padding: 0.15rem 0.2rem;
    font-size: 0.72rem;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    line-height: 1.3;
}

.slot-btn.available {
    background: rgba(25,135,84,0.08);
    color: var(--ap-text);
}

.slot-btn.available:hover {
    background: rgba(25,135,84,0.2);
}

.slot-btn.unavailable {
    background: #ffe8cc;
    color: #8a4b00;
    border-color: #fd7e14;
    cursor: not-allowed;
    text-decoration: line-through;
}

.slot-btn.selected {
    background: var(--ap-blue) !important;
    color: #fff !important;
    font-weight: 600;
    opacity: 1;
}

.slot-grid-closed {
    font-size: 0.72rem;
    color: var(--ap-text-muted);
    text-align: center;
    padding: 1rem 0.25rem;
}

.slot-grid-past .slot-grid-slots {
    opacity: 0.3;
    pointer-events: none;
}

.slot-grid-past .slot-grid-header {
    opacity: 1;
}

/* Kundensuche Autocomplete */
.kunde-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-top: none;
    border-radius: 0 0 var(--ap-radius-sm) var(--ap-radius-sm);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.kunde-search-item {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--ap-border);
    transition: background 0.1s;
}

.kunde-search-item:last-child {
    border-bottom: none;
}

.kunde-search-item:hover {
    background: var(--ap-surface-hover);
}

.kunde-search-item .kunde-detail {
    font-size: 0.75rem;
    color: var(--ap-text-muted);
}

/* Paket-Badge Farben */
.bg-brown { background-color: #8B4513 !important; color: white; }
.bg-orange { background-color: #e67e22 !important; color: white; }

/* ================================================================
   MOBILE / PHONE RESPONSIVE
   Touch-First Ansatz inspiriert vom Sunmi-Modus:
   Grosse Fonts, grosse Touch-Targets, strategisches Spacing
   ================================================================ */

@media (max-width: 991.98px) {

    /* --- Layout: volle Breite nutzen --- */
    .container, .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }
    main { padding: 0.75rem !important; }
    .api-sidebar { display: none !important; }

    /* --- Spalten: einspaltig auf Mobil --- */
    .row > .col-md-6,
    .row > .col-md-4,
    .row > .col-md-3,
    .row.g-2 > .col-auto,
    .row.g-3 > .col-auto { flex: 0 0 100%; max-width: 100%; }

    /* --- Typographie: lesbar, nicht winzig --- */
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.15rem; }

    /* --- Cards: Touch-freundlich --- */
    .card { border-radius: 12px; margin-bottom: 0.75rem; }
    .card-header { padding: 0.75rem 1rem; font-size: 1rem; font-weight: 600; }
    .card-body { padding: 1rem; }

    /* --- Tabellen: horizontal scrollbar, lesbar --- */
    .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table:not(.pos-cart-table) { font-size: 0.95rem; }
    .table:not(.pos-cart-table) th { white-space: nowrap; font-size: 0.85rem; }
    .table:not(.pos-cart-table) td, .table:not(.pos-cart-table) th { padding: 0.6rem 0.5rem; }

    /* --- Buttons: grosse Touch-Targets (min 48px, wie Sunmi) --- */
    .btn { min-height: 44px; font-size: 1rem; padding: 0.5rem 1rem; }
    .btn-sm { min-height: 38px; font-size: 0.9rem; padding: 0.35rem 0.75rem; }
    .d-flex.gap-2 { flex-wrap: wrap; gap: 0.5rem !important; }
    .d-flex.gap-2 > .btn, .d-flex.gap-2 > a.btn { flex: 1 1 auto; text-align: center; }

    /* Ausnahme zur Zeile darueber: das Marken-Logo ist ein .d-flex.gap-2 und wuerde bei engem
       Platz zwischen Punkte-Reihe und Firmenname umbrechen. Zweizeilige Marke = hoehere Navbar,
       und die Kasse rechnet ihre Hoehe gegen die Navbar — die unterste Artikel-Reihe rutschte
       dadurch aus dem Bild (Sunmi V3, 2026-07-28). Lieber abschneiden als umbrechen. */
    .navbar .navbar-brand.d-flex { flex-wrap: nowrap; min-width: 0; }
    .navbar .navbar-brand.d-flex > span { flex-shrink: 0; }

    /* --- Formulare: Touch-freundliche Inputs (min 48px Hoehe) --- */
    .form-control, .form-select { min-height: 48px; font-size: 1rem; }
    .form-label { font-size: 0.95rem; font-weight: 500; margin-bottom: 0.35rem; }
    .form-check-label { font-size: 0.95rem; }
    .form-check-input[type="checkbox"] { width: 2.5em; height: 1.25em; }
    .form-text { font-size: 0.85rem; }

    /* --- Submit-Buttons: prominent, volle Breite ---
       Gemeint sind die grossen Absende-Knoepfe unter einem Formular ("Speichern",
       "Anlegen"). Ein Symbolknopf auf einer Karte ist genau das nicht: Er steckt nur
       deshalb in einem <form>, weil die Aktion einen POST braucht.

       Ohne die Ausnahme traf die Regel ihn trotzdem — sie ist spezifischer als
       .hhk-knopf, und min-height sticht max-height. Der Loeschen-Knopf war dadurch
       52px hoch statt 38 und trug 0,5rem Abstand nach oben, waehrend der Stift daneben
       (kein Submit) unberuehrt blieb. Genau der Groessen- und Hoehenversatz, der auf
       den Karten zu sehen war. */
    form > button[type="submit"]:last-of-type:not(.hhk-knopf),
    form > .btn-primary:last-of-type:not(.hhk-knopf) {
        width: 100%; min-height: 52px; font-size: 1.1rem; font-weight: 600;
        border-radius: 10px; margin-top: 0.5rem;
    }

    /* --- Dropdowns: fingerfreundlich --- */
    .dropdown-item { padding: 0.65rem 1rem; font-size: 1rem; }
    .dropdown-menu { border-radius: 12px; }

    /* --- Navbar: kompakt aber lesbar --- */
    .navbar { padding: 0.4rem 0.75rem; }
    .navbar-brand { font-size: 1rem !important; }
    .navbar-collapse { padding: 0.5rem 0; }
    .navbar-nav .nav-link { padding: 0.65rem 0.5rem; font-size: 1rem; }

    /* --- Alerts: lesbar --- */
    .alert { padding: 0.75rem 1rem; font-size: 0.95rem; border-radius: 10px; }

    /* --- Badges: lesbar --- */
    .badge { font-size: 0.8rem; padding: 0.35em 0.6em; }

    /* --- Offcanvas: volle Breite --- */
    .offcanvas { width: 100% !important; max-width: 100% !important; }
    #infoPanel, #hilfePanel { width: 100% !important; }

    /* --- Tabs: scrollbar, Touch-freundlich --- */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0; }
    .nav-tabs .nav-link { white-space: nowrap; font-size: 1rem; padding: 0.6rem 1rem; min-height: 44px; }

    /* --- Pagination: Touch-Targets --- */
    .pagination .page-link { padding: 0.5rem 0.75rem; font-size: 0.95rem; min-width: 40px; text-align: center; }

    /* --- Modals: Bottom-Sheet Style ---
       [class*="modal-fullscreen"] statt .modal-fullscreen: deckt neben der literalen Klasse auch
       Abstufungen wie modal-fullscreen-md-down ab (siehe #einfachRetourgeldModal in
       Pages/Client/Kasse/Index.cshtml). Ohne das haette dieser Bottom-Sheet-Umbau einen echten
       Vollbild-Dialog auf schmalen Screens in eine unten angeheftete Sheet-Form gezwungen statt
       ihn den ganzen Schirm nutzen zu lassen. */
    .modal-dialog:not([class*="modal-fullscreen"]) {
        margin: 0; max-width: 100%;
        position: fixed; bottom: 0; left: 0; right: 0;
    }
    .modal-dialog:not([class*="modal-fullscreen"]) .modal-content {
        border-radius: 16px 16px 0 0; border-bottom: none;
        max-height: 85vh; overflow-y: auto;
    }
    .modal.fade .modal-dialog:not([class*="modal-fullscreen"]) { transform: translateY(100%); transition: transform 0.3s ease; }
    .modal.show .modal-dialog:not([class*="modal-fullscreen"]) { transform: translateY(0); }
    .modal-header { padding: 1rem 1.25rem; }
    .modal-body { padding: 1rem 1.25rem; }
    .modal-footer { padding: 0.75rem 1.25rem; }
    .modal-footer .btn { min-height: 48px; flex: 1; font-size: 1rem; }

    /* --- Code-Tags --- */
    code { font-size: 0.85rem; }

    /* --- Body: Platz fuer Bottom-Nav (nur wenn vorhanden) --- */
    body:has(.bottom-nav) { padding-bottom: 60px; }
}

/* ================================================================
   BOTTOM NAVIGATION (Mobile App-Style)
   ================================================================ */

.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
    display: flex;
    background: var(--ap-bg, #fff);
    border-top: 1px solid var(--ap-border, #dee2e6);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

[data-bs-theme="dark"] .bottom-nav {
    background: #1e1e2e;
    border-top-color: #2a2a3e;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}

.bottom-nav-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 6px 4px 8px;
    text-decoration: none;
    color: var(--ap-text-muted, #6c757d);
    font-size: 0.7rem; font-weight: 500;
    transition: color 0.15s, transform 0.15s;
    gap: 2px;
    min-height: 56px;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item i { font-size: 1.4rem; line-height: 1; }

.bottom-nav-item.active {
    color: var(--ap-primary, #0ea5a0);
    font-weight: 700;
    transform: translateY(-1px);
}

.bottom-nav-item.active i { font-size: 1.5rem; }

.bottom-nav-item:active { transform: scale(0.92); }

/* Desktop: Bottom-Nav ausblenden */
@media (min-width: 992px) {
    .bottom-nav { display: none !important; }
}

/* Kasse: Bottom-Nav ausblenden (hat Floating-Bar) */
body.sunmi-device .bottom-nav { display: none !important; }
body.sunmi-device { padding-bottom: 0 !important; }

/* Handy-Modus (<768px) — Klasse auf <html> gesetzt, vor Body-Rendering */
.handy-modus .bottom-nav { display: none !important; }
.handy-modus body { padding-bottom: 0 !important; }
.handy-modus #belegeFilter { display: none !important; }
.handy-modus #auswertungFilter { display: none !important; }
.handy-modus #verwaltungMobileDropdown { display: none !important; }
.handy-modus #navbarToggler { display: none !important; }
.handy-modus #handyNavDropdown { display: flex !important; }

/* Handy-Modus: Retourgeld Vollbild */
/* Belege-Seite Handheld: Card-Liste */
.belege-cards { padding: 0.5rem; }
.beleg-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.beleg-card:active { background: #f1f3f5; }
.beleg-card.table-active { background: #e7f1ff; border-color: #86b7fe; }
.beleg-card.storniert { opacity: 0.55; }
.beleg-card .bc-row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}
.beleg-card .bc-renr { font-weight: 800; font-size: 1.05rem; color: #212529; }
.beleg-card .bc-betrag { font-weight: 800; font-size: 1.15rem; color: #198754; }
.beleg-card .bc-betrag.negativ { color: #dc3545; }
.beleg-card .bc-row2 {
    display: flex;
    justify-content: space-between;
    color: #6c757d;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}
.beleg-card .bc-row3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.35rem;
    border-top: 1px dashed #e9ecef;
    font-size: 0.8rem;
    gap: 0.4rem;
}
.beleg-card .bc-kunde {
    color: #495057;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.beleg-card .bc-meta { display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.beleg-card .bc-zahlung-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: capitalize;
}
.beleg-card .zb-bar { background: #d1e7dd; color: #0f5132; }
.beleg-card .zb-karte { background: #cfe2ff; color: #084298; }
.beleg-card .zb-gemischt { background: #fff3cd; color: #664d03; }
.beleg-card .status-ok { color: #198754; }
.beleg-card .status-storno { color: #dc3545; }
.beleg-card .status-null { color: #fd7e14; }
.beleg-card .status-storniert { color: #6c757d; }
.beleg-card .bc-storno-btn,
.beleg-card .bc-print-btn {
    background: none;
    border-radius: 0.4rem;
    cursor: pointer;
    line-height: 1;
    margin-left: 0.2rem;
    /* Groesser fuer bessere Touch-Bedienung am Handheld */
    padding: 0.45rem 0.7rem;
    font-size: 1.25rem;
    min-width: 46px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.beleg-card .bc-storno-btn { border: 1px solid #dc3545; color: #dc3545; }
.beleg-card .bc-storno-btn:active { background: #dc3545; color: #fff; }
.beleg-card .bc-print-btn { border: 1px solid #0d6efd; color: #0d6efd; }
.beleg-card .bc-print-btn:active { background: #0d6efd; color: #fff; }

/* Belege-Karten im dunklen Modus.
   Die Regeln oben sind fest auf Hell verdrahtet — weisse Flaeche, dunkle Schrift. In einer
   sonst dunklen Oberflaeche leuchtete die Belegliste bisher weiss auf. Nachgezogen wird
   ausschliesslich hier unten: Der helle Modus bleibt dadurch nachweislich unveraendert,
   was bei einer Umstellung der Regeln oben auf Variablen nicht der Fall waere
   (--ap-border ist im Hellen deutlich blasser als das hier verwendete #dee2e6). */
[data-bs-theme="dark"] .beleg-card { background: var(--ap-surface); border-color: var(--ap-border); }
[data-bs-theme="dark"] .beleg-card:active { background: var(--ap-surface-hover); }
[data-bs-theme="dark"] .beleg-card.table-active { background: #2b3a52; border-color: #4a6fa5; }
[data-bs-theme="dark"] .beleg-card .bc-renr { color: var(--ap-text); }
[data-bs-theme="dark"] .beleg-card .bc-betrag { color: #4ade80; }
[data-bs-theme="dark"] .beleg-card .bc-betrag.negativ { color: #ff6b5b; }
[data-bs-theme="dark"] .beleg-card .bc-row2 { color: var(--ap-text-muted); }
[data-bs-theme="dark"] .beleg-card .bc-row3 { border-top-color: var(--ap-border); }
[data-bs-theme="dark"] .beleg-card .bc-kunde { color: var(--ap-text); }
[data-bs-theme="dark"] .beleg-card .zb-bar { background: rgba(25,135,84,.28); color: #8ee9b4; }
[data-bs-theme="dark"] .beleg-card .zb-karte { background: rgba(13,110,253,.28); color: #a8c7ff; }
[data-bs-theme="dark"] .beleg-card .zb-gemischt { background: rgba(255,193,7,.24); color: #ffd97a; }
[data-bs-theme="dark"] .beleg-card .status-ok { color: #4ade80; }
[data-bs-theme="dark"] .beleg-card .status-storno { color: #ff6b5b; }
[data-bs-theme="dark"] .beleg-card .status-null { color: #ffa552; }
[data-bs-theme="dark"] .beleg-card .status-storniert { color: var(--ap-text-muted); }

/* ================================================================
   HANDHELD-KARTEN (Praefix hhk-)

   Ein Baustein fuer alle Listen unter "Mehr", die am breiten Bildschirm
   eine Tabelle zeigen: Artikel, Kunden, Kategorien, Gutscheine,
   Fremdgutscheine. Bewusst EIN gemeinsamer Block und nicht fuenf
   Nachbauten von .beleg-card — sonst muss beim naechsten Mal wieder
   jeder einzeln nachgezogen werden. Genau daran krankte .beleg-card
   im dunklen Modus (siehe die Nachtraege direkt darueber).

   Aufbau jeder Karte: oben das, wonach gesucht wird, rechts daneben
   die Zahl, auf die es ankommt; darunter hoechstens zwei Nebenzeilen;
   Zustaende als Chip statt als Spalte; hoechstens drei Knoepfe.

   Die Kennfarbe kommt je Karte als eigene Eigenschaft aus dem
   Razor-Quelltext (--hhk-farbe). Ohne Kennfarbe bleibt der Streifen
   unsichtbar — er wird nie dekorativ eingefaerbt.
   ================================================================ */

.hhk-liste { display: flex; flex-direction: column; gap: .5rem; padding: .25rem 0 .5rem; }

.hhk-karte {
    background: var(--ap-surface, #fff);
    border: 1px solid var(--ap-border);
    border-left: 4px solid var(--hhk-farbe, transparent);
    border-radius: .7rem;
    padding: .6rem .7rem;
    display: flex; flex-direction: column; gap: .35rem;
    color: var(--ap-text); text-decoration: none;
}
.hhk-karte:hover { color: var(--ap-text); }
/* Abgeschwaecht: ausgelistet, eingeloest, nicht aktiv. */
.hhk-karte.hhk-blass { opacity: .55; }

.hhk-kopf { display: flex; align-items: baseline; gap: .5rem; }
.hhk-titel {
    font-weight: 700; font-size: 1rem; line-height: 1.2;
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Kartennummern: gleiche Zeichenbreite, damit Ziffernblöcke untereinander stehen. */
.hhk-titel.hhk-nummer { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; }
.hhk-wert { font-weight: 800; font-size: 1.08rem; white-space: nowrap; }
.hhk-wert.hhk-gruen { color: #198754; }
.hhk-wert.hhk-rot { color: #dc3545; }
.hhk-wert.hhk-neben { font-weight: 500; font-size: .8rem; color: var(--ap-text-muted); }

.hhk-zeile {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    font-size: .8rem; color: var(--ap-text-muted); line-height: 1.3; min-width: 0;
}
.hhk-zeile .hhk-stark { color: var(--ap-text); font-weight: 600; }
.hhk-fuss { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }

.hhk-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    background: var(--ap-surface-muted); color: var(--ap-text);
    border-radius: 1rem; padding: .12rem .55rem;
    font-size: .72rem; font-weight: 600; white-space: nowrap;
}
/* Kategoriefarbe als Chip: Der Farbwert kommt aus den Daten, die Schrift ist immer weiss. */
.hhk-chip.hhk-farbchip { color: #fff; }
/* Ein Chip, der ETWAS TUT, braucht eine Beruehrflaeche — 20px hoch trifft am Geraet
   niemand zuverlaessig. Gilt fuer den Druck/Ziel-Knopf auf der Kategorie-Karte. */
.hhk-chip.hhk-chip-knopf {
    min-height: 38px; padding: .3rem .7rem; border: 1px solid var(--ap-border);
    font-size: .78rem;
}
.hhk-chip.hhk-c-gruen { background: #d1e7dd; color: #0f5132; }
.hhk-chip.hhk-c-rot   { background: #f8d7da; color: #842029; }
.hhk-chip.hhk-c-gelb  { background: #fff3cd; color: #664d03; }
.hhk-chip.hhk-c-blau  { background: #cfe2ff; color: #084298; }

/* align-self ist hier so wichtig wie align-items.
   Die Knopfgruppe steht mal in der Fusszeile (.hhk-fuss, mittig ausgerichtet), mal in der
   Kopfzeile (.hhk-kopf) — und die richtet an der SCHRIFTGRUNDLINIE aus, damit Titel und
   Wert auf einer Linie sitzen. Ohne align-self haengt die ganze Gruppe dort an der
   Grundlinie des Titels und sitzt sichtbar tiefer als dieselben Knoepfe auf einer anderen
   Seite. align-items ordnet nur INNERHALB der Gruppe, align-self die Gruppe selbst. */
.hhk-aktionen {
    display: flex; align-items: center; align-self: center;
    gap: .35rem; margin-left: auto;
}

/* Ein Teil der Aktionen steckt in einem <form> (Loeschen, Aufnehmen, Aktiv-Umschalter),
   ein anderer nicht. Genau diese steckten schief in der Reihe: mal tiefer gesetzt, mal
   in die Hoehe gezogen und schmal gequetscht, weil ein <form> als eigenes Flex-Element
   andere Regeln erbt als ein Knopf daneben.

   Deshalb wird das Formular hier zu einer durchsichtigen Huelle gemacht, die sich wie
   der Knopf darin verhaelt — und die Groesse des Knopfes ist ueber min/max festgenagelt.
   Ein Knopf, den man am Geraet treffen soll, darf seine Groesse nicht davon abhaengig
   machen, worin er zufaellig steckt. */
.hhk-aktionen > *,
.hhk-aktionen form { flex: 0 0 auto; align-self: center; }
.hhk-aktionen form {
    display: flex; align-items: center;
    margin: 0; padding: 0; border: 0; background: none;
}

.hhk-knopf {
    box-sizing: border-box;
    width: 38px; min-width: 38px; max-width: 38px;
    height: 38px; min-height: 38px; max-height: 38px;
    flex: 0 0 38px; align-self: center;
    padding: 0; line-height: 1;
    border-radius: .6rem; border: 1px solid var(--ap-border);
    background: var(--ap-surface-muted);
    color: var(--ap-text-muted); text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.hhk-knopf.hhk-b-hell  { color: #0d6efd; border-color: rgba(13,110,253,.45); }
.hhk-knopf.hhk-b-gruen { color: #198754; border-color: rgba(25,135,84,.45); }
.hhk-knopf.hhk-b-rot   { color: #dc3545; border-color: rgba(220,53,69,.45); }
.hhk-knopf.hhk-b-stern { color: #f0a500; border-color: rgba(240,165,0,.5); }
.hhk-knopf:disabled { opacity: .4; }

.hhk-abschnitt {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ap-text-muted); margin: .9rem .1rem .4rem;
}
.hhk-abschnitt:first-child { margin-top: .2rem; }

/* Aufklappbarer Abschnitt. Bewusst <details>/<summary> statt Bootstrap-Collapse:
   kein JavaScript, funktioniert also auch ohne Verbindung, und die ganze
   Ueberschrift ist von Haus aus die Aufklapp-Flaeche. */
.hhk-aufklapp {
    border: 1px solid var(--ap-border); border-radius: .7rem;
    background: var(--ap-surface, #fff); margin-top: .5rem;
}
.hhk-aufklapp > summary {
    list-style: none; cursor: pointer; min-height: 44px;
    display: flex; align-items: center; gap: .5rem; padding: .4rem .75rem;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ap-text-muted);
}
.hhk-aufklapp > summary::-webkit-details-marker { display: none; }
.hhk-aufklapp > summary .hhk-pfeil { transition: transform .15s ease; }
.hhk-aufklapp[open] > summary .hhk-pfeil { transform: rotate(90deg); }
.hhk-aufklapp .hhk-liste { padding: 0 .5rem .5rem; }

.hhk-leer { text-align: center; padding: 2rem 1rem; color: var(--ap-text-muted); font-size: .9rem; }

/* ----------------------------------------------------------------
   Formular direkt unter .modal-content

   .modal-content ist eine flexible Spalte; .modal-body bekommt daraus
   seine begrenzte Hoehe und scrollt. Steht ein <form> dazwischen, ist
   die Kette unterbrochen: Der Rumpf waechst ins Unendliche, und der
   Fussbereich mit dem Speichern-Knopf rutscht aus dem Bild. Im
   Vollbild-Modal faellt das sofort auf, im kleinen Fenster nicht.

   Diese Klasse reicht die Flex-Eigenschaften durch das Formular
   hindurch. Sie gehoert an JEDES <form>, das direkt unter
   .modal-content sitzt.
   ---------------------------------------------------------------- */
.modal-content > form.modal-formular {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
}

/* ----------------------------------------------------------------
   Artikel bearbeiten am Handheld (unter 768px)

   Das Artikelformular ist als einziges kein Fenster, sondern eine
   Spalte, die ueber der Liste eingeblendet wird (#artikelFormCol).
   Am breiten Bildschirm ist das richtig; am Geraet schoebe es die
   Liste weit nach unten, und nach dem Speichern waere man seine
   Stelle darin los.

   Deshalb legt es sich hier formatfuellend darueber. Die Kopfzeile
   der Karte bleibt beim Scrollen stehen, damit der Schliessen-Knopf
   immer erreichbar ist — bei sieben Reitern mit vielen Feldern ist
   das kein Luxus.

   z-index 1040: ueber der Kopfleiste des Portals (1030), aber unter
   den Bootstrap-Fenstern (1050/1055). Ein Farb-Waehler oder eine
   Rueckfrage aus dem Formular heraus liegt also weiterhin obenauf.
   ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
    #artikelFormCol:not(.d-none) {
        position: fixed; inset: 0; z-index: 1040;
        margin: 0; padding: .5rem;
        background: var(--ap-surface-muted, #f1f3f5);
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    #artikelFormCol:not(.d-none) > .card { margin-bottom: 0 !important; }
    #artikelFormCol:not(.d-none) .card-header {
        position: sticky; top: 0; z-index: 1;
        background: var(--ap-surface, #fff);
    }
    /* Schliessen ist hier der Weg zurueck zur Liste — entsprechend treffbar. */
    #artikelFormCol:not(.d-none) .card-header .btn-close {
        width: 1.2rem; height: 1.2rem;
        padding: 1rem; margin: -.5rem -.25rem -.5rem 0;
    }
}

/* Zurueck-Leiste auf den Seiten unter "Mehr" (nur unter 768px, siehe _VerwaltungLayout).
   Bewusst flach und schmal: Sie ist ein Weg zurueck, kein Bedienelement, und darf der
   Liste darunter keine Hoehe wegnehmen. Der Pfeil traegt trotzdem 44px Beruehrflaeche. */
.hhm-zurueckleiste {
    display: flex; align-items: center; gap: .4rem;
    padding: .25rem .5rem .5rem;
    font-size: .85rem; color: var(--ap-text-muted);
    min-width: 0;
}
.hhm-zurueckleiste > a {
    width: 44px; height: 44px; margin-left: -.35rem; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ap-text); font-size: 1.1rem; text-decoration: none;
}
.hhm-zurueckleiste-pfad { color: var(--ap-text-muted); }
.hhm-zurueckleiste-trenner { font-size: .7rem; opacity: .5; }
.hhm-zurueckleiste-titel {
    color: var(--ap-text); font-weight: 600; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Warum etwas fehlt. Steht ueber der Liste, wenn die Geraeteregel Eintraege
   zurueckhaelt — sonst wirkt der Schalter am PC folgenlos und die Liste kaputt. */
.hhk-hinweis {
    font-size: .78rem; line-height: 1.4; color: var(--ap-text-muted);
    background: var(--ap-surface-muted); border-radius: .6rem; padding: .5rem .7rem;
}

/* Dunkler Modus: Flaechen, Linien und Text laufen ueber die Variablen und brauchen nichts.
   Nachzuziehen sind nur die gesaettigten Toene — als Chip-Hintergrund und als Wertfarbe
   verschwinden sie sonst vor der dunklen Flaeche. */
[data-bs-theme="dark"] .hhk-wert.hhk-gruen { color: #4ade80; }
[data-bs-theme="dark"] .hhk-wert.hhk-rot   { color: #ff6b5b; }
[data-bs-theme="dark"] .hhk-chip.hhk-c-gruen { background: rgba(25,135,84,.28); color: #8ee9b4; }
[data-bs-theme="dark"] .hhk-chip.hhk-c-rot   { background: rgba(220,53,69,.28); color: #ffa8a0; }
[data-bs-theme="dark"] .hhk-chip.hhk-c-gelb  { background: rgba(255,193,7,.24); color: #ffd97a; }
[data-bs-theme="dark"] .hhk-chip.hhk-c-blau  { background: rgba(13,110,253,.28); color: #a8c7ff; }
[data-bs-theme="dark"] .hhk-knopf.hhk-b-hell  { color: #6ea8fe; }
[data-bs-theme="dark"] .hhk-knopf.hhk-b-gruen { color: #4ade80; }
[data-bs-theme="dark"] .hhk-knopf.hhk-b-rot   { color: #ff6b5b; }
[data-bs-theme="dark"] .hhk-knopf.hhk-b-stern { color: #ffc94d; }

/* Handheld: Inline-Belegvorschau direkt unter der angeklickten Card */
.beleg-inline-wrap {
    background: #fff;
    border: 1px solid #86b7fe;
    border-radius: 0.6rem;
    margin: -0.15rem 0 0.6rem;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.12);
}
.beleg-inline-wrap .beleg-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0 0.15rem 0.5rem;
    border-bottom: 1px dashed #e9ecef;
    margin-bottom: 0.5rem;
}
.beleg-inline-wrap #inlineBelegVorschau { max-height: 60vh; overflow-y: auto; }

.handy-modus .retourgeld-numpad { max-width: 100%; gap: 8px; }
.handy-modus .retourgeld-numpad button { aspect-ratio: 1; height: auto; font-size: 2.4rem; font-weight: 700; }
.handy-modus .euro-scheine button { min-width: 58px; height: 56px; font-size: 1.3rem; }

/* Verwaltung-Suche: Aktuell eingeloggtes Geraet hervorheben (Geraete-Verwaltung) */
.table tr.current-device {
    background-color: var(--bs-primary-bg-subtle);
    border-left: 3px solid var(--bs-primary);
}
.table tr.current-device > td:first-child {
    position: relative;
}

/* Bon-Drucker-Offline-Banner: ueber der Kasse-Page, bleed-to-edge.
   Wenn aktiv (body.has-bon-banner gesetzt von kasse-drucker-ampel.js):
   .pos-Margin neutralisieren + Hoehe um Banner-Hoehe reduzieren, sonst zieht
   das default `margin-top: -1rem` von .pos den Warenkorb ueber den Banner. */
#bon-offline-banner {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}
body.has-bon-banner .pos {
    margin-top: 0;
    height: calc(100vh - 56px - var(--bon-banner-h, 44px) - 1rem);
}

/* ================================================================
   VERWALTUNG-HUB — Karten-Grid + Live-Filter
   ================================================================ */

.hub-search-wrap {
    position: sticky; top: 0; z-index: 100;
    background: var(--ap-bg, #f5f7fa);
    padding: 1rem 0; margin-bottom: .5rem;
}
[data-bs-theme="dark"] .hub-search-wrap { background: #1a1a2e; }

.hub-search-input {
    font-size: 1.1rem; padding: .9rem 1rem .9rem 3rem; border-radius: 12px;
    border: 1px solid var(--ap-border);
    background: var(--ap-surface, #fff);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.hub-search-input:focus {
    outline: 0;  /* Bootstrap-Default-Outline weg, sonst doppelter Ring */
    box-shadow: 0 4px 16px rgba(79,109,245,0.18);
    border-color: #4f6df5;
}
[data-bs-theme="dark"] .hub-search-input:focus {
    /* Mittleres Indigo (#4f6df5) wirkt im Dark-Mode wie eine harte dunkelblaue
       Umrandung — wir nehmen einen halbtransparenten Ton der mit dem dunklen
       Surface harmonisch verschmilzt, plus einen weicheren Glow-Shadow. */
    border-color: rgba(127, 145, 250, 0.55);
    box-shadow: 0 0 0 3px rgba(79, 109, 245, 0.18);
}
.hub-search-icon {
    position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
    font-size: 1.2rem; color: var(--ap-text-muted); pointer-events: none;
}

.hub-group-title {
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ap-text-muted);
    margin: 1.5rem 0 .8rem; padding-left: .25rem;
}

.hub-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.hub-card {
    background: var(--ap-surface, #fff);
    border: 1px solid var(--ap-border);
    border-radius: 12px; padding: 16px;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column; gap: 8px;
    transition: all .15s ease; cursor: pointer; min-height: 110px;
}
.hub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(79,109,245,0.12);
    border-color: rgba(79,109,245,0.3);
    color: inherit;
}
[data-bs-theme="dark"] .hub-card:hover {
    box-shadow: 0 8px 24px rgba(79,109,245,0.25);
}

.hub-card-icon { font-size: 1.5rem; }
.hub-card-title { font-weight: 600; font-size: 1rem; line-height: 1.2; }
.hub-card-desc { font-size: .82rem; color: var(--ap-text-muted); line-height: 1.35; }

.hub-empty {
    text-align: center; padding: 3rem 1rem;
    color: var(--ap-text-muted);
}
.hub-empty .bi {
    font-size: 3rem; opacity: .35;
    display: block; margin-bottom: 1rem;
}

.hub-settings-block {
    background: var(--ap-surface, #fff);
    border: 1px solid var(--ap-border);
    border-radius: 12px; padding: 1rem; margin-top: 1rem;
}
.hub-settings-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem .75rem; border-radius: 8px;
    text-decoration: none; color: inherit;
    transition: background .1s;
}
.hub-settings-item:hover {
    background: rgba(79,109,245,0.08);
    color: inherit;
}
.hub-settings-item .bi { color: #4f6df5; }
.hub-settings-meta {
    font-size: .75rem; color: var(--ap-text-muted);
    margin-left: auto;
}

mark.hub-highlight {
    background: rgba(255, 220, 100, 0.5);
    color: inherit;
    padding: 0 2px; border-radius: 2px;
}

/* ================================================================
   MENUESEITE FUER SCHMALE BILDSCHIRME (/Client/Menue, Praefix hhm-)

   Ersetzt das frueher aufklappende Menue hinter dem Raster-Knopf.
   Unterhalb von 768px ist diese Seite die einzige Navigation (der
   Hamburger-Knopf ist dort ausgeblendet, siehe .handy-modus weiter
   oben) — entsprechend grosszuegig sind die Beruehrflaechen: 62px
   hohe Zeilen ueber die volle Breite statt der rund 40px, die ein
   Eintrag im Aufklappmenue hatte.

   Die Kennfarbe jedes Eintrags kommt als eigene Eigenschaft aus dem
   Razor-Quelltext (--hhm-farbe, --hhm-ton und die beiden dunklen
   Entsprechungen). Bewusst nicht per color-mix(): darauf ist auf den
   Android-WebViews der Kassengeraete kein Verlass.
   ================================================================ */

.hhm-seite { max-width: 640px; margin: 0 auto; }

.hhm-kopf { display: flex; align-items: center; gap: .625rem; margin: .125rem .125rem .625rem; }
.hhm-kopf .hhm-titel { font-weight: 700; font-size: 1.05rem; }
.hhm-zurueck {
    width: 42px; height: 42px; border-radius: 10px;
    border: 1px solid var(--ap-border); background: var(--ap-surface, #fff);
    display: grid; place-items: center; font-size: 1.05rem;
    color: var(--ap-text-muted); text-decoration: none; flex: 0 0 auto;
}
.hhm-zurueck:hover { color: var(--ap-text); background: var(--ap-surface-hover); }

.hhm-gruppe {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ap-text-muted); margin: .875rem .125rem .4375rem;
}
.hhm-gruppe:first-of-type { margin-top: .25rem; }

.hhm-zeile {
    background: var(--ap-surface, #fff);
    border: 1px solid var(--ap-border);
    border-left: 4px solid transparent;
    border-radius: 12px;
    min-height: 62px;
    display: flex; align-items: center; gap: .75rem;
    padding: 0 .75rem; margin-bottom: .5rem;
    text-decoration: none; color: var(--ap-text);
    transition: background .12s ease;
}
.hhm-zeile:hover { background: var(--ap-surface-hover); color: var(--ap-text); }

.hhm-sym {
    width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
    display: grid; place-items: center;
    font-size: 1.2rem; color: #fff;
    /* Weisses Symbol auf gesaettigter Flaeche traegt in BEIDEN Modi — hier wird
       deshalb nicht auf die aufgehellte Farbe umgeschaltet. */
    background: var(--hhm-farbe, #6c757d);
}
.hhm-name { font-weight: 600; font-size: 1rem; flex: 1 1 auto; }
.hhm-pfeil { color: var(--ap-text-muted); opacity: .55; font-size: .95rem; }
.hhm-punkt { font-size: .5rem; color: var(--hhm-farbe); }

/* Aktuelle Seite: farbige Kante, getoente Flaeche, fetter Name. */
.hhm-zeile.hhm-hier { border-left-color: var(--hhm-farbe); background: var(--hhm-ton); }
.hhm-zeile.hhm-hier:hover { background: var(--hhm-ton); }
.hhm-zeile.hhm-hier .hhm-name { font-weight: 700; }

/* Als 4px-Kante und 10%-Toenung verschwindet eine gesaettigte Dunkelfarbe vor der
   dunklen Flaeche. Nur hier wird deshalb auf die aufgehellte Farbe gewechselt. */
[data-bs-theme="dark"] .hhm-zeile.hhm-hier {
    border-left-color: var(--hhm-farbe-dunkel);
    background: var(--hhm-ton-dunkel);
}
[data-bs-theme="dark"] .hhm-zeile.hhm-hier:hover { background: var(--hhm-ton-dunkel); }
[data-bs-theme="dark"] .hhm-punkt { color: var(--hhm-farbe-dunkel); }

.hhm-abmelden { margin-top: .875rem; border-top: 1px solid var(--ap-border); padding-top: .75rem; }
.hhm-abmelden a {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 52px; border-radius: 12px;
    border: 1px solid rgba(231, 76, 94, .45); background: var(--ap-surface, #fff);
    color: #d9534f; font-weight: 600; text-decoration: none;
}
.hhm-abmelden a:hover { background: rgba(231, 76, 94, .08); color: #d9534f; }

/* Volltext-Trefferliste mit Auszuegen ("Im Seiteninhalt gefunden") */
.hub-content-group { margin-bottom: .9rem; }
.hub-content-group:last-child { margin-bottom: 0; }
.hub-content-page {
    display: flex; align-items: center; gap: .4rem;
    padding: .15rem 0 .35rem; font-size: .9rem;
}
.hub-content-page .bi { color: #4f6df5; }
.hub-content-hit {
    display: block; padding: .5rem .7rem; margin-top: .35rem;
    border: 1px solid var(--ap-border); border-radius: 8px;
    background: var(--ap-surface, #fff); color: inherit;
    text-decoration: none; font-size: .82rem; line-height: 1.45;
}
.hub-content-hit:hover { background: rgba(79,109,245,0.08); color: inherit; }

/* ================================================================
   COMMAND-PALETTE (Ctrl+K)
   ================================================================ */

.cp-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: flex-start; justify-content: center;
    z-index: 2000; padding-top: 10vh;
}
.cp-backdrop.show { display: flex; }

.cp-modal {
    width: min(640px, 92vw);
    background: var(--ap-surface, #fff);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    border: 1px solid var(--ap-border);
    overflow: hidden;
}

.cp-header {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--ap-border);
}
.cp-header .bi {
    font-size: 1.3rem;
    color: var(--ap-text-muted);
}

.cp-input {
    flex: 1; border: none; outline: none;
    background: transparent;
    font-size: 1.05rem; color: inherit;
}

.cp-esc {
    font-size: .7rem; padding: .2rem .5rem;
    border: 1px solid var(--ap-border); border-radius: 4px;
    color: var(--ap-text-muted);
}

.cp-results {
    max-height: 60vh;
    overflow-y: auto;
    padding: .5rem 0;
}

.cp-section-title {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ap-text-muted);
    padding: .6rem 1.2rem .3rem;
}

.cp-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem 1.2rem;
    cursor: pointer; user-select: none;
}
.cp-item:hover, .cp-item.active {
    background: rgba(79,109,245,0.12);
}
.cp-item .bi { font-size: 1.1rem; }
.cp-item-title { font-weight: 500; }
.cp-item-meta {
    font-size: .78rem;
    color: var(--ap-text-muted);
    margin-left: auto;
}

.cp-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--ap-text-muted);
    font-size: .9rem;
}
.cp-empty .bi {
    font-size: 2rem; opacity: .4;
    display: inline-block; margin-bottom: .5rem;
}

mark.cp-highlight {
    background: rgba(255, 220, 100, 0.5);
    color: inherit;
    padding: 0 2px; border-radius: 2px;
}

/* Body-Hit-Anzeige in Command-Palette: dezent unter dem Titel. */
.cp-item-text {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.cp-body-hit {
    font-size: 0.72rem;
    color: var(--ap-text-muted);
    line-height: 1.2;
}
.cp-body-hit .bi { font-size: .7em; opacity: .7; }
.cp-body-hit code {
    color: var(--ap-blue, #4f6df5);
    background: transparent;
    padding: 0;
    font-size: inherit;
}

/* Body-Hit-Anzeige in Hub-Karten: kleine Pill am Ende. */
.hub-card-bodyhit {
    font-size: 0.72rem;
    line-height: 1.2;
}
.hub-card-bodyhit .bi { opacity: .7; }
.hub-card-bodyhit code {
    color: var(--ap-blue, #4f6df5);
    background: transparent;
    padding: 0;
    font-size: inherit;
}

/* ================================================================
   SETTING-ANCHOR Highlight-Animation
   ================================================================ */

.setting-section {
    /* Wrapper-Class fuer Setting-Abschnitte. Optisch unsichtbar. */
    scroll-margin-top: 80px; /* damit Sticky-Headers nicht verdecken */
}

@keyframes settingHighlightPulse {
    0%   { background: transparent; }
    20%  { background: rgba(255, 220, 100, 0.4); }
    100% { background: transparent; }
}

.setting-section-highlight {
    animation: settingHighlightPulse 2s ease;
    border-radius: 8px;
}

/* === Geraete-Verwaltung: Akkordeon-Cards === */
.geraet-card-head {
    cursor: pointer;
}
.geraet-card-head:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}
.geraet-chevron {
    transition: transform 0.2s ease;
    color: var(--bs-secondary-color, #6c757d);
}
.geraet-card-head[aria-expanded="true"] .geraet-chevron {
    transform: rotate(180deg);
}
.geraet-card.current-device {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 1px var(--bs-primary, #0d6efd) inset;
}
.geraet-badges .badge {
    font-weight: 500;
}
/* Body: kompaktes Flex-Layout — Felder nebeneinander, Label ueber dem Control,
   umbrechend auf schmalen Screens. */
.geraet-card-body .geraet-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: flex-start;
}
.geraet-card-body .geraet-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
/* Feld auf eigener voller Zeile (erzwingt Umbruch im Flex-Wrap-Container) */
.geraet-card-body .geraet-field-block {
    flex: 1 0 100%;
}
.geraet-card-body .geraet-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
}
/* Drucker-Unterfelder (Bon/Kueche/Schank) nebeneinander */
.geraet-card-body .geraet-subfield {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.geraet-card-body .geraet-sublabel {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6c757d);
}
.geraet-card-body .geraet-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* ===== Kunden-News-Karte (Editor-Vorschau + Dashboard-Karten) ===== */
.news-card{background:#fff; border:1px solid #e5e7eb; border-radius:14px;
           box-shadow:0 4px 16px rgba(13,79,139,.08); overflow:hidden; border-top:4px solid #0d4f8b;}
.news-card .nc-img{width:100%; max-height:200px; object-fit:cover; display:block; background:#f1f5f9;}
.news-card .nc-body{padding:18px 20px 20px;}
.nc-badge{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.3px;
           padding:3px 10px; border-radius:20px;}
.news-card .nc-badge{margin-bottom:8px;}
.nc-badge.neu{background:#d1e7dd; color:#0f5132;}
.nc-badge.tipp{background:#cff4fc; color:#055160;}
.nc-badge.update{background:#cfe2ff; color:#084298;}
.nc-badge.aktion{background:#fff3cd; color:#664d03;}
.news-card h3.nc-title{font-size:18px; font-weight:700; margin:0 0 8px; color:#1f2933;}
.news-card .nc-text{font-size:14px; line-height:1.6; color:#374151;}
.news-card .nc-text p:last-child{margin-bottom:0;}
.news-card .nc-text ul{padding-left:20px; margin-bottom:8px;}
.news-card .nc-text a{color:#0d6efd;}
.news-card .nc-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.news-card .nc-foot{display:flex; align-items:center; justify-content:space-between;
           gap:10px; margin-top:16px; padding-top:12px; border-top:1px solid #e5e7eb;}
.news-card .nc-foot .date{font-size:11.5px; color:#6b7280;}

/* ===== Dashboard-News Variante A: "Neuigkeiten"-Panel ===== */
.news-panel{background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;}
.news-panel-head{padding:12px 18px; border-bottom:1px solid #e5e7eb; font-weight:600;
                 display:flex; align-items:center; gap:8px;}
.news-panel-count{background:#0d4f8b; color:#fff; border-radius:20px; font-size:11px; padding:1px 8px;}
.news-row{display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid #e5e7eb;}
.news-row:last-child{border-bottom:0;}
.news-row-ico{width:38px; height:38px; flex:0 0 auto; border-radius:9px; background:#eef4fb;
              color:#0d4f8b; display:flex; align-items:center; justify-content:center; font-size:18px;}
.news-row-txt{flex:1; min-width:0;}
.news-row-ti{font-weight:600; font-size:14px;}
.news-row-su{color:#6b7280; font-size:12.5px;}
.news-row-su p{margin-bottom:.25rem;}
.news-row-su p:last-child{margin-bottom:0;}
.news-row-act{display:flex; align-items:center; gap:6px; flex:0 0 auto;}
.news-foot{display:flex; align-items:center; gap:12px; padding:9px 18px; font-size:13px; border-top:1px solid #e5e7eb; background:#fafbfc;}
@media (max-width:575px){.news-row{flex-wrap:wrap;} .news-row-act{width:100%; justify-content:flex-end;}}
[data-bs-theme="dark"] .news-panel{background:var(--ap-surface); border-color:var(--ap-border);}
[data-bs-theme="dark"] .news-panel-head{border-bottom-color:var(--ap-border); color:var(--ap-text);}
[data-bs-theme="dark"] .news-row{border-bottom-color:var(--ap-border);}
[data-bs-theme="dark"] .news-row-ico{background:rgba(255,255,255,0.06); color:#6ea8dc;}
[data-bs-theme="dark"] .news-row-ti{color:var(--ap-text);}
[data-bs-theme="dark"] .news-row-su{color:var(--ap-text-muted);}
[data-bs-theme="dark"] .news-foot{border-top-color:var(--ap-border); background:var(--ap-surface-muted);}

/* Verwaltung-Suche: Highlight des Deep-Link-Treffers auf der Zielseite */
mark.suche-flash{background-color:#fff3cd; color:inherit; border-radius:3px; padding:0 .1em;}
.suche-flash{animation:sucheFlash 1.6s ease 0s 2;}
@keyframes sucheFlash{0%,100%{box-shadow:0 0 0 0 rgba(255,193,7,0);}30%{box-shadow:0 0 0 4px rgba(255,193,7,.55);}}

/* Gäste-Panel im Tischplan (Gastbuchung, PC-Zwilling zum Handheld-Gäste-Bereich): tritt an die
   Stelle des Plans, wenn der Gäste-Chip in der Bereichs-Leiste aktiv ist. Card-Look wie der Rest
   des Portals (--ap-surface/--ap-border sind bereits pro Theme definiert), damit es sich nicht
   roh gegen den Plan-Hintergrund (--ap-bg) absetzt. */
/* Das Panel sitzt als Flex-Kind in .op-canvas-fwrap, dessen Hoehe von .op-layout fest
   vorgegeben ist (calc(100vh - var(--tischplan-top))) und das min-height:0 setzt. Ohne
   flex/min-height/overflow wird das Panel auf die Resthoehe zusammengedrueckt, die Liste
   laeuft mit overflow:visible darueber hinaus und die untersten Gaeste sind nicht mehr
   erreichbar — bei einer Veranstaltung mit vielen offenen Gaesten also genau dann, wenn
   man den Bereich braucht. Die Liste selbst scrollt, der Kopf mit "Neuer Gast" bleibt. */
.pc-gaeste-panel{background:var(--ap-surface); border:1px solid var(--ap-border); border-radius:10px; padding:16px;
                 flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
.pc-gaeste-panel > .list-group{overflow-y:auto; min-height:0;}