/* Plenus Akademie — der Plenuscare-Look, derselbe wie in Plenus OS:
   Grün (#60B961) und Anthrazit auf hellem Grund, dunkler Modus folgt dem
   Gerät (prefers-color-scheme). Keine festen Farben unterhalb von :root —
   alles über Variablen, sonst bricht der dunkle Modus an einer Stelle.
   Drei Breiten: Handy (eine Spalte), iPad ab 720 px (zwei Spalten),
   Desktop ab 1100 px (breiter, Bogen und Fortbildungen über die volle
   Breite). Gleiche Klassen wie vorher — die Prüfungen kennen sie. */
:root {
  color-scheme: light dark;
  --a: #3E7C36;            /* Plenuscare-Grün, dunkel: Knöpfe, Links, Akzente */
  --brand: #60B961;        /* das helle Markengrün */
  --a-soft: #EAF4E7;       /* grüner Hauch: fertig, bestätigt */
  --pale: #F5F8F2;         /* Seitenhintergrund */
  --card: #FFFFFF;
  --tx: #2E2F31;
  --tx2: #5E6A63;
  --ln: #E1E8DC;
  --neutral: #F1F4EF;      /* ruhige Flächen: Meta-Kästen, offene Schritte */
  --amber: #A9631A;  --amber-soft: #FBF0E2;
  --red: #A93B2C;    --red-soft: #FBE9E6;
  --rosa: #9D174D;   --rosa-soft: #FCE7F3;   /* Entwurf */
  --mark: #FEF08A;   --mark-tx: #713F12;     /* [ANPASSEN]-Stellen */
  --schatten: 0 1px 2px rgba(46,47,49,0.06);
  font-size: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --a: #8CC77F; --brand: #60B961; --a-soft: #1C2A19; --pale: #111614; --card: #18201B;
    --tx: #E7EEE6; --tx2: #8D9A88; --ln: #26312A; --neutral: #1F2823;
    --amber: #E29459; --amber-soft: #332318; --red: #E0806F; --red-soft: #3A1F1B;
    --rosa: #F4A6C9; --rosa-soft: #3A1F2E; --mark: #5A4A12; --mark-tx: #FDE68A;
    --schatten: none;
  }
}
:root[data-theme="dark"] {
  --a: #8CC77F; --brand: #60B961; --a-soft: #1C2A19; --pale: #111614; --card: #18201B;
  --tx: #E7EEE6; --tx2: #8D9A88; --ln: #26312A; --neutral: #1F2823;
  --amber: #E29459; --amber-soft: #332318; --red: #E0806F; --red-soft: #3A1F1B;
  --rosa: #F4A6C9; --rosa-soft: #3A1F2E; --mark: #5A4A12; --mark-tx: #FDE68A;
  --schatten: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Instrument Sans", -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--pale);
  color: var(--tx);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ Kopfzeile */
header {
  background: var(--card);
  color: var(--tx);
  border-bottom: 1px solid var(--ln);
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: nowrap;
  position: sticky; top: 0; z-index: 5;
}
header h1 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
/* Rechts: wer angemeldet ist und der Abmelden-Knopf — auf schmalen Handys
   nur der Knopf, der Name steht ohnehin oben im Bogen. */
#wer-bin-ich { margin-left: auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 559px) { #wer-bin-ich { display: none; } #abmelden-knopf { margin-left: auto; } }
header h1 .wort { height: 26px; width: auto; display: block; }
header h1 .akademie {
  font-weight: 700; letter-spacing: 0.02em; color: var(--a);
  border-left: 2px solid var(--ln); padding-left: 0.6rem; line-height: 1;
}
/* Im dunklen Modus wird das Anthrazit des Logos hell, das Grün bleibt Grün. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wort, :root:not([data-theme="light"]) .zeichen { filter: invert(1) hue-rotate(180deg); }
}
:root[data-theme="dark"] .wort, :root[data-theme="dark"] .zeichen { filter: invert(1) hue-rotate(180deg); }

#wer-bin-ich { font-size: 0.88rem; color: var(--tx2); }
#abmelden-knopf { flex-shrink: 0; white-space: nowrap; }

button {
  font: inherit;
  cursor: pointer;
  border-radius: 0.6rem;
  border: 1px solid transparent;
  color: var(--tx);
}

#abmelden-knopf {
  background: var(--card);
  border: 1px solid var(--ln);
  color: var(--tx);
  padding: 0.4rem 0.9rem;
  font-size: 0.88rem;
}
#abmelden-knopf:hover { background: var(--neutral); }

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem;
}

.karte {
  background: var(--card);
  border: 1px solid var(--ln);
  border-radius: 1rem;
  padding: 1.1rem;
  margin-bottom: 1rem;
  box-shadow: var(--schatten);
}

.karte h2 { margin-top: 0; font-size: 1.05rem; }
.karte h3 { font-size: 0.95rem; color: var(--tx2); margin: 1rem 0 0.4rem; }

/* ---------------------------------------------------------- Anmeldung */
.passkey-knopf { width: 100%; margin-top: 0.7rem; padding: 0.7rem 1rem; }
#bildschirm-anmeldung, #bildschirm-passwort-wechsel { max-width: 440px; margin: 1rem auto; }
.marke-anmeldung { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 0.4rem 0 1rem; text-align: center; }
.marke-anmeldung .zeichen { width: 72px; height: auto; }
.marke-anmeldung .wort { width: 190px; height: auto; }
.marke-anmeldung .tiny { font-size: 0.72rem; color: var(--tx2); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; }

label { display: block; font-size: 0.9rem; margin: 0.6rem 0 0.25rem; }

input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="search"], select {
  width: 100%;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--ln);
  border-radius: 0.6rem;
  font: inherit;
  font-size: 1rem;
  background: var(--card);
  color: var(--tx);
}
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.knopf-primaer {
  background: var(--a);
  color: #fff;
  padding: 0.75rem 1.1rem;
  margin-top: 0.9rem;
  width: 100%;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 0.8rem;
}
.knopf-primaer:hover { filter: brightness(1.08); }
.knopf-primaer:disabled { background: var(--tx2); opacity: 0.6; cursor: not-allowed; filter: none; }

