/* ================================================================
   Grill Gruppe Dashboard — Design System v2
   Mobile-first · Enterprise SaaS
   ================================================================ */

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
    /* Fundament P0 (12.11.2026, entscheidungen.md Kap. 2-4). Namen bleiben,
       neue Tokens kommen dazu. --bg-root bleibt (test_ios_statusleiste.py). */
    color-scheme: dark;

    --bg-root:       #0B0D11;
    --bg-surface:    #12141C;
    --bg-elevated:   #1A1C26;
    --bg-hover:      #1F2130;
    --bg-active:     #252738;
    --border:        #252834;
    --border-subtle: #1E2029;
    --border-strong: #626779;   /* Umriss Feld, Auswahl, Ankreuzkaestchen, Segment (3:1) */
    --hairline:        rgba(232,233,237,.08);
    --hairline-strong: rgba(232,233,237,.12);

    --text-primary:  #E8E9ED;
    --text-secondary:#A3A8B8;
    --text-muted:    #858B9E;
    /* Aliase (heute ohne Definition: Lieferzeiten-Balkenwerte, Projektkarten) */
    --text:          var(--text-primary);
    --surface:       var(--bg-surface);

    /* R-3: Steel blue accent (Daniel pick 2026-05-23) */
    --accent:        #1E40AF;   /* nur Flaeche: Hauptknopf, G-Zeichen, Ankreuzkaestchen */
    --accent-dim:    rgba(138,166,248,.12);
    --accent-hover:  #2A4DC4;
    --accent-ink:    #8AA6F8;   /* Akzent als Schrift, Icon, Unterstrich, Link, Datenblau */
    --focus-ring:    #8AA6F8;
    --on-accent:     #FFFFFF;
    --danger-fill:   #C62828;   /* gefuellter Gefahrknopf im Bestaetigungsdialog, "Kritisch" */

    /* Sidebar dimensions */
    --sidebar-w:           240px;
    --sidebar-w-collapsed: 72px;

    --status-red:    #F0585D;
    --status-red-dim:rgba(240,88,93,.12);
    --status-amber:  #E5A430;
    --status-amber-dim:rgba(229,164,48,.12);
    --status-green:  #30A46C;
    --status-green-dim:rgba(48,164,108,.12);

    /* Firmenfarben (Kap. 8.1): Farbe haengt am Namen, GG.seriesFor(name) */
    --series-1: #4A91F8;   /* Meat'n'Great */
    --series-2: #7056C9;   /* BABOSSA */
    --series-3: #B5418B;   /* MeatnFood */
    --series-4: #9F8D00;   /* BBQ Saloon */
    --series-5: #AE5000;   /* 3F BBQ GmbH */
    --series-6: #009DB7;   /* Kitchenland */
    --viz-accent:  #8AA6F8;
    --viz-context: #4A4F60;
    --viz-axis:    #3A3E4D;
    --viz-grid:    var(--border);
    --viz-ramp-1:  #3E5FB8;   /* P50 */
    --viz-ramp-2:  #5F82DF;   /* Durchschnitt */
    --viz-ramp-3:  #9DB4F2;   /* P95 */
    /* Lagerfarben (Frage 7, Kap. 8.1: Farbe folgt dem Objekt; geprueft mit dem dataviz-Validator,
       anfragen/start.md 2). Kein Rot und kein Bernstein (Fehler- und Warnfarbe). */
    --lager-gg:    #2569A8;
    --lager-bm:    #9172FE;
    --lager-ld:    #C47C3B;
    --lager-bbs-l: #496D16;
    --lager-kl:    #BE037D;
    --lager-kl-w:  #38A391;

    --radius:        8px;
    --radius-sm:     4px;
    --radius-md:     10px;
    --radius-lg:     14px;
    --radius-sheet:  16px;

    --font-sans:     'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono:     'JetBrains Mono', 'GG Mono Ersatz', 'GG Mono Ersatz Win', 'SF Mono', 'Fira Code', monospace;

    /* Schriftskala (Kap. 3.2): Groesse / Zeile */
    --fs-12: 12px;  --lh-12: 16px;
    --fs-13: 13px;  --lh-13: 20px;
    --fs-14: 14px;  --lh-14: 20px;
    --fs-15: 15px;  --lh-15: 20px;
    --fs-16: 16px;  --lh-16: 24px;
    --fs-17: 17px;  --lh-17: 22px;
    --fs-20: 20px;  --lh-20: 28px;
    --fs-24: 24px;  --lh-24: 28px;
    --fs-28: 28px;  --lh-28: 32px;
    --fs-32: 32px;  --lh-32: 40px;
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-mark:    600;   /* nur G-Zeichen */

    --shadow-sm:     0 1px 2px rgba(0,0,0,.24);
    --shadow-md:     0 8px 24px rgba(0,0,0,.40);
    --shadow-overlay:0 16px 48px rgba(0,0,0,.55);

    /* Bewegung (Kap. 4.5) */
    --ease:          cubic-bezier(.22,1,.36,1);
    --transition:    160ms cubic-bezier(.22,1,.36,1);
    --dur-press:     120ms;
    --dur-feedback:  160ms;
    --dur-in:        200ms;
    --dur-out:       160ms;
    --dur-sheet:     240ms;
    --dur-spin:      800ms;

    /* Spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* Steuerhoehen (Kap. 4.3) */
    --control-h-sm:       28px;
    --control-h:          36px;
    --control-h-touch:    44px;
    --control-h-touch-lg: 48px;

    /* Ebenen (Kap. 4.6), nur fuer neue Elemente; alte hohe Werte bleiben */
    --z-sticky:    2;
    --z-fab:       50;
    --z-actionbar: 80;
    --z-tabbar:    90;
    --z-topbar:    100;
    --z-chat:      150;
    --z-sheet:     190;
    --z-more:      199;
    --z-modal:     200;
    --z-pflicht:   300;  /* Sperrbild "Mitteilungen einschalten" (ueber Modal, unter Toast) */
    --z-toast:     400;
    --z-tooltip:   1000;

    /* Polster am Handy: Tab-Leiste, Aktionsleiste, Schwebeknopf (Frage 3: Feedback
       ins Mehr-Blatt, nichts schwebt mehr -> 0). Der Rahmen setzt die Werte. */
    --gg-tabbar-h:    0px;
    --gg-actionbar-h: 0px;
    --gg-fab-h:       0px;
}


/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-sans);
    background: var(--bg-root);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Better focus for keyboard nav */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════
   NAVIGATION — R-3: Collapsible sidebar (desktop) + Drawer (mobile)
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared: G mark ─────────────────────────────────────────── */
.mark, .topbar-brand .mark, .sidebar-brand .mark {
    width: 28px;
    height: 28px;
    background: var(--accent);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--on-accent);
    flex-shrink: 0;
}

/* ── Mobile-only topbar ─────────────────────────────────────── */
.topbar-mobile {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 56px;
    padding: 0 var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--bg-root);
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition);
    font-size: 20px;
}
.menu-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Sidebar (desktop) / Drawer (mobile) ─────────────────────── */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: width 250ms cubic-bezier(.4,0,.2,1), transform 250ms cubic-bezier(.4,0,.2,1);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-4);
    height: 72px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 15px;
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar-brand-name {
    transition: opacity 150ms;
}

.sidebar-drawer-close {
    display: none;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 18px;
    align-items: center;
    justify-content: center;
}
.sidebar-drawer-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.sidebar-nav {
    flex: 1;
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius);
    border-left: 3px solid transparent;
    margin-left: -3px;  /* align with edge */
    min-height: 44px;   /* touch target */
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.sidebar-item.active {
    background: var(--accent-dim);
    color: var(--text-primary);
    font-weight: 500;
    border-left-color: var(--accent-ink);
}
.sidebar-item i {
    font-size: 20px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}
.sidebar-item-label { transition: opacity 150ms; }

/* BETA-Pill an noch-experimentellen Sidebar-Items. Rote Pill-Form, schiebt
   sich rechts an den Rand, schrumpft im Collapsed-State weg (analog
   .sidebar-item-label). Rot = klares "noch nicht final"-Signal. */
.sidebar-beta {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--status-red-dim);
    color: var(--status-red);
    border: 1px solid color-mix(in srgb, var(--status-red) 35%, transparent);
    line-height: 1.4;
    transition: opacity 150ms;
}
html.sidebar-collapsed .sidebar-beta {
    opacity: 0;
    pointer-events: none;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.sidebar-footer {
    padding: var(--sp-3);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.sidebar-iconbtn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
}
.sidebar-iconbtn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border);
}

/* ── Sidebar section labels (Admin, Mein Konto) ─────────────── */
.sidebar-section {
    margin-top: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-section-label {
    padding: 6px 12px 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

/* ── Sidebar user block (Sprint 6.3a) ───────────────────────── */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}
.sidebar-user-meta {
    min-width: 0;
    overflow: hidden;
    transition: opacity 150ms;
}
.sidebar-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.sidebar-user-role {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.sidebar-user-role.role-accent { color: var(--accent-ink); }
.sidebar-user-role.role-amber  { color: var(--status-amber); }
.sidebar-user-role.role-blue   { color: var(--accent-ink); }
.sidebar-user-role.role-green  { color: var(--status-green); }
.sidebar-user-role.role-muted  { color: var(--text-muted); }

/* ── Sidebar collapsed state (desktop only) ─────────────────── */
html.sidebar-collapsed .sidebar {
    width: var(--sidebar-w-collapsed);
}
html.sidebar-collapsed .sidebar-brand-name,
html.sidebar-collapsed .sidebar-item-label,
html.sidebar-collapsed .sidebar-section-label,
html.sidebar-collapsed .sidebar-user-meta {
    opacity: 0;
    pointer-events: none;
}
html.sidebar-collapsed .sidebar-section-label {
    height: 0;
    padding: 0;
    overflow: hidden;
}
html.sidebar-collapsed .sidebar-header {
    justify-content: center;
}
html.sidebar-collapsed .sidebar-user {
    justify-content: center;
    padding: var(--sp-3);
}
html.sidebar-collapsed .sidebar-footer {
    flex-direction: column;
}

/* ── Mobile drawer backdrop ─────────────────────────────────── */
.nav-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 199;
    opacity: 0;
    transition: opacity 200ms ease;
}
.nav-drawer-backdrop.open {
    display: block;
    opacity: 1;
}

/* ══════ MOBILE (default) ══════ */
@media (max-width: 768px) {
    .topbar-mobile { display: flex; }
    .sidebar {
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
    }
    .sidebar.drawer-open {
        transform: translateX(0);
    }
    .sidebar-drawer-close { display: inline-flex; }
    .sidebar-footer { flex-direction: column; align-items: stretch; }
    .sidebar-iconbtn { width: 100%; height: 44px; justify-content: flex-start; padding: 0 var(--sp-3); gap: var(--sp-3); }
    .sidebar-iconbtn::after {
        content: attr(title);
        font-size: 13px;
        font-family: var(--font-sans);
    }
    /* Der Collapsed-Block (Z. 374 ff.) steht ausserhalb jeder Media-Query,
       obwohl sein Kommentar "desktop only" sagt. Auf dem Handy wurde das
       Drawer dadurch zu einem 72px-Rail mit unsichtbaren Labels, sobald am
       Desktop einmal eingeklappt wurde (Klasse liegt am <html> und wird
       serverseitig persistiert). Hier zurueckgeholt. */
    html.sidebar-collapsed .sidebar { width: var(--sidebar-w); }
    html.sidebar-collapsed .sidebar-brand-name,
    html.sidebar-collapsed .sidebar-item-label,
    html.sidebar-collapsed .sidebar-section-label,
    html.sidebar-collapsed .sidebar-group-label,
    html.sidebar-collapsed .sidebar-user-meta { opacity: 1; pointer-events: auto; }

    /* Hide desktop-only sidebar collapse button on mobile */
    #sidebar-collapse-btn { display: none; }
}

/* ══════ DESKTOP ══════ */
@media (min-width: 769px) {
    .topbar-mobile { display: none; }
    .nav-drawer-backdrop { display: none !important; }
    body { padding-left: var(--sidebar-w); transition: padding-left 250ms cubic-bezier(.4,0,.2,1); }
    /* Die Collapsed-Regel MUSS auf body zielen, nicht auf html: die Klasse
       sitzt auf <html> (siehe _nav.html), das Einruecken macht aber body.
       Vorher stand hier `html.sidebar-collapsed { padding-left: ... }` — dann
       kamen 72px am html ZUSAETZLICH zu den 240px am body, der Inhalt stand
       bei 312px statt 72px und rueckte beim Einklappen nach rechts statt
       nach links (gemessen 2026-09-19). Betraf jede Seite. */
    html.sidebar-collapsed body { padding-left: var(--sidebar-w-collapsed); }
    .sidebar-drawer-close { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   THEME — Light mode overrides (default = dark)
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    /* Helles Design (entscheidungen.md 2.2): eigene Status-Toene, damit sie als
       Schrift auf Weiss lesbar sind (heute erbten sie die dunklen Werte). */
    color-scheme: light;

    --bg-root:       #FAFAF9;
    --bg-surface:    #FFFFFF;
    --bg-elevated:   #FFFFFF;
    --bg-hover:      #F4F4F5;
    --bg-active:     #E4E4E7;
    --border:        #E5E7EB;
    --border-subtle: #F1F3F5;
    --border-strong: #8A8E99;
    --hairline:        rgba(24,24,27,.08);
    --hairline-strong: rgba(24,24,27,.16);

    --text-primary:  #18181B;
    --text-secondary:#52525B;
    --text-muted:    #6B6B74;
    --text:          var(--text-primary);
    --surface:       var(--bg-surface);

    --accent:        #1E40AF;
    --accent-dim:    rgba(30,64,175,.10);
    --accent-hover:  #1E3A8A;
    --accent-ink:    #1E40AF;
    --focus-ring:    #1E40AF;
    --on-accent:     #FFFFFF;
    --danger-fill:   #C62828;

    --status-red:    #C8282D;
    --status-red-dim:rgba(200,40,45,.10);
    --status-amber:  #9A5206;
    --status-amber-dim:rgba(154,82,6,.10);
    --status-green:  #13703A;
    --status-green-dim:rgba(19,112,58,.10);

    --series-1: #267CDF;
    --series-2: #583BAB;
    --series-3: #B23E88;
    --series-4: #8F7E00;
    --series-5: #952200;
    --series-6: #008BA9;
    --viz-accent:  #1E40AF;
    --viz-context: #B4B7C0;
    --viz-axis:    #C9CBD1;
    --viz-grid:    var(--border);
    --viz-ramp-1:  #9DB4F2;
    --viz-ramp-2:  #4F72D6;
    --viz-ramp-3:  #1E3A8A;
    --lager-gg:    #1A43D0;
    --lager-bm:    #A473EE;
    --lager-ld:    #D66919;
    --lager-bbs-l: #465C12;
    --lager-kl:    #8D1171;
    --lager-kl-w:  #2FA094;

    --shadow-sm:     0 1px 2px rgba(0,0,0,.05);
    --shadow-md:     0 8px 24px rgba(0,0,0,.06);
    --shadow-overlay:0 16px 48px rgba(0,0,0,.12);
}

[data-theme="light"] body {
    background: var(--bg-root);
    color: var(--text-primary);
}


/* ══════════════════════════════════════════════════════════════
   PAGE LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.page {
    /* 2026-09-22 (Daniel, 2560-px-Monitor): vorher max-width 1440px + margin
       auto — auf breiten Monitoren stand der Inhalt bei 596px, ein Viertel der
       Breite links leer, und wirkte wie der Sidebar-Versatz-Bug (11b). Jetzt
       fluid: die Seite nutzt die Breite neben der Sidebar. Seiten mit
       Lesetext/Formularen begrenzen sich selbst (eigene Wrapper, z. B.
       .es-wrap, .pw-page). */
    max-width: none;
    margin: 0;
    padding: var(--sp-4);
}
/* Formular- und Listenseiten (Zeilen mit Beschriftung links, Bedienelement
   rechts): volle Monitorbreite reisst Feld und Beschriftung auseinander, und
   Popovers am Zeilenende ragen aus dem Fenster (Umlagerung, 2026-09-22).
   Deshalb wie frueher auf 1440px begrenzt — aber LINKSBUENDIG an der Sidebar,
   nicht zentriert: kein Leerraum links, Luft bleibt rechts. */
.page.page-narrow {
    max-width: 1440px;
}

@media (min-width: 769px) {
    .page { padding: var(--sp-6); }
}

.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.page-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
}

@media (min-width: 769px) {
    .page-title { font-size: 20px; }
}

.page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}


/* ══════════════════════════════════════════════════════════════
   METRICS / KPIs
   ═══════════════════════════════════════════════════════════════ */

/* KPI-Kacheln: echte Karten (Gap statt 1px-Raster) -> kein grauer Block
   mehr beim Umbruch. Akzent-Hairline links nur beim Hover (dezent). */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    margin-bottom: var(--sp-6);
}

@media (min-width: 769px) {
    .metric-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

.metric {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    transition: border-color var(--transition), box-shadow var(--transition);
}

@media (min-width: 769px) {
    .metric { padding: var(--sp-4) var(--sp-5); }
}

.metric:hover {
    border-color: var(--accent-ink);
    box-shadow: var(--shadow-sm);
}

.metric::before {
    content: "";
    position: absolute;
    left: 0; top: var(--sp-3); bottom: var(--sp-3);
    width: 2px;
    border-radius: 2px;
    background: var(--accent);
    opacity: 0;
    transition: opacity var(--transition);
}
.metric:hover::before { opacity: .8; }

.metric-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: var(--sp-1);
}

.metric-value {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--font-mono);
    line-height: 1.15;
    color: var(--text-primary);
}

@media (min-width: 769px) {
    .metric-value { font-size: 26px; }
}

.metric-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--sp-1);
}


/* ══════════════════════════════════════════════════════════════
   PANELS
   ═══════════════════════════════════════════════════════════════ */

.panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--sp-6);
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    gap: var(--sp-2);
    flex-wrap: wrap;
}

@media (min-width: 769px) {
    .panel-header { padding: var(--sp-3) var(--sp-5); }
}

.panel-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.panel-body {
    padding: var(--sp-4);
}

@media (min-width: 769px) {
    .panel-body { padding: var(--sp-5); }
}


/* ══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Fade hint for horizontal scroll on mobile */
}

/* Desktop: Tabelle scrollt intern -> sticky thead bleibt zuverlaessig stehen.
   (overflow-x:auto allein macht .table-wrap zwar zur Scroll-Box, aber ohne Hoehe
   greift das sticky beim Seiten-Scroll nicht.) Kurze Tabellen scrollen nicht. */
@media (min-width: 769px) {
    .table-wrap {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
}

:where(table) {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

:where(thead th) {
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--bg-surface);
    z-index: 2;
}

thead th.sortable {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

thead th.sortable:hover { color: var(--text-secondary); }

thead th .sort-arrow {
    font-size: 12px;
    margin-left: 2px;
    opacity: 0.7;
}

:where(tbody tr) {
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition);
}

tbody tr:hover { background: var(--bg-hover); }
tbody tr.clickable { cursor: pointer; }

:where(tbody td) {
    padding: var(--sp-2) var(--sp-3);
    vertical-align: middle;
    color: var(--text-primary);
    white-space: nowrap;
}

td.num {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
}

td.muted { color: var(--text-muted); }

/* Touch: taller rows on mobile */
@media (max-width: 768px) {
    :where(tbody td) { padding: var(--sp-3); }
    :where(thead th) { padding: var(--sp-3); }
}


/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    min-height: 36px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
    white-space: nowrap;
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}

.btn:hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--bg-active); }
.btn:active { background: var(--bg-active); }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-sm { padding: 4px 10px; font-size: 12px; min-height: 28px; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-hover); }
.btn.loading { opacity: 0.6; pointer-events: none; }

/* Mobile: full-width action buttons */
@media (max-width: 768px) {
    .btn { min-height: 44px; padding: 10px 16px; }
    .btn-sm { min-height: 44px; min-width: 44px; padding: 8px 12px; }
}


/* ══════════════════════════════════════════════════════════════
   STATUS INDICATORS
   ═══════════════════════════════════════════════════════════════ */

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.green  { background: var(--status-green); }
.status-dot.amber  { background: var(--status-amber); }
.status-dot.red    { background: var(--status-red); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.badge-red    { background: var(--status-red-dim);   color: var(--status-red); }
.badge-amber  { background: var(--status-amber-dim); color: var(--status-amber); }
.badge-green  { background: var(--status-green-dim); color: var(--status-green); }
.badge-default{ background: var(--bg-elevated);      color: var(--text-muted); }
.badge-accent { background: var(--accent-dim);       color: var(--accent-ink); }
.badge-blue   { background: var(--accent-dim);    color: var(--accent-ink); }
.badge-muted  { background: var(--bg-elevated);      color: var(--text-secondary); }


/* ══════════════════════════════════════════════════════════════
   FORM CONTROLS
   ═══════════════════════════════════════════════════════════════ */

:where(input[type="text"],
input[type="search"],
input[type="number"],
select) {
    background: var(--bg-root);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color var(--transition);
    min-height: 36px;
}

@media (max-width: 768px) {
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="tel"],
    input[type="url"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom */
    }
}

:where(input:focus, select:focus) { border-color: var(--focus-ring); }
:where(input)::placeholder { color: var(--text-muted); }


/* ══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 200;
    padding: var(--sp-4);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-overlay.open { display: flex; }

/* Mobile: full-screen sheet from bottom */
.modal {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--sp-5);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 201;
}

@media (min-width: 769px) {
    .modal-overlay { align-items: center; justify-content: center; }
    .modal {
        position: relative;
        bottom: auto;
        border-radius: var(--radius-lg);
        max-width: 640px;
        max-height: 85vh;
    }
}

.modal-close {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover { color: var(--text-primary); background: var(--bg-hover); }

.modal-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: var(--sp-4);
    padding-right: 48px;
    line-height: 1.4;
}


/* ── Detail Grid (inside modal) ───────────────────────────────── */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: var(--sp-4);
}

.detail-item {
    background: var(--bg-root);
    padding: var(--sp-3) var(--sp-4);
}

.detail-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.detail-value {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-mono);
}

.detail-value.highlight {
    color: var(--accent-ink);
    font-size: 18px;
}


/* ══════════════════════════════════════════════════════════════
   CONTROLS BAR
   ═══════════════════════════════════════════════════════════════ */

.controls-bar {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
}

@media (min-width: 769px) {
    .controls-bar { padding: var(--sp-3) var(--sp-5); }
}

.controls-bar .search-input {
    width: 100%;
}

@media (min-width: 769px) {
    .controls-bar .search-input { width: 260px; }
}

/* Mobile: stack controls */
@media (max-width: 768px) {
    .controls-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .controls-bar .search-input { width: 100%; }
    .controls-bar select { width: 100%; }
    .controls-bar .ml-auto {
        margin-left: 0;
        display: flex;
        gap: var(--sp-2);
    }
    .controls-bar .ml-auto .btn { flex: 1; }
}


/* ══════════════════════════════════════════════════════════════
   STATUS BAR
   ═══════════════════════════════════════════════════════════════ */

.status-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.status-bar .item {
    display: flex;
    align-items: center;
    gap: 5px;
}


/* ══════════════════════════════════════════════════════════════
   LOADING / EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent-ink);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

.spinner-lg { width: 24px; height: 24px; border-width: 2.5px; }

@keyframes spin { to { transform: rotate(360deg); } }

.loading-state {
    text-align: center;
    padding: 48px var(--sp-4);
    color: var(--text-muted);
    font-size: 13px;
}

.loading-state .spinner { margin-bottom: var(--sp-3); }

.empty-state {
    text-align: center;
    padding: 48px var(--sp-4);
    color: var(--text-muted);
    font-size: 13px;
}


/* ══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.text-green  { color: var(--status-green); }
.text-success { color: var(--status-green); } /* Alias, genutzt in umlagerung.html (seit master ohne Regel) */
.text-red    { color: var(--status-red); }
.text-amber  { color: var(--status-amber); }
.font-mono   { font-family: var(--font-mono); }
.font-600    { font-weight: 500; }
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.ml-auto     { margin-left: auto; }
.nowrap      { white-space: nowrap; }
.gap-sm      { gap: var(--sp-2); }
.gap-md      { gap: var(--sp-3); }

/* Truncate text */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

@media (min-width: 769px) {
    .truncate { max-width: 300px; }
}

/* Hide on mobile / desktop */
.hide-mobile { display: none; }
@media (min-width: 769px) { .hide-mobile { display: initial; } }
/* Tabellenzellen bleiben Zellen (initial waere inline, die Zelle hinge dann in einer anonymen Zelle) */
@media (min-width: 769px) { :is(td, th).hide-mobile { display: table-cell; } }
.hide-desktop { display: initial; }
@media (min-width: 769px) { .hide-desktop { display: none; } }


/* ══════════════════════════════════════════════════════════════
   PAGE: DASHBOARD
   ═══════════════════════════════════════════════════════════════ */

.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

@media (min-width: 769px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
}

.chart-container {
    position: relative;
    height: 260px;
    padding: var(--sp-4);
}

/* Lager-Karten: echte Karten mit Hero-Bestand + Status-Badge.
   Ein dominanter Wert (Bestand) statt 2x2-Zahlenwand; Niedrig nur als
   Warn-Badge wenn >0 (sonst ruhig). Hairline-Top in Firmen-/Chartfarbe. */
.wh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: var(--sp-3);
    background: transparent;
}
.wh-card {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    /* KEIN overflow:hidden: es schnitt die Info-Tooltips (.info-dot::after,
       260px breit) an der Kartenkante ab (Daniel 2026-09-22). Die Kopflinie
       folgt den runden Ecken ueber ihren eigenen border-radius. */
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.wh-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--wh-accent, var(--accent));
    opacity: .9;
}
.wh-card:hover {
    box-shadow: var(--shadow-md);
}
.wh-card-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.wh-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--wh-accent, var(--accent)) 14%, transparent);
    color: var(--wh-accent, var(--accent-ink));
    font-size: 16px;
}
.wh-id { min-width: 0; flex: 1 1 auto; }
.wh-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wh-code {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    margin-top: 1px;
}
.wh-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-mono);
    line-height: 1;
    white-space: nowrap;
}
.wh-pill i { font-size: 13px; }
.wh-pill-warn { background: var(--status-amber-dim); color: var(--status-amber); }
.wh-hero {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.wh-hero-value {
    font-size: 26px;
    font-weight: 500;
    font-family: var(--font-mono);
    line-height: 1;
    color: var(--text-primary);
}
.wh-hero-unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}
.wh-meta {
    display: flex;
    gap: var(--sp-4);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border-subtle);
}
.wh-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.wh-meta-item > i {
    font-size: 14px;
    color: var(--text-muted);
    flex: 0 0 auto;
}
.wh-meta-value {
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}
.wh-meta-label {
    font-size: 12px;
    color: var(--text-muted);
}
@media (max-width: 768px) {
    .wh-grid { grid-template-columns: 1fr; gap: var(--sp-2); }
    .wh-card { padding: var(--sp-4); }
    .wh-pill { height: 26px; }
}

/* Lagerwert-Chart-Kopf: Headline-Gesamtwert + 30-Tage-Delta-Pille */
.chart-head { align-items: flex-start; }
.chart-head-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.chart-head .panel-title { line-height: 1; }
.chart-head-figure {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.chart-head-value {
    font-size: 26px;
    font-weight: 500;
    font-family: var(--font-mono);
    line-height: 1;
    color: var(--text-primary);
}
.chart-head-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-mono);
    line-height: 1;
}
.chart-head-delta i { font-size: 14px; }
.chart-head-delta.is-up   { background: var(--status-green-dim); color: var(--status-green); }
.chart-head-delta.is-down { background: var(--status-red-dim);   color: var(--status-red); }
.chart-head-period {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
}
@media (max-width: 768px) {
    .chart-head { flex-direction: column; gap: var(--sp-2); }
}

/* Collapsible sections */
.collapse-toggle {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.collapse-icon {
    display: inline-block;
    transition: transform 200ms ease;
    font-size: 12px;
    color: var(--text-muted);
}

.collapse-icon.open { transform: rotate(0deg); }
.collapsed { display: none; }

/* Table scroll container */
.table-scroll {
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ══════════════════════════════════════════════════════════════
   PAGE: EINKAUF
   ═══════════════════════════════════════════════════════════════ */

.action-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.action-info { flex: 1; min-width: 200px; }

.action-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: var(--sp-1);
}

.action-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-sans);
    color: var(--on-accent);
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
}

.btn-download:hover { background: var(--accent-hover); }
.btn-download.loading { opacity: 0.6; pointer-events: none; }

.status-msg {
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.status-msg.success { background: var(--status-green-dim); color: var(--status-green); }
.status-msg.error { background: var(--status-red-dim); color: var(--status-red); }


/* ══════════════════════════════════════════════════════════════
   PAGE: BEWERTUNG
   ═══════════════════════════════════════════════════════════════ */

.company-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

@media (min-width: 769px) {
    .company-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 3 Spalten: 6 Firmen (seit Kitchenland 2026-10-03) = 2 volle Reihen */
@media (min-width: 1101px) {
    .company-grid { grid-template-columns: repeat(3, 1fr); }
}

.company-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5);
}

.company-card .cname {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: var(--sp-3);
}

.company-card .cval {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--font-mono);
}

.company-card .cmeta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--sp-2);
}

.month-btns {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.month-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-sans);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
    min-height: 32px;
}

.month-btn:hover { color: var(--text-secondary); border-color: var(--bg-active); }
.month-btn.active { background: var(--accent-dim); color: var(--accent-ink); border-color: var(--accent-ink); }

/* ── Line Chart (Bestandsentwicklung) ────────────────────────── */
.lc-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.lc-toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 var(--sp-1);
}

.lc-wrap {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-3) var(--sp-2);
    position: relative;
}

.lc-svg {
    /* Height + viewBox werden vom JS-Renderer dynamisch gesetzt (an Container-Pixel
       gebunden → 1:1 Mapping → maximale Schärfe). Default-Höhe nur damit der
       Container nicht kollabiert während des ersten Loads. */
    display: block;
    width: 100%;
    height: 300px;
    overflow: visible;
}

.lc-grid-line {
    stroke: var(--border);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.lc-axis-x-label {
    fill: var(--text-muted);
    font-size: 12px;
    font-family: var(--font-sans);
}

.lc-axis-y-label {
    fill: var(--text-muted);
    font-size: 12px;
    font-family: var(--font-mono);
    text-anchor: end;
}

.lc-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: opacity 200ms ease, stroke-width 200ms ease;
}

.lc-line.is-dim { opacity: 0.15; }
.lc-line.is-hover { stroke-width: 2.5; }

.lc-area {
    transition: opacity 200ms ease;
}
.lc-area.is-dim { opacity: 0.06; }

.lc-dot {
    fill: var(--bg-root);
    stroke-width: 2;
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: none;
}
.lc-dot.is-visible { opacity: 1; }

.lc-crosshair {
    stroke: var(--text-muted);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}
.lc-crosshair.is-visible { opacity: 0.5; }

.lc-hover-overlay {
    fill: transparent;
    cursor: crosshair;
}

/* ── KPI Info-Tooltip (Erklaerung + Berechnung je KPI) ──────────── */
.info-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 1px solid var(--border);
    cursor: help;
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
    user-select: none;
    flex-shrink: 0;
}
.info-dot:hover, .info-dot:focus-visible {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
    outline: none;
}
.info-dot::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 260px;
    white-space: normal;
    text-align: left;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: var(--shadow-md);
    /* Layout-Check 2026-09-22: ein per visibility versteckter Tooltip zaehlt
       trotzdem zur Scrollbreite — an der letzten KPI-Kachel ragte er 36-59px
       ueber den Rand und erzeugte auf dem Dashboard (1024-1100px) einen
       horizontalen Scrollbalken. display:none nimmt ihn aus dem Layout. */
    display: none;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    pointer-events: none;
}
.info-dot:hover::after, .info-dot:focus-visible::after {
    display: block;
    opacity: 1;
    visibility: visible;
}
.info-dot.tip-below::after { bottom: auto; top: calc(100% + 8px); }
/* Panel-Koepfe sitzen an der Oberkante eines overflow:hidden-Panels — ein
   Tooltip nach oben wird dort immer abgeschnitten (Layout-Check 2026-09-22:
   "Lagerwert-Entwicklung"). Deshalb im Panel-Kopf grundsaetzlich nach unten. */
.panel-header .info-dot::after { bottom: auto; top: calc(100% + 8px); }
/* Rand-Ausrichtung: ui.js setzt beim Hover tip-left (Tooltip endet an der
   rechten Punkt-Kante) bzw. tip-right (beginnt an der linken), wenn der
   zentrierte Tooltip aus dem Viewport ragen wuerde. */
.info-dot.tip-left::after  { left: auto; right: 0; transform: none; }
.info-dot.tip-right::after { left: 0; transform: none; }
@media (max-width: 640px) {
    .info-dot::after { max-width: 200px; }
}

.lc-tooltip {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-3);
    min-width: 180px;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease;
    z-index: 5;
}
.lc-tooltip.is-visible { opacity: 1; }

.lc-tooltip-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}

.lc-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 3px 0;
    font-size: 12px;
}

.lc-tooltip-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.lc-tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lc-tooltip-value {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: right;
}

.lc-tooltip-total {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
}
.lc-tooltip-total .lc-tooltip-name { color: var(--text-primary); font-weight: 500; }
.lc-tooltip-total .lc-tooltip-value { color: var(--text-primary); font-weight: 500; font-size: 12px; }

.lc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: center;
    margin-top: var(--sp-4);
    padding: var(--sp-2) 0;
}

.lc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.lc-legend-item:hover { background: var(--bg-hover); color: var(--text-primary); }
/* Ausgeblendete Serie (Kap. 8.3): Schluessel hohl, Text muted, kein Durchstreichen */
.lc-legend-item.is-off { color: var(--text-muted); }
.lc-legend-item.is-off .lc-legend-dot { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--text-muted); opacity: 1; }
.lc-legend-item.is-off .lc-legend-label { text-decoration: none; opacity: 1; }

.lc-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background var(--transition), opacity var(--transition);
}

.lc-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 280px;
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 768px) {
    /* .lc-svg height wird vom JS-Renderer dynamisch gesetzt (240px mobile, 300px desktop) */
    .lc-tooltip {
        position: static;
        margin-top: var(--sp-3);
        opacity: 1;
        display: none;
        box-shadow: none;
    }
    .lc-tooltip.is-visible { display: block; }
    .lc-legend { gap: var(--sp-3); }
}

.drill-section {
    border-top: 1px solid var(--border);
    padding-top: var(--sp-5);
    margin-top: var(--sp-5);
}

.drill-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 13px;
    color: var(--text-muted);
}

.breadcrumb a, .bc-link {
    color: var(--accent-ink);
    cursor: pointer;
    text-decoration: none;
}

.backfill-area {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    font-size: 13px;
    color: var(--text-secondary);
}


/* ══════════════════════════════════════════════════════════════
   PAGE: UMLAGERUNG
   ═══════════════════════════════════════════════════════════════ */

.warehouse-select {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.warehouse-select select {
    flex: 1;
    min-width: 150px;
}

.warehouse-select .arrow {
    color: var(--text-muted);
    font-size: 16px;
    flex-shrink: 0;
}

.transfer-list {
    margin-bottom: var(--sp-4);
}

.transfer-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}

.transfer-item:last-child { border-bottom: none; }

.transfer-item .info {
    flex: 1;
    min-width: 0;
}

.transfer-item .name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transfer-item .sku {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.transfer-item input[type="number"] {
    width: 70px;
    text-align: center;
}

.transfer-empty {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    color: var(--text-muted);
    font-size: 13px;
}

.remove-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
    flex-shrink: 0;
}

.remove-btn:hover { background: var(--status-red-dim); color: var(--status-red); border-color: var(--status-red); }

.suggest-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.suggest-bar {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    font-size: 13px;
}

.summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    font-size: 13px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.btn-create {
    padding: 10px 24px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-sans);
    color: var(--on-accent);
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
    width: 100%;
}

@media (min-width: 769px) { .btn-create { width: auto; } }
.btn-create:hover { background: var(--accent-hover); }
.btn-create:disabled { opacity: 0.5; pointer-events: none; }

.history { margin-top: var(--sp-6); }

.history-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    /* 2026-09-22 (Daniel): Zeilen klebten am linken Panel-Rand — gleicher
       seitlicher Abstand wie .panel-header. */
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}
@media (min-width: 769px) {
    .history-item { padding: var(--sp-3) var(--sp-5); }
}

.history-item .time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.history-item .route {
    font-size: 12px;
    color: var(--text-muted);
}

/* Search results dropdown */
.search-results {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: var(--sp-1);
    max-height: 300px;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transition);
    min-height: 44px;
}

.search-result-item:hover { background: var(--bg-hover); }
.search-result-item:last-child { border-bottom: none; }

.add-btn {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-sans);
    background: var(--accent-dim);
    color: var(--accent-ink);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
    white-space: nowrap;
}

.add-btn:hover { background: var(--accent); color: var(--on-accent); }
.add-btn.added { background: var(--status-green-dim); color: var(--status-green); pointer-events: none; }


/* ══════════════════════════════════════════════════════════════
   PAGE: FLEISCH
   ═══════════════════════════════════════════════════════════════ */

.info-bar {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.info-chip {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-1) var(--sp-3);
    font-size: 12px;
    color: var(--text-muted);
}

.info-chip .val { font-weight: 500; font-family: var(--font-mono); }
.info-chip .val.red { color: var(--status-red); }
.info-chip .val.green { color: var(--status-green); }

/* Sortable headers pseudo-elements */
thead th.sort-asc::after { content: " \25B2"; font-size: 12px; }
thead th.sort-desc::after { content: " \25BC"; font-size: 12px; }


/* ══════════════════════════════════════════════════════════════
   PAGE: SUCHE
   ═══════════════════════════════════════════════════════════════ */

.search-box {
    max-width: 600px;
    margin: 0 auto var(--sp-6);
}

.search-wrap {
    display: flex;
    gap: var(--sp-2);
}

.search-wrap input {
    flex: 1;
}

.search-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--sp-2);
    text-align: center;
}

.results {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

@media (min-width: 769px) {
    .results { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}

.product-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.product-header {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.product-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: var(--sp-1);
    line-height: 1.4;
}

.product-sku {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.product-price {
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--accent-ink);
    margin-left: var(--sp-2);
}

.product-total {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: var(--sp-2);
}

.stock-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
}

.stock-grid:has(> :last-child:nth-child(odd)) > :last-child {
    grid-column: 1 / -1;
}

.stock-item {
    background: var(--bg-root);
    padding: var(--sp-3) var(--sp-4);
}

.stock-item .wh-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.stock-item .stock-val {
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-mono);
}

.pos { color: var(--status-green); }
.neg { color: var(--status-red); }


/* ══════════════════════════════════════════════════════════════
   PAGE: FORECAST (additions to base)
   ═══════════════════════════════════════════════════════════════ */

.weather-strip {
    display: flex;
    gap: 1px;
    overflow-x: auto;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--sp-6);
    -webkit-overflow-scrolling: touch;
}

.weather-day {
    flex: 0 0 90px;
    background: var(--bg-surface);
    text-align: center;
    padding: var(--sp-3) var(--sp-1);
    font-size: 12px;
}

.weather-day .dow {
    font-size: 12px;
    color: var(--text-muted);
}

