/* ==========================================================================
   Nordstern — handgeschriebenes Designsystem, ein Stylesheet, kein Build-Schritt.
   Aus leuchtturm-dashboard portiert (Tokens, Schrift, Kopf, Basiskomponenten);
   die Seitenabschnitte des Vorgaengers (Pipeline, Matrix, Termin-Radar,
   Identity-Bar, Winkelregler, Ausschluss, Kommunikationsstand) sind bewusst
   NICHT uebernommen. Das Team-Board (Spalten, Karten, Werkzeugleiste,
   Verschieben-Menue) steht seit #6/#7 in Abschnitt 4, die Portfolio-Uebersicht
   mit Zielscheibe (Klassen .target*) und die Bewertung seit #10/#11, die
   Projektseite v2 (Kacheln, Updates, Kanban, Meeting-Notizen, Beteiligte) seit
   #11/#24; die Praesentation kommt mit ihrem Folge-Issue.

   Reihenfolge (nicht append-only — neue Regeln gehoeren in den passenden Abschnitt):
     1. Tokens
     2. Schrift und Basis
     3. Layout
     4. Komponenten

   Farben stehen NUR in Abschnitt 1. Ab Abschnitt 2 gibt es keine Farb-Literale,
   nur var(--…) (tests/views/styles.test.ts prueft das).
   ========================================================================== */


/* ==== 1. Tokens =========================================================== */

:root {
  /* Helles und dunkles Schema folgen dem System (prefers-color-scheme, Block
     weiter unten). color-scheme laesst Formularelemente und Scrollbars mitziehen. */
  color-scheme: light dark;

  /* AI-Factory-Palette (ai-at.eu). Markenblau #005AF0; Graustufen und Akzente
     aus derselben Quelle. Jeder Wert ist gegen seine tatsaechliche Nutzflaeche
     nach der WCAG-Formel durchgerechnet, nicht geschaetzt. */
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #FAFAFA;
  --ink: #111111;
  --ink-2: #3F3F46;
  /* #7e8899 lag bei 3.58:1 auf --surface und war damit unter der AA-Grenze fuer
     Normaltext (Labels, Meta, Untertitel nutzen --muted bei 12–14px). */
  --muted: #616161; /* 6.19:1 auf surface, 5.93:1 auf surface-2, 5.68:1 auf bg */
  --line: #E0E0E0; /* rein dekorative Trennlinie, kein 3:1-Ziel */
  /* Umrandet Eingabefelder, Selects und Buttons — Bedienelemente, fuer die
     WCAG 1.4.11 (Non-text Contrast) 3:1 verlangt.
     #8A8A8A: 3.45:1 auf surface, 3.31:1 auf surface-2. */
  --line-strong: #8A8A8A;
  --accent: #005AF0; /* Markenblau; weisser Text darauf 5.64:1 */
  --accent-ink: #0048C4; /* fuer Text/Links auf hellem Grund: 7.71:1 auf surface, 6.85:1 auf accent-soft */
  --accent-soft: rgba(0, 90, 240, 0.08);
  /* Semantische Warn-/Gefahrfarbe (ueberfaellig, Fehler, "Kritisch", "fehlt").
     #B3261E: 6.54:1 auf surface, 6.26:1 auf surface-2, 5.99:1 auf bg. */
  --warn: #B3261E;
  /* Faellig bald / "Gefaehrdet". Braunorange statt Gelb, damit TEXT in dieser
     Farbe AA haelt. #8D5500: 6.12:1 auf surface, 5.86:1 auf surface-2, 5.61:1
     auf bg; auf der eigenen Soft-Flaeche (12 %) 5.16:1 / 4.94:1 / 4.75:1. */
  --due-soon: #8D5500;
  /* Erledigt / "Im Plan". #2E8540: 4.62:1 auf surface — knapp ueber AA, aber
     nur auf Weiss. Auf surface-2 4.43:1, auf bg 4.24:1, auf der eigenen
     Soft-Flaeche 3.96:1. Darum traegt --done Punkte, Icons und Rahmen (3:1 reicht);
     TEXT auf getoenter Flaeche nimmt --done-ink. */
  --done: #2E8540;
  /* Text-Variante von --done fuer Pillen, Badges und Meldungen: 70 % --done,
     30 % --ink. Hell #256232 mit 6.27:1 auf der Soft-Flaeche ueber surface
     (6.04:1 surface-2, 5.81:1 bg); dunkel #89D19F mit 7.22:1 / 6.62:1 / 8.07:1. */
  --done-ink: color-mix(in srgb, var(--done) 70%, var(--ink));
  /* Soft-Varianten: Flaechen hinter Pillen, Badges, Meldungen. */
  --warn-soft: rgba(179, 38, 30, 0.10);
  --due-soon-soft: rgba(141, 85, 0, 0.12);
  --done-soft: rgba(46, 133, 64, 0.12);

  /* Schriftskala — sechs Stufen. Krumme Zwischenwerte sind kein Gestaltungsmittel,
     jede Entscheidung ist eine Wahl aus dieser Liste.
     Grundgroesse 16px: das Dashboard wird stundenweise gelesen. */
  --t-xs: 12px;      /* Labels, Meta, Pillen, Kuerzel — Untergrenze */
  --t-sm: 14px;      /* dichter Text: Tabellenzellen, Bedienelemente, Navigation */
  --t-base: 16px;    /* Fliesstext */
  --t-lg: 20px;      /* Abschnittsueberschriften */
  --t-xl: 30px;      /* Seitentitel */
  --t-2xl: 34px;     /* KPI-Zahlen */

  /* Zeilenhoehen: grosse Schrift braucht relativ weniger Durchschuss als kleine. */
  --lh-tight: 1.2;   /* Ueberschriften, grosse Zahlen */
  --lh-normal: 1.5;  /* Standard */
  --lh-relaxed: 1.65;/* laengerer Lesetext: Notizen, Beschreibungen */

  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 26, 38, 0.05), 0 4px 14px rgba(20, 26, 38, 0.05);
  --shadow-lift: 0 8px 24px rgba(20, 26, 38, 0.18); /* gezogene Karte (Drag & Drop) */

  /* Sechs Projektfarben (farbenblind-sichere Slots, PRD FA5). Nie Farbe allein:
     der Projektname steht immer daneben. Fuer Nicht-Text gilt 3:1 (WCAG 1.4.11).
     Hell auf surface: p1 4.95:1, p2 5.10:1, p3 5.14:1, p4 6.12:1, p5 5.39:1, p6 5.87:1. */
  --p1: #1F6FD0;
  --p2: #0E7C6B;
  --p3: #9550B4;
  --p4: #8D5500;
  --p5: #5B6B87;
  --p6: #C2185B;

  /* Ringe der Portfolio-Zielscheibe (innen Leuchtturm, dann Kandidat, aussen
     Basis) und ihre Legende in "Projekte nach Kriterien". Aus Markenblau und
     Grundflaechen gemischt — Hell und Dunkel folgen damit ohne eigene Werte.
     Reine Flaechen; Text darauf sind nur die Ringnamen in --accent-ink:
     hell 5.30:1 / 6.33:1 / 6.96:1, dunkel 5.39:1 / 6.61:1 / 7.04:1 (nachgerechnet). */
  --band-leuchtturm: color-mix(in srgb, var(--accent) 24%, var(--surface));
  --band-kandidat: color-mix(in srgb, var(--accent) 13%, var(--surface));
  --band-basis: color-mix(in srgb, var(--accent) 4%, var(--surface-2));
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1116;
    --surface: #171A21;
    --surface-2: #1D2129;
    --ink: #F2F3F5;
    --ink-2: #B9BEC7;
    --muted: #8D96A5; /* 5.41:1 auf surface-2 */
    --line: #2A2F39;
    --line-strong: #6E7684; /* 3.80:1 auf surface, 3.52:1 auf surface-2 — beide ueber 3:1 */
    /* #005AF0 waere auf dunklem Grund zu dunkel fuer Text; aufgehellt. Text auf
       --accent (Buttons, Avatar, Skip-Link) ist --surface: 6.23:1. */
    --accent: #5B9AFF;
    --accent-ink: #7FB2FF; /* 8.05:1 auf surface, 6.48:1 auf accent-soft */
    --accent-soft: rgba(91, 154, 255, 0.14);
    /* #FF8A73: 7.57:1 auf surface, 7.02:1 auf surface-2, 8.23:1 auf bg. */
    --warn: #FF8A73;
    /* --due-soon #F2B455: 9.48:1 auf surface, 8.78:1 auf surface-2, 10.30:1 auf
       bg (nachgerechnet, Mindestziel 4.5:1). Auf der eigenen Soft-Flaeche (16 %)
       6.78:1 / 6.22:1 / 7.61:1. */
    --due-soon: #F2B455;
    /* --done #5CC27A: 7.84:1 auf surface, 7.26:1 auf surface-2, 8.51:1 auf bg;
       auf der Soft-Flaeche 5.84:1 / 5.36:1. */
    --done: #5CC27A;
    --warn-soft: rgba(255, 138, 115, 0.16); /* --warn darauf 5.74:1 / 5.27:1 / 6.39:1 */
    --due-soon-soft: rgba(242, 180, 85, 0.16);
    --done-soft: rgba(92, 194, 122, 0.16);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
    --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.45);

    /* Projektfarben dunkel: alle >= 3:1 auf surface (Nicht-Text) — nachgerechnet:
       p1 #6FA8F5 7.13:1, p2 #3AAE9C 6.40:1, p3 #C08BE0 6.64:1,
       p4 #E0A04A 7.71:1, p5 #8FA2C2 6.73:1, p6 #F06292 5.69:1. */
    --p1: #6FA8F5;
    --p2: #3AAE9C;
    --p3: #C08BE0;
    --p4: #E0A04A;
    --p5: #8FA2C2;
    --p6: #F06292;
  }
}


