/*
 * Projektplan -- Zeitachse (gantt-render.js).
 *
 * Farben nur ueber die Variablen unten. Dunkel ausschliesslich per Schalter
 * (:root[data-theme="dark"]), nie ueber das Systemschema: Hell ist auch bei
 * dunklem System die Vorgabe, wie in allen geprueften Werkzeugen.
 *
 * Kontrast nach WCAG 2.2 SC 1.4.11 (Grafik >= 3:1) und 1.4.3 (Text >= 4.5:1),
 * gerechnet mit der relativen Leuchtdichte der WCAG-Definition:
 *
 *   Hell                                        gegen Grund   Streifen   Auswahlzeile
 *   --pp-kritisch      #c2381d (Rand, Anteil)       5,42        4,94       4,54
 *   --pp-kritisch      gegen Rest #f6cbc2           3,67
 *   --pp-fortschritt   #1b4965 (Rand, Anteil)       9,60        8,76       8,05
 *   --pp-fortschritt   gegen Rest #b9d3e3           6,17
 *   --pp-sammel        #334155                     10,35        9,45
 *   --pp-pfeil         #64748b                      4,76        4,34
 *   --pp-heute         #b45309                      5,02        4,58
 *   --pp-stichtag      #15803d                      5,02        4,58
 *   --pp-verzug        #b91c1c                      6,47
 *   --pp-za-auswahl       #2563eb                      5,17                   4,33
 *   --pp-text          #1e293b                     14,63       13,35
 *   --pp-kopf-text     #475569 auf #f8fafc          7,24
 *
 *   Dunkel (Grund #111827, Streifen #1a2333)
 *   --pp-kritisch      #ff8a73                      7,72        6,86   gegen Rest #5a2a22: 5,11
 *   --pp-fortschritt   #7fb6d9                      8,11        7,20   gegen Rest #2b4a60: 4,26
 *   --pp-pfeil         #94a3b8                      6,92        6,15
 *   --pp-heute         #fbbf24                     10,63
 *   --pp-stichtag      #4ade80                     10,18
 *   --pp-verzug        #f87171                      6,41
 *   --pp-za-auswahl       #60a5fa                      6,98   auf Auswahlzeile #1e3a5f: 4,52
 *   --pp-text          #e5e7eb                     14,33       12,73
 *
 * Der kritische Weg haengt nicht an der Farbe allein (SC 1.4.1): kritische
 * Balken und Pfeile tragen den doppelten Rand bzw. die doppelte Strichstaerke.
 * Wer --pp-grund an die Seite anpasst, rechnet diese Tabelle neu.
 */

:root {
  /* --pp-za-auswahl, nicht --pp-auswahl: dieser Name gehoert in styles.css der
     Tabellenzeile (helles Blau). Hier ueberschrieb er ihn mit dem Balkenblau --
     Text auf der gewaehlten Zeile 2,83:1, Fokusring 1,04:1 (Review 2026-10-01). */
  --pp-grund: #ffffff;
  --pp-frei: #f1f5f9;
  --pp-feiertag-strich: #b4c0cf;
  --pp-raster: #e2e8f0;
  --pp-zeilenlinie: #eef2f6;
  --pp-text: #1e293b;
  --pp-kopf-grund: #f8fafc;
  --pp-kopf-text: #475569;
  --pp-kopf-linie: #cbd5e1;
  --pp-kopf-frei: #eef2f6;
  --pp-balken: #b9d3e3;
  --pp-fortschritt: #1b4965;
  --pp-sammel: #334155;
  --pp-sammel-fortschritt: #94a3b8;
  --pp-kritisch: #c2381d;
  --pp-kritisch-rest: #f6cbc2;
  --pp-pfeil: #64748b;
  --pp-heute: #b45309;
  --pp-stichtag: #15803d;
  --pp-verzug: #b91c1c;
  --pp-za-auswahl: #2563eb;
  --pp-auswahl-zeile: #e0ecff;
  --pp-geist: #2563eb;
  --pp-kopfhoehe: 48px;
}

:root[data-theme="dark"] {
  --pp-grund: #111827;
  --pp-frei: #1a2333;
  --pp-feiertag-strich: #3e4d66;
  --pp-raster: #1f2937;
  --pp-zeilenlinie: #1a2230;
  --pp-text: #e5e7eb;
  --pp-kopf-grund: #0f172a;
  --pp-kopf-text: #cbd5e1;
  --pp-kopf-linie: #334155;
  --pp-kopf-frei: #172033;
  --pp-balken: #2b4a60;
  --pp-fortschritt: #7fb6d9;
  --pp-sammel: #cbd5e1;
  --pp-sammel-fortschritt: #64748b;
  --pp-kritisch: #ff8a73;
  --pp-kritisch-rest: #5a2a22;
  --pp-pfeil: #94a3b8;
  --pp-heute: #fbbf24;
  --pp-stichtag: #4ade80;
  --pp-verzug: #f87171;
  --pp-za-auswahl: #60a5fa;
  --pp-auswahl-zeile: #1e3a5f;
  --pp-geist: #60a5fa;
}

