/* Assistenz-Cockpit – eine Datei, keine Build-Schritte. */

@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/chakra-petch-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/chakra-petch-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/chakra-petch-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/chakra-petch-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/barlow-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #070b14;
  --bg-2: #090f1a;
  --panel: #0c1320;
  --panel-2: #111a2b;
  --panel-3: #16213a;
  --line: #1a2740;
  --line-2: #26365a;
  --line-3: #35497a;
  --text: #e7eef9;
  --text-2: #9fb0cc;
  --text-3: #6f84a8;
  --cyan: #5ee1ff;
  --cyan-2: #2fb9d9;
  --cyan-ink: #04131a;
  --cyan-soft: rgba(94, 225, 255, 0.12);
  --amber: #ffb547;
  --amber-ink: #1a1100;
  --amber-soft: rgba(255, 181, 71, 0.14);
  --red: #ff5c6c;
  --red-soft: rgba(255, 92, 108, 0.14);
  --green: #52e39a;
  --green-soft: rgba(82, 227, 154, 0.14);
  --violet: #9d8cff;
  --shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.75), 0 3px 8px -3px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 6px 16px -8px rgba(0, 0, 0, 0.7), 0 1px 3px -1px rgba(0, 0, 0, 0.6);
  --accent-glow: rgba(94, 225, 255, 0.6);
  --accent-ring: rgba(94, 225, 255, 0.6);
  --selection: rgba(94, 225, 255, 0.35);
  --red-line: rgba(255, 92, 108, 0.5);
  --warn-text: #ffd6da;
  --topbar-bg: rgba(7, 11, 20, 0.86);
  --veil: rgba(9, 15, 26, 0.5);
  --veil-strong: rgba(9, 15, 26, 0.9);
  --backdrop: rgba(3, 6, 12, 0.7);
  --row-hover: rgba(255, 255, 255, 0.015);
  --grid-line: rgba(94, 225, 255, 0.035);
  --bg-glow: rgba(94, 225, 255, 0.07);
  --bg-top: #080d17;
  --lage-bg: rgba(12, 19, 32, 0.6);
  --marker-glow: 1;
  --label-track: 0.14em;
  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --r: 10px;
  --r-sm: 6px;
  --topbar: 56px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--bg);
  background-image:
    radial-gradient(1200px 500px at 70% -200px, var(--bg-glow), transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 300px);
  color: var(--text);
  font: 15px/1.5 var(--body);
  font-feature-settings: "tnum" 1;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
}
::selection { background: var(--selection); }
* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid transparent; border-radius: 8px; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--line-3); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--cyan); color: var(--cyan-ink); padding: 8px 12px; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

/* ---------- Type helpers ---------- */
.label {
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--text-3);
}
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: 0 20px 0 16px;
  background: var(--topbar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; }