/* ==== 2. Schrift und Basis ================================================ */

/* AI-Factory-Schrift: Geist (Vercel, SIL OFL 1.1) — selbst gehostet, kein CDN:
   die CSP erlaubt `font-src 'self'`, und Selbst-Hosting sendet beim Seitenaufruf
   keine Anfrage an Dritte. Eine Variable-Font-Datei (70 KB) deckt alle Gewichte.
   font-display: swap — Text ist sofort lesbar, die Schrift tauscht nach. */
@font-face {
  font-family: 'Geist';
  src: url('/public/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

html {
  /* Haelt Fokusziele frei vom klebenden Kopf (WCAG 2.4.11). */
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  line-height: var(--lh-tight);
  margin: 0 0 0.5em;
}

h1 {
  font-size: var(--t-xl);
  font-weight: 750;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

h2 {
  font-size: var(--t-lg);
  font-weight: 700;
}

h3 {
  font-size: var(--t-base);
  font-weight: 700;
}

a {
  color: var(--accent-ink);
  /* Der Standard-Browserstrich schneidet bei Geist durch die Unterlaengen von
     g, j, p und y. text-underline-offset schiebt ihn darunter, die duennere
     Staerke nimmt ihm die Schwere. */
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.12s ease, color 0.12s ease;
}

a:hover {
  text-decoration-color: currentColor;
}

/* Sichtbarer Fokusring an jedem Bedienelement (WCAG 2.4.7, 1.4.11). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* <main> ist nur programmatisches Sprungziel des Skip-Links, kein Bedienelement. */
main:focus-visible {
  outline: none;
}

/* Bewegungsreduktion (WCAG 2.3.3): keine Uebergaenge, keine Animationen. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Haelt Inhalt im Accessibility-Baum (z. B. <caption>, Meldungs-Prefix), nimmt
   ihn aber aus dem Layout — ohne display:none, das ihn auch Screenreadern nimmt. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==== 3. Layout =========================================================== */

/* Erstes fokussierbares Element jeder Seite: springt ueber Kopf und Navigation.
   Text auf --accent-ink ist --surface (7.71:1 hell, 8.05:1 dunkel). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  background: var(--accent-ink);
  color: var(--surface);
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* App-Kopf: Marke, Navigation, Benutzermenue — einzeilig auf Desktop. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.app-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 60px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Marke: Quadrat in --accent plus Wortmarke "Nordstern" und kleines "AI Factory". */
.brand-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--ink);
  text-decoration: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand__mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--accent);
}

.brand__name {
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand__sub {
  font-size: var(--t-xs);
  color: var(--muted);
}

/* Hauptnavigation. Aktiv: --accent-soft-Flaeche, --accent-ink-Text, aria-current. */
.nav {
  display: flex;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
  /* Einzeilig; bei Platzmangel scrollt die Leiste, statt zu umbrechen. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.nav__link[aria-current='page'] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

/* Benutzermenue rechts: Name, Rolle, Initialen-Avatar, Abmelden. */
.user-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  min-width: 0;
}

.user-menu__name {
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-sm);
  font-weight: 500;
}

.user-menu__role {
  font-size: var(--t-xs);
  color: var(--muted);
}

.user-menu__logout {
  margin: 0;
}

.avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-size: var(--t-xs);
  font-weight: 700;
}

/* Hauptbereich: volle Breite bis 1440px. */
.main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 32px 32px;
}

/* Seitenkopf: Titel + Untertitel links, Aktionen rechts. */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 24px;
}

.page-header__text {
  min-width: 0;
}

.page-header h1 {
  margin: 0;
}

