/* ============================================================================
 * cockpit-v3.css – Cockpit im Look der abgenommenen Vorschau „Cockpit-Plattform“ (Philipp 2026-10-08:
 * „Design und Aufteilung mega – das ganze Cockpit bitte so überarbeiten, beim Überblick keine Funktionen entfernen“).
 * Sora für Überschriften, Inter für Text, IBM Plex Mono für Zahlen/Etiketten, Slate-Neutraltöne, Cockpit-Bernstein
 * als Akzent. Wird nach tailwind.css/style.css/theme-v2.css geladen: eigene Bausteine (cp-…) plus gezielte
 * Umfärbung der bisherigen Tailwind-Klassen (Blau -> Bernstein), damit alle Ansichten einheitlich wirken.
 * ========================================================================== */
:root {
  --cp-bg: #f4f6f9; --cp-surface: #ffffff; --cp-surface-2: #f8fafc; --cp-line: #e3e8ef; --cp-line-strong: #cfd7e2;
  --cp-text: #0f172a; --cp-muted: #4b5a70; --cp-faint: #5b6a80; /* AA (30.10.2026), vorher #5b6b80 / #8a98ab */
  --cp-accent: #c98a1f; --cp-accent-strong: #b07714; --cp-accent-ink: #8a5a06; --cp-accent-soft: #fbf1df;
  --cp-ok: #0f9f6e; --cp-ok-soft: #e2f6ee; --cp-warn: #c2410c; --cp-warn-soft: #fdeee4; --cp-danger: #e11d48;
  --cp-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 28px -16px rgba(15,23,42,.18);
}
html.dark {
  --cp-bg: #0b1120; --cp-surface: #111a2e; --cp-surface-2: #0f172a; --cp-line: rgba(148,163,184,.16); --cp-line-strong: rgba(148,163,184,.28);
  --cp-text: #e5ecf5; --cp-muted: #a9b8cc; --cp-faint: #94a3b8; /* AA, vorher #9fb0c6 / #6f8098 */
  --cp-accent: #e8a93a; --cp-accent-strong: #f0b44c; --cp-accent-ink: #f3c977; --cp-accent-soft: rgba(232,169,58,.14);
  --cp-ok: #34d399; --cp-ok-soft: rgba(52,211,153,.13); --cp-warn: #fb923c; --cp-warn-soft: rgba(251,146,60,.13); --cp-danger: #fb7185;
  --cp-shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -18px rgba(0,0,0,.7);
}
/* Eigene Akzentfarbe (Einstellungen → Darstellung): alle Abstufungen aus EINER Farbe abgeleitet */
html[data-accent-custom] { --cp-accent: var(--user-accent); --cp-accent-strong: color-mix(in srgb, var(--user-accent) 84%, black); --cp-accent-ink: color-mix(in srgb, var(--user-accent) 72%, black); --cp-accent-soft: color-mix(in srgb, var(--user-accent) 11%, white); }
html.dark[data-accent-custom] { --cp-accent: var(--user-accent); --cp-accent-strong: color-mix(in srgb, var(--user-accent) 85%, white); --cp-accent-ink: color-mix(in srgb, var(--user-accent) 50%, white); --cp-accent-soft: color-mix(in srgb, var(--user-accent) 16%, transparent); }
body.cp-v3 { background: var(--cp-bg); color: var(--cp-text); }
/* Bildlaufleiste: schmal, Spur durchsichtig (= Seitenfarbe) – sonst wirkt sie rechts wie ein Rand neben dem Kopf */
html { scrollbar-width: thin; scrollbar-color: var(--cp-line-strong) transparent; }

