/* PM_VIT – Gestaltung nach VIT-Farben (docs/gestaltung/farben.md).
   Logo-Blau #008CDB dient als Akzent; für Schaltflächen und Links wird ein dunkleres Blau
   verwendet, damit der Kontrast zu weißem Text ausreicht (WCAG AA). */
:root {
  --vit-blau: #008cdb;
  --vit-blau-dunkel: #0067a8;
  --vit-blau-dunkler: #005288;
  --vit-rot: #c3190a;
  --bs-primary: var(--vit-blau-dunkel);
  --bs-primary-rgb: 0, 103, 168;
  --bs-link-color: var(--vit-blau-dunkel);
  --bs-link-color-rgb: 0, 103, 168;
  --bs-link-hover-color: var(--vit-blau-dunkler);
  --bs-link-hover-color-rgb: 0, 82, 136;
}
.btn-primary {
  --bs-btn-bg: var(--vit-blau-dunkel);
  --bs-btn-border-color: var(--vit-blau-dunkel);
  --bs-btn-hover-bg: var(--vit-blau-dunkler);
  --bs-btn-hover-border-color: var(--vit-blau-dunkler);
  --bs-btn-active-bg: var(--vit-blau-dunkler);
  --bs-btn-active-border-color: var(--vit-blau-dunkler);
  --bs-btn-disabled-bg: var(--vit-blau-dunkel);
  --bs-btn-disabled-border-color: var(--vit-blau-dunkel);
}
.btn-outline-primary {
  --bs-btn-color: var(--vit-blau-dunkel);
  --bs-btn-border-color: var(--vit-blau-dunkel);
  --bs-btn-hover-bg: var(--vit-blau-dunkel);
  --bs-btn-hover-border-color: var(--vit-blau-dunkel);
  --bs-btn-active-bg: var(--vit-blau-dunkler);
}
.kopfleiste { border-top: 4px solid var(--vit-blau); background: #fff; border-bottom: 1px solid #dee2e6; }
.kopfleiste .navbar-brand img { height: 38px; width: auto; }
.kopfleiste .nav-link.active { font-weight: 600; color: var(--vit-blau-dunkel); }
.seitentitel { font-size: 1.6rem; margin-bottom: 1rem; }
.anmeldung-karte { max-width: 26rem; margin: 2rem auto; }
.tabelle-kompakt td, .tabelle-kompakt th { vertical-align: middle; }
.aenderungen { font-family: var(--bs-font-monospace); font-size: .8rem; white-space: pre-wrap; margin: 0; }
.raster-codes { font-family: var(--bs-font-monospace); font-size: 1.1rem; }

.manage-seite { max-width: 46rem; }
.formular-schmal { max-width: 40rem; }
.qr-code { width: 15rem; height: 15rem; background: #fff; padding: .5rem; border: 1px solid #dee2e6; }

/* Einstellungen: jeder Wert steht mit seiner Bezeichnung in einem Rahmen */
.parameter { background: #fff; border: 1px solid var(--bs-border-color); border-left: 4px solid var(--vit-blau); border-radius: .5rem; padding: .75rem 1rem; }
.parameter-wert { max-width: 16rem; }

/* Freie Tage: Datum als TT . MM . JJJJ mit Kalenderauswahl */
.datum-zeile { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.datum-teil { width: 5rem; }
.datum-teil.datum-jahr { width: 6.5rem; }
.datum-punkt { font-weight: 600; }
.datum-kalender { width: auto; margin-left: .5rem; }

.spalte-schmal { width: 1%; }
.feld-schmal { max-width: 8rem; }
.sortierlink { color: inherit; text-decoration: none; white-space: nowrap; }
.sortierlink:hover { text-decoration: underline; }

/* Ressourcen: intern und extern farblich getrennt */
.res-intern { --bs-table-bg: #f1f8fd; }
.res-extern { --bs-table-bg: #fff4e5; }
.res-intern > td:first-child { border-left: 4px solid var(--vit-blau); }
.res-extern > td:first-child { border-left: 4px solid #e8890c; }
.badge.art-intern { background-color: var(--vit-blau-dunkel); color: #fff; }
.badge.art-extern { background-color: #b25e00; color: #fff; }

/* Projekte */
.fortschritt { width: 7rem; height: .9rem; accent-color: var(--vit-blau-dunkel); }
.schritt-aktuell > td { background-color: #eaf4fb; }
.schritt-aktuell > td:first-child { border-left: 4px solid var(--vit-blau); }
.schritt-inaktiv { font-style: italic; }

/* Ampel-Auswahl: Einträge (und die gewählte Farbe) in den Ampelfarben */
option.ampel-gruen, select:has(option.ampel-gruen:checked) { background-color: #198754; color: #fff; }
option.ampel-gelb, select:has(option.ampel-gelb:checked) { background-color: #ffc107; color: #000; }
option.ampel-rot, select:has(option.ampel-rot:checked) { background-color: #dc3545; color: #fff; }

/* Gantt-Diagramm (SVG, vom Server gezeichnet). Farben nur über Klassen (CSP: keine Inline-Stile). */
.gantt { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; }
.gantt-beschriftung { flex: 0 0 auto; border-right: 1px solid var(--bs-border-color); }
.gantt-blatt { flex: 1 1 auto; overflow-x: auto; }
.gantt text { font-family: var(--bs-body-font-family); font-size: 12px; fill: #212529; }
.gantt a { cursor: pointer; text-decoration: none; }
.gantt a:hover text { text-decoration: underline; }
.gantt-zelle { fill: #f1f3f5; stroke: #dee2e6; stroke-width: 1; }
.gantt-zelle.tag-frei { fill: #e9ecef; }
.gantt .gantt-kopftext { font-size: 10px; text-anchor: middle; fill: #495057; }
.gantt .gantt-kopftitel { font-size: 11px; font-weight: 600; fill: #495057; }
.gantt-zeile { fill: transparent; }
.gantt-zeile-gerade { fill: #f8f9fa; }
.gantt .gantt-phasentext { font-weight: 600; }
.gantt .gantt-hinweis { fill: #6c757d; font-size: 11px; }
.gantt .gantt-text-ueberfaellig { fill: #b02a37; }
.gantt-flaeche.gantt-wochenende { fill: #dee2e6; opacity: .55; }
.gantt-flaeche.gantt-feiertag { fill: #ffd8a8; opacity: .7; }
.gantt-balken { fill: #adb5bd; stroke: rgba(0, 0, 0, .25); stroke-width: 1; }
.gantt-balken.status-geplant { fill: #6ea8fe; }
.gantt-balken.status-in_arbeit { fill: var(--vit-blau-dunkel); }
.gantt-balken.status-blockiert { fill: #ffc107; }
.gantt-balken.status-erledigt { fill: #198754; }
.gantt-balken.status-abgebrochen { fill: #6c757d; opacity: .6; }
.gantt-balken.ueberfaellig { stroke: #dc3545; stroke-width: 2; }
.gantt-fortschritt { fill: #198754; opacity: .85; pointer-events: none; }
.gantt .gantt-prozent { font-size: 10px; fill: #146c43; font-weight: 600; }
.gantt-legende .legende-balken.legende-fortschritt { background: linear-gradient(90deg, #198754 50%, #adb5bd 50%); }
.gantt-phase { fill: #343a40; }
.gantt-raute { stroke: #fff; stroke-width: 1; fill: var(--vit-blau-dunkel); }
.gantt-raute.raute-erreicht { fill: #198754; }
.gantt-raute.raute-gefaehrdet { fill: #dc3545; }
.gantt-raute.raute-verfehlt { fill: #842029; }
.gantt-raute-vereinbart { fill: none; stroke: #6c757d; stroke-width: 1.5; stroke-dasharray: 2 2; }
.gantt-pfeil { fill: none; stroke: #6c757d; stroke-width: 1.2; }
.gantt-pfeilspitze { fill: #6c757d; }
.gantt-heute { stroke: #dc3545; stroke-width: 1.5; }
.gantt .gantt-heute-text { fill: #dc3545; font-size: 11px; font-weight: 600; stroke: #fff; stroke-width: 3px; paint-order: stroke; }
.gantt-legende .legende-balken { display: inline-block; width: 1.1rem; height: .7rem; border-radius: 2px; vertical-align: middle; background: #adb5bd; }
.gantt-legende .legende-balken.status-in_arbeit { background: var(--vit-blau-dunkel); }
.gantt-legende .legende-balken.status-erledigt { background: #198754; }
.gantt-legende .legende-balken.status-blockiert { background: #ffc107; }
.gantt-legende .legende-balken.ueberfaellig { background: #fff; border: 2px solid #dc3545; }
.gantt-legende .legende-raute { display: inline-block; width: .7rem; height: .7rem; transform: rotate(45deg); vertical-align: middle; background: var(--vit-blau-dunkel); }
.gantt-legende .legende-raute.raute-gefaehrdet { background: #dc3545; }
.gantt-legende .legende-flaeche { display: inline-block; width: 1rem; height: .7rem; vertical-align: middle; }
.gantt-legende .legende-flaeche.gantt-feiertag { background: #ffd8a8; }
.gantt-legende .legende-flaeche.gantt-wochenende { background: #dee2e6; }

/* Prozessübersicht (SVG, vom Server gezeichnet) und Seitenfenster */
.prozess-blatt { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: auto; }
.prozess text { font-family: var(--bs-body-font-family); font-size: 12px; fill: #212529; text-anchor: middle; }
.pphase { fill: #f8f9fa; stroke: #dee2e6; }
.pphase-aktuell { fill: #eef6fc; stroke: #9ec9e8; }
.prozess .pphase-titel { font-size: 13px; font-weight: 600; }
.pknoten { cursor: pointer; }
.pknoten:focus { outline: none; }
.pknoten:focus-visible rect, .pknoten:focus-visible polygon { outline: 3px solid #0d6efd; outline-offset: 2px; }
.pknoten rect, .pknoten polygon { stroke-width: 1.5; fill: #f8f9fa; stroke: #adb5bd; }
.pknoten.status-erledigt rect, .pknoten.status-erledigt polygon { fill: #d1e7dd; stroke: #198754; }
.pknoten.status-aktuell rect, .pknoten.status-aktuell polygon { fill: #cfe2ff; stroke: var(--vit-blau-dunkel); stroke-width: 3; }
.pknoten.status-nichtEingetreten rect, .pknoten.status-nichtEingetreten polygon { fill: #fff; stroke: #ced4da; stroke-dasharray: 5 4; }
.pknoten.status-abgelehnt rect, .pknoten.status-abgelehnt polygon { fill: #f8d7da; stroke: #dc3545; stroke-width: 3; }
.pknoten.status-gefaehrdet rect, .pknoten.status-gefaehrdet polygon { fill: #f8d7da; stroke: #dc3545; stroke-width: 2.5; }
.prozess .pknoten.status-gefaehrdet text { fill: #58151c; }
.pknoten.art-ende { cursor: default; }
.prozess-legende .legende-kasten.legende-meilenstein { border-radius: 1rem; }
.pknoten.gewaehlt rect, .pknoten.gewaehlt polygon { stroke-width: 4.5; stroke: #212529; }
.pknoten:hover rect, .pknoten:hover polygon { filter: brightness(.96); }
.prozess .pknoten.status-erledigt text { fill: #0f5132; }
.prozess .pknoten.status-aktuell text { fill: #052c65; }
.prozess .pknoten.status-nichtEingetreten text { fill: #868e96; }
.prozess .pknoten.status-abgelehnt text { fill: #58151c; }
.prozess .pknoten-status { font-size: 11px; font-style: italic; }
.pkante { fill: none; stroke: #6c757d; stroke-width: 1.5; }
.pkante.gestrichelt { stroke-dasharray: 5 4; }
.pkante-spitze { fill: #6c757d; }
.prozess .pkante-text { font-size: 10px; fill: #495057; stroke: #fff; stroke-width: 3px; paint-order: stroke; }
.prozess .pkante-text.anker-start { text-anchor: start; }
.prozess .pkante-text.anker-end { text-anchor: end; }
.prozess-legende .legende-kasten { display: inline-block; width: 1.1rem; height: .75rem; border-radius: 3px; vertical-align: middle; border: 1.5px solid #adb5bd; background: #f8f9fa; }
.prozess-legende .legende-kasten.status-erledigt { background: #d1e7dd; border-color: #198754; }
.prozess-legende .legende-kasten.status-aktuell { background: #cfe2ff; border: 3px solid var(--vit-blau-dunkel); }
.prozess-legende .legende-kasten.status-nichtEingetreten { background: #fff; border: 1.5px dashed #adb5bd; }
#seitenfenster { width: 26rem; max-width: 100vw; }

/* Auslastung der Ressourcen (A4) */
/* Die Variablen sind nötig, weil Bootstrap Tabellenzellen und Karten über sie einfärbt */
.ausl-gruen { --bs-table-bg: #d1e7dd; --bs-card-bg: #d1e7dd; background-color: #d1e7dd; }
.ausl-gelb { --bs-table-bg: #fff3cd; --bs-card-bg: #fff3cd; background-color: #fff3cd; }
.ausl-rot { --bs-table-bg: #f8d7da; --bs-card-bg: #f8d7da; background-color: #f8d7da; }
.ausl-tabelle th, .ausl-tabelle td { white-space: nowrap; }
.ausl-tabelle .ausl-name { min-width: 12rem; text-align: left; }
.ausl-tabelle .ausl-zelle { min-width: 6.5rem; }
.ausl-tabelle .ausl-aktuell { box-shadow: inset 0 -3px 0 var(--vit-blau-dunkel); }
.ausl-link { display: block; color: inherit; text-decoration: none; padding: .1rem .25rem; }
.ausl-link:hover { text-decoration: underline; }
.ausl-rot .ausl-link { color: #58151c; }
.ausl-legende > span { margin-right: 1rem; }
.ausl-kasten { display: inline-block; width: 1.1rem; height: .75rem; border-radius: 3px; vertical-align: middle; border: 1px solid #adb5bd; }

/* Hinweise: rotes Ausrufezeichen bei kritischen, grüner Haken bei guten Nachrichten */
.hinweis-marke { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin-right: .4rem; border-radius: 50%; color: #fff; font-size: .8rem; font-weight: 700; line-height: 1; vertical-align: text-bottom; }
.hinweis-kritisch { background: #dc3545; }
.hinweis-gut { background: #198754; }

/* Zeiterfassung (A5) */
.zeiten-raster th, .zeiten-raster td { white-space: nowrap; }
.zeiten-raster td:first-child { white-space: normal; min-width: 14rem; }
.zeiten-raster .zeiten-heute { box-shadow: inset 0 -3px 0 var(--vit-blau-dunkel); }

/* Gespeicherte Ansichten: „Aktuelle Filter speichern“ als aufklappbarer Link */
.ansicht-speichern summary { cursor: pointer; color: var(--bs-link-color); }
.ansicht-speichern[open] summary { margin-bottom: 0.25rem; }

/* Testsystem (ADR-0015): auffälliger Balken über jeder Seite */
.testsystem-balken {
  background: repeating-linear-gradient(45deg, #ffc107, #ffc107 12px, #212529 12px, #212529 24px);
  color: #fff; text-align: center; font-weight: 700; letter-spacing: .05em;
  padding: .35rem .75rem; text-shadow: 0 0 3px #000, 0 0 3px #000;
}