.page-header__sub {
  margin: 4px 0 0;
  color: var(--muted);
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Marke, die Navigationspunkte (Uebersicht, Projekte, Board) und das Benutzermenue
   passen erst ab etwa 960px in eine Zeile; darunter bekommt die Navigation eine eigene
   Zeile, statt dass "AI Factory" umbricht und "Projekte" abgeschnitten wird. */
@media (max-width: 960px) {
  .app-header__inner {
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 8px 16px;
  }

  .nav {
    order: 3;
    flex-basis: 100%;
  }
}

@media (max-width: 700px) {
  .app-header {
    position: static;
  }

  .main {
    padding: 20px 16px 24px;
  }
}


/* ==== 4. Komponenten ====================================================== */

/* --- Buttons: Zielgroesse mindestens 40px Hoehe ---------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: var(--lh-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn:hover {
  border-color: var(--accent);
}

/* Primaer: Markenblau; Text ist --surface (hell weiss 5.64:1, dunkel 6.23:1). */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.btn-primary:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

/* Sekundaer: weisse Flaeche, kraeftiger Rand (entspricht der Basis, explizit benannt). */
.btn-secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

/* Ghost: ohne Rand und Flaeche, Text in --accent-ink. */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--accent-ink);
}

.btn-ghost:hover {
  background: var(--accent-soft);
  border-color: transparent;
}

/* Deaktiviert steht NACH den Hover-Regeln, damit es sie bei gleicher Spezifitaet schlaegt. */
.btn:disabled,
.btn:disabled:hover,
.btn[aria-disabled='true'],
.btn[aria-disabled='true']:hover {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

/* --- Formularfelder -------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.field label,
.field legend,
label {
  font-size: var(--t-sm);
  font-weight: 600;
}

.field__hint {
  font-size: var(--t-xs);
  color: var(--muted);
}

/* Fehlertext in --warn und fett — zusammen mit dem doppelten Rand unten ist der
   Fehlerzustand nie nur Farbe (WCAG 1.4.1). */
.field__error {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--warn);
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.field-row > .field {
  flex: 1 1 200px;
}

/* :where() haelt die Spezifitaet bei null — Seitenklassen koennen frei ueberschreiben. */
:where(
    input:not(
        [type='checkbox'],
        [type='radio'],
        [type='range'],
        [type='hidden'],
        [type='submit'],
        [type='button'],
        [type='file'],
        [type='color']
      ),
    select,
    textarea
  ) {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-base);
  line-height: var(--lh-normal);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

::placeholder {
  color: var(--muted);
  opacity: 1;
}

:where(input, select, textarea):disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

input[type='checkbox'],
input[type='radio'] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}

/* Fehlerzustand: --warn-Rand plus Innenrand (2px gesamt). */
.field--error :where(input, select, textarea),
:where(input, select, textarea)[aria-invalid='true'] {
  border-color: var(--warn);
  box-shadow: inset 0 0 0 1px var(--warn);
}

/* --- Layout-Helfer fuer Formulare und Aktionen ----------------------------- */
/* Reihe aus Buttons/Formularen, bricht um statt zu ueberlaufen. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Formular mitten im Fliesstext bzw. neben anderen Buttons (z. B. "Archivieren"). */
.inline-form {
  display: inline;
}

/* --- Karte ----------------------------------------------------------------- */
.card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Karten stehen untereinander (Projektdetail): ohne Abstand klebten sie aneinander. */
.card + .card {
  margin-top: 20px;
}

/* Schmale zentrierte Karte: Anmelden und Passwort aendern. */
.card--narrow {
  max-width: 26rem;
  margin: 48px auto 0;
}

/* Mittelbreite Karte: Zugangsdaten und Nutzer anlegen. */
.card--medium {
  max-width: 36rem;
}

/* Breite Formularkarte: Projekt und To-do bearbeiten. */
.card--wide {
  max-width: 44rem;
}

/* Randlos, z. B. fuer eine Tabelle, die bis an den Kartenrand reicht. */
.card--flush {
  padding: 0;
  overflow: hidden;
}

.card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0 0 12px;
}

.card--flush > .card__header {
  margin: 0;
  padding: 16px 20px;
}

.card__title {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: 700;
}

.card__meta {
  font-size: var(--t-xs);
  color: var(--muted);
}

/* Aufklappbare Karte (Projektseite, R15): die ganze Kopfzeile ist die summary. */
.card--collapsible > .card__summary {
  align-items: center;
  margin: 0;
  cursor: pointer;
  list-style: none;
}

.card--collapsible > .card__summary::-webkit-details-marker {
  display: none;
}

.card--collapsible[open] > .card__summary {
  margin-bottom: 12px;
}

.card--collapsible > .card__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.card--collapsible .card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.card__chevron {
  flex: none;
  color: var(--ink-2);
  transition: transform 0.12s ease;
}

.card--collapsible[open] > .card__summary .card__chevron {
  transform: rotate(90deg);
}

.card__actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}

/* --- Kennzahlen-Kacheln ---------------------------------------------------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}

.kpi {
  min-width: 0;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.kpi__label {
  font-size: var(--t-xs);
  color: var(--muted);
}

.kpi__value {
  margin-top: 2px;
  font-size: var(--t-2xl);
  font-weight: 750;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kpi__unit {
  margin-left: 4px;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
}

.kpi__hint {
  margin-top: 4px;
  font-size: var(--t-xs);
  color: var(--ink-2);
}

.kpi--warn .kpi__value {
  color: var(--warn);
}

.kpi--soon .kpi__value {
  color: var(--due-soon);
}

/* Fortschritt ist keine Warnung: ein Zaehler, kein Alarm. */
.kpi--progress .kpi__value {
  color: var(--accent-ink);
}