.weather-day .temp {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-mono);
    margin: var(--sp-1) 0;
}

.weather-day .gi {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
}

.gi-high { background: var(--status-green-dim); color: var(--status-green); }
.gi-mid  { background: var(--status-amber-dim); color: var(--status-amber); }
.gi-low  { background: var(--bg-elevated); color: var(--text-muted); }

.quantile-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

@media (max-width: 768px) {
    .quantile-strip { grid-template-columns: repeat(2, 1fr); }
}

.q-item {
    background: var(--bg-root);
    padding: var(--sp-3);
    text-align: center;
}

.q-label { font-size: 12px; color: var(--text-muted); }
.q-val { font-size: 16px; font-weight: 500; font-family: var(--font-mono); margin-top: 2px; }

.class-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
}


/* ══════════════════════════════════════════════════════════════
   R-3.5: Umlagerung order chips
   Surfaces "this SKU is for Order #12345 — Customer X" inline.
   ═══════════════════════════════════════════════════════════════ */

.order-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.order-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 5px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: help;
    transition: background-color 120ms, border-color 120ms, color 120ms, opacity 120ms, transform 120ms;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
}

.order-chip:hover {
    background: var(--accent-dim);
    border-color: var(--accent-ink);
    color: var(--text-primary);
}

.order-chip-num {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text-primary);
    font-size: 12px;
    padding: 1px 5px;
    background: var(--accent-dim);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.order-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-chip.tag-vip {
    border-color: var(--accent-ink);
    background: var(--accent-dim);
}
.order-chip.tag-vip .order-chip-num {
    background: var(--accent);
    color: var(--on-accent);
}

.order-chip-more {
    background: transparent;
    border-style: dashed;
    color: var(--text-muted);
    padding: 3px 10px;
}


/* ══════════════════════════════════════════════════════════════
   Routen-Übersicht — destination/source distinction + mode toggle
   ═══════════════════════════════════════════════════════════════ */

/* Mode toggle (segmented control) */
.routes-mode-toggle {
    display: inline-flex;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px;
    gap: 2px;
}
.routes-mode-btn {
    background: transparent;
    border: 0;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.routes-mode-btn i { font-size: 14px; }
.routes-mode-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.routes-mode-btn.active {
    background: var(--accent);
    color: var(--on-accent);
}
.routes-mode-btn.active:hover { background: var(--accent-hover); color: var(--on-accent); }

/* Destination card */
.route-dest-card {
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--bg-elevated);
}
.route-dest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.route-dest-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.route-dest-label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
}

/* Source (sub) cards */
.route-sub-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.route-sub-card {
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-ink);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.route-sub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.route-sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.route-sub-label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--accent-dim);
    border-radius: 999px;
}

/* Item rows inside expanded sub-source */
.route-item-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
    align-items: start;
    border-left: 2px solid transparent;
    margin-left: -10px;
    padding-left: 8px;
    transition: background var(--transition);
}
.route-item-row:hover { background: var(--bg-hover); }
.route-item-row:last-child { border-bottom: 0; }

/* Order-driven items: highlighted, sorted to top */
.route-item-row-order {
    border-left-color: var(--accent-ink);
    background: var(--accent-dim);
}
.route-item-row-order:hover {
    background: var(--accent-dim);
    filter: brightness(1.1);
}

/* Critical (Order needed AND warehouse empty) */
.route-item-row-red {
    border-left-color: var(--status-red);
    background: var(--status-red-dim);
}
.route-item-row-red:hover {
    background: var(--status-red-dim);
    filter: brightness(1.1);
}

/* Sprint UU.2: Truncation-Hinweis am Ende einer langen Item-Liste (>200 SKUs).
   Frontend zeigt nur die ersten 200; dieser Block macht das transparent. */
.route-truncation-warning {
    padding: 8px 12px;
    background: var(--status-amber-dim);
    color: var(--status-amber);
    font-size: 12px;
    text-align: center;
    border-top: 1px dashed var(--status-amber);
    margin-top: 4px;
}

.route-item-sku {
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-weight: 500;
}
.route-item-name-block {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.route-item-name {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.route-item-qty {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Reusable chip color variants */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.chip-accent {
    background: var(--accent-dim);
    color: var(--accent-ink);
}
.chip-red {
    background: var(--status-red-dim);
    color: var(--status-red);
}

/* Classification pills — Soll/Bestellung consistent across cart + route overview */
.chip-soll {
    background: var(--status-green-dim);
    color: var(--status-green);
    border: 1px solid rgba(34, 197, 94, 0.45);
    font-weight: 500;
}
.chip-order {
    background: var(--status-red-dim);
    color: var(--status-red);
    border: 1px solid rgba(239, 68, 68, 0.45);
    font-weight: 500;
}
/* Light-theme contrast: darker fill colour for legibility on light backgrounds */
[data-theme="light"] .chip-soll {
    color: var(--status-green);
    background: var(--status-green-dim);
}
[data-theme="light"] .chip-order {
    color: var(--status-red);
    background: var(--status-red-dim);
}

/* Manuell-Pille — Akzent-Farbe, klar als User-Aktion erkennbar */
.chip-manual {
    background: var(--accent-dim);
    color: var(--accent-ink);
    border: 1px solid rgba(30, 64, 175, 0.45);
    font-weight: 500;
    font-size: 12px;
}
[data-theme="light"] .chip-manual {
    color: var(--accent-ink);
    background: rgba(30, 64, 175, 0.10);
}

/* Critical-Pille — verstärkt rote Order-Pille bei is_red (Ziellager leer) */
.chip-critical {
    background: var(--danger-fill);
    color: var(--on-accent);
    border: 1px solid var(--danger-fill);
    font-weight: 500;
    font-size: 12px;
    padding: 2px 6px;
}

/* Routen-Übersicht Legende — kompakte Erklärzeile unter dem Header */
.routes-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 12px 0 12px;
    font-size: 12px;
    color: var(--text-muted);
}
.routes-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.routes-legend-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.routes-legend-swatch-red {
    background: var(--status-red-dim);
    border-color: var(--status-red);
}
.routes-legend-swatch-order {
    background: var(--accent-dim);
    border-color: var(--accent-ink);
}
.routes-legend-swatch-neutral {
    background: var(--bg-surface);
    border-color: var(--border);
}
.routes-legend-sep {
    color: var(--text-muted);
    opacity: 0.45;
}

/* Orphan-critical Block — kritische SKUs ohne Quelle, sichtbar über sub_sources */
.orphan-critical-block {
    background: var(--status-red-dim);
    border: 1px solid rgba(229, 72, 77, 0.35);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.orphan-critical-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--status-red);
    font-size: 13px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(229, 72, 77, 0.25);
    margin-bottom: 6px;
}
.orphan-critical-block .route-item-row {
    background: transparent;
    border-left: 2px solid var(--status-red);
    margin-left: 0;
    padding-left: 10px;
}
.orphan-critical-block .route-item-row:last-child {
    border-bottom: 0;
}


/* ══════════════════════════════════════════════════════════════
   R-3.3 — Mobile Responsive Sweep Phase 1
   Safe-area · Touch-target consistency · KPI stacking · Sub-control
   stacking. Builds on existing mobile rules above; does NOT duplicate
   .btn / input font-size / .controls-bar / .table-wrap behaviour
   which is already mobile-tuned earlier in this file.
   ═══════════════════════════════════════════════════════════════ */

/* iOS Notch / Home-indicator safe-area — applies on every viewport.
   env() values are 0 on non-notch devices and on Android, so this is
   a no-op cost outside iOS. */
body {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Topbar OWNT die obere Safe-Area: sie reserviert die Statusleisten-Hoehe (Uhr/Notch)
   als padding-top — sonst wandern Burger/Logo unter die iPhone-Uhr.
   (body hat deshalb KEIN padding-top, den Platz haelt .topbar-spacer frei.) */
.topbar-mobile {
    padding-top: env(safe-area-inset-top);
    padding-left: max(var(--sp-4), env(safe-area-inset-left));
    padding-right: max(var(--sp-4), env(safe-area-inset-right));
}
.topbar-spacer { display: none; }

/* Mobil FEST statt sticky (2026-11-11, Daniel: Kopf "immer leicht abgeschnitten").
   Feste Hoehe, der Spacer haelt den Platz im Fluss frei, scroll-padding sorgt dafuer, dass
   Sprungziele nicht unter der Leiste landen. Die Unschaerfe auf dem iPhone hat das NICHT
   behoben (12.11.: "weiterhin leicht unscharf"): Ursache war die Statusleisten-Angabe
   "black-translucent" der Home-Bildschirm-App, siehe _head_pwa.html. Ohne sie ist
   env(safe-area-inset-top) in der App 0, in Safari-Tabs bleibt der Abstand wie bisher. */
@media (max-width: 768px) {
    .topbar-mobile {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(56px + env(safe-area-inset-top));
        min-height: 0;
    }
    .topbar-spacer {
        display: block;
        height: calc(56px + env(safe-area-inset-top));
    }
    /* Kopfleiste plus Netzleiste (--gg-top-h aus dem Rahmen) plus 8; ohne Rahmen wie bisher 64 + Safe-Area */
    html { scroll-padding-top: calc(var(--gg-top-h, calc(56px + env(safe-area-inset-top))) + 8px); }
}

/* ALTE App-Symbole ohne Neu-Anlegen (2026-11-12, Daniel waehlte die Notloesung).
   Symbole, die vor v290 angelegt wurden, behalten "black-translucent": die Seite liegt unter
   der Statusleiste, und iOS 26 legt oben einen Milchglas-Streifen ueber die Kopfleiste (auf
   Daniels Screenshot bis etwa Statusleiste + 44pt, genau bis zur Unterkante der Leiste).
   Erkennung: Home-Bildschirm-App (html.gg-standalone, _head_pwa.html) UND
   env(safe-area-inset-top) > 0. Dann
   - fuellt .statusbar-band Statusleiste + 8px in Seitenfarbe (leer, darf verwischen),
   - sitzt die Kopfleiste darunter und beruehrt den oberen Rand nicht mehr. Das hilft auch,
     falls iOS den Streifen an die oberste feste Leiste anpasst: das ist jetzt der leere Streifen.
   min(8px, inset * 100) ist 8px bei altem Symbol und 0 bei neuem (inset 0) oder im
   Querformat: dort ist alles rechnerisch wie oben. Daniel wollte "wirklich nur ein paar Pixel"
   (zuerst 48px). 8px liegt ueber der 4px-Grenze, ab der Safari eine feste Leiste als "am oberen
   Rand" wertet. Auf einem echten iPhone NICHT bestaetigt;
   wirkt es nicht, hilft nur Symbol loeschen und neu anlegen. Test: tests/test_ios_statusleiste.py */
.statusbar-band { display: none; }
@media (max-width: 768px) {
    html.gg-standalone {
        --gg-alt-band: calc(env(safe-area-inset-top) + min(8px, env(safe-area-inset-top) * 100));
        scroll-padding-top: calc(var(--gg-top-h, calc(56px + var(--gg-alt-band))) + 8px);
    }
    html.gg-standalone .statusbar-band {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--gg-alt-band);
        background: var(--bg-root);
        z-index: 100;
    }
    html.gg-standalone .topbar-mobile {
        top: var(--gg-alt-band);
        height: 56px;
        padding-top: 0;
    }
    html.gg-standalone .topbar-spacer { height: calc(56px + var(--gg-alt-band)); }
    /* Menue und Vollbild-Chat haben eigene Kopfzeilen am oberen Rand: gleicher Versatz. */
    html.gg-standalone .sidebar { padding-top: var(--gg-alt-band); }
    html.gg-standalone .chat-widget-header { padding-top: calc(6px + var(--gg-alt-band)); }
}

/* Sidebar drawer needs left safe-area on landscape iPhone notch.
   Fix 2026-08-14 (Daniel): auch die OBERE Safe-Area — der Drawer ist
   fixed top:0 und schob den Menuekopf sonst unter die iPhone-Uhr. */
.sidebar {
    padding-left: env(safe-area-inset-left);
    padding-top: env(safe-area-inset-top);
}

/* ── Mobile breakpoint (<= 768px) ──────────────────────────── */
@media (max-width: 768px) {

    /* iOS zoomt beim Fokus auf jedes Feld unter 16px. Seiten setzen ihre
       Felder gern per ID auf 12-15px (Layout-Check 2026-09-22: finance,
       pim_detail, pricing, tasks_board) — deshalb hier mit !important, die
       Regel ist nicht verhandelbar (CLAUDE.md Design System). */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Page container: 16px gutters (was 16px via var(--sp-4) already,
       but reinforce with safe-area padding for landscape) */
    .page {
        padding-left: max(var(--sp-4), env(safe-area-inset-left));
        padding-right: max(var(--sp-4), env(safe-area-inset-right));
    }

    /* Touch-target enforcement for secondary interactive elements
       that bypass the .btn class (icon buttons, chips, segmented controls).
       Keep visual density on desktop, only inflate on mobile. */
    .remove-btn,
    .add-btn,
    .modal-close,
    .routes-mode-btn,
    .sidebar-iconbtn {
        min-height: 44px;
        min-width: 44px;
    }
    .add-btn { padding: 10px 14px; font-size: 13px; }
    .remove-btn { width: 44px; height: 44px; font-size: 16px; }
    .routes-mode-btn { padding: 10px 14px; font-size: 13px; }

    /* Segmented control: stack on narrow screens so labels don't truncate */
    .routes-mode-toggle {
        display: flex;
        width: 100%;
    }
    .routes-mode-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        white-space: normal;
        line-height: 1.2;
        text-align: center;
    }
    .routes-mode-btn i { display: none; }
    /* Legende bricht um statt die Seite zu verbreitern (war ~19 px zu breit bei 390 px) */
    .routes-legend-item {
        white-space: normal;
    }

    /* KPI grid: 5-column dashboard inline-override is gone → default 2-col
       is fine, but on very narrow phones (<= 480) collapse to 1-col so
       numbers don't wrap awkwardly */
    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Warehouse cards: 2 cards per row gets cramped on narrow phones —
       single column reads cleaner */
    .wh-grid {
        grid-template-columns: 1fr;
    }

    /* Umlagerung: warehouse selects stack vertically (already wrap, but
       force column to avoid the arrow visually floating to the side) */
    .warehouse-select {
        flex-direction: column;
        align-items: stretch;
    }
    .warehouse-select .arrow {
        display: none; /* arrow is decorative — hidden when stacked */
    }

    /* Suggest-bar: 2er-Raster, Beschriftung bricht um (2026-11-11). Vorher zwang
       flex:1 + nowrap alle Knoepfe in eine Zeile, die Texte ueberlappten bei 390 px. */
    .suggest-bar .suggest-btns {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .suggest-bar .suggest-btns .btn {
        min-width: 0;
        white-space: normal;
        line-height: 1.25;
        padding-left: 10px;
        padding-right: 10px;
    }
    .suggest-bar .suggest-btns .btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* Page-header: ensure title + action button stack cleanly */
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .page-header > .btn,
    .page-header > .flex {
        width: 100%;
    }
    .page-header .btn { width: auto; flex: 1; }

    /* Info-chip bar (fleisch dashboard): wrap into compact rows */
    .info-bar {
        gap: var(--sp-2);
    }
    .info-chip {
        font-size: 13px; /* up from 12px for mobile legibility */
        padding: 6px var(--sp-3);
    }

    /* Search-result-item: ensure tap area is comfortable */
    .search-result-item {
        min-height: 56px;
        padding: var(--sp-3) var(--sp-4);
    }
}

/* ── Very narrow phones (<= 480px) — additional collapse ────── */
@media (max-width: 480px) {
    .metric-grid {
        grid-template-columns: 1fr;
    }
    .grid-2 {
        gap: var(--sp-3);
    }
    .page-title {
        font-size: 17px;
    }
    /* Chart containers: shorter on tiny screens so they don't dominate */
    .chart-container {
        height: 220px;
    }
}

/* ── Landscape iPhone safe-area for fixed bottom modals ────── */
@media (max-width: 768px) and (orientation: landscape) {
    .modal {
        padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
    }
}

/* ── End R-3.3 Phase 1 ─────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════
   TASK BOARD — Sprint 8b
   Kanban-Style Lists + Cards, Side-Panel Drawer, Boards-Index.
   Asana/ClickUp/Linear-Aesthetik: ruhig, dicht, hover-actions.
   ═══════════════════════════════════════════════════════════════ */

/* ── Boards Index (Card Grid) ─────────────────────────────────── */
.board-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

@media (min-width: 640px) {
    .board-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .board-grid { grid-template-columns: repeat(3, 1fr); }
}

.board-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    min-height: 140px;
}

.board-card:hover {
    border-color: var(--accent-ink);
    box-shadow: var(--shadow-md);
}

.board-card-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    padding-right: 32px;  /* Platz fuer overflow-menu */
    line-height: 1.3;
}

.board-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.board-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border-subtle);
    font-size: 12px;
    color: var(--text-muted);
}

.board-card-counts {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
}

.board-card-counts .count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

.board-card-counts .count i {
    font-size: 13px;
    color: var(--text-muted);
}

.board-card-owner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.board-card-actions {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    opacity: 0;
    transition: opacity var(--transition);
}

.board-card:hover .board-card-actions,
.board-card:focus-within .board-card-actions {
    opacity: 1;
}

.board-card-action-btn {
    width: 28px;
    height: 28px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background var(--transition), color var(--transition);
}

.board-card-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ── Avatar (compact, used in boards & cards) ─────────────────── */
.task-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.task-avatar-sm { width: 18px; height: 18px; font-size: 12px; }
.task-avatar-lg { width: 28px; height: 28px; font-size: 12px; }

/* ── Kanban Board (Lists Container) ───────────────────────────── */
.kanban-board {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: var(--sp-2) var(--sp-1) var(--sp-5);
    margin: 0 calc(-1 * var(--sp-1));
    min-height: calc(100vh - 240px);
    scroll-snap-type: x proximity;
}

.kanban-board::-webkit-scrollbar { height: 10px; }
.kanban-board::-webkit-scrollbar-track { background: transparent; }
.kanban-board::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 6px;
}
.kanban-board::-webkit-scrollbar-thumb:hover { background: var(--bg-active); }

/* ── Kanban List Column ───────────────────────────────────────── */
.kanban-list {
    flex: 0 0 320px;
    max-width: 320px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 240px);
    scroll-snap-align: start;
}

.kanban-list-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    position: relative;
}

.kanban-list-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-list-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-elevated);
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
}

.kanban-list-menu-btn {
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transition: background var(--transition), color var(--transition), opacity var(--transition);
}

.kanban-list:hover .kanban-list-menu-btn,
.kanban-list-menu-btn[aria-expanded="true"] { opacity: 1; }

.kanban-list-menu-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.kanban-list-cards {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sp-2) var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    -webkit-overflow-scrolling: touch;
    min-height: 60px;
}

.kanban-list-footer {
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
    flex-shrink: 0;
}

.kanban-add-card-btn {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    padding: 8px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-sans);
    min-height: 36px;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.kanban-add-card-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--bg-active);
    border-style: solid;
}

.kanban-add-card-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.kanban-add-card-form textarea {
    background: var(--bg-root);
    border: 1px solid var(--accent-ink);
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font-sans);
    resize: vertical;
    min-height: 60px;
    outline: none;
    line-height: 1.4;
}

.kanban-add-card-form-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

.kanban-add-list-col {
    flex: 0 0 320px;
    max-width: 320px;
    align-self: flex-start;
}

.kanban-add-list-btn {
    width: 100%;
    background: var(--bg-surface);
    border: 1px dashed var(--border);
    color: var(--text-secondary);
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    min-height: 44px;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.kanban-add-list-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-style: solid;
    border-color: var(--accent-ink);
}

/* ── Kanban Card ──────────────────────────────────────────────── */
.kanban-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    display: flex;
    flex-direction: column;
    gap: 8px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.kanban-card:hover {
    border-color: var(--accent-ink);
    box-shadow: var(--shadow-sm);
}

.kanban-card.completed {
    opacity: 0.55;
}

.kanban-card.completed .kanban-card-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

.kanban-card.sortable-ghost {
    opacity: 0.4;
    background: var(--accent-dim);
    border-color: var(--accent-ink);
    border-style: dashed;
}

.kanban-card.sortable-drag {
    box-shadow: var(--shadow-overlay);
    transform: rotate(2deg);
    cursor: grabbing;
}

.kanban-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}

.kanban-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border-radius: 10px;
    line-height: 1.6;
    text-transform: lowercase;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-chip-more {
    background: transparent;
    color: var(--text-muted);
}

.kanban-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    min-height: 22px;
}

.kanban-card-meta-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.kanban-card-meta-right {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Priority Badge ───────────────────────────────────────────── */
.priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    line-height: 1.6;
}

.priority-badge-urgent {
    background: var(--status-red-dim);
    color: var(--status-red);
}

.priority-badge-high {
    background: var(--status-amber-dim);
    color: var(--status-amber);
}

.priority-badge-medium {
    background: var(--accent-dim);
    color: var(--accent-ink);
}

.priority-badge-low {
    background: var(--bg-hover);
    color: var(--text-muted);
}

/* ── Due-Date Badge ───────────────────────────────────────────── */
.due-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    color: var(--text-secondary);
    line-height: 1.6;
    font-family: var(--font-mono);
}

.due-badge i { font-size: 12px; }
.due-badge.due-overdue { background: var(--status-red-dim); color: var(--status-red); }
.due-badge.due-soon { background: var(--status-amber-dim); color: var(--status-amber); }

/* ── Card Side Panel (Drawer from right) ──────────────────────── */
.card-side-panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 250;
    opacity: 0;
    transition: opacity 200ms ease;
}

.card-side-panel-backdrop.open {
    display: block;
    opacity: 1;
}

.card-side-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: var(--bg-surface);
    border-left: 1px solid var(--border);
    z-index: 251;
    transform: translateX(100%);
    transition: transform 250ms cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-overlay);
}

.card-side-panel.open { transform: translateX(0); }

.card-side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
    gap: var(--sp-3);
    flex-shrink: 0;
}

.card-side-panel-header-meta {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.card-side-panel-actions {
    display: flex;
    gap: var(--sp-1);
    align-items: center;
}

.card-side-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    -webkit-overflow-scrolling: touch;
}

.card-side-panel-title-input {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 500;
    padding: 6px 8px;
    margin-left: -8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    line-height: 1.3;
    outline: none;
    transition: background var(--transition), border-color var(--transition);
}

.card-side-panel-title-input:hover {
    background: var(--bg-hover);
}

.card-side-panel-title-input:focus {
    background: var(--bg-root);
    border-color: var(--focus-ring);
}

.card-side-panel-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.card-side-panel-section-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.card-side-panel-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

.card-side-panel-meta-grid .field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-side-panel-meta-grid .field-row label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.card-side-panel-meta-grid input,
.card-side-panel-meta-grid select {
    width: 100%;
}

.card-side-panel-description {
    width: 100%;
    background: var(--bg-root);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font-sans);
    resize: vertical;
    min-height: 100px;
    outline: none;
    line-height: 1.5;
    transition: border-color var(--transition);
}

.card-side-panel-description:focus { border-color: var(--focus-ring); }

.card-side-panel-autosave-hint {
    font-size: 12px;
    color: var(--text-muted);
    height: 14px;
}

.card-side-panel-autosave-hint.saved { color: var(--status-green); font-style: normal; }
.card-side-panel-autosave-hint.error { color: var(--status-red); font-style: normal; }

/* Comments */
.card-comments {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.card-comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.card-comment-form textarea {
    width: 100%;
    background: var(--bg-root);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font-sans);
    resize: vertical;
    min-height: 60px;
    outline: none;
    line-height: 1.4;
    transition: border-color var(--transition);
}

.card-comment-form textarea:focus { border-color: var(--focus-ring); }

.card-comment {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.card-comment-body-wrap {
    flex: 1;
    min-width: 0;
}

.card-comment-head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin-bottom: 4px;
}

.card-comment-author {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.card-comment-time {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.card-comment-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Linked-Refs */
.linked-ref-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.linked-ref-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.linked-ref-row label {
    font-size: 12px;
    color: var(--text-muted);
    width: 110px;
    flex-shrink: 0;
}

.linked-ref-row input {
    flex: 1;
    font-family: var(--font-mono);
}

/* ── Filter Toolbar ───────────────────────────────────────────── */
.tasks-filter-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.tasks-filter-toolbar input[type="search"],
.tasks-filter-toolbar select {
    flex: 0 1 200px;
    min-width: 0;
}

.tasks-filter-toolbar .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* ── Board-Header Inline Edit ────────────────────────────────── */
.board-page-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
    padding: 4px 8px;
    margin-left: -8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    outline: none;
    transition: background var(--transition), border-color var(--transition);
    min-width: 200px;
    max-width: 500px;
}

.board-page-title:hover { background: var(--bg-hover); }
.board-page-title:focus { background: var(--bg-root); border-color: var(--focus-ring); }

/* ── Status Toasts (small inline) ────────────────────────────── */
.tasks-toast {
    position: fixed;
    bottom: var(--sp-5);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    box-shadow: var(--shadow-overlay);
    z-index: 300;
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
    max-width: 90vw;
}

.tasks-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.tasks-toast.error { border-color: var(--status-red); color: var(--status-red); }
.tasks-toast.success { border-color: var(--status-green); color: var(--status-green); }

/* ── Empty State (Kanban + Boards Index) ─────────────────────── */
/* Leer und Fehler auf Boards: Optik aus Baustein 18 (.gg-zustand, -titel, -text); die Klassen
   tasks-empty* bleiben als Anker im Markup (13.11., alte Werte 64 px, Icon 40 entfernt) */
.tasks-empty .gg-zustand-icon { opacity: 1; margin: 0; }
.tasks-empty-title, .tasks-empty-desc { margin: 0 auto; }

/* ── Tasks Mobile (vertical-stacked Lists statt horizontal) ──── */
@media (max-width: 768px) {
    .kanban-board {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: visible;
        min-height: auto;
        padding-bottom: var(--sp-3);
    }
    .kanban-list {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
        max-height: none;
    }
    .kanban-list-cards {
        max-height: 60vh;
    }
    .kanban-add-list-col {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }
    .card-side-panel {
        width: 100%;
        max-width: 100vw;
    }
    .card-side-panel-meta-grid {
        grid-template-columns: 1fr;
    }
    .kanban-list-menu-btn {
        opacity: 1;  /* permanent sichtbar auf Mobile (kein Hover) */
    }
    .board-card-actions {
        opacity: 1;  /* permanent sichtbar auf Mobile */
    }
    .tasks-filter-toolbar input[type="search"],
    .tasks-filter-toolbar select {
        flex: 1 1 100%;
    }
    .board-page-title {
        font-size: 18px;
        min-width: 0;
    }
}

/* ══════════════════════════════════════════════════════════════
   R-3.3 Phase 2 — Mobile sweep für /suche /forecast /bewertung
   /einkauf /reports /ocr. Generelle Patterns hier, damit die
   Templates HTML-frei bleiben.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Panel-header: Titel + Aktion(en) stacken sauber ─────── */
    .panel-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
    }
    .panel-header > .flex,
    .panel-header > div:not(.panel-title):not(.breadcrumb) {
        width: 100%;
    }
    .panel-header > .flex .btn,
    .panel-header > .flex .btn-sm {
        flex: 1;
        min-width: 0;
    }
    .panel-header .month-btns {
        width: 100%;
        justify-content: stretch;
    }
    .panel-header .month-btn {
        flex: 1;
        min-height: 44px;
        font-size: 13px;
    }

    /* ── Action-card (Listen-Seite): Download-Button full-width ── */
    .action-card {
        flex-direction: column;
        align-items: stretch;
        padding: var(--sp-4);
    }
    .action-card .action-info {
        min-width: 0;
    }
    .btn-download {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }

    /* ── Controls-bar Buttons (Forecast): ml-auto Gruppe — bei 3+
         Buttons wrappen, jeder mindestens 44px hoch          ── */
    .controls-bar .ml-auto {
        flex-wrap: wrap;
    }
    .controls-bar .ml-auto .btn {
        min-height: 44px;
        font-size: 13px;
        flex: 1 1 calc(50% - var(--sp-2));
    }

    /* ── Search-wrap (Suche): Button full-width unter Input ───── */
    .search-wrap {
        flex-direction: column;
    }
    .search-wrap .btn {
        width: 100%;
        min-height: 44px;
    }
    .search-box {
        margin-bottom: var(--sp-4);
    }

    /* ── Stock-grid (Suche-Result): 1-col auf sehr schmal ────── */
    .stock-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Bewertung: Chart-Container niedriger ────────────────── */
    .chart-container {
        height: 220px !important;
        max-width: 100%;
        overflow-x: auto;
    }

    /* ── Bewertung: company-grid auto-fit funktioniert schon
         via Default 1fr, hier nochmal explizit für Klarheit  ─── */
    .company-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }

    /* ── Transfer-item (Bewertung Drill, Reports): kompakter,
         flex-wrap statt order-reordering — Wert bleibt rechts ─── */
    .transfer-item {
        padding: var(--sp-3);
        gap: var(--sp-2);
        flex-wrap: wrap;
        min-height: 56px;
    }
    .transfer-item .info {
        flex: 1 1 60%;
        min-width: 0;
    }
    .transfer-item .num {
        font-size: 14px;
    }

    /* ── OCR: Drop-Zone kompakter, Raw-Text begrenzen ───────── */
    .drop-zone-mobile {
        padding: 32px 16px !important;
    }
    pre.raw-text-mobile {
        max-height: 50vh !important;
    }

    /* ── Detail-grid (OCR Header, Forecast Modal) ─────────────
         schon via grid-Default in den Komponenten ok, hier nur
         Sicherheit dass die Items gut stacken              ── */
    .detail-grid {
        grid-template-columns: 1fr;
    }
    .detail-grid .detail-item {
        padding: var(--sp-2) 0;
    }

    /* ── Status-bar (Forecast): Items wrappen schon, ml-auto
         soll nicht rechts kleben sondern eigene Zeile      ── */
    .status-bar .item.ml-auto {
        margin-left: 0;
        width: 100%;
        padding-top: var(--sp-1);
        border-top: 1px solid var(--border-subtle);
    }

    /* ── Page-subtitle: kleiner auf Mobile ───────────────────── */
    .page-subtitle {
        font-size: 13px;
        line-height: 1.4;
    }
}

/* ══════════════════════════════════════════════════════════════
   PAGE: PRICING — Preisrechner pro Produkt (R-6 Item 18 / Sprint 9)
   ═══════════════════════════════════════════════════════════════ */

.pricing-back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: var(--sp-4);
    transition: color var(--transition);
}
.pricing-back:hover { color: var(--text-primary); }
.pricing-back i { font-size: 16px; }

.pricing-header {
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--border);
}

.pricing-header-main { display: flex; flex-direction: column; gap: var(--sp-2); }

.pricing-sku {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.pricing-title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--text-primary);
}

@media (min-width: 769px) {
    .pricing-title { font-size: 26px; }
}

.pricing-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.pricing-meta-row .badge i { font-size: 12px; }

.pricing-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--sp-1);
}

.pricing-tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
}

/* ── Drei-Spalten Grid ───────────────────────────────── */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

@media (min-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-5);
    }
}

.pricing-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.pricing-panel-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
}

.pricing-panel-title i { font-size: 16px; color: var(--accent-ink); }

.pricing-row { display: flex; flex-direction: column; gap: 4px; }

.pricing-row-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.pricing-big-number {
    font-size: 28px;
    font-weight: 500;
    font-family: var(--font-mono);
    line-height: 1.1;
    color: var(--text-primary);
}

.pricing-big-number.pricing-vk { color: var(--accent-ink); }

.pricing-empty {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 22px;
}

.pricing-meta {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.pricing-meta strong {
    color: var(--text-secondary);
    font-weight: 500;
    font-family: var(--font-mono);
}

/* ── Margen-Slider ───────────────────────────────────── */
.pricing-slider-block {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.pricing-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.pricing-slider-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.pricing-slider-value {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-ink);
}

.margin-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.margin-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
}

.margin-slider::-moz-range-track {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
}

.margin-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--bg-surface);
    cursor: pointer;
    margin-top: -6px;
    transition: background var(--transition), transform var(--transition);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.margin-slider::-webkit-slider-thumb:hover { background: var(--accent-hover); transform: scale(1.1); }

.margin-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--bg-surface);
    cursor: pointer;
    transition: background var(--transition);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.margin-slider::-moz-range-thumb:hover { background: var(--accent-hover); }

.margin-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .margin-slider { height: 8px; }
    .margin-slider::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -8px; }
    .margin-slider::-moz-range-thumb { width: 24px; height: 24px; }
}

.pricing-slider-result {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pricing-slider-result-label {
    font-size: 12px;
    color: var(--text-muted);
}

.pricing-slider-result-value {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--font-mono);
    color: var(--accent-ink);
}

.pricing-help-text {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.pricing-help-text i {
    flex-shrink: 0;
    font-size: 13px;
    margin-top: 1px;
    color: var(--accent-ink);
    opacity: 0.7;
}

.pricing-empty-block {
    background: var(--bg-elevated);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5);
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
}

.pricing-empty-block i {
    font-size: 28px;
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: var(--sp-1);
}

.pricing-empty-block p { margin: 0; }

/* ── Lager-Tabelle ───────────────────────────────────── */
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pricing-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
}

.pricing-table th.col-num,
.pricing-table td.col-num { text-align: right; }

.pricing-table th.col-code,
.pricing-table td.col-code { width: 56px; }

.pricing-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.pricing-table tbody tr:last-child td { border-bottom: none; }

.pricing-table .wh-code {
    display: inline-block;
    padding: 2px 6px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
}

.pricing-table .wh-name { color: var(--text-secondary); font-size: 13px; }
.pricing-table .mono { font-family: var(--font-mono); font-weight: 500; font-size: 13px; }
.pricing-table .text-muted { color: var(--text-muted); }

.pricing-table tfoot td {
    border-top: 1px solid var(--border);
    border-bottom: none;
    padding-top: var(--sp-3);
    font-weight: 500;
}

.pricing-total-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.pricing-ship-indicator {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    margin-top: var(--sp-2);
}

.pricing-ship-indicator i { font-size: 18px; flex-shrink: 0; }

.pricing-ship-indicator.ok {
    background: var(--status-green-dim);
    color: var(--status-green);
}

.pricing-ship-indicator.out {
    background: var(--status-red-dim);
    color: var(--status-red);
}

/* ── Forecast-Bars ───────────────────────────────────── */
.pricing-forecast-bars {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.pricing-forecast-row { display: flex; flex-direction: column; gap: 4px; }

.pricing-forecast-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
}

.pricing-forecast-label-name {
    color: var(--text-secondary);
    font-weight: 500;
}

.pricing-forecast-label-name .pricing-meta {
    font-weight: 400;
    margin-left: 4px;
}

.pricing-forecast-label-val {
    color: var(--text-primary);
    font-size: 13px;
}

.forecast-bar-track {
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}

.forecast-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 300ms cubic-bezier(.4,0,.2,1);
    min-width: 2px;
}

.forecast-bar-p50 { background: var(--accent); }
.forecast-bar-p80 { background: rgba(30, 64, 175, 0.55); }
.forecast-bar-p95 { background: rgba(30, 64, 175, 0.30); }

.pricing-runway {
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    padding: var(--sp-4);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pricing-runway-value {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.pricing-runway-label {
    font-size: 12px;
    color: var(--text-muted);
}

.pricing-forecast-stamp {
    margin-top: var(--sp-1);
    text-align: center;
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--sp-2);
}

/* ── Suche-Integration: Kalkulator-Button auf Karten ── */
.product-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-root);
}

.pricing-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
    cursor: pointer;
}

.pricing-link-btn:hover {
    background: var(--accent-dim);
    color: var(--accent-ink);
    border-color: rgba(30,64,175,0.25);
}

.pricing-link-btn i { font-size: 14px; }

@media (max-width: 768px) {
    .pricing-link-btn { min-height: 36px; padding: 6px 12px; font-size: 13px; }
}

/* ── Mobile-only Helper: visually hidden columns für tighter
   table reading ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   PAGE: PREISKALKULATOR (Angebotsrechner, Block 3 2026-06)
   Manueller Angebots-/Margenrechner. EK wird aus UVP x Faktor
   abgeleitet (NICHT aus Pickware-EK). Dark/Light via Tokens.
   ═══════════════════════════════════════════════════════════════ */

.pk-wrap { max-width: 920px; }

.pk-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}

.pk-card-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--sp-4);
}

.pk-field { margin-bottom: var(--sp-4); }
.pk-field:last-child { margin-bottom: 0; }

.pk-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.pk-input {
    width: 100%;
    font-size: 16px;            /* iOS: kein Auto-Zoom */
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-primary);
    -webkit-appearance: none;
    appearance: none;
}
.pk-input:focus { outline: none; border-color: var(--focus-ring); }

/* ── Produktgruppe-Toggle ──────────────────────────────── */
.pk-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
    min-height: 44px;
}
.pk-toggle.on { background: var(--accent-dim); border-color: var(--accent-ink); }
.pk-toggle input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--accent); }
.pk-toggle-text { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.pk-hint { margin-top: 8px; font-size: 12px; color: var(--text-muted); }

/* ── Segmented Control (Lieferart, Zubehoer-Typ, Konditionen) ── */
.pk-seg {
    display: flex;
    gap: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
}
.pk-seg-btn {
    flex: 1;
    min-height: 44px;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
}
.pk-seg-btn.on {
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.pk-seg-btn small { display: block; font-size: 12px; opacity: 0.7; margin-top: 2px; }

.pk-sub {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
}
.pk-hidden { display: none !important; }

/* ── Ergebnis-Box (Ampel) ──────────────────────────────── */
.pk-result {
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    text-align: center;
    border: 2px solid var(--border);
}
.pk-result.rot   { background: var(--status-red-dim);   border-color: var(--status-red); }
.pk-result.gelb  { background: var(--status-amber-dim); border-color: var(--status-amber); }
.pk-result.gruen { background: var(--status-green-dim); border-color: var(--status-green); }

.pk-dot { width: 14px; height: 14px; border-radius: 50%; margin: 0 auto var(--sp-3); }
.pk-dot.rot { background: var(--status-red); }
.pk-dot.gelb { background: var(--status-amber); }
.pk-dot.gruen { background: var(--status-green); }

.pk-pct { font-size: 32px; font-weight: 500; font-family: var(--font-mono); line-height: 1; }
.pk-amt { font-size: 18px; font-weight: 500; margin-top: 8px; opacity: 0.9; font-family: var(--font-mono); }
.pk-status { font-size: 12px; font-weight: 500; margin-top: var(--sp-3); }

.pk-c-rot { color: var(--status-red); }
.pk-c-gelb { color: var(--status-amber); }
.pk-c-gruen { color: var(--status-green); }

.pk-tip {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: left;
}
.pk-tip-t { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
.pk-tip-d { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ── Preiskorridore ────────────────────────────────────── */
.pk-corridor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border);
    margin-bottom: 8px;
}
.pk-corridor:last-child { margin-bottom: 0; }
.pk-corridor.rot   { background: var(--status-red-dim);   border-left-color: var(--status-red); }
.pk-corridor.gelb  { background: var(--status-amber-dim); border-left-color: var(--status-amber); }
.pk-corridor.gruen { background: var(--status-green-dim); border-left-color: var(--status-green); }
.pk-corridor-name { font-size: 14px; }
.pk-corridor-val { font-weight: 500; font-family: var(--font-mono); }

/* ── Detail-Kalkulation ────────────────────────────────── */
.pk-detail-sec {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--sp-4);
    margin-bottom: 6px;
}
.pk-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 14px;
}
.pk-detail-row:last-child { border-bottom: none; }
.pk-detail-n { color: var(--text-muted); }
.pk-detail-v { color: var(--text-primary); font-weight: 500; font-family: var(--font-mono); }
.pk-detail-v.grn { color: var(--status-green); }
.pk-detail-v.rd { color: var(--status-red); }
.pk-detail-total {
    border-top: 2px solid var(--border);
    margin-top: 8px;
    padding-top: 12px;
}