/* ---- Rahmen: Kopf mit Marke + Reitern (Unterstrich wie in der Vorschau) ---- */
.cp-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; /* über der Sprungleiste (z 30) */ background: color-mix(in srgb, var(--cp-bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--cp-line); }
.cp-wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px; }
.cp-brandrow { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 10px; min-height: 52px; } /* mehr Luft unter Logo und Datum (Philipp 20.10.) */
.cp-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cp-brand h1 { font: 600 19px/1.15 var(--f-display); letter-spacing: -.012em; margin: 0; color: var(--cp-text); }
.cp-brand p { margin: 1px 0 0; font-size: 13px; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-subtabs { display: flex; gap: 6px; padding: 12px 0 12px; overflow-x: auto; scrollbar-width: none; }
.cp-subtabs button { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cp-line); background: var(--cp-surface); font: 600 13px/1 Inter, system-ui, sans-serif; color: var(--cp-muted); cursor: pointer; }
.cp-subtabs button[aria-current="page"] { background: var(--cp-accent-soft); border-color: color-mix(in srgb, var(--cp-accent) 55%, var(--cp-line)); color: var(--cp-accent-ink); }
.cp-main { padding-block: 28px 96px; }
@media (min-width: 640px) { .cp-main { padding-bottom: 40px; } }

/* ---- Abschnitt: Überschrift + Erklärung nebeneinander ---- */
.cp-intro { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-bottom: 16px; }
.cp-intro h2 { font: 600 24px/1.2 var(--f-display); letter-spacing: -.012em; margin: 0; color: var(--cp-text); }
.cp-intro p { margin: 0; color: var(--cp-muted); max-width: 70ch; font-size: 14.5px; }
.cp-intro .cp-intro-act { margin-left: auto; }

/* ---- Bausteine ---- */
.cp-panel { background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: 16px; box-shadow: var(--cp-shadow); }
.cp-panel-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--cp-line); }
.cp-panel-h b { font: 600 15px/1.2 var(--f-display); color: var(--cp-text); }
.cp-panel-h .cp-crumb { color: var(--cp-faint); font-size: 13px; }
.cp-panel-b { padding: 16px; }
.cp-lbl { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-faint); }
.cp-pill { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--cp-surface-2); color: var(--cp-muted); border: 1px solid var(--cp-line); }
.cp-pill.ok { background: var(--cp-ok-soft); color: var(--cp-ok); border-color: transparent; }
.cp-pill.warn { background: var(--cp-warn-soft); color: var(--cp-warn); border-color: transparent; }
.cp-pill.accent { background: var(--cp-accent-soft); color: var(--cp-accent-ink); border-color: transparent; }
.cp-note { font-size: 12.5px; color: var(--cp-muted); }
.cp-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cp-line-strong); background: var(--cp-surface); color: var(--cp-text); border-radius: 10px; padding: 7px 12px; font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.cp-btn:hover { border-color: var(--cp-accent); }
.cp-btn:disabled { opacity: .5; cursor: default; }
.cp-btn.primary { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; }
.cp-btn.primary:hover { background: var(--cp-accent-strong); }
.cp-btn.danger { color: var(--cp-danger); }
.cp-sw { position: relative; width: 40px; height: 23px; flex-shrink: 0; border-radius: 999px; border: 0; background: var(--cp-line-strong); cursor: pointer; transition: background .15s; }
.cp-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.cp-sw[aria-checked="true"] { background: var(--cp-ok); }
.cp-sw[aria-checked="true"]::after { transform: translateX(17px); }
.cp-sw:focus-visible, .cp-btn:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; }
/* Farbfelder (Akzentfarbe) */
.cp-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cp-swatch { width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--c); border: 3px solid var(--cp-surface); box-shadow: 0 0 0 1px var(--cp-line-strong); cursor: pointer; position: relative; display: inline-block; }
.cp-swatch.on { box-shadow: 0 0 0 2px var(--c); }
.cp-swatch.custom { background: conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #d946ef, #ef4444); overflow: hidden; }
.cp-swatch.custom.on { background: var(--c); }
.cp-swatch.custom input { position: absolute; inset: -8px; opacity: 0; width: 60px; height: 60px; cursor: pointer; }
.cp-swatch:focus-visible, .cp-swatch:has(input:focus-visible) { outline: 2px solid var(--cp-accent); outline-offset: 3px; }
.cp-tg { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; padding: 6px 0; }

/* Benachrichtigungen */
.cp-ncards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; align-items: start; }
.cp-ncard { border: 1px solid var(--cp-line); border-radius: 14px; padding: 12px; background: var(--cp-surface); }
.cp-ncard h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font: 600 15px/1.2 var(--f-display); }
.cp-dev { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--cp-line); border-radius: 12px; font-size: 14px; }
.cp-dev small { display: block; color: var(--cp-faint); font-size: 12px; }
.cp-dev .grow { flex: 1; min-width: 0; }
.cp-locked { font-size: 12.5px; color: var(--cp-faint); border: 1px dashed var(--cp-line-strong); border-radius: 12px; padding: 10px 12px; }
.cp-time { border: 1px solid var(--cp-line-strong); border-radius: 9px; background: var(--cp-surface); color: var(--cp-text); padding: 5px 8px; font: 500 14px var(--f-mono); }

