/* Liquidbeam Company OS · Simulation (/company-os/)
   Baut auf site.css auf (Schriften, Farben, Grundstile). Die Firmenfarbe kommt als --brand* vom Skript.
   Keine Inline-Styles: Positionen und Farben setzt das Skript über CSS-Variablen (CSP-konform).
   Farben nur über Tokens: Das helle und das dunkle Design unterscheiden sich allein in den Werten unten.
   Neue Regeln bitte nie mit festen Hellfarben (#fff, Pastelltöne) schreiben, sondern mit diesen Tokens. */

/* ---------- Farb-Tokens (hell) ---------- */
:root {
  --r-1: 4px; --r-2: 6px; --r-3: 8px; --radius: 8px;   /* Ruhiger Stil: Karten, Fenster, Dialoge 8 px, Knöpfe, Felder, Chips 6 px */
  --sheet-2: #fcfbfe; --soft-grey: #eeedf2;
  --glass: 255 255 255; --shade: 36 31 61; --ring: rgba(36, 31, 61, .1);
  --ok-ink: #277a3b; --ok-soft: #e4f4e8; --ok-line: #cfe8d6;
  --bad-ink: #a8381f; --bad-soft: #fcebe7; --bad-line: #f2c5bb;
  --warn-ink: #6e4d00; --warn-soft: #fff3da;
  --info-ink: #1d5bb8; --info-soft: #e8f0fb;
  --violet-ink: #4a359c; --lime-ink: #5a6300; --on-ink: #fff;
  --wall-drop: .07;
  --lift-hi: rgba(255, 255, 255, .95); --lift-lo: rgba(36, 31, 61, .07); --glass-edge: rgba(255, 255, 255, .8);   /* erhabene Flächen: helle Kante oben, dunklere unten */
  --paper: #ffffff; --paper-2: #f4f2f8; --paper-ink: #2a2740; --paper-ink-2: #5c5873; --paper-line: #dcd8e6; --paper-bar: #e4e0ee;
  --paper-mark: #f1f6c9; --paper-cur: #ffe27a; --paper-head: #2f5496; --scan-bg: #8c879c; --scan-paper: #f6f3ea;
}
/* ---------- Farb-Tokens (dunkel) ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121020; --sheet: #1c182c; --sheet-2: #181426;
  --soft: #252038; --soft-2: #2e2847; --soft-3: #3b3459; --soft-grey: #2a2737;
  --ink: #ece9f6; --ink-2: #c3bdd9; --ink-3: #9790b2;
  --line: #2e2943; --line-2: #3e3758;
  --violet: #8f7ae8; --violet-hi: #a896f2;
  --lime-soft: rgba(197, 217, 0, .15);
  --green: #4cb865; --amber: #e0a91a; --red: #e0664f;
  --shadow: 0 0 0 0 transparent;
  --shadow-l: 0 0 0 0 transparent;
  --glass: 30 26 48; --shade: 0 0 0; --ring: rgba(255, 255, 255, .08);
  --ok-ink: #7dd391; --ok-soft: rgba(58, 165, 83, .16); --ok-line: rgba(58, 165, 83, .4);
  --bad-ink: #ff9a85; --bad-soft: rgba(224, 90, 71, .15); --bad-line: rgba(224, 90, 71, .42);
  --warn-ink: #f0c25a; --warn-soft: rgba(215, 154, 0, .15);
  --info-ink: #8db9ff; --info-soft: rgba(58, 138, 230, .16);
  --violet-ink: #b8a8f4; --lime-ink: #d7ea1e; --on-ink: #1c182c;
  --wall-drop: .12;
  --lift-hi: rgba(255, 255, 255, .15); --lift-lo: rgba(0, 0, 0, .4); --glass-edge: rgba(255, 255, 255, .15);
  --scan-bg: #3a3548;   /* Papier bleibt auch im dunklen Design hell, nur der Untergrund des Scans wird dunkler */
}

/* ---------- Seite ---------- */
body.os-page { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); }
.sim-strip { flex: none; height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: .9rem; position: relative; z-index: 2; }
.sim-home { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: none; }
.sim-home .brand-mark { width: 30px; height: 30px; }
.sim-home span { font-size: .95rem; }
.sim-home b { font-weight: 800; }
.sim-note { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.sim-badge { background: var(--lime); color: var(--night); font: 800 .7rem/1 var(--font-body); text-transform: none; padding: 5px 10px; border-radius: var(--r-2); flex: none; }
.sim-text { color: var(--ink-2); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-actions { display: flex; gap: 6px; flex: none; }
.sim-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--sheet); color: var(--ink); font: 600 .82rem/1 var(--font-body); cursor: pointer; }
.sim-btn:hover { border-color: var(--violet); color: var(--violet-hi); }
.sim-btn .ic { width: 15px; height: 15px; }
a.sim-btn { text-decoration: none; }
.sim-btn[hidden] { display: none; }
.sim-main { flex: 1; min-height: 0; position: relative; }

/* ---------- Grundgerüst ---------- */
.os {
  --brand: #5b44b2; --brand-hi: #4a359c; --brand-ink: var(--sheet); --brand-text: #5b44b2; --brand-soft: var(--soft); --brand-soft-2: #e9e3fa; --brand-line: #c8bcef; --brand-glow: rgba(91, 68, 178, .28);
  --bar-h: 54px; --task-h: 68px; --wgw: 340px;
  position: absolute; inset: 0; overflow: hidden; transform: translateZ(0);
  display: grid; grid-template-rows: var(--bar-h) minmax(0, 1fr) var(--task-h); grid-template-columns: minmax(0, 1fr);
  font: 400 15px/1.45 var(--font-body); color: var(--ink); background: var(--bg);
}
:where(.os button) { font-family: inherit; color: inherit; }
.os :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--r-2); }
.os mark { background: var(--lime-soft); color: var(--ink); padding: 0; border-radius: 2px; box-shadow: inset 0 -2px 0 var(--lime); }
.os .s-in:focus-visible, .os .w-in:focus-visible, .os .chat-in:focus-visible { outline: none; }
.os .pre { white-space: pre-wrap; }
.os-loading, .os-noscript { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 12px; padding: 24px; color: var(--ink-2); }
.os.is-ready .os-loading { display: none; }
.os-noscript h1 { font-size: 1.6rem; }

.os-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--bg); }
.wall-drop { display: none; position: absolute; width: 52%; max-width: 820px; right: -8%; bottom: -14%; fill: var(--brand); opacity: var(--wall-drop); }
.wall-name { position: absolute; left: 16px; bottom: calc(var(--task-h) + 10px); text-align: left; color: var(--ink-3); white-space: nowrap; }   /* nur Name und Fassung, klein in der Ecke */
.wall-name span { display: block; font: 700 .82rem/1.3 var(--font-body); }
.wall-name small { display: block; font: 500 .74rem/1.3 var(--font-body); text-transform: none; }