/* ── Legende ────────────────────────────────────────────── */
.pk-legend {
    display: flex;
    justify-content: center;
    gap: var(--sp-5);
    padding: var(--sp-4) 0;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.pk-legend-item { display: flex; align-items: center; gap: 6px; }
.pk-legend-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ── Bundle-Positionen als Karten (Block 4, Redesign) ──────── */
.pk-pos {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
}
.pk-pos-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.pk-pos-name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-bottom: 1px dashed transparent;
    padding: 4px 0;
}
.pk-pos-name:focus { outline: none; border-bottom-color: var(--focus-ring); }
.pk-pos-cat {
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-secondary);
}
.pk-pos-body {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.pk-pos-field { display: flex; flex-direction: column; gap: 4px; }
.pk-pos-field label {
    font-size: 12px;
    color: var(--text-muted);
}
.pk-pos-angebot { flex: 1; min-width: 160px; }
.pk-pos-angebot label { color: var(--accent-ink); font-weight: 500; }
.pk-cell-in {
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    -webkit-appearance: none;
    appearance: none;
}
.pk-cell-in:focus { outline: none; border-color: var(--focus-ring); }
.pk-cell-in.sm { width: 120px; color: var(--text-secondary); }
.pk-cell-in.lg {
    width: 100%;
    font-weight: 500;
    border-color: color-mix(in srgb, var(--accent-ink) 45%, var(--border));
}
.pk-cell-in:disabled { opacity: 0.5; }
.pk-pos-gratis {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    padding-bottom: 10px;
    white-space: nowrap;
}
.pk-pos-gratis input { width: 18px; height: 18px; accent-color: var(--accent); }
.pk-row-del {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--status-red);
    cursor: pointer;
}
.pk-row-del:hover { background: var(--status-red-dim); border-color: var(--status-red); }

/* ── Shop-Auswahl und "Produkt hinzufuegen" (Daniel 2026-11-08) ─ */
.pk-start {
    display: grid;
    grid-template-columns: minmax(0, 360px) auto;
    justify-content: space-between;
    align-items: end;
    gap: var(--sp-2) var(--sp-4);
}
.pk-start .pk-hint { grid-column: 1 / -1; margin-top: 0; }
.pk-select { position: relative; }
.pk-select select { padding-right: 40px; font-weight: 500; cursor: pointer; }
.pk-select i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.pk-btn-add { min-height: 46px; padding: 10px 20px; font-size: 14px; font-weight: 500; }
.pk-rows-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

.pk-leer {
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}
.pk-leer i { display: block; font-size: 26px; margin-bottom: var(--sp-2); }
.pk-leer-t { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.pk-leer .pk-hint { margin-top: 4px; }

.pk-pos { transition: border-color .3s, box-shadow .3s; }
.pk-pos-neu { border-color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-ink); }
.pk-pos-titel { flex: 1; min-width: 0; }
.pk-pos-text { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text-primary); overflow-wrap: anywhere; }
.pk-pos-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.pk-pos-warn { font-size: 12px; font-weight: 500; color: var(--status-amber); margin-top: 4px; }
.pk-pos-rabatt { font-size: 12px; color: var(--text-muted); margin-top: 6px; min-height: 16px; }

.pk-uvp-zeile {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 6px 2px;
    font-size: 14px;
    color: var(--text-secondary);
}
.pk-uvp-zeile + .pk-corridor { margin-top: var(--sp-3); }
.pk-corridor-val small {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    opacity: .85;
    text-align: right;
}

/* Produkt hinzufuegen: Handy ganzer Bildschirm, Laptop Dialog mit fester Hoehe */
body.pk-gesperrt { overflow: hidden; }
.modal-overlay.pk-such-overlay { padding: 0; }
.modal.pk-such {
    display: flex;
    flex-direction: column;
    top: 0;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: none;
    border-radius: 0;
    padding: var(--sp-4);
}
.pk-such .modal-header { margin-bottom: var(--sp-3); }
.pk-such .modal-close { min-width: 44px; min-height: 44px; }
.pk-such-feld { position: relative; }
.pk-such-feld i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
    pointer-events: none;
}
.pk-such-feld input { padding-left: 42px; }
.pk-such-info { font-size: 12px; color: var(--text-muted); padding: var(--sp-2) 2px; min-height: 32px; }
.pk-such-liste {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 0 calc(var(--sp-4) * -1);
}
.pk-treffer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
    min-height: 60px;
    padding: 10px var(--sp-4);
    font-family: inherit;
    text-align: left;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-subtle);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pk-treffer:hover, .pk-treffer.aktiv { background: var(--bg-hover); }
.pk-treffer-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-treffer-name { font-size: 14px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.pk-treffer-meta { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.pk-treffer-preise {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.pk-treffer-vk { font-size: 12px; font-weight: 500; color: var(--text-muted); }

@media (min-width: 769px) {
    .modal-overlay.pk-such-overlay { padding: 8vh var(--sp-4) var(--sp-4); align-items: flex-start; }
    .modal.pk-such {
        top: auto;
        height: min(640px, 84vh);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-5);
    }
    .pk-such-liste { margin: 0 calc(var(--sp-5) * -1); }
    .pk-treffer { padding-left: var(--sp-5); padding-right: var(--sp-5); }
}

/* Finger statt Maus (Handy, Tablet): keine Zoom-Falle, 44-px-Ziele */
@media (pointer: coarse), (max-width: 768px) {
    .pk-pos-cat { font-size: 16px; padding: 10px 12px; min-height: 44px; }
    .pk-row-del { width: 44px; height: 44px; }
}

@media (max-width: 600px) {
    .pk-card { padding: var(--sp-4); }
    .pk-start { grid-template-columns: 1fr; }
    .pk-btn-add { width: 100%; }
    .pk-rows-actions .btn { flex: 1 1 100%; }
    .pk-pos-head { flex-wrap: wrap; align-items: flex-start; }
    .pk-pos-cat { order: 3; flex: 1 1 100%; }
    .pk-pos-body { gap: var(--sp-2) var(--sp-3); }
    .pk-pos-uvp, .pk-pos-angebot { flex: 1 1 0; min-width: 0; }
    .pk-cell-in.sm, .pk-cell-in.lg { width: 100%; }
    .pk-pos-gratis { flex: 1 1 100%; min-height: 44px; padding-bottom: 0; }
}

/* ── Suche: Multi-Select Bundle-Kalkulation (Block 4) ──────── */
.pk-pick-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-right: auto;
}
.pk-pick-label input { width: 18px; height: 18px; accent-color: var(--accent); }

.pk-calc-bar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 10px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.pk-calc-count { font-size: 14px; color: var(--text-secondary); }
.pk-calc-actions { display: flex; gap: var(--sp-2); }

@media (max-width: 600px) {
    .pk-calc-bar { left: 12px; right: 12px; transform: none; justify-content: space-between; }
}


/* ══════════════════════════════════════════════════════════════
   FINANCE DASHBOARD (Sprint 10b)
   Cashflow / P&L / Liquiditaet / Targets — Tabs + KPIs + Chart
   ═══════════════════════════════════════════════════════════════ */

/* ── Tab-Navigation (Pills, oben auf der Seite) ──────────────── */
.finance-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--sp-5);
}

.finance-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
}

.finance-tab:hover { color: var(--text-primary); background: var(--bg-hover); }

.finance-tab.active {
    color: var(--accent-ink);
    background: var(--accent-dim);
    font-weight: 500;
}

.finance-tab i { font-size: 14px; }

.finance-tab-pane { display: none; }
.finance-tab-pane.active { display: block; }

@media (max-width: 768px) {
    .finance-tabs {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .finance-tab {
        flex: 1 1 calc(50% - 2px);
        justify-content: center;
        min-height: 44px;
        font-size: 14px;
    }
}

/* ── KPI-Cards (P&L Kennzahlen) ──────────────────────────────── */
.finance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.finance-kpi-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.finance-kpi-card.featured {
    border-color: rgba(30, 64, 175, 0.4);
    background: linear-gradient(180deg, var(--accent-dim) 0%, var(--bg-surface) 60%);
}

.finance-kpi-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.finance-kpi-value {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.finance-kpi-value.large { font-size: 30px; }

.finance-kpi-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.finance-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.finance-kpi-delta.up    { background: var(--status-green-dim); color: var(--status-green); }
.finance-kpi-delta.down  { background: var(--status-red-dim);   color: var(--status-red); }
.finance-kpi-delta.flat  { background: var(--bg-elevated);      color: var(--text-muted); }

/* ── Cashflow-Amounts (In = gruen, Out = rot) ────────────────── */
.finance-amount {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    white-space: nowrap;
}

.finance-amount-in  { color: var(--status-green); }
.finance-amount-out { color: var(--status-red); }

.finance-direction-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    flex-shrink: 0;
}

.finance-direction-icon.in  { background: var(--status-green-dim); color: var(--status-green); }
.finance-direction-icon.out { background: var(--status-red-dim);   color: var(--status-red); }

/* ── Summen-Zeile unter Cashflow-Tabelle ─────────────────────── */
.finance-summary-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: var(--sp-4);
}

.finance-summary-cell {
    background: var(--bg-elevated);
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.finance-summary-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.finance-summary-value {
    font-size: 18px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}

@media (max-width: 768px) {
    .finance-summary-row { grid-template-columns: 1fr; }
}

/* ── Liquiditaets-Chart (vanilla SVG) ───────────────────────── */
.liquidity-hero {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.liquidity-hero-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.liquidity-hero-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.liquidity-hero-value {
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.liquidity-hero-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.liquidity-chart {
    width: 100%;
    height: 260px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    position: relative;
    overflow: hidden;
}

.liquidity-chart svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.liquidity-line          { fill: none; stroke: var(--accent-ink); stroke-width: 2; }
.liquidity-band          { fill: rgba(30, 64, 175, 0.16); stroke: none; }
.liquidity-grid-line     { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 2 4; }
.liquidity-axis-label    { fill: var(--text-muted); font-size: 12px; font-family: var(--font-mono); }
.liquidity-zero-line     { stroke: var(--status-red); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.5; }
.liquidity-point         { fill: var(--bg-root); stroke: var(--accent-ink); stroke-width: 1.5; }

/* ── Target Progress Bar ────────────────────────────────────── */
.target-progress-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.target-progress-bar {
    position: relative;
    height: 8px;
    background: var(--bg-elevated);
    border-radius: 4px;
    overflow: hidden;
}

.target-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: var(--accent);
    border-radius: 4px;
    transition: width 250ms ease;
}

.target-progress-fill.over   { background: var(--status-green); }
.target-progress-fill.under  { background: var(--status-amber); }
.target-progress-fill.behind { background: var(--status-red); }

.target-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* ── Filter-Toolbar im Finance-Panel ─────────────────────────── */
.finance-toolbar {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    align-items: center;
}

.finance-toolbar input[type="date"],
.finance-toolbar input[type="search"],
.finance-toolbar input[type="number"],
.finance-toolbar select {
    background: var(--bg-root);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    min-height: 32px;
}

@media (max-width: 768px) {
    .finance-toolbar input,
    .finance-toolbar select { min-height: 44px; font-size: 16px; flex: 1 1 100%; }
}

.finance-toolbar .toggle-group {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.finance-toolbar .toggle-group button {
    background: var(--bg-root);
    border: none;
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    min-height: 32px;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
}

.finance-toolbar .toggle-group button.active {
    background: var(--accent-dim);
    color: var(--accent-ink);
    font-weight: 500;
}

.finance-toolbar .toggle-group button + button {
    border-left: 1px solid var(--border);
}

@media (max-width: 768px) {
    .finance-toolbar .toggle-group button { min-height: 44px; padding: 8px 14px; }
}

/* ── Cashflow-Tabelle: Mobile → Cards ────────────────────────── */
.cashflow-table td.cashflow-amount-cell { text-align: right; }
.cashflow-table td.cashflow-actions-cell { text-align: right; white-space: nowrap; }

@media (max-width: 768px) {
    .cashflow-table thead { display: none; }
    .cashflow-table, .cashflow-table tbody, .cashflow-table tr, .cashflow-table td {
        display: block;
        width: 100%;
    }
    .cashflow-table tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: var(--sp-3);
        padding: var(--sp-3);
        background: var(--bg-surface);
    }
    .cashflow-table td {
        padding: 4px 0;
        border: none;
        white-space: normal;
    }
    .cashflow-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-muted);
        margin-bottom: 2px;
    }
    .cashflow-table td.cashflow-amount-cell,
    .cashflow-table td.cashflow-actions-cell {
        text-align: left;
    }
}

/* ── P&L: Period-Picker + Breakdown ──────────────────────────── */
.pnl-period-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.pnl-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

@media (max-width: 768px) {
    .pnl-breakdown { grid-template-columns: 1fr; }
}

.pnl-breakdown-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4);
}

.pnl-breakdown-card h4 {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}

.pnl-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}

.pnl-breakdown-row:last-child { border-bottom: none; }

.pnl-breakdown-row span:last-child {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* ── Targets-Tabelle ──────────────────────────────────────────── */
.targets-table .target-company-cell { font-weight: 500; }
.targets-table .target-type-cell { text-transform: capitalize; }
.targets-table .target-value-cell {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

@media (max-width: 768px) {
    .targets-table thead { display: none; }
    .targets-table, .targets-table tbody, .targets-table tr, .targets-table td {
        display: block;
        width: 100%;
    }
    .targets-table tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: var(--sp-3);
        padding: var(--sp-3);
        background: var(--bg-surface);
    }
    .targets-table td {
        padding: 4px 0;
        border: none;
    }
    .targets-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-muted);
        margin-bottom: 2px;
    }
    .targets-table .target-value-cell { text-align: left; }
}

/* ── End R-3.3 Phase 2 ─────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════
   WAVE 8.5b — MECE-Sidebar (Gruppen) + Account-Menu + Feedback
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar-Gruppen (Logistik / Finanzen / Produkte / Insights / Verwaltung) ── */
.sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border-subtle);
}

.sidebar-group:first-of-type {
    /* erste Gruppe nach den Top-Level-Items (Dashboard / Aufgaben) */
    margin-top: var(--sp-3);
}

.sidebar-group-label {
    padding: 4px 12px 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    transition: opacity 150ms;
    white-space: nowrap;
    overflow: hidden;
}

/* Collapsed-Mode: Labels weg, Trennlinien bleiben fuer visuelle Orientierung */
html.sidebar-collapsed .sidebar-group-label {
    height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

html.sidebar-collapsed .sidebar-group {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
}

/* ── Account-Menue (Mein Konto Dropdown ueber dem User-Block) ───── */
.sidebar-user-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition);
    font-family: inherit;
    min-height: 56px;
}

.sidebar-user-toggle:hover { background: var(--bg-hover); }

.sidebar-user-toggle .sidebar-user-meta {
    flex: 1;
    min-width: 0;
}

.sidebar-user-caret {
    color: var(--text-muted);
    font-size: 14px;
    transition: transform var(--transition);
    flex-shrink: 0;
}

.sidebar-user-toggle[aria-expanded="true"] .sidebar-user-caret {
    transform: rotate(180deg);
}

html.sidebar-collapsed .sidebar-user-caret { display: none; }

/* Dropdown selbst — sitzt direkt ueber dem User-Toggle */
.sidebar-user { position: relative; padding: 0; flex-direction: column; align-items: stretch; }

.sidebar-account-menu {
    display: none;
    flex-direction: column;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

.sidebar-account-menu.open {
    display: flex;
}

.sidebar-account-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    min-height: 44px;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-account-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar-account-item.active {
    background: var(--accent-dim);
    color: var(--accent-ink);
}

.sidebar-account-item i {
    font-size: 16px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    color: var(--text-muted);
}

.sidebar-account-item:hover i { color: var(--text-primary); }
.sidebar-account-item.active i { color: var(--accent-ink); }

/* Collapsed-Mode: Account-Toggle zeigt nur Avatar zentriert, Menu Inhalt bleibt nutzbar */
html.sidebar-collapsed .sidebar-user-toggle {
    justify-content: center;
    padding: var(--sp-3);
}

html.sidebar-collapsed .sidebar-account-item span {
    display: none;
}

html.sidebar-collapsed .sidebar-account-item {
    justify-content: center;
    padding: 10px;
}

html.sidebar-collapsed .sidebar-account-item i {
    width: auto;
}

/* ══════════════════════════════════════════════════════════════
   COMING-SOON Placeholder (PIM, Customer Satisfaction)
   ═══════════════════════════════════════════════════════════════ */

.coming-soon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px var(--sp-4) 64px;
    max-width: 480px;
    margin: 0 auto;
}

.coming-soon-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: var(--sp-5);
}

.coming-soon-eyebrow {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-ink);
    margin-bottom: var(--sp-2);
}

.coming-soon-title {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: var(--sp-3);
    line-height: 1.2;
}

@media (min-width: 769px) {
    .coming-soon-title { font-size: 28px; }
}

.coming-soon-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--sp-6);
    max-width: 380px;
}

.coming-soon-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
}

.coming-soon-back:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-color: var(--bg-active);
}

/* ══════════════════════════════════════════════════════════════
   PRICING-LANDING (Such-Form, falls keine SKU im Pfad)
   ═══════════════════════════════════════════════════════════════ */

.pricing-landing {
    max-width: 600px;
    margin: 64px auto 0;
    padding: 0 var(--sp-4);
}

.pricing-landing-header {
    text-align: center;
    margin-bottom: var(--sp-6);
}

.pricing-landing-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--accent-dim);
    color: var(--accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: var(--sp-4);
}

.pricing-landing-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
}

.pricing-landing-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}

.pricing-landing-form {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
}

.pricing-landing-form input {
    flex: 1;
    height: 48px;
    padding: 0 var(--sp-4);
    font-size: 15px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius);
    font-family: var(--font-mono);
}

.pricing-landing-form input:focus {
    border-color: var(--focus-ring);
    outline: none;
}

.pricing-landing-form .btn-primary {
    height: 48px;
    padding: 0 var(--sp-5);
    font-size: 14px;
}

@media (max-width: 768px) {
    .pricing-landing { margin-top: 32px; }
    .pricing-landing-form { flex-direction: column; }
    .pricing-landing-form input,
    .pricing-landing-form .btn-primary {
        height: 52px;
        font-size: 16px;
        width: 100%;
    }
}

.pricing-landing-recent {
    border-top: 1px solid var(--border);
    padding-top: var(--sp-5);
}

.pricing-landing-recent-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}

.pricing-landing-recent-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pricing-landing-recent-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 13px;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
    min-height: 44px;
}

.pricing-landing-recent-item:hover {
    border-color: var(--accent-ink);
    background: var(--bg-hover);
    color: var(--text-primary);
}

.pricing-landing-recent-sku {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}

.pricing-landing-recent-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pricing-landing-empty {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    padding: var(--sp-4) 0;
}

/* ══════════════════════════════════════════════════════════════
   FEEDBACK-Form (Mobile-first)
   ═══════════════════════════════════════════════════════════════ */

.feedback-wrap {
    max-width: 640px;
    margin: 0 auto;
}

.feedback-intro {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: var(--sp-5);
}

.feedback-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
}

.feedback-field {
    margin-bottom: var(--sp-5);
}

.feedback-field:last-child { margin-bottom: 0; }

.feedback-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--sp-3);
}

/* Tag-Pills */
.feedback-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.feedback-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    min-height: 44px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.feedback-tag i { font-size: 14px; color: var(--text-muted); }

.feedback-tag:hover {
    border-color: var(--bg-active);
    color: var(--text-primary);
    background: var(--bg-hover);
}

.feedback-tag.active {
    background: var(--accent-dim);
    border-color: var(--accent-ink);
    color: var(--accent-ink);
    font-weight: 500;
}

.feedback-tag.active i { color: var(--accent-ink); }

/* Textarea — autoresize via JS, hier nur Base-Styles */
.feedback-textarea {
    width: 100%;
    min-height: 140px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-root);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius);
    font-size: 16px;  /* iOS-zoom prevention */
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: border-color var(--transition);
}

.feedback-textarea:focus { border-color: var(--focus-ring); }

.feedback-textarea::placeholder { color: var(--text-muted); }

.feedback-route-display {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px var(--sp-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    min-height: 36px;
}

.feedback-route-display i {
    font-size: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.feedback-route-display code {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feedback-submit-row {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    margin-top: var(--sp-5);
}

.feedback-submit-row .btn-primary {
    flex: 1;
    min-height: 48px;
    font-size: 14px;
    font-weight: 500;
}

.feedback-flash {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: var(--sp-4);
    line-height: 1.4;
}

.feedback-flash.show { display: flex; }
.feedback-flash i { font-size: 18px; flex-shrink: 0; }

.feedback-flash.success {
    background: var(--status-green-dim);
    color: var(--status-green);
    border: 1px solid rgba(48, 164, 108, 0.3);
}

.feedback-flash.error {
    background: var(--status-red-dim);
    color: var(--status-red);
    border: 1px solid rgba(229, 72, 77, 0.3);
}

/* Historie deiner Feedback-Eintraege */
.feedback-history-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}

.feedback-history-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.feedback-history-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
}

.feedback-history-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.feedback-history-tag {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

.feedback-history-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.feedback-history-status {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}

.feedback-history-status.status-new {
    background: var(--bg-elevated);
    color: var(--text-muted);
}

.feedback-history-status.status-seen {
    background: var(--accent-dim);
    color: var(--accent-ink);
}

.feedback-history-status.status-in_progress {
    background: var(--status-amber-dim);
    color: var(--status-amber);
}

.feedback-history-status.status-done {
    background: var(--status-green-dim);
    color: var(--status-green);
}

.feedback-history-status.status-wont_fix {
    background: var(--status-red-dim);
    color: var(--status-red);
}

.feedback-history-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.feedback-history-empty {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    padding: var(--sp-5) var(--sp-3);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.feedback-history-claude {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--bg-root);
    border-left: 3px solid var(--accent-ink);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.feedback-history-claude-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-ink);
    margin-bottom: 4px;
}

/* ── End Wave 8.5b ─────────────────────────────────────────── */
/* ============================================================ */


/* ============================================================ */
/* WAVE 11b - PIM (Product Information Management) UI styles    */
/* ============================================================ */

/* ── Header actions row ───────────────────────────────────── */
.pim-header-actions {
    display: inline-flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
}

/* ── Toolbar (Index) ──────────────────────────────────────── */
.pim-toolbar {
    display: inline-flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
}
.pim-toolbar input[type="search"],
.pim-toolbar select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    min-height: 32px;
}
.pim-toolbar input[type="search"] { min-width: 240px; }
.pim-toolbar input[type="search"]:focus,
.pim-toolbar select:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

@media (max-width: 768px) {
    .pim-toolbar { width: 100%; }
    .pim-toolbar input[type="search"],
    .pim-toolbar select {
        min-height: 44px;
        font-size: 16px;
        flex: 1 1 100%;
    }
}

/* ── Index Table ──────────────────────────────────────────── */
.pim-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pim-table thead th {
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.pim-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    color: var(--text-primary);
}
.pim-row {
    cursor: pointer;
    transition: background var(--transition, 200ms ease);
}
.pim-row:hover { background: var(--bg-hover); }

.pim-sku {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

.pim-tags-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.pim-sync-ok {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--status-green);
}
.pim-sync-ok i { font-size: 14px; }
.pim-sync-never {
    font-size: 12px;
    color: var(--text-muted);
}

.pim-row-sync {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: background-color var(--transition, 200ms ease), border-color var(--transition, 200ms ease), color var(--transition, 200ms ease), opacity var(--transition, 200ms ease), transform var(--transition, 200ms ease);
}
.pim-row-sync:hover {
    background: var(--accent-dim);
    color: var(--accent-ink);
    border-color: var(--border);
}
.pim-row-sync:disabled { opacity: 0.5; cursor: wait; }

.text-right { text-align: right; }

/* ── Pagination ───────────────────────────────────────────── */
.pim-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
}
.pim-page-info {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ── Mobile: hide some table columns ──────────────────────── */
@media (max-width: 768px) {
    .pim-table thead th:nth-child(4),
    .pim-table tbody td:nth-child(4) { display: none; }
    .pim-table thead th:nth-child(3),
    .pim-table tbody td:nth-child(3) { display: none; }
}

/* ────────────────────────────────────────────────────────── */
/*  DETAIL VIEW                                                */
/* ────────────────────────────────────────────────────────── */

.pim-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
@media (min-width: 600px) {
    .pim-grid.two-col { grid-template-columns: 1fr 1fr; }
}

.pim-readonly {
    background: var(--bg-surface) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}
.pim-mono {
    font-family: var(--font-mono);
    font-size: 12px !important;
}

.pim-section-divider {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin: var(--sp-5) 0 var(--sp-3) 0;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-subtle);
}

.pim-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 4px;
}
.finance-tab.active .pim-tab-count {
    background: var(--accent);
    color: var(--on-accent);
}

/* ── Tags chip input (Master tab) ─────────────────────────── */
.pim-chips-input {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-height: 40px;
    align-items: center;
    cursor: text;
    transition: border-color var(--transition, 200ms ease);
}
.pim-chips-input:focus-within {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.pim-chips {
    display: contents;
}
.pim-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    background: var(--accent-dim);
    color: var(--accent-ink);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.pim-tag-remove {
    background: transparent;
    border: none;
    color: var(--accent-ink);
    cursor: pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    opacity: 0.7;
    transition: background-color var(--transition, 200ms ease), border-color var(--transition, 200ms ease), color var(--transition, 200ms ease), opacity var(--transition, 200ms ease), transform var(--transition, 200ms ease);
}
.pim-tag-remove:hover {
    background: var(--accent);
    color: var(--on-accent);
    opacity: 1;
}
.pim-chips-input input {
    flex: 1;
    min-width: 140px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    padding: 4px 6px;
}

/* ── Asset Grid (Drag & Drop) ─────────────────────────────── */
.pim-asset-add {
    display: grid;
    grid-template-columns: 140px 1fr 200px auto;
    gap: var(--sp-2);
    align-items: stretch;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
}
.pim-asset-add select,
.pim-asset-add input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
}
.pim-asset-add select:focus,
.pim-asset-add input:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
@media (max-width: 768px) {
    .pim-asset-add {
        grid-template-columns: 1fr;
    }
    .pim-asset-add select,
    .pim-asset-add input {
        min-height: 44px;
        font-size: 16px;
    }
}

.pim-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-3);
}

.pim-asset-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: background-color var(--transition, 200ms ease), border-color var(--transition, 200ms ease), color var(--transition, 200ms ease), opacity var(--transition, 200ms ease), transform var(--transition, 200ms ease);
}
.pim-asset-card:hover {
    border-color: var(--accent-ink);
    box-shadow: var(--shadow-sm);
}

.pim-asset-handle {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: grab;
    opacity: 0;
    transition: opacity var(--transition, 200ms ease);
    z-index: 2;
}
.pim-asset-card:hover .pim-asset-handle { opacity: 1; }
.pim-asset-handle:active { cursor: grabbing; }

.pim-asset-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    opacity: 0;
    transition: background-color var(--transition, 200ms ease), border-color var(--transition, 200ms ease), color var(--transition, 200ms ease), opacity var(--transition, 200ms ease), transform var(--transition, 200ms ease);
    z-index: 2;
}
.pim-asset-card:hover .pim-asset-delete { opacity: 1; }
.pim-asset-delete:hover {
    background: var(--status-red);
}

.pim-asset-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 36px;
}
.pim-asset-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pim-asset-meta {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.pim-asset-type {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-ink);
}
.pim-asset-caption {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pim-asset-url {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pim-asset-url:hover { color: var(--accent-ink); }

/* SortableJS visual cues (shared with Tasks) — extra rules in case base doesn't have them */
.pim-asset-card.sortable-ghost {
    opacity: 0.4;
    background: var(--accent-dim);
}
.pim-asset-card.sortable-drag {
    box-shadow: var(--shadow-md);
    cursor: grabbing;
}

/* ── Allergen pills ───────────────────────────────────────── */
.pim-allergen-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pim-allergen-pill {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--transition, 200ms ease), border-color var(--transition, 200ms ease), color var(--transition, 200ms ease), opacity var(--transition, 200ms ease), transform var(--transition, 200ms ease);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
}
.pim-allergen-pill:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}
.pim-allergen-pill.selected {
    background: var(--accent-dim);
    border-color: var(--accent-ink);
    color: var(--accent-ink);
    font-weight: 500;
}
.pim-allergen-pill i { font-size: 12px; }
@media (max-width: 768px) {
    .pim-allergen-pill { min-height: 40px; padding: 8px 14px; }
}

/* ── Sync History Table ───────────────────────────────────── */
.pim-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pim-history-table thead th {
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.pim-history-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.pim-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-sm);
}
.pim-status-success { background: var(--status-green-dim); color: var(--status-green); }
.pim-status-partial { background: var(--status-amber-dim); color: var(--status-amber); }
.pim-status-failed  { background: var(--status-red-dim);   color: var(--status-red); }

.pim-error-cell {
    font-size: 12px;
    color: var(--status-red);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .pim-history-table thead th:nth-child(4),
    .pim-history-table tbody td:nth-child(4),
    .pim-history-table thead th:nth-child(6),
    .pim-history-table tbody td:nth-child(6) { display: none; }
}

/* ── Toast (PIM) — analog tasks-toast ─────────────────────── */
.pim-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 20px;
    font-size: 13px;
    box-shadow: var(--shadow-overlay);
    opacity: 0;
    transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, opacity 220ms ease, transform 220ms ease;
    z-index: 1000;
    pointer-events: none;
    max-width: calc(100vw - 32px);
}
.pim-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.pim-toast.success { border-color: var(--status-green); color: var(--status-green); }
.pim-toast.warn    { border-color: var(--status-amber); color: var(--status-amber); }
.pim-toast.error   { border-color: var(--status-red);   color: var(--status-red); }

/* ── Modal-header subtitle reset (Modal subclass) ──────────── */
.modal-subtitle {
    font-weight: 400;
}

/* ── Field-row label, used in detail forms ─────────────────── */
.field-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-3); }
.field-row label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}
.field-row input[type="text"],
.field-row input[type="url"],
.field-row input[type="number"],
.field-row input[type="date"],
.field-row select,
.field-row textarea {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: 13px;
    font-family: inherit;
    transition: background-color var(--transition, 200ms ease), border-color var(--transition, 200ms ease), color var(--transition, 200ms ease), opacity var(--transition, 200ms ease), transform var(--transition, 200ms ease);
}
.field-row textarea { resize: vertical; min-height: 60px; }
.field-row input:focus,
.field-row select:focus,
.field-row textarea:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.field-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

@media (max-width: 768px) {
    .field-row input,
    .field-row select,
    .field-row textarea {
        font-size: 16px;
        min-height: 44px;
        padding: 11px 13px;
    }
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-4);
    margin-top: var(--sp-4);
}

/* ── End Wave 11b ──────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════
   WAVE 22b — Insights (Customer-Satisfaction Dashboard)
   ═══════════════════════════════════════════════════════════════ */

/* ── Page-Header Actions ─────────────────────────────────────── */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* ── Insights Toolbar (Filter-Bar) ───────────────────────────── */
.insights-toolbar {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-5);
    flex-wrap: wrap;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-5);
}

.insights-toolbar-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.insights-toolbar-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.insights-toolbar-select,
.insights-toolbar-input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 8px 11px;
    min-height: 36px;
    transition: border-color var(--transition);
}

.insights-toolbar-select:focus,
.insights-toolbar-input:focus {
    outline: none;
    border-color: var(--focus-ring);
}

@media (max-width: 768px) {
    .insights-toolbar { gap: var(--sp-3); padding: var(--sp-3); }
    .insights-toolbar-group { width: 100%; }
    .insights-toolbar-select,
    .insights-toolbar-input {
        width: 100%;
        font-size: 16px;
        min-height: 44px;
    }
}

/* ── Hero-KPI-Grid (analog finance-kpi-grid) ─────────────────── */
.insights-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

/* ── Panel-Meta (Untertitel rechts im Header) ────────────────── */
.panel-meta {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* ── Generic Badges (success/warning/danger) ─────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.badge-success { background: var(--status-green-dim); color: var(--status-green); }
.badge-warning { background: rgba(229,164,48,0.16); color: #E5A430; }
.badge-danger  { background: var(--status-red-dim);   color: var(--status-red); }
.badge-muted   { background: var(--bg-elevated);      color: var(--text-muted); }

/* ── Generic data-table (Insights worst-orders) ──────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead th {
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
    /* Sticky: Spaltentitel bleiben beim Scrollen oben stehen */
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: 0 1px 0 var(--border);
}

.data-table thead th.num { text-align: right; }

.data-table tbody td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tbody td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr:last-child td { border-bottom: 0; }


/* ── Bin-Hover-Popover (Bestandssuche): Lagerplaetze + Bestaende ── */
.bin-info {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    margin-left: 4px;
    vertical-align: middle;
    transition: color var(--transition);
}
.bin-info:hover, .bin-info:focus-visible { color: var(--accent-ink); }

.bin-popover {
    position: fixed;
    z-index: 300;
    min-width: 170px;
    max-width: 280px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-overlay);
    padding: var(--sp-2) 0;
    font-size: 12px;
}
.bin-pop-head {
    padding: 2px var(--sp-3) 6px;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}
.bin-pop-body { max-height: 220px; overflow-y: auto; }
.bin-pop-row {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 3px var(--sp-3);
}
.bin-pop-code { font-family: var(--font-mono); color: var(--text-secondary); }
.bin-pop-qty { font-family: var(--font-mono); font-weight: 500; color: var(--text-primary); }
.bin-pop-empty { padding: 3px var(--sp-3); color: var(--text-muted); }

.cell-muted { color: var(--text-muted); font-size: 12px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── btn-outline (zurückhaltender Action-Button) ─────────────── */
.btn-outline {
    background: transparent;
    border-color: var(--border);
    color: var(--text-primary);
}
.btn-outline:hover {
    background: var(--bg-hover);
    border-color: var(--accent-ink);
    color: var(--accent-ink);
}

/* ── Empty-State Komponenten ─────────────────────────────────── */
.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--sp-4);
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 24px;
}

.empty-state-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 6px;
}

.empty-state-desc {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ── Modal-Header / Body / Footer (additive zum .modal Base) ── */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-4);
    padding-right: 0;
}

.modal-header .modal-title { margin-bottom: 0; padding-right: var(--sp-3); }

.modal-header .modal-close { position: static; }

.modal-body {
    padding-bottom: var(--sp-4);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    padding-top: var(--sp-4);
    margin-top: var(--sp-4);
}

@media (max-width: 768px) {
    .modal-footer { flex-direction: column-reverse; }
    .modal-footer .btn { width: 100%; justify-content: center; }
}

/* ── Modal-Form Layout ───────────────────────────────────────── */
.modal-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--sp-3);
}

.modal-form .form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

@media (max-width: 768px) {
    .modal-form .form-row-2col { grid-template-columns: 1fr; }
}

.form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.form-required { color: var(--status-red); margin-left: 2px; }

.form-input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 10px 12px;
    min-height: 38px;
    transition: border-color var(--transition);
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: var(--focus-ring);
}

textarea.form-input {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
    font-family: var(--font-sans);
}

@media (max-width: 768px) {
    .form-input {
        font-size: 16px;
        min-height: 44px;
    }
}

.form-status {
    margin-top: var(--sp-2);
    font-size: 12px;
}

/* ── Feedback-Liste (Browser) ────────────────────────────────── */
.feedback-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.feedback-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.feedback-card:hover {
    border-color: var(--accent-ink);
    background: var(--bg-elevated);
}

.feedback-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
    flex-wrap: wrap;
}

.feedback-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.feedback-card-date {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.feedback-card-customer {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.feedback-card-subject {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.4;
}

.feedback-card-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.feedback-card-category {
    margin-top: var(--sp-2);
    font-size: 12px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Sentiment + Channel Badges ──────────────────────────────── */
.sentiment-badge,
.channel-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.sentiment-positive { background: var(--status-green-dim); color: var(--status-green); }
.sentiment-neutral  { background: var(--bg-elevated);      color: var(--text-secondary); }
.sentiment-negative { background: var(--status-red-dim);   color: var(--status-red); }
.sentiment-none     { background: var(--bg-elevated);      color: var(--text-muted); }

.channel-badge {
    background: var(--accent-dim);
    color: var(--accent-ink);
}

/* ── Detail-Modal Meta-Grid ──────────────────────────────────── */
.detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--bg-elevated);
    border-radius: var(--radius);
    margin-bottom: var(--sp-4);
}

.detail-meta > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.detail-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.detail-value {
    font-size: 13px;
    color: var(--text-primary);
}

.detail-value.mono { font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════
   Sprint 20b — Cadence Dashboard (Warehouse-Taktung)
   ═══════════════════════════════════════════════════════════════ */

/* Lager-Cards-Grid auf /cadence Übersicht */
.cadence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}

.cadence-stat-card {
    display: block;
    padding: var(--sp-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.cadence-stat-card:hover {
    border-color: var(--accent-ink);
}

.cadence-stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-3);
}

.cadence-stat-card-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.cadence-stat-card-code {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}

.cadence-stat-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.cadence-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cadence-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.cadence-stat-value {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.cadence-stat-value.warn { color: var(--status-amber, var(--status-amber)); }
.cadence-stat-value.crit { color: var(--status-red); }
.cadence-stat-value.ok { color: var(--status-green); }

/* Confidence-Bar in Suggestions-Tabelle */
.cadence-confidence-bar {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 6px;
}

.cadence-confidence-bar-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.2s ease;
}

.cadence-confidence-bar-fill.high { background: var(--status-green); }
.cadence-confidence-bar-fill.medium { background: var(--status-amber, var(--status-amber)); }
.cadence-confidence-bar-fill.low { background: var(--status-red); }

/* Target-Row in cadence_warehouse Tabelle */
.cadence-target-row td {
    font-variant-numeric: tabular-nums;
}

.cadence-target-row .cell-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.cadence-target-row.below-min {
    background: rgba(239, 68, 68, 0.04);
}


/* ================================================================
   Sprint 21b — Support Inbox (R-7 Item 21)
   ================================================================ */

/* Priority-Badges (analog finance-amount Farben) */
.support-prio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
}
.support-prio-urgent {
    color: var(--status-red);
    background: var(--status-red-dim);
    border-color: rgba(229, 72, 77, 0.32);
}
.support-prio-high {
    color: var(--status-amber);
    background: var(--status-amber-dim);
    border-color: rgba(229, 164, 48, 0.28);
}
.support-prio-medium {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-color: var(--border);
}
.support-prio-low {
    color: var(--text-muted);
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

/* Status-Badges */
.support-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
}
.support-status-new {
    color: var(--accent-ink);
    background: var(--accent-dim);
    border-color: rgba(30, 64, 175, 0.32);
}
.support-status-open {
    color: var(--status-green);
    background: var(--status-green-dim);
    border-color: rgba(48, 164, 108, 0.32);
}
.support-status-waiting_customer,
.support-status-waiting_internal {
    color: var(--status-amber);
    background: var(--status-amber-dim);
    border-color: rgba(229, 164, 48, 0.28);
}
.support-status-resolved {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-color: var(--border);
}
.support-status-closed,
.support-status-cancelled {
    color: var(--text-muted);
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

/* Source-Badges */
.support-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    text-transform: capitalize;
}