/* Vier Kacheln der Uebersicht: eine Reihe, darunter 2 x 2, schmal untereinander. */
.kpis--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .kpis--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .kpis--four {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Kachel-Ueberschrift als h2 (Uebersicht): klein wie ein Label, ohne Abstaende der Basis. */
.kpi .kpi__label {
  margin: 0;
  font-weight: 500;
  line-height: var(--lh-normal);
}

.kpi .kpi__value,
.kpi .kpi__hint {
  margin-bottom: 0;
}

/* Fortschrittsbalken der Kachel "Vollständigkeit"; die Zahl daneben traegt die Aussage. */
.kpi__bar {
  height: 6px;
  margin: 8px 0 0;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.kpi__bar-fill {
  display: block;
  width: var(--share, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.kpi__list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.kpi__list .kpi__hint {
  margin-top: 0;
}

/* --- Status-Pille (Ampel): immer Punkt UND Text, nie Farbe allein ----------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--pill-bg, var(--surface-2));
  color: var(--pill-ink, var(--ink-2));
  font-size: var(--t-xs);
  font-weight: 650;
  line-height: var(--lh-normal);
  white-space: nowrap;
}

.pill__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pill-dot, var(--muted));
}

.pill--on-track {
  --pill-bg: var(--done-soft);
  --pill-ink: var(--done-ink);
  --pill-dot: var(--done);
}

.pill--at-risk {
  --pill-bg: var(--due-soon-soft);
  --pill-ink: var(--due-soon);
  --pill-dot: var(--due-soon);
}

.pill--critical {
  --pill-bg: var(--warn-soft);
  --pill-ink: var(--warn);
  --pill-dot: var(--warn);
}

/* "fehlt": nur Umriss in --warn, keine Flaeche — sticht aus der Spalte heraus. */
.pill--missing {
  --pill-bg: transparent;
  --pill-ink: var(--warn);
  --pill-dot: var(--warn);
  border-color: var(--warn);
}

/* --- Faelligkeits-Badge ---------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--badge-bg, transparent);
  color: var(--badge-ink, var(--ink-2));
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: var(--lh-normal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.badge__icon {
  flex: none;
}

.badge--overdue {
  --badge-bg: var(--warn-soft);
  --badge-ink: var(--warn);
}

.badge--soon {
  --badge-bg: var(--due-soon-soft);
  --badge-ink: var(--due-soon);
}

.badge--done {
  --badge-bg: var(--done-soft);
  --badge-ink: var(--done-ink);
}

/* Normales Datum und "kein Datum": ohne Flaeche, buendig mit dem Text daneben. */
.badge--date,
.badge--none {
  padding-inline: 0;
}

.badge--date {
  --badge-ink: var(--ink-2);
}

.badge--none {
  --badge-ink: var(--muted);
  font-style: italic;
  font-weight: 500;
}

/* --- Projekt-Farbmarke (Quadrat, Farbe per style="--pc:var(--p1)") ---------- */
.swatch {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--pc, var(--muted));
}

/* Projektname in der Liste: Farbmarke und Name als eine Link-Einheit. */
.project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* --- Tabelle --------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.table th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table td a {
  font-weight: 500;
  text-decoration: none;
}

.table td a:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* --- Notizen & Entscheidungen --------------------------------------------- */
/* Anker-Ziel (#notizen): der sticky Kopf (60px) darf die Ueberschrift nicht verdecken. */
.notes {
  scroll-margin-top: 76px;
}

.notes__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 8px;
}

.notes__form textarea {
  min-height: 72px;
}

.notes__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.note {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.note__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: var(--t-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.note__author {
  color: var(--ink);
  font-weight: 650;
}

.note__at {
  white-space: nowrap;
}

.note__body {
  margin: 4px 0 0;
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.notes__empty {
  margin: 0;
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--muted);
}

/* --- Meldungen (Flash) ----------------------------------------------------- */
/* Text immer in --ink (AA ueberall); Erfolg/Fehler zeigen sich ueber 4px-Balken,
   Symbol und Text — nicht ueber Farbe allein. */
.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 500;
}

.flash::before {
  flex: none;
  font-weight: 700;
}

.flash--success {
  border-left-color: var(--done);
  background: var(--done-soft);
}

.flash--success::before {
  content: '\2713';
  content: '\2713' / '';
  color: var(--done-ink);
}

.flash--error {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}

.flash--error::before {
  content: '!';
  content: '!' / '';
  color: var(--warn);
}

/* --- Fehlerseiten ---------------------------------------------------------- */
.error-page {
  max-width: 560px;
  margin: 48px auto;
}

.error-page p {
  margin: 0 0 20px;
  color: var(--ink-2);
}

/* --- Initialen-Avatar, klein (Board-Karten) -------------------------------- */
/* Die Farbe ist --accent-soft mit --accent-ink-Text (6.85:1); "ohne Person" ist ein
   leerer Kreis mit Personen-Symbol (wie im Pencil-Entwurf v2), daneben steht
   immer der Text. */
.avatar--sm {
  width: 24px;
  height: 24px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.avatar--empty {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}

.avatar--empty svg {
  width: 12px;
  height: 12px;
}

/* --- Board: Werkzeugleiste -------------------------------------------------- */
/* Ein GET-Formular; die Schalter sind echte Radio-Knoepfe/Checkboxen (unsichtbar
   ueber der Flaeche), damit Tastatur und Screenreader sie nativ bedienen. */
.board-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0 0 20px;
}

.board-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.board-toolbar__rows {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--t-sm);
  color: var(--muted);
}

.board-toolbar__select select {
  width: auto;
  max-width: 100%;
  min-width: 9rem;
  border-radius: 999px;
  font-size: var(--t-sm);
  font-weight: 600;
}

/* Segmentierter Schalter: der gewaehlte Abschnitt ist invertiert (--ink auf --surface). */
.segmented {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.segmented__item {
  position: relative;
  display: inline-flex;
}

.segmented .segmented__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented__label {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}

.segmented__input:checked + .segmented__label {
  background: var(--ink);
  color: var(--surface);
}

/* Innen gezeichnet: der aeussere Rahmen schneidet einen Ring ausserhalb ab. */
.segmented__input:focus-visible + .segmented__label {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

/* Umschalt-Chip ("ohne Person · 2"): gewaehlt = Haken, --accent-soft-Flaeche und Rahmen. */
.chip-toggle {
  position: relative;
  display: inline-flex;
}

.chip-toggle .chip-toggle__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip-toggle__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
}

.chip-toggle__input:checked + .chip-toggle__label {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.chip-toggle__input:checked + .chip-toggle__label::before {
  content: '\2713';
  content: '\2713' / '';
}

.chip-toggle__input:focus-visible + .chip-toggle__label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chip-toggle__input:disabled + .chip-toggle__label {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

/* --- Board: Zeilen und Spalten -------------------------------------------- */
.board-row + .board-row {
  margin-top: 28px;
}

.board-row__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: var(--t-lg);
  overflow-wrap: anywhere;
}

/* Vier Spalten; darunter zwei, dann eine — nie waagerechtes Scrollen. */
.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

@media (max-width: 1100px) {
  .board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .board {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Spaltenflaeche: 4 % --ink ueber --bg, damit die weissen Karten sich abheben
   (hell wie dunkel); --muted-Text darauf bleibt ueber 5:1. */
.board-col {
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 4%, var(--bg));
}

/* Der Zusatz ("letzte 14 Tage") steht rechts in derselben Zeile wie der Name
   (Pencil-Entwurf v2); bei schmalen Spalten bricht er in die naechste Zeile. */
.board-col__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 0 0 12px;
  padding: 0 2px;
}

.board-col__title {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
}

.board-col__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.board-col__hint {
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--muted);
  white-space: nowrap;
}

.board-col__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Leere Zielliste fuer Drag & Drop: ohne Skript unsichtbar, mit Skript (html.dnd)
   eine Ablageflaeche ueber "Keine To-dos". */
.board-col__cards:empty {
  display: none;
}

.dnd .board-col__cards[data-dnd-status] {
  display: flex;
  min-height: 48px;
}

.dnd .board-col__cards[data-dnd-status]:empty + .board-col__empty {
  margin-top: -48px;
  pointer-events: none;
}

.dnd .board-col__cards[data-dnd-status]:not(:empty) + .board-col__empty {
  display: none;
}

.dnd [data-todo-id] {
  cursor: grab;
}

/* Platzhalter an der Ablagestelle, die gezogene Karte, Speichern nach dem Ablegen. */
.board-col__cards .board-card.board-card--ghost {
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}

.board-col__cards .board-card.board-card--ghost > * {
  visibility: hidden;
}

.board-card.board-card--drag {
  cursor: grabbing;
  box-shadow: var(--shadow-lift);
}

.dnd--saving,
.dnd--saving [data-todo-id] {
  cursor: progress;
}

.board-col__empty {
  margin: 0;
  padding: 8px 4px;
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--muted);
}

.board-empty {
  margin: 0;
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--muted);
}

/* --- Board: Karte ---------------------------------------------------------- */
.board-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.board-card:hover {
  border-color: var(--line-strong);
}

.board-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}

