/* Smart-BN Learning – gemeinsame Gestaltung */
:root {
  --grund: #f5f6f8; --karte: #fff; --text: #1d2430; --leise: #5b6574; --linie: #dde2e8;
  --akzent: #1f5fa8; --akzent-weich: #e8f0fa; --gut: #1d7a46; --gut-weich: #e6f4ec;
  --warn: #9a5b00; --warn-weich: #fff4e0; --schlecht: #b3261e; --schlecht-weich: #fdecea;
}
@media (prefers-color-scheme: dark) {
  :root { --grund: #14181e; --karte: #1c222b; --text: #e6e9ee; --leise: #9aa4b2; --linie: #2c3440;
    --akzent: #7fb0ea; --akzent-weich: #1d2a3b; --gut: #6fcf97; --gut-weich: #16291f;
    --warn: #f0b354; --warn-weich: #2e2414; --schlecht: #f28b82; --schlecht-weich: #331a19; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 980px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 24px; margin: 0 0 4px; } h2 { font-size: 18px; margin: 28px 0 10px; } h3 { font-size: 16px; margin: 0 0 8px; }
a { color: var(--akzent); }
.leise, .hinweis-klein { color: var(--leise); font-size: 14px; }
.kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.marke { display: inline-block; background: var(--akzent); color: var(--karte); border-radius: 4px; padding: 1px 7px; font-size: 12px; font-weight: 600; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 18px; margin-bottom: 14px; }
.karte.breit { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); font-weight: 600; }
td.z, th.z { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 600; border-bottom: none; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
dt { color: var(--leise); } dd { margin: 0; font-family: ui-monospace, Consolas, monospace; font-size: 13px; word-break: break-all; }
.knopf, button { display: inline-block; border: 1px solid var(--akzent); background: var(--akzent); color: var(--karte); border-radius: 8px;
  padding: 9px 16px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.knopf.zweit, button.zweit { background: transparent; color: var(--akzent); }
.knopf.klein, button.klein { padding: 4px 10px; font-size: 14px; font-weight: 500; }
form.inline { display: inline; margin: 0; }
.status { display: inline-block; border-radius: 999px; padding: 1px 10px; font-size: 13px; font-weight: 600; }
.status.offen { background: var(--akzent-weich); color: var(--akzent); }
.status.begonnen { background: var(--warn-weich); color: var(--warn); }
.status.abgeschlossen { background: var(--gut-weich); color: var(--gut); }
progress.fortschritt { display: block; width: 100%; height: 8px; margin: 8px 0; border: 0; border-radius: 999px; background: var(--linie); color: var(--akzent); -webkit-appearance: none; appearance: none; }
progress.fortschritt::-webkit-progress-bar { background: var(--linie); border-radius: 999px; }
progress.fortschritt::-webkit-progress-value { background: var(--akzent); border-radius: 999px; }
progress.fortschritt::-moz-progress-bar { background: var(--akzent); border-radius: 999px; }
.abstand-unten { margin-bottom: 14px; }
.kurs { display: grid; gap: 6px; }
.kurs .titel { font-size: 18px; font-weight: 700; }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center; }
/* Station */
.station-kopf { margin-bottom: 18px; }
.station-kopf .untertitel { color: var(--leise); font-size: 17px; }
.nachricht { border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; margin: 14px 0; background: var(--karte); }
.nachricht .leiste { background: var(--akzent-weich); padding: 8px 14px; font-size: 13px; color: var(--leise); }
.nachricht .felder { padding: 10px 14px; border-bottom: 1px solid var(--linie); font-size: 14px; }
.nachricht .felder b { display: inline-block; min-width: 64px; color: var(--leise); font-weight: 500; }
.nachricht .absender { font-family: ui-monospace, Consolas, "Courier New", monospace; }
.nachricht .text { padding: 14px; white-space: pre-line; }
.nachricht .link { margin: 0 14px 14px; }
.nachricht .link span { display: inline-block; background: var(--akzent); color: var(--karte); border-radius: 6px; padding: 7px 14px; font-weight: 600; }
.nachricht .link small { display: block; color: var(--leise); margin-top: 6px; font-family: ui-monospace, Consolas, monospace; }
.warnzeichen { background: var(--warn-weich); border-left: 4px solid var(--warn); border-radius: 8px; padding: 12px 16px; margin: 12px 0; }
.warnzeichen h3 { color: var(--warn); }
.warnzeichen ul, .merkpunkte ul { margin: 0; padding-left: 20px; }
.merkpunkte { background: var(--akzent-weich); border-radius: 8px; padding: 12px 16px; margin: 12px 0; }
.hinweis { border-left: 4px solid var(--gut); background: var(--gut-weich); border-radius: 8px; padding: 12px 16px; margin: 12px 0; }
.schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 12px 0; }
.schritt { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 14px; }
.schritt .nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--akzent); color: var(--karte); font-weight: 700; margin-bottom: 6px; }
.meldeweg { border: 1px dashed var(--linie); border-radius: 8px; padding: 12px 16px; color: var(--leise); }
/* Test */
fieldset { border: 1px solid var(--linie); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; background: var(--karte); }
legend { font-weight: 600; padding: 0 6px; }
label.antwort { display: flex; gap: 10px; align-items: flex-start; padding: 6px 4px; cursor: pointer; }
label.antwort input { margin-top: 5px; }
.ergebnis { border-radius: 12px; padding: 18px; margin-bottom: 14px; }
.ergebnis.gut { background: var(--gut-weich); border: 1px solid var(--gut); }
.ergebnis.schlecht { background: var(--schlecht-weich); border: 1px solid var(--schlecht); }
/* Zertifikat */
.zertifikat { background: #fff; color: #1d2430; border: 1px solid #c9d2de; border-radius: 6px; padding: 48px 56px; text-align: center;
  aspect-ratio: 297 / 210; display: flex; flex-direction: column; justify-content: center; gap: 10px; position: relative; }