/* SLA-Indikator (Icon + Label) */
.support-sla {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}
.support-sla-ok {
    color: var(--status-green);
}
.support-sla-warn {
    color: var(--status-amber);
}
.support-sla-breach {
    color: var(--status-red);
}

/* Toolbar oberhalb der Inbox-Tabelle */
.support-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: end;
    margin-bottom: var(--sp-4);
    padding: var(--sp-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.support-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}
.support-toolbar .form-input {
    min-width: 160px;
}
.support-toolbar-spacer {
    flex: 1;
}

/* Layout fuer Ticket-Detail: zweispaltig */
.support-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--sp-5);
    align-items: start;
}
@media (max-width: 960px) {
    .support-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Header-Card am Ticket-Detail */
.support-ticket-header {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}
.support-ticket-header h2 {
    margin: 0 0 var(--sp-2) 0;
    font-size: 18px;
    line-height: 1.3;
    color: var(--text-primary);
    font-weight: 500;
}
.support-ticket-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    color: var(--text-muted);
    font-size: 12px;
}
.support-ticket-body {
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    background: var(--bg-root);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 240px;
    overflow-y: auto;
}

/* Threading-Liste */
.support-thread {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}
.support-message {
    max-width: 78%;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.55;
}
.support-message-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.support-message-body {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--text-primary);
}
.support-message-inbound {
    align-self: flex-start;
    background: var(--bg-surface);
    border-color: var(--border);
}
.support-message-outbound {
    align-self: flex-end;
    background: var(--accent-dim);
    border-color: rgba(30, 64, 175, 0.32);
}
.support-message-outbound .support-message-meta {
    color: var(--accent-ink);
}
.support-message-internal-note {
    align-self: stretch;
    max-width: 100%;
    background: rgba(229, 164, 48, 0.06);
    border-color: rgba(229, 164, 48, 0.32);
}
.support-message-internal-note .support-message-meta {
    color: var(--status-amber);
}

/* Reply-Editor */
.support-reply {
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.support-reply textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    font-family: var(--font-sans);
    font-size: 14px;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    background: var(--bg-root);
    color: var(--text-primary);
    border-radius: var(--radius);
}
.support-reply textarea:focus {
    outline: none;
    border-color: var(--focus-ring);
}
.support-reply-actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    margin-top: var(--sp-3);
}

/* Side-Panel rechts */
.support-side {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.support-side-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
}
.support-side-card h3 {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 var(--sp-3) 0;
    font-weight: 500;
}
.support-side-card label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    margin-top: var(--sp-2);
}
.support-side-card label:first-of-type {
    margin-top: 0;
}
.support-side-card .form-input,
.support-side-card select.form-input {
    width: 100%;
}
.support-side-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.support-escalation-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-height: 220px;
    overflow-y: auto;
}
.support-escalation-item {
    border-left: 3px solid var(--status-amber);
    background: var(--bg-elevated);
    padding: var(--sp-2) var(--sp-3);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 12px;
}
.support-escalation-item-level {
    display: inline-block;
    font-weight: 500;
    color: var(--status-amber);
    margin-right: 8px;
}
.support-escalation-item-level.lvl-3 {
    color: var(--status-red);
}
.support-escalation-item-time {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

/* Mobile-Card-Fallback fuer die Inbox-Tabelle */
@media (max-width: 720px) {
    .support-mobile-card {
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: var(--sp-3);
        margin-bottom: var(--sp-2);
    }
    .support-mobile-card-row {
        display: flex;
        justify-content: space-between;
        gap: var(--sp-2);
        margin-bottom: 4px;
        font-size: 13px;
    }
    .support-mobile-card-subject {
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.35;
        margin-bottom: var(--sp-2);
    }
    .support-mobile-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }
    .support-mobile-card-customer {
        color: var(--text-muted);
        font-size: 12px;
        margin-top: 4px;
    }
}

.cadence-target-row.above-max {
    background: rgba(245, 158, 11, 0.04);
}

.cadence-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.cadence-badge.manual { background: var(--bg-elevated); color: var(--text-secondary); }
.cadence-badge.auto_velocity { background: var(--accent-dim); color: var(--accent-ink); }
.cadence-badge.auto_seasonality { background: var(--status-green-dim); color: var(--status-green); }

.cadence-toolbar {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}


.detail-section {
    margin-bottom: var(--sp-4);
}

.detail-section-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}

.detail-subject {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.detail-body {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: var(--sp-3);
}

/* ── End Wave 22b ────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════
   CHAT — Sprint 15b (R-7 Item 15)
   Vollbild /chat-Seite + Floating-Widget rechts unten.
   ═══════════════════════════════════════════════════════════════ */

/* ── /chat Vollbild ─────────────────────────────────────────── */

.chat-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    height: calc(100vh - 32px);
    background: var(--bg-root);
}

.chat-sidebar {
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-sidebar-header {
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.chat-sidebar-header .btn {
    flex: 1;
    justify-content: center;
    gap: 6px;
}

.chat-sidebar-drawer-close {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.chat-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-conv-item {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-conv-item:hover {
    background: var(--bg-hover);
}

.chat-conv-item.active {
    background: var(--bg-elevated);
    border-color: transparent;
    color: var(--text-primary);
}

.chat-conv-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.chat-conv-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.chat-empty-small {
    padding: var(--sp-4);
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.chat-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 60;
}

.chat-sidebar-backdrop.open {
    display: block;
}

/* ── Chat-Main ──────────────────────────────────────────────── */

.chat-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-root);
}

.chat-main-header {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--bg-surface);
}

.chat-sidebar-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.chat-main-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}

.chat-main-title i {
    color: var(--text-secondary);
}

.chat-main-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-main-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.chat-empty {
    margin: auto;
    max-width: 520px;
    text-align: center;
    color: var(--text-secondary);
    padding: var(--sp-6) var(--sp-4);
}

.chat-empty-icon {
    font-size: 24px;
    color: var(--text-muted);
    opacity: 1;
    margin-bottom: var(--sp-4);
    display: block;
}

.chat-empty h2 {
    font-size: 22px;
    color: var(--text-primary);
    margin-bottom: var(--sp-3);
}

.chat-empty p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--sp-4);
}

.chat-empty-examples {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: stretch;
}

.chat-example {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
}

.chat-example:hover {
    border-color: var(--accent-ink);
    color: var(--text-primary);
}

.chat-loading {
    margin: auto;
    padding: var(--sp-6);
}

.chat-error {
    background: var(--status-red-dim);
    color: var(--status-red);
    border: 1px solid var(--status-red);
    border-radius: var(--radius);
    padding: var(--sp-3);
    font-size: 13px;
}

/* ── Message-Bubbles ────────────────────────────────────────── */

.chat-message-user,
.chat-message-assistant {
    display: flex;
    width: 100%;
}

.chat-message-user {
    justify-content: flex-end;
}

.chat-message-assistant {
    justify-content: flex-start;
}

.chat-message-tool {
    width: 100%;
    display: flex;
    justify-content: center;
}

.chat-bubble {
    max-width: 75%;
    padding: var(--sp-3) var(--sp-4);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.chat-bubble-user {
    background: var(--accent);
    color: var(--on-accent);
    border-bottom-right-radius: 4px;
}

.chat-bubble-assistant {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.chat-thinking {
    color: var(--text-secondary);
}

.chat-dot-1, .chat-dot-2, .chat-dot-3 {
    animation: chat-dot-pulse 1.4s infinite;
    opacity: 0.3;
}
.chat-dot-2 { animation-delay: 0.2s; }
.chat-dot-3 { animation-delay: 0.4s; }

@keyframes chat-dot-pulse {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

/* ── Tool-Cards ─────────────────────────────────────────────── */

.chat-tool-card {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.chat-tool-card i {
    color: var(--text-muted);
}

.chat-tool-name {
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-weight: 500;
}

.chat-tool-state {
    color: var(--text-muted);
    font-size: 12px;
}

.chat-tool-result {
    max-width: 85%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: var(--sp-2);
    font-size: 12px;
}

.chat-tool-result summary {
    cursor: pointer;
    color: var(--text-secondary);
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-tool-result summary i {
    color: var(--status-green);
}

.chat-tool-result pre {
    margin-top: var(--sp-2);
    padding: var(--sp-2);
    background: var(--bg-root);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 12px;
    overflow-x: auto;
    max-height: 300px;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

/* ── Proposed-Action-Cards ──────────────────────────────────── */

.chat-proposed-action {
    background: var(--bg-elevated);
    border: 1px solid var(--status-amber);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin: var(--sp-2) 0;
    align-self: center;
    max-width: 85%;
    width: 100%;
}

.chat-proposed-action.chat-proposed-executed {
    border-color: var(--status-green);
    border-left-color: var(--status-green);
    background: var(--status-green-dim);
}

.chat-proposed-action.chat-proposed-rejected {
    border-color: var(--text-muted);
    border-left-color: var(--text-muted);
    opacity: 0.6;
}

.chat-proposed-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.chat-proposed-header i {
    color: var(--status-amber);
}

.chat-proposed-executed .chat-proposed-header i {
    color: var(--status-green);
}

.chat-proposed-label {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
}

.chat-proposed-body {
    margin-bottom: var(--sp-3);
    font-size: 13px;
    color: var(--text-secondary);
}

.chat-prop-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-prop-items li {
    padding: 4px 8px;
    background: var(--bg-root);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.chat-prop-qty {
    color: var(--accent-ink);
    font-weight: 500;
    font-family: var(--font-mono);
}

.chat-prop-sku {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.chat-prop-text {
    padding: var(--sp-2);
    background: var(--bg-root);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.chat-proposed-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

.chat-prop-done {
    color: var(--status-green);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chat-prop-failed {
    color: var(--status-red);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chat-prop-rejected {
    color: var(--text-muted);
    font-size: 13px;
}

/* ── Input ──────────────────────────────────────────────────── */

.chat-input {
    border-top: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-4);
    /* iOS: untere Eingabeleiste ueber Home-Indicator/abgerundete Ecken heben */
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: var(--bg-surface);
}

.chat-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-2);
}

.chat-input-wrap:focus-within {
    border-color: var(--focus-ring);
}

.chat-input-wrap textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    outline: none;
    min-height: 36px;
    max-height: 200px;
}

/* Voice-Eingabe: Mikrofon-Button (Chat + Widget) */
.chat-mic-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.chat-mic-btn:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.chat-mic-btn i { font-size: 18px; }
.chat-mic-btn.recording {
    color: var(--on-accent);
    background: var(--danger-fill);
    border-color: var(--danger-fill);
    animation: chat-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes chat-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger-fill) 55%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger-fill) 0%, transparent); }
}

.chat-send-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-input-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    min-height: 14px;
}

/* ── Mobile (/chat) ─────────────────────────────────────────── */

@media (max-width: 768px) {
    .chat-layout {
        grid-template-columns: 1fr;
        height: 100vh;
    }
    .chat-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        z-index: 70;
        transform: translateX(-100%);
        transition: transform var(--transition);
    }
    .chat-sidebar.drawer-open {
        transform: translateX(0);
    }
    .chat-sidebar-drawer-close {
        display: inline-flex;
    }
    .chat-sidebar-toggle {
        display: inline-flex;
    }
    .chat-bubble {
        max-width: 90%;
    }
}


/* ══════════════════════════════════════════════════════════════
   CHAT WIDGET — Floating rechts unten (auf allen Seiten ausser /chat)
   2026-11-12: mobil Vollbild ueber der Kopfleiste, folgt der iOS-Tastatur
   (visualViewport -> --chat-vv-h/--chat-vv-top), Feedback-Knopf weg solange
   der Chat offen ist, 44px-Ziele, Vorschlaege im leeren Zustand.
   ═══════════════════════════════════════════════════════════════ */

.chat-widget-floating {
    position: fixed;
    right: 20px;
    z-index: 50;
    /* Safe-Area-Inset fuer iOS (Home-Indicator) */
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
/* Offen ueber dem Feedback-Knopf (51) und der mobilen Kopfleiste (100),
   unter Navigations-Drawer und Modals. */
.chat-widget-floating.open { z-index: 150; }
html.chat-offen .fbw-floating { display: none; }
/* /chat: Feedback-Knopf lag ueber Mikrofon und Senden und fing die Klicks ab (2026-11-12) */
html.chat-seite .fbw-floating { bottom: calc(230px + env(safe-area-inset-bottom, 0px)); }

.chat-widget-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    color: var(--on-accent);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.chat-widget-fab:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-overlay);
}
.chat-widget-fab i { font-size: 26px; }

.chat-widget-panel {
    display: none;
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 400px;
    height: min(640px, calc(100vh - 120px));
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    flex-direction: column;
    overflow: hidden;
}
.chat-widget-floating.open .chat-widget-panel { display: flex; }

.chat-widget-header {
    padding: 8px 8px 8px var(--sp-4);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    background: var(--bg-surface);
    flex-shrink: 0;
}
.chat-widget-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
    min-width: 0;
}
.chat-widget-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-green);
    flex-shrink: 0;
}
.chat-widget-actions { display: flex; gap: 2px; }
.chat-widget-iconbtn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    transition: background var(--transition), color var(--transition);
}
.chat-widget-iconbtn:hover { background: var(--bg-hover); color: var(--text-primary); }

.chat-widget-messages {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.chat-widget-loading {
    margin: auto;
    color: var(--text-muted);
    font-size: 13px;
}

/* Leerer Zustand: kurze Erklaerung + Vorschlaege, unten am Eingabefeld */
.chat-widget-welcome {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-widget-welcome-title {
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary);
}
.chat-widget-welcome-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: var(--sp-2);
}
.chat-widget-starters { display: flex; flex-direction: column; gap: 6px; }
.chat-widget-starter {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.chat-widget-starter i { font-size: 17px; color: var(--accent-ink); flex-shrink: 0; }
.chat-widget-starter:hover { border-color: var(--accent-ink); background: var(--bg-hover); }

.chat-widget-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.chat-widget-msg-user {
    align-self: flex-end;
    background: var(--accent);
    color: var(--on-accent);
    border-bottom-right-radius: 4px;
}
.chat-widget-msg-assistant {
    align-self: flex-start;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}
.chat-widget-msg-error {
    align-self: flex-start;
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    background: var(--status-red-dim);
    color: var(--status-red);
}
.chat-widget-msg-tool {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    padding: 0 4px;
}
.chat-widget-msg-tool i { font-size: 13px; }

.chat-widget-thinking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}
.chat-widget-thinking-dots { display: inline-flex; gap: 3px; }
.chat-widget-thinking-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
    animation: chat-widget-dot 1.2s ease-in-out infinite;
}
.chat-widget-thinking-dots i:nth-child(2) { animation-delay: .15s; }
.chat-widget-thinking-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-widget-dot {
    0%, 60%, 100% { opacity: .35; }
    30% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-widget-thinking-dots i { animation: none; opacity: .6; }
}

.chat-widget-proposal {
    align-self: stretch;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--status-amber);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.chat-widget-proposal-label {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
    font-size: 13px;
}
.chat-widget-proposal-actions { display: flex; gap: 8px; }
.chat-widget-proposal-actions .btn { flex: 1; }

.chat-widget-input {
    border-top: 1px solid var(--border);
    padding: 10px;
    /* iOS: im Mobile-Vollbild-Panel (bottom:0) ueber den Home-Indicator heben */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-surface);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.chat-widget-input textarea {
    flex: 1;
    min-width: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 20px;
    resize: none;
    outline: none;
    padding: 7px 12px;
    border-radius: var(--radius);
    height: 36px;
    min-height: 36px;
    max-height: 140px;
}
.chat-widget-input textarea:focus { border-color: var(--focus-ring); }
.chat-widget-input .chat-mic-btn,
.chat-widget-send {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.chat-widget-send {
    padding: 0;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.chat-widget-send:hover { background: var(--accent-hover); }
.chat-widget-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Chat wie Claude Code (2026-11-12): Anhaenge, erzeugte Dateien (Widget + /chat) */
.chat-anhaenge {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.chat-anhaenge[hidden] { display: none; }
.chat-anhaenge-voll { padding: 0 0 var(--sp-2); border-top: none; background: transparent; }
.chat-anhang-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 32px;
    padding: 2px 2px 2px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-secondary);
}
.chat-anhang-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.chat-anhang-chip.laedt { opacity: .65; }
.chat-anhang-chip.fehler { border-color: var(--status-red); color: var(--status-red); }
.chat-anhang-chip button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chat-attach-btn i { font-size: 18px; }
.chat-msg-anhaenge {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 6px;
    font-size: 12px;
    opacity: .9;
}
.chat-msg-anhaenge span { display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.chat-dateien {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 85%;
    min-width: 0;
}
.chat-datei {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
}
.chat-datei:hover { border-color: var(--hairline-strong); background: var(--bg-hover); }
.chat-datei > i { font-size: 20px; color: var(--text-secondary); flex-shrink: 0; }
.chat-datei-name { overflow-wrap: anywhere; font-weight: 500; }
.chat-datei-groesse { margin-left: auto; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.chat-datei .chat-datei-dl { font-size: 16px; color: var(--text-secondary); }
.chat-datei-bild img {
    display: block;
    max-width: 100%;
    max-height: 280px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
}
@media (max-width: 768px) {
    .chat-datei, .chat-anhang-chip { font-size: 15px; }
    .chat-dateien { max-width: 92%; }
    /* Artefakt: Tippziele 44 (Regel Handy 44/16) */
    .chat-artefakt-gross { min-height: 44px; font-size: 15px; }
    .chat-artefakt-gross[download] { min-width: 44px; justify-content: center; }
}

/* Artefakte (2026-11-13): HTML aus der Code-Umgebung, abgeschottet eingebettet */
.chat-artefakt {
    align-self: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    overflow: hidden;
    min-width: 0;
}
.chat-artefakt-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.chat-artefakt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.chat-artefakt-gross {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 0 8px;
    color: var(--accent-ink);
    text-decoration: none;
    white-space: nowrap;
}
.chat-artefakt-rahmen {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    background: #fff;
}
.chat-widget-messages .chat-artefakt-rahmen { height: 360px; }
/* Artefakte duerfen die volle Breite nutzen (die Datei-Liste ist sonst nur so breit wie ihr Inhalt) */
.chat-dateien:has(.chat-artefakt) { align-self: stretch; max-width: 100%; width: 100%; }
.chat-message-assistant:has(.chat-artefakt) { width: 100%; }
.chat-message-assistant .chat-artefakt { width: 100%; max-width: 960px; }

/* Gespraechsmodus (2026-11-13): letzte Saetze des Gespraechs ueber der Eingabe */
.chat-gespraech {
    max-height: 132px;
    overflow-y: auto;
    padding: 6px 10px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.chat-gespraech[hidden] { display: none; }
.chat-gespraech-voll { border-top: none; background: transparent; padding: 0 0 var(--sp-2); }
.chat-gespraech-zeile + .chat-gespraech-zeile { margin-top: 2px; }
.chat-gespraech-du b { color: var(--text-primary); }
.chat-gespraech-assist b { color: var(--accent-ink); }
/* Gespraechsknopf aktiv: wie das Diktat (.chat-mic-btn.recording, rot mit Puls), keine zweite Akzentflaeche */
@media (max-width: 768px) { .chat-gespraech { font-size: 15px; } }

/* Sprachdialog (2026-11-12): Stand ueber der Eingabe, Mikrofon spricht/hoert */
.chat-sprache-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.chat-sprache-status[hidden] { display: none; }
.chat-sprache-voll { padding: 0 0 var(--sp-2); border-top: none; background: transparent; }
.chat-sprache-text { flex: 1; min-width: 0; }
.chat-sprache-punkt {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
}
.chat-sprache-hoert { background: var(--status-red); animation: chat-mic-pulse 1.2s ease-in-out infinite; }
.chat-sprache-denkt { background: var(--status-amber); }
.chat-sprache-spricht { background: var(--accent); animation: chat-mic-pulse 1.2s ease-in-out infinite; }
.chat-sprache-ende {
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}
.chat-sprache-ende:hover { border-color: var(--border-strong); }
.chat-mic-btn.spricht { color: var(--accent-ink); background: var(--bg-active); border-color: var(--border-strong); }
.chat-sprache-status .chat-sprache-spricht { background: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) {
    .chat-sprache-hoert, .chat-sprache-spricht { animation: none; }
}
@media (max-width: 768px) {
    .chat-sprache-status { font-size: 15px; }
    .chat-sprache-ende { min-height: 44px; font-size: 15px; }
}

/* Handy: Vollbild ueber der Kopfleiste, Hoehe = sichtbarer Bereich (Tastatur); bis 768 wie matchMedia im Widget */
@media (max-width: 768px) {
    .chat-widget-floating { right: 16px; }
    .chat-widget-floating.open .chat-widget-fab { display: none; }
    html.chat-offen, html.chat-offen body { overflow: hidden; }
    .chat-widget-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: auto;
        top: var(--chat-vv-top, 0px);
        width: 100%;
        height: var(--chat-vv-h, 100dvh);
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .chat-widget-header {
        padding-top: calc(6px + env(safe-area-inset-top, 0px));
        padding-bottom: 6px;
    }
    .chat-widget-title { font-size: 16px; }
    .chat-widget-iconbtn { width: 44px; height: 44px; font-size: 22px; }
    .chat-widget-full { display: none; }
    .chat-widget-messages { padding: var(--sp-4) var(--sp-3); }
    .chat-widget-msg, .chat-widget-msg-error { font-size: 16px; max-width: 88%; }
    .chat-widget-welcome-title { font-size: 20px; }
    .chat-widget-welcome-text { font-size: 15px; }
    .chat-widget-starter { min-height: 48px; font-size: 15px; }
    .chat-widget-proposal-label { font-size: 15px; }
    .chat-widget-proposal-actions .btn { min-height: 44px; font-size: 15px; }
    .chat-widget-input textarea {
        font-size: 16px; /* iOS zoomt bei < 16px */
        line-height: 22px;
        padding: 10px 14px;
        height: 44px;
        min-height: 44px;
        border-radius: 22px;
    }
    .chat-widget-input .chat-mic-btn,
    .chat-widget-send { width: 44px; height: 44px; border-radius: 50%; }
    .chat-widget-input .chat-mic-btn i, .chat-widget-send i { font-size: 20px; }
}


/* ================================================================
   Sprint LD.1b - Laden Auffüllen (Bin-Replenishment)
   ================================================================ */

/* Lager-Übersicht: 3 Karten-Grid (analog Cadence) */
.laden-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}

.laden-warehouse-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.laden-warehouse-card:hover {
    border-color: var(--accent-ink);
}

.laden-warehouse-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.laden-warehouse-card-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.laden-warehouse-card-code {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}

.laden-warehouse-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
}

.laden-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.laden-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.laden-stat-value {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.laden-stat-value.warn { color: var(--status-amber, var(--status-amber)); }
.laden-stat-value.crit { color: var(--status-red); }
.laden-stat-value.ok { color: var(--status-green); }

.laden-warehouse-card-actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.laden-card-msg {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    line-height: 1.4;
}

.laden-card-msg.success {
    background: var(--status-green-dim);
    color: var(--status-green);
}

.laden-card-msg.error {
    background: var(--status-red-dim);
    color: var(--status-red);
}

/* Page-Level Message (Detail-Page) */
.laden-page-msg {
    margin: var(--sp-3) 0;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.5;
}

.laden-page-msg.success {
    background: var(--status-green-dim);
    color: var(--status-green);
    border: 1px solid var(--status-green);
}

.laden-page-msg.error {
    background: var(--status-red-dim);
    color: var(--status-red);
    border: 1px solid var(--status-red);
}

/* Horizontale Scrollleiste OBEN, synchron mit der breiten Tabelle */
.table-scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 4px;
}
.table-scroll-top #refill-scroll-top-inner {
    height: 1px;
}

/* Auffuellen: Quell-Bin -> Laden Buchungs-Aktion (Mengenfeld + Button) */
.refill-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.refill-qty-input {
    width: 64px;
    text-align: right;
    padding: 4px 6px;
    font-size: 14px;
}
.refill-action .btn {
    white-space: nowrap;
}

/* Tabs */
.laden-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-subtle);
    margin: var(--sp-3) 0 var(--sp-4) 0;
    flex-wrap: wrap;
}

.laden-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    min-height: 44px;
}

.laden-tab:hover {
    color: var(--text-primary);
}

.laden-tab.active {
    color: var(--accent-ink);
    border-bottom-color: var(--accent-ink);
    font-weight: 500;
}

.laden-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.laden-tab.active .laden-tab-count {
    background: var(--accent-dim);
    color: var(--accent-ink);
}

.laden-tab-pane {
    margin-top: var(--sp-3);
}

/* Priorities */
.suggestion-priority {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.suggestion-priority-urgent {
    background: var(--status-red-dim);
    color: var(--status-red);
}

.suggestion-priority-high {
    background: var(--status-amber-dim);
    color: var(--status-amber, var(--status-amber));
}

.suggestion-priority-medium {
    background: var(--accent-dim);
    color: var(--accent-ink);
}

.suggestion-priority-low {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

/* Urgent-Highlight im Suggestion-Tabellen-Row */
.priority-urgent-row td {
    background: rgba(239, 68, 68, 0.04);
}

/* Shortage-Row (alle Zeilen sind kritisch) */
.shortage-row td {
    background: rgba(239, 68, 68, 0.04);
}

/* Mobile-Layout: Tabs stacken vertikal auf kleinen Bildschirmen */
@media (max-width: 640px) {
    .laden-tabs {
        flex-direction: column;
        border-bottom: none;
    }
    .laden-tab {
        border-bottom: 1px solid var(--border-subtle);
        border-left: 2px solid transparent;
        padding-left: 12px;
        justify-content: flex-start;
    }
    .laden-tab.active {
        border-bottom-color: var(--border-subtle);
        border-left-color: var(--accent-ink);
        background: var(--accent-dim);
    }
    .laden-warehouse-card-stats {
        grid-template-columns: 1fr 1fr;
    }
    .laden-warehouse-card-actions {
        flex-direction: column;
    }
    .laden-warehouse-card-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════════
   LADEN — Setup-Wizard (LD.1d)
   ═══════════════════════════════════════════════════════════════ */

/* Auto-Vorschlag-Info-Karte im "+ Eintrag"-Modal */
.laden-autoload-info {
    margin-top: var(--sp-2);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.laden-autoload-info strong {
    color: var(--text-primary);
}

.laden-autoload-info.confidence-high {
    border-left: 3px solid var(--status-green, var(--status-green));
}

.laden-autoload-info.confidence-medium {
    border-left: 3px solid var(--accent-ink);
}

.laden-autoload-info.confidence-low {
    border-left: 3px solid var(--status-amber, var(--status-amber));
}

/* Confidence-Badges */
.confidence-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.confidence-badge-high {
    background: var(--status-green-dim);
    color: var(--status-green, var(--status-green));
}

.confidence-badge-medium {
    background: var(--accent-dim);
    color: var(--accent-ink);
}

.confidence-badge-low {
    background: var(--status-amber-dim);
    color: var(--status-amber, var(--status-amber));
}

/* Wizard-Modal — breiter */
.modal.modal-xl {
    max-width: 980px !important;
}

/* Wizard-Schritte */
.wizard-step {
    margin-bottom: var(--sp-4);
}

.wizard-step + .wizard-step {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
}

.wizard-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 var(--sp-3) 0;
}

.wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 500;
}

.wizard-source-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}

.wizard-source-opt {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    min-height: 44px;
}

.wizard-source-opt:hover {
    border-color: var(--accent-ink);
}

.wizard-source-opt input[type="radio"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.wizard-source-opt input[type="radio"]:checked + div strong {
    color: var(--accent-ink);
}

.wizard-source-opt > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wizard-source-opt strong {
    font-size: 14px;
    color: var(--text-primary);
}

.wizard-source-opt small {
    font-size: 12px;
}

.wizard-slider-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.wizard-slider-row input[type="range"] {
    flex: 1;
    accent-color: var(--accent);
    min-height: 44px;
}

.wizard-slider-val {
    min-width: 48px;
    text-align: right;
    font-size: 18px;
    font-weight: 500;
    color: var(--accent-ink);
    font-variant-numeric: tabular-nums;
}

/* Vorschau-Toolbar */
.wizard-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-3);
}

.wizard-preview-stats {
    display: flex;
    gap: var(--sp-4);
    font-size: 13px;
    color: var(--text-secondary);
}

.wizard-preview-stats strong {
    color: var(--text-primary);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}

.wizard-preview-controls {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.wizard-preview-controls label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.wizard-preview-controls .form-input {
    min-width: 90px;
}

/* Vorschau-Tabelle */
.wizard-preview-table tbody tr {
    transition: background 0.1s ease;
}

.wizard-preview-table tbody tr:hover {
    background: var(--bg-elevated);
}

.wizard-preview-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.wizard-preview-table .wizard-row-low {
    opacity: 0.75;
}

/* Empty-CTA in Lager-Card (Setup-Wizard Hint) */
.laden-card-empty-cta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    margin: var(--sp-3) 0;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.laden-card-empty-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--status-amber-dim);
    color: var(--status-amber, var(--status-amber));
    font-size: 20px;
}

.laden-card-empty-cta-text {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.laden-card-empty-cta-text strong {
    font-size: 13px;
    color: var(--text-primary);
}

.laden-card-empty-cta-text small {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.laden-card-empty-cta .btn {
    flex-shrink: 0;
}

/* Mobile: Wizard-Layout anpassen */
@media (max-width: 768px) {
    .modal.modal-xl {
        max-width: 100% !important;
    }
    .wizard-source-list {
        grid-template-columns: 1fr;
    }
    .wizard-preview-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .wizard-preview-controls {
        justify-content: flex-start;
    }
    .laden-card-empty-cta {
        flex-direction: column;
        align-items: flex-start;
    }
    .laden-card-empty-cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Sprint LD.2: Warehouse-Soll Tab (cadence.warehouse_targets) ── */

.laden-inline-edit {
    display: inline-block;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px dashed transparent;
    min-width: 40px;
    text-align: right;
}
.laden-inline-edit:hover {
    border-color: var(--accent-ink);
    background: var(--surface-hover, rgba(255,255,255,0.04));
}
.laden-inline-edit-input {
    text-align: right;
    padding: 2px 6px !important;
    height: 28px !important;
}

.laden-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 0;
}
.laden-pagination-info {
    font-size: 0.9rem;
    color: var(--text-muted, #888);
    min-width: 220px;
    text-align: center;
}

.laden-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--text-muted, #aaa);
    white-space: nowrap;
}
.laden-checkbox-label input[type="checkbox"] {
    margin: 0;
}

@media (max-width: 768px) {
    .laden-pagination {
        flex-wrap: wrap;
    }
    .laden-pagination-info {
        min-width: 0;
        flex: 1 1 100%;
        order: -1;
    }
}


/* ══════════════════════════════════════════════════════════════
   UU.1 — Umlagerung Frontend Refactor (Sprint UU.1)
   Token-Konsolidierung + Mobile-Overrides + Bottom-Sheet
   ═══════════════════════════════════════════════════════════════ */

/* ── Transfer-Toolbar: Token-konsistente Border, ersetzt #eee ── */
.transfer-toolbar {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;  /* damit display:none als Inline-Override durchgreift */
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Phosphor-Icon Größen: konsolidiert wiederkehrende Inline-Styles ── */
.ph-md { font-size: 16px; }
.ph-accent-md { color: var(--accent-ink); font-size: 16px; }

/* ── Umlagerung-spezifische Layout-Helper ── */
.umlagerung-row-flex {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.umlagerung-tag-line {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.umlagerung-pills-line {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.route-sub-distance {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── SKU-Truncate für route-item-row (Desktop ellipsis, full per title) ── */
.route-item-sku {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Transfer-Search-Input: 14px Desktop, 16px Mobile (iOS-Zoom-Fix) ── */
.transfer-search-input {
    font-size: 14px;
}

/* ── Order-Chip-More: minimal größer für Tap-Target ── */
.order-chip-more {
    min-height: 24px;
    padding: 4px 10px;
}

/* ── Mobile-Overrides ≤768px: Umlagerung Layout-Reorganisation ── */
@media (max-width: 768px) {
    /* Search-Input: iOS-Zoom-Prevention (16px ist die magische Grenze) */
    .transfer-search-input {
        font-size: 16px;
    }

    /* Route-Item-Row: 2-Spalten Grid, SKU auf eigene Zeile, Qty rechts neben Name */
    .route-item-row {
        grid-template-columns: 1fr auto;
        gap: 8px;
        padding: 12px 10px;
    }
    .route-item-sku {
        grid-column: 1 / -1;
        font-size: 12px;
        color: var(--text-muted);
    }
    .route-item-name-block {
        grid-column: 1;
        grid-row: 2;
    }
    .route-item-qty {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        font-size: 16px;
        font-weight: 500;
    }

    /* Transfer-Item: Info volle Breite, Input + Remove ≥44px (Touch-Target) */
    .transfer-item {
        flex-wrap: wrap;
        gap: 6px;
        padding: 12px;
    }
    .transfer-item .info {
        flex-basis: 100%;
    }
    .transfer-item input[type="number"] {
        flex: 1;
        min-height: 44px;
        font-size: 16px;
    }
    .transfer-item .remove-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Order-Chip-More: Tap-Target auf Mobile ≥44px */
    .order-chip-more {
        min-height: 32px;
        min-width: 44px;
    }

    /* Stock-Popover: Bottom-Sheet auf Mobile statt floating Tooltip */
    #stock-popover {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        max-width: none !important;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(0);
        transition: transform var(--transition);
        z-index: 1000;
    }
}

/* ── Order-Chip-Name Truncate auf sehr kleinen Bildschirmen ── */
@media (max-width: 480px) {
    .order-chip-name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: bottom;
    }
}

/* ════════════════════════════════════════════════════════════════
   Feedback-Widget (Floating) — global; nutzt POST /api/feedback.
   FAB rechts unten, GESTAPELT ueber dem Chat-FAB (bottom 20px, 56px)
   -> bottom 90px. Eigener surface-Look (Chat = solid accent).
   ════════════════════════════════════════════════════════════════ */
.fbw-floating {
    position: fixed;
    right: 20px;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    z-index: 51;
}

.fbw-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 18px;
    border-radius: 24px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.fbw-fab:hover {
    box-shadow: var(--shadow-overlay);
    border-color: var(--accent-ink);
}
.fbw-fab i { font-size: 20px; color: var(--accent-ink); }
.fbw-fab-label { white-space: nowrap; }

.fbw-panel {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    overflow: hidden;
}
.fbw-floating.open .fbw-panel { display: block; }

/* Verschiebbarer FAB: Drag per Maus/Touch. touch-action:none -> Touch-Drag
   scrollt nicht. Waehrend des Ziehens kein Hover-Transform, klarer Cursor. */
.fbw-fab { touch-action: none; }
.fbw-floating.fbw-dragging .fbw-fab,
.fbw-floating.fbw-dragging .fbw-fab:hover {
    cursor: grabbing;
    transform: none;
    box-shadow: var(--shadow-overlay);
    opacity: 0.92;
}
/* Panel klappt je nach FAB-Position zur Viewport-Mitte hin auf (Desktop). */
@media (min-width: 481px) {
    .fbw-floating.fbw-pos-left .fbw-panel { right: auto; left: 0; }
    .fbw-floating.fbw-pos-top .fbw-panel { bottom: auto; top: calc(100% + 12px); }
}

.fbw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border);
}
.fbw-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
}
.fbw-title i { color: var(--accent-ink); font-size: 18px; }
.fbw-iconbtn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
}
.fbw-iconbtn:hover { background: var(--bg-elevated); color: var(--text-primary); }

.fbw-body { padding: var(--sp-3); }
.fbw-hint {
    margin: 0 0 var(--sp-3);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.fbw-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--sp-3);
}
.fbw-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border-radius: 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
}
.fbw-tag i { font-size: 15px; }
.fbw-tag:hover { border-color: var(--accent-ink); color: var(--text-primary); }
.fbw-tag.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.fbw-textarea {
    width: 100%;
    box-sizing: border-box;
    resize: none;
    min-height: 88px;
    max-height: 220px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-root);
    color: var(--text-primary);
    font-family: inherit;
    line-height: 1.45;
}
.fbw-textarea:focus { outline: none; border-color: var(--focus-ring); }

.fbw-route {
    margin-top: var(--sp-2);
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
}
.fbw-route code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    word-break: break-all;
}

.fbw-flash {
    display: none;
    margin-top: var(--sp-2);
    padding: 8px 10px;
    border-radius: var(--radius);
    font-size: 13px;
}
.fbw-flash.show { display: block; }
.fbw-flash.success { background: var(--status-green-dim); color: var(--status-green); }
.fbw-flash.error { background: var(--status-red-dim); color: var(--status-red); }

.fbw-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}
.fbw-link {
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
}
.fbw-link:hover { color: var(--accent-ink); text-decoration: underline; }
.fbw-send { white-space: nowrap; }

/* Mobile: Label am FAB ausblenden (Platz sparen), Panel als Bottom-Sheet */
@media (max-width: 560px) {
    .fbw-fab {
        padding: 0;
        width: 48px;
        justify-content: center;
        border-radius: 50%;
    }
    .fbw-fab-label { display: none; }
    .fbw-fab i { font-size: 22px; }
}
@media (max-width: 480px) {
    .fbw-floating {
        right: 16px;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
    .fbw-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(140px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: none;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* ════════════════════════════════════════════════════════════════
   Feedback-Inbox (Admin) — Lesen + Triage der Mitarbeiter-Wuensche.
   ════════════════════════════════════════════════════════════════ */
.fbi-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-4); }
.fbi-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
}
.fbi-tab:hover { color: var(--text-primary); border-color: var(--accent-ink); }
.fbi-tab.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fbi-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(255,255,255,.18);
    font-size: 12px;
    font-weight: 500;
}
.fbi-tab:not(.active) .fbi-count { background: var(--bg-active); color: var(--text-secondary); }

.fbi-flash { display: none; margin-bottom: var(--sp-3); padding: 10px 12px; border-radius: var(--radius); font-size: 13px; }
.fbi-flash.show { display: block; }
.fbi-flash.success { background: var(--status-green-dim); color: var(--status-green); }
.fbi-flash.error { background: var(--status-red-dim); color: var(--status-red); }

.fbi-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.fbi-empty { color: var(--text-muted); padding: var(--sp-4); text-align: center; }

