body { font-size: 0.9rem; }
.navbar-brand { font-weight: bold; }
.card-header { font-weight: 600; }
code { color: #6f42c1; }
.table td, .table th { vertical-align: middle; }
footer { border-top: 1px solid #dee2e6; }
/* .date-field-narrow bleibt ausschliesslich als JS-Erkennungsklasse
   (Klick-zum-Oeffnen des nativen Kalenders) - die Breitenbegrenzung
   selbst liegt bewusst auf dem umgebenden Wrapper (.date-field-col),
   nicht auf dem Eingabefeld selbst: Bootstraps ".form-control" setzt
   "width: 100%" auf demselben Element - ein "max-width" auf demselben
   Selektor bleibt gegen diese Breitenregel unzuverlaessig. Der Wrapper
   begrenzt stattdessen den verfuegbaren Platz, "width: 100%" bezieht
   sich dann auf den bereits schmalen Wrapper. */
.date-field-col { max-width: 11rem; }
@media (max-width: 575.98px) {
  .date-field-col { max-width: 100%; }
}

/* Farbakzente der aufklappbaren Dashboard-Bereiche (Auftrag "Dashboard
   Reihenfolge/Aufklappbarkeit/Farbakzente") - reine Randfarbe, traegt
   bewusst keine alleinige Information (Ueberschrift bleibt Text), nutzt
   die von Bootstrap 4.6 bereits als CSS-Variablen bereitgestellten
   Theme-/Basisfarben statt neuer eigener Farbwerte. */
.dashboard-section {
  border-left: 4px solid transparent;
  padding-left: 0.75rem;
  margin-bottom: 1.5rem;
}
.dashboard-section > summary { cursor: pointer; }
.dashboard-section > summary h4 { display: inline; }
.dashboard-section-mandantennachrichten { border-left-color: var(--info); }
.dashboard-section-termine { border-left-color: var(--success); }
.dashboard-section-fristen { border-left-color: var(--danger); }
.dashboard-section-meine-aufgaben { border-left-color: var(--primary); }
.dashboard-section-erstellte-aufgaben { border-left-color: var(--purple); }
.dashboard-section-alle-aufgaben { border-left-color: var(--orange); }
.dashboard-section-zuletzt-bearbeitet { border-left-color: var(--secondary); }