.zertifikat::before { content: ""; position: absolute; inset: 14px; border: 2px solid #1f5fa8; border-radius: 4px; pointer-events: none; }
.zertifikat .absender { letter-spacing: .18em; text-transform: uppercase; color: #1f5fa8; font-weight: 700; font-size: 14px; }
.zertifikat .art { font-size: 34px; font-weight: 700; margin: 4px 0; }
.zertifikat .name { font-size: 28px; font-weight: 600; border-bottom: 1px solid #c9d2de; display: inline-block; padding: 0 24px 4px; margin: 6px auto; }
.zertifikat .kurstitel { font-size: 20px; font-weight: 600; }
.zertifikat .daten { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; font-size: 14px; margin-top: 18px; }
.zertifikat .daten b { display: block; font-size: 12px; color: #5b6574; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.zertifikat .nummer { font-family: ui-monospace, Consolas, monospace; }
@media (max-width: 640px) { .zertifikat { aspect-ratio: auto; padding: 32px 20px; } .zertifikat .art { font-size: 26px; } }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; } main { max-width: none; padding: 0; }
  .nicht-drucken { display: none !important; }
  .zertifikat { border: none; height: 186mm; aspect-ratio: auto; padding: 18mm 24mm; }
}
ul.personen { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
ul.personen li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Schulungsverwaltung */
.karte.gut { border-color: var(--gut); background: var(--gut-weich); }
.karte.schlecht { border-color: var(--schlecht); background: var(--schlecht-weich); }
.status.entfallen, .status.inaktiv, .status.entfernt, .status.hinweis { background: var(--linie); color: var(--leise); }
.status.aktiv, .status.verarbeitet, .status.aenderung { background: var(--gut-weich); color: var(--gut); }
.status.abgelehnt, .status.fehler { background: var(--schlecht-weich); color: var(--schlecht); }
.status.zuweisung { background: var(--akzent-weich); color: var(--akzent); }
.abstand-oben { margin-top: 18px; }
input, select { font: inherit; color: var(--text); background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 7px 10px; max-width: 100%; }
.formular { display: grid; gap: 10px; margin-top: 12px; }
.formular label { display: grid; gap: 4px; }
.spalten3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
fieldset { border: 1px solid var(--linie); border-radius: 10px; padding: 8px 12px; margin: 0; }
legend { color: var(--leise); font-size: 14px; padding: 0 4px; }
label.wahl { display: block; padding: 2px 0; }
details > summary { cursor: pointer; }
.status.ungeklaert { background: var(--warn-weich); color: var(--warn); }