.brand-sep { color: var(--cyan); margin: 0 6px; }
.views { display: flex; gap: 2px; justify-self: center; }
.view-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: var(--topbar); padding: 0 14px;
  background: none; border: 0; color: var(--text-2);
  font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.2s var(--ease-out);
}
.view-tab:hover { color: var(--text); }
.view-tab.is-active { color: var(--text); }
.view-tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out); }
.view-tab.is-active::after { transform: scaleX(1); }
.view-tab-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 11px; background: var(--panel-3); color: var(--text-2); font-variant-numeric: tabular-nums; }
.view-tab.is-active .view-tab-count { background: var(--cyan); color: var(--cyan-ink); }
.view-tab-count.is-amber { background: var(--amber); color: var(--amber-ink); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.filter { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.chip {
  height: 26px; padding: 0 11px; border-radius: 999px; border: 0; background: transparent; color: var(--text-2);
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.chip:hover { color: var(--text); }
.chip.is-active { background: var(--panel-3); color: var(--cyan); }
.clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.clock-time { font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: 0.06em; color: var(--text); font-variant-numeric: tabular-nums; }
.clock-date { font-family: var(--display); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.icon-btn {
  width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-2);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.icon-btn:hover { background: var(--panel-2); color: var(--text); border-color: var(--line); text-decoration: none; }
.icon-btn.is-spinning svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Lagebild + Horizont ---------- */
.main { position: relative; z-index: 1; }
.lage {
  display: grid; grid-template-columns: minmax(320px, 1fr) minmax(420px, 48%); gap: 32px; align-items: center;
  padding: 18px 24px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--lage-bg), transparent);
}
.lage-line { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--text); text-wrap: balance; }
.lage-line strong { color: var(--amber); font-weight: 600; }
.lage-line .warn { color: var(--red); font-weight: 600; }
.lage-line .ok { color: var(--green); }
.lage-meta { margin: 6px 0 0; font-family: var(--display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.lage-meta b { color: var(--text-2); font-weight: 600; }
.horizont { min-height: 74px; }
.horizont svg { display: block; width: 100%; height: 74px; overflow: visible; }
.hz-axis { stroke: var(--line-2); stroke-width: 1; }
.hz-tick { stroke: var(--line-2); stroke-width: 1; }
.hz-tick.is-weekend { stroke: var(--line); }
.hz-day { font-family: var(--display); font-size: 10px; letter-spacing: 0.08em; fill: var(--text-3); text-transform: uppercase; }
.hz-day.is-today { fill: var(--cyan); font-weight: 600; }
.hz-daynum { font-family: var(--display); font-size: 10px; fill: var(--text-3); }
.hz-today-line { stroke: var(--cyan); stroke-width: 1.5; }
.hz-today-glow { stroke: var(--cyan); stroke-width: 6; opacity: 0.18; }
.hz-today-dot { fill: var(--cyan); }
.hz-today-pulse { fill: none; stroke: var(--cyan); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
.hz-marker { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out); }
.hz-marker:hover { transform: scale(1.25); }
.hz-marker.is-gone { transform: scale(0.2); opacity: 0; pointer-events: none; }
.hz-marker.is-selected .hz-diamond { stroke: var(--text); stroke-width: 1.5; }
.hz-diamond { stroke: var(--bg); stroke-width: 1; }
.hz-marker.p1 .hz-diamond { fill: var(--amber); filter: drop-shadow(0 0 6px rgba(255, 181, 71, calc(0.7 * var(--marker-glow)))); }
.hz-marker.p2 .hz-diamond { fill: var(--cyan); filter: drop-shadow(0 0 5px rgba(94, 225, 255, calc(0.5 * var(--marker-glow)))); }
.hz-marker.p3 .hz-diamond { fill: var(--text-3); }
.hz-marker.is-over .hz-diamond, .hz-marker.is-warn .hz-diamond { fill: var(--red); filter: drop-shadow(0 0 6px rgba(255, 92, 108, calc(0.7 * var(--marker-glow)))); }
.hz-stem { stroke: var(--line-3); stroke-width: 1; }
.hz-hit { fill: transparent; }
.hz-count { font-family: var(--display); font-size: 10px; font-weight: 700; fill: var(--bg); }
.hz-label { font-family: var(--display); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--text-3); }
.hz-label.is-cyan { fill: var(--cyan); }
.hz-label.is-red { fill: var(--red); }

/* ---------- Work area ---------- */
.work { display: grid; grid-template-columns: 430px minmax(0, 1fr); height: calc(100vh - var(--topbar) - 109px); min-height: 420px; }
.queue { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--veil); }
.queue-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px 20px; }
.queue-title { margin: 0; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text-3); transition: border-color 0.2s; }
.search:focus-within { border-color: var(--cyan-2); color: var(--text-2); }
.search input { width: 150px; border: 0; background: none; outline: none; color: var(--text); }
.search input::placeholder { color: var(--text-3); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.queue-list { list-style: none; margin: 0; padding: 0 12px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.queue-group { padding: 14px 8px 6px; font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 10px; }
.queue-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.queue-group.g1 { color: var(--amber); }
.queue-group.g-warn { color: var(--red); }
.qi {
  position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 0 10px; width: 100%; text-align: left;
  padding: 12px 12px 12px 10px; margin: 0 0 4px; border: 1px solid transparent; border-radius: var(--r); background: transparent;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
.qi:hover { background: var(--panel); border-color: var(--line); }
.qi.is-active { background: var(--panel-2); border-color: var(--cyan-2); box-shadow: inset 0 0 0 1px var(--accent-ring), var(--shadow-sm); }
.qi.is-leaving { opacity: 0; transform: translateX(-24px); }
.qi-pip { grid-row: 1 / span 3; margin-top: 6px; width: 8px; height: 8px; border-radius: 2px; background: var(--text-3); transform: rotate(45deg); }
.qi.p1 .qi-pip { background: var(--amber); }
.qi.p2 .qi-pip { background: var(--cyan); }
.qi.is-warn .qi-pip { background: var(--red); }
.qi.is-laeuft .qi-pip { animation: blink 1s ease-in-out infinite alternate; }
@keyframes blink { from { opacity: 1; } to { opacity: 0.25; } }
.qi-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.qi-firma { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.qi-sender { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.qi-time { margin-left: auto; font-family: var(--display); font-size: 11px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qi-subject { margin: 3px 0 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qi-foot { display: flex; align-items: center; gap: 8px; margin-top: 7px; min-width: 0; }
.qi-summary { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tag {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 5px;
  font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  background: var(--panel-3); color: var(--text-2);
}
.tag-frist { color: var(--text); }
.tag-frist.is-soon { background: var(--amber-soft); color: var(--amber); }
.tag-frist.is-over { background: var(--red-soft); color: var(--red); }
.tag-warn { background: var(--red-soft); color: var(--red); }
.tag-laeuft { background: var(--cyan-soft); color: var(--cyan); }
.tag-fehler { background: var(--red-soft); color: var(--red); }
.tag-demo { background: var(--panel-3); color: var(--violet); }
.tag-kat { color: var(--text-2); background: var(--panel-2); }
.queue-empty { padding: 48px 20px; text-align: center; color: var(--text-2); }
.queue-empty .big { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--green); display: block; margin-bottom: 6px; }

/* ---------- Detail ---------- */
.detail { display: flex; flex-direction: column; min-height: 0; }
.detail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 32px; }
.detail-empty { height: 100%; display: grid; place-items: center; color: var(--text-3); text-align: center; padding: 40px; }
.detail-empty .label { margin-top: 10px; }
.card { max-width: 900px; margin: 0 auto; padding: 22px 32px 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.btn.card-back { display: none; }
.card-subject { margin: 10px 0 6px; font-family: var(--body); font-size: 22px; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.card-from { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--text-2); font-size: 14px; }
.card-from .who { color: var(--text); font-weight: 500; }
.card-from .mail { color: var(--text-3); }
.card-warn {
  margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--red-line); background: var(--red-soft);
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--warn-text); font-size: 14px;
}
.card-warn svg { color: var(--red); margin-top: 1px; }
.card-warn b { color: var(--red); font-family: var(--display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 2px; }
.card-sec { margin-top: 22px; }
.card-sec > .label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.card-sec > .label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.card-text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); max-width: 72ch; }
.card-reco { display: grid; grid-template-columns: 1px 1fr; gap: 16px; }
.card-reco::before { content: ""; background: var(--cyan-2); }
.card-reco p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); max-width: 72ch; }
.card-reco p em { color: var(--text-2); font-style: normal; }
details.dossier { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
details.dossier > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
}
details.dossier > summary::-webkit-details-marker { display: none; }
details.dossier > summary svg { transition: transform 0.3s var(--ease-out); color: var(--text-3); }
details.dossier[open] > summary svg { transform: rotate(180deg); }
details.dossier > summary .ds-meta { margin-left: auto; color: var(--text-3); letter-spacing: 0.08em; font-weight: 500; }
.ds-body { padding: 4px 16px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px; border-top: 1px solid var(--line); }
.ds-block h4 { margin: 12px 0 6px; font-family: var(--display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.ds-block p, .ds-block li { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.ds-block p b { color: var(--text); font-weight: 500; }
.ds-block ul { margin: 0; padding: 0; list-style: none; }
.ds-block li { display: grid; grid-template-columns: 74px 1fr; gap: 8px; padding: 3px 0; }
.ds-block li .d { font-family: var(--display); font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ds-block.wide { grid-column: 1 / -1; }
.ds-orig { margin: 0; white-space: pre-wrap; font-family: var(--body); font-size: 14px; line-height: 1.5; color: var(--text-2); padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); max-height: 320px; overflow: auto; }
.ds-att { display: inline-flex; align-items: center; gap: 6px; margin: 4px 8px 0 0; padding: 4px 9px; border-radius: 6px; background: var(--panel-3); font-size: 13px; color: var(--text-2); }
.ds-att.is-q { color: var(--red); background: var(--red-soft); }
.ds-att svg { color: var(--text-3); }
.ds-rule { display: inline-block; margin: 4px 6px 0 0; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-2); font-size: 13px; color: var(--text-2); }

/* Editor */
.editor { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color 0.2s; }
.editor:focus-within { border-color: var(--cyan-2); }
.editor-subject { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 12px 16px; font-size: 15px; font-weight: 600; color: var(--text); outline: none; }
.editor-subject::placeholder { color: var(--text-3); font-weight: 400; }
.editor-text { width: 100%; min-height: 220px; resize: vertical; border: 0; background: transparent; padding: 14px 16px; font-size: 15px; line-height: 1.55; color: var(--text); outline: none; font-family: var(--body); }
.editor-text::placeholder { color: var(--text-3); }
.editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 16px; border-top: 1px solid var(--line); font-family: var(--display); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.editor-foot .ph { color: var(--amber); }
.editor-foot .saved { color: var(--green); }
.editor[data-locked="1"] { opacity: 0.6; pointer-events: none; }

/* Actions */
.actions { flex: none; padding: 12px 32px 14px; border-top: 1px solid var(--line); background: var(--veil-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.actions-row { max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.actions-row .spacer { flex: 1; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text);
  font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease-out), box-shadow 0.2s;
}
.btn:hover { background: var(--panel-3); border-color: var(--line-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--cyan); border-color: var(--cyan); color: var(--cyan-ink); box-shadow: 0 6px 18px -6px var(--accent-glow); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 8px 22px -6px var(--accent-glow); }
.btn-danger { border-color: var(--red-line); color: var(--red); }
.btn-danger:hover { background: var(--red-soft); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.btn-wide { width: 100%; height: 44px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 11px; }
.btn.is-busy { position: relative; color: transparent; }
.btn.is-busy::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--cyan-ink) transparent var(--cyan-ink) transparent; animation: spin 0.7s linear infinite; color: var(--text); }
.btn:not(.btn-primary).is-busy::after { border-color: var(--text) transparent var(--text) transparent; }
.menu { position: relative; }
.menu-list {
  position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 230px; padding: 6px; margin: 0; list-style: none;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); z-index: 20;
  transform-origin: bottom right; animation: pop 0.2s var(--ease-out);
}
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(4px); } }
.menu-list button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 6px; background: none; text-align: left; color: var(--text); font-size: 14px; }
.menu-list button:hover { background: var(--panel-3); }
.menu-list button svg { width: 16px; height: 16px; color: var(--text-2); }
.menu-list button.is-danger { color: var(--red); }
.state-note { margin-top: 18px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--panel); display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.state-note.is-fehler { border-color: var(--red-line); color: var(--warn-text); }
.state-note.is-laeuft { border-color: var(--accent-ring); }
.state-note svg { flex: none; margin-top: 2px; }
.hist { margin: 0; padding: 0; list-style: none; }
.hist li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.hist li .d { font-family: var(--display); font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.hist li b { color: var(--text); font-weight: 500; }

/* ---------- Pages (Erledigt, Automatisch, Einstellungen) ---------- */
.view-page { max-width: 1100px; margin: 0 auto; padding: 24px 24px 100px; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-title { margin: 0; font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 8px 10px; font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line-2); }
.table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; color: var(--text-2); }
.table td.t { font-family: var(--display); font-size: 12px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.table td b { color: var(--text); font-weight: 500; }
.table tr:hover td { background: var(--row-hover); }
.status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.ok { color: var(--green); }
.status.fehler { color: var(--red); }
.status.laeuft { color: var(--cyan); }
.auto-item { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; padding: 14px 16px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.auto-item .qi-subject { font-size: 15px; }
.auto-steps { margin: 8px 0 0; padding: 0; list-style: none; }
.auto-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); padding: 2px 0; }
.auto-steps li svg { color: var(--green); flex: none; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.set-box { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.set-box h3 { margin: 0 0 10px; font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.set-box p { margin: 0 0 8px; font-size: 14px; color: var(--text-2); }
.set-box code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; background: var(--panel-3); padding: 2px 6px; border-radius: 4px; color: var(--text); word-break: break-all; }
.set-box .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.set-box textarea { width: 100%; min-height: 200px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--text); padding: 10px; }
.set-ok { color: var(--green); } .set-bad { color: var(--red); }

/* ---------- Dialog ---------- */
.dlg { border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); color: var(--text); padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: var(--shadow); }
.dlg::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); }
.dlg[open] { animation: dlg-in 0.25s var(--ease-out); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.dlg-form { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.dlg-title { margin: 0; font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); display: flex; align-items: center; gap: 10px; }
.dlg-title svg { color: var(--cyan); }
.dlg-title.is-danger svg { color: var(--red); }
.dlg-text { margin: 0; font-size: 15px; color: var(--text-2); line-height: 1.5; }
.dlg-text b { color: var(--text); font-weight: 500; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.input, .select, .textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); color: var(--text); padding: 10px 12px; font-size: 15px; outline: none; transition: border-color 0.2s; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--cyan-2); }
.textarea { min-height: 96px; resize: vertical; font-family: var(--body); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick button { height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.quick button:hover, .quick button.is-active { border-color: var(--cyan-2); color: var(--cyan); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.check input { width: 18px; height: 18px; accent-color: var(--cyan); }
.dlg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); box-shadow: var(--shadow); font-size: 14px; animation: toast-in 0.35s var(--ease-out); max-width: 420px; }
.toast svg { flex: none; }
.toast.ok svg { color: var(--green); }
.toast.err { border-color: var(--red-line); } .toast.err svg { color: var(--red); }
.toast.info svg { color: var(--cyan); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
.toast.is-out { opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }

/* ---------- Bottom bar (mobile) ---------- */
.bottombar { display: none; }

/* ---------- Login / Setup ---------- */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.login { width: min(400px, 100%); text-align: center; }
.login-mark { margin-bottom: 18px; }
.login-title { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.login-sub { margin: 8px 0 26px; color: var(--text-2); }
.login-form { text-align: left; display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.input-code { font-family: var(--display); font-size: 22px; letter-spacing: 0.4em; text-align: center; }
.login-error { margin: 0; color: var(--red); font-size: 14px; }
.login-foot { margin-top: 18px; font-family: var(--display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.setup { width: min(560px, 100%); }
.setup-form { text-align: left; display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); margin-top: 16px; }
.setup-h { margin: 10px 0 0; font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.setup-box { text-align: left; padding: 18px 22px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); margin-top: 16px; }
.setup-box p { color: var(--text-2); font-size: 14px; }
.setup-code { font-family: ui-monospace, Menlo, monospace; font-size: 15px; color: var(--text); background: var(--bg); padding: 10px 12px; border-radius: 8px; word-break: break-all; user-select: all; }
.setup-ok { color: var(--green); }
.setup-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }


/* ---------- Darstellungen (Themes) ---------- */
/* Klar: weiß, flach, maximale Übersicht. */
:root[data-theme="klar"] {
  --bg: #ffffff; --bg-2: #f7f9fc; --bg-top: #ffffff;
  --panel: #f6f8fb; --panel-2: #eef2f7; --panel-3: #e3e9f2;
  --line: #e2e8f0; --line-2: #cbd5e1; --line-3: #94a3b8;
  --text: #0f172a; --text-2: #475569; --text-3: #64748b;
  --cyan: #2563eb; --cyan-2: #1d4ed8; --cyan-ink: #ffffff; --cyan-soft: rgba(37, 99, 235, 0.1);
  --amber: #b45309; --amber-ink: #ffffff; --amber-soft: rgba(217, 119, 6, 0.14);
  --red: #dc2626; --red-soft: rgba(220, 38, 38, 0.1); --red-line: rgba(220, 38, 38, 0.4); --warn-text: #7f1d1d;
  --green: #15803d; --green-soft: rgba(21, 128, 61, 0.12); --violet: #6d28d9;
  --shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.25), 0 2px 6px -3px rgba(15, 23, 42, 0.15);
  --shadow-sm: 0 4px 12px -8px rgba(15, 23, 42, 0.2), 0 1px 2px -1px rgba(15, 23, 42, 0.12);
  --accent-glow: rgba(37, 99, 235, 0.35); --accent-ring: rgba(37, 99, 235, 0.55); --selection: rgba(37, 99, 235, 0.2);
  --topbar-bg: rgba(255, 255, 255, 0.9); --veil: #fafbfd; --veil-strong: rgba(255, 255, 255, 0.94); --backdrop: rgba(15, 23, 42, 0.45);
  --row-hover: rgba(15, 23, 42, 0.03); --grid-line: transparent; --bg-glow: transparent; --lage-bg: #f7f9fc; --marker-glow: 0;
  --label-track: 0.08em;
  --display: "Barlow", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
:root[data-theme="klar"] .label, :root[data-theme="klar"] .view-tab, :root[data-theme="klar"] .queue-title, :root[data-theme="klar"] .card-sec > .label { letter-spacing: 0.06em; font-size: 12px; }
:root[data-theme="klar"] .brand-name { letter-spacing: 0.04em; text-transform: none; font-size: 16px; }
:root[data-theme="klar"] .btn { letter-spacing: 0.04em; text-transform: none; font-size: 14px; font-weight: 600; }
:root[data-theme="klar"] .chip, :root[data-theme="klar"] .tag, :root[data-theme="klar"] .quick button { text-transform: none; letter-spacing: 0.02em; font-size: 12px; font-weight: 600; }
:root[data-theme="klar"] .qi { border-color: var(--line); background: #ffffff; margin-bottom: 6px; }
:root[data-theme="klar"] .qi:hover { background: #ffffff; border-color: var(--line-2); }
:root[data-theme="klar"] .qi.is-active { background: #ffffff; }
:root[data-theme="klar"] .qi-summary { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
:root[data-theme="klar"] .qi-foot { flex-wrap: wrap; }
:root[data-theme="klar"] .view-tab.is-active .view-tab-count, :root[data-theme="klar"] .view-tab-count.is-amber { background: var(--amber); color: #ffffff; }
:root[data-theme="klar"] .editor, :root[data-theme="klar"] details.dossier { background: #ffffff; }
:root[data-theme="klar"] .btn-primary { box-shadow: none; }
:root[data-theme="klar"] .hz-today-glow { opacity: 0.12; }
:root[data-theme="klar"] .clock-time { font-weight: 600; }

/* Papier: warm, ruhig, Tinte auf Papier. */
:root[data-theme="papier"] {
  --bg: #f4efe6; --bg-2: #efe9dd; --bg-top: #f7f3eb;
  --panel: #faf7f1; --panel-2: #f1ebe0; --panel-3: #e6ddcc;
  --line: #e1d8c6; --line-2: #cdc1a9; --line-3: #a89a7c;
  --text: #1f1a14; --text-2: #5b5244; --text-3: #7a6f5d;
  --cyan: #0f766e; --cyan-2: #0d5f59; --cyan-ink: #ffffff; --cyan-soft: rgba(15, 118, 110, 0.12);
  --amber: #a1580e; --amber-ink: #ffffff; --amber-soft: rgba(180, 100, 20, 0.14);
  --red: #b42318; --red-soft: rgba(180, 35, 24, 0.1); --red-line: rgba(180, 35, 24, 0.4); --warn-text: #6b1a12;
  --green: #3f6212; --green-soft: rgba(77, 124, 15, 0.14); --violet: #6b4fb6;
  --shadow: 0 12px 26px -16px rgba(60, 45, 20, 0.35), 0 2px 6px -3px rgba(60, 45, 20, 0.18);
  --shadow-sm: 0 4px 12px -8px rgba(60, 45, 20, 0.3), 0 1px 2px -1px rgba(60, 45, 20, 0.14);
  --accent-glow: rgba(15, 118, 110, 0.35); --accent-ring: rgba(15, 118, 110, 0.55); --selection: rgba(15, 118, 110, 0.22);
  --topbar-bg: rgba(244, 239, 230, 0.9); --veil: #f1ece2; --veil-strong: rgba(244, 239, 230, 0.94); --backdrop: rgba(40, 30, 15, 0.45);
  --row-hover: rgba(60, 45, 20, 0.04); --grid-line: transparent; --bg-glow: rgba(15, 118, 110, 0.06); --lage-bg: #efe9dd; --marker-glow: 0;
  --label-track: 0.1em;
  --display: "Barlow", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
:root[data-theme="papier"] .brand-name { text-transform: none; letter-spacing: 0.04em; font-size: 16px; }
:root[data-theme="papier"] .btn { text-transform: none; letter-spacing: 0.03em; font-size: 14px; font-weight: 600; }
:root[data-theme="papier"] .chip, :root[data-theme="papier"] .tag, :root[data-theme="papier"] .quick button { text-transform: none; letter-spacing: 0.02em; font-size: 12px; font-weight: 600; }
:root[data-theme="papier"] .qi { background: var(--panel); border-color: var(--line); margin-bottom: 6px; }
:root[data-theme="papier"] .qi.is-active { background: #fffdf8; }
:root[data-theme="papier"] .lage-line { font-size: 19px; font-weight: 500; }
:root[data-theme="papier"] .card-subject { font-size: 24px; }
:root[data-theme="papier"] .card-text, :root[data-theme="papier"] .card-reco p { font-size: 17px; line-height: 1.6; }
:root[data-theme="papier"] .editor-text { font-size: 16px; line-height: 1.6; }
:root[data-theme="papier"] .btn-primary { box-shadow: none; }
:root[data-theme="papier"] .view-tab.is-active .view-tab-count, :root[data-theme="papier"] .view-tab-count.is-amber { color: #ffffff; }

/* Umschalter */
.theme-menu { position: relative; }
.theme-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; padding: 6px; margin: 0; list-style: none; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); z-index: 40; animation: pop 0.2s var(--ease-out); }
.theme-list button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 6px; background: none; text-align: left; color: var(--text); font-size: 14px; }
.theme-list button:hover { background: var(--panel-3); }
.theme-list button.is-active { color: var(--cyan); }
.theme-swatch { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line-3); flex: none; }
.theme-swatch.deck { background: linear-gradient(135deg, #070b14 55%, #5ee1ff 56%); }
.theme-swatch.klar { background: linear-gradient(135deg, #ffffff 55%, #2563eb 56%); }
.theme-swatch.papier { background: linear-gradient(135deg, #f4efe6 55%, #0f766e 56%); }
.theme-list small { margin-left: auto; color: var(--text-3); font-size: 12px; }
.set-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.set-themes button { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); color: var(--text); font-size: 14px; }
.set-themes button.is-active { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--accent-ring); }

/* ---------- Responsive ---------- */
@media (max-width: 1600px) { .filter .chip:nth-child(n+6) { display: none; } }
@media (max-width: 1180px) {
  .lage { grid-template-columns: 1fr; gap: 10px; }
  .work { grid-template-columns: 380px minmax(0, 1fr); height: calc(100vh - var(--topbar) - 150px); }
  .filter .chip:nth-child(n+5) { display: none; }
}
@media (max-width: 920px) {
  :root { --topbar: 52px; }
  .topbar { grid-template-columns: auto 1fr auto; gap: 12px; padding: 0 12px; }
  .views { display: none; }
  .filter { display: none; }
  .brand-name { font-size: 13px; }
  .clock-date { display: none; }
  .lage { padding: 12px 16px 8px; }
  .lage-line { font-size: 15px; }
  .lage-meta { display: none; }
  .horizont svg { height: 58px; }
  .btn, .btn-sm, .icon-btn, .search, .quick button { min-height: 44px; }
  .search input { height: 42px; }
  .work { display: block; height: auto; }
  .queue { border-right: 0; }
  .queue-list { overflow: visible; padding-bottom: 90px; }
  .search input { width: 110px; }
  .detail { position: fixed; inset: var(--topbar) 0 0 0; z-index: 40; background: var(--bg); transform: translateX(100%); transition: transform 0.35s var(--ease-out); }
  .main.has-detail .detail { transform: translateX(0); }
  .main.has-detail ~ .bottombar { display: none; }
  .detail-scroll { padding-bottom: 24px; }
  .card { padding: 14px 16px 0; }
  .btn.card-back { display: inline-flex; margin-bottom: 8px; }
  .card-subject { font-size: 19px; }
  .actions { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .actions-row { gap: 6px; }
  .actions-row .btn { flex: 1 1 0; min-width: 0; height: 52px; padding: 0 6px; flex-direction: column; gap: 3px; font-size: 9px; letter-spacing: 0.08em; }
  .actions-row .btn svg { width: 18px; height: 18px; }
  .actions-row .btn-primary { flex: 1.4 1 0; }
  .actions-row .menu { flex: 0 0 52px; }
  .actions-row .menu .btn { width: 52px; }
  .editor-text { min-height: 180px; }
  .bottombar {
    display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--topbar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line);
  }
  .bb-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--text-3); font-family: var(--display); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
  .bb-tab.is-active { color: var(--cyan); }
  .bb-count { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--amber); color: var(--amber-ink); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
  .bb-count:empty { display: none; }
  .view-page { padding: 16px 16px 100px; }
  .table th:nth-child(4), .table td:nth-child(4) { display: none; }
  .toasts { left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
  .dlg-grid { grid-template-columns: 1fr; }
  .hist li { grid-template-columns: 96px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.sprite { position: absolute; }
.card-time { margin-left: auto; }
.card-text.is-muted { color: var(--text-2); }
.set-box-top { margin-bottom: 18px; }
.set-box-wide { grid-column: 1 / -1; }

/* =====================================================================
   v0.3.0 – Erledigen in einem Schritt, Zurückholen, Bewegung
   Bewegung nur über transform/opacity (GPU), kurze Dauer, ease-out;
   reduzierte Bewegung schaltet alles ab (Regel oben + JS-Check).
   ===================================================================== */
:root { --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); }

/* Seitenwechsel */
.page-in { animation: page-in 0.42s var(--ease-out) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }

/* Liste: gestaffelter Einlauf */
.queue-list.is-entering > li { animation: rise 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 32ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
.qi { transition: background 0.2s, border-color 0.2s, box-shadow 0.25s, transform 0.45s var(--ease-out), opacity 0.35s var(--ease-out); }
.qi:hover { transform: translateX(2px); }
.qi.is-active { transform: none; }
.qi.is-active .qi-pip { animation: pip-glow 2.2s ease-in-out infinite; }
@keyframes pip-glow { 50% { box-shadow: 0 0 0 4px var(--cyan-soft); } }
.qi.is-leaving { opacity: 0; transform: translateX(56px) scale(0.97); }
.li-collapse { overflow: hidden; transition: height 0.38s var(--ease-in-out) 0.12s; }

/* Karte: Abschnitte laufen gestaffelt ein */
.card.is-fresh > * { animation: rise 0.48s var(--ease-out) both; }
.card.is-fresh > *:nth-child(2) { animation-delay: 30ms; } .card.is-fresh > *:nth-child(3) { animation-delay: 60ms; }
.card.is-fresh > *:nth-child(4) { animation-delay: 90ms; } .card.is-fresh > *:nth-child(5) { animation-delay: 120ms; }
.card.is-fresh > *:nth-child(6) { animation-delay: 150ms; } .card.is-fresh > *:nth-child(7) { animation-delay: 180ms; }
.card.is-fresh > *:nth-child(8) { animation-delay: 210ms; } .card.is-fresh > *:nth-child(n+9) { animation-delay: 240ms; }
.card { transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out), filter 0.4s; }
.card.is-done { opacity: 0; transform: translateY(-14px) scale(0.985); filter: blur(2px); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: var(--ease-out); }

/* Firma-Tag als Schalter */
.tag-btn { border: 1px dashed var(--line-3); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.tag-btn:hover { border-color: var(--cyan-2); color: var(--cyan); }
.tag-btn svg { opacity: 0.7; }
.menu-list.menu-left { left: 0; right: auto; top: calc(100% + 6px); bottom: auto; min-width: 200px; }
.menu-head { padding: 6px 12px 4px; font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.ico-sp { width: 16px; display: inline-block; }

/* Erledigen-Knopf: Lichtkante beim Überfahren */
.btn-kombi { position: relative; overflow: hidden; isolation: isolate; }
.btn-kombi::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.7s var(--ease-out); }
.btn-kombi:hover::before { transform: translateX(120%); }
.btn-kombi svg { transition: transform 0.35s var(--ease-spring); }
.btn-kombi:hover svg { transform: rotate(-12deg) scale(1.15); }
.btn { transition: background 0.18s, border-color 0.18s, transform 0.18s var(--ease-spring), box-shadow 0.2s, filter 0.2s; }
.btn:active:not(:disabled) { transform: scale(0.96); }

/* Pipeline: Fortschritt der Schritte */
.pipe { max-width: 900px; margin: 0 auto; padding: 4px 0 2px; animation: rise 0.4s var(--ease-out) both; }
.pipe-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
.pipe-step { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 14px; }
.pipe-dot { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line-2); transition: background 0.35s, border-color 0.35s, transform 0.45s var(--ease-spring), box-shadow 0.4s; }
.pipe-dot svg { overflow: visible; }
.pd-ring { fill: none; stroke: var(--line-3); stroke-width: 2; stroke-dasharray: 63; stroke-dashoffset: 0; transform-origin: 12px 12px; transition: stroke 0.3s, opacity 0.3s; }
.pd-check { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.45s var(--ease-out) 0.08s; }
.pd-x { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; opacity: 0; transition: opacity 0.2s; }
.pipe-step[data-state="run"] .pipe-dot { border-color: var(--cyan-2); box-shadow: 0 0 0 4px var(--cyan-soft); }
.pipe-step[data-state="run"] .pd-ring { stroke: var(--cyan); stroke-dasharray: 18 45; animation: spin 0.9s linear infinite; }
.pipe-step[data-state="ok"] .pipe-dot { background: var(--green-soft); border-color: var(--green); transform: scale(1.08); }
.pipe-step[data-state="ok"] .pd-ring { opacity: 0; }
.pipe-step[data-state="ok"] .pd-check { stroke-dashoffset: 0; }
.pipe-step[data-state="err"] .pipe-dot { background: var(--red-soft); border-color: var(--red); animation: shake 0.42s var(--ease-out); }
.pipe-step[data-state="err"] .pd-ring { opacity: 0; }
.pipe-step[data-state="err"] .pd-x { opacity: 1; }
@keyframes shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.pipe-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pipe-txt b { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.pipe-txt small { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-step[data-state="err"] .pipe-txt small { color: var(--red); white-space: normal; }
.pipe-step[data-state="wait"] .pipe-txt { opacity: 0.6; }
.pipe-bar { flex: 1; min-width: 16px; height: 2px; margin-left: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.pipe-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease-out); }
.pipe-step[data-state="ok"] .pipe-bar i { transform: scaleX(1); }
.pipe.is-done .pipe-dot { animation: done-pop 0.6s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes done-pop { 40% { transform: scale(1.22); box-shadow: 0 0 0 8px var(--green-soft); } }
.pipe-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; font-size: 13px; color: var(--text-2); animation: rise 0.3s var(--ease-out) both; }
.pipe-foot span { flex: 1; min-width: 200px; }

/* Partikel */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.fx-p { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 1.5px; background: var(--cyan); transform: rotate(45deg); animation: fx-fly var(--d, 700ms) var(--ease-out) forwards; }
.fx-p:nth-child(3n) { background: var(--green); } .fx-p:nth-child(4n) { background: var(--amber); width: 5px; height: 5px; }
@keyframes fx-fly { 0% { opacity: 1; transform: translate(0, 0) rotate(var(--rot)) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) + 180deg)) scale(0.3); } }
.fx-ring { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--cyan); animation: fx-ring 0.7s var(--ease-out) forwards; }
@keyframes fx-ring { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(5); } }

/* Zähler hüpft bei Änderung */
.bump { animation: bump 0.5s var(--ease-spring); }
@keyframes bump { 35% { transform: scale(1.35); } }

/* „Alles entschieden“ */
.done-mark { display: block; margin: 0 auto 12px; overflow: visible; }
.dm-ring { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 164; stroke-dashoffset: 164; animation: draw 0.9s var(--ease-out) 0.1s forwards; filter: drop-shadow(0 0 8px var(--green-soft)); }
.dm-check { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 0.5s var(--ease-out) 0.75s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.queue-empty .big { animation: rise 0.5s var(--ease-out) 0.5s both; }

/* Dialog */
.dlg.dlg-wide { width: min(760px, calc(100vw - 32px)); }
.dlg[open] { animation: dlg-in 0.36s var(--ease-spring); }
.dlg::backdrop { animation: fade-in 0.3s var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } }
.dlg-form > * { animation: rise 0.4s var(--ease-out) both; }
.dlg-form > *:nth-child(2) { animation-delay: 40ms; } .dlg-form > *:nth-child(3) { animation-delay: 80ms; } .dlg-form > *:nth-child(4) { animation-delay: 120ms; } .dlg-form > *:nth-child(n+5) { animation-delay: 160ms; }
.dlg-form { max-height: calc(100vh - 48px); overflow-y: auto; }
.dlg-lead { font-size: 14px; }
.dlg-grid .span-2 { grid-column: 1 / -1; }
.field-note { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.field-note svg { flex: none; margin-top: 2px; color: var(--cyan); }
.field-note b { color: var(--text); font-weight: 600; word-break: break-word; }
.input-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; }
.input-filter { height: 34px; padding: 6px 10px; font-size: 13px; }
.select.flash { animation: flash 0.5s var(--ease-out); }
@keyframes flash { 30% { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); } }
.check.is-warn { padding: 8px 10px; border-radius: 8px; background: var(--amber-soft); color: var(--text); font-size: 13.5px; }

/* Kacheln im Erledigen-Dialog: aufklappen über grid-template-rows */
.tile { border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); transition: border-color 0.25s, background 0.25s, box-shadow 0.3s; }
.tile.is-on { border-color: var(--cyan-2); box-shadow: 0 0 0 1px var(--accent-ring) inset, 0 10px 24px -16px var(--accent-glow); }
.tile.is-disabled { opacity: 0.55; }
.tile-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.tile-head input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile-switch { flex: none; width: 36px; height: 20px; border-radius: 10px; background: var(--line-2); position: relative; transition: background 0.25s; }
.tile-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); transition: transform 0.35s var(--ease-spring); }
.tile.is-on .tile-switch { background: var(--cyan); }
.tile.is-on .tile-switch i { transform: translateX(16px); background: var(--cyan-ink); }
.tile-head input:focus-visible + .tile-switch { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tile-ico { color: var(--text-3); display: grid; transition: color 0.25s, transform 0.35s var(--ease-spring); }
.tile.is-on .tile-ico { color: var(--cyan); transform: scale(1.1); }
.tile-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tile-title b { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tile-title small { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-out); }
.tile.is-on .tile-body { grid-template-rows: 1fr; }
.tile-inner { overflow: hidden; min-height: 0; padding: 0 14px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transition: opacity 0.25s, padding 0.4s var(--ease-out); }
.tile.is-on .tile-inner { opacity: 1; padding: 2px 14px 14px; }
.tile-quote { margin: 0; padding: 8px 12px; border-left: 2px solid var(--cyan-2); background: var(--bg); border-radius: 0 8px 8px 0; font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; max-height: 120px; overflow: auto; }

/* Verlauf im Cockpit + Schritt-Chips */
.hist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; }
.hist-grid h4 { margin: 4px 0 8px; font-family: var(--display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text-2); }
.step.is-ok svg { color: var(--green); } .step.is-err { border-color: var(--red-line); color: var(--red); } .step.is-run svg { color: var(--cyan); }
.step-link { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }

/* Erledigt-Liste */
.done-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.done-item { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); animation: rise 0.45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); transition: border-color 0.2s, transform 0.3s var(--ease-out), opacity 0.35s, height 0.4s var(--ease-in-out) 0.1s, padding 0.4s var(--ease-in-out) 0.1s, margin 0.4s 0.1s; }
.done-item:hover { border-color: var(--line-2); transform: translateY(-1px); }
.done-item .qi-subject { font-size: 15px; }
.done-item.is-reopened, .auto-item.is-reopened { overflow: hidden; opacity: 0; transform: translateX(-40px); padding-top: 0; padding-bottom: 0; margin-bottom: -8px; border-width: 0; }
.auto-item { animation: rise 0.45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); transition: opacity 0.35s, transform 0.35s var(--ease-out), height 0.4s var(--ease-in-out) 0.1s, padding 0.4s 0.1s, margin 0.4s 0.1s; }
details.proto .proto-body { padding: 0 12px 12px; overflow-x: auto; }

/* Toast mit Aktion und Restzeit */
.toast { position: relative; overflow: hidden; animation: toast-in 0.5s var(--ease-spring); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
.toast-act { margin-left: 6px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--cyan-2); background: var(--cyan-soft); color: var(--cyan); font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.toast-act:hover { background: var(--cyan); color: var(--cyan-ink); }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--cyan); opacity: 0.5; transform-origin: left; animation: toast-bar linear forwards; }
.toast.ok .toast-bar { background: var(--green); } .toast.err .toast-bar { background: var(--red); }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 920px) {
  .pipe-steps { grid-auto-flow: row; gap: 10px; }
  .pipe-bar { display: none; }
  .dlg-grid { grid-template-columns: 1fr; }
  .done-item { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .card.is-fresh > *, .queue-list.is-entering > li, .dlg-form > *, .done-item, .auto-item { animation: none !important; }
  .dm-ring, .dm-check { stroke-dashoffset: 0; }
}

/* =====================================================================
   v0.4.0 – LOTSE: Marke, Drive-Ablage, Abläufe, schließbare Meldungen
   ===================================================================== */
.brand-name { display: inline-flex; align-items: baseline; gap: 8px; letter-spacing: 0.22em; }
.brand-sub { white-space: nowrap; font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: none; color: var(--text-3); }
.brand-mark { transition: transform 0.6s var(--ease-spring); }
.brand:hover .brand-mark { transform: rotate(-14deg) scale(1.06); }
:root[data-theme="klar"] .brand-name { letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }

/* Meldungen: über der Aktionsleiste, mit Schließen */
.toasts { bottom: 92px; }
.toast { padding-right: 10px; }
.toast-x { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-left: 2px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); transition: background 0.15s, color 0.15s, transform 0.2s var(--ease-spring); }
.toast-x:hover { background: var(--panel-3); color: var(--text); transform: rotate(90deg); }
.toast:hover .toast-bar { animation-play-state: paused; }

/* Kein Entwurf: Hinweis mit Schreib-Knopf */
.no-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 10px; padding: 10px 12px; border: 1px dashed var(--line-3); border-radius: var(--r-sm); font-size: 14px; color: var(--text-2); animation: rise 0.4s var(--ease-out) both; }
.no-draft > svg { color: var(--violet); flex: none; }
.no-draft span { flex: 1; min-width: 220px; }

