/**
 * Meldo Arbeitsheft-Lektionen
 * Hinweiskasten, Aufklapp-Bereich und Abo-Verweis.
 */

.meldo-wb-notice{
  background:#F7F9F9;border:1.5px solid #D8E1E3;border-left:4px solid #3D7C85;
  border-radius:0 14px 14px 0;padding:18px 22px;margin:0 0 28px;
  font-family:"Akko","Segoe UI",sans-serif;line-height:1.6;
}
.meldo-wb-notice-title{
  font-family:"Akko",sans-serif;font-weight:700;font-size:17px;
  margin-bottom:6px;color:#306168;
}
.meldo-wb-notice p{margin:0;color:#3C4E4B}

/* Textlink für Abonnenten — bewusst zurückhaltend.
   Kein Kasten, kein Overlay: Das Video ist die Hauptsache. */
.meldo-wb-toggle-wrap{margin:22px 0 0}
/* BuddyBoss formt <button> in Beitragsinhalten zu gefüllten Flächen um —
   der Textlink sah dadurch beim Überfahren wie eine Schaltfläche aus.
   Alles Relevante wird deshalb ausdrücklich zurückgesetzt. */
.meldo-wb-toggle,
.meldo-wb-toggle:hover,
.meldo-wb-toggle:focus,
.meldo-wb-toggle:active{
  background:none!important;background-color:transparent!important;
  border:0!important;box-shadow:none!important;
  padding:0!important;margin:0!important;min-height:0!important;
  width:auto!important;height:auto!important;line-height:1.5!important;
  font-family:"Akko","Segoe UI",sans-serif!important;
  font-size:15px!important;font-weight:400!important;
  text-transform:none!important;letter-spacing:normal!important;
  border-radius:0!important;
  text-decoration:underline!important;text-underline-offset:3px;
}
.meldo-wb-toggle{color:#3D7C85!important;cursor:pointer}
.meldo-wb-toggle:hover{color:#306168!important}
.meldo-wb-toggle:focus-visible{outline:2px solid #E8924F;outline-offset:3px}
.meldo-wb-toggle[aria-expanded="true"]{color:#6B7B79!important}
.meldo-wb-toggle-wrap + .meldo-wb-body{margin-top:18px}

/* Abo-Verweis */
.meldo-wb-offer{
  margin-top:40px;background:#fff;border:1.5px solid #e1ebe9;
  border-radius:16px;padding:26px;
}
.meldo-wb-offer h3{
  font-family:"Akko",sans-serif;font-weight:700;font-size:20px;margin:0 0 10px;
}
.meldo-wb-offer p{margin:0 0 14px;color:#3C4E4B}
/* !important nötig: BuddyBoss setzt für Links in Beitragsinhalten eine eigene
   Farbe, die den weissen Text sonst überschreibt — der Knopf sah dann leer aus. */
.meldo-wb-btn{
  display:inline-block;background:#3D7C85;color:#fff!important;text-decoration:none!important;
  padding:12px 24px;border-radius:11px;
  font-family:"Akko",sans-serif;font-weight:700;font-size:16px;line-height:1.2;
}
.meldo-wb-btn:hover,.meldo-wb-btn:focus,.meldo-wb-btn:visited{
  background:#1F737A;color:#fff!important;text-decoration:none!important;
}
.meldo-wb-btn:focus-visible{outline:3px solid #E8924F;outline-offset:2px}

/* Hinweis auf die geschlossenen Themen */
.meldo-wb-locked{
  display:flex;gap:12px;align-items:flex-start;
  background:#fdf8ec;border:1.5px solid #f0e2c0;border-left:4px solid #E5A823;
  border-radius:0 12px 12px 0;padding:15px 18px;margin:26px 0 18px;
  font-family:"Akko","Segoe UI",sans-serif;font-size:14.5px;line-height:1.55;
  color:#3C4E4B;
}
.meldo-wb-locked-icon{color:#B07D12;flex-shrink:0;margin-top:2px;display:block}
.meldo-wb-locked strong{color:#22312F}
.meldo-wb-locked em{color:#306168;font-style:normal;font-weight:600}
.meldo-wb-login{margin-top:14px!important;font-size:14px;color:#6B7B79}

@media(max-width:560px){
  .meldo-wb-notice{padding:15px 18px}
  .meldo-wb-details summary{font-size:15px}
  .meldo-wb-btn{display:block;text-align:center}
}
@media print{
  .meldo-wb-offer,.meldo-wb-notice,.meldo-wb-toggle-wrap{display:none}
  /* Beim Drucken immer sichtbar, auch wenn zugeklappt. */
  .meldo-wb-body[hidden]{display:block!important}
}

/* ════════════════════════════════════════════════════════════
   MODUL-KARTE STATT TEXTLINK  (v1.16.0)

   Bisher stand hier ein schlichter Textlink «Text zum Video nachlesen».
   Das beschrieb die Sache falsch: Dahinter liegt kein Transkript, sondern
   ein Modul mit Klaviatur, Hörübungen und Quiz.

   Die Karte macht sichtbar, was drin ist — sie ist aber bewusst RUHIG
   gehalten und nicht so auffällig wie ein Aufruf zum Handeln. Wer Zugang
   zum Video hat, soll das Video sehen; die Karte ist das zweite Angebot,
   nicht das konkurrierende.
   ════════════════════════════════════════════════════════════ */

.meldo-wb-toggle-wrap{margin:26px 0 0}

.meldo-wb-card,
.meldo-wb-card:hover,
.meldo-wb-card:focus,
.meldo-wb-card:active{
    /* BuddyBoss setzt Knöpfen Farbe, Hintergrund und volle Breite —
       deshalb hier durchgehend !important, sonst greift das Theme durch. */
    display:flex!important;
    align-items:center;
    gap:14px;
    width:100%!important;
    max-width:560px;
    text-align:left!important;
    background:#F9FAFA!important;
    border:1.5px solid #E1EBE9!important;
    border-radius:16px!important;
    padding:15px 18px!important;
    box-shadow:none!important;
    text-transform:none!important;
    letter-spacing:normal!important;
    font-family:inherit!important;
    font-weight:400!important;
    cursor:pointer;
    transition:border-color .16s, background .16s, transform .12s;
}
.meldo-wb-card:hover{
    background:#F3F5F5!important;
    border-color:#CBD6D7!important;
    transform:translateY(-1px);
}
.meldo-wb-card:focus-visible{outline:2px solid #E8924F;outline-offset:3px}

.meldo-wb-card-icon{
    flex:0 0 44px;height:44px;border-radius:12px;
    background:#3D7C85;color:#fff;
    display:flex;align-items:center;justify-content:center;
}
.meldo-wb-card-text{flex:1;min-width:0;display:block}
.meldo-wb-card-title{
    display:block;
    font-family:"Akko","Akko",sans-serif;
    font-weight:700;font-size:16px;line-height:1.3;
    color:#22312F!important;
}
.meldo-wb-card-sub{
    display:block;margin-top:2px;
    font-size:13.5px;color:#5B6B69!important;line-height:1.4;
}
.meldo-wb-card-chev{
    flex:0 0 auto;color:#6B7B79;
    transition:transform .2s;
}
.meldo-wb-card[aria-expanded="true"]{
    background:#F3F5F5!important;
    border-color:#CBD6D7!important;
}
.meldo-wb-card[aria-expanded="true"] .meldo-wb-card-chev{transform:rotate(180deg)}

.meldo-wb-toggle-wrap + .meldo-wb-body{margin-top:20px}

@media(max-width:560px){
    .meldo-wb-card{gap:11px;padding:13px 14px!important}
    .meldo-wb-card-icon{flex:0 0 38px;height:38px}
    .meldo-wb-card-title{font-size:15px}
    .meldo-wb-card-sub{font-size:12.5px}
}

/* ════════════════════════════════════════════════════════════
   LEKTION OHNE VIDEO

   Hier ist das Modul der Inhalt, nicht die Zweitfassung. Der Hinweis
   erklärt in einem Satz, warum kein Player da ist — ohne zu wirken, als
   fehle etwas.
   ════════════════════════════════════════════════════════════ */

.meldo-wb-soon{
    background:linear-gradient(135deg,#FCF8F1 0%,#F3F5F5 100%);
    border:1.5px solid #F2DECC;
    border-radius:16px;
    padding:18px 20px;
    margin:0 0 22px;
}
.meldo-wb-soon-badge{
    display:inline-block;
    background:#E8924F;color:#22312F;
    font-family:"Akko","Akko",sans-serif;
    font-weight:700;font-size:12px;letter-spacing:.04em;
    text-transform:uppercase;
    padding:4px 11px;border-radius:8px;
    margin-bottom:9px;
}
.meldo-wb-soon p{margin:0;font-size:14.5px;line-height:1.6;color:#3C4E4B}
.meldo-wb-body-open{margin-top:0}

/* ════════════════════════════════════════════════════════════
   LEKTION NOCH LEER  (v1.18.0)

   Steht in Lektionen, an denen noch gar nichts vorhanden ist. Ohne
   diesen Hinweis blickt man auf eine leere Seite und weiss nicht, ob
   etwas kaputt ist oder noch fehlt.

   Bewusst freundlich statt alarmierend: Das ist kein Fehler, sondern
   ein Zwischenstand.
   ════════════════════════════════════════════════════════════ */

.meldo-wb-empty {
    text-align: left;
}
.meldo-wb-empty .meldo-wb-soon-hint {
    margin: 12px 0 0 !important;
    font-size: 13.5px !important;
    color: #5B6B69 !important;
}

.meldo-wb-todo {
    list-style: none !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.meldo-wb-todo li {
    margin: 0 !important;
    padding: 6px 12px !important;
    background: rgba(255, 255, 255, .72);
    border: 1px solid #F2DECC;
    border-radius: 9px;
    font-size: 13px !important;
    color: #764518 !important;
    line-height: 1.35 !important;
}
/* Punkt davor statt Aufzählungszeichen — die Liste steht waagerecht. */
.meldo-wb-todo li::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #DFB69B;
    margin-right: 7px;
    vertical-align: 1px;
}

/* ── Zwei Abschnitte: was da ist, was noch kommt (1.19.0) ───── */

.meldo-wb-part { margin-top: 13px; }
.meldo-wb-part-h {
    font-family: "Akko", "Akko", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6B7B79;
    margin-bottom: 6px;
}

/* Was schon da ist: als Links, damit man direkt hinkommt. */
.meldo-wb-have {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Der Link füllt das ganze Feld. Vorher lag das Polster auf dem <li>, und
   nur der Titel war anklickbar — ein schmaler Streifen in einer Fläche, die
   wie ein Knopf aussieht. */
.meldo-wb-have li {
    margin: 0 0 5px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, .82);
    border: 1px solid #EAD4BC;
    border-radius: 9px;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    overflow: hidden;
    transition: background .12s, border-color .12s;
}
.meldo-wb-have li:last-child { margin-bottom: 0 !important; }
.meldo-wb-have li:hover { background: #fff; border-color: #DEBE98; }

.meldo-wb-have a,
.meldo-wb-have .meldo-wb-have-inner {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 13px !important;
    color: #764518 !important;
    text-decoration: none !important;
    font-weight: 600;
}
.meldo-wb-have a:focus-visible {
    outline: 2px solid #E8924F;
    outline-offset: -3px;
}
.meldo-wb-have a:hover .meldo-wb-have-t { text-decoration: underline; }

.meldo-wb-tick {
    flex: 0 0 auto;
    color: #AE601A;
    font-weight: 700;
}
.meldo-wb-have-t { flex: 1; min-width: 0; }

/* Angelegte, aber noch leere Teile — sie stehen unter «kommt noch», sollen
   sich aber von den gar nicht angelegten unterscheiden. */
.meldo-wb-todo li.is-empty {
    background: rgba(255, 255, 255, .55);
    border-style: dashed;
}
.meldo-wb-note {
    display: block;
    font-size: 11.5px !important;
    color: #7A8A78 !important;
    margin-top: 2px;
    font-style: italic;
}

/* ── Hinweis auf die Aufgabenwerkstatt (1.21.0) ──────────────
   Steht am Fuss des «In Bearbeitung»-Kastens, für Lehrpersonen und
   Einzelnutzende. Bewusst ruhig: Er erscheint in einem Moment, in dem
   etwas fehlt — ein lauter Werbeblock wirkte da aufdringlich.
   ──────────────────────────────────────────────────────────── */

.meldo-wb-workshop {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(146, 178, 90, .35);
}
.meldo-wb-workshop-icon {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 11px;
    background: #3D7C85;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.meldo-wb-workshop-body {
    flex: 1;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #3C4E4B !important;
}
.meldo-wb-workshop-body strong {
    font-family: "Akko", "Akko", sans-serif;
    color: #22312F !important;
}
.meldo-wb-workshop-btn {
    display: inline-block;
    margin-top: 9px;
    background: #3D7C85 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-family: "Akko", "Akko", sans-serif;
    font-weight: 700;
    font-size: 13.5px !important;
    padding: 9px 18px !important;
    border-radius: 22px;
    transition: background .14s, transform .12s;
}
.meldo-wb-workshop-btn:hover {
    background: #306168 !important;
    transform: translateY(-1px);
    color: #fff !important;
}
.meldo-wb-workshop-btn:focus-visible {
    outline: 2px solid #E8924F;
    outline-offset: 2px;
}

@media (max-width: 520px) {
    .meldo-wb-workshop { gap: 10px; }
    .meldo-wb-workshop-icon { flex: 0 0 30px; height: 30px; }
    .meldo-wb-workshop-btn { display: block; text-align: center; }
}

/* Fast fertige Lektionen: freundlicher, weniger nach Baustelle.
   Wo nur noch ein Arbeitsblatt fehlt, wäre ein Warnton unangemessen. */
.meldo-wb-soon.meldo-wb-fast {
    background: linear-gradient(180deg, #F7FBF2 0%, #FEFDFB 100%) !important;
    border-color: #F2DECC !important;
}
.meldo-wb-soon.meldo-wb-fast .meldo-wb-soon-badge {
    background: #EAD4BC !important;
    color: #764518 !important;
}

/* ════════════════════════════════════════════════════════════
   AUFKLAPPBARE STATUSZEILE  (1.23.0)

   Vorher stand der Hinweis als ganzer Kasten vor dem Video und schob
   es weit nach unten. Wo schon ein Video da ist, ist der Hinweis aber
   eine Randnotiz — und eine Randnotiz gehört nicht vor den Hauptinhalt.

   Gelöst über <details>: eine Zeile, aufklappbar. Nativ, ohne
   JavaScript, mit Tastatur bedienbar. Aufgeklappt startet sie nur,
   wenn die Lektion praktisch leer ist — dann ist sie der einzige
   Inhalt und darf Platz beanspruchen.
   ════════════════════════════════════════════════════════════ */

details.meldo-wb-soon {
    padding: 0 !important;
}

.meldo-wb-sum {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    cursor: pointer;
    list-style: none;
    border-radius: 14px;
    transition: background .13s;
}
.meldo-wb-sum::-webkit-details-marker { display: none; }
.meldo-wb-sum:hover { background: rgba(255, 255, 255, .45); }
.meldo-wb-sum:focus-visible {
    outline: 2px solid #E8924F;
    outline-offset: -2px;
}

.meldo-wb-kurz {
    flex: 1;
    min-width: 0;
    font-size: 13.5px !important;
    color: #3C4E4B !important;
    line-height: 1.4;
}

/* Fortschrittsbalken: zeigt auf einen Blick, wie weit die Lektion ist.
   Eine Zahl müsste man lesen und einordnen — einen Balken sieht man. */
.meldo-wb-balken {
    flex: 0 0 62px;
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .8);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.meldo-wb-balken > span {
    display: block;
    height: 100%;
    background: #E8924F;
    border-radius: 4px;
}

.meldo-wb-chev {
    flex: 0 0 auto;
    color: #6B7B79;
    display: flex;
    transition: transform .18s;
}
details.meldo-wb-soon[open] .meldo-wb-chev { transform: rotate(180deg); }

.meldo-wb-detail {
    padding: 2px 16px 15px;
    border-top: 1px solid rgba(146, 178, 90, .28);
    margin-top: 2px;
}
.meldo-wb-detail > p:first-child { margin-top: 11px !important; }

@media (max-width: 520px) {
    .meldo-wb-sum { gap: 8px; padding: 10px 13px; }
    .meldo-wb-balken { display: none; }
    .meldo-wb-kurz { font-size: 12.5px !important; }
    .meldo-wb-detail { padding: 2px 13px 13px; }
}

/* ============================================================
   v1.55.2 — Kursleiste: lesbare Titel, sichtbarer aktueller Schritt.

   Das Markup stammt aus BuddyBoss (learndash/ld30/learndash-sidebar.php),
   nicht aus diesem Plugin. Die Klassennamen koennen sich bei einem
   Theme-Update aendern; die Regeln sind darum so geschrieben, dass sie
   dann wirkungslos werden statt etwas zu zerstoeren.

   Die Farben der Stationszeichen bleiben unangetastet — sie tragen die
   Bedeutung (Lime = ueben, Gold = Testlauf, Rot = Ziel) und sind fuer
   die schnelle Wiedererkennung da.
   ============================================================ */

/* --- 1 · Der Titel bekommt die ganze Breite ---------------------
   Vorher schnitten die Meta-Spalten jeden Titel ab: «N1 Notensystem …»,
   «N3 Notennamen …». Ein Baum, in dem man keinen Eintrag zu Ende lesen
   kann, zwingt zum Raten. Jetzt bricht der Titel um statt abzuschneiden. */
.bb-lesson-head .bb-lesson-title,
.bb-lms-title-wrap .bb-lms-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 0 !important;
    line-height: 1.35 !important;
}
.bb-lesson-head > .flex-1,
.bb-lms-title-wrap > .bb-lms-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* --- 2 · Meta raus aus der Modulzeile ---------------------------
   «4 Themen | 1 Ueberpruefung» wiederholt nur, was beim Aufklappen
   ohnehin dasteht — und nahm dem Titel den Platz. */
.bb-lesson-head .bb-lesson-topics-count,
.bb-lesson-head .bb-lesson-quizzes-count,
.bb-lesson-head .bb-lesson-sidebar-ld-sep {
    display: none !important;
}

/* --- 3 · Der aktuelle Schritt ----------------------------------
   Vorher nur ein Hauch helleres Grau — man wusste nicht, wo man ist.
   Jetzt dieselbe Form wie ueberall sonst in Meldo: weisses Plaettchen,
   Teal-Text, weicher Schatten. */
.lms-topic-item.current > .bb-lms-title-wrap,
.lms-quiz-item.current > .bb-lms-title-wrap {
    background: var(--m-weiss, #fff) !important;
    border-radius: var(--m-radius, 10px) !important;
    box-shadow: var(--m-karte, 0 1px 4px rgba(0,0,0,.12)) !important;
}
.lms-topic-item.current > .bb-lms-title-wrap .bb-lms-title,
.lms-quiz-item.current > .bb-lms-title-wrap .bb-lms-title {
    color: var(--m-teal, #3D7C85) !important;
    font-weight: 700 !important;
}

/* --- 4 · Zustand ueber die Form, nicht ueber Farbe --------------
   Gruen als Zustandsfarbe stand in Konkurrenz zum Lime der
   Stationszeichen. Gefuellt gegen leer ist der staerkere Kontrast —
   und der einzige, den auch rot-gruen-schwache Augen sehen. */
.bb-lms-status .i-progress-completed,
.bb-lms-progress-wrap .i-progress-completed {
    color: var(--m-gedaempft, #4a5658) !important;
    opacity: 1 !important;
}
.bb-lms-status .i-progress-not-completed,
.bb-lms-progress-wrap .i-progress-not-completed {
    color: #c3cdcc !important;
    opacity: 1 !important;
}

/* --- 5 · Drei Ebenen, drei Gewichte -----------------------------
   Level, Modul und Station sahen fast gleich aus. */
.ld-lesson-section-heading {
    font-family: 'Akko', sans-serif !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--m-schwach, #8a9391) !important;
    margin: 18px 0 6px !important;
}
.bb-lesson-head .bb-lesson-title {
    font-family: 'Akko', sans-serif !important;
    font-weight: 700 !important;
}
.bb-lms-title-wrap .bb-lms-title {
    font-family: 'Akko', sans-serif !important;
}

/* --- 6 · v1.55.3: Der Klapppfeil steht auf der Lektionszeile ------
   Im Markup steht innerhalb des <li> zuerst die Level-Ueberschrift,
   dann der Pfeil, dann die Zeile:

     <li>
       <div class="ld-item-list-section-heading">Level A1</div>
       <span class="lms-toggle-lesson">▸</span>
       <a class="bb-lesson-head">…</a>
       <div class="lms-lesson-content">…</div>
     </li>

   Der Pfeil ist absolut gesetzt und misst von der Oberkante des <li>.
   Wo eine Ueberschrift davorsteht, schiebt sie die Zeile nach unten —
   der Pfeil bleibt oben haengen.

   Nicht ueber einen Abstand geloest, der zur Hoehe der Ueberschrift
   passen muesste: die haengt an Schriftgroesse und Zeilenumbruch und
   waere beim naechsten Text wieder daneben. Stattdessen wird die Lage
   aufgehoben und die Reihenfolge ueber das Layout bestimmt. Das
   stimmt mit und ohne Ueberschrift. */
.lms-lessions-list .lms-lesson-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
.lms-lessions-list .lms-lesson-item > .ld-item-list-section-heading {
    order: 1;
    flex: 0 0 100% !important;
}
.lms-lessions-list .lms-lesson-item > .lms-toggle-lesson {
    order: 2;
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 4px 0 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}
.lms-lessions-list .lms-lesson-item > .bb-lesson-head {
    order: 3;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.lms-lessions-list .lms-lesson-item > .lms-lesson-content {
    order: 4;
    flex: 0 0 100% !important;
}
/* Lektionen ohne Unterthemen haben keinen Pfeil — damit ihre Titel
   trotzdem auf derselben Kante beginnen, ruecken sie um dessen
   Breite ein. */
.lms-lessions-list .lms-lesson-item.bb-lesson-item-no-topics > .bb-lesson-head {
    margin-left: 22px !important;
}

/* --- 7 · v1.55.5: Die aktive Lektionszeile traegt dieselbe Form ---
   Themen und Quizze bekamen in 1.55.2 das weisse Plaettchen, die
   Lektion darueber nicht — dabei ist es derselbe Zustand auf einer
   anderen Ebene. Wer auf einer Lektionsseite steht, soll das genauso
   sehen wie auf einer Themenseite. */
.lms-lesson-item.current > .bb-lesson-head {
    background: var(--m-weiss, #fff) !important;
    border-radius: var(--m-radius, 10px) !important;
    box-shadow: var(--m-karte, 0 1px 4px rgba(0,0,0,.12)) !important;
}
.lms-lesson-item.current > .bb-lesson-head .bb-lesson-title {
    color: var(--m-teal, #3D7C85) !important;
}

/* --- 8 · v1.55.6: Abschluss rechts und bündige Titel -------------
   Das Plaettchen lief bis an die Panelkante und wirkte dort
   angeschnitten. Und die Lektionstitel standen weiter rechts als die
   Themen darunter — die uebergeordnete Ebene war staerker eingerueckt
   als die untergeordnete, also die Hierarchie auf dem Kopf. Beides
   kommt aus dem BuddyBoss-Bestand. */
.lms-lesson-item.current > .bb-lesson-head {
    margin-right: 12px !important;
    padding: 8px 12px !important;
}
.lms-lesson-item > .bb-lesson-head > .flex-1,
.lms-lesson-item > .bb-lesson-head .bb-lesson-title {
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
/* Themen und Quizze bekommen denselben Abschluss. */
.lms-topic-item.current > .bb-lms-title-wrap,
.lms-quiz-item.current > .bb-lms-title-wrap {
    margin-right: 12px !important;
    padding: 8px 12px !important;
}

/* --- 9 · v1.55.8: Gleiche Einrückung für alle Lektionszeilen ------
   In 1.55.6 bekam nur die AKTIVE Zeile eine eigene Polsterung. Alle
   übrigen behielten die von BuddyBoss — darum standen ihre Titel weit
   rechts vom Pfeil, und nur die aktive sass richtig. Jetzt tragen alle
   dieselbe; das Plättchen der aktiven ändert nur Fläche und Farbe,
   nicht die Lage des Textes.

   Die Levelleiste aus 1.55.7 ist wieder entfernt: Datei, Einbindung
   und Regeln. */
.lms-lesson-item > .bb-lesson-head,
.lms-topic-item > .bb-lms-title-wrap,
.lms-quiz-item > .bb-lms-title-wrap {
    padding: 8px 12px !important;
    margin-right: 12px !important;
}

/* --- 10 · v1.55.9: Level als Marke mit Steigerung ----------------
   Form übernommen von den Gruppenmarken im Dashboard («INHALT»,
   «LERNEN») — dieselbe Oberfläche soll dieselbe Sprache sprechen.

   Die Treppe davor steigt in vier Stufen und ist so weit gefüllt,
   wie das Level fortgeschritten ist: A1 ein Viertel, C2 ganz.
   Bewusst KEINE Farbskala über die Level — es gibt im Panel schon
   drei Bedeutungsebenen (Stationstyp, Zustand, aktuelle Position).
   Eine vierte hätte alle drei geschwächt. Die Treppe wächst, die
   Farbe bleibt.

   Die Stufe setzt assets/levelstufe.js. Ohne das Skript bleibt die
   Pille, die Treppe steht auf dem Grundwert. */
.lms-lessions-list .ld-item-list-section-heading {
    margin: 26px 0 10px !important;
}
.lms-lessions-list .ld-lesson-section-heading {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 12px 5px 10px !important;
    border-radius: 999px !important;
    background: var(--m-teal-l, #EEF3F4) !important;
    color: var(--m-teal, #3D7C85) !important;
    font-family: 'Akko', sans-serif !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}
.lms-lessions-list .ld-lesson-section-heading::before {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 13px !important;
    flex: 0 0 auto !important;
    /* Vier ansteigende Balken, wie die Regler im Musiktools-Zeichen. */
    clip-path: polygon(0 100%, 0 76%, 22% 76%, 22% 52%, 48% 52%,
                       48% 28%, 74% 28%, 74% 0, 100% 0, 100% 100%);
    background: linear-gradient(90deg,
        var(--m-teal, #3D7C85) 0 var(--mwl-fuell, 25%),
        rgba(61,124,133,.22) var(--mwl-fuell, 25%) 100%) !important;
}
.lms-lessions-list .ld-lesson-section-heading[data-mwl-stufe="1"] { --mwl-fuell: 22%; }
.lms-lessions-list .ld-lesson-section-heading[data-mwl-stufe="2"] { --mwl-fuell: 40%; }
.lms-lessions-list .ld-lesson-section-heading[data-mwl-stufe="3"] { --mwl-fuell: 58%; }
.lms-lessions-list .ld-lesson-section-heading[data-mwl-stufe="4"] { --mwl-fuell: 74%; }
.lms-lessions-list .ld-lesson-section-heading[data-mwl-stufe="5"] { --mwl-fuell: 88%; }
.lms-lessions-list .ld-lesson-section-heading[data-mwl-stufe="6"] { --mwl-fuell: 100%; }

/* --- 11 · v1.55.10: Marke schrumpft, Themen hängen an der Linie ---

   a) Die Level-Pille lief über die volle Breite und wurde dadurch zum
      Farbband. Eine Marke ist so breit wie ihr Text — sonst trennt sie,
      statt zu benennen. Der Wrapper zog sie auseinander.

   b) Die Themen einer Lektion standen frei in der Liste; dass sie zu
      der Zeile darüber gehören, musste man sich denken. Jetzt hängen
      sie an einer senkrechten Linie, die unter dem Klapppfeil beginnt
      und am letzten Thema endet — der Weg durch die Lektion.
      Kein Rahmen, keine Fläche: Zugehörigkeit zeigt man mit einer
      Linie, nicht mit einem Kasten. */
.lms-lessions-list .ld-item-list-section-heading {
    display: flex !important;
    justify-content: flex-start !important;
}
.lms-lessions-list .ld-lesson-section-heading {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
}

.lms-lessions-list .lms-lesson-content {
    position: relative !important;
    margin-left: 19px !important;
    padding-left: 18px !important;
}
.lms-lessions-list .lms-lesson-content::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    bottom: 10px !important;
    width: 2px !important;
    border-radius: 2px !important;
    /* Oben kräftig, nach unten auslaufend — die Linie führt, sie
       umschliesst nicht. */
    background: linear-gradient(180deg,
        rgba(61,124,133,.35) 0%,
        var(--m-kartenlinie, #dfe8e7) 55%,
        rgba(223,232,231,0) 100%) !important;
}

/* --- 12 · v1.55.11: Themen als gemeinsame Region ------------------

   Die Linie allein war zu schwach. Nach dem Gestaltprinzip der
   gemeinsamen Region binden sich Elemente, die einen Grund teilen,
   stärker zusammen als solche, die nur nebeneinanderstehen — und
   das überstimmt sogar Unterschiede in Farbe und Form, wie sie die
   Stationszeichen haben.

   Bewusst eine getönte Fläche und KEIN Rahmen: Rahmen um jede
   aufgeklappte Lektion ergäben konkurrierende Regionen und Unruhe.
   Die Abgrenzung nach unten macht Abstand, nicht eine zweite Linie —
   innen eng, aussen weit.

   a) gemeinsamer Grund für die Themen
   b) Linie läuft jetzt durch bis zum letzten Eintrag
   c) innen enger, zur nächsten Lektion weiter                        */
.lms-lessions-list .lms-lesson-content {
    background: rgba(255,255,255,.55) !important;
    border-radius: var(--m-radius, 10px) !important;
    margin-left: 19px !important;
    margin-right: 12px !important;
    padding: 6px 0 6px 18px !important;
}
.lms-lessions-list .lms-lesson-content::before {
    top: 8px !important;
    bottom: 8px !important;
    background: linear-gradient(180deg,
        rgba(61,124,133,.40) 0%,
        rgba(61,124,133,.18) 70%,
        rgba(61,124,133,.10) 100%) !important;
}

/* Innen eng: die Themen gehören zusammen. */
.lms-lessions-list .lms-lesson-content .lms-topic-item > .bb-lms-title-wrap,
.lms-lessions-list .lms-lesson-content .lms-quiz-item > .bb-lms-title-wrap {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-right: 6px !important;
}
/* Aussen weit: Abstand trennt die Lektionen voneinander. */
.lms-lessions-list .lms-lesson-item {
    margin-bottom: 14px !important;
}
.lms-lessions-list .lms-lesson-item > .bb-lesson-head {
    margin-bottom: 4px !important;
}

/* --- 13 · v1.55.12: Zusammengeschweisst, enger, nichts beschnitten -

   a) Abstände zurück auf das Mass von 1.55.10. In 1.55.11 hatte ich
      sie erhöht, um die Lektionen zu trennen — mit der gemeinsamen
      Fläche braucht es das nicht mehr, die Gruppe trennt sich selbst.

   b) Nahtlos: Ist eine Lektion aufgeklappt, wird ihre Zeile zum Kopf
      der Fläche. Unten eckig, die Themenfläche oben eckig — zwei
      Teile, eine Form. Unterscheidbar bleiben sie über die Tönung:
      der Kopf kräftiger, die Themen eine Spur zurückgenommen. Das ist
      die Logik einer Karte mit Kopfzeile, nicht zwei Kästen
      übereinander.

   c) Der rechte Rand lag doppelt (Fläche 12 px, Zeile darin nochmals
      6) — die Häkchen rutschten über die Kante. Jetzt trägt ihn nur
      die Fläche.                                                     */

/* a) Abstände */
.lms-lessions-list .lms-lesson-item {
    margin-bottom: 6px !important;
}
.lms-lessions-list .lms-lesson-item > .bb-lesson-head {
    margin-bottom: 0 !important;
}

/* b) Aufgeklappte Lektion: Zeile und Themen werden eine Form.
      «:has» prüft, ob der Inhalt sichtbar ist — BuddyBoss schaltet
      ihn über ein Inline-«display». */
.lms-lesson-item:has(> .lms-lesson-content:not([style*="display: none"])) > .bb-lesson-head {
    background: var(--m-weiss, #fff) !important;
    border-radius: var(--m-radius, 10px) var(--m-radius, 10px) 0 0 !important;
    box-shadow: none !important;
    margin-left: 19px !important;
    margin-right: 12px !important;
}
.lms-lesson-item:has(> .lms-lesson-content:not([style*="display: none"])) > .lms-lesson-content {
    background: rgba(255,255,255,.62) !important;
    border-radius: 0 0 var(--m-radius, 10px) var(--m-radius, 10px) !important;
    margin-top: 0 !important;
}
/* Ist die aufgeklappte Lektion zugleich die aktive, trägt der Kopf
   weiterhin Teal-Schrift — aber keinen eigenen Schatten mehr, sonst
   läge eine Kante mitten in der Form. */
.lms-lesson-item.current:has(> .lms-lesson-content:not([style*="display: none"])) > .bb-lesson-head {
    box-shadow: none !important;
}

/* c) Rechter Rand nur einmal */
.lms-lessions-list .lms-lesson-content {
    padding-right: 10px !important;
}
.lms-lessions-list .lms-lesson-content .lms-topic-item > .bb-lms-title-wrap,
.lms-lessions-list .lms-lesson-content .lms-quiz-item > .bb-lms-title-wrap {
    margin-right: 0 !important;
    padding-right: 4px !important;
}
.lms-lessions-list .bb-lms-status,
.lms-lessions-list .bb-lms-progress-wrap {
    flex: 0 0 auto !important;
}

/* --- 14 · v1.55.13: Eine Kante für alles ------------------------

   Ursache des Überlaufs: Die Themenfläche ist ein Flex-Kind mit
   «flex-basis: 100%» UND Aussenabständen. 100 % beziehen sich auf den
   Inhaltsbereich der Zeile — die Abstände kommen OBENDRAUF. Die
   Fläche war damit 31 px breiter als der Platz, lief über den rechten
   Rand und nahm die Häkchen mit.

   Statt an Abständen zu drehen, stehen jetzt zwei feste Masse am
   Anfang, und alles andere rechnet damit:

       --mwl-links  Breite des Klapppfeils = linke Kante
       --mwl-rechts Abstand zum Panelrand  = rechte Kante

   Lektionszeile und Themenfläche benutzen beide dieselben Werte.
   Damit können sie gar nicht mehr auseinanderlaufen — und wer die
   Einrückung ändern will, ändert eine Zahl.                          */
.lms-lessions-list {
    --mwl-links: 22px;
    --mwl-rechts: 14px;
}

/* Der Pfeil bestimmt die linke Kante — darum bekommt er eine feste
   Breite statt einer, die von der Zeichensatzgrösse abhängt. */
.lms-lessions-list .lms-lesson-item > .lms-toggle-lesson {
    width: var(--mwl-links) !important;
    min-width: var(--mwl-links) !important;
    margin: 0 !important;
    text-align: center !important;
}
/* Lektionen ohne Unterthemen haben keinen Pfeil — sie rücken um
   dieselbe Breite ein, damit die Kante durchgeht. */
.lms-lessions-list .lms-lesson-item.bb-lesson-item-no-topics > .bb-lesson-head {
    margin-left: var(--mwl-links) !important;
}

.lms-lessions-list .lms-lesson-item > .bb-lesson-head {
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: var(--mwl-rechts) !important;
}
.lms-lessions-list .lms-lesson-item > .lms-lesson-content {
    box-sizing: border-box !important;
    flex: 0 0 calc(100% - var(--mwl-links) - var(--mwl-rechts)) !important;
    width: calc(100% - var(--mwl-links) - var(--mwl-rechts)) !important;
    max-width: calc(100% - var(--mwl-links) - var(--mwl-rechts)) !important;
    margin-left: var(--mwl-links) !important;
    margin-right: var(--mwl-rechts) !important;
    padding-right: 8px !important;
}
.lms-lesson-item:has(> .lms-lesson-content:not([style*="display: none"])) > .bb-lesson-head {
    margin-left: 0 !important;
    margin-right: var(--mwl-rechts) !important;
}

/* Engere Abstände zwischen den Lektionen. */
.lms-lessions-list .lms-lesson-item {
    margin-bottom: 2px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.lms-lessions-list .lms-lesson-item > .bb-lesson-head {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

/* --- 15 · v1.55.14: Der Pfeil gehört in die Karte ----------------

   Bisher trug die ZEILE die weisse Fläche, der Klapppfeil steht aber
   daneben — er blieb auf dem grauen Grund und riss eine Kerbe in die
   Karte.

   Jetzt trägt das ganze Listenelement die Fläche. Damit liegen Pfeil,
   Titel und Themen in EINER Form, und die Karte ist das, was sie sein
   soll: die Lektion. Die Zeile darin wird durchsichtig, die Themen
   bleiben eine Spur zurückgenommen — Kopf und Rumpf einer Karte.

   «overflow:hidden» hält die Rundung; ohne das stünden die Ecken der
   Kinder über.                                                       */
.lms-lesson-item:has(> .lms-lesson-content:not([style*="display: none"])) {
    background: var(--m-weiss, #fff) !important;
    border-radius: var(--m-radius, 10px) !important;
    box-shadow: var(--m-karte, 0 1px 4px rgba(0,0,0,.12)) !important;
    overflow: hidden !important;
    margin-right: var(--mwl-rechts) !important;
    margin-bottom: 8px !important;
}
.lms-lesson-item:has(> .lms-lesson-content:not([style*="display: none"])) > .bb-lesson-head {
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-right: 0 !important;
}
.lms-lesson-item:has(> .lms-lesson-content:not([style*="display: none"])) > .lms-lesson-content {
    flex: 0 0 calc(100% - var(--mwl-links)) !important;
    width: calc(100% - var(--mwl-links)) !important;
    max-width: calc(100% - var(--mwl-links)) !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    background: rgba(26,52,56,.028) !important;
}
/* Die aufgeklappte Lektion ist oft zugleich die aktive — dann soll
   nicht zusätzlich die Zeile leuchten. Die Karte reicht. */
.lms-lesson-item.current:has(> .lms-lesson-content:not([style*="display: none"])) > .bb-lesson-head {
    background: none !important;
    box-shadow: none !important;
}

/* --- 16 · v1.55.15: Navigation leise, Handlung laut ---------------

   «Zurück» und «Weiter» waren türkis gefüllt und standen damit auf
   derselben Stufe wie «Als vollständig markieren» — drei Hauptaktionen
   auf einer Seite. Navigation ist aber folgenlos, das Abschliessen
   nicht: es schreibt Fortschritt, die Lehrperson sieht es.

   Darum: Blättern als stille Aktion mit Chevron, Abschliessen als
   einzige gefüllte Fläche. Ist der Inhalt erledigt, wandert das
   Gewicht auf «Weiter».                                              */

/* Obere Zeile: schlank, ohne Fläche */
.learndash_next_prev_link { display: flex !important; gap: 10px !important; }
.learndash_next_prev_link .prev-link,
.learndash_next_prev_link .next-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    background: none !important;
    border: none !important;
    border-radius: var(--m-radius, 10px) !important;
    box-shadow: none !important;
    color: var(--m-gedaempft, #4a5658) !important;
    font-family: 'Akko', sans-serif !important;
    font-weight: 700 !important;
    font-size: .9rem !important;
    text-decoration: none !important;
}
.learndash_next_prev_link .prev-link:hover,
.learndash_next_prev_link .next-link:hover {
    background: none !important;
    color: var(--m-teal, #3D7C85) !important;
}
.learndash_next_prev_link .next-link { margin-left: auto !important; }
/* Das «→» ist ein Schriftzeichen. Ersetzt durch gezeichnete Chevrons. */
.learndash_next_prev_link .meta-nav { display: none !important; }
.learndash_next_prev_link .prev-link::before,
.learndash_next_prev_link .next-link::after,
.mwl-weg-link::before,
.mwl-weg-link::after {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    flex: 0 0 auto !important;
    border-style: solid !important;
    border-color: currentColor !important;
    border-width: 2px 2px 0 0 !important;
}
.learndash_next_prev_link .prev-link::before,
.mwl-weg-zurueck::before { transform: rotate(-135deg) !important; }
.learndash_next_prev_link .next-link::after,
.mwl-weg-weiter::after   { transform: rotate(45deg) !important; }

/* v1.55.18: Die untere Wegleiste ist zurückgenommen.

   Sie wurde um die Fussleiste von BuddyBoss herum gebaut, deren
   Aufbau ich nicht kenne — mal zu breit, mal zu schmal. Der Knopf
   «Als vollständig markieren» steht wieder unverändert dort, wo
   LearnDash ihn hinsetzt. Geblieben ist die schlanke Blätterzeile
   oben; die kommt ohne fremde Container aus. */

/* --- 17 · v1.55.19: Hover darf den Text nicht schlucken -----------
   BuddyBoss setzt beim Überfahren eine türkise Fläche — mit meiner
   türkisen Schrift darauf war der Text unsichtbar. Meine Regel war
   zu schwach: die Bestandsregel ist spezifischer. Jetzt mit «body»
   davor, und die Fläche wird ausdrücklich auch im Hover entfernt. */
body .learndash_next_prev_link a.prev-link,
body .learndash_next_prev_link a.next-link,
body .learndash_next_prev_link a.prev-link:hover,
body .learndash_next_prev_link a.next-link:hover,
body .learndash_next_prev_link a.prev-link:focus,
body .learndash_next_prev_link a.next-link:focus {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body .learndash_next_prev_link a.prev-link,
body .learndash_next_prev_link a.next-link {
    color: var(--m-gedaempft, #4a5658) !important;
}
body .learndash_next_prev_link a.prev-link:hover,
body .learndash_next_prev_link a.next-link:hover,
body .learndash_next_prev_link a.prev-link:focus,
body .learndash_next_prev_link a.next-link:focus {
    color: var(--m-teal, #3D7C85) !important;
}

/* --- 18 · v1.55.20: Untere Navigation in der vorhandenen Zeile ----
   Kein eigener Behälter mehr: «.ld-content-actions» gehört bereits
   zur Inhaltsspalte. Links still, rechts still, in der Mitte die
   einzige gefüllte Fläche. */
body .ld-content-actions.mwl-wegnav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
body .mwl-weg-platz { flex: 1 1 0 !important; min-width: 0 !important; }
body .mwl-weg-platz--weiter { display: flex !important; justify-content: flex-end !important; }
body .ld-content-actions.mwl-wegnav > .ld-content-action:not(.mwl-weg-platz) {
    flex: 0 0 auto !important;
    margin: 0 !important;
}
body .mwl-weg-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--m-radius, 10px) !important;
    color: var(--m-gedaempft, #4a5658) !important;
    text-decoration: none !important;
}
body .mwl-weg-link:hover { background: none !important; color: var(--m-teal, #3D7C85) !important; }
body .mwl-weg-weiter { flex-direction: row-reverse !important; text-align: right !important; }
body .mwl-weg-wort {
    font-family: 'Akko', sans-serif !important;
    font-weight: 700 !important;
    font-size: .9rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}
body .mwl-weg-ziel {
    display: block !important;
    font-family: 'Akko', sans-serif !important;
    font-size: .76rem !important;
    color: var(--m-schwach, #8a9391) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 20ch !important;
}
@media (max-width: 640px) {
    body .mwl-weg-ziel { display: none !important; }
    body .mwl-weg-link { padding: 0 4px !important; }
}

/* --- 19 · v1.55.21: Nur ein Chevron, und mobil auf einer Zeile ----

   a) Das «⌐» war mein Fehler: Ich habe ::before UND ::after mit der
      Ecke belegt, aber je Richtung nur einen gedreht — der andere
      blieb als unrotierter rechter Winkel stehen. Jetzt trägt jede
      Richtung genau ein Zeichen, das andere wird abgeschaltet.

   b) Mobil stapelte sich alles. Jetzt: der Knopf zuoberst über die
      volle Breite, darunter Zurück und Weiter auf EINER Zeile,
      aussen an den Rändern.                                          */

/* a) je Richtung genau ein Chevron */
body .mwl-weg-zurueck::after,
body .mwl-weg-weiter::before,
body .learndash_next_prev_link a.prev-link::after,
body .learndash_next_prev_link a.next-link::before {
    content: none !important;
    display: none !important;
}

/* b) mobil */
@media (max-width: 640px) {
    body .ld-content-actions.mwl-wegnav {
        flex-wrap: wrap !important;
        row-gap: 14px !important;
    }
    body .ld-content-actions.mwl-wegnav > .ld-content-action:not(.mwl-weg-platz) {
        order: -1 !important;
        flex: 0 0 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    body .mwl-weg-platz { flex: 1 1 0 !important; }
    body .mwl-weg-platz--zurueck { display: flex !important; justify-content: flex-start !important; }
    body .mwl-weg-platz--weiter  { display: flex !important; justify-content: flex-end !important; }
}

/* --- 20 · v1.55.22: Mobile Reihenfolge ausdrücklich setzen --------
   Die Regeln aus 1.55.21 kamen nicht durch: das Theme stellt die
   Zeile mobil auf Spalte und ordnet sie um (darum stand «Weiter»
   zuoberst). Statt dagegen zu drücken wird jetzt alles ausdrücklich
   gesetzt — Richtung, Umbruch und die Reihenfolge jedes Teils.

   Gewollt: Knopf zuoberst über die volle Breite, darunter Zurück
   links und Weiter rechts auf EINER Zeile.                           */
@media (max-width: 640px) {
    html body .ld-content-actions.mwl-wegnav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        row-gap: 12px !important;
        column-gap: 8px !important;
    }
    /* 1 · der Knopf, volle Breite */
    html body .ld-content-actions.mwl-wegnav > .ld-content-action:not(.mwl-weg-platz) {
        order: 1 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
    }
    html body .ld-content-actions.mwl-wegnav .sfwd-mark-complete,
    html body .ld-content-actions.mwl-wegnav .learndash_mark_complete_button {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* 2 · darunter die beiden Richtungen, nebeneinander */
    html body .mwl-weg-platz--zurueck {
        order: 2 !important;
        flex: 1 1 0 !important;
        display: flex !important;
        justify-content: flex-start !important;
    }
    html body .mwl-weg-platz--weiter {
        order: 3 !important;
        flex: 1 1 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
}

/* --- 21 · v1.55.23: Hover auch unten entschärfen -------------------
   Das Theme färbt Links in «.ld-content-action» beim Überfahren
   türkis ein. Mit türkiser Schrift darauf verschwand der Text.
   Meine Regel war wieder zu schwach — der Bestandsselektor führt
   über den Behälter. Jetzt über denselben Weg, eine Stufe länger. */
html body .ld-content-actions .mwl-weg-platz a.mwl-weg-link,
html body .ld-content-actions .mwl-weg-platz a.mwl-weg-link:hover,
html body .ld-content-actions .mwl-weg-platz a.mwl-weg-link:focus,
html body .ld-content-actions .mwl-weg-platz a.mwl-weg-link:active {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: none !important;
}
html body .ld-content-actions .mwl-weg-platz a.mwl-weg-link { color: var(--m-gedaempft, #4a5658) !important; }
html body .ld-content-actions .mwl-weg-platz a.mwl-weg-link:hover,
html body .ld-content-actions .mwl-weg-platz a.mwl-weg-link:focus {
    color: var(--m-teal, #3D7C85) !important;
}
html body .ld-content-actions .mwl-weg-platz a.mwl-weg-link .mwl-weg-wort { color: inherit !important; }
html body .ld-content-actions .mwl-weg-platz a.mwl-weg-link:hover .mwl-weg-ziel { color: inherit !important; }

/* --- 22 · v1.55.24: Gleiche Waffe wie der Bestand -----------------

   Warum die Hover-Korrekturen in 1.55.19, .21 und .23 nichts bewirkt
   haben: Das Theme adressiert diesen Bereich über eine ID —
   «#learndash-page-content .learndash_next_prev_link a…». Eine ID
   wiegt in der Spezifität schwerer als jede Zahl von Klassen; «html
   body .klasse» verliert dagegen immer, auch mit «!important» auf
   beiden Seiten, weil «!important» nur gleichrangige Regeln entscheidet
   und die ID-Regel die höhere Stufe hat.

   Darum hier derselbe Weg: über die ID. Das ist kein Trick, sondern
   die Regel aus 5.6 — den Bestandsselektor suchen und mindestens
   genauso spezifisch werden.                                         */
#learndash-page-content .learndash_next_prev_link a.prev-link,
#learndash-page-content .learndash_next_prev_link a.next-link,
#learndash-page-content .learndash_next_prev_link a.prev-link:hover,
#learndash-page-content .learndash_next_prev_link a.next-link:hover,
#learndash-page-content .learndash_next_prev_link a.prev-link:focus,
#learndash-page-content .learndash_next_prev_link a.next-link:focus,
#learndash-page-content .ld-content-actions a.mwl-weg-link,
#learndash-page-content .ld-content-actions a.mwl-weg-link:hover,
#learndash-page-content .ld-content-actions a.mwl-weg-link:focus,
#learndash-page-content .ld-content-actions a.mwl-weg-link:active {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 44px !important;
}
#learndash-page-content .learndash_next_prev_link a.prev-link,
#learndash-page-content .learndash_next_prev_link a.next-link,
#learndash-page-content .ld-content-actions a.mwl-weg-link {
    color: var(--m-gedaempft, #4a5658) !important;
    font-size: .9rem !important;
}
#learndash-page-content .learndash_next_prev_link a.prev-link:hover,
#learndash-page-content .learndash_next_prev_link a.next-link:hover,
#learndash-page-content .ld-content-actions a.mwl-weg-link:hover,
#learndash-page-content .ld-content-actions a.mwl-weg-link:focus {
    color: var(--m-teal, #3D7C85) !important;
}
#learndash-page-content .ld-content-actions a.mwl-weg-link .mwl-weg-wort,
#learndash-page-content .ld-content-actions a.mwl-weg-link .mwl-weg-ziel {
    color: inherit !important;
}

/* --- 23 · v1.55.25: Level auch in der Kursuebersicht --------------
   Die Uebersicht benutzt dieselben Klassen wie die Kursleiste
   («.ld-item-list-section-heading» > «.ld-lesson-section-heading»).
   Bisher waren meine Regeln auf «.lms-lessions-list» eingegrenzt und
   griffen dort nicht — und das Stylesheet lud auf Kursseiten gar
   nicht. Beides ist behoben; die Marke sieht jetzt an beiden Orten
   gleich aus, samt Treppe. */
.ld-item-list .ld-item-list-section-heading,
.learndash-wrapper .ld-item-list-section-heading {
    display: flex !important;
    justify-content: flex-start !important;
    margin: 26px 0 10px !important;
}
.ld-item-list .ld-lesson-section-heading,
.learndash-wrapper .ld-lesson-section-heading {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 5px 12px 5px 10px !important;
    border-radius: 999px !important;
    background: var(--m-teal-l, #EEF3F4) !important;
    color: var(--m-teal, #3D7C85) !important;
    font-family: 'Akko', sans-serif !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}
.ld-item-list .ld-lesson-section-heading::before,
.learndash-wrapper .ld-lesson-section-heading::before {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 13px !important;
    flex: 0 0 auto !important;
    clip-path: polygon(0 100%, 0 76%, 22% 76%, 22% 52%, 48% 52%,
                       48% 28%, 74% 28%, 74% 0, 100% 0, 100% 100%);
    background: linear-gradient(90deg,
        var(--m-teal, #3D7C85) 0 var(--mwl-fuell, 25%),
        rgba(61,124,133,.22) var(--mwl-fuell, 25%) 100%) !important;
}

/* --- 24 · v1.55.26: Aufgeklappte Lektion in der Kursübersicht -----
   Dieselbe Sprache wie in der Kursleiste: Ist eine Lektion offen,
   wird sie zur weissen Karte — Kopf und Themen in EINER Form, keine
   zwei Kästen übereinander. Die Meta-Angaben bleiben hier bewusst
   stehen; in der Übersicht ist Platz dafür, im Panel nicht.

   Klassen aus LearnDash ld30 («ld-expanded» am offenen Element). */
.ld-item-list .ld-item-list-item {
    border-radius: var(--m-radius, 10px) !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
    transition: background var(--m-uebergang, .18s), box-shadow var(--m-uebergang, .18s) !important;
}
.ld-item-list .ld-item-list-item.ld-expanded {
    background: var(--m-weiss, #fff) !important;
    box-shadow: var(--m-karte, 0 1px 4px rgba(0,0,0,.12)) !important;
}
.ld-item-list .ld-item-list-item.ld-expanded > .ld-item-list-item-preview {
    background: none !important;
    border-bottom: 1px solid var(--m-kartenlinie, #EDF2F2) !important;
}
.ld-item-list .ld-item-list-item.ld-expanded .ld-item-list-item-expanded {
    background: rgba(26,52,56,.028) !important;
    border: none !important;
}
/* Der Sprechblasen-Zipfel unter dem Kopf gehörte zur alten Optik —
   in einer durchgehenden Karte ist er ein Fremdkörper. */
.ld-item-list .ld-item-list-item.ld-expanded > .ld-item-list-item-preview::after,
.ld-item-list .ld-item-list-item.ld-expanded > .ld-item-list-item-preview::before {
    display: none !important;
}

/* --- 25 · v1.55.27: Richtiger Selektor für «aufgeklappt» ----------
   In 1.55.26 hatte ich «.ld-item-list-item.ld-expanded» geschrieben.
   Das Markup zeigt: «ld-expanded» sitzt am Inhaltsbereich
   («.ld-item-list-item-expanded.ld-expanded») und am Knopf — das
   Listenelement selbst trägt nur «ld-expandable». Die Regel konnte
   also nie greifen.

   Jetzt über «:has»: aufgeklappt ist, was einen aufgeklappten
   Inhaltsbereich enthält. Dazu die Spezifität des Bestands
   («.learndash-wrapper .ld-item-list .ld-item-list-item»). */
.learndash-wrapper .ld-item-list .ld-item-list-item:has(> .ld-item-list-item-expanded.ld-expanded) {
    background: var(--m-weiss, #fff) !important;
    border: none !important;
    border-radius: var(--m-radius, 10px) !important;
    box-shadow: var(--m-karte, 0 1px 4px rgba(0,0,0,.12)) !important;
    overflow: hidden !important;
    margin: 0 0 8px !important;
}
.learndash-wrapper .ld-item-list .ld-item-list-item:has(> .ld-item-list-item-expanded.ld-expanded)
    > .ld-item-list-item-preview {
    background: none !important;
    border-bottom: 1px solid var(--m-kartenlinie, #EDF2F2) !important;
}
.learndash-wrapper .ld-item-list .ld-item-list-item > .ld-item-list-item-expanded.ld-expanded {
    background: rgba(26,52,56,.028) !important;
    border: none !important;
}
.learndash-wrapper .ld-item-list .ld-item-list-item > .ld-item-list-item-expanded.ld-expanded .ld-table-list,
.learndash-wrapper .ld-item-list .ld-item-list-item > .ld-item-list-item-expanded.ld-expanded .ld-table-list-items,
.learndash-wrapper .ld-item-list .ld-item-list-item > .ld-item-list-item-expanded.ld-expanded .ld-table-list-item,
.learndash-wrapper .ld-item-list .ld-item-list-item > .ld-item-list-item-expanded.ld-expanded .ld-table-list-header {
    background: none !important;
    border: none !important;
}
/* Der Zipfel unter der Kopfzeile gehört zur alten Optik. */
.learndash-wrapper .ld-item-list .ld-item-list-item:has(> .ld-item-list-item-expanded.ld-expanded)
    > .ld-item-list-item-preview::after {
    display: none !important;
}
/* Nicht aufgeklappte Zeilen: ruhig, ohne harten Rahmen. */
.learndash-wrapper .ld-item-list .ld-item-list-item {
    border: none !important;
    border-radius: var(--m-radius, 10px) !important;
    margin: 0 0 8px !important;
}

/* --- 26 · v1.55.28: Keine Materialzeichen in den Blätter-Links ----
   «meldo-zusatzmaterial» setzt «.mzm-nav-ico» an Einträge, die es am
   Titel erkennt — und trifft dabei auch «Zurück» und «Weiter», weil
   dort derselbe Titel steht. In einer Navigationszeile hat ein
   Materialzeichen nichts zu suchen: es beschreibt den Inhalt, nicht
   den Weg dorthin. */
#learndash-page-content .learndash_next_prev_link .mzm-nav-ico,
#learndash-page-content .ld-content-actions .mzm-nav-ico,
.learndash_next_prev_link .mzm-nav-ico,
.ld-content-actions .mwl-weg-link .mzm-nav-ico,
.mwl-weg-link .mzm-nav-ico,
.mwl-weg-ziel .mzm-nav-ico,
.mwl-weg-ziel .mwl-panel-ikon {
    display: none !important;
}

/* --- 27 · v1.55.29: Brotkrumen nur im Liederbuch ausblenden -------
   «LERNINHALT 4, THEMA 15» ordnet ein, wo jemand in einem Lernpfad
   steckt. Im Liederbuch tragen diese Nummern aber keine Bedeutung —
   dort ist «Thema 15» kein Ordnungsmerkmal, sondern Zufall.

   Getroffen wird genau dieser Kurs über die Klasse, die LearnDash
   an den <body> schreibt: «learndash-cpt-sfwd-courses-1885-parent»
   (1885 = Liederbuch). Andere Kurse bleiben unberührt.

   Andere Kurs-ID: die 1885 ersetzen. Mehrere Kurse: Selektor
   kommagetrennt wiederholen. */
/* v1.55.34 zurueckgenommen: «.ld-breadcrumbs» ist die nuetzliche
   Spur («Liederbuch › 04 Spiritual, Jazz, Latin › 4.25»). Gestoert
   hat nur «.sfwd-course-position» — siehe Block 28. */

/* --- 28 · v1.55.30: Richtige Klasse für die Positionsangabe -------
   In 1.55.29 hatte ich «.ld-breadcrumbs» genommen — das ist die
   Klasse von LearnDash. «Lerninhalt 4, Thema 15» kommt aber vom
   BuddyBoss-Theme und heisst «.sfwd-course-position». */
body.learndash-cpt-sfwd-courses-1885-parent .sfwd-course-position {
    display: none !important;
}

/* --- 29 · v1.55.31: Blätterzeile nach rechts ----------------------
   Seit die Positionsangabe links weg ist, stehen «Zurück» und
   «Weiter» allein am linken Rand und wirken verloren. Rechts sind
   sie dort, wo im Meldo-Layout die Aktionen sitzen — und näher an
   der Leserichtung: erst der Inhalt, dann der Weg weiter.

   Über die ID, weil das Theme diesen Bereich ebenfalls so
   adressiert («#learndash-page-content .learndash_next_prev_link»). */
#learndash-page-content .learndash_next_prev_link,
.learndash_next_prev_link {
    justify-content: flex-end !important;
    gap: 6px !important;
}
#learndash-page-content .learndash_next_prev_link a.next-link {
    margin-left: 0 !important;
}

/* --- 30 · v1.55.32: Die Zeile selbst nach rechts schieben ---------
   In 1.55.31 habe ich «justify-content» IN der Blätterzeile gesetzt.
   Wirkungslos: Die Zeile steckt in «.sfwd-course-nav», das selbst
   Flex ist — als Flex-Kind schrumpft sie auf Inhaltsbreite, und
   «justify-content» verteilt dann nur innerhalb dieser schmalen
   Breite, statt sie zu verschieben.

   Verschoben wird ein Flex-Kind mit «margin-left: auto» — bzw. der
   Elternteil richtet seine Kinder rechts aus. Beides gesetzt, damit
   es auch greift, wenn die Zeile einmal ohne diesen Elternteil
   auftritt. */
#learndash-page-content .sfwd-course-nav,
.sfwd-course-nav {
    justify-content: flex-end !important;
}
#learndash-page-content .sfwd-course-nav .learndash_next_prev_link,
.sfwd-course-nav .learndash_next_prev_link,
#learndash-page-content .learndash_next_prev_link {
    margin-left: auto !important;
    justify-content: flex-end !important;
}

/* --- 31 · v1.55.33: Der richtige Behälter heisst «.bb-position» ---
   Aus «buddyboss-theme/learndash/ld30/topic.php» (Zeile 246 ff.):

       <div class="flex bb-position">
           <div class="sfwd-course-position">   ← «Lerninhalt 4, Thema 15»
           <div class="sfwd-course-nav">        ← Status + Blätterzeile

   Ich hatte in 1.55.31 und .32 an «.sfwd-course-nav» gedreht — das
   ist aber schon das rechte Kind. Verschoben werden muss es im
   Elternteil «.bb-position». Da die Positionsangabe im Liederbuch
   ausgeblendet ist, bleibt nur ein Kind übrig, und das steht links.  */
.bb-position {
    justify-content: flex-end !important;
}
.bb-position > .sfwd-course-nav {
    margin-left: auto !important;
}

/* --- 32 · v1.55.34: Titelkopf im Liederbuch -----------------------
   Vorher standen Blätterzeile, Titel und Reiter mit gleichem Abstand
   untereinander — kein Einstieg fürs Auge. Jetzt drei Ebenen:

     1  Spur und Werkzeuge (Brotkrumen links, Blättern rechts)
     2  Titelblock: Nummer als Plättchen, Werktitel, Wellenlinie
     3  die Reiter darunter

   Die Nummer trennt Ordnungszahl vom Werk — dieselbe Form wie die
   Level-Marken in der Kursleiste, damit die Oberfläche eine Sprache
   spricht. */
.lms-header-title h1 {
    display: flex !important;
    align-items: baseline !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-bottom: 6px !important;
}
.mwl-titel-nr {
    flex: 0 0 auto;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--m-teal-l, #EEF3F4);
    color: var(--m-teal, #3D7C85);
    font-family: 'Akko', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    align-self: center;
}
.mwl-titel-text { flex: 1 1 auto; min-width: 0; }

/* Die Welle schliesst den Kopfbereich ab — dieselbe wie im
   Dashboard-Titelkopf. */
#learndash-course-header .lms-header-title {
    position: relative !important;
    padding-bottom: 14px !important;
}
#learndash-course-header .lms-header-title::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: linear-gradient(90deg, #3D7C85 0%, #3D7C85 22%, #E8924F 45%,
                rgba(232,146,79,.25) 75%, rgba(232,146,79,0) 100%) !important;
}

/* Die Spur oben: ruhig, klein, nicht mit dem Titel konkurrierend. */
#learndash-course-header .ld-breadcrumbs-segments {
    font-family: 'Akko', sans-serif !important;
    font-size: .8rem !important;
}
#learndash-course-header .ld-breadcrumbs-segments a {
    color: var(--m-gedaempft, #4a5658) !important;
}
#learndash-course-header .ld-breadcrumbs-segments a:hover {
    color: var(--m-teal, #3D7C85) !important;
}

/* Der Kasten für die Lehrperson ist hier leer und hinterliess nur
   eine Lücke. */
#learndash-course-header .lms-header-instructor:has(h5:empty) {
    display: none !important;
}

/* --- 33 · v1.55.35: Status als Zeichen, nicht als Knopf -----------
   «In Bearbeitung» stand als gefüllter Farbblock da und las sich wie
   eine Schaltfläche. Status ist aber eine Feststellung, keine
   Handlung — er soll wahrnehmbar sein, ohne um Aufmerksamkeit zu
   bitten.

   Nicht rein als Symbol: für «abgeschlossen» gibt es ein gelerntes
   Zeichen (den Haken), für «in Bearbeitung» nicht — ein Teilkreis
   allein wird geraten. Darum Zeichen plus kurzes Wort, ohne Fläche.

   Der Status stand ausserdem zweimal auf der Seite: in der
   Brotkrumenzeile und in «.bb-ld-status». Einer genügt. */
#learndash-course-header .ld-breadcrumbs .ld-status {
    display: none !important;
}

#learndash-course-header .bb-ld-status .ld-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--m-gedaempft, #4a5658) !important;
    font-family: 'Akko', sans-serif !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#learndash-course-header .bb-ld-status .ld-status::before {
    content: '' !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
    border-radius: 50% !important;
}
/* In Bearbeitung: angefangener Ring — dieselbe Bildsprache wie die
   Fortschrittskreise in der Kursleiste. */
#learndash-course-header .bb-ld-status .ld-status-progress::before {
    background: conic-gradient(var(--m-lime, #E8924F) 0 35%,
                               rgba(26,52,56,.14) 35% 100%) !important;
    -webkit-mask: radial-gradient(circle, transparent 0 4.6px, #000 4.6px) !important;
    mask: radial-gradient(circle, transparent 0 4.6px, #000 4.6px) !important;
}
/* Abgeschlossen: der Haken aus der Kursleiste. */
#learndash-course-header .bb-ld-status .ld-status-complete::before,
#learndash-course-header .bb-ld-status .ld-status-completed::before {
    background: var(--m-lime, #E8924F) !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-shadow: inset 0 0 0 16px var(--m-lime, #E8924F) !important;
}
#learndash-course-header .bb-ld-status .ld-status-complete::after,
#learndash-course-header .bb-ld-status .ld-status-completed::after {
    content: '' !important;
    position: absolute !important;
    width: 9px !important;
    height: 9px !important;
    margin-left: -12.5px !important;
    background: #fff !important;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E") no-repeat center / contain !important;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
#learndash-course-header .bb-ld-status .ld-status { position: relative !important; }

/* --- 34 · v1.55.36: Eine Kopfzeile statt drei Angaben -------------
   Status, «Lerninhalt 5 von 18» und die Blätterlinks wandern in die
   Leiste «Dein Weg», wo schon Schritt und Fortschritt stehen. */
.mwl-kopf--zusammen {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
}
.mwl-kopf--zusammen .mwl-kopf-pos {
    margin-left: auto !important;
    font-family: 'Akko', sans-serif !important;
    font-size: .76rem !important;
    color: var(--m-schwach, #8a9391) !important;
    white-space: nowrap !important;
}
.mwl-kopf--zusammen .mwl-kopf-nav {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: 12px !important;
}
.mwl-kopf--zusammen .mwl-kopf-nav .learndash_next_prev_link {
    margin: 0 !important;
    padding: 0 !important;
    gap: 2px !important;
}
.mwl-kopf--zusammen .mwl-kopf-nav .prev-link,
.mwl-kopf--zusammen .mwl-kopf-nav .next-link {
    min-height: 34px !important;
    padding: 0 6px !important;
    font-size: .84rem !important;
}
/* Ohne Position (etwa wenn ausgeblendet) rückt die Navigation nach. */
.mwl-kopf--zusammen .mwl-kopf-nav:first-of-type { margin-left: auto !important; }
@media (max-width: 640px) {
    .mwl-kopf--zusammen .mwl-kopf-pos { display: none !important; }
    .mwl-kopf--zusammen .mwl-kopf-nav { margin-left: auto !important; }
}

/* --- 35 · v1.55.37: Navigation unter die Bahn, mobil an den Daumen -

   Schreibtisch: «Zurück» und «Weiter» stehen rechtsbündig UNTER der
   Bahn. Oben «wo bin ich», unten «wohin gehe ich». An den Enden der
   Bahn wären sie missverständlich — dort liest man Anfang und Ende.

   Handy: Die Leiste unter dem Inhalt klebt am unteren Rand. Oben ist
   der schlechteste Ort für etwas, das man häufig antippt; die Hand
   hält das Gerät unten. Chevrons aussen ohne Beschriftung — die
   Position sagt die Richtung —, die Hauptaktion in der Mitte. */
.mwl-weg .mwl-weg-nav {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 10px 14px 2px !important;
}
.mwl-weg .mwl-weg-nav .learndash_next_prev_link {
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
}
.mwl-weg .mwl-weg-nav .prev-link,
.mwl-weg .mwl-weg-nav .next-link {
    min-height: 38px !important;
    padding: 0 8px !important;
    font-size: .86rem !important;
}
/* Der Status ist ersatzlos weg — die Bahn zeigt ihn genauer. */
#learndash-course-header .bb-ld-status { display: none !important; }

@media (max-width: 640px) {
    /* Bahn kompakt, Navigation nach unten an den Daumen. */
    .mwl-weg .mwl-weg-nav { display: none !important; }

    html body .ld-content-actions.mwl-wegnav {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
        background: var(--m-weiss, #fff) !important;
        border-top: 1px solid var(--m-kartenlinie, #EDF2F2) !important;
        box-shadow: 0 -2px 14px rgba(26,52,56,.08) !important;
        margin: 24px -16px 0 !important;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        flex-wrap: nowrap !important;
        row-gap: 0 !important;
    }
    html body .ld-content-actions.mwl-wegnav > .ld-content-action:not(.mwl-weg-platz) {
        order: 2 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }
    html body .mwl-weg-platz--zurueck { order: 1 !important; flex: 0 0 auto !important; }
    html body .mwl-weg-platz--weiter  { order: 3 !important; flex: 0 0 auto !important; }
    /* Aussen nur die Richtung — die Position sagt, wohin. */
    html body .ld-content-actions.mwl-wegnav .mwl-weg-wort,
    html body .ld-content-actions.mwl-wegnav .mwl-weg-ziel {
        display: none !important;
    }
    html body .ld-content-actions.mwl-wegnav .mwl-weg-link {
        width: 44px !important;
        justify-content: center !important;
        padding: 0 !important;
    }
}

/* --- 36 · v1.55.38: Brotkrumen über dem Titel weg -----------------
   Die Spur wiederholt, was Kursleiste und «Dein Weg» bereits zeigen —
   Kurs, Lektion, aktuelle Station. Dreimal dieselbe Auskunft. */
#learndash-course-header .ld-breadcrumbs,
.ld-topic-status .ld-breadcrumbs {
    display: none !important;
}

/* --- 37 · v1.55.39: Mobile Leiste nur, wenn sie etwas trägt -------
   Auf Stationen ohne «Weiter» und ohne «Als vollständig markieren»
   blieb ein einzelner Pfeil mittig in einer klebenden Leiste stehen —
   viel Fläche für ein Zeichen. Eine Leiste mit einem einzigen Teil
   klebt nicht mehr, und der Pfeil rückt an seinen Rand.

   «:has» zählt die Teile: sind Zurück UND Weiter da, bleibt alles
   wie gebaut; sonst wird die Leiste eine gewöhnliche Zeile. */
@media (max-width: 640px) {
    html body .ld-content-actions.mwl-wegnav:not(:has(.mwl-weg-platz--zurueck):has(.mwl-weg-platz--weiter)) {
        position: static !important;
        box-shadow: none !important;
        border-top: none !important;
        margin: 18px 0 0 !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }
    html body .ld-content-actions.mwl-wegnav:not(:has(.mwl-weg-platz--zurueck):has(.mwl-weg-platz--weiter)) .mwl-weg-link {
        width: auto !important;
        padding: 0 8px !important;
    }
    /* Wo nur ein Pfeil bleibt, darf er seine Beschriftung behalten —
       ohne Gegenstück sagt die Position allein zu wenig. */
    html body .ld-content-actions.mwl-wegnav:not(:has(.mwl-weg-platz--zurueck):has(.mwl-weg-platz--weiter)) .mwl-weg-wort {
        display: inline !important;
    }
}

/* --- 38 · v1.55.40: Die Pfeile sitzen an der aktuellen Station ----
   Die Bahn IST die Navigation — jede Station ist ein Link. Die
   Pfeile stehen darum direkt links und rechts neben dem aktuellen
   Kreis und zeigen sichtbar auf den Nachbarn, zu dem sie führen.
   Die eigene Navigationszeile entfällt.

   Auf schmalen Geräten bleiben sie weg: dort blättert man unten am
   Daumen. */
.mwl-bahn .mwl-st-pfeil {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    background: none !important;
    border: none !important;
    border-radius: 50% !important;
    color: var(--m-schwach, #8a9391) !important;
    font-size: 0 !important;
    text-decoration: none !important;
}
.mwl-bahn .mwl-st-pfeil:hover { color: var(--m-teal, #3D7C85) !important; background: none !important; }
.mwl-bahn .mwl-st-pfeil .meta-nav { display: none !important; }
.mwl-bahn .mwl-st-pfeil::before,
.mwl-bahn .mwl-st-pfeil::after {
    content: '' !important;
    width: 7px !important;
    height: 7px !important;
    border: solid currentColor !important;
    border-width: 2px 2px 0 0 !important;
}
.mwl-bahn .mwl-st-pfeil--zurueck::after,
.mwl-bahn .mwl-st-pfeil--weiter::before { content: none !important; display: none !important; }
.mwl-bahn .mwl-st-pfeil--zurueck::before { transform: rotate(-135deg) !important; }
.mwl-bahn .mwl-st-pfeil--weiter::after   { transform: rotate(45deg) !important; }
/* Die Linie soll nicht durch die Pfeile laufen. */
.mwl-bahn .mwl-st-pfeil .mwl-linie { display: none !important; }

@media (max-width: 640px) {
    .mwl-bahn .mwl-st-pfeil { display: none !important; }
}

/* --- 39 · v1.55.41: Weiter und Zurück unter dem Pfad, im Meldostil -
   Die Pfeile an der Station waren zu leise — man fand sie nicht.
   Jetzt zwei richtige Schaltflächen unter der Bahn, in der Form der
   Nebenaktion aus dem Bedienmuster: weiss, feiner Rahmen, Akko,
   44 px hoch. «Zurück» links, «Weiter» rechts — die Richtung liegt
   auf derselben Achse wie der Pfad darüber. */
.mwl-bahn .mwl-st-pfeil { display: none !important; }

.mwl-weg .mwl-weg-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px 14px 4px !important;
}
.mwl-weg .mwl-pfad-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 0 1rem !important;
    background: var(--m-weiss, #fff) !important;
    border: 1.5px solid var(--m-linie, #e4e6e6) !important;
    border-radius: var(--m-radius, 10px) !important;
    color: var(--m-tinte, #111416) !important;
    font-family: 'Akko', sans-serif !important;
    font-weight: 700 !important;
    font-size: .9rem !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.mwl-weg .mwl-pfad-btn:hover {
    border-color: var(--m-teal, #3D7C85) !important;
    color: var(--m-teal, #3D7C85) !important;
    background: var(--m-weiss, #fff) !important;
}
.mwl-weg .mwl-pfad-weiter { margin-left: auto !important; flex-direction: row-reverse !important; }
.mwl-weg .mwl-pfad-btn::before,
.mwl-weg .mwl-pfad-btn::after {
    content: '' !important;
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 auto !important;
    border: solid currentColor !important;
    border-width: 2px 2px 0 0 !important;
}
.mwl-weg .mwl-pfad-zurueck::after,
.mwl-weg .mwl-pfad-weiter::before { content: none !important; display: none !important; }
.mwl-weg .mwl-pfad-zurueck::before { transform: rotate(-135deg) !important; }
.mwl-weg .mwl-pfad-weiter::after   { transform: rotate(45deg) !important; }

@media (max-width: 640px) {
    .mwl-weg .mwl-weg-nav { display: none !important; }
}

/* --- 40 · v1.55.42: Eine Stelle für die Navigation ----------------
   Unten standen «Zurück» und «Weiter» ein zweites Mal — einmal
   genügt, und der Pfad ist der richtige Ort. «wegnav.js» ist samt
   Einbindung entfernt; die untere Aktionszeile trägt wieder nur den
   Knopf, den LearnDash dort hinsetzt.

   Damit ist auch das Handy in Ordnung: Dort wurde die halbe Leiste
   gebaut (ein Pfeil, kein Knopf), weil das Skript nicht immer alles
   fand. Was nicht gebaut wird, kann auch nicht halb sein.

   Und die Knöpfe unter dem Pfad tragen keine weisse Fläche mehr —
   stille Aktion, wie im Bedienmuster (A3). */
.mwl-weg .mwl-pfad-btn {
    background: none !important;
    border: none !important;
    padding: 0 8px !important;
    color: var(--m-gedaempft, #4a5658) !important;
}
.mwl-weg .mwl-pfad-btn:hover {
    background: none !important;
    border: none !important;
    color: var(--m-teal, #3D7C85) !important;
}
/* Auf dem Handy ebenfalls sichtbar — sie sind jetzt die einzige
   Blättermöglichkeit. */
@media (max-width: 640px) {
    .mwl-weg .mwl-weg-nav { display: flex !important; padding: 10px 12px 2px !important; }
    .mwl-weg .mwl-pfad-btn { font-size: .86rem !important; }
}

/* --- 41 · v1.55.44: Alle Original-Blätterzeilen ausblenden --------
   LearnDash gibt «.learndash_next_prev_link» MEHRFACH aus — im Kopf
   und nach dem Inhalt. Mein Skript hat nur die erste gefunden und
   ausgeblendet, die zweite blieb stehen.

   Sobald die Kopie im Pfad existiert («.mwl-weg-nav»), sind alle
   Originale überflüssig. Die Kopien tragen eigene Klassen
   («.mwl-pfad-btn») und sind von dieser Regel nicht betroffen. */
body:has(.mwl-weg .mwl-weg-nav) .learndash_next_prev_link {
    display: none !important;
}

/* --- 42 · v1.55.45: Kompakter — weniger Höhe, weniger Abstand -----
   Die Leiste braucht drei Zeilen; jede Zeile zählt, besonders mobil,
   wo darunter nur noch ein Titel und der erste Inhalt ins Bild
   passen. Darum: Blätterzeile enger und kleiner, und der Abstand
   zwischen Leiste und Titel zurückgenommen. */
.mwl-weg .mwl-weg-nav {
    padding: 4px 12px 2px !important;
}
.mwl-weg .mwl-pfad-btn {
    min-height: 32px !important;
    padding: 0 4px !important;
    gap: 6px !important;
    font-size: .82rem !important;
}
.mwl-weg .mwl-pfad-btn::before,
.mwl-weg .mwl-pfad-btn::after {
    width: 6px !important;
    height: 6px !important;
    border-width: 1.8px 1.8px 0 0 !important;
}
.mwl-weg { margin-bottom: 14px !important; }
#learndash-course-header .lms-header-title { margin-top: 0 !important; }

@media (max-width: 640px) {
    .mwl-weg { margin-bottom: 8px !important; }
    .mwl-weg .mwl-weg-nav { padding: 2px 10px 0 !important; }
    .mwl-weg .mwl-pfad-btn { min-height: 30px !important; font-size: .8rem !important; }
    .mwl-weg .mwl-kopf { row-gap: 2px !important; }
    #learndash-course-header .lms-header-title {
        margin-top: 0 !important;
        padding-bottom: 10px !important;
    }
    #learndash-course-header .lms-header-title h1 {
        font-size: 1.5rem !important;
        margin-bottom: 2px !important;
    }
}

/* --- 43 · v1.55.46: Leere Hüllen einklappen ----------------------
   «display:none» am Inhalt entfernt den Inhalt, nicht seinen
   Behälter. Über dem Titel standen darum drei leere Kästen mit
   Polsterung: die Infoleiste (Brotkrumen + Status), die Positions-
   zeile und der Behälter der Blätterlinks — zusammen der Abstand,
   der nicht verschwinden wollte.

   «:has» klappt sie nur ein, wenn wirklich nichts Sichtbares mehr
   darin steht. Wo die Brotkrumen gebraucht werden, bleibt alles. */
#learndash-course-header .bb-ld-info-bar:has(.ld-breadcrumbs) {
    display: none !important;
}
/* v1.55.47 zurueckgenommen: Diese Regel hat «.bb-position» ueberall
   ausgeblendet, wo Positionszeile UND Blaetterlinks darin stehen —
   also auch im Liederbuch, wo es keine Bahn und damit keine Kopie
   gibt. Dort war die Navigation danach ganz weg. Es bleibt die
   Regel darunter: ausblenden nur, wenn die Kopie im Pfad existiert. */
body:has(.mwl-weg .mwl-weg-nav) #learndash-course-header .bb-position {
    display: none !important;
}
#learndash-course-header {
    padding-top: 0 !important;
}
#learndash-course-header .lms-header-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
@media (max-width: 640px) {
    .mwl-weg { margin-bottom: 6px !important; }
}

/* --- 44 · v1.55.47: Ohne Bahn bleibt die Zeile, aber aufgeräumt ---
   Im Liederbuch gibt es keine Bahn. Dort bleiben «Zurück» und
   «Weiter» an ihrem Platz — nur die leere Positionszeile daneben
   klappt ein, damit die Zeile nicht ins Leere greift. */
body:not(:has(.mwl-weg .mwl-weg-nav)) #learndash-course-header .bb-position {
    display: flex !important;
    justify-content: flex-end !important;
    margin-bottom: 8px !important;
}
body:not(:has(.mwl-weg .mwl-weg-nav)) #learndash-course-header .sfwd-course-position:empty,
body.learndash-cpt-sfwd-courses-1885-parent #learndash-course-header .sfwd-course-position {
    display: none !important;
}

/* ==========================================================
   v1.55.51 · Notizknopf rechts in der Titelzeile — nur das
   Zeichen, kein Rahmen.
   Siehe assets/notizknopf.js (dort steht auch, warum er
   bewusst KEINE Art aus dem Bedienmuster trägt).
   Vorgeschichte: 1.55.48 in «Dein Weg» (unauffindbar),
   1.55.49/.50 als gerahmter Knopf (zu schwer).
   ========================================================== */

/* Absolut statt im Fluss: «.lms-header-title» enthält je nach
   Ansicht Verschiedenes (Brotkrumen, Statusmarken). Ein
   «display:flex» am Behälter würde all das mit umbrechen. So
   ändert sich am Bestand nichts — das Zeichen legt sich nur
   darüber, und die Klasse dafür setzt das Skript selbst.
   Absolut an ALLEN Breiten: dadurch kostet es keine eigene
   Zeile, auch nicht auf dem Handy. */
body .mwl-titel-mit-notiz {
    position: relative !important;
    min-height: 44px !important;   /* sonst ragt das Polster
                                      unter einem einzeiligen Titel
                                      über die Wellenlinie hinaus */
}

body .mwl-titel-mit-notiz > .mwl-notizknopf {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

/* Kein Rahmen, keine Fläche, kein Schatten — das Zeichen steht
   für sich, wie der Stern daneben.

   Das Polster ist die Trefffläche: 22 px sichtbar, 44 px
   anfassbar. Es liegt links und oben/unten, nicht rechts —
   so bleibt die rechte Kante des Zeichens bündig mit dem
   Textblock, und die Fläche wächst dorthin, wo ohnehin nichts
   steht. */
body .mwl-notizknopf--nackt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 11px 0 11px 22px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--m-gedaempft, #5B6B69) !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: color .18s ease, transform .18s ease !important;
}
body .mwl-notizknopf--nackt svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    flex: 0 0 auto !important;
}
body .mwl-notizknopf--nackt:hover,
body .mwl-notizknopf--nackt:focus-visible {
    color: var(--m-teal, #3D7C85) !important;
    background: none !important;
}
/* Ohne Rahmen gibt es keine Fläche, die sich beim Drücken ändern
   könnte. Die Rückmeldung übernimmt darum die Grösse. */
body .mwl-notizknopf--nackt:active { transform: scale(.9) !important; }

/* Tastatur: ohne sichtbaren Rahmen wäre sonst nicht zu sehen,
   wo der Fokus steht. */
body .mwl-notizknopf--nackt:focus-visible {
    outline: 2px solid var(--m-teal, #3D7C85) !important;
    outline-offset: 2px !important;
    border-radius: 6px !important;
}

/* Platz freihalten, damit ein langer Titel nicht unter dem Zeichen
   durchläuft. Die Breite misst das Skript; der Rückfallwert greift,
   wenn das Messen scheitert. */
body .mwl-titel-mit-notiz h1 {
    padding-right: var(--mwl-notiz-breite, 60px) !important;
}

/* Es gibt schon eine Notiz: ein Punkt an der Ecke des Zeichens.
   Ohne Rahmen braucht er einen eigenen weissen Ring, sonst
   verschwimmt er mit den Strichen des Symbols. */
body .mwl-notizknopf--nackt.hat {
    color: var(--m-teal, #3D7C85) !important;
}
body .mwl-notizknopf--nackt.hat::after {
    content: "";
    position: absolute;
    top: 7px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--m-lime, #E8924F);
    box-shadow: 0 0 0 2px var(--m-weiss, #fff);
}

/* Der schwebende Kreis am rechten Bildrand — nur dort weg, wo das
   Zeichen wirklich sitzt. Die Klasse setzt notizknopf.js erst nach
   dem Einhängen. Das «!important» ist nötig, weil das fremde Skript
   beim Schliessen der Tafel «display:block» direkt ans Element
   schreibt (fadeIn). Ein Autorstil mit !important schlägt das. */
html.mwl-notiz-da .nt-note-tab {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════
   EINGEKLAPPTER PLAYER

   Ist der Videotext offen, weicht der Player diesem Streifen. Nicht um
   Platz zu sparen — um nicht zwei grosse Flaechen fuer zwei Dinge zu
   zeigen, von denen man gerade eines benutzt.

   Gestaltet als kleiner Bruder der Karte darunter: gleiche Form, gleiche
   zweizeilige Beschriftung, eine Nummer kleiner und in Ruhe gehalten.
   Sie stehen uebereinander und muessen als Paar lesbar sein.

   Durchgehend !important, wie bei der Karte: BuddyBoss setzt Knoepfen
   Hintergrund, Farbe, Breite und Grossbuchstaben. Ohne das faellt der
   Streifen auf das Theme zurueck — ein gruenes Quadrat mit riesigem
   Zeichen, genau wie beim ersten Anlauf.

   Der Streifen sitzt als Geschwister VOR dem Videoblock, der nur
   ausgeblendet wird. Umgehaengt wird der Player nie: Ein iframe, der im
   DOM den Platz wechselt, laedt neu — der Abspielstand waere weg.
   ════════════════════════════════════════════════════════════ */

.meldo-wb-videobar,
.meldo-wb-videobar:hover,
.meldo-wb-videobar:focus,
.meldo-wb-videobar:active{
    display:flex!important;
    align-items:center;
    gap:12px;
    width:100%!important;
    max-width:560px;
    text-align:left!important;
    background:#FEFEFE!important;
    border:1.5px solid #E1EBE9!important;
    border-radius:14px!important;
    padding:11px 16px!important;
    margin:0 0 16px!important;
    box-shadow:0 1px 2px rgba(34,49,47,.04)!important;
    text-transform:none!important;
    letter-spacing:normal!important;
    font-family:inherit!important;
    font-weight:400!important;
    color:#22312F!important;
    cursor:pointer;
    transition:border-color .16s, background .16s, transform .12s;
}
.meldo-wb-videobar:hover{
    background:#F9FAFA!important;
    border-color:#CBD6D7!important;
    transform:translateY(-1px);
}
.meldo-wb-videobar:focus-visible{outline:2px solid #E8924F;outline-offset:3px}

/* Rund und teal — das Zeichen fuer «abspielen». Die Karte darunter traegt
   dasselbe Quadrat in Buchform; zusammen lesen sie sich als Paar. */
.meldo-wb-videobar-icon{
    flex:0 0 34px!important;height:34px;border-radius:50%;
    background:#3D7C85;color:#fff;
    display:flex;align-items:center;justify-content:center;
}
.meldo-wb-videobar-icon svg{width:14px;height:14px;margin-left:2px}

.meldo-wb-videobar-text{flex:1;min-width:0;display:block}
.meldo-wb-videobar-title{
    display:block;
    font-family:"Akko","Akko",sans-serif;
    font-weight:700;font-size:14.5px;line-height:1.3;
    color:#22312F!important;
}
.meldo-wb-videobar-sub{
    display:block;margin-top:1px;
    font-size:12.5px;color:#5B6B69!important;line-height:1.4;
}
.meldo-wb-videobar-chev{
    flex:0 0 auto;color:#6B7B79;
    transform:rotate(180deg);   /* nach oben: der Player kommt zurueck */
}

@media(max-width:560px){
    .meldo-wb-videobar{gap:10px;padding:10px 13px!important}
    .meldo-wb-videobar-icon{flex:0 0 30px!important;height:30px}
    .meldo-wb-videobar-title{font-size:13.5px}
    .meldo-wb-videobar-sub{font-size:12px}
}

/* Im Druck hat weder Player noch Streifen etwas zu suchen. */
@media print{
    .meldo-wb-videobar{display:none!important}
}

/* ════════════════════════════════════════════════════════════
   PLATZ FÜR «ZURÜCK / WEITER»

   Die Zeile wird von der Leiste leer mitgebaut und erst danach von
   kopfzusammen.js gefuellt. Ohne Hoehe waere sie bis dahin flach, und
   das Fuellen schoebe alles darunter nach unten.

   Die Hoehe kommt von zwei leeren Knoepfen mit denselben Klassen wie
   die echten — nicht von einer ausgerechneten Zahl. Eine Zahl waere
   eine zweite Wahrheit neben Polstern und Knopfhoehen und schon bei
   zwei Pixel Abweichung wieder ein Sprung.

   «visibility: hidden» statt «display: none»: Das nimmt ihnen das
   Bild, nicht den Platz. Genau darum geht es hier.
   ════════════════════════════════════════════════════════════ */
.mwl-weg .mwl-weg-nav[data-mwl-leer] .mwl-pfad-btn {
    visibility: hidden !important;
}

/* ════════════════════════════════════════════════════════════
   v1.62.0 · «Dein Weg» im Ruhezustand: EINE Zeile

   Die Leiste steht über jeder Seite einer Lektion und stand dort in
   drei Zeilen — Kopf, Bahn, Blättern. Rund 200 Pixel, bevor der
   Inhalt anfing.

   Neu: Der Ruhezustand ist die Kopfzeile allein. «Zurück» und
   «Weiter» rahmen sie, die Bahn kommt auf Klick.

   Darum ist der Behälter der Blätterknöpfe «display: contents»: Er
   bleibt bestehen — kopfzusammen.js füllt ihn, und mehrere Regeln
   weiter oben prüfen mit «:has», ob es ihn gibt —, reicht seine
   beiden Knöpfe aber an die Kopfzeile durch. Erst dadurch lassen sie
   sich dort einzeln platzieren: einer ganz links, einer ganz rechts.

   Die Regeln 39, 40 und 42 machten aus ihm eine eigene Flex-Zeile
   unter der Bahn. Sie bleiben als Protokoll stehen; was hier steht,
   kommt später und gewinnt.
   ════════════════════════════════════════════════════════════ */
.mwl-weg .mwl-weg-nav {
    display: contents !important;
}
.mwl-weg .mwl-kopf {
    flex-wrap: nowrap !important;
}
/* Die Reihenfolge in der Zeile, unabhängig davon, wann die Knöpfe
   eintreffen: zurück ganz vorne, weiter ganz hinten. */
.mwl-weg .mwl-pfad-zurueck { order: -1 !important; }
.mwl-weg .mwl-pfad-weiter  { order: 9 !important; }
.mwl-weg .mwl-pfad-btn {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    max-width: 9em !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
/* «margin-left: auto» aus Regel 39 schob «Weiter» in der alten Zeile
   nach rechts. In der Kopfzeile macht das die Schrittangabe, die den
   Platz einnimmt — und die Angabe soll ihn behalten. */
.mwl-weg .mwl-pfad-weiter { margin-left: 0 !important; }
.mwl-weg .mwl-nun { flex: 1 1 auto !important; min-width: 0 !important; }

@media (max-width: 640px) {
    /* Auf dem Handy tragen die Knöpfe nur noch ihre Pfeile. Das Wort
       davor nähme ein Drittel der Zeile für eine Auskunft, die die
       Position schon gibt: links zurück, rechts weiter.

       «font-size: 0» blendet den Text aus, ohne ihn zu entfernen —
       Vorleser lesen ihn weiter. Die Pfeile sind in Pixeln bemessen
       und bleiben davon unberührt. */
    .mwl-weg .mwl-pfad-btn {
        font-size: 0 !important;
        padding: 0 9px !important;
        gap: 0 !important;
    }
    .mwl-weg .mwl-weg-nav { display: contents !important; }
}

/* ════════════════════════════════════════════════════════════
   v1.63.0 · Die Wegleiste im Titelbehälter

   Sie hängt jetzt in «.lms-header-title» — demselben Kasten wie der
   Titel — und übernimmt damit dessen Breite, die aus der LearnDash-
   Einstellung kommt. Keine zweite Zahl im Stylesheet.

   Die drei Regeln hier sind Versicherung, keine Gestaltung: Ist der
   Behälter ein Flex- oder Rasterkasten, stünde die Leiste sonst
   neben dem Titel statt darüber, oder sie schrumpfte auf ihren
   Inhalt. «order» hält sie oben, «width» auf voller Breite.
   ════════════════════════════════════════════════════════════ */
#learndash-course-header .lms-header-title > .mwl-weg {
    order: -1 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
    align-self: stretch !important;
}
/* Der Kasten trug oben kein Polster, weil dort bisher der Titel begann.
   Jetzt beginnt dort die Leiste — sie bringt ihren Abstand selbst mit. */
#learndash-course-header .lms-header-title > .mwl-weg {
    margin-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   v1.63.1 · Der Notizknopf hängt am Titel

   Er lag absolut an der oberen Kante von «.lms-header-title».
   Seit die Wegleiste als erstes in diesem Behälter steht, war das
   die Oberkante der LEISTE — der Knopf legte sich über «Weiter».

   Neu ist der Anker das <h1> selbst. Das ist nicht nur die
   Reparatur, sondern der richtige Bezug: «Titel links, Handlung
   rechts» meint die Titelzeile, nicht den Kasten drumherum. Der
   Stern der Lernpfade hängt bereits dort — beide teilen sich jetzt
   dieselbe Oberkante und dasselbe reservierte Polster.

   Die alte Regel bleibt als Rückfall stehen: Wo es kein <h1> gibt,
   landet der Knopf weiterhin am Behälter.
   ════════════════════════════════════════════════════════════ */
body .mwl-notiz-anker {
    position: relative !important;
}
/* «top: 0» wie bisher — nur bezogen auf den Titel statt auf den
   Behälter. Solange der Titel dessen erstes Kind war, war das
   dieselbe Linie; das Bild ändert sich also nicht, und der Stern
   daneben behält seine Oberkante. Keine neue Zahl, keine
   Mindesthöhe, die erst mit dem Knopf käme und die Seite verschöbe. */
body .mwl-titel-mit-notiz > .mwl-notiz-anker > .mwl-notizknopf {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
}
/* Die Mindesthöhe des Behälters stammt aus der Zeit, als er selbst die
   Titelzeile war. Heute steht die Wegleiste darin — er ist ohnehin
   höher. */
body .mwl-titel-mit-notiz:has(> .mwl-notiz-anker) {
    min-height: 0 !important;
}