/* ===================================================================
   ONLINE-SEMINAR — Oberflaeche (§66/§70/§73)

   AUFBAU (Karsten, 19.08.2026, mit Vorbild-Screenshot eines Dashboards):
   Die Seite ist in **Sektoren in Kaesten** geteilt, Videos stehen als
   **Bildkacheln**, nicht als Liste. Radius ueberall `var(--radius)` = 15 px,
   genau wie auf der Startseite.

   ⛔ FARBEN: nur die Standardpalette. Schwarzweiss, Bilder entsaettigt.
   Office Blue #507DBF ist die HANDLUNGSFARBE — hoechstens ein blauer Knopf
   je Bildschirm. Nie fuer Fortschritt, Zustaende oder Deko.
   ⛔ Zustaende nie allein ueber Farbe — immer auch ueber die Form.
   ⛔ NICHT aufblasen: kleine Schrift, schmale Kaesten. Der erste Entwurf war
   „viel zu gross, alles fette Bilder" (19.08.2026).
   =================================================================== */

:root {
  --sem-blau: #507DBF;
  --sem-schwarz: #333333;
  --sem-grau-dunkel: #6F6F6F;
  --sem-grau: #999999;
  --sem-linie: #d0d0d0;
  --sem-flaeche: #F5F5F5;
}

.lp-sem { width: auto; max-width: 1280px; margin: 0 auto; padding: 130px 20px 90px;
           box-sizing: border-box; }
/* ⛔ `width: auto` ist noetig: `.lp-inhalt` aus dem Fundament hat eine FESTE Breite
   von 1280 px. Ohne diese Zeile ragt die Seite auf dem Handy 900 px ueber den Rand
   hinaus (gemessen am 19.08.2026 bei 375 px Fensterbreite). */
@media (max-width: 720px) { .lp-sem { padding: 110px 16px 60px; } }

/* ---------- Sektor: der Kasten, aus dem alles besteht ---------- */

.lp-sem-kasten { border: 1px solid var(--sem-linie); border-radius: var(--radius);
                 background: #fff; padding: 24px 26px; margin: 0 0 20px; }
.lp-sem-kasten__kopf { display: flex; justify-content: space-between; align-items: baseline;
                       gap: 20px; margin: 0 0 16px; }
.lp-sem-kasten h2 { font-family: "Assistant", Arial, sans-serif; font-size: 18px;
                    font-weight: 600; margin: 0; }
.lp-sem-kasten__mehr { font-size: 13px; color: var(--sem-grau-dunkel); }
@media (max-width: 720px) { .lp-sem-kasten { padding: 18px 16px; } }
/* 🔴 DER KNOPF KLEBTE AN DER LETZTEN ZEILE (Karsten, 16.09.2026): „So viel Abstand, dass
   der auch gegenüber dem unteren Abstand zum Rand stimmt." Unter dem Knopf stehen der
   Absatzabstand (27px) und das Innenmass des Kastens (24px, am Handy 18px) — genau so
   viel steht jetzt auch darüber. */
.lp-sem-kasten .lp-sem-knopf-unten { margin-top: calc(27px + 24px); }
@media (max-width: 760px) { .lp-sem-kasten .lp-sem-knopf-unten { margin-top: calc(27px + 18px); } }

/* Zwei Sektoren nebeneinander: Einstiegstext | Einfuehrungsvideo */
.lp-sem-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .lp-sem-reihe { grid-template-columns: 1fr; } }

/* ---------- Einstieg ---------- */

.lp-sem-einstieg p { margin: 0 0 14px; }
.lp-sem-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 0; }
.lp-sem-zahl { background: var(--sem-flaeche); border-radius: var(--radius); padding: 14px 16px; }
.lp-sem-zahl b { display: block; font-family: "Assistant", Arial, sans-serif;
                 font-size: 20px; font-weight: 600; line-height: 1.2; }
.lp-sem-zahl span { font-size: 13px; color: var(--sem-grau-dunkel); }

.lp-sem-start { display: inline-flex; align-items: center; justify-content: center;
                height: 44px; padding: 0 26px; border-radius: 30px; background: var(--sem-blau);
                color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; }
.lp-sem-start:hover { color: #fff; }
.lp-sem-start small { font-weight: 400; opacity: .9; margin-left: 8px; font-size: 14px; }

/* ---------- Stand ---------- */

.lp-sem__stand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.lp-sem__prozent { font-family: "Assistant", Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1; }
.lp-sem__zeit { color: var(--sem-grau-dunkel); font-size: 14px; }
.lp-sem__balken { height: 6px; border-radius: 30px; background: var(--sem-flaeche);
                  border: 1px solid var(--sem-linie); overflow: hidden; }
.lp-sem__balken i { display: block; height: 100%; background: var(--sem-schwarz); }

/* ---------- Kapitel als Bildkacheln ---------- */

.lp-sem-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .lp-sem-raster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .lp-sem-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .lp-sem-raster { grid-template-columns: 1fr; } }

.lp-sem-kachel { display: block; text-decoration: none; color: var(--sem-schwarz);
                 border: 1px solid var(--sem-linie); border-radius: var(--radius); overflow: hidden;
                 background: #fff; }
/* ⚠ display:block ist Pflicht — die Kachel-Bausteine sind <span>, und bei einem
   Inline-Element wirkt `padding-top: 56.25%` nicht. Der Bildbereich fiel dadurch
   auf null zusammen: 12 Kacheln ohne Bild (gesehen am 19.08.2026). */
.lp-sem-kachel__bild { display: block; position: relative; padding-top: 56.25%;
                       background: var(--sem-flaeche); }
.lp-sem-kachel__text, .lp-sem-kachel__titel, .lp-sem-kachel__zeile { display: block; }
.lp-sem-kachel { text-align: left; padding: 0; font: inherit; cursor: pointer; width: 100%; }
.lp-sem-kachel__bild img { position: absolute; inset: 0; width: 100%; height: 100%;
                           object-fit: cover; filter: grayscale(1); display: block; }
.lp-sem-kachel__marke { position: absolute; left: 10px; top: 10px; background: rgba(255,255,255,.92);
                        border: 1px solid var(--sem-linie); border-radius: 30px;
                        padding: 2px 9px; font-size: 12px; }
.lp-sem-kachel__zeichen { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px;
                          background: rgba(255,255,255,.92); border-radius: 50%;
                          display: grid; place-items: center; }
.lp-sem-kachel__zeichen svg { width: 14px; height: 14px; }
.lp-sem-kachel__text { padding: 12px 14px 14px; }
.lp-sem-kachel__titel { font-size: 14px; line-height: 1.35; }
.lp-sem-kachel--jetzt .lp-sem-kachel__titel { font-weight: 600; }
.lp-sem-kachel__zeile { margin-top: 5px; font-size: 13px; color: var(--sem-grau); }
.lp-sem-kachel--zu .lp-sem-kachel__bild img { opacity: .45; }
.lp-sem-kachel--zu .lp-sem-kachel__titel { color: var(--sem-grau-dunkel); }

/* ---------- Ziel: Pruefung ---------- */

.lp-sem-ziel { display: flex; justify-content: space-between; align-items: center;
               gap: 20px; flex-wrap: wrap; }
.lp-sem-ziel__text { font-size: 14px; color: var(--sem-grau-dunkel); }

/* ---------- Kapitelseite: Buehne + Kacheln ---------- */

.lp-sem-buehne { max-width: 900px; }
.lp-sem-buehne__rahmen { position: relative; padding-top: 56.25%; overflow: hidden;
                         border-radius: var(--radius); background: var(--sem-flaeche);
                         border: 1px solid var(--sem-linie); }
.lp-sem-buehne__rahmen iframe, .lp-sem-buehne__bild { position: absolute; inset: 0;
                         width: 100%; height: 100%; border: 0; }
.lp-sem-buehne__bild { object-fit: cover; filter: grayscale(1); cursor: pointer; }
.lp-sem-buehne__knopf { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
                        width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.92);
                        border: 1px solid var(--sem-linie); display: grid; place-items: center; pointer-events: none; }
.lp-sem-buehne__knopf svg { width: 16px; height: 19px; fill: var(--sem-schwarz); margin-left: 3px; }
.lp-sem-buehne__titel { margin: 12px 0 0; font-size: 14px; display: flex;
                        justify-content: space-between; gap: 20px; }
.lp-sem-buehne__zeit { color: var(--sem-grau); font-size: 13px; white-space: nowrap; }

/* ---------- Fassungswahl ---------- */

.lp-sem-wahl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lp-sem-wahl__text { font-size: 13px; color: var(--sem-grau-dunkel); }
.lp-sem-wahl button { border: 1px solid var(--sem-grau); background: rgba(255,255,255,.4);
                      border-radius: 30px; height: 30px; padding: 0 14px; cursor: pointer;
                      font: inherit; font-size: 13px; color: var(--sem-schwarz); }