.knopf-sekundaer {
  background: var(--card);
  border: 1px solid var(--ln);
  color: var(--tx);
  padding: 0.5rem 0.9rem;
}
.knopf-sekundaer:hover { background: var(--neutral); }

.fehler {
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid var(--red);
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  margin-top: 0.7rem;
  font-size: 0.9rem;
}

.hinweis {
  color: var(--a);
  background: var(--a-soft);
  border: 1px solid var(--brand);
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  margin-top: 0.7rem;
  font-size: 0.9rem;
}

.fortschritt-leiste {
  height: 0.6rem;
  background: var(--neutral);
  border-radius: 1rem;
  overflow: hidden;
  margin: 0.4rem 0 0.2rem;
}
.fortschritt-leiste > div {
  height: 100%;
  background: var(--brand);
  transition: width 0.25s ease;
}
.fortschritt-text { font-size: 0.85rem; color: var(--tx2); }

.phase { margin-bottom: 0.8rem; }
.phase > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.block { margin: 0.5rem 0 0.9rem 0.4rem; }
.block-name { font-size: 0.85rem; color: var(--tx2); margin: 0.6rem 0 0.3rem; }

.punkt {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.3rem;
  border-bottom: 1px solid var(--ln);
}
.punkt:last-child { border-bottom: none; }
.punkt-text { flex: 1; font-size: 0.92rem; line-height: 1.35; }
.punkt-seiten { display: flex; gap: 0.4rem; flex-shrink: 0; }

.abzeichen-knopf {
  min-width: 2.6rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  border: 1px solid var(--ln);
  background: var(--neutral);
}
.abzeichen-knopf.gesetzt {
  background: var(--a-soft);
  border-color: var(--brand);
  color: var(--a);
  font-weight: 600;
}
.abzeichen-knopf.fremd {
  background: var(--neutral);
  color: var(--tx2);
  cursor: default;
}

.badge {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  background: var(--a-soft);
  color: var(--a);
  margin-left: 0.4rem;
}

.startpasswort-anzeige {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  color: var(--tx);
  padding: 0.6rem 0.8rem;
  border-radius: 0.6rem;
  margin: 0.5rem 0;
  word-break: break-all;
}

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.4rem 0.3rem; border-bottom: 1px solid var(--ln); }
th { color: var(--tx2); font-weight: 600; }

.badge-offen { background: var(--amber-soft); color: var(--amber); }

/* Ein Dokument zum Lesen: ruhig, breit, ohne Ablenkung. */
.dokument { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--brand); }
.dokument-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.dokument-titel { margin: 0.2rem 0 0; font-size: 1.15rem; color: var(--tx); }
.dokument-qm { font-size: 0.8rem; color: var(--tx2); margin: 0.4rem 0 0.8rem; padding: 0.4rem 0.6rem; background: var(--neutral); border-radius: 0.4rem; }
.dokument-vorbemerkung { font-style: italic; color: var(--tx2); }
.dokument h4 { margin: 1rem 0 0.3rem; font-size: 0.98rem; }
.dokument p { line-height: 1.5; margin: 0.3rem 0 0.6rem; }
.dokument-bestaetigung { margin-top: 1.2rem; padding: 0.8rem; background: var(--a-soft); border-radius: 0.6rem; }
.dokument-bestaetigung .haken { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.5rem 0; line-height: 1.4; font-size: 0.95rem; }
.dokument-bestaetigung .haken input { margin-top: 0.25rem; flex-shrink: 0; }