.fbi-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
}
.fbi-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--sp-2);
    font-size: 13px;
}
.fbi-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.fbi-tag-feature { color: var(--status-amber); border-color: color-mix(in srgb, var(--status-amber) 35%, transparent); }
.fbi-tag-bug { color: var(--status-red); border-color: color-mix(in srgb, var(--status-red) 35%, transparent); }
.fbi-who, .fbi-route, .fbi-time { color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.fbi-route { font-family: var(--font-mono); font-size: 12px; }
.fbi-time { margin-left: auto; }
.fbi-status {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-elevated);
    color: var(--text-secondary);
}
.fbi-status-in_progress { color: var(--status-amber); }
.fbi-status-done { color: var(--status-green); }
.fbi-status-wont_fix { color: var(--text-muted); }
.fbi-body { color: var(--text-primary); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.fbi-resp {
    margin-top: var(--sp-2);
    padding: 8px 10px;
    border-left: 3px solid var(--accent-ink);
    background: var(--bg-elevated);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-secondary);
}
.fbi-resp-label { display: block; font-size: 12px; font-weight: 500; color: var(--accent-ink); margin-bottom: 2px; }
.fbi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--sp-3); }
.fbi-reply {
    flex: 1;
    min-width: 180px;
    padding: 8px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-root);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 16px;
}
.fbi-reply:focus { outline: none; border-color: var(--focus-ring); }

@media (max-width: 600px) {
    .fbi-time { margin-left: 0; }
    .fbi-actions .btn { flex: 1; }
}

/* === Self-hosted Fonts (Perf P.4.2, 2026-08-12) ==================
   DM Sans 400/500/600/700 + JetBrains Mono 400/500/600, latin +
   latin-ext, woff2 aus static/fonts/. Ersetzt das render-blockende
   Google-Fonts-Stylesheet (externer Host vor dem First Paint).
   Quelle: fonts.google.com, Lizenz: OFL. */
/* Rueckfallschrift fuer Mono mit gleicher Zeichenbreite wie JetBrains Mono (0,600 em), damit Zahlenspalten
   beim Tausch der Schrift nicht springen (seiten-rahmen.json K10, 13.11.). Menlo/DejaVu 0,602 em, Consolas 0,550 em;
   die Overrides werden von size-adjust mitskaliert. */
@font-face {
  font-family: 'GG Mono Ersatz';
  src: local('Menlo'), local('DejaVu Sans Mono');
  size-adjust: 99.7%; ascent-override: 102.3%; descent-override: 30.1%; line-gap-override: 0%;
}
@font-face {
  font-family: 'GG Mono Ersatz Win';
  src: local('Consolas');
  size-adjust: 109.1%; ascent-override: 93.5%; descent-override: 27.5%; line-gap-override: 0%;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/DMSans-400-latin-ext-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/DMSans-400-latin-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/DMSans-400-latin-ext-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/DMSans-400-latin-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/DMSans-400-latin-ext-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/DMSans-400-latin-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/DMSans-400-latin-ext-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/DMSans-400-latin-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-400-latin-ext-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-400-latin-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-400-latin-ext-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-400-latin-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-400-latin-ext-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-400-latin-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══ Globales Toast- + Dialog-System (Audit Paket U, static/js/ui.js) ═══
   Ersetzt schrittweise .tasks-toast / .pim-toast / seiten-lokale showMsg. */
#gg-toast-wrap {
    position: fixed;
    bottom: var(--sp-5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    z-index: 400;
    pointer-events: none;
    max-width: 92vw;
}

.gg-toast {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    box-shadow: var(--shadow-overlay);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 200ms ease, transform 200ms ease;
    max-width: 92vw;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.gg-toast.show { opacity: 1; transform: translateY(0); }
.gg-toast.error   { border-color: var(--status-red);   color: var(--status-red); }
.gg-toast.success { border-color: var(--status-green); color: var(--status-green); }

/* Update-Toast (SW-Deploy-Hinweis): klickbar, bleibt stehen */
.gg-toast-update { pointer-events: auto; }
.gg-toast-btn {
    background: var(--accent);
    border: none;
    color: var(--on-accent);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    min-height: 32px;
}
.gg-toast-btn:hover { background: var(--accent-hover); }
.gg-toast-btn:disabled { opacity: .6; cursor: default; }

/* Bestaetigungs-Dialog auf nativem <dialog> */
.gg-dialog {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    padding: var(--sp-5);
    max-width: min(420px, 92vw);
    width: 100%;
    box-shadow: var(--shadow-overlay);
}
.gg-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.gg-dialog-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: var(--sp-2);
}
.gg-dialog-msg {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-line;
}
.gg-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}
.gg-dialog-btn {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font-sans);
    cursor: pointer;
    min-height: 40px;
}
.gg-dialog-btn:hover { background: var(--bg-active); }
.gg-dialog-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.gg-dialog-btn.primary:hover { background: var(--accent-hover); }
.gg-dialog-btn.primary.danger { background: var(--status-red); border-color: var(--status-red); }

/* ═══ Laden-Auffuellen mobil: Karten statt 12-Spalten-H-Scroll (Paket U) ═══
   Audit-Befund: Mengen-Input + Auffuellen-Button sassen in Spalte 12/12,
   nur per Horizontal-Scroll erreichbar. Unter 768px wird jede Zeile zur
   Karte; Spaltenreihenfolge ist statisch -> Labels via nth-child::before. */
@media (max-width: 768px) {
    #refill-scroll-top { display: none !important; }
    /* clip statt visible: es gibt hier keinen Scroll-Container mehr — nichts
       darf die Seite horizontal aufziehen (Fix 2026-08-14, Daniel). */
    #refill-wrap { overflow-x: clip; border: none; background: transparent; }
    #refill-wrap table { display: block; width: 100%; }
    #refill-wrap thead { display: none; }
    #refill-wrap tbody { display: block; }
    #refill-wrap tbody tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px 12px;
        padding: var(--sp-4);
        margin-bottom: var(--sp-3);
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }
    #refill-wrap tbody tr.priority-urgent-row {
        border-left: 3px solid var(--status-amber);
    }
    #refill-wrap tbody td {
        display: block;
        border: none;
        padding: 0;
        text-align: left;
        font-size: 13px;
        /* Ueberschreibt das globale `tbody td { white-space: nowrap }` —
           im Karten-Layout zog der laengste Produktname sonst die Karte
           breiter als den Viewport -> Seite scrollte ins Leere. */
        white-space: normal;
        overflow-wrap: anywhere;
    }
    /* Kopf: SKU + Hersteller, darunter Bezeichnung */
    #refill-wrap tbody td:nth-child(1) { grid-column: 1 / 3; font-size: 12px; color: var(--text-muted); }
    #refill-wrap tbody td:nth-child(3) { grid-column: 3; text-align: right; font-size: 12px; color: var(--text-muted); }
    #refill-wrap tbody td:nth-child(2) { grid-column: 1 / -1; font-weight: 500; font-size: 14px; }
    /* Mini-Stats mit Label */
    #refill-wrap tbody td:nth-child(4)::before,
    #refill-wrap tbody td:nth-child(5)::before,
    #refill-wrap tbody td:nth-child(6)::before,
    #refill-wrap tbody td:nth-child(7)::before,
    #refill-wrap tbody td:nth-child(8)::before,
    #refill-wrap tbody td:nth-child(9)::before,
    #refill-wrap tbody td:nth-child(10)::before {
        display: block;
        font-size: 12px;
        color: var(--text-muted);
        margin-bottom: 2px;
    }
    #refill-wrap tbody td:nth-child(4)::before  { content: "Ist"; }
    #refill-wrap tbody td:nth-child(5)::before  { content: "Soll"; }
    #refill-wrap tbody td:nth-child(6)::before  { content: "Fehlmenge"; }
    #refill-wrap tbody td:nth-child(7)::before  { content: "Lager"; }
    #refill-wrap tbody td:nth-child(8)::before  { content: "Kasse 30 T"; }
    #refill-wrap tbody td:nth-child(9)::before  { content: "Online 30 T"; }
    #refill-wrap tbody td:nth-child(10)::before { content: "Empfohlen"; }
    /* Ist-Zelle ist klickbar (Ist-Korrektur) — Touch-Target vergroessern */
    #refill-wrap tbody td:nth-child(4) { min-height: 40px; }
    /* Quelle + Aktion: volle Breite, Touch-Targets */
    #refill-wrap tbody td:nth-child(11) {
        grid-column: 1 / -1;
        padding-top: var(--sp-2);
        border-top: 1px solid var(--border-subtle);
    }
    #refill-wrap tbody td:nth-child(12) { grid-column: 1 / -1; }
    #refill-wrap .refill-action { display: flex; gap: var(--sp-2); width: 100%; }
    #refill-wrap .refill-action .refill-qty-input { flex: 1; min-height: 44px; font-size: 16px; }
    #refill-wrap .refill-action .btn { min-height: 44px; flex: 0 0 auto; }
}

/* ph-spin: Rotations-Utility fuer Icon-Spinner (finance.html nutzte die
   Klasse bereits — sie war nie definiert, das Icon stand still). Paket V. */
.ph-spin { display: inline-block; animation: spin 900ms linear infinite; }

/* ═══ Frontend-UX P3 (zurueckgenommen in P5, 2026-08-19) ═══════════
   Cross-Document View Transitions + content-visibility:auto wurden entfernt:
   auf gestoerter Leitung fror die alte Seite bis zum Eintreffen der neuen
   sichtbar ein (Daniel: "nicht fluessig"), und content-visibility auf
   Tabellenzeilen bringt bei Tabellen (Spaltenbreiten haengen an allen Zeilen)
   nichts, riskiert aber Scroll-Spruenge. Statics bleiben fingerprinted. */

/* Stale-Hinweis (SW lieferte gecachte Seite) dezent abgesetzt */
.gg-toast-stale { border-color: var(--status-amber); color: var(--status-amber); }

/* ══════════════════════════════════════════════════════════════════════
   FUNDAMENT P1 (Design-Konzept 12.11.2026, entscheidungen.md Kap. 3-7, 11)
   Bausteine als Selektorlisten ueber die vorhandenen Klassen: abbilden
   statt umbenennen. Steht am Ende der Datei, damit es bei gleicher
   Spezifitaet vor den alten Regeln gilt. Grundstile in :where() (0).
   Keine Klasse wird entfernt; Zustandsklassen (active, on, open, show,
   loading, ...) werden mitgenommen. Kein !important auf display/left/top.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 0. Global ─────────────────────────────────────────────────────── */
:root { accent-color: var(--accent); --shadow-card: none; }
[data-theme="light"] { --shadow-card: 0 1px 2px rgba(0,0,0,.05); }
:where(button, input, select, textarea, optgroup) { font: inherit; letter-spacing: inherit; }
:where(b, strong, th, h1, h2, h3, h4, h5, h6) { font-weight: 500; }
/* Ueberschriften ohne eigene Groesse behalten die Browsergroesse wie vorher (Pruefung 12.11.: "Boards zuordnen",
   Dialogtitel "Neues Ticket anlegen"); Groessen setzen die Seiten-Stufen ueber Klassen. */
:where(input[type="checkbox"], input[type="radio"]) { width: 18px; height: 18px; accent-color: var(--accent); }
:where(progress, input[type="range"]) { accent-color: var(--accent); }
::selection { background: rgba(138,166,248,.32); }
[data-theme="light"] ::selection { background: rgba(30,64,175,.18); }
/* scroll-padding-top steht nur an den Kopfleisten-Stellen (Handy, gg-standalone, Netzleiste), sonst
   hoebe eine globale Regel hier deren Safe-Area-Anteil auf. */
html { scroll-padding-bottom: calc(var(--gg-tabbar-h) + var(--gg-actionbar-h) + var(--gg-fab-h) + 16px); }
@media (min-width: 769px) {
    html.gg-netz-an { scroll-padding-top: calc(var(--gg-top-h, 36px) + 8px); }
}

/* Link, Zurueck-Link, Brotkrume (Kap. 2.3): Akzent als Schrift, Unterstrich bei Hover und Fokus */
:where(a:not([class])) { color: var(--accent-ink); text-decoration: none; }
:where(a:not([class])):hover, :where(a:not([class])):focus-visible { text-decoration: underline; text-underline-offset: 2px; }
:where(.gg-zurueck) {
    display: inline-flex; align-items: center; gap: 8px; min-height: 24px;
    font-size: 13px; line-height: 20px; font-weight: 500; color: var(--text-secondary); text-decoration: none;
}
:where(.gg-zurueck):hover, :where(.gg-zurueck):focus-visible { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }
/* Zurueck-Link, der die alten Klassen btn btn-ghost als Anker behaelt (Ticket, Kundenfeedback, Auffuellen je Lager) */
.btn.gg-zurueck {
    min-height: 24px; padding: 0; gap: 8px; background: transparent; border-color: transparent; box-shadow: none;
    font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500; color: var(--text-secondary);
}
.btn.gg-zurueck:hover, .btn.gg-zurueck:focus-visible {
    background: transparent; color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px;
}
@media (max-width: 768px) {
    .btn.gg-zurueck { min-height: var(--control-h-touch); }
    /* Unterseiten am Handy: die Kopfleiste zeigt den Zurueck-Pfeil zur selben Elternseite (_nav.html _eltern).
       Der Link ueber dem h1 bleibt im DOM, nur nicht doppelt sichtbar (wie Board und Auffuellen je Lager
       es schon taten; jetzt auch Produktdaten, Ticket, Kundenfeedback, Gruppen). */
    body:has(.gg-kopf-zurueck) .page .gg-zurueck { display: none; }
}
/* Tastenkappe (Kap. 4.2): Mono 12, Haarlinie, ohne Flaeche */
:where(kbd) {
    font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); padding: 0 4px;
    border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: transparent; color: inherit;
}

/* ── Fokus (Kap. 2.3, 11.2): sichtbar ueberall, auch wo outline:none steht ── */
:focus-visible { outline: 2px solid var(--focus-ring) !important; outline-offset: 2px; }
:is(input, select, textarea):focus-visible,
.form-input:focus, .pk-input:focus, .insights-toolbar-input:focus, .insights-toolbar-select:focus,
.feedback-textarea:focus, .support-reply textarea:focus, .field-row input:focus, .field-row select:focus, .field-row textarea:focus,
.pim-toolbar input[type="search"]:focus, .pim-toolbar select:focus, .pricing-landing-form input:focus, .fbw-textarea:focus {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 1px var(--focus-ring);
}
:is(input[type="checkbox"], input[type="radio"]):focus-visible { box-shadow: none; }

/* ── Seitenkopf: Typo nach Skala (Kap. 3.2, 10.3) ───────────────────── */
.page-title {
    font-size: var(--fs-28); line-height: var(--lh-28); font-weight: 500;
    letter-spacing: -0.01em; color: var(--text-primary);
}
.page-subtitle { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--text-secondary); margin-top: 4px; }
.page-header { gap: var(--sp-2) var(--sp-4); }
@media (max-width: 768px) {
    .page-title { font-size: var(--fs-20); line-height: var(--lh-20); letter-spacing: 0; }
}

/* ══ Baustein 1: Knopf ═══════════════════════════════════════════════
   S 28 (nur Desktop), M 36, Handy 44, Handy-Haupt 48. Radius 8. */
.btn, .btn-secondary, .btn-success, .btn-danger, .btn-outline, .btn-download, .btn-create,
.gg-dialog-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: var(--control-h); padding: 6px 14px;
    font-family: var(--font-sans); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500;
    letter-spacing: 0; text-transform: none;
    color: var(--text-primary); background: var(--bg-elevated);
    border: 1px solid var(--hairline-strong); border-radius: var(--radius);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-feedback) var(--ease), border-color var(--dur-feedback) var(--ease),
                color var(--dur-feedback) var(--ease), opacity var(--dur-feedback) var(--ease), transform var(--dur-press) var(--ease);
}
.btn i, .btn .ph, .btn-download i, .btn-create i, .gg-dialog-btn i { font-size: 16px; color: var(--text-secondary); }
.btn:hover, .btn-secondary:hover, .btn-success:hover, .btn-outline:hover, .btn-download:hover, .gg-dialog-btn:hover {
    background: var(--bg-hover); border-color: var(--hairline-strong); color: var(--text-primary);
}
.btn:active, .btn-secondary:active, .btn-success:active, .btn-outline:active, .gg-dialog-btn:active { background: var(--bg-active); transform: scale(.98); }
.btn:disabled, .btn[disabled], .btn.is-disabled, .btn-download:disabled, .btn-create:disabled, .gg-dialog-btn:disabled {
    opacity: .5; cursor: not-allowed;
}

/* Haupt: Akzentflaeche, hoechstens einer je Ansicht. .btn-download ist Standardknopf (Listen, 13.11.) */
.btn-primary, .btn-create, .gg-dialog-btn.primary {
    background: var(--accent); border-color: var(--accent); color: var(--on-accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary i, .btn-primary .ph, .btn-create i, .gg-dialog-btn.primary i { color: var(--on-accent); }
.btn-primary:hover, .btn-create:hover, .gg-dialog-btn.primary:hover {
    background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent);
}

/* Leise */
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); box-shadow: none; }
.btn-ghost:hover { background: var(--bg-hover); border-color: transparent; color: var(--text-primary); }
.btn-outline { background: var(--bg-elevated); border-color: var(--hairline-strong); color: var(--text-primary); }
/* Hauptknopf mit alter Zusatzklasse btn-outline (Anker bleibt): sieht aus wie .btn-primary (Verwaltung, 13.11.) */
.btn-outline.btn-primary {
    background: var(--accent); border-color: var(--accent); color: var(--on-accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-outline.btn-primary i, .btn-outline.btn-primary .ph { color: var(--on-accent); }
.btn-outline.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
/* Leise mit Rand: Aktualisieren, Abgleichen (nie Hauptknopf; Lieferzeiten, Abo) */
.btn-leise { background: transparent; border-color: var(--hairline-strong); color: var(--text-secondary); box-shadow: none; }
.btn-leise:hover { background: var(--bg-hover); border-color: var(--hairline-strong); color: var(--text-primary); }

/* Gefahr: ohne Flaeche; gefuellt nur im Bestaetigungsdialog */
.btn-danger {
    background: transparent; color: var(--status-red);
    border-color: color-mix(in srgb, var(--status-red) 40%, transparent);
}
.btn-danger i { color: var(--status-red); }
.btn-danger:hover { background: var(--status-red-dim); color: var(--status-red); border-color: color-mix(in srgb, var(--status-red) 56%, transparent); }
.gg-dialog-btn.primary.danger, .gg-dialog .btn-danger, .modal .btn-danger.btn-primary {
    background: var(--danger-fill); border-color: var(--danger-fill); color: var(--on-accent); box-shadow: none;
}
.gg-dialog-btn.primary.danger:hover { background: var(--danger-fill); border-color: var(--danger-fill); filter: brightness(1.08); }

/* Bestaetigen: Standard mit gruenem Icon */
.btn-success i, .btn-success .ph { color: var(--status-green); }
/* Bestaetigen-Art auch dann, wenn die alte Klasse btn-primary als Anker bleiben muss (K&N/DHL Abhaken) */
.btn-primary.btn-success {
    background: var(--bg-elevated); border-color: var(--hairline-strong); color: var(--text-primary); box-shadow: none;
}
.btn-primary.btn-success i, .btn-primary.btn-success .ph { color: var(--status-green); }
.btn-primary.btn-success:hover { background: var(--bg-hover); border-color: var(--hairline-strong); color: var(--text-primary); }

/* hidden-Attribut gilt auch an Bausteinen mit eigener Anzeigeart (sonst schlaegt display: inline-flex/flex es) */
.btn[hidden], .gg-zustand[hidden], .gg-stand[hidden], .gg-zustand-technik[hidden], .gg-rollenhinweis[hidden],
.gg-meldung[hidden], .status-msg[hidden] { display: none; }

/* Klein (nur Desktop) */
.btn-sm { min-height: var(--control-h-sm); padding: 4px 10px; font-size: var(--fs-12); line-height: var(--lh-12); gap: 6px; }
.btn-sm i, .btn-sm .ph { font-size: 14px; }

/* Symbolknopf quadratisch 28 / 36 / 44 */
.btn-icon { width: var(--control-h); min-width: var(--control-h); padding: 0; }
.btn-icon.btn-sm { width: var(--control-h-sm); min-width: var(--control-h-sm); }
.modal-close, .chat-widget-iconbtn, .fbw-iconbtn, .board-card-action-btn, .kanban-list-menu-btn,
.remove-btn, .sidebar-iconbtn, .sidebar-drawer-close {
    border-radius: var(--radius); color: var(--text-secondary);
}
.modal-close { width: var(--control-h); min-width: var(--control-h); height: var(--control-h); min-height: var(--control-h); padding: 0; background: transparent; border-color: transparent; }
.modal-close:hover, .chat-widget-iconbtn:hover, .fbw-iconbtn:hover, .board-card-action-btn:hover,
.kanban-list-menu-btn:hover, .sidebar-iconbtn:hover, .sidebar-drawer-close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Zusatzknoepfe der Seiten: gleiche Form, eigene Groesse bleibt */
.add-btn {
    border-radius: var(--radius); font-size: var(--fs-12); font-weight: 500;
    background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--hairline-strong);
}
.add-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--hairline-strong); }
.add-btn.added { background: transparent; color: var(--status-green); border-color: transparent; }
.remove-btn { border-color: var(--hairline-strong); }
.remove-btn:hover { background: var(--status-red-dim); color: var(--status-red); border-color: color-mix(in srgb, var(--status-red) 40%, transparent); }

/* Toast-Aktion: leiser Knopf in accent-ink */
.gg-toast-btn {
    background: transparent; border: 0; color: var(--accent-ink);
    font-size: var(--fs-13); font-weight: 500; padding: 4px 8px; min-height: 28px;
    border-radius: var(--radius); box-shadow: none;
}
.gg-toast-btn:hover { background: var(--bg-hover); color: var(--accent-ink); }

/* Laden im Knopf: volle Deckkraft, 12-px-Kreis davor, Breite haelt */
.btn.loading, .btn-download.loading, .btn-create.loading, .gg-dialog-btn.loading, .btn[aria-busy="true"] {
    opacity: 1; cursor: progress;
}
.btn.loading::before, .btn-download.loading::before, .btn-create.loading::before,
.gg-dialog-btn.loading::before, .btn[aria-busy="true"]::before {
    content: ""; flex: none; width: 12px; height: 12px; box-sizing: border-box;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: spin var(--dur-spin) linear infinite;
}

@media (max-width: 768px) {
    .btn, .btn-secondary, .btn-success, .btn-danger, .btn-outline, .btn-download, .btn-create, .gg-dialog-btn {
        min-height: var(--control-h-touch); padding: 10px 16px; font-size: var(--fs-15); line-height: var(--lh-15);
    }
    .btn i, .btn .ph, .modal-close i, .modal-close .ph { font-size: 20px; }
    .btn-sm { min-height: var(--control-h-touch); min-width: var(--control-h-touch); padding: 8px 12px; font-size: var(--fs-15); }
    .btn-icon, .btn-icon.btn-sm { width: var(--control-h-touch); min-width: var(--control-h-touch); }
    .modal-close, .sidebar-drawer-close, .menu-toggle {
        width: var(--control-h-touch); min-width: var(--control-h-touch);
        height: var(--control-h-touch); min-height: var(--control-h-touch);
    }
    .gg-toast-btn { min-height: var(--control-h-touch); padding: 0 12px; }
    .board-card-action-btn, .kanban-list-menu-btn, .fbw-iconbtn { min-width: var(--control-h-touch); min-height: var(--control-h-touch); }
}

/* ══ Baustein 2/3: Feld und Auswahl ══════════════════════════════════
   36 hoch / Handy 44 und 16 px. Flaeche bg-elevated, Rand border-strong. */
:where(input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"],
       input[type="date"], input[type="tel"], input[type="url"], input[type="time"], input[type="datetime-local"],
       input[type="month"], input[type="week"], select, textarea) {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-primary);
}
:where(input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"],
       input[type="date"], input[type="tel"], input[type="url"], input[type="time"], input[type="datetime-local"],
       input[type="month"], input[type="week"], select) {
    min-height: var(--control-h); padding: 0 12px; font-size: var(--fs-14);
}
:where(textarea) { padding: 10px 12px; font-size: var(--fs-14); line-height: 20px; }
:where(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; }
:where(input:disabled, select:disabled, textarea:disabled) { opacity: .5; cursor: not-allowed; }

.form-input, .pk-input, .insights-toolbar-input, .insights-toolbar-select,
.finance-toolbar input[type="date"], .finance-toolbar input[type="search"], .finance-toolbar input[type="number"], .finance-toolbar select,
.pim-toolbar input[type="search"], .pim-toolbar select,
.field-row input[type="text"], .field-row input[type="url"], .field-row input[type="number"], .field-row input[type="date"], .field-row select, .field-row textarea,
.refill-qty-input, .refill-soll-input, .transfer-search-input, .search-input,
.pricing-landing-form input, .feedback-textarea, .support-reply textarea, .fbw-textarea,
.card-side-panel-description, .card-comment-form textarea {
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-sans);
}
.form-input, .insights-toolbar-input, .insights-toolbar-select, .pk-input,
.finance-toolbar input[type="date"], .finance-toolbar input[type="search"], .finance-toolbar input[type="number"], .finance-toolbar select,
.pim-toolbar input[type="search"], .pim-toolbar select,
.field-row input[type="text"], .field-row input[type="url"], .field-row input[type="number"], .field-row input[type="date"], .field-row select {
    min-height: var(--control-h); font-size: var(--fs-14); padding-top: 0; padding-bottom: 0; padding-left: 12px; padding-right: 12px;
}
textarea.form-input, .field-row textarea, .feedback-textarea, .support-reply textarea {
    padding: 10px 12px; min-height: 88px; line-height: 20px;
}
.pk-input { min-height: var(--control-h-touch); }
.pricing-landing-form input { font-family: var(--font-mono); }

/* Feldlabel ueber dem Feld: 12/16 500 secondary, Satzschreibung */
.field-row label, .form-label, .modal-form label, .support-side-card label, .card-side-panel-meta-grid .field-row label {
    font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; color: var(--text-secondary);
    text-transform: none; letter-spacing: 0;
}
.form-hint, .field-hint { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-muted); }
/* Feldfehler: Rand rot, Text 12 rot darunter */
:where(input, select, textarea)[aria-invalid="true"], .form-input.is-invalid, .bi-invalid { border-color: var(--status-red); }
.field-error, .form-error { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--status-red); margin-top: 4px; }

/* Auswahl: caret-down rechts, innen rechts 36 */
:where(select:not([multiple]):not([size])) {
    -webkit-appearance: none; appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%23858B9E' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M208 96l-80 80-80-80'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
}
/* Hell ebenfalls Spezifitaet 0: Klassen mit background-Kurzform gewinnen wie im dunklen Design (kein gekachelter Pfeil) */
:where([data-theme="light"] select:not([multiple]):not([size])) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%236B6B74' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M208 96l-80 80-80-80'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
}
select.form-input, .insights-toolbar-select, .finance-toolbar select, .pim-toolbar select, .field-row select {
    -webkit-appearance: none; appearance: none; padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%23858B9E' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M208 96l-80 80-80-80'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
}
[data-theme="light"] :is(select.form-input, .insights-toolbar-select, .finance-toolbar select, .pim-toolbar select, .field-row select) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%236B6B74' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M208 96l-80 80-80-80'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
}

@media (max-width: 768px) {
    :where(input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"],
           input[type="date"], input[type="tel"], input[type="url"], input[type="time"], input[type="datetime-local"],
           input[type="month"], input[type="week"], select) { min-height: var(--control-h-touch); font-size: var(--fs-16); }
    .form-input, .insights-toolbar-input, .insights-toolbar-select, .pk-input,
    .finance-toolbar input[type="date"], .finance-toolbar input[type="search"], .finance-toolbar input[type="number"], .finance-toolbar select,
    .pim-toolbar input[type="search"], .pim-toolbar select,
    .field-row input[type="text"], .field-row input[type="url"], .field-row input[type="number"], .field-row input[type="date"], .field-row select {
        min-height: var(--control-h-touch); font-size: var(--fs-16);
    }
}

/* Felder mit Schrift aus der Seite und Polster 0 12 sind breiter als vorher (Datumsfeld mind. ca. 170 px):
   Rasterzellen der Audit-Log-Filter (1fr 1fr am Handy) duerfen schmaler werden, sonst ragt die rechte
   Spalte aus dem Panel (Pruefung 12.11.: 7 px bei 390, 22 px bei 375). */
.audit-toolbar > * { min-width: 0; }

/* ══ Baustein 4: Segment (Filter oder Ansicht innerhalb eines Bereichs) ══
   Behaelter 36, innen 2, Luecke 2, Radius 8, Rand border-strong.
   Aktiv: Flaechenstufe bg-active, kein Akzent. */
.kn-segmented, .bh-segmented, .mb-seg, .routes-mode-toggle, .pk-seg, .finance-toolbar .toggle-group, .gg-segment {
    display: inline-flex; align-items: stretch; gap: 2px; padding: 2px;
    background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
    overflow: visible;
}
.kn-seg-btn, .bh-seg-btn, .mb-seg button, .routes-mode-btn, .pk-seg-btn, .finance-toolbar .toggle-group button, .gg-segment > button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 30px; padding: 0 12px; margin: 0;
    background: transparent; border: 1px solid transparent; border-radius: 6px; box-shadow: none;
    font-family: var(--font-sans); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 400;
    color: var(--text-secondary); letter-spacing: 0; text-transform: none; cursor: pointer;
}
.finance-toolbar .toggle-group button + button { border-left: 1px solid transparent; }
.kn-seg-btn:hover, .bh-seg-btn:hover, .mb-seg button:hover, .routes-mode-btn:hover, .pk-seg-btn:hover,
.finance-toolbar .toggle-group button:hover, .gg-segment > button:hover { background: var(--bg-hover); color: var(--text-primary); }
.kn-seg-btn.active, .bh-seg-btn.active, .mb-seg button.active, .routes-mode-btn.active, .routes-mode-btn.active:hover,
.pk-seg-btn.on, .finance-toolbar .toggle-group button.active, .gg-segment > button[aria-pressed="true"], .gg-segment > button.active {
    background: var(--bg-active); border-color: var(--hairline-strong); color: var(--text-primary); font-weight: 500;
    box-shadow: none;
}
.routes-mode-btn i, .kn-seg-btn i, .bh-seg-btn i { font-size: 16px; }
.pk-seg-btn small { font-size: var(--fs-12); opacity: 1; color: var(--text-muted); }
/* Lieferart im Preiskalkulator: Name oben, Zusatz "(+ 5 € netto)" darunter wie vorher; Segment fuellt die
   Breite (.pk-seg-btn hat flex: 1 aus dem Kalkulator-Abschnitt); Zusatz auf aktiv in secondary (Kontrast) */
.pk-seg { display: flex; }
.pk-seg-btn { flex-direction: column; gap: 0; }
.pk-seg-btn small { white-space: nowrap; }
.pk-seg-btn.on small { color: var(--text-secondary); }
/* Monats- und Moduswahl der Lagerbewertung: einzelne Knoepfe als Segmente */
.month-btn {
    min-height: 30px; padding: 0 12px; font-size: var(--fs-13); font-weight: 400;
    background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
    color: var(--text-secondary);
}
.month-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }
.month-btn.active { background: var(--bg-active); border-color: var(--hairline-strong); color: var(--text-primary); font-weight: 500; }
/* Zaehler in Segmenten und Reitern: Mono 12 muted, keine Pille */
.laden-tab-count, .beg-tab-n, .fbi-count, .pim-tab-count, .bh-seg-count, .gg-zaehler {
    background: transparent; border: 0; border-radius: 0; min-width: 0; height: auto; padding: 0;
    font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 400;
    color: var(--text-muted);
}
.laden-tab.active .laden-tab-count, .finance-tab.active .pim-tab-count, .fbi-tab:not(.active) .fbi-count, .fbi-tab.active .fbi-count {
    background: transparent; color: var(--text-muted);
}
@media (max-width: 768px) {
    .kn-segmented, .bh-segmented, .mb-seg, .routes-mode-toggle, .pk-seg, .finance-toolbar .toggle-group, .gg-segment {
        display: flex; width: 100%; padding: 0; gap: 4px; background: transparent; border: 0;
    }
    .kn-seg-btn, .bh-seg-btn, .mb-seg button, .routes-mode-btn, .pk-seg-btn, .finance-toolbar .toggle-group button, .gg-segment > button {
        flex: 1 1 0; min-width: 0; min-height: var(--control-h-touch);
        border: 1px solid var(--border-strong); border-radius: var(--radius);
        font-size: var(--fs-15); line-height: var(--lh-15); white-space: normal; text-align: center;
    }
    .finance-toolbar .toggle-group button + button { border-left: 1px solid var(--border-strong); }
    .month-btn { min-height: var(--control-h-touch); font-size: var(--fs-15); }
}

/* ══ Baustein 5: Reiter (Ansicht einer Seite) ════════════════════════
   Haarlinie unten, Reiter 40 / Handy 44, aktiv primary 500 + 2-px-Strich. */
.laden-tabs, .finance-tabs, .fbi-tabs, .gg-reiter {
    display: flex; flex-wrap: nowrap; gap: var(--sp-6);
    padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--border);
    border-radius: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    margin-bottom: var(--sp-6);
}
.laden-tabs::-webkit-scrollbar, .finance-tabs::-webkit-scrollbar, .fbi-tabs::-webkit-scrollbar, .gg-reiter::-webkit-scrollbar { display: none; }
.laden-tab, .finance-tab, .fbi-tab, .gg-reiter > button, .gg-reiter > a {
    display: inline-flex; align-items: center; gap: var(--sp-2); flex: none;
    min-height: 40px; padding: 0; margin: 0 0 -1px 0;
    background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none;
    font-family: var(--font-sans); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400;
    color: var(--text-secondary); white-space: nowrap; cursor: pointer; text-decoration: none;
}
.laden-tab i, .finance-tab i, .fbi-tab i { font-size: 16px; }
.laden-tab:hover, .finance-tab:hover, .fbi-tab:hover, .gg-reiter > button:hover, .gg-reiter > a:hover {
    background: transparent; color: var(--text-primary); border-color: transparent;
}
.laden-tab.active, .finance-tab.active, .fbi-tab.active,
.gg-reiter > [aria-selected="true"], .gg-reiter > .active {
    background: transparent; color: var(--text-primary); font-weight: 500;
    border-color: transparent; border-bottom-color: var(--accent-ink);
}
/* Aktiver Reiter behaelt den Strich auch unter der Maus (Hover-Regel oben ist spezifischer) */
.gg-reiter > [aria-selected="true"]:hover, .gg-reiter > .active:hover { border-bottom-color: var(--accent-ink); }
@media (max-width: 768px) {
    .laden-tabs, .finance-tabs, .fbi-tabs, .gg-reiter { flex-direction: row; flex-wrap: nowrap; width: auto; gap: var(--sp-5); }
    .laden-tab, .finance-tab, .fbi-tab, .gg-reiter > button, .gg-reiter > a {
        flex: none; min-height: var(--control-h-touch); padding: 0; justify-content: flex-start;
        border-left: 0; border-bottom: 2px solid transparent; font-size: var(--fs-14);
    }
    .laden-tab.active, .finance-tab.active, .fbi-tab.active { background: transparent; border-left-color: transparent; border-bottom-color: var(--accent-ink); }
}

/* ══ Baustein 6: Tabelle ═════════════════════════════════════════════
   Kopf 36 klebend 12/16 500 muted; Zeile 40, Trenner border-subtle. */
:where(thead th) {
    height: 36px; padding: 0 12px;
    font-family: var(--font-sans); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500;
    color: var(--text-muted); letter-spacing: 0; text-transform: none;
    background: var(--bg-surface); border-bottom: 1px solid var(--border);
}
:where(tbody td) { padding: 10px 12px; font-size: var(--fs-13); line-height: var(--lh-13); }
:where(tbody tr) { border-bottom: 1px solid var(--border-subtle); }
:where(.panel) :where(thead th, tbody td):first-child { padding-left: 20px; }
:where(.panel) :where(thead th, tbody td):last-child { padding-right: 20px; }
.data-table th, .pim-table th, .pim-history-table th, .cashflow-table th, .targets-table th,
.kn-table th, .em-table th, .mb-table th, .bi-table th, .users-table th, .audit-table th {
    font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; color: var(--text-muted);
    letter-spacing: 0; text-transform: none; background: var(--bg-surface);
}
/* Zahlen rechtsbuendig Mono 13 primary (Kap. 3.4), Fehlwert "–" */
td.num, th.num, .num-cell { text-align: right; font-family: var(--font-mono); font-size: var(--fs-13); font-weight: 400; color: var(--text-primary); }
thead th.num { font-family: var(--font-sans); font-size: var(--fs-12); color: var(--text-muted); }
/* Statusfarben an Zahlenzellen: die Hilfsklassen verlieren sonst gegen td.num (Start, Fleisch, Burnhard) */
td.num.text-red, th.num.text-red, .num-cell.text-red { color: var(--status-red); }
td.num.text-amber, th.num.text-amber, .num-cell.text-amber { color: var(--status-amber); }
td.num.text-green, th.num.text-green, .num-cell.text-green { color: var(--status-green); }
td.num.text-muted, td.num.muted, .num-cell.text-muted { color: var(--text-muted); }
/* Kopfbeschriftung als Knopf im th: sieht aus wie Text, per Tastatur erreichbar; der Klick erreicht
   den vorhandenen Handler des th (Fleisch, Burnhard, Forecast) */
.gg-sort-knopf {
    display: inline-block; margin: 0; padding: 0; min-height: 0; background: none; border: 0;
    border-radius: var(--radius-sm); font: inherit; color: inherit; text-align: inherit;
    white-space: nowrap; cursor: pointer;
}
thead th.sortable:hover { color: var(--text-secondary); }
thead th .sort-arrow { font-size: var(--fs-12); color: var(--text-secondary); opacity: 1; margin-left: 4px; }
/* Zeilen: kritisch Rot 8 % plus 2-px-Strich links */
.priority-urgent-row td, .shortage-row td { background: color-mix(in srgb, var(--status-red) 8%, transparent); }
.priority-urgent-row td:first-child, .shortage-row td:first-child { box-shadow: inset 2px 0 0 var(--status-red); }
:where(tbody tr.is-selected, tbody tr.selected, tbody tr[aria-selected="true"]) { background: var(--bg-active); box-shadow: inset 2px 0 0 var(--accent-ink); }
/* Scroll-Behaelter mit Tastatur: Fokusring innen */
.table-wrap:focus-visible, [role="region"][tabindex="0"]:focus-visible { outline-offset: -2px; }
@media (max-width: 768px) {
    :where(tbody td) { padding: 12px; }
    :where(thead th) { padding: 0 12px; height: 40px; }
    :where(.panel) :where(thead th, tbody td):first-child { padding-left: 16px; }
    :where(.panel) :where(thead th, tbody td):last-child { padding-right: 16px; }
}

/* ══ Baustein 7: Listenzeile am Handy (m-list, nur bis 768) ═══════════
   Zellen und Reihenfolge bleiben; die Seite ordnet ueber nth-child oder
   data-label zu. Hier nur Flaeche, Trenner, Abstaende und Grundtypo. */
