/* AGENTICAL Cockpit, gemeinsames Stylesheet.
   Quelle: Leitstand (site/businessplan/index.html), Designsprache laut
   docs/design/00-KONZEPT.md Abschnitt 3. Hell, Archivo, Haarlinien, Türkis
   als einziger Akzent. Einzige Stelle mit Farbwerten: der :root-Block.
   Referenz aller Komponenten: /design/ (site/design/index.html).
   Einbindung: <link rel="stylesheet" href="/assets/cockpit.css?v=..."> */

/* Briefing Studio: Archivo wird selbst ausgeliefert (@fontsource/archivo), kein Abruf bei Google Fonts. Quelle: cockpit site/assets/cockpit.css @ bc67601, sonst unverändert. */

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --bg: #ffffff; --soft: #f5f7f8; --card: #f2f8f9; --chip: #eef2f4;
  --ink: #0b0d0f; --grey: #4f5d68; --dim: #5d6a74; --on-ink: #ffffff;
  --tq: #00b7c7; --tq-text: #00707c;
  --lime: #7ed957; --lime-text: #3f7d24; --lime-bg: #eff9ea;
  --warn: #b36b00; --warn-bg: #fff5e6; --red: #a8433a; --red-bg: #fbeeec;
  --line: rgba(11,13,15,.09); --line-strong: rgba(11,13,15,.18);
  --tq-line: rgba(0,183,199,.45); --tq-line-soft: rgba(0,183,199,.35);
  --tq-ring: rgba(0,183,199,.18); --tq-fade: rgba(0,183,199,.15);
  --lime-line: rgba(126,217,87,.55); --warn-line: rgba(179,107,0,.3);
  --red-line: rgba(168,67,58,.35);
  --glass: rgba(255,255,255,.92); --glass-soft: rgba(255,255,255,.7);
  --overlay: rgba(11,13,15,.38);
  --shadow-callout: 0 30px 80px -40px rgba(0,183,199,.45);
  --shadow-modal: 0 40px 100px -30px rgba(11,13,15,.35);
  --shadow-toast: 0 20px 50px -20px rgba(11,13,15,.5);
  --shadow-drop: 0 24px 48px rgba(11,13,15,.12);
  --font: 'Archivo', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --nav-h: 68px; --side-w: 264px; --page-w: 1120px;
  --r-btn: 12px; --r-field: 10px;
}

/* ── Basis ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--font); }
body { background: var(--bg); color: var(--grey); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; padding-bottom: env(safe-area-inset-bottom); }
a { color: var(--tq-text); text-decoration: none; }
a:hover { text-decoration: underline; }
strong, b { color: var(--ink); font-weight: 600; }
code { background: var(--chip); padding: 1px 6px; border-radius: 4px; font-family: var(--mono); font-size: .88em; color: var(--ink); }
:focus-visible { outline: 2px solid var(--tq); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Rahmen: Kopfzeile ──────────────────────────────────────────── */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: 20px; padding: 0 24px 0 32px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: block; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand-logo { display: block; height: 26px; width: auto; }
.topbar__doc { font-size: 15px; font-weight: 500; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 20px; border-left: 1px solid var(--line); min-width: 0; }
.topbar__spacer { flex: 1; }
.topbar__tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.jump-btn { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px 0 14px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--dim); font: 500 14px var(--font); cursor: pointer; }
.jump-btn:hover { border-color: var(--tq-text); color: var(--ink); }
.jump-btn kbd { font: 600 12px var(--font); background: var(--chip); color: var(--dim); border-radius: 6px; padding: 1px 6px; }
.menu-btn { display: none; background: var(--chip); border: 0; color: var(--ink); border-radius: 14px; padding: 9px 14px; font: 600 15px var(--font); cursor: pointer; }

/* ── Rahmen: Shell und Seitenleiste ─────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100vh - var(--nav-h)); }
.side { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--nav-h)); overflow-y: auto; border-right: 1px solid var(--line); background: var(--soft); padding: 28px 18px 36px; display: flex; flex-direction: column; }
.side__label { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--tq-text); padding: 0 12px 14px; }
.side__label::before { content: ""; width: 32px; height: 1px; background: var(--tq-text); }
.side nav { display: flex; flex-direction: column; }
.side nav a { display: flex; gap: 14px; align-items: baseline; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--grey); font-size: 15px; font-weight: 500; transition: color 250ms ease, background 250ms ease; }
.side nav a:first-child { border-top: 0; }
.side nav a span { font-variant-numeric: tabular-nums; color: var(--dim); font-weight: 700; min-width: 22px; font-size: 13px; }
.side nav a:hover { color: var(--ink); background: var(--glass-soft); text-decoration: none; }
.side nav a[aria-current="page"] { color: var(--ink); background: var(--bg); box-shadow: inset 3px 0 0 var(--tq); }
.side nav a[aria-current="page"] span { color: var(--tq-text); }
.side nav a .cnt { margin-left: auto; min-width: 0; font-size: 12.5px; color: var(--tq-text); font-weight: 700; }
.side nav a .ext { margin-left: auto; font-size: 12px; color: var(--dim); font-weight: 500; }
.side__group { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 18px 12px 6px; }
.side__group:first-child { padding-top: 0; }
.side__group + a { border-top: 0 !important; }
.side nav .sub-nav { display: flex; flex-direction: column; padding: 2px 0 8px 36px; }
.side nav .sub-nav a { border-top: 0; padding: 5px 10px; font-size: 13.5px; gap: 10px; }
.side nav .sub-nav a span { font-size: 12px; min-width: 18px; font-weight: 600; }
.side nav .sub-nav a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--tq); }
.side__foot { margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); line-height: 1.55; }
.side__foot b { color: var(--ink); font-weight: 600; }
.side__foot a { display: inline-block; margin-top: 6px; margin-right: 12px; font-weight: 600; }
.side__spacer { height: 24px; flex: 0 0 auto; }
main.container { padding: 56px 56px 88px; min-width: 0; }
.page { max-width: var(--page-w); }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal 500ms ease; }
  @keyframes reveal { from { opacity: .001; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ── Typografie ─────────────────────────────────────────────────── */
.eyebrow { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; color: var(--tq-text); margin-bottom: 18px; flex-wrap: wrap; }
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--tq-text); }
.eyebrow b { font-weight: 700; color: var(--dim); }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
.page-title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 14px; }
.lead { font-size: 18px; color: var(--grey); max-width: 62ch; margin: 0 0 36px; }
h2.sec { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; color: var(--tq-text); margin: 48px 0 18px; letter-spacing: 0; text-transform: none; }
h2.sec::before { content: ""; width: 32px; height: 1px; background: var(--tq-text); flex: 0 0 auto; }
h2.sec:first-child { margin-top: 0; }
h2.sec .sec__more { margin-left: auto; font-size: 14px; font-weight: 600; }
h3 { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 10px; }
p { max-width: 76ch; }
.muted { color: var(--grey); }
.soft { color: var(--dim); }
.small { font-size: 14px; }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.pos { color: var(--lime-text); }
.neg { color: var(--red); }
.warn-t { color: var(--warn); }