/* ---------- Kopfleiste ---------- */
.os-bar { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: rgb(var(--glass)); border-bottom: 1px solid rgb(var(--shade) / .08); }
.bar-pre { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.bar-pre .bar-drop { width: 30px; height: 26px; fill: var(--lime); }
.bar-pre span { color: var(--ink-3); }
.bar-brand { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border: 0; background: none; border-radius: var(--r-3); cursor: pointer; min-width: 0; text-align: left; }
.bar-brand:hover { background: var(--brand-soft); }
.bar-names { display: flex; flex-direction: column; min-width: 0; }
.bar-name { font-weight: 800; font-size: .95rem; line-height: 1.15; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-os { font-size: .72rem; color: var(--ink-3); font-weight: 600; letter-spacing: .02em; }
.bar-chev { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.bar-search { display: flex; align-items: center; gap: 8px; height: 38px; min-width: 300px; padding: 0 8px 0 14px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: rgb(var(--glass) / .92); color: var(--ink-3); font-size: .9rem; cursor: pointer; margin-left: 8px; }
.bar-search:hover { border-color: var(--brand); color: var(--ink-2); }
.bar-search span { flex: 1; text-align: left; }
.bar-search kbd { font: 600 .72rem/1 var(--font-body); background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; color: var(--ink-3); }
.bar-sp { flex: 1; }
.bar-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-2); border: 0; background: var(--ok-soft); color: var(--ok-ink); font-weight: 700; font-size: .8rem; cursor: pointer; }
.bar-pill .ic { width: 16px; height: 16px; }
.bar-clock { font-weight: 600; font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-user { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--night); color: #fff; font-weight: 800; font-size: .76rem; flex: none; }

/* Logo */
.logo { display: inline-grid; place-items: center; flex: none; border-radius: var(--r-2); overflow: hidden; width: 36px; height: 36px; }
.logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.logo:not(.logo--mono) { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.logo--mono { background: var(--brand); color: var(--brand-ink); font: 800 .9rem/1 var(--font-display); letter-spacing: -.02em; }
.logo--s { width: 34px; height: 34px; border-radius: var(--r-2); }
.logo--m { width: 46px; height: 46px; border-radius: var(--r-3); font-size: 1.05rem; }
.logo--xl { width: 92px; height: 92px; border-radius: var(--r-3); font-size: 2.2rem; margin: 0 auto; box-shadow: none; }
.logo--xl:not(.logo--mono) { padding: 10px; }

/* ---------- Symbole (Kacheln) ---------- */
.tile { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-3); color: var(--t-fg, #fff);
  background: linear-gradient(150deg, var(--t1, #6b54c6), var(--t2, #4a359c)); }
.tile .ic { width: 54%; height: 54%; stroke-width: 2.1; }
.tile--xs { width: 24px; height: 24px; border-radius: var(--r-2); }
.tile--s { width: 28px; height: 28px; border-radius: 8px; }
.tile--m { width: 40px; height: 40px; border-radius: var(--r-3); }
.tile--l { width: 58px; height: 58px; border-radius: var(--r-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.t-suche { --t1: #7b64d6; --t2: #4a359c; }
.t-mail { --t1: #3a8ae6; --t2: #1d5bb8; }
.t-ki, .t-chat { --t1: #3d3275; --t2: #231c45; --t-fg: #c5d900; }
.t-angebote { --t1: #f39a4f; --t2: #d9661f; }
.t-projekte { --t1: #21ad9d; --t2: #0f7c80; }
.t-besprechung { --t1: #e8678b; --t2: #b0306f; }
.t-sprache { --t1: #ef6b57; --t2: #c8452e; }
.t-wissen { --t1: #eab42c; --t2: #c98a00; }
.t-ablaeufe { --t1: #4cb865; --t2: #2f8a43; }
.t-ersparnis { --t1: #d7ea1e; --t2: #a9bb00; --t-fg: #2b2352; }
.t-datenschutz { --t1: #27a874; --t2: #157a52; }
.t-store { --t1: #9a8fc2; --t2: #6c6784; }
.t-einstellungen { --t1: #8b93a3; --t2: #5a6170; }
.t-soon { --t1: #e4dcf7; --t2: #cfc4ee; --t-fg: #5b44b2; }
.t-buchhaltung { --t1: #22b8cf; --t2: #0b7285; }
.t-kunden { --t1: #d0925f; --t2: #9a5c33; }
.t-freigaben { --t1: #c04fdb; --t2: #862e9c; }
.t-verbindungen { --t1: #6a85fb; --t2: #364fc7; }
.t-verbesserungen { --t1: #24405e; --t2: #0f2338; --t-fg: #fcc419; }

/* ---------- Schreibtisch ---------- */
.os-desk { position: relative; z-index: 1; min-height: 0; }
.os-icons { position: absolute; left: 10px; top: 12px; bottom: 12px; right: calc(var(--wgw) + 30px); overflow: auto; scrollbar-width: thin; }
.d-icon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 102px; height: 106px; padding: 8px 4px 4px; border: 0; background: transparent; border-radius: var(--r-3); cursor: pointer; translate: var(--dx, 0) var(--dy, 0); transition: background-color .15s; touch-action: none; }
.d-icon:hover { background: rgb(var(--glass) / .6); }
.d-icon.is-drag { z-index: 10; transition: none; cursor: grabbing; background: rgb(var(--glass) / .5); }
.d-icon.is-drag .tile { box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); scale: 1.06; }
.d-tile { position: relative; display: grid; }
.d-label { font: 700 .8rem/1.2 var(--font-body); color: var(--ink); text-align: center; text-shadow: 0 1px 0 rgb(var(--glass) / .85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.d-badge { position: absolute; top: -7px; right: -10px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font: 800 .7rem/22px var(--font-body); text-align: center; border: 2px solid var(--sheet); white-space: nowrap; }
.d-icon[data-app="ablaeufe"] .d-badge { background: #2f8a43; }
.d-mark { position: absolute; z-index: -1; left: var(--mx, 0); top: var(--my, 0); width: 102px; height: 106px; border-radius: var(--r-3); background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand-line); opacity: 0; pointer-events: none; transition: opacity .1s, left .08s, top .08s; }   /* die Zelle, in die die App fällt */
.d-mark.is-on { opacity: 1; }
.d-mark.is-swap { background: var(--brand-soft-2); box-shadow: inset 0 0 0 2px var(--brand); }   /* dort liegt schon eine App: beide tauschen */
.os-icons.is-dragging .d-area:not(.is-own) { opacity: .45; }
.d-icon.is-new { animation: pop-in .8s var(--ease) both; }
.d-icon.is-new .tile { animation: glow-ring 1.6s ease-out 2; }

/* ---------- Widgets ---------- */
.os-widgets { position: absolute; right: 14px; top: 14px; bottom: 14px; width: var(--wgw); display: flex; flex-direction: column; gap: 12px; overflow-y: auto; scrollbar-width: thin; padding-bottom: 4px; }
.wg { background: rgb(var(--glass)); border: 1px solid rgb(var(--glass)); border-radius: var(--r-3); padding: 14px 16px; box-shadow: none; flex: none; }
.wg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wg-head h3 { font-size: .98rem; flex: 1; letter-spacing: -.01em; }
.wg--save { background: var(--night); color: var(--on-night); border-color: transparent; }
.wg--save .info-btn { color: var(--on-night-2); }
.wg--save .info-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.wg-big { font: 800 2.35rem/1.05 var(--font-display); color: var(--lime); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.wg-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); margin: 10px 0 6px; overflow: hidden; }
.wg-bar-in { display: block; height: 100%; width: var(--p, 0%); background: var(--lime); border-radius: inherit; transition: width .9s var(--ease); }
.wg-sub { font-size: .76rem; color: var(--on-night-2); }
.wg-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 8px; }
.wg-kpis b { display: block; font: 800 1.15rem/1.2 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.wg-kpis span { display: flex; align-items: center; font-size: .7rem; color: var(--on-night-2); line-height: 1.25; }
.wg-kpis .info-btn { width: 18px; height: 18px; }
.wg-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wg-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; color: var(--lime); font-weight: 700; font-size: .84rem; cursor: pointer; }
.wg-link .ic { width: 15px; height: 15px; }
.wg-prog { font-weight: 800; font-size: .76rem; background: var(--brand-soft); color: var(--brand-text); padding: 3px 9px; border-radius: 999px; }
.st-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--line-2); flex: none; }
.st-check .ic { width: 22px; height: 22px; }
.st-text { flex: 1; }
.st-go { color: var(--brand-text); opacity: 0; transition: opacity .15s; }
.st-go .ic { width: 16px; height: 16px; }
.wg-feed { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: .78rem; color: var(--ink-2); }
.wg-feed li { display: grid; grid-template-columns: 36px 16px 1fr; gap: 6px; align-items: start; animation: fade-in .4s var(--ease) both; }
.wg-feed .ic { width: 15px; height: 15px; color: var(--brand-text); margin-top: 1px; }
.fe-t { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wg-empty { display: block !important; color: var(--ink-3); font-size: .8rem; }

/* ---------- Fenster ---------- */
.os-wins { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.owin { position: absolute; left: 0; top: 0; width: var(--w, 900px); height: var(--h, 600px); translate: var(--x, 0) var(--y, 0); z-index: var(--z, 30); pointer-events: auto; display: flex; flex-direction: column; background: var(--sheet); border-radius: var(--r-3); overflow: hidden;
  box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); }
.owin.is-front { box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); }
.owin.is-open { animation: win-in .24s var(--ease) both; }
.owin.is-max { translate: 0 0; width: 100%; height: 100%; border-radius: 0; }
.owin.is-min { display: none; }
.owin.is-moving { transition: none; user-select: none; }
.win-bar { flex: none; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 10px; background: var(--sheet-2); border-bottom: 1px solid var(--line); cursor: grab; user-select: none; }
.owin.is-moving .win-bar { cursor: grabbing; }
.win-title { font: 800 .98rem/1 var(--font-display); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-sp { flex: 1; }
.win-b { display: grid; place-items: center; width: 34px; height: 32px; border: 0; background: none; border-radius: 8px; color: var(--ink-2); cursor: pointer; }
.win-b:hover { background: var(--soft-2); }
.win-b--x:hover { background: var(--bad-soft); color: var(--red); }
.win-b .ic { width: 16px; height: 16px; }
.win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; }
.app { flex: 1; min-height: 0; }

/* ---------- Taskleiste ---------- */
.os-task { position: relative; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 640px) minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 12px; background: rgba(43, 35, 82, .94); color: var(--on-night); }
.task-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.task-start { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--r-3); border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.task-start:hover { background: rgba(255, 255, 255, .18); }
.task-chips { display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.chip-win { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 8px; border: 0; border-radius: var(--r-2); background: rgba(255, 255, 255, .06); color: var(--on-night-2); font: 600 .8rem/1 var(--font-body); cursor: pointer; max-width: 180px; box-shadow: inset 0 -2px 0 transparent; flex: none; }
.chip-win span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-win:hover { background: rgba(255, 255, 255, .12); }
.chip-win.is-front { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 -2px 0 var(--lime); }
.chip-win.is-min { opacity: .6; }
.os.is-medium .chip-win span { display: none; }
.os.is-medium .chip-win { padding: 0 9px; }
.task-chat { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 6px 0 16px; border-radius: var(--r-2); background: var(--sheet); color: var(--ink); box-shadow: none; transition: box-shadow .2s; }
.task-chat:focus-within { box-shadow: 0 0 0 3px var(--lime); }
.chat-ic { color: var(--brand-text); display: grid; }
.chat-ic .ic { width: 18px; height: 18px; }
.chat-in { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 500 .98rem/1 var(--font-body); color: var(--ink); }
.chat-in::placeholder { color: var(--ink-3); }
.chat-mic, .chat-send { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; flex: none; }
.chat-mic { background: var(--soft); color: var(--brand-text); }
.chat-mic:hover { background: var(--soft-2); }
.chat-send { background: var(--brand); color: var(--brand-ink); }
.chat-send:hover { background: var(--brand-hi); }
.chat-mic .ic, .chat-send .ic { width: 18px; height: 18px; }
.task-ticker { position: relative; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 6px 14px; border: 0; border-radius: var(--r-3); background: rgba(255, 255, 255, .07); color: var(--on-night); cursor: pointer; text-align: right; }
.task-ticker:hover { background: rgba(255, 255, 255, .13); }
.tk-label { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--on-night-2); white-space: nowrap; }
.tk-label .ic { width: 14px; height: 14px; color: var(--lime); }
.tk-val { font: 800 1.4rem/1.05 var(--font-display); color: var(--lime); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-delta { position: absolute; right: 12px; top: -6px; color: var(--lime); font: 800 .95rem/1 var(--font-display); opacity: 0; pointer-events: none; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); white-space: nowrap; }
.task-ticker.is-up .tk-delta { animation: rise 1.8s var(--ease) both; }
.task-ticker.is-up { animation: tick-glow 1.4s ease-out; }

/* ---------- Chat ---------- */
.chat { position: absolute; z-index: 7; left: 50%; bottom: calc(var(--task-h) + 10px); width: min(660px, calc(100% - 24px)); max-height: min(72%, 600px); display: flex; flex-direction: column; background: var(--sheet); border-radius: var(--r-3); box-shadow: 0 8px 28px rgb(var(--shade) / .34), 0 0 0 1px var(--ring);
  translate: -50% 14px; opacity: 0; pointer-events: none; transition: opacity .2s, translate .25s var(--ease); }
.chat.is-open { opacity: 1; translate: -50% 0; pointer-events: auto; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.chat-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--night); color: var(--lime); flex: none; }
.chat-av .ic { width: 18px; height: 18px; }
.chat-who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-who strong { font-size: .95rem; }
.chat-who span { font-size: .74rem; color: var(--ink-3); }
.chat-x, .korb-x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--r-2); background: none; cursor: pointer; }
.chat-x:hover, .korb-x:hover { background: var(--soft); }
.chat-scroll { flex: 1; overflow-y: auto; padding: 14px 16px 6px; scroll-behavior: smooth; }
.msg { width: fit-content; max-width: 90%; margin: 0 0 10px; padding: 10px 14px; border-radius: var(--r-3); font-size: .93rem; line-height: 1.5; animation: fade-in .3s var(--ease) both; }
.msg p { white-space: pre-wrap; }
.msg--me { margin-left: auto; background: var(--brand); color: var(--brand-ink); border-bottom-right-radius: 5px; }
.msg--bot { background: var(--soft); border-bottom-left-radius: 5px; }
.msg-list { margin: 6px 0 0 18px; font-size: .88rem; }
.msg-list li { margin: 3px 0; }
.msg-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: .74rem; color: var(--ink-3); }
.src { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--sheet); font: 600 .74rem/1.4 var(--font-body); cursor: pointer; max-width: 100%; }
.src span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src .ic { width: 13px; height: 13px; color: var(--brand-text); flex: none; }
.src:hover { border-color: var(--brand); }
.msg-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg-meta { display: flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--ink-3); margin-top: 6px; }
.msg-meta .ic { width: 13px; height: 13px; color: var(--ok-ink); }
.thinking { display: inline-flex; gap: 4px; padding: 4px 0; }
.thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: dots 1s infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; }
.thinking i:nth-child(3) { animation-delay: .3s; }
.chat-sug { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.sug { padding: 6px 12px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--sheet); color: var(--ink-2); font: 600 .8rem/1.3 var(--font-body); cursor: pointer; text-align: left; }
.sug:hover { border-color: var(--brand); color: var(--brand-text); background: var(--brand-soft); }

/* ---------- Knöpfe, Infos, Hinweise ---------- */
.ob-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: var(--r-2); border: 1.5px solid transparent; font: 700 .95rem/1 var(--font-body); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.ob-btn .ic { width: 17px; height: 17px; flex: none; }
.ob-btn--primary { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.ob-btn--primary:hover { background: var(--brand-hi); }
.ob-btn--soft { background: var(--brand-soft-2); color: var(--brand-text); }
.ob-btn--soft:hover { background: var(--brand-line); }
.ob-btn--lime { background: var(--lime); color: var(--night); }
.ob-btn--lime:hover { background: #d3e62c; }
.ob-btn--ghost { background: var(--sheet); border-color: var(--line-2); color: var(--ink); }
.ob-btn--ghost:hover { border-color: var(--brand); color: var(--brand-text); }
.ob-btn--s { height: 36px; padding: 0 14px; font-size: .84rem; }
.ob-btn--icon { width: 36px; padding: 0; }
.ob-btn:disabled { opacity: .5; cursor: not-allowed; }
.info-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: help; vertical-align: middle; flex: none; }
.info-btn:hover { color: var(--brand-text); background: var(--brand-soft); }
.info-btn .ic { width: 16px; height: 16px; }
.amp { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; vertical-align: middle; }
.amp--gruen { background: #3aa553; }
.amp--gelb { background: #d79a00; }
.amp--rot { background: #c8452e; }
.amp.is-off { opacity: .2; filter: grayscale(1); }
.amp--text { width: auto; height: auto; padding: 3px 9px; border-radius: var(--r-2); color: #fff; font: 800 .72rem/1.2 var(--font-body); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3aa553; box-shadow: 0 0 0 0 rgba(58, 165, 83, .5); animation: live 1.8s infinite; flex: none; }
.spin { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--brand-soft-2); border-top-color: var(--brand); animation: spin .8s linear infinite; flex: none; }
.spin--s { width: 14px; height: 14px; border-width: 2px; }
.empty { display: grid; place-items: center; text-align: center; gap: 8px; padding: 28px 16px; color: var(--ink-3); font-size: .9rem; }
.empty .ic { width: 28px; height: 28px; }
.empty--big { padding: 48px 16px; }
.empty--big h4 { color: var(--ink); font-size: 1.1rem; }
.is-pulse { animation: pulse-ring 1.3s ease-out 3; position: relative; z-index: 1; }
.fchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--sheet); color: var(--ink-2); font: 600 .8rem/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.fchip small { opacity: .7; font-size: .72rem; }
.fchip:hover { border-color: var(--brand); }
.fchip.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.kchip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-2); border: 1.5px solid var(--line-2); background: var(--sheet); color: var(--ink-2); font: 600 .82rem/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.kchip .ic { width: 15px; height: 15px; }
.kchip:hover { border-color: var(--brand); }
.kchip.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); }
.s-mic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--soft); color: var(--brand-text); cursor: pointer; flex: none; }
.s-mic:hover { background: var(--soft-2); }
.s-mic .ic { width: 18px; height: 18px; }
.m-hint { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-radius: 0 var(--r-3) var(--r-3) 0; background: var(--brand-soft); border: 0; border-left: 3px solid var(--brand); font-size: .86rem; margin: 10px 0; }
.m-hint .ic { width: 17px; height: 17px; color: var(--brand-text); flex: none; margin-top: 2px; }
.m-working { display: flex; align-items: center; gap: 10px; color: var(--ink-2); padding: 18px 4px; font-size: .9rem; }
.p-sum { background: var(--sheet); border: 1px solid var(--brand-line); border-radius: var(--r-3); padding: 10px 12px; }
.p-sum[hidden] { display: none; }
.p-sum-head { display: flex; align-items: center; gap: 6px; font-size: .8rem; margin-bottom: 4px; }
.p-sum-head .ic { width: 15px; height: 15px; color: var(--brand-text); }
.p-sum-head span { margin-left: auto; color: var(--ink-3); font-size: .72rem; }
.p-sum p { font-size: .88rem; white-space: pre-wrap; }
.k-text.is-typing::after, .p-sum p.is-typing::after, .msg p.is-typing::after { content: ''; display: inline-block; width: 7px; height: 1em; background: var(--brand); vertical-align: -2px; margin-left: 2px; animation: caret .7s steps(1) infinite; }

/* Popover und Menü */
.os-layer { position: absolute; inset: 0; z-index: 41; pointer-events: none; }
.os-layer > * { pointer-events: auto; }
.pop { position: absolute; left: var(--x, 10px); top: var(--y, 10px); z-index: 50; width: min(340px, calc(100% - 20px)); background: var(--sheet); border-radius: var(--r-3); padding: 14px 16px; font-size: .88rem; line-height: 1.5; color: var(--ink-2); box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); animation: fade-in .18s var(--ease) both; }
.pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--ink); }
.pop-head > .ic { width: 18px; height: 18px; color: var(--brand-text); }
.pop-head strong { flex: 1; font-size: .95rem; }
.pop-x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--ink-3); margin-left: auto; }
.pop-x:hover { background: var(--soft); }
.pop-x .ic { width: 15px; height: 15px; }
.pop-extra { margin-top: 8px; padding: 8px 10px; background: var(--soft); border-radius: var(--r-2); font-size: .82rem; }
.pop--menu { width: 250px; padding: 6px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-2); background: none; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .88rem; cursor: pointer; text-align: left; }
.menu-item:hover { background: var(--brand-soft); }
.menu-item .ic { width: 17px; height: 17px; color: var(--brand-text); }

/* Startmenü */
.launcher { position: absolute; left: 12px; bottom: calc(var(--task-h) + 10px); z-index: 42; width: 400px; max-width: calc(100% - 24px); background: var(--sheet); border-radius: var(--r-3); padding: 16px; box-shadow: 0 8px 28px rgb(var(--shade) / .34), 0 0 0 1px var(--ring); animation: fade-up .22s var(--ease) both; }
.launch-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.launch-head strong { display: block; font-size: .95rem; }
.launch-head span { font-size: .76rem; color: var(--ink-3); }
.launch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.launch-app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 0; border-radius: var(--r-3); background: none; font: 600 .74rem/1.2 var(--font-body); text-align: center; cursor: pointer; }
.launch-app:hover { background: var(--brand-soft); }
.launch-store { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; margin-top: 10px; border: 0; border-radius: var(--r-3); background: var(--brand-soft); color: var(--brand-text); font-weight: 700; font-size: .86rem; cursor: pointer; }
.launch-store .ic { width: 16px; height: 16px; }

/* Hinweise unten rechts */
.os-toasts { position: absolute; right: 16px; bottom: calc(var(--task-h) + 14px); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; max-width: 400px; padding: 10px 14px; border-radius: var(--r-3); background: var(--night); color: #fff; font-size: .88rem; box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); animation: toast-in .3s var(--ease) both; transition: opacity .3s, translate .3s; }
.toast .ic { width: 17px; height: 17px; color: var(--lime); flex: none; }
.toast.is-out { opacity: 0; translate: 0 8px; }
.toast--small { font-size: .8rem; padding: 8px 12px; }
.toast--save { display: block; width: 380px; max-width: calc(100vw - 32px); padding: 14px 16px; background: var(--night); }
.ts-top { display: flex; align-items: center; gap: 8px; }
.ts-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); flex: none; }
.ts-check .ic { width: 14px; height: 14px; color: var(--night); stroke-width: 3; }
.ts-label { font-weight: 700; font-size: .9rem; }
.ts-big { font: 800 1.7rem/1.1 var(--font-display); color: var(--lime); margin: 6px 0 2px; letter-spacing: -.02em; }
.ts-big span { font: 600 .9rem/1 var(--font-body); color: var(--on-night-2); }
.ts-sub { font-size: .8rem; color: var(--on-night-2); }
.ts-formula { font-size: .72rem; color: var(--on-night-2); opacity: .8; margin-top: 4px; }
.os.is-medium .toast--save { width: 300px; }
.os.is-medium .ts-formula { display: none; }
.dlg.dlg--slide { width: min(1040px, 100%); }
.slide-prev { border-radius: var(--r-3); overflow: hidden; box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); background: #fbf8f3; }
.slide-canvas { display: block; width: 100%; height: auto; }
.slide-info { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: .86rem; color: var(--ink-3); }
.slide-info .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.e-hero-r > .ob-btn--lime { align-self: flex-start; }
.coin { position: absolute; left: 0; top: 0; z-index: 60; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); color: var(--night); font: 800 .9rem/1 var(--font-display); box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); animation: coin 1s cubic-bezier(.5, -.3, .7, 1) both; pointer-events: none; }

/* Dialoge */
.dlg-back { position: absolute; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; background: rgb(var(--shade) / .36); animation: fade-in .18s both; }
.dlg { width: min(540px, 100%); max-height: 100%; overflow: auto; background: var(--sheet); border-radius: var(--r-3); padding: 22px 24px; box-shadow: 0 8px 28px rgb(var(--shade) / .34), 0 0 0 1px var(--ring); animation: win-in .22s var(--ease) both; }
.dlg--wide { width: min(780px, 100%); }
.dlg--schleuse, .dlg--mail { width: min(660px, 100%); }
.dlg-head { display: flex; align-items: center; gap: 12px; }
.dlg-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-soft-2); color: var(--brand-text); flex: none; }
.dlg-ic .ic { width: 20px; height: 20px; }
.dlg-head h2 { font-size: 1.3rem; }
.dlg-body { margin: 14px 0 20px; font-size: .94rem; color: var(--ink-2); }
.dlg-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.dlg-foot > .vr-split { margin-right: auto; }
.dlg-reason { margin-bottom: 12px; }
.dlg-mod { display: flex; gap: 14px; align-items: flex-start; }
.dlg-pot { margin-top: 8px; }
.dlg-pot b { color: var(--brand-text); }
.gate-prof { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 12px 14px; border-radius: var(--r-3); background: var(--soft); margin-bottom: 12px; }
.gate-prof dt { color: var(--ink-3); font-size: .82rem; }
.gate-prof dd { margin: 0; font-weight: 700; font-size: .88rem; color: var(--ink); }
.gate-files { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.gate-files li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 18px; gap: 10px; align-items: center; padding: 9px 12px; border-radius: var(--r-3); border: 1px solid var(--line); font-size: .86rem; }
.gate-name { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gate-info { font-size: .76rem; color: var(--ink-3); white-space: nowrap; }
.gate-files .ic { width: 16px; height: 16px; color: var(--ok-ink); }
.gate-files li.is-blocked { background: var(--bad-soft); border-color: var(--bad-line); }
.gate-files li.is-blocked .gate-name { color: var(--bad-ink); }
.gate-files li.is-blocked .gate-info, .gate-files li.is-blocked .ic { color: var(--bad-ink); font-weight: 700; }
.gate-pseudo, .gate-warn { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 9px 12px; border-radius: var(--r-3); background: var(--soft); font-size: .84rem; }
.gate-pseudo .ic, .gate-warn .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.gate-warn { background: var(--warn-soft); color: var(--warn-ink); }
.os code { font: 600 .78rem/1.4 ui-monospace, Consolas, monospace; background: var(--soft-2); padding: 1px 6px; border-radius: 6px; }
.send-prev dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin-bottom: 10px; font-size: .88rem; }
.send-prev dt { color: var(--ink-3); }
.send-prev dd { margin: 0; font-weight: 600; color: var(--ink); }
.send-prev pre { white-space: pre-wrap; font: .88rem/1.55 var(--font-body); background: var(--soft); padding: 12px 14px; border-radius: var(--r-3); max-height: 260px; overflow: auto; color: var(--ink); margin: 0; }

/* Spracheingabe (Blase) */
.listen { position: absolute; left: var(--x); top: var(--y); z-index: 55; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--night); color: #fff; font-weight: 600; font-size: .86rem; box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); animation: fade-up .2s var(--ease) both; }
.listen-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e05a47; animation: rec 1s infinite; }
.listen-dot .ic { width: 16px; height: 16px; }
.listen.is-done .listen-dot { background: #3aa553; animation: none; }
.listen .wave { color: var(--lime); }
.wave { display: inline-flex; align-items: center; gap: 3px; height: 24px; }
.wave span { display: block; width: 3px; height: var(--h, 60%); background: currentColor; border-radius: 2px; animation: wave .9s ease-in-out infinite; animation-delay: calc(var(--i) * -.07s); }

/* ---------- Einrichtung ---------- */
.ob-back { position: absolute; inset: 0; z-index: 44; display: grid; place-items: center; padding: 16px; overflow: auto; background: rgb(var(--shade) / .2); }
.ob { width: min(740px, 100%); max-height: 100%; overflow: auto; background: var(--sheet); border-radius: var(--r-3); padding: 20px 28px 24px; box-shadow: 0 8px 28px rgb(var(--shade) / .34), 0 0 0 1px var(--ring); animation: win-in .3s var(--ease) both; }
.ob-top { display: flex; align-items: center; gap: 12px; }
.ob-count { font-weight: 800; font-size: .84rem; color: var(--brand-text); white-space: nowrap; }
.ob-dots { display: flex; gap: 6px; flex: 1; }
.ob-dots span { width: 26px; height: 6px; border-radius: 999px; background: var(--line); transition: background-color .3s; }
.ob-dots .is-done { background: var(--brand-line); }
.ob-dots .is-on { background: var(--brand); }
.ob-dice { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--sheet); font-weight: 700; font-size: .84rem; cursor: pointer; }
.ob-dice:hover { border-color: var(--brand); color: var(--brand-text); }
.ob-dice .ic { width: 16px; height: 16px; }
.ob-x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--r-2); background: none; cursor: pointer; }
.ob-x:hover { background: var(--soft); }
.ob-hello { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-3); background: var(--brand-soft); font-size: .92rem; color: var(--ink-2); }
.ob-hello b { color: var(--ink); }
.ob-inline { border: 0; background: none; padding: 0; color: var(--brand-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }
.ob-q { display: flex; align-items: center; gap: 8px; margin: 18px 0 14px; }
.ob-q h2 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); }
.ob-body { min-height: 120px; }
.ob-input { width: 100%; height: 56px; padding: 0 18px; border-radius: var(--r-3); border: 2px solid var(--line-2); background: var(--sheet); font: 600 1.15rem/1 var(--font-body); color: var(--ink); }
.ob-input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft-2); }
select.ob-input { height: 46px; font-size: .95rem; padding: 0 12px; }
.ob-input--num { width: 110px; height: 44px; font-size: 1rem; padding: 0 12px; }
.ob-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ob-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; color: var(--brand-text); font-weight: 700; font-size: .9rem; cursor: pointer; }
.ob-link .ic { width: 16px; height: 16px; }
.ob-note { font-size: .8rem; color: var(--ink-3); }
.ob-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 8px; }
.ob-chip { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: var(--r-3); border: 2px solid var(--line); background: var(--sheet); text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ob-chip span { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.ob-chip small { font-size: .74rem; color: var(--ink-3); }
.ob-chip:hover { border-color: var(--brand-line); }
.ob-chip.is-on { border-color: var(--brand); background: var(--brand-soft); }
.ob-range { margin: 12px 0; }
.ob-range-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ob-label { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .9rem; color: var(--ink-2); }
.ob-out { font: 800 1.4rem/1 var(--font-display); color: var(--brand-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.os input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; margin: 8px 0; background: linear-gradient(to right, var(--brand) var(--fill, 50%), var(--line) var(--fill, 50%)); cursor: pointer; }
.os input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: 0 1px 3px rgb(var(--shade) / .4); }
.os input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }
.ob-ma { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; }
.ob-ma .ob-range { margin-bottom: 4px; }
.ob-exact { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-3); padding-bottom: 6px; }
.ob-est { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-3); background: var(--soft); font-size: .94rem; color: var(--ink-2); }
.ob-est b { color: var(--brand-text); }
.ob-brandrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ob-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.ob-sw { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--sheet); background: var(--c); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; padding: 0; }
.ob-sw.is-on { box-shadow: 0 0 0 3px var(--c); }
.ob-own { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-3); cursor: pointer; }
.ob-own input[type="color"] { width: 40px; height: 40px; border: 0; padding: 0; background: none; cursor: pointer; }
.ob-logo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.ob-logo label.ob-btn { cursor: pointer; }
.ob-preview { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--brand-soft); margin-top: 6px; }
.ob-prev-name { font-weight: 800; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-prev-btn { background: var(--brand); color: var(--brand-ink); padding: 9px 16px; border-radius: var(--r-2); font-weight: 700; font-size: .84rem; white-space: nowrap; }
.ob-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.ob-mod { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tile text box" "tile pot box"; gap: 0 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-3); border: 2px solid var(--line); background: var(--sheet); text-align: left; cursor: pointer; }
.ob-mod .tile { grid-area: tile; }
.ob-mod-t { grid-area: text; display: flex; flex-direction: column; min-width: 0; }
.ob-mod-t b { font-size: .92rem; }
.ob-mod-t small { font-size: .74rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-mod-pot { grid-area: pot; font-weight: 800; font-size: .78rem; color: var(--ok-ink); }
.ob-mod-box { grid-area: box; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line-2); color: transparent; }
.ob-mod-box .ic { width: 15px; height: 15px; stroke-width: 3; }
.ob-mod.is-on { border-color: var(--brand); background: var(--brand-soft); }
.ob-mod.is-on .ob-mod-box { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.ob-mod-rec { position: absolute; top: -9px; right: 46px; background: var(--lime); color: var(--night); font: 800 .62rem/1 var(--font-body); text-transform: none; padding: 4px 8px; border-radius: var(--r-2); }
.ob-mod-rec--soon { background: var(--soft-2); color: var(--ink-2); }
.ob-random { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-3); background: var(--lime-soft); font-size: .86rem; margin-bottom: 10px; }
.ob-random .ic { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.ob-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.ob-hint { font-size: .76rem; color: var(--ink-3); }

/* Startvorgang */
.boot { position: absolute; inset: 0; z-index: 46; display: grid; place-items: center; padding: 20px; background: var(--night); color: var(--on-night); transition: opacity .38s; }
.boot.is-out { opacity: 0; }
.boot-card { width: min(560px, 100%); text-align: center; }
.boot-card h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 18px 0 4px; }
.boot-os { color: var(--on-night-2); }
.boot-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); margin: 20px 0 16px; overflow: hidden; }
.boot-bar-in { display: block; height: 100%; width: var(--p, 0%); background: var(--lime); border-radius: inherit; transition: width .4s var(--ease); }
.boot-list { list-style: none; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.boot-list li { display: flex; align-items: center; gap: 10px; font-size: .92rem; animation: fade-up .3s var(--ease) both; }
.boot-list li > .ic:first-child { width: 17px; height: 17px; color: var(--on-night-2); flex: none; }
.boot-ok { width: 17px; height: 17px; color: var(--lime); margin-left: auto; flex: none; }
.boot-note { margin-top: 18px; font-size: .78rem; opacity: .6; }

/* ---------- Gemeinsame App-Teile ---------- */
.k-sec-head { display: flex; align-items: center; gap: 8px; }
.k-sec-head h3 { font-size: 1rem; }
.k-note { display: flex; gap: 6px; align-items: flex-start; font-size: .76rem; color: var(--ink-3); }
.k-note .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.pj-h { font: 800 .72rem/1.2 var(--font-body); text-transform: none; color: var(--ink-3); margin: 4px 4px 10px; }
.pj-tip { font-size: .78rem; color: var(--ink-3); margin-top: 8px; }
.pj-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); flex: none; }
.pj-tab { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 0; background: none; font-weight: 700; font-size: .86rem; color: var(--ink-3); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.pj-tab.is-on { color: var(--ink); border-bottom-color: var(--brand); }
.tab-n { background: var(--brand); color: var(--brand-ink); font-weight: 800; font-size: .66rem; padding: 2px 7px; border-radius: 999px; margin-left: 6px; }
.a-num { width: 92px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1.5px solid var(--line-2); font: 600 .86rem/1 var(--font-body); color: var(--ink); background: var(--sheet); }
.a-num:focus { outline: 0; border-color: var(--brand); }
.att { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--sheet); font: 600 .8rem/1.3 var(--font-body); cursor: pointer; }
.att .ic { width: 14px; height: 14px; color: var(--ink-3); }
.switch { display: flex; align-items: center; gap: 10px; font-size: .86rem; cursor: pointer; position: relative; }
.switch-in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--line-2); flex: none; transition: background-color .2s; }
.switch-ui::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--sheet); box-shadow: none; transition: translate .2s var(--ease); }
.switch-in:checked + .switch-ui { background: var(--brand); }
.switch-in:checked + .switch-ui::after { translate: 18px 0; }
.switch-in:focus-visible + .switch-ui { outline: 3px solid var(--brand); outline-offset: 2px; }
.sw { position: relative; width: 48px; height: 28px; border-radius: 999px; border: 0; background: var(--line-2); cursor: pointer; flex: none; transition: background-color .2s; padding: 0; }
.sw-knob { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--sheet); box-shadow: none; transition: translate .2s var(--ease); }
.sw.is-on { background: #3aa553; }
.sw.is-on .sw-knob { translate: 20px 0; }
.k-res { position: relative; border: 1px solid var(--line); border-radius: var(--r-3); padding: 14px 16px; background: var(--sheet); box-shadow: none; }
.k-res-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.k-res-head .ic { width: 17px; height: 17px; color: var(--brand-text); }
.k-res-head span { margin-left: auto; font-size: .76rem; color: var(--ink-3); }
.k-res > .pop-x { position: absolute; top: 10px; right: 10px; }
.k-text { white-space: pre-wrap; font: .9rem/1.55 var(--font-body); margin: 0; color: var(--ink); }
.k-res-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.k-res-foot .msg-meta { margin: 0; }
.k-res-foot .pop-x { margin-left: 0; }

/* ---------- Suche ---------- */
.app-suche { --spl-d: 220px; --spr-d: 340px; display: grid; grid-template-columns: var(--spl, var(--spl-d)) minmax(0, 1fr) var(--spr, var(--spr-d)); min-height: 0; }
.s-tree { border-right: 1px solid var(--line); overflow-y: auto; padding: 10px 8px; background: var(--sheet-2); }
.t-root, .t-sub { list-style: none; }
.t-root { margin-top: 4px; }
.t-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; padding-left: calc(8px + var(--d, 0) * 14px); border: 0; border-radius: 8px; background: none; font: 600 .8rem/1.3 var(--font-body); color: var(--ink-2); text-align: left; cursor: pointer; }
.t-item .ic { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.t-item:hover { background: var(--soft); }
.t-item.is-on { background: var(--brand-soft-2); color: var(--brand-text); }
.t-item.is-on .ic { color: var(--brand-text); }
.t-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-count { font-size: .7rem; color: var(--ink-3); }
.t-item .amp { width: 7px; height: 7px; }
.t-top { font-weight: 800; color: var(--ink); }
.t-mailbox { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.s-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; padding: 14px 16px 0; }
.s-form, .w-form { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 6px 0 14px; border-radius: var(--r-3); border: 2px solid var(--line-2); background: var(--sheet); flex: none; }
.s-form:focus-within, .w-form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft-2); }
.s-form > .ic, .w-form > .ic { width: 19px; height: 19px; color: var(--brand-text); flex: none; }
.s-in, .w-in { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 600 1.02rem/1 var(--font-body); color: var(--ink); }
.s-in::-webkit-search-cancel-button { cursor: pointer; }
.s-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: none; }
.s-ex > span { font-size: .76rem; font-weight: 700; color: var(--ink-3); }
.s-filter { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.s-status { font-size: .82rem; color: var(--ink-3); flex: none; }
.s-status b { color: var(--ink); }
.s-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -8px; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.s-hit { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 9px 10px; border-radius: var(--r-3); border: 1px solid transparent; background: none; text-align: left; cursor: pointer; }
.s-hit:hover { background: var(--soft); }
.s-hit.is-on { background: var(--brand-soft); border-color: var(--brand-line); }
.hit-ic { position: relative; display: grid; place-items: center; width: 32px; height: 36px; border-radius: 8px; background: var(--sheet); border: 1px solid var(--line); color: var(--brand-text); }
.hit-ic .ic { width: 17px; height: 17px; }
.hit-ic .amp { position: absolute; right: -3px; bottom: -3px; border: 2px solid var(--sheet); width: 12px; height: 12px; }
.hit-t { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.hit-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; color: var(--ink); overflow: hidden; }
.hit-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-badge { flex: none; font-size: .64rem; font-weight: 800; background: var(--lime-soft); color: var(--lime-ink); padding: 2px 6px; border-radius: var(--r-2); }
.hit-snip { font-size: .82rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hit-path { font-size: .72rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-prev { border-left: 1px solid var(--line); overflow-y: auto; padding: 14px 16px; background: var(--sheet-2); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p-head { display: flex; align-items: flex-start; gap: 10px; }
.p-ic { display: grid; place-items: center; width: 40px; height: 44px; border-radius: var(--r-2); background: var(--brand-soft-2); color: var(--brand-text); flex: none; }
.p-ic .ic { width: 20px; height: 20px; }
.p-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.p-meta strong { font-size: .9rem; word-break: break-word; line-height: 1.3; }
.p-meta span { font-size: .74rem; color: var(--ink-3); }
.p-amp { display: flex; align-items: center; flex: none; }
.p-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.p-sheet { background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; padding: 18px 18px 22px; font-size: .82rem; line-height: 1.5; color: var(--ink-2); }
.p-sheet h4 { font: 800 .95rem/1.3 var(--font-body); color: var(--ink); margin-bottom: 8px; letter-spacing: 0; }
.p-sheet p { margin: 0 0 6px; }
.p-lines i { display: block; height: 7px; background: var(--line); border-radius: 4px; margin: 8px 0; }
.p-lines i:nth-child(1) { width: 92%; } .p-lines i:nth-child(2) { width: 78%; } .p-lines i:nth-child(3) { width: 86%; } .p-lines i:nth-child(4) { width: 54%; }
.p-table { width: 100%; border-collapse: collapse; }
.p-table td { border-bottom: 1px solid var(--line); padding: 6px; font-size: .78rem; vertical-align: top; }
.p-table tr.is-head td { font-weight: 800; background: var(--soft); color: var(--ink); }
.p-photo { position: relative; display: grid; place-items: center; height: 130px; border-radius: 8px; margin-bottom: 10px; background: linear-gradient(135deg, var(--line-2), #b9b4c8); color: #fff; }
.p-photo .ic { width: 36px; height: 36px; }
.p-ocr { position: absolute; left: 8px; bottom: 8px; background: var(--night); color: var(--lime); font-weight: 800; font-size: .68rem; padding: 3px 9px; border-radius: var(--r-2); }
.p-dwg { width: 100%; height: auto; background: var(--info-soft); border-radius: 6px; margin-bottom: 10px; fill: none; stroke: var(--info-ink); stroke-width: 1.2; }
.p-lock { display: flex; align-items: flex-start; gap: 6px; color: var(--bad-ink); background: var(--bad-soft); padding: 7px 10px; border-radius: 8px; font-size: .78rem; font-weight: 600; }
.p-lock .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.p-mailhead { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; margin-bottom: 4px; }
.s-index { flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-3); background: var(--sheet-2); white-space: nowrap; overflow: hidden; }
.s-index > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.s-index b { color: var(--ok-ink); }
@container (max-width: 1020px) { .app-suche { --spr-d: 300px; grid-template-columns: minmax(0, 1fr) var(--spr, var(--spr-d)); } .s-tree { display: none; } }
@container (max-width: 700px) {
  .app-suche { display: flex; flex-direction: column; overflow-y: auto; }
  .s-main { flex: none; padding-bottom: 8px; }
  .s-list { max-height: 360px; flex: none; }
  .s-prev { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
  .s-index { white-space: normal; }
}

/* ---------- E-Mail ---------- */
.app-mail { --spl-d: 340px; --spr-d: 260px; display: grid; grid-template-columns: var(--spl, var(--spl-d)) minmax(0, 1fr) var(--spr, var(--spr-d)); min-height: 0; }
.m-left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--sheet-2); }
.m-tools { display: flex; align-items: center; gap: 6px; padding: 12px 12px 8px; }
.m-folders { display: flex; gap: 4px; padding: 0 10px 8px; }
.m-folder { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font-weight: 600; font-size: .82rem; color: var(--ink-2); cursor: pointer; }
.m-folder .ic { width: 15px; height: 15px; }
.m-folder b { background: var(--brand); color: var(--brand-ink); font-size: .68rem; padding: 2px 7px; border-radius: var(--r-2); }
.m-folder.is-on { background: var(--brand-soft-2); color: var(--brand-text); }
.m-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 8px; }
.m-chips:empty { display: none; }
.m-list { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--line); }
.m-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: var(--sheet); text-align: left; cursor: pointer; box-shadow: inset 3px 0 0 var(--brand); }
.m-item.is-read { box-shadow: none; }
.m-item:hover { background: var(--soft); }
.m-item.is-on { background: var(--brand-soft); }
.m-item.is-scan { animation: scan .5s ease-out; }
.m-from { font-weight: 800; font-size: .87rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-item.is-read .m-from { font-weight: 600; }
.m-time { font-size: .72rem; color: var(--ink-3); }
.m-subj { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: .83rem; min-width: 0; }
.m-subj span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-subj .ic { width: 13px; height: 13px; color: var(--ink-3); flex: none; }
.m-prev { grid-column: 1 / -1; font-size: .77rem; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-cat { grid-column: 1 / -1; justify-self: start; font-weight: 800; font-size: .66rem; padding: 2px 8px; border-radius: var(--r-2); margin-top: 4px; }
.m-cat--antwort { background: var(--bad-soft); color: var(--bad-ink); }
.m-cat--info { background: var(--info-soft); color: var(--info-ink); }
.m-cat--werbung { background: var(--soft-grey); color: var(--ink-3); }
.m-read { overflow-y: auto; padding: 18px 22px 24px; min-width: 0; }
.m-start { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 460px; margin: 40px auto; text-align: center; }
.m-start h3 { font-size: 1.4rem; }
.m-start p { color: var(--ink-2); }
.ov-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--night); color: var(--lime); flex: none; }
.ov-ic .ic { width: 26px; height: 26px; }
.m-overview { animation: fade-up .35s var(--ease) both; }
.ov-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ov-head h3 { font-size: 1.25rem; }
.ov-head p { color: var(--ink-2); font-size: .9rem; }
.ov-dead { background: var(--warn-soft); border-radius: var(--r-3); padding: 12px 14px; margin-bottom: 8px; }
.ov-dead strong { display: flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--warn-ink); }
.ov-dead strong .ic { width: 16px; height: 16px; }
.ov-dead ul { margin: 6px 0 0 20px; font-size: .86rem; }
.ov-group h4 { font: 800 .74rem/1.2 var(--font-body); text-transform: none; color: var(--ink-3); margin: 16px 0 6px; }
.ov-group--antwort h4 { color: var(--bad-ink); }
.ov-group ul { list-style: none; }
.ov-group button { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-2); background: none; text-align: left; font-size: .86rem; cursor: pointer; }
.ov-group button:hover { background: var(--brand-soft); }
.ov-group b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-head h3 { font-size: 1.3rem; margin-bottom: 10px; }
.m-meta { display: flex; align-items: center; gap: 10px; font-size: .86rem; }
.m-meta small { color: var(--ink-3); }
.m-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-soft-2); color: var(--brand-text); font-weight: 800; font-size: .8rem; flex: none; }
.m-av--l { width: 58px; height: 58px; font-size: 1.1rem; margin-bottom: 6px; }
.m-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; }
.m-thread { margin-bottom: 12px; }
.m-thread-t { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; font-weight: 700; font-size: .84rem; color: var(--brand-text); cursor: pointer; }
.m-thread-t .ic { width: 15px; height: 15px; transition: rotate .2s; }
.m-thread ol { display: none; list-style: none; padding-left: 14px; border-left: 2px solid var(--line); margin-top: 6px; }
.m-thread.is-open ol { display: block; }
.m-thread.is-open .m-thread-t .ic { rotate: 90deg; }
.m-thread li { margin: 8px 0; }
.m-thread li b { font-size: .84rem; }
.m-thread li span { font-size: .72rem; color: var(--ink-3); margin-left: 6px; }
.m-thread li p { font-size: .86rem; color: var(--ink-2); }
.m-body p { margin: 0 0 12px; font-size: .95rem; line-height: 1.6; }
.m-attach { display: flex; flex-wrap: wrap; gap: 6px; }
.m-compose { border: 2px solid var(--brand-line); border-radius: var(--r-3); padding: 14px 16px; margin: 0 0 16px; background: var(--sheet); animation: fade-up .25s var(--ease) both; }
.m-compose-head { display: flex; align-items: center; gap: 8px; }
.m-compose-head .ic { width: 17px; height: 17px; color: var(--brand-text); }
.m-compose-head strong { flex: 1; }
.m-step { font-size: .8rem; color: var(--ink-3); margin: 8px 0 6px; }
.m-kchips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-kwrow { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0; }
.m-kw { flex: 1; min-width: 0; resize: vertical; border-radius: var(--r-3); border: 1.5px solid var(--line-2); padding: 10px 12px; font: .9rem/1.45 var(--font-body); color: var(--ink); }
.m-kw:focus, .m-draft:focus, .k-prompt:focus, .sp-text:focus { outline: 0; border-color: var(--brand); }
.m-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.m-note { font-size: .74rem; color: var(--ink-3); }
.m-draft { display: block; width: 100%; min-height: 220px; margin-top: 10px; resize: vertical; border-radius: var(--r-3); border: 1.5px solid var(--brand-line); background: var(--brand-soft); padding: 12px 14px; font: .92rem/1.55 var(--font-body); color: var(--ink); }
.m-draft[hidden] { display: none; }
.m-ctx { border-left: 1px solid var(--line); overflow-y: auto; padding: 16px; background: var(--sheet-2); font-size: .84rem; }
.c-card { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.c-card strong { font-size: .95rem; }
.c-card span { color: var(--ink-2); }
.c-card small { color: var(--ink-3); }
.c-sec { margin-top: 14px; }
.c-sec h4 { font: 800 .72rem/1.2 var(--font-body); text-transform: none; color: var(--ink-3); margin-bottom: 6px; }
.c-list { list-style: none; }
.c-list li { display: flex; gap: 8px; padding: 3px 0; }
.c-list span { color: var(--ink-3); width: 46px; flex: none; }
.c-proj { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 8px 10px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--sheet); text-align: left; cursor: pointer; }
.c-proj .ic { width: 15px; height: 15px; color: var(--brand-text); }
.c-proj span { font-weight: 700; }
.c-proj small { color: var(--ink-3); }
.c-files { list-style: none; }
.c-files button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 2px; border: 0; background: none; text-align: left; font-size: .8rem; cursor: pointer; min-width: 0; }
.c-files button span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-files button:hover { color: var(--brand-text); }
.c-note { display: flex; gap: 6px; align-items: flex-start; font-size: .74rem; color: var(--ink-3); margin-top: 14px; }
.c-note .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
@container (max-width: 1040px) { .app-mail { --spl-d: 300px; grid-template-columns: var(--spl, var(--spl-d)) minmax(0, 1fr); } .m-ctx { display: none; } }
@container (max-width: 700px) {
  .app-mail { display: flex; flex-direction: column; overflow-y: auto; }
  .m-left { flex: none; border-right: 0; }
  .m-list { max-height: 330px; flex: none; }
  .m-read { overflow: visible; border-top: 1px solid var(--line); }
  .ov-group button { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- KI-Assistent ---------- */
.app-ki { --spl-d: 300px; display: grid; grid-template-columns: var(--spl, var(--spl-d)) minmax(0, 1fr); min-height: 0; }
.k-left { border-right: 1px solid var(--line); overflow-y: auto; padding: 16px; background: var(--sheet-2); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.k-left > * { width: 100%; }
.k-left > .ob-btn { width: auto; }
.k-count { font-size: .74rem; font-weight: 700; color: var(--ink-3); background: var(--soft); padding: 2px 8px; border-radius: 999px; }
.k-korb { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.k-file { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 8px 8px 10px; border-radius: var(--r-2); background: var(--sheet); border: 1px solid var(--line); font-size: .8rem; animation: fade-in .3s both; }
.k-file > .ic { width: 16px; height: 16px; color: var(--brand-text); }
.k-file--rot { border-color: var(--bad-line); background: var(--bad-soft); }
.k-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-x { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--ink-3); cursor: pointer; }
.k-x:hover { background: var(--soft); color: var(--red); }
.k-x .ic { width: 14px; height: 14px; }
.k-empty { font-size: .8rem; color: var(--ink-3); padding: 10px; border: 1.5px dashed var(--line-2); border-radius: var(--r-2); }
.k-main { padding: 16px 20px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.k-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.k-model { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: var(--r-3); border: 2px solid var(--line); background: var(--sheet); text-align: left; cursor: pointer; }
.k-model:hover { border-color: var(--brand-line); }
.k-model.is-on { border-color: var(--brand); background: var(--brand-soft); }
.km-top { display: flex; align-items: center; gap: 6px; }
.km-top .ic { width: 16px; height: 16px; color: var(--brand-text); }
.km-top b { font-size: .86rem; }
.km-model { font-weight: 600; font-size: .76rem; color: var(--ink-2); }
.km-where { font-size: .72rem; color: var(--ink-3); }
.km-amp { display: flex; gap: 4px; margin-top: 6px; }
.km-block { display: flex; margin-top: 4px; align-items: center; gap: 3px; font-weight: 800; font-size: .66rem; color: var(--bad-ink); }
.km-block .ic { width: 12px; height: 12px; }
.k-tasks { display: flex; flex-wrap: wrap; gap: 6px; }
.k-ask { display: flex; gap: 8px; align-items: center; }
.k-prompt { flex: 1; min-width: 0; height: 46px; border-radius: var(--r-3); border: 1.5px solid var(--line-2); padding: 0 14px; font: .9rem/1 var(--font-body); color: var(--ink); }
.k-hint { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-3); background: var(--lime-soft); font-size: .88rem; }
.k-hint .ic { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.pick { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.pick-row { display: grid; grid-template-columns: auto 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-2); border: 1px solid var(--line); cursor: pointer; }
.pick-row:hover { background: var(--soft); }
.pick-row > .ic { width: 16px; height: 16px; color: var(--brand-text); }
.pick-name { display: flex; flex-direction: column; min-width: 0; }
.pick-name b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-name small { font-size: .72rem; color: var(--ink-3); }
@container (max-width: 820px) { .app-ki { display: flex; flex-direction: column; overflow-y: auto; } .k-left { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; } .k-main { overflow: visible; } .k-ask { flex-wrap: wrap; } }

/* ---------- Angebote ---------- */
.app-angebote { display: flex; flex-direction: column; min-height: 0; }
.a-steps { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--sheet-2); list-style: none; }
.a-steps li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-3); }
.a-steps li + li::before { content: ''; width: 26px; height: 2px; background: var(--line-2); margin-right: 2px; }
.a-steps span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-2); font-weight: 800; font-size: .76rem; background: var(--sheet); }
.a-steps .is-on span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.a-steps .is-on b { color: var(--ink); }
.a-steps .is-done span { background: #2f8a43; border-color: #2f8a43; color: #fff; }
.a-main { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 24px; }
.a-intro h3 { font-size: 1.3rem; }
.a-intro p { color: var(--ink-2); margin: 4px 0 14px; }
.a-reqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.a-req { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r-3); border: 2px solid var(--line); background: var(--sheet); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.a-req:hover { border-color: var(--brand); box-shadow: none; }
.a-req.is-done { opacity: .7; }
.a-req-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.a-req-top .ic { width: 16px; height: 16px; color: var(--brand-text); }
.a-req-top small { color: var(--ink-3); font-size: .74rem; }
.a-req-subj { font-weight: 800; font-size: 1rem; }
.a-req-sum { font-size: .86rem; color: var(--ink-2); }
.a-req-go { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--brand-text); font-weight: 700; font-size: .86rem; }
.a-req-go .ic { width: 16px; height: 16px; }
.a-two { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 18px; align-items: start; }
.a-label { font: 800 .72rem/1.2 var(--font-body); text-transform: none; color: var(--ink-3); margin-bottom: 8px; }
.a-mailtext { background: var(--sheet-2); border: 1px solid var(--line); border-radius: var(--r-3); padding: 14px 16px; font-size: .86rem; }
.a-mailtext p { margin: 0 0 8px; }
.a-hints { margin-top: 12px; }
.a-scan { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-3); background: var(--brand-soft); font-size: .86rem; margin-bottom: 10px; }
.a-scan.is-done { background: var(--ok-soft); color: var(--ok-ink); font-weight: 600; }
.a-scan .ic { width: 17px; height: 17px; flex: none; }
.a-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.a-table th { text-align: left; font-weight: 800; font-size: .7rem; text-transform: none; color: var(--ink-3); padding: 6px; }
.a-table td { padding: 8px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.a-table td b { display: block; }
.a-table td small { display: block; font-size: .7rem; color: var(--ink-3); margin-top: 2px; }
.a-table tr.is-in { animation: fade-up .35s var(--ease) both; }
.a-unit { font-size: .72rem; color: var(--ink-3); margin-left: 4px; }
.a-tot { font-weight: 800; white-space: nowrap; text-align: right; }
.a-addrow { margin: 8px 0; }
.a-sums { margin-left: auto; width: min(340px, 100%); display: flex; flex-direction: column; gap: 5px; font-size: .88rem; }
.a-sums > div, .a-sums > label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.a-rab { cursor: pointer; }
.a-rab span { flex: 1; }
.a-sum-total { border-top: 2px solid var(--ink); padding-top: 6px; font-size: 1rem; }
.a-sum-total b { font: 800 1.15rem/1 var(--font-display); }
.a-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.a-foot--col { flex-direction: column; align-items: stretch; }
.a-preview { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.a-side { display: flex; flex-direction: column; gap: 4px; }
.letter { background: var(--sheet); border: 1px solid var(--line); border-top: 6px solid var(--brand); box-shadow: 0 1px 4px rgb(var(--shade) / .22); padding: 26px 32px 30px; font-size: .82rem; line-height: 1.5; color: var(--ink); max-width: 760px; }
.l-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.l-firm b { display: block; color: var(--brand-text); font: 800 1.1rem/1.2 var(--font-display); }
.l-firm small { color: var(--ink-3); }
.l-addr { margin-bottom: 12px; }
.l-addr small { font-size: .64rem; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); }
.l-date { text-align: right; color: var(--ink-3); }
.letter h4 { font: 800 1.1rem/1.2 var(--font-body); letter-spacing: 0; margin: 8px 0 2px; }
.l-ref { color: var(--ink-3); font-size: .76rem; margin-bottom: 12px; }
.letter > p { margin-bottom: 8px; }
.l-intro { min-height: 2.6em; }
.l-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.l-table th { background: var(--brand-soft); color: var(--brand-text); text-align: left; padding: 6px 8px; font-size: .72rem; }
.l-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.l-table td:nth-child(n+3), .l-table th:nth-child(n+3) { text-align: right; white-space: nowrap; }
.l-sums { margin: 8px 0 0 auto; width: 260px; max-width: 100%; }
.l-sums p { display: flex; justify-content: space-between; gap: 10px; margin: 2px 0; }
.l-total { border-top: 2px solid var(--brand); padding-top: 4px; font-weight: 800; }
.l-cond { margin: 14px 0; color: var(--ink-2); font-size: .78rem; }
.a-send { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.a-mailbox { border: 1px solid var(--line); border-radius: var(--r-3); padding: 16px; background: var(--sheet); }
.a-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .86rem; margin-bottom: 10px; }
.a-dl dt { color: var(--ink-3); }
.a-dl dd { margin: 0; font-weight: 700; }
.a-cover { white-space: pre-wrap; font: .9rem/1.55 var(--font-body); background: var(--soft); border-radius: var(--r-3); padding: 12px 14px; margin: 0 0 10px; min-height: 150px; }
.a-opt { display: flex; align-items: center; gap: 8px; font-size: .86rem; margin: 6px 0; cursor: pointer; }
.a-opt input { width: 18px; height: 18px; accent-color: var(--brand); }
.a-done { text-align: center; max-width: 540px; margin: 16px auto; }
.a-done-ic { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #2f8a43; color: #fff; margin: 0 auto 14px; animation: pop-in .6s var(--ease) both; }
.a-done-ic .ic { width: 38px; height: 38px; stroke-width: 3; }
.a-done h3 { font-size: 1.6rem; }
.a-done ul { list-style: none; margin: 14px 0; text-align: left; }
.a-done li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.a-done-time { background: var(--lime-soft); padding: 12px 14px; border-radius: var(--r-3); font-size: .95rem; }
.a-done .a-foot { justify-content: center; }
@container (max-width: 900px) { .a-two, .a-preview, .a-send { grid-template-columns: 1fr; } .letter { padding: 20px; } }

/* ---------- Projekte ---------- */
.app-projekte { --spl-d: 270px; display: grid; grid-template-columns: var(--spl, var(--spl-d)) minmax(0, 1fr); min-height: 0; }
.pj-left { border-right: 1px solid var(--line); overflow-y: auto; padding: 14px; background: var(--sheet-2); }
.pj-list { display: flex; flex-direction: column; gap: 8px; }
.pj-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 12px; border-radius: var(--r-3); border: 2px solid var(--line); background: var(--sheet); text-align: left; cursor: pointer; }
.pj-card:hover { border-color: var(--brand-line); }
.pj-card.is-on { border-color: var(--brand); background: var(--brand-soft); }
.pj-nr { grid-column: 1 / -1; font-weight: 800; font-size: .7rem; color: var(--brand-text); letter-spacing: .02em; }
.pj-card b { grid-column: 1 / -1; font-size: .9rem; }
.pj-card small { grid-column: 1 / -1; font-size: .74rem; color: var(--ink-3); margin-bottom: 4px; }
.pj-bar { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pj-bar > span { display: block; height: 100%; width: var(--p, 0%); background: var(--brand); border-radius: inherit; transition: width .6s var(--ease); }
.pj-bar--h.is-warn > span { background: var(--amber); }
.pj-pct { font-weight: 800; font-size: .74rem; }
.pj-main { overflow-y: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pj-head h3 { font-size: 1.35rem; }
.pj-meta { font-size: .84rem; color: var(--ink-3); }
.pj-kpi { min-width: 150px; text-align: right; }
.pj-kpi span { display: block; font-size: .72rem; color: var(--ink-3); }
.pj-kpi b { display: block; font-weight: 800; margin-bottom: 4px; }
.pj-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-out:empty { display: none; }
.kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kb-col { background: var(--sheet-2); border-radius: var(--r-3); padding: 10px; min-height: 200px; transition: outline-color .15s; outline: 2px dashed transparent; }
.kb-col.is-over { outline-color: var(--brand); }
.kb-col h4 { display: flex; align-items: center; justify-content: space-between; font: 800 .8rem/1.2 var(--font-body); color: var(--ink-2); margin: 2px 4px 8px; letter-spacing: 0; }
.kb-col h4 small { background: var(--sheet); padding: 1px 8px; border-radius: var(--r-2); font-size: .72rem; }
.kb-card { background: var(--sheet); border-radius: var(--r-3); padding: 10px 12px; margin-bottom: 8px; box-shadow: none; cursor: grab; }
.kb-card.is-new { box-shadow: inset 3px 0 0 var(--lime); animation: fade-up .4s var(--ease) both; }
.kb-card.is-drag { opacity: .45; }
.kb-card p { font-weight: 600; font-size: .84rem; line-height: 1.35; }
.kb-col--done .kb-card p { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.kb-src { display: flex; align-items: center; gap: 4px; font-size: .68rem; color: var(--brand-text); margin-top: 4px; }
.kb-src .ic { width: 11px; height: 11px; flex: none; }
.kb-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.kb-who { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft-2); color: var(--brand-text); font-weight: 800; font-size: .62rem; flex: none; }
.kb-due { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--ink-3); }
.kb-due .ic { width: 12px; height: 12px; }
.kb-move { margin-left: auto; display: flex; gap: 2px; }
.kb-move button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: var(--r-2); background: var(--soft); color: var(--ink-2); cursor: pointer; }
.kb-move button:hover { background: var(--brand-soft-2); color: var(--brand-text); }
.kb-move .ic { width: 14px; height: 14px; }
.gantt { padding: 12px 18px 4px; }
.g-track { position: relative; height: 14px; background: var(--line); border-radius: 999px; margin: 42px 0 58px; }
.g-done { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--brand-line); border-radius: inherit; }
.g-today { position: absolute; left: var(--x); top: -16px; bottom: -16px; width: 2px; background: var(--red); }
.g-today small { position: absolute; top: -18px; left: 50%; translate: -50% 0; color: var(--red); font-weight: 800; font-size: .68rem; white-space: nowrap; }
.g-mile { position: absolute; left: var(--x); top: 50%; translate: -50% -50%; }
.g-mile i { display: block; width: 16px; height: 16px; rotate: 45deg; background: var(--sheet); border: 3px solid var(--brand); }
.g-mile.is-done i { background: var(--brand); }
.g-mile b, .g-mile small { position: absolute; left: 50%; translate: -50% 0; white-space: nowrap; }
.g-mile b { top: 22px; font-size: .74rem; }
.g-mile small { top: 38px; font-size: .68rem; color: var(--ink-3); }
.g-scale { display: flex; justify-content: space-between; font-size: .72rem; color: var(--ink-3); }
.g-list { list-style: none; margin-top: 14px; }
.g-list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.g-list .ic { width: 16px; height: 16px; color: var(--brand-text); }
.g-list span { margin-left: auto; color: var(--ink-3); }
.g-list .is-done { color: var(--ink-3); }
.pf { list-style: none; }
.pf button { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; width: 100%; padding: 10px; border: 0; border-radius: var(--r-2); background: none; text-align: left; cursor: pointer; }
.pf button:hover { background: var(--soft); }
.pf .ic { width: 17px; height: 17px; color: var(--brand-text); margin-top: 1px; }
.pf-t { font-weight: 600; font-size: .86rem; }
.pf small { grid-column: 2; font-size: .72rem; color: var(--ink-3); }
.sug-tasks { list-style: none; }
.sug-tasks li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.sug-tasks b { display: block; font-size: .88rem; }
.sug-tasks small { font-size: .72rem; color: var(--ink-3); }
.sug-tasks li.is-done { justify-content: flex-start; color: var(--ok-ink); font-weight: 700; font-size: .86rem; }
.sug-tasks li.is-done .ic { width: 16px; height: 16px; }
@container (max-width: 860px) {
  .app-projekte { display: flex; flex-direction: column; overflow-y: auto; }
  .pj-left { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .pj-list { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .pj-card { min-width: 220px; }
  .pj-main { overflow: visible; }
}
@container (max-width: 620px) { .kb { grid-template-columns: 1fr; } .pj-head { flex-direction: column; } .pj-kpi { text-align: left; } }

/* ---------- Besprechungen ---------- */
.app-besprechung { display: flex; flex-direction: column; min-height: 0; }
.b-main { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; }
.b-idle { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 620px; margin: 10px auto; text-align: center; }
.b-idle h3 { font-size: 1.4rem; }
.b-people { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.b-who { display: inline-block; font-weight: 800; font-size: .74rem; padding: 3px 10px; border-radius: var(--r-2); white-space: nowrap; }
.sp0 { background: var(--soft-2); color: var(--violet-ink); } .sp1 { background: var(--info-soft); color: var(--info-ink); } .sp2 { background: var(--ok-soft); color: #0f6f6b; } .sp3 { background: var(--warn-soft); color: #94480c; } .sp4 { background: var(--bad-soft); color: #962457; }
.b-rec { display: inline-flex; align-items: center; gap: 12px; height: 62px; padding: 0 30px; border-radius: 999px; border: 0; background: #c8452e; color: #fff; font-weight: 800; font-size: 1.05rem; cursor: pointer; box-shadow: none; }
.b-rec:hover { background: #b13a24; }
.b-rec-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--sheet); flex: none; }
.b-rec-dot.is-on { background: #e05a47; animation: blink 1s infinite; }
.b-note { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; color: var(--ink-3); text-align: left; max-width: 540px; }
.b-note > .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.b-last { width: 100%; text-align: left; margin-top: 10px; }
.b-last h4 { font: 800 .72rem/1.2 var(--font-body); text-transform: none; color: var(--ink-3); margin-bottom: 6px; }
.b-last ul { list-style: none; }
.b-last li { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; padding: 6px 0; border-top: 1px solid var(--line); }
.b-last .ic { width: 15px; height: 15px; color: var(--brand-text); flex: none; margin-top: 2px; }
.b-live { display: flex; flex-direction: column; height: 100%; }
.b-live-head { display: flex; align-items: center; gap: 10px; font-weight: 700; flex-wrap: wrap; }
.b-live-head b { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.b-sp { flex: 1; }
.b-wave { display: grid; place-items: center; height: 70px; color: var(--bad-ink); margin: 6px 0; flex: none; }
.b-wave .wave { height: 58px; gap: 4px; }
.b-wave .wave span { width: 4px; }
.b-scroll { flex: 1; min-height: 120px; overflow-y: auto; }
.b-lines { list-style: none; }
.b-lines li { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); animation: fade-up .3s var(--ease) both; }
.b-lines .b-who { justify-self: start; }
.b-lines p { font-size: .92rem; }
.b-proc { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 10px; }
.b-steps { width: min(380px, 100%); color: var(--ink); }
.b-steps .boot-ok { color: var(--ok-ink); margin-left: 0; }
.b-prot { max-width: 820px; margin: 0 auto; animation: fade-up .35s var(--ease) both; }
.b-prot header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.b-prot header h3 { font-size: 1.3rem; }
.b-prot header p { font-size: .8rem; color: var(--ink-3); }
.b-prot .b-people { justify-content: flex-start; font-size: .88rem; display: block; }
.b-sec { margin: 16px 0; }
.b-sec h4 { font: 800 .72rem/1.2 var(--font-body); text-transform: none; color: var(--ink-3); margin-bottom: 6px; }
.b-dec { list-style: none; }
.b-dec li { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: .92rem; }
.b-dec .ic { width: 16px; height: 16px; color: var(--ok-ink); flex: none; }
.b-todos { width: 100%; border-collapse: collapse; }
.b-todos th { text-align: left; font-weight: 800; font-size: .7rem; text-transform: none; color: var(--ink-3); padding: 6px; }
.b-todos td { padding: 8px 6px; border-top: 1px solid var(--line); font-size: .88rem; }
.b-todos td:last-child { white-space: nowrap; }
.b-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
@container (max-width: 620px) { .b-lines li { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Spracheingabe ---------- */
.app-sprache { padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.sp-top { display: flex; align-items: center; gap: 22px; }
.sp-top h3 { font-size: 1.4rem; }
.sp-top p { color: var(--ink-2); margin: 2px 0 10px; }
.sp-mic { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; border: 0; background: #c8452e; color: #fff; cursor: pointer; flex: none; box-shadow: 0 0 0 10px rgba(200, 69, 46, .12); transition: transform .15s; }
.sp-mic:hover { transform: scale(1.04); }
.sp-mic .ic { width: 42px; height: 42px; }
.sp-mic.is-on { animation: ring 1.2s infinite; }
.sp-text { width: 100%; min-height: 120px; border-radius: var(--r-3); border: 1.5px solid var(--line-2); padding: 14px 16px; font: 1rem/1.55 var(--font-body); color: var(--ink); resize: vertical; }
.sp-stats { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: .84rem; color: var(--ink-2); }
.sp-stats > span { display: flex; align-items: center; gap: 6px; }
.sp-stats .ic { width: 15px; height: 15px; color: var(--brand-text); }
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-card { border: 1px solid var(--line); border-radius: var(--r-3); padding: 14px 16px; background: var(--sheet-2); }
.sp-card h4 { font-size: .98rem; margin-bottom: 8px; }
.sp-cmp { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; }
.sp-bad { color: var(--bad-ink); text-decoration: line-through; }
.sp-good { color: var(--ok-ink); font-weight: 700; }
.sp-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sp-where { list-style: none; }
.sp-where li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .88rem; }
.sp-where .ic { width: 16px; height: 16px; color: var(--brand-text); }
@container (max-width: 680px) { .sp-grid { grid-template-columns: 1fr; } .sp-top { flex-direction: column; align-items: flex-start; } }

/* ---------- Wissen ---------- */
.app-wissen { --spl-d: 270px; display: grid; grid-template-columns: var(--spl, var(--spl-d)) minmax(0, 1fr); min-height: 0; }
.w-left { border-right: 1px solid var(--line); overflow-y: auto; padding: 14px; background: var(--sheet-2); }
.w-src { list-style: none; margin-bottom: 12px; }
.w-src li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 4px; font-size: .8rem; }
.w-src .ic { width: 15px; height: 15px; color: var(--brand-text); }
.w-src small { color: var(--ink-3); }
.w-left .k-note { margin-bottom: 14px; }
.w-hist { list-style: none; }
.w-hist button { border: 0; background: none; text-align: left; font-size: .8rem; color: var(--brand-text); padding: 4px 0; cursor: pointer; }
.w-main { padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.w-hero h3 { font-size: 1.4rem; }
.w-hero p { color: var(--ink-2); }
.w-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.w-card { border: 1px solid var(--line); border-radius: var(--r-3); padding: 16px 18px; background: var(--sheet); box-shadow: none; animation: fade-up .3s var(--ease) both; }
.w-q { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-2); margin-bottom: 8px; }
.w-q .ic { width: 16px; height: 16px; color: var(--brand-text); flex: none; }
.w-a { font-size: 1rem; line-height: 1.6; }
@container (max-width: 780px) { .app-wissen { display: flex; flex-direction: column-reverse; overflow-y: auto; } .w-left { border-right: 0; border-top: 1px solid var(--line); overflow: visible; } .w-main { overflow: visible; } }

/* ---------- Abläufe ---------- */
.app-ablaeufe { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.ab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ab-head h3 { font-size: 1.35rem; }
.ab-head p { color: var(--ink-2); font-size: .9rem; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.ab-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-3); border: 2px solid var(--line); background: var(--sheet); transition: border-color .2s, box-shadow .2s; }
.ab-card.is-on { border-color: #3aa553; box-shadow: 0 0 0 4px rgba(58, 165, 83, .12); }
.ab-card header { display: flex; align-items: center; gap: 10px; }
.ab-card h4 { flex: 1; font-size: 1rem; }
.ab-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-3); background: var(--soft); color: var(--brand-text); flex: none; }
.ab-ic .ic { width: 20px; height: 20px; }
.ab-card.is-on .ab-ic { background: var(--ok-soft); color: var(--ok-ink); }
.ab-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .74rem; }
.ab-trig, .ab-step, .ab-res { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--r-2); }
.ab-trig { background: var(--warn-soft); color: var(--warn-ink); font-weight: 800; }
.ab-step { background: var(--soft); color: var(--ink-2); font-weight: 600; }
.ab-res { background: var(--ok-soft); color: var(--ok-ink); font-weight: 800; }
.ab-trig .ic, .ab-res .ic { width: 12px; height: 12px; }
.ab-arr { width: 13px; height: 13px; color: var(--ink-3); }
.ab-how { font-size: .82rem; color: var(--ink-2); }
.ab-card footer { display: flex; align-items: center; gap: 4px; }
.ab-save { font-size: .84rem; color: var(--ink-2); }
.ab-save b { color: var(--ink); font-weight: 800; }
.ab-status { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink-3); font-weight: 600; }
.ab-card.is-on .ab-status { color: var(--ok-ink); }
.ab-logbox { border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px 16px; background: var(--sheet-2); }
.ab-logbox h4 { display: flex; align-items: center; gap: 8px; font-size: .86rem; margin-bottom: 6px; }
.ab-log { list-style: none; }
.ab-log li { display: grid; grid-template-columns: 44px 18px minmax(0, 1fr); gap: 8px; align-items: center; font-size: .8rem; padding: 4px 0; animation: fade-in .4s both; }
.ab-log .ic { width: 15px; height: 15px; color: var(--ok-ink); }

/* ---------- Ersparnis ---------- */
.app-ersparnis { padding: 18px 22px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.e-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; background: var(--night); color: var(--on-night); border-radius: var(--r-3); padding: 22px 24px; }
.e-hero .info-btn { color: var(--on-night-2); }
.e-hero .info-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.e-kicker { display: flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--on-night-2); flex-wrap: wrap; }
.e-kicker b { color: #fff; }
.e-big { display: block; font: 800 clamp(2.6rem, 6.5cqw, 4.2rem)/1 var(--font-display); color: var(--lime); letter-spacing: -.035em; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.e-unit { font-size: .84rem; color: var(--on-night-2); }
.e-kpis { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 22px; margin-top: 18px; }
.e-kpis b { display: block; font: 800 1.3rem/1.1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.e-kpis span { display: flex; align-items: center; font-size: .74rem; color: var(--on-night-2); }
.e-kpis .info-btn { width: 18px; height: 18px; }
.e-hero-r { display: flex; flex-direction: column; gap: 12px; }
.e-pot { background: rgba(255, 255, 255, .08); border-radius: var(--r-3); padding: 14px 16px; font-size: .84rem; color: var(--on-night-2); }
.e-pot b { display: block; font: 800 1.9rem/1.1 var(--font-display); color: #fff; margin: 2px 0; letter-spacing: -.02em; }
.e-pot span { font-size: .78rem; }
.e-basis { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--on-night-2); }
.e-basis b { color: #fff; }
.e-basis p { flex: 1; }
.e-hero .ob-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.e-hero .ob-btn--ghost:hover { border-color: var(--lime); color: var(--lime); }
.e-caut { display: flex; align-items: center; gap: 10px; font-size: .86rem; }
.e-chart, .e-table { border: 1px solid var(--line); border-radius: var(--r-3); padding: 16px 18px; background: var(--sheet); }
.e-chart h3, .e-table h3 { font-size: 1.1rem; margin-bottom: 10px; }
.e-chart ul { list-style: none; }
.e-chart li { display: grid; grid-template-columns: 200px minmax(0, 1fr) 140px; gap: 12px; align-items: center; padding: 5px 0; }
.ec-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .86rem; min-width: 0; }
.ec-name span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-bar { position: relative; height: 14px; }
.ec-pot, .ec-found { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: var(--r-2); }
.ec-pot { background: var(--soft-2); }
.ec-found { background: var(--brand); transition: width .8s var(--ease); }
.ec-val { text-align: right; }
.ec-val b { font-size: .9rem; }
.ec-val small { display: block; font-size: .7rem; color: var(--ink-3); }
.e-legend { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--ink-3); margin-top: 8px; }
.lg { display: inline-block; width: 14px; height: 8px; border-radius: var(--r-2); }
.lg--found { background: var(--brand); }
.lg--pot { background: var(--soft-2); margin-left: 10px; }
.e-scroll { overflow-x: auto; }
.e-table table { width: 100%; min-width: 760px; border-collapse: collapse; }
.e-table th { text-align: left; font-weight: 800; font-size: .7rem; text-transform: none; color: var(--ink-3); padding: 6px 8px; white-space: nowrap; }
.e-table td { padding: 8px; border-top: 1px solid var(--line); vertical-align: middle; font-size: .84rem; }
.e-table td b { display: block; }
.e-table td small { display: block; font-size: .72rem; color: var(--ink-3); }
.e-table tr:not(.is-found) td b { color: var(--ink-2); font-weight: 600; }
.e-ok, .e-no { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.e-ok { background: #2f8a43; color: #fff; }
.e-ok .ic { width: 13px; height: 13px; stroke-width: 3; }
.e-no { color: var(--line-2); }
.e-no .ic { width: 20px; height: 20px; }
.e-try { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; margin-top: 2px; color: var(--brand-text); font-weight: 700; font-size: .74rem; cursor: pointer; }
.e-try .ic { width: 13px; height: 13px; }
.e-table .a-num { width: 82px; }
.e-val { white-space: nowrap; text-align: right; }
.e-val b { display: inline !important; }
.e-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--lime-soft); border-radius: var(--r-3); padding: 18px 20px; }
.e-cta h3 { font-size: 1.2rem; }
.e-cta p { font-size: .9rem; color: var(--ink-2); margin-top: 4px; }
.e-cta-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.e-fine { font-size: .78rem; color: var(--ink-3); }
@container (max-width: 880px) {
  .e-hero, .e-cta { grid-template-columns: 1fr; }
  .e-kpis { grid-template-columns: repeat(2, auto); gap: 12px 22px; }
  .e-chart li { grid-template-columns: 130px minmax(0, 1fr) 100px; }
  .e-cta-btns { justify-content: flex-start; }
}

/* ---------- Datenschutz ---------- */
.app-datenschutz { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.ds-hero { display: flex; align-items: center; gap: 14px; background: var(--ok-soft); border: 1px solid var(--ok-line); border-radius: var(--r-3); padding: 16px 18px; }
.ds-hero > div { flex: 1; }
.ds-shield { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-3); background: #2f8a43; color: #fff; flex: none; }
.ds-shield .ic { width: 28px; height: 28px; }
.ds-hero h3 { font-size: 1.25rem; }
.ds-hero p { color: var(--ink-2); font-size: .9rem; }
.ds-content { display: flex; flex-direction: column; gap: 10px; }
.ds-bar { display: flex; height: 32px; border-radius: var(--r-2); overflow: hidden; margin: 6px 0 4px; }
.ds-seg { display: grid; place-items: center; width: var(--w); color: #fff; font-weight: 800; font-size: .74rem; white-space: nowrap; overflow: hidden; }
.ds-seg--gruen { background: #3aa553; } .ds-seg--gelb { background: #d79a00; } .ds-seg--rot { background: #c8452e; }
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th { text-align: left; font-weight: 800; font-size: .7rem; text-transform: none; color: var(--ink-3); padding: 8px; }
.ds-table td { padding: 9px 8px; border-top: 1px solid var(--line); font-size: .85rem; vertical-align: middle; }
.ds-table td > .ic { width: 15px; height: 15px; color: var(--ink-3); margin-right: 6px; vertical-align: -3px; }
.ds-table td small { display: block; font-size: .72rem; color: var(--ink-3); }
.ds-log { min-width: 720px; }
.ds-pick { display: inline-flex; gap: 8px; }
.ds-dot { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--sheet); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; opacity: .3; padding: 0; }
.ds-dot--gruen { background: #3aa553; } .ds-dot--gelb { background: #d79a00; } .ds-dot--rot { background: #c8452e; }
.ds-dot.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
.ds-dot:hover { opacity: .8; }
.ds-file { display: inline-block; background: var(--soft); padding: 1px 8px; border-radius: 6px; margin: 2px 4px 2px 0; font-size: .74rem; }
.ds-testhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ds-testhead p { flex: 1; min-width: 260px; font-size: .88rem; color: var(--ink-2); }
.ds-test { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ds-test li { display: grid; grid-template-columns: 22px 150px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-3); font-size: .86rem; animation: fade-up .3s var(--ease) both; }
.ds-test li > .ic { width: 18px; height: 18px; color: var(--brand-text); }
.ds-test li > span:nth-child(3) { color: var(--ink-2); }
.ds-pass { display: flex; align-items: center; gap: 4px; color: var(--ok-ink); font-weight: 800; }
.ds-pass .ic { width: 15px; height: 15px; }
.ds-test li.ds-sum { grid-template-columns: 22px auto minmax(0, 1fr); background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
.ds-test li.ds-sum > .ic { color: var(--ok-ink); }
@container (max-width: 640px) { .ds-test li { grid-template-columns: 22px minmax(0, 1fr) auto; } .ds-test li > span:nth-child(3) { grid-column: 2 / -1; } }

/* ---------- Module (Katalog) ---------- */
.app-store { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.st-head { display: flex; justify-content: space-between; gap: 10px; }
.st-head h3 { font-size: 1.35rem; }
.st-head p { color: var(--ink-2); font-size: .9rem; }
.app-store .m-chips { padding: 0; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.st-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--sheet); box-shadow: none; }
.st-card header { display: flex; align-items: center; gap: 12px; }
.st-card header > div { flex: 1; min-width: 0; }
.st-card h4 { font-size: 1rem; }
.st-card header p { font-size: .8rem; color: var(--ink-3); }
.st-card .ob-mod-rec { position: static; align-self: flex-start; }
.st-desc { font-size: .84rem; color: var(--ink-2); }
.st-ben { display: flex; gap: 6px; align-items: flex-start; font-size: .8rem; color: var(--ink-2); }
.st-ben .ic { width: 15px; height: 15px; color: var(--amber); flex: none; margin-top: 2px; }
.st-pot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 10px; background: var(--brand-soft); border-radius: var(--r-3); padding: 9px 12px; }
.st-pot span { font-size: .74rem; color: var(--ink-3); }
.st-pot b { color: var(--brand-text); font-weight: 800; font-size: .95rem; }
.st-pot small { grid-column: 1 / -1; font-size: .7rem; color: var(--ink-3); }
.st-card footer { display: flex; gap: 6px; margin-top: auto; }
.st-prog { display: none; height: 4px; border-radius: 999px; background: var(--soft-2); overflow: hidden; }
.st-prog span { display: block; height: 100%; width: 0; background: var(--brand); animation: fill .9s var(--ease) forwards; }
.st-card.is-installing .st-prog { display: block; }
.st-card.is-inst { border-color: var(--brand-line); }
.st-card.is-soon { background: var(--sheet-2); border-style: dashed; box-shadow: none; }
.st-card.is-soon h4 { color: var(--ink-2); }

/* ---------- Einstellungen ---------- */
.app-einstellungen { padding: 18px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.set-sec { border: 1px solid var(--line); border-radius: var(--r-3); padding: 16px 18px; background: var(--sheet); }
.set-sec h3 { font-size: 1.1rem; margin-bottom: 6px; }
.set-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: center; margin: 10px 0; }
.set-row > span { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: .88rem; color: var(--ink-2); }
.set-row .ob-input { height: 46px; font-size: 1rem; }
.set-row .ob-logo { margin: 0; }
.set-btns { display: flex; flex-wrap: wrap; gap: 8px; }
@container (max-width: 600px) { .set-row { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Einrichtung: Aufgabenbereiche ---------- */
.ob-note--top { margin: -4px 0 10px; }
.ob-chip-row { display: flex; align-items: center; gap: 8px; }
.ob-chip-row .ic { width: 17px; height: 17px; color: var(--brand-text); flex: none; }
.ob-chip--dept small { padding-left: 25px; }
.set-depts { display: flex; flex-wrap: wrap; gap: 6px; }
.owin .win-body { position: relative; }

/* ---------- Buchhaltung & Zahlungen ---------- */
.app-buchhaltung { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.bh-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.bh-kpi { border: 1px solid var(--line); border-radius: var(--r-3); padding: 10px 14px; background: var(--sheet); }
.bh-kpi span { display: block; font-size: .74rem; color: var(--ink-3); font-weight: 600; }
.bh-kpi b { display: block; font: 800 1.2rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.bh-kpi.is-warn b { color: var(--bad-ink); }
.bh-kpi.is-good b { color: var(--ok-ink); }
.bh-banner:empty { display: none; }
.bh-connect { align-items: center; margin: 0; }
.bh-connect p { flex: 1; }
.bh-content { display: flex; flex-direction: column; gap: 10px; }
.bh-table { min-width: 560px; }
.bh-table td small { display: block; }
.bh-st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-2); font-weight: 700; font-size: .74rem; white-space: nowrap; }
.bh-st .ic { width: 13px; height: 13px; }
.bh-st--ok { background: var(--ok-soft); color: var(--ok-ink); }
.bh-st--warn { background: var(--warn-soft); color: var(--warn-ink); }
.bh-st--bad { background: var(--bad-soft); color: var(--bad-ink); }
.bh-st--neutral { background: var(--soft); color: var(--ink-2); }
.bh-st--new { background: var(--lime-soft); color: var(--lime-ink); }
.bh-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bh-actions .pj-tip { margin: 0; flex: 1; min-width: 240px; }
.bh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bh-top > p { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; color: var(--ink-3); flex: 1; min-width: 240px; }
.bh-top > p .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.bh-pay { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bh-pay li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sheet); }
.bh-pay li > .bh-st, .bh-pay li > .ob-btn { grid-column: 2 / -1; justify-self: start; }
.bh-pay li.is-scan { animation: scan .5s ease-out; }
.bh-pay li.is-done { border-color: var(--ok-line); }
.bh-date { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bh-from { display: flex; flex-direction: column; min-width: 0; }
.bh-from b { font-size: .88rem; }
.bh-from small { font-size: .74rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-amt { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ok-ink); }
.bh-pick { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .88rem; color: var(--ink-2); flex-wrap: wrap; }
.bh-select { width: auto; min-width: 280px; max-width: 100%; }
.bh-inv { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.bh-inv-side { display: flex; flex-direction: column; gap: 8px; }
.bh-sub { font: 800 .74rem/1.2 var(--font-body); text-transform: none; color: var(--ink-3); margin-top: 6px; }
.bh-stb .b-steps { margin: 6px 0 0; }
@container (max-width: 820px) { .bh-inv { grid-template-columns: 1fr; } }
@container (max-width: 640px) {
  .bh-head { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bh-kpi { padding: 8px 10px; }
  .bh-kpi b { font-size: 1rem; }
  .bh-connect { flex-wrap: wrap; }
  .bh-connect p { flex: 1 1 200px; }
  .bh-connect .ob-btn { width: 100%; }
  .bh-pay li { grid-template-columns: minmax(0, 1fr) auto; }
  .bh-pay li > .bh-date { grid-column: 1 / -1; }
  .bh-pay li > .bh-st, .bh-pay li > .ob-btn { grid-column: 1 / -1; }
  .bh-select { min-width: 0; width: 100%; }
}
.pj-tabs { overflow-x: auto; scrollbar-width: none; }
.pj-tab { white-space: nowrap; flex: none; }

/* ---------- Kunden ---------- */
.app-kunden { --spl-d: 270px; display: grid; grid-template-columns: var(--spl, var(--spl-d)) minmax(0, 1fr); min-height: 0; }
.app-kunden .pj-card .bh-st { grid-column: 1 / -1; justify-self: start; }
.app-kunden .pj-head .bh-st { flex: none; }
.app-kunden .bh-head { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kd-next { margin: 0; }
.kd-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.kd-box { border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px 14px; background: var(--sheet); }
.kd-box h4 { display: flex; align-items: center; gap: 4px; font: 800 .74rem/1.2 var(--font-body); text-transform: none; color: var(--ink-3); margin-bottom: 6px; }
.kd-ton { font-weight: 700; font-size: .95rem; }
@container (max-width: 860px) {
  .app-kunden { display: flex; flex-direction: column; overflow-y: auto; }
  .app-kunden .pj-left { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .app-kunden .pj-list { flex-direction: row; overflow-x: auto; }
  .app-kunden .pj-card { min-width: 220px; }
  .app-kunden .pj-main { overflow: visible; }
  .kd-grid { grid-template-columns: 1fr; }
}

/* ---------- Freigaben ---------- */
.app-freigaben { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.fg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fg-head h3 { font-size: 1.35rem; }
.fg-head p { color: var(--ink-2); font-size: .9rem; }
.fg-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fg-next { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--ok-ink); }
.fg-list { display: flex; flex-direction: column; gap: 8px; }
.fg-item { display: grid; grid-template-columns: auto 38px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sheet); transition: opacity .2s, translate .2s; animation: fade-up .3s var(--ease) both; }
.fg-item.is-gone { opacity: 0; translate: 30px 0; }
.fg-cb input { width: 18px; height: 18px; margin-top: 10px; accent-color: var(--brand); }
.fg-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-2); background: var(--brand-soft-2); color: var(--brand-text); }
.fg-ic .ic { width: 18px; height: 18px; }
.fg-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fg-main b { font-size: .92rem; }
.fg-main small { font-size: .74rem; color: var(--ink-3); }
.fg-prev { margin-top: 6px; font-size: .84rem; color: var(--ink-2); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fg-prev[hidden], .fg-edit[hidden] { display: none; }
.fg-edit { min-height: 160px; }
.fg-btns { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.fg-empty-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
@container (max-width: 640px) { .fg-item { grid-template-columns: auto minmax(0, 1fr); } .fg-ic { display: none; } .fg-btns { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } }

/* ---------- Verbindungen ---------- */
.app-verbindungen { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.vb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.vb-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--r-3); background: var(--sheet); }
.vb-card.is-on { border-color: #3aa553; box-shadow: 0 0 0 4px rgba(58, 165, 83, .1); }
.vb-card header { display: flex; align-items: center; gap: 10px; }
.vb-card header > div { flex: 1; min-width: 0; }
.vb-card h4 { font-size: 1rem; }
.vb-card header small { font-size: .76rem; color: var(--ink-3); }
.vb-card.is-on .ab-ic { background: var(--ok-soft); color: var(--ok-ink); }
.vb-mode { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.vb-mode .ic { width: 14px; height: 14px; color: var(--ink-3); }
.vb-learn { background: var(--soft); border-radius: var(--r-3); padding: 8px 12px; font-size: .8rem; }
.vb-learn b { display: flex; align-items: center; gap: 2px; font-size: .74rem; text-transform: none; color: var(--ink-3); }
.vb-learn ul { list-style: none; }
.vb-learn li { display: flex; gap: 6px; align-items: flex-start; padding: 2px 0; }
.vb-learn li .ic { width: 13px; height: 13px; color: var(--ok-ink); flex: none; margin-top: 3px; }
.vb-status { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink-2); }
.vb-status:empty { display: none; }
.vb-card footer { margin-top: auto; }

/* ---------- Verbesserungen ---------- */
.app-verbesserungen { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.app-verbesserungen .m-chips { padding: 0; }
.id-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.id-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--r-3); background: var(--sheet); }
.id-card.is-angenommen { border-color: #d79a00; }
.id-card.is-eingerichtet { border-color: #3aa553; background: var(--ok-soft); }
.id-card.is-abgelehnt { opacity: .55; }
.id-top { display: flex; align-items: center; gap: 8px; }
.id-dept { font-weight: 800; font-size: .68rem; text-transform: none; color: var(--brand-text); background: var(--brand-soft); padding: 3px 8px; border-radius: var(--r-2); }
.id-save { margin-left: auto; font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.id-save b { color: var(--ok-ink); }
.id-card h4 { font-size: 1rem; }
.id-obs, .id-chg { font-size: .84rem; color: var(--ink-2); }
.id-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.id-night:empty { display: none; }
.id-night-box { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-3); background: linear-gradient(135deg, #24405e, #0f2338); color: #e6ecf5; flex-wrap: wrap; }
.id-night-box > .ic { width: 22px; height: 22px; color: #fcc419; flex: none; }
.id-night-box p { flex: 1; font-size: .88rem; min-width: 220px; }
.id-night-box b { color: #fff; }
.id-wish { border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px 14px; background: var(--sheet-2); }
.id-wish h4 { font-size: .95rem; margin-bottom: 4px; }
.id-wishes { list-style: none; margin-top: 6px; }
.id-wishes li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: .84rem; }
.id-wishes li .ic { width: 15px; height: 15px; color: var(--brand-text); margin-top: 2px; }
.id-wishes small { grid-column: 2; color: var(--ink-3); }
.id-overlay { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: radial-gradient(circle at 50% 30%, #24405e, #0b1a2b 75%); color: #e6ecf5; animation: fade-in .3s both; }
.id-overlay h3 { color: #fff; font-size: 1.6rem; }
.id-overlay .boot-list { width: min(560px, 100%); }
.id-overlay .boot-ok { color: #fcc419; }
.id-moon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: rgba(252, 196, 25, .14); color: #fcc419; }
.id-moon .ic { width: 42px; height: 42px; }
.id-sun { background: rgba(252, 196, 25, .25); animation: pop-in .6s var(--ease) both; }

/* ---------- Abläufe: Zeitplan; Ersparnis: KI-Kosten ---------- */
.ab-when { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.ab-when .ic { width: 15px; height: 15px; color: var(--brand-text); }
.ab-when-sel { height: 32px; border-radius: 8px; border: 1.5px solid var(--line-2); padding: 0 8px; font: 600 .8rem/1 var(--font-body); color: var(--ink); background: var(--sheet); }
.e-pot .e-net { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--lime); font-weight: 700; font-size: .84rem; }
.e-net .ic { width: 15px; height: 15px; }
.e-cost { border: 1px solid var(--line); border-radius: var(--r-3); padding: 16px 18px; background: var(--sheet); }
.e-cost h3 { font-size: 1.1rem; }
.e-cost-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; margin-top: 8px; }
.e-cost-in .ob-range { margin: 6px 0 10px; }
.e-cost-in .ob-out { font-size: 1.05rem; }
.e-cost-out { background: var(--soft); border-radius: var(--r-3); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; align-self: start; }
.e-cost-out p { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; }
.e-cost-out b { font-variant-numeric: tabular-nums; }
.e-cost-out .e-cost-sum { border-top: 1px solid var(--line-2); padding-top: 6px; margin-top: 2px; font-weight: 700; }
.e-cost-out .e-cost-net { border-top: 2px solid var(--ink); padding-top: 6px; margin-top: 4px; font-size: 1rem; }
.e-cost-net b { font: 800 1.25rem/1.1 var(--font-display); color: var(--ok-ink); }
.e-cost-out .e-cost-note { display: block; font-size: .76rem; color: var(--ink-3); margin-top: 4px; }
@container (max-width: 820px) { .e-cost-grid { grid-template-columns: 1fr; } }

/* ---------- Austausch mit Liquidbeam, Mitmachen und Ranglisten ---------- */
.lb-lead { margin-bottom: 8px; }
.lb-confirm { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-weight: 700; font-size: .88rem; color: var(--ink); cursor: pointer; }
.lb-confirm input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.lb-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sheet); }
.lb-row b { display: block; font-size: .95rem; }
.lb-row p { font-size: .84rem; color: var(--ink-2); }
.lb-fields { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; }
.lb-fields h4 { font: 800 .74rem/1.2 var(--font-body); text-transform: none; color: var(--ink-3); margin-bottom: 6px; }
.lb-never { list-style: none; }
.lb-never li { display: flex; gap: 8px; align-items: center; padding: 5px 0; font-size: .86rem; }
.lb-never .ic { width: 15px; height: 15px; color: var(--bad-ink); flex: none; }
.lb-dev > p { font-size: .9rem; margin-bottom: 10px; }
.lb-clusters { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.lb-clusters li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-3); }
.lb-clusters li > div { display: flex; flex-direction: column; min-width: 0; }
.lb-clusters b { font-size: .92rem; }
.lb-clusters small { font-size: .78rem; color: var(--ink-3); }
.id-share { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 8px; }
.id-share .switch.is-off { opacity: .55; cursor: not-allowed; }
.id-share-note { font-size: .76rem; color: var(--ink-3); }
.id-wish-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.id-wish-head > div { flex: 1; min-width: 260px; }
.id-wish-head p { font-size: .86rem; color: var(--ink-2); }
.id-speak { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 8px; border: 0; border-radius: 999px; background: #c8452e; color: #fff; font-weight: 800; font-size: .92rem; cursor: pointer; box-shadow: none; }
.id-speak .ic { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.id-speak:hover { background: #b13a24; }
.id-me { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 18px; border-radius: var(--r-3); background: var(--night); color: var(--on-night); }
.id-kpis { display: flex; gap: 18px; flex-wrap: wrap; }
.id-kpi { display: flex; flex-direction: column; }
.id-kpi b { font: 800 1.2rem/1.1 var(--font-display); color: #fff; }
.id-kpi small { font-size: .7rem; color: var(--on-night-2); }
.id-to-rank { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-2); border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: var(--lime); font-weight: 700; font-size: .84rem; cursor: pointer; }
.id-to-rank .ic { width: 15px; height: 15px; }
.id-to-rank:hover { border-color: var(--lime); }
.fg-warn { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; padding: 6px 10px; border-radius: var(--r-2); background: var(--warn-soft); color: var(--warn-ink); font-size: .8rem; }
.fg-warn .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.k-res:has(> .pop-x) .k-res-head { padding-right: 34px; }
.id-badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-3); background: rgba(197, 217, 0, .16); color: var(--lime); flex: none; }
.id-badge .ic { width: 32px; height: 32px; }
.id-me-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; max-width: 360px; }
.id-me-t small { font-size: .74rem; color: var(--on-night-2); text-transform: none; font-weight: 800; }
.id-me-t b { font: 800 1.35rem/1.1 var(--font-display); color: #fff; }
.id-me-t > span { font-size: .82rem; color: var(--on-night-2); }
.id-prog { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); margin-top: 6px; overflow: hidden; }
.id-prog > span { display: block; height: 100%; width: var(--p, 0%); background: var(--lime); border-radius: inherit; transition: width .8s var(--ease); }
.id-points { flex-basis: 100%; font-size: .74rem; color: var(--on-night-2); }
.id-rank { border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px 14px; background: var(--sheet); }
.id-rank .k-sec-head { justify-content: space-between; flex-wrap: wrap; margin-bottom: 6px; }
.id-rank .k-sec-head h4 { font-size: .95rem; }
.id-rank .m-chips { padding: 0; }
.rk-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.rk-list li { display: grid; grid-template-columns: 24px 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--r-2); }
.rk-list li.is-me { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.rk-pos { font: 800 .95rem/1 var(--font-display); color: var(--ink-3); text-align: center; }
.rk-list li:nth-child(1) .rk-pos { color: #c98a00; }
.rk-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft-2); color: var(--brand-text); font-weight: 800; font-size: .72rem; }
.rk-av--firm .ic { width: 16px; height: 16px; }
.rk-name { display: flex; flex-direction: column; min-width: 0; }
.rk-name b { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-name small { font-size: .72rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pts { font-weight: 800; font-size: .84rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
@container (max-width: 860px) { .lb-fields { grid-template-columns: 1fr; } }

/* ---------- KI-Korb ---------- */
.bar-korb { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 10px; border-radius: var(--r-2); border: 1.5px solid var(--brand-line); background: var(--sheet); color: var(--brand-text); font: 800 .84rem/1 var(--font-body); cursor: pointer; flex: none; transition: border-color .15s, background-color .15s, box-shadow .2s; }
.bar-korb .ic { width: 19px; height: 19px; }
.bar-korb:hover, .bar-korb[aria-expanded="true"] { background: var(--brand-soft); border-color: var(--brand); }
.bar-korb.is-empty { border-color: var(--line-2); color: var(--ink-2); }
.kb-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font: 800 .74rem/1 var(--font-body); }
.kb-count:empty { display: none; }
.kb-dots { display: inline-flex; gap: 3px; }
.kb-dots .amp { width: 7px; height: 7px; }
.bar-korb.is-bump { animation: korb-bump .5s var(--ease); }
.bar-korb.is-over, .os.is-korb-drag .bar-korb { border-color: var(--brand); background: var(--brand-soft-2); box-shadow: 0 0 0 5px var(--brand-glow); }
.os.is-korb-drag .bar-korb { animation: pulse-ring 1.1s ease-out infinite; }
.korb-fly { position: absolute; left: 0; top: 0; z-index: 60; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); pointer-events: none; animation: coin .75s cubic-bezier(.5, -.2, .7, 1) both; }
.korb-fly .ic { width: 15px; height: 15px; }
.korb { position: absolute; z-index: 8; top: calc(var(--bar-h) + 8px); right: 10px; bottom: calc(var(--task-h) + 10px); width: min(440px, calc(100% - 20px)); display: flex; flex-direction: column; background: var(--sheet); border-radius: var(--r-3); box-shadow: 0 8px 28px rgb(var(--shade) / .34), 0 0 0 1px var(--ring);
  translate: calc(100% + 30px) 0; opacity: 0; pointer-events: none; transition: translate .3s var(--ease), opacity .2s; }
.korb.is-open { translate: 0 0; opacity: 1; pointer-events: auto; }
.korb-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.korb-head > div { flex: 1; min-width: 0; }
.korb-head h3 { font-size: 1.15rem; }
.korb-head small { font-size: .76rem; color: var(--ink-3); }
.korb-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-3); background: var(--brand); color: var(--brand-ink); flex: none; }
.korb-ic .ic { width: 20px; height: 20px; }
.korb-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.korb-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 8px 8px; }
.korb-empty-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-3); background: var(--brand-soft); color: var(--brand-text); }
.korb-empty-ic .ic { width: 32px; height: 32px; }
.korb-empty h4 { font-size: 1.05rem; }
.korb-empty p { font-size: .86rem; color: var(--ink-2); }
.korb-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.korb-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 6px 8px 10px; border: 1px solid var(--line); border-radius: var(--r-3); animation: fade-up .25s var(--ease) both; }
.korb-name { display: flex; flex-direction: column; min-width: 0; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
.korb-name b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.korb-name small { font-size: .72rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.korb-name:hover b { color: var(--brand-text); }
.korb-sec { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.korb-sec h4 { display: flex; align-items: center; gap: 6px; font: 800 .74rem/1.2 var(--font-body); text-transform: none; color: var(--ink-3); }
.korb-sec h4 .ic { width: 15px; height: 15px; color: var(--brand-text); }
.korb-sec h4 .info-btn { margin-left: auto; }
.korb-sug ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.korb-add { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 1.5px dashed var(--brand-line); border-radius: var(--r-3); background: var(--brand-soft); text-align: left; cursor: pointer; }
.korb-add > .ic { width: 16px; height: 16px; color: var(--brand-text); flex: none; }
.korb-add span { display: flex; flex-direction: column; min-width: 0; }
.korb-add b { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.korb-add small { font-size: .7rem; color: var(--ink-3); }
.korb-add:hover { border-style: solid; }
.korb-sug > .ob-btn { align-self: flex-start; }
.korb-amp { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.korb-amp-bar { display: inline-flex; gap: 2px; flex: none; }
.korb-amp-bar span { width: 12px; height: 12px; border-radius: 4px; }
.korb-amp-bar .amp--gruen { background: #3aa553; } .korb-amp-bar .amp--gelb { background: #d79a00; } .korb-amp-bar .amp--rot { background: #c8452e; }
.korb-amp > span:nth-child(2) { flex: 1; }
.korb-red { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--ink-3); }
.korb-row { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; color: var(--ink-2); }
.korb-model { flex: 1; min-width: 0; }
.korb-pseudo { font-weight: 600; font-size: .8rem; cursor: pointer; }
.korb-pseudo input { width: 16px; height: 16px; accent-color: var(--brand); }
.korb-fill-top { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.korb-fill-bar { display: block; height: 8px; border-radius: 999px; background: var(--soft-2); overflow: hidden; margin: 4px 0; }
.korb-fill-bar > span { display: block; height: 100%; width: var(--p, 0%); background: var(--brand); border-radius: inherit; transition: width .6s var(--ease); }
.korb-fill small { font-size: .74rem; color: var(--ink-3); }
.korb-recipes { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.korb-recipe { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-3); background: var(--sheet); text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s, translate .15s; }
.korb-recipe:hover { border-color: var(--brand); background: var(--brand-soft); translate: 2px 0; }
.korb-recipe-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-2); background: var(--brand-soft-2); color: var(--brand-text); }
.korb-recipe-ic .ic { width: 18px; height: 18px; }
.korb-recipe-t { display: flex; flex-direction: column; min-width: 0; }
.korb-recipe-t b { font-size: .88rem; }
.korb-recipe-t small { font-size: .72rem; color: var(--ok-ink); font-weight: 700; }
.korb-go { width: 16px; height: 16px; color: var(--brand-text); }
.korb-more { display: flex; flex-wrap: wrap; gap: 6px; }
.korb-more .kchip { height: 30px; font-size: .78rem; }
.korb-ask .k-ask { gap: 6px; }
.korb-ask .k-prompt { height: 40px; font-size: .84rem; }
.korb-ask .chat-send { width: 40px; height: 40px; }
.korb-foot { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.korb-mappen ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.korb-mappen li { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: var(--r-3); background: var(--soft); }
.korb-mp-t { display: flex; flex-direction: column; }
.korb-mp-t b { font-size: .86rem; }
.korb-mp-t small { font-size: .72rem; color: var(--ink-3); }
.korb-mp-b { display: flex; gap: 6px; flex-wrap: wrap; }
.pick-row--ho { grid-template-columns: auto 32px minmax(0, 1fr); }
.k-recs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.k-recs:empty { display: none; }
.k-recs-t { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 800; color: var(--ink-3); }
.k-recs-t .ic { width: 15px; height: 15px; color: var(--brand-text); }
.kchip--rec { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-text); }
.k-follow { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-korb { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; border: 0; background: none; padding: 0; color: var(--brand-text); font: 700 .72rem/1 var(--font-body); cursor: pointer; }
.msg-korb .ic { width: 13px; height: 13px; color: var(--brand-text); }
.bh-korb { color: var(--brand-text); }
.w-korb, .sp-korb { display: flex; margin-top: 8px; }
.os.is-compact .bar-korb { padding: 0 9px; }
.os.is-compact .bar-korb-t, .os.is-compact .kb-dots { display: none; }
.os.is-compact .korb { right: 0; left: 0; width: auto; top: var(--bar-h); bottom: var(--task-h); border-radius: 0; }
/* Hinweise links neben den offenen Korb, damit sie ihn nicht verdecken */
.os.is-korb-open:not(.is-compact) .os-toasts { right: calc(min(440px, 100% - 20px) + 26px); left: 16px; }
.os.is-korb-open:not(.is-compact) .toast--save { width: min(380px, 100%); }
.os.is-korb-open:not(.is-compact) .chat { left: calc((100% - 460px) / 2); width: min(660px, calc(100% - 484px)); }
@keyframes korb-bump { 0% { scale: 1; } 35% { scale: 1.16; } 100% { scale: 1; } }

/* ---------- Kern und Pakete ---------- */
.t-produkte { --t1: #8d6fe0; --t2: #4f3aa8; --t-fg: #e8f27a; }
.t-kern { --t1: #3a3f4b; --t2: #1d2028; --t-fg: #c5d900; }
.dlg.dlg--pk { width: min(620px, 100%); }
.dlg.dlg--wide { width: min(860px, 100%); }
.dlg--pk .dlg-body { display: flex; flex-direction: column; gap: 10px; }
.pk-sum { border: 1px solid var(--line); border-radius: var(--r-3); padding: 10px 12px; background: var(--sheet-2); }
.pk-sum ul { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.pk-sum li, .pk-sec li { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; color: var(--ink-2); }
.pk-sum li .ic, .pk-sec li .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--brand-text); }
.pk-miss { color: var(--warn-ink) !important; }
.pk-sig { display: flex; gap: 6px; align-items: center; font-size: .78rem; font-weight: 700; color: var(--ok-ink); }
.pk-sig .ic { width: 15px; height: 15px; flex: none; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pk-sec { border: 1px solid var(--line); border-radius: var(--r-3); padding: 9px 11px; }
.pk-sec h4 { font: 800 .7rem/1.2 var(--font-body); text-transform: none; color: var(--ink-3); margin-bottom: 6px; }
.pk-sec ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pk-toml { margin-top: 6px; padding: 12px 14px; border-radius: var(--r-3); background: var(--night); color: #e8e4ff; font: 500 .76rem/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; max-height: 300px; overflow: auto; }
.pk-loss ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.pk-loss li { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; }
.pk-loss li .ic { width: 14px; height: 14px; color: var(--bad-ink); flex: none; margin-top: 3px; }
.pk-content { display: flex; flex-direction: column; gap: 12px; }
.pk-meta { display: flex; gap: 6px; align-items: center; font-size: .72rem; color: var(--ink-3); }
.pk-meta .ic { width: 13px; height: 13px; flex: none; }
.st-card.is-off { border-style: dashed; background: var(--sheet-2); }
.ob-mod-rec--off { background: var(--soft-2); color: var(--ink-2); }
.pk-lead { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; color: var(--ink-2); background: var(--soft); border-radius: var(--r-3); padding: 9px 12px; }
.pk-lead .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brand-text); }
.pk-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pk-list li { display: grid; grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1fr) auto auto 36px; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sheet); }
.pk-list li.is-off { background: var(--sheet-2); border-style: dashed; }
.pk-list li.is-off .tile { filter: grayscale(.9); opacity: .55; }
.pk-name { display: flex; flex-direction: column; min-width: 0; }
.pk-name b { font-size: .9rem; }
.pk-name small { font-size: .72rem; color: var(--ink-3); }
.pk-net { display: flex; gap: 6px; align-items: center; font-size: .74rem; color: var(--ink-3); min-width: 0; }
.pk-net .ic { width: 14px; height: 14px; flex: none; }
.pk-net span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-always { font-size: .72rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.pk-uphead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pk-uphead > p { flex: 1; min-width: 260px; display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; color: var(--ink-2); }
.pk-uphead > p .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ok-ink); }
.pk-ups { display: flex; flex-direction: column; gap: 8px; }
.pk-upd { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--brand-line); border-radius: var(--r-3); background: var(--sheet); }
.pk-notes { list-style: disc; padding-left: 18px; margin-top: 4px; font-size: .8rem; color: var(--ink-2); }
.pk-steps { list-style: none; display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.pk-steps:empty { display: none; }
.pk-steps li { display: flex; gap: 6px; align-items: center; font-size: .76rem; color: var(--ok-ink); animation: fade-up .25s var(--ease) both; }
.pk-steps .ic { width: 13px; height: 13px; }
.pk-hist h4 { font: 800 .72rem/1.2 var(--font-body); text-transform: none; color: var(--ink-3); margin-bottom: 6px; }
.pk-hist ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pk-hist li { display: flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--ink-2); }
.pk-hist .ic { width: 14px; height: 14px; color: var(--ok-ink); }
.pk-ahead h4 { font-size: 1.05rem; }
.pk-ahead p { font-size: .86rem; color: var(--ink-2); }
.pk-arch { display: flex; flex-direction: column; gap: 4px; }
.pk-layer { border-radius: var(--r-3); padding: 12px 14px; border: 1px solid var(--line); background: var(--sheet); display: flex; flex-direction: column; gap: 8px; }
.pk-layer--web { background: var(--brand-soft); }
.pk-layer--kern { background: var(--night); border-color: var(--night); color: #f6f3ff; }
.pk-layer--kern .pk-lt { color: #f6f3ff; }
.pk-layer--kern .pk-lt .ic { color: var(--lime); }
.pk-layer--kern .info-btn { color: #cfc8ea; }
.pk-layer--src { background: var(--sheet-2); }
.pk-lt { display: flex; align-items: center; gap: 8px; font: 800 .78rem/1.2 var(--font-body); text-transform: none; color: var(--ink-2); }
.pk-lt .ic { width: 16px; height: 16px; color: var(--brand-text); }
.pk-row, .pk-svc, .pk-tiles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-2); background: var(--soft); font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.pk-chip .ic { width: 14px; height: 14px; color: var(--brand-text); }
.pk-chip--svc { background: var(--night-2, #382f66); color: #f6f3ff; }
.pk-chip--svc .ic { color: var(--lime); }
.pk-chip--gate { background: var(--ok-soft); color: var(--ok-ink); }
.pk-chip--gate .ic { color: var(--ok-ink); }
.pk-addr { font: 600 .78rem/1 ui-monospace, Consolas, monospace; background: var(--sheet); border: 1px solid var(--line-2); padding: 6px 9px; border-radius: 8px; color: var(--ink); }
.pk-vpn { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-left: auto; }
.pk-arrow { display: flex; justify-content: center; position: relative; height: 22px; }
.pk-arrow::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--line-2); }
.pk-arrow span { position: relative; align-self: center; background: var(--bg, var(--bg)); padding: 0 8px; font-size: .7rem; font-weight: 700; color: var(--ink-3); }
.pk-tile { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--sheet); cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--ink); }
.pk-tile small { font-weight: 600; color: var(--ink-3); font-size: .7rem; }
.pk-tile:hover { border-color: var(--brand); }
.pk-tile.is-off { border-style: dashed; color: var(--ink-3); }
.pk-tile.is-off .tile { filter: grayscale(.9); opacity: .5; }
.pk-where { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-3); padding: 12px 14px; background: var(--sheet); }
.pk-where-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pk-where-h h4 { display: flex; align-items: center; gap: 4px; font-size: .95rem; }
.pk-where-h small { font-size: .74rem; color: var(--ink-3); }
.pk-hosts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pk-host { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; padding: 10px 12px; border-radius: var(--r-3); border: 2px solid var(--line); background: var(--sheet); text-align: left; cursor: pointer; }
.pk-host .ic { width: 20px; height: 20px; color: var(--brand-text); grid-row: span 2; }
.pk-host b { font-size: .88rem; }
.pk-host small { font-size: .74rem; color: var(--ink-3); }
.pk-host.is-on { border-color: var(--brand); background: var(--brand-soft); }
.ob-chip--host small { padding-left: 25px; }
.ob-vpn { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.launch-kern { background: var(--soft); color: var(--ink-2); margin-top: 6px; font-size: .8rem; }
.set-val { font-size: .9rem; color: var(--ink-2); }
@container (max-width: 720px) {
  .pk-list li { grid-template-columns: 40px minmax(0, 1fr) auto 36px; }
  .pk-list li .pk-net, .pk-list li > .ob-btn:not(.ob-btn--icon) { display: none; }
  .pk-vpn { margin-left: 0; }
}

/* ---------- Produkte & Leistungen ---------- */
.app-produkte { --spl-d: 220px; display: grid; grid-template-columns: var(--spl, var(--spl-d)) minmax(0, 1fr); min-height: 0; }
.pd-side { border-right: 1px solid var(--line); overflow-y: auto; padding: 14px 10px; background: var(--sheet-2); display: flex; flex-direction: column; gap: 2px; }
.pd-h { display: flex; align-items: center; gap: 4px; font-size: 1rem; padding: 0 8px 8px; }
.pd-sh { font: 800 .66rem/1.2 var(--font-body); text-transform: none; color: var(--ink-3); padding: 12px 8px 4px; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px; }
.pd-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--sheet); font: 600 .72rem/1.3 var(--font-body); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
span.pd-tag { cursor: default; }
.pd-tag.is-on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pd-src { display: flex; gap: 6px; align-items: flex-start; margin-top: auto; padding: 12px 6px 2px; font-size: .72rem; color: var(--ink-3); }
.pd-src .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.pd-main { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; }
.pd-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pd-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-3); background: var(--sheet); }
.pd-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); }
.pd-search .ic { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.pd-q { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 .9rem/1 var(--font-body); color: var(--ink); }
.pd-views { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-2); overflow: hidden; }
.pd-vbtn { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border: 0; background: var(--sheet); font: 700 .78rem/1 var(--font-body); color: var(--ink-3); cursor: pointer; }
.pd-vbtn .ic { width: 15px; height: 15px; }
.pd-vbtn.is-on { background: var(--brand-soft-2); color: var(--brand-text); }
.pd-sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pd-count { font-size: .8rem; font-weight: 700; color: var(--ink-3); }
.pd-table { min-width: 720px; }
.pd-table td { padding: 8px; }
.pd-row { cursor: pointer; }
.pd-row:hover td, .pd-row:focus-visible td { background: var(--brand-soft); }
.pd-nr { font: 800 .78rem/1 ui-monospace, Consolas, monospace; color: var(--brand-text); }
.pd-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.pd-name .ic { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.pd-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
th.pd-num { text-align: right; }
.pd-table th .amp { margin-left: 4px; vertical-align: 1px; }
.pd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pd-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sheet); text-align: left; cursor: pointer; transition: border-color .15s, translate .15s; }
.pd-card:hover { border-color: var(--brand); translate: 0 -2px; }
.pd-art { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-2); background: var(--brand-soft-2); color: var(--brand-text); flex: none; }
.pd-art .ic { width: 19px; height: 19px; }
.pd-art--b { background: var(--ok-soft); color: var(--ok-ink); }
.pd-art--e { background: var(--warn-soft); color: var(--warn-ink); }
.pd-art--l { background: var(--info-soft); color: var(--info-ink); }
.pd-art--ki { background: var(--night); color: var(--lime); }
.pd-card-t { display: flex; flex-direction: column; }
.pd-card-t b { font-size: .92rem; }
.pd-card-t small { font-size: .74rem; color: var(--ink-3); }
.pd-card-p { font: 800 1rem/1 var(--font-display); color: var(--brand-text); }
.pd-card-v { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pd-card-v span { display: flex; flex-direction: column; min-width: 0; }
.pd-card-v small { font-size: .66rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-card-v b { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-card-f { display: flex; flex-wrap: wrap; gap: 4px; }
.pd-dhead { display: flex; align-items: center; gap: 12px; }
.pd-back { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--sheet); font: 700 .8rem/1 var(--font-body); color: var(--ink-2); cursor: pointer; flex: none; }
.pd-back .ic { width: 15px; height: 15px; }
.pd-dt { flex: 1; min-width: 0; }
.pd-dt h3 { font-size: 1.2rem; }
.pd-dt small { font-size: .78rem; color: var(--ink-3); }
.pd-status { height: 34px; border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 0 8px; font: 700 .8rem/1 var(--font-body); background: var(--sheet); color: var(--ink-2); }
.pd-dact { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-tabs { overflow-x: auto; scrollbar-width: none; }
.pd-addtab { gap: 4px; color: var(--brand-text); }
.pd-addtab .ic { width: 14px; height: 14px; }
.pd-tab { display: flex; flex-direction: column; gap: 10px; }
.pd-kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pd-kv { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sheet); }
.pd-k { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--ink-3); }
.pd-k .amp { width: 8px; height: 8px; }
.pd-v { font-size: .9rem; font-weight: 700; }
.pd-formel { font-size: .7rem; color: var(--ink-3); }
.pd-text { font-size: .9rem; color: var(--ink-2); }
.pd-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--sheet); font: 600 .8rem/1.2 var(--font-body); color: var(--ink); cursor: pointer; }
.pd-link .ic { width: 14px; height: 14px; color: var(--brand-text); }
.pd-link:hover { border-color: var(--brand); }
.pd-fields { list-style: none; display: flex; flex-direction: column; }
.pd-fields li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 12px minmax(0, 170px); gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.pd-fields li .pd-k { font-size: .82rem; color: var(--ink-2); }
.pd-own { font-size: .64rem; font-weight: 700; color: var(--brand-text); background: var(--brand-soft); padding: 1px 6px; border-radius: var(--r-2); }
.pd-val { justify-self: start; border: 0; background: none; padding: 3px 6px; margin-left: -6px; border-radius: 6px; font: 700 .88rem/1.3 var(--font-body); color: var(--ink); text-align: left; cursor: text; }
button.pd-val:hover { background: var(--soft); }
.pd-edit { height: 34px; font-size: .88rem; }
.pd-src-n { font-size: .7rem; color: var(--ok-ink); font-weight: 700; }
.pd-warn { font-size: .7rem; color: var(--bad-ink); font-weight: 700; }
.pd-addf { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px; padding: 6px 10px; border: 1.5px dashed var(--brand-line); border-radius: var(--r-2); background: var(--brand-soft); font: 700 .8rem/1 var(--font-body); color: var(--brand-text); cursor: pointer; }
.pd-addf .ic { width: 14px; height: 14px; }
.pd-docs { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pd-docs li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pd-doc { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sheet); font: 600 .84rem/1.3 var(--font-body); color: var(--ink); text-align: left; cursor: pointer; }
.pd-doc .ic { width: 16px; height: 16px; color: var(--brand-text); flex: none; }
.pd-doc span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-doc small { font-size: .72rem; color: var(--ink-3); }
.pd-doc:hover { border-color: var(--brand); }
.pd-rek > div { display: flex; flex-direction: column; gap: 8px; }
.pd-sum td { background: var(--soft); }
.ds-table tr.is-cur td { background: var(--brand-soft); }
.pd-fm { list-style: none; display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-3); }
.pd-fm li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto 30px; gap: 10px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: .86rem; }
.pd-fm li:last-child { border-bottom: 0; }
.pd-fm li > .ic { width: 15px; height: 15px; color: var(--ink-3); }
.pd-fm li.is-base { background: var(--sheet-2); }
.pd-fm li.is-base small { font-size: .7rem; color: var(--ink-3); }
.pd-fm-n { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-fm-col { display: inline-flex; gap: 5px; align-items: center; font-size: .74rem; color: var(--ink-3); }
.pd-amp .ds-dot { width: 18px; height: 18px; border-width: 2px; }
.pd-say { display: flex; gap: 6px; align-items: center; }
.pd-say .ob-input { flex: 1; min-width: 0; height: 42px; }
.pd-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pd-form .ob-input { height: 40px; font-size: .88rem; }
.pd-form label { display: flex; flex-direction: column; gap: 3px; }
.pd-form label small { font-size: .72rem; font-weight: 700; color: var(--ink-3); }
.pd-ro { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--r-3); background: var(--bad-soft); color: var(--bad-ink); font-weight: 700; font-size: .88rem; }
.pd-ki { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-2); background: var(--brand-soft); font-size: .82rem; color: var(--brand-text); font-weight: 600; }
.pd-ki .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.pd-cbs { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pd-cb { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
.pd-cb input { width: 16px; height: 16px; accent-color: var(--brand); }
.pd-gen { min-height: 140px; }
.pd-iss { display: flex; flex-direction: column; gap: 8px; }
.pd-issue { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sheet); animation: fade-up .25s var(--ease) both; }
.pd-issue b { font-size: .9rem; }
.pd-issue p { font-size: .82rem; color: var(--ink-2); }
.pd-iss-b { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pd-imp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
.pd-imp-doc .p-sheet { max-height: 520px; overflow: auto; }
.pd-imp-res { display: flex; flex-direction: column; gap: 10px; }
.pd-reading li { animation: fade-up .3s var(--ease) both; }
.pd-neu .m-hint > div { display: flex; flex-direction: column; gap: 8px; }
.pd-foot { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-pick { list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; margin-top: 8px; }
.p-prod { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.p-prod h4 { margin: 0; }
.p-prod small { font-size: .76rem; color: var(--ink-3); }
.kd-base { margin-top: 12px; }
@container (max-width: 820px) {
  .app-produkte { grid-template-columns: 1fr; }
  .pd-side { display: none; }
  .pd-imp { grid-template-columns: 1fr; }
  .pd-fields li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 12px; }
  .pd-fields li > small:last-child { grid-column: 2 / -1; }
}
@container (max-width: 520px) {
  .pd-vbtn span, .pd-bar .ob-btn span { display: none; }
  .pd-issue { grid-template-columns: 38px minmax(0, 1fr); }
  .pd-iss-b { grid-column: 1 / -1; justify-content: flex-start; }
  .pd-form { grid-template-columns: 1fr; }
}

/* ---------- Leitbild, Ausbaupfad, Brücken ---------- */
.bar-korb.is-locked { border-style: dashed; color: var(--ink-3); background: var(--sheet); }
.bar-korb.is-locked .kb-dots { display: none; }
.bar-pill--off { background: var(--soft); color: var(--ink-2); }
.stp-pk { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.gs { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-3); background: var(--night); color: #f6f3ff; }
.gs-top { display: flex; align-items: center; gap: 12px; }
.gs-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gs-drop { width: 38px; height: 32px; fill: var(--lime); flex: none; }
.gs-claim { font: 800 1.08rem/1.25 var(--font-display); color: #fff; }
.gs-top small { font-size: .8rem; color: #cfc8ea; }
.gs .info-btn { color: #cfc8ea; }
.gs-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.gs-list li { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: var(--r-3); background: rgba(255, 255, 255, .07); }
.gs-list li .ic { width: 17px; height: 17px; color: var(--lime); flex: none; margin-top: 2px; }
.gs-list li span { display: flex; flex-direction: column; gap: 2px; }
.gs-list li b { font-size: .86rem; color: #fff; }
.gs-list li small { font-size: .76rem; color: #cfc8ea; line-height: 1.4; }
.gs-not { font-size: .76rem; color: #cfc8ea; }
.gs-not b { color: #fff; }
.gs--compact { padding: 10px 12px; }
.gs--compact .gs-list li { padding: 6px 9px; }
.stp { display: flex; flex-direction: column; gap: 10px; }
.stp-lead { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; color: var(--ink-2); }
.stp-lead > .ic { width: 17px; height: 17px; color: var(--brand-text); flex: none; margin-top: 2px; }
.stp-lead > span { flex: 1; }
.stp-list { list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: none; }
.stp-step { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sheet); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.stp-step.is-now { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); }
.stp-step.is-done { background: var(--ok-soft); }
.stp-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.stp-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft-2); color: var(--brand-text); font: 800 .95rem/1 var(--font-display); }
.stp-step.is-done .stp-n { background: var(--ok-soft); color: var(--ok-ink); }
.stp-step.is-now .stp-n { background: var(--brand); color: var(--brand-ink); }
.stp-head b { font-size: .95rem; }
.stp-head small { display: block; font-size: .78rem; color: var(--ink-3); line-height: 1.4; }
.stp-pk { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.stp-mod { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px dashed var(--line-2); border-radius: var(--r-3); }
.stp-mod.is-inst { border-style: solid; border-color: var(--line); background: var(--sheet-2); }
.stp-mod.is-next { border: 1.5px solid var(--brand); background: var(--brand-soft); }
.stp-mod-t { display: flex; flex-direction: column; min-width: 0; }
.stp-mod-t b { font-size: .84rem; }
.stp-mod-t small { font-size: .7rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stp-ak { display: flex; gap: 6px; align-items: center; font-size: .76rem; color: var(--ink-3); }
.stp-ak .ic { width: 14px; height: 14px; color: var(--brand-text); }
.pk-bridges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px dashed var(--line-2); padding-top: 8px; }
.pk-bridges > small { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: var(--ink-3); width: 100%; }
.pk-bridges > small .ic { width: 13px; height: 13px; }
.pk-chip--br { background: var(--info-soft); color: var(--info-ink); }
.pk-chip.is-off { background: var(--soft); color: var(--ink-3); border: 1px dashed var(--line-2); }
.pk-meta--st { color: var(--brand-text); font-weight: 700; }
.ob-claim { font-weight: 700; color: var(--brand-text); }
.ob-quicks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ob-quick { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-radius: var(--r-3); border: 1.5px solid var(--line-2); background: var(--sheet); text-align: left; cursor: pointer; }
.ob-quick b { font-size: .84rem; }
.ob-quick small { font-size: .7rem; color: var(--ink-3); }
.ob-quick.is-on { border-color: var(--brand); background: var(--brand-soft); }
.pd-erp { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: .62rem; font-weight: 700; color: var(--ink-3); background: var(--soft); padding: 1px 6px; border-radius: var(--r-2); }
.pd-erp .ic { width: 10px; height: 10px; }
.kd-src { display: flex; gap: 6px; align-items: flex-start; }
.kd-src .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; }

/* ---------- Skill Compass (Lernpfad): Widget „So entdecken Sie Ihr Potenzial“ und App (Dietrich, 25.10.2026) ---------- */
.t-lernpfad { --t1: #7a8cff; --t2: #4b4fd6; }
.d-icon[data-app="lernpfad"] .d-badge { background: var(--brand); color: var(--brand-ink); }
.wg--sc { position: relative; }
.wg--sc[hidden] { display: none; }
.wg--sc .wg-head { align-items: flex-start; margin-bottom: 4px; }
.wg--sc .wg-head h3 { line-height: 1.2; padding-top: 2px; }
.wg--sc .wg-prog { flex: none; margin-top: 1px; }
.wg--sc.is-complete .wg-prog { background: var(--ok-soft); color: var(--ok-ink); }
.sc-ic { display: grid; place-items: center; width: 24px; height: 24px; flex: none; color: var(--brand-text); margin-top: 2px; }
.sc-ic .ic { width: 20px; height: 20px; }
.sc-i { width: 22px; height: 22px; }
.sc-i .ic { width: 15px; height: 15px; }
.sc-x { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.sc-x:hover, .sc-x[aria-expanded="true"] { background: var(--soft-2); color: var(--ink); }
.sc-x .ic { width: 16px; height: 16px; }
.sc-cls { position: relative; padding: 6px 0 4px; }
.sc-ch { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-cn { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-cc { margin-left: auto; flex: none; font: 800 .74rem/1 var(--font-body); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-bar { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--soft-2); margin: 7px 0 4px; overflow: hidden; }
.sc-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--brand); border-radius: inherit; transition: width .7s var(--ease); }
.sc-bar b { position: absolute; top: 0; bottom: 0; left: var(--p, 0%); width: var(--n, 0%); background: repeating-linear-gradient(135deg, var(--brand-line) 0 4px, var(--brand-soft-2) 4px 8px); }   /* neue Schritte: heller Abschnitt, der Balken ist trotzdem weniger voll */
.sc-newn { display: block; text-align: right; font-size: .66rem; font-weight: 700; color: var(--brand-text); margin: -1px 2px 2px; }
.sc-steps { list-style: none; margin: 2px 0 0; padding: 0; }
.sc-st { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px; border-radius: var(--r-2); }
.sc-st-b { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 7px 6px; border: 0; background: none; border-radius: var(--r-2); text-align: left; cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--ink); }
.sc-st-b:hover { background: var(--brand-soft); }
.sc-st-b:hover .st-go { opacity: 1; }
.sc-st.is-done .st-check, .sc-row.is-done .st-check { background: var(--ok-ink); color: var(--on-ink); }
.sc-st.is-done .st-check .ic, .sc-row.is-done .st-check .ic { width: 14px; height: 14px; stroke-width: 3; }
.sc-st.is-done .st-text { color: var(--ok-ink); }
.sc-st.is-just { animation: sc-glow 1.8s ease-out both; }
.sc-st.is-just .st-check { animation: sc-pop .5s var(--ease) both; }
.sc-new { flex: none; font: 800 .6rem/1 var(--font-body); text-transform: none; padding: 3px 6px; border-radius: var(--r-2); background: var(--brand); color: var(--brand-ink); }
.sc-more { display: block; border: 0; background: none; padding: 2px 6px 2px 38px; color: var(--brand-text); font-weight: 700; font-size: .78rem; cursor: pointer; }
.sc-more:hover { text-decoration: underline; }
.sc-more--cls { padding-left: 6px; }
.sc-cls.is-collapsed { padding-bottom: 2px; }
.sc-fins { list-style: none; margin: 4px 0 0; padding: 0; }
.sc-fin { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: .8rem; font-weight: 700; color: var(--ok-ink); }
.sc-fin .ic { width: 15px; height: 15px; stroke-width: 3; flex: none; }
.sc-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 8px; }
.sc-all-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0; color: var(--brand-text); font-weight: 700; font-size: .84rem; cursor: pointer; }
.sc-all-link .ic { width: 15px; height: 15px; }
.sc-next { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 8px 2px 2px; border: 0; border-top: 1px dashed var(--line-2); background: none; font-size: .82rem; font-weight: 600; text-align: left; cursor: pointer; }
.sc-next .ic { width: 16px; height: 16px; color: var(--brand-text); flex: none; }
.sc-next b { color: var(--brand-text); }
.sc-close { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 10px; }
.sc-opts { display: flex; flex-direction: column; gap: 8px; }
.sc-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-3); background: var(--sheet); text-align: left; cursor: pointer; font-size: .84rem; }
.sc-opt:hover { border-color: var(--brand-line); }
.sc-opt.is-on { border-color: var(--brand); background: var(--brand-soft); }
.sc-radio { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; margin-top: 2px; }
.sc-opt.is-on .sc-radio { border-color: var(--brand); }
.sc-opt.is-on .sc-radio::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--brand); }
.sc-opt-t { display: flex; flex-direction: column; gap: 2px; }
.sc-opt-t small { color: var(--ink-3); font-size: .74rem; font-weight: 500; }
.sc-close-btns { display: flex; gap: 8px; }
.sc-all { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 10px 4px 12px; }
.sc-all p { font-size: .82rem; color: var(--ink-2); }
.sc-all-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); box-shadow: none; animation: sc-spin 1.1s var(--ease) both; }
.sc-all-ic .ic { width: 28px; height: 28px; }
.sc-conf { position: absolute; left: 50%; top: 28%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.sc-conf i { position: absolute; left: -3px; top: -5px; width: 7px; height: 11px; border-radius: 2px; background: var(--c); animation: sc-conf .95s cubic-bezier(.15, .7, .3, 1) var(--d, 0ms) both; }
@keyframes sc-pop { 0% { scale: .4; } 60% { scale: 1.3; } 100% { scale: 1; } }
@keyframes sc-glow { 0% { background: var(--ok-soft); } 100% { background: transparent; } }
@keyframes sc-spin { 0% { rotate: -200deg; scale: .5; } 100% { rotate: 0deg; scale: 1; } }
@keyframes sc-conf { 0% { transform: translate(0, 0) rotate(0) scale(.5); opacity: 1; } 65% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 70px)) rotate(var(--r)) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sc-st.is-just, .sc-st.is-just .st-check, .sc-all-ic, .sc-conf i { animation: none; } .sc-bar i { transition: none; } }
/* die App */
.app-sc { overflow-y: auto; scrollbar-width: thin; padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.sc-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px 22px; border-radius: var(--r-3); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.sc-ring { --p: 0%; position: relative; display: grid; place-content: center; justify-items: center; width: 92px; height: 92px; border-radius: 50%; background: conic-gradient(var(--brand) var(--p), var(--sheet) 0); box-shadow: inset 0 0 0 1px var(--brand-line); }
.sc-ring::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--sheet); }
.sc-ring b { position: relative; font: 800 1.7rem/1 var(--font-display); letter-spacing: -.02em; }
.sc-ring small { position: relative; font-size: .68rem; font-weight: 700; color: var(--ink-3); }
.sc-hero-t h3 { display: flex; align-items: center; gap: 6px; font-size: 1.15rem; }
.sc-hero-t p { margin-top: 4px; color: var(--ink-2); font-size: .92rem; max-width: 56ch; }
.sc-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.sc-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: .84rem; font-weight: 600; cursor: pointer; }
.sc-nextcard { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-3); border: 1.5px solid var(--brand-line); background: var(--sheet); }
.sc-nextcard-l { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 800 .74rem/1 var(--font-body); text-transform: none; color: var(--brand-text); }
.sc-nextcard-l .ic { width: 18px; height: 18px; }
.sc-nextcard-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-nextcard-t small { color: var(--ink-3); font-size: .78rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.sc-card { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sheet); padding: 14px 16px 12px; box-shadow: none; }
.sc-card.is-off { opacity: .62; }
.sc-card.is-full { border-color: var(--ok-line); background: var(--ok-soft); }
.sc-card.is-pulse { box-shadow: 0 0 0 3px var(--brand-line); }
.sc-card-h { display: flex; align-items: center; gap: 12px; }
.sc-card-n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-card-n b { display: flex; align-items: center; gap: 4px; font-size: 1rem; }
.sc-card-n small { color: var(--ink-3); font-size: .78rem; }
.sc-offnote { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: .8rem; color: var(--ink-3); }
.sc-offnote .ic { width: 15px; height: 15px; flex: none; }
.sc-list { list-style: none; margin: 6px 0 0; padding: 0; }
.sc-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .88rem; }
.sc-row-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sc-row-n { font-weight: 600; }
.sc-row.is-done .sc-row-n { color: var(--ok-ink); }
.sc-row-t small { color: var(--ink-3); font-size: .72rem; }
.sc-pot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-2); }
.sc-pot .ic { width: 15px; height: 15px; color: var(--brand-text); flex: none; }
.sc-pot .ob-link { margin-left: auto; font-size: .78rem; }
.sc-priv { display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; color: var(--ink-3); }
.sc-priv .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
@container (max-width: 700px) {
  .sc-hero { grid-template-columns: auto minmax(0, 1fr); }
  .sc-tools { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
  .sc-grid { grid-template-columns: 1fr; }
  .sc-nextcard { flex-wrap: wrap; }
}

/* ---------- Mittlere und kleine Bildschirme ---------- */
.os.is-medium { --wgw: 300px; }
.os.is-medium .bar-search { min-width: 220px; }
.os.is-narrow .os-widgets { display: none; }
.os.is-narrow .os-icons { right: 10px; }
.os.is-narrow .bar-clock { display: none; }
.os.is-compact { --bar-h: 56px; --task-h: 118px; }
.os.is-compact .os-bar { gap: 6px; padding: 0 8px; }
.os.is-compact .bar-name { max-width: 130px; }
.os.is-compact .bar-chev, .os.is-compact .bar-clock, .os.is-compact .bar-search span, .os.is-compact .bar-search kbd, .os.is-compact .bar-pill span { display: none; }
.os.is-compact .bar-search { min-width: 0; width: 40px; padding: 0; justify-content: center; margin-left: 0; flex: none; }
.os.is-compact .bar-pill { padding: 0 9px; flex: none; }
.os.is-compact .os-desk { overflow-y: auto; }
.os.is-compact .os-icons { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 2px; padding: 14px 8px 6px; }
.os.is-compact .d-icon { grid-column: auto; grid-row: auto; width: auto; height: auto; padding: 8px 2px 6px; touch-action: manipulation; }
.os.is-compact .tile--l { width: 54px; height: 54px; }
.os.is-compact .d-label { font-size: .74rem; }
.os.is-compact .d-ghost { display: none !important; }
.os.is-compact .os-widgets { display: flex; position: static; width: auto; padding: 4px 12px 18px; overflow: visible; }
.os.is-compact .os-wins { position: fixed; top: var(--bar-h); bottom: var(--task-h); left: 0; right: 0; }
.os.is-compact .owin { border-radius: 0; }
.os.is-compact .win-b--min, .os.is-compact .win-b--max { display: none; }
.os.is-compact .win-bar { height: 50px; cursor: default; }
.os.is-compact .win-b { width: 42px; height: 40px; }
.os.is-compact .os-task { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "start tick" "chat chat"; padding: 8px 10px 10px; gap: 8px; align-content: center; }
.os.is-compact .task-left { grid-area: start; }
.os.is-compact .task-chips { display: none; }
.os.is-compact .task-chat { grid-area: chat; }
.os.is-compact .task-ticker { grid-area: tick; padding: 4px 12px; }
.os.is-compact .tk-val { font-size: 1.25rem; }
.os.is-compact .chat { width: calc(100% - 16px); max-height: calc(100% - var(--task-h) - 20px); }
.os.is-compact .os-toasts { left: 8px; right: 8px; align-items: stretch; }
.os.is-compact .os-toasts > :nth-last-child(n+3) { display: none; }
.os.is-compact .toast, .os.is-compact .toast--save { max-width: none; width: auto; }
.os.is-compact .launcher { left: 8px; right: 8px; width: auto; }
.os.is-compact .pop { left: 8px; right: 8px; width: auto; }
.os.is-compact .ob { padding: 16px 16px 18px; border-radius: var(--r-3); }
.os.is-compact .ob-back { padding: 8px; place-items: start center; }
.os.is-compact .ob-mods { grid-template-columns: 1fr; }
.os.is-compact .ob-chips { grid-template-columns: 1fr 1fr; }
.os.is-compact .ob-top { flex-wrap: wrap; }
.os.is-compact .ob-dots { order: 3; flex-basis: 100%; }
.os.is-compact .ob-dots span { flex: 1; }
.os.is-compact .ob-hint { display: none; }
.os.is-compact .wall-name { display: none; }
.os.is-compact .ts-sub, .os.is-compact .ts-formula { display: none; }
.os.is-compact .gate-files li { grid-template-columns: 12px minmax(0, 1fr) 18px; }
.os.is-compact .gate-info { grid-column: 2; grid-row: 2; white-space: normal; }
.os.is-compact .gate-files li > .ic { grid-column: 3; grid-row: 1; }
.os.is-compact .gate-prof { grid-template-columns: 1fr; gap: 0; }
.os.is-compact .gate-prof dd { margin-bottom: 6px; }
.os.is-compact .dlg { padding: 18px; }
.os.is-compact .dlg-foot .ob-btn { flex: 1 1 100%; }
@media (max-width: 760px) {
  .sim-strip { gap: 8px; padding: 0 8px; }
  .sim-text { display: none; }
  .sim-home span, .sim-btn span { display: none; }
  .sim-note { justify-content: flex-start; }
  .sim-btn { width: 34px; padding: 0; justify-content: center; }
  .sim-btn.sim-dl { display: none; }   /* ein Windows-Programm lädt man nicht auf dem Handy */
}
@media (max-width: 420px) { .os.is-compact .ob-chips { grid-template-columns: 1fr; } }

/* ---------- Profile, Anmeldung, Darstellung ---------- */
.bar-theme { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: var(--sheet); color: var(--ink-2); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.bar-theme:hover { border-color: var(--brand); color: var(--brand-text); background: var(--brand-soft); }
.bar-theme .ic { width: 18px; height: 18px; }
.bar-user { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; width: auto; height: auto; }
.bar-user:hover .av, .bar-user[aria-expanded="true"] .av { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--brand); }
.av { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(150deg, color-mix(in srgb, var(--pc, #2b2352) 82%, #fff), var(--pc, #2b2352)); color: #fff; font: 800 .82rem/1 var(--font-body); letter-spacing: .02em; box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3px var(--ring); transition: box-shadow .15s; }
.av-t { pointer-events: none; }
.av--bar { width: 34px; height: 34px; font-size: .74rem; }
.av--m { width: 44px; height: 44px; font-size: .86rem; }
.av--l { width: 52px; height: 52px; font-size: 1rem; }
.av--xl { width: 72px; height: 72px; font-size: 1.35rem; }
.av-dev { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sheet); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line-2); }
.av-dev .ic { width: 13px; height: 13px; }
.av--bar .av-dev { width: 16px; height: 16px; right: -3px; bottom: -3px; }
.av--bar .av-dev .ic { width: 10px; height: 10px; }

.pop--profile { width: 320px; padding: 8px; }
.pm-head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; }
.pm-who { display: flex; flex-direction: column; min-width: 0; }
.pm-who strong { font-size: 1rem; color: var(--ink); line-height: 1.25; }
.pm-who > span { font-size: .8rem; color: var(--ink-3); }
.pm-who small { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: .74rem; color: var(--ink-3); }
.pm-who small .ic { width: 13px; height: 13px; }
.pm-label { margin: 2px 10px 6px; font: 800 .68rem/1 var(--font-body); text-transform: none; color: var(--ink-3); }
.pm-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 6px 6px; padding: 4px; border-radius: var(--r-3); background: var(--soft); }
.pm-seg-b { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: var(--r-2); background: none; color: var(--ink-2); font: 700 .74rem/1.15 var(--font-body); cursor: pointer; text-align: center; }
.pm-seg-b .ic { width: 18px; height: 18px; }
.pm-seg-b:hover { color: var(--ink); }
.pm-seg-b.is-on { background: var(--sheet); color: var(--brand-text); box-shadow: 0 0 0 1px var(--ring); }
.pm-seg--wide { max-width: 460px; margin: 6px 0 0; }
.pm-seg--wide .pm-seg-b { flex-direction: row; justify-content: center; gap: 8px; padding: 10px; font-size: .86rem; }
.pm-sep { height: 1px; background: var(--line); margin: 6px 8px; }
.pm-note { display: flex; gap: 8px; align-items: flex-start; margin: 6px 6px 2px; padding: 9px 10px; border-radius: var(--r-2); background: var(--soft); font-size: .76rem; line-height: 1.4; color: var(--ink-3); }
.pm-note .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--brand-text); }

