/*
 * pka.css — Handgeschriebene Styles fuer den PKA-Frontend.
 *
 * Zwei Schichten:
 *   1) Design-Tokens (Farben, Typografie, Radius, Spacing) — als CSS-
 *      Variablen unter :root, mit Light-/Dark-Varianten via
 *      prefers-color-scheme + :root[data-theme].
 *   2) Layout- und Komponenten-Styles fuer die Startseite und
 *      Detailseite. Kein Framework, keine Utility-Klassen — jede Regel
 *      trifft eine benannte Klasse mit klarer Semantik.
 *
 * Ubiquitous Language auf Deutsch: `.topbar`, `.pill`, `.kpi-karte`,
 * `.projekt-karte`, `.info-karte`, `.status-chip--<name>`.
 *
 * Referenz: Handoff-Bundle "PKA-Homescreen" in Mika's Inbox (Claude Design).
 */

/* ------------------------------------------------------------------
 * Design-Tokens — Light (Default)
 * ------------------------------------------------------------------ */

:root {
  --bg: oklch(0.975 0.004 260);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0.004 260);
  --text: oklch(0.27 0.014 262);
  --muted: oklch(0.53 0.014 262);
  --faint: oklch(0.72 0.012 262);
  --border: oklch(0.912 0.006 262);

  --accent: #3b6fd4;
  --accent-fg: #ffffff;
  --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);

  --overdue: oklch(0.53 0.16 27);

  --chip-neutral-bg: oklch(0.95 0.004 262);
  --chip-neutral-fg: oklch(0.46 0.01 262);
  --chip-blau-bg:    oklch(0.945 0.04 250);
  --chip-blau-fg:    oklch(0.48 0.13 255);
  --chip-amber-bg:   oklch(0.945 0.06 75);
  --chip-amber-fg:   oklch(0.52 0.13 62);
  --chip-grau-bg:    oklch(0.945 0.004 262);
  --chip-grau-fg:    oklch(0.5 0.008 262);
  --chip-gruen-bg:   oklch(0.94 0.06 152);
  --chip-gruen-fg:   oklch(0.46 0.11 155);
  --chip-rot-bg:     oklch(0.945 0.05 25);
  --chip-rot-fg:     oklch(0.52 0.15 27);

  --schatten-popover: 0 24px 60px -22px rgba(10, 15, 30, 0.5);

  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.155 0.008 262);
    --surface: oklch(0.195 0.009 262);
    --surface-2: oklch(0.23 0.01 262);
    --text: oklch(0.93 0.01 262);
    --muted: oklch(0.68 0.012 262);
    --faint: oklch(0.5 0.012 262);
    --border: oklch(0.28 0.01 262);

    --accent: #6f97e8;
    --accent-fg: oklch(0.16 0.01 262);
    --overdue: oklch(0.72 0.13 27);

    --chip-neutral-bg: oklch(0.28 0.008 262);
    --chip-neutral-fg: oklch(0.76 0.01 262);
    --chip-blau-bg:    oklch(0.3 0.06 255);
    --chip-blau-fg:    oklch(0.81 0.09 255);
    --chip-amber-bg:   oklch(0.33 0.07 70);
    --chip-amber-fg:   oklch(0.84 0.1 78);
    --chip-grau-bg:    oklch(0.28 0.006 262);
    --chip-grau-fg:    oklch(0.73 0.008 262);
    --chip-gruen-bg:   oklch(0.31 0.07 155);
    --chip-gruen-fg:   oklch(0.83 0.1 155);
    --chip-rot-bg:     oklch(0.33 0.08 27);
    --chip-rot-fg:     oklch(0.84 0.11 27);
  }
}

/* Manueller Overrider — data-theme setzt Light/Dark verbindlich. */
:root[data-theme="light"] {
  --bg: oklch(0.975 0.004 260);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0.004 260);
  --text: oklch(0.27 0.014 262);
  --muted: oklch(0.53 0.014 262);
  --faint: oklch(0.72 0.012 262);
  --border: oklch(0.912 0.006 262);
  --accent: #3b6fd4;
  --accent-fg: #ffffff;
  --overdue: oklch(0.53 0.16 27);
  --chip-neutral-bg: oklch(0.95 0.004 262); --chip-neutral-fg: oklch(0.46 0.01 262);
  --chip-blau-bg: oklch(0.945 0.04 250);    --chip-blau-fg: oklch(0.48 0.13 255);
  --chip-amber-bg: oklch(0.945 0.06 75);    --chip-amber-fg: oklch(0.52 0.13 62);
  --chip-grau-bg: oklch(0.945 0.004 262);   --chip-grau-fg: oklch(0.5 0.008 262);
  --chip-gruen-bg: oklch(0.94 0.06 152);    --chip-gruen-fg: oklch(0.46 0.11 155);
  --chip-rot-bg: oklch(0.945 0.05 25);      --chip-rot-fg: oklch(0.52 0.15 27);
}

