/* ==========================================================================
   LUMEN – App-Layout. Baut ausschließlich auf design-system/tokens.css auf:
   Farben/Radien/Schatten/Motion nur über var(--token); Komponenten aus .ns-*
   abgeleitet. Keine erfundenen Werte (AGENTS.md §9).
   ========================================================================== */

/* ---- Lokale Schriften (offline, lokal-first statt Google-CDN) ------------ */
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/design-system/fonts/InstrumentSerif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/design-system/fonts/InstrumentSerif-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/design-system/fonts/InstrumentSerif-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/design-system/fonts/InstrumentSerif-400i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/design-system/fonts/JetBrainsMono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/design-system/fonts/JetBrainsMono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/design-system/fonts/JetBrainsMono-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/design-system/fonts/JetBrainsMono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/design-system/fonts/JetBrainsMono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/design-system/fonts/JetBrainsMono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/design-system/fonts/JetBrainsMono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}

/* ---- Grundlayout --------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; }

.wrap { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 28px 32px 80px; }

/* Hintergrund: Punkteraster + zwei sanfte Glow-Blobs (Marken-Bühne) */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg__grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(38,38,44,0.25) 1.2px, transparent 1.2px),
    linear-gradient(rgba(38,38,44,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,38,44,0.07) 1px, transparent 1px);
  background-size: 28px 28px, 140px 140px, 140px 140px;
  opacity: 0.5;
}
.bg__blob { position: absolute; border-radius: 50%; filter: blur(12px); }
.bg__blob--wine { width: 620px; height: 620px; left: -180px; top: -140px;
  background: radial-gradient(circle, var(--glow-wine), rgba(140,36,68,0) 62%);
  animation: nsPulse 7s ease-in-out infinite; }
.bg__blob--rose { width: 520px; height: 520px; right: -160px; bottom: -180px;
  background: radial-gradient(circle, rgba(216,142,162,0.24), rgba(216,142,162,0) 60%);
  animation: nsPulse 9s ease-in-out 1s infinite; }

/* ---- Topbar -------------------------------------------------------------- */
.appbar { position: sticky; top: 0; z-index: 20; padding: 14px 32px 0; }
.appbar__inner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto;
  padding: 12px 14px 12px 22px; border-radius: var(--radius-pill);
  background: var(--gradient-nav-dark);
  -webkit-backdrop-filter: var(--blur-nav); backdrop-filter: var(--blur-nav);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: var(--shadow-nav);
}
.appbar__brand { display: flex; align-items: baseline; gap: 12px; margin-right: auto; text-decoration: none; }
.appbar__logo { font-family: var(--font-serif); font-weight: 400; font-size: 26px; color: #fff; letter-spacing: 0.04em; }
.appbar__kicker { font-size: var(--fs-tag); letter-spacing: var(--ls-tag); color: var(--rose-300); }
.appbar__actions { display: flex; align-items: center; gap: 10px; }

/* ---- Buttons (auf .ns-* aufbauend, plus schlanke Varianten) -------------- */
.btn { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-body-sm);
  cursor: pointer; border: none; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: transform var(--ease-hover), box-shadow var(--ease-hover), background var(--ease-hover); }
.btn--sm { font-size: 12px; }
.btn-primary { color: #fff; background: var(--gradient-primary); padding: 11px 20px;
  border-radius: var(--radius-button-sm); border: 1px solid rgba(255,255,255,0.4); box-shadow: var(--shadow-button); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-glass { color: var(--ink); background: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: var(--blur-button); backdrop-filter: var(--blur-button);
  padding: 10px 18px; border-radius: var(--radius-button-sm); border: 1px solid rgba(255,255,255,0.7); }
.btn-glass:hover { transform: translateY(-2px); background: rgba(255,255,255,0.6); }
.btn-ghost { color: var(--ink-2); background: transparent; padding: 8px 12px; border-radius: var(--radius-button-sm);
  border: 1px solid transparent; }
.btn-ghost:hover { background: rgba(38,38,44,0.06); }
.btn-danger { color: #fff; background: linear-gradient(135deg, #b23a3a, #7a1f1f); padding: 10px 18px;
  border-radius: var(--radius-button-sm); border: 1px solid rgba(255,255,255,0.3); }
.btn-danger:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---- Seitenkopf je View -------------------------------------------------- */
.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.view-head__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); color: var(--ink); margin: 0; line-height: 1.1; }
.view-head__title em { color: var(--accent-em); font-style: italic; }
.kicker { display: block; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); color: var(--accent-text); margin-bottom: 10px; }
.muted { color: var(--ink-faint-65); }