/* Anmelden */
.os.is-locked .os-bar, .os.is-locked .os-desk, .os.is-locked .os-task { visibility: hidden; }
.login { position: absolute; inset: 0; z-index: 70; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; padding: 28px 20px 18px; overflow: auto;
  background: radial-gradient(900px 600px at 50% 0%, rgb(var(--glass)), transparent 70%), rgb(var(--shade) / .08); animation: fade-in .3s var(--ease) both; transition: opacity .3s, scale .3s; }
.login.is-out { opacity: 0; scale: 1.02; pointer-events: none; }
.lg-top { text-align: center; color: var(--ink); }
.lg-clock { font: 800 clamp(3rem, 7vw, 5rem)/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lg-date { margin-top: 6px; font-weight: 600; font-size: 1.02rem; color: var(--ink-2); }
.lg-card { align-self: center; width: min(680px, 100%); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 26px 22px; border-radius: var(--r-3); background: rgb(var(--glass) / .78); border: 1px solid rgb(var(--glass) / .9); box-shadow: 0 8px 28px rgb(var(--shade) / .34), 0 0 0 1px var(--ring); }
.lg-firm { display: flex; align-items: center; gap: 12px; align-self: stretch; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lg-firm strong { display: block; font: 800 1.1rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.lg-firm div span { font-size: .8rem; color: var(--ink-3); }
.lg-users { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px 0 2px; max-width: 100%; }
.lg-user { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 116px; padding: 12px 6px 10px; border: 2px solid transparent; border-radius: var(--r-3); background: none; cursor: pointer; transition: background-color .15s, border-color .15s; }
.lg-user:hover { background: rgb(var(--glass) / .6); }
.lg-user.is-on { background: var(--sheet); border-color: var(--brand); box-shadow: none; }
.lg-name { font-weight: 700; font-size: .8rem; line-height: 1.2; text-align: center; color: var(--ink); max-width: 100%; -webkit-hyphens: auto; hyphens: auto; }
.lg-user .av--xl { width: 60px; height: 60px; font-size: 1.12rem; }
.lg-who { font-size: .9rem; color: var(--ink-2); text-align: center; }
.lg-who b { color: var(--ink); }
.lg-form { display: flex; align-items: center; gap: 6px; width: min(360px, 100%); height: 52px; padding: 0 6px 0 18px; border-radius: var(--r-2); border: 2px solid var(--line-2); background: var(--sheet); transition: border-color .15s, box-shadow .15s; }
.lg-form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft-2); }
.lg-pw { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 600 1rem/1 var(--font-body); color: var(--ink); }
.lg-pw::placeholder { color: var(--ink-3); font-weight: 500; }
.os .lg-pw:focus-visible { outline: none; }
.lg-go { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--brand); color: var(--brand-ink); cursor: pointer; }
.lg-go:hover { background: var(--brand-hi); }
.lg-go .ic { width: 19px; height: 19px; }
.lg-hint { font-size: .76rem; color: var(--ink-3); margin-top: -4px; }
.lg-or { display: flex; align-items: center; gap: 10px; width: min(360px, 100%); color: var(--ink-3); font-size: .76rem; }
.lg-or::before, .lg-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.lg-sso { width: min(360px, 100%); }
.lg-sso-note { font-size: .74rem; color: var(--ink-3); text-align: center; max-width: 380px; margin-top: -4px; }
.lg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; color: var(--ink-2); font-size: .82rem; }
.lg-devrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: var(--r-2); background: rgb(var(--glass) / .7); box-shadow: 0 0 0 1px var(--ring); font-weight: 700; }
.lg-dev-ic { display: grid; color: var(--brand-text); }
.lg-dev-ic .ic { width: 16px; height: 16px; }
.lg-dev { height: 32px; border: 0; border-radius: var(--r-2); padding: 0 10px; background: var(--sheet); color: var(--ink); font: 600 .82rem/1 var(--font-body); cursor: pointer; }
.lg-where { display: inline-flex; align-items: center; gap: 6px; }
.lg-where > .ic { width: 15px; height: 15px; color: var(--brand-text); flex: none; }
.os.is-compact .login { padding: 18px 12px 12px; gap: 10px; }
.os.is-compact .lg-card { padding: 16px 14px; border-radius: var(--r-3); }
.os.is-compact .lg-users { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; align-self: stretch; scrollbar-width: none; }
.os.is-compact .lg-user { width: 86px; flex: none; }
.os.is-compact .lg-foot { flex-direction: column; gap: 8px; text-align: center; max-width: 100%; }
.os.is-compact .lg-where { align-items: flex-start; text-align: left; font-size: .76rem; }
.os.is-compact .lg-devrow { max-width: 100%; }
.os.is-compact .lg-dev { min-width: 0; max-width: 190px; }