:root[data-theme="dark"] {
  --bg: oklch(0.155 0.008 262);
  --surface: oklch(0.195 0.009 262);
  --surface-2: oklch(0.23 0.01 262);
  --text: oklch(0.93 0.01 262);
  --muted: oklch(0.68 0.012 262);
  --faint: oklch(0.5 0.012 262);
  --border: oklch(0.28 0.01 262);
  --accent: #6f97e8;
  --accent-fg: oklch(0.16 0.01 262);
  --overdue: oklch(0.72 0.13 27);
  --chip-neutral-bg: oklch(0.28 0.008 262); --chip-neutral-fg: oklch(0.76 0.01 262);
  --chip-blau-bg: oklch(0.3 0.06 255);      --chip-blau-fg: oklch(0.81 0.09 255);
  --chip-amber-bg: oklch(0.33 0.07 70);     --chip-amber-fg: oklch(0.84 0.1 78);
  --chip-grau-bg: oklch(0.28 0.006 262);    --chip-grau-fg: oklch(0.73 0.008 262);
  --chip-gruen-bg: oklch(0.31 0.07 155);    --chip-gruen-fg: oklch(0.83 0.1 155);
  --chip-rot-bg: oklch(0.33 0.08 27);       --chip-rot-fg: oklch(0.84 0.11 27);
}

/* ------------------------------------------------------------------
 * Reset & Body
 * ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button { cursor: pointer; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--text); }

/* ------------------------------------------------------------------
 * Seite: aeusseres Layout
 * ------------------------------------------------------------------ */