/* Ablage-Baustein */
.dlg-grid > .ablage, .dlg-grid > .field-note { grid-column: 1 / -1; }
.ablage { display: flex; flex-direction: column; gap: 10px; }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); isolation: isolate; }
.seg label { position: relative; z-index: 1; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: 8px; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); transition: color 0.25s; }
.seg input:checked + span { color: var(--cyan-ink); }
.seg input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 8px; background: var(--cyan); box-shadow: 0 6px 16px -8px var(--accent-glow); transition: transform 0.45s var(--ease-spring); }
.ablage.is-gmail .seg-thumb { transform: translateX(100%); }
.drive-search { display: flex; gap: 8px; }
.drive-search .search { flex: 1; height: 36px; }
.drive-search .search input { width: 100%; }
.drive-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; padding-right: 2px; }
.drive-h { margin: 6px 2px 2px; font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.drive-item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); cursor: pointer; animation: rise 0.4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); transition: border-color 0.2s, background 0.2s, transform 0.25s var(--ease-out), box-shadow 0.25s; }
.drive-item:hover { border-color: var(--line-3); transform: translateX(2px); }
.drive-item input { position: absolute; opacity: 0; pointer-events: none; }
.drive-item.is-sel { border-color: var(--cyan-2); background: var(--cyan-soft); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.drive-item:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.di-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--panel-3); color: var(--text-2); transition: background 0.25s, color 0.25s, transform 0.35s var(--ease-spring); }
.drive-item.is-sel .di-ico { background: var(--cyan); color: var(--cyan-ink); transform: scale(1.08) rotate(-6deg); }
.di-main { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.di-main b { font-weight: 600; color: var(--text); }
.di-main small { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di-main em { margin-top: 3px; font-style: normal; font-size: 12.5px; color: var(--text-2); }
.di-badge { flex: none; align-self: center; padding: 2px 8px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.di-open { flex: none; align-self: center; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--text-3); }
.di-open:hover { background: var(--panel-3); color: var(--cyan); }
.drive-hint { margin: 4px 2px; font-size: 13.5px; color: var(--text-2); display: flex; gap: 6px; align-items: center; }
.drive-hint.is-err { color: var(--red); }
.drive-skel { display: flex; flex-direction: column; gap: 6px; }
.drive-skel i { display: block; height: 52px; border-radius: 10px; background: linear-gradient(100deg, var(--panel) 30%, var(--panel-3) 50%, var(--panel) 70%); background-size: 300% 100%; animation: shimmer 1.3s linear infinite; }
.drive-skel i:nth-child(2) { opacity: 0.75; } .drive-skel i:nth-child(3) { opacity: 0.5; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* Abläufe */
.ab-hero { padding: 20px 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(700px 240px at 10% -40%, var(--cyan-soft), transparent 70%), var(--panel); margin-bottom: 26px; }
.ab-lead { margin: 0 0 20px; font-size: 17px; line-height: 1.55; color: var(--text); max-width: 78ch; }
.ab-lead b { color: var(--cyan); font-weight: 600; }
.ab-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; position: relative; }
.ab-flow::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: linear-gradient(90deg, var(--line-2), var(--line-2)); }
.ab-flow::after { content: ""; position: absolute; left: 22px; top: 21px; width: 60px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); filter: blur(0.5px); animation: ab-run 4.2s var(--ease-in-out) infinite; }
@keyframes ab-run { from { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateX(calc(100vw * 0.62)); opacity: 0; } }
.ab-flow li { position: relative; display: flex; flex-direction: column; gap: 4px; animation: rise 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
.ab-node { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-3); color: var(--cyan); box-shadow: 0 0 0 6px var(--panel); }
.ab-flow li:nth-child(4) .ab-node { background: var(--cyan); color: var(--cyan-ink); border-color: var(--cyan); }
.ab-flow li:last-child .ab-node { color: var(--green); }
.ab-flow b { margin-top: 8px; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.ab-flow small { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.ab-h { margin: 28px 0 12px; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 10px; }
.ab-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ab-anatomy { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.ab-anatomy div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-left: 2px solid var(--cyan-2); background: var(--panel); border-radius: 0 10px 10px 0; }
.ab-anatomy b { font-size: 14px; } .ab-anatomy span { font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ab-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); animation: rise 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); transition: border-color 0.2s, transform 0.3s var(--ease-out), box-shadow 0.3s; }
.ab-card:hover { border-color: var(--line-3); transform: translateY(-3px); box-shadow: var(--shadow); }
.ab-card header { display: flex; align-items: center; gap: 10px; }
.ab-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--cyan-soft); color: var(--cyan); transition: transform 0.4s var(--ease-spring); }
.ab-card:hover .ab-ico { transform: rotate(-8deg) scale(1.08); }
.ab-card h4 { margin: 0; flex: 1; font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ab-card p { margin: 10px 0 8px; font-size: 14px; color: var(--text-2); }
.ab-card ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--text); }
kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--line-3); border-bottom-width: 2px; border-radius: 6px; background: var(--panel-2); font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--text); }
.ab-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.ab-auto div { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 14px; color: var(--text-2); line-height: 1.45; }
.ab-auto svg { flex: none; color: var(--cyan); margin-top: 1px; } .ab-auto b { color: var(--text); }
.ab-table td.y { color: var(--green); font-weight: 600; } .ab-table td.n { color: var(--text-3); } .ab-table td.m { color: var(--amber); }
.ab-ex { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ab-excard { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); animation: rise 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.ab-excard ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ab-excard li { display: flex; gap: 8px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.ab-excard li svg { flex: none; color: var(--green); margin-top: 3px; }
.ab-keys { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--text-2); }
.ab-keys span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 920px) {
  .ab-flow { grid-template-columns: 1fr 1fr; }
  .ab-flow::before, .ab-flow::after { display: none; }
  .toasts { bottom: calc(70px + env(safe-area-inset-bottom)); left: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ab-flow::after { display: none; } }

/* =====================================================================
   v0.5.0 – Heute & Woche (Dashboard)
   ===================================================================== */
.view-page.view-wide { max-width: 1320px; }
.hd-skel { display: grid; gap: 12px; } .hd-skel i { display: block; height: 120px; border-radius: 14px; background: linear-gradient(100deg, var(--panel) 30%, var(--panel-3) 50%, var(--panel) 70%); background-size: 300% 100%; animation: shimmer 1.3s linear infinite; }
.hd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; animation: rise 0.5s var(--ease-out) both; }
.hd-greet { margin: 0; font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: 0.02em; background: linear-gradient(90deg, var(--text), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hd-date { margin: 2px 0 0; font-family: var(--display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.hd-sum { margin: 10px 0 0; font-size: 16px; color: var(--text-2); max-width: 80ch; }
.hd-sum b { color: var(--text); font-weight: 600; } .hd-sum .warn { color: var(--red); }
.hd-tools { display: flex; align-items: center; gap: 10px; }
.hd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-align: left; color: inherit; animation: rise 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); transition: border-color 0.2s, transform 0.3s var(--ease-out), box-shadow 0.3s; }
button.kpi:hover { border-color: var(--cyan-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi-n { font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1.1; color: var(--cyan); font-variant-numeric: tabular-nums; }
.kpi-n.is-amber { color: var(--amber); } .kpi-n.is-red { color: var(--red); }
.kpi-l { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
.kpi small { font-size: 12.5px; color: var(--text-3); }
.hd-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.hd-side { display: flex; flex-direction: column; gap: 16px; }
.hd-box { padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); animation: rise 0.55s var(--ease-out) both; }
.hd-box h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.hd-box h3 svg { color: var(--cyan); }
.hd-n { min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--panel-3); color: var(--text); font-size: 11px; }
.hd-asana { margin-left: auto; height: 28px; }
.hd-allday { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.hd-allday span { padding: 2px 8px; border-radius: 999px; background: var(--violet); color: var(--bg); font-family: var(--body); font-size: 12px; font-weight: 600; }
.hd-empty { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--green); font-size: 14px; }

/* Tagesleiste */
.tl { position: relative; }
.tl-h { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--line); }
.tl-h span { position: absolute; top: -8px; left: 0; width: 48px; font-family: var(--display); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tl-ev { position: absolute; display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 5px 9px; border-radius: 8px; border-left: 3px solid var(--cyan); background: linear-gradient(90deg, var(--cyan-soft), var(--panel-2)); color: var(--text); text-decoration: none; animation: tl-in 0.5s var(--ease-out) both; animation-delay: calc(150ms + var(--i, 0) * 70ms); transition: transform 0.25s var(--ease-out), box-shadow 0.25s, filter 0.2s; }
.tl-ev:hover { text-decoration: none; transform: translateX(3px); box-shadow: var(--shadow); z-index: 2; }
.tl-ev b { font-size: 13.5px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-ev small { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-ev.is-past { filter: saturate(0.2); opacity: 0.55; }
.tl-ev.is-live { border-left-color: var(--amber); background: linear-gradient(90deg, var(--amber-soft), var(--panel-2)); box-shadow: 0 0 0 1px var(--amber-soft); }
@keyframes tl-in { from { opacity: 0; transform: translateX(-10px); } }
.tl-now { position: absolute; left: 48px; right: 0; height: 0; border-top: 2px solid var(--red); z-index: 3; }
.tl-now i { position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 var(--red-soft); animation: now-pulse 2s ease-out infinite; }
.tl-now span { position: absolute; right: 0; top: -18px; font-family: var(--display); font-size: 11px; font-weight: 600; color: var(--red); }
@keyframes now-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 92, 108, 0.55); } 100% { box-shadow: 0 0 0 10px rgba(255, 92, 108, 0); } }
.tl-empty { position: absolute; left: 60px; right: 0; top: 40%; text-align: center; color: var(--text-3); font-size: 14px; }

/* Karten im Dashboard */
.mini-list { display: flex; flex-direction: column; gap: 6px; }
.mini-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: inherit; text-align: left; animation: rise 0.45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); transition: border-color 0.2s, transform 0.25s var(--ease-out); }
.mini-card:hover { border-color: var(--cyan-2); transform: translateX(3px); }
.mini-card .qi-pip { grid-row: auto; margin: 0; flex: none; }
.mini-card.p1 .qi-pip { background: var(--amber); } .mini-card.p2 .qi-pip { background: var(--cyan); } .mini-card.is-warn .qi-pip { background: var(--red); }
.mc-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mc-main b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aufgaben */
.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.task-group { margin: 8px 0 2px; font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.task-group:first-child { margin-top: 0; } .task-group.is-red { color: var(--red); } .task-group.is-amber { color: var(--amber); }
.task { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; animation: rise 0.4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); transition: background 0.2s, opacity 0.4s, height 0.38s var(--ease-in-out); overflow: hidden; }
.task:hover { background: var(--panel-2); }
.task-check { position: relative; flex: none; cursor: pointer; }
.task-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.task-check span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-3); transition: background 0.25s, border-color 0.25s, transform 0.35s var(--ease-spring); }
.task-check svg { fill: none; stroke: var(--bg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.35s var(--ease-out) 0.05s; }
.task-check:hover span { border-color: var(--green); }
.task-check input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.task-check input:checked + span { background: var(--green); border-color: var(--green); transform: scale(1.12); }
.task-check input:checked + span svg { stroke-dashoffset: 0; }
.task-main { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.task-main b { font-size: 14px; font-weight: 500; position: relative; width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-main b::after { content: ""; position: absolute; left: 0; top: 52%; height: 1.5px; width: 100%; background: var(--text-2); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); }
.task-main small { font-size: 12.5px; color: var(--text-3); }
.task.is-over .task-main small { color: var(--red); }
.task.is-done { opacity: 0.5; } .task.is-done .task-main b::after { transform: scaleX(1); }
.deleg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.deleg li { display: flex; align-items: center; gap: 8px; } .deleg li > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.deleg b { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .deleg small { font-size: 12px; color: var(--text-3); }

/* Woche */
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.wk-day { display: flex; flex-direction: column; gap: 5px; min-height: 140px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); animation: rise 0.5s var(--ease-out) both; animation-delay: calc(200ms + var(--i, 0) * 50ms); }
.wk-day.is-today { border-color: var(--cyan-2); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.wk-day.is-we { background: var(--panel); }
.wk-day header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; }
.wk-day header b { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.wk-day.is-today header b { color: var(--cyan); }
.wk-day header span { font-family: var(--display); font-size: 11px; color: var(--text-3); }
.wk-ev { display: flex; flex-direction: column; padding: 4px 7px; border-radius: 6px; border-left: 2px solid var(--cyan); background: var(--panel-3); color: var(--text); font-size: 12.5px; line-height: 1.3; text-decoration: none; overflow: hidden; transition: transform 0.2s var(--ease-out); }
.wk-ev:hover { text-decoration: none; transform: translateY(-1px); }
.wk-ev small { font-family: var(--display); font-size: 10.5px; color: var(--text-3); }
.wk-ev.is-all { border-left-color: var(--violet); }
.wk-chip { display: flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font-size: 12px; line-height: 1.3; text-align: left; overflow: hidden; }
.wk-chip svg { flex: none; } .wk-chip.is-task svg { color: var(--violet); } .wk-chip.is-over { color: var(--red); border-color: var(--red-line); }
.wk-chip.is-frist { color: var(--amber); cursor: pointer; } .wk-chip.is-frist:hover { border-color: var(--amber); }
.wk-chip.is-wv svg { color: var(--cyan); }
.wk-free { margin-top: auto; font-size: 12px; color: var(--text-3); }
@media (max-width: 1100px) { .wk { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 920px) {
  .hd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-grid { grid-template-columns: 1fr; }
  .wk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-greet { font-size: 22px; }
}

/* =====================================================================
   v0.7.0 – Mission Control: Lagebild, Kalender, Regeln, Karten-Erweiterungen
   ===================================================================== */
.tag-regel { background: var(--cyan-soft); color: var(--cyan); }
.tag-klasse { background: var(--panel-2); color: var(--text-2); }
.tag-unsicher { background: var(--amber-soft); color: var(--amber); border: 1px dashed var(--amber); }
.tag-ok { background: var(--green-soft); color: var(--green); }
.select-inline { display: inline-block; width: auto; padding: 4px 30px 4px 8px; font-size: 13px; margin: 0 4px; }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* Lagebild */
.mc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.mc-row { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 12px 16px 14px; animation: rise 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); transition: border-color 0.25s, box-shadow 0.3s; min-width: 0; }
.mc-row.r-ent, .mc-row.r-abl, .mc-row.r-rf { grid-column: 1 / -1; }
.mc-row.is-empty { opacity: 0.72; }
.mc-row.is-hit { animation: mc-hit 0.9s var(--ease-out); }
@keyframes mc-hit { 20% { border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-soft); } }
.mc-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mc-key { min-width: 22px; height: 22px; font-size: 11px; color: var(--text-3); }
.mc-em { font-size: 15px; line-height: 1; }
.mc-title { margin: 0; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
.mc-n { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--cyan); font-variant-numeric: tabular-nums; line-height: 1; }
.r-ent .mc-n { color: var(--red); } .r-rf .mc-n { color: var(--text-2); } .r-abl .mc-n { color: var(--amber); } .r-info .mc-n, .r-auf .mc-n { color: var(--green); } .r-sys .mc-n { color: var(--text-3); }
.mc-row.is-empty .mc-n { color: var(--text-3); }
.mc-sub { margin-left: auto; font-size: 12.5px; color: var(--text-3); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-sub .warn { color: var(--red); font-weight: 600; }
.mc-body { margin-top: 10px; }
.mc-list { display: flex; flex-direction: column; gap: 6px; }
.mc-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: inherit; text-align: left; transition: border-color 0.2s, transform 0.25s var(--ease-out), box-shadow 0.25s; }
.mc-item:hover { border-color: var(--cyan-2); transform: translateX(3px); }
.mc-item .qi-pip { grid-row: auto; margin: 0; flex: none; }
.mc-item.p1 .qi-pip { background: var(--amber); } .mc-item.p2 .qi-pip { background: var(--cyan); } .mc-item.is-warn .qi-pip { background: var(--red); }
.mc-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mc-main b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-q { font-size: 12.5px; color: var(--text-2); font-style: italic; }
.mc-tags { display: flex; gap: 4px; flex: none; }
.mc-ablage { display: flex; flex-direction: column; gap: 6px; }
.mc-abl { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); cursor: pointer; animation: rise 0.4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.mc-abl input { width: 18px; height: 18px; accent-color: var(--amber); flex: none; }
.mc-abl-main { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.mc-abl-name { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13.5px; }
.mc-abl-name s { color: var(--text-3); font-size: 12.5px; } .mc-abl-name b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--text); word-break: break-all; }
.mc-abl-main small { font-size: 12.5px; color: var(--text-3); }
.mc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 6px; }
.mc-foot .label { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 12.5px; flex: 1; min-width: 220px; }
.mc-det > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.mc-det > summary::-webkit-details-marker { display: none; }
.mc-det > summary svg { transition: transform 0.3s var(--ease-out); } .mc-det[open] > summary svg { transform: rotate(180deg); }
.mc-det .mc-list { margin-top: 8px; }
.mc-info { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); }
.mc-info-t { display: flex; flex-direction: column; min-width: 0; flex: 1; } .mc-info-t b { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-info-t small { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-term { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mc-term li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; border-left: 2px solid var(--cyan); background: var(--panel-2); font-size: 14px; }
.mc-term li.is-all { border-left-color: var(--violet); } .mc-term li.is-past { opacity: 0.5; }
.mc-term li b { font-weight: 600; } .mc-term li small { color: var(--text-3); } .mc-count { margin-left: auto; }
.mc-time { font-family: var(--display); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 86px; }
.mc-brief { margin-top: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: radial-gradient(500px 160px at 0% 0%, var(--cyan-soft), transparent 70%), var(--panel-2); }
.mc-brief h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.mc-brief-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; font-size: 13.5px; color: var(--text-2); }
.mc-brief-g b { display: block; font-family: var(--display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.mc-brief-g ol { margin: 0; padding-left: 18px; }
.mc-zus { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 20px; }
.mc-zus h4 { margin: 0 0 6px; font-family: var(--display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.mc-z { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 5px; }
.mc-z.s1 { border-color: var(--amber-soft); background: var(--amber-soft); } .mc-z.s2 { border-color: var(--amber); } .mc-z.s3 { border-color: var(--red-line); background: var(--red-soft); }
.mc-z-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 180px; } .mc-z-t b { font-size: 13.5px; font-weight: 500; } .mc-z-t small { font-size: 12px; color: var(--text-3); } .mc-z-t em { color: var(--red); font-style: normal; }
.mc-z-b { display: flex; gap: 4px; flex: none; }
.mc-table td { padding: 6px 8px; } .mc-table tr.is-over td { color: var(--red); } .mc-table tr.is-done td { opacity: 0.5; text-decoration: line-through; }
.mc-gel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-gel .label { flex-basis: 100%; margin-top: 4px; }
.mc-sys { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text-2); }
.mc-sys span { display: inline-flex; align-items: center; gap: 6px; } .mc-sys small { color: var(--text-3); } .mc-sys .is-rot { color: var(--red); }
.amp { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); flex: none; }
.amp-gruen { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .amp-gelb { background: var(--amber); } .amp-rot { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); } .amp-grau { background: var(--line-3); }
.mc-dofr { font-size: 13px; }
.mc-extras { display: flex; flex-direction: column; gap: 8px; }
.mc-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--panel); font-size: 14px; color: var(--text-2); }
.mc-note > svg { flex: none; color: var(--cyan); margin-top: 2px; } .mc-note > div { flex: 1; min-width: 0; } .mc-note b { color: var(--text); } .mc-note p { margin: 4px 0; }
.mc-note:has(> .label) { flex-direction: column; gap: 6px; }
.mc-note.is-q { flex-direction: column; border-color: var(--accent-ring); background: var(--cyan-soft); } .mc-note.is-q p { color: var(--text); font-size: 15px; }
.mc-qrow { display: flex; gap: 8px; width: 100%; } .mc-qrow .input { flex: 1; }
.mc-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.drive-item.is-fremd { border-color: var(--amber); } .drive-item em.warn { color: var(--amber); }