.versteckt { display: none !important; }

/* --- Fortbildungen (Baustufe 4) ---
   Ein Modul ist viel Text auf einem kleinen Bildschirm. Darum: Reiter statt
   einer endlosen Seite, ruhige Typografie, und alles, was ein Nachweis ist
   (Schritte, Lesezeit, Ergebnis), deutlich und ohne Spielerei. */
.phase.bereich > summary { font-size: 1rem; }
.phase.kurs { margin: 0.3rem 0 0.6rem 0.6rem; }
.phase.kurs > summary { font-weight: 500; font-size: 0.92rem; }
.modul .punkt-text strong { font-size: 0.93rem; }
.badge.modul-status { margin-left: 0; }
.status-fertig { background: var(--a-soft); color: var(--a); }
.status-offen { background: var(--amber-soft); color: var(--amber); }
.status-entwurf { background: var(--rosa-soft); color: var(--rosa); }
.status-still { background: var(--neutral); color: var(--tx2); }
.badge.aki { background: var(--a); color: #fff; }
.badge.zuteilung { background: var(--amber-soft); color: var(--amber); }
.badge.zuteilung.ueberfaellig { background: var(--red); color: #fff; }
.badge.zuteilung.erledigt { background: var(--neutral); color: var(--tx2); }
.kapitel-nr { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--a); color: #fff; font-size: 0.85rem; font-weight: 700; margin-right: 0.35rem; }
.phase.kapitel.fertig > summary .kapitel-nr { background: var(--a-soft); color: var(--a); }
.phase.kapitel.gesperrt > summary { color: var(--tx2); }
.phase.kapitel.gesperrt > summary .kapitel-nr { background: var(--neutral); color: var(--tx2); }
.phase.kapitel.aktuell { border: 2px solid var(--brand); border-radius: 0.8rem; padding: 0.8rem; margin: 0.6rem 0; }
.phase.kapitel.aktuell h4 { margin: 0 0 0.6rem; }
.kapitel-inhalt { padding: 0.4rem 0 0.2rem; }
.zuteilung-hinweis { margin: 0.4rem 0 0; padding: 0.5rem 0.7rem; background: var(--amber-soft); border-radius: 0.5rem; font-size: 0.9rem; }
.prio { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-left: 0.3rem; vertical-align: middle; }
.prio-rot { background: var(--red); }
.prio-gelb { background: var(--amber); }
.material-knopf { margin: 0.2rem 0 0.4rem; font-size: 0.85rem; }

.modul-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.modul-titel { margin: 0.2rem 0 0; font-size: 1.15rem; color: var(--tx); }
.modul-meta { font-size: 0.82rem; color: var(--tx2); margin: 0.4rem 0 0.6rem; padding: 0.4rem 0.6rem; background: var(--neutral); border-radius: 0.4rem; line-height: 1.5; }

.modul-schritte { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.6rem 0 0.8rem; }
.schritt { flex: 1; min-width: 7rem; text-align: center; font-size: 0.8rem; padding: 0.4rem 0.5rem; border-radius: 0.6rem; background: var(--neutral); color: var(--tx2); border: 1px solid var(--ln); }
.schritt.fertig { background: var(--a-soft); color: var(--a); border-color: var(--brand); font-weight: 600; }

.reiter { display: flex; gap: 0.3rem; overflow-x: auto; padding-bottom: 0.3rem; margin: 0.4rem 0 0.6rem; border-bottom: 1px solid var(--ln); -webkit-overflow-scrolling: touch; }
.reiter button { flex-shrink: 0; background: transparent; border: 1px solid transparent; border-radius: 0.6rem 0.6rem 0 0; padding: 0.45rem 0.7rem; font-size: 0.88rem; color: var(--tx2); white-space: nowrap; }
.reiter button[aria-selected="true"] { color: var(--a); font-weight: 600; border-color: var(--ln); border-bottom-color: var(--card); background: var(--card); margin-bottom: -1px; }
.reiter-inhalt { line-height: 1.5; }
.reiter-inhalt h4 { margin: 1rem 0 0.3rem; font-size: 0.98rem; }
.reiter-inhalt p { margin: 0.3rem 0 0.6rem; }
.reiter-inhalt ul, .reiter-inhalt ol { padding-left: 1.2rem; margin: 0.3rem 0 0.6rem; }
.reiter-inhalt li { margin: 0.2rem 0; }
.reiter-inhalt dl { margin: 0.3rem 0; }
.reiter-inhalt dt { font-weight: 600; margin-top: 0.5rem; }
.reiter-inhalt dd { margin: 0.1rem 0 0 0; color: var(--tx); }
.reiter-inhalt details { margin: 0.5rem 0; }
.reiter-inhalt details > summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; padding: 0.3rem 0; }
.reiter-inhalt a, a { color: var(--a); word-break: break-all; }
mark.anpassen { background: var(--mark); color: var(--mark-tx); padding: 0 0.25rem; border-radius: 0.25rem; font-size: 0.9em; }
.merksatz { font-size: 1.1rem; font-weight: 600; color: var(--a); background: var(--a-soft); border-left: 4px solid var(--brand); padding: 0.6rem 0.8rem; margin: 0.6rem 0; }
.modul-video { width: 100%; max-height: 60vh; background: #000; border-radius: 0.6rem; margin: 0.4rem 0; }
.eskalation { font-size: 0.88rem; }
.eskalation td, .eskalation th { vertical-align: top; }

.lesezeit { margin: 1rem 0 0.4rem; padding: 0.6rem 0.8rem; background: var(--neutral); border-radius: 0.6rem; font-size: 0.9rem; color: var(--tx2); }
.lesezeit.reicht { background: var(--a-soft); color: var(--a); }

.frage { border: 1px solid var(--ln); border-radius: 0.7rem; padding: 0.6rem 0.8rem 0.4rem; margin: 0.7rem 0; }
.frage legend { font-weight: 600; padding: 0 0.3rem; line-height: 1.4; }
.frage .haken { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.45rem 0; font-size: 0.95rem; line-height: 1.4; }
.frage .haken input { margin-top: 0.25rem; flex-shrink: 0; }
.quiz-fazit { font-size: 1rem; }
.frage-ergebnis { border-left: 4px solid var(--ln); padding: 0.3rem 0.8rem; margin: 0.7rem 0; }
.frage-ergebnis.richtig { border-color: var(--brand); }
.frage-ergebnis.falsch { border-color: var(--red); }
.frage-ergebnis ul { list-style: none; padding-left: 0; }
.frage-ergebnis li.loesung { color: var(--a); font-weight: 600; }
.frage-ergebnis li.gewaehlt:not(.loesung) { color: var(--red); text-decoration: line-through; }

.praxis-status { margin-top: 0.8rem; padding: 0.6rem 0.8rem; border-radius: 0.6rem; background: var(--neutral); font-size: 0.9rem; }
.praxis-status.fertig { background: var(--a-soft); color: var(--a); }

/* Das Original aus dem QM-Handbuch — auf dem Bildschirm wie auf Papier,
   nach der PDF-Fassung der Vorlage: eine Zeile „Plenus Care® GmbH
   Qualitätsmanagementhandbuch ©" mit IK rechts, darunter der Kasten mit
   Titel links und Zeichen rechts, der Text in den Tabellen der Vorlage
   (grauer Rahmen, grün nur wo die Vorlage grün ist, hellgrüne Felder),
   die Fußzeile als Tabelle mit fünf Spalten. */
.qm-blatt { background: var(--card); border: 1px solid var(--ln); border-radius: 0.4rem; padding: 1rem 1rem 0.8rem; margin: 0.8rem 0; font-family: Arial, "Liberation Sans", Helvetica, sans-serif; font-size: 0.92rem; line-height: 1.4; color: var(--tx); --qm-rahmen: #595959; --qm-feld: #DEF0E0; }
.qm-zeile { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.78rem; margin-bottom: 0.4rem; }
.qm-zeile i { font-style: italic; }
.qm-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid var(--qm-rahmen); padding: 0.4rem 0.6rem; margin-bottom: 0.9rem; min-height: 64px; }
.qm-titel { font-weight: 700; font-size: 1.05rem; }
.qm-kopf .qm-zeichen { width: 58px; height: auto; flex-shrink: 0; }
.qm-text { overflow-wrap: anywhere; }
.qm-text img.qm-zeichen { width: 48px; height: auto; }
.qm-text p { margin: 0 0 0.35rem; }
.qm-text p.leer { height: 0.55rem; margin: 0; }
.qm-text p.mitte { text-align: center; }
.qm-text p.rechts { text-align: right; }
.qm-text ul, .qm-text ol { margin: 0.2rem 0 0.4rem; padding-left: 1.4rem; }
.qm-text li { margin: 0.15rem 0; }
.qm-tabelle { width: 100%; border-collapse: collapse; margin: 0.4rem 0 0.8rem; font-size: inherit; table-layout: fixed; }
.qm-tabelle td { border: 1px solid var(--qm-rahmen); padding: 0.3rem 0.45rem; vertical-align: top; }
.qm-tabelle td.schattiert { background: var(--qm-feld); }
.qm-tabelle td[data-feld] { min-height: 3rem; }
.feld-wert { margin-top: 0.3rem; font-weight: 600; }
.feld-wert .digital-unterschrift strong { color: var(--a); }
.feld-wert .unterschrift-leer { color: var(--tx2); font-style: italic; font-weight: 400; }
/* Am Handy: die Unterschriftszeile (Ort, Name, Unterschrift) untereinander
   statt in drei schmalen Spalten. */
@media (max-width: 559px) {
  .qm-tabelle { table-layout: auto; }
  .qm-tabelle tr:has(td[data-feld]) td { display: block; width: 100%; border-top: none; }
  .qm-tabelle tr:has(td[data-feld]) td:first-child { border-top: 1px solid var(--qm-rahmen); }
}
.qm-fuss { width: 100%; border-collapse: collapse; font-size: 0.72rem; margin-top: 1rem; }
.qm-fuss th, .qm-fuss td { border: 1px solid var(--qm-rahmen); padding: 0.15rem 0.4rem; text-align: center; font-weight: 400; white-space: nowrap; }
.qm-fuss th { background: var(--qm-feld); }
.qm-fuss .rot { width: 0.7rem; background: #E00; padding: 0; border-color: var(--qm-rahmen); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qm-blatt { --qm-rahmen: #9aa59c; --qm-feld: #1C2A19; } }
:root[data-theme="dark"] .qm-blatt { --qm-rahmen: #9aa59c; --qm-feld: #1C2A19; }

/* Gerätepass: Vorschaubild in der Liste, im Original-Blatt die sechs
   Spalten der Vorlage mit Gerätebild. */
.geraet-bild { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; background: #fff; border: 1px solid var(--ln); border-radius: 0.3rem; margin-right: 0.5rem; }
.gp-felder td { width: 50%; }
.gp-tabelle td.gp-bild { width: 15%; text-align: center; vertical-align: middle; }
.gp-tabelle td.gp-bild img { width: 100%; max-width: 70px; height: auto; background: #fff; }
.gp-tabelle td:nth-child(2) { width: 25%; }
.gp-tabelle td:nth-child(3) { width: 20%; }

/* Das Zertifikat: ruhig, mit Rahmen, wie ein Blatt. */
.zertifikat { border: 2px solid var(--a); border-radius: 0.6rem; padding: 1.2rem 1.3rem; margin: 0.6rem 0; background: var(--card); line-height: 1.5; }
.zertifikat-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--ln); padding-bottom: 0.6rem; margin-bottom: 0.8rem; }
.zertifikat-kopf .firma { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx2); }
.zertifikat-kopf h3 { margin: 0.1rem 0 0; font-size: 1.4rem; color: var(--a); }
.zertifikat-name { font-size: 1.25rem; font-weight: 700; margin: 0.6rem 0 0.2rem; }
.zertifikat-modul { margin: 0.4rem 0 0.8rem; }
.zertifikat-stunden { padding: 0.6rem 0.8rem; background: var(--a-soft); border-radius: 0.6rem; }
.zertifikat-fuss { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--tx2); border-top: 1px solid var(--ln); padding-top: 0.6rem; margin-top: 0.8rem; }
.zertifikat-knoepfe { display: flex; gap: 0.6rem; align-items: center; }
.zertifikat-knoepfe .knopf-primaer { width: auto; margin-top: 0; }

.zeit-je-teil { font-size: 0.8rem; color: var(--tx2); }
.tabelle-scroll { overflow-x: auto; }
.pruefliste td { background: var(--neutral); font-size: 0.9rem; }
.pruefliste ul { margin: 0.3rem 0 0.6rem 1.1rem; padding: 0; }
.alsLink { background: none; border: none; color: var(--a); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

/* ----------------------------------------------------- iPad und Desktop
   Ab 720 px (iPad hochkant) zwei Spalten: Gerätepass, Refresher,
   Dienstanweisungen und Verwaltung nebeneinander; Einarbeitungsbogen und
   Fortbildungen sind lang und bleiben über die volle Breite. Ab 1100 px
   dasselbe mit mehr Luft. Knöpfe werden nicht mehr bildschirmbreit. */
@media (min-width: 720px) {
  header { padding: 0.65rem 1.5rem; }
  header h1 .wort { height: 30px; }
  main { max-width: 1000px; padding: 1.25rem 1.5rem; }
  #bildschirm-anmeldung, #bildschirm-passwort-wechsel { margin-top: 3rem; padding: 1.6rem; }
  .karte { padding: 1.3rem; }
  .knopf-primaer { width: auto; min-width: 12rem; }
  .zertifikat { padding: 1.6rem 2rem; }
}
@media (min-width: 1100px) {
  header { padding: 0.7rem 2rem; }
  header h1 .wort { height: 34px; }
  main { max-width: 1240px; padding: 1.5rem 2rem; }
  .karte { padding: 1.5rem; }
  .reiter-inhalt { max-width: 80ch; }
  .dokument p, .dokument h4 { max-width: 80ch; }
}

/* Drucken: nur der Druckbogen, nichts von der App. Muster aus Plenus OS. */
#zertifikat-druck { display: none; }
/* Kategorien: eine Leiste oben, immer nur ein Bereich sichtbar; die
   Startseite mit Kacheln in Brahims Reihenfolge. */
.kategorien { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.5rem 0; margin: -0.25rem 0 0.8rem; position: sticky; top: 0; z-index: 5;
              background: var(--pale); border-bottom: 1px solid var(--ln); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.kategorien::-webkit-scrollbar { display: none; }
.kategorien button { flex-shrink: 0; border: 1px solid var(--ln); background: var(--card); color: var(--tx2); border-radius: 999px; padding: 0.42rem 0.85rem; font-size: 0.88rem; white-space: nowrap; cursor: pointer; }
.kategorien button[aria-selected="true"] { background: var(--a); color: #fff; border-color: var(--a); font-weight: 600; }
#bildschirm-dashboard > div[id^="bereich-"] { display: none; }
#bildschirm-dashboard[data-aktiv="start"] #bereich-start,
#bildschirm-dashboard[data-aktiv="bogen"] #bereich-bogen,
#bildschirm-dashboard[data-aktiv="geraetepass"] #bereich-geraetepass,
#bildschirm-dashboard[data-aktiv="dokumente"] #bereich-dokumente,
#bildschirm-dashboard[data-aktiv="refresher"] #bereich-refresher,
#bildschirm-dashboard[data-aktiv="fortbildungen"] #bereich-fortbildungen,
#bildschirm-dashboard[data-aktiv="konto"] #bereich-konto,
#bildschirm-dashboard[data-aktiv="verwaltung"] #bereich-verwaltung,
#bildschirm-dashboard[data-aktiv="hilfe"] #bereich-hilfe { display: block; }
.start-gruss { color: var(--tx2); margin: 0.2rem 0 0.8rem; }
.kacheln { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
.kachel { text-align: left; background: var(--card); border: 1px solid var(--ln); border-left: 5px solid var(--a); border-radius: 12px; padding: 0.9rem 1.1rem; cursor: pointer; color: var(--tx); font: inherit; width: 100%; min-height: 7.5rem; display: flex; flex-direction: column; gap: 0.15rem; }
.kachel:hover { background: var(--a-soft); }
.kachel.offen { border-left-color: var(--amber); }
.kachel .kachel-nr { color: var(--tx2); font-size: 0.75rem; letter-spacing: 0.06em; }
.kachel h2 { margin: 0; font-size: 1.05rem; }
.kachel p { margin: 0; color: var(--tx2); font-size: 0.88rem; }
.kachel .kachel-stand { margin-top: auto; padding-top: 0.4rem; color: var(--tx); font-weight: 600; font-size: 0.88rem; }
.kachel.offen .kachel-stand { color: var(--amber); }
/* So geht’s — die Schritt-für-Schritt-Anleitung */
.kategorien button.gesperrt { opacity: 0.45; cursor: not-allowed; }
.anleitung-sperre { margin: 0.6rem 0 0.2rem; }
.anleitung-schritte button:disabled { opacity: 0.45; cursor: not-allowed; }
.anleitung-kopf h2 { margin-bottom: 0.4rem; }
.anleitung-schritte { list-style: none; padding: 0; margin: 0.8rem 0 0.4rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.anleitung-schritte button { border: 1px solid var(--ln); background: var(--neutral); color: var(--tx2); border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.78rem; cursor: pointer; }
.anleitung-schritte button.aktiv { background: var(--a); color: #fff; border-color: var(--a); }
.anleitung-schritt { margin-top: 0.6rem; }
.anleitung-schritt h3 { margin: 0.2rem 0 0.4rem; font-size: 1.1rem; color: var(--tx); }
.anleitung-schritt p { margin: 0.4rem 0; line-height: 1.55; }
.anleitung-schritt ul { padding-left: 1.2rem; margin: 0.4rem 0 0.6rem; }
.anleitung-schritt li { margin: 0.25rem 0; line-height: 1.5; }
.anleitung-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.anleitung-knoepfe .knopf-primaer { margin-left: auto; }
@media (min-width: 720px) { .kacheln { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .kacheln { grid-template-columns: 1fr 1fr 1fr; } }

/* Gerätepass (Umbau 12.10.2026): Zahlen als Filter, Suche, Kacheln je Gruppe. */
.gp-einweisen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; background: var(--a-soft); border-radius: 10px; padding: 0.6rem 0.8rem; margin-bottom: 0.7rem; }
.gp-einweisen label { font-weight: 600; margin: 0; }
.gp-einweisen select { flex: 1 1 14rem; margin: 0; }
.gp-zahlen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; }
.gp-filter { border: 1px solid var(--ln); background: var(--card); color: var(--tx2); border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.85rem; cursor: pointer; }
.gp-filter strong { color: var(--tx); }
.gp-filter.aktiv { background: var(--a); border-color: var(--a); color: #fff; }
.gp-filter.aktiv strong { color: #fff; }
.gp-werkzeuge { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; }
.gp-werkzeuge input[type="search"] { flex: 1 1 12rem; margin: 0; }
.gp-werkzeuge .knopf-sekundaer { margin: 0; }
.gp-wartet { border: 1px solid var(--amber); background: var(--amber-soft); border-radius: 10px; padding: 0.6rem 0.8rem; margin: 0.8rem 0; }
.gp-wartet h3 { margin: 0 0 0.2rem; color: var(--amber); }
.gp-gruppe { margin-top: 1rem; }
.gp-gruppe-kopf { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.3rem; font-size: 1rem; color: var(--tx); position: sticky; top: 2.6rem; background: var(--card); padding: 0.3rem 0; z-index: 2; }
.gp-gruppe-stand { color: var(--tx2); font-size: 0.85rem; font-weight: 500; }
.fortschritt-leiste.gp-mini { height: 0.3rem; margin-bottom: 0.5rem; }
.gp-geraete { display: grid; grid-template-columns: 1fr; gap: 0.45rem; }
.gp-geraet { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--ln); border-left: 4px solid var(--ln); border-radius: 10px; padding: 0.45rem 0.6rem; background: var(--card); }
.gp-geraet.ist-fertig { border-left-color: var(--brand); }
.gp-geraet.ist-wartet { border-left-color: var(--amber); }
.gp-geraet.ist-offen { border-left-color: var(--ln); }
.gp-bild { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; background: #fff; border: 1px solid var(--ln); border-radius: 0.4rem; }
.gp-bild-leer { background: var(--neutral); }
.gp-text { flex: 1; min-width: 0; }
.gp-name { font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.gp-hersteller { color: var(--tx2); font-size: 0.8rem; }
.gp-status { flex-shrink: 0; text-align: right; }
.gp-knopf { margin: 0; padding: 0.4rem 0.8rem; font-size: 0.85rem; width: auto; min-width: 0; }
@media (min-width: 720px) { .gp-geraete { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .gp-geraete { grid-template-columns: 1fr 1fr 1fr; } }

/* Prüfbereitschaft (MD) */
.pb-stand { color: var(--tx2); font-size: 0.9rem; }
.pb-druckfrage { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.pb-person { border: 1px solid var(--ln); border-left: 5px solid var(--a); border-radius: 10px; padding: 0.8rem 1rem; margin: 0.9rem 0; background: var(--card); }
.pb-person.pb-offen { border-left-color: var(--red); }
.pb-person h3 { margin: 0 0 0.4rem; color: var(--tx); font-size: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pb-person h4 { margin: 0.6rem 0 0.2rem; font-size: 0.9rem; color: var(--red); }
.pb-hz { color: var(--tx2); font-weight: normal; font-size: 0.85rem; }
.pb-liste { margin: 0.2rem 0 0.6rem; padding-left: 1.2rem; }
.pb-liste li { margin: 0.15rem 0; }
.pb-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pb-tabelle th { text-align: left; vertical-align: top; width: 38%; padding: 0.35rem 0.5rem 0.35rem 0; color: var(--tx2); font-weight: 600; border-top: 1px solid var(--ln); }
.pb-tabelle td { padding: 0.35rem 0; vertical-align: top; border-top: 1px solid var(--ln); }
.badge.pb-gut { background: var(--a); color: #fff; }
.badge.pb-rot { background: var(--red); color: #fff; }
.badge.pb-grau { background: var(--neutral); color: var(--tx2); }
@media (max-width: 560px) {
  .pb-tabelle th, .pb-tabelle td { display: block; width: auto; }
  .pb-tabelle td { border-top: none; padding-top: 0; padding-bottom: 0.5rem; }
}

@media print {
  body > *:not(#zertifikat-druck) { display: none !important; }
  body { background: #fff; color: #000; }
  #zertifikat-druck { display: block !important; }
  .druckbogen { font-family: Georgia, "Times New Roman", serif; color: #000; font-size: 11.5pt; line-height: 1.5; padding: 10mm; }
  .druckkopf { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 18px; }
  .druckkopf .druck-logo { height: 11mm; width: auto; display: block; margin-bottom: 3mm; filter: none; }
  .druckkopf .firma { font-size: 9pt; letter-spacing: 0.14em; text-transform: uppercase; }
  .druckkopf h1 { font-size: 20pt; margin: 4px 0 0; font-weight: 700; }
  .druckstand { font-size: 9pt; text-align: right; line-height: 1.5; }
  .druckbogen .zertifikat { border: 1px solid #000; border-radius: 0; padding: 14mm 12mm; }
  .druckbogen .zertifikat-kopf { display: none; }
  .druckbogen .pb-person { break-inside: avoid; border: 1px solid #000; border-left-width: 4px; border-radius: 0; background: none; color: #000; }
  .druckbogen .pb-tabelle th, .druckbogen .pb-tabelle td { border-top: 1px solid #999; color: #000; }
  .druckbogen .badge { border: 1px solid #000; background: none !important; color: #000 !important; }
  .druckbogen .pb-druckfrage, .druckbogen .pb-druck-spaeter { display: none; }
  .druckbogen .zertifikat-name { font-size: 16pt; }
  .druckbogen .zertifikat-stunden { background: none; border: 1px solid #999; }
  .druckbogen .zertifikat-fuss { color: #000; }
  .druckbogen .unterschrift { margin-top: 24mm; display: flex; justify-content: space-between; gap: 20mm; font-size: 9.5pt; }
  .druckbogen .unterschrift > div { flex: 1; border-top: 1px solid #000; padding-top: 4px; }
  /* Ausgefüllte Formulare: Bogen, Gerätepass, Refresher, Dienstanweisung. */
  .druckbogen h2 { font-size: 12pt; margin: 16px 0 6px; border-bottom: 1px solid #999; padding-bottom: 2px; page-break-after: avoid; }
  .druckbogen h3 { font-size: 10.5pt; margin: 10px 0 4px; page-break-after: avoid; }
  .druckbogen p { margin: 4px 0 8px; }
  .druckbogen .druck-hinweis { font-size: 9pt; color: #333; }
  .druckbogen table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .druckbogen .druck-kopfdaten th, .druckbogen .druck-kopfdaten td { text-align: left; vertical-align: top; padding: 3px 6px; border: 1px solid #999; }
  .druckbogen .druck-kopfdaten th { width: 18%; background: #eee; font-weight: 600; }
  .druckbogen .druck-punkte th, .druckbogen .druck-punkte td { border: 1px solid #999; padding: 3px 5px; vertical-align: top; text-align: left; }
  .druckbogen .druck-punkte th { background: #eee; font-weight: 600; }
  .druckbogen .druck-punkte thead { display: table-header-group; }
  .druckbogen .druck-punkte tr { page-break-inside: avoid; }
  .druckbogen .druck-punkte td:nth-child(n+2) { white-space: nowrap; min-width: 28mm; }
  .druckbogen .digital-unterschrift small { color: #333; }
  .druckbogen .unterschrift-leer { color: #999; font-style: italic; }
  /* Original aus dem QM-Handbuch: nur das Blatt, mit seinem eigenen Kopf. */
  .druck-roh { padding: 0; font-family: Arial, "Liberation Sans", Helvetica, sans-serif; font-size: 10.5pt; }
  .druck-roh .qm-blatt { border: none; border-radius: 0; padding: 0; margin: 0; background: #fff; color: #000; font-size: 10.5pt; --qm-rahmen: #595959; --qm-feld: #DEF0E0; }
  .druck-roh .qm-zeile { font-size: 8.5pt; }
  .druck-roh .qm-kopf .qm-zeichen { width: 17mm; }
  .druck-roh .qm-tabelle tr { page-break-inside: avoid; }
  .druck-roh .qm-fuss { color: #000; font-size: 8.5pt; break-before: avoid; page-break-before: avoid; }
  .druck-roh .qm-tabelle tr:last-child { break-after: avoid; page-break-after: avoid; }
  .druck-roh .tabelle-scroll { overflow: visible; }
  .druck-roh .gp-tabelle td.gp-bild img { max-width: 18mm; }
  .druck-roh .gp-tabelle { font-size: 9pt; }
  .druck-roh .feld-wert .digital-unterschrift strong { color: #000; }
}