/* ---- Toolbar / Filter ---------------------------------------------------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar__group { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.6); }
.chip { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); cursor: pointer;
  padding: 7px 14px; border-radius: var(--radius-pill); border: none; background: transparent; transition: background .25s, color .25s; }
.chip:hover { background: rgba(140,36,68,0.08); }
.chip[aria-pressed="true"] { background: var(--gradient-primary); color: #fff; }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Badges: Status / Priorität / Blocker / Export ----------------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: var(--fs-tag); letter-spacing: 0.04em; color: var(--ink-2);
  padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(38,38,44,0.05); border: 1px solid rgba(38,38,44,0.14); white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-faint-45); }
.dot--aktiv { background: var(--accent); }
.dot--geplant { background: var(--ink-faint-45); }
.dot--pausiert { background: var(--traffic-yellow); }
.dot--abgeschlossen { background: var(--traffic-green); }
.dot--archiviert { background: rgba(38,38,44,0.3); }

.badge--prio-hoch { color: var(--accent-text); background: rgba(140,36,68,0.08); border-color: rgba(140,36,68,0.28); }
.badge--blocker { color: #fff; background: linear-gradient(135deg, #c0455b, #8c2444); border-color: rgba(255,255,255,0.25); }
.badge--export-aktuell { color: var(--ink-2); }
.badge--export-aktuell .dot { background: var(--traffic-green); }
.badge--export-veraltet .dot { background: var(--traffic-yellow); }
.badge--export-nie .dot { background: var(--ink-faint-45); }

/* ---- Dashboard-Grid & Projektkarten -------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gap-cards); }
.pcard { position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--gradient-glass-light); -webkit-backdrop-filter: var(--blur-card); backdrop-filter: var(--blur-card);
  border: 1px solid rgba(255,255,255,0.65); box-shadow: var(--shadow-card-light); border-radius: var(--radius-card);
  padding: 22px 22px 18px; cursor: pointer; text-decoration: none; color: inherit;
  transition: transform 0.5s var(--spring), box-shadow 0.5s; }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 30px 64px rgba(50,12,30,0.2), 0 0 60px rgba(140,36,68,0.22), inset 0 1px 0 rgba(255,255,255,0.75); }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pcard--blocked { border-color: rgba(192,69,91,0.5); }
.pcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pcard__name { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h3-card); line-height: 1.1; color: var(--ink); margin: 0; }
.pcard__area { font-size: var(--fs-tag); letter-spacing: var(--ls-tag); color: var(--ink-faint-65); margin-top: 4px; }
.pcard__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pcard__next { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--ink-2); }
.pcard__next .label { display: block; font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--accent-text); margin-bottom: 3px; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; padding-top: 12px; border-top: 1px solid rgba(38,38,44,0.1); }
.pcard__tasks { font-size: 12px; color: var(--ink-faint-65); }

/* ---- Empty state --------------------------------------------------------- */
.empty { text-align: center; padding: 64px 24px; }
.empty__title { font-family: var(--font-serif); font-size: 32px; color: var(--ink); margin: 0 0 10px; }
.empty p { color: var(--ink-2); margin: 0 auto 22px; max-width: 40ch; line-height: 1.7; }

/* ---- Projektdetail ------------------------------------------------------- */
.detail-head { margin-bottom: 22px; }
.backlink { font-size: 12px; color: var(--accent-text); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; margin-bottom: 12px; }
.backlink:hover { text-decoration: underline; }
.detail-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.detail-title { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); color: var(--ink); margin: 0; line-height: 1.05; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.panel { background: var(--gradient-glass-light); -webkit-backdrop-filter: var(--blur-card); backdrop-filter: var(--blur-card);
  border: 1px solid rgba(255,255,255,0.65); box-shadow: var(--shadow-card-light); border-radius: var(--radius-card);
  padding: 22px; margin-bottom: 20px; }
.panel__label { font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--accent-text); margin-bottom: 8px; text-transform: uppercase; }
.panel p { color: var(--ink-2); line-height: 1.7; margin: 0; white-space: pre-wrap; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* ---- Kanban -------------------------------------------------------------- */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.col { background: rgba(255,255,255,0.34); border: 1px solid rgba(255,255,255,0.55); border-radius: var(--radius-card);
  padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 140px; transition: background .25s, box-shadow .25s; }
.col--over { background: rgba(140,36,68,0.07); box-shadow: inset 0 0 0 2px rgba(140,36,68,0.35); }
.col__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 10px; border-bottom: 1px solid rgba(38,38,44,0.1); }
.col__title { font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); color: var(--ink); text-transform: uppercase; }
.col__count { font-size: 12px; color: var(--ink-faint-65); }
.col__list { display: flex; flex-direction: column; gap: 10px; min-height: 30px; }