/* ── Karten und Raster ──────────────────────────────────────────── */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.g4 > .card { border: 0 !important; }
.card { background: var(--bg); border: 1px solid var(--line); padding: 26px 26px 28px; min-width: 0; }
.card + .card { margin-top: 16px; }
.grid > .card + .card { margin-top: 0; }
a.card { display: block; color: inherit; transition: background 250ms ease, border-color 250ms ease; }
a.card:hover { text-decoration: none; background: var(--card); border-color: var(--tq-line); }
a.card.kpi, a.card.app { display: flex; }
.callout { background: var(--card); border: 1px solid var(--tq-line); box-shadow: var(--shadow-callout); }

/* Anwendungskarte (Startseite): Icon, Name, ein Satz, optional Zahl */
.app { display: flex; gap: 16px; align-items: flex-start; }
.app__icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--tq-text); margin-top: 2px; }
.app__icon svg { width: 24px; height: 24px; display: block; }
.app__body { min-width: 0; flex: 1; }
.app__name { display: block; color: var(--ink); font-weight: 700; font-size: 16.5px; line-height: 1.3; }
.app__desc { display: block; font-size: 14px; color: var(--dim); margin-top: 2px; }
.app__count { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--tq-text); font-variant-numeric: tabular-nums; }

/* ── Kennzahlkachel ─────────────────────────────────────────────── */
.kpi { display: flex; flex-direction: column; gap: 4px; color: inherit; min-width: 0; padding: 24px 24px 22px; transition: background 250ms ease; }
a.kpi:hover { text-decoration: none; background: var(--card); }
.kpi .lbl { font-size: 14px; font-weight: 600; color: var(--dim); }
.kpi .val { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.kpi .val .kind { font-size: 12px; font-weight: 600; color: var(--dim); margin-left: 6px; letter-spacing: 0; }
.kpi .val.text { font-size: 18px; letter-spacing: -.01em; line-height: 1.35; }
.kpi .cmp { font-size: 14px; color: var(--grey); font-variant-numeric: tabular-nums; }
.kpi .stand { font-size: 12.5px; color: var(--dim); margin-top: auto; padding-top: 10px; }
.kpi .act { margin-top: auto; padding-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.kpi.warn { box-shadow: inset 0 3px 0 var(--warn); }
.kpi.crit { box-shadow: inset 0 3px 0 var(--red); }
.kpi.ok { box-shadow: inset 0 3px 0 var(--lime); }
.kpi.nodata { background: var(--soft); }
.kpi.nodata .val { font-size: 16px; color: var(--dim); font-weight: 600; letter-spacing: 0; }

/* ── Kennzeichen ────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--tq-line-soft); border-radius: 999px; padding: 2px 11px; font-size: 12.5px; font-weight: 600; color: var(--tq-text); white-space: nowrap; }
.pill:not(.tq):not(.ok):not(.warn):not(.crit):not(.old) { background: var(--chip); border-color: transparent; color: var(--dim); }
.pill.ok { background: var(--lime-bg); border-color: var(--lime-line); color: var(--lime-text); }
.pill.warn, .pill.old { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.pill.crit { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: 0 0 auto; }
.dot.checked, .dot.on { background: var(--tq); }
.dot.gap { background: var(--warn); }
.dot.live { background: var(--tq); box-shadow: 0 0 0 4px var(--tq-ring); }

/* Chips (Websites und Demos) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--chip); border: 1px solid transparent; border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: border-color 250ms ease, background 250ms ease; }
.chip:hover { text-decoration: none; border-color: var(--tq-line); background: var(--card); }

/* ── Kachelraster mit 1-px-Abständen (Werkzeuge) ────────────────── */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tile { position: relative; display: flex; gap: 12px; align-items: center; min-width: 0; padding: 16px 18px; background: var(--bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); transition: background 250ms ease; }
a.tile:hover, .tile:hover { text-decoration: none; background: var(--card); }
.tile__icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--tq-text); }
.tile__icon svg { width: 22px; height: 22px; display: block; }
.tile__text { min-width: 0; flex: 1; }
.tile__name { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.tile__desc { display: block; font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile__mini { display: flex; gap: 4px; flex: 0 0 auto; }
.tile__act { flex: 0 0 auto; }
.mini { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--dim); font: 700 12px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.mini:hover { border-color: var(--tq-text); color: var(--tq-text); }
.mini.copied { background: var(--tq); border-color: var(--tq); color: var(--ink); }
.mini svg { width: 12px; height: 12px; }

/* ── Tabellen ───────────────────────────────────────────────────── */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); background: var(--bg); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-size: 13.5px; font-weight: 600; color: var(--dim); padding: 12px 16px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; background: var(--soft); vertical-align: bottom; }
td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--grey); }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.sum td { color: var(--ink); font-weight: 700; background: var(--soft); }
tr.res td { color: var(--tq-text); font-weight: 800; background: var(--card); }
tr.res td .neg { color: var(--red); }
td.neg, span.neg { color: var(--red); }
th.sticky, td.sticky { position: sticky; left: 0; z-index: 1; background: var(--bg); color: var(--ink); font-weight: 600; }
th.sticky { background: var(--soft); }
tr.sum td.sticky { background: var(--soft); }
tr.res td.sticky { background: var(--card); }
table.dense { font-size: 14px; }
table.dense th, table.dense td { padding: 8px 10px; }

/* ── Listen ─────────────────────────────────────────────────────── */
.list { list-style: none; margin: 0; display: grid; font-size: 15px; }
.list li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; padding-top: 2px; }
.list li::before { content: ""; position: absolute; left: 0; top: calc(10px + .8em); width: 12px; height: 1px; background: var(--tq-text); }
.list li:first-child::before { top: calc(2px + .8em); }

/* Linkliste (Dokumente und Wissen): ganze Zeile klickbar */
.linklist { list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.linklist li + li { border-top: 1px solid var(--line); }
.linklist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding: 12px 4px; color: var(--ink); transition: background 250ms ease; }
.linklist a:hover { text-decoration: none; background: var(--soft); }
.linklist .ll__name { font-weight: 600; }
.linklist .ll__desc { grid-column: 1; font-size: 14px; color: var(--dim); }
.linklist .ll__host { grid-column: 2; grid-row: 1; font-size: 13px; color: var(--tq-text); font-weight: 600; white-space: nowrap; }

/* ── Zeitstrahl ─────────────────────────────────────────────────── */
.tl { position: relative; display: flex; flex-direction: column; gap: 16px; padding-left: 36px; margin-bottom: 16px; }
.tl::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--tq), var(--tq-fade)); }
.tl-item { position: relative; background: var(--bg); border: 1px solid var(--line); padding: 22px 24px; }
.tl-item::before { content: ""; position: absolute; left: -31px; top: 28px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--tq-text); }
.tl-item.current { background: var(--card); border-color: var(--tq-line); box-shadow: var(--shadow-callout); }
.tl-item.current::before { background: var(--tq); border-color: var(--tq); box-shadow: 0 0 0 6px var(--tq-ring); }
.tl-item .row { margin-bottom: 8px; }

