/* =====================================================================
   Lernplattform — Erscheinungsbild
   Zwei Marken ueber html[data-marke="tm|lw"] (Designsystem 2.0, Kern 1.8.0,
   02.10.2026): Hauptfarbe, Akzent, Status «Neu», Menuefarbe und Schriften
   kommen aus kern.css (--kern-haupt, --kern-akzent, --kern-status-neu,
   --kern-schrift, --kern-titel-schrift). Hier keine eigenen Marken-Tokens
   und keine eigenen Schriften mehr; --akzent zeigt auf die Kern-Hauptfarbe.
   Das alte TM-Gruen ist seit 26.09.2026 raus; Gruen bleibt nur als
   Zustandsfarbe (ok, abgeschlossen, Fortschritt). Nur hell (D2-1).
   Seit 26.09.2026 kommt der Seitenrahmen (Menue links, Kopfzeile mit
   Profilmenue, Breadcrumb, Fusszeile) aus kern.css; hier stehen nur noch
   die Werte der Plattform dafuer und die schmale Anmeldeseite.
   ===================================================================== */

:root {
  --akzent: var(--kern-haupt); --akzent-hover: #01476e; --link: #17708c; --linie-akzent: var(--kern-akzent);
  --gut: var(--kern-ok); --gut-grund: #e6f3e9; --warn: #8a6d00; --warn-grund: #fbf3d6;
  --fehler: var(--kern-gefahr); --fehler-grund: #fbe9ea; --info-grund: #e8f3f7;
  --text: var(--kern-text); --grau: var(--kern-leise); --grund: var(--kern-seite-bg); --karte: #fff; --linie: var(--kern-rand);
  --schrift: var(--kern-schrift);
  --radius: 10px;
}
html[data-marke="tm"] {
  --akzent-hover: #3a0f91; --link: var(--kern-haupt); --linie-akzent: var(--kern-haupt);
  --gut-grund: #e3f4ea; --info-grund: #efeafa;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--schrift); font-size: 16px; line-height: 1.55; color: var(--text); background: var(--grund); }
a { color: var(--link); }
a:hover { color: var(--akzent-hover); }
:focus-visible { outline: 3px solid var(--linie-akzent); outline-offset: 2px; }
h1 { font-family: var(--kern-titel-schrift); font-weight: var(--kern-titel-gewicht); font-size: 1.7rem; line-height: 1.2; margin: 0 0 18px; color: var(--akzent); }
h2 { font-size: 1.2rem; margin: 0 0 12px; color: var(--akzent); }
h3 { font-size: 1rem; margin: 22px 0 8px; }
code, pre { font-family: ui-monospace, Consolas, monospace; font-size: .9em; }
pre { background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; }

/* Seiten ohne Anmeldung (Anmelden, Zwei-Faktor, Passwort vergessen, Einrichten, Erstpasswort) */
.anmelde-seite { min-height: 100vh; display: flex; flex-direction: column; }
.anmelde-kopf { display: flex; justify-content: center; padding: 32px 16px 4px; }
.anmelde-marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--grau); font-size: .9rem; }
.anmelde-marke .logo { height: 34px; width: auto; display: block; }
.anmelde-marke span { padding-left: 12px; border-left: 1px solid var(--linie); }
.anmelde-inhalt { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: 20px 16px 40px; }
.anmelde-abmelden { margin: 0; text-align: center; }
.anmelde-fuss { width: 100%; max-width: 480px; margin: 0 auto; padding: 16px; color: var(--grau); font-size: .85rem; display: flex; justify-content: center; gap: 6px 18px; flex-wrap: wrap; }