/* Fenster: Größe ziehen und Raster */
.win-rs { position: absolute; z-index: 3; touch-action: none; }
.win-rs--n, .win-rs--s { left: 14px; right: 14px; height: 6px; cursor: ns-resize; }
.win-rs--n { top: 0; } .win-rs--s { bottom: 0; }
.win-rs--e, .win-rs--w { top: 14px; bottom: 14px; width: 6px; cursor: ew-resize; }
.win-rs--e { right: 0; } .win-rs--w { left: 0; }
.win-rs--ne, .win-rs--nw, .win-rs--se, .win-rs--sw { width: 16px; height: 16px; }
.win-rs--ne { top: 0; right: 0; cursor: nesw-resize; } .win-rs--sw { bottom: 0; left: 0; cursor: nesw-resize; }
.win-rs--nw { top: 0; left: 0; cursor: nwse-resize; } .win-rs--se { bottom: 0; right: 0; cursor: nwse-resize; }
.owin.is-max .win-rs, .os.is-compact .win-rs, .os.is-compact .win-b--snap { display: none; }
.owin.is-resizing { user-select: none; }
.owin.is-resizing .win-body { pointer-events: none; }
.owin.is-anim { transition: translate .2s var(--ease), width .2s var(--ease), height .2s var(--ease); }
.owin.is-snapped { border-radius: var(--r-3); }
.win-b--snap.is-on, .win-b--snap:hover { color: var(--brand-text); }
.snap-prev { position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); translate: var(--x) var(--y); z-index: var(--z, 30); border-radius: var(--r-3); pointer-events: none;
  background: color-mix(in srgb, var(--brand) 16%, transparent); border: 2px solid var(--brand-line); opacity: 0; transition: opacity .12s, translate .14s var(--ease), width .14s var(--ease), height .14s var(--ease); }