/* ── Formulare und Knöpfe ───────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-btn); padding: 0 20px; height: 44px; font: 600 15px var(--font); cursor: pointer; background: var(--tq); color: var(--ink); border: 1px solid transparent; transition: all 250ms ease; white-space: nowrap; text-decoration: none; }
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.secondary { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { border-color: var(--tq-text); color: var(--tq-text); filter: none; }
.btn.small { height: 34px; padding: 0 14px; font-size: 13.5px; border-radius: var(--r-field); }
.btn.danger { background: var(--red-bg); color: var(--red); border-color: var(--red-line); }
.btn.ghost { background: none; border-color: transparent; color: var(--tq-text); padding: 0 8px; }
.btn.ghost:hover { background: var(--soft); filter: none; }
label.f, span.f { display: block; font-size: 13.5px; font-weight: 600; color: var(--dim); margin-bottom: 5px; }
.field { margin-bottom: 14px; min-width: 0; }
input, select, textarea { width: 100%; font-family: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-field); padding: 9px 11px; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--tq-text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tq); box-shadow: 0 0 0 3px var(--tq-ring); }
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
.hint { font-size: 13px; color: var(--dim); margin-top: 4px; }
.form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }

/* Vorschlagsliste unter einem Eingabefeld (z. B. CRM-Suche) */
.suggest { position: relative; }
.suggest__list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-field); box-shadow: var(--shadow-drop); max-height: 16rem; overflow-y: auto; }
.suggest__list button { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 9px 12px; font: 500 14.5px var(--font); color: var(--ink); cursor: pointer; }
.suggest__list button:first-child { border-top: 0; }
.suggest__list button:hover, .suggest__list button.on { background: var(--card); }
.suggest__list small { display: block; color: var(--dim); font-size: 12.5px; }

/* ── Leerzustand, Hinweise ──────────────────────────────────────── */
.empty { padding: 36px 20px; text-align: center; color: var(--dim); }
.empty .t { color: var(--ink); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.empty p { margin: 0 auto; }
.notice { padding: 14px 18px; font-size: 15px; background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); }
.notice.info { background: var(--card); border-color: var(--tq-line); color: var(--ink); }
.notice.error { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }

/* ── Modal und Toast ────────────────────────────────────────────── */
.modal-bg { position: fixed; inset: 0; background: var(--overlay); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; }
.modal-bg.hidden { display: none; }
.modal { background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-modal); padding: 28px; width: 100%; max-width: 680px; }
.modal h3 { margin-bottom: 14px; }
.modal-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.modal-head h3 { margin: 0; flex: 1; }
.modal-x { background: none; border: 0; color: var(--dim); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.modal-x:hover { background: var(--soft); color: var(--ink); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; padding: 12px 18px; background: var(--ink); color: var(--on-ink); font-size: 15px; border-radius: var(--r-btn); transition: opacity .25s; max-width: calc(100vw - 32px); box-shadow: var(--shadow-toast); }
.toast.error { background: var(--red); }
.toast a { color: var(--on-ink); text-decoration: underline; }
.toast.hidden { opacity: 0; pointer-events: none; display: block !important; }

/* ── Blättern ───────────────────────────────────────────────────── */
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager a { flex: 1; max-width: 48%; border: 1px solid var(--line); padding: 16px 20px; background: var(--bg); color: var(--ink); font-weight: 600; font-size: 16px; transition: all 250ms ease; }
.pager a:hover { border-color: var(--tq-line); background: var(--card); text-decoration: none; }
.pager a small { display: block; font-size: 13px; font-weight: 600; color: var(--tq-text); margin-bottom: 2px; }
.pager a.next { text-align: right; margin-left: auto; }

/* ── Sprungleiste (Cmd+K / Strg+K) ──────────────────────────────── */
.jump-bg { position: fixed; inset: 0; background: var(--overlay); z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.jump { width: 100%; max-width: 600px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-modal); }
.jump input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 18px 20px; font-size: 17px; }
.jump input:focus { box-shadow: none; border-bottom-color: var(--tq); }
.jump__list { list-style: none; max-height: 52vh; overflow-y: auto; }
.jump__list li { display: flex; align-items: baseline; gap: 12px; padding: 10px 20px; cursor: pointer; border-top: 1px solid var(--line); color: var(--ink); }
.jump__list li:first-child { border-top: 0; }
.jump__list li.on { background: var(--card); box-shadow: inset 3px 0 0 var(--tq); }
.jump__list .jl__name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump__list .jl__grp { font-size: 12.5px; color: var(--dim); font-weight: 600; white-space: nowrap; }
.jump__foot { padding: 8px 20px; font-size: 12.5px; color: var(--dim); border-top: 1px solid var(--line); background: var(--soft); }
.jump__empty { padding: 18px 20px; color: var(--dim); }

