/* Liquid design (26.10.2026, second pass after the Bäse CRM prototype): an optional look for the internal CRM, switched
   in the sidebar ("Design: Klassisch / Liquid", html.liquid, stored per device). The glass needs colour behind it: a mesh
   of four soft colour fields (blue, violet, green, warm) on a cool base. Surfaces turn translucent through the colour
   tokens (--card, --surface, --surface-2, --border), so cards, columns and tables become glass without touching the
   classic rules; the chrome (top bar, segment switch, columns) blurs and saturates what lies behind it (24px / 180 %),
   panel, dialogs and menus more (36px / 200 %), all with a bright top edge. Text keeps its full colour, nothing lies
   over the content. The sidebar stays solid dark as in the prototype.
   Corners: variant A (default, Yuriy 26.10.2026 "minimal") 6px surfaces, 4px cards and buttons; variant B (html.lq-rund)
   like the prototype: 18px surfaces, 12px cards, 22px dialogs, pill buttons.
   Without backdrop-filter, with reduced transparency or more contrast everything is solid again.
   Customer pages (contract, portal, signature, PDFs) do not load this file. */

html.liquid body {
    --lq-blur: blur(24px) saturate(180%);
    --lq-blur-stark: blur(36px) saturate(200%);
    --lq-glas: rgba(255, 255, 255, .56);
    --lq-glas-stark: rgba(255, 255, 255, .82);
    --lq-kante: rgba(255, 255, 255, .8);
    --lq-linie: rgba(23, 37, 64, .08);
    --lq-hi: rgba(255, 255, 255, .95);
    --lq-hover: rgba(255, 255, 255, .55);
    --lq-schatten: 0 1px 1px rgba(16, 24, 40, .04), 0 14px 36px -14px rgba(16, 24, 40, .2);
    --lq-grund: #e6ebf2;
    --lq-m1: rgba(25, 94, 191, .20);
    --lq-m2: rgba(19, 137, 106, .12);
    --lq-m3: rgba(138, 107, 196, .15);
    --lq-m4: rgba(194, 115, 36, .09);
    --lq-r-flaeche: 6px;
    --lq-r-karte: 4px;
    --lq-r-dialog: 6px;
    --lq-r-knopf: 4px;
    /* the classic colour tokens turn to glass */
    --card: var(--lq-glas-stark);
    --surface: var(--lq-glas);
    --surface-2: var(--lq-hover);
    --border: var(--lq-linie);
    --bg: transparent;
}
html.liquid.lq-rund body { --lq-r-flaeche: 18px; --lq-r-karte: 12px; --lq-r-dialog: 22px; --lq-r-knopf: 999px; }
/* Stronger colour mesh (html.lq-stark): roughly double the colour, a cooler base */
html.liquid.lq-stark body { --lq-grund: #dfe5ee; --lq-m1: rgba(25, 94, 191, .36); --lq-m3: rgba(138, 107, 196, .28); --lq-m2: rgba(19, 137, 106, .22); --lq-m4: rgba(194, 115, 36, .16); }
html.liquid.lq-stark body.dark-mode { --lq-grund: #141518; --lq-m1: rgba(77, 143, 230, .34); --lq-m3: rgba(148, 118, 214, .26); --lq-m2: rgba(34, 160, 122, .2); --lq-m4: rgba(200, 123, 56, .13); }
html.liquid body.dark-mode {
    --lq-glas: rgba(44, 46, 50, .55);
    --lq-glas-stark: rgba(58, 60, 65, .88);
    --lq-kante: rgba(255, 255, 255, .09);
    --lq-linie: rgba(255, 255, 255, .08);
    --lq-hi: rgba(255, 255, 255, .08);
    --lq-hover: rgba(255, 255, 255, .05);
    --lq-schatten: 0 1px 1px rgba(0, 0, 0, .3), 0 18px 44px -14px rgba(0, 0, 0, .65);
    --lq-grund: #17181b;
    --lq-m1: rgba(77, 143, 230, .20);
    --lq-m2: rgba(34, 160, 122, .11);
    --lq-m3: rgba(148, 118, 214, .15);
    --lq-m4: rgba(200, 123, 56, .07);
}

/* Colour mesh behind everything */
html.liquid body {
    background-color: var(--lq-grund) !important;
    background-image:
        radial-gradient(60% 55% at 6% 0%, var(--lq-m1), transparent 70%),
        radial-gradient(50% 50% at 100% 6%, var(--lq-m3), transparent 70%),
        radial-gradient(55% 55% at 72% 100%, var(--lq-m2), transparent 70%),
        radial-gradient(40% 45% at 0% 100%, var(--lq-m4), transparent 70%) !important;
    background-attachment: fixed !important;
}
html.liquid .main, html.liquid .view, html.liquid .view.active, html.liquid #pf-leiste { background: transparent !important; }

/* Glass surfaces with blur: top bar, segment switch, board columns, revenue bar, account menu */
html.liquid .topbar,
html.liquid .pf-segmente,
html.liquid .kanban-col,
html.liquid .pf-col,
html.liquid .revenue-pipeline .rev-stage-pill,
html.liquid .account-actions {
    background: var(--lq-glas) !important;
    -webkit-backdrop-filter: var(--lq-blur) !important;
    backdrop-filter: var(--lq-blur) !important;
    border: 1px solid var(--lq-kante) !important;
    box-shadow: inset 0 1px 0 var(--lq-hi), var(--lq-schatten) !important;
}
html.liquid .topbar { border-width: 0 0 1px !important; border-bottom-color: var(--lq-linie) !important; box-shadow: inset 0 1px 0 var(--lq-hi) !important; border-radius: 0 !important; }
html.liquid .kanban-col, html.liquid .pf-col, html.liquid .revenue-pipeline .rev-stage-pill { border-radius: var(--lq-r-flaeche) !important; }
html.liquid .kanban-col, html.liquid .pf-col { box-shadow: inset 0 1px 0 var(--lq-hi) !important; }
/* Revenue tiles: flush with the board columns and 16px above them (Yuriy 26.10.2026: the tiles touched the columns) */
html.liquid .revenue-pipeline { padding: 0 0 16px !important; }
@media (max-width: 767px) { html.liquid .revenue-pipeline { padding: 0 4px 16px !important; } }

/* Panel, dialogs, menus: denser glass, stronger blur */
html.liquid .pf-panel, html.liquid .pf-menue, html.liquid .modal, html.liquid .crm-confirm > div {
    background: var(--lq-glas-stark) !important;
    -webkit-backdrop-filter: var(--lq-blur-stark) !important;
    backdrop-filter: var(--lq-blur-stark) !important;
    border-color: var(--lq-kante) !important;
    box-shadow: inset 0 1px 0 var(--lq-hi), 0 12px 40px rgba(0, 0, 0, .15) !important;
}
html.liquid .modal, html.liquid .crm-confirm > div, html.liquid .pf-menue { border-radius: var(--lq-r-dialog) !important; }
html.liquid .pf-panel { border-left: 1px solid var(--lq-kante) !important; }
html.liquid .crm-confirm > div { --card: transparent; border: 1px solid var(--lq-kante); }
html.liquid .modal .modal-header, html.liquid .modal .modal-body, html.liquid .modal .modal-footer { background: transparent !important; }
html.liquid .modal-overlay.open, html.liquid .crm-confirm { -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2); }

/* Cards: almost opaque glass with the light edge, no blur (there can be many) */
html.liquid .kanban-card, html.liquid .pf-card, html.liquid .pf-chance {
    background: var(--lq-glas-stark) !important;
    border-color: var(--lq-kante) !important;
    border-radius: var(--lq-r-karte) !important;
    box-shadow: inset 0 1px 0 var(--lq-hi), 0 1px 2px var(--lq-linie) !important;
}
/* Content cards of the other views (dashboard, finance) follow the tokens; their corners follow the variant */
html.liquid .cc-karte, html.liquid .cc-kpis, html.liquid .dash-card { border-radius: var(--lq-r-flaeche) !important; border-color: var(--lq-kante) !important; box-shadow: inset 0 1px 0 var(--lq-hi), var(--lq-schatten) !important; }

/* Segment switch, buttons, search: brighter glass */
html.liquid .pf-segment.aktiv {
    background: var(--lq-glas-stark) !important;
    box-shadow: inset 0 1px 0 var(--lq-hi), 0 1px 3px var(--lq-linie), 0 4px 12px -4px var(--lq-linie) !important;
}
html.liquid .pf-segmente, html.liquid .pf-segment { border-radius: var(--lq-r-knopf) !important; }
html.liquid .pf-ddknopf, html.liquid .pf-iconbtn, html.liquid .btn-flat:not(.btn-flat-primary), html.liquid .topbar input[type="search"], html.liquid .topbar .search-input, html.liquid .topbar-filters summary {
    background: var(--lq-glas-stark) !important;
    border-color: var(--lq-linie) !important;
    box-shadow: inset 0 1px 0 var(--lq-hi) !important;
    border-radius: var(--lq-r-knopf) !important;
}

/* Sidebar: solid dark as in the prototype; the active item gets the accent at 18 % with a 30 % edge */
html.liquid .sidebar .nav-item.active {
    background: color-mix(in srgb, #195ebf 18%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #195ebf 30%, transparent) !important;
}

/* Fallbacks: no backdrop-filter, reduced transparency, more contrast -> solid surfaces again */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.liquid body { --lq-glas: #f7f9fc; --lq-glas-stark: #ffffff; --lq-hover: #eef1f6; }
    html.liquid body.dark-mode { --lq-glas: #26282c; --lq-glas-stark: #2f3135; --lq-hover: #2a2c30; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    html.liquid body { --lq-glas: #f7f9fc; --lq-glas-stark: #ffffff; --lq-hover: #eef1f6; --lq-kante: #c4ccd9; --lq-linie: #d6dce5; background-image: none !important; }
    html.liquid body.dark-mode { --lq-glas: #26282c; --lq-glas-stark: #2f3135; --lq-hover: #2a2c30; --lq-kante: #55585e; --lq-linie: #3e4044; }
    html.liquid .topbar, html.liquid .pf-segmente, html.liquid .kanban-col, html.liquid .pf-col, html.liquid .revenue-pipeline .rev-stage-pill,
    html.liquid .account-actions, html.liquid .pf-panel, html.liquid .pf-menue, html.liquid .modal, html.liquid .crm-confirm > div,
    html.liquid .modal-overlay.open, html.liquid .crm-confirm { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* The design switch in the sidebar reuses the theme switch look (aria-checked) */

/* ===== v9 (26.10.2026): more of the Bäse prototype. Colours and type, top bar with search pill and theme button,
   one continuous key-figure strip, board columns grouped in phases with a head line and stage codes, cards with a meta
   line and an "überfällig" mark, the 560px detail panel with a stage list, and the Hell/Dunkel/System switch.
   Corners stay variant A. Everything is scoped to html.liquid: the classic design does not change. ===== */

/* Bäse colours: light ink and lines, a neutral graphite dark mode instead of the classic navy */
html.liquid body {
    --text: #1a2130;
    --muted: #475163;
    --lq-faint: #5f6979;
    --border-strong: #c4ccd9;
    --lq-accent: #195ebf;
    --lq-accent-soft: #e6eefb;
    --lq-bad: #b42318;
    --lq-tint: #ffffff;
    --lq-sb: #101211;
}
html.liquid body.dark-mode {
    --text: #f1f1f2;
    --muted: #b9bbc0;
    --lq-faint: #9c9fa6;
    --border-strong: #55585e;
    --primary: #4d8fe6;
    --primary-dark: #67a1ee;
    --primary-light: #25344a;
    --lq-accent: #4d8fe6;
    --lq-accent-soft: #25344a;
    --lq-bad: #f06a61;
    --lq-tint: #2a2b2d;
    --lq-sb: #161718;
}
html.liquid .sidebar { background: var(--lq-sb) !important; }

/* Top bar: glass, title, search as a pill, theme button on the right */
html.liquid .topbar { min-height: 65px !important; }
@media (min-width: 768px) { html.liquid .topbar .search-wrap input { width: min(420px, 34vw) !important; } }

html.liquid .topbar .search-wrap input {
    min-height: 38px !important; font-size: 16px !important;
    padding: 8px 14px 8px 36px !important; border-radius: 999px !important;
    background: var(--lq-glas-stark) !important; border: 1px solid var(--lq-linie) !important;
}
html.liquid .topbar .search-wrap i { left: 14px !important; color: var(--lq-faint); }
@media (min-width: 768px) { html.liquid .topbar .search-wrap input { font-size: 13px !important; } }
.lq-themebtn { display: none; }
html.liquid .lq-themebtn {
    display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; margin-left: auto;
    border: 1px solid var(--lq-linie); border-radius: var(--lq-r-knopf); background: var(--lq-glas-stark);
    box-shadow: inset 0 1px 0 var(--lq-hi); color: var(--text); cursor: pointer;
}
html.liquid .lq-themebtn:hover { border-color: var(--border-strong); }
html.liquid .lq-themebtn:focus-visible { outline: 2px solid var(--lq-accent); outline-offset: 2px; }
html.liquid .lq-themebtn svg { width: 18px; height: 18px; transition: transform .5s cubic-bezier(.3, 1.35, .5, 1); }
html.liquid .lq-themebtn .lq-mond { display: none; }
html.liquid body.dark-mode .lq-themebtn .lq-sonne { display: none; }
html.liquid body.dark-mode .lq-themebtn .lq-mond { display: block; transform: rotate(-18deg); }

/* Key figures: one continuous strip with dividers instead of separate tiles */
html.liquid .revenue-pipeline {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 0 !important;
    padding: 0 !important; margin: 0 0 16px !important; overflow: hidden;
    background: var(--lq-glas) !important; border: 1px solid var(--lq-kante) !important; border-radius: var(--lq-r-flaeche) !important;
    -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur);
    box-shadow: inset 0 1px 0 var(--lq-hi), var(--lq-schatten) !important;
}
html.liquid .revenue-pipeline .rev-stage-pill {
    position: relative; min-width: 0 !important; margin: 0 !important; padding: 18px 22px !important;
    background: transparent !important; border: 0 !important; border-left: 1px solid var(--lq-linie) !important;
    border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.liquid .revenue-pipeline .rev-stage-pill:first-child { border-left: 0 !important; }
html.liquid .revenue-pipeline .rev-stage-name { font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--muted) !important; }
html.liquid .revenue-pipeline .rev-stage-val { font-size: 24px !important; font-weight: 600 !important; letter-spacing: -.02em !important; line-height: 1.15 !important; font-variant-numeric: tabular-nums; color: var(--text) !important; }
html.liquid .revenue-pipeline :is(.rev-stage-weighted, .rev-stage-count) { font-size: 12px !important; color: var(--lq-faint) !important; }
html.liquid .revenue-pipeline .rev-stage-bar { position: absolute; left: 0; bottom: 0; height: 2px !important; margin: 0 !important; border-radius: 0 !important; background: var(--lq-accent) !important; }
@media (max-width: 767px) {
    html.liquid .revenue-pipeline { grid-template-columns: 1fr 1fr !important; margin: 0 4px 16px !important; }
    html.liquid .revenue-pipeline .rev-stage-pill { padding: 14px 16px !important; }
    html.liquid .revenue-pipeline .rev-stage-pill:nth-child(odd) { border-left: 0 !important; }
    html.liquid .revenue-pipeline .rev-stage-pill:nth-child(n+3) { border-top: 1px solid var(--lq-linie) !important; }
    html.liquid .revenue-pipeline .rev-stage-val { font-size: 19px !important; }
}

/* Board: phase groups. crm-liquid.js sets --ph and data-lq-* on every column; the group head is the ::before of
   the column (a coloured 2px line across the group, the label on its first column), so the columns stay direct
   children of the board and drag and drop is untouched. */
html.liquid :is(#kanban-board, .pf-board) { gap: 10px !important; align-items: stretch; }
html.liquid :is(.kanban-col, .pf-col)[data-lq-gruppe] {
    position: relative; margin-top: 30px !important; overflow: visible !important;
    box-shadow: inset 0 3px 0 var(--ph), inset 0 4px 0 var(--lq-hi) !important;
}
html.liquid :is(.kanban-col, .pf-col)[data-lq-erste]:not(:first-child) { margin-left: 12px !important; }
html.liquid :is(.kanban-col, .pf-col)[data-lq-gruppe]::before {
    content: ''; position: absolute; left: 0; right: -10px; top: -30px; height: 22px;
    border-bottom: 2px solid var(--ph); pointer-events: none;
}
html.liquid :is(.kanban-col, .pf-col)[data-lq-letzte]::before { right: 0; }
html.liquid :is(.kanban-col, .pf-col)[data-lq-erste]::before {
    content: attr(data-lq-titel); padding: 0 2px; white-space: nowrap; overflow: visible;
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ph-ink);
    line-height: 20px; z-index: 1;
}
html.liquid :is(.kanban-col, .pf-col)[data-lq-erste]::after {
    content: attr(data-lq-sub); position: absolute; top: -30px; left: var(--lq-sub-x, 0); height: 22px; line-height: 20px;
    font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; pointer-events: none;
}
/* Stage code chip and count in the column head (inserted by crm-liquid.js) */
.lq-code { display: none; }
html.liquid .lq-code {
    display: inline-grid; place-items: center; flex: none; min-width: 24px; height: 20px; padding: 0 5px; margin-right: 8px;
    border-radius: 3px; background: color-mix(in srgb, var(--ph) 13%, var(--lq-tint)); color: var(--ph-ink);
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
html.liquid .kanban-col .col-header, html.liquid .pf-col .pf-colname { font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: -.01em; color: var(--text) !important; }
html.liquid .kanban-col .col-header > span:first-child, html.liquid .pf-col .pf-colname { display: inline-flex; align-items: center; }
html.liquid .kanban-col .col-count { padding: 1px 7px !important; border-radius: 10px !important; background: var(--lq-glas-stark) !important; color: var(--muted) !important; font-size: 11px !important; font-weight: 600 !important; }
html.liquid :is(.kanban-col .col-head, .pf-col .pf-colkopf) { background: transparent !important; border-bottom: 1px solid var(--lq-linie) !important; }

/* Phase colours from the prototype (light / dark keep the same hue) */
html.liquid [data-lq-phase="1"] { --ph: #195ebf; --ph-ink: #195ebf; }
html.liquid [data-lq-phase="2"] { --ph: #0f7488; --ph-ink: #0f7488; }
html.liquid [data-lq-phase="3"] { --ph: #8a4fbf; --ph-ink: #7a43ab; }
html.liquid [data-lq-phase="4"] { --ph: #b5532a; --ph-ink: #a34a25; }
html.liquid [data-lq-phase="5"] { --ph: #2f7d5b; --ph-ink: #2a7052; }
html.liquid [data-lq-phase="parkplatz"] { --ph: #b98a3e; --ph-ink: #92601c; }
html.liquid [data-lq-phase="ende"] { --ph: #98a1b0; --ph-ink: #5f6979; }
html.liquid body.dark-mode [data-lq-phase="1"] { --ph-ink: #6fa2ea; }
html.liquid body.dark-mode [data-lq-phase="2"] { --ph-ink: #4fb3c4; }
html.liquid body.dark-mode [data-lq-phase="3"] { --ph-ink: #b28ae0; }
html.liquid body.dark-mode [data-lq-phase="4"] { --ph-ink: #e0875e; }
html.liquid body.dark-mode [data-lq-phase="5"] { --ph-ink: #5fc093; }
html.liquid body.dark-mode [data-lq-phase="parkplatz"] { --ph-ink: #e3a64e; }
html.liquid body.dark-mode [data-lq-phase="ende"] { --ph-ink: #9c9fa6; }

/* Lead cards: Bäse card type, a meta line with a top rule, the overdue mark */
html.liquid .kanban-card { padding: 12px 14px !important; }
html.liquid .kanban-card .card-company { font-size: 13px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--text) !important; }
html.liquid .kanban-card .card-name { font-size: 12px !important; color: var(--muted) !important; }
html.liquid .kanban-card .card-meta { padding-top: 8px !important; margin-top: 8px !important; border-top: 1px solid var(--lq-linie) !important; font-size: 11px !important; color: var(--muted) !important; }
html.liquid .kanban-card:hover, html.liquid .pf-card:hover { border-color: var(--border-strong) !important; }
html.liquid :is(.kanban-card, .pf-card).lq-stale {
    border-color: color-mix(in srgb, var(--lq-bad) 45%, var(--lq-kante)) !important;
    box-shadow: inset 3px 0 0 var(--lq-bad), 0 1px 2px var(--lq-linie) !important;
}
.lq-stale-note { display: none; }
html.liquid .lq-stale-note {
    display: inline-block; align-self: flex-start; margin: 0 0 6px; padding: 2px 7px; border-radius: 3px;
    background: color-mix(in srgb, var(--lq-bad) 10%, var(--lq-tint)); color: var(--lq-bad); font-size: 11px; font-weight: 600;
}
html.liquid .pf-card .pf-cardmeta { padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--lq-linie); }

/* Detail panel: 560px, stage list as steps */
html.liquid .pf-panel { width: min(560px, 100vw) !important; }
.pfp-stufen { display: none; }
html.liquid .pfp-stufen { display: block; padding: 14px 0 0; margin: 4px 0 6px; border-top: 1px solid var(--lq-linie); }
html.liquid .pfp-stufen h3 { margin: 0 0 8px; }
html.liquid .pfp-stufen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
html.liquid .pfp-stufen button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 3px;
    background: none; font: inherit; font-size: 12.5px; color: var(--muted); text-align: left; cursor: pointer;
}
html.liquid .pfp-stufen button:hover:not(:disabled) { background: var(--lq-glas-stark); color: var(--text); }
html.liquid .pfp-stufen button:disabled { cursor: default; }
html.liquid .pfp-stufen .code { width: 20px; flex: none; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
html.liquid .pfp-stufen .dot { width: 9px; height: 9px; flex: none; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--lq-tint); }
html.liquid .pfp-stufen li.done button { color: var(--text); }
html.liquid .pfp-stufen li.done .dot { background: #1e7a4c; border-color: #1e7a4c; }
html.liquid .pfp-stufen li.current button { background: var(--lq-accent-soft); color: var(--lq-accent); font-weight: 600; }
html.liquid .pfp-stufen li.current .dot { background: var(--lq-accent); border-color: var(--lq-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lq-accent) 20%, transparent); }

/* Theme switch in the sidebar: Hell / Dunkel / System as a segment with a sliding thumb (prototype) */
.lq-themeseg { display: none; }
html.liquid .sidebar-appearance #theme-toggle-btn { display: none !important; }
html.liquid .lq-themeseg {
    position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 8px; padding: 3px;
    border-radius: 6px; background: #ffffff0b; box-shadow: inset 0 0 0 1px #ffffff12, inset 0 1px 2px #00000059;
}
html.liquid .lq-themeseg-thumb {
    position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 4px;
    background: linear-gradient(180deg, #ffffff29, #ffffff14); box-shadow: inset 0 1px #ffffff2e, 0 0 0 1px #ffffff0f, 0 4px 12px -2px #0000008c;
    transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .38s cubic-bezier(.3, 1.35, .5, 1);
}
html.liquid .lq-themeseg button {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px;
    padding: 0 6px; border: 0; border-radius: 4px; background: none; color: #88958d; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
    transition: color .2s ease;
}
html.liquid .lq-themeseg button:hover { color: #ced9d1; }
html.liquid .lq-themeseg button[aria-checked="true"] { color: #f3f5f3; }
html.liquid .lq-themeseg button:focus-visible { outline: 2px solid #8db7f5; outline-offset: 1px; }
html.liquid .lq-themeseg svg { width: 14px; height: 14px; flex: none; transition: transform .5s cubic-bezier(.3, 1.35, .5, 1), color .2s ease; }
html.liquid .lq-themeseg [data-modus="light"][aria-checked="true"] svg { color: #f5c451; transform: rotate(90deg); filter: drop-shadow(0 0 6px rgba(245, 196, 81, .45)); }
html.liquid .lq-themeseg [data-modus="dark"][aria-checked="true"] svg { color: #8db7f5; transform: rotate(-18deg); filter: drop-shadow(0 0 6px rgba(141, 183, 245, .45)); }

/* Appearance tiles in "Profil & Navigation": Hell, Dunkel, System with a mini preview */
.lq-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 0; }
.lq-tile { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 500; text-align: left; cursor: pointer; }
.lq-tile:hover { border-color: var(--border-strong); }
.lq-tile[aria-checked="true"] { border-color: var(--lq-accent, #195ebf); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lq-accent, #195ebf) 13%, transparent); }
.lq-prev { position: relative; display: grid; grid-template-columns: 22% 1fr; height: 64px; overflow: hidden; border-radius: 4px; border: 1px solid #00000014; background: #e9edf3; }
.lq-prev i { display: block; }
.lq-prev .sb { background: #101211; }
.lq-prev .bd { display: flex; flex-direction: column; gap: 5px; padding: 6px; }
.lq-prev .tp { height: 8px; border-radius: 2px; background: #ffffff; }
.lq-prev .rw { display: flex; gap: 5px; flex: 1; }
.lq-prev .c1, .lq-prev .c2 { flex: 1; border-radius: 2px; background: #ffffff; }
.lq-prev.dark { background: #1e1f21; }
.lq-prev.dark .sb { background: #161718; }
.lq-prev.dark :is(.tp, .c1, .c2) { background: #2a2b2d; }
.lq-prev.system { background: linear-gradient(135deg, #e9edf3 50%, #1e1f21 50%); }
.lq-prev.system :is(.tp, .c1) { background: #ffffff; }
.lq-prev.system .c2 { background: #2a2b2d; }
.lq-tile-name { display: flex; align-items: center; gap: 8px; }
.lq-tile-name::before { content: ''; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.lq-tile[aria-checked="true"] .lq-tile-name::before { border: 4px solid var(--lq-accent, #195ebf); }

/* Soft theme change: a circle opens from the click point (crm-liquid.js), no default cross-fade */
html.liquid::view-transition-old(root), html.liquid::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
    html.liquid .lq-themeseg-thumb, html.liquid .lq-themeseg svg, html.liquid .lq-themebtn svg { transition: none; }
}
html.liquid .pf-col[data-lq-gruppe] { border-top: 1px solid var(--lq-kante) !important; }
html.liquid .lq-darstellung { padding: 22px 0; border-bottom: 1px solid var(--border); }
html.liquid .lq-darstellung h3 { margin: 0 0 4px; }
html.liquid .lq-darstellung p { margin: 0; color: var(--muted); font-size: 12.5px; }
@media (max-width: 480px) { html.liquid .lq-tiles { gap: 6px !important; } html.liquid .lq-prev { height: 48px !important; } }
html.liquid .pf-col .pf-colanz { margin-left: 5px; font-weight: 500; color: var(--muted); }
@media (max-width: 767px) { html.liquid .lq-themebtn { display: none; } }

/* Dashboard (Yuriy 26.10.2026: "steht etwas eng, Kategorien nicht gut zu unterscheiden"): every section is its own
   glass panel like the cards of the prototype, with air between them; the fold-outs below share one panel. */
html.liquid .dash-overview { display: flex; flex-direction: column; gap: 16px; }
html.liquid .dash-overview > :is(.dash-heading, .dash-kpis) { margin-bottom: 0 !important; }
html.liquid .dash-overview .app-section,
html.liquid .dash-overview > div:has(> .dash-disclosure),
html.liquid .dash-overview > .dash-disclosure,
html.liquid .dash-overview > .dash-fold {
    margin: 0 !important; padding: 20px 24px !important;
    background: var(--lq-glas) !important; border: 1px solid var(--lq-kante) !important; border-radius: var(--lq-r-flaeche) !important;
    -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur);
    box-shadow: inset 0 1px 0 var(--lq-hi), var(--lq-schatten) !important;
}
html.liquid .dash-overview .dash-columns { gap: 16px !important; margin: 0 !important; }
html.liquid .dash-overview .dash-columns > .app-section { min-width: 0; }
html.liquid .dash-overview .workspace-section-heading { margin-bottom: 14px !important; }
html.liquid .dash-overview .dash-disclosure { border-color: var(--lq-linie) !important; }
html.liquid .dash-overview .dash-disclosure > summary { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 767px) {
    html.liquid .dash-overview { gap: 12px; }
    html.liquid .dash-overview .app-section,
    html.liquid .dash-overview > div:has(> .dash-disclosure),
    html.liquid .dash-overview > .dash-disclosure,
    html.liquid .dash-overview > .dash-fold { padding: 16px !important; }
}
html.liquid .dash-overview > div > .dash-disclosure:first-child, html.liquid .dash-overview > .dash-disclosure { border-top: 0 !important; }

/* Pop-ups undurchsichtig (02.11.2026, Yuriy: „Pop-ups oftmals durchsichtig“). Im Liquid-Design waren --card/--surface
   halbdurchsichtiges Glas (56-88 %); native <dialog>-Fenster (Zugangsdaten-Import, Aufgabe bearbeiten, Ablage, Termine,
   Profil …) hatten dazu nicht einmal Unschärfe, der Hintergrund schien voll durch. Alles, was über der Seite schwebt,
   bekommt jetzt eine feste Fläche; innen gelten dieselben festen Farben. Die Seite selbst bleibt Glas. */
html.liquid body { --lq-pop: #fbfcfe; --lq-pop-2: #f2f5f9; }
html.liquid body.dark-mode { --lq-pop: #2c2e32; --lq-pop-2: #26282b; }
html.liquid :is(dialog, .modal, .crm-confirm > div, .pf-menue, .pfm-menue, .ka-menu, .account-menu, .ap-picker-menu, .pf-dropdown, .pf-panel, .workspace-overlay > div:not(.toast), .tr-overlay > *, .quick-note-overlay > *, .cc-modal, .profile-dialog, .agent-deal) {
    --card: var(--lq-pop);
    --surface: var(--lq-pop);
    --lq-glas-stark: var(--lq-pop);
    --lq-glas: var(--lq-pop-2);
    --lq-hover: color-mix(in srgb, var(--text) 6%, var(--lq-pop));
    background-color: var(--lq-pop) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}