/* Heute */
.cp-card { background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: 16px; box-shadow: var(--cp-shadow); }
.cp-card-h { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px; }
.cp-card-h .cp-lbl { color: var(--cp-muted); }
.cp-apps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cp-app { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; text-align: left; border-radius: 16px; background: var(--cp-surface); border: 1px solid var(--cp-line); box-shadow: var(--cp-shadow); cursor: pointer; transition: transform .16s ease, border-color .16s ease; }
.cp-app:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cp-accent) 45%, var(--cp-line)); }
.cp-app b { font: 600 16px/1.2 var(--f-display); color: var(--cp-text); }
.cp-app .cp-lbl { margin-top: -6px; }
.cp-app .cp-go { font-size: 12.5px; font-weight: 600; color: var(--cp-accent-ink); opacity: 0; transition: opacity .16s; }
.cp-app:hover .cp-go, .cp-app:focus-visible .cp-go { opacity: 1; }
.cp-badge { position: absolute; top: 14px; right: 14px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #e11d48; color: #fff; font: 700 11px/20px var(--f-mono); /* AA: weiß auf #e11d48 = 4,7:1 */ text-align: center; }
.cp-strip { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.cp-strip button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 8px; border-radius: 16px; background: var(--cp-surface); border: 1px solid var(--cp-line); text-align: center; font: 600 12.5px/1.2 Inter, system-ui, sans-serif; color: var(--cp-text); cursor: pointer; }
.cp-strip button:hover { border-color: color-mix(in srgb, var(--cp-accent) 45%, var(--cp-line)); }
.cp-strip .cp-badge { top: 6px; right: 6px; }
@media (prefers-reduced-motion: reduce) { .cp-app, .cp-sw, .cp-sw::after { transition: none; } .cp-app:hover { transform: none; } }

/* Handy-Leiste unten: voll deckend (beim Milchglas schimmerten Karten-Überschriften durch) */
.cp-v3 #cockpit-bottom-nav > nav { background: var(--cp-surface); border-top: 1px solid var(--cp-line); box-shadow: 0 -6px 18px rgba(15, 23, 42, .06); }

/* ---- Bisherige Tailwind-Bausteine in den neuen Look ziehen (gilt nur im Cockpit) ---- */
.cp-v3 .bg-white.rounded-2xl, .cp-v3 .bg-white.rounded-3xl { background: var(--cp-surface); border-color: var(--cp-line) !important; box-shadow: var(--cp-shadow); }
.cp-v3 .dark\:bg-slate-900 { --tw-bg-opacity: 1; }
html.dark .cp-v3 .dark\:bg-slate-900.rounded-2xl { background: var(--cp-surface); }
.cp-v3 .bg-blue-600 { background-color: var(--cp-accent) !important; }
.cp-v3 .hover\:bg-blue-700:hover { background-color: var(--cp-accent-strong) !important; }
.cp-v3 .text-blue-600, html.dark .cp-v3 .dark\:text-blue-400 { color: var(--cp-accent-ink) !important; }
.cp-v3 .border-blue-500, .cp-v3 .hover\:border-blue-500:hover, .cp-v3 .focus\:border-blue-500:focus, html.dark .cp-v3 .dark\:hover\:border-blue-500:hover { border-color: var(--cp-accent) !important; }
.cp-v3 .bg-blue-50, html.dark .cp-v3 .dark\:bg-blue-900\/30 { background-color: var(--cp-accent-soft) !important; }
.cp-v3 .peer:checked ~ .peer-checked\:bg-blue-600 { background-color: var(--cp-ok) !important; }
.cp-v3 h2.font-black, .cp-v3 h3.font-black { font-family: var(--f-display); font-weight: 600; letter-spacing: -.012em; }

/* ---------- Personenfarbe (Verwaltung): gewählt = Ring + Häkchen, in hell und dunkel gut sichtbar ---------- */
.cp-cdot { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; background: var(--c); color: #fff; display: inline-grid; place-items: center; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.cp-cdot:hover { transform: scale(1.12); }
.cp-cdot:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 3px; }
.cp-cdot.on { box-shadow: 0 0 0 2px var(--cp-surface), 0 0 0 4px var(--cp-text); }
.cp-cdot.none { background: transparent; border: 1.5px dashed var(--cp-line-strong); color: var(--cp-faint); font-size: 11px; font-weight: 800; }
.cp-cdot.none.on { color: var(--cp-text); border-style: solid; }
/* Akzent „Wie meine Farbe“: kleiner Personen-Punkt im Farbfeld */
.cp-swatch.mine { position: relative; }
.cp-swatch.mine::after { content: ''; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15); }