.snap-prev.is-on { opacity: 1; }
.pop--snap { width: 300px; padding: 12px; }
.snap-h { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; color: var(--ink); font-size: .88rem; }
.snap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.snap-lay { display: grid; gap: 3px; height: 62px; padding: 4px; border-radius: var(--r-2); background: var(--soft); box-shadow: 0 0 0 1px var(--line); }
.snap-lay--0 { grid-template-columns: 1fr 1fr; }
.snap-lay--1 { grid-template-columns: 2fr 1fr; }
.snap-lay--2 { grid-template-columns: 1fr 1fr 1fr; }
.snap-lay--3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.snap-z { border: 0; padding: 0; border-radius: 6px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
.snap-z:hover, .snap-z:focus-visible { background: var(--brand); box-shadow: none; }
.snap-z.is-on { background: var(--brand-soft-2); box-shadow: inset 0 0 0 2px var(--brand); }
.snap-foot { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.snap-foot .menu-item { padding: 8px 10px; }
.snap-tip { margin: 8px 4px 0; font-size: .74rem; line-height: 1.4; color: var(--ink-3); }

/* Einstellungen mit Reitern, Profile und Rechte */
.app-einstellungen { gap: 0; padding: 0 0 18px; }
.set-tabs { position: sticky; top: 0; z-index: 2; padding: 6px 20px 0; background: var(--sheet); }
.set-content { display: flex; flex-direction: column; gap: 14px; padding: 16px 24px 0; }
.set-lead { color: var(--ink-2); font-size: .9rem; margin: 2px 0 12px; max-width: 70ch; }
.set-row--sw { cursor: pointer; }
.set-sw { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.set-me-head { display: flex; gap: 16px; align-items: center; margin-bottom: 6px; }
.set-me-head h3 { margin: 0; font-size: 1.25rem; }
.set-me-head p { color: var(--ink-2); font-size: .9rem; }
.set-me-head small { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--ink-3); font-size: .8rem; }
.set-me-head small .ic { width: 14px; height: 14px; }
.set-where { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-3); background: var(--soft); font-size: .84rem; color: var(--ink-2); }
.set-where .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brand-text); }
.set-where-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 6px; }
.wh-cell { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--r-3); background: var(--soft); }
.wh-cell .ic { width: 18px; height: 18px; color: var(--brand-text); margin-bottom: 2px; }
.wh-cell b { font-size: .92rem; }
.wh-cell span { font-size: .8rem; color: var(--ink-2); line-height: 1.35; }
.wh-cell small { font-size: .74rem; font-weight: 700; color: var(--ok-ink); }
.set-path { font-size: .8rem; word-break: break-all; }
.pf-list { display: flex; flex-direction: column; gap: 6px; }
.pf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--sheet); }
.pf-row.is-me { border-color: var(--brand-line); background: var(--brand-soft); }
.pf-t { display: flex; flex-direction: column; min-width: 0; }
.pf-t b { font-size: .95rem; }
.pf-t span { font-size: .8rem; color: var(--ink-2); }
.pf-t small { font-size: .74rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tags { display: inline-flex; align-items: center; gap: 6px; }
.pf-tag { padding: 3px 9px; border-radius: var(--r-2); background: var(--soft-2); color: var(--ink-2); font: 800 .68rem/1.2 var(--font-body); white-space: nowrap; }
.pf-tag--me { background: var(--ok-soft); color: var(--ok-ink); }
.pf-acts { display: inline-flex; gap: 6px; }
.pf-pk { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: var(--r-2); background: var(--soft); font-size: .8rem; font-weight: 600; }
.pf-amp-v { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .88rem; }
.pf-edit .set-row { grid-template-columns: 170px minmax(0, 1fr); }
.pf-apps { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-apps .kchip { height: 32px; padding: 0 10px 0 4px; }
.pf-amp { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-sw--s { width: 30px; height: 30px; border-width: 2px; }
@container (max-width: 620px) {
  .pf-row { grid-template-columns: auto minmax(0, 1fr); }
  .pf-tags, .pf-acts { grid-column: 2; }
  .set-where-grid { grid-template-columns: 1fr; }
  .set-content { padding: 14px 14px 0; }
  .set-tabs { padding: 6px 8px 0; overflow-x: auto; scrollbar-width: none; }
}
.os.is-compact .bar-theme { display: none; }

/* Vorhandene Systeme: was das Company OS damit tut */
.fit { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-3); background: var(--soft); font-size: .88rem; color: var(--ink-2); }
.fit-h { display: flex; gap: 8px; align-items: flex-start; color: var(--ink); margin-bottom: 6px; }
.fit-h .ic { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--brand-text); }
.fit-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.fit-list li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.fit-list .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ok-ink); }
.fit--set { margin-top: 10px; font-size: .84rem; }
.ob-chips--sys { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.vb-card.is-none { background: var(--sheet-2); border-style: dashed; box-shadow: none; }
.vb-card.is-none h4 { color: var(--ink-2); }
.vb-none { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; color: var(--ink-2); line-height: 1.45; margin: 8px 0; }
.vb-none .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ok-ink); }
.vb-note { display: flex; gap: 7px; align-items: flex-start; font-size: .78rem; color: var(--ink-3); line-height: 1.4; margin: 6px 0 0; }
.vb-note .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--bad-ink); }
.a-noerp { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 4px; padding: 9px 11px; border-radius: var(--r-3); background: var(--soft); font-size: .82rem; color: var(--ink-2); }
.a-noerp .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--brand-text); }