.lp-sem-wahl button[aria-pressed="true"] { background: var(--sem-schwarz); color: #fff; border-color: var(--sem-schwarz); }

/* ---------- Notiz, Fragen, Dateien ---------- */

.lp-sem-kasten textarea { width: 100%; min-height: 70px; border: 1px solid var(--sem-linie);
                          border-radius: var(--radius); background: transparent; font: inherit;
                          padding: 10px 12px; resize: vertical; }
.lp-sem-kasten textarea:focus { outline: none; border-color: var(--sem-schwarz); }
.lp-sem-hinweis { font-size: 13px; color: var(--sem-grau-dunkel); margin: 10px 0 0; }
.lp-sem-dateien { list-style: none; margin: 0; padding: 0; }
.lp-sem-dateien li { display: flex; justify-content: space-between; gap: 16px; font-size: 14px;
                     padding: 9px 0; border-top: 1px solid var(--sem-linie); }
.lp-sem-dateien li:first-child { border-top: 0; }
.lp-sem-dateien__art { color: var(--sem-grau); font-size: 13px; }


/* ===================================================================
   BAUM (§77) — rechts zwei Drittel, eigener Scrollbereich.
   Kapitel = Abschnitte mit abwechselndem Grund, Name oben rechts.
   ⛔ Farbe NUR an der Stelle, wo man gerade steht.
   =================================================================== */

.lp-sem-kopfzeile { margin: 0 0 22px; }
.lp-sem-kopfzeile h1 { margin: 0 0 6px; }
.lp-sem-kopfzeile p { margin: 0; color: var(--sem-grau-dunkel); }

.lp-sem-zwei { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .lp-sem-zwei { grid-template-columns: 1fr; } }

.lp-sem-links { display: grid; gap: 20px; }
.lp-sem-rechts { padding-bottom: 10px; }

/* Vorschaubild links — die Kachel der Startseite, unveraendert uebernommen */
.lp-sem-links .lp-video { border: 1px solid var(--sem-linie); border-radius: var(--radius); }
.lp-sem-jetzt { margin: 12px 0 14px; display: flex; flex-direction: column; gap: 2px; }
.lp-sem-jetzt__ort { font-size: 12px; color: var(--sem-grau); letter-spacing: .04em; }
.lp-sem-jetzt__titel { font-size: 14px; font-weight: 600; }
.lp-sem-jetzt__satz { font-size: 13px; color: var(--sem-grau-dunkel); line-height: 1.5; margin-top: 4px; }
.lp-sem-jetzt__methoden { font-size: 12px; color: var(--sem-grau); margin-top: 4px; }
.lp-sem-jetzt__zeit { font-size: 13px; color: var(--sem-grau); }

.lp-sem-fakten { margin: 16px 0 0; display: grid; gap: 8px; }
.lp-sem-fakten > div { display: flex; justify-content: space-between; gap: 14px;
                       border-top: 1px solid var(--sem-linie); padding-top: 8px; font-size: 13px; }
.lp-sem-fakten dt { color: var(--sem-grau-dunkel); margin: 0; }
.lp-sem-fakten dd { margin: 0; }

/* ---------- der Baum ---------- */

/* ⛔ Kein Rahmen, kein eigenes Scrollfenster: der Baum laeuft in voller Laenge
   mit der Seite. Links bleibt der Stand stehen (sticky). */
.lp-baum { border: 0; margin: 0 -8px; }
.lp-sem-rechts__titel { font-family: "Assistant", Arial, sans-serif; font-size: 18px;
                        font-weight: 600; margin: 0 0 14px; }
/* Kein sticky: Karsten am 19.08.2026 — links liess sich dadurch erst scrollen,
   wenn rechts durch war. Beide Spalten laufen jetzt normal mit der Seite. */

.lp-baum__kap { position: relative; padding: 16px 18px 18px 46px; background: #fff; }
/* ⛔ Der Browser schiebt die Bildlage beim Auf- und Zuklappen VON SICH AUS nach
   (Scroll-Anchoring). Zusammen mit der eigenen Fahrt in `seminar.js` zogen zwei
   Kraefte an derselben Stelle — Karsten am 19.09.2026: „das zuckelt alles
   irgendwie", und ein Kapitel liess sich danach erst nach etwas Scrollen wieder
   anklicken, weil Bild und Trefferflaeche auseinanderliefen. Hier bleibt die
   Bildlage allein Sache von `seminar.js`. */
.lp-baum { overflow-anchor: none; }
.lp-baum__kap--hell { background: var(--sem-flaeche); }
.lp-baum__marke { position: absolute; right: 16px; top: 14px; font-size: 12px;
                  letter-spacing: .04em; color: var(--sem-grau); }
.lp-baum__titel { margin: 0 0 12px; font-family: "Assistant", Arial, sans-serif;
                  font-size: 15px; font-weight: 600; }

/* Die Linie des Baumes laeuft links durch alle Abschnitte */
.lp-baum__kap::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0;
                        width: 1px; background: var(--sem-linie); }
/* Die Linie faengt dort an, wo sie ins erste Video geht, und hoert beim letzten auf
   (Karsten, 19.08.2026: „die Linie muss wirklich da aufhoeren, wo es in das Video
   hineingeht"). */
/* Die Linie beginnt gleich oben bei der Ueberschrift, nicht erst beim ersten
   Video (Karsten, 19.08.2026). Sie endet beim letzten Video. */
.lp-baum__kap:first-child::before { top: -14px; }
/* Die Baumlinie laeuft im letzten Kapitel bis zum Ende der grauen Box — offen wie
   zugeklappt (Karsten, 19.08.2026). */
.lp-baum__kap:last-child::before  { bottom: 0; }

.lp-baum__ast { position: relative; display: grid; grid-template-columns: 240px 1fr;
                gap: 18px; align-items: start; padding: 14px 0; text-decoration: none;
                color: var(--sem-schwarz); }
/* Der Anschluss trifft das Vorschaubild in der senkrechten MITTE (Karsten,
   19.08.2026). Am Bild gemessen: die Mitte liegt 91 px unter dem Astanfang —
   das Bild ist durch den Zuschnitt (114 %) 154 px hoch, nicht 135. */
.lp-baum__ast::before { content: ""; position: absolute; left: -20px; top: 91px;
                        width: 14px; height: 1px; background: var(--sem-linie); }
.lp-baum__ast img, .lp-baum__zweig img { width: 100%; aspect-ratio: 16/9; height: auto;
                        object-fit: cover; display: block; border-radius: 8px; filter: grayscale(1); }
.lp-baum__zweig { width: 300px; }
.lp-baum__text { display: flex; flex-direction: column; gap: 2px; }
.lp-baum__name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.lp-baum__satz { font-size: 13px; color: var(--sem-grau-dunkel); line-height: 1.5; margin-top: 4px; }
.lp-baum__methoden { font-size: 12px; color: var(--sem-grau); margin-top: 4px; }
.lp-baum__zeit { font-size: 12px; color: var(--sem-grau); }
.lp-baum__ast--fertig .lp-baum__name { color: var(--sem-grau-dunkel); }

/* die aktuelle Stelle — die EINZIGE Farbe im Bild */
.lp-baum__ast--jetzt img { filter: none; outline: 2px solid var(--sem-blau); outline-offset: 1px; }
.lp-baum__ast--jetzt .lp-baum__name { font-weight: 600; }
.lp-baum__ast--jetzt .lp-baum__zeit { color: var(--sem-blau); }

/* Gabel: die Fassungen nebeneinander */
.lp-baum__gabel { position: relative; display: block; margin: 2px 0; padding-left: 28px; }
/* Senkrechte gestrichelte Linie der zweiten Ebene — sie liegt RECHTS neben der
   durchgezogenen Baumlinie (die sitzt 20 px weiter links), sonst verschwindet sie
   dahinter. Gefunden am 19.08.2026: „jetzt sieht man die gestrichelte Linie nicht". */
.lp-baum__gabel::before { content: ""; position: absolute; left: 6px; top: 26px; bottom: 0;
                          border-left: 1px dashed var(--sem-grau); }
/* Der Abzweig: von der durchgezogenen Linie zur gestrichelten */
.lp-baum__gabel::after  { content: ""; position: absolute; left: -20px; top: 26px; width: 26px;
                          border-top: 1px dashed var(--sem-grau); }
.lp-baum__gabelkopf { display: block; font-size: 12px; color: var(--sem-grau-dunkel);
                      margin: 18px 0 8px; }
/* Anschluss vom gestrichelten Ast ans Vorschaubild */
.lp-baum__ast--zweig::before { border-top: 1px dashed var(--sem-grau); background: none;
                               height: 0; left: -22px; width: 22px; }

.lp-baum__weg { display: inline-block; font-size: 11px; color: var(--sem-grau-dunkel);
                border: 1px solid var(--sem-linie); border-radius: 30px; padding: 1px 9px;
                margin-bottom: 4px; }

/* Abstand zur Fusszeile — mindestens 300 px (Karstens Vorgabe fuer alle Seiten) */
.lp-sem { padding-bottom: 0; }        /* §584: der Abstand steht allein an der Fusszeile */

/* Stichpunkte im Pruefungskasten */
.lp-sem-liste { margin: 10px 0 14px; padding-left: 18px; font-size: 13px;
                color: var(--sem-grau-dunkel); line-height: 1.6; }
.lp-sem-liste li { margin: 0 0 4px; }

/* ---------- Kapitelkopf: Pfeil, Titel, Text, Marke ----------
   ⚠ Dieser Block wurde am 19.08.2026 versehentlich mitgeloescht, als die
   Gabel-Regeln ersetzt wurden. Folge: Titel, Beschreibung und Zahlen liefen in
   einer Zeile und „Kapitel N" wurde ueberschrieben. Nicht wieder anfassen, ohne
   den Bereich vorher genau abzugrenzen. */

.lp-baum__summe { list-style: none; cursor: pointer; display: grid;
                  grid-template-columns: 26px 1fr auto; gap: 0 14px; align-items: start;
                  padding: 2px 0 14px; }
.lp-baum__summe::-webkit-details-marker { display: none; }

/* Der Pfeil steht rechts neben der Linie und VOR dem Kapitelnamen. */
.lp-baum__pfeil { width: 22px; height: 22px; display: grid; place-items: center; }
.lp-baum__pfeil::before { content: ""; width: 9px; height: 9px; display: block;
                          border-right: 2px solid var(--sem-grau-dunkel);
                          border-bottom: 2px solid var(--sem-grau-dunkel);
                          transform: rotate(45deg) translate(-2px,-2px); }
details[open] > .lp-baum__summe .lp-baum__pfeil::before { transform: rotate(-135deg) translate(-3px,-3px); }

/* Der Pfeil dreht MIT der Klappbewegung, nicht davor (Karsten, 19.09.2026:
   „nicht so instant"). Dieselbe Dauer und Kurve wie die Hoehe in `seminar.js`.
   ⚠ `--klapptzu` setzt `seminar.js` beim Zuklappen SOFORT, obwohl `open` erst
   am Ende der Bewegung faellt — ohne diese Klasse bliebe der Pfeil bis zuletzt
   nach unten zeigen. Die Regel muss nach `details[open]` stehen und staerker
   sein, sonst gewinnt sie nicht. */
@media (prefers-reduced-motion: no-preference) {
  .lp-baum__pfeil::before { transition: transform 500ms cubic-bezier(.2, .8, .2, 1); }
}
details.lp-baum__kap--klapptzu > .lp-baum__summe .lp-baum__pfeil::before { transform: rotate(45deg) translate(-2px,-2px); }

.lp-baum__kapkopf { display: flex; flex-direction: column; gap: 5px; }
.lp-baum__kaptext { font-size: 13px; color: var(--sem-grau-dunkel); line-height: 1.5; max-width: 60ch; }
.lp-baum__kapzahl { font-size: 13px; color: var(--sem-grau); }
.lp-baum__summe .lp-baum__marke { position: static; grid-column: 3; justify-self: end; white-space: nowrap; }

/* Kapitel, in dem man steckt oder das fertig ist: die Kennzeichnung wird blau */
.lp-baum__kap--dran > .lp-baum__summe .lp-baum__marke,
.lp-baum__kap--dran > .lp-baum__summe .lp-baum__titel { color: var(--sem-blau); }


/* Zuschnitt zuverlaessig auf ALLE Baumbilder — auch auf die der Gabel. Vorher
   griff er dort nicht, dadurch waren die eingebrannten Zeitstempel (29:26, 51:17)
   wieder zu sehen (19.08.2026). */
.lp-baum__bildrahmen { display: block; overflow: hidden; border-radius: 8px;
                       aspect-ratio: 16/9; }
.lp-baum__bildrahmen img { width: 100%; height: 100%; aspect-ratio: auto;
                           object-fit: cover; object-position: top; display: block; }


/* Jedes Vorschaubild bekommt denselben grauen, abgerundeten Rahmen wie das
   grosse Video links (Karsten, 19.08.2026). Radius = var(--radius) der Startseite. */
.lp-baum__bildrahmen { border: 1px solid var(--sem-linie); border-radius: var(--radius); }
.lp-sem-kachel__bild { border: 1px solid var(--sem-linie); border-radius: var(--radius); }


/* Die gestrichelte Linie endet in der MITTE des letzten Vorschaubildes.
   ⚠ Ein fester `bottom`-Wert reicht nicht: die Zweige sind unterschiedlich hoch,
   je nachdem wie lang der Text ist — deshalb lief die Linie mal zu weit (gesehen
   am 19.08.2026). Stattdessen deckt der letzte Zweig den Rest von der Bildmitte
   an ab, in der Farbe des Kapitelabschnitts. */
.lp-baum__kap { --grund: #fff; }
.lp-baum__kap--hell { --grund: var(--sem-flaeche); }
.lp-baum__gabel .lp-baum__ast--zweig:last-of-type { position: relative; }
.lp-baum__gabel .lp-baum__ast--zweig:last-of-type::after {
  /* ⚠ Der Deckel muss GENAU auf der gestrichelten Linie sitzen. Gemessen am
     19.08.2026: Linie bei x=77, Deckel lag bei x=82 — 5 px daneben, deshalb wirkte
     er nicht und die Linie lief weiter. Zweig beginnt 28 px rechts der Gabel,
     Linie 6 px rechts der Gabel -> -22 px. */
  /* ⚠ Der Deckel beginnt 2 px UNTER der Bildmitte. Bei exakt 91 px lag er genau
     auf dem waagerechten Anschluss (der ::after liegt ueber dem ::before) und
     radierte die Ecke weg — die Linien trafen sich sichtbar nicht. */
  /* 🔴 20.08.2026: `bottom: -60px` ragte 42 px UNTER das Kapitel hinaus. Der
     Deckel ist weiss (Farbe des eigenen Kapitels) — im grauen Kapitel darunter
     lief er als weisser Strich mitten durch dessen Pfeil (Karsten: „das ist ein
     richtig schlechtes Design"). Der Deckel endet jetzt mit dem Zweig; die
     gestrichelte Gabellinie endet an derselben Stelle, es bleibt also nichts
     stehen. ⛔ NIE wieder negativ nach unten verlaengern. */
  content: ""; position: absolute; left: -22px; top: 91px; bottom: 0;
  width: 4px; background: var(--grund); z-index: 1;
}


/* Auch das grosse Vorschaubild links („Aktueller Stand") wird beschnitten — der
   Zeitstempel steckt dort genauso im Bild. Es ist eine `.lp-video`-Kachel mit
   Hintergrundbild, deshalb ueber background-size statt object-fit.
   ⚠ Diese Regel ging beim CSS-Umbau am 19.08.2026 schon einmal verloren. */
.lp-sem .lp-video { background-size: 100% 100%; background-position: top center;
                    border: 1px solid var(--sem-linie); border-radius: var(--radius); }


/* Die Anschlussstriche sollen den Bildrand BERUEHREN, nicht davor aufhoeren
   (Karsten, 19.08.2026). Abstand Linie -> Bild ist 20 px, also auch 20 px breit;
   bei der zweiten Ebene 22 px. */
.lp-baum__ast::before { width: 20px; }
.lp-baum__ast--zweig::before { left: -22px; width: 22px; }


/* Der graue Grund eines Kapitels beginnt ERST an der Baumlinie — er soll nicht
   darunter durchlaufen (Karsten, 19.08.2026). Umgesetzt als harte Kante im
   Verlauf, damit das Markup unveraendert bleibt. Die Linie sitzt bei 26 px. */
.lp-baum__kap--hell { background: linear-gradient(to right,
                        transparent 0 27px, var(--sem-flaeche) 27px); }


/* 🔴 20.08.2026: die 27 px liefen sichtbar INS Bild hinein. Karsten: „Die
   gestrichelten Linien laufen in das Bild, sie sollen aber nur den Rand
   beruehren — das gilt fuer alle Linien im Baum." Zurueck auf exakt den
   Abstand zwischen Linie und Bild: 22 px, kein Pixel mehr.
   ⛔ Nie wieder unter das Bild verlaengern, um das Strichmuster zu schoenen. */
.lp-baum__ast--zweig::before { left: -22px; width: 22px; }


/* Luft zwischen dem letzten Stichpunkt und der Trennlinie darunter
   (Karsten, 19.08.2026). */
.lp-sem-liste { margin-bottom: 26px; }


/* Der waagerechte Anschluss liegt UEBER der Abdeckung — sonst radiert sie die Ecke
   weg (bei gleicher Hoehe) oder es bleibt ein Ueberstand (wenn man sie tiefer
   setzt). Mit z-index deckt die Abdeckung exakt ab der Bildmitte, die Ecke bleibt. */
.lp-baum__ast--zweig::before { z-index: 2; }


/* Letztes Kapitel: zugeklappt laeuft die Linie bis zum Ende der Box, aufgeklappt
   endet sie in der Mitte des letzten Vorschaubildes (Karsten, 19.08.2026). */
.lp-baum__kap:last-child::before { bottom: 0; }


/* ZFU-Siegel im Pruefungskasten — mittig zwischen Satz und Stichpunkten. */
.lp-sem-siegel { margin: 18px 0; text-align: center; }
.lp-sem-siegel img { width: 80px; height: auto; display: inline-block; }


/* 20 px Luft zwischen dem letzten grauen Kapitelblock und dem unteren Rand des
   Kastens (Karsten, 19.08.2026). */
.lp-sem-rechts { padding-bottom: 20px; }


/* ===================================================================
   MOBIL UND MITTLERE BREITEN (§81)

   ⛔ Die Linienmechanik des Baumes haengt an einer festen Bildgroesse
   (240 x 154 px -> Mitte bei 91 px). Sobald das Bild mitwaechst oder schrumpft,
   stimmt die Geometrie nicht mehr. Deshalb gilt:
     · bis 1100 px: Bild kleiner, Werte neu gesetzt
     · unter 760 px: Bild ueber den Text gestapelt, waagerechte Anschluesse aus —
       eine schiefe Ecke ist schlimmer als keine.
   =================================================================== */

/* --- mittlere Breiten: schmaleres Bild, Linien nachgezogen --- */
@media (max-width: 1100px) {
  .lp-baum__ast { grid-template-columns: 180px 1fr; gap: 14px; }
  .lp-baum__zweig { width: 220px; }
  /* Bildmitte: 180 / 16 * 9 = 101 px hoch, mit Zuschnitt 115 -> 14 + 58 = 72 */
  .lp-baum__ast::before { top: 72px; }
  .lp-baum__gabel .lp-baum__ast--zweig:last-of-type::after { top: 72px; }
}

/* --- Handy und schmale Tablets --- */
@media (max-width: 760px) {
  .lp-sem { padding: 110px 16px 200px; }
  .lp-sem-zwei { gap: 16px; }
  .lp-sem-kasten { padding: 18px 16px; }

  /* Bild oben, Text darunter — beides volle Breite */
  .lp-baum__ast { grid-template-columns: 1fr; gap: 10px; padding: 12px 0; }
  .lp-baum__zweig { width: 100%; }
  .lp-baum__bildrahmen { width: 100%; }

  /* ⛔ Waagerechte Anschluesse aus: ohne feste Bildhoehe treffen sie nichts. */
  .lp-baum__ast::before,
  .lp-baum__gabel::after,
  .lp-baum__ast--zweig::before { display: none; }
  .lp-baum__gabel .lp-baum__ast--zweig:last-of-type::after { display: none; }
  .lp-baum__gabel::before { bottom: 0; }

  /* Baumlinie dichter an den Rand, Inhalt rueckt nach */
  .lp-baum__kap { padding: 14px 12px 16px 26px; }
  .lp-baum__kap::before { left: 10px; }
  .lp-baum__kap--hell { background: linear-gradient(to right,
                          transparent 0 11px, var(--sem-flaeche) 11px); }
  .lp-baum__gabel { padding-left: 14px; margin-left: 0; }
  .lp-baum__gabel::before { left: 0; }

  /* Kapitelkopf: Marke unter den Titel statt daneben */
  .lp-baum__summe { grid-template-columns: 22px 1fr; gap: 0 10px; }
  .lp-baum__summe .lp-baum__marke { grid-column: 2; justify-self: start;
                                    order: 3; margin-top: 4px; }
  .lp-baum__kaptext { max-width: none; }

  /* Statistik: Bezeichnung und Wert untereinander, sonst wird es gequetscht */
  .lp-sem-fakten > div { flex-direction: column; gap: 2px; }

  .lp-sem-siegel img { width: 64px; }
}

/* --- sehr schmal --- */
@media (max-width: 380px) {
  .lp-sem { padding: 100px 12px 160px; }
  .lp-sem__prozent { font-size: 18px; }
}


/* ---------- Farbregel, vollstaendig (Karsten, 19.08.2026) ----------
   · Kapitel komplett fertig  -> Kapitelname und Marke blau
   · Kapitel, in dem man steht -> ebenso
   · Video fertig oder gerade dran -> Vorschaubild farbig, Titel und Minuten blau
   Alles Uebrige bleibt schwarzweiss. */

.lp-baum__kap--fertig > .lp-baum__summe .lp-baum__marke,
.lp-baum__kap--fertig > .lp-baum__summe .lp-baum__titel { color: var(--sem-blau); }

.lp-baum__ast--jetzt .lp-baum__name,
.lp-baum__ast--fertig .lp-baum__name { color: var(--sem-blau); font-weight: 600; }
.lp-baum__ast--jetzt .lp-baum__zeit,
.lp-baum__ast--fertig .lp-baum__zeit { color: var(--sem-blau); }
.lp-baum__ast--jetzt img,
.lp-baum__ast--fertig img { filter: none; }


/* „Was du bisher kennst" — Unterueberschrift plus Stichpunkte als Marken
   (Karsten, 19.08.2026). Ersetzt die frueheren Fliesstext-Punkte. */
.lp-sem-gelernt { margin: 26px 0 0; border-top: 1px solid var(--sem-linie); padding-top: 18px; }
.lp-sem-gelernt__kopf { font-family: "Assistant", Arial, sans-serif; font-size: 14px;
                        font-weight: 600; margin: 0 0 10px; }
/* ⛔ Keine Bubbles (Karsten, 19.08.2026) — schlichter Text mit Punkt-Trennern. */
.lp-sem-gelernt__liste { margin: 0; font-size: 13px; line-height: 1.7;
                         color: var(--sem-grau-dunkel); }




/* ⛔ KEIN Schloss-Zeichen am gesperrten Knopf (Karsten, 19.08.2026). Er sieht aus
   wie jeder andere Knopf, nur blass und ohne Pfeil — die Beschriftung sagt alles. */


/* Lesbarkeit: die vielen kleinen Texte standen in #999999 (Kontrast 2,85 : 1,
   unter der Norm). Auf #6F6F6F gehoben — 4,7 : 1, optisch kaum ein Unterschied
   (19.08.2026). Reines Grau bleibt nur fuer Randangaben auf Flaechen. */
.lp-baum__zeit, .lp-baum__methoden, .lp-baum__kapzahl, .lp-baum__marke,
.lp-sem-jetzt__zeit, .lp-sem-jetzt__methoden, .lp-sem-dateien__art,
.lp-sem-kasten__mehr { color: var(--sem-grau-dunkel); }


/* ---------- Suche im Seminar (§83) ---------- */

.lp-sem-kopfzeile { display: flex; justify-content: space-between; align-items: center;
                    gap: 20px; flex-wrap: wrap; }
.lp-sem-suche { position: relative; flex: 0 0 320px; max-width: 100%; }
.lp-sem-suche input { width: 100%; height: 35px; padding: 0 16px;
                      border: 1px solid var(--sem-grau); border-radius: 30px;
                      background: rgba(255,255,255,.4); font: inherit; font-size: 13px;
                      color: var(--sem-schwarz); }
/* ⛔ Der Rand bleibt beim Tippen unveraendert (Karsten, 19.08.2026) — nur der
   Grund wird weiss, damit man sieht, dass das Feld aktiv ist. */
.lp-sem-suche input:focus { outline: none; background: #fff; }
.lp-sem-suche__ergebnis { position: absolute; left: 0; right: 0; top: 42px; z-index: 20;
                          background: #fff; border: 1px solid var(--sem-linie);
                          border-radius: var(--radius); padding: 8px;
                          box-shadow: 0 8px 24px rgba(0,0,0,.08); max-height: 60vh; overflow-y: auto; }
.lp-sem-suche__ergebnis a { display: block; padding: 9px 10px; border-radius: 8px;
                            text-decoration: none; color: var(--sem-schwarz); font-size: 13px; }
.lp-sem-suche__ergebnis a:hover { background: var(--sem-flaeche); }
.lp-sem-suche__ort { display: block; font-size: 12px; color: var(--sem-grau-dunkel); margin-top: 2px; }
.lp-sem-suche__leer { padding: 10px; font-size: 13px; color: var(--sem-grau-dunkel); }
.lp-sem-suche__fuss { padding: 8px 10px 4px; font-size: 12px; color: var(--sem-grau-dunkel);
                      border-top: 1px solid var(--sem-linie); margin-top: 6px; }
@media (max-width: 760px) { .lp-sem-suche { flex: 1 1 100%; } }


/* Vorschaubild im „Aktuellen Stand" — nur ein Link, kein Player.
   Play-Knopf in Grau wie auf der Startseite (#999, 92 % deckend). */
/* ⚠ `aspect-ratio` ist Pflicht: ohne definierte Hoehe des Rahmens bewirkt
   `height: 114%` am Bild NICHTS — dann bleibt der eingebrannte Zeitstempel stehen
   (19.08.2026 genau daran gescheitert). */
.lp-sem-vorschau { position: relative; display: block; overflow: hidden;
                   aspect-ratio: 16/9;
                   border: 1px solid var(--sem-linie); border-radius: var(--radius); }
.lp-sem-vorschau img { width: 100%; height: 100%; object-fit: cover; object-position: top;
                       display: block; filter: grayscale(1); }
.lp-sem-vorschau__knopf { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
                          width: 64px; height: 64px; border-radius: 50%;
                          background: rgba(153,153,153,.92); display: grid; place-items: center; }
.lp-sem-vorschau__knopf svg { width: 18px; height: 21px; fill: #fff; margin-left: 3px; }


/* Auszug im Suchvorschlag — bewusst kurz gehalten. */
.lp-sem-suche__ergebnis a b { display: block; }
.lp-sem-suche__auszug { display: block; font-size: 12px; color: var(--sem-grau-dunkel);
                        line-height: 1.5; margin-top: 3px; }

/* Eigene Ergebnisseite (Enter im Suchfeld) */
.lp-sem-treffer { display: grid; gap: 14px; }
.lp-sem-treffer__zeile { display: grid; grid-template-columns: 240px 1fr; gap: 18px;
                         align-items: start; padding: 14px 0;
                         border-bottom: 1px solid var(--sem-linie);
                         text-decoration: none; color: var(--sem-schwarz); }
.lp-sem-treffer__zeile b { font-size: 14px; }
@media (max-width: 760px) { .lp-sem-treffer__zeile { grid-template-columns: 1fr; } }


/* Seitencheck 20.08.2026: die Kapitelmarke stand noch auf #999 (2,85 : 1).
   Auf #6F6F6F gehoben — 5,02 : 1, optisch praktisch derselbe Grauton. */
.lp-baum__marke { color: var(--sem-grau-dunkel); }


/* ---------- Handy: zwei Nachbesserungen (Karsten, 20.08.2026) ---------- */

/* 1. iPhone zoomt beim Tippen in ein Feld, dessen Schrift kleiner als 16 px ist.
      Deshalb hier genau 16 px — die einzige saubere Loesung. `user-scalable=no`
      waere die Alternative und ist keine: dann kann niemand mehr zoomen. */
@media (max-width: 760px) {
  .lp-sem-suche input { font-size: 16px; }
}

/* 2. Nach einer Suche stehen die Ergebnisse auf dem Handy GANZ OBEN, direkt unter
      dem Suchfeld — nicht unter Stand, Zusammenfassung und Zertifikat.
      Auf dem Desktop bleibt die Anordnung unveraendert. */
@media (max-width: 980px) {
  .lp-sem-zwei--suche .lp-sem-rechts { order: -1; }
  .lp-sem-zwei--suche .lp-sem-links  { order: 1; }
}


/* ---------- „Registrierung nötig" / „Zugang nötig" (20.08.2026) ----------
   Gelb ist Office Yellow #f2d680 aus der Standardpalette. Schrift darauf in #333
   (8,85 : 1) — weiss waere auf diesem Gelb unlesbar (1,43 : 1). */
.lp-baum__kopfrechts { grid-column: 3; justify-self: end; display: flex;
                       align-items: center; gap: 10px; white-space: nowrap; }
/* ⚠ Das Aussehen der Marke steht seit 25.08.2026 im FUNDAMENT — sie wird auch
   im Downloadbereich gebraucht (§163). Hier bleiben nur die Lagen, die es nur
   im Seminar gibt. ⛔ Nicht wieder hierher zurueckholen. */
@media (max-width: 760px) {
  .lp-baum__kopfrechts { grid-column: 2; justify-self: start; order: 3;
                         margin-top: 4px; flex-wrap: wrap; }
}




/* Marke im Suchtreffer: RECHTS NEBEN der Ueberschrift, 10 px Abstand
   (Karsten, 20.08.2026: „sollte 10 Pixel nach rechts rutschen … jetzt rutscht
   es nach unten, genau so wollte ich es nicht haben"). */
/* ⚠ Erst stand sie eine Zeile tiefer (display:block) — falsch. Sie gehoert in
   dieselbe Zeile wie der Titel und darf nur umbrechen, wenn der Platz fehlt.
   Damit sie dann nicht klebt, hat die Titelzeile eine feste Zeilenhoehe von
   30 px: die 21 px hohe Marke sitzt mittig, also oben wie unten gleich viel Luft.
   Gilt fuer beide Ansichten — Vorschau im Suchfeld UND Ergebnisseite. */
.lp-sem-treffer__zeile b, .lp-sem-suche__ergebnis a b { display: inline; line-height: 1.5; }
.lp-sem-suche__ergebnis .lp-baum__sperre,
.lp-sem-treffer__zeile .lp-baum__sperre { display: inline-block; width: auto;
                                          margin: 6px 0 6px 10px; vertical-align: middle; }
.lp-baum__sperre + .lp-sem-suche__ort { margin-top: 0; }


/* ⛔ ÜBERHOLT (§93, Abend des 20.08.2026): Es gibt kein Abspielfenster mehr —
   der Player sitzt fest in der linken Spalte. Die Regeln stehen nur noch hier,
   falls das Markup irgendwo wieder auftaucht; benutzt werden sie nicht.
   ---------- Abspielfenster auf der Kapitelseite (§85, 20.08.2026) ----------
   Es geht nur auf, wenn das Video schon begonnen wurde oder der Weg ueber
   „Hier fortsetzen“ / „Online-Seminar starten“ / das Vorschaubild fuehrte.
   ⛔ Kein Autoplay — gestartet wird von Hand. */
.lp-sem-pop[hidden] { display: none; }
.lp-sem-pop { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px; }
.lp-sem-pop__grund { position: absolute; inset: 0; background: rgba(51,51,51,.72); }
.lp-sem-pop__kasten { position: relative; width: min(1000px, 100%); background: #fff;
                      border-radius: var(--radius); padding: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.lp-sem-pop__kopf { display: flex; align-items: center; justify-content: space-between;
                    gap: 14px; margin: 0 0 10px; font-size: 14px; color: var(--sem-schwarz); }
.lp-sem-pop__zu { flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--sem-linie);
                  background: #fff; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.lp-sem-pop__zu svg { width: 13px; height: 13px; stroke: var(--sem-schwarz); stroke-width: 2; }
.lp-sem-pop__zu:hover { background: var(--sem-flaeche); }
.lp-sem-pop__rahmen { position: relative; padding-top: 56.25%; overflow: hidden;
                      border-radius: var(--radius); background: #000; }
.lp-sem-pop__rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.lp-sem-pop-offen { overflow: hidden; }
@media (max-width: 760px) { .lp-sem-pop { padding: 12px; } .lp-sem-pop__kasten { padding: 10px; } }


/* ==========================================================================
   KAPITELSEITE — 50/50 (§88, Karsten 20.08.2026)
   links das Video und darunter der Baum dieses Kapitels,
   rechts Notiz / Fragen / Unterlagen, ganz unten ueber die Breite die Meinung.
   ========================================================================== */
/* Der Knopf sitzt oben wie unten gleich weit weg: 22 px zur Kopfzeile
   (deren `margin-bottom`) und 22 px zum Kapiteltitel (Karsten, 20.08.2026:
   „der muss genauso von der Vertikalen sein wie vom Button nach oben"). */
.lp-sem-kap__zurueck { margin: 0 0 22px; }
.lp-sem-kap__titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
                     margin: 0 0 20px; }
.lp-sem-kap__titel h2 { margin: 0; font-size: 24px; }
.lp-sem-kap__zahl { font-size: 13px; color: var(--sem-grau); }

/* Links zwei Drittel, rechts ein Drittel (Karsten, 20.08.2026 — die erste
   Fassung war 50/50 und liess dem Video zu wenig Platz). */
.lp-sem-kap__raster { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
.lp-sem-kap__links, .lp-sem-kap__rechts { display: grid; gap: 20px; align-content: start; }
.lp-sem-kap__meinung { margin-top: 20px; }

/* Der Baum im Kapitel: gleiche Linienfuehrung, aber ohne Klapp-Kopf — hier ist
   ja nur ein Kapitel zu sehen. Deshalb oben buendig statt eingerueckt. */
.lp-baum--kap { margin: 0 -6px; }
/* ⛔ KEIN `background: transparent` — sonst frisst es den grauen Grund der
   geraden Kapitel. Karsten, 20.08.2026: „auch in der Farbe, wie dieses Kapitel
   ist, grau oder weiss, je nachdem welches Kapitel." */
/* 🔴 20.08.2026: hier stand `padding-left: 40px`. Die senkrechte Linie sitzt aber
   fest bei 26 px und die waagerechten Anschluesse beginnen 20 px links vom Ast —
   bei 40 px Einzug fingen sie also 6 px LINKS der Linie an und kreuzten sie
   (Karsten: „der Baum hat sowohl am Anfang als auch an den Seiten gekreuzt").
   ⛔ Der Einzug MUSS 46 px sein, genau wie in der Uebersicht. */
.lp-baum--kap .lp-baum__kap { padding: 10px 6px 6px 46px; }

/* Der waagerechte Anschluss trifft die MITTE des Vorschaubildes. Feste 91 px
   gelten nur, solange das Bild 240 px breit ist — in der schmalen Kapitelspalte
   ist es kleiner, dadurch sass der Strich 10 px zu tief. seminar.js misst die
   Bildmitte und setzt sie hier ein. */
.lp-baum--kap .lp-baum__ast::before { top: var(--anschluss, 91px); }
/* Derselbe Messwert fuer den Deckel, der die gestrichelte Gabellinie ab der
   Bildmitte abdeckt. Mit den festen 91 px begann er zu tief, dadurch lief die
   gestrichelte Linie unten aus der Verzweigung heraus (Karsten, 20.08.2026).
   +2 px, damit die Ecke des waagerechten Anschlusses stehen bleibt. */
.lp-baum--kap .lp-baum__gabel .lp-baum__ast--zweig:last-of-type::after {
  top: calc(var(--anschluss, 91px) + 2px);
}
.lp-baum--kap .lp-baum__kap::before { top: 10px; }

/* Auf dem Handy und dem Tablet steht alles untereinander — in DIESER Reihenfolge
   (Karsten, 20.08.2026): Video · Notizen · Baum · Elemente · Meinung.
   ⚠ Mit `display: contents` werden die Kinder der beiden Spalten selbst zu
   Rasterfeldern; erst dadurch laesst sich die Reihenfolge ueber `order` mischen.
   Ohne den Trick kaeme erst die ganze linke, dann die ganze rechte Spalte —
   also Baum vor Notiz, und das ist falsch. */
@media (max-width: 980px) {
  .lp-sem-kap__raster { grid-template-columns: 1fr; }
  .lp-sem-kap__links, .lp-sem-kap__rechts { display: contents; }
  .lp-sem-kap__video    { order: 1; }
  .lp-sem-notiz         { order: 2; }
  .lp-sem-kap__baum     { order: 3; }
  .lp-sem-kap__elemente { order: 4; }
  .lp-sem-kap__raster > * { margin-bottom: 20px; }
}
@media (max-width: 760px) {
  .lp-sem-kap__titel h2 { font-size: 20px; }
}


/* ---------- 20.08.2026: Vorschaubilder GANZ zeigen, mit Zeitstempel ----------
   ⚠ KEHRTWENDE gegenueber dem 19.08.2026. Damals wurde jedes Vorschaubild oben
   beschnitten (`height: 114%`), damit der eingebrannte Zeitstempel verschwindet.
   Karsten am 20.08.2026: „Lass mal die Vorschaubilder nicht abgeschnitten,
   sondern zeig sie so wie sie sind. Mit dem Zeitstempel, der da drin ist."
   Gilt ueberall: Baum, „Aktueller Stand", Suche, Buehne der Kapitelseite.
   ⛔ Nicht wieder auf 114 % zurueckdrehen, ohne dass Karsten es sagt. */
.lp-baum__bildrahmen img,
.lp-sem-vorschau img,
.lp-sem-buehne__bild { height: 100%; object-fit: cover; object-position: center; }
.lp-sem .lp-video { background-size: cover; background-position: center; }


/* ---------- Kapitelseite, zweite Runde (20.08.2026) ---------- */

/* Das Notizfeld ist dreimal so hoch — es soll zum Schreiben einladen, nicht zum
   Stichwort (Karsten: „der muss viel groesser sein … dreimal so gross"). */
.lp-sem-kap__rechts textarea { min-height: 210px; resize: vertical; }

/* Fuer die Umsetzung wichtige Elemente: Name und darunter ein Satz, wofuer es gut
   ist. ⛔ KEIN Formatkuerzel wie „PDF" — es werden nicht nur Dateien sein. */
/* ⛔ Zwischen zwei Elementen jeweils 10 px mehr Luft ueber und unter der
   Trennlinie (Karsten, 20.08.2026): 26 px statt 16 px. */
.lp-sem-elemente { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }

/* Das Vorschaubild ist HOCHKANT und reicht genau bis zum Ende der Ort-Zeile —
   deshalb spannt es die ersten drei Zeilen des Rasters. Die Spalte ist breiter
   als das Bild, damit es mittig zwischen Kastenrand und Text steht. */
/* ⚠ Spaltenabstand 0: nur so steht das Bild wirklich mittig zwischen Kastenrand
   und Text — ein `gap` wuerde rechts immer mehr Luft lassen als links. */
/* Das Vorschaubild nimmt hoechstens ein VIERTEL der Breite ein und steht links
   (Karsten, 20.08.2026: „nimmt viel zu viel Platz ein … sollte nur ein Viertel
   der Flaeche einnehmen"). Dadurch bekommt der Text mehr Platz und der
   Herunterladen-Knopf rutscht weiter nach links. */
.lp-sem-elemente li { display: grid; grid-template-columns: minmax(0, 25%) 1fr;
                      grid-template-rows: auto auto auto auto; gap: 3px 14px;
                      padding-bottom: 26px; align-items: start;
                      border-bottom: 1px solid var(--sem-linie); }
.lp-sem-elemente li:last-child { border-bottom: 0; padding-bottom: 0; }
/* ⚠ +6 px: der Textblock rechts beginnt 6 px hinter der Spaltenkante, deshalb
   wirkte das Bild sonst leicht nach links versetzt (gemessen 30 / 36). */
/* ⛔ Kartenformat ist 3:4 (Karsten, 23.08.2026): 78 × 104 statt 78 × 105 —
   damit Kapitelseite und Downloadseite dasselbe Format haben und sich jede
   Groesse glatt hochrechnen laesst (180×240, 240×320). */
/* ⛔ Alle Vorschaubilder GLEICH gross (Karsten, 20.08.2026: „die Groesse … sollte
   einheitlich sein, alle gleich gross"). Mit `stretch` richtete sich die Hoehe
   nach der Textlaenge — laengere Titel ergaben hoehere Bilder. Jetzt feste Hoehe. */
.lp-sem-elemente__bild { grid-column: 1; grid-row: 1 / 4; justify-self: start;
                         align-self: start; width: 100%; max-width: 78px; height: 104px;
                         border-radius: 8px; border: 1px solid var(--sem-linie);
                         background: var(--sem-flaeche); overflow: hidden; }
/* Mit echter Vorschau: weisser Innenrand wie auf der Downloadseite, dort 15 px
   bei 300 px Kartenbreite — hier bei 78 px also 4 px (24.08.2026, §161). */
.lp-sem-elemente__bild--bild { background: #fff; padding: 4px; }
.lp-sem-elemente__bild img { display: block; width: 100%; height: 100%;
                             object-fit: cover; object-position: top; }
.lp-sem-elemente__name { grid-column: 2; grid-row: 1; }
.lp-sem-elemente__satz { grid-column: 2; grid-row: 2; }
.lp-sem-elemente__ort  { grid-column: 2; grid-row: 3; font-size: 12px; color: var(--sem-grau); }
.lp-sem-elemente__fuss { grid-column: 2; grid-row: 4; margin-top: 12px; }
.lp-sem-elemente__fuss .lp-baum__sperre { display: inline-block; }
.lp-sem-elemente li:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-sem-elemente__name { font-size: 14px; font-weight: 600; }
.lp-sem-elemente__satz { font-size: 13px; color: var(--sem-grau-dunkel); line-height: 1.5; }

/* Die Fassungswahl steht jetzt ohne Erklaersatz da — dann darf sie auch nicht
   mehr wie ein Satz mit Knoepfen aussehen. */
.lp-sem-kap__links .lp-sem-wahl { justify-content: flex-start; }


/* ---------- Kapitelseite, dritte Runde (20.08.2026) ---------- */

/* Die Kapitelueberschrift ist blau — wie im Baum das Kapitel, in dem man steht. */
.lp-sem-kap__titel h2 { color: var(--sem-blau); }

/* Notizfeld im Stil des Meinungsformulars: nur ein Strich, kein Kasten.
   ⛔ Beim Schreiben wird NUR der Strich schwarz — kein schwarzer Rahmen ums Feld
   (Karsten, 20.08.2026: „das soll auch nicht schwarz werden, wenn man darauf
   drueckt"). Die Hoehe setzt seminar.js auf die Hoehe des Videos. */
.lp-sem-notiz .lp-mf__feld { margin-bottom: 14px; }
.lp-sem-notiz textarea { display: block; width: 100%; box-sizing: border-box;
                         border: 0; border-bottom: 1px solid var(--sem-grau);
                         border-radius: 0; background: transparent;
                         min-height: 210px; padding: 4px 0 8px; resize: vertical;
                         font: inherit; font-size: 15px; line-height: 24px;
                         color: var(--sem-schwarz); }
.lp-sem-notiz textarea:focus { outline: none; border-bottom-color: var(--sem-schwarz); }
.lp-sem-notiz textarea::placeholder { color: var(--sem-grau-dunkel); opacity: 1; }
/* Die Standzeile haelt ihren Platz IMMER frei — auch wenn noch keine Notiz da
   ist (Karsten, 20.08.2026: „der Text soll fest sein … nicht erst nach unten
   wandern, wenn es anfaengt zu speichern"). Die Meldung sitzt in dieser Zeile
   senkrecht mittig zwischen Knopf und Erklaertext. */
/* ⚠ FESTE Hoehe, nicht `min-height`: bei einer Mindesthoehe richtet sich die
   Zeile nach dem Text (18,4 px statt 18) und der Erklaertext darunter rutscht
   beim ersten Speichern ein Stueck nach unten. Mit fester Hoehe steht alles
   still, und die Meldung sitzt darin senkrecht mittig — also mittig zwischen
   der Unterkante des Knopfes und dem Erklaertext (Karsten, 20.08.2026). */
.lp-sem-notiz__stand { display: flex; align-items: center; height: 20px;
                       overflow: hidden; font-size: 12px; color: var(--sem-grau); }
.lp-sem-notiz .lp-knopf-reihe { margin: 0 0 12px; }

/* Kleine Fassung des Startseiten-Knopfes — fuer die Elemente-Liste. */
.btn-ghost--klein { font-size: 13px; padding: 6px 14px; justify-self: start; }
.btn-ghost--klein img { width: 12px; height: 12px; }

.lp-sem-hinweis--oben { margin-top: 0; margin-bottom: 18px; }
.lp-sem-elemente li { gap: 6px; }


/* ---------- Kapitelseite, vierte Runde (20.08.2026) ---------- */

/* Das Video, das gerade dran ist, ist FARBIG — grau bleiben nur die, die man
   noch nicht gesehen hat (Karsten, 20.08.2026). Gilt fuer die Buehne auf der
   Kapitelseite und fuer das Vorschaubild im „Aktuellen Stand". */
.lp-sem-buehne__bild,
.lp-sem-vorschau img { filter: none; }

/* Der PDF-Knopf steht mittig zwischen dem Strich des Feldes und dem Erklaertext. */
.lp-sem-notiz__aktion { display: flex; justify-content: center; margin: 16px 0; }
.lp-sem-notiz .lp-sem-hinweis { margin-top: 16px; }

/* Ohne Konto: Feld sichtbar, aber gesperrt — man soll sehen, was es gibt. */
.lp-sem-notiz textarea[disabled] { background: transparent; color: var(--sem-grau);
                                   cursor: not-allowed; }
.lp-sem-notiz .lp-sem-kasten__kopf { display: flex; align-items: center;
                                     justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Die gemessenen Werte aus seminar.js. Ohne JS bleibt es bei der alten
   durchgehenden Linie — dann ist sie zu lang, aber nichts ist kaputt. */
.lp-baum--kap .lp-baum__kap::before { top: var(--linie-oben, 10px);
                                      bottom: var(--linie-unten, 0px); }


/* ---------- Notizfeld mit Werkzeugleiste (§91) ---------- */
.lp-sem-notiz__leiste { display: flex; gap: 6px; margin: 0 0 10px; }
.lp-sem-notiz__leiste button { width: 30px; height: 30px; border: 1px solid var(--sem-linie);
                               background: #fff; border-radius: 8px; cursor: pointer;
                               display: grid; place-items: center; font-size: 13px;
                               color: var(--sem-schwarz); padding: 0; }
.lp-sem-notiz__leiste button:hover { background: var(--sem-flaeche); }
.lp-sem-notiz__leiste button[aria-pressed="true"] { background: var(--sem-flaeche);
                                                    border-color: var(--sem-schwarz); }
.lp-sem-notiz__leiste svg { width: 15px; height: 15px; fill: none; stroke: var(--sem-schwarz);
                            stroke-width: 1.6; stroke-linecap: round; }
.lp-sem-notiz__leiste svg circle { fill: var(--sem-schwarz); stroke: none; }
.lp-sem-notiz__leiste svg text { fill: var(--sem-schwarz); stroke: none; font-family: inherit; }

/* Das Schreibfeld: nur ein Strich unten, wie im Meinungsformular. */
/* ⛔ KEIN Scrollbalken (Karsten, 20.08.2026: „der soll ueberhaupt gar keinen
   Scrollbalken haben"). Das Feld ist so hoch wie das Video daneben und WAECHST
   mit dem Text — deshalb `min-height`, nicht `height`, und kein `overflow`.
   ⚠ seminar.js setzt ebenfalls `minHeight`; ein `height` wuerde den Balken
   sofort zurueckholen. */
.lp-sem-notiz__feld { min-height: 210px; padding: 4px 0 10px; overflow: visible;
                      border-bottom: 1px solid var(--sem-grau); font-size: 15px;
                      line-height: 24px; color: var(--sem-schwarz); outline: none; }
.lp-sem-notiz__feld:focus { border-bottom-color: var(--sem-schwarz); }
.lp-sem-notiz__feld.ist-leer::before { content: attr(data-leer); color: var(--sem-grau-dunkel); }
.lp-sem-notiz__feld--zu { color: var(--sem-grau); }
.lp-sem-notiz__feld--zu::before { content: attr(data-leer); color: var(--sem-grau-dunkel); }
.lp-sem-notiz__feld ul, .lp-sem-notiz__feld ol { margin: 6px 0; padding-left: 22px; }
.lp-sem-notiz__feld li { margin: 2px 0; }

/* Knopf linksbuendig, oben wie unten gleich viel Luft.
   ⚠ Der Stand steht UNTER dem Knopf, nicht daneben: in der schmalen rechten
   Spalte brach sonst der Knopftext um und die Meldung stand quer daneben
   (Karsten, 20.08.2026: „ob das so versetzt aussieht mit dem Button"). */
/* Knopf, Speicherstand und Erklaertext haengen als Block zusammen: zwischen
   Knopf und Stand genauso viel Luft wie zwischen Stand und Erklaertext
   (Karsten, 20.08.2026: „der muss genau so viel Abstand haben"). */
.lp-sem-notiz__aktion { display: flex; flex-direction: column; align-items: flex-start;
                        gap: 8px; margin: 20px 0 0; }
.lp-sem-notiz__aktion .btn-ghost { white-space: nowrap; }
.lp-sem-notiz .lp-sem-hinweis { margin-top: 8px; }
.lp-sem-notiz__stand { font-size: 12px; color: var(--sem-grau); }
.lp-sem-notiz__stand--ok { color: var(--sem-gruen, #75a83a); }
.lp-sem-notiz__stand--fehler { color: #da0202; }


/* Play-Knopf auf JEDEM Vorschaubild im Baum — genau wie auf der Startseite und im
   „Aktuellen Stand": grauer Kreis (#999, 92 % deckend), weisses Dreieck
   (Karsten, 20.08.2026: „sollte genau so mit dem Playbutton sein wie bei der
   Startseite"). Nur kleiner, weil die Bilder kleiner sind. */
.lp-baum__bildrahmen { position: relative; }
.lp-baum__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
                 width: 40px; height: 40px; border-radius: 50%;
                 background: rgba(153,153,153,.92); display: grid; place-items: center; }
.lp-baum__play svg { width: 12px; height: 14px; fill: #fff; margin-left: 2px; }
@media (max-width: 760px) {
  .lp-baum__play { width: 34px; height: 34px; }
}

/* Zwischenueberschrift in der Notiz — bewusst schlicht, es ist eine Notiz. */
.lp-sem-notiz__feld h3 { font-family: "Assistant", Arial, sans-serif; font-size: 17px;
                         font-weight: 600; line-height: 1.35; margin: 14px 0 4px; }
.lp-sem-notiz__feld h3:first-child { margin-top: 0; }
.lp-sem-notiz__leiste button u { text-underline-offset: 2px; }


/* Unten im Notizkasten soll genauso viel Luft sein wie links und rechts (26 px) —
   nicht mehr (Karsten, 20.08.2026: „da unten ist zu viel Platz bis zum Rand").
   Der Erklaertext ist das letzte Element, sein Aussenabstand faellt weg. */
.lp-sem-notiz .lp-sem-hinweis:last-child { margin-bottom: 0; }
.lp-sem-notiz { padding-bottom: 26px; }


/* 🔴 20.08.2026: Unter dem Videotitel klaffte eine Luecke von 52 px, oben waren
   es 26 px. Ursache: der Titel ist ein <p> und erbte den Absatzabstand des
   Themes (27 px) — die eigene Regel weiter oben ist weniger spezifisch und kam
   nicht dagegen an. Karsten: „das sieht irgendwie haesslich aus."
   ⛔ Der Titel behaelt seinen Abstand nach OBEN zum Video, aber keinen nach unten. */
.lp-sem-kap__video .lp-sem-buehne__titel,
.lp-sem-kasten .lp-sem-buehne__titel { margin: 12px 0 0; }


/* Der ganze Element-Eintrag ist klickbar (§93-Nachtrag, 20.08.2026). Der Deckel
   liegt ueber dem Eintrag, Marke und Knopf liegen darueber — so bleibt beides
   einzeln anklickbar und es entstehen keine verschachtelten Links. */
.lp-sem-elemente li { position: relative; }
.lp-sem-elemente__deckel { position: absolute; inset: 0; z-index: 1;
                           border-radius: 8px; text-indent: -9999px; overflow: hidden; }
.lp-sem-elemente__deckel:focus-visible { outline: 2px solid var(--sem-blau); outline-offset: 3px; }
.lp-sem-elemente__fuss { position: relative; z-index: 2; }
.lp-sem-elemente li:hover .lp-sem-elemente__name { color: var(--sem-blau); }

/* Das gesperrte Notizfeld ist ein Link — es soll aber weiter wie ein Feld aussehen. */
a.lp-sem-notiz__feld--zu { display: block; text-decoration: none; cursor: pointer; }
a.lp-sem-notiz__feld--zu:hover::before { color: var(--sem-schwarz); }


/* ---------- Fortschritt im Kapitel (§94, 20.08.2026) ----------
   Steht zwischen Video und Baum. ⛔ Bezug ist NUR dieses Kapitel, gerechnet
   gegen seine gesamte Spielzeit. Blau, solange es laeuft — gruen, wenn das
   Kapitel durch ist. Das ist die Belohnung. */
.lp-sem-kap__fortschritt { padding: 20px 26px; }
.lp-sem-fortschritt__kopf { display: flex; align-items: baseline; justify-content: space-between;
                            gap: 14px; margin: 0 0 10px; }
.lp-sem-fortschritt__was { font-family: "Assistant", Arial, sans-serif; font-size: 15px;
                           font-weight: 600; color: var(--sem-schwarz); }
.lp-sem-fortschritt__zahl { font-family: "Assistant", Arial, sans-serif; font-size: 20px;
                            font-weight: 600; color: var(--sem-blau); }
.lp-sem-fortschritt__bahn { display: block; height: 8px; border-radius: 30px;
                            background: var(--sem-flaeche); overflow: hidden; }
.lp-sem-fortschritt__balken { display: block; height: 100%; border-radius: 30px;
                              background: var(--sem-blau); transition: width .4s ease; }
.lp-sem-fortschritt__satz { margin: 10px 0 0; font-size: 13px; color: var(--sem-grau-dunkel); }

/* ⛔ Auch bei 100 % bleibt alles BLAU (Karsten, 20.08.2026: „der Fortschritt
   bleiben muss blau sein, das ist die blaue Standardschrift"). Kein Gruen. */

@media (max-width: 980px) { .lp-sem-kap__fortschritt { order: 3; } .lp-sem-kap__baum { order: 4; }
                            .lp-sem-kap__elemente { order: 5; } }


/* ---------- Weiter / Zurueck unter dem Video (§95, 20.08.2026) ----------
   Steht im selben Kasten wie das Video, unter dem Titel. Links zurueck, rechts
   weiter — am Kapitelende ins naechste Kapitel. ⛔ Keine Auswahl, nur weiter. */
.lp-sem-weiter { display: flex; align-items: center; justify-content: space-between;
                 gap: 16px; margin: 16px 0 0; padding-top: 14px;
                 border-top: 1px solid var(--sem-linie); }
.lp-sem-weiter__link { display: inline-flex; flex-direction: column; gap: 3px;
                       font-size: 14px; color: var(--sem-schwarz); text-decoration: none;
                       max-width: 48%; }
.lp-sem-weiter__link--weiter { text-align: right; align-items: flex-end; }
.lp-sem-weiter__kopf { display: inline-flex; align-items: center; gap: 8px; }
/* Titel und Dauer des Ziels — damit man weiss, was als Naechstes kommt. */
.lp-sem-weiter__was { font-size: 12px; color: var(--sem-grau); line-height: 1.4; }
.lp-sem-weiter__link:hover { color: var(--sem-blau); }
.lp-sem-weiter__pfeil { width: 8px; height: 8px; border-right: 1.6px solid currentColor;
                        border-bottom: 1.6px solid currentColor; display: block; }
.lp-sem-weiter__link--weiter .lp-sem-weiter__pfeil { transform: rotate(-45deg); }
.lp-sem-weiter__link--zurueck .lp-sem-weiter__pfeil { transform: rotate(135deg); }
@media (max-width: 600px) {
  .lp-sem-weiter { flex-direction: column; align-items: stretch; gap: 14px; }
  .lp-sem-weiter__link { max-width: none; }
  .lp-sem-weiter__link--weiter { align-items: flex-start; text-align: left; }
}

/* Loeschen: bewusst zurueckhaltend, es ist kein Hauptweg. */
.lp-sem-notiz__weg { border: 0; background: none; padding: 0; cursor: pointer;
                     font: inherit; font-size: 12px; color: var(--sem-grau);
                     text-decoration: underline; text-underline-offset: 3px; }
.lp-sem-notiz__weg:hover { color: #da0202; }


/* Notizzeichen am Kapitelkopf — nur der Besitzer sieht es. */
.lp-baum__notiz { display: inline-flex; align-items: center; gap: 6px; }
.lp-baum__notiz-text { font-size: 12px; color: var(--sem-blau); white-space: nowrap; }
.lp-baum__notiz svg { width: 15px; height: 15px; fill: none; stroke: var(--sem-blau);
                      stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }

/* Eigener Notiztreffer in der Suche — abgesetzt, damit man sieht: das bist du. */
.lp-sem-suche__notiz { display: block; padding: 9px 10px; border-radius: 8px;
                       text-decoration: none; color: var(--sem-schwarz); font-size: 13px;
                       background: var(--sem-flaeche); margin-bottom: 6px; }
.lp-sem-suche__notiz b { display: block; color: var(--sem-blau); }
.lp-sem-suche__notiz:hover { background: #eee; }


@media (max-width: 760px) {
  /* Auf dem Handy ist rechts oben wenig Platz — dann nur das Zeichen. */
  .lp-baum__notiz-text { display: none; }
}


/* ---------- Seitencheck 20.08.2026, Kapitelseite: Kontraste ----------
   Zwei bekannte Faelle, beide nach der schon bestehenden Hausregel geloest
   (fundament.css): FLAECHEN behalten #507DBF, geschriebene WOERTER nehmen den
   dunkleren Ton --office-blue-text #3C6BA8 (5,44 : 1). Kleines Grau steht auf
   --sem-grau-dunkel statt #999 (2,85 : 1 war unter der Norm).
   ⛔ Es sind KEINE neuen Farben — dieselbe Palette, nur der jeweils richtige Ton. */
.lp-sem-kap__titel h2,
.lp-sem-fortschritt__zahl,
.lp-baum__notiz-text,
.lp-sem-suche__notiz b,
.lp-baum__ast--jetzt .lp-baum__name,
.lp-baum__ast--fertig .lp-baum__name,
.lp-baum__ast--jetzt .lp-baum__zeit,
.lp-baum__ast--fertig .lp-baum__zeit,
.lp-baum__kap--dran > .lp-baum__summe .lp-baum__titel,
.lp-baum__kap--fertig > .lp-baum__summe .lp-baum__titel { color: var(--office-blue-text, #3C6BA8); }

.lp-sem-kap__zahl,
.lp-baum__satz,
.lp-sem-elemente__ort,
.lp-sem-weiter__was,
.lp-sem-buehne__zeit,
.lp-sem-notiz__stand,
.lp-sem-suche__ort { color: var(--sem-grau-dunkel); }





/* ==========================================================================
   EBENE 1: DIE LANDINGPAGE (§99, 20.08.2026)
   Sieht jeder genau einmal. ⛔ Kein Wort vom Kaufen — der Weg heisst hier
   „hineingehen"; Registrierung und Kauf kommen erst im Baum an der Grenze.
   ========================================================================== */
.lp-sem-landing { display: grid; gap: 20px; }

.lp-sem-landing__kopf { padding: 8px 0 4px; }
.lp-sem-landing__auge { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em;
                        text-transform: uppercase; color: var(--sem-grau-dunkel); }
/* ⛔ Ueberschrift schlicht „Online-Seminar", wie auf der Uebersicht — kein
   Werbeclaim darueber (Karsten, 20.08.2026: „wirkt unprofessionell"). */
/* 🔴 DIESELBE ÜBERSCHRIFT UND DERSELBE TEXT WIE IM WÖRTERBUCH (Karsten,
   02.09.2026): „Ich habe das Gefühl, du wechselst die ganze Zeit die
   Schriftarten. Für mich ist die Überschriftenform und der Text wie beim
   Wörterbuch gut." Und: „Warum ist da ein Zeilenumbruch? Du hast doch die
   Breite."
   ⛔ HIER STAND EINE EIGENE VORGABE: 17 px statt 14, Zeilenhöhe 1.6 statt 27 px,
   eine andere Grauabstufung und `max-width: 62ch`. Genau diese Breitengrenze
   erzwang den Umbruch mitten im Satz — Platz war reichlich da.
   ✅ DIE NORM steht in `fundament.css` als `.lp-wbb__vorspann` (Zeile 1424):
        Überschrift  26 px / 39, Abstand nach unten 20 px  (`.lp-inhalt h1`)
        Vorspann     14 px / 27, Farbe --text-grey, Abstand 30 px
   Der Downloadbereich hält sie schon ein (`.lp-oee__vorspann`, oee.css:27 —
   dort steht sogar „Vorspann 1:1 wie im Woerterbuch"). Jetzt auch hier.
   ⚠ Die Norm kennt KEINE Verkleinerung auf schmalen Bildschirmen. Wer hier
   wieder eigene Werte einträgt, bricht die Einheitlichkeit — geprüft wird das
   von `_Werkzeuge/kopf_pruefen.py`. */
.lp-sem-landing__kopf h1 { margin: 0 0 20px; }
.lp-sem-landing__satz { margin: 0 0 30px; font-size: 14px; line-height: 27px;
                        color: var(--text-grey); }

/* Die Eckdaten als Reihe — keine bunten Kacheln, nur Zahl und Wort. */
.lp-sem-landing__zahlen { list-style: none; margin: 0; padding: 0; display: grid;
                          grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-sem-landing__zahlen li { display: grid; gap: 2px; padding: 16px 18px;
                             border: 1px solid var(--sem-linie); border-radius: var(--radius);
                             background: #fff; }
.lp-sem-landing__zahlen strong { font-family: "Assistant", Arial, sans-serif;
                                 font-size: 19px; font-weight: 600; }
/* ⚠ Nur die Erklaerzeile (direktes Kind von li). NIE ohne „> li >" schreiben —
   sonst faerbt es die Hilfselemente der Tipp-Animation im <strong> mit ein
   (Karsten, 20.08.2026: „du hast das design einfach geaendert"). */
.lp-sem-landing__zahlen > li > span { font-size: 13px; color: var(--sem-grau-dunkel); line-height: 1.45; }

/* --- Die EINZIGE Animation der Seite (§103) ----------------------------
   Die drei Eckdaten werden getippt, die Erklaerzeile darunter blendet ein.
   ⛔ KEIN Layoutsprung: der volle Text steht von Anfang an da, nur unsichtbar,
      und haelt die Hoehe. Der getippte Text liegt darueber.
   ⛔ Ohne JavaScript passiert gar nichts — dann steht alles sofort fertig da.
   ---------------------------------------------------------------------- */
.lp-sem-landing__zahlen--tippt > li > span { opacity: 0; transition: opacity .5s ease; }
.lp-sem-landing__zahlen--tippt > li > span.ist-da { opacity: 1; }

.lp-tipp { position: relative; display: block; }
.lp-tipp__voll, .lp-tipp__aus { font: inherit; color: inherit; letter-spacing: inherit; }
.lp-tipp__voll { visibility: hidden; }
.lp-tipp__aus  { position: absolute; left: 0; top: 0; right: 0; }
.lp-tipp--fertig .lp-tipp__voll { visibility: visible; }
.lp-tipp--fertig .lp-tipp__aus  { display: none; }

/* --- Die beiden Grafiken bauen sich auf (§104) --------------------------
   ⛔ KEIN Aufrollen. Echter Aufbau in drei Phasen, je Grafik 3 Sekunden:
      erst zeichnen sich die Linien von oben nach unten, dann erscheinen die
      Kaesten, dann Text und Haken (Karsten, 20.08.2026).
   Die Elemente selbst bleiben unveraendert — sie werden nur zeitversetzt
   sichtbar. Nach dem Aufbau raeumt das JS alles wieder ab.
   ⛔ Ohne JavaScript passiert nichts, dann steht die Grafik sofort da.
   ---------------------------------------------------------------------- */
/* ⚠ Die Sichtbarkeit steuert hier das JS per Inline-Stil und raeumt sie
   danach restlos wieder ab — deshalb steht dazu bewusst KEINE CSS-Regel hier.
   Ohne JavaScript wird nichts versteckt, die Grafik steht sofort da. */

.lp-sem-landing__zert { display: grid; grid-template-columns: 80px 1fr; gap: 20px;
                        align-items: start; }
.lp-sem-landing__siegel { display: block; }
.lp-sem-landing__zert p { margin: 0 0 10px; line-height: 1.6; }
.lp-sem-landing__zert p:last-child { margin-bottom: 0; }

/* Das Einfuehrungsvideo laeuft ueber die volle Breite des Kastens. */
.lp-sem-landing__video .lp-sem-buehne { max-width: none; }

.lp-sem-landing__schritte { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.lp-sem-landing__schritte h3 { margin: 8px 0 6px; font-family: "Assistant", Arial, sans-serif;
                               font-size: 16px; font-weight: 600; }
.lp-sem-landing__schritte p { margin: 0; font-size: 14px; line-height: 1.6;
                              color: var(--sem-grau-dunkel); }
.lp-sem-landing__zahl { display: grid; place-items: center; width: 28px; height: 28px;
                        border-radius: 50%; background: var(--sem-flaeche);
                        font-family: "Assistant", Arial, sans-serif; font-size: 14px;
                        font-weight: 600; color: var(--office-blue-text, #3C6BA8); }

.lp-sem-landing__zeit p { margin: 0; line-height: 1.7; }

/* Der einzige Knopf der Seite — mittig, mit Luft. */
.lp-sem-landing__los { display: grid; justify-items: center; gap: 10px;
                       padding: 10px 0 30px; text-align: center; }

@media (max-width: 980px) {
  .lp-sem-landing__zahlen { grid-template-columns: repeat(2, 1fr); }
  .lp-sem-landing__schritte { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .lp-sem-landing__kopf h1 { font-size: 26px; }
  /* ⛔ Keine eigene Grösse mehr — die Norm gilt auf jedem Bildschirm gleich
     (§376). Hier standen 15 px. */
  .lp-sem-landing__zahlen { grid-template-columns: 1fr; gap: 12px; }
  .lp-sem-landing__zert { grid-template-columns: 1fr; gap: 14px; }
}


/* Miniatur des Weges — zeigt das Muster, nicht ein echtes Kapitel. */
.lp-sem-landing__mini { display: grid; grid-template-columns: 300px 1fr; gap: 26px;
                        align-items: center; }
.lp-sem-landing__mini svg { width: 100%; height: auto; }
.lp-mini-linie { stroke: var(--sem-linie); stroke-width: 1.4; }
.lp-mini-gestrichelt { stroke: var(--sem-grau); stroke-width: 1.4; stroke-dasharray: 4 4; }
.lp-mini-kasten { fill: var(--sem-flaeche); stroke: var(--sem-linie); stroke-width: 1; }
/* 🔴 20.08.2026: Die Beschriftungen in den beiden Grafiken standen in
   „Assistant" (der Ueberschriftenschrift) und in 12 px — direkt daneben laeuft
   der Fliesstext in der Grundschrift mit 13 px. Karsten: „Das kann nicht sein,
   dass du Schriftarten mittendrin wechselst." Jetzt dieselbe Schrift und
   dieselbe Groesse wie die Listen daneben.
   ⛔ In SVG erbt `font-family` NICHT vom Koerper — sie muss hier gesetzt werden. */
.lp-mini-text { font-family: inherit; font-size: 13px;
                fill: var(--sem-grau-dunkel); dominant-baseline: middle; }
.lp-sem-landing__minitext p { margin: 0 0 12px; line-height: 1.65; }
.lp-sem-landing__minitext p:last-child { margin-bottom: 0; }

/* Die drei Stufen — was offen ist, was ein Konto braucht, was Geld kostet. */
.lp-sem-stufen { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lp-sem-stufen li { display: grid; grid-template-columns: 170px 1fr; gap: 6px 18px;
                    align-items: start; padding-bottom: 18px;
                    border-bottom: 1px solid var(--sem-linie); }
.lp-sem-stufen li:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-sem-stufen__marke { grid-column: 1; grid-row: 1 / 3; justify-self: start;
                        align-self: start; }
.lp-sem-stufen__marke--offen { display: inline-flex; align-items: center; min-height: 24px;
                               padding: 4.5px 10px; border-radius: 30px; font-size: 11px;
                               line-height: 1.4; background: var(--sem-flaeche);
                               color: var(--sem-schwarz); }
.lp-sem-stufen__was { grid-column: 2; font-size: 15px; font-weight: 600;
                      font-family: "Assistant", Arial, sans-serif; }
.lp-sem-stufen__satz { grid-column: 2; font-size: 14px; color: var(--sem-grau-dunkel);
                       line-height: 1.55; }

@media (max-width: 760px) {
  .lp-sem-landing__mini { grid-template-columns: 1fr; gap: 18px; }
  .lp-sem-stufen li { grid-template-columns: 1fr; }
  .lp-sem-stufen__marke { grid-row: auto; margin-bottom: 4px; }
}


/* Der Struktur-Kasten steht schmaler als die uebrige Seite — die Miniatur soll
   nicht ueber die volle Breite auseinandergezogen werden (Karsten, 20.08.2026:
   „ein bisschen enger, du hast zu viel in der kompletten Breite"). */
.lp-sem-landing__aufbau { max-width: 860px; }
.lp-sem-landing__mini { grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
.lp-sem-stufen li { grid-template-columns: 190px 1fr; }


/* Aufbau und Zertifikat nebeneinander (Karsten, 20.08.2026). */
.lp-sem-landing__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
                        align-items: start; }
.lp-sem-landing__paar .lp-sem-kasten { margin: 0; max-width: none; }
/* In der schmalen Spalte steht die Miniatur ueber dem Text, nicht daneben. */
.lp-sem-landing__paar .lp-sem-landing__mini { grid-template-columns: 1fr; gap: 16px;
                                              justify-items: center; }
.lp-sem-landing__paar .lp-sem-landing__mini svg { max-width: 260px; }
/* ⚠ Dieselbe Groesse und Farbe wie `.lp-sem-liste` in den Nachbarkaesten —
   sonst wirkt der Aufbau-Kasten wie eine andere Schrift (Karsten, 20.08.2026). */
.lp-sem-landing__punkte { margin: 0; padding-left: 18px; display: grid; gap: 6px;
                          font-size: 13px; line-height: 1.6; color: var(--sem-grau-dunkel); }

/* Der Knopf am Ende steht mit doppeltem Abstand — er soll klar in der Mitte
   stehen und nicht am letzten Kasten kleben. */
.lp-sem-landing__los--ende { padding-top: 60px; padding-bottom: 80px; }

@media (max-width: 980px) {
  .lp-sem-landing__paar { grid-template-columns: 1fr; }
}

/* Der Deckel liegt genau ueber dem Player und verschwindet beim ersten Klick. */
.lp-sem-vorschau-deckel { position: absolute; inset: 0; padding: 0; border: 0;
                          background: none; cursor: pointer; display: block; }
.lp-sem-vorschau-deckel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-sem-vorschau-deckel .lp-sem-vorschau__knopf { position: absolute; left: 50%; top: 50%;
                          transform: translate(-50%,-50%); }


/* ---------- Landingpage: Abstände und gleiche Höhen (20.08.2026) ----------
   Der Knopf in der Mitte bekommt DREIFACH Luft, oben wie unten — er soll frei
   stehen und nicht zwischen zwei Kästen klemmen.
   🔴 UND SEIT DEM 01.09.2026 NOCH EINMAL DAS DOPPELTE (Karsten): „Der Abstand
   von oben zu unten, den musst du verdoppeln. Also verdoppeln wirklich."
   ⛔ Verdoppelt sind ALLE Regeln, die diese beiden Knöpfe polstern — auch die
   in den Medienabfragen weiter unten. Wer hier nur die erste ändert, wundert
   sich, warum sich nichts tut: Es gibt mehrere, und die spätere gewinnt. */
/* ⚠ unten 110 statt 90: der Kasten darunter bringt selbst 20 px Aussenabstand mit,
   sonst waeren es oben 130 und unten nur 110 (gemessen 20.08.2026). */
.lp-sem-landing__los--mitte { padding: 180px 0 220px; }
/* Der Knopf am Ende hat oben denselben Abstand wie unten zur Fußzeile. */
.lp-sem-landing__los--ende { padding: 180px 0 200px; }

/* ⛔ „So ist das Online-Seminar aufgebaut" und „Zertifikat" müssen GLEICH HOCH
   sein — nebeneinander mit unterschiedlicher Höhe sieht schlecht aus (Karsten:
   „lieber Leerraum als so"). */
.lp-sem-landing__paar { align-items: stretch; }
.lp-sem-landing__paar > .lp-sem-kasten { display: flex; flex-direction: column; height: 100%; }

/* Für wen das gedacht ist — mit echter Stimme darunter. */
.lp-sem-landing__fuerwen p { margin: 0; line-height: 1.7; }
.lp-sem-stimme { margin: 20px 0 0; padding: 18px 20px; border-radius: var(--radius);
                 background: var(--sem-flaeche); }
.lp-sem-stimme blockquote { margin: 0; font-size: 15px; line-height: 1.65;
                            color: var(--sem-schwarz); font-style: italic; }
.lp-sem-stimme blockquote::before { content: "„"; }
.lp-sem-stimme blockquote::after { content: "“"; }
.lp-sem-stimme figcaption { margin-top: 10px; font-size: 13px; color: var(--sem-grau-dunkel); }

/* Der leise Weg zurueck zur Einfuehrungsseite (§99). */
.lp-sem-zurueckzur { margin: 26px 0 10px; text-align: center; font-size: 13px; }
.lp-sem-zurueckzur a { color: var(--sem-grau-dunkel); text-decoration: underline;
                       text-underline-offset: 3px; }
.lp-sem-zurueckzur a:hover { color: var(--office-blue-text, #3C6BA8); }


/* ---------- Landingpage, fünfte Runde (20.08.2026) ---------- */

/* Mehr Luft zwischen der Überschrift „Zugang zum Online-Seminar" und der ersten
   Zeile — doppelt so viel wie vorher (16 → 32 px). */
.lp-sem-landing__stufen .lp-sem-kasten__kopf { margin-bottom: 32px; }

/* Der Link am Zugang: schlicht, unterstrichen, ⛔ KEIN Hover-Effekt. */
.lp-sem-stufen__link { grid-column: 2; justify-self: start; margin-top: 8px;
                       font-size: 14px; color: var(--sem-grau-dunkel);
                       text-decoration: underline; text-underline-offset: 3px; }
.lp-sem-stufen__link:hover, .lp-sem-stufen__link:focus { color: var(--sem-grau-dunkel); }

/* Haken im Zertifikatsbild + ZFU-Zeile darunter. */
/* ⛔ Der Haken ist SCHWARZ (#333), nicht blau (Karsten, 20.08.2026). */
.lp-mini-haken { fill: none; stroke: var(--sem-schwarz); stroke-width: 2.2;
                 stroke-linecap: round; stroke-linejoin: round; }
.lp-sem-landing__zfu { display: flex; align-items: center; gap: 12px; margin: 16px 0 0;
                       font-size: 13px; color: var(--sem-grau-dunkel); line-height: 1.5; }
.lp-sem-landing__zfu img { flex: 0 0 auto; }

/* ⛔ `.lp-sem-zurueckzur` wird nicht mehr benutzt — der Link zurueck zur
   Landingpage ist am 20.08.2026 gestrichen worden (§99). */

/* Die Grafiken erben die Grundschrift der Seite. */
.lp-sem-landing__mini svg { font-family: inherit; }

/* Die drei Eckdaten stehen in Office Blue (Karsten, 20.08.2026) — dieselbe
   Trennung wie ueberall: geschriebene Woerter im dunkleren Textblau. */
.lp-sem-landing__zahlen strong { color: var(--office-blue-text, #3C6BA8); }


/* Seitencheck 20.08.2026, Übersicht: die Kapitelmarke stand als „dran"/„fertig"
   noch im Flaechenblau (4,18 : 1) und sonst in #999 (2,85 : 1). Dieselbe
   Hausregel wie ueberall: Woerter nehmen das dunklere Textblau, kleines Grau
   steht auf #6F6F6F. */
.lp-baum__kap--dran > .lp-baum__summe .lp-baum__marke,
.lp-baum__kap--fertig > .lp-baum__summe .lp-baum__marke { color: var(--office-blue-text, #3C6BA8); }
.lp-baum__summe .lp-baum__marke { color: var(--sem-grau-dunkel); }

/* Auch die Ortsangabe im „Aktuellen Stand" („Kapitel 1 · Teil 2") stand noch auf
   #999 (2,85 : 1) — Seitencheck 20.08.2026. */
.lp-sem-jetzt__ort { color: var(--sem-grau-dunkel); }


/* ---------- Etappe 3: der Weg weiter am Ende der freien Strecke (§74) ---------- */
.lp-sem-funnel p { margin: 0 0 18px; line-height: 1.65; }
/* ⛔ BEIDE Wege gleichwertig — „Anmelden" steht neben „Registrieren", nicht
   kleingedruckt darunter (§74). */
.lp-sem-funnel__wege { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) { .lp-sem-funnel__wege { flex-direction: column; align-items: stretch; } }

/* Der laufende Einstiegspreis — ruhig gehalten, kein Countdown-Getoese (§65). */
.lp-sem-aktion p { margin: 0 0 14px; line-height: 1.65; }
.lp-sem-aktion__code { padding: 14px 16px; border-radius: var(--radius);
                       background: var(--sem-flaeche); font-size: 15px; }
.lp-sem-aktion__code strong { font-family: "Assistant", Arial, sans-serif; letter-spacing: .04em; }
.lp-sem-aktion .lp-knopf-reihe { margin: 16px 0 12px; }


/* ===================================================================
   DIE LEAN-MANAGER-PRÜFUNG (§109)
   Eigener Code statt Quiz-Plugin — sieht aus wie das Seminar.
   =================================================================== */

/* ⛔ Der Inhalt der Prüfung steht MITTIG auf der Seite (Karsten, 21.08.2026:
   „Das sollte zentral in der Webseite sein"). Nur die Überschrift bleibt
   linksbündig — die gehört zur Seite, nicht zur Prüfung.
   ⚠ Zentriert ist der Block, nicht der Text darin: Fließtext bleibt links,
   sonst wird er unlesbar. */
.lp-pr .lp-sem-kasten { max-width: 780px; margin-left: auto; margin-right: auto; }

/* --- Die vier Regeln vor dem Start --- */
.lp-pr-regeln { list-style: none; margin: 0; padding: 0; display: grid;
                grid-template-columns: repeat(2, 1fr); gap: 16px; }
.lp-pr-regeln li { display: grid; gap: 2px; }
.lp-pr-regeln strong { font-family: "Assistant", Arial, sans-serif; font-size: 16px;
                       font-weight: 600; color: var(--office-blue-text, #3C6BA8); }
.lp-pr-regeln span { font-size: 13px; line-height: 1.45; color: var(--sem-grau-dunkel); }

/* --- Fortschritt --- */
.lp-pr-leiste { max-width: 780px; margin: 0 auto 26px; }
.lp-pr-leiste__balken { height: 4px; border-radius: 2px; background: var(--sem-flaeche); overflow: hidden; }
.lp-pr-leiste__balken span { display: block; height: 100%; width: 5%;
                             background: var(--office-blue, #507DBF); transition: width .25s ease; }
.lp-pr-leiste__text { padding-top: 8px; font-size: 13px; color: var(--sem-grau-dunkel); }
.lp-pr-leiste__text b { font-weight: 600; color: var(--sem-text, #333); }

/* --- Die Frage --- */
.lp-pr-frage { max-width: 780px; margin: 0 auto; }
.lp-pr-frage__text { margin: 0 0 6px; font-family: "Assistant", Arial, sans-serif;
                     font-size: 20px; line-height: 1.45; font-weight: 600; }
.lp-pr-frage__zahl { margin: 0 0 20px; font-size: 13px; color: var(--sem-grau-dunkel); }

/* --- Die Antworten: große Flächen, nicht winzige Kästchen --- */
.lp-pr-antworten { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-pr-antwort { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
                 width: 100%; text-align: left; padding: 14px 16px; cursor: pointer;
                 background: #fff; border: 1px solid var(--sem-linie); border-radius: var(--radius);
                 font-family: inherit; font-size: 15px; line-height: 1.5; color: inherit; }
.lp-pr-antwort__haken { display: block; width: 20px; height: 20px; margin-top: 1px;
                        border: 1px solid var(--sem-grau-dunkel); border-radius: 4px; background: #fff; }
.lp-pr-antwort.ist-gewaehlt { border-color: var(--office-blue, #507DBF);
                              box-shadow: inset 0 0 0 1px var(--office-blue, #507DBF); }
.lp-pr-antwort.ist-gewaehlt .lp-pr-antwort__haken { background: var(--office-blue, #507DBF);
                                                    border-color: var(--office-blue, #507DBF); }
/* Der Haken selbst — als Winkel gezeichnet, kein Bild. */
.lp-pr-antwort.ist-gewaehlt .lp-pr-antwort__haken::after {
  content: ""; display: block; width: 5px; height: 10px; margin: 3px auto 0;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* --- Fußzeile mit den Knöpfen --- */
.lp-pr-fuss { max-width: 780px; margin: 28px auto 10px; display: flex; gap: 12px; align-items: center; }
.lp-pr-fuss button { font-family: inherit; font-size: 14px; cursor: pointer;
                     padding: 10px 20px; border-radius: 20px; border: 1px solid var(--sem-linie);
                     background: #fff; color: var(--sem-text, #333); }
/* ⛔ Mit `.lp-pr-fuss` davor — sonst gewinnt die Regel fuer alle Knoepfe
   darueber und der Weiter-Knopf bleibt weiss (§70: Blau ist die Handlungsfarbe). */
.lp-pr-fuss .lp-pr-weiter, .lp-pr-fuss .lp-pr-abgeben {
  margin-left: auto; border-color: var(--office-blue, #507DBF);
  background: var(--office-blue, #507DBF); color: #fff; }
.lp-pr-fuss button[disabled] { opacity: .6; cursor: default; }
.lp-pr-merk { max-width: 780px; margin: 0 auto; }

/* --- Ergebnis --- */
.lp-pr-zahl { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 18px; }
.lp-pr-zahl__wert { font-family: "Assistant", Arial, sans-serif; font-size: 44px;
                    line-height: 1; font-weight: 600; }
.lp-pr-zahl__grenze { font-size: 13px; color: var(--sem-grau-dunkel); }
.lp-pr-ergebnis--gut .lp-pr-zahl__wert { color: #2E7D32; }
.lp-pr-luecken { margin-bottom: 10px; }

@media (max-width: 760px) {
  .lp-pr-regeln { grid-template-columns: 1fr; gap: 12px; }
  .lp-pr-frage__text { font-size: 17px; }
  .lp-pr-fuss { flex-wrap: wrap; }
  .lp-pr-fuss .lp-pr-weiter, .lp-pr-fuss .lp-pr-abgeben { margin-left: 0; width: 100%; }
}

/* Der Satz „jede Prüfung ist eine andere" — steht unter den vier Regeln. */
.lp-pr-anders { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--sem-linie);
                font-size: 14px; line-height: 1.6; color: var(--sem-grau-dunkel); }

/* --- Auswertung, überarbeitet am 21.08.2026 --------------------------- */
.lp-pr-ergebnis { max-width: 780px; }
/* ⛔ Dreimal so viel Luft zwischen Zahl und Text (Karsten, 21.08.2026):
   20 → 60 px. */
.lp-pr-zahl { display: flex; align-items: center; gap: 60px; margin: 6px 0 24px;
              padding-bottom: 22px; border-bottom: 1px solid var(--sem-linie); }
.lp-pr-zahl__wert { font-family: "Assistant", Arial, sans-serif; font-size: 64px;
                    line-height: 1; font-weight: 600; color: var(--pr-farbe, #333);
                    font-variant-numeric: tabular-nums; }
.lp-pr-zahl__dazu { font-size: 14px; line-height: 1.5; color: var(--sem-grau-dunkel); }
.lp-pr-zahl__dazu b { color: var(--sem-text, #333); font-weight: 600; }

.lp-pr-h3 { margin: 24px 0 8px; font-family: "Assistant", Arial, sans-serif;
            font-size: 17px; font-weight: 600; }

/* Die Lücken: Zahl, Thema, Weg ins Kapitel */
.lp-pr-luecken { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-pr-luecken li { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px;
                    align-items: center; padding: 12px 16px; background: #fff;
                    border: 1px solid var(--sem-linie); border-radius: var(--radius); }
.lp-pr-luecken__zahl { display: grid; place-items: center; width: 34px; height: 34px;
                       border-radius: 50%; background: var(--sem-flaeche);
                       font-family: "Assistant", Arial, sans-serif; font-size: 15px;
                       font-weight: 600; color: var(--office-blue-text, #3C6BA8); }
.lp-pr-luecken__text { display: grid; gap: 1px; }
.lp-pr-luecken__text strong { font-family: "Assistant", Arial, sans-serif; font-size: 15px; font-weight: 600; }
.lp-pr-luecken__text span { font-size: 13px; color: var(--sem-grau-dunkel); }
.lp-pr-luecken__weg { font-size: 13px; white-space: nowrap; color: var(--office-blue-text, #3C6BA8); }

/* ⛔ Zwei Knöpfe stehen AUSEINANDER: der Weg vorwärts links, der Rückweg
   rechts am Rand (Karsten, 21.08.2026). */
.lp-knopf-reihe--zwei { display: flex; flex-wrap: wrap; gap: 12px;
                        justify-content: space-between; align-items: center; }
@media (max-width: 560px) {
  .lp-knopf-reihe--zwei { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .lp-pr-zahl { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lp-pr-zahl__wert { font-size: 52px; }
  .lp-pr-luecken li { grid-template-columns: 34px 1fr; }
  .lp-pr-luecken__weg { grid-column: 2; }
}

/* --- „Das bekommst du dafür": die vier Zertifikate ------------------- */
/* ⛔ KEIN Rahmen um die Zertifikate (Karsten, 21.08.2026: „Diese Ränder …
   dann lassen wir das ganze weg, einfach nur das Zertifikat"). Die Bilder
   bringen ihren eigenen Rand mit — ein zweiter davor sieht nach Kasten im
   Kasten aus.
   ⛔ Doppelt so groß: zwei nebeneinander statt vier. */
.lp-pr-zert__reihe { list-style: none; margin: 18px 0 22px; padding: 0;
                     display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.lp-pr-zert__reihe li { display: grid; gap: 8px; justify-items: center; text-align: center; }
.lp-pr-zert__reihe img { display: block; width: 100%; height: auto; background: #fff; }
.lp-pr-zert__reihe span { font-size: 12px; color: var(--sem-grau-dunkel); }

/* ⛔ DER UNTERTITEL RUECKT BEIM QUERFORMAT NAEHER ANS BLATT (07.09.2026).
   Karsten: *„Die Querformat deutsch, Querformat englisch sollen weiter nach
   oben gesetzt werden an das Zertifikat dran. Die sollen genauso weit entfernt
   sein wie das Hochformat. Mehr nicht."*

   WARUM: Alle vier Bilder sind quadratisch (1200 x 1200) und sollen es
   bleiben — ein Versuch, sie auf Blattform umzustellen, hat Karsten sofort
   zurueckgenommen: *„Es ging nur um die Untertitel, nicht um die Bilder."*
   In einem quadratischen Bild bleibt unter einem QUERFORMAT-Blatt aber mehr
   Weiss als unter einem hochkanten. Nachgerechnet bei 1200 px Bildbreite:
   66 px unter dem Hochformat, 222 px unter dem Querformat — 156 px mehr.

   ⚠ 156 von 1200 sind 13,04 %. `margin-top` in Prozent bezieht sich auf die
     BREITE des Elternteils, und die ist hier genau die Bildbreite. Deshalb
     stimmt der Abstand bei jeder Fenstergroesse von selbst, ohne Messpunkte. */
.lp-pr-zert__reihe li.ist-quer span { margin-top: -11.61%; }

/* ⛔ DIE QUERFORMAT-REIHE RUECKT NACH OBEN (07.09.2026).
   Karsten: *„Könntest du noch die Abstände zwischen den beiden Formaten etwas
   kleiner machen? Um die Hälfte? So dass das Querformat nach oben kommt,
   überhaupt das ganze Element nach oben."*

   Gemessen im gerenderten Block: 102 px zwischen dem Untertitel der oberen
   Reihe und der Blattoberkante der unteren. Die setzen sich zusammen aus
   22 px Rasterabstand und 78 px Weiss, das OBEN im quadratischen
   Querformat-Bild steht (222 von 1200 Bildpunkten = 18,53 %).

   ⚠ Halbiert wird beides in seiner eigenen Einheit: 11 px vom Rasterabstand
     und 9,27 % vom Bildleerraum. `margin-top` in Prozent bezieht sich auf die
     BREITE des Elternteils — deshalb stimmt der halbe Abstand bei jeder
     Fenstergroesse von selbst. */
/* 🔴 ERSTER ANLAUF WAR FALSCH: `margin-top` am ganzen Element zog es nach
   oben, und der weisse Leerraum OBEN im Querformat-Bild legte sich über die
   Untertitel der oberen Reihe — „Hochformat, deutsch" und „Hochformat,
   englisch" waren weg. Beim Nachsehen sofort aufgefallen.

   ✅ Richtig ist, den Leerraum oben im Bild WEGZUSCHNEIDEN statt das Element zu
   verschieben: Das Bild rutscht innerhalb seiner Karte hoch, `overflow: hidden`
   schneidet den Überstand ab, und die Karte wird dadurch kürzer. Nichts liegt
   über etwas anderem.
   ⚠ Am Bild selbst ändert das nichts — die vier Dateien bleiben 1200 × 1200
     und gleich gross (Karsten: „Es ging nur um die Untertitel, nicht um die
     Bilder."). */
.lp-pr-zert__reihe li.ist-quer { overflow: hidden; }
.lp-pr-zert__reihe li.ist-quer img { margin-top: -9.27%; }

/* Die zweite Hälfte des Abstands steckt im Rasterabstand — halbiert.
   ⚠ Nur die ZEILEN; der Abstand zwischen den beiden Spalten bleibt bei 22 px. */
.lp-pr-zert__reihe { row-gap: 11px; }
/* ⚠ 11,61 statt der gerechneten 13,04 Prozent: Der Schatten unter dem Blatt
   zaehlt optisch mit. Nachgemessen im gerenderten Block — mit 13,04 % sass der
   Querformat-Text 6 px NAEHER als der vom Hochformat, jetzt sind es 0 px. */
.lp-pr-zert__was { margin-top: 4px; }

@media (max-width: 760px) {
  .lp-pr-zert__reihe { grid-template-columns: 1fr; gap: 16px; }
}

/* --- Die Auswertung baut sich auf (§111) ------------------------------
   ⛔ Die Klasse `lp-pr-stufig` setzt das Skript selbst. Ohne JavaScript
      greift die Regel nie und alles steht sofort da. */
.lp-pr-stufig [data-pr-stufe] { opacity: 0; }
/* ⚠ Bloecke, die direkt unter <main> haengen (Zertifikat, „Wie es weitergeht"),
   wurden von der Einblendregel der ganzen Seite sichtbar gemacht, bevor sie dran
   waren — `main.lp-pr.kommt-herein.ist-da > *` ist spezifischer als die Zeile
   darueber (Karsten, 23.08.2026: „da steht schon, das kommt jetzt zu dir").
   Deshalb hier noch einmal ausdruecklich, mit hoeherem Gewicht. */
.lp-pr-stufig main.lp-pr.kommt-herein.ist-da > [data-pr-stufe]:not(.ist-da) { opacity: 0; }
.lp-pr-stufig [data-pr-stufe].ist-da { opacity: 1; transition: opacity 1s ease; }

/* Bestanden oder nicht — steht UNTER der Zahl, nicht als Überschrift darüber. */
.lp-pr-lage { margin: -8px 0 18px; font-family: "Assistant", Arial, sans-serif;
              font-size: 22px; font-weight: 600; color: var(--pr-farbe, #333); }
.lp-pr-ergebnis .lp-pr-zahl { margin-bottom: 14px; padding-bottom: 18px; }


/* ===================================================================
   HANDY-KORREKTUREN LANDINGPAGE (Karsten, 21.08.2026)

   🔴 Die Stufen standen auf dem Handy weiter zweispaltig: 190 px für die Marke,
      der Rest für den Text — dadurch brach jede Zeile nach zwei, drei Wörtern um
      („der Text wird an der Stelle viel zu viel gequetscht").
      Ursache: Die Regel `.lp-sem-stufen li { grid-template-columns: 190px 1fr }`
      steht WEITER UNTEN als die Handy-Regel und hat sie überschrieben — gleiche
      Spezifität, später gewinnt. ⛔ Handy-Regeln gehören ans Ende der Datei.
   =================================================================== */
@media (max-width: 760px) {
  .lp-sem-stufen li { grid-template-columns: 1fr; gap: 4px; }
  .lp-sem-stufen__marke { grid-row: auto; margin-bottom: 6px; }
  .lp-sem-stufen__was,
  .lp-sem-stufen__satz,
  .lp-sem-stufen__link { grid-column: 1; }

  /* Mehr Luft um den letzten Knopf — er klebte am Seitenende. */
  .lp-sem-landing__los--ende { padding: 92px 0 128px; }
  .lp-sem-landing__los--mitte { padding: 80px 0 92px; }
}


/* ===================================================================
   PRÜFUNGSSEITE: LUFT, SIGNET, TACHO, VERLAUF (Karsten, 21.08.2026)

   🔴 Diese Regeln fehlten stundenlang: Das Skript, das sie schreiben sollte,
      war an einem Syntaxfehler abgebrochen — die Vorlage wurde geändert, das
      Stylesheet nicht. ⛔ Nach jedem Umbau nachmessen, nicht annehmen.
   =================================================================== */

/* „Mehr Abstand der ersten Box zur Überschrift (genauso viel wie die
   Überschrift zum Menü) und dreimal so viel Abstand zwischen den Boxen." */
.lp-pr .lp-sem-kopfzeile { margin-bottom: 64px; }
.lp-pr .lp-sem-kasten { margin-bottom: 60px; }

/* Das Signet baut sich auf — mittig unter „Bereit, wenn du es bist".
   ⚠ Die Bewegung steckt im SVG selbst (SMIL), nicht hier. */
/* ⛔ MITTIG, halb so groß wie zuerst, und oben wie unten gleich viel Luft
   (Karsten, 21.08.2026). Die Animation läuft genau EINMAL — `repeatCount="1"`
   im SVG selbst, nicht hier. */
.lp-pr-signet { display: grid; place-items: center; margin: 40px 0; }
.lp-pr-signet svg { display: block; width: 110px; height: 110px; }
@media (prefers-reduced-motion: reduce) { .lp-pr-signet { display: none; } }

/* Der Tacho neben der Zahl. */
.lp-pr-tacho { width: 225px; height: 119px; flex: none; overflow: visible; }
/* ⛔ Größer und blau (Karsten, 21.08.2026) — vorher 11 px in Grau. */
.lp-pr-tacho__marke { font-family: "Assistant", Arial, sans-serif; font-size: 19px;
                      font-weight: 600; fill: #3C6BA8; }
/* Der Farbwechsel läuft weich: von Rot über Orange und Blau nach Grün, während
   der Bogen sich füllt. */
.lp-pr-tacho__wert { transition: stroke-dashoffset .2s linear, stroke .9s ease; }

/* Der Verlauf: ein Feld je Frage, in der Reihenfolge der Prüfung. */
.lp-pr-verlauf { margin: 4px 0 22px; }
.lp-pr-verlauf__kopf { display: flex; justify-content: space-between; align-items: baseline;
                       gap: 16px; font-size: 13px; color: var(--sem-grau-dunkel); margin-bottom: 8px; }
.lp-pr-verlauf__legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
                            margin: 0 4px 0 12px; vertical-align: -1px; }
.lp-pr-verlauf__legende i.ist-gut { background: #3C6BA8; }
.lp-pr-verlauf__legende i.ist-schlecht { background: #B00020; }
.lp-pr-verlauf__reihe { list-style: none; margin: 0 0 16px; padding: 0;
                        display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; }
.lp-pr-verlauf__reihe li { position: relative; height: 34px; border-radius: 4px;
                           display: grid; place-items: center; font-size: 11px; }
.lp-pr-verlauf__reihe li.ist-gut { background: rgba(60,107,168,.14); color: #3C6BA8; }
.lp-pr-verlauf__reihe li.ist-schlecht { background: rgba(176,0,32,.16); color: #B00020; }

/* Der Aufklapp-Knopf und die Liste dahinter. */
/* Die Aufklapper sind normale Knöpfe (btn-ghost) — hier nur das, was ein
   <button> zusätzlich braucht, plus die Zahl dahinter. */
.lp-pr-auf { font-family: inherit; cursor: pointer; }
.lp-pr-liste { list-style: none; margin: 16px 0 12px; padding: 0; display: grid; gap: 6px; }
/* ⛔ `display: grid` schlägt das `hidden`-Attribut — ohne diese Zeile steht die
   Liste immer offen, egal was das Skript sagt (21.08.2026). */
.lp-pr-liste[hidden] { display: none; }
/* ⛔ „> li": ohne den Kindselektor bekämen auch die vier Antworten innerhalb
   eines Eintrags Rahmen und Raster (21.08.2026 — dieselbe Falle wie bei den
   Eckdaten der Landingpage, §103). */
.lp-pr-liste > li { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: baseline;
                  padding: 10px 14px; border: 1px solid var(--sem-linie); border-radius: var(--radius);
                  font-size: 14px; line-height: 1.5; }
.lp-pr-liste__nr { font-weight: 600; color: var(--sem-grau-dunkel); }
.lp-pr-liste__text a { margin-left: 8px; font-size: 13px; color: var(--office-blue-text, #3C6BA8); }
.lp-pr-liste__stand { font-size: 13px; white-space: nowrap; }
.lp-pr-liste > li.ist-gut .lp-pr-liste__stand { color: #3C6BA8; }
.lp-pr-liste > li.ist-schlecht .lp-pr-liste__stand { color: #B00020; }
.lp-pr-liste > li.ist-schlecht { border-color: rgba(176,0,32,.35); }

@media (max-width: 760px) {
  .lp-pr .lp-sem-kopfzeile { margin-bottom: 40px; }
  .lp-pr .lp-sem-kasten { margin-bottom: 40px; }
  .lp-pr-signet svg { width: 96px; height: 96px; }
  .lp-pr-tacho { width: 165px; height: 92px; }
  .lp-pr-verlauf__reihe { grid-template-columns: repeat(10, 1fr); }
  .lp-pr-liste > li { grid-template-columns: 26px 1fr; }
  .lp-pr-liste__stand { grid-column: 2; }
}

/* ⛔ Der letzte Knopf der Landingpage steht oben wie unten gleich weit
   entfernt (Karsten, 21.08.2026: „genauso weit entfernt von oben wie unten zur
   Fußbox"). Der Seitenstandard von 300 px unten gilt hier nicht — die
   Landingpage endet mit dem Knopf.
   ⚠ `:has()` versteht jeder aktuelle Browser; wo nicht, bleibt es beim
   Seitenstandard, was niemandem etwas kaputt macht. */
/* ⚠ Der letzte Kasten bringt seinen eigenen Abstand mit — den nehmen wir weg,
   sonst ist „oben" immer größer als „unten". Gemessen: vorher 96 zu 56. */
.lp-sem-landing > section:last-of-type,
.lp-sem-landing__stufen { margin-bottom: 0; }   /* ⚠ die Klasse direkt: der Selektor
   darüber griff nicht, es blieben exakt die 20 px des Kastens stehen */
/* ⚠ Der Kasten behält 20 px Abstand nach unten (eine spätere Regel setzt ihn
   wieder). Statt dagegen anzukämpfen wird oben 20 px weniger gepolstert —
   gemessen kommt beides auf dasselbe heraus.
   🔴 UND DESHALB MUSS DIESE ZEILE MITWANDERN (Karsten, 01.09.2026): „Der
   Abstand nach unten zur Fußzeile ist aber nicht verdoppelt worden. Der muss
   genau so viel Abstand haben wie das da drüber."
   ⛔ Der untere Knopf polstert nach unten GAR NICHT (`padding: 180px 0 0`) —
   sein Abstand zur Fußzeile kommt allein von hier. Wer nur den Knopf ändert,
   verdoppelt oben und lässt unten alles beim Alten. Genau das ist mir beim
   ersten Anlauf passiert.
   ⚠ RECHNUNG: 180 px sollen sichtbar bleiben, 20 px bringt der Kasten selbst
   mit — also 200. Wer die 180 ändert, ändert hier auf 180 + 20. */
.lp-inhalt:has(.lp-sem-landing) { padding-bottom: 0; }   /* §584 */
.lp-sem-landing__los--ende { padding: 180px 0 0; }

@media (max-width: 760px) {
  .lp-inhalt:has(.lp-sem-landing) { padding-bottom: 0; }       /* §584 */
  .lp-sem-landing__los--ende { padding: 112px 0 0; }
  .lp-sem-landing__los--mitte { padding: 80px 0 92px; }
}

/* Abstände in der Auswertung verdoppelt (Karsten, 21.08.2026). */
.lp-pr-verlauf { margin: 10px 0 44px; }
.lp-pr-verlauf__kopf { margin-bottom: 16px; }
.lp-pr-verlauf__reihe { margin-bottom: 32px; gap: 8px; }
.lp-pr-liste { margin: 32px 0 24px; gap: 12px; }
.lp-pr-liste > li { padding: 16px 18px; }
.lp-pr-h3 { margin: 44px 0 12px; }
.lp-pr-luecken { margin-top: 24px; gap: 16px; }
.lp-pr-luecken li { padding: 18px 20px; }

/* Was der Prüfling angekreuzt hat — ⛔ nie, was richtig gewesen wäre. */
.lp-pr-liste__wahl { display: block; margin-top: 4px; font-size: 13px;
                     color: var(--sem-grau-dunkel); }
.lp-pr-liste__wahl b { color: var(--sem-text, #333); }

/* Die vier Antworten in der Einzelauswertung — angekreuztes hervorgehoben.
   ⛔ Keine Kennzeichnung, welche richtig gewesen wäre. */
.lp-pr-antw { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 5px; }
.lp-pr-antw li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
                 font-size: 13px; line-height: 1.5; color: var(--sem-grau-dunkel); }
.lp-pr-antw__buchstabe { display: grid; place-items: center; width: 20px; height: 20px;
                         border: 1px solid var(--sem-linie); border-radius: 4px;
                         font-size: 11px; font-weight: 600; }
.lp-pr-antw li.ist-gewaehlt { color: var(--sem-text, #333); }
.lp-pr-antw li.ist-gewaehlt .lp-pr-antw__buchstabe { background: var(--office-blue, #507DBF);
                                                     border-color: var(--office-blue, #507DBF); color: #fff; }

/* ⛔ Prüfung und Auswertung nutzen mehr Breite (Karsten, 21.08.2026: „einfach
   mehr Breite von der Seite nehmen, das was realistisch ist, nicht die gesamte
   Breite"). 980 statt 780 — Fließtext bleibt damit noch gut lesbar. */
.lp-pr .lp-sem-kasten,
.lp-pr-ergebnis,
.lp-pr-leiste,
.lp-pr-frage,
.lp-pr-fuss,
.lp-pr-merk { max-width: 980px; }

/* Zwei Bereiche: richtig und falsch getrennt aufklappbar. */
.lp-pr-gruppe { margin: 0 0 14px; }
/* ⛔ Mit `.lp-pr-auf` davor: sonst gewinnt `.btn-ghost span` mit seinem
   `padding: 0 10px; line-height: 27px; top: 0.5px` — und die Zahl sitzt
   außermittig im Kreis (Karsten, 21.08.2026). */
.lp-pr-auf .lp-pr-auf__zahl { display: inline-flex; align-items: center; justify-content: center;
                   box-sizing: border-box; min-width: 22px; height: 22px;
                   padding: 0 6px; margin-right: 8px; border-radius: 11px;
                   background: var(--sem-flaeche); font-size: 11px; font-weight: 600;
                   line-height: 1; top: 0; }
/* Aufgeklappt zeigt der Pfeil nach unten — dieselbe Bewegung wie beim Überfahren. */
.lp-pr-auf[aria-expanded="true"] img { transform: rotate(90deg); }
.lp-pr-auf[aria-expanded="true"]:hover img { transform: rotate(90deg) translateX(5px); }
.lp-pr-liste__text > .lp-pr-antw { margin-top: 12px; }

/* Bei falsch beantworteten Fragen sind die angekreuzten Antworten und der
   Kapitelhinweis ROT (Karsten, 21.08.2026) — bei richtigen bleiben sie blau. */
.lp-pr-liste > li.ist-schlecht .lp-pr-antw li.ist-gewaehlt .lp-pr-antw__buchstabe {
  background: #B00020; border-color: #B00020; }
.lp-pr-liste > li.ist-schlecht .lp-pr-liste__wahl b { color: #B00020; }
.lp-pr-liste > li.ist-schlecht .lp-pr-liste__text a { color: #B00020; }

/* --- Der Wechsel von Frage zu Frage (§118) ---------------------------
   Die beantwortete Frage geht nach links hinaus, die nächste kommt von rechts
   herein — beim Zurückgehen andersherum. ⛔ Die Bewegung steuert das Skript
   über diese Klassen; ohne JavaScript wird schlicht umgeschaltet. */
.lp-pr-frage { transition: opacity .3s ease, transform .3s ease; }
.lp-pr-frage.geht-links  { opacity: 0; transform: translateX(-28px); }
.lp-pr-frage.geht-rechts { opacity: 0; transform: translateX(28px); }
.lp-pr-frage.kommt-rechts { opacity: 0; transform: translateX(28px); transition: none; }
.lp-pr-frage.kommt-links  { opacity: 0; transform: translateX(-28px); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-pr-frage { transition: none; }
}

/* ⛔ „richtig beantwortet" ist BLAU (Karsten, 21.08.2026). Grün bleibt dem
   Ergebnis ab 90 % vorbehalten — sonst hätte die Seite zwei Bedeutungen für
   dieselbe Farbe. */

/* Die Trefferzahl: doppelt so groß wie der Text daneben und in der Farbe des
   Ergebnisses. ⛔ Nur die erste Zahl (Karsten, 21.08.2026). */
/* ⛔ Mit `.lp-pr-zahl__dazu` davor: sonst gewinnt die Regel `.lp-pr-zahl__dazu b`
   mit ihrem Schwarz, und die Zahl bleibt farblos (21.08.2026). */
.lp-pr-zahl__dazu .lp-pr-zahl__treffer { font-family: "Assistant", Arial, sans-serif;
                       font-size: 28px; line-height: 1; font-weight: 600;
                       color: var(--pr-farbe, #333); margin-right: 2px; }

/* Die Kapitelempfehlung unter einer falsch beantworteten Frage. */
.lp-pr-liste__empfehlung { display: block; margin-top: 4px; font-size: 13px;
                           color: var(--sem-grau-dunkel); }
.lp-pr-liste__empfehlung a { color: #B00020; font-weight: 600; }
.lp-pr-liste__leer { display: none; }

/* Empfehlung als anklickbare Knöpfe — groß genug für den Finger. */
.lp-pr-empf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.lp-pr-empf__text { font-size: 13px; color: var(--sem-grau-dunkel); margin-right: 2px; }
.lp-pr-empf__knopf { display: inline-flex; align-items: center; min-height: 34px;
                     padding: 0 14px; border-radius: 17px; font-size: 13px; line-height: 1;
                     border: 1px solid var(--sem-linie); background: #fff;
                     color: var(--sem-text, #333); text-decoration: none; white-space: nowrap; }
.lp-pr-liste > li.ist-schlecht .lp-pr-empf__knopf { border-color: rgba(176,0,32,.4); color: #B00020; }
.lp-pr-liste > li.ist-schlecht .lp-pr-empf__knopf:hover { background: rgba(176,0,32,.06); }

/* ⛔ Feste Höhe für den Fragenbereich: Das Maß kommt vom längsten Fragetext
   (das Skript misst es und setzt `--pr-hoehe`). Dadurch stehen „Weiter" und
   „Zurück" bei jeder Frage an derselben Stelle. */
.lp-pr-lauf { --pr-hoehe: auto; }
.lp-pr-frage { min-height: var(--pr-hoehe, auto); }
.lp-pr-frage { transition: opacity .5s ease, transform .5s ease; }

/* Die Teile-Knöpfe im Lücken-Block sitzen unter dem Thema. */
.lp-pr-luecken .lp-pr-empf { margin-top: 8px; }
.lp-pr-luecken li { grid-template-columns: 34px 1fr; }

/* ⛔ Im Verbesserungs-Block sind die Knöpfe BLAU, nicht rot (Karsten,
   21.08.2026): Dort geht es um den Weg nach vorn, nicht um den Fehler. Rot
   bleibt der Einzelauswertung vorbehalten, wo die falsche Antwort steht. */
.lp-pr-luecken .lp-pr-empf__knopf { border-color: rgba(60,107,168,.45); color: #3C6BA8; }
.lp-pr-luecken .lp-pr-empf__knopf:hover { background: rgba(60,107,168,.07); }

/* Der Werdegang: jeder Versuch mit Balken, Prozent und Datum. */
.lp-pr-werdegang { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-pr-werdegang li { display: grid; grid-template-columns: 90px 1fr 56px 90px; gap: 14px;
                      align-items: center; font-size: 13px; color: var(--sem-grau-dunkel); }
.lp-pr-werdegang__nr { font-weight: 600; color: var(--sem-text, #333); }
.lp-pr-werdegang__balken { height: 8px; border-radius: 4px; background: var(--sem-flaeche); overflow: hidden; }
.lp-pr-werdegang__balken i { display: block; height: 100%; background: var(--pr-farbe, #999); }
.lp-pr-werdegang__wert { font-weight: 600; color: var(--pr-farbe, #333); text-align: right;
                         font-variant-numeric: tabular-nums; }
.lp-pr-werdegang li.ist-jetzt .lp-pr-werdegang__nr::after { content: " (jetzt)"; font-weight: 400;
                                                            color: var(--sem-grau-dunkel); }
@media (max-width: 760px) {
  .lp-pr-werdegang li { grid-template-columns: 78px 1fr 48px; }
  .lp-pr-werdegang__datum { grid-column: 2 / 4; margin-top: -4px; }
}

/* „Da solltest du dich verbessern": je Kapitel eine Zeile mit seinen Teilen. */
.lp-pr-verb { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.lp-pr-verb li { display: grid; gap: 8px; padding: 16px 18px; background: #fff;
                 border: 1px solid var(--sem-linie); border-radius: var(--radius); }
.lp-pr-verb__kopf { font-family: "Assistant", Arial, sans-serif; font-size: 15px; font-weight: 600; }
.lp-pr-verb .lp-pr-empf { margin-top: 0; }
.lp-pr-verb .lp-pr-empf__knopf { border-color: rgba(60,107,168,.45); color: #3C6BA8; }
.lp-pr-verb .lp-pr-empf__knopf:hover { background: rgba(60,107,168,.07); }
/* „(jetzt)" ist entfernt — die Regel dafür bleibt weg. */

/* --- Der Vorhang zum Auftakt (§121) -----------------------------------
   Eine leere Fläche über der ganzen Seite: kein Menü, keine Fußzeile, nichts.
   Darin mittig der Satz und die Zahl. */
.lp-pr-vorhang { position: fixed; inset: 0; z-index: 9999; background: #fff;
                 display: grid; place-items: center; opacity: 0;
                 transition: opacity 2s ease; }
/* 🔴 21.08.2026, zum zweiten Mal dieselbe Falle: `display: grid` schlägt das
   `hidden`-Attribut. Der Vorhang lag dadurch unsichtbar über der ganzen Seite
   und fing jeden Klick ab — Karsten: „die Buttons funktionieren überhaupt
   nicht". ⛔ Bei JEDEM Element mit `display` und `hidden` diese Zeile setzen.
   `pointer-events` als zweite Sicherung, solange er durchsichtig ist. */
.lp-pr-vorhang[hidden] { display: none; }
.lp-pr-vorhang { pointer-events: none; }
.lp-pr-vorhang.ist-da { opacity: 1; pointer-events: auto; }
.lp-pr-vorhang__mitte { display: grid; place-items: center; gap: 26px; text-align: center;
                        padding: 20px; }
/* ⛔ Dieselbe Schrift wie überall auf der Seite — über die Variable, nicht
   fest verdrahtet (Karsten, 21.08.2026: „du hast eine andere Schriftart
   benutzt, das finde ich nicht gut").
   ⛔ Die Zahl 30 % kleiner: 120 → 84 px. */
.lp-pr-vorhang__text { margin: 0; font-family: var(--font-heading);
                       font-size: 26px; line-height: 1.5; font-weight: 600;
                       color: var(--sem-text, #333); }
.lp-pr-vorhang__zahl { margin: 0; font-family: var(--font-heading);
                       font-size: 84px; line-height: 1; font-weight: 600;
                       color: var(--office-blue-text, #3C6BA8); min-height: 84px; }
.lp-pr-vorhang__zahl.ist-neu { animation: lp-pr-anschlag .4s ease; }
@keyframes lp-pr-anschlag {
  0%   { transform: scale(1.4); opacity: .25; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Solange der Vorhang liegt, ist alles dahinter unsichtbar — auch Menü und Fuß. */
body.lp-pr-verdeckt > *:not(.lp-pr-vorhang) { visibility: hidden; }

/* Danach kommt die Seite in drei Sekunden zurück. */
body.lp-pr-kommt > *:not(.lp-pr-vorhang) { opacity: 0; }
body.lp-pr-kommt.ist-da > *:not(.lp-pr-vorhang) { opacity: 1; transition: opacity 3s ease; }
/* Die Überschrift der Seite steht sofort — eingeblendet werden die Inhalte. */
body.lp-pr-kommt .lp-sem-kopfzeile { opacity: 1; }

/* Beim Verlassen: die ganze Seite blendet ruhig aus. */
body.lp-pr-geht { opacity: 0; transition: opacity 2s ease; }
/* Beim Abgeben blendet NUR der Inhalt aus. Die Überschrift bleibt stehen —
   sie steht auf der Auswertung an derselben Stelle, dadurch gibt es keinen
   Bruch zwischen den beiden Seiten (Karsten, 21.08.2026). */
body.lp-pr-ende main.lp-pr > *:not(.lp-sem-kopfzeile) { opacity: 0; transition: opacity 3s ease; }

@media (prefers-reduced-motion: reduce) {
  .lp-pr-vorhang, body.lp-pr-geht, body.lp-pr-kommt > * { transition: none; }
}

/* Die Auswertung blendet sich in zwei Sekunden ein. */
/* ⛔ Nur die INHALTE blenden ein, nicht die Überschrift „Lean Manager/in"
   (Karsten, 21.08.2026: „das steht ja schon da"). */
/* ⛔ Die Seite ist von der ersten Millisekunde an verdeckt — die Klasse
   `lp-pr-eingang` setzt ein Skript im Kopf, noch bevor der Browser zeichnet.
   Ohne das blitzte die fertige Seite kurz auf (Karsten, 23.08.2026). */
html.lp-pr-eingang main.lp-pr > *:not(.lp-sem-kopfzeile) { opacity: 0; }
main.lp-pr.kommt-herein > *:not(.lp-sem-kopfzeile) { opacity: 0; }
main.lp-pr.kommt-herein.ist-da > *:not(.lp-sem-kopfzeile) { opacity: 1; transition: opacity 3s ease; }

@media (prefers-reduced-motion: reduce) {
  .lp-pr-lauf, main.lp-pr.kommt-herein { transition: none; opacity: 1; }
}

/* ===================================================================
   WÄHREND DER PRÜFUNG: KEIN MENÜ, KEINE FUSSZEILE (§121)
   ⛔ Karsten, 21.08.2026: „bei der Lean Manager Prüfung muss das obere Menü und
      die Fußzeile weg sein. Es blendet erst wieder langsam ein bei der
      Zusammenfassung/Auswertung."
   =================================================================== */
body.lp-pr-ohne-rahmen .site-header,
body.lp-pr-ohne-rahmen .site-footer { display: none; }
/* ⛔ Der Abstand oben bleibt, wie er ist: Die Überschrift steht ohne Menü an
   genau derselben Stelle wie mit (Karsten, 21.08.2026). Sonst springt die Seite
   beim Übergang. */

/* Bei der Auswertung kommen beide langsam zurück. */
body.lp-pr-rahmen-kommt .site-header,
body.lp-pr-rahmen-kommt .site-footer { opacity: 0; animation: lp-pr-rahmen 3s ease forwards; }
@keyframes lp-pr-rahmen { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  body.lp-pr-rahmen-kommt .site-header,
  body.lp-pr-rahmen-kommt .site-footer { opacity: 1; animation: none; }
}

/* Bearbeitungszeit — neben dem Ergebnis und im Werdegang. */
.lp-pr-zahl__zeit { display: block; margin-top: 6px; font-size: 13px; color: var(--sem-grau-dunkel); }
.lp-pr-werdegang__zeit { color: var(--sem-grau-dunkel); }

/* „Prüfung pausieren" steht ganz links, davor nichts. Der Stand ist gespeichert;
   über die Intro-Seite geht es weiter. */
.lp-pr-pause { margin-right: 4px; }
.lp-pr-fuss .lp-pr-zurueck { margin-left: 0; }
@media (max-width: 560px) {
  .lp-pr-pause { order: 3; width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------
   STÖRUNGSMELDUNG IN DER PRÜFUNG (§386, 02.09.2026)

   ⛔ Im Normalfall sieht das NIEMAND. Der Streifen entsteht erst, wenn
   eine Antwort trotz dreier Versuche nicht beim Server ankommt — vorher
   gibt es das Element gar nicht. Am Aussehen der Prüfung ändert sich
   also nichts.

   ⚠ Kontrast gemessen: #8A1C13 auf #FBEAE7 = 7,99 : 1 (Norm: 4,5 : 1).
   ------------------------------------------------------------------ */
.lp-pr-stoerung {
  margin: 24px auto 0;
  max-width: 640px;
  padding: 14px 18px;
  border: 1px solid #E0B4AD;
  border-radius: 6px;
  background: #FBEAE7;
  color: #8A1C13;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}