/* ── Bereiche ─────────────────────────────────────────────────────────── */

.pp-zeitkopf {
  position: relative;
  overflow: hidden;
  height: var(--pp-kopfhoehe);
  background: var(--pp-kopf-grund);
}

.pp-kopf-svg {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.pp-zeitachse {
  overflow: auto;
  background: var(--pp-grund);
  overscroll-behavior: contain;
}

.pp-zeitachse:focus-visible {
  outline: 2px solid var(--pp-za-auswahl);
  outline-offset: -2px;
}

.pp-flaeche {
  position: relative;
}

.pp-diagramm {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  /* Das Diagramm scrollt mit dem Finger; nur die Griffe des gewaehlten Balkens nicht. */
  touch-action: pan-x pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.pp-diagramm text,
.pp-kopf-svg text {
  font-family: inherit;
  font-size: 12px;
  dominant-baseline: central;
}

/* ── Zeitleiste ───────────────────────────────────────────────────────── */

.pp-kopf-grund { fill: var(--pp-kopf-grund); }
.pp-kopf-linie { stroke: var(--pp-kopf-linie); stroke-width: 1; }
.pp-kopf-feld rect { fill: transparent; }
.pp-kopf-frei rect { fill: var(--pp-kopf-frei); }
/* `.pp-kopf-svg text` (12 px, Klasse plus Element) schlug die einfache Klasse bis 2026-10-02:
   die Zeitleiste stand in 12 px, gemessen wurde sie in 11 px (messe() in
   gantt-render.js) -- Beschriftungen ragten aus ihren Feldern. */
.pp-kopf-svg .pp-kopf-text { fill: var(--pp-kopf-text); font-size: 11px; }
.pp-kopf-oben { font-weight: 600; }
.pp-kopf-wt { font-size: 9.5px; }
.pp-kopf-feiertag .pp-kopf-text { font-weight: 600; }
.pp-kopf-heute rect { fill: var(--pp-heute); }
.pp-kopf-heute .pp-kopf-text { fill: var(--pp-grund); font-weight: 600; }
.pp-kopf-heute-marke { fill: var(--pp-heute); }

/* ── Hintergrund ──────────────────────────────────────────────────────── */

.pp-frei { fill: var(--pp-frei); }
.pp-schraffur-grund { fill: var(--pp-frei); }
.pp-schraffur-strich { stroke: var(--pp-feiertag-strich); stroke-width: 2.5; }
.pp-raster line { stroke: var(--pp-raster); stroke-width: 1; }
.pp-zeilenlinie { stroke: var(--pp-zeilenlinie); stroke-width: 1; }
.pp-zeile-auswahl { fill: var(--pp-auswahl-zeile); }
.pp-heute line { stroke: var(--pp-heute); stroke-width: 2; }

/* ── Vorgaenge ────────────────────────────────────────────────────────── */

.pp-balken-rect {
  fill: var(--pp-balken);
  stroke: var(--pp-fortschritt);
  stroke-width: 1;
}
.pp-fortschritt { fill: var(--pp-fortschritt); pointer-events: none; }
/* Basisplan: grau, schmal, unter dem Balken -- Vergleich, keine zweite Wahrheit. */
.pp-basis { fill: var(--pp-basis, #64748b); pointer-events: none; }
.pp-basis-raute { fill: none; stroke: var(--pp-basis, #64748b); stroke-width: 1.5; }

.pp-kritisch .pp-balken-rect {
  fill: var(--pp-kritisch-rest);
  stroke: var(--pp-kritisch);
  stroke-width: 2;
}
.pp-kritisch .pp-fortschritt { fill: var(--pp-kritisch); }

/*
 * Farbe nach Ressource (engine/farben.js). Palette hell wie im PDF; Kontrast
 * Rand gegen Grund 4,76-7,35 : 1, Rand gegen Fuellung 3,07-3,17 : 1. Dunkel:
 * Rand gegen #111827 8,54-13,58 : 1, gegen Fuellung 5,39-7,27 : 1.
 * Der kritische Weg bleibt erkennbar: roter, doppelter Rand um die
 * Ressourcenfarbe -- Fuellung und Fortschritt gehoeren der Ressource.
 */
.pp-r0 { --pp-r-dunkel: #1d4ed8; --pp-r-hell: #9cb1ee; }
.pp-r1 { --pp-r-dunkel: #b45309; --pp-r-hell: #f7c493; }
.pp-r2 { --pp-r-dunkel: #15803d; --pp-r-hell: #a3dab6; }
.pp-r3 { --pp-r-dunkel: #7e22ce; --pp-r-hell: #c69ee9; }
.pp-r4 { --pp-r-dunkel: #0f766e; --pp-r-hell: #8dd0c8; }
.pp-r5 { --pp-r-dunkel: #be185d; --pp-r-hell: #f3abc8; }
.pp-r6 { --pp-r-dunkel: #7c4a1e; --pp-r-hell: #cba07a; }
.pp-r7 { --pp-r-dunkel: #4d7c0f; --pp-r-hell: #bad48e; }
.pp-r-ohne { --pp-r-dunkel: #64748b; --pp-r-hell: #ccd1d9; }
:root[data-theme="dark"] .pp-r0 { --pp-r-dunkel: #93b4f7; --pp-r-hell: #1f3a6b; }
:root[data-theme="dark"] .pp-r1 { --pp-r-dunkel: #fbbf77; --pp-r-hell: #5a3511; }
:root[data-theme="dark"] .pp-r2 { --pp-r-dunkel: #6ee7a0; --pp-r-hell: #174a2c; }
:root[data-theme="dark"] .pp-r3 { --pp-r-dunkel: #d0a8f5; --pp-r-hell: #45206b; }
:root[data-theme="dark"] .pp-r4 { --pp-r-dunkel: #5eead4; --pp-r-hell: #134e4a; }
:root[data-theme="dark"] .pp-r5 { --pp-r-dunkel: #f9a8cb; --pp-r-hell: #5f1a3b; }
:root[data-theme="dark"] .pp-r6 { --pp-r-dunkel: #e2b98f; --pp-r-hell: #4a2f17; }
:root[data-theme="dark"] .pp-r7 { --pp-r-dunkel: #bef264; --pp-r-hell: #334d12; }
:root[data-theme="dark"] .pp-r-ohne { --pp-r-dunkel: #94a3b8; --pp-r-hell: #334155; }
.pp-farbe-ressource .pp-vorgang .pp-balken-rect { fill: var(--pp-r-hell); stroke: var(--pp-r-dunkel); }
.pp-farbe-ressource .pp-vorgang .pp-fortschritt { fill: var(--pp-r-dunkel); }
.pp-farbe-ressource .pp-vorgang.pp-kritisch .pp-balken-rect { stroke: var(--pp-kritisch); stroke-width: 2; }

.pp-klammer { fill: var(--pp-sammel); }
.pp-kritisch .pp-klammer { fill: var(--pp-kritisch); stroke: var(--pp-kritisch); stroke-width: 1; }
.pp-sammel-fortschritt { fill: var(--pp-sammel-fortschritt); pointer-events: none; }

.pp-raute {
  fill: var(--pp-grund);
  stroke: var(--pp-fortschritt);
  stroke-width: 2;
}
.pp-erledigt .pp-raute { fill: var(--pp-fortschritt); }
.pp-kritisch .pp-raute { stroke: var(--pp-kritisch); stroke-width: 3; }
.pp-kritisch.pp-erledigt .pp-raute { fill: var(--pp-kritisch); }
.pp-farbe-ressource .pp-vorgang:not(.pp-kritisch) .pp-raute { stroke: var(--pp-r-dunkel); }
.pp-farbe-ressource .pp-vorgang.pp-erledigt:not(.pp-kritisch) .pp-raute { fill: var(--pp-r-dunkel); }
.pp-haken {
  fill: none;
  stroke: var(--pp-grund);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.pp-name {
  fill: var(--pp-text);
  /* Lesbar auch ueber Pfeilen und Streifen: ein Saum in Grundfarbe. */
  paint-order: stroke;
  stroke: var(--pp-grund);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.pp-name-sammel { font-weight: 600; }

.pp-ausgewaehlt .pp-balken-rect,
.pp-ausgewaehlt .pp-raute,
.pp-ausgewaehlt .pp-klammer {
  stroke: var(--pp-za-auswahl);
  stroke-width: 2;
}
.pp-ausgewaehlt.pp-kritisch .pp-balken-rect { stroke-width: 3; }

/* ── Stichtag ─────────────────────────────────────────────────────────── */

.pp-stichtag-linie { stroke: var(--pp-stichtag); stroke-width: 2; stroke-dasharray: 3 2; }
.pp-stichtag-marke { fill: var(--pp-stichtag); }
.pp-stichtag.pp-verzug .pp-stichtag-linie { stroke: var(--pp-verzug); stroke-dasharray: none; }
.pp-stichtag.pp-verzug .pp-stichtag-marke { fill: var(--pp-verzug); }
.pp-verzug-strecke { stroke: var(--pp-verzug); stroke-width: 1; pointer-events: none; }
.pp-verzug-strich { stroke: var(--pp-verzug); stroke-width: 2; }

/* ── Pfeile ───────────────────────────────────────────────────────────── */

.pp-pfeil-linie { fill: none; stroke: var(--pp-pfeil); stroke-width: 1.5; }
.pp-pfeil-spitze { fill: var(--pp-pfeil); }
.pp-pfeil.pp-kritisch .pp-pfeil-linie { stroke: var(--pp-kritisch); stroke-width: 2.5; }
.pp-pfeil.pp-kritisch .pp-pfeil-spitze { fill: var(--pp-kritisch); }

/* ── Griffe und Anker ─────────────────────────────────────────────────── */

.pp-treffer {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}
.pp-balken .pp-treffer[data-rolle="flaeche"],
.pp-meilenstein .pp-treffer[data-rolle="flaeche"] { cursor: grab; }
.pp-sammel .pp-treffer { cursor: pointer; }
.pp-griff-anfang,
.pp-griff-ende,
.pp-griff-fortschritt { cursor: ew-resize; }
.pp-anker { cursor: crosshair; }

.pp-griff-zeichen,
.pp-anker-zeichen {
  opacity: 0;
  pointer-events: none;
}
.pp-griff-zeichen { fill: var(--pp-text); }
.pp-anker-zeichen { fill: var(--pp-grund); stroke: var(--pp-za-auswahl); stroke-width: 2; }

@media (hover: hover) {
  .pp-vorgang:hover .pp-griff-zeichen,
  .pp-vorgang:hover .pp-anker-zeichen { opacity: 1; }
}
.pp-ausgewaehlt .pp-griff-zeichen,
.pp-ausgewaehlt .pp-anker-zeichen,
.pp-gezogen .pp-griff-zeichen { opacity: 1; }

/* Erst ein Tipp waehlt, dann sind die Griffe dieses einen Balkens ziehbar. */
.pp-ausgewaehlt [data-rolle]:not([data-rolle="sammel"]) { touch-action: none; }

/* ── Ziehen ───────────────────────────────────────────────────────────── */

.pp-zieht,
.pp-zieht .pp-treffer { cursor: grabbing; }
.pp-zieht-beziehung,
.pp-zieht-beziehung .pp-treffer { cursor: crosshair; }
.pp-ziehebene { pointer-events: none; }
.pp-geist {
  fill: none;
  stroke: var(--pp-geist);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.pp-gezogen .pp-balken-rect,
.pp-gezogen .pp-raute { stroke: var(--pp-za-auswahl); stroke-width: 2; }
.pp-zugleine { fill: none; stroke: var(--pp-za-auswahl); stroke-width: 2; stroke-dasharray: 5 3; }
.pp-zugpunkt { fill: var(--pp-za-auswahl); }
.pp-zugleine.pp-ungueltig { stroke: var(--pp-verzug); }
.pp-zugpunkt.pp-ungueltig { fill: var(--pp-verzug); }
.pp-ziel .pp-balken-rect,
.pp-ziel .pp-raute,
.pp-ziel .pp-klammer { stroke: var(--pp-stichtag); stroke-width: 3; }
.pp-ziel-ungueltig .pp-balken-rect,
.pp-ziel-ungueltig .pp-raute,
.pp-ziel-ungueltig .pp-klammer { stroke: var(--pp-verzug); stroke-width: 3; stroke-dasharray: 4 2; }

/* Bewegung: es gibt keine Uebergaenge und keine Animationen -- auch nicht,
   wenn eine Seitenregel sie vererbt. */
@media (prefers-reduced-motion: reduce) {
  .pp-zeitachse *,
  .pp-zeitkopf * { transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
  .pp-balken-rect, .pp-raute { stroke: CanvasText; }
  .pp-fortschritt, .pp-klammer, .pp-pfeil-spitze { fill: CanvasText; }
  .pp-pfeil-linie { stroke: CanvasText; }
  .pp-kritisch .pp-balken-rect, .pp-pfeil.pp-kritisch .pp-pfeil-linie { stroke: Highlight; }
  .pp-kritisch .pp-fortschritt { fill: Highlight; }
  .pp-basis { fill: GrayText; }
  .pp-basis-raute { fill: none; stroke: GrayText; }
}

@media print {
  .pp-treffer, .pp-griff-zeichen, .pp-anker-zeichen, .pp-ziehebene { display: none; }
}