/* Kalender */
.kal { padding: 12px 16px 16px; }
.kal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.kal-nav { display: flex; align-items: center; gap: 4px; position: relative; }
.kal-fwd svg { transform: rotate(180deg); }
.kal-title { border: 0; background: none; color: var(--text); font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; padding: 6px 10px; border-radius: 8px; }
.kal-title:hover { background: var(--panel-2); }
.kal-date { position: absolute; opacity: 0; width: 1px; height: 1px; left: 50%; bottom: 0; }
.kal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.seg-3 { grid-template-columns: 1fr 1fr 1fr; min-width: 250px; } .seg-3 .seg-thumb { width: calc(33.333% - 2px); }
.seg-3[data-pos="1"] .seg-thumb { transform: translateX(100%); } .seg-3[data-pos="2"] .seg-thumb { transform: translateX(200%); }
.seg-3 span { height: 30px; font-size: 11px; padding: 0 12px; }
.kal-filter .chip { display: inline-flex; align-items: center; gap: 5px; }
.kal-tag { display: flex; flex-direction: column; gap: 10px; }
.kal-allday { display: flex; flex-wrap: wrap; gap: 6px; min-height: 8px; }
.kal-ev { display: flex; flex-direction: column; gap: 1px; padding: 5px 9px; border-radius: 8px; border: 0; border-left: 3px solid var(--cyan); background: linear-gradient(90deg, var(--cyan-soft), var(--panel-2)); color: var(--text); text-align: left; font-size: 13px; line-height: 1.25; cursor: grab; transition: transform 0.25s var(--ease-out), box-shadow 0.25s, opacity 0.2s; }
.kal-ev small { font-family: var(--display); font-size: 11px; color: var(--text-2); }
.kal-ev.is-all { border-left-color: var(--violet); } .kal-ev.is-blocker { border-left-color: var(--line-3); background: repeating-linear-gradient(135deg, var(--panel-2) 0 6px, var(--panel-3) 6px 8px); color: var(--text-3); cursor: not-allowed; }
.kal-ev.is-past { opacity: 0.55; } .kal-ev.is-dragging { opacity: 0.4; } .kal-ev:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.kal-tl { cursor: crosshair; }
.kal-tl .tl-ev { cursor: grab; }
.kal-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.kal-task { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel); font-size: 12.5px; cursor: grab; transition: opacity 0.3s; }
.kal-task input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kal-task-box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--violet); display: grid; place-items: center; transition: background 0.25s; }
.kal-task input:checked + .kal-task-box { background: var(--green); border-color: var(--green); } .kal-task input:checked ~ span:last-child { text-decoration: line-through; opacity: 0.6; }
.kal-task.is-over { border-color: var(--red-line); color: var(--red); } .kal-task input:focus-visible + .kal-task-box { outline: 2px solid var(--cyan); }
.is-dropzone { outline: 2px dashed var(--cyan); outline-offset: -2px; background: var(--cyan-soft) !important; }
.kal-woche { display: flex; flex-direction: column; overflow-x: auto; }
.kal-wk-head, .kal-wk-all { display: grid; grid-template-columns: 48px repeat(7, minmax(110px, 1fr)); gap: 4px; }
.kal-wk-head span { padding: 4px 6px; font-family: var(--display); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .kal-wk-head span b { color: var(--text); }
.kal-wk-head span.is-today b { color: var(--cyan); } .kal-wk-head span.is-we { opacity: 0.7; }
.kal-cell { min-height: 28px; padding: 3px; border-radius: 6px; display: flex; flex-direction: column; gap: 3px; }
.kal-cell .kal-ev { padding: 3px 6px; font-size: 12px; }
.kal-wk-grid { display: grid; grid-template-columns: 48px repeat(7, minmax(110px, 1fr)); gap: 4px; margin-top: 6px; height: calc(13 * 44px); overflow-y: auto; background-image: repeating-linear-gradient(180deg, transparent 0 43px, var(--line) 43px 44px); }
.kal-hours { display: grid; grid-auto-rows: 44px; } .kal-hours span { font-family: var(--display); font-size: 11px; color: var(--text-3); transform: translateY(-8px); }
.kal-col { position: relative; border-left: 1px solid var(--line); border-radius: 0; } .kal-col.is-today { background: var(--cyan-soft); }
.kal-ev-abs { position: absolute; left: 2px; right: 2px; overflow: hidden; }
.kal-col .tl-now { left: 0; }
.kal-monat { display: flex; flex-direction: column; }
.kal-mo-head { display: grid; grid-template-columns: 32px repeat(7, 1fr); gap: 4px; } .kal-mo-head span { padding: 4px 6px; font-family: var(--display); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.kal-mo-grid { display: grid; grid-template-columns: 32px repeat(7, minmax(0, 1fr)); gap: 4px; }
.kal-kw { display: grid; place-items: center; font-family: var(--display); font-size: 11px; color: var(--text-3); }
.kal-day { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 92px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: inherit; text-align: left; transition: border-color 0.2s, transform 0.25s var(--ease-out); }
.kal-day:hover { border-color: var(--cyan-2); transform: translateY(-1px); }
.kal-day b { font-family: var(--display); font-size: 12px; color: var(--text-2); } .kal-day.is-today { border-color: var(--cyan-2); box-shadow: inset 0 0 0 1px var(--accent-ring); } .kal-day.is-today b { color: var(--cyan); }
.kal-day.is-other { opacity: 0.45; } .kal-day.is-we { background: var(--panel); }
.kal-dot { font-size: 11.5px; line-height: 1.25; padding: 1px 5px; border-radius: 4px; border-left: 2px solid var(--cyan); background: var(--panel-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-dot.is-all { border-left-color: var(--violet); } .kal-dot.is-task { border-left-color: var(--violet); border-left-style: dotted; } .kal-dot.is-blocker { border-left-color: var(--line-3); color: var(--text-3); }
.kal-day small { font-size: 11px; color: var(--text-3); }

/* Regeln */
.rg-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.rg-kpi .kpi-n { font-size: 26px; }
.rg-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin-bottom: 8px; }
.rg-card { padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); animation: rise 0.45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
.rg-card.is-auf { border-color: var(--green); } .rg-card.is-upd { border-color: var(--violet); }
.rg-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rg-card header b { flex: 1 1 60%; font-size: 15px; } .rg-card header small { font-size: 12px; color: var(--text-3); }
.rg-satz { margin: 8px 0; font-size: 14px; color: var(--text-2); }
.rg-ex { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .rg-ex .step { cursor: pointer; }
.rg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.rg-foot .select, .rg-table .select { width: auto; padding: 5px 30px 5px 10px; font-size: 13px; }
.rg-table td { vertical-align: middle; } .rg-table tr.st-pausiert td { opacity: 0.6; } .rg-table tr.st-verworfen td { opacity: 0.4; } .rg-table tr.is-marked td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.rg-table tr.is-schutz .select { opacity: 0.5; } .rg-schutz { color: var(--green); margin-left: 4px; }
.rg-schw { margin-top: 20px; } .rg-schw .set-box { margin-top: 12px; }
@media (max-width: 920px) {
  .mc { grid-template-columns: 1fr; }
  .mc-item { flex-wrap: wrap; } .mc-main { flex-basis: calc(100% - 24px); } .mc-main b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .mc-tags { flex-wrap: wrap; margin-left: 24px; }
  .mc-sub { display: none; }
  .rg-table th:nth-child(5), .rg-table td:nth-child(5), .rg-table th:nth-child(6), .rg-table td:nth-child(6), .rg-table th:nth-child(7), .rg-table td:nth-child(7) { display: none; }
  .kal-wk-grid { height: 420px; }
  .kal-mo-grid { grid-template-columns: 24px repeat(7, minmax(0, 1fr)); } .kal-day { min-height: 56px; padding: 4px; } .kal-dot { display: none; } .kal-day small { display: block; }
}

/* =====================================================================
   Stil „Flex“ – komplett digital. Nur aktiv mit data-theme="flex"; abschaltbar im Darstellungs-Menü.
   Ein Motiv: alles materialisiert aus Licht (Clip + Unschärfe), die gewählte Sache atmet Licht.
   ===================================================================== */
.flex-sky { display: none; }
.flex-halo, .flex-ring { display: none; }
:root[data-theme="flex"] {
  --bg: #05030f; --bg-2: #0a0620; --bg-top: #0b0726;
  --panel: rgba(18, 13, 46, 0.62); --panel-2: rgba(28, 20, 70, 0.62); --panel-3: rgba(44, 32, 104, 0.7);
  --line: rgba(140, 150, 255, 0.16); --line-2: rgba(150, 160, 255, 0.3); --line-3: rgba(170, 180, 255, 0.5);
  --text: #f1f2ff; --text-2: #b6bcf0; --text-3: #8089c8;
  --cyan: #62f0ff; --cyan-2: #35c9e6; --cyan-ink: #03101a; --cyan-soft: rgba(98, 240, 255, 0.14);
  --magenta: #ff4fd8; --magenta-soft: rgba(255, 79, 216, 0.16);
  --amber: #ffc24d; --amber-ink: #1a1100; --amber-soft: rgba(255, 194, 77, 0.16);
  --red: #ff5f7a; --red-soft: rgba(255, 95, 122, 0.16); --red-line: rgba(255, 95, 122, 0.55); --warn-text: #ffd9e0;
  --green: #5cf7b0; --green-soft: rgba(92, 247, 176, 0.16); --violet: #a99bff;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9), 0 0 40px -12px rgba(98, 240, 255, 0.25);
  --shadow-sm: 0 10px 28px -14px rgba(0, 0, 0, 0.85), 0 0 18px -8px rgba(98, 240, 255, 0.2);
  --accent-glow: rgba(98, 240, 255, 0.75); --accent-ring: rgba(98, 240, 255, 0.7); --selection: rgba(255, 79, 216, 0.4);
  --topbar-bg: rgba(5, 3, 15, 0.55); --veil: rgba(10, 6, 32, 0.35); --veil-strong: rgba(8, 5, 26, 0.75); --backdrop: rgba(3, 2, 12, 0.72);
  --row-hover: rgba(98, 240, 255, 0.04); --grid-line: rgba(98, 240, 255, 0.06); --bg-glow: rgba(120, 80, 255, 0.22); --lage-bg: rgba(18, 13, 46, 0.5); --marker-glow: 1.6;
  --label-track: 0.18em; --r: 12px;
  color-scheme: dark;
}
:root[data-theme="flex"] body { background: var(--bg); background-image: radial-gradient(900px 500px at 15% -10%, rgba(120, 80, 255, 0.28), transparent 60%), radial-gradient(800px 500px at 90% 10%, rgba(98, 240, 255, 0.14), transparent 60%), radial-gradient(900px 600px at 60% 110%, rgba(255, 79, 216, 0.14), transparent 60%); }
:root[data-theme="flex"] body::before { background-size: 56px 56px; mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 85%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 85%); transform: perspective(600px) rotateX(55deg) translateY(-30%) scale(2.2); transform-origin: 50% 0; animation: flex-grid 18s linear infinite; }
@keyframes flex-grid { to { background-position: 0 56px, 0 0; } }
:root[data-theme="flex"] body::after { content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient(40% 30% at 30% 35%, rgba(98, 240, 255, 0.13), transparent 70%), radial-gradient(35% 28% at 70% 60%, rgba(255, 79, 216, 0.12), transparent 70%), radial-gradient(30% 25% at 55% 20%, rgba(169, 155, 255, 0.14), transparent 70%); filter: blur(40px); animation: flex-aurora 26s var(--ease-in-out) infinite alternate; }
@keyframes flex-aurora { from { transform: translate3d(-4%, -2%, 0) rotate(-3deg) scale(1); } to { transform: translate3d(4%, 3%, 0) rotate(3deg) scale(1.08); } }
:root.flex-live .flex-sky { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.9; }
:root[data-theme="flex"] .main { position: relative; z-index: 1; }
:root[data-theme="flex"] .topbar { z-index: 30; } :root[data-theme="flex"] .bottombar { z-index: 35; }
:root[data-theme="flex"] .topbar { position: sticky; backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border-bottom-color: transparent; }
:root[data-theme="flex"] .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan) 30%, var(--magenta) 70%, transparent); opacity: 0.7; }
:root[data-theme="flex"] .topbar::before { content: ""; position: absolute; bottom: -2px; height: 3px; width: 160px; border-radius: 3px; background: linear-gradient(90deg, transparent, #fff, transparent); filter: blur(1px); animation: flex-scan 6s var(--ease-in-out) infinite; opacity: 0.9; }
@keyframes flex-scan { 0% { left: -160px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
:root[data-theme="flex"] .brand-name { background: linear-gradient(90deg, var(--cyan), #fff 50%, var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 0.3em; }
:root[data-theme="flex"] .brand-sub { color: var(--text-3); }
:root[data-theme="flex"] .brand-mark { filter: drop-shadow(0 0 8px var(--accent-glow)); animation: flex-spin 14s linear infinite; }
@keyframes flex-spin { to { transform: rotate(360deg); } }
:root[data-theme="flex"] .clock-time { text-shadow: 0 0 14px var(--accent-glow); letter-spacing: 0.1em; }
:root[data-theme="flex"] .view-tab::after { background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 12px var(--accent-glow); height: 2px; }
:root[data-theme="flex"] .view-tab.is-active { text-shadow: 0 0 10px var(--accent-glow); }
:root[data-theme="flex"] .filter, :root[data-theme="flex"] .search, :root[data-theme="flex"] .icon-btn:hover { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
:root[data-theme="flex"] .chip.is-active { background: linear-gradient(135deg, var(--cyan-soft), var(--magenta-soft)); color: #fff; box-shadow: inset 0 0 0 1px var(--accent-ring); }
/* Glas-Panels mit Lichtkante */
:root[data-theme="flex"] .hd-box, :root[data-theme="flex"] .mc-row, :root[data-theme="flex"] .kpi, :root[data-theme="flex"] .set-box, :root[data-theme="flex"] .rg-card, :root[data-theme="flex"] .ab-card, :root[data-theme="flex"] .ab-hero, :root[data-theme="flex"] details.dossier, :root[data-theme="flex"] .editor, :root[data-theme="flex"] .done-item, :root[data-theme="flex"] .auto-item, :root[data-theme="flex"] .tile, :root[data-theme="flex"] .mc-brief { position: relative; background: var(--panel); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-color: transparent; box-shadow: var(--shadow-sm); }
:root[data-theme="flex"] .hd-box::before, :root[data-theme="flex"] .mc-row::before, :root[data-theme="flex"] .kpi::before, :root[data-theme="flex"] .set-box::before, :root[data-theme="flex"] .rg-card::before, :root[data-theme="flex"] .ab-card::before, :root[data-theme="flex"] .ab-hero::before, :root[data-theme="flex"] details.dossier::before, :root[data-theme="flex"] .editor::before, :root[data-theme="flex"] .done-item::before, :root[data-theme="flex"] .auto-item::before, :root[data-theme="flex"] .tile::before, :root[data-theme="flex"] .mc-brief::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(98, 240, 255, 0.55), rgba(169, 155, 255, 0.12) 40%, rgba(255, 79, 216, 0.45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
/* Die gewählte Sache atmet Licht (ein Motiv, nicht überall) */
:root[data-theme="flex"] .qi.is-active, :root[data-theme="flex"] .wk-day.is-today, :root[data-theme="flex"] .kal-day.is-today, :root[data-theme="flex"] .tile.is-on { border-color: transparent; box-shadow: 0 0 0 1px var(--accent-ring), 0 0 28px -6px var(--accent-glow), var(--shadow-sm); animation: flex-breathe 3.2s var(--ease-in-out) infinite; }
@keyframes flex-breathe { 50% { box-shadow: 0 0 0 1px var(--accent-ring), 0 0 44px -4px var(--accent-glow), var(--shadow-sm); } }
:root[data-theme="flex"] .qi { background: rgba(18, 13, 46, 0.35); }
:root[data-theme="flex"] .qi:hover { background: var(--panel-2); border-color: var(--line-2); }
/* Materialisieren statt Einlaufen */
:root[data-theme="flex"] .page-in, :root[data-theme="flex"] .card.is-fresh > *, :root[data-theme="flex"] .queue-list.is-entering > li, :root[data-theme="flex"] .mc-row, :root[data-theme="flex"] .kpi, :root[data-theme="flex"] .hd-box, :root[data-theme="flex"] .rg-card, :root[data-theme="flex"] .dlg-form > * { animation-name: flex-mat; animation-duration: 0.7s; }
@keyframes flex-mat { 0% { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(8px) brightness(1.8); clip-path: inset(0 0 100% 0); } 60% { clip-path: inset(0 0 0 0); } 100% { opacity: 1; transform: none; filter: blur(0) brightness(1); clip-path: inset(0 0 0 0); } }
:root[data-theme="flex"] .hd-greet { background: none; color: #fff; text-shadow: -2px 0 0 rgba(98, 240, 255, 0.7), 2px 0 0 rgba(255, 79, 216, 0.7), 0 0 24px rgba(98, 240, 255, 0.35); letter-spacing: 0.06em; font-size: 32px; }
:root[data-theme="flex"] .kpi-n, :root[data-theme="flex"] .mc-n { text-shadow: 0 0 16px currentColor; }
:root[data-theme="flex"] .lage-line strong { text-shadow: 0 0 12px var(--amber-soft); }
/* Knöpfe: Magnet + Lichtkante */
:root[data-theme="flex"] .btn { background: rgba(28, 20, 70, 0.55); border-color: var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
:root[data-theme="flex"] .btn:hover { border-color: var(--cyan-2); box-shadow: 0 0 18px -6px var(--accent-glow); }
:root[data-theme="flex"] .btn-primary, :root[data-theme="flex"] .seg-thumb { background: linear-gradient(135deg, var(--cyan), #9bb4ff 55%, var(--magenta)); border-color: transparent; color: #060214; box-shadow: 0 10px 30px -10px var(--accent-glow), 0 0 0 1px rgba(255,255,255,0.25) inset; }
:root[data-theme="flex"] .btn-primary:hover { filter: brightness(1.12) saturate(1.1); }
:root[data-theme="flex"] .btn-primary, :root[data-theme="flex"] .icon-btn, :root[data-theme="flex"] .btn-kombi { transform: translate(var(--mx, 0), var(--my, 0)); transition: transform 0.25s var(--ease-out), background 0.2s, border-color 0.2s, box-shadow 0.25s, filter 0.2s; }
:root[data-theme="flex"] .btn-primary:active:not(:disabled) { transform: translate(var(--mx, 0), var(--my, 0)) scale(0.96); }
:root[data-theme="flex"] .btn-kombi::before { background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.7) 50%, transparent 70%); }
:root[data-theme="flex"] .qi-pip { box-shadow: 0 0 10px currentColor; }
:root[data-theme="flex"] .qi.p2 .qi-pip, :root[data-theme="flex"] .mc-item.p2 .qi-pip { color: var(--cyan); } :root[data-theme="flex"] .qi.p1 .qi-pip { color: var(--amber); } :root[data-theme="flex"] .qi.is-warn .qi-pip { color: var(--red); }
/* Neigung (JS setzt --rx/--ry nur bei feinem Zeiger) */
:root[data-theme="flex"] .is-tilt { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-2px); transition: transform 0.18s var(--ease-out); }
/* Pointer-Halo und Klickring */
:root.flex-live .flex-halo { display: block; position: fixed; left: 0; top: 0; z-index: 70; width: 240px; height: 240px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(98, 240, 255, 0.16), rgba(255, 79, 216, 0.08) 40%, transparent 70%); mix-blend-mode: screen; will-change: transform; }
:root.flex-live .flex-ring { display: block; position: fixed; z-index: 71; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 1.5px solid var(--cyan); box-shadow: 0 0 14px var(--accent-glow); pointer-events: none; animation: fx-ring 0.65s var(--ease-out) forwards; }
/* Horizont, Toasts, Dialoge, Scrollbars */
:root[data-theme="flex"] .hz-today-line { filter: drop-shadow(0 0 6px var(--accent-glow)); } :root[data-theme="flex"] .hz-axis { stroke: var(--line-2); }
:root[data-theme="flex"] .toast { background: var(--panel-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--line-2); box-shadow: var(--shadow); }
:root[data-theme="flex"] .toast-bar { background: linear-gradient(90deg, var(--cyan), var(--magenta)); opacity: 0.9; }
:root[data-theme="flex"] .dlg { background: rgba(14, 10, 40, 0.78); backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4); border-color: var(--line-2); box-shadow: var(--shadow), 0 0 0 1px rgba(98, 240, 255, 0.15) inset; }
:root[data-theme="flex"] .dlg::backdrop { background: var(--backdrop); backdrop-filter: blur(8px); }
:root[data-theme="flex"] .input, :root[data-theme="flex"] .select, :root[data-theme="flex"] .textarea { background: rgba(5, 3, 15, 0.6); }
:root[data-theme="flex"] .input:focus, :root[data-theme="flex"] .textarea:focus, :root[data-theme="flex"] .editor:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft), 0 0 20px -6px var(--accent-glow); }
:root[data-theme="flex"] *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--cyan-2), var(--magenta)); border: 3px solid transparent; background-clip: padding-box; }
:root[data-theme="flex"] * { scrollbar-color: var(--cyan-2) transparent; }
:root[data-theme="flex"] :focus-visible { outline-color: var(--magenta); box-shadow: 0 0 0 4px var(--magenta-soft); }
:root[data-theme="flex"] ::selection { background: var(--selection); color: #fff; }
:root[data-theme="flex"] .caret, :root[data-theme="flex"] textarea, :root[data-theme="flex"] input { caret-color: var(--magenta); }
:root[data-theme="flex"] .pipe-dot { background: var(--panel-2); } :root[data-theme="flex"] .pipe-bar i { background: linear-gradient(90deg, var(--cyan), var(--magenta)); }
:root[data-theme="flex"] .fx-p { box-shadow: 0 0 8px currentColor; color: var(--cyan); } :root[data-theme="flex"] .fx-p:nth-child(3n) { color: var(--magenta); background: var(--magenta); }
:root[data-theme="flex"] .tl-ev, :root[data-theme="flex"] .kal-ev, :root[data-theme="flex"] .wk-ev { background: linear-gradient(90deg, var(--cyan-soft), rgba(28, 20, 70, 0.6)); border-left-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(98, 240, 255, 0.12); }
:root[data-theme="flex"] .tl-now { border-top-color: var(--magenta); } :root[data-theme="flex"] .tl-now i { background: var(--magenta); box-shadow: 0 0 12px var(--magenta); } :root[data-theme="flex"] .tl-now span { color: var(--magenta); }
:root[data-theme="flex"] .amp-gruen { box-shadow: 0 0 10px var(--green); } :root[data-theme="flex"] .amp-rot { box-shadow: 0 0 10px var(--red); }
:root[data-theme="flex"] .ab-flow::after { background: linear-gradient(90deg, transparent, #fff, var(--magenta), transparent); }
:root[data-theme="flex"] .bottombar { backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-top-color: var(--line-2); } :root[data-theme="flex"] .bb-tab.is-active { text-shadow: 0 0 10px var(--accent-glow); }
.theme-swatch.flex { background: linear-gradient(135deg, #05030f 40%, #62f0ff 55%, #ff4fd8 100%); }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="flex"] body::before, :root[data-theme="flex"] body::after, :root[data-theme="flex"] .topbar::before, :root[data-theme="flex"] .brand-mark { animation: none !important; }
  :root[data-theme="flex"] .qi.is-active, :root[data-theme="flex"] .wk-day.is-today, :root[data-theme="flex"] .kal-day.is-today, :root[data-theme="flex"] .tile.is-on { animation: none !important; }
  :root[data-theme="flex"] .page-in, :root[data-theme="flex"] .card.is-fresh > *, :root[data-theme="flex"] .queue-list.is-entering > li, :root[data-theme="flex"] .mc-row, :root[data-theme="flex"] .kpi, :root[data-theme="flex"] .hd-box, :root[data-theme="flex"] .rg-card { animation: none !important; filter: none; clip-path: none; }
  .flex-sky, .flex-halo, .flex-ring { display: none !important; }
}
@media (max-width: 920px) { :root[data-theme="flex"] body::after { filter: blur(24px); } :root[data-theme="flex"] .hd-greet { font-size: 24px; } }

/* v0.7.2 – Empfänger im Editor */
.editor-adr { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid var(--line); }
.editor-adr label { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 12px 0 16px; border-right: 1px solid var(--line); }
.editor-adr label:nth-child(2n) { border-right: 0; }
.editor-adr label span { flex: none; width: 30px; font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.editor-adr .ed-adr { flex: 1; min-width: 0; height: 36px; border: 0; background: transparent; color: var(--text); font-size: 14px; outline: none; }
.editor-adr select.ed-adr { appearance: none; cursor: pointer; }
.editor-adr .ed-adr::placeholder { color: var(--text-3); }
.editor-adr label:focus-within { background: var(--row-hover); }
.ed-ccbtn { flex: none; height: 24px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--text-3); font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; }
.ed-ccbtn:hover { color: var(--cyan); border-color: var(--cyan-2); }
.editor-adr label[hidden] { display: none; }
.dlg-text b.warn { color: var(--red); }
@media (max-width: 920px) { .editor-adr { grid-template-columns: 1fr; } .editor-adr label { border-right: 0; border-bottom: 1px solid var(--line); } .editor-adr label:last-child { border-bottom: 0; } }

/* ===== v0.7.3 · Anhänge (Auswahl, Ansehen) + Fehlerlog ===== */
.att-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.att-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--panel-2, var(--panel)); cursor: pointer; transition: border-color .15s, background .15s; }
.att-item:hover { border-color: var(--cyan); }
.att-item input[type="checkbox"] { flex: none; width: 17px; height: 17px; accent-color: var(--cyan); }
.att-item .att-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--panel-3); color: var(--text-3); }
.att-item .att-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.att-item .att-main b { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-item .att-main small { color: var(--text-3); font-size: .78rem; }
.att-item .att-main em { font-style: normal; font-size: .78rem; color: var(--amber); }
.att-item.is-sig { opacity: .78; }
.att-item.is-sig .att-main em { color: var(--text-3); }
.att-item.is-q { border-color: var(--red); }
.att-item.is-q .att-main em { color: var(--red); }
.att-item:has(input:checked) { background: color-mix(in srgb, var(--cyan) 9%, var(--panel)); border-color: color-mix(in srgb, var(--cyan) 55%, var(--line)); }
.att-item:has(input:checked) .att-ico { color: var(--cyan); }
.att-open { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--cyan); text-decoration: none; padding: 4px 8px; border-radius: 8px; }
.att-open:hover { background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.att-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.ablage-att { margin: 8px 0 4px; }
.ds-block.wide .att-item { cursor: default; }
.fehlerlog { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow: auto; margin-top: 8px; padding-right: 4px; }
.log-item { border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--panel-2, var(--panel)); font-size: .85rem; }
.log-item summary { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.log-item summary::-webkit-details-marker { display: none; }
.log-item summary b { font-weight: 600; flex: 1 1 240px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.log-item .log-q { flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--panel-3); }
.log-item.is-php .log-q { background: color-mix(in srgb, var(--red) 22%, transparent); }
.log-item.is-n8n .log-q { background: color-mix(in srgb, var(--amber) 26%, transparent); }
.log-item.is-browser .log-q { background: color-mix(in srgb, var(--cyan) 22%, transparent); }
.log-item .log-t, .log-item .log-o { color: var(--text-3); font-size: .76rem; font-variant-numeric: tabular-nums; }
.log-item pre { margin: 0; padding: 8px 12px 10px; border-top: 1px dashed var(--line); font-size: .74rem; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; color: var(--text-3); }

/* ===================== v0.8 Recherche-Agent & Anhänge ===================== */
.mc-note.rx { flex-direction: column; gap: 10px; padding: 12px 14px; border-color: var(--line-3); background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.rx-head { display: flex; align-items: center; gap: 10px; }
.rx-title { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.rx-meta { margin-left: auto; font-size: 12.5px; color: var(--text-3); }
.rx-link { border: 0; background: none; padding: 0; color: var(--cyan); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.rx-link:hover { color: var(--text); }
.rx-hist { margin: 0; padding: 0 0 0 4px; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.rx-hist small { color: var(--text-3); }
.rx-intro { margin: 0; font-size: 13.5px; color: var(--text-2); }
.rx-quick { margin: 2px 0; }
.rx-quick button { animation: rise 0.35s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.rx-auftrag { width: 100%; resize: vertical; min-height: 58px; font-size: 14px; line-height: 1.45; }
.rx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rx-row .input { flex: 1; min-width: 160px; }
.rx-fine { font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; }
.rx-auftrag-zeile { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--text-3); font-style: italic; }
.rx-auftrag-zeile svg { flex: none; margin-top: 2px; color: var(--cyan); }
.rx-bar { height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.rx-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan-2), var(--cyan)); box-shadow: 0 0 8px var(--accent-glow); transition: width 0.6s var(--ease-out); }
.rx-tl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.rx-st { position: relative; display: flex; gap: 10px; padding: 0 0 10px; animation: tl-in 0.35s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.rx-st:not(:last-child)::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 1px; background: var(--line-2); }
.rx-dot { flex: none; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; border: 1px solid var(--line-3); background: var(--panel); color: var(--text-3); }
.rx-st.is-werkzeug .rx-dot { color: var(--cyan); border-color: var(--accent-ring); }
.rx-st.is-fertig .rx-dot { color: var(--green); border-color: var(--green); background: var(--green-soft); }
.rx-st.is-fehler .rx-dot, .rx-st.is-bad .rx-dot { color: var(--red); border-color: var(--red-line); background: var(--red-soft); }
.rx-st > div { min-width: 0; flex: 1; font-size: 13px; line-height: 1.4; }
.rx-st b { font-weight: 600; color: var(--text); }
.rx-st code { font-family: inherit; font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--panel-3); color: var(--text-2); overflow-wrap: anywhere; }
.rx-st p { margin: 2px 0 0; color: var(--text-2); overflow-wrap: anywhere; }
.rx-st.is-denken p { color: var(--text-3); font-style: italic; }
.rx-st.is-live b { color: var(--cyan); }
.rx-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--accent-ring); border-top-color: var(--cyan); animation: spin 0.8s linear infinite; }
.rx-fazit { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.rx-fakten { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rx-fakten li { position: relative; padding-left: 14px; font-size: 13.5px; color: var(--text-2); animation: rise 0.35s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.rx-fakten li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }
.rx-fakten small { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 11.5px; color: var(--text-3); }
.rx-files, .rx-anh { display: flex; flex-direction: column; gap: 6px; }
.rx-files-head { display: flex; align-items: center; gap: 10px; }
.rx-files-head .label { margin: 0; display: inline-flex; align-items: center; gap: 5px; }
.rx-files-head .rx-link:first-of-type { margin-left: auto; }
.rx-file .di-open { width: auto; padding: 0 8px; gap: 4px; display: inline-flex; font-size: 12px; }
.rx-gap { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--warn-text, var(--amber)); }
.rx-gap svg { flex: none; margin-top: 2px; }
.rx-err { display: flex; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--red-soft); border: 1px solid var(--red-line); color: var(--text); font-size: 13.5px; }
.rx-err svg { flex: none; color: var(--red); margin-top: 2px; } .rx-err p { margin: 2px 0 0; color: var(--text-2); }
.rx-steps summary { cursor: pointer; font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; list-style: none; }
.rx-steps summary::-webkit-details-marker { display: none; }
.rx-steps[open] summary svg { transform: rotate(90deg); }
.rx-steps summary svg { transition: transform 0.2s var(--ease-out); }
.rx-steps .rx-tl { margin-top: 8px; }
.rx-anh { padding-top: 10px; border-top: 1px dashed var(--line-2); }
.rx-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.rx-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 9px; border-radius: 999px; border: 1px solid var(--accent-ring); background: var(--cyan-soft); font-size: 13px; color: var(--text); animation: pop 0.3s var(--ease-spring) both; }
.rx-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.rx-chip svg { flex: none; color: var(--cyan); }
.rx-chip em { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); }
.rx-chip.is-fremd { border-color: var(--amber); background: var(--amber-soft); }
.rx-chip a, .rx-chip button { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 0; background: none; color: var(--text-3); cursor: pointer; }
.rx-chip a:hover, .rx-chip button:hover { background: var(--panel-3); color: var(--text); }
.rx-suche { display: flex; flex-direction: column; gap: 6px; }
.rx-suche .drive-item { cursor: default; }
@media (max-width: 640px) { .rx-chip > span { max-width: 190px; } .rx-row .btn { flex: 1 1 auto; } }
@media (prefers-reduced-motion: reduce) { .rx-st, .rx-fakten li, .rx-chip, .rx-quick button { animation: none; } .rx-spin { animation-duration: 2s; } }
.mc-note.rx > * { width: 100%; }

/* ===================== v0.8.1 – Web-Interface-Guidelines (Vercel) & Aufgaben-Kachel ===================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
button, a, input, select, textarea, label, summary, [draggable="true"] { touch-action: manipulation; }
html { -webkit-tap-highlight-color: transparent; }
@media (pointer: fine) { html { overscroll-behavior: none; } }
.dlg, .dlg-form, .queue-list, .detail-scroll, .theme-list, .toasts { overscroll-behavior: contain; }
.editor:focus-within { border-color: var(--cyan-2); }
.editor-subject:focus-visible, .editor-text:focus-visible { outline: none; box-shadow: inset 3px 0 0 var(--cyan); }
.editor-adr label:focus-within { box-shadow: inset 2px 0 0 var(--cyan); }
.search:focus-within { box-shadow: 0 0 0 3px var(--cyan-soft); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--cyan-2); box-shadow: 0 0 0 3px var(--cyan-soft); }
.select { background-color: var(--bg); color: var(--text); }
body.is-dragging, body.is-dragging * { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.kal-ev.is-dragging, .kal-task.is-dragging { opacity: 0.45; }
.queue-list > li, .auf-list > li { content-visibility: auto; contain-intrinsic-size: auto 64px; }
.task-main { min-width: 0; } .task-main b, .task-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-title, .hd-greet, .page-title, .dlg-title { text-wrap: balance; }
.mc-item .mc-main b { overflow-wrap: anywhere; }

/* Aufgaben-Kachel */
.mc-row.r-auf { grid-column: 1 / -1; }
.auf { display: flex; flex-direction: column; gap: 10px; }
.auf-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.auf-stat { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auf-stat.is-rot { color: var(--red); }
.auf-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.auf-search { height: 32px; } .auf-search input { width: 170px; }
.auf-proj { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.auf-proj .chip { display: inline-flex; align-items: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.auf-proj .chip small { margin-left: 4px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.auf-proj .chip.is-active small { color: inherit; }
.auf-grp { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.auf-grp + .auf-grp { margin-top: 6px; }
.auf-grp summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none; font-family: var(--display); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); border-radius: 10px; }
.auf-grp summary::-webkit-details-marker { display: none; }
.auf-grp summary:hover { background: var(--row-hover); color: var(--text); }
.auf-grp summary svg { transition: transform 0.25s var(--ease-out); color: var(--text-3); }
.auf-grp[open] summary svg { transform: rotate(180deg); }
.auf-n { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--panel-3); color: var(--text-2); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.auf-grp.g-ueber summary { color: var(--red); } .auf-grp.g-ueber .auf-n { background: var(--red-soft); color: var(--red); }
.auf-grp.g-heute summary { color: var(--cyan); } .auf-grp.g-heute .auf-n { background: var(--cyan-soft); color: var(--cyan); }
.auf-grp .tasks, .auf-grp .mc-list { padding: 0 8px 8px; }
.auf-task { gap: 8px; }
.auf-due.is-over { color: var(--red); font-weight: 600; } .auf-due.is-soon { color: var(--amber); font-weight: 600; }
.auf-due-sel { width: auto; height: 28px; padding: 0 26px 0 8px; font-size: 12px; margin-left: auto; flex: none; opacity: 0; background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%; transition: opacity 0.15s; }
.auf-task:hover .auf-due-sel, .auf-task:focus-within .auf-due-sel, .auf-due-sel:focus-visible { opacity: 1; }
@media (pointer: coarse) { .auf-due-sel { opacity: 1; } }
.kal-warn { margin-left: 4px; }
@media (max-width: 920px) {
  .auf-tools { margin-left: 0; width: 100%; } .auf-search { flex: 1; } .auf-search input { width: 100%; }
  .auf-task .task-main small { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .auf-grp summary svg, .auf-due-sel { transition: none; } }

/* Mobil: kein seitliches Überlaufen – Grid-Spalten dürfen schrumpfen, lange Wörter brechen */
.main { overflow-x: clip; }
.view-page, .mc-row, .mc-item, .hd-box, .auf, .auf-grp { min-width: 0; }
.hd-sum, .mc-sub, .lage-line { overflow-wrap: anywhere; }
@media (max-width: 920px) {
  .mc { grid-template-columns: minmax(0, 1fr); }
  .mc-sub { white-space: normal; text-align: left; margin-left: 0; flex-basis: 100%; }
  .mc-head { flex-wrap: wrap; }
  .mc-main b { white-space: normal; }
}