/* Abgleich mit der Spec G1+G2: Austausch, Übergaben, Ranglisten, Brücken */
.t-austausch { --t1: #6a85fb; --t2: #2b2352; --t-fg: #c5d900; }
.fg-ueb { display: flex; gap: 7px; align-items: flex-start; margin-top: 6px; font-size: .78rem; color: var(--ink-3); line-height: 1.4; }
.fg-ueb .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--ok-ink); }
.rk-team { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; margin: 6px 0 8px; border-radius: var(--r-3); background: var(--soft); font-size: .84rem; color: var(--ink-2); }
.rk-team b { color: var(--ink); font-size: .9rem; }
.rk-opt { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; font-size: .84rem; color: var(--ink-2); }
.rk-name-in { width: 200px; height: 36px; font-size: .88rem; }
.pk-br-head { margin-top: 14px; }
.pk-list--br li { grid-template-columns: auto minmax(0, 1fr) auto; }
.pk-br-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-3); background: var(--soft-2); color: var(--brand-text); flex: none; }
.pk-br-ic .ic { width: 18px; height: 18px; }
.vb-man { margin-left: 6px; font-size: .78rem; }
.vb-man .ic { width: 13px; height: 13px; }

/* ---------- Dunkles Design: Feinheiten ---------- */
html[data-theme="dark"] .sp2 { color: #6fd6c4; }
html[data-theme="dark"] .sp3 { color: #f2a865; }
html[data-theme="dark"] .sp4 { color: #f28cb8; }
html[data-theme="dark"] .os-bar { border-bottom-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .owin { box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); }
html[data-theme="dark"] .owin.is-front { box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); }
html[data-theme="dark"] .task-chat { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-theme="dark"] .os-task { background: rgba(24, 19, 46, .94); }
html[data-theme="dark"] .tile--l { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
html[data-theme="dark"] .t-soon { --t1: #3b3459; --t2: #2e2847; --t-fg: #b8a8f4; }
html[data-theme="dark"] .os ::-webkit-scrollbar-thumb { background: #3e3758; }
html[data-theme="dark"] .os mark { color: var(--ink); }
html[data-theme="dark"] .login { background: radial-gradient(900px 600px at 50% 0%, rgba(91, 68, 178, .25), transparent 70%), rgba(0, 0, 0, .25); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }

/* ---------- Bewegung ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes win-in { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
@keyframes pop-in { 0% { opacity: 0; scale: .4; } 60% { opacity: 1; scale: 1.12; } 100% { scale: 1; } }
@keyframes glow-ring { 0% { box-shadow: 0 0 0 0 var(--brand-glow), 0 12px 22px -12px rgb(var(--shade) / .55); } 100% { box-shadow: 0 0 0 18px transparent, 0 12px 22px -12px rgb(var(--shade) / .55); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 var(--brand-glow); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes toast-in { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes coin { 0% { translate: var(--x0) var(--y0); scale: 1; opacity: 1; } 100% { translate: var(--x1) var(--y1); scale: .45; opacity: .2; } }
@keyframes rise { 0% { opacity: 0; translate: 0 10px; } 20% { opacity: 1; translate: 0 0; } 80% { opacity: 1; translate: 0 -10px; } 100% { opacity: 0; translate: 0 -18px; } }
@keyframes tick-glow { 0% { box-shadow: 0 0 0 0 rgba(197, 217, 0, .55); } 100% { box-shadow: 0 0 0 16px transparent; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(58, 165, 83, .5); } 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes dots { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes wave { 0%, 100% { scale: 1 .3; } 50% { scale: 1 1; } }
@keyframes rec { 0% { box-shadow: 0 0 0 0 rgba(224, 90, 71, .6); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(200, 69, 46, .5); } 100% { box-shadow: 0 0 0 22px transparent; } }
@keyframes blink { 50% { opacity: .3; } }
@keyframes scan { 0% { background: var(--lime-soft); } 100% { background: var(--sheet); } }
@keyframes fill { to { width: 100%; } }
/* ---------- Zugangsschutz: Passwortseite vor der Simulation (15.10.) ---------- */
.osg { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px 16px;
  background: var(--bg), var(--bg); animation: fade-in .3s var(--ease) both; }
.osg-card { width: min(460px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 28px 24px; border-radius: var(--r-3); text-align: center;
  background: rgb(var(--glass) / .85); border: 1px solid rgb(var(--glass) / .9); box-shadow: 0 8px 28px rgb(var(--shade) / .34), 0 0 0 1px var(--ring); }
.osg-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-3); background: var(--soft); color: var(--brand); }
.osg-ic .ic { width: 26px; height: 26px; }
.osg-h { margin: 0; font: 800 1.45rem/1.15 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.osg-t { margin: 0; font-size: .92rem; color: var(--ink-2); max-width: 36ch; }
.osg-form { margin-top: 6px; }
.osg-err { margin: 0; font-size: .84rem; font-weight: 700; color: var(--bad-ink); }
.osg-hint { margin: 2px 0 0; font-size: .76rem; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .os *, .os *::before, .os *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Namen der Bausteine (00-namen.js): englischer Name, deutscher Klartext darunter oder daneben */
.win-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.win-name { overflow: hidden; text-overflow: ellipsis; }
.win-klar { font: 600 .74rem/1 var(--font-body); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.launch-t { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.launch-t small { font: 500 .66rem/1.15 var(--font-body); color: var(--ink-3); }
.st-klar { display: block; font-size: .74rem; color: var(--ink-3); margin: -2px 0 4px; }
.os.is-compact .win-klar { display: none; }

/* File Sonar: Rechenleistung der Texterkennung (Schonend / Leerlauf-Turbo) rechts in der Index-Leiste */
.ol { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ink-3); }
.ol > .ic { width: 14px; height: 14px; }
.ol-stat { font-weight: 700; color: var(--ink-2); }
.ol-stat.is-active { color: var(--ok-ink); }
.ol-btns { display: inline-flex; padding: 2px; border-radius: var(--r-2); background: var(--sheet); border: 1px solid var(--line); }
.ol-b { border: 0; background: none; padding: 3px 10px; border-radius: var(--r-2); font: 600 .74rem/1.2 var(--font-body); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.ol-b.is-on { background: var(--brand); color: var(--brand-ink); }
.ol-b:disabled { cursor: not-allowed; opacity: .6; }
.os.is-compact .ol-stat { display: none; }
.ix-rate { font-weight: 700; color: var(--brand-text); font-variant-numeric: tabular-nums; }
.s-index .ix-busy { color: var(--brand-text); }
.s-index.is-busy .live-dot { background: var(--brand); }
@container (max-width: 700px) {
  .s-index { flex-wrap: wrap; row-gap: 6px; }
  .s-index > span:nth-child(2) { flex: 1 1 calc(100% - 60px); }
  .s-index .ol { margin-left: 0; }
}

/* Lebendige Zahlen (24-live.js): Live-Kacheln, Zähler in der Kopfleiste, CPU in File Sonar */
.lv-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.lv { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-3); background: var(--sheet); border: 1px solid var(--line); min-width: 0; }
.lv-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-2); background: var(--brand-soft); color: var(--brand-text); }
.lv-ic .ic { width: 18px; height: 18px; }
.lv-t { display: flex; flex-direction: column; min-width: 0; }
.lv-n { font: 800 1.35rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.lv-t small { font-size: .74rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv--red .lv-ic { background: var(--bad-soft, var(--soft)); color: var(--bad-ink, var(--ink-2)); }
.lv--ok .lv-ic { background: var(--ok-soft); color: var(--ok-ink); }
.lv--cd .lv-n { color: var(--brand-text); }
.lv.is-bump { animation: lv-bump .6s var(--ease, ease-out); }
.lv.is-bump .lv-n { color: var(--brand-text); }
@keyframes lv-bump { 0% { transform: scale(1); box-shadow: 0 0 0 0 var(--brand-glow); } 35% { transform: scale(1.04); box-shadow: 0 0 0 6px var(--brand-glow); } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } }
.bar-pill-n { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; padding-left: 8px; border-left: 1px solid currentColor; font-variant-numeric: tabular-nums; }
.bar-pill-n:empty { display: none; }
.bar-pill .pn { display: inline-flex; align-items: center; gap: 3px; }
.bar-pill .pn .ic { width: 13px; height: 13px; }
.bar-pill-n.is-bump { animation: lv-pop .5s ease-out; }
@keyframes lv-pop { 40% { transform: scale(1.12); } }
.cpu-m { flex: none; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.cpu-l { font-weight: 700; color: var(--ink-2); }
.cpu-bar { width: 54px; height: 6px; border-radius: var(--r-2); background: var(--line); overflow: hidden; }
.cpu-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--ok-ink); transition: width .6s ease; }
.cpu-m.is-hot .cpu-bar i { background: var(--brand); }
.cpu-v { min-width: 3.2em; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .lv.is-bump, .bar-pill-n.is-bump { animation: none; } .cpu-bar i { transition: none; } }
.lv > .info-btn, .lv > button:last-child { margin-left: auto; flex: none; }

/* Live-Kacheln in allen Modulen (24-live.js) */
.win-body > .lv-row { flex: none; margin: 10px 14px 0; }
.lv-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv--txt .lv-n { font-size: 1.02rem; }
.app-freigaben.is-green { animation: green-light .8s ease-out; }
@keyframes green-light { 0% { box-shadow: inset 0 0 0 0 var(--ok-ink); } 30% { box-shadow: inset 0 0 0 3px var(--ok-ink); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
.bh-st .ic { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }
/* Engine Room */
.eng-box { margin-top: 4px; padding: 16px; border-radius: var(--r-3); background: var(--sheet); border: 1px solid var(--line); }
.eng-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.eng-head p { color: var(--ink-2); font-size: .88rem; max-width: 560px; }
.eng-crash { display: flex; gap: 8px; align-items: center; }
.eng-pick { height: 34px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--sheet); color: var(--ink); padding: 0 8px; font: inherit; }
.eng-table { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
.eng-table th { text-align: left; font-size: .72rem; text-transform: none; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.eng-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.eng-name { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.eng-k { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-text); }
.eng-k .ic { width: 14px; height: 14px; }
.eng-st { display: inline-block; padding: 2px 8px; border-radius: var(--r-2); font-weight: 700; font-size: .74rem; }
.eng-st--ok { background: var(--ok-soft); color: var(--ok-ink); }
.eng-st--down { background: var(--bad-soft); color: var(--bad-ink); }
.eng-st--restart { background: var(--soft); color: var(--brand-text); }
.eng-r.is-down td { background: var(--bad-soft); }
.owin.is-restarting .win-body { opacity: .35; filter: grayscale(1); transition: opacity .2s; }
.owin.is-restarting .win-bar::after { content: 'startet neu …'; margin-left: 8px; font-size: .74rem; font-weight: 700; color: var(--bad-ink); }
@container (max-width: 700px) { .win-body > .lv-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lv-ic { display: none; } }
@media (prefers-reduced-motion: reduce) { .app-freigaben.is-green { animation: none; } }

/* Engine Room: Integrität mit feinem Schild */
.int { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--r-3); background: var(--ok-soft); border: 1px solid var(--line); margin-bottom: 4px; transition: background .3s; }
.int-shield { position: relative; flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--sheet); color: var(--ok-ink); box-shadow: 0 0 0 1px var(--line); }
.int-shield .ic { width: 30px; height: 30px; stroke-width: 1.6; }
.int-shield::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ok-ink); opacity: .25; }
.int.is-proven .int-shield::after { opacity: .6; animation: int-ring 2.6s ease-out infinite; }
@keyframes int-ring { 0% { transform: scale(.92); opacity: .65; } 70% { transform: scale(1.12); opacity: 0; } 100% { opacity: 0; } }
.int.is-check { background: var(--soft); }
.int.is-check .int-shield { color: var(--brand-text); }
.int.is-check .int-shield::after { border-color: var(--brand-text); opacity: .7; animation: int-ring 1s ease-out infinite; }
.int-t { min-width: 0; }
.int-h { display: flex; align-items: center; gap: 6px; }
.int-h b { font: 800 1.05rem/1.2 var(--font-display); color: var(--ink); }
.int-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: .84rem; color: var(--ink-2); }
.int-list li { display: flex; align-items: center; gap: 6px; }
.int-list .ic { width: 14px; height: 14px; flex: none; }
.int-list li.is-ok .ic { color: var(--ok-ink); }
.int-list li.is-open .ic { color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .int.is-proven .int-shield::after, .int.is-check .int-shield::after { animation: none; } }

/* Value Radar · Geschäftsführung (25-cockpit.js) */
.t-cockpit { --t1: #3d3275; --t2: #2b2352; --t-fg: #c5d900; }
.app-cockpit { overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.cr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.cr-head h3 { font-size: 1.35rem; }
.cr-head p { color: var(--ink-2); font-size: .9rem; }
.cr-acts { display: flex; align-items: center; gap: 8px; }
.cr-per { margin: 0; }
.cr-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 12px; }
.cr-card { padding: 14px 16px; border-radius: var(--r-3); background: var(--sheet); border: 1px solid var(--line); min-width: 0; }
.cr-card h4 { font-size: .98rem; margin-bottom: 8px; }
.cr-chart { display: flex; align-items: flex-end; gap: 4px; height: 230px; padding-top: 6px; border-bottom: 1px solid var(--line); }
.cr-b { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.cr-bar { display: block; width: 100%; max-width: 46px; height: var(--h, 0%); border-radius: 6px 6px 2px 2px; background: var(--brand); transition: height .5s ease; }
.cr-b small { font-size: .62rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; max-width: 100%; }
.cr-b.is-proj .cr-bar { background: var(--brand-soft-2); background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--brand-line) 5px 7px); }
.cr-b.is-part .cr-bar { background: linear-gradient(to top, var(--brand) 60%, var(--brand-soft-2)); }
.cr-b.is-now .cr-bar { box-shadow: 0 0 0 2px var(--lime, #c5d900); }
.cr-b.is-now small { color: var(--brand-text); font-weight: 800; }
.cr-b.is-off .cr-bar { opacity: .35; }
.cr-leg { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .76rem; color: var(--ink-3); }
.cr-k { width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; }
.cr-k--ist { background: var(--brand); margin-left: 0; }
.cr-k--proj { background: var(--brand-soft-2); background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--brand-line) 3px 5px); }
.cr-k--now { background: var(--sheet); box-shadow: inset 0 0 0 2px var(--lime, #c5d900); }
.cr-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cr-proj { padding: 16px 18px; border-radius: var(--r-3); background: var(--night, #2b2352); color: #f6f3ff; }
.cr-proj-h { display: flex; justify-content: space-between; align-items: center; }
.cr-proj-h small { font-weight: 700; color: #cfc8ea; }
.cr-proj-h .info-btn { color: #cfc8ea; }
.cr-proj-n { display: block; font: 800 2.3rem/1.1 var(--font-display); color: var(--lime, #c5d900); margin: 6px 0; font-variant-numeric: tabular-nums; }
.cr-proj p { font-size: .82rem; color: #cfc8ea; }
.cr-gj-l { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .8rem; color: #cfc8ea; }
.cr-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cr-top li { display: grid; grid-template-columns: auto minmax(0, 1fr) 90px auto; align-items: center; gap: 8px; font-size: .84rem; }
.cr-tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 600; }
.cr-tb { height: 8px; border-radius: var(--r-2); background: var(--line); overflow: hidden; }
.cr-tb i { display: block; height: 100%; width: var(--w, 0%); background: var(--brand); border-radius: inherit; transition: width .5s ease; }
.cr-top b { font-variant-numeric: tabular-nums; }
.cr-note { margin-top: 2px; }
@container (max-width: 800px) { .cr-grid { grid-template-columns: minmax(0, 1fr); } .cr-chart { height: 180px; } .cr-b small { display: none; } }
.cr-top li.is-rest .cr-tn { color: var(--ink-2); font-style: italic; }
.cr-top li.cr-anon { display: flex; gap: 6px; font-size: .74rem; color: var(--ink-3); margin-top: 2px; }
.cr-top li.cr-anon .ic { width: 13px; height: 13px; flex: none; }
.cr-per { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-grid > .cr-card { display: flex; flex-direction: column; }
.cr-grid > .cr-card .cr-chart { flex: 1; height: auto; min-height: 230px; }
.cr-chart.is-hidden { align-items: center; justify-content: center; border-bottom: 0; }
.cr-hidden { max-width: 440px; text-align: center; display: grid; justify-items: center; gap: 6px; color: var(--ink-2); font-size: .86rem; }
.cr-hidden .ic { width: 26px; height: 26px; color: var(--brand-text); }
.cr-hidden b { color: var(--ink); font-size: 1rem; }

/* ---------- Nachweise im Datenschutz, Kennzeichnung „mit KI vorbereitet“ ---------- */
.ki-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-2); background: var(--brand-soft); color: var(--brand-text); font: 700 .7rem/1.3 var(--font-body); white-space: nowrap; vertical-align: middle; }
.ki-tag .ic { width: 12px; height: 12px; }
.fg-main > b + small + .ki-tag { display: inline-flex; margin: 4px 0 0; }
.nw-intro { margin-top: 0; }
.nw-sec { margin: 18px 0 8px; }
.nw-sec > h4 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; font-size: 1.02rem; }
.nw-sec > h4 small { color: var(--ink-3); font-weight: 600; font-size: .8rem; }
.nw-table td small { display: block; color: var(--ink-3); font-size: .76rem; }
.nw-table td .ic { margin-right: 6px; vertical-align: middle; }
.nw-badge { display: inline-block; padding: 2px 9px; border-radius: var(--r-2); font: 700 .72rem/1.4 var(--font-body); white-space: nowrap; }
.nw-badge--gem { background: var(--ok-soft); color: var(--ok-ink); }
.nw-badge--man { background: var(--info-soft); color: var(--info-ink); }
.nw-badge--ang { background: var(--warn-soft); color: var(--warn-ink); }
.nw-prov { display: grid; gap: 8px; margin-top: 8px; }
.nw-prow { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sheet); }
.nw-pname small { display: block; color: var(--ink-3); font-size: .78rem; }
.nw-ask { display: flex; gap: 8px; align-items: center; }
.nw-ask .nw-q { flex: 1; min-width: 0; }
.nw-res { margin-top: 10px; display: grid; gap: 8px; }
.nw-res .ob-btn { justify-self: start; }
.nw-grp h5 { margin: 6px 0 2px; font-size: .88rem; }
.nw-grp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nw-grp li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: .86rem; }
.nw-grp li small { color: var(--ink-3); }
.nw-more { color: var(--ink-3); }
.nw-akte-t { font-size: .88rem; color: var(--ink-2); margin: 0 0 10px; }
@media (max-width: 760px) { .nw-prow { grid-template-columns: auto minmax(0, 1fr); } .nw-prow .ob-input { grid-column: 1 / -1; } .nw-ask { flex-wrap: wrap; } }
.nw-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.nw-chip { border: 1px solid var(--line-2); background: var(--sheet); color: var(--ink-2); border-radius: var(--r-2); padding: 4px 12px; font: 700 .78rem/1.3 var(--font-body); cursor: pointer; }
.nw-chip:hover { border-color: var(--brand); color: var(--brand-text); }
.nw-frist { display: grid; gap: 8px; }
.nw-frist label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--sheet); font-size: .88rem; }
.nw-sel { width: auto; min-width: 150px; max-width: 100%; }
.nw-num { width: 90px; }
.nw-schul { margin: 6px 0; }

/* ---------- Bereiche auf dem Desktop (17.10.): Täglich, Verwaltung, System ---------- */
.d-area { position: absolute; left: calc(var(--ac, 0) * 54px + 2px); top: calc(var(--ar, 0) * 56px + 2px); width: calc(var(--aw, 4) * 54px - 4px); height: calc(var(--ah, 3) * 56px - 4px); box-sizing: border-box; overflow: hidden; border-radius: var(--r-3); background: var(--sheet); border: 1px solid var(--line-2); box-shadow: none; translate: var(--adx, 0) var(--ady, 0); transition: opacity .15s, border-color .15s, box-shadow .2s; }
.d-area.is-moving { z-index: 20; transition: none; box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); border-color: var(--brand-line); }
.d-area.is-own { border-color: var(--brand-line); }
.d-area-t { height: 44px; margin: 0; padding: 0 16px; display: flex; align-items: center; gap: 8px; font: 700 .82rem/1 var(--font-body); text-transform: none; color: var(--ink-2); cursor: grab; user-select: none; touch-action: none; }
.d-area.is-moving .d-area-t { cursor: grabbing; }
.d-area-t small { background: none; padding: 0; font-weight: 500; color: var(--ink-3); }
.d-area-grid { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 4), 102px); grid-auto-rows: 106px; gap: 6px; justify-content: center; align-content: start; }
.d-area-grid > .d-icon { grid-column: var(--gc, auto); grid-row: var(--gr, auto); }   /* Platz im Raster des Bereichs, gewählt beim Verschieben */
.os.is-compact .d-area-grid > .d-icon { grid-column: auto; grid-row: auto; }
.os.is-compact .os-icons { position: static; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 14px 8px 6px; overflow: visible; }
.os.is-compact .d-area { width: 100%; }
.os.is-compact .d-area-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.launch-areas { display: grid; gap: 4px; }
.launch-at { margin: 8px 4px 2px; font: 800 .66rem/1 var(--font-body); text-transform: none; color: var(--ink-3); }
.app-sparen { display: flex; flex-direction: column; min-height: 0; }
.sg-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sg-pane[hidden] { display: none; }
.sg-pane > .app { flex: 1; min-height: 0; }
.d-area-rs { position: absolute; right: 0; bottom: 0; width: 36px; height: 36px; cursor: nwse-resize; touch-action: none; color: var(--ink-3); transition: color .15s; }   /* nur die Punkte, ohne Keil dahinter */
.d-area-rs::before { content: ''; position: absolute; right: 8px; bottom: 8px; width: 16px; height: 16px; opacity: .8; background: radial-gradient(circle at 14px 14px, currentColor 1.7px, transparent 2.3px), radial-gradient(circle at 8px 14px, currentColor 1.7px, transparent 2.3px), radial-gradient(circle at 14px 8px, currentColor 1.7px, transparent 2.3px), radial-gradient(circle at 2px 14px, currentColor 1.7px, transparent 2.3px), radial-gradient(circle at 8px 8px, currentColor 1.7px, transparent 2.3px), radial-gradient(circle at 14px 2px, currentColor 1.7px, transparent 2.3px); }
.d-area-rs:hover, .d-area.is-moving .d-area-rs { color: var(--brand); }
.d-aghost { position: absolute; left: calc(var(--ac, 0) * 54px + 2px); top: calc(var(--ar, 0) * 56px + 2px); width: calc(var(--aw, 4) * 54px - 4px); height: calc(var(--ah, 3) * 56px - 4px); box-sizing: border-box; border-radius: var(--r-3); background: var(--brand-soft); border: 1px solid var(--brand-line); box-shadow: none; opacity: .8; pointer-events: none; display: none; }
.d-aghost.is-on { display: block; }
.d-aghost--rim { z-index: 30; background: transparent; box-shadow: none; opacity: .85; }   /* nur der weiche Rand, über der Fläche: beim Verkleinern scheint er durch das Glas, ohne die Symbole einzufärben */
.d-aghost--rim.is-bad { background: transparent; box-shadow: none; border-color: var(--bad-line); }
.d-aghost.is-bad { background: var(--bad-soft); box-shadow: none; border-color: var(--bad-line); }
.d-spacer { position: absolute; left: 0; top: 0; width: 1px; height: calc(var(--h, 0) * 1px); pointer-events: none; }
.os.is-compact .d-area { position: static; width: 100%; height: auto; translate: none; overflow: visible; margin-bottom: 10px; }
.os.is-compact .d-area-t { height: auto; padding: 10px 14px 4px; cursor: default; }
.os.is-compact .d-area-grid { justify-content: stretch; grid-auto-rows: auto; }
.os.is-compact .d-area-rs, .os.is-compact .d-spacer { display: none; }

/* ---------- Originalvorschau und Kopieren in File Sonar (V11, V22, V24) ---------- */
.p-mode { display: flex; align-items: center; gap: 6px; }
.p-mode-grp { display: inline-flex; padding: 3px; border-radius: var(--r-2); background: var(--soft); border: 1px solid var(--line); }
.p-mode-b { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--ink-2); font: 700 .78rem/1 var(--font-body); padding: 7px 12px; border-radius: var(--r-2); cursor: pointer; }
.p-mode-b .ic { width: 14px; height: 14px; }
.p-mode-b.is-on { background: var(--sheet); color: var(--ink); box-shadow: none; }
.p-view { position: relative; min-width: 0; }
.p-view.is-orig { flex: 1; min-height: 340px; display: flex; flex-direction: column; }
.o-view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.o-nav { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink-2); }
.o-nav-t { flex: 1; min-width: 0; }
.o-nav-t b { color: var(--ink); }
.o-nav-b { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--sheet); color: var(--ink); cursor: pointer; flex: none; }
.o-nav-b .ic { width: 15px; height: 15px; }
.o-nav-b:disabled { opacity: .4; cursor: default; }
.o-pages { position: relative; flex: 1; min-height: 0; overflow: auto; background: var(--soft-grey); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.o-page { position: relative; flex: none; width: 100%; aspect-ratio: 1 / 1.414; background: var(--paper); color: var(--paper-ink); border-radius: 3px; box-shadow: 0 1px 4px rgb(var(--shade) / .22); padding: 7% 8%; font-size: .66rem; line-height: 1.45; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.o-page:not(.is-drawn)::before { content: 'Seite ' attr(data-p); position: absolute; inset: 0; display: grid; place-items: center; color: var(--paper-ink-2); font-weight: 700; opacity: .5; }
.o-head { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--paper-line); color: var(--paper-ink-2); font-size: .58rem; }
.o-head b { color: var(--paper-ink); }
.o-title { font: 800 .86rem/1.25 var(--font-body); margin: 4px 0 2px; color: var(--paper-ink); letter-spacing: 0; }
.o-page--docx .o-title { color: var(--paper-head); font-weight: 600; font-size: 1rem; border-bottom: 1px solid var(--paper-line); padding-bottom: 3px; }
.o-p { margin: 0; color: var(--paper-ink); }
.o-lines i { display: block; height: 5px; border-radius: 3px; background: var(--paper-bar); margin: 6px 0; width: var(--w, 80%); }
.o-foot { margin-top: auto; text-align: center; color: var(--paper-ink-2); font-size: .56rem; }
.o-page mark, .o-xl mark, .o-scan-sheet mark { background: var(--paper-mark); color: var(--paper-ink); box-shadow: inset 0 -2px 0 var(--lime); }
.o-page mark.is-cur, .o-xl mark.is-cur, .o-scan-sheet mark.is-cur { background: var(--paper-cur); outline: 2px solid var(--brand); outline-offset: 1px; border-radius: 2px; }
.o-note, .o-perf { font-size: .72rem; color: var(--ink-3); margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.o-note .ic, .o-perf .ic { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.o-load { display: flex; align-items: center; gap: 10px; padding: 24px 12px; color: var(--ink-2); font-size: .82rem; }
.o-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--brand); animation: o-spin .7s linear infinite; flex: none; }
@keyframes o-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .o-spin { animation: none; } }
.o-pages--scan { background: var(--scan-bg); }
.o-scan-sheet { position: relative; margin: 6px auto; width: 92%; background: var(--scan-paper); color: var(--paper-ink); border-radius: 2px; padding: 9% 7% 7%; transform: rotate(-1.1deg); box-shadow: 0 1px 4px rgb(var(--shade) / .22); font: 500 .68rem/1.7 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.o-scan-sheet p { margin: 0 0 8px; }
.o-sl--t { font-weight: 800; }
.o-scan-badge { position: absolute; right: 8px; top: 8px; background: var(--night); color: var(--lime); font: 800 .62rem/1 var(--font-body); padding: 4px 9px; border-radius: var(--r-2); }
.o-scan-img { display: grid; place-items: center; height: 96px; margin-bottom: 10px; background: linear-gradient(135deg, var(--paper-bar), var(--scan-bg)); color: var(--paper); border-radius: 4px; }
.o-scan-img .ic { width: 30px; height: 30px; }
.o-xl { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background: var(--paper); color: var(--paper-ink); border: 1px solid var(--line-2); }
.o-xl-bar { display: flex; gap: 8px; align-items: center; padding: 5px 8px; background: var(--paper-2); border-bottom: 1px solid var(--paper-line); font-size: .7rem; }
.o-xl-name { min-width: 38px; padding: 2px 6px; border: 1px solid var(--paper-line); background: var(--paper); border-radius: 3px; text-align: center; }
.o-xl-fx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper-ink-2); }
.o-xl-grid { flex: 1; min-height: 0; overflow: auto; }
.o-xl-grid table { border-collapse: collapse; width: 100%; font-size: .7rem; }
.o-xl-grid th { background: var(--paper-2); color: var(--paper-ink-2); font-weight: 600; border: 1px solid var(--paper-line); padding: 2px 6px; position: sticky; top: 0; }
.o-xl-grid th.rn { left: 0; z-index: 1; width: 28px; text-align: center; }
.o-xl-grid tbody th.rn { top: auto; }
.o-xl-grid td { border: 1px solid var(--paper-line); padding: 3px 6px; white-space: nowrap; cursor: cell; }
.o-xl-grid tr.is-head td { font-weight: 700; background: var(--paper-2); }
.o-xl-tabs { display: flex; gap: 2px; padding: 4px 6px 0; background: var(--paper-2); border-top: 1px solid var(--paper-line); }
.o-xl-tab { border: 1px solid var(--paper-line); border-bottom: 0; background: var(--paper-bar); color: var(--paper-ink-2); font: 600 .7rem/1 var(--font-body); padding: 6px 12px; border-radius: 4px 4px 0 0; cursor: pointer; }
.o-xl-tab.is-on { background: var(--paper); color: var(--paper-ink); }
.p-copy { position: absolute; left: var(--cx, 0); top: var(--cy, 0); z-index: 6; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--r-2); background: var(--night); color: var(--on-night); font: 700 .76rem/1 var(--font-body); padding: 8px 12px; cursor: pointer; box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); }
.p-copy .ic { width: 14px; height: 14px; }
.p-copy.is-done { background: var(--green); color: var(--night); }
.p-copy-ta { position: fixed; left: -9999px; top: 0; opacity: 0; }
.s-prev ::selection { background: var(--soft-3); color: var(--ink); }
.o-page ::selection, .o-xl ::selection, .o-scan-sheet ::selection { background: var(--paper-head); color: var(--paper); }
@media (max-width: 760px) { .p-view.is-orig { flex: none; } .o-pages { flex: none; max-height: 70vh; } .o-xl { flex: none; } .o-xl-grid { max-height: 50vh; } }
/* Papier bleibt auch im dunklen Design hell: die allgemeine Regel für mark im Dunkeln darf hier nicht greifen */
html[data-theme="dark"] .o-page mark, html[data-theme="dark"] .o-xl mark, html[data-theme="dark"] .o-scan-sheet mark { color: var(--paper-ink); }