.board-card__project {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--t-xs);
  color: var(--ink-2);
}

.board-card__project-name {
  overflow-wrap: anywhere;
}

.board-card__title {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Der Titel-Link spannt die ganze Karte auf (::after); Verschieben-Menue liegt darueber. */
.board-card__link {
  color: var(--ink);
  text-decoration: none;
}

.board-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
}

.board-card__link:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.board-card__link:focus-visible {
  outline: none;
}

.board-card__link:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.board-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
}

/* Entscheidungen: Person ("<Name> entscheidet"), darunter der Chip. */
.board-card--decision .board-card__footer {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.board-card__person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--t-xs);
  color: var(--ink-2);
}

.board-card__nobody {
  font-style: italic;
  color: var(--muted);
}

/* --- Board: Verschieben-Menue (<details>, ohne JavaScript) ----------------- */
.move-menu {
  position: relative;
  z-index: 1;
  flex: none;
}

/* Geoeffnet ueber den Verschieben-Knoepfen der Karten darunter. */
.move-menu[open] {
  z-index: 20;
}

.move-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}

.move-menu__toggle::-webkit-details-marker {
  display: none;
}

.move-menu__toggle:hover,
.move-menu[open] > .move-menu__toggle {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.move-menu__panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 12rem;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.move-menu__title {
  margin: 0 0 4px;
  padding: 0 8px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--muted);
}

.move-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.move-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  text-align: left;
}

button.move-menu__item {
  cursor: pointer;
}

button.move-menu__item:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.move-menu__item--current {
  color: var(--muted);
}

.move-menu__note {
  font-size: var(--t-xs);
}

/* --- Portfolio-Uebersicht: Raster, Gruppen, Tabelle ------------------------ */
/* Zielscheibe links, "Projekte nach Kriterien" rechts; unter 1000px untereinander. */
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin: 0 0 24px;
}

.overview-grid > .card + .card {
  margin-top: 0;
}

@media (max-width: 1000px) {
  .overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "Projekte nach Kriterien": je Band eine Gruppe mit Farbmarke wie der Ring. */
.band-group {
  margin: 0 0 14px;
}

.band-group__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 4px;
  font-size: var(--t-sm);
  font-weight: 700;
}

.band-group__range {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--muted);
}

.band-key {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.band-key--leuchtturm {
  background: var(--band-leuchtturm);
}

.band-key--kandidat {
  background: var(--band-kandidat);
}

.band-key--basis {
  background: var(--band-basis);
  border: 1px solid var(--line);
}

/* "Noch nicht bewertet": leeres Kaestchen wie der hohle Punkt der Scheibe. */
.band-key--offen {
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
}

.band-group__list {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
}

.band-group__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: var(--t-sm);
}

.band-group__nr {
  flex: none;
  min-width: 1.25em;
  color: var(--muted);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

.band-group__name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.band-group__name:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.band-group__score {
  flex: none;
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.band-group__empty {
  margin: 0 0 0 20px;
  font-size: var(--t-xs);
  font-style: italic;
  color: var(--muted);
}

.band-groups__hint {
  margin: 8px 0 0;
  font-size: var(--t-xs);
  color: var(--muted);
}

/* Schmal scrollt die Tabelle in ihrem Bereich (role=region, tabindex=0), statt Namen
   Buchstabe fuer Buchstabe umzubrechen. */
.overview-table .table,
.target-table .table {
  min-width: 36rem;
}

/* Tabelle "Alle Projekte": Zeilenkopf (Projekt) wie eine Zelle, Name als blauer Link. */
.overview-table .table tbody th {
  padding: 12px 16px;
  background: transparent;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: normal;
}

.overview-table .table tbody tr:last-child th {
  border-bottom: 0;
}

.overview-table .project-link {
  color: var(--accent-ink);
  font-weight: 500;
  text-decoration: none;
}

.overview-table .project-link:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.overview-table__project {
  width: 47%;
}

.overview-table__score {
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}

.overview-table__empty {
  margin: 0;
  padding: 16px 20px;
  color: var(--muted);
}

/* Fehlende Angabe ("fehlt"): --warn UND fett, nie Farbe allein. */
.text-missing {
  color: var(--warn);
  font-weight: 650;
}

/* --- Portfolio-Zielscheibe (Inline-SVG) ------------------------------------ */
/* Masse in SVG-Einheiten: die Grafik skaliert mit der Karte (viewBox 880 x 580). */
.target {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin: 0 auto;
  font-family: inherit;
}

/* Feine Kante in --surface trennt die Ringe auch dort, wo sich die Flaechen kaum unterscheiden (dunkel). */
.target__ring {
  stroke: var(--surface);
  stroke-width: 1;
}

.target__ring--basis {
  fill: var(--band-basis);
}

.target__ring--kandidat {
  fill: var(--band-kandidat);
}

.target__ring--leuchtturm {
  fill: var(--band-leuchtturm);
}

.target__sector-line {
  stroke: var(--surface);
  stroke-width: 2;
}

.target__ring-label {
  fill: var(--accent-ink);
  font-size: 11px;
  font-weight: 500;
}

.target__sector-label {
  fill: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

.target__label rect {
  fill: var(--surface);
  stroke: var(--line);
}

.target__label text {
  fill: var(--ink);
  font-size: 11px;
  font-weight: 500;
}

/* Punkt in Projektfarbe (style="--pc:var(--pN)"), Nummer in --surface darauf. */
.target__point circle {
  fill: var(--pc, var(--muted));
  stroke: var(--surface);
  stroke-width: 2;
}

.target__point text {
  fill: var(--surface);
  font-size: 11px;
  font-weight: 700;
}

/* Vorlaeufig (nicht alle Kriterien bewertet): hohler Punkt, Nummer in Projektfarbe. */
.target__point--provisional circle {
  fill: var(--surface);
  stroke: var(--pc, var(--muted));
}

.target__point--provisional text {
  fill: var(--pc, var(--muted));
}

/* Tabellenansicht darunter: aufklappbar ohne JavaScript. */
.target-table {
  margin: 8px 0 0;
}

.target-table__summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--accent-ink);
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
}

.target-table .table-wrap {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* --- Bewertung (Projektseite) ---------------------------------------------- */
/* Hauptspalte ganz unten (R6, abgenommen 28.10.): Kriterien in zwei Spalten, je
   Kriterium Name und fuenf Kaestchen in einer Zeile, darunter die Beschreibung, die
   gewaehlte Stufe (hellblau) und "Alle 5 Stufen" zum Aufklappen. Die Kaestchen sind
   echte Radio-Knoepfe (unsichtbar ueber der Flaeche), wie beim segmentierten Schalter.
   Eine Spalte, wo die Hauptspalte schmal ist: neben "Beteiligte" bis 1250px und auf
   dem Telefon. Bewusst Medien- statt Container-Abfrage: Chrome startet in Containern
   beim Laden die Uebergaenge der Knoepfe (sie blenden sichtbar ein). */
.score-card {
  scroll-margin-top: 76px;
}

.score-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}

@media (min-width: 1101px) and (max-width: 1250px), (max-width: 700px) {
  .score-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .score-column + .score-column > .score-criterion:first-child {
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
}

.score-column {
  min-width: 0;
}

.score-criterion {
  padding: 14px 0;
}

.score-criterion + .score-criterion {
  border-top: 1px solid var(--line);
}

.score-column > .score-criterion:first-child {
  padding-top: 4px;
}

.score-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
}

.score-row__label {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 650;
  line-height: var(--lh-normal);
}

.score-criterion__descr {
  margin: 6px 0 8px;
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Gewaehlte Stufe: hellblaue Flaeche, "Stufe N:" in Markenblau. */
.score-level {
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--accent-soft);
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.score-level__label {
  font-weight: 700;
  color: var(--accent-ink);
}

.score-level--none {
  background: var(--surface-2);
  font-style: italic;
  color: var(--muted);
}

.score-levels {
  margin-top: 6px;
}

.score-levels__summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--accent-ink);
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.score-levels__summary::-webkit-details-marker {
  display: none;
}

.score-levels__summary::before {
  content: '›';
  content: '›' / '';
  display: inline-block;
  font-size: var(--t-sm);
  transition: transform 0.12s ease;
}

.score-levels[open] > .score-levels__summary::before {
  transform: rotate(90deg);
}

.score-levels__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0 0 0 4px;
  list-style: none;
}