.tcard { background: var(--gradient-card-dark); color: rgba(247,235,240,0.9); border: 1px solid rgba(223,168,188,0.34);
  box-shadow: var(--shadow-card-dark); border-radius: 16px; padding: 13px 14px; cursor: grab;
  display: flex; flex-direction: column; gap: 9px; transition: transform .25s var(--spring), box-shadow .25s; }
.tcard:hover { transform: translateY(-2px); }
.tcard:focus-visible { outline: 2px solid var(--rose-400); outline-offset: 2px; }
.tcard--dragging { opacity: 0.5; cursor: grabbing; }
.tcard--blocked { border-color: rgba(255,95,87,0.6); box-shadow: var(--shadow-card-dark), 0 0 0 1px rgba(255,95,87,0.3); }
.tcard--done .tcard__title { text-decoration: line-through; opacity: 0.7; }
.tcard__title { font-size: var(--fs-body-sm); line-height: 1.45; color: #fff; }
.tcard__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tcard__tag { font-size: 10px; letter-spacing: 0.1em; padding: 2px 8px; border-radius: var(--radius-pill);
  color: var(--rose-200); background: rgba(223,168,188,0.13); border: 1px solid rgba(223,168,188,0.4); }
.tcard__tag--hoch { color: #fff; background: rgba(216,135,160,0.3); }
.tcard__tag--blocker { color: #fff; background: rgba(255,95,87,0.32); border-color: rgba(255,95,87,0.6); }
.tcard__due { font-size: 10px; color: var(--rose-200); letter-spacing: 0.06em; }
.tcard__actions { display: flex; gap: 4px; margin-left: auto; }
.icon-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: rgba(247,235,240,0.85);
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .2s; }
.icon-btn:hover { background: rgba(255,255,255,0.18); }
.icon-btn:focus-visible { outline: 2px solid var(--rose-400); outline-offset: 2px; }
.col__add { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); background: transparent;
  border: 1px dashed rgba(38,38,44,0.25); border-radius: 12px; padding: 9px; cursor: pointer; transition: background .2s, border-color .2s; }
.col__add:hover { background: rgba(140,36,68,0.06); border-color: rgba(140,36,68,0.4); }

/* ---- Formulare / Inputs -------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--accent-text); text-transform: uppercase; }
.input, .select, .textarea {
  font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--ink);
  background: rgba(255,255,255,0.65); border: 1px solid rgba(38,38,44,0.18); border-radius: var(--radius-button-sm);
  padding: 10px 12px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.textarea { resize: vertical; min-height: 84px; line-height: 1.6; text-transform: none; letter-spacing: normal; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(140,36,68,0.18); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.checkbox { flex-direction: row; align-items: center; gap: 8px; text-transform: none; letter-spacing: normal;
  font-size: var(--fs-body-sm); color: var(--ink-2); }
.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); }

/* Fällig-Feld + Schnellwahl (Heute / Morgen / In 3 / In 7 Tagen) */
.field { display: flex; flex-direction: column; gap: 8px; }
.quickdates { display: flex; flex-wrap: wrap; gap: 6px; }
.quickdate { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); cursor: pointer;
  background: rgba(255,255,255,0.5); border: 1px solid rgba(38,38,44,0.18); border-radius: var(--radius-pill);
  padding: 5px 11px; transition: background .2s, border-color .2s, color .2s; }
.quickdate:hover { background: rgba(140,36,68,0.08); border-color: rgba(140,36,68,0.32); color: var(--accent-text); }
.quickdate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Modal --------------------------------------------------------------- */
.modal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(31,15,24,0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal { width: 100%; max-width: 520px; max-height: 88vh; overflow: auto;
  background: var(--gradient-glass-light); -webkit-backdrop-filter: var(--blur-card); backdrop-filter: var(--blur-card);
  border: 1.5px solid rgba(255,255,255,0.7); box-shadow: var(--shadow-hero); border-radius: var(--radius-hero); padding: 26px; }
.modal__title { font-family: var(--font-serif); font-weight: 400; font-size: 28px; color: var(--ink); margin: 0 0 4px; }
.modal__sub { font-size: 12px; color: var(--ink-faint-65); margin: 0 0 18px; }

/* ---- Toast / Undo -------------------------------------------------------- */
#toast-root { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: var(--fs-body-sm);
  color: var(--term-text); background: rgba(36,26,34,0.94); -webkit-backdrop-filter: var(--blur-terminal); backdrop-filter: var(--blur-terminal);
  border: 1px solid rgba(255,255,255,0.18); box-shadow: var(--shadow-terminal); border-radius: var(--radius-pill); padding: 11px 12px 11px 20px; }