@media (max-width: 768px) {
    table.m-list, .m-list table { display: block; width: 100%; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
    table.m-list thead, .m-list table thead { display: none; }
    table.m-list tbody, .m-list table tbody { display: block; }
    table.m-list tbody tr, .m-list table tbody tr {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
        min-height: 56px; padding: 12px 16px; border-bottom: 1px solid var(--hairline);
    }
    table.m-list tbody tr:last-child, .m-list table tbody tr:last-child { border-bottom: 0; }
    table.m-list tbody td, .m-list table tbody td { display: block; padding: 0; border: 0; white-space: normal; height: auto; }
    table.m-list tbody td[data-label]::before, .m-list table tbody td[data-label]::before {
        content: attr(data-label) " "; font-family: var(--font-sans); font-size: var(--fs-12); color: var(--text-muted);
    }
    table.m-list tbody td.num, .m-list table tbody td.num { text-align: left; }
    .m-list .m-list-kennung { flex-basis: 100%; font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-muted); }
    .m-list .m-list-titel { flex-basis: 100%; font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; color: var(--text-primary); }
    .m-list .m-list-werte { flex-basis: 100%; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary); }
    .m-list .m-list-aktion { flex-basis: 100%; display: flex; justify-content: flex-end; gap: 8px; }
    .m-list .m-list-foto { width: 44px; height: 44px; border-radius: var(--radius-md); background: #FFFFFF; object-fit: contain; flex: none; }
    .m-list .is-dringend, .m-list tr.priority-urgent-row { box-shadow: inset 2px 0 0 var(--status-red); }
    .m-list .is-warnung { box-shadow: inset 2px 0 0 var(--status-amber); }
    /* In einem Panel keine Karte in der Karte (Lieferzeiten, Abo, E-Mail-Sperre, Umlagerung) */
    :is(.panel, .es-card) table.m-list, :is(.panel, .es-card) .m-list table { border: 0; border-radius: 0; background: transparent; }
    /* Variante ohne Feldlabels; data-label bleibt im Markup (K&N, DHL) */
    table.m-list.m-list-ohne-label tbody td[data-label]::before { content: none; display: none; }
    /* Variante mit Sortierleiste: der Kopf bleibt als waagrecht scrollende Leiste sichtbar (Fleisch, Burnhard) */
    table.m-list.m-list-sortleiste thead { display: block; margin-bottom: var(--sp-3); }
    table.m-list.m-list-sortleiste thead tr { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; border: 0; }
    table.m-list.m-list-sortleiste thead th.sortable {
        position: static; flex: none; display: flex; align-items: center; gap: var(--sp-1); height: 44px; padding: 0 12px 0 0;
        background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
        font-size: var(--fs-13); color: var(--text-secondary); white-space: nowrap;
    }
    table.m-list.m-list-sortleiste thead th.sortable[aria-sort] {
        background: var(--bg-active); border-color: var(--hairline-strong); color: var(--text-primary); font-weight: 500;
    }
    table.m-list.m-list-sortleiste .gg-sort-knopf { display: flex; align-items: center; min-height: 42px; padding: 0 0 0 12px; }
}

/* ══ Baustein 8: Panel und Karte ═════════════════════════════════════
   Flaeche bg-surface, Rand border, Radius 14, kein Schatten (hell 1 px). */
.panel, .wh-card, .company-card, .action-card, .route-dest-card, .pk-card, .finance-kpi-card, .pnl-breakdown-card,
.feedback-card, .cadence-stat-card, .support-side-card, .support-mobile-card, .laden-warehouse-card, .fbi-card,
.es-card, .pw-card, .tg-card, .login-card, .proj-card, .liquidity-hero, .metric, .chat-proposed-action {
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.product-card, .route-sub-card, .board-card, .kanban-card, .pim-asset-card, .mb-tile {
    border-radius: var(--radius-lg);
}
.finance-kpi-card.featured { background: var(--bg-surface); border-color: var(--border); }
.wh-card:hover, .metric:hover, .board-card:hover, .cadence-stat-card:hover, .laden-warehouse-card:hover {
    transform: none; box-shadow: var(--shadow-card);
}
.metric:hover { border-color: var(--border); }
.metric::before, .metric:hover::before { opacity: 0; }
.board-card:hover, .kanban-card:hover, .action-card:hover, .product-card:hover { background: var(--bg-hover); }
.panel-header {
    min-height: 52px; padding: 8px 20px; gap: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
}
.panel-title {
    font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; color: var(--text-primary);
    letter-spacing: 0; text-transform: none;
}
.panel-meta { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-muted); }
.panel-body { padding: var(--sp-5); }
/* Abschnittstitel in Panels: 13/20 500 secondary, Satzschreibung */
.pk-card-title, .em-section-title, .pnl-breakdown-card h4, .support-side-card h3,
.detail-section-label, .card-side-panel-section-label {
    font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500; color: var(--text-secondary);
    letter-spacing: 0; text-transform: none;
}
.detail-label { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; color: var(--text-muted); }
.detail-value { font-family: var(--font-sans); font-weight: 500; }
.detail-value.highlight { color: var(--accent-ink); }
@media (max-width: 768px) {
    .panel-header { min-height: 48px; padding: 8px 16px; }
    .panel-body { padding: var(--sp-4); }
}

/* ══ Baustein 9: Kennzahl ════════════════════════════════════════════
   Label 13/20 secondary; Wert DM Sans 24/28 500 primary; Leitzahl 32/40. */
.metric { padding: var(--sp-4) var(--sp-5); }
.metric-label, .finance-kpi-label, .liquidity-hero-label, .cadence-stat-label, .laden-stat-label,
.finance-summary-label, .proj-metric-lbl, .bh-big-label {
    font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 400; color: var(--text-secondary);
    letter-spacing: 0; text-transform: none;
}
.metric-value, .wh-hero-value, .chart-head-value, .company-card .cval, .finance-kpi-value,
.cadence-stat-value, .laden-stat-value, .proj-metric-val, .finance-summary-value {
    font-family: var(--font-sans); font-size: var(--fs-24); line-height: var(--lh-24); font-weight: 500;
    letter-spacing: -0.01em;
}
.metric-value, .wh-hero-value, .chart-head-value, .company-card .cval, .finance-kpi-value, .proj-metric-val { color: var(--text-primary); }
.liquidity-hero-value, .finance-kpi-value.large {
    font-family: var(--font-sans); font-size: var(--fs-32); line-height: var(--lh-32); font-weight: 500; letter-spacing: -0.01em;
}
.metric-sub, .finance-kpi-meta, .liquidity-hero-meta, .company-card .cmeta {
    font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-muted);
}
.wh-hero-unit, .chart-head-period {
    font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--text-secondary);
    letter-spacing: 0; text-transform: none;
}
.chart-head-period { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-muted); background: transparent; border: 0; padding: 0; }
/* Vergleich: nur Vorzeichen-Farbe, ohne Flaeche */
.chart-head-delta, .finance-kpi-delta {
    background: transparent; border: 0; border-radius: 0; padding: 0; height: auto;
    font-family: var(--font-sans); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 400;
}
.chart-head-delta.is-up, .finance-kpi-delta.up { background: transparent; color: var(--status-green); }
.chart-head-delta.is-down, .finance-kpi-delta.down { background: transparent; color: var(--status-red); }
.finance-kpi-delta.flat { background: transparent; color: var(--text-muted); }

/* ══ Baustein 10: Status-Etikett ═════════════════════════════════════
   Punkt 6 px plus Text 13/20 400 secondary, ohne Flaeche, ohne Pille.
   Toene nach x-komponenten 4.4; die Klassen bleiben, nur der Ton aendert sich. */
.badge, .priority-badge, .due-badge, .confidence-badge, .sentiment-badge, .channel-badge, .cadence-badge,
.class-badge, .pim-status-badge, .support-status, .support-prio, .fbi-status, .feedback-history-status,
.wh-pill, .inactive-pill, .chip, .suggestion-priority {
    display: inline-flex; align-items: center; gap: 6px;
    height: 20px; min-height: 0; padding: 0; margin-top: 0; margin-bottom: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    font-family: var(--font-sans); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 400;
    color: var(--text-secondary); letter-spacing: 0; text-transform: none; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.badge::before, .priority-badge::before, .due-badge::before, .confidence-badge::before, .sentiment-badge::before,
.channel-badge::before, .cadence-badge::before, .class-badge::before, .pim-status-badge::before, .support-status::before,
.support-prio::before, .fbi-status::before, .feedback-history-status::before, .wh-pill::before, .inactive-pill::before,
.chip::before, .suggestion-priority::before {
    content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
    background: var(--gg-ton, var(--text-muted));
}
/* Mit eigenem Icon kein zusaetzlicher Punkt */
:is(.badge, .priority-badge, .due-badge, .wh-pill, .chip, .support-status, .support-prio, .channel-badge, .class-badge):has(> i)::before { display: none; }
:is(.badge, .priority-badge, .due-badge, .wh-pill, .chip, .support-status, .support-prio) > i { font-size: 14px; color: var(--gg-ton, var(--text-muted)); }
/* neutral */
.badge-default, .badge-muted, .inactive-pill, .due-badge, .class-badge, .cadence-badge.manual,
.support-status-closed, .support-status-cancelled, .support-status-resolved, .support-prio-medium, .support-prio-low,
.fbi-status, .fbi-status-wont_fix, .sentiment-none, .sentiment-neutral, .feedback-history-status.status-new, .feedback-history-status.status-wont_fix,
.badge.badge-default, .badge.badge-muted { --gg-ton: var(--text-muted); background: transparent; border-color: transparent; color: var(--text-secondary); }
/* info */
.badge-accent, .badge-blue, .chip-accent, .chip-manual, .channel-badge, .cadence-badge.auto_velocity,
.support-status-new, .support-status-open, .fbi-status-in_progress, .confidence-badge-medium,
.priority-badge-medium, .suggestion-priority-medium, .feedback-history-status.status-seen, .feedback-history-status.status-in_progress {
    --gg-ton: var(--accent-ink); background: transparent; border-color: transparent; color: var(--text-secondary);
}
/* gut */
.badge-green, .badge-success, .chip-soll, .fbi-status-done, .pim-status-success, .confidence-badge-high,
.sentiment-positive, .priority-badge-low, .suggestion-priority-low, .cadence-badge.auto_seasonality,
.feedback-history-status.status-done {
    --gg-ton: var(--status-green); background: transparent; border-color: transparent; color: var(--text-secondary);
}
/* warn */
.badge-amber, .badge-warning, .wh-pill-warn, .due-badge.due-soon, .support-status-waiting_customer, .support-status-waiting_internal,
.support-prio-high, .priority-badge-high, .suggestion-priority-high, .pim-status-partial, .confidence-badge-low {
    --gg-ton: var(--status-amber); background: transparent; border-color: transparent; color: var(--text-secondary);
}
/* kritisch: Punkt und Text rot */
.badge-red, .badge-danger, .chip-red, .chip-order, .due-badge.due-overdue, .support-prio-urgent, .priority-badge-urgent,
.suggestion-priority-urgent, .pim-status-failed, .sentiment-negative {
    --gg-ton: var(--status-red); background: transparent; border-color: transparent; color: var(--status-red);
}
/* Heller Satz hatte eigene Chip-Faerbungen mit hoeherer Spezifitaet */
:root .chip-soll, :root .chip-order, :root .chip-manual { background: transparent; border-color: transparent; }
:root .chip-soll { color: var(--text-secondary); }
:root .chip-order { color: var(--status-red); }
:root .chip-manual { color: var(--text-secondary); }
/* kritisch-voll: nur "Kritisch" (Ziellager hat nicht genug Bestand) */
.chip.chip-critical, .chip-critical {
    --gg-ton: var(--on-accent);
    height: 20px; padding: 0 6px; border-radius: var(--radius-sm);
    background: var(--danger-fill); border: 0; color: var(--on-accent);
    font-size: var(--fs-12); line-height: 20px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.chip.chip-critical::before, .chip-critical::before { display: none; }
/* Im Fahrtplan traegt chip-critical den Grund (umlagerung.html, Chip ohne title): Ton kritisch ohne Flaeche.
   Der "KRITISCH"-Chip liegt ebenfalls in .umlagerung-pills-line, hat aber title und behaelt die Flaeche. */
.umlagerung-pills-line .chip-critical:not([title]), .umlagerung-pills-line .chip.chip-critical:not([title]) {
    padding: 0; background: transparent; color: var(--status-red); font-size: var(--fs-13); font-weight: 400;
    /* Der Grund ist ein Satz: darf umbrechen wie vorher (Handy 390 sonst 6 px abgeschnitten) */
    height: auto; min-height: 20px; white-space: normal; align-items: flex-start;
}
.umlagerung-pills-line .chip-critical:not([title])::before, .umlagerung-pills-line .chip.chip-critical:not([title])::before {
    display: block; background: var(--status-red); margin-top: 7px;
}
/* Punkte als eigene Elemente: 6 px, Ton wie oben */
.status-dot { width: 6px; height: 6px; }
.status-dot.green { background: var(--status-green); }
.status-dot.amber { background: var(--status-amber); }
.status-dot.red { background: var(--status-red); }

/* ══ Baustein 11: Lagercode (Signatur) ═══════════════════════════════
   Mono 11/16 500, +0,02em, Hoehe 20, innen 0 6, Radius 4, Haarlinie,
   keine Flaeche. Einziges umrandetes Mono-Kuerzel. */
.wh-code, .cadence-stat-card-code, .laden-warehouse-card-code, .pricing-table .wh-code, .gg-lagercode {
    display: inline-flex; align-items: center; justify-content: center;
    height: 20px; padding: 0 6px; margin-top: 0;
    font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500;
    letter-spacing: .02em; text-transform: none;
    color: var(--text-secondary); background: transparent;
    border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
    white-space: nowrap; vertical-align: middle;
}
.gg-route { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gg-route .gg-lagercode { height: 18px; padding: 0 5px; }
.gg-route .ph-arrow-right { font-size: 14px; color: var(--text-muted); }
/* SKU, Lagerplatz, Sendungsnummer: Mono 12 secondary, ohne Rand */
.gg-sku { font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-secondary); }

/* ══ Baustein 12: Info-Punkt ═════════════════════════════════════════
   16 px Kreis, Rand muted, "i" aufrecht 11/500; Trefferflaeche 24 / 44.
   Tooltip zeigt bei Hover, Fokus und Tipp; Escape schliesst (ui.js). */
.info-dot {
    width: 16px; height: 16px; font-size: 11px; font-weight: 500; font-style: normal;
    background: transparent; color: var(--text-muted); border: 1px solid var(--text-muted);
}
.info-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: 50%; }
.info-dot:hover, .info-dot:focus, .info-dot:focus-visible {
    background: transparent; color: var(--text-primary); border-color: var(--text-secondary);
}
.info-dot::after {
    max-width: 280px; padding: 8px 12px; border-radius: var(--radius-md);
    background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border);
    font-family: var(--font-sans); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 400;
    box-shadow: var(--shadow-md); z-index: var(--z-tooltip);
}
.info-dot:focus::after { display: block; opacity: 1; visibility: visible; }
/* Erklaertexte dreiteilig (Kap. 9.1 Nr. 11): Zeilenumbrueche im data-tip gelten; ohne Umbruch keine Aenderung */
.info-dot::after { white-space: pre-line; }
.info-dot.gg-tip-zu::after, .info-dot.gg-tip-zu:hover::after, .info-dot.gg-tip-zu:focus::after { display: none; }
@media (max-width: 768px) {
    .info-dot::before { width: 44px; height: 44px; }
    .info-dot::after { max-width: min(280px, calc(100vw - 32px)); }
}

/* ══ Baustein 13: Dialog und Blatt ═══════════════════════════════════
   Desktop S 420 / M 640 / L 980, Radius 14, bg-elevated, Hintergrund 60 %
   ohne Blur. Handy: Blatt von unten, oben Radius 16, max. 85dvh. */
:root { --scrim: rgba(0,0,0,.6); } /* Abdunklung hinter Dialogen (Umlagerung nutzt denselben Wert) */
.modal-overlay { background: var(--scrim); }
.modal, .lw-dialog {
    background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-overlay);
}
.modal-title, .gg-dialog-title { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 500; letter-spacing: 0; }
.modal-footer { gap: var(--sp-2); }
.gg-dialog {
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay); padding: var(--sp-5);
}
.gg-dialog::backdrop { background: var(--scrim); }
/* Mittig wie Baustein 13 (base.css setzt global margin: 0, der native Dialog stand oben links);
   lange Texte scrollen, die Knopfleiste bleibt (confirmDialog, infoDialog, GG.appDialog) */
.gg-dialog { margin: auto; max-height: 85vh; max-height: 85dvh; }
.gg-dialog[open] { display: flex; flex-direction: column; }
.gg-dialog[open] .gg-dialog-msg { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.gg-dialog[open] .gg-dialog-actions { flex: none; }
.gg-dialog-msg { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary); }
.gg-dialog-actions { gap: var(--sp-2); }
.gg-dialog-feld { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.gg-dialog-feld label { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; color: var(--text-secondary); }
.gg-dialog-feld input, .gg-dialog-feld textarea, .gg-dialog-feld select { width: 100%; }
/* App-Dialog (Frage 10): Fehler-Hinweis mit Symbol statt rotem Knopf (Baustein 18), Technik-Zeile unter dem Text */
.gg-dialog-title .gg-dialog-warn { color: var(--status-red); font-size: 16px; margin-right: var(--sp-2); vertical-align: -2px; }
.gg-dialog-msg .gg-dialog-technik { display: block; margin-top: var(--sp-2); color: var(--text-secondary); white-space: normal; overflow-wrap: anywhere; }
.card-side-panel { background: var(--bg-elevated); }
.card-side-panel-backdrop { background: rgba(0,0,0,.45); }
.card-side-panel:not(.open) { visibility: hidden; transition: transform var(--dur-sheet) var(--ease), visibility 0s linear var(--dur-sheet); }
.card-side-panel.open { visibility: visible; transition: transform var(--dur-sheet) var(--ease); }
@media (min-width: 769px) {
    .modal { border-radius: var(--radius-lg); }
    .modal-lg { max-width: 640px; }
}
@media (max-width: 768px) {
    .modal {
        border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
        max-height: 85vh; max-height: 85dvh;
        padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
    }
    .modal::before {
        content: ""; display: block; width: 36px; height: 4px; border-radius: 2px;
        background: var(--border-strong); margin: -8px auto 12px;
    }
    .modal-title, .gg-dialog-title { font-size: var(--fs-17); line-height: var(--lh-17); }
    .gg-dialog {
        margin: auto 0 0; width: 100vw; max-width: 100vw;
        border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
        padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
    }
    /* Griff wie beim Blatt .modal (Baustein 13) */
    .gg-dialog[open]::before {
        content: ""; display: block; flex: none; width: 36px; height: 4px; border-radius: 2px;
        background: var(--border-strong); margin: -8px auto 12px;
    }
    /* Tastatur offen (13.11.2026, UI-Waechter: Feld und Knoepfe lagen unter der iOS-Tastatur): ui.js setzt
       .gg-dialog-tastatur und die Tastaturhoehe. Blatt sitzt direkt ueber der Tastatur, ohne Home-Indicator-Abstand
       (der liegt unter der Tastatur); darunter eine Unterlage in Dialogfarbe, weil die iOS-26-Tastatur an den
       Raendern durchsichtig ist (wie Chat-Widget, Commit 4fe4d6e). */
    .gg-dialog.gg-dialog-tastatur { margin-bottom: var(--gg-dialog-tastatur, 0px); padding-bottom: var(--sp-5); border-bottom-color: transparent; }
    .gg-dialog.gg-dialog-tastatur::after {
        /* reicht bis weit unter den Rand: deckt auch, wenn das Layout mit der Tastatur schrumpft (Home-Bildschirm-App) */
        content: ""; position: fixed; left: 0; right: 0; bottom: -100vh; height: calc(var(--gg-dialog-tastatur, 0px) + 100vh);
        background: var(--bg-elevated); pointer-events: none;
    }
}

/* ══ Baustein 14: Menue und Popover ══════════════════════════════════ */
.row-action-menu, .bin-popover, .search-results, .kanban-list-menu {
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.row-action-menu, .kanban-list-menu { padding: 4px; }
.row-action-menu button, .row-action-menu a, .kanban-list-menu button {
    min-height: 36px; padding: 0 12px; border-radius: 6px; font-size: var(--fs-13);
}
.row-action-menu .danger, .kanban-list-menu .danger { color: var(--status-red); }
.row-action-menu .danger i, .kanban-list-menu .danger i { color: inherit; }
.row-action-menu .danger:hover, .kanban-list-menu .danger:hover { background: var(--status-red-dim); color: var(--status-red); }
@media (max-width: 768px) {
    .row-action-menu button, .row-action-menu a, .kanban-list-menu button { min-height: var(--control-h-touch); font-size: var(--fs-15); }
}

/* ══ Baustein 15: Toast ══════════════════════════════════════════════
   Mind. 44 hoch, innen 12 16, Radius 10, Text immer primary, Icon 16
   im Status-Ton. Desktop unten 24 mittig ueber dem Inhalt, Handy links
   16, rechts 72, ueber Tab- und Aktionsleiste. Lebensdauer wie heute. */
#gg-toast-wrap { bottom: var(--sp-6); gap: var(--sp-2); z-index: var(--z-toast); max-width: min(480px, 92vw); }
@media (min-width: 769px) {
    /* --gg-actionbar-h ist am Desktop 0, ausser eine Seite meldet einen klebenden Fuss an (Import) */
    #gg-toast-wrap { left: calc(50% + var(--sidebar-w) / 2); bottom: calc(var(--sp-6) + var(--gg-actionbar-h)); }
    html.sidebar-collapsed #gg-toast-wrap { left: calc(50% + var(--sidebar-w-collapsed) / 2); }
}
.gg-toast, .tasks-toast, .pim-toast {
    min-height: 44px; padding: 12px 16px; gap: var(--sp-3);
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay); color: var(--text-primary);
    font-family: var(--font-sans); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 400;
    max-width: min(480px, 92vw);
}
/* Klickbar (fuer die Pause bei Hover) nur mit Maus; am Handy laufen Tipps wie vorher durch den Toast
   hindurch. Toasts mit Knopf (Update, SW_FRESH) sind ueberall klickbar. */
@media (hover: hover) and (pointer: fine) {
    .gg-toast { pointer-events: auto; }
}
.gg-toast-update { pointer-events: auto; }
.gg-toast:has(.gg-toast-btn) { pointer-events: auto; }
/* Seiten-Toast mit eigenem Element im Stapel (GG.toastStapel(), z. B. #page-msg in Auffuellen je Lager):
   Aussehen wie .gg-toast, ohne Ein-/Ausblend-Bewegung; klickbar nur mit Maus wie .gg-toast */
.gg-toast-fest {
    display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: 12px 16px; max-width: 100%;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay); color: var(--text-primary);
    font-family: var(--font-sans); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 400; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) { .gg-toast-fest { pointer-events: auto; } } /* eigene Regel: ohne :has faellt nur sie weg */
/* Seiten-Toasts (Boards, Produktdaten) tragen nur Text (textContent): Icon davor wie beim globalen Toast */
.tasks-toast, .pim-toast { display: flex; align-items: center; }
/* 15.3: Boards-Toast mit der Maus festhalten (Pause in tasks_index/tasks_board), am Handy weiter durchlaessig */
@media (hover: hover) and (pointer: fine) { .tasks-toast.show { pointer-events: auto; } }
.gg-toast::before, .tasks-toast::before, .pim-toast::before {
    font-family: "Phosphor"; font-size: 16px; line-height: 1; flex: none; font-weight: normal; font-style: normal;
    content: "\e2ce"; color: var(--accent-ink);
}
.gg-toast.success::before, .tasks-toast.success::before, .pim-toast.success::before { content: "\e184"; color: var(--status-green); }
.gg-toast.error::before, .tasks-toast.error::before, .pim-toast.error::before { content: "\e4e2"; color: var(--status-red); }
.pim-toast.warn::before { content: "\e4e0"; color: var(--status-amber); }
.gg-toast.gg-toast-stale::before { content: "\e19a"; color: var(--status-amber); }
.gg-toast.error, .gg-toast.success, .gg-toast-stale,
.tasks-toast.error, .tasks-toast.success, .pim-toast.success, .pim-toast.warn, .pim-toast.error {
    border-color: var(--border); color: var(--text-primary);
}
@media (max-width: 768px) {
    #gg-toast-wrap {
        left: var(--sp-4); right: 72px; transform: none; max-width: none; align-items: stretch;
        bottom: calc(var(--sp-4) + var(--gg-tabbar-h) + var(--gg-actionbar-h) + env(safe-area-inset-bottom));
    }
}

/* ══ Baustein 16: Leer ═══════════════════════════════════════════════
   Icon 24 muted ohne Kreis, Titel 14/20 500 primary, Satz 13/20 secondary. */
.empty-state { padding: var(--sp-10) var(--sp-6); color: var(--text-secondary); font-size: var(--fs-13); line-height: var(--lh-13); }
.empty-state-icon {
    width: auto; height: auto; margin: 0 auto var(--sp-2); border: 0; border-radius: 0; background: transparent;
    font-size: 24px; color: var(--text-muted);
}
.empty-state-title { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 500; color: var(--text-primary); margin-bottom: var(--sp-1); }
.empty-state-desc { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary); max-width: 400px; }
.empty-row, td.empty-row, .empty-row td { color: var(--text-secondary); font-size: var(--fs-13); text-align: center; }
@media (max-width: 768px) {
    .empty-state, .gg-zustand { padding: var(--sp-8) var(--sp-4); }
}

/* ══ Baustein 17: Laden ══════════════════════════════════════════════
   Erscheint erst nach 400 ms; Kreis 16, Strich 2, Spur border, Kopf
   text-secondary, 800 ms. Platzhalter-Zeilen ohne Schimmer. */
@keyframes gg-spaet-sichtbar { from { opacity: 0; } to { opacity: 1; } }
.loading-state { color: var(--text-secondary); font-size: var(--fs-13); line-height: var(--lh-13); animation: gg-spaet-sichtbar 1ms linear 400ms both; }
.spinner { border-color: var(--border); border-top-color: var(--text-secondary); animation: spin var(--dur-spin) linear infinite; }
.spinner-lg { width: 24px; height: 24px; border-width: 2px; }
.spinner-sm { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--text-secondary); border-radius: 50%; animation: spin var(--dur-spin) linear infinite; vertical-align: middle; }
.ph-spin { animation-duration: var(--dur-spin); }
.gg-platzhalter { display: flex; flex-direction: column; gap: 14px; padding: 12px 0; }
.gg-platzhalter > span, .gg-platzhalter-balken { display: block; height: 12px; border-radius: var(--radius-sm); background: var(--bg-active); width: 60%; }
/* bg-active statt bg-elevated: hell war elevated = Panelflaeche, die Balken waren unsichtbar (13.11.) */
/* Platzhalter-Karte beim Laden (nach 400 ms): Boards, Projekte, Gruppen, Board */
.gg-platzhalter-karte {
    min-height: 120px; padding: var(--sp-4) var(--sp-5);
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
@media (max-width: 768px) { .gg-platzhalter-karte { padding: var(--sp-4); } }
.gg-platzhalter > span:nth-child(3n+2) { width: 35%; }
.gg-platzhalter > span:nth-child(3n) { width: 48%; }
[aria-busy="true"] { cursor: progress; }

/* ══ Baustein 18: Fehler und Meldung im Fluss ═════════════════════════ */
.gg-zustand {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    padding: var(--sp-10) var(--sp-6); text-align: center;
}
.gg-zustand-icon { font-size: 24px; color: var(--text-muted); line-height: 1; }
.gg-zustand.is-fehler .gg-zustand-icon { color: var(--status-red); }
.gg-zustand-titel { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 500; color: var(--text-primary); }
.gg-zustand-text { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary); max-width: 400px; }
.gg-zustand-technik { font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-muted); }
.gg-zustand .btn { margin-top: var(--sp-2); }
.gg-zustand.is-laden { animation: gg-spaet-sichtbar 1ms linear 400ms both; }
/* Keine eigene Anzeigeart: die Meldung bleibt Block bzw. Tabellenzelle (reports.html: td colspan),
   Inline-display der Seiten wirkt weiter, text-align der Umgebung (Ladebereiche) bleibt. Das Icon
   sitzt absolut im linken Polster und haengt so auch bei mehrzeiligem Text. */
.status-msg, .laden-page-msg, .gg-meldung {
    padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
    font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-primary);
}
.status-msg.error, .laden-page-msg.error, .gg-meldung.is-fehler,
.status-msg.success, .laden-page-msg.success, .gg-meldung.is-erfolg {
    position: relative; padding-left: calc(var(--sp-4) + 16px + var(--sp-3));
}
.status-msg.error, .laden-page-msg.error, .gg-meldung.is-fehler {
    background: var(--status-red-dim); border: 1px solid color-mix(in srgb, var(--status-red) 32%, transparent); color: var(--text-primary);
}
.status-msg.success, .laden-page-msg.success, .gg-meldung.is-erfolg {
    background: var(--status-green-dim); border: 1px solid color-mix(in srgb, var(--status-green) 32%, transparent); color: var(--text-primary);
}
.status-msg.error::before, .laden-page-msg.error::before, .gg-meldung.is-fehler::before,
.status-msg.success::before, .laden-page-msg.success::before, .gg-meldung.is-erfolg::before {
    position: absolute; left: var(--sp-4); top: var(--sp-3);
    font-family: "Phosphor"; font-size: 16px; line-height: 20px; font-weight: normal; font-style: normal;
}
.status-msg.error::before, .laden-page-msg.error::before, .gg-meldung.is-fehler::before { content: "\e4e2"; color: var(--status-red); }
.status-msg.success::before, .laden-page-msg.success::before, .gg-meldung.is-erfolg::before { content: "\e184"; color: var(--status-green); }
/* Weitere Arten (13.11., Anfragen umlagerung 8, insights 6/7, auffuellen-bedarf 2, post 6):
   Info (leise Flaeche, Icon info), Warnung (amber), laeuft (Kreis), Hinweis (amber Kante, ohne Icon) */
.status-msg.info, .gg-meldung.is-info, .status-msg.warn, .gg-meldung.is-warnung, .gg-meldung.is-warn, .gg-meldung.is-laeuft {
    position: relative; padding-left: calc(var(--sp-4) + 16px + var(--sp-3)); color: var(--text-primary);
}
.status-msg.info::before, .gg-meldung.is-info::before, .status-msg.warn::before, .gg-meldung.is-warnung::before, .gg-meldung.is-warn::before {
    position: absolute; left: var(--sp-4); top: var(--sp-3);
    font-family: "Phosphor"; font-size: 16px; line-height: 20px; font-weight: normal; font-style: normal;
}
.status-msg.info, .gg-meldung.is-info { background: var(--bg-elevated); border: 1px solid var(--border); }
.status-msg.info::before, .gg-meldung.is-info::before { content: "\e2ce"; color: var(--accent-ink); }
.status-msg.warn, .gg-meldung.is-warnung, .gg-meldung.is-warn {
    background: var(--status-amber-dim); border: 1px solid color-mix(in srgb, var(--status-amber) 32%, transparent);
}
.status-msg.warn::before, .gg-meldung.is-warnung::before, .gg-meldung.is-warn::before { content: "\e4e0"; color: var(--status-amber); }
.gg-meldung.is-laeuft { background: var(--bg-elevated); border: 1px solid var(--border); }
.gg-meldung.is-laeuft::before {
    content: ""; position: absolute; left: var(--sp-4); top: calc(var(--sp-3) + 4px); width: 12px; height: 12px; box-sizing: border-box;
    border: 2px solid var(--border); border-top-color: var(--text-secondary); border-radius: 50%;
    animation: spin var(--dur-spin) linear infinite;
}
.gg-meldung.is-hinweis { background: var(--bg-surface); border: 1px solid var(--border); border-left: 2px solid var(--status-amber); }
/* Titel und Technik-Zeile in einer Meldung im Fluss (Listen, Import, Fleisch, Chat): Technik in secondary,
   weil muted auf den getoenten Flaechen hell unter 4,5:1 liegt */
.gg-meldung-titel { display: block; font-weight: 500; color: var(--text-primary); }
:is(.status-msg, .laden-page-msg, .gg-meldung) .gg-zustand-technik {
    display: block; margin-top: var(--sp-1); color: var(--text-secondary); overflow-wrap: anywhere;
}
.card-side-panel-autosave-hint { font-size: var(--fs-12); line-height: var(--lh-12); }
.card-side-panel-autosave-hint.saved { color: var(--status-green); }
.card-side-panel-autosave-hint.error { color: var(--status-red); }

/* ══ Baustein 19: Stand-Zeile ════════════════════════════════════════
   "Stand 07:42": 13/20 secondary, Uhrzeit Mono 12; Punkt amber bei alt. */
.gg-stand {
    display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary); white-space: nowrap;
}
.gg-stand-zeit, .gg-stand time { font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-secondary); }
.gg-stand.is-alt::before, .gg-stand.is-fehler::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--status-amber); flex: none;
}
.gg-stand.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--status-green); flex: none; }
.gg-stand .spinner-sm { width: 12px; height: 12px; }
.gg-stand .spinner, .gg-stand .spinner-lg { width: 12px; height: 12px; border-width: 2px; margin: 0; flex: none; }
.gg-stand .btn { min-height: var(--control-h-sm); }
@media (max-width: 768px) {
    .gg-stand { display: flex; white-space: normal; }
    .gg-stand .btn { min-height: var(--control-h-touch); }
}

/* ══ Baustein 20: Aktionsleiste am Handy (m-actionbar) ═══════════════
   Fest ueber der Tab-Leiste, 68 hoch (8 + Hauptknopf 48 + 8 + Haarlinie, min-height 68),
   deckend bg-surface, Haarlinie oben. Am Desktop steht sie im Fluss. Inline-display der
   Seiten bleibt. Hoehe als Token an html (scroll-padding liest dort), nur wenn die Leiste
   nicht per style/hidden aus ist. Ausblenden nur bei echter Bildschirmtastatur (html.gg-tastatur
   setzt der Rahmen), nicht bei jedem Fokus (Haken, Auswahl, Fokus per Skript). */
@media (max-width: 768px) {
    .m-actionbar {
        position: fixed; left: 0; right: 0;
        bottom: calc(var(--gg-tabbar-h) + env(safe-area-inset-bottom));
        z-index: var(--z-actionbar);
        min-height: 68px; padding: var(--sp-2) var(--sp-4);
        display: flex; align-items: center; gap: var(--sp-3);
        background: var(--bg-surface);
        border-top: 1px solid var(--border); box-shadow: none;
    }
    .m-actionbar .btn-primary { flex: 1 1 auto; min-height: var(--control-h-touch-lg); font-size: var(--fs-16); border-radius: 12px; }
    /* Spezifitaet klein halten (:where), Seiten mit hoeherer Leiste setzen eigene Werte (Umlagerung 96) */
    :root:has(:where(.m-actionbar:not([style*="none"]):not([hidden]))) { --gg-actionbar-h: 68px; }
    body:has(:where(.m-actionbar:not([style*="none"]):not([hidden]))) .page { padding-bottom: calc(var(--sp-4) + 68px); }
    html.gg-tastatur .m-actionbar { visibility: hidden; }
}

/* ══ Baustein 21: Aufklapper ═════════════════════════════════════════ */
:where(details > summary) { cursor: pointer; }
.collapse-toggle { cursor: pointer; }
details.m-more { border-top: 1px solid var(--border); }
details.m-more > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    min-height: 44px; padding: 12px 0; list-style: none;
    font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 500; color: var(--text-secondary);
}
details.m-more > summary::-webkit-details-marker { display: none; }
details.m-more > summary::after {
    font-family: "Phosphor"; content: "\e136"; font-size: 16px; color: var(--text-secondary);
    transition: transform var(--dur-feedback) var(--ease);
}
details.m-more[open] > summary::after { transform: rotate(180deg); }
/* Kleiner Aufklapper im Textfluss ohne Flaeche (Listen "Was steht drin", Import "Was die Etiketten bedeuten") */
details.gg-mehr > summary {
    display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--control-h-sm); list-style: none;
    font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500; color: var(--text-secondary); border-radius: var(--radius-sm);
}
details.gg-mehr > summary::-webkit-details-marker { display: none; }
details.gg-mehr > summary::after {
    font-family: "Phosphor"; content: "\e136"; font-size: var(--fs-16); line-height: 1; font-weight: normal;
    color: var(--text-secondary); transition: transform var(--dur-feedback) var(--ease);
}
details.gg-mehr[open] > summary::after { transform: rotate(180deg); }
details.gg-mehr > summary:hover { color: var(--text-primary); }
@media (max-width: 768px), (pointer: coarse) {
    details.gg-mehr > summary { min-height: var(--control-h-touch); }
}

/* ══ Diagramme (Kap. 8.1): Serienfarben als Klassen fuer SVG und Legenden ══
   SVG nutzt die Tokens direkt (fill/stroke), so wechseln sie mit dem Design. */
.gg-serie-1 { --serie: var(--series-1); } .gg-serie-2 { --serie: var(--series-2); }
.gg-serie-3 { --serie: var(--series-3); } .gg-serie-4 { --serie: var(--series-4); }
.gg-serie-5 { --serie: var(--series-5); } .gg-serie-6 { --serie: var(--series-6); }
.gg-viz-axis { stroke: var(--viz-axis); }
.gg-viz-grid { stroke: var(--viz-grid); }
.gg-viz-tick { fill: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.gg-firmenkante { box-shadow: inset 4px 0 0 var(--serie, var(--viz-context)); }

/* ══ Tippziele am Handy (Kap. 11.10) ════════════════════════════════ */
@media (max-width: 768px) {
    label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: var(--control-h-touch); display: inline-flex; align-items: center; gap: var(--sp-2); }
    .menu-toggle { border-radius: var(--radius); }
}
@media (pointer: coarse) {
    .info-dot::before { width: 44px; height: 44px; }
}

/* ══ Bewegung reduzieren (Kap. 4.5, 11.16) ═══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .spinner, .spinner-lg, .spinner-sm, .ph-spin,
    .btn.loading::before, .btn[aria-busy="true"]::before { animation: none !important; }
}

/* ══ Druck (Kap. 4.7): Rahmen aus, helle Werte, Linien sichtbar ═══════ */
@media print {
    :root, [data-theme] {
        color-scheme: light;
        --bg-root: #FFFFFF; --bg-surface: #FFFFFF; --bg-elevated: #FFFFFF; --bg-hover: #FFFFFF; --bg-active: #F4F4F5;
        --border: rgba(0,0,0,.4); --border-subtle: rgba(0,0,0,.4); --border-strong: rgba(0,0,0,.4);
        --hairline: rgba(0,0,0,.4); --hairline-strong: rgba(0,0,0,.4);
        --text-primary: #18181B; --text-secondary: #52525B; --text-muted: #6B6B74;
        --accent-ink: #1E40AF; --focus-ring: #1E40AF;
        --status-red: #C8282D; --status-amber: #9A5206; --status-green: #13703A;
        --series-1: #267CDF; --series-2: #583BAB; --series-3: #B23E88; --series-4: #8F7E00; --series-5: #952200; --series-6: #008BA9;
        --viz-accent: #1E40AF; --viz-context: #B4B7C0; --viz-axis: #C9CBD1;
        --viz-ramp-1: #9DB4F2; --viz-ramp-2: #4F72D6; --viz-ramp-3: #1E3A8A;
        --lager-gg: #1A43D0; --lager-bm: #A473EE; --lager-ld: #D66919; --lager-bbs-l: #465C12; --lager-kl: #8D1171; --lager-kl-w: #2FA094;
        --shadow-sm: none; --shadow-md: none; --shadow-overlay: none; --shadow-card: none;
        --gg-tabbar-h: 0px; --gg-actionbar-h: 0px; --gg-fab-h: 0px;
    }
    .sidebar, .topbar, .topbar-mobile, .statusbar-band, .topbar-spacer, .gg-tabbar, .gg-bereichsleiste, .gg-netzleiste,
    .gg-sprunglink, #nav-backdrop, .nav-drawer-backdrop, #chat-widget-fab, #chat-widget-panel,
    #fbw-fab, #fbw-panel, .fbw-floating, .chat-widget-floating, #gg-toast-wrap, #gg-alarm-frame, #gg-alarm-bar,
    .no-print { display: none !important; }
    .info-dot::after { display: none !important; }
    body, html.sidebar-collapsed body { padding: 0 !important; background: #FFFFFF; }
    .page { padding: 0 !important; }
    thead th, .m-actionbar, .panel-footer { position: static !important; }
    thead { display: table-header-group; }
    tr, .metric, .finance-kpi-card, .wh-card { break-inside: avoid; }
    .panel-header { break-after: avoid; }
    a { color: inherit; text-decoration: none; }
}

/* ── Ausnahmen: Felder in einem Behaelter, der den Rand zeichnet ───── */
.pim-chips-input { border-color: var(--border-strong); border-radius: var(--radius); }
.pim-chips-input:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }
.field-row .pim-chips-input input[type="text"], .pim-chips-input input {
    background: transparent; border: 0; box-shadow: none; min-height: 0; border-radius: 0;
}
.pim-chips-input input:focus-visible { outline: none !important; box-shadow: none; }
.chat-input-wrap textarea:focus-visible { outline: none !important; box-shadow: none; }
.chat-input-wrap textarea { padding: 2px; }
.chat-input-wrap:focus-within { border-color: var(--focus-ring); }