/* ---------- Kontakte: gemeinsamer Baustein (js/_core/contacts/contacts.css), hier nur die Cockpit-Farben ---------- */
.ctb, .ctl { --ctb-surface: var(--cp-surface); --ctb-surface-2: var(--cp-surface-2); --ctb-line: var(--cp-line); --ctb-line-strong: var(--cp-line-strong);
  --ctb-text: var(--cp-text); --ctb-muted: var(--cp-muted); --ctb-faint: var(--cp-faint); --ctb-accent: var(--cp-accent); --ctb-accent-soft: var(--cp-accent-soft);
  --ctb-accent-ink: var(--cp-accent-ink); --ctb-danger: var(--cp-danger); --ctb-ok: var(--cp-ok); --ctb-shadow: var(--cp-shadow);
  --ctb-font: Inter, system-ui, sans-serif; --ctb-display: var(--f-display, Inter), system-ui, sans-serif; --ctb-mono: var(--f-mono, ui-monospace, monospace); }

/* „Ansicht als“ (Benachrichtigungen): Personen als Segment-Knöpfe */
.cp-asbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cp-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--cp-surface-2); border: 1px solid var(--cp-line); }
.cp-seg button { border: 0; background: none; padding: 6px 11px; border-radius: 8px; font: 600 13px/1.2 Inter, system-ui, sans-serif; color: var(--cp-muted); cursor: pointer; }
.cp-seg button[aria-pressed="true"] { background: var(--cp-surface); color: var(--cp-text); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.cp-sw:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Entwicklung (views/dev.js): zentrale Liste + Freigabe-Links ---- */
.dv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.dv-grow { flex: 1; }
.dv-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--cp-surface-2); border: 1px solid var(--cp-line); }
.dv-seg button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 7px 12px; border-radius: 8px; font: 600 13px/1 Inter, system-ui, sans-serif; color: var(--cp-muted); cursor: pointer; }
.dv-seg button[aria-selected="true"] { background: var(--cp-surface); color: var(--cp-text); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.dv-n { font: 600 11px/1 var(--f-mono); color: var(--cp-faint); }
.dv-err { padding: 10px 14px; border-radius: 12px; background: var(--cp-warn-soft); color: var(--cp-warn); font-size: 13.5px; margin-bottom: 12px; }
.dv-counts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.dv-count { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--cp-line); background: var(--cp-surface); cursor: pointer; text-align: left; color: var(--cp-text); }
.dv-count b { font: 600 22px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.dv-count span { font-size: 12.5px; color: var(--cp-muted); }
.dv-count.on { border-color: var(--cp-accent); background: var(--cp-accent-soft); }
.dv-count:focus-visible, .dv-apps button:focus-visible, .dv-head:focus-visible, .dv-seg button:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; }
.dv-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.dv-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border-radius: 11px; border: 1px solid var(--cp-line); background: var(--cp-surface); color: var(--cp-faint); }
.dv-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 14px/1 Inter, system-ui, sans-serif; color: var(--cp-text); }
.dv-sel { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 4px 0 11px; border-radius: 11px; border: 1px solid var(--cp-line); background: var(--cp-surface); font-size: 12.5px; color: var(--cp-faint); }
.dv-sel select { border: 0; background: none; font: 600 13px/1 Inter, system-ui, sans-serif; color: var(--cp-text); padding: 6px 4px; cursor: pointer; max-width: 170px; }
.dv-apps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dv-apps button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; border: 1px solid var(--cp-line); background: var(--cp-surface); font: 600 12.5px/1 Inter, system-ui, sans-serif; color: var(--cp-muted); cursor: pointer; }
.dv-apps button:first-child { padding-left: 11px; }
.dv-apps button.on { border-color: var(--cp-accent); background: var(--cp-accent-soft); color: var(--cp-accent-ink); }
.dv-suite { display: inline-grid; place-items: center; border-radius: 30%; background: linear-gradient(135deg, #64748b, #334155); color: #fff; flex-shrink: 0; }
.dv-group, .dv-wait, .dv-new { margin-bottom: 14px; overflow: hidden; }
.dv-wait { border-color: color-mix(in srgb, var(--cp-warn) 40%, var(--cp-line)); }
.dv-rows > * + * { border-top: 1px solid var(--cp-line); }
.dv-row.done .dv-t b { color: var(--cp-muted); font-weight: 600; }
.dv-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 16px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--cp-text); }
.dv-head:hover { background: var(--cp-surface-2); }
.dv-head > svg:last-child { color: var(--cp-faint); transition: transform .15s; flex-shrink: 0; }
.dv-row.open .dv-head > svg:last-child { transform: rotate(90deg); }
.dv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dv-t b { font-size: 14px; font-weight: 650; line-height: 1.35; }
.dv-t span { font-size: 12px; color: var(--cp-faint); }
.dv-prio { color: var(--cp-warn); display: inline-flex; }
.dv-ans { color: var(--cp-ok); display: inline-flex; }
.dv-st { flex-shrink: 0; min-width: 96px; text-align: center; font: 600 11px/1 var(--f-mono); letter-spacing: .03em; padding: 5px 8px; border-radius: 999px; background: var(--cp-surface-2); color: var(--cp-muted); border: 1px solid var(--cp-line); }
.dv-st-live { background: var(--cp-ok-soft); color: var(--cp-ok); border-color: transparent; }
.dv-st-arbeit { background: var(--cp-accent-soft); color: var(--cp-accent-ink); border-color: transparent; }
.dv-st-geplant { background: color-mix(in srgb, #6366f1 12%, transparent); color: #4f46e5; border-color: transparent; }
html.dark .dv-st-geplant { color: #a5b4fc; }
.dv-st-idee { background: color-mix(in srgb, #0ea5e9 11%, transparent); color: #0369a1; border-color: transparent; }
html.dark .dv-st-idee { color: #7dd3fc; }
.dv-st-wartet { background: var(--cp-warn-soft); color: var(--cp-warn); border-color: transparent; }
.dv-more { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; background: none; font: 600 13px/1 Inter, system-ui, sans-serif; color: var(--cp-muted); cursor: pointer; text-align: left; }
.dv-more:hover { color: var(--cp-text); background: var(--cp-surface-2); }
.dv-empty { padding: 16px; text-align: center; color: var(--cp-faint); font-size: 13.5px; }
.dv-edit { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--cp-surface-2); border-top: 1px solid var(--cp-line); }
.dv-detail a { color: var(--cp-accent, #2563eb); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.dv-detail { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--cp-text); white-space: pre-line; max-width: 80ch; }
.dv-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cp-accent-ink); text-decoration: none; }
.dv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.dv-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--cp-faint); min-width: 0; }
.dv-f > span { font-weight: 600; }
.dv-f input, .dv-f select, .dv-f textarea { width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--cp-line-strong); background: var(--cp-surface); color: var(--cp-text); font: 14px/1.4 Inter, system-ui, sans-serif; }
.dv-f textarea { resize: vertical; min-height: 44px; }
.dv-f input:focus, .dv-f select:focus, .dv-f textarea:focus { outline: 2px solid var(--cp-accent); border-color: transparent; }
.dv-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--cp-text); line-height: 1.4; }
.dv-check input { margin-top: 2px; accent-color: var(--cp-accent); width: 16px; height: 16px; flex-shrink: 0; }
.dv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dv-new .cp-panel-b { display: flex; flex-direction: column; gap: 10px; }
.dv-share-form { display: flex; flex-direction: column; gap: 12px; }
.dv-fs { border: 1px solid var(--cp-line); border-radius: 12px; padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dv-fs legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--cp-muted); }
.dv-chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; }
.dv-token { padding: 12px; border-radius: 12px; background: var(--cp-ok-soft); display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.dv-token-row { display: flex; gap: 8px; }
.dv-token-row input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--cp-line-strong); background: var(--cp-surface); color: var(--cp-text); font: 13px/1.3 var(--f-mono); }
.dv-h3 { font: 600 16px/1.2 var(--f-display); margin: 22px 0 10px; color: var(--cp-text); }
.dv-shares { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.dv-share { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.dv-share-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dv-share-h b { font: 600 15px/1.25 var(--f-display); min-width: 0; overflow-wrap: anywhere; }
.dv-share .dv-st { min-width: 0; }
.dv-inline { display: inline-flex; align-items: center; gap: 6px; }
.dv-inline input { padding: 6px 8px; border-radius: 9px; border: 1px solid var(--cp-line-strong); background: var(--cp-surface); color: var(--cp-text); font: 13px/1 Inter, system-ui, sans-serif; }
@media (max-width: 760px) {
  .dv-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-st { min-width: 0; }
  .dv-head { gap: 10px; padding: 11px 12px; align-items: flex-start; }
  .dv-head .dv-st { margin-top: 1px; }
  .dv-edit { padding: 4px 12px 14px; }
  .dv-shares { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .dv-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-grid { grid-template-columns: 1fr; }
  .dv-sel { flex: 1 1 calc(50% - 8px); }
  .dv-sel select { max-width: none; flex: 1; }
}

/* Tablet (640–1023 px): Platz für die Seitenleiste (w-20 = 80 px). .cp-wrap setzte padding-inline und überschrieb
   sm:pl-24 – dadurch lag die Leiste über dem Inhalt, und der Kopf deckte ihren ersten Punkt ab (Rundgang 11./12.10.2026). */
@media (min-width: 640px) and (max-width: 1023.98px) {
  body.cp-v3 .cp-top > .cp-wrap, body.cp-v3 main.cp-main { padding-left: 96px; }
  /* view-transition-name (theme-v2.css) macht den Halter zur eigenen Ebene – deshalb die Ebene selbst anheben */
  body.cp-v3 #cockpit-nav-rail { position: relative; z-index: 40; }
}
.dv-f[hidden] { display: none; }
@media (max-width: 520px) { #dev-root .cp-panel-h { flex-wrap: wrap; } #dev-root .cp-panel-h .cp-note { width: 100%; } }

/* Als Nächstes (Entwicklung) */
.dv-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
.dv-next-col { overflow: hidden; display: flex; flex-direction: column; }
.dv-next-col ol { list-style: none; margin: 0; padding: 0; }
.dv-next-col li + li { border-top: 1px solid var(--cp-line); }
.dv-next-i { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--cp-text); }
.dv-next-i:hover { background: var(--cp-surface-2); }
.dv-next-i:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: -2px; }
.dv-next-i > svg:last-child { color: var(--cp-faint); flex-shrink: 0; }
.dv-next-n { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; font: 600 12px/1 var(--f-mono); background: var(--cp-accent-soft); color: var(--cp-accent-ink); }
.dv-rank { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px; display: inline-grid; place-items: center; font: 600 11px/1 var(--f-mono); background: var(--cp-accent-soft); color: var(--cp-accent-ink); flex-shrink: 0; }
.dv-row.dv-flash { animation: dv-flash 1.6s ease-out; }
@keyframes dv-flash { 0%, 40% { background: var(--cp-accent-soft); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .dv-row.dv-flash { animation: none; } }
@media (max-width: 760px) { .dv-next { grid-template-columns: 1fr; } }
/* Klapplisten im Dunkelmodus lesbar: native Bedienelemente dunkel zeichnen */
html.dark { color-scheme: dark; }
.dv-sel select option, .dv-f select option { background-color: var(--cp-surface); color: var(--cp-text); }

/* Entwicklung: „Neu von Claude“ + Verlauf (migration_16) */
.dv-news { margin-bottom: 14px; overflow: hidden; }
.dv-news .cp-panel-h { flex-wrap: wrap; }
.dv-news-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 9px 14px; border: 1px dashed var(--cp-line-strong); border-radius: 12px; font-size: 13px; color: var(--cp-muted); }
.dv-news-empty > svg { color: var(--cp-ok); flex-shrink: 0; }
.dv-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--cp-accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dv-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 12px; }
.dv-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font: 600 12px/1.4 Inter, system-ui, sans-serif; background: var(--cp-surface-2); color: var(--cp-muted); }
.dv-log { display: flex; flex-direction: column; }
.dv-log-row { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; border: 0; border-top: 1px solid var(--cp-line); background: none; text-align: left; color: var(--cp-text); font: inherit; }
button.dv-log-row { cursor: pointer; }
button.dv-log-row:hover { background: var(--cp-surface-2); }
button.dv-log-row:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: -2px; }
.dv-log-row > svg:last-child { color: var(--cp-faint); flex-shrink: 0; margin-top: 4px; }
.dv-log-row .dv-t em { font-style: normal; font-size: 13px; line-height: 1.45; color: var(--cp-text); margin-top: 2px; white-space: pre-line; }
.dv-log-st { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--cp-faint); }
.dv-log-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--cp-surface-2); color: var(--cp-muted); }
.dv-log-erledigt.dv-log-ic, .dv-chip.dv-log-erledigt { background: var(--cp-ok-soft); color: var(--cp-ok); }
.dv-log-neu.dv-log-ic, .dv-chip.dv-log-neu { background: var(--cp-accent-soft); color: var(--cp-accent-ink); }
.dv-log-status.dv-log-ic, .dv-chip.dv-log-status { background: var(--cp-warn-soft); color: var(--cp-warn); }
.dv-log-day { margin-bottom: 12px; overflow: hidden; }
.dv-newdot { flex-shrink: 0; padding: 2px 7px; border-radius: 999px; font: 700 10.5px/1.4 Inter, system-ui, sans-serif; letter-spacing: .02em; background: var(--cp-accent); color: #fff; }

/* Tabellen in den Einstellungen (KI-Verbrauch) */
.cp-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.cp-table th { text-align: left; font: 700 10.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-faint); padding: 6px 8px; border-bottom: 1px solid var(--cp-line); white-space: nowrap; }
.cp-table td { padding: 7px 8px; border-bottom: 1px solid var(--cp-line); color: var(--cp-text); }
.cp-table .r { text-align: right; }
.cp-table tr:last-child td { border-bottom: 0; }

/* KI-Übersicht (ohne KI / mit KI / Anbieter) */
.cp-ai-ov td { vertical-align: top; }
.cp-ai-ov .cp-ai-app { white-space: nowrap; }
.cp-ai-ov .cp-ai-app b { margin-left: 6px; vertical-align: middle; }
.cp-ai-ov .cp-ai-app .cp-note { display: block; margin-top: 2px; }
.cp-ai-ov .cp-ai-txt { min-width: 200px; color: var(--cp-muted); font-size: 12.5px; line-height: 1.45; }
.cp-ai-st { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12px; font-weight: 600; }
.cp-ai-st.ok { color: var(--cp-ok, #16a34a); }
.cp-ai-st.warn { color: var(--cp-warn, #b45309); }
.cp-ai-st.no { color: var(--cp-faint); }