/* ── Hilfe (Knopf und Schublade, gebaut von /assets/help.js) ───── */
.cockpit-help-fab { position: fixed; top: calc(15px + env(safe-area-inset-top, 0px)); right: 24px; z-index: 60; width: 38px; height: 38px; border-radius: 999px; background: var(--chip); color: var(--ink); border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font: 700 16px var(--font); cursor: pointer; transition: background 250ms ease, color 250ms ease, border-color 250ms ease; }
.cockpit-help-fab:hover { background: var(--card); color: var(--tq-text); border-color: var(--tq-line); }
.topbar__tools .cockpit-help-fab { position: static; }
/* ── Victor: Chat-Leiste (nur mit Freischaltung „victor“) ─────────── */
.victor-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; background: var(--card); border: 1px solid var(--tq-line); border-radius: var(--r-btn); color: var(--tq-text); font: 600 14px var(--font); cursor: pointer; }
.victor-btn:hover { background: var(--bg); border-color: var(--tq-text); }
.victor-btn svg { width: 16px; height: 16px; }
.victor-overlay { position: fixed; inset: 0; z-index: 9000; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .18s; }
.victor-overlay.open { opacity: 1; pointer-events: auto; }
.victor-drawer { position: fixed; top: 0; right: 0; z-index: 9001; height: 100vh; height: 100dvh; width: min(480px, 100vw); background: var(--bg); border-left: 1px solid var(--line); box-shadow: var(--shadow-modal); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; font-family: var(--font); }
.victor-drawer:not(.open) { box-shadow: none; visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.victor-drawer.open { transform: translateX(0); }
.vc-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--soft); }
.vc-head .vc-title { flex: 1; min-width: 0; }
.vc-head .vc-title b { display: block; font-size: 17px; color: var(--ink); }
.vc-head .vc-title span { font-size: 12.5px; color: var(--dim); }
.vc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); margin-right: 6px; vertical-align: 1px; }
.vc-dot.on { background: var(--lime); }
.vc-dot.off { background: var(--red); }
.vc-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.vc-empty { color: var(--dim); font-size: 14.5px; text-align: center; margin: auto 10px; line-height: 1.55; }
.vc-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.vc-msg.user { align-self: flex-end; background: var(--tq); color: var(--ink); border-bottom-right-radius: 4px; }
.vc-msg.assistant { align-self: flex-start; background: var(--soft); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.vc-msg.error { align-self: stretch; background: var(--red-bg); color: var(--red); border: 1px solid var(--red-line); max-width: none; }
.vc-msg.typing::after { content: "▍"; animation: vc-blink 1s steps(2) infinite; color: var(--tq-text); }
@keyframes vc-blink { 50% { opacity: 0; } }
.vc-tool { align-self: flex-start; font-size: 12.5px; color: var(--dim); display: flex; align-items: center; gap: 6px; }
.vc-tool .spinner { width: 12px; height: 12px; }
.vc-approval { align-self: stretch; border: 1px solid var(--warn-line); background: var(--warn-bg); padding: 12px 14px; border-radius: 12px; font-size: 14px; color: var(--ink); }
.vc-approval b { display: block; color: var(--warn); margin-bottom: 4px; }
.vc-approval code { display: block; margin-top: 6px; padding: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font: 12.5px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9rem; overflow-y: auto; }
.vc-approval .row { margin-top: 10px; gap: 8px; }
.vc-foot { border-top: 1px solid var(--line); padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: flex-end; }
.vc-foot textarea { min-height: 44px; max-height: 10rem; resize: none; flex: 1; font-size: 15px; }
.vc-foot .btn { height: 44px; }
@media (max-width: 560px) { .victor-btn .vb__label { display: none; } .victor-btn { padding: 0 10px; } }

.cockpit-help-overlay { position: fixed; inset: 0; z-index: 9100; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .18s; }
.cockpit-help-overlay.open { opacity: 1; pointer-events: auto; }
.cockpit-help-drawer { position: fixed; top: 0; right: 0; z-index: 9101; height: 100vh; width: min(440px, 100vw); background: var(--bg); color: var(--grey); border-left: 1px solid var(--line); box-shadow: var(--shadow-modal); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; font-family: var(--font); }
.cockpit-help-drawer:not(.open) { box-shadow: none; visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.cockpit-help-drawer.open { transform: translateX(0); }
.cockpit-help-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); background: var(--soft); }
.cockpit-help-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--tq-text); }
.cockpit-help-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--tq-text); }
.cockpit-help-title { font-size: 18px; font-weight: 700; margin-top: 4px; color: var(--ink); }
.cockpit-help-close { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: 20px; }
.cockpit-help-close:hover { background: var(--chip); color: var(--ink); }
.cockpit-help-body { padding: 18px 22px 32px; overflow-y: auto; flex: 1; font-size: 15px; line-height: 1.6; }
.cockpit-help-body h2 { font-size: 16px; color: var(--ink); margin: 22px 0 6px; }
.cockpit-help-body h2:first-child { margin-top: 0; }
.cockpit-help-body h3 { font-size: 15px; color: var(--ink); margin: 16px 0 4px; }
.cockpit-help-body h4 { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; margin: 14px 0 4px; }
.cockpit-help-body p { margin: 8px 0; }
.cockpit-help-body ul, .cockpit-help-body ol { margin: 8px 0 10px; padding-left: 20px; }
.cockpit-help-body li { margin: 3px 0; }
.cockpit-help-body pre { background: var(--soft); border: 1px solid var(--line); padding: 10px; overflow-x: auto; font-size: 13px; margin: 10px 0; }
.cockpit-help-body a { text-decoration: underline; }
.cockpit-help-err { color: var(--red); }

/* ── Ergänzt mit dem Modul Aufgaben (2026-09-29) ──────────────── */
/* Reiter: Ansichten einer Seite, aktiv mit Türkis-Unterstrich */
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; padding: 10px 16px; font: 600 15px var(--font); color: var(--dim); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color 250ms ease, box-shadow 250ms ease; }
.tab:hover { color: var(--ink); }
.tab.active, .tab[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--tq); }

/* Kompaktes Kennzahlband: so viele Kacheln wie da sind, 1-px-Abstände */
.gk { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.gk > .card { border: 0 !important; }
.kpi.sm { padding: 14px 16px 12px; gap: 2px; }
.kpi.sm .lbl { font-size: 13px; }
.kpi.sm .val { font-size: 22px; }
.kpi.sm .val.text { font-size: 16px; }

/* Chips als Umschalter (Filter, Auswahl) */
button.chip { font: 600 14px var(--font); cursor: pointer; }
.chip.on { background: var(--card); border-color: var(--tq-line); color: var(--tq-text); }
.chip.sm { padding: 3px 10px; font-size: 13px; }

/* Fortschrittsbalken */
.meter { height: 6px; background: var(--chip); border-radius: 999px; overflow: hidden; }
.meter > i { display: block; height: 100%; width: 0; background: var(--tq); border-radius: 999px; transition: width 600ms ease; }
.meter.ok > i { background: var(--lime); }

/* Symbolknopf (Bearbeiten, Entfernen, Termin) */
.ibtn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--dim); font: 600 15px var(--font); line-height: 1; cursor: pointer; transition: color 250ms ease, background 250ms ease, border-color 250ms ease; }
.ibtn:hover { background: var(--soft); border-color: var(--line-strong); color: var(--ink); }
.ibtn.danger:hover { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }
.ibtn svg { width: 15px; height: 15px; }

/* Ladeanzeige */
.spinner { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; border: 2px solid var(--line-strong); border-top-color: var(--tq); border-radius: 50%; animation: cockpit-spin .8s linear infinite; }
@keyframes cockpit-spin { to { transform: rotate(360deg); } }

/* ── Ergänzt mit dem Modul Forschung (2026-09-29) ─────────────── */
/* Öffentlicher Rahmen (body data-shell="public", z. B. Freigabe-Link für
   externe Prüfer): Kopfzeile nur mit Logo und Titel, keine Seitenleiste. */
.shell.shell--public { grid-template-columns: minmax(0, 1fr); }
.topbar--public .brand { cursor: default; }

/* ── Ergänzt mit dem Modul Bewirtung (2026-09-29) ─────────────── */
/* Schrittanzeige eines Assistenten: aktiv Türkis, erledigt Lime.
   Das Skript schaltet .active und .done an den li. */
.steps { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 28px; }
.steps > li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 16px; background: var(--bg); color: var(--dim); font-size: 14px; font-weight: 600; transition: background 250ms ease, color 250ms ease; }
.steps .n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--chip); color: var(--dim); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.steps .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps > li.active { background: var(--card); color: var(--ink); box-shadow: inset 0 -2px 0 var(--tq); }
.steps > li.active .n { background: var(--tq); color: var(--ink); }
.steps > li.done { color: var(--lime-text); }
.steps > li.done .n { background: var(--lime); color: var(--ink); }

