/* Schulungen - Akzent und Sonderbausteine fuer den Bildschirm. Das gemeinsame Bild kommt aus firmen.css,
   der Ausdruck aus styles.css (unveraendert). Farben nur ueber die Variablen aus firmen.css. */
:root {
  --g: linear-gradient(135deg, #a3e635 0%, #65a30d 60%, #134e4a 120%);
  --accent: #65a30d;
}

nav.tabs { flex-wrap: wrap; }
.badge.gueltig { color: var(--ok); }
.badge.abgelaufen { color: var(--off); }
.badge.zusatz { color: var(--akzent-stark); }
.badge.stillgelegt { color: var(--muted); }
.wahl.spalte { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.wahl label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); cursor: pointer; }
.wahl label span { min-width: 0; overflow-wrap: anywhere; }
#gError { margin-bottom: 10px; }
@media (max-width: 560px) {
  nav.tabs button { font-size: 13px; padding: 10px 2px; }
}
.buttons { display: grid; }
.kennzahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; }
@media (min-width: 561px) {
  .kennzahlen { grid-template-columns: repeat(4, 1fr); }
}
.kennzahlen .card { margin: 0; padding: 12px 14px; min-width: 0; }
.stat b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat b.rot { color: var(--off); }
.stat b.gelb { color: var(--warn); }
.karte { display: grid; gap: 4px; width: 100%; text-align: left; cursor: pointer; }
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kopf .name { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.kopf h3 { min-width: 0; overflow-wrap: anywhere; }
.karte .sub { color: var(--text-soft); font-size: 14px; overflow-wrap: anywhere; min-width: 0; }
.karte .sub.muted { color: var(--muted); font-size: 13px; }
.liste { list-style: none; padding: 0; display: grid; gap: 0; margin-top: 8px; }
.liste li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
.liste li > span:first-child { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; flex: 1; }
.liste li.weg > span:first-child { opacity: .55; }
.liste.verlauf li.weg > span:first-child b { text-decoration: line-through; }
.knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; max-width: 45%; }
.grad { font-size: 14px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.zeile-stand { border-top: 1px solid var(--border); padding-top: 7px; margin-top: 3px; line-height: 1.5; }
.balken { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--akzent-flaeche); }
button.link { background: none; border: 0; padding: 0; color: var(--text); font-weight: 700; text-decoration: underline; text-align: left; }
.breit { display: none; }
@media (min-width: 700px) {
  .breit { display: block; }
  .schmal { display: none; }
}
.rahmen { overflow-x: auto; padding: 0; max-width: 100%; }
table.matrix { border-collapse: collapse; font-size: 13px; min-width: 100%; }
table.matrix th, table.matrix td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; white-space: nowrap; }
table.matrix tbody tr:last-child th, table.matrix tbody tr:last-child td { border-bottom: 0; }
table.matrix thead th { color: var(--text-soft); font-weight: 600; white-space: normal; min-width: 112px; max-width: 180px; overflow-wrap: break-word; hyphens: auto; }
table.matrix tbody th { position: sticky; left: 0; background: var(--surface); min-width: 0; }
table.matrix td.gueltig { background: color-mix(in srgb, var(--ok) 7%, transparent); }
table.matrix td.bald { background: color-mix(in srgb, var(--warn) 10%, transparent); }
table.matrix td.abgelaufen, table.matrix td.fehlt { background: color-mix(in srgb, var(--off) 11%, transparent); }
table.matrix td.gueltig b { color: var(--ok); }
table.matrix td.bald b { color: var(--warn); }
table.matrix td.abgelaufen b, table.matrix td.fehlt b { color: var(--off); }
table.matrix td.zusatz b { color: var(--akzent-stark); }