/* ---------- Trennlinien in den Modulen (Vorschlag Dietrich, 17.10.): ziehen, Pfeiltasten, Doppelklick = zurück, Pfeil = aus- und einblenden ---------- */
.sp-root { position: relative; }   /* der Zeiger --cur-ew kommt aus applyBrand in der Firmenfarbe (ewCursor in 30-teiler.js) */
.sp-h { position: absolute; top: 0; bottom: 0; width: 11px; z-index: 4; cursor: var(--cur-ew, ew-resize); display: flex; justify-content: center; touch-action: none; outline: none; }
.sp-h--l { left: calc(var(--spl, var(--spl-d, 0px)) - 5px); }
.sp-h--r { right: calc(var(--spr, var(--spr-d, 0px)) - 5px); }
.sp-h[hidden], .sp-root.sp-off .sp-h { display: none; }
.sp-h::before { content: ''; width: 3px; height: 100%; border-radius: 2px; background: transparent; transition: background .12s; }
.sp-h:hover::before, .sp-h:focus-visible::before, .sp-h.is-drag::before { background: var(--brand); }
.sp-grip { position: absolute; top: 50%; left: 50%; width: 5px; height: 34px; margin: -17px 0 0 -2px; border-radius: 3px; background: var(--line-2); pointer-events: none; transition: background .12s; }
.sp-h:hover .sp-grip, .sp-h:focus-visible .sp-grip, .sp-h.is-drag .sp-grip { background: var(--brand); }
.sp-t { position: absolute; top: 14px; left: 50%; width: 22px; height: 22px; margin-left: -11px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--sheet); color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity .12s; box-shadow: none; }
.sp-t .ic { width: 13px; height: 13px; }
.sp-h:hover .sp-t, .sp-h:focus-visible .sp-t, .sp-h.is-zu .sp-t { opacity: 1; }
.sp-t:hover { color: var(--brand-text); border-color: var(--brand); }
.sp-pane-zu { visibility: hidden; overflow: hidden; padding: 0 !important; border: 0 !important; }
.sp-root.sp-drag { cursor: var(--cur-ew, ew-resize); user-select: none; }
.win-b--split.is-on, .win-b--split:hover { color: var(--brand-text); }
.os.is-compact .win-b--split { display: none; }
.pop--panes { width: 290px; padding: 12px; }
.pn-list { display: flex; flex-direction: column; gap: 4px; }
.pn-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-2); background: none; color: var(--ink); font: 700 .84rem/1.2 var(--font-body); text-align: left; cursor: pointer; }
.pn-item:hover, .pn-item:focus-visible { background: var(--soft); outline: none; }
.pn-mini { display: flex; gap: 2px; height: 30px; padding: 3px; border-radius: 6px; background: var(--soft-grey); border: 1px solid var(--line-2); }
.pn-mini i { display: block; border-radius: 2px; min-width: 0; flex: 0 1 0; background: var(--line-2); }
.pn-mini i:nth-child(1) { flex-grow: var(--l); }
.pn-mini i:nth-child(2) { flex-grow: var(--m); background: var(--brand-soft); }
.pn-mini i:nth-child(3) { flex-grow: var(--r); }
/* Ausgeblendeter Bereich: Die Trennlinie sitzt am Rand innen, damit der Pfeil zum Einblenden nicht abgeschnitten wird */
.sp-h--l.is-zu { left: 0; }
.sp-h--r.is-zu { right: 0; }

