@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/plex/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/plex/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* =====================================================================
   Unterweisung-easy — Theme „Marine" (Richtung B, Stufe 1, 12.09.2026)
   Eine Datei fuer alle drei Apps. Liegt NACH bootstrap.css und board.css,
   VOR own.css. Kein JavaScript, keine Inline-Stile (CSP script-src 'self').
   Schrift: IBM Plex Sans, selbst gehostet (OFL) — siehe @font-face oben.
   ===================================================================== */
:root {
  --ue-marine: #124b76;
  --ue-marine-hell: #206197;
  --ue-marine-text: #dbe6f0;
  --ue-logo-blau: #1c5f9a;
  --ue-bernstein: #fbbf24;
  --ue-bernstein-text: #8a5a00;
  --ue-bernstein-soft: #fff4d6;
  --ue-grund: #eef2f5;
  --ue-flaeche: #ffffff;
  --ue-text: #14212c;
  --ue-gedaempft: #516170;
  --ue-linie: #cbd5de;
  --ue-linie-hell: #e3e9ee;
  --ue-ok: #2f6f3e;
  --ue-ok-soft: #e4f2e7;
  --ue-bad: #b42318;
  --ue-bad-soft: #fbe7e5;
  --ue-info-soft: #dfe9f2;
  --ue-radius: 6px;
  --ue-radius-klein: 4px;
  --ue-schatten: 0 1px 2px rgba(11, 46, 74, .08), 0 6px 20px rgba(11, 46, 74, .06);
  --ue-schrift: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

/* ---- Grundlagen ------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body, body.background {
  font-family: var(--ue-schrift);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ue-text);
  background: var(--ue-grund);
}
a { color: var(--ue-logo-blau); }
a:hover { color: var(--ue-marine); }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4 { font-weight: 700; letter-spacing: -.01em; color: var(--ue-text); }
:focus-visible { outline: 3px solid var(--ue-bernstein); outline-offset: 2px; }
.btn:focus, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px rgba(251, 191, 36, .45); }
::selection { background: var(--ue-bernstein-soft); }

/* ---- Anmeldeseiten (Teilnehmer, Betreiber, Firmen-Admin) ---------------- */
body.anmeldung { background: var(--ue-marine); min-height: 100vh; min-height: 100dvh; }
body.anmeldung .card { border: 0; border-radius: var(--ue-radius); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); overflow: hidden; }
body.anmeldung .card-header { background: var(--ue-flaeche) !important; border-bottom: 1px solid var(--ue-linie-hell); }
body.anmeldung .card-header h3 { font-size: 1.15rem; font-weight: 700; margin: 0; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
body.anmeldung .card-footer { background: var(--ue-marine) !important; border-top: 0; text-align: center; }
body.anmeldung .card-footer a { color: #ffffff !important; font-weight: 600; }
body.anmeldung .col-form-label { font-weight: 600; }

/* ---- Kopfleiste Teilnehmer und Verwaltung ------------------------------- */
.kopfleiste, .navbar.bg-dark, header.navbar.bg-dark { background: var(--ue-marine) !important; }
.kopfleiste .navbar-brand, .kopfleiste h4, .kopfleiste .nav-link { color: #ffffff; }
.kopfleiste h4 { font-size: 1.05rem; font-weight: 700; margin: 0; }
/* Firmenlogo im Kopf: transparentes Emblem auf weissem Badge (Kontrast auf Marine,
   wie im Zertifikat), daneben der Portalname. 12.09.2026. */
.kopfleiste .marke { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; }
.kopfleiste .marke-logo { height: 38px; width: auto; display: block; background: #ffffff; border-radius: 9px; padding: 3px 8px; }
.kopfleiste .marke-text { color: #ffffff; font-size: 1.05rem; font-weight: 700; }
header.navbar .navbar-brand { background: transparent; box-shadow: none; color: #ffffff; font-weight: 600; }
header.navbar .nav-link { color: #ffffff; }
header.navbar .text-secondary { color: var(--ue-marine-text) !important; }
header.navbar .text-warning { color: var(--ue-bernstein) !important; }
header.navbar .dropdown-toggle { color: #ffffff !important; font-weight: 600; }
.dropdown-menu { border: 1px solid var(--ue-linie); border-radius: var(--ue-radius); box-shadow: var(--ue-schatten); }
.dropdown-item { padding: .5rem 1rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ue-info-soft); color: var(--ue-marine); }

/* ---- Folienleiste (Teilnehmer, links) und Fortschritt unten ------------ */
.folienleiste { background: var(--ue-marine) !important; min-height: auto; padding-bottom: 56px; }
.folienleiste .nav-link { color: var(--ue-marine-text); font-weight: 500; border-radius: var(--ue-radius-klein); margin: 1px 6px; padding: .45rem .6rem; }
.folienleiste .nav-link:hover { background: var(--ue-marine-hell); color: #ffffff; }
.folienleiste .nav-link.gesperrt { color: #7d93a8; }
.folienleiste .feather { width: 18px; height: 18px; margin-right: 4px; vertical-align: text-bottom; }
.footer.fixed-bottom.bg-dark { background: var(--ue-marine) !important; border-top: 1px solid var(--ue-marine-hell); }
.footer.fixed-bottom p { font-size: .85rem; color: var(--ue-marine-text) !important; margin: .5rem 0 .25rem; }
.progress { background: var(--ue-marine-hell); border-radius: 999px; height: .75rem; }
.progress-bar { background: var(--ue-bernstein); color: var(--ue-text); font-weight: 700; font-size: .7rem; }

/* ---- Verwaltung: Sidebar und Inhalt ------------------------------------- */
.sidebar.bg-light, nav.sidebar { background: var(--ue-marine) !important; box-shadow: none; }
/* Abstand unter der Kopfleiste: die Leiste ist position:fixed (top:0), der erste
   Eintrag klebte sonst an der Kopfleiste (gemessen -5px). Mehr Luft (12.09.2026). */
.sidebar .position-sticky { padding-top: 44px !important; } /* !important: schlaegt die pt-3-Utility */
.sidebar .nav-link { color: var(--ue-marine-text); font-weight: 500; border-radius: var(--ue-radius-klein); margin: 1px 8px; padding: .5rem .75rem; }
.sidebar .nav-link:hover { background: var(--ue-marine-hell); color: #ffffff; }
.sidebar .nav-link.active { background: var(--ue-marine-hell); color: #ffffff; font-weight: 700; }
.sidebar .nav-link .feather, .sidebar .nav-link svg { color: inherit; opacity: .85; }
.sidebar .nav-link:hover .feather, .sidebar .nav-link.active .feather { opacity: 1; }
.sidebar-heading, .sidebar h6 { color: var(--ue-marine-text) !important; opacity: .7; letter-spacing: .1em; }
main h1.h2, main .h2 { font-size: 1.5rem; font-weight: 700; }
main .border-bottom { border-color: var(--ue-linie) !important; }
.btn-toolbar .btn-group { gap: 6px; }

/* ---- Knoepfe ------------------------------------------------------------ */
.btn { border-radius: var(--ue-radius-klein); font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.btn-sm { min-height: 34px; font-weight: 600; }
.btn-lg { min-height: 48px; }
.btn-primary, .btn-success, .btn-success.btn-outline-light {
  background: var(--ue-marine); border-color: var(--ue-marine); color: #ffffff;
}
.btn-primary:hover, .btn-success:hover, .btn-success.btn-outline-light:hover,
.btn-primary:focus, .btn-success:focus { background: var(--ue-marine-hell); border-color: var(--ue-marine-hell); color: #ffffff; }
.btn-toolbar .btn-success.btn-outline-light { background: var(--ue-flaeche); color: var(--ue-marine); border-color: var(--ue-marine); }
.btn-toolbar .btn-success.btn-outline-light:hover { background: var(--ue-info-soft); }
.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-primary, .btn-outline-info, .btn-info {
  background: var(--ue-flaeche); color: var(--ue-marine); border-color: var(--ue-linie);
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-info:hover, .btn-info:hover {
  background: var(--ue-info-soft); color: var(--ue-marine); border-color: var(--ue-marine);
}
.btn-danger, .btn-outline-danger:hover { background: var(--ue-bad); border-color: var(--ue-bad); color: #ffffff; }
.btn-outline-danger { color: var(--ue-bad); border-color: var(--ue-bad); background: var(--ue-flaeche); }
.btn-warning, .btn-outline-warning { background: var(--ue-bernstein-soft); border-color: #e8c76a; color: var(--ue-bernstein-text); }
.btn-outline-success { color: var(--ue-ok); border-color: var(--ue-ok); background: var(--ue-flaeche); }
.btn-outline-success:hover { background: var(--ue-ok-soft); color: var(--ue-ok); }
/* Mindestverweildauer: der gesperrte Weiter-Knopf zeigt die Wartezeit in Bernstein */
.btn-success:disabled, .btn-success.disabled, #weiterKnopf.disabled, #weiterKnopf[aria-disabled="true"] {
  background: var(--ue-bernstein-soft); border-color: transparent; color: var(--ue-bernstein-text); opacity: 1;
}

/* ---- Formulare ------------------------------------------------------------ */
.form-control, .form-select { border: 1px solid var(--ue-linie); border-radius: var(--ue-radius-klein); min-height: 44px; color: var(--ue-text); }
textarea.form-control { min-height: 96px; }
.form-control:focus, .form-select:focus { border-color: var(--ue-marine); }
.form-label, label { font-weight: 600; }
.form-check-input { border-color: var(--ue-gedaempft); }
.form-check-input:checked { background-color: var(--ue-marine); border-color: var(--ue-marine); }
.form-text, .text-muted { color: var(--ue-gedaempft) !important; }
.input-group-text { background: var(--ue-grund); border-color: var(--ue-linie); }

/* ---- Karten, Tabellen, Hinweise ------------------------------------------- */
.card { border: 1px solid var(--ue-linie); border-radius: var(--ue-radius); }
.card-header { background: var(--ue-grund); border-bottom: 1px solid var(--ue-linie); font-weight: 600; }
.table { color: var(--ue-text); }
.table > :not(caption) > * > * { border-bottom-color: var(--ue-linie-hell); vertical-align: middle; }
.table thead th, .table tr.table-light th, .table-light th { background: var(--ue-grund) !important; color: var(--ue-gedaempft); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--ue-linie); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(11, 46, 74, .025); }
.table-hover > tbody > tr:hover > * { background-color: var(--ue-info-soft); }
.badge { border-radius: 999px; font-weight: 700; padding: .35em .7em; }
.badge.bg-success { background: var(--ue-ok-soft) !important; color: var(--ue-ok); }
.badge.bg-danger { background: var(--ue-bad-soft) !important; color: var(--ue-bad); }
.badge.bg-warning { background: var(--ue-bernstein-soft) !important; color: var(--ue-bernstein-text); }
.badge.bg-secondary, .badge.bg-info, .badge.bg-primary { background: var(--ue-info-soft) !important; color: var(--ue-marine); }
.alert { border-radius: var(--ue-radius); border-width: 1px; }
.alert-success { background: var(--ue-ok-soft); border-color: #bfe0c6; color: var(--ue-ok); }
.alert-danger { background: var(--ue-bad-soft); border-color: #f2c4bf; color: var(--ue-bad); }
.alert-warning { background: var(--ue-bernstein-soft); border-color: #e8c76a; color: var(--ue-bernstein-text); }
.alert-info { background: var(--ue-info-soft); border-color: #bfd3e6; color: var(--ue-marine); }
.list-group-item { border-color: var(--ue-linie-hell); }
.list-group-item.active { background: var(--ue-marine); border-color: var(--ue-marine); }
code { color: var(--ue-marine); background: var(--ue-info-soft); padding: 1px 5px; border-radius: 3px; }

/* ---- Teilnehmer: Folie und Wissenstest ------------------------------------ */
.folie-wrap img, .abstandOben img.img-fluid { border-radius: var(--ue-radius); border: 1px solid var(--ue-linie); background: var(--ue-flaeche); }
.folie-hinweis { color: var(--ue-gedaempft); }

/* ---- Handy: grosse Tippflaechen, keine Hover-Abhaengigkeit ---------------- */
@media (max-width: 767.98px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  main .btn-toolbar .btn-group { flex-wrap: wrap; }
  .table { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- Knoepfe IN der Marineleiste: hell auf dunkel, Wartezeit in Bernstein ---- */
.kopfleiste .btn-success, .kopfleiste .btn-primary, header.navbar .btn-success { background: #ffffff; border-color: #ffffff; color: var(--ue-marine); }
.kopfleiste .btn-success:hover, .kopfleiste .btn-primary:hover { background: var(--ue-info-soft); border-color: var(--ue-info-soft); color: var(--ue-marine); }
.kopfleiste .btn-success:disabled, .kopfleiste .btn-success.disabled, .kopfleiste #weiterKnopf.disabled { background: var(--ue-bernstein); border-color: var(--ue-bernstein); color: var(--ue-text); }
.kopfleiste .navbar-toggler { border-color: rgba(255, 255, 255, .5); }
/* Zweite Leiste (aufklappbares Menue) am Handy ohne leeren Balken, wenn zugeklappt */
.navbar.navbar-expand-lg.kopfleiste { padding-top: 0; padding-bottom: 0; }
.kopfleiste .navbar-collapse.show, .kopfleiste .collapse.show { padding: .5rem 0; }
.footer.fixed-bottom .progress-bar { min-width: 2.2rem; }
/* Betreiber-Anmeldung hat keine Karte: heller Grund, Formular als weisse Flaeche */
body.anmeldung-hell { background: var(--ue-grund); min-height: 100vh; }
body.anmeldung-hell form { background: var(--ue-flaeche); border: 1px solid var(--ue-linie); border-radius: var(--ue-radius); padding: 28px 24px 20px; max-width: 680px; margin: 0 auto; box-shadow: var(--ue-schatten); }
body.anmeldung-hell form .form-group { margin-bottom: 14px; }
body.anmeldung-hell h1.h3 { font-size: 1.35rem; font-weight: 700; }
body.anmeldung-hell footer { color: var(--ue-gedaempft); }
body.anmeldung .container { padding-top: 5vh; }

/* ---- Eingabe-Knoepfe (input.form-control.btn-*) und Dashboard-Kacheln ---------- */
input.form-control.btn-success, .form-control.btn-success { background: var(--ue-marine); border-color: var(--ue-marine); color: #ffffff; font-weight: 600; }
input[type="submit"][value*="löschen"], input[type="submit"][value*="Löschen"] { background: var(--ue-bad) !important; border-color: var(--ue-bad) !important; color: #ffffff !important; }
.small-box { background: var(--ue-flaeche) !important; color: var(--ue-text) !important; border: 1px solid var(--ue-linie); border-top-width: 4px; border-radius: var(--ue-radius); box-shadow: var(--ue-schatten); text-align: center; }
.small-box .inner { text-align: center; } /* Zahl und Beschriftung mittig (Ronny, 12.09.) */
.small-box.bg-info { border-top-color: var(--ue-logo-blau); }
.small-box.bg-success { border-top-color: var(--ue-ok); }
.small-box.bg-warning { border-top-color: var(--ue-bernstein); }
.small-box.bg-danger { border-top-color: var(--ue-bad); }
.small-box h3 { color: var(--ue-marine); font-weight: 700; font-size: 2rem; }
.small-box p, .small-box .small-box-footer { color: var(--ue-gedaempft) !important; }
.small-box .icon { color: var(--ue-linie); }

/* ===================================================================== *
   Wissenstest — eine Frage je Bildschirm (Stufe 2, 12.09.2026)
   Formularuebergabe unveraendert; /js/wissenstest.js blaettert nur.
 * ===================================================================== */
.wt { max-width: 720px; margin: 0 auto; padding: 8px 16px 48px; }
.wt-kopf { margin: 8px 0 18px; }
.wt-kopf h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 2px; }
.wt-kopf p { color: var(--ue-gedaempft); margin: 0; }
.wt-punkte { display: flex; gap: 6px; margin: 16px 0 6px; }
.wt-punkte i { flex: 1; height: 6px; border-radius: 999px; background: var(--ue-linie); transition: background .2s; }
.wt-punkte i.fertig { background: var(--ue-ok); }
.wt-punkte i.aktiv { background: var(--ue-bernstein); }
.wt-punkte i.falsch { background: var(--ue-bad); }
.wt-zaehler { font-size: .85rem; color: var(--ue-gedaempft); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.wt-frage { background: var(--ue-flaeche); border: 1px solid var(--ue-linie); border-radius: var(--ue-radius); padding: 22px 22px 18px; box-shadow: var(--ue-schatten); }
.wt-frage + .wt-frage { margin-top: 18px; }
.wt-frage h2 { font-size: 1.25rem; line-height: 1.35; font-weight: 700; margin: 0 0 4px; display: flex; align-items: flex-start; gap: 10px; }
.wt-frage-art { font-size: .8rem; color: var(--ue-gedaempft); margin: 0 0 14px; }
.wt-antworten { display: flex; flex-direction: column; gap: 10px; }
.wt-antwort { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--ue-linie); border-radius: var(--ue-radius); background: var(--ue-flaeche); min-height: 54px; cursor: pointer; margin: 0; font-size: 1rem; }
.wt-antwort:hover { border-color: var(--ue-marine); background: var(--ue-info-soft); }
.wt-antwort input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--ue-marine); }
.wt-antwort:has(input:checked) { border-color: var(--ue-marine); box-shadow: inset 0 0 0 1px var(--ue-marine); background: var(--ue-info-soft); }
.wt-antwort-text { flex: 1; }
.wt-mark { width: 22px; height: 22px; flex: none; }
.wt-mark.ok { color: var(--ue-ok); }
.wt-mark.bad { color: var(--ue-bad); }
.wt-antwort.wt-richtig { border-color: var(--ue-ok); background: var(--ue-ok-soft); }
.wt-nav { display: flex; gap: 12px; margin-top: 22px; }
.wt-nav .btn { flex: 1; min-height: 52px; font-size: 1.05rem; }
.wt-nav .wt-zurueck { flex: 0 0 auto; min-width: 120px; }
.wt-hinweis { color: var(--ue-bernstein-text); font-size: .9rem; margin-top: 12px; min-height: 1.2em; }
@media (max-width: 767.98px) {
  .wt { padding: 4px 12px 40px; }
  .wt-frage { padding: 18px 16px 16px; }
  .wt-frage h2 { font-size: 1.15rem; }
  .wt-nav { flex-direction: column-reverse; }
  .wt-nav .wt-zurueck { min-width: 0; }
}

/* ===================================================================== *
   Folienansicht (Stufe 2, 12.09.2026) — Fortschritt oben, gerahmte Folie,
   Folienliste mit Zustaenden. Weiter/Zurueck bleiben im Kopf (Countdown).
 * ===================================================================== */
body:has(.folie-seite) .footer.fixed-bottom { display: none; }  /* Fortschritt jetzt oben */
.folie-seite { padding: 4px 0 28px; }
.folie-fortschritt { display: flex; align-items: center; gap: 14px; background: var(--ue-flaeche); border: 1px solid var(--ue-linie); border-radius: var(--ue-radius); padding: 11px 16px; margin-bottom: 16px; }
.folie-fortschritt b { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .95rem; }
.folie-fortschritt .progress { flex: 1; height: .55rem; background: var(--ue-linie); }
.folie-fortschritt .progress-bar { background: var(--ue-bernstein); }
.folie-fortschritt .prozent { white-space: nowrap; color: var(--ue-gedaempft); font-variant-numeric: tabular-nums; font-size: .88rem; }
.folie-buehne { background: var(--ue-flaeche); border: 1px solid var(--ue-linie); border-radius: var(--ue-radius); padding: 14px; box-shadow: var(--ue-schatten); }
.folie-seite .folie-wrap { margin: 0; }
.folie-seite .folie-wrap img { width: 100%; height: auto; border-radius: var(--ue-radius-klein); border: 1px solid var(--ue-linie-hell); background: #fff; }
/* Folienliste: Zustaende */
.folienleiste .sidebar-sticky { padding-top: .5rem; }
.folienleiste .nav-link { display: flex; align-items: center; gap: 8px; }
.folienleiste .nav-link svg { width: 17px; height: 17px; flex: none; }
.folienleiste .nav-link.fertig { color: #cbdcec; }
.folienleiste .nav-link.fertig svg { color: #8ecb98; }
.folienleiste .nav-link.aktuell { background: var(--ue-marine-hell); color: #fff; font-weight: 700; }
.folienleiste .nav-link.aktuell svg { color: var(--ue-bernstein); }
.folienleiste .nav-link.offen svg { color: var(--ue-marine-text); opacity: .6; }
.folienleiste .nav-link.gesperrt { color: #6d8298; }
.folienleiste .nav-link.gesperrt svg { color: #556f86; opacity: .8; }
@media (max-width: 767.98px) { .folie-fortschritt { padding: 9px 12px; gap: 10px; } }

/* ---- Fragen an das Ingenieurbuero (Stufe 2) ---- */
.fragen-seite { max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; }
.fragen-seite .dank { margin-bottom: 20px; }
.fragen-seite .dank h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 8px; }
.fragen-seite .dank p { color: var(--ue-gedaempft); margin: 0; max-width: 62ch; }
.fragen-seite .karte { background: var(--ue-flaeche); border: 1px solid var(--ue-linie); border-radius: var(--ue-radius); padding: 20px 22px; box-shadow: var(--ue-schatten); margin-bottom: 18px; }
.fragen-seite .karte h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; }
.fragen-seite .karte p.hinweis { color: var(--ue-gedaempft); font-size: .92rem; margin: 0 0 14px; }
.fragen-seite textarea.form-control { min-height: 120px; }
.fragen-seite .weiter-karte { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--ue-info-soft); border-color: #bfd3e6; }
.fragen-seite .weiter-karte .btn { min-height: 48px; }

/* ---- Folienansicht am Bildschirm: alles auf EINE Seite, Liste scrollt selbst ---- */
@media (min-width: 768px) {
  body:has(.folie-seite) { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  body:has(.folie-seite) > .container-fluid { flex: 1 1 auto; min-height: 0; }
  body:has(.folie-seite) .abstandOben { display: none; }
  body:has(.folie-seite) .container-fluid > .row { height: 100%; flex-wrap: nowrap; margin: 0; }
  body:has(.folie-seite) .folienleiste { height: 100%; overflow-y: auto; overflow-x: hidden; }   /* eigener Scrollbalken */
  body:has(.folie-seite) main[role="main"] { height: 100%; overflow: hidden; display: flex; flex-direction: column; padding-top: 14px; }
  .folie-seite { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 0 10px; }
  .folie-seite .folie-fortschritt { flex: 0 0 auto; }
  .folie-buehne { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  /* height/width 100% geben dem Wrap eine DEFINITE Hoehe - sonst greift die
     max-height:100% des Bildes nicht, und ein 16:9-Bild wird auf breiten,
     niedrigen Fenstern zu hoch und oben/unten abgeschnitten (Befund 12.09.). */
  .folie-buehne .folie-wrap { max-height: 100%; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; }
  .folie-buehne .folie-wrap img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
}

/* ---- Folienleiste: Scrollbalken marineblau statt hellgrau (saubere Abgrenzung) ---- */
.folienleiste { border-right: 1px solid rgba(0, 0, 0, .22); scrollbar-width: thin; scrollbar-color: #3a6790 var(--ue-marine); }
.folienleiste::-webkit-scrollbar { width: 10px; }
.folienleiste::-webkit-scrollbar-track { background: var(--ue-marine); }
.folienleiste::-webkit-scrollbar-thumb { background: #3a6790; border-radius: 8px; border: 2px solid var(--ue-marine); }
.folienleiste::-webkit-scrollbar-thumb:hover { background: #4c7ba8; }

/* ===================================================================== *
   Weitere Teilnehmer-Seiten (Stufe 2): Beschreibung, Ende, Zertifikat, Module
 * ===================================================================== */
.tn-seite { max-width: 760px; margin: 0 auto; padding: 14px 16px 48px; }
.tn-seite.breit { max-width: 900px; }
.tn-kopf { margin-bottom: 14px; }
.tn-kopf h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 8px; }
.tn-kopf p { color: var(--ue-gedaempft); margin: 0; max-width: 64ch; }
.tn-schritte { display: grid; gap: 12px; margin: 16px 0; grid-template-columns: 1fr; }
@media (min-width: 576px) { .tn-schritte { grid-template-columns: repeat(2, 1fr); } }
.tn-schritt { display: flex; gap: 12px; align-items: flex-start; background: var(--ue-flaeche); border: 1px solid var(--ue-linie); border-radius: var(--ue-radius); padding: 13px 15px; }
.tn-schritt .nr { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ue-marine); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.tn-schritt h2 { font-size: 1rem; font-weight: 700; margin: 0 0 2px; }
.tn-schritt p { margin: 0; color: var(--ue-gedaempft); font-size: .88rem; line-height: 1.4; }
.tn-start { text-align: center; margin-top: 18px; }
.tn-start .btn { min-height: 52px; font-size: 1.1rem; padding: 0 28px; }
.tn-karte { background: var(--ue-flaeche); border: 1px solid var(--ue-linie); border-radius: var(--ue-radius); padding: 20px 22px; box-shadow: var(--ue-schatten); margin-bottom: 18px; }
.tn-karte h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; }
.tn-karte p.hinweis { color: var(--ue-gedaempft); font-size: .93rem; margin: 0 0 14px; }
/* Abschluss (Ende) */
.tn-abschluss { text-align: center; padding-top: 12px; }
.tn-abschluss .haken { width: 76px; height: 76px; margin: 0 auto 14px; color: var(--ue-ok); }
.tn-abschluss h1 { font-size: 1.7rem; font-weight: 700; margin: 0 0 6px; }
.tn-abschluss p { color: var(--ue-gedaempft); margin: 0 auto; max-width: 52ch; }
/* Modul-Liste als Karten */
.modul-liste { display: grid; gap: 12px; margin-bottom: 8px; }
.modul-karte { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--ue-flaeche); border: 1px solid var(--ue-linie); border-radius: var(--ue-radius); padding: 14px 18px; }
.modul-karte.aktuell { border-color: var(--ue-marine); box-shadow: inset 0 0 0 1px var(--ue-marine); }
.modul-karte .info { flex: 1 1 240px; }
.modul-karte .info b { font-size: 1.02rem; display: inline-block; margin-right: 8px; }
.modul-karte .stand { color: var(--ue-gedaempft); font-size: .9rem; margin-top: 3px; }
.modul-karte .stand .progress { height: .5rem; width: 180px; max-width: 100%; display: inline-block; vertical-align: middle; margin-right: 8px; background: var(--ue-linie); }
.modul-karte .tat .btn { min-height: 42px; }
.sammel-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sammel-form .form-control { max-width: 200px; }

/* ---- Stufe 3: Admin-Tabellen als Karten am Handy (12.09.2026) ----
   /js/admin-tabellen.js setzt je Zelle data-label = Spaltenueberschrift und
   die Klasse .karten-tabelle. Unter 768px wird aus jeder Zeile eine Karte,
   Label links, Wert rechts. Darueber bleibt es eine Tabelle (bei Bedarf
   waagerecht scrollbar in .tabelle-scroll), damit die Seite nie seitlich laeuft. */
.tabelle-scroll { width: 100%; overflow-x: auto; }
@media (max-width: 767.98px) {
  .karten-tabelle thead, .karten-tabelle .karten-kopf { display: none; }
  .karten-tabelle, .karten-tabelle tbody { display: block; width: 100%; }
  .karten-tabelle tr {
    display: block; background: var(--ue-flaeche); border: 1px solid var(--ue-linie);
    border-radius: var(--ue-radius); box-shadow: var(--ue-schatten);
    padding: 4px 6px; margin-bottom: 12px;
  }
  .karten-tabelle td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    text-align: right; border: 0; padding: 8px 10px; word-break: break-word;
  }
  .karten-tabelle td + td { border-top: 1px solid var(--ue-linie-hell); }
  .karten-tabelle td::before {
    content: attr(data-label); font-weight: 600; color: var(--ue-gedaempft);
    text-align: left; flex: 0 0 42%; white-space: nowrap;
  }
  .karten-tabelle td:empty { display: none; }
  /* Aktions-Knoepfe in der Karte nicht quetschen */
  .karten-tabelle td .btn { white-space: nowrap; }
}