.toast__undo { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--rose-300);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(223,168,188,0.4); border-radius: var(--radius-pill);
  padding: 6px 14px; cursor: pointer; }
.toast__undo:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* ---- Diverses ------------------------------------------------------------ */
.spinner { text-align: center; color: var(--ink-faint-65); padding: 60px; font-size: var(--fs-body-sm); }
.export-note { font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.export-note code { background: rgba(38,38,44,0.08); padding: 1px 6px; border-radius: 6px; }

/* ==========================================================================
   Phase 2 – RAG-Ampel, Fortschritt, Tags, Querschnitts-Sektionen
   ========================================================================== */
.health-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.health-dot--rot { background: var(--traffic-red); box-shadow: 0 0 0 3px rgba(255,95,87,0.18); }
.health-dot--amber { background: var(--traffic-yellow); box-shadow: 0 0 0 3px rgba(254,188,46,0.18); }
.health-dot--gruen { background: var(--traffic-green); box-shadow: 0 0 0 3px rgba(40,200,64,0.16); }
.badge--health { gap: 8px; }

.progress { height: 6px; border-radius: var(--radius-pill); background: rgba(38,38,44,0.1); overflow: hidden; }
.progress__fill { height: 100%; background: var(--gradient-primary); border-radius: var(--radius-pill); transition: width 0.4s var(--spring); }
.pcard__progress { display: flex; flex-direction: column; gap: 5px; }
.pcard__progresslabel { font-size: 11px; color: var(--ink-faint-65); display: flex; justify-content: space-between; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--accent-text);
  background: rgba(140,36,68,0.08); border: 1px solid rgba(140,36,68,0.24); border-radius: var(--radius-pill); padding: 3px 9px; }

.focus-star { background: transparent; border: none; cursor: pointer; font-size: 17px; line-height: 1; color: var(--ink-faint-45); padding: 2px; }
.focus-star--on { color: var(--accent); }
.focus-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.pcard__top-right { display: flex; align-items: center; gap: 8px; }

.toolbar .select { width: auto; padding: 8px 12px; font-size: 12px; text-transform: none; letter-spacing: normal; }
.toolbar__sep { flex: 1; }

/* Querschnitts-Sektionen: Notizen / Entscheidungen / Risiken */
.sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 20px; }
.section { background: rgba(255,255,255,0.34); border: 1px solid rgba(255,255,255,0.55); border-radius: var(--radius-card); padding: 18px; }
.section__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.section__title { font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); color: var(--ink); text-transform: uppercase; }
.list { display: flex; flex-direction: column; gap: 8px; }
.list-item { background: rgba(255,255,255,0.5); border: 1px solid rgba(38,38,44,0.1); border-radius: 12px; padding: 10px 12px; font-size: var(--fs-body-sm); color: var(--ink-2); line-height: 1.5; }
.list-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.list-item__title { color: var(--ink); }
.list-item__meta { font-size: 10px; letter-spacing: 0.06em; color: var(--ink-faint-65); margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.list-empty { font-size: 12px; color: var(--ink-faint-65); }
.mini-btn { font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); background: rgba(140,36,68,0.08);
  border: 1px solid rgba(140,36,68,0.24); border-radius: var(--radius-pill); padding: 5px 12px; cursor: pointer; }
.mini-btn:hover { background: rgba(140,36,68,0.14); }
.mini-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.row-actions { display: flex; gap: 2px; flex: none; }
.link-btn { background: none; border: none; color: var(--ink-faint-65); cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 4px; }
.link-btn:hover { color: var(--accent-text); background: rgba(140,36,68,0.06); }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pill-mini { display: inline-block; font-size: 10px; letter-spacing: 0.06em; padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(38,38,44,0.06); border: 1px solid rgba(38,38,44,0.14); color: var(--ink-2); }
.pill-mini--accent { color: var(--accent-text); background: rgba(140,36,68,0.08); border-color: rgba(140,36,68,0.26); }
.detail-progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.detail-progress .progress { flex: 1; }
.detail-progress span { font-size: 12px; color: var(--ink-2); white-space: nowrap; }