/* Auswahlkarten (Radio als Karte), gewählt mit Türkis-Rahmen */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choice { position: relative; display: block; min-width: 0; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-field); cursor: pointer; transition: border-color 250ms ease, background 250ms ease; }
.choice:hover { border-color: var(--tq-text); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice.selected, .choice:has(input:checked) { background: var(--card); border-color: var(--tq); box-shadow: 0 0 0 3px var(--tq-ring); }
.choice:has(input:focus-visible) { outline: 2px solid var(--tq); outline-offset: 2px; }
.choice__kicker { display: block; font-size: 13.5px; font-weight: 700; color: var(--tq-text); font-variant-numeric: tabular-nums; }
.choice__title { display: block; font-weight: 600; color: var(--ink); line-height: 1.4; }
.choice__desc { display: block; font-size: 13.5px; color: var(--dim); margin-top: 2px; line-height: 1.45; }

/* Ablagefläche für Dateien (Ziehen und Ablegen), .drag beim Darüberziehen */
.drop { border: 1.5px dashed var(--line-strong); border-radius: var(--r-btn); padding: 32px 20px; text-align: center; background: var(--soft); transition: border-color 250ms ease, background 250ms ease; }
.drop:hover, .drop.drag { border-color: var(--tq); background: var(--card); }
.drop__icon { display: block; width: 30px; height: 30px; margin: 0 auto 8px; color: var(--tq-text); }
.drop__title { color: var(--ink); font-size: 17px; font-weight: 700; }
.drop p { margin: 2px auto 0; font-size: 14px; color: var(--dim); }
.drop .row { justify-content: center; margin-top: 16px; }

/* Angaben als Liste Bezeichnung und Wert (Zusammenfassung vor dem Abschluss) */
dl.facts { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); border-top: 1px solid var(--line); font-size: 15px; }
dl.facts dt { padding: 10px 20px 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--dim); }
dl.facts dd { min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--grey); overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .steps > li { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: 12.5px; text-align: center; }
  .steps .lbl { max-width: 100%; }
  .choices { grid-template-columns: minmax(0, 1fr); }
  dl.facts { grid-template-columns: minmax(0, 1fr); }
  dl.facts dt { padding: 10px 0 0; border-bottom: 0; }
  dl.facts dd { padding-top: 2px; }
}

/* ── Ergänzt mit dem Modul Transkript (2026-09-29) ────────────── */
/* Gesprächsverlauf (Transkript): je Beitrag ein Block mit Sprecher und
   Zeitmarke, Sprecherwechsel durch Haarlinie abgesetzt, Zeilenlänge begrenzt. */
.transcript { max-width: 72ch; }
.transcript__turn { padding: 14px 0; border-top: 1px solid var(--line); }
.transcript__turn:first-child { border-top: 0; padding-top: 0; }
.transcript__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.transcript__spk { font-size: 14.5px; font-weight: 700; color: var(--tq-text); }
.transcript__ts { font-size: 13px; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.transcript__text { margin: 0; font-size: 16px; line-height: 1.7; color: var(--grey); overflow-wrap: anywhere; }
/* ── Ergänzt mit dem Modul Abnahme (2026-09-29) ───────────────── */
/* Abhakliste (z. B. Abnahmekriterien): Kästchen je Punkt; erfüllt mit
   Lime und Haken, für die ganze Liste (.done) oder je Punkt (li.done). */
ul.checklist { list-style: none; margin: 0; display: grid; font-size: 15px; }
ul.checklist li { position: relative; padding: 9px 0 9px 30px; border-top: 1px solid var(--line); line-height: 1.5; color: var(--ink); }
ul.checklist li:first-child { border-top: 0; padding-top: 2px; }
ul.checklist li::before { content: ""; position: absolute; left: 0; top: 12px; width: 17px; height: 17px; border: 1.5px solid var(--line-strong); border-radius: 5px; background: var(--bg); }
ul.checklist li:first-child::before { top: 5px; }
ul.checklist.done li::before, ul.checklist li.done::before { background: var(--lime); border-color: var(--lime); }
ul.checklist.done li::after, ul.checklist li.done::after { content: ""; position: absolute; left: 6px; top: 14px; width: 5px; height: 9px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
ul.checklist.done li:first-child::after, ul.checklist li.done:first-child::after { top: 7px; }

/* Datei-Link zum Herunterladen: Symbol, Name, Metazeile (Größe, Person, Zeit) */
a.filelink { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 10px 14px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-field); color: var(--ink); transition: border-color 250ms ease, background 250ms ease; }
a.filelink:hover { text-decoration: none; border-color: var(--tq-line); background: var(--card); }
.filelink__icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--tq-text); }
.filelink__body { min-width: 0; }
.filelink__name { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.filelink__meta { display: block; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ── Ergänzt mit dem Modul Webspace (2026-09-29) ──────────────── */
/* Erfolgsmeldung (z. B. nach dem Veröffentlichen): Lime wie „gut, erledigt“ */
.notice.ok { background: var(--lime-bg); border-color: var(--lime-line); color: var(--lime-text); }
.notice.ok strong { color: var(--lime-text); }

/* Kopierzeile: Adresse in einer Zeile (eigener Scroll), daneben Knöpfe */
.copyline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.copyline code { flex: 1 1 18rem; min-width: 0; display: block; overflow-x: auto; white-space: nowrap; padding: 7px 10px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-field); font-size: 13px; color: var(--tq-text); }

/* ── Ergänzt mit dem Modul Maps (2026-09-29) ──────────────────── */
/* Diagrammfläche (z. B. mermaid-SVG): große Diagramme scrollen in der
   Fläche statt die Seite zu verbreitern. Originalbreite per
   --diagram-w (vom Skript aus der viewBox gesetzt), .fit passt in die Breite. */
.diagram-canvas { overflow: auto; -webkit-overflow-scrolling: touch; min-height: 120px; max-width: 100%; padding: 16px; background: var(--bg); border: 1px solid var(--line); }
.diagram-canvas svg { display: block; margin: 0 auto; height: auto; width: var(--diagram-w, 100%); max-width: none !important; }
.diagram-canvas.fit svg { width: 100%; max-width: 100% !important; }

/* Aufklapper (details/summary), z. B. Legende unter einem Diagramm */
details.fold > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600; color: var(--dim); padding: 4px 0; user-select: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform 250ms ease; }
details.fold[open] > summary::before { transform: rotate(45deg); }
details.fold > summary:hover { color: var(--ink); }
details.fold pre { margin-top: 8px; padding: 12px 14px; background: var(--soft); border: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--grey); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Ergänzt mit dem Leitstand (2026-09-29) ───────────────────── */
/* Zusatzfarben: Violett für Vorschläge (Pille .prop im Leitstand),
   Bernstein als Diagrammfarbe („ohne Finanzierung“). Nur hier ergänzt,
   der Token-Block oben bleibt unverändert. */
:root {
  --purple: #6b4fbb; --purple-bg: #f0eef8; --purple-line: rgba(107,79,187,.3);
  --amber: #d98a00;
}

/* ── Icons in Seitenleiste und Sprungleiste (2026-09-29) ─────── */
.nav-ic { display: inline-flex; flex: 0 0 auto; width: 18px; height: 18px; color: var(--dim); font-style: normal; }
.nav-ic svg { width: 18px; height: 18px; display: block; }
.side nav a:has(.nav-ic) { align-items: center; gap: 12px; }
.side nav a[aria-current="page"] .nav-ic, .side nav a:hover .nav-ic { color: var(--tq-text); }
.jump__list li { align-items: center; }
.jump__list li .nav-ic { color: var(--tq-text); }