/* ── Weitere Zustaende (Kap. 7) als Klassen fuer die Seiten-Stufen ─── */
/* Nachladen mit Daten: Diagramme bleiben mit 50 % stehen, keine Hoehenaenderung */
.is-nachladen canvas, .is-nachladen svg, .is-nachladen .gg-diagramm { opacity: .5; transition: opacity var(--dur-feedback) var(--ease); }
/* Offline-Leiste (Netzleiste) und gespeicherter Stand: nur Anzeige */
/* Ueberlagerung unter der Kopfleiste (seiten-rahmen.json K11): nimmt keinen Platz im Fluss, rein und raus
   nur per transform; deckend (Ton ueber bg-surface); z 95 ueber Tab-Leiste 90, unter Kopfleiste 100.
   ui.js setzt .is-an und html.gg-netz-an (--gg-netz-h 36, Klebendes rutscht darunter). */
.gg-netzleiste {
    position: fixed; top: var(--gg-kopf-h); left: 0; right: 0; z-index: 95; height: 36px;
    display: flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 0 var(--sp-4);
    background: linear-gradient(var(--status-amber-dim), var(--status-amber-dim)) var(--bg-surface);
    border-bottom: 1px solid var(--border); color: var(--text-primary);
    font-size: var(--fs-13); line-height: var(--lh-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transform: translateY(calc(-100% - var(--gg-kopf-h))); visibility: hidden;
    transition: transform 160ms var(--ease), visibility 0s linear 160ms;
}
.gg-netzleiste::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--status-amber); }
.gg-netzleiste.is-an { transform: none; visibility: visible; transition: transform 160ms var(--ease); }
.gg-netzleiste.is-wieder { background: linear-gradient(var(--status-green-dim), var(--status-green-dim)) var(--bg-surface); }
.gg-netzleiste.is-wieder::before { background: var(--status-green); }
@media (min-width: 769px) {
    .gg-netzleiste { left: var(--sidebar-w); }
    html.sidebar-collapsed .gg-netzleiste { left: var(--sidebar-w-collapsed); }
}
/* Gespeichert: 1,5 s "Gespeichert" mit check im Knopf */
.btn.is-gespeichert::before {
    font-family: "Phosphor"; content: "\e182"; font-size: 16px; line-height: 1; color: var(--status-green); font-weight: normal;
}
/* Ungespeichert (nur PIM-Detail, Frage 17): amber Punkt am Reiter, 12-px-Text an der Speichern-Zeile */
.gg-ungespeichert { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--status-amber); }
.gg-ungespeichert-punkt::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%;
    background: var(--status-amber); vertical-align: middle;
}
/* Beta leise neben dem Seitentitel (Kap. 10.6) */
.gg-beta {
    font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 400;
    color: var(--text-muted); background: transparent; border: 0; margin-left: var(--sp-2); vertical-align: middle;
    letter-spacing: 0; text-transform: none;
}
/* Hinweiszeile statt Sperre nach Rolle (15.2) */
.gg-rollenhinweis { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary); }
/* Unsichtbar, aber vorlesbar (z. B. "Start:" vor dem Tag, "nach" in der Route) */
.gg-sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Dasselbe nur am Handy (Desktop sichtbar): Langform "9 Werktage", Text von Symbolknoepfen, Filterlabels */
@media (max-width: 768px) {
    .gg-sr-only-handy {
        position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}

/* ══ Preiskalkulator: Bestellung oder Entwurf aus Shopify (12.11.2026) ═════════════
   Aus dem <style> von pricing.html hierher (anfragen/preis.md 2, 13.11.). Steht am Ende,
   damit die Kaskade wie vorher ist (Seiten-Style stand nach base.css). Nur pk-*-Klassen. */
.pk-start-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.pk-btn-sf { min-height: 46px; padding: 10px 16px; font-size: var(--fs-14); }
.pk-sf-karte { padding: 0; overflow: hidden; scroll-margin-top: 72px; }
.pk-sf-karte:focus { outline: none; }
.pk-sf-karte > .gg-zustand { padding: var(--sp-8) var(--sp-5); }
.pk-sf-kopf {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
}
.pk-sf-titel { margin: 0; font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; color: var(--text-primary); }
.pk-sf-meta { margin-top: 2px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary); overflow-wrap: anywhere; }
.pk-sf-kopf-aktionen { display: flex; align-items: center; gap: var(--sp-1); flex: none; }
.pk-sf-teil { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-subtle); }
.pk-sf-zahlen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-4) var(--sp-8); margin-top: var(--sp-3); }
.pk-sf-zahl-l { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary); }
.pk-sf-zahl-w {
    font-family: var(--font-sans); font-size: var(--fs-24); line-height: var(--lh-24); font-weight: 500;
    color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pk-sf-zahl-s { margin-top: 2px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-muted); }
.pk-sf-lieferart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.pk-sf-label { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; color: var(--text-secondary); }
.pk-sf-klein { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-muted); }
.pk-sf-hinweis {
    padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
    background: var(--status-amber-dim); border: 1px solid color-mix(in srgb, var(--status-amber) 32%, transparent);
    font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-primary);
}
.pk-sf-hinweis + .pk-sf-hinweise { margin-top: var(--sp-3); }
.pk-sf-hinweis ul, .pk-sf-hinweise { margin: 6px 0 0; padding-left: 18px; }
.pk-sf-hinweise { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-secondary); }
.pk-sf-hinweis li + li, .pk-sf-hinweise li + li { margin-top: 4px; }
.pk-sf-tabelle { overflow-x: auto; }
.pk-sf-tab { width: 100%; border-collapse: collapse; }
.pk-sf-tab th, .pk-sf-tab td { white-space: nowrap; }
.pk-sf-tab th:first-child, .pk-sf-tab td:first-child { padding-left: var(--sp-5); }
.pk-sf-tab th:last-child, .pk-sf-tab td:last-child { padding-right: var(--sp-5); }
.pk-sf-tab td.pk-sf-pos { white-space: normal; min-width: 200px; }
.pk-sf-pos-t { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 500; color: var(--text-primary); overflow-wrap: anywhere; }
.pk-sf-pos-m { margin-top: 2px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-muted); overflow-wrap: anywhere; }
.pk-sf-pos-w { margin-top: 4px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; color: var(--status-amber); }
.pk-sf-tab tr.is-warnung td:first-child { box-shadow: inset 2px 0 0 var(--status-amber); }
.pk-sf-tab tfoot td { font-weight: 500; border-top: 1px solid var(--border); padding-top: 10px; padding-bottom: 10px; }
.pk-sf-unten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.pk-sf-unten .pk-detail-row { font-size: var(--fs-13); padding: 7px 0; gap: var(--sp-3); }
.pk-sf-unten .pk-detail-v { text-align: right; }
.pk-sf-unten .pk-detail-v small { display: block; text-align: right; font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 400; color: var(--text-muted); }
.pk-sf-unten .pk-detail-total .pk-detail-n { color: var(--text-primary); font-weight: 500; }
.pk-sf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); }
.pk-sf-rueck:empty { display: none; }
.pk-sf-rueck { flex: 1 1 100%; }
.pk-sf-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.pk-sf-shopwahl { flex: 1 1 200px; }
.pk-sf-art { flex: none; }
.pk-sf-treffer-status { display: block; margin-top: 2px; }
@media (max-width: 768px) {
    .pk-sf-kopf, .pk-sf-teil, .pk-sf-aktionen { padding-left: var(--sp-4); padding-right: var(--sp-4); }
    .pk-sf-kopf { flex-wrap: wrap; }
    .pk-sf-kopf > div:first-child { order: 2; flex: 1 1 100%; }
    .pk-sf-kopf-aktionen { order: 1; margin-left: auto; }
    .pk-sf-zahlen { gap: var(--sp-3) var(--sp-6); }
    .pk-sf-unten { grid-template-columns: 1fr; gap: var(--sp-4); }
    .pk-sf-tabelle { overflow: visible; padding: 0 var(--sp-4); }
    .pk-sf-tab td.pk-sf-pos { flex-basis: 100%; min-width: 0; }
    .pk-sf-tab tfoot { display: block; }
    .pk-sf-tab tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; }
    .pk-sf-tab tfoot td { display: block; padding: 0; border: 0; white-space: normal; text-align: left; }
    .pk-sf-tab tfoot td.pk-sf-leer { display: none; }
    .pk-sf-tab tfoot td:first-child { flex-basis: 100%; }
    .pk-sf-tab tfoot td[data-label]::before { content: attr(data-label) " "; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); color: var(--text-muted); }
    .pk-sf-tab th:first-child, .pk-sf-tab td:first-child, .pk-sf-tab th:last-child, .pk-sf-tab td:last-child { padding-left: 0; padding-right: 0; }
    .pk-sf-aktionen .btn { flex: 1 1 100%; min-height: 44px; }
    .pk-sf-filter .pk-sf-art { flex: 1 1 100%; }
}
@media (max-width: 600px) {
    .pk-start-knoepfe { flex-direction: column; align-items: stretch; }
    .pk-btn-sf { width: 100%; }
}

/* ══ Verspaetungen K&N und DHL (kn-*, seiten-logistik-a.json) ═══════════════════════════════
   Vorher wortgleich im <style> beider Templates, 13.11. hierher (anfragen/verspaetungen.md 1,
   Pruefer-Befund 6). Die drei #empty-state-Regeln unter .kn-seite gebunden (die ID gibt es auf
   weiteren Seiten). Steht vor dem Rahmen-Abschnitt wie vorher der Seiten-Style vor dem Rahmen-Block. */

/* Per hidden-Attribut geschaltete Zusaetze (Problemzeile, Fehlerknoepfe, Technik-Zeile):
   .btn setzt display und wuerde [hidden] sonst ueberstimmen */
.kn-seite [hidden] { display: none; }

/* Seitenkopf: Titel links, Stand-Zeile mit leisem Aktualisieren rechts (Baustein 19) */
.kn-kopf { align-items: baseline; margin-bottom: var(--sp-5); }
.kn-kopf > .page-subtitle { order: 2; flex-basis: 100%; max-width: 880px; margin-top: calc(-1 * var(--sp-1)); }
.kn-meta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: var(--sp-1) var(--sp-3); margin-left: auto;
}
.kn-meta .gg-stand { white-space: normal; }
.kn-meta .gg-stand .spinner-sm { margin: 0; flex: none; }
.kn-stand-technik { flex-basis: 100%; text-align: right; }
.kn-meta .gg-rollenhinweis { flex-basis: 100%; text-align: right; }

/* Hinweis: Desktop ruhiger Textblock, Handy Aufklapper "So funktioniert die Seite" (6.21) */
details.kn-hinweis { max-width: 880px; margin: 0 0 var(--sp-5); border-top: 0; }
.kn-hinweis-text { display: flex; gap: var(--sp-2); margin: 0; }
.kn-hinweis-text > .ph { flex: none; font-size: 16px; line-height: var(--lh-13); color: var(--text-muted); }
.kn-hinweis-text p { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary); }
@media (min-width: 769px) {
    .kn-hinweis[open] > summary { display: none; }
}

/* Werkzeugleiste: Segment (Baustein 4) und Kopfzeilen ueber der Liste */
.kn-toolbar {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.kn-seg-count {
    font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12);
    font-weight: 400; color: var(--text-muted);
}
.kn-seg-btn.active .kn-seg-count { color: var(--text-secondary); }
.kn-seg-zusatz { font-family: var(--font-sans); }
.kn-punkt { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--status-red); }
.kn-seg-btn .kn-punkt { display: none; }
.kn-seg-btn.has-problem .kn-punkt { display: inline-block; }
.kn-listenkopf {
    display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
    min-width: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary);
}
.kn-problemzeile { color: var(--text-primary); }
.kn-problemzeile .ph { color: var(--text-secondary); }
.kn-altkopf { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.kn-altkopf #kn-bulk { margin-left: auto; }

/* Liste: waehrend des Nachladens gedimmt, bleibt bedienbar (keine Sperre) */
.kn-liste > #kn-panel, .kn-liste > #empty-state { transition: opacity var(--dur-press) var(--ease); }
.kn-liste.is-laedt > #kn-panel, .kn-liste.is-laedt > #empty-state { opacity: .5; }
#loading.kn-laden {
    padding: var(--sp-3) var(--sp-5); text-align: left;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.kn-laden .gg-platzhalter { gap: var(--sp-10); padding: var(--sp-3) 0; }

/* Tabelle (Baustein 6): Seit Versand | Bestellung und Kunde | Status und Ereignis | Sendungsnummer | Aktionen */
#kn-panel { border-radius: var(--radius-lg); }
/* waagrecht verschiebbar nur bei schmalen Desktop-Breiten; position haelt die versteckten
   Screenreader-Texte (gg-sr-only, absolut) im Behaelter, sonst wird die Seite breiter */
.kn-scroll { position: relative; overflow-x: auto; }
.kn-table tbody td { vertical-align: top; white-space: normal; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.kn-table td.kn-c-best { min-width: 160px; }
.kn-table th.kn-c-wt, .kn-table td.kn-c-wt { width: 1%; white-space: nowrap; text-align: right; }
.kn-table td.kn-c-code, .kn-table td.kn-actions-cell { white-space: nowrap; }
.kn-table th.kn-c-aktion { text-align: right; }
.kn-table tbody tr.is-erledigt td, .kn-table tr.is-erledigt .kn-cust { color: var(--text-secondary); }

/* Werktage seit Versand (Signatur): Mono-Zahl in secondary, amber ab 5, rot ab 8, mit Warnzeichen */
.kn-aging { gap: var(--sp-1); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary); }
.kn-aging::before { display: none; }
.kn-aging.badge-amber { color: var(--status-amber); }
.kn-aging.badge-red { color: var(--status-red); }
.kn-aging > i { font-size: 12px; }
.kn-wt-zahl { font-family: var(--font-mono); }
.kn-wt-kurz { display: none; }

/* Bestellung und Kunde */
.kn-best-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
.kn-bestellung {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    font-family: var(--font-mono); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-primary);
    text-decoration: none; border-radius: var(--radius-sm);
}
a.kn-bestellung { min-height: 24px; color: var(--accent-ink); }
a.kn-bestellung:hover, a.kn-bestellung:focus-visible { text-decoration: underline; }
.kn-bestellung > .ph { font-size: 12px; color: var(--text-muted); }
.kn-etikett { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-secondary); }
.kn-cust { display: block; margin-top: 2px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-primary); }
.kn-note {
    display: flex; align-items: flex-start; gap: var(--sp-1); margin-top: var(--sp-1);
    font-size: var(--fs-13); line-height: var(--lh-13); font-style: normal; color: var(--text-secondary);
}
.kn-note > .ph { flex: none; font-size: 14px; line-height: var(--lh-13); color: var(--text-muted); }
.kn-ereignis-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Sendungsnummer mit Kopieren */
.kn-track-code { font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-13); color: var(--text-secondary); vertical-align: middle; }
.kn-copy-btn { margin-left: var(--sp-1); vertical-align: middle; }

/* Aktionen in einer Reihe (769 bis 1100 untereinander, siehe unten); Abhaken in
   Bestaetigen-Art. .btn-primary bleibt als Anker (Audit F26), hoechstens ein Hauptknopf
   je Ansicht (Baustein 1) */
.kn-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.kn-actions .btn-primary.kn-abhaken,
.kn-actions .btn-primary.kn-abhaken:hover {
    background: var(--bg-elevated); border-color: var(--hairline-strong); color: var(--text-primary); box-shadow: none;
}
.kn-actions .btn-primary.kn-abhaken:hover { background: var(--bg-hover); }
.kn-actions .btn-primary.kn-abhaken i { color: var(--status-green); }
@media (min-width: 1101px) {
    .kn-actions { flex-wrap: nowrap; }
}
@media (min-width: 1280px) {
    .kn-table td.kn-c-best { min-width: 240px; }
}
/* Tablet und schmaler Desktop mit offener Leiste (769 bis 1100): Koepfe brechen um
   ("Sendungs-nummer" per weicher Trennung im HTML), Aktionen untereinander. Bis 960
   zusaetzlich Werktage kurz und Aktionen als Symbolknoepfe (Name aus aria-label bzw.
   verstecktem Text, title fuer die Maus): sonst liegen Verfolgen, Vertagen und Abhaken
   bei 769 bis 960 ausserhalb des Bildes (Pruefer-Befund 1, gemessen mit breiten.mjs) */
@media (min-width: 769px) and (max-width: 1100px) {
    .kn-table thead th, .kn-table th.kn-c-wt { white-space: normal; }
    .kn-table td.kn-c-code, .kn-table td.kn-actions-cell { white-space: normal; }
    .kn-table td.kn-c-best { min-width: 120px; }
    .kn-actions { flex-direction: column; align-items: stretch; }
    .kn-actions > .btn { justify-content: flex-start; }
}
@media (min-width: 769px) and (max-width: 960px) {
    .kn-actions { align-items: flex-end; }
    .kn-actions > .btn { justify-content: center; width: var(--control-h-sm); padding: 0; }
    /* visuell versteckt, bleibt vorlesbar (wie im Handy-Block, nur in dieser Breite) */
    .kn-wt-lang, .kn-actions .kn-knopftext {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .kn-wt-kurz { display: inline; }
}
/* Desktop: erste Zeile jeder Zelle auf Knopfhoehe 28, damit Werktage, Bestellung, Status,
   Sendungsnummer und Aktionen auf einer Linie stehen */
@media (min-width: 769px) {
    .kn-table .kn-aging, .kn-table a.kn-bestellung, .kn-table span.kn-bestellung,
    .kn-c-status > .badge, .kn-track-code { min-height: var(--control-h-sm); height: auto; }
    .kn-table span.kn-bestellung, .kn-track-code { display: inline-flex; align-items: center; }
}

/* Leer und Fehler (Bausteine 16 und 18) im selben #empty-state */
.kn-seite #empty-state .gg-zustand-technik { margin-top: var(--sp-2); }
.kn-seite #empty-state .btn { margin-top: var(--sp-3); }
.kn-seite #empty-state.is-fehler .empty-state-icon { color: var(--status-red); }

/* Handy: Listenzeile m-list ohne Feldlabels (Baustein 7), Segment im 3er-Raster */
@media (max-width: 768px) {
    .kn-kopf > .page-subtitle { order: 1; margin-top: 0; }
    .kn-meta { order: 2; justify-content: flex-start; margin-left: 0; width: 100%; }
    .kn-stand-technik, .kn-meta .gg-rollenhinweis { text-align: left; }
    .kn-meta { flex-wrap: nowrap; }
    .kn-meta .gg-stand { flex: 1 1 auto; min-width: 0; row-gap: 0; }
    .kn-meta .btn { flex: none; min-height: var(--control-h-touch); }
    /* Aktualisieren am Handy als Symbolknopf 44 neben der Stand-Zeile, Name bleibt vorlesbar
       (Text visuell versteckt, Regel am Ende dieses Blocks) */
    #kn-refresh { width: var(--control-h-touch); padding: 0; margin-left: auto; }
    .kn-meta:has(> .kn-stand-technik:not([hidden])), .kn-meta:has(> .gg-rollenhinweis:not([hidden])) { flex-wrap: wrap; }
    details.kn-hinweis { margin-bottom: var(--sp-4); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .kn-hinweis-text { padding-bottom: var(--sp-3); }
    .kn-hinweis-text > .ph { display: none; }

    .kn-toolbar { gap: var(--sp-3); }
    .kn-segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kn-seg-btn { flex-wrap: wrap; align-content: center; column-gap: var(--sp-1); row-gap: 0; padding: var(--sp-1) var(--sp-2); }
    .kn-seg-zusatz { flex-basis: 100%; }
    .kn-seg-zusatz:empty { display: none; }
    .kn-listenkopf { flex-basis: 100%; }
    .kn-problemzeile { min-height: var(--control-h-touch); }
    .kn-altkopf #kn-bulk { margin-left: 0; width: 100%; }

    #kn-panel { background: transparent; border: 0; border-radius: 0; }
    .kn-scroll { overflow: visible; }
    .kn-table tbody tr { align-items: center; gap: var(--sp-1) var(--sp-3); }
    .kn-table tbody td[data-label]::before { content: none; display: none; }
    .kn-table td.kn-c-best { display: contents; }
    .kn-best-zeile { order: 1; flex: 1 1 auto; min-width: 0; }
    .kn-table td.kn-c-wt { order: 2; width: auto; margin-left: auto; }
    .kn-cust { order: 3; flex-basis: 100%; margin-top: 0; font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; }
    .kn-table td.kn-c-status { order: 4; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
    .kn-c-status .kn-note { margin-top: 0; }
    .kn-ereignis-text { display: inline; -webkit-line-clamp: unset; }
    .kn-table td.kn-c-code { order: 5; flex-basis: 100%; display: flex; align-items: center; }
    .kn-c-best > .kn-note { order: 6; flex-basis: 100%; margin-top: 0; font-size: var(--fs-12); line-height: var(--lh-12); }
    .kn-table td.kn-actions-cell { order: 7; flex-basis: 100%; min-width: 0; white-space: normal; }
    .kn-actions { justify-content: stretch; flex-wrap: nowrap; gap: var(--sp-2); }
    .kn-actions > .btn {
        flex: 1 1 0; min-width: 0; gap: 6px; padding-left: 6px; padding-right: 6px;
        font-size: var(--fs-14); line-height: var(--lh-14); overflow: hidden; text-overflow: ellipsis;
    }
    a.kn-bestellung { min-height: var(--control-h-touch); }
    /* Visuell versteckt, bleibt vorlesbar (Muster .gg-sr-only, aber nur in dieser Breite;
       base-Klasse als Anfrage verspaetungen.md Nr. 5): Langform Werktage, Text Aktualisieren */
    .kn-wt-lang, #kn-refresh .kn-knopftext {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .kn-wt-kurz { display: inline; }
}

/* ══ Rahmen (_nav.html): vorher <style id="gg-rahmen-css"> im Template, 1:1 hierher (anfragen/rahmen.md 1, 13.11.) ══ */
/* ════════════════════════════════════════════════════════════════════════
   RAHMEN P2 (Design-Konzept 12.11.2026, entscheidungen.md Kap. 10, seiten-rahmen.json)
   Stand bis 13.11. als <style id="gg-rahmen-css"> in _nav.html. Nur Zusaetze und
   Ueberschreibungen, kein !important auf display/left/top von Elementen, die JS schaltet.
   Steht am Dateiende wie vorher im Body (gewinnt bei gleicher Spezifitaet gegen base.css).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Leisten-Variablen (eine Stelle fuer alle Seiten) ─────────────────── */
:root { --gg-tabbar-platz: 0px; --gg-kopf-h: 0px; --gg-netz-h: 0px; --gg-top-h: calc(var(--gg-kopf-h) + var(--gg-netz-h)); }
html.gg-netz-an { --gg-netz-h: 36px; }
@media (max-width: 768px) {
    :root { --gg-kopf-h: calc(56px + env(safe-area-inset-top)); }
    html.gg-standalone { --gg-kopf-h: calc(56px + var(--gg-alt-band)); }
    /* --gg-tabbar-h ohne Safe-Area: base.css rechnet env(safe-area-inset-bottom) selbst dazu */
    html.gg-hat-tabbar { --gg-tabbar-h: 56px; --gg-tabbar-platz: 56px; }
    /* Tab-Leiste weg bei offenem Chat/Dialog und bei Bildschirmtastatur (html.gg-tastatur, Skript oben;
       nicht bei reinem :focus, sonst fehlt nach q.focus() beim Laden jede Navigation) */
    html.gg-hat-tabbar.chat-offen, html.gg-hat-tabbar.lw-offen, html.gg-hat-tabbar.gg-tastatur {
        --gg-tabbar-h: 0px;
    }
    html.gg-hat-tabbar body { padding-bottom: calc(var(--gg-tabbar-platz) + env(safe-area-inset-bottom)); }
    /* /chat: Hoehe ohne Kopfleiste (Spacer im Fluss) und ohne Tab-Leiste samt Safe-Area,
       sonst liegt das Eingabefeld hinter der Tab-Leiste */
    html.gg-hat-tabbar .chat-layout { height: calc(100dvh - var(--gg-kopf-h) - var(--gg-tabbar-h) - env(safe-area-inset-bottom)); }
    /* Home-Indikator liegt schon unter der Tab-Leiste: Eingabezeile nicht noch einmal anheben */
    html.gg-hat-tabbar .chat-layout .chat-input { padding-bottom: var(--sp-3); }
    /* Seiten-Toasts (Boards, Produktdaten) ueber Tab- und Aktionsleiste wie #gg-toast-wrap.
       Auswahl-Leiste der Bestandssuche und Erfolgsmeldung Bedarf melden setzen ihre Lage selbst. */
    .tasks-toast, .pim-toast { bottom: calc(20px + var(--gg-tabbar-h) + var(--gg-actionbar-h) + env(safe-area-inset-bottom)); }
}
/* Desktop: Platz am Seitenende fuer Chat- und Feedback-Knopf (U4) */
@media (min-width: 769px) {
    body:has(> .chat-widget-floating, > .fbw-floating) > .page { padding-bottom: 96px; }
}

/* ── Sprunglink (11.3) ─────────────────────────────────────────────────── */
.gg-sprunglink {
    position: fixed; left: 8px; top: 8px; z-index: 1001;
    padding: 8px 12px; border-radius: var(--radius);
    background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary);
    font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none;
    transform: translateY(-200%);
}
.gg-sprunglink:focus, .gg-sprunglink:focus-visible { transform: none; }
@media (max-width: 768px) {
    .gg-sprunglink { min-height: var(--control-h-touch); display: inline-flex; align-items: center; }
}

/* ── Leiste: Grundwerte fuer alle Breiten ─────────────────────────────── */
.sidebar-item { border-left: 0; margin-left: 0; font-weight: 400; }
.sidebar-item.active { border-left-color: transparent; }
.sidebar-item i { color: var(--text-muted); }
.sidebar-item:hover i { color: var(--text-secondary); }
.sidebar-item.active i { color: var(--accent-ink); }
.sidebar-group { border-top: 0; padding-top: 0; margin-top: var(--sp-4); }
.sidebar-group:first-of-type { margin-top: var(--sp-4); }
.sidebar-group-label {
    display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
    background: none; border: 0; border-radius: 6px; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-muted);
    padding: 0 12px 4px; margin: 0;
}
.sidebar-group-label:hover { color: var(--text-secondary); }
.sidebar-group-label .ph { font-size: 12px; opacity: 0; transition: opacity var(--dur-feedback, 120ms) var(--ease, ease), transform var(--dur-feedback, 120ms) var(--ease, ease); }
.sidebar-group-label:hover .ph, .sidebar-group-label:focus-visible .ph, .sidebar-group.is-zu .sidebar-group-label .ph { opacity: 1; }
.sidebar-group.is-zu .sidebar-group-label .ph { transform: rotate(-90deg); }
.sidebar-group.is-zu > a.sidebar-item { display: none; }
.sidebar-brand { font-size: 16px; letter-spacing: 0; }
.gg-nur-handy { display: none; }
.sidebar-header-aktionen { display: inline-flex; align-items: center; gap: 2px; }
.sidebar-suche-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    background: none; border: 0; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; font-size: 16px;
}
.sidebar-suche-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Benutzerblock und Kontomenue (Popover ueber dem Block, U2) */
.sidebar-user { position: relative; z-index: 2; }
.sidebar-user-toggle { min-height: 52px; padding: 8px 12px 8px 16px; }
.sidebar-user-toggle.gg-konto-aktiv { background: var(--bg-elevated); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.sidebar-user-avatar { width: 28px; height: 28px; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--hairline-strong); font-size: 12px; }
.sidebar-user-name { font-size: 14px; line-height: 20px; }
.sidebar-user-role, .sidebar-user-role[class*="role-"] { font-size: 12px; line-height: 16px; color: var(--text-secondary); margin-top: 0; }
.sidebar-user-caret { font-size: 16px; }
.sidebar-account-menu {
    position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px);
    padding: 4px; gap: 2px; background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-md);
}
.sidebar-account-item {
    min-height: 36px; padding: 0 12px; border-radius: 6px; width: 100%;
    font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 400;
    background: none; border: 0; cursor: pointer; text-align: left;
}
.sidebar-account-item.active { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-account-trenner { height: 1px; margin: 4px 8px; background: var(--border); border: 0; }
html[data-theme="light"] .gg-nur-dunkel, html:not([data-theme="light"]) .gg-nur-hell { display: none; }

/* Fuss: Symbolknoepfe 36 mit title und aria-label */
.sidebar-iconbtn { border: 0; color: var(--text-muted); }

/* ── Desktop ab 769 (10.3): Zeile 32, Kopf 56, aktive Zeile Flaeche + Akzent-Icon ── */
@media (min-width: 769px) {
    .sidebar-header { height: 56px; padding: 0 12px 0 16px; border-bottom: 0; }
    .sidebar-brand { gap: 10px; }
    .sidebar-brand .mark { width: 24px; height: 24px; font-size: 12px; border-radius: 6px; }
    .sidebar-nav { padding: 4px 12px 16px; gap: 2px; }
    .sidebar-item {
        min-height: 32px; height: 32px; padding: 0 12px; gap: 10px; border-radius: var(--radius);
        font-size: 14px; line-height: 20px; color: var(--text-secondary);
    }
    .sidebar-item i { font-size: 16px; width: 16px; }
    .sidebar-item:hover { background: var(--bg-hover); color: var(--text-primary); }
    .sidebar-item.active {
        background: var(--bg-elevated); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
        color: var(--text-primary); font-weight: 500;
    }
    .sidebar-group { gap: 2px; }
    .sidebar-group-label { min-height: 20px; }
    .sidebar-footer { padding: 6px 12px; gap: 4px; }
    .sidebar-iconbtn { width: 36px; height: 36px; font-size: 16px; }
    /* Eingeklappt: Name als Etikett neben der Leiste bei Hover und Fokus (U6) */
    html.sidebar-collapsed .sidebar-item { justify-content: center; padding: 0; }
    html.sidebar-collapsed .sidebar-item-label { display: none; }
    html.sidebar-collapsed .sidebar-item:hover::after,
    html.sidebar-collapsed .sidebar-item:focus-visible::after {
        content: attr(aria-label); position: fixed; left: calc(var(--sidebar-w-collapsed) + 8px);
        margin-top: -2px; padding: 6px 10px; border-radius: var(--radius-md, 10px); white-space: nowrap;
        background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-md);
        color: var(--text-primary); font-size: 13px; line-height: 20px; font-weight: 400; z-index: var(--z-tooltip, 1000);
        pointer-events: none;
    }
    html.sidebar-collapsed .sidebar-group-label { display: none; }
    html.sidebar-collapsed .sidebar-group.is-zu > a.sidebar-item { display: flex; }
    html.sidebar-collapsed .sidebar-group { margin-top: var(--sp-3); }
    html.sidebar-collapsed .sidebar-suche-btn { display: none; }
    html.sidebar-collapsed .sidebar-header { padding: 0; justify-content: center; }
    html.sidebar-collapsed .sidebar-brand { gap: 0; }
    html.sidebar-collapsed .sidebar-brand-name, html.sidebar-collapsed .sidebar-header-aktionen { display: none; }
    html.sidebar-collapsed .sidebar-account-menu {
        position: fixed; left: calc(var(--sidebar-w-collapsed) + 8px); right: auto; bottom: 8px; width: 240px;
    }
    html.sidebar-collapsed .sidebar-account-item { justify-content: flex-start; padding: 0 12px; }
    html.sidebar-collapsed .sidebar-account-item span { display: inline; }
    html.sidebar-collapsed[data-theme="light"] .gg-nur-dunkel, html.sidebar-collapsed:not([data-theme="light"]) .gg-nur-hell { display: none; }
    .topbar-mobile, .gg-tabbar, .gg-bereichsleiste { display: none; }
}
[data-theme="light"] .sidebar-item.active,
[data-theme="light"] .sidebar-user-toggle.gg-konto-aktiv { background: var(--bg-active); box-shadow: none; }

/* ── Handy bis 768 (10.4) ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Kopfleiste: G-Zeichen oder Zurueck, Seitenname, rechts Platz fuer den Chat-Knopf */
    .topbar-mobile {
        gap: 4px; background: var(--bg-root);
        padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right));
    }
    .topbar-mobile .menu-toggle { width: 44px; height: 44px; border: 0; background: none; font-size: 22px; }
    html.gg-hat-tabbar .topbar-mobile .menu-toggle { display: none; }
    .topbar-brand { width: 44px; height: 44px; justify-content: center; flex: none; gap: 0; }
    .topbar-brand .mark { width: 28px; height: 28px; font-size: 13px; border-radius: 6px; }
    .topbar-brand-name {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .topbar-brand.is-verdeckt { display: none; }
    .gg-kopf-zurueck {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 44px; height: 44px; border-radius: var(--radius); color: var(--text-primary); font-size: 22px; text-decoration: none;
    }
    .gg-kopf-titel {
        flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
        font-size: 17px; line-height: 22px; font-weight: 500; color: var(--text-primary);
    }
    .gg-kopf-titel-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gg-kopf-titel .gg-lagercode { flex: none; }
    .gg-kopf-platz { flex: none; width: 44px; height: 44px; }

    /* Bereichsleiste unter der Kopfleiste (im Fluss, klebt nicht) */
    .gg-bereichsleiste {
        display: flex; gap: 20px; padding: 0 16px; overflow-x: auto; scrollbar-width: none;
        border-bottom: 1px solid var(--border); background: var(--bg-root);
    }
    .gg-bereichsleiste::-webkit-scrollbar { display: none; }
    .gg-bereichsleiste a {
        flex: none; display: inline-flex; align-items: center; min-height: 44px;
        font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-secondary); text-decoration: none;
        box-shadow: inset 0 -2px 0 transparent;
    }
    .gg-bereichsleiste a.is-aktiv { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--accent-ink); }

    /* Tab-Leiste */
    .gg-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar, 90);
        display: flex; height: calc(56px + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: var(--bg-surface); border-top: 1px solid var(--border);
    }
    html.chat-offen .gg-tabbar, html.lw-offen .gg-tabbar, html.gg-tastatur .gg-tabbar { display: none; }
    .gg-tab {
        position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-decoration: none;
        font-family: inherit; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-secondary);
        -webkit-tap-highlight-color: transparent;
    }
    .gg-tab i { font-size: 24px; line-height: 1; }
    .gg-tab.is-aktiv { color: var(--accent-ink); }
    .gg-tab.is-aktiv::before {
        content: ""; position: absolute; top: -1px; left: 50%; width: 24px; height: 2px; margin-left: -12px;
        background: var(--accent-ink); border-radius: 0 0 2px 2px;
    }
    .sidebar.drawer-open ~ .gg-tabbar { z-index: 201; }
    .sidebar.drawer-open ~ .gg-tabbar .gg-tab-mehr { color: var(--accent-ink); }
    .sidebar.drawer-open ~ .gg-tabbar .gg-tab.is-aktiv:not(.gg-tab-mehr) { color: var(--text-secondary); }
    .sidebar.drawer-open ~ .gg-tabbar .gg-tab.is-aktiv:not(.gg-tab-mehr)::before { display: none; }

    /* Mehr-Blatt: das vorhandene #sidebar als Blatt von unten ueber der Tab-Leiste */
    html.gg-hat-tabbar .sidebar {
        top: auto; left: 0; right: 0; bottom: calc(var(--gg-tabbar-h) + env(safe-area-inset-bottom));
        width: auto; max-width: none;
        max-height: calc(100dvh - var(--gg-kopf-h) - var(--gg-tabbar-h) - env(safe-area-inset-bottom) - 8px);
        border-right: 0; border-top: 1px solid var(--border); border-radius: var(--radius-sheet, 16px) var(--radius-sheet, 16px) 0 0;
        transform: translateY(calc(100% + 72px)); visibility: hidden;
        transition: transform var(--dur-sheet, 240ms) var(--ease, ease), visibility 0s linear var(--dur-sheet, 240ms);
    }
    html.gg-hat-tabbar .sidebar.drawer-open { transform: none; visibility: visible; transition: transform var(--dur-sheet, 240ms) var(--ease, ease), visibility 0s; }
    html.gg-standalone.gg-hat-tabbar .sidebar { padding-top: 0; }
    html.gg-hat-tabbar .sidebar::before {
        content: ""; flex: none; display: block; width: 36px; height: 4px; margin: 8px auto 0;
        border-radius: 2px; background: var(--border-strong);
    }
    html.gg-hat-tabbar .nav-drawer-backdrop { bottom: calc(var(--gg-tabbar-h) + env(safe-area-inset-bottom)); }
    html.gg-hat-tabbar .sidebar-header { height: 52px; padding: 0 4px 0 16px; border-bottom: 0; }
    html.gg-hat-tabbar .sidebar-nav { padding: 0 16px 12px; overflow: visible; flex: none; }
    html.gg-hat-tabbar .sidebar-item.gg-im-tab { display: none; }
    html.gg-hat-tabbar .sidebar-item {
        min-height: 44px; padding: 0 4px; gap: 12px; border-radius: var(--radius);
        font-size: 15px; line-height: 20px; color: var(--text-primary);
    }
    html.gg-hat-tabbar .sidebar-item i { font-size: 20px; width: 20px; }
    html.gg-hat-tabbar .sidebar-item.active { background: var(--bg-elevated); }
    html.gg-hat-tabbar .sidebar-group { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 0; margin-top: 8px; }
    html.gg-hat-tabbar .sidebar-group-label { grid-column: 1 / -1; font-size: 13px; line-height: 18px; padding: 8px 4px 2px; min-height: 28px; }
    html.gg-hat-tabbar .gg-nur-handy { display: flex; }
    html.gg-hat-tabbar .sidebar-footer.gg-fuss-mit-konto { display: none; }
    .sidebar-suche-btn { width: 44px; height: 44px; font-size: 20px; }
    .sidebar-account-item { min-height: 44px; font-size: 15px; }
    .sidebar-drawer-close { width: 44px; height: 44px; font-size: 20px; }
}