.score-levels__item {
  display: flex;
  gap: 10px;
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  color: var(--ink-2);
}

.score-levels__nr {
  flex: none;
  width: 1ch;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.score-levels__text {
  min-width: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Die gewaehlte Stufe: Markenblau und fett (nie Farbe allein: "(gewählt)" fuer Screenreader). */
.score-levels__item--on {
  color: var(--accent-ink);
}

.score-levels__item--on .score-levels__text {
  font-weight: 500;
}

.score-scale {
  display: inline-flex;
  gap: 6px;
}

.score-scale__item {
  position: relative;
  display: inline-flex;
}

.score-scale .score-scale__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.score-scale__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.score-scale__input:hover + .score-scale__box {
  border-color: var(--accent);
}

.score-scale__input:checked + .score-scale__box,
.score-scale__box--on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
}

.score-scale__input:focus-visible + .score-scale__box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.score-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* --- Projektseite v2: Kopf, Brotkrumen, Symbole ---------------------------- */
/* Strich-Symbole (src/views/components/Icon.tsx) sitzen auf der Textlinie. */
.icon {
  flex: none;
  vertical-align: -0.15em;
}

/* Kleiner Knopf innerhalb einer Karte ("To-dos verbinden"). */
.btn-sm {
  min-height: 32px;
  padding: 0 12px;
  font-size: var(--t-xs);
}

.breadcrumb {
  margin: 0 0 12px;
  font-size: var(--t-xs);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

.breadcrumb__list li + li::before {
  content: '›';
  content: '›' / '';
  margin: 0 8px;
  color: var(--muted);
}

.breadcrumb__list a {
  font-weight: 600;
  text-decoration: none;
}

.project-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 20px;
}

.project-head__text {
  min-width: 0;
}

.project-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

/* Farbe und Name bleiben zusammen, auch wenn der Name umbricht. */
.project-head__name {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.project-head__title h1 {
  min-width: 0;
  margin: 0;
}

.project-head__sub {
  margin: 6px 0 0;
  font-size: var(--t-xs);
  color: var(--muted);
}

.project-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Projektfarbe neben dem Seitentitel. */
.swatch--lg {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.pill--archived {
  --pill-bg: var(--surface-2);
  --pill-ink: var(--ink-2);
  border-color: var(--line-strong);
}

/* Kleine Ueberschrift in Grossbuchstaben ("WORUM ES GEHT", Kachel-Titel). */
.section-label,
.tile__label {
  margin: 0 0 8px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: var(--lh-normal);
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Projektseite v2: Zusammenfassung -------------------------------------- */
.project-summary {
  margin: 0 0 20px;
}

.project-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 40px;
}

@media (max-width: 800px) {
  .project-summary__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.project-summary__list {
  margin: 0;
  padding-left: 18px;
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
}

.project-summary__list li + li {
  margin-top: 2px;
}

.project-summary__empty {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.project-summary__source,
.tile__source {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  font-size: var(--t-xs);
  color: var(--muted);
}

.project-summary__source .icon,
.tile__source .icon {
  margin-top: 1px;
}

.project-summary__source a {
  font-weight: 600;
  text-decoration: none;
}

/* Zweiter Abschnitt in derselben Spalte ("Ziele" unter "Worum es geht"). */
.project-summary__sub {
  margin-top: 16px;
}

/* --- Projektseite v2: Kacheln ---------------------------------------------- */
/* Vier Kacheln in einer Reihe, darunter 2 x 2, schmal untereinander. Ohne
   Mitgliedschaft fehlt "Kunde" — dann drei. */
.project-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 20px;
}

.project-tiles--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .project-tiles,
  .project-tiles--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .project-tiles,
  .project-tiles--three {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Ampel-Kachel: getoent wie die Ampel, der Rand traegt die Farbe mit (nie Farbe allein: die Pille sagt es). */
.tile--critical {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn-soft) 60%, var(--surface));
}

.tile--at-risk {
  border-color: var(--due-soon);
  background: color-mix(in srgb, var(--due-soon-soft) 60%, var(--surface));
}

.tile--on-track {
  border-color: var(--done);
}

.tile__pill {
  margin: 0 0 10px;
}

.tile__text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
}

.tile__headline {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: 650;
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}

.tile__hidden,
.tile__empty {
  margin: 0;
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--muted);
}

.tile__due {
  margin: 8px 0 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-2);
}