/* ── Responsiv ──────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .g4, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .menu-btn { display: inline-block; }
  .side { position: fixed; left: 0; right: 0; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); height: auto; max-height: calc(100vh - var(--nav-h)); z-index: 40; border-right: 0; border-bottom: 1px solid var(--line-strong); box-shadow: var(--shadow-drop); }
  .side:not(.open) { display: none; }
  .topbar__doc { display: none; }
  .topbar { padding: 0 16px 0 20px; }
  .jump-btn .jb__label, .jump-btn kbd { display: none; }
  .jump-btn { padding: 0 10px; }
  main.container { padding: 36px 20px 64px; }
  .g2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main.container { padding: 28px 16px 56px; }
  .topbar { padding: 0 12px 0 16px; gap: 10px; }
  .brand-logo { height: 21px; }
  .g3, .g4, .tiles { grid-template-columns: minmax(0, 1fr); }
  .form2 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 22px 18px; }
  .pager { flex-direction: column; } .pager a { max-width: none; }
  .lead { font-size: 16.5px; margin-bottom: 28px; }
  .modal { padding: 22px 18px; }
  .linklist .ll__host { display: none; }
  .cockpit-help-drawer { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 85vh; transform: translateY(100%); border-left: 0; border-top: 1px solid var(--line); }
  .cockpit-help-drawer.open { transform: translateY(0); }
}

/* ── Druck ──────────────────────────────────────────────────────── */
@media print {
  .topbar, .side, .cockpit-help-fab, .no-print, .menu-btn, .jump-bg { display: none !important; }
  .toast, .modal-bg { display: none !important; }
  .shell { display: block; }
  main.container { padding: 0; }
  body { font-size: 11pt; }
  .card, .tw, .tl-item, .kpi { break-inside: avoid; box-shadow: none; }
  .callout { box-shadow: none; }
  a { color: var(--ink); }
}