/* Angemeldete Seiten im Kern-Rahmen: Inhalt, Bereich rechts im Kopf, Sprungziele unter der festen Kopfzeile */
.inhalt-breit { max-width: 1280px; }
.inhalt-schmal { max-width: 640px; }
.kern-kopf .bereich { font-size: .8rem; font-weight: 600; color: var(--grau); background: var(--grund); border: 1px solid var(--linie); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
[id] { scroll-margin-top: 80px; }

/* Bausteine */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 22px; margin-bottom: 18px; }
.karte.gefahr { border-color: #efc2c6; }
.oberzeile { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; font-weight: 700; color: var(--grau); }
.kurs h2 { font-size: 1.45rem; margin-top: 2px; }
.klein { font-size: .85rem; }
.grau { color: var(--grau); }
.nowrap { white-space: nowrap; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.knopf, .knopf-zweit, .knopf-leise, .knopf-gefahr {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px;
  font: inherit; font-weight: 700; font-size: .95rem; border-radius: var(--radius); padding: 8px 16px;
  cursor: pointer; text-decoration: none; border: 2px solid transparent; line-height: 1.2;
}
.knopf { background: var(--akzent); color: #fff; }
.knopf:hover { background: var(--akzent-hover); color: #fff; }
.knopf-zweit { background: #fff; color: var(--akzent); border-color: var(--akzent); }
.knopf-zweit:hover { background: var(--info-grund); color: var(--akzent); }
.knopf-leise { background: transparent; color: var(--link); padding: 6px 8px; min-height: 32px; font-weight: 600; }
.knopf-leise:hover { background: var(--grund); }
.knopf-gefahr { background: var(--fehler); color: #fff; }
.knopf-gefahr:hover { background: #a3141f; }
.knopf.klein, .knopf-zweit.klein, .knopf-leise.klein { min-height: 32px; padding: 5px 10px; font-size: .85rem; }
.knopf.breit { width: 100%; margin-top: 6px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.knopfreihe form { margin: 0; }

label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 12px; }
input:not([type=checkbox]):not([type=hidden]), select, textarea {
  display: block; width: 100%; margin-top: 4px; font: inherit; font-weight: 400; color: var(--text);
  padding: 9px 11px; border: 1px solid #b9c4cc; border-radius: 8px; background: #fff;
}
input:not([type=checkbox]):not([type=hidden]):disabled, select:disabled { background: var(--grund); color: var(--grau); border-color: var(--linie); }
textarea { resize: vertical; }
label.haken { display: flex; gap: 8px; align-items: center; font-weight: 600; }
label.haken input { width: 20px; height: 20px; }
form.reihe { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: flex-start; }   /* oben ausrichten, siehe «Felder einer Zeile» weiter unten */
form.reihe label { flex: 1 1 200px; }
form.reihe label.haken { flex: 1 1 100%; }
form.reihe .knopf, form.reihe .knopf-zweit { margin-bottom: 12px; }

.meldung { border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; border: 1px solid transparent; }
.meldung.ok { background: var(--gut-grund); border-color: #b9dcc2; }
.meldung.fehler { background: var(--fehler-grund); border-color: #efc2c6; }
.meldung.info { background: var(--info-grund); border-color: var(--linie); }
.zugang { border: 2px solid var(--linie-akzent); }

progress { display: block; width: 100%; height: 10px; border: 0; border-radius: 6px; background: #e4e9ed; overflow: hidden; appearance: none; margin: 10px 0 6px; }
progress::-webkit-progress-bar { background: #e4e9ed; border-radius: 6px; }
progress::-webkit-progress-value { background: var(--gut); border-radius: 6px; }
progress::-moz-progress-bar { background: var(--gut); border-radius: 6px; }
td progress { min-width: 110px; margin: 4px 0 2px; }

.badge { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin: 1px 0; white-space: nowrap; }
.badge.gruen { background: var(--gut-grund); color: var(--gut); }
.badge.gelb { background: var(--warn-grund); color: var(--warn); }
.badge.grau { background: #e9edf0; color: var(--grau); }
.badge.neu { background: var(--kern-status-neu); color: #fff; }   /* Status «Neu» (D2-7): TM violett, LW Teal aus kern.css */
.etappen { line-height: 1.9; }

.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabelle th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grau); border-bottom: 2px solid var(--linie); padding: 8px 10px; white-space: nowrap; }
.tabelle td { border-bottom: 1px solid var(--linie); padding: 9px 10px; vertical-align: top; }
.tabelle td.text { min-width: 220px; }
.tabelle form { margin: 0; }
/* Testlauf V29 (03.10.2026): Punktefeld der Fallstudien ohne Inline-Stil (CSP style-src self) */
.tabelle input.fs-punkte { width: 4.5em; min-width: 0; display: inline-block; }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kennzahl { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; color: var(--grau); font-size: .9rem; }
.kennzahl .zahl { font-size: 1.9rem; font-weight: 800; color: var(--akzent); line-height: 1.1; }

.frage { border-top: 1px solid var(--linie); padding: 14px 0 6px; }
.frage p { margin: 6px 0 10px; }
.frage textarea { margin-bottom: 8px; }
details summary { cursor: pointer; margin-bottom: 8px; }

/* Verwaltung: Raster, Rechte */
.reihe { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: flex-start; }
.reihe > label { flex: 1 1 200px; }
.badge.aus { background: #f1f3f5; color: #98a3ab; text-decoration: line-through; }
.badge.pflicht { box-shadow: inset 0 0 0 2px var(--fehler); }
.abschnitt { margin: 28px 0 12px; font-size: 1.15rem; }
.kurskarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kurzkarte { margin: 0; display: flex; flex-direction: column; }
.kurzkarte h3 { margin: 4px 0 6px; font-size: 1.05rem; color: var(--akzent); }
.kurzkarte p:last-child { margin-top: auto; margin-bottom: 0; }
.etappen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; margin: 8px 0 12px; }
.etappen-raster label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 500; font-size: .88rem; margin: 0; }
.etappen-raster select { width: auto; min-width: 96px; margin: 0; padding: 4px 6px; }
.zuteilung-kurs { border-top: 1px solid var(--linie); padding: 12px 0 4px; }
.zuteilung-kurs:first-of-type { border-top: 0; }
.zuteilen-form { border-top: 1px solid var(--linie); margin-top: 14px; padding-top: 6px; }
fieldset.gruppe { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 14px; margin: 4px 0 14px; }
fieldset.gruppe legend { font-weight: 700; font-size: .9rem; padding: 0 6px; }
.haken-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 14px; }
.haken-liste label.haken { margin: 4px 0; font-weight: 500; }
.rechte-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 18px; margin: 6px 0 18px; }
.rechte-liste label { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 400; }
.rechte-liste label > span > span { display: block; font-size: .85rem; color: var(--grau); }
.rechte-liste input { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.filter label { margin: 0; flex: 1 1 180px; }
td.wahl { width: 36px; }
td.wahl input { width: 18px; height: 18px; }
tr.nicht-zugeteilt td { color: var(--grau); }

/* Kursmanagement: Raster Firmen x Kurse und Personen x Kurse */
.einleitung { max-width: 75ch; margin: -8px 0 18px; }
.badge.rot { background: var(--fehler-grund); color: var(--fehler); }
.kennzahl .klein-zahl { font-size: 1.2rem; padding: 8px 0 4px; }
fieldset.gruppe.voll { flex: 1 1 100%; }
.km { border: 1px solid var(--linie); border-radius: 10px; margin-bottom: 14px; max-height: 70vh; overflow: auto; }
.km-raster { font-size: .88rem; }
.km-raster thead th { position: sticky; top: 0; z-index: 2; background: #fff; vertical-align: bottom; white-space: normal; text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--text); }
.km-raster th:first-child, .km-raster td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 190px; box-shadow: 1px 0 0 var(--linie); }
.km-raster thead th:first-child { z-index: 3; }
.km-raster th.zelle, .km-raster td.zelle { text-align: center; min-width: 118px; max-width: 150px; }
.km-raster td.zelle input { width: 20px; height: 20px; cursor: pointer; }
.km-raster td.zelle input:disabled { cursor: not-allowed; }
.km-raster tbody tr:hover td { background: var(--info-grund); }
.km-kurs { display: block; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.km-art { display: block; font-weight: 400; color: var(--grau); font-size: .75rem; margin-top: 2px; }
.km-zahl { display: block; font-weight: 400; color: var(--grau); font-size: .75rem; }
.km-raster th .knopf-leise { min-height: 26px; padding: 2px 6px; margin-top: 2px; }
tr.km-plattform td { background: var(--info-grund); }
tr.km-fest td { color: var(--grau); }

@media (max-width: 640px) {
  h1 { font-size: 1.4rem; }
  .karte { padding: 16px; }
  .kern-kopf .bereich { display: none; }   /* auf dem Handy steht der Bereich im Profilmenue */
}
@media print {
  .anmelde-kopf, .anmelde-fuss, .knopf, .knopf-zweit, .knopf-leise, form { display: none !important; }
  body { background: #fff; }
  .karte { border: 0; padding: 0; }
}

/* Wissensseiten (25.09.2026): Handbücher, FAQ, Release Notes, Quellen */
.w-liste { display: grid; gap: 10px; }
.w-zeile { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--text); }
.w-zeile > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.w-mod { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--info-grund); color: var(--akzent); white-space: nowrap; }
.w-hb { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.w-toc { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
/* 03.10.2026: Die Verweise liegen seit der Sprachumschaltung in einem inneren <div data-sprache>; ohne diese Regel liefen sie in einer Zeile zusammen */
.w-toc > div { display: flex; flex-direction: column; gap: 4px; }
.w-toc a { text-decoration: none; color: var(--grau); }
/* 02.10.2026 (M09): lange Zeilen und Wörter im Handbuch und in den Release Notes umbrechen statt die Seite auf dem Handy zu verbreitern */
.w-hb > * { min-width: 0; }
.w-text { overflow-wrap: anywhere; }
.w-text table { border-collapse: collapse; width: 100%; font-size: .92rem; display: block; overflow-x: auto; }
.w-text td, .w-text th { border: 1px solid var(--linie); padding: 6px 8px; vertical-align: top; }
.w-faq summary { cursor: pointer; font-weight: 700; }
@media (max-width: 800px) { .w-hb { grid-template-columns: minmax(0, 1fr); } .w-toc { position: static; } .w-zeile { flex-direction: column; } }
/* 26.09.2026: Suche in den Wissensseiten und «Frage an das Handbuch» (app/hilfe.php) */
.w-suche label { margin-bottom: 6px; }
.w-suche-zeile { display: flex; gap: 10px; align-items: stretch; }
.w-suche .w-suche-zeile input { margin-top: 0; flex: 1 1 auto; min-width: 0; }   /* 08.10.2026: mit .w-suche, sonst gewinnt «input:not(…)» oben und das Feld steht 4 px tiefer als der Knopf */
.w-suche-zeile .knopf { flex: none; }
.w-treffer { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text); }
.w-treffer:hover strong { text-decoration: underline; }
.w-treffer-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.w-abschnitt { font-size: .92rem; color: var(--akzent); font-weight: 600; }
.w-auszug { font-size: .9rem; color: var(--grau); overflow-wrap: anywhere; }
mark { background: #fff0a6; color: inherit; border-radius: 2px; padding: 0; box-shadow: 0 0 0 1px #fff0a6; }
.w-ki textarea { min-height: 84px; }
.w-antwort .w-frage-text { font-weight: 600; margin-top: 0; }
.w-antwort-text { line-height: 1.6; overflow-wrap: anywhere; }
.w-ref { font-size: .72rem; margin-left: 2px; }
.w-quellen-titel { font-size: 1rem; margin: 18px 0 6px; }
.w-quellen { margin: 0 0 8px; padding-left: 20px; }
.w-auto { margin: 14px 0 0; border-top: 1px solid var(--linie); padding-top: 8px; }
.w-nichts p { margin: 0 0 8px; }
.w-nichts p:last-child { margin-bottom: 0; }
@media (max-width: 520px) { .w-suche-zeile { flex-direction: column; } }

/* Gemeinsamer Kern (26.09.2026): Werte der Plattform fuer kern.css. Hauptfarbe und Menuefarbe kommen seit Kern 1.8.0 aus data-marke. */
html[data-marke] { --kern-radius: 12px; }   /* Rand, Leise, Text, Seite, Gefahr und Ok kommen je Marke aus kern.css; --linie, --grau usw. zeigen darauf */
main .kern-karte { max-width: none; margin: 0 0 18px; padding: 22px; }
main .kern-karte h1 { color: var(--akzent); }
main .kern-karte h2 { color: var(--akzent); }
main .kern-karte label { margin-bottom: 0; }
main .kern-karte input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
main .kern-karte .kern-feld input { margin-top: 0; }
main .kern-karte .kern-code { font-size: 22px; }
.kern-knopf { min-height: 40px; }
.kern-knopf-klein { min-height: 32px; }
.kern-dialog label { margin-bottom: 0; }   /* Fenster des Kerns (Rueckfrage, einmalig sichtbarer Wert): Abstand kommt aus kern.css, nicht aus «label» oben */
.sprachwahl { display: flex; justify-content: flex-end; gap: 12px; font-size: .85rem; margin: -6px 0 6px; }
.sprachwahl a { color: var(--grau); text-decoration: none; }
.sprachwahl a[aria-current] { color: var(--akzent); font-weight: 700; text-decoration: underline; }
@media (max-width: 640px) {
  main .kern-karte { padding: 16px; border-radius: 12px; border: 1px solid var(--linie); }
  main .kern-karte-breit .kern-tabelle { display: block; overflow-x: auto; }   /* Verbindungen: breite Tabellen scrollen in der Karte, nicht die Seite */
}

/* Kurskatalog und Bestellformular (26.09.2026, nur lernen.logistikwerk.ch). Seiten ohne Anmeldung, schmale Karte. */
.katalog-karte h2 a { text-decoration: none; color: var(--akzent); }
.kurs-fakten { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.kurs-fakten li { font-size: .82rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--info-grund); color: var(--akzent); }
.preis { font-weight: 700; color: var(--akzent); }
.zentriert { text-align: center; }
ol.schritte { padding-left: 20px; }
fieldset.bestell-art { display: flex; flex-wrap: wrap; gap: 4px 22px; }
fieldset.bestell-art legend { font-size: .92rem; }
fieldset.bestell-art label.haken { margin: 6px 0; font-weight: 500; }
label.haken input[type=radio] { display: inline-block; width: 20px; height: 20px; margin: 0; padding: 0; flex: none; }
label.einwilligung { align-items: flex-start; font-weight: 500; font-size: .92rem; }
label.einwilligung input { flex: none; margin-top: 2px; }
.feld-fehler { color: var(--fehler); }
label.feld-fehler input:not([type=checkbox]):not([type=radio]), label.feld-fehler textarea { border: 2px solid var(--fehler); background: var(--fehler-grund); }
label.feld-fehler input[type=checkbox] { outline: 2px solid var(--fehler); outline-offset: 2px; }
fieldset.feld-fehler { border-color: var(--fehler); }
.feld-meldung { display: block; margin-top: 4px; font-size: .85rem; font-weight: 700; color: var(--fehler); }
.meldung ul { margin: 6px 0 0; padding-left: 20px; }
.meldung.fehler a { color: var(--fehler); font-weight: 600; }
.bestell-falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }
/* 02.10.2026 (SCH-07): Systembezug jeder Hilfe-Antwort, Zollplattform oder Lernplattform */
.w-system { display: inline-block; font-size: .74rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linie); color: var(--grau); background: var(--karte); white-space: nowrap; margin-right: 6px; }
.w-system-lern { border-color: var(--akzent); color: var(--akzent); }
.w-treffer-kopf { flex-wrap: wrap; justify-content: flex-start; }
.w-treffer-kopf > .klein { margin-right: auto; }
.w-zeile > .w-system { margin-left: auto; }

/* Entscheide V29 (03.10.2026, V29-E-39): Spalte «Gültig bis» der Firmenfreigabe. Datumsfeld auf der Höhe der Fassungs-Auswahl, Badge darunter. */
td.frist { min-width: 11.5rem; }
td.frist input { width: 10.5rem; max-width: 100%; }
td.frist .badge { display: inline-block; margin-top: 4px; }

/* Felder einer Zeile (Regel des Inhabers, 28.09. und 08.10.2026): Felder, die nebeneinander stehen, beginnen auf derselben Höhe.
   .reihe und .filter richten deshalb oben aus (flex-start, nicht flex-end); Hinweis- und Fehlertexte stehen unter dem Feld und
   verschieben kein Nachbarfeld. Knopf und Haken haben keine Beschriftung und rücken um deren Höhe nach unten: eine Textzeile der
   Beschriftung (.92rem × 1.55) plus 4 px Abstand zum Feld. Die Zeilenhöhe der Beschriftung steht hier ausdrücklich, damit die
   Rechnung stimmt; die Beschriftung bricht nicht um (sonst stünde ihr Feld tiefer), bei wenig Platz bricht das ganze Feld um.
   Auswahlfeld und Knopf sind in der Zeile so hoch wie das Eingabefeld. Der Versatz gilt nur neben beschrifteten Feldern. */
:root { --zeile-versatz: calc(.92rem * 1.55 + 4px); --zeile-feldhoehe: calc(.92rem * 1.55 + 20px); }
.reihe > label:not(.haken), .filter > label:not(.haken) { line-height: 1.55; white-space: nowrap; }
.reihe > label:not(.haken) > span, .filter > label:not(.haken) > span { white-space: normal; }
.reihe > label > select, .filter > label > select { min-height: var(--zeile-feldhoehe); }
.reihe > label + .knopf, .reihe > label + .knopf-zweit, .filter > label + .knopf, .filter > label + .knopf-zweit { margin-top: var(--zeile-versatz); min-height: var(--zeile-feldhoehe); }
.reihe > label:not(.haken) ~ label.haken, .filter > label:not(.haken) ~ label.haken { margin-top: var(--zeile-versatz); min-height: var(--zeile-feldhoehe); }

/* 25.10.2026 (lx-24): Kurzanleitung auf /hilfe/lernplattform */
.hilfe-schritte { margin-bottom: 22px; }
.hilfe-schritt { position: relative; padding-top: 18px; }
.hilfe-schritt h3 { padding-right: 40px; }
.hilfe-nr { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--akzent); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.hilfe-schritt p { margin: 0 0 10px; }
.hilfe-schritt p:last-child { margin: 0; }
.hilfe-kontakt p:last-child { margin-bottom: 0; }

/* Lernen-Abo in vier Schritten (04.11.2026, app/abo.php seite_abo_bestellen) */
.abo-schritte { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: none; }
.abo-schritte li { font-size: .82rem; color: var(--grau); border-top: 3px solid var(--linie); padding-top: 6px; line-height: 1.3; }
.abo-schritte li span { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--grund); border: 1px solid var(--linie); font-weight: 700; font-size: .75rem; margin-right: 2px; }
.abo-schritte li[aria-current="step"] { color: var(--akzent); font-weight: 700; border-top-color: var(--akzent); }
.abo-schritte li[aria-current="step"] span { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.abo-schritte li.fertig { border-top-color: var(--linie-akzent); }
.abo-aktion { background: var(--gut-grund); border: 1px solid var(--gut); border-radius: 10px; padding: 12px 14px; }
.abo-stufen { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.abo-stufen legend { font-weight: 700; margin-bottom: 8px; }
.abo-stufe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; border: 1px solid var(--linie); border-radius: 12px; padding: 14px; cursor: pointer; background: var(--karte); }
.abo-stufe input { margin-top: 4px; }
.abo-stufe:has(input:checked) { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent) inset; }
.abo-stufe-kopf { display: grid; }
.abo-preis { grid-column: 2; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.abo-preis strong { font-size: 1.35rem; color: var(--akzent); }
.abo-danach { display: block; margin-top: 2px; }
.abo-leistungen, .abo-kurse { margin: 0 0 12px; padding-left: 20px; }
.abo-leistungen li, .abo-kurse li { margin: 3px 0; }
.abo-bereich { border-top: 1px solid var(--linie); padding: 8px 0 2px; }
.abo-kurse { margin-left: 26px; }
.abo-zusammenfassung { background: var(--info-grund); border-radius: 10px; padding: 12px 14px; margin: 6px 0 12px; }
.abo-zusammenfassung h3 { margin: 0 0 6px; }
.abo-zusammenfassung dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.abo-zusammenfassung dt { color: var(--grau); }
.abo-zusammenfassung dd { margin: 0; font-weight: 600; }
.abo-preistabelle { width: 100%; border-collapse: collapse; margin: 0 0 10px; }
.abo-preistabelle th, .abo-preistabelle td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.abo-preistabelle th { font-size: .8rem; color: var(--grau); font-weight: 600; }
.abo-inbegriffen { opacity: .85; }
.abo-inbegriffen .haken strong::after { content: " (in Komplett enthalten)"; font-weight: 400; color: var(--grau); }
.abo-endpreis .abo-endbetrag { font-size: 1.1rem; color: var(--akzent); }
.abo-weiter { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
form:not(.abo-schritte-an) .abo-weiter { display: none; }
@media (max-width: 480px) { .abo-schritte li { font-size: .72rem; } .abo-weiter .knopf, .abo-weiter .knopf-zweit { flex: 1; } }