.tile__due--overdue {
  color: var(--warn);
}

.tile__due--soon {
  color: var(--due-soon);
}

.tile__meta {
  margin: 8px 0 0;
  font-size: var(--t-xs);
  color: var(--ink-2);
}

.tile__suggest {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--ink-2);
}

.tile__suggest-label {
  font-weight: 650;
  color: var(--ink);
}

.tile__suggest a {
  font-weight: 600;
}

.tile__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile__item .tile__meta {
  margin-top: 2px;
}

.tile__item-title {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Quellenzeile ganz unten, auch bei kurzen Kacheln. */
.tile .tile__source {
  margin-top: auto;
  padding-top: 12px;
}

.member-hint {
  margin: 0 0 20px;
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--ink-2);
}

/* --- Projektseite v2: zwei Spalten ----------------------------------------- */
/* Links Updates, To-dos, Meeting-Notizen; rechts Beteiligte und Bewertung. Unter
   1100px untereinander (erst die linke Spalte). */
.project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 20px;
  align-items: start;
}

@media (max-width: 1100px) {
  .project-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.project-grid__main,
.project-grid__side {
  min-width: 0;
}

/* Ohne Karte "Beteiligte" (keine Mitgliedschaft, Rolle unter management): eine Spalte. */
.project-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

/* --- Projektseite v2: Updates ---------------------------------------------- */
.updates {
  scroll-margin-top: 76px;
}

.update-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
}

/* Ein Kasten wie im Entwurf: Text links, Ampel und "Posten" rechts; schmal untereinander. */
.update-form__box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.update-form__box:focus-within {
  border-color: var(--accent);
}

.update-form__box--error {
  border-color: var(--warn);
  box-shadow: inset 0 0 0 1px var(--warn);
}

.update-form__box textarea {
  flex: 1 1 260px;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  resize: vertical;
}

/* Der Kasten zeigt den Fokus (:focus-within); das Textfeld selbst braucht keinen zweiten Ring. */
.update-form__box textarea:focus-visible {
  outline: none;
}

.update-form__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.update-form__rag {
  width: auto;
  min-height: 36px;
  padding: 4px 10px;
  font-size: var(--t-sm);
  font-weight: 600;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Je Art ein farbiger Streifen links (R11); die Art steht immer als Text daneben. */
.timeline__item {
  --tone: var(--muted);
  --tone-soft: color-mix(in srgb, var(--ink) 5%, var(--surface));
  padding: 10px 14px;
  border-left: 3px solid var(--tone);
  border-radius: 0 8px 8px 0;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.timeline__item--critical {
  --tone: var(--warn);
  --tone-soft: var(--warn-soft);
}

.timeline__item--at-risk {
  --tone: var(--due-soon);
  --tone-soft: var(--due-soon-soft);
}

.timeline__item--on-track {
  --tone: var(--done);
  --tone-soft: var(--done-soft);
}

.timeline__item--meeting {
  --tone: var(--accent);
  --tone-soft: var(--accent-soft);
}

/* Das neueste Update: getoente Flaeche, ohne Innenrand. */
.timeline__item--latest {
  background: var(--tone-soft);
  box-shadow: none;
}

.timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: var(--t-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.timeline__newest {
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--tone);
  color: var(--surface);
  font-weight: 700;
}

.timeline__kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--tone-soft);
  color: var(--ink-2);
  font-weight: 650;
}

.timeline__item--latest .timeline__kind {
  background: var(--surface);
}

.timeline__item--critical .timeline__kind {
  color: var(--warn);
}

.timeline__item--at-risk .timeline__kind {
  color: var(--due-soon);
}

.timeline__item--on-track .timeline__kind {
  color: var(--done-ink);
}

.timeline__item--meeting .timeline__kind {
  color: var(--accent-ink);
}

.timeline__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tone);
}

.timeline__author {
  color: var(--ink);
  font-weight: 650;
}

.timeline__body {
  margin: 6px 0 0;
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.timeline__item--latest .timeline__body {
  font-size: var(--t-base);
}

.timeline__body--empty {
  font-style: italic;
  color: var(--muted);
}

.timeline-more {
  margin-top: 10px;
}

.timeline-more__summary,
.meeting__more-summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--accent-ink);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}

.timeline-more[open] > .timeline {
  margin-top: 10px;
}

.updates__hidden {
  margin: 12px 0 0;
}

/* --- Projektseite v2: Kanban ----------------------------------------------- */
/* Vier Spalten des Boards innerhalb der Karte; zwei, wo die Hauptspalte schmal ist
   (neben "Beteiligte" bis 1360px, allein bis 860px), eine auf dem Telefon. Medien- statt
   Container-Abfrage aus demselben Grund wie bei der Bewertung. */
.kanban {
  scroll-margin-top: 76px;
}

.kanban__board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

@media (min-width: 1101px) and (max-width: 1360px), (max-width: 860px) {
  .kanban__board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .kanban__board {
    grid-template-columns: minmax(0, 1fr);
  }
}

.kanban .board-col {
  padding: 10px;
}

.kanban__count {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.board-col__foot {
  margin: 10px 0 0;
  padding: 0 2px;
  font-size: var(--t-xs);
  color: var(--muted);
}

.kanban__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 16px;
}

.kanban__board-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}

.new-todo {
  flex: 1 1 320px;
  scroll-margin-top: 76px;
}

.new-todo__toggle,
.member-add__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--accent-ink);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.new-todo__toggle::-webkit-details-marker,
.member-add__toggle::-webkit-details-marker {
  display: none;
}

.new-todo__form {
  max-width: 40rem;
  margin-top: 12px;
}

/* Karte im Kanban: ohne Projektzeile, Verschieben-Knopf oben rechts in der Ecke; nur
   die erste Zeile daneben haelt Abstand zu ihm, der Rest nutzt die volle Breite. */
.board-card--compact > .move-menu {
  position: absolute;
  top: 6px;
  right: 6px;
}

.board-card--compact > .move-menu + * {
  margin-right: 30px;
}

/* Schmale Spalten: der Datums-Chip darf umbrechen statt ueber die Karte zu ragen. */
.kanban .badge {
  border-radius: 8px;
  white-space: normal;
}

.board-card--done .board-card__title,
.board-card--done .board-card__link {
  color: var(--muted);
}

/* Art-Marke in "Entscheidungen": Text und Flaeche, nie Farbe allein. */
.mark {
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 650;
}

.mark--decision {
  background: var(--due-soon-soft);
  color: var(--due-soon);
}

.mark--blocker {
  background: var(--warn-soft);
  color: var(--warn);
}

/* Kennzeichen der verbundenen Meeting-Zusammenfassung ("Wochenrunde 20.10."). */
.meeting-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--t-xs);
  font-weight: 600;
}