/* ── Zeilenliste, Zeitfenster, Abstimmung, Mappen (Leitstand, Version 2) ── */
button.chip { font-family: var(--font); cursor: pointer; }
.chips { align-items: center; }
.chips .sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 4px; }
.form3 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.4fr) minmax(0, 1.4fr); gap: 0 18px; }
.rows { list-style: none; border-top: 1px solid var(--line); }
.rows > li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 4px; border-bottom: 1px solid var(--line); min-width: 0; }
.rows > li.link { cursor: pointer; }
.rows > li.link:hover { background: var(--soft); }
.rows .box { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 2px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 7px; background: var(--bg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: border-color 250ms ease, background 250ms ease; }
.rows .box:hover { border-color: var(--tq); }
.rows .box.done { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.rows .box[disabled] { cursor: default; opacity: .6; }
.rows .box svg { width: 14px; height: 14px; }
.rows .main { flex: 1; min-width: 0; }
.rows .t { display: block; color: var(--ink); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.rows button.t, .rows a.t { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.rows button.t:hover, .rows a.t:hover { color: var(--tq-text); text-decoration: none; }
.rows li.is-done .t { color: var(--dim); text-decoration: line-through; font-weight: 500; }
.rows .sub { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 14px; color: var(--dim); margin-top: 2px; }
.rows .right { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 50%; }
.rows .text { color: var(--grey); font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.rows .big { font-size: 17px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 10px; margin: 14px 0 6px; }
.slot { text-align: left; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-field); cursor: pointer; font: 500 15px var(--font); color: var(--ink); transition: border-color 250ms ease, background 250ms ease; }
.slot:hover { border-color: var(--tq-text); }
.slot.on { background: var(--card); border-color: var(--tq); box-shadow: 0 0 0 3px var(--tq-ring); }
.slot small { display: block; font-size: 13px; color: var(--dim); font-weight: 500; }
.when { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.when svg { width: 16px; height: 16px; color: var(--tq-text); flex: 0 0 auto; }
.vote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 22rem; margin-top: 12px; }
.vote .btn { height: 42px; }
.who { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--dim); margin-top: 8px; }
details.mappe { border: 1px solid var(--line); background: var(--bg); }
details.mappe + details.mappe { margin-top: -1px; }
details.mappe > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; color: var(--ink); font-weight: 600; }
details.mappe > summary::-webkit-details-marker { display: none; }
details.mappe > summary::before { content: ""; width: 7px; height: 7px; border: solid var(--dim); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform 250ms ease; flex: 0 0 auto; }
details.mappe[open] > summary::before { transform: rotate(45deg); }
details.mappe > summary .cnt { margin-left: auto; font-size: 13.5px; color: var(--dim); font-weight: 600; white-space: nowrap; }
details.mappe > summary .meter { width: 90px; flex: 0 0 auto; }
details.mappe .body { padding: 0 18px 16px; }
.pt { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 6.5rem 7.5rem; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.pt select { padding: 6px 8px; font-size: 13.5px; }
.pt .t { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.pt .t a { font-size: 13px; margin-left: 8px; font-weight: 600; }
.pt.done .t { color: var(--dim); text-decoration: line-through; }
.pt.done .t a { text-decoration: none; display: inline-block; }
.pt .m { color: var(--dim); font-size: 13.5px; white-space: nowrap; }
.zs-meter { width: 150px; flex: 0 0 auto; }
@media (max-width: 900px) { .form3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .rows > li { flex-wrap: wrap; }
  .rows .right { max-width: 100%; width: 100%; justify-content: flex-start; padding-left: 38px; }
  .rows > li.nobox .right { padding-left: 0; }
  .pt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pt .t { grid-column: 1 / -1; }
  .vote { max-width: none; }
  details.mappe > summary .meter { display: none; }
  .zs-meter { width: 100%; flex: 1 1 100%; }
}

/* ── Ergänzt mit der Seite Produkte im Leitstand (2026-10-09) ── */
/* Abschnitt in einer Mappe: Überschrift, rechts ein Textknopf, darunter der Inhalt */
.block { padding: 16px 0; border-top: 1px solid var(--line); min-width: 0; }
.block:first-child { border-top: 0; padding-top: 4px; }
.block__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.block__head h3 { font-size: 16px; margin: 0; flex: 1; min-width: 0; }
/* Textknopf: sieht aus wie ein Link, ist ein Knopf (Ändern, Ablegen, Zurückholen) */
.linkbtn { background: none; border: 0; padding: 0; font: 600 13.5px var(--font); color: var(--tq-text); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
/* Formularzeile: Felder nebeneinander, der Knopf am Ende, bricht von selbst um */
.formrow { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: flex-end; }
.formrow .field { flex: 1 1 9rem; }
.formrow .field:first-child { flex: 2 1 14rem; }
.formrow .field--btn { flex: 0 0 auto; }
/* Lesetext: formatierter Text in kleiner Schrift (Überschrift, fett, Liste, Tabelle, Link) */
.prose { font-size: 15.5px; line-height: 1.6; color: var(--grey); overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: 0; margin: 18px 0 6px; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose .tw { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { padding: 2px 0; }
.prose blockquote { border-left: 2px solid var(--tq-line); padding-left: 12px; }
.prose table { font-size: 14.5px; }
.prose th, .prose td { padding: 8px 12px; }
/* Bilderraster mit Vorschau: Klick aufs Bild zeigt es groß, der Name lädt herunter */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 12px; }
.shot { border: 1px solid var(--line); background: var(--bg); min-width: 0; }
.shot__img { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--soft); cursor: zoom-in; overflow: hidden; color: var(--dim); font: 700 15px var(--font); }
.shot__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot__img--leer { cursor: default; }
.shot__cap { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 8px 10px; font-size: 13px; overflow-wrap: anywhere; }
.shot__cap a { font-weight: 600; }
/* Farbfeld: Fläche, Name und Farbwert, Klick kopiert den Wert */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-field); background: var(--bg); }
.swatch > button:first-child { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; font: 600 14px var(--font); color: var(--ink); cursor: pointer; }
.swatch i { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line-strong); flex: 0 0 auto; }
.swatch small { color: var(--dim); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Vollbild: eine Seite oder ein Bild über dem ganzen Fenster, oben eine Leiste mit „Schließen“ */
.viewer { position: fixed; inset: 0; z-index: 400; background: var(--bg); display: flex; flex-direction: column; }
.viewer[hidden] { display: none; }
.viewer__bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.viewer__title { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer iframe, .viewer img { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--soft); }
.viewer img { object-fit: contain; }
@media (max-width: 640px) { .block__head { flex-wrap: wrap; } .viewer__bar { padding: 8px 12px; } }
@media print { .viewer { display: none !important; } }

/* Abschnitt zum Ein- und Ausklappen: details.klapp trägt seine Überschrift (h2.sec) in der Kopfzeile. Den Zustand
   merkt sich die Seite je Person im Browser (Leitstand: businessplan/bedienung.js). Dazu die Leiste „Alle einklappen,
   Alle ausklappen“, lange Listen mit „Alle zeigen“ (.kurz10, .kurz5, .kurz3) und gekürzter Text mit „Ganz lesen“ (.kurztext). */
details.klapp > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 34px 0 8px; cursor: pointer; }
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp > summary::after { content: ""; width: 7px; height: 7px; margin: 0 6px; border: solid var(--dim); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s; flex: 0 0 auto; }
details.klapp[open] > summary::after { transform: rotate(45deg); }
details.klapp > summary h2.sec { flex: 1; min-width: 0; margin: 0; }
details.klapp:first-child > summary, .klappleiste + details.klapp > summary { margin-top: 0; }
details.klapp:not([open]) > summary { margin-bottom: 0; border-bottom: 1px solid var(--line); }
.klappleiste { display: flex; justify-content: flex-end; gap: 18px; margin-bottom: 4px; }
.klappleiste .linkbtn, .kurz-mehr .linkbtn, .kurztext-btn { min-height: 32px; }
.kurz10:not(.is-alle) > :nth-child(n+11), .kurz5:not(.is-alle) > :nth-child(n+6), .kurz3:not(.is-alle) > :nth-child(n+4) { display: none; }
.kurz-mehr { margin-top: 8px; }
.kurztext { max-height: 6.4em; overflow: hidden; }
.kurztext.is-offen { max-height: none; }
details.mappe > summary .pill { flex: 0 0 auto; }
details.mappe > summary.umbruch { flex-wrap: wrap; row-gap: 6px; }
details.mappe > summary.umbruch .name { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .klappleiste .linkbtn, .kurz-mehr .linkbtn, .kurztext-btn { min-height: 44px; } }
@media print { .kurztext { max-height: none; } .klappleiste, .kurz-mehr, .kurztext-btn { display: none; } }

/* Eingabe oben: eine Zeile mit Textfeld und Knopf direkt unter dem Seitentitel (form.eingabe.card). „Mehr“ klappt die
   weiteren Felder auf (.eingabe__mehr). Dazu das Zeichen „hat eine Beschreibung“ (.hat-text) und der Knopf
   „Rückgängig“ in der Rückmeldung (.toast__undo). */
.eingabe { padding: 14px 16px; margin-bottom: 6px; }
.eingabe__zeile { display: flex; gap: 10px; align-items: stretch; }
.eingabe__zeile input { flex: 1; min-width: 0; height: 48px; font-size: 17px; }
.eingabe__zeile .btn { flex: 0 0 auto; height: 48px; }
.eingabe__fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 32px; margin-top: 6px; }
.eingabe__tasten { font-size: 13px; color: var(--dim); }
.eingabe__mehr { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.eingabe__mehr .hint { margin-top: 0; }
.rows > li.is-offen { background: var(--soft); }
.hat-text { display: inline-flex; align-items: center; color: var(--dim); }
.hat-text svg { width: 15px; height: 15px; }
.toast__undo { margin-left: 14px; padding: 0; min-height: 28px; background: none; border: 0; color: var(--on-ink); font: 700 15px var(--font); text-decoration: underline; cursor: pointer; }
@media (max-width: 900px) {
  .eingabe__tasten { display: none; }
  .eingabe__fuss .linkbtn { min-height: 44px; }
  .eingabe__mehr input, .eingabe__mehr select { min-height: 44px; }
  .eingabe__zeile .btn { padding: 0 14px; }
  .toast__undo { min-height: 44px; }
}

/* Einsprechen: Mikrofon-Knopf an der Eingabe (.mic), Anzeige während der Aufnahme und beim Umwandeln (.aufnahme),
   danach der erkannte Text und je Vorschlag eine Karte (.vorschlag, .vkarten, .vkarte). */
.mic { flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-btn); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.mic svg { width: 21px; height: 21px; }
.mic:hover { border-color: var(--tq-text); color: var(--tq-text); }
.mic.an { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }
.mic:disabled { opacity: .5; cursor: default; }
.mic.klein { width: 34px; height: 34px; border-radius: var(--r-field); }
.mic.klein svg { width: 17px; height: 17px; }
.aufnahme { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0; padding: 10px 14px; background: var(--red-bg); border: 1px solid var(--red-line); color: var(--red); font-weight: 600; }
.aufnahme__punkt { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 999px; background: var(--red); }
.aufnahme__zeit { flex: 1 1 8rem; font-variant-numeric: tabular-nums; }
.aufnahme .linkbtn { color: var(--red); }
.aufnahme.wartet { background: var(--card); border-color: var(--tq-line); color: var(--ink); }
.dreher { flex: 0 0 auto; width: 16px; height: 16px; border: 2px solid var(--tq-line); border-top-color: var(--tq-text); border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  .aufnahme__punkt { animation: aufnahme-puls 1.2s ease-in-out infinite; }
  .dreher { animation: aufnahme-dreh .8s linear infinite; }
}
@keyframes aufnahme-puls { 50% { opacity: .25; } }
@keyframes aufnahme-dreh { to { transform: rotate(360deg); } }
.sprech-hinweis { display: flex; align-items: flex-start; gap: 14px; margin: 6px 0; }
.sprech-hinweis > div { flex: 1; min-width: 0; }
.vorschlag { margin: 6px 0; padding: 16px 18px 18px; background: var(--card); border: 1px solid var(--tq-line); }
.vorschlag > textarea { min-height: 4.6rem; }
.vorschlag__kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 10px; }
.vorschlag__kopf b { flex: 1 1 14rem; }
.vkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 12px; }
.vkarte { background: var(--bg); border: 1px solid var(--line-strong); padding: 14px 16px; min-width: 0; }
.vkarte__art { margin-bottom: 12px; }
.vkarte .field { margin-bottom: 10px; }
.vkarte label.f .pill { margin-left: 6px; }
.vkarte__fuss { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.feldkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.feldkopf > label.f { margin-bottom: 0; }
.chips > .mic.klein { margin-left: auto; }
@media (max-width: 900px) {
  .mic.klein { width: 44px; height: 44px; }
  .aufnahme .btn.small, .vorschlag .btn.small { height: 44px; }
  .aufnahme .linkbtn, .vorschlag .linkbtn, .sprech-hinweis .linkbtn { min-height: 44px; }
  .vkarte input, .vkarte select { min-height: 44px; }
  .vkarte__art .chip { min-height: 44px; }
  .vkarten { grid-template-columns: minmax(0, 1fr); }
}

/* Cover-Raster: Karten mit einem Bild vorn, zum Beispiel die Produkte im Leitstand (ul.covers). Das Bild füllt das Cover
   (.cover mit img). Ohne Bild steht ein gesetztes Cover aus Kürzel und Name (.cover--leer), die Akzentlinie nimmt
   die Farbe aus --cover-akzent. */
.covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 26px 20px; }
/* Jede Karte ist gleich gebaut und in ihrer Reihe gleich hoch: Cover, Titel (höchstens zwei Zeilen), Kennzeichen,
   Satz (immer Platz für zwei Zeilen), der Knopf steht unten */
