/* Flotte365 Fuhrpark-Cockpit – Ergänzungen zum Portal-Stylesheet (Kennzahlen, Diagramme, Unternavigation) */
.unternav { display: flex; gap: 4px; flex-wrap: wrap; margin: -6px 0 18px; }
.unternav a { padding: 6px 12px; border-radius: 999px; font-size: .88rem; font-weight: 500; color: var(--grau-tief); border: 1px solid transparent; }
.unternav a:hover { background: var(--grau-hell); text-decoration: none; }
.unternav a.aktiv { background: var(--blau); color: #fff; border-color: var(--blau); }
.filterleiste select { max-width: 260px; }
.filter-aktiv { font-size: .85rem; color: var(--blau); background: var(--blau-hell); padding: 3px 10px; border-radius: 999px; }
.zeitraum-hinweis { font-size: .85rem; color: var(--leise); margin: -10px 0 16px; }

/* Kennzahlen-Kacheln mit Veränderung */
.kpi-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schatten); display: block; color: inherit; }
a.kpi:hover { border-color: var(--blau-licht); text-decoration: none; }
.kpi .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); }
.kpi .zahl { font-size: 1.7rem; font-weight: 600; line-height: 1.15; color: var(--blau-tief); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.kpi .zahl small { font-size: .95rem; font-weight: 500; color: var(--leise); }
.kpi .unter { font-size: .8rem; color: var(--leise); }
.kpi.navy { background: var(--blau); border-color: var(--blau); color: #fff; }
.kpi.navy .label, .kpi.navy .unter, .kpi.navy .zahl, .kpi.navy .zahl small { color: #fff; }
.kpi.navy .unter { opacity: .85; }
.delta { display: inline-block; font-size: .78rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.delta.gut { background: var(--ok-hell); color: var(--ok); }
.delta.schlecht { background: var(--fehler-hell); color: var(--fehler); }
.delta.neutral { background: var(--grau-hell); color: var(--grau-tief); }
.kpi.navy .delta.gut { background: rgba(255,255,255,.18); color: #cdeed2; }
.kpi.navy .delta.schlecht { background: rgba(255,255,255,.18); color: #ffd4d4; }
.kpi.navy .delta.neutral { background: rgba(255,255,255,.18); color: #fff; }

/* Diagramme */
.diagramm { position: relative; height: 260px; }
.diagramm.hoch { height: 320px; }
.diagramm.flach { height: 200px; }
.diagramm.klein { height: 180px; }
.karte h2 .klein { font-weight: 400; }
.raster-3-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.raster-1-1-1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.raster + .raster, .raster + .karte, .karte + .raster, .kpi-raster + .raster { margin-top: 16px; }

/* Hinweise / Auffälligkeiten */
.hinweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hinweise li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--rand); background: #fff; font-size: .92rem; }
.hinweise li::before { content: "•"; font-size: 1.3rem; line-height: 1; }
.hinweise li.warn { border-color: #f0d9a3; background: var(--warn-hell); } .hinweise li.warn::before { color: var(--warn); }
.hinweise li.fehler { border-color: #e7b9b9; background: var(--fehler-hell); } .hinweise li.fehler::before { color: var(--fehler); }
.hinweise li.gut { border-color: #bcd9c0; background: var(--ok-hell); } .hinweise li.gut::before { color: var(--ok); }
.hinweise li.info { border-color: var(--blau-licht); background: var(--blau-hell); } .hinweise li.info::before { color: var(--blau); }
.hinweise a { color: inherit; }

/* Balkenlisten (CSS, ohne JS) – Ergänzungen */
.balken-zeile .balken-label.mittel { width: auto; }
.balkenliste.mittel .balken-zeile { grid-template-columns: 120px minmax(0, 1fr) auto; }
.balkenliste.breit .balken-zeile { grid-template-columns: 170px minmax(0, 1fr) auto; }
.balken.navy { background: var(--blau); }
.balken.warn { background: #e0a740; }
.balken.fehler { background: #c62828; }

/* Tabellen im Cockpit */
.tab-kompakt th, .tab-kompakt td { padding: 7px 8px; font-size: .9rem; }
.tab-kompakt tfoot td { font-weight: 600; background: var(--grau-hell); border-top: 2px solid var(--rand); }
td.zahl .leise { font-weight: 400; }
.marke { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.marke.auffaellig { background: var(--fehler-hell); color: var(--fehler); }
.marke.faellig { background: var(--warn-hell); color: var(--warn); }
.marke.ueberfaellig { background: var(--fehler-hell); color: var(--fehler); }
.marke.beendet { background: var(--grau-hell); color: var(--grau-tief); }
.marke.ok { background: var(--ok-hell); color: var(--ok); }
.definition { font-size: .82rem; color: var(--leise); margin-top: 10px; }
.definition dt { font-weight: 600; display: inline; } .definition dd { display: inline; margin: 0 0 0 4px; }
.definition div { margin-top: 3px; }

/* Fahrzeugakte */
.akte-kopf { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.akte-kopf .kennzeichen { font-size: 1.5rem; padding: 2px 12px; }
.akte-kopf h1 { margin: 0; }

/* Bericht */
.bericht h2 { margin-top: 22px; border-bottom: 1px solid var(--rand); padding-bottom: 6px; }
.bericht .karte { break-inside: avoid; }

@media (max-width: 860px) {
  .raster-3-1, .raster-1-1-1 { grid-template-columns: 1fr; }
  .diagramm, .diagramm.hoch { height: 240px; }
  .kpi .zahl { font-size: 1.4rem; }
}
@media print {
  .unternav, .filterleiste, .kopfzeile form { display: none !important; }
  .kpi { border: 1px solid #ccc; box-shadow: none; }
  .kpi.navy { background: #fff !important; color: #000; border-color: #002060; }
  .kpi.navy .label, .kpi.navy .zahl, .kpi.navy .unter { color: #000; }
  .diagramm { height: 220px; }
  .karte, .kpi, .hinweise li { break-inside: avoid; }
  main { max-width: none; padding: 0; }
  body.seite-breit main { max-width: none; }
}