/* ==========================================================================
   Bereichs-Navigation (Appbar) – Portfolio / Kalender / Persönlich
   ========================================================================== */
.viewnav { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); margin-right: 4px; }
.navlink { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-decoration: none;
  color: rgba(255,255,255,0.72); padding: 7px 13px; border-radius: var(--radius-pill); transition: background .2s, color .2s; }
.navlink:hover { background: rgba(255,255,255,0.12); color: #fff; }
.navlink--active { background: rgba(255,255,255,0.2); color: #fff; }
.navlink:focus-visible { outline: 2px solid var(--rose-400); outline-offset: 2px; }

/* ==========================================================================
   Kalender – Steuerleiste, Layout, Monat/Woche/Tag, Chips, Ohne-Termin-Streifen
   ========================================================================== */
.cbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cbar__nav { display: inline-flex; align-items: center; gap: 8px; }
.cbar__label { font-family: var(--font-serif); font-size: 22px; color: var(--ink); margin-left: 6px; white-space: nowrap; }
.cbar .select { width: auto; padding: 8px 12px; font-size: 12px; text-transform: none; letter-spacing: normal; }

.clayout { display: flex; gap: 18px; align-items: flex-start; }
.clayout__main { flex: 1; min-width: 0; }

/* Monatsraster */
.cmonth__wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; }
.cmonth__wd span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint-65); padding-left: 6px; }
.cmonth__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }

/* Wochen-/Tagesraster */
.cweek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cday-single { display: block; }

/* Tageszelle */
.cday { background: rgba(255,255,255,0.34); border: 1px solid rgba(255,255,255,0.55); border-radius: 14px;
  padding: 7px; min-height: 104px; display: flex; flex-direction: column; gap: 6px;
  transition: background .2s, box-shadow .2s; }
.cday--tall { min-height: 300px; }
.cday-single .cday--tall { min-height: 60vh; }
.cday--muted { opacity: 0.45; }
.cday--today { border-color: rgba(140,36,68,0.5); box-shadow: inset 0 0 0 1px rgba(140,36,68,0.32); }
.cday--over { background: rgba(140,36,68,0.08); box-shadow: inset 0 0 0 2px rgba(140,36,68,0.4); }
.cday__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.cday__wd { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint-65); }
.cday__num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.cday--today .cday__num { color: var(--accent-text); font-weight: 700; }
.cday__items { display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.cday__more { font-family: var(--font-mono); font-size: 10px; color: var(--accent-text); background: transparent;
  border: none; cursor: pointer; text-align: left; padding: 1px 2px; }
.cday__more:hover { text-decoration: underline; }

/* Aufgaben-Chip */
.cchip { display: flex; flex-direction: column; gap: 1px; position: relative;
  background: rgba(255,255,255,0.72); border: 1px solid rgba(38,38,44,0.16); border-radius: 9px;
  padding: 5px 8px; cursor: grab; transition: transform .15s var(--spring), box-shadow .2s, background .2s; }
.cchip:hover { transform: translateY(-1px); box-shadow: var(--shadow-card-light); }
.cchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cchip--dragging { opacity: 0.5; cursor: grabbing; }
.cchip__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--accent-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cchip__title { font-family: var(--font-mono); font-size: 11px; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cchip--personal { background: rgba(244,217,226,0.5); border-color: rgba(140,36,68,0.22); }
.cchip--personal .cchip__label { color: var(--accent-em); }
.cchip--overdue { border-color: rgba(255,95,87,0.6); background: rgba(255,95,87,0.1); }
.cchip--blocked { border-color: rgba(192,69,91,0.6); }
.cchip--done { opacity: 0.55; }
.cchip--done .cchip__title { text-decoration: line-through; }
.cchip__marks { display: flex; gap: 4px; margin-top: 3px; }
.cchip__mark { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; padding: 1px 5px; border-radius: var(--radius-pill); }
.cchip__mark--hoch { color: var(--accent-text); background: rgba(140,36,68,0.1); border: 1px solid rgba(140,36,68,0.26); }
.cchip__mark--blocker { background: rgba(255,95,87,0.16); }

/* Ohne-Termin-Streifen */
.crail { width: 240px; flex: none; background: rgba(255,255,255,0.34); border: 1px solid rgba(255,255,255,0.55);
  border-radius: var(--radius-card); padding: 14px; display: flex; flex-direction: column; gap: 10px;
  transition: background .2s, box-shadow .2s; align-self: stretch; }
.crail--over { background: rgba(140,36,68,0.08); box-shadow: inset 0 0 0 2px rgba(140,36,68,0.4); }
.crail__head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(38,38,44,0.1); }
.crail__title { font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); color: var(--ink); text-transform: uppercase; }
.crail__count { font-size: 12px; color: var(--ink-faint-65); }
.crail__items { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.crail__empty { font-size: 11px; color: var(--ink-faint-65); line-height: 1.6; }

/* ==========================================================================
   Persönliche To-dos – Liste (To-do / Doing / Done)
   ========================================================================== */
.plist { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.psec { background: rgba(255,255,255,0.34); border: 1px solid rgba(255,255,255,0.55); border-radius: var(--radius-card); padding: 16px; }
.psec__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(38,38,44,0.1); }
.psec__title { font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); color: var(--ink); text-transform: uppercase; }
.psec__count { font-size: 12px; color: var(--ink-faint-65); }
.psec__list { display: flex; flex-direction: column; gap: 8px; }
.prow { display: flex; align-items: flex-start; gap: 10px; background: rgba(255,255,255,0.5);
  border: 1px solid rgba(38,38,44,0.1); border-radius: 12px; padding: 10px 12px; }