/* ---------- Kurzinfos im Design (17.10.): statt der Browser-Einblendungen, in den Farben der Firma ---------- */
.os-tip { position: absolute; left: var(--tx, 0); top: var(--ty, 0); z-index: 900; max-width: 300px; box-sizing: border-box; padding: 8px 13px; border-radius: var(--r-3); background: var(--brand); color: var(--brand-ink); font: 700 .8rem/1.35 var(--font-body); white-space: pre-line; text-align: left; box-shadow: none; pointer-events: none; opacity: 0; scale: .94; transform-origin: var(--ax, 50%) 100%; transition: opacity .12s, scale .12s; }
.os-tip.is-below { transform-origin: var(--ax, 50%) 0; }
.os-tip.is-on { opacity: 1; scale: 1; }
.os-tip::after { content: ''; position: absolute; left: calc(var(--ax, 50%) - 6px); bottom: -5px; width: 12px; height: 12px; background: var(--brand); border-radius: 0 0 4px 0; rotate: 45deg; }
.os-tip.is-below::after { bottom: auto; top: -5px; border-radius: 4px 0 0 0; }

/* ---------- Page Parrot · Vorlesen (34-vorlesen.js, Dietrich 27.10.2026) ---------- */
.t-vorlesen { --t1: #5ccf86; --t2: #12894a; }   /* Papagei-Grün */
/* Knopf „Vorlesen“ mit Pfeil für Kurzfassung und Warteschlange */
.vr-split { display: inline-flex; flex: none; }
.vr-split .vr-go { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.vr-split .vr-more { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 7px; margin-left: -1px; }
.vr-split .vr-more .ic { width: 15px; height: 15px; }
.vr-menu { width: 290px; }
.vr-mi { align-items: flex-start; }
.vr-mi > span { display: flex; flex-direction: column; gap: 1px; }
.vr-mi small { color: var(--ink-3); font-weight: 500; font-size: .76rem; }
.msg-vorlesen { margin-left: 0; margin-right: 10px; }
.msg-meta .msg-vorlesen + .msg-korb { margin-left: 0; }
.msg-meta:has(.msg-vorlesen) .msg-vorlesen { margin-left: auto; }
/* Markierter Text: schwebender Knopf an der Markierung */
.vr-sel { position: absolute; left: var(--x, 0); top: var(--y, 0); z-index: 44; animation: fade-up .16s var(--ease) both; }
.vr-sel-b { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px 0 11px; border-radius: var(--r-2); border: 0; background: var(--night); color: #fff; font: 700 .84rem/1 var(--font-body); cursor: pointer; box-shadow: 0 4px 18px rgb(var(--shade) / .26), 0 0 0 1px var(--ring); }
.vr-sel-b:hover { background: var(--brand); color: var(--brand-ink); }
.vr-sel-b .ic { width: 17px; height: 17px; }
/* Vorlese-Leiste */
.vr { position: absolute; z-index: 9; left: 0; right: 0; margin-inline: auto; bottom: calc(var(--task-h) + 12px); width: min(800px, calc(100% - 24px)); display: flex; flex-direction: column; border-radius: var(--r-3); background: var(--sheet);
  box-shadow: 0 8px 28px rgb(var(--shade) / .34), 0 0 0 1px var(--ring); overflow: hidden; animation: fade-up .22s var(--ease) both; }
.vr[hidden] { display: none; }
.os.chat-open .vr { bottom: auto; top: calc(var(--bar-h) + 10px); }
.os:has(.dlg-back) .vr { z-index: 46; }   /* beim Vorlesen aus einem Dialog bleibt die Leiste vor dem Dialog bedienbar */
.os.has-vr .os-toasts { bottom: calc(var(--task-h) + 104px); }
.os.chat-open.has-vr .os-toasts { bottom: calc(var(--task-h) + 14px); }
.vr-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 14px; }
.vr-ctl { display: flex; align-items: center; gap: 4px; }
.vr-play { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--brand); color: var(--brand-ink); cursor: pointer; flex: none; box-shadow: none; }
.vr-play:hover:not(:disabled) { background: var(--brand-hi); }
.vr-play:disabled { opacity: .55; cursor: default; }
.vr-play .ic { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; }
.vr-b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--ink-2); cursor: pointer; flex: none; }
.vr-b:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-text); }
.vr-b:disabled { opacity: .32; cursor: default; }
.vr-b .ic { width: 18px; height: 18px; }
.vr-prev .ic, .vr-next .ic { width: 17px; height: 17px; }
.vr-info { min-width: 0; display: grid; gap: 4px; }
.vr-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vr-title { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: .84rem; }
.vr-title .ic { width: 16px; height: 16px; flex: none; color: var(--brand-text); }
.vr-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.vr-mode { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--r-2); border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand-text); font: 700 .72rem/1 var(--font-body); cursor: pointer; flex: none; }
.vr-mode[hidden] { display: none; }
.vr-mode .ic { width: 12px; height: 12px; }
.vr-now { color: var(--ink); font-size: .95rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.35em; }
.vr[data-state="pause"] .vr-now { color: var(--ink-2); }
.vr-row { display: flex; align-items: center; gap: 12px; }
.vr-prog { position: relative; flex: 1; height: 10px; border-radius: 999px; background: var(--soft-2); cursor: pointer; }
.vr-prog:focus-visible { outline-offset: 3px; }
.vr-prog-in { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: inherit; background: var(--brand); transition: width .25s linear; }
.vr-time { color: var(--ink-3); font-size: .74rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vr-right { display: flex; align-items: center; gap: 4px; }
.vr-tempo { display: flex; align-items: center; gap: 0; background: var(--soft); border-radius: var(--r-2); padding: 2px; }
.vr-tempo .vr-b { width: 28px; height: 28px; }
.vr-tempo .vr-b .ic { width: 14px; height: 14px; }
.vr-rate { min-width: 58px; height: 28px; border-radius: var(--r-2); border: 0; background: none; font: 800 .84rem/1 var(--font-body); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.vr-rate:hover { color: var(--brand-text); }
.vr-panel { border-bottom: 1px solid var(--line); max-height: min(34vh, 260px); overflow: auto; padding: 10px 14px 6px; }
.vr-panel[hidden] { display: none; }
.vr-text { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vr-s-b { display: block; width: 100%; text-align: left; border: 0; background: none; font: 500 .92rem/1.45 var(--font-body); color: var(--ink-3); padding: 5px 10px; border-radius: var(--r-2); cursor: pointer; }
.vr-s-b:hover { background: var(--soft); }
.vr-s.is-past .vr-s-b { color: var(--ink-2); }
.vr-s.is-cur .vr-s-b { color: var(--ink); background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); font-weight: 600; }
.vr-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 6px; position: sticky; bottom: 0; background: var(--sheet); }
.vr-lock { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--ok-ink); font-size: .76rem; font-weight: 700; }
.vr-lock .ic { width: 14px; height: 14px; }
.os.is-compact .vr { width: calc(100% - 16px); bottom: calc(var(--task-h) + 8px); }
.os.is-compact .vr-main { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px; }
.os.is-compact .vr-right { grid-column: 1 / -1; justify-content: space-between; }
.os.is-compact .vr-time { display: none; }
/* App Page Parrot */
.app-vorlesen { display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 18px; overflow-y: auto; }
.vo-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); flex: none; overflow-x: auto; scrollbar-width: none; }
.vo-tab { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 0; background: none; font-weight: 700; font-size: .86rem; color: var(--ink-3); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; flex: none; }
.vo-tab.is-on { color: var(--ink); border-bottom-color: var(--brand); }
.vo-content { display: flex; flex-direction: column; gap: 12px; }
.vo-card { border: 1px solid var(--line); background: var(--sheet); border-radius: var(--r-3); padding: 14px 16px; }
.vo-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vo-head h3 { font-size: 1.02rem; }
.vo-text { width: 100%; box-sizing: border-box; margin: 8px 0; padding: 12px 14px; border-radius: var(--r-3); border: 1.5px solid var(--line-2); background: var(--sheet-2); color: var(--ink); font: 400 .95rem/1.5 var(--font-body); resize: vertical; min-height: 120px; }
.vo-text:focus { outline: 0; border-color: var(--brand); }
.vo-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vo-queue ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vo-queue li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--sheet); font-size: .88rem; }
.vo-queue li .ic { width: 16px; height: 16px; color: var(--brand-text); }
.vo-queue li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vo-x { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 0; background: none; color: var(--ink-3); cursor: pointer; }
.vo-x:hover { background: var(--bad-soft); color: var(--bad-ink); }
.vo-x .ic { width: 14px; height: 14px; }
.vo-where { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; }
.vo-w { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--sheet-2); text-align: left; cursor: pointer; }
.vo-w:hover:not(:disabled) { border-color: var(--brand-line); background: var(--brand-soft); }
.vo-w:disabled { opacity: .55; cursor: default; }
.vo-w > .ic { width: 20px; height: 20px; color: var(--brand-text); flex: none; }
.vo-w span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vo-w b { font-size: .88rem; }
.vo-w small { color: var(--ink-3); font-size: .76rem; }
.vo-key { display: flex; gap: 10px; align-items: flex-start; margin: 12px 2px 0; color: var(--ink-2); font-size: .86rem; }
.vo-key .ic { width: 18px; height: 18px; color: var(--brand-text); flex: none; margin-top: 2px; }
.vo-key kbd, .vo-card kbd { font: 700 .74rem/1 var(--font-body); background: var(--soft); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 6px; color: var(--ink-2); }
.vo-voices, .vo-eng { display: grid; gap: 8px; margin-top: 6px; }
.vo-voice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r-3); border: 1.5px solid var(--line-2); background: var(--sheet); text-align: left; cursor: pointer; }
.vo-voice > .ic { width: 22px; height: 22px; color: var(--brand-text); flex: none; }
.vo-voice > span:not(.bh-st) { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.vo-voice small { color: var(--ink-3); font-size: .78rem; }
.vo-voice.is-on { border-color: var(--brand); background: var(--brand-soft); }
.vo-voice:disabled { opacity: .6; cursor: default; }
.vo-lok { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ok-ink); font-size: .82rem; font-weight: 600; }
.vo-lok .ic { width: 16px; height: 16px; }
.vo-rates { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.vo-rate.is-on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.vo-facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: .88rem; color: var(--ink-2); }
.vo-facts li { display: flex; gap: 10px; align-items: flex-start; }
.vo-facts .ic { width: 17px; height: 17px; color: var(--brand-text); flex: none; margin-top: 2px; }
.vo-dict { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: .88rem; }
.vo-dict th { text-align: left; font: 800 .7rem/1 var(--font-body); text-transform: none; color: var(--ink-3); padding: 6px 4px; }
.vo-dict td { padding: 4px; vertical-align: middle; }
.vo-dict td > .ic { width: 16px; height: 16px; color: var(--ink-3); }
.vo-in { width: 100%; box-sizing: border-box; height: 36px; padding: 0 10px; border-radius: var(--r-2); border: 1.5px solid var(--line-2); background: var(--sheet); color: var(--ink); font: 500 .88rem/1 var(--font-body); }
.vo-in:focus { outline: 0; border-color: var(--brand); }
.vo-rowact { white-space: nowrap; text-align: right; }
.vo-hist { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.vo-hist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-3); }
.vo-hist li .ic { width: 16px; height: 16px; color: var(--brand-text); grid-row: span 2; align-self: center; }
.vo-ht { font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vo-hist small { color: var(--ink-3); font-size: .76rem; }

/* ---------- Ruhiger Stil, Stufe 2 (28.10.2026, nach der Spec „Ruhiger Stil“ des OS-Projekts): Bauteile ---------- */
/* B3 Kennzahlen: eine Zeile, oben eine kräftige Linie, Etikett klein darüber, Zahl groß in der Textschrift, keine Symbolkacheln */
.lv-row { display: flex; flex-wrap: wrap; gap: 0; margin: 12px 0; border-top: 2px solid var(--ink); }
.lv { flex: 1 1 150px; align-items: flex-start; gap: 6px; padding: 10px 16px; border: 0; border-left: 1px solid var(--line-2); border-radius: 0; background: none; }
.lv:first-child { border-left: 0; padding-left: 0; }
.lv-ic { display: none; }
.lv-t { flex-direction: column-reverse; }
.lv-n { font: 600 1.5rem/1.1 var(--font-body); }
.lv-t small { font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.lv--txt .lv-n { font-size: 1.1rem; }
.lv--red .lv-n { color: var(--bad-ink); }
/* B4 Status: im Normalfall leiser Text, Farbe nur bei Abweichung */
.eng-st, .eng-st--ok, .eng-st--restart { background: none; padding: 0; border-radius: 0; font-weight: 500; font-size: .84rem; color: var(--ink-3); }
.eng-st--down { color: var(--bad-ink); font-weight: 700; background: none; }
.eng-st--down::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--bad-ink); }
.bar-pill, .bh-st, .bh-st--ok, .bh-st--warn, .bh-st--bad { background: none; border-color: transparent; padding-left: 0; padding-right: 0; }
.bh-st--ok { color: var(--ink-3); }
.bh-st--warn { color: var(--warn-ink); }
.bh-st--bad { color: var(--bad-ink); }
/* B5 Tabellen: Kopf normal geschrieben und kräftig, darunter eine Linie von 2 px */
.os th { font-weight: 700; color: var(--ink-2); font-size: .8rem; border-bottom: 2px solid var(--ink); }
.eng-box { border: 0; padding: 0; background: none; border-radius: 0; }
/* B6 Hinweise: Randstrich links statt Pastellkasten */
.gate-warn, .fg-warn, .ov-dead, .int { background: none; border: 0; border-left: 3px solid var(--warn-ink); border-radius: 0; padding-left: 12px; }
.int { border-left-color: var(--ok-ink); }
.int.is-check { border-left-color: var(--brand); background: none; }
.int-shield { width: 44px; height: 44px; box-shadow: none; border: 1px solid var(--line-2); }
.int-shield::after { display: none; }
.int-shield .ic { width: 24px; height: 24px; }
/* B8 Symbole: nicht in getönten Kacheln vor jeder Überschrift */
.dlg-ic, .p-ic, .ab-ic, .fg-ic, .korb-empty-ic, .korb-recipe-ic, .pk-br-ic, .osg-ic, .eng-k { background: none; color: var(--ink-2); }
.dlg-ic, .korb-empty-ic, .osg-ic { width: auto; height: auto; }
.ab-card.is-on .ab-ic, .vb-card.is-on .ab-ic { background: none; color: var(--ok-ink); }