.seite {
  min-height: 100vh;
  padding: 28px 40px 64px;
  background: var(--bg);
}
.seite-inhalt {
  max-width: 3320px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------
 * Topbar
 * ------------------------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.topbar-marke {
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar-logo {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
  font-family: var(--font-mono);
}
.topbar-name {
  font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em;
}
.topbar-datum {
  font-size: 14px; color: var(--faint);
  margin-left: 8px;
  font-family: var(--font-mono);
}
.topbar-aktionen {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar-suche {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  min-width: 280px;
  color: var(--faint);
}
.topbar-suche input {
  border: 0; background: transparent; outline: none; flex: 1;
  color: var(--text);
}
.topbar-suche input::placeholder { color: var(--faint); }

.btn-gruppe { display: flex; gap: 9px; }
.btn {
  padding: 10px 17px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
}
.btn--primaer {
  border: none;
  background: var(--accent);
  color: var(--accent-fg);
}
.btn--klein {
  padding: 7px 13px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--muted);
}

/* ------------------------------------------------------------------
 * Fokus-Filterleiste (Pills)
 * ------------------------------------------------------------------ */

.pills-leiste {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.pills-label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.pill {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.pill:hover { text-decoration: none; }
.pill--aktiv {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

/* ------------------------------------------------------------------
 * KPI-Leiste
 * ------------------------------------------------------------------ */

.kpi-leiste {
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.kpi-karte {
  flex: 1 1 0;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 12px;
  padding: 11px 16px;
}
.kpi-karte--ueberfaellig  { border-left-color: var(--overdue); }
.kpi-karte--heute         { border-left-color: var(--accent); }
.kpi-karte--in-bearbeitung { border-left-color: var(--chip-amber-fg); }
.kpi-karte--termine       { border-left-color: var(--chip-gruen-fg); }

.kpi-zahl {
  font-size: 23px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
  color: var(--text);
}
.kpi-karte--ueberfaellig .kpi-zahl { color: var(--overdue); }
.kpi-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

/* ------------------------------------------------------------------
 * Hauptgitter (3 Spalten)
 * ------------------------------------------------------------------ */

.hauptgitter {
  display: grid;
  grid-template-columns:
    minmax(320px, 360px)
    minmax(1020px, 1fr)
    minmax(330px, 380px);
  gap: 20px;
  align-items: start;
}

/* ------------------------------------------------------------------
 * Region 1 — Fokus-Karte (links)
 * ------------------------------------------------------------------ */

.fokus-region {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
}
.fokus-titel { font-size: 18px; font-weight: 700; margin: 0 0 3px; }
.fokus-untertitel {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: var(--muted);
}
.fokus-gruppe { margin-bottom: 22px; }
.fokus-gruppe:last-child { margin-bottom: 0; }
.fokus-gruppe-kopf {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.fokus-punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted);
  flex: none;
}
.fokus-punkt--ueberfaellig  { background: var(--overdue); }
.fokus-punkt--heute         { background: var(--accent); }
.fokus-punkt--in-bearbeitung { background: var(--chip-amber-fg); }
.fokus-punkt--wartend       { background: var(--chip-grau-fg); }

.fokus-gruppe-label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.fokus-gruppe-label--ueberfaellig { color: var(--overdue); }

.fokus-eintrag {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.fokus-checkbox {
  width: 18px; height: 18px;
  border-radius: 6px;
  border: 1.5px solid var(--faint);
  background: transparent;
  padding: 0;
  flex: none;
}
.fokus-eintrag-text { flex: 1; min-width: 0; }
.fokus-eintrag-titel {
  font-size: 14px; font-weight: 500; color: var(--text);
}
.fokus-eintrag-meta {
  font-size: 12px; margin-top: 2px; color: var(--muted);
}
.fokus-eintrag-meta--ueberfaellig { color: var(--overdue); font-weight: 600; }

.fokus-empty {
  text-align: center;
  padding: 28px 12px;
}
.fokus-empty-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--chip-gruen-bg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.fokus-empty-icon::after {
  content: "";
  display: block;
  width: 13px; height: 7px;
  border-left: 2.5px solid var(--chip-gruen-fg);
  border-bottom: 2.5px solid var(--chip-gruen-fg);
  transform: rotate(-45deg);
  margin-top: -3px;
}
.fokus-empty-titel { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.fokus-empty-untertitel { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ------------------------------------------------------------------
 * Region 2 — Projekt-Board (Mitte)
 * ------------------------------------------------------------------ */

.board-region {
  display: flex;
  flex-direction: column;
}
.board-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 0 2px;
  flex-wrap: wrap;
}
.board-titel { font-size: 18px; font-weight: 700; margin: 0; }
.board-untertitel {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.board-buttons { display: flex; gap: 8px; }

.board-grid {
  display: grid;
  gap: 14px;
  align-items: start;
}
.board-spalte {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.board-spalte-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 2px;
}
.board-spalte-name {
  font-weight: 700;
  font-size: 14px;
  flex: 1;
  min-width: 0;
}
.board-spalte-count {
  font-size: 11.5px;
  color: var(--faint);
  font-family: var(--font-mono);
}
.board-spalte-empty {
  padding: 8px 6px;
  font-size: 12.5px;
  color: var(--faint);
}
.board-spalte-add {
  padding: 8px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
}
.board-spalte--add {
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 20px 12px;
  min-height: 120px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* ------------------------------------------------------------------
 * Projekt-Karte im Board
 * ------------------------------------------------------------------ */

.projekt-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.projekt-karten-kopf {
  padding: 11px 13px;
  display: flex; gap: 9px; align-items: flex-start;
}
.projekt-karten-kopf:hover { background: var(--surface-2); }

.caret {
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px;
  flex: none;
  width: 16px;
  text-align: center;
  cursor: pointer;
  padding: 2px 0;
  background: transparent;
  border: 0;
}
.caret:hover { color: var(--text); }

.projekt-inhalt { flex: 1; min-width: 0; cursor: pointer; }
.projekt-titelzeile {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.projekt-titel { font-size: 13.5px; font-weight: 600; color: var(--text); }
.projekt-titel--verworfen {
  color: var(--faint);
  text-decoration: line-through;
}
.projekt-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
}

.projekt-body {
  border-top: 1px solid var(--border);
  padding: 2px 13px 10px;
}
.unterprojekt-block {
  margin-top: 6px;
  border-left: 2px solid var(--border);
  padding-left: 9px;
}
.unterprojekt-kopf {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
}
.unterprojekt-inhalt { flex: 1; min-width: 0; cursor: pointer; }
.unterprojekt-titelzeile {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.unterprojekt-titel { font-size: 12.5px; font-weight: 600; }
.unterprojekt-meta { font-size: 11px; color: var(--faint); margin-top: 2px; }
.unterprojekt-body { }

.aktions-zeile {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.aktions-checkbox {
  width: 16px; height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--faint);
  background: transparent;
  margin-top: 1px;
  flex: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-fg);
}
.aktions-checkbox--erledigt {
  background: var(--accent);
  border-color: var(--accent);
}
.aktions-checkbox--erledigt::after {
  content: "";
  display: block;
  width: 8px; height: 4px;
  border-left: 2px solid var(--accent-fg);
  border-bottom: 2px solid var(--accent-fg);
  transform: rotate(-45deg);
  margin-top: -2px;
}
.aktions-inhalt { flex: 1; min-width: 0; cursor: pointer; }
.aktions-titel { font-size: 13px; font-weight: 500; color: var(--text); }
.aktions-titel--erledigt { color: var(--faint); text-decoration: line-through; }
.aktions-meta { font-size: 11.5px; margin-top: 1px; color: var(--muted); }
.aktions-meta--ueberfaellig { color: var(--overdue); font-weight: 600; }

.add-zeile {
  display: flex; gap: 16px;
  padding: 9px 0 2px;
}
.add-link {
  font-size: 12.5px; font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.add-link--sekundaer { color: var(--muted); }

/* ------------------------------------------------------------------
 * Region 3 — Info-Spalte (rechts)
 * ------------------------------------------------------------------ */

.info-spalte {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.info-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
}
.info-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.info-titel {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.info-count {
  font-size: 12px; color: var(--faint);
  font-family: var(--font-mono);
}
.info-zeile {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.info-zeile--kompakt { padding: 9px 0; gap: 10px; }
.info-zeit {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  width: 46px;
  flex: none;
}
.info-datum {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  width: 56px;
  flex: none;
  line-height: 1.3;
}
.info-zeile-titel { font-size: 14px; font-weight: 500; }
.info-zeile-titel--klein { font-size: 13.5px; }
.info-zeile-meta { font-size: 12px; color: var(--muted); margin-top: 1px; }
.info-zeile-text {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.4;
}

.info-punkt {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--chip-grau-fg);
  flex: none;
  margin-top: 5px;
}
.info-fragezeichen {
  color: var(--accent);
  font-size: 15px;
  line-height: 1.3;
  flex: none;
}
.info-empty {
  font-size: 13px;
  color: var(--faint);
  padding: 8px 0;
}

.info-tag {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  flex: none;
  white-space: nowrap;
}
.info-tag--termin {
  background: var(--chip-blau-bg);
  color: var(--chip-blau-fg);
}
.info-tag--meilenstein {
  background: var(--chip-amber-bg);
  color: var(--chip-amber-fg);
}

/* ------------------------------------------------------------------
 * Status-Chips (verbindliche Konvention aus dem Design-Handoff)
 * ------------------------------------------------------------------ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
  background: var(--chip-neutral-bg);
  color: var(--chip-neutral-fg);
}
.chip::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.chip--eingereicht,
.chip--neutral        { background: var(--chip-neutral-bg); color: var(--chip-neutral-fg); }
.chip--geplant,
.chip--aktiv,
.chip--blau           { background: var(--chip-blau-bg);    color: var(--chip-blau-fg); }
.chip--in_bearbeitung,
.chip--amber          { background: var(--chip-amber-bg);   color: var(--chip-amber-fg); }
.chip--wartend,
.chip--pausiert,
.chip--grau           { background: var(--chip-grau-bg);    color: var(--chip-grau-fg); }
.chip--abgeschlossen,
.chip--gruen          { background: var(--chip-gruen-bg);   color: var(--chip-gruen-fg); }
.chip--verworfen,
.chip--rot            { background: var(--chip-rot-bg);     color: var(--chip-rot-fg); }

/* Chip ohne Punkt (fuer Legacy-Aufrufe): unterdruecken. */
.chip--ohne-punkt::before { display: none; }

/* ------------------------------------------------------------------
 * Detail-Popover
 * ------------------------------------------------------------------ */

.popover-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 60;
}
.popover {
  position: fixed;
  width: 360px;
  max-height: 72vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--schatten-popover);
  padding: 20px 20px 24px;
  z-index: 61;
}
.popover-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.popover-typ {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-mono);
}
.popover-schliessen {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  width: 30px; height: 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.popover-input,
.popover-select,
.popover-textarea {
  width: 100%;
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
}
.popover-input--titel { font-size: 18px; font-weight: 700; padding: 9px 11px; border-radius: 9px; }
.popover-textarea { resize: vertical; min-height: 60px; }

.popover-kontext {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 2px 4px;
}
.popover-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 5px;
}
.popover-feld { margin-top: 4px; }

.popover-liste {
  margin-top: 20px;
}
.popover-liste-titel {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.popover-liste-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.popover-liste-titel-text {
  flex: 1; min-width: 0;
  font-size: 13.5px;
  color: var(--text);
}
.popover-empty {
  font-size: 13px; color: var(--faint); padding: 8px 0;
}

/* ------------------------------------------------------------------
 * Alt-Sektion "Anlegen" — bleibt fuer Formulare, bis die Topbar-
 * Buttons echte Popover-Modals oeffnen. Bewusst unauffaellig.
 * ------------------------------------------------------------------ */

/*
 * Anlegen-Region — im Design nicht mehr sichtbar (Topbar-Buttons +
 * "+ Projekt" pro Board-Spalte decken den Zweck ab). Das Markup bleibt
 * jedoch bewusst im DOM, damit die Tests weiter Bereichs-IDs aus dem
 * <option value="…">-Muster auslesen und der HTMX-OOB-Refresh nach
 * `POST /bereiche` sein Ziel findet. Sobald wir die Legacy-Tests auf
 * einen anderen Extraktions-Mechanismus umgestellt haben, kann die
 * Region komplett entfernt werden.
 */
.anlegen-region {
  display: none;
}
.anlegen-region-legacy-visible {
  display: block;
  margin-top: 40px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.anlegen-region h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}
.anlegen-region .anlegen-form + .anlegen-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.anlegen-region label {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 10px;
}
.anlegen-region input[type="text"],
.anlegen-region select,
.anlegen-region textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  margin-top: 3px;
}
.anlegen-region button {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}
.empty-state {
  padding: 14px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13.5px;
}

/* ------------------------------------------------------------------
 * Breadcrumbs & Detailseite (Legacy — bleibt fuer /projekte/{id})
 * ------------------------------------------------------------------ */

.detail-seite {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 40px 64px;
}
.breadcrumbs {
  font-size: 13px;
  margin: 0 0 12px 0;
  color: var(--muted);
}
.breadcrumbs a { text-decoration: none; }
.breadcrumbs .sep { margin: 0 0.35rem; opacity: 0.6; }

.detail-seite h1 { font-size: 24px; font-weight: 700; margin: 8px 0; }
.detail-seite h3 { font-size: 15px; font-weight: 700; margin: 16px 0 6px; }
.detail-seite table {
  width: 100%; border-collapse: collapse; margin: 8px 0;
}
.detail-seite th, .detail-seite td {
  padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left;
  font-size: 13.5px;
}
.detail-seite th { color: var(--muted); font-weight: 600; }

details.sektion { margin: 16px 0; border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; background: var(--surface); }
details.sektion > summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
details.sektion article { margin-top: 12px; padding: 12px; background: var(--surface-2); border-radius: 10px; }
details.sektion article header { font-weight: 600; margin-bottom: 8px; }
details.sektion input[type="text"],
details.sektion input[type="date"],
details.sektion input[type="datetime-local"],
details.sektion textarea,
details.sektion select {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); margin-top: 3px;
}
details.sektion button {
  margin-top: 10px; padding: 8px 14px; border-radius: 8px; border: none;
  background: var(--accent); color: var(--accent-fg); font-weight: 600;
}
details.sektion .grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
details.sektion label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }

/* Fehler-Container */
.fehler {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--chip-rot-fg);
  background: var(--chip-rot-bg);
  color: var(--chip-rot-fg);
  margin: 12px 0;
}

/* ------------------------------------------------------------------
 * Toast (bleibt unveraendert vom MVP)
 * ------------------------------------------------------------------ */

#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.pka-toast {
  background: var(--chip-gruen-fg);
  color: var(--chip-gruen-bg);
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 13.5px;
  animation: pka-toast-in 0.2s ease-out;
}
@keyframes pka-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
 * Ganz schmale Bildschirme (< 1700px) — horizontales Scrollen des
 * Hauptgitters, damit nichts kollabiert (Anforderung README).
 * ------------------------------------------------------------------ */

@media (max-width: 1700px) {
  .hauptgitter { min-width: 1700px; }
  body { overflow-x: auto; }
}