/* styles.css — Ergaenzungen zu Tailwind (Palette identisch zum PDF) */

:root {
  --navy: #16324F;
  --navy-hell: #1E4066;
  --orange: #E8853D;
  --gruen: #3E9C63;
  --rot: #C44E52;
  --hellgrau: #EEF1F5;
  --mittelgrau: #5C6773;
}

body { font-feature-settings: "tnum" 0; }

.uebergang,
.uebergang * { transition: background-color .18s ease, color .18s ease,
                           border-color .18s ease, transform .18s ease,
                           opacity .18s ease; }

/* Statusfarben — durchgaengig in Tabellen, Diagrammen und Badges */
.status-offen         { background: #EEF1F5; color: #5C6773; }
.status-beantragt     { background: #FDF0E4; color: #B4622A; }
.status-entfernt      { background: #E7F0FC; color: #2A5DA8; }
.status-bestaetigt    { background: #EAF4EE; color: #2E7A4C; }
.status-abgerechnet   { background: #DDEEE3; color: #1D5233; }
.status-abgelehnt,
.status-wieder_online { background: #FBEAEA; color: #A03A3E; }

.kat-A { background: #EAF4EE; color: #2E7A4C; }
.kat-B { background: #FDF0E4; color: #B4622A; }
.kat-C { background: #FDF0E4; color: #B4622A; }
.kat-D { background: #FBEAEA; color: #A03A3E; }

.navi-aktiv { background: #1E4066; color: #fff; }
.navi-aktiv .navi-strich { opacity: 1; }

/* Ladezustand */
.dreher {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(22, 50, 79, .18);
  border-top-color: var(--orange);
  display: inline-block;
  animation: drehen .7s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

.einblenden { animation: rein .22s ease-out; }
@keyframes rein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* Aufklappbarer Bewertungstext */
.text-kurz {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Zeitleiste */
.zeitleiste { position: relative; padding-left: 18px; }
.zeitleiste::before {
  content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px;
  width: 2px; background: #E2E8F0;
}
.zeitpunkt::before {
  content: ""; position: absolute; left: 0; margin-top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--orange);
}

/* Tabellen */
.tab th { font-weight: 600; font-size: 11.5px; letter-spacing: .04em;
          text-transform: uppercase; color: var(--mittelgrau); }
.tab tbody tr:hover { background: #FAFCFE; }

/* Scrollbalken dezent halten */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

@media print { aside, #hinweise { display: none; } }