.meeting-chip__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Projektseite v2: Meeting-Notizen -------------------------------------- */
.meetings {
  scroll-margin-top: 76px;
}

.meetings__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meeting {
  scroll-margin-top: 76px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.meeting__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

.meeting__summary::-webkit-details-marker {
  display: none;
}

.meeting__chevron {
  color: var(--ink-2);
  transition: transform 0.12s ease;
}

.meeting[open] > .meeting__summary .meeting__chevron {
  transform: rotate(90deg);
}

.meeting__title {
  flex: 1 1 240px;
  font-size: var(--t-sm);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.meeting__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--t-xs);
  font-weight: 600;
}

.meeting__meta {
  font-size: var(--t-xs);
  color: var(--muted);
}

.meeting__body {
  padding: 0 14px 14px 42px;
}

/* Eingefuegter Text: Zeilenumbrueche bleiben, HTML wird nie interpretiert (escaped). */
.meeting__text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.meeting__more {
  margin-top: 6px;
}

.meeting__actions {
  margin-top: 12px;
}

.meetings__hint {
  margin: 12px 0 0;
}

/* --- Projektseite v2: Beteiligte ------------------------------------------- */
.members {
  scroll-margin-top: 76px;
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.member {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Initialen in einer Projektfarbe (style="--pc:…"); dekorativ, der Name steht daneben. */
.member__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pc, var(--accent));
  color: var(--surface);
  font-size: var(--t-xs);
  font-weight: 700;
}

.member__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.member__name {
  font-size: var(--t-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.member__meta {
  font-size: var(--t-xs);
  color: var(--muted);
}

.member__remove {
  flex: none;
  font-size: var(--t-xs);
  font-weight: 600;
}

.member-add__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  margin-top: 10px;
}

.member-add__form .field {
  flex: 1 1 200px;
  margin: 0;
}

/* --- Formularseiten: Zusammenfassung verknuepfen, To-dos verbinden ---------- */
.steps {
  margin: 0 0 20px;
  padding-left: 22px;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.steps li + li {
  margin-top: 4px;
}

.steps a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.connect-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.connect-grid > .card + .card {
  margin-top: 0;
}

@media (max-width: 900px) {
  .connect-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.connect-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.connect-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}

.connect-item:hover {
  background: var(--accent-soft);
}

.connect-item input {
  flex: none;
  margin-top: 2px;
}

.connect-item__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.connect-item__title {
  font-size: var(--t-sm);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.connect-item__meta {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--muted);
}

.connect-summary .card__title {
  margin-bottom: 12px;
}

/* --- Entscheidungsseite: Entscheidung oder Blocker -------------------------- */
.decision-kind__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.decision-kind__option {
  display: flex;
  flex: 1 1 220px;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
}

.decision-kind__option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.decision-kind__option input {
  flex: none;
  margin-top: 1px;
}

.decision-kind__title {
  display: block;
  font-weight: 650;
}

.field-row > .only-decision,
.field-row > .only-blocker {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
}

/* Die zur gewaehlten Art unpassende Gruppe ausblenden. Ohne :has() greift keine der
   Regeln und beide Gruppen bleiben sichtbar — der Server wertet nur die gewaehlte aus. */
.decision-form:has(input[name='waiting_kind'][value='blocker']:checked) .only-decision,
.decision-form:not(:has(input[name='waiting_kind'][value='blocker']:checked)) .only-blocker {
  display: none;
}

/* --- CRM-Abgleich (#12): Admin-Unternavigation, Admin-Seite, CRM-Angaben ---- */
/* Unternavigation im Admin-Bereich (Nutzer, CRM-Abgleich): wie die Hauptnavigation,
   aber als Leiste ueber dem Seitenkopf. */
.subnav {
  display: flex;
  gap: 4px;
  margin: 0 0 20px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.subnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.subnav__link:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.subnav__link[aria-current='page'] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

/* Herkunfts-Badge im Projektkopf ("aus CRM-Journey"): Umriss, keine Ampelfarbe. */
.pill--crm {
  --pill-bg: var(--accent-soft);
  --pill-ink: var(--accent-ink);
  gap: 5px;
}

/* Beschreibung aus dem CRM: Absaetze und Zeilenumbrueche bleiben erhalten. */
.project-summary__text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Kachel "Kunde": Phase und Typ als kurze Begriffsliste unter der Firma. */
.tile__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 10px 0 0;
  font-size: var(--t-sm);
}

.tile__fact {
  display: contents;
}

.tile__fact dt {
  color: var(--muted);
}

.tile__fact dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tile__source a,
.project-summary__source a {
  font-weight: 600;
}

/* Admin-Seite CRM-Abgleich */
.crm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 16px;
}

@media (max-width: 900px) {
  .crm-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.crm-grid > .card + .card,
.crm-card + .crm-card {
  margin-top: 0;
}

.crm-card {
  margin-bottom: 16px;
}

.crm-grid > .crm-card {
  margin-bottom: 0;
}

.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 20px;
  margin: 12px 0 0;
  font-size: var(--t-sm);
}

.facts__row {
  display: contents;
}

.facts__row dt {
  color: var(--muted);
}

.facts__row dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.crm-card__note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--warn);
  border-radius: 8px;
  background: var(--warn-soft);
  font-size: var(--t-sm);
  color: var(--ink);
}

.crm-card__error {
  margin: 12px 0 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--warn);
}

.crm-kpis {
  margin: 12px 0 0;
  gap: 12px;
}

.crm-kpis .kpi {
  padding: 12px 14px;
  background: var(--surface-2);
  box-shadow: none;
}

.crm-hints + .crm-hints {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.crm-hints__help {
  margin: 0 0 8px;
  font-size: var(--t-xs);
  color: var(--ink-2);
}

.crm-hints__list {
  margin: 0;
  padding-left: 18px;
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
}

/* Projektformular eines CRM-Projekts: Hinweis oben, nur lesbare Felder. */
.form-note {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  font-size: var(--t-sm);
  color: var(--ink);
}

.field__label {
  font-size: var(--t-sm);
  font-weight: 600;
}

.readonly-text {
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: var(--ink-2);
}

:where(input)[readonly] {
  border-style: dashed;
  background: var(--surface-2);
  color: var(--ink-2);
}

/* --- Touch: groebere Zeiger bekommen 44px Zielgroesse (WCAG 2.5.5 als Komfort) */
@media (pointer: coarse) {
  .btn,
  .nav__link,
  .subnav__link,
  .brand-link,
  .segmented__label,
  .chip-toggle__label,
  .move-menu__item,
  .new-todo__toggle,
  .member-add__toggle,
  .timeline-more__summary,
  .meeting__more-summary,
  .score-levels__summary,
  .kanban__board-link,
  :where(input:not([type='checkbox'], [type='radio']), select) {
    min-height: 44px;
  }

  .move-menu__toggle {
    width: 44px;
    height: 44px;
  }
}