.prow--blocked { border-color: rgba(192,69,91,0.45); }
.prow__check { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex: none; cursor: pointer; }
.prow__main { flex: 1; min-width: 0; }
.prow__title { font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--ink); line-height: 1.4; }
.prow--done .prow__title { text-decoration: line-through; color: var(--ink-faint-65); }
.prow__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pill-mini--over { color: var(--traffic-red); background: rgba(255,95,87,0.1); border-color: rgba(255,95,87,0.4); }

@media (max-width: 900px) {
  .clayout { flex-direction: column; }
  .crail { width: 100%; }
}

@media (max-width: 720px) {
  .board { grid-template-columns: 1fr; }
  .wrap { padding: 20px 18px 70px; }
  .form__row { grid-template-columns: 1fr; }
  .sections { grid-template-columns: 1fr; }
  .cmonth__grid, .cmonth__wd, .cweek { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .cday { min-height: 72px; padding: 4px; }
  .cbar__label { font-size: 18px; }
}

/* ==========================================================================
   KI-Co-Pilot & KI-Einstellungen (aus design-system/ abgeleitet)
   ========================================================================== */
.copilot__modelpick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label);
  color: var(--accent-text); text-transform: uppercase; }
.copilot__modelpick .select { text-transform: none; letter-spacing: normal; }
.copilot__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.copilot__ask { display: flex; gap: 8px; margin-bottom: 14px; }
.copilot__ask .input { flex: 1; }
.copilot__result { display: flex; flex-direction: column; }
.copilot__result:empty { display: none; }
.copilot__item { background: rgba(255,255,255,0.5); border: 1px solid rgba(38,38,44,0.1);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.copilot__rowacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.copilot__list { margin: 4px 0 12px; padding-left: 18px; color: var(--ink-2);
  font-size: var(--fs-body-sm); line-height: 1.6; }
.copilot__check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px;
  font-size: var(--fs-body-sm); color: var(--ink-2); line-height: 1.4; }
.copilot__check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.copilot__check .pill-mini { margin-left: 8px; }
.copilot__q { font-size: var(--fs-body-sm); color: var(--ink-faint-65); font-style: italic; margin: 0 0 8px; }
.copilot__text { font-family: var(--font-mono); font-size: var(--fs-body-sm); line-height: 1.6; color: var(--ink);
  white-space: pre-wrap; background: rgba(255,255,255,0.5); border: 1px solid rgba(38,38,44,0.12);
  border-radius: 12px; padding: 12px 14px; max-height: 340px; overflow: auto; }
.copilot__credit { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--ink-faint-45); margin-top: 10px; }
.ai-prov { background: rgba(255,255,255,0.34); border: 1px solid rgba(255,255,255,0.55);
  border-radius: var(--radius-card); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ai-prov__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-prov__name { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-body-sm); color: var(--ink); }

/* ---- Reduzierte Bewegung respektieren (ergänzt tokens.css) --------------- */
@media (prefers-reduced-motion: reduce) {
  .bg__blob { animation: none !important; }
  .pcard, .tcard, .btn, .btn-primary, .btn-glass, .cchip, .cday, .navlink, .quickdate { transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}