/* Menuesuche (Strg+K) und "Was ist wo" als native Dialoge (Escape, Fokus, Hintergrund) */
.gg-rahmen-dialog {
    width: min(520px, calc(100vw - 32px)); max-height: min(640px, calc(100dvh - 64px)); padding: 0;
    background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border);
    border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-overlay);
    /* base.css setzt global margin: 0 und hebt damit die Mitte des nativen Dialogs auf (stand oben links) */
    margin: auto;
}
/* Menuesuche oben mittig, damit sie beim Tippen nicht springt; am Handy gilt das Blatt unten (Regel im 768er-Block) */
.gg-menuesuche { margin-top: 12vh; }
.gg-rahmen-dialog::backdrop { background: rgba(0,0,0,.55); }
.gg-rahmen-dialog-kopf { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--border); }
.gg-rahmen-dialog-kopf h2 { flex: 1; font-size: 15px; line-height: 20px; font-weight: 500; margin: 0; }
.gg-rahmen-dialog-zu { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 0; border-radius: var(--radius); color: var(--text-secondary); cursor: pointer; font-size: 16px; }
.gg-rahmen-dialog-zu:hover { background: var(--bg-hover); color: var(--text-primary); }
.gg-menuesuche-feld { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.gg-menuesuche-feld i { font-size: 16px; color: var(--text-muted); }
.gg-menuesuche-feld input { flex: 1; min-width: 0; height: 36px; background: transparent; border: 0; box-shadow: none; padding: 0; font-size: 15px; color: var(--text-primary); outline: none; }
.gg-menuesuche-feld input:focus-visible { outline: none !important; box-shadow: none; }
.gg-menuesuche-feld kbd { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); border: 1px solid var(--hairline-strong); border-radius: 4px; padding: 0 5px; }
.gg-menuesuche-liste { list-style: none; margin: 0; padding: 4px; max-height: 360px; overflow-y: auto; }
.gg-menuesuche-liste a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 6px; color: var(--text-primary); text-decoration: none; font-size: 14px; }
.gg-menuesuche-liste a i { font-size: 16px; color: var(--text-muted); }
.gg-menuesuche-liste a .gg-menuesuche-gruppe { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.gg-menuesuche-liste a[aria-selected="true"], .gg-menuesuche-liste a:hover { background: var(--bg-hover); }
.gg-menuesuche-leer { padding: 12px 14px; font-size: 13px; color: var(--text-secondary); }
.gg-wasistwo-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.gg-wasistwo-tabelle th, .gg-wasistwo-tabelle td { text-align: left; padding: 8px 16px; border-bottom: 1px solid var(--border); }
/* base.css setzt tbody td global auf nowrap; hier muss umbrochen werden, sonst fehlen Spalten (Desktop 520, Handy 390) */
.gg-wasistwo-tabelle td { white-space: normal; vertical-align: top; }
.gg-wasistwo-tabelle th { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.gg-wasistwo-inhalt { overflow-y: auto; max-height: calc(min(640px, 100dvh - 64px) - 52px); }
@media (max-width: 768px) {
    .gg-rahmen-dialog { width: 100vw; max-width: 100vw; max-height: 85dvh; margin: auto 0 0; border-radius: var(--radius-sheet, 16px) var(--radius-sheet, 16px) 0 0; }
    .gg-menuesuche-liste a { min-height: 44px; font-size: 15px; }
    .gg-menuesuche-feld input { font-size: 16px; height: 44px; }
    .gg-rahmen-dialog-zu { width: 44px; height: 44px; }
}

/* ══ Chat-Widget (_chat_widget.html): vorher <style id="gg-chat-widget-css"> im Template, 1:1 hierher (anfragen/rahmen.md 1, 13.11.) ══ */
/* Rahmen P2: Ueberschreibungen zum Abschnitt CHAT WIDGET */
.chat-widget-floating { right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.chat-widget-fab {
    width: 48px; height: 48px; background: var(--bg-elevated); color: var(--text-primary);
    border: 1px solid var(--hairline-strong); box-shadow: none;
    transition: background var(--transition), border-color var(--transition);
}
.chat-widget-fab:hover { background: var(--bg-hover); box-shadow: none; }
.chat-widget-fab i { font-size: 20px; }
.chat-widget-panel { bottom: 60px; background: var(--bg-elevated); border-color: var(--border); border-radius: var(--radius-lg, 14px); }
.chat-widget-header { min-height: 52px; background: var(--bg-elevated); }
.chat-widget-title { font-size: 15px; line-height: 20px; }
.chat-widget-full-text { display: none; }
.chat-widget-iconbtn[aria-disabled="true"] { opacity: .5; cursor: default; }
.chat-widget-input { background: var(--bg-elevated); }
.chat-widget-loading { opacity: 0; animation: gg-cw-spaet 1ms linear 400ms forwards; }
@keyframes gg-cw-spaet { to { opacity: 1; } }
.chat-widget-proposal { border-left: 2px solid var(--accent-ink); background: var(--bg-surface); }
.chat-widget-proposal-vor { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-muted); margin-bottom: 2px; }
.chat-widget-proposal-label { font-size: 14px; line-height: 20px; }
.chat-widget-proposal-label .gg-route { vertical-align: middle; margin-left: 4px; }
.chat-widget-proposal-unter { display: block; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--text-secondary); }
.chat-widget-proposal-actions { justify-content: flex-end; }
.chat-widget-proposal-actions .btn { flex: 0 0 auto; }
.chat-widget-msg-error {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; align-self: stretch; max-width: none;
    background: var(--status-red-dim); color: var(--text-primary); border: 1px solid color-mix(in srgb, var(--status-red) 32%, transparent);
    border-radius: var(--radius); padding: 8px 12px; font-size: 13px; line-height: 20px;
}
.chat-widget-msg-error .ph { font-size: 16px; line-height: 20px; color: var(--status-red); }
.chat-widget-msg-error span { flex: 1 1 0; min-width: 0; }
.chat-widget-fehler-technik { flex-basis: 100%; padding-left: 24px; font-size: 12px; line-height: 16px; color: var(--text-secondary); }
/* Handy bis 768: Knopf in der Kopfleiste, offen Vollbild ueber Kopf- und Tab-Leiste */
@media (max-width: 768px) {
    .chat-widget-floating {
        top: calc(6px + env(safe-area-inset-top, 0px)); bottom: auto;
        right: max(6px, env(safe-area-inset-right, 0px)); z-index: 101;
    }
    html.gg-standalone .chat-widget-floating { top: calc(6px + var(--gg-alt-band, 0px)); }
    .chat-widget-floating.open { z-index: 150; }
    .chat-widget-fab {
        width: 44px; height: 44px; background: transparent; border: 0; color: var(--text-secondary); border-radius: var(--radius);
    }
    .chat-widget-fab:hover { background: transparent; color: var(--text-primary); }
    .chat-widget-fab i { font-size: 22px; }
    .chat-widget-floating.open .chat-widget-fab { display: none; }
    html.chat-offen, html.chat-offen body { overflow: hidden; }
    .chat-widget-panel {
        position: fixed; left: 0; right: 0; bottom: auto; top: var(--chat-vv-top, 0px);
        width: 100%; height: var(--chat-vv-h, 100dvh);
        border: none; border-radius: 0; box-shadow: none; background: var(--bg-root);
    }
    .chat-widget-header { padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; background: var(--bg-root); }
    .chat-widget-title { font-size: 17px; line-height: 22px; }
    .chat-widget-iconbtn { width: 44px; height: 44px; font-size: 22px; }
    .chat-widget-full { display: inline-flex; width: auto; padding: 0 10px; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 500; }
    .chat-widget-full i { font-size: 18px; }
    .chat-widget-full-text { display: inline; }
    .chat-widget-messages { padding: var(--sp-4) var(--sp-3); }
    .chat-widget-msg, .chat-widget-msg-error { font-size: 16px; max-width: 88%; }
    .chat-widget-msg-error { max-width: none; font-size: 15px; }
    .chat-widget-welcome-title { font-size: 20px; }
    .chat-widget-welcome-text { font-size: 15px; }
    .chat-widget-starter { min-height: 48px; font-size: 15px; }
    .chat-widget-proposal-label { font-size: 15px; }
    .chat-widget-proposal-actions .btn { flex: 1 1 0; min-height: 44px; font-size: 15px; }
    .chat-widget-input { background: var(--bg-root); }
    .chat-widget-input textarea {
        font-size: 16px; line-height: 22px; padding: 10px 14px; height: 44px; min-height: 44px; border-radius: 22px;
    }
    .chat-widget-input .chat-mic-btn, .chat-widget-send { width: 44px; height: 44px; border-radius: 50%; }
    .chat-widget-input .chat-mic-btn i, .chat-widget-send i { font-size: 20px; }
    /* Tastatur offen (13.11., Daniels Screenshot): .chat-tastatur setzt das Widget-Skript. Der Home-Indicator liegt
       unter der Tastatur, also kein safe-area-Abstand unter der Eingabe (sonst ~44 px Luecke ueber der Tastatur). */
    .chat-widget-panel.chat-tastatur .chat-widget-input { padding-bottom: 10px; }
    /* Unterlage in Panel-Farbe ueber den ganzen Bildschirm: iOS 26 zeichnet Tastatur und Formularleiste als
       schwebendes Glas, durch Raender und Zwischenraeume schien sonst die Seite unter dem Chat durch. Fest
       positioniert (kein transform an Panel/Widget, sonst waere das Panel der Bezug), z-index -1 = unter dem Panel. */
    .chat-widget-floating.open .chat-widget-panel::before {
        content: ""; position: fixed; left: 0; right: 0; top: -50vh; bottom: -50vh;
        background: var(--bg-root); z-index: -1; pointer-events: none;
    }
}
/* /chat: Home-Indicator-Abstand nur ohne Bildschirmtastatur (html.gg-tastatur aus _nav.html) */
html.gg-tastatur .chat-input { padding-bottom: var(--sp-3); }

/* ══ Feedback-Widget (_feedback_widget.html): vorher <style id="gg-feedback-widget-css"> im Template, 1:1 hierher (anfragen/rahmen.md 1, 13.11.) ══ */
/* Rahmen P2: Ueberschreibungen zum Abschnitt Feedback-Widget */
.fbw-floating { right: 28px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.fbw-fab {
    width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; border-radius: 50%;
    background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--hairline-strong); box-shadow: none;
    transition: background var(--transition), border-color var(--transition);
}
.fbw-fab:hover { background: var(--bg-hover); border-color: var(--hairline-strong); box-shadow: none; }
.fbw-fab i { font-size: 16px; color: var(--text-secondary); }
.fbw-fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fbw-floating.fbw-dragging .fbw-fab, .fbw-floating.fbw-dragging .fbw-fab:hover { box-shadow: var(--shadow-md); }
.fbw-panel { background: var(--bg-elevated); border-color: var(--border); border-radius: var(--radius-lg, 14px); }
.fbw-header { min-height: 52px; padding: 8px 8px 8px 16px; }
.fbw-title { font-size: 15px; line-height: 20px; }
.fbw-iconbtn { width: 36px; height: 36px; font-size: 16px; color: var(--text-secondary); }
.fbw-body { padding: 12px 16px 16px; }
.fbw-hint { font-size: 13px; line-height: 20px; color: var(--text-secondary); margin-bottom: 12px; }
/* Arten als Segment (Baustein 4): Flaechenstufe ohne Akzent */
.fbw-tags { gap: 4px; margin-bottom: 12px; }
.fbw-tag {
    min-height: 30px; padding: 0 10px; gap: 6px; border-radius: 6px;
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary);
    font-size: 13px; line-height: 20px; font-weight: 400;
}
.fbw-tag i { font-size: 14px; color: var(--text-muted); }
.fbw-tag:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); }
.fbw-tag.active { background: var(--bg-active); border-color: var(--hairline-strong); color: var(--text-primary); font-weight: 500; }
.fbw-tag.active i { color: var(--text-secondary); }
.fbw-textarea { background: var(--bg-elevated); border-color: var(--border-strong); font-size: 14px; line-height: 20px; }
.fbw-route { gap: 4px; color: var(--text-secondary); }
.fbw-route code { color: var(--text-secondary); }
.fbw-flash { font-size: 13px; line-height: 20px; color: var(--text-primary); }
.fbw-flash.success { background: var(--status-green-dim); color: var(--text-primary); }
.fbw-flash.error { background: var(--status-red-dim); color: var(--text-primary); }
.fbw-send { position: relative; }
.fbw-send[disabled]::before {
    content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none;
    border: 2px solid currentColor; border-right-color: transparent; animation: gg-fbw-dreh 800ms linear infinite;
}
.fbw-send[disabled] > i { display: none; }
@keyframes gg-fbw-dreh { to { transform: rotate(360deg); } }
/* Handy (Frage 3): kein schwebender Knopf, Feedback im Mehr-Blatt */
@media (max-width: 768px) {
    .fbw-floating { display: none; }
}

/* ══ Aufgaben-Alarm (static/js/aufgaben_alarm.js, von master 0aff1b3) ═══════════════════════════════════
   Vorher als CSS-String im Skript mit festen Farben; jetzt im Design-System, Selektoren und Markup gleich.
   Rahmen: bald faellig amber 3 px, ueberfaellig rot 5 px, Puls nur ohne "Bewegung reduzieren".
   Leiste: Flaeche bg-elevated (ueberfaellig mit roter Tonflaeche), Rand im Status-Ton, Titel 500,
   Unterzeile 12 secondary, Knoepfe nach Baustein 1 ("Erledigt" als Hauptknopf), Handy 44.
   Ebenen nach 4.6: Leiste 120, Rahmen 119 (unter Chat 150, Blatt 190, Mehr 199, Modal 200, Toast 400). */
#gg-alarm-frame {
    position: fixed; inset: 0; top: var(--gg-alarm-top, 0px); pointer-events: none; z-index: 119;
    border: 0 solid transparent; box-sizing: border-box;
}
#gg-alarm-frame.soon { border-width: 3px; border-color: var(--status-amber); }
#gg-alarm-frame.overdue { border-width: 5px; border-color: var(--status-red); }
#gg-alarm-frame.overdue.pulse { animation: ggAlarmPulse 2s var(--ease) infinite; }
@keyframes ggAlarmPulse {
    0%, 100% { border-color: var(--status-red); box-shadow: inset 0 0 0 0 transparent; }
    50% {
        border-color: color-mix(in srgb, var(--status-red) 35%, transparent);
        box-shadow: inset 0 0 24px 4px color-mix(in srgb, var(--status-red) 35%, transparent);
    }
}
@media (prefers-reduced-motion: reduce) { #gg-alarm-frame.overdue.pulse { animation: none; } }
#gg-alarm-bar {
    position: fixed; left: 50%; transform: translateX(-50%);
    top: calc(var(--gg-alarm-top, 0px) + var(--gg-netz-h) + 12px);
    width: min(640px, calc(100% - 24px)); z-index: 120; box-sizing: border-box;
    display: none; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
    padding: 10px 12px; border-radius: var(--radius-md); box-shadow: var(--shadow-md);
    background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border);
    font-size: var(--fs-14); line-height: var(--lh-14);
}
#gg-alarm-bar.soon { border-color: var(--status-amber); }
#gg-alarm-bar.overdue {
    border-color: var(--status-red);
    background: linear-gradient(var(--status-red-dim), var(--status-red-dim)), var(--bg-elevated);
}
#gg-alarm-bar .gga-text { flex: 1 1 220px; min-width: 0; }
#gg-alarm-bar .gga-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
#gg-alarm-bar .gga-sub { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-secondary); }
#gg-alarm-bar .gga-btns { display: flex; gap: 6px; flex-wrap: wrap; }
#gg-alarm-bar button, #gg-alarm-bar a.gga-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: var(--control-h); padding: 6px 14px; box-sizing: border-box;
    font-family: var(--font-sans); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500;
    color: var(--text-primary); background: var(--bg-elevated);
    border: 1px solid var(--hairline-strong); border-radius: var(--radius);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur-feedback) var(--ease), border-color var(--dur-feedback) var(--ease);
}
#gg-alarm-bar button:hover, #gg-alarm-bar a.gga-btn:hover { background: var(--bg-hover); }
#gg-alarm-bar button:disabled { opacity: .5; cursor: not-allowed; }
#gg-alarm-bar button.gga-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#gg-alarm-bar button.gga-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
#gg-alarm-bar .gga-x { border-color: transparent; background: transparent; min-width: var(--control-h); padding: 0; color: var(--text-secondary); }
#gg-alarm-bar .gga-x i { font-size: 16px; }
@media (min-width: 769px) {
    /* mittig ueber dem Inhalt wie der Toast */
    #gg-alarm-bar { left: calc(50% + var(--sidebar-w) / 2); width: min(640px, calc(100% - var(--sidebar-w) - 24px)); }
    html.sidebar-collapsed #gg-alarm-bar { left: calc(50% + var(--sidebar-w-collapsed) / 2); width: min(640px, calc(100% - var(--sidebar-w-collapsed) - 24px)); }
}
@media (max-width: 768px) {
    /* unter Kopfleiste und Netzleiste (--gg-top-h rechnet Safe-Area bzw. Statusband schon mit) */
    #gg-alarm-bar { top: calc(var(--gg-top-h) + 8px); }
    #gg-alarm-bar button, #gg-alarm-bar a.gga-btn { min-height: var(--control-h-touch); font-size: var(--fs-15); }
    #gg-alarm-bar .gga-x { min-width: var(--control-h-touch); }
    #gg-alarm-bar .gga-x i { font-size: 20px; }
}

/* ══ Tablet und Handy quer (10.3, 4.6): 72er-Schiene mit Menueknopf ══════════════════════════════════
   769 bis 1100 px mit Touch (_nav.html setzt html.gg-schiene und haelt dort sidebar-collapsed, solange das
   Blatt zu ist): Leiste 72 wie eingeklappt, Inhalt immer ab 72. Der Menueknopf oben oeffnet das Blatt 280
   ueber dem Inhalt mit Hintergrund und Scroll-Sperre (toggleNav). Ab 1101 bzw. mit Maus wie bisher. */
.gg-schiene-menue { display: none; }
@media (min-width: 769px) and (max-width: 1100px) and (pointer: coarse) {
    html.gg-schiene body { padding-left: var(--sidebar-w-collapsed); }
    html.gg-schiene .gg-schiene-menue {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: var(--control-h-touch); height: var(--control-h-touch); margin: var(--sp-2) auto 0 14px;
        border: 0; border-radius: var(--radius); background: transparent; color: var(--text-secondary);
        font-size: 20px; cursor: pointer;
    }
    html.gg-schiene .gg-schiene-menue:hover { background: var(--bg-hover); color: var(--text-primary); }
    html.gg-schiene #sidebar-collapse-btn { display: none; }
    /* Schiene: Tippziele 44, Symbol 20 */
    html.gg-schiene .sidebar:not(.drawer-open) .sidebar-item { min-height: var(--control-h-touch); height: var(--control-h-touch); }
    html.gg-schiene .sidebar:not(.drawer-open) .sidebar-item i { font-size: 20px; width: 20px; }
    /* Blatt ueber dem Inhalt */
    html.gg-schiene .sidebar.drawer-open { width: 280px; box-shadow: var(--shadow-overlay); }
    html.gg-schiene .nav-drawer-backdrop.open { display: block !important; background: var(--scrim); }
    html.gg-schiene .sidebar.drawer-open .sidebar-item { min-height: var(--control-h-touch); height: var(--control-h-touch); }
    /* Was mit dem Blatt mitwandert, bleibt an der Schiene */
    html.gg-schiene #gg-toast-wrap { left: calc(50% + var(--sidebar-w-collapsed) / 2); }
    html.gg-schiene .gg-netzleiste { left: var(--sidebar-w-collapsed); }
    html.gg-schiene #gg-alarm-bar { left: calc(50% + var(--sidebar-w-collapsed) / 2); width: min(640px, calc(100% - var(--sidebar-w-collapsed) - 24px)); }
}

/* ══ Preiskalkulator: Seitenstufe (konzept/seiten-laden.json pricing.html, Stufe 7) ═════════════════════
   Nur Darstellung. calc() setzt weiter rot/gelb/gruen bzw. pk-c-* per className; umgefaerbt wird hier:
   Ampelfarbe nur im 6-px-Punkt und im Statuswort (6.9, 6.10), Zahlen und Flaechen neutral.
   Ab 1100 zwei Spalten mit klebendem Ergebnis rechts, darunter eine Spalte in heutiger Reihenfolge. */
.pk-wrap .pk-card-title {
    margin: 0 0 var(--sp-3); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500;
    color: var(--text-secondary); letter-spacing: 0; text-transform: none;
}
/* Start: Shop und "Produkt hinzufuegen" links nebeneinander, 36 hoch; Stand-Zeile darunter */
.pk-wrap .pk-start { grid-template-columns: minmax(0, 320px) auto; justify-content: start; align-items: end; }
.pk-wrap .pk-start-knoepfe { justify-content: flex-start; }
.pk-wrap .pk-start .pk-input { min-height: var(--control-h); padding: 6px 40px 6px 12px; font-size: var(--fs-14); line-height: var(--lh-14); }
.pk-wrap .pk-btn-add, .pk-wrap .pk-btn-sf { min-height: var(--control-h); padding: 6px 14px; font-size: var(--fs-13); line-height: var(--lh-13); }
.pk-wrap .pk-stand { margin-top: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary); }
.pk-wrap .pk-stand.gg-stand { display: flex; flex-wrap: nowrap; align-items: flex-start; white-space: normal; }
.pk-wrap .pk-stand.gg-stand::before { margin-top: 7px; }   /* Punkt auf Hoehe der ersten Zeile, Text bricht daneben um */
/* Positionen */
.pk-wrap .pk-pos-field label { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 500; color: var(--text-secondary); }
.pk-wrap .pk-pos-angebot label { color: var(--text-secondary); font-weight: 500; }
.pk-wrap .pk-cell-in.lg { border-color: var(--border); }
.pk-wrap .pk-cell-in.sm { color: var(--text-primary); }
.pk-wrap .pk-pos-meta { font-family: var(--font-mono); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-secondary); }
.pk-wrap .pk-pos-rabatt { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary); min-height: 20px; }
.pk-wrap .pk-pos-rabatt.pk-c-rot { color: var(--status-red); }
.pk-wrap .pk-pos { transition: background-color var(--dur-feedback) var(--ease), border-color var(--dur-feedback) var(--ease); }
.pk-wrap .pk-pos-neu { background: var(--bg-active); border-color: var(--border-strong); box-shadow: none; }
.pk-wrap .pk-row-del { width: var(--control-h); height: var(--control-h); color: var(--text-secondary); background: transparent; border-color: transparent; }
.pk-wrap .pk-row-del:hover, .pk-wrap .pk-row-del:focus-visible { color: var(--status-red); background: var(--status-red-dim); border-color: transparent; }
.pk-wrap #pk-add-weiter { background: var(--bg-elevated); border-color: var(--hairline-strong); color: var(--text-primary); box-shadow: none; }
.pk-wrap #pk-add-weiter i { color: var(--text-secondary); }
.pk-wrap #pk-add-weiter:hover { background: var(--bg-hover); }
.pk-wrap .pk-leer.gg-zustand { border: 1px dashed var(--border); border-radius: var(--radius-sm); }
/* Lieferart: Segment (Baustein 4), aktiv als bg-active ohne Akzent */
.pk-wrap .pk-seg { max-width: 480px; }
.pk-wrap .pk-seg:not(:has(.pk-seg-btn)) { display: none; }
.pk-wrap .pk-card:has(> #pk-lieferart:not(:has(.pk-seg-btn))) { display: none; }   /* ohne Regeln: keine leere Karte */
.pk-wrap .pk-seg-btn { color: var(--text-secondary); transition: background-color var(--dur-feedback) var(--ease), color var(--dur-feedback) var(--ease); }
.pk-wrap .pk-seg-btn.on { background: var(--bg-active); color: var(--text-primary); box-shadow: none; }
.pk-wrap .pk-seg-btn small { opacity: 1; color: var(--text-secondary); }
/* Ergebnis: neutrale Karte, Status oben als Punkt plus Wort, Marge Leitzahl 32/40, Deckungsbeitrag 24 */
.pk-wrap #resBox.pk-result {
    text-align: left; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--sp-5);
}
.pk-wrap .pk-erg-status { display: flex; align-items: center; gap: var(--sp-2); }
.pk-wrap #resDot.pk-dot, .pk-kurzzeile .pk-dot { width: 6px; height: 6px; margin: 0; flex: none; }
.pk-wrap #resStat.pk-status { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500; }
.pk-wrap .pk-erg-zahlen { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-8); margin-top: var(--sp-3); }
.pk-wrap .pk-erg-l { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-secondary); }
.pk-wrap #resPct.pk-pct {
    font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 500; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.pk-wrap #resAmt.pk-amt {
    margin: 0; opacity: 1; font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 500;
    color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.pk-wrap .pk-tip { background: var(--bg-elevated); border-color: var(--border-subtle); }
.pk-wrap .pk-tip-d { color: var(--text-secondary); }
/* Preisgrenzen: neutrale Zeilen mit 6-px-Punkt, Werte Mono rechts mit Cent, Abstand zur UVP 12 muted */
.pk-wrap .pk-uvp-zeile { padding: 8px 0; font-size: var(--fs-14); line-height: var(--lh-14); }
.pk-wrap .pk-uvp-zeile + .pk-corridor { margin-top: var(--sp-2); }
.pk-wrap .pk-corridor {
    align-items: flex-start; margin: 0; padding: 10px 0; background: none; border: 0; border-top: 1px solid var(--border-subtle);
    border-radius: 0;
}
.pk-wrap .pk-corridor-name { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-14); line-height: var(--lh-14); }
.pk-wrap .pk-corridor-name::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--text-muted); }
.pk-wrap .pk-corridor.rot .pk-corridor-name::before { background: var(--status-red); }
.pk-wrap .pk-corridor.gelb .pk-corridor-name::before { background: var(--status-amber); }
.pk-wrap .pk-corridor.gruen .pk-corridor-name::before { background: var(--status-green); }
.pk-wrap .pk-corridor :is(.pk-c-rot, .pk-c-gelb, .pk-c-gruen) { color: var(--text-primary); }
.pk-wrap .pk-corridor-val { font-family: var(--font-mono); font-size: var(--fs-13); line-height: var(--lh-13); text-align: right; color: var(--text-primary); }
.pk-wrap .pk-corridor-val small { font-family: var(--font-sans); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 400; color: var(--text-muted); opacity: 1; }
/* Detail-Kalkulation (Baustein 21) */
.pk-wrap .pk-summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--control-h);
    list-style: none; cursor: pointer; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 500; color: var(--text-secondary);
}
.pk-wrap .pk-summary::-webkit-details-marker { display: none; }
.pk-wrap .pk-summary-zu { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: 400; color: var(--text-secondary); }
.pk-wrap .pk-summary-ausblenden { display: none; }
.pk-wrap .pk-details[open] .pk-summary-anzeigen { display: none; }
.pk-wrap .pk-details[open] .pk-summary-ausblenden { display: inline; }
.pk-wrap .pk-summary i { font-size: 16px; transition: transform var(--dur-feedback) var(--ease); }
.pk-wrap .pk-details[open] .pk-summary i { transform: rotate(180deg); }
.pk-wrap .pk-detail-inhalt { margin-top: var(--sp-3); }
.pk-wrap .pk-detail-sec { color: var(--text-secondary); }
.pk-wrap .pk-detail-n { color: var(--text-secondary); }
.pk-wrap .pk-detail-db { font-weight: 500; }
.pk-wrap .pk-detail-v.grn, .pk-wrap .pk-detail-v.rd { color: var(--text-primary); }   /* keine Zahl in Statusfarbe (6.9) */
/* Platzhalter, solange kein Ergebnis steht (nur CSS) */
.pk-erg-leer { display: none; }
.pk-wrap #ergSec.pk-hidden + .pk-erg-leer {
    display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); padding: var(--sp-5);
    border: 1px dashed var(--border); border-radius: var(--radius);
    font-size: var(--fs-13); line-height: var(--lh-13); color: var(--text-secondary);
}
.pk-wrap .pk-erg-leer i { font-size: 20px; color: var(--text-muted); }
.pk-wrap.pk-ohne-regeln #ergSec.pk-hidden + .pk-erg-leer { display: none; }
/* So wird gerechnet: 12/16 secondary, Legende mit Woertern */
.pk-sowird { margin: var(--sp-2) 0 var(--sp-6); }
.pk-sowird-text, .pk-regeln { margin: 0 0 var(--sp-2); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-secondary); }
.pk-wrap .pk-sowird .pk-legend {
    justify-content: flex-start; gap: var(--sp-1) var(--sp-4); padding: 0; margin: 0 0 var(--sp-2);
    font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-secondary);
}
.pk-wrap .pk-legend-dot { width: 6px; height: 6px; flex: none; }
.pk-legend-dot.rot { background: var(--status-red); }
.pk-legend-dot.gelb { background: var(--status-amber); }
.pk-legend-dot.gruen { background: var(--status-green); }
/* Kurzzeile (Handy, Baustein 20) */
.pk-kurzzeile[hidden] { display: none !important; }
.pk-kurz-knopf {
    flex: 1 1 auto; display: flex; align-items: center; gap: var(--sp-2); min-height: var(--control-h-touch-lg);
    padding: 0 var(--sp-4); border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated);
    color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-16); line-height: 24px; font-weight: 500;
    text-align: left; cursor: pointer;
}
.pk-kurz-text { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.pk-kurz-knopf i { font-size: 20px; color: var(--text-secondary); }
@media (min-width: 769px) { .pk-kurzzeile { display: none !important; } }
@media (max-width: 768px) {
    body.pk-gesperrt .pk-kurzzeile, body:has(#pk-rows :focus) .pk-kurzzeile { display: none; }
    .pk-wrap .pk-start { grid-template-columns: minmax(0, 1fr); }
    .pk-wrap .pk-start .pk-input { min-height: var(--control-h-touch); font-size: 16px; }
    .pk-wrap .pk-start .pk-btn-add { width: 100%; min-height: var(--control-h-touch-lg); font-size: var(--fs-16); }
    .pk-wrap .pk-btn-add, .pk-wrap .pk-btn-sf, .pk-wrap #pk-add-row { min-height: var(--control-h-touch); font-size: var(--fs-15); }
    .pk-wrap .pk-pos-head { flex-wrap: wrap; }
    .pk-wrap .pk-pos-cat { order: 3; flex: 1 1 100%; min-height: var(--control-h-touch); font-size: 16px; }
    .pk-wrap .pk-pos-body { flex-wrap: wrap; gap: var(--sp-3); }
    .pk-wrap .pk-pos-uvp, .pk-wrap .pk-pos-angebot { flex: 1 1 0; min-width: 0; }
    .pk-wrap .pk-cell-in, .pk-wrap .pk-cell-in.sm { width: 100%; min-height: var(--control-h-touch); font-size: 16px; }
    .pk-wrap .pk-pos-gratis { min-height: var(--control-h-touch); padding-bottom: 0; font-size: var(--fs-15); }
    .pk-wrap .pk-row-del { width: var(--control-h-touch); height: var(--control-h-touch); }
    .pk-wrap .pk-summary { min-height: var(--control-h-touch); font-size: var(--fs-15); }
}
@media (min-width: 1100px) {
    .pk-wrap {
        max-width: 1200px; display: grid; grid-template-columns: minmax(0, 1fr) 360px;
        grid-template-rows: repeat(6, auto) 1fr; column-gap: var(--sp-5); align-items: start;
    }
    .pk-wrap > * { grid-column: 1; min-width: 0; }
    .pk-wrap > #ergSec, .pk-wrap > .pk-erg-leer { grid-column: 2; grid-row: 1 / 8; position: sticky; top: var(--sp-4); }
}

/* Chat-Widget am Handy: Titel und "Alle Gespräche" einzeilig (anfragen/dialoge-chat.md 6); bis 400 px nur das
   Symbol, der Name bleibt in aria-label und title */
.chat-widget-title > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chat-widget-full { white-space: nowrap; }
@media (max-width: 400px) {
    .chat-widget-full-text { display: none; }
    .chat-widget-full { width: 44px; padding: 0; justify-content: center; }
}


/* ================================================================
   KNOEPFE v2 (Daniel 13.11.2026: "Knoepfe B"), Vorschlag aus ui-waechter/vorschlaege/2026-11-13 (unslop)
   Stufen: Haupt = Akzent gefuellt | Standard = Akzent getoent (zarte Flaeche, Akzent-Schrift) |
   Leise = nur Text | Gefahr = Rot getoent | Gesperrt = neutral grau. Segmente als eine Schiene.
   ================================================================ */
/* Gesperrt: neutral grau statt blasser Akzent. Blau heisst immer "das ist der naechste Schritt, und er geht". */
html[data-theme] .btn:disabled, html[data-theme] .btn[disabled], html[data-theme] .btn.is-disabled,
html[data-theme] .btn-primary:disabled, html[data-theme] .btn-create:disabled, html[data-theme] .btn-download:disabled {
    opacity: 1; background: var(--bg-hover); border-color: transparent; color: var(--text-muted); box-shadow: none; cursor: not-allowed;
}
html[data-theme] .btn:disabled i, html[data-theme] .btn-primary:disabled i { color: var(--text-muted); }
/* Leise: nur Text, Icon gleich hell wie der Text; Flaeche erst beim Zeigen */
html[data-theme] .btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); box-shadow: none; }
html[data-theme] .btn-ghost i { color: var(--text-secondary); }
html[data-theme] .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
/* Segment: eine Schiene, die Auswahl ist eine erhabene Kachel (nicht dieselbe graue Flaeche wie ein Knopf) */
.routes-mode-toggle, .bh-segmented, .kn-segmented, .pk-seg, .gg-segment, .mb-seg, .beg-seg {
    display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-hover); border: 0 !important; border-radius: 10px;
}
.routes-mode-btn, .bh-seg-btn, .kn-seg-btn, .pk-seg-btn, .mb-seg button, .beg-seg-btn {
    border: 0 !important; background: transparent !important; color: var(--text-secondary) !important; border-radius: 7px !important; box-shadow: none !important;
}
.routes-mode-btn.active, .routes-mode-btn[aria-pressed="true"], .bh-seg-btn.active, .kn-seg-btn.active, .pk-seg-btn.active, .mb-seg button.active, .beg-seg-btn.active {
    background: var(--bg-surface) !important; color: var(--text-primary) !important; box-shadow: 0 1px 2px rgba(24,24,27,.12), 0 0 0 1px rgba(24,24,27,.05) !important;
}
html[data-theme="dark"] .routes-mode-btn.active, html[data-theme="dark"] .routes-mode-btn[aria-pressed="true"] { background: #2A2D3D !important; box-shadow: none !important; }

/* Standard getoent (Variante B) */
html[data-theme="light"] .btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger):not(.btn-create):not(:disabled),
html[data-theme="light"] .btn-outline:not(:disabled), html[data-theme="light"] .btn-download:not(:disabled) {
    background: rgba(30,64,175,.08); border: 1px solid transparent; color: #1E40AF; box-shadow: none;
}
html[data-theme="light"] .btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger):not(.btn-create):not(:disabled) i { color: #1E40AF; }
html[data-theme="light"] .btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger):not(.btn-create):not(:disabled):hover { background: rgba(30,64,175,.14); }
html[data-theme="dark"] .btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger):not(.btn-create):not(:disabled),
html[data-theme="dark"] .btn-outline:not(:disabled), html[data-theme="dark"] .btn-download:not(:disabled) {
    background: rgba(138,166,248,.13); border: 1px solid transparent; color: #AFC2FA; box-shadow: none;
}
html[data-theme="dark"] .btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger):not(.btn-create):not(:disabled) i { color: #AFC2FA; }
/* Gefahr getoent: rote Schrift auf zartem Rot (gefuellt nur im Bestaetigungsdialog) */
html[data-theme] .btn-danger:not(:disabled) { background: var(--status-red-dim); border-color: transparent; color: var(--status-red); }

/* ── Profilbild (seit 13.11.2026, /me/profil, Alembic 0056) ──────────────────────────────────
   Avatare mit Bild (GG.avatar / GG.avatarSetzen setzen .gg-hat-foto): das Bild fuellt den Kreis, ohne Bild
   bleiben die Initialen wie bisher. .gg-avatar-xl = grosser Avatar auf der Profilseite. */
.task-avatar.gg-hat-foto, .sidebar-user-avatar.gg-hat-foto, .gg-avatar-xl.gg-hat-foto, .am-avatar.gg-hat-foto {
    overflow: hidden; padding: 0; background: var(--bg-elevated);
}
.gg-avatar-bild { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.task-avatar .gg-avatar-bild { pointer-events: none; }
.gg-avatar-xl {
    width: 128px; height: 128px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-dim); color: var(--accent-ink);
    border: 1px solid var(--hairline-strong);
    font-size: 40px; line-height: 1; font-weight: 500; letter-spacing: .02em;
}


/* ══ Mitteilungen-Pflicht (static/js/mitteilungen_pflicht.js, 13.11.2026) ════════════════════════════
   Sperrbild, solange auf dem Geraet keine Mitteilungen an sind (Daniel: "Mitteilungen muessen
   zwangslaeufig immer eingeschaltet sein"). Nicht wegklickbar, Seite darunter inert. Karte nach
   Baustein Panel/Dialog, Titel 15/20, Text 14/20 secondary, Knopf nach Baustein 1, Handy 44.
   Ebene --z-pflicht 300: ueber Chat/Blatt/Modal, unter Toast (Update-Hinweis bleibt bedienbar). */
.gg-pflicht {
    position: fixed; inset: 0; z-index: var(--z-pflicht);
    display: flex; align-items: center; justify-content: center;
    padding: max(var(--sp-4), env(safe-area-inset-top)) var(--sp-4) max(var(--sp-4), env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-root) 92%, transparent);
    overflow-y: auto; overscroll-behavior: contain;
}
html.gg-pflicht-offen, html.gg-pflicht-offen body { overflow: hidden; }
.gg-pflicht-karte {
    width: 100%; max-width: 440px; margin: auto;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay); padding: var(--sp-6) var(--sp-5) var(--sp-5);
    color: var(--text-primary);
}
.gg-pflicht-icon {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--bg-hover); color: var(--text-secondary); font-size: 20px; margin-bottom: var(--sp-3);
}
.gg-pflicht-titel { margin: 0 0 var(--sp-2); font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; }
.gg-pflicht-text { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--text-secondary); }
.gg-pflicht-text p { margin: 0 0 var(--sp-2); }
.gg-pflicht-text strong { color: var(--text-primary); font-weight: 500; }
.gg-pflicht-schritte { margin: var(--sp-2) 0 var(--sp-2); padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); }
.gg-pflicht-meldung { font-size: 13px; line-height: 18px; color: var(--text-secondary); margin-top: var(--sp-2); }
.gg-pflicht-meldung:empty { display: none; }
.gg-pflicht-technik { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.gg-pflicht-knoepfe { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.gg-pflicht-knoepfe:empty { display: none; }
.gg-pflicht-knoepfe .btn { width: 100%; justify-content: center; min-height: var(--control-h-touch); }
.gg-pflicht-abmelden {
    display: block; text-align: center; margin-top: var(--sp-3); padding: var(--sp-2);
    font-size: 13px; color: var(--text-muted); text-decoration: none;
}
.gg-pflicht-abmelden:hover { color: var(--text-secondary); text-decoration: underline; }
@media print { .gg-pflicht { display: none; } }