.covers__karte { min-width: 0; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.covers__karte:hover { border-color: var(--tq-line); box-shadow: var(--shadow-drop); }
.covers__bild { display: block; color: inherit; }
.cover { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); border-bottom: 1px solid var(--line); }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cover--leer { display: flex; flex-direction: column; justify-content: space-between; padding: 16px 18px; background: var(--ink); color: var(--on-ink); }
.cover--leer::before { content: ""; width: 34px; height: 3px; background: var(--cover-akzent, var(--tq)); }
.cover__kuerzel { font-size: clamp(32px, 4.2vw, 46px); font-weight: 800; letter-spacing: -.02em; line-height: 1; overflow-wrap: anywhere; }
.cover__name { font-size: 13px; font-weight: 600; line-height: 1.35; opacity: .72; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.covers__text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px 16px; min-width: 0; }
.covers__text .t { color: var(--ink); font-size: 16.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; min-height: 2.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.covers__text .t:hover { color: var(--tq-text); text-decoration: none; }
.covers__satz { margin: 0; min-height: 3em; font-size: 14.5px; line-height: 1.5; color: var(--grey); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.covers__text .btn { margin-top: auto; }
@media (max-width: 640px) {
  .covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .cover--leer { padding: 12px; }
  .covers__text { padding: 12px; }
  .covers__text .btn.small { height: 44px; align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .covers__karte { transition: none; } }

/* ── Ergänzt mit der Aufgaben-Detailansicht (2026-10-21) ──────── */
/* Textfeld mit Formatierung (contenteditable) und kleiner Leiste darüber;
   .td-rich setzt Absätze und Listen aus Plane-Beschreibungen lesbar. */
.rte-bar { display: flex; gap: 4px; margin-bottom: 6px; }
.rte { min-height: 7rem; max-height: 50vh; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--r-field); padding: 9px 11px; font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--bg); overflow-wrap: anywhere; }
.rte[contenteditable="true"]:focus { outline: none; border-color: var(--tq); box-shadow: 0 0 0 3px var(--tq-ring); }
.rte[contenteditable="true"]:empty::before { content: attr(data-leer); color: var(--dim); }
#td-desc-ro { background: var(--soft); }
.td-rich p, .td-rich ul, .td-rich ol, .td-rich pre, .td-rich blockquote, .modal .td-rich p { margin: 0 0 8px; }
.td-rich ul, .td-rich ol { padding-left: 22px; }
.td-rich > :last-child { margin-bottom: 0; }
.td-rich pre, .td-rich code { font-family: var(--mono); font-size: 13.5px; }
.td-rich blockquote { border-left: 3px solid var(--line-strong); padding-left: 10px; color: var(--grey); }
/* Pille mit Entfernen-Knopf (z. B. zugewiesene Person) */
.pill-x { background: none; border: 0; padding: 0 0 0 2px; margin-right: -4px; color: inherit; font: 700 14px var(--font); line-height: 1; cursor: pointer; opacity: .7; }
.pill-x:hover { opacity: 1; }
.task-detail .td-head { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-detail .td-title { font-size: 18px; font-weight: 700; }
.task-detail .td-note { margin-bottom: 14px; }
.task-detail .td-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 26px; align-items: center; }
.task-detail .td-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.task-detail .td-spacer { flex: 1; }
.task-detail .td-h { margin: 26px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 16px; }
.task-detail .td-comments { max-width: none; margin-bottom: 14px; }
.task-detail .td-meta { margin-top: 18px; }
[data-open-task] { cursor: pointer; }
@media (max-width: 640px) {
  .task-detail { padding: 20px 16px; }
  .task-detail .form2 { grid-template-columns: minmax(0, 1fr); }
  .task-detail .td-actions .btn { flex: 1 1 auto; }
  .task-detail .td-spacer { display: none; }
}

/* ── Ergänzt mit dem Vorschlagswesen (2026-10-22) ─────────────── */
/* Kleiner Knopf in der Kopfzeile (Glühbirne), Dialog und Seite /verbesserungen/ */
.idea-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--dim); cursor: pointer; }
.idea-btn:hover { border-color: var(--tq-text); color: var(--tq-text); }
.vb-modal .vb-note { margin-bottom: 14px; font-size: 14.5px; }
.vb-modal .vb-drei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 14px; }
.vb-bild { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }
.vb-bild img { max-width: 160px; max-height: 100px; border: 1px solid var(--line); border-radius: 8px; object-fit: cover; }
.vb-bildwahl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; cursor: pointer; }
@media (max-width: 640px) { .vb-modal .vb-drei { grid-template-columns: minmax(0, 1fr); } }
/* Suche mit Inhalten (2026-10-22): Gruppenkopf und Zusatzzeile je Treffer */
.jump__list li.jump__gruppe { padding: 12px 20px 4px; border-top: 1px solid var(--line); cursor: default; display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); cursor: default; }
.jl__info { display: block; font-size: 12.5px; font-weight: 500; color: var(--dim); margin-top: 2px; }