/*Root: Box wie das Inhalt-Element; Stellschrauben als Variablen*/
.lncu-lernstrasse-block {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-sizing: border-box;
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
    padding: 1.6rem 2rem 2rem;
    border: 3px solid var(--bricks-color-white);
    border-radius: var(--lncu-lernstrasse-radius);
    background-color: var(--bricks-color-white);
    color: var(--bricks-color-blue-100);
    font-size: 1.5rem;
    line-height: 1.7;

    --lncu-lernstrasse-radius: 1rem;
    --lncu-lernstrasse-rahmen: 3px;
    --lncu-lernstrasse-laborbuch-breite: 30rem;
    --lncu-lernstrasse-laborbuch-hoehe: 60rem;
}

.lncu-lernstrasse-block :where(p, li) {
    font-size: inherit;
}

/*hidden gilt auch für Teile mit eigener display-Angabe (Knöpfe, Zusatz, Weiter im Abschluss)*/
.lncu-lernstrasse-block [hidden] {
    display: none !important;
}

/*Flex-Kinder dürfen schmaler werden als ihr Inhalt; sonst schiebt die wischbare Leiste alles über den Rand*/
.lncu-lernstrasse-kopf,
.lncu-lernstrasse-leiste,
.lncu-lernstrasse-mitte,
.lncu-lernstrasse-unten {
    min-width: 0;
}

.lncu-lernstrasse-block label {
    color: var(--bricks-color-blue-100);
}

.lncu-lernstrasse-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/*Fehler und Hinweise für Autorinnen und Autoren (Fehlerbox nach Skill 7.4)*/

/*Icons*/
.lncu-lernstrasse-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

/*Knöpfe: Funktionsknöpfe dezent (Stufe 500), Hauptknöpfe in -100 (Skill 7.5)*/
.lncu-lernstrasse-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 4rem;
    box-sizing: border-box;
    padding: 1rem 1.4rem;
    font: inherit;
    font-size: 1.5rem;
    line-height: 1.2;
    border: none;
    border-radius: var(--lncu-lernstrasse-radius);
    background-color: var(--bricks-color-blue-500);
    color: var(--bricks-color-blue-100);
}

.lncu-lernstrasse-knopf-primaer {
    background-color: var(--bricks-color-blue-100);
    color: var(--bricks-color-white);
}

.lncu-lernstrasse-knopf:disabled {
    opacity: 0.5;
    cursor: default;
}

.lncu-lernstrasse-knopf:disabled:hover {
    filter: none;
}

.lncu-lernstrasse-knopf:focus-visible,
.lncu-lernstrasse-lb-kopf:focus-visible,
.lncu-lernstrasse-lb-sprung:focus-visible {
    outline: 3px solid var(--bricks-color-blue-200);
    outline-offset: 2px;
}

.lncu-lernstrasse-knopf-symbol {
    width: 4rem;
    padding: 1rem;
}

/*Kopf: Titel, Laborbuch, Neu beginnen, Vollbild*/
.lncu-lernstrasse-kopf {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.lncu-lernstrasse-kopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/*Knöpfe im Kopf etwas dezenter (3.6rem); die Navigationsknöpfe unten bleiben bei 4rem*/
.lncu-lernstrasse-kopfzeile .lncu-lernstrasse-knopf {
    min-height: 3.6rem;
    padding: 0.8rem 1.2rem;
}

.lncu-lernstrasse-kopfzeile .lncu-lernstrasse-knopf-symbol {
    width: 3.6rem;
    padding: 0.8rem;
}

/*Symbole im Kopf so groß wie im Quiz (1.6rem); Neu beginnen und Vollbild sind gefüllte Formen aus dem Quiz*/
.lncu-lernstrasse-kopfzeile .lncu-lernstrasse-knopf svg {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
}

.lncu-lernstrasse-kopf-symbol {
    fill: currentColor;
}

/*Vollbild-Knopf: das Symbol wechselt mit dem Zustand*/
.lncu-lernstrasse-vollbild-aus,
.lncu-lernstrasse-block.is-fullscreen .lncu-lernstrasse-vollbild-ein {
    display: none;
}

.lncu-lernstrasse-block.is-fullscreen .lncu-lernstrasse-vollbild-aus {
    display: block;
}

.lncu-lernstrasse-titel {
    flex: 1 1 auto;
    margin: 0;
    font-size: 2.4rem;
    line-height: 1.3;
    color: inherit;
}

.lncu-lernstrasse-zahl {
    min-width: 2.2rem;
    box-sizing: border-box;
    padding: 0 0.6rem;
    border-radius: 1.1rem;
    background-color: var(--bricks-color-blue-100);
    color: var(--bricks-color-white);
    font-size: 1.3rem;
    line-height: 2.2rem;
    text-align: center;
}

.lncu-lernstrasse-laborbuch-umschalter[aria-expanded="true"] {
    background-color: var(--bricks-color-blue-100);
    color: var(--bricks-color-white);
}

.lncu-lernstrasse-laborbuch-umschalter[aria-expanded="true"] .lncu-lernstrasse-zahl {
    background-color: var(--bricks-color-white);
    color: var(--bricks-color-blue-100);
}

.lncu-lernstrasse-neu.is-confirming {
    width: auto;
    background-color: var(--bricks-color-red-100);
    color: var(--bricks-color-white);
}

.lncu-lernstrasse-einleitung > :first-child {
    margin-top: 0;
}

.lncu-lernstrasse-einleitung > :last-child {
    margin-bottom: 0;
}

.lncu-lernstrasse-status {
    margin: 0;
    font-size: 1.4rem;
}

.lncu-lernstrasse-status:empty {
    display: none;
}

/*Farbschemata der Räume (dieselben wie im Quiz, dazu „dunkel“): Leiste Stufe 200 (dunkel 100), Band Fläche 500 mit
  Text 100 (dunkel: blue-100 mit weiß); Rot, Gelb, Orange und Grau mit Text gray-100 (Skill 7.4: deren -100 ist keine Textfarbe);
  helle Fläche Stufe 600 für den Hover der Sprünge im Laborbuch*/
.lncu-lernstrasse-schema-keins {
    --lncu-lernstrasse-strahl-farbe: var(--bricks-color-gray-200);
    --lncu-lernstrasse-band-flaeche: var(--bricks-color-gray-500);
    --lncu-lernstrasse-band-text: var(--bricks-color-gray-100);
    --lncu-lernstrasse-flaeche-hell: var(--bricks-color-gray-600);
}

.lncu-lernstrasse-schema-blue {
    --lncu-lernstrasse-strahl-farbe: var(--bricks-color-blue-200);
    --lncu-lernstrasse-band-flaeche: var(--bricks-color-blue-500);
    --lncu-lernstrasse-band-text: var(--bricks-color-blue-100);
    --lncu-lernstrasse-flaeche-hell: var(--bricks-color-blue-600);
}

.lncu-lernstrasse-schema-dark {
    --lncu-lernstrasse-strahl-farbe: var(--bricks-color-blue-100);
    --lncu-lernstrasse-band-flaeche: var(--bricks-color-blue-100);
    --lncu-lernstrasse-band-text: var(--bricks-color-white);
    --lncu-lernstrasse-flaeche-hell: var(--bricks-color-blue-600);
}

html[data-brx-theme="dark"] .lncu-lernstrasse-schema-dark {
    --lncu-lernstrasse-strahl-farbe: var(--bricks-color-blue-300);
}

.lncu-lernstrasse-schema-violet {
    --lncu-lernstrasse-strahl-farbe: var(--bricks-color-violet-200);
    --lncu-lernstrasse-band-flaeche: var(--bricks-color-violet-500);
    --lncu-lernstrasse-band-text: var(--bricks-color-violet-100);
    --lncu-lernstrasse-flaeche-hell: var(--bricks-color-violet-600);
}

.lncu-lernstrasse-schema-green {
    --lncu-lernstrasse-strahl-farbe: var(--bricks-color-green-200);
    --lncu-lernstrasse-band-flaeche: var(--bricks-color-green-500);
    --lncu-lernstrasse-band-text: var(--bricks-color-green-100);
    --lncu-lernstrasse-flaeche-hell: var(--bricks-color-green-600);
}

.lncu-lernstrasse-schema-turkis {
    --lncu-lernstrasse-strahl-farbe: var(--bricks-color-turkis-200);
    --lncu-lernstrasse-band-flaeche: var(--bricks-color-turkis-500);
    --lncu-lernstrasse-band-text: var(--bricks-color-turkis-100);
    --lncu-lernstrasse-flaeche-hell: var(--bricks-color-turkis-600);
}

.lncu-lernstrasse-schema-red {
    --lncu-lernstrasse-strahl-farbe: var(--bricks-color-red-200);
    --lncu-lernstrasse-band-flaeche: var(--bricks-color-red-500);
    --lncu-lernstrasse-band-text: var(--bricks-color-gray-100);
    --lncu-lernstrasse-flaeche-hell: var(--bricks-color-red-600);
}

.lncu-lernstrasse-schema-yellow {
    --lncu-lernstrasse-strahl-farbe: var(--bricks-color-yellow-200);
    --lncu-lernstrasse-band-flaeche: var(--bricks-color-yellow-500);
    --lncu-lernstrasse-band-text: var(--bricks-color-gray-100);
    --lncu-lernstrasse-flaeche-hell: var(--bricks-color-yellow-600);
}

.lncu-lernstrasse-schema-orange {
    --lncu-lernstrasse-strahl-farbe: var(--bricks-color-akzent-200);
    --lncu-lernstrasse-band-flaeche: var(--bricks-color-akzent-500);
    --lncu-lernstrasse-band-text: var(--bricks-color-gray-100);
    --lncu-lernstrasse-flaeche-hell: var(--bricks-color-akzent-600);
}

.lncu-lernstrasse-schema-gray {
    --lncu-lernstrasse-strahl-farbe: var(--bricks-color-gray-200);
    --lncu-lernstrasse-band-flaeche: var(--bricks-color-gray-500);
    --lncu-lernstrasse-band-text: var(--bricks-color-gray-100);
    --lncu-lernstrasse-flaeche-hell: var(--bricks-color-gray-600);
}

/* ---------- Schrittleiste (Fortschrittsstrahl, Vorlage aus den Prototypen) ----------
   Je Knoten ein Eintrag: Abschnitt (flex: 1) mit Symbol und Nummer, Tür-Station oder Ziel (feste Breite),
   automatische Tür beim Raumwechsel ohne Rastpunkt. Zustände setzt der Rahmen, die Leiste liest sie:
     strahl-erreicht – Vollton, der Kreis darf hier einrasten
     strahl-aktiv    – aktueller Knoten; strahl-vorschau-hier – hier steht der Kreis (auch in der Vorschau)
     strahl-erledigt – Symbol dunkel; strahl-offen – Türblatt aufgeklappt
     strahl-zusatz   – freiwillig, schraffiert; strahl-anfang / strahl-ende – Raumanfang und -ende
   Blass = Raumfarbe zu 20 % gegen transparent gemischt: richtig auf jeder Fläche, im Dark Mode ohne eigene Regel. */
.lncu-lernstrasse-strahl {
    --lncu-lernstrasse-strahl-hoehe: 1rem;
    --lncu-lernstrasse-strahl-rundung: 0.3rem;
    --lncu-lernstrasse-strahl-knauf: 1.6rem;
    --lncu-lernstrasse-strahl-blass: 20%;
    --lncu-lernstrasse-strahl-gleiten: 0.15s;
    --lncu-lernstrasse-strahl-tuer-breite: 4.4rem;
    --lncu-lernstrasse-strahl-tuer-hoehe: 3.6rem;
    --lncu-lernstrasse-strahl-rand: 0.25rem;  /*Rand des Kreises und Rahmen um Tür und Fahne*/
    --lncu-lernstrasse-strahl-symbol: 1.6rem;
    width: 100%;
    padding-top: 3.3rem; /*Platz über der Leiste für die Beschriftung, knapp oberhalb der Tür*/
}

.lncu-lernstrasse-strahl-bahn {
    position: relative;
    touch-action: pan-y; /*waagerechtes Ziehen gehört dem Kreis, senkrechtes Wischen der Seite*/
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

.lncu-lernstrasse-strahl-zieht .lncu-lernstrasse-strahl-bahn {
    cursor: grabbing;
}

.lncu-lernstrasse-strahl-spur {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lncu-lernstrasse-strahl-station,
.lncu-lernstrasse-strahl-autotuer {
    position: relative;
    margin: 0;
    padding: 0;
}

.lncu-lernstrasse-strahl-abschnitt {
    flex: 1 1 0;
    min-width: 0;
}

.lncu-lernstrasse-strahl-tuer,
.lncu-lernstrasse-strahl-ziel,
.lncu-lernstrasse-strahl-autotuer {
    flex: 0 0 var(--lncu-lernstrasse-strahl-tuer-breite);
}

/*Feld je Knoten: Abschnitt, Symbol und Nummer*/
.lncu-lernstrasse-strahl-feld {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 4.4rem;
    padding-top: calc(var(--lncu-lernstrasse-strahl-hoehe) + 0.4rem);
}

.lncu-lernstrasse-strahl-abschnitt > .lncu-lernstrasse-strahl-feld::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--lncu-lernstrasse-strahl-hoehe);
    background-color: color-mix(in srgb, var(--lncu-lernstrasse-strahl-farbe) var(--lncu-lernstrasse-strahl-blass), transparent);
}

.lncu-lernstrasse-strahl-erreicht > .lncu-lernstrasse-strahl-feld::before {
    background-color: var(--lncu-lernstrasse-strahl-farbe);
}

.lncu-lernstrasse-strahl-anfang > .lncu-lernstrasse-strahl-feld::before {
    border-top-left-radius: var(--lncu-lernstrasse-strahl-rundung);
    border-bottom-left-radius: var(--lncu-lernstrasse-strahl-rundung);
}

.lncu-lernstrasse-strahl-ende > .lncu-lernstrasse-strahl-feld::before {
    border-top-right-radius: var(--lncu-lernstrasse-strahl-rundung);
    border-bottom-right-radius: var(--lncu-lernstrasse-strahl-rundung);
}

/*Zusatz: Schraffur – blass mit Streifen in der Raumfarbe, erreicht mit hellen Streifen*/
.lncu-lernstrasse-strahl-zusatz > .lncu-lernstrasse-strahl-feld::before {
    background-image: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--lncu-lernstrasse-strahl-farbe) 45%, transparent) 0 0.2rem,
        transparent 0.2rem 0.5rem);
}

.lncu-lernstrasse-strahl-zusatz.lncu-lernstrasse-strahl-erreicht > .lncu-lernstrasse-strahl-feld::before {
    background-image: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--bricks-color-white) 45%, transparent) 0 0.2rem,
        transparent 0.2rem 0.5rem);
}

/*Symbol unter dem Abschnitt: grau, solange offen, dunkel, sobald erledigt*/
.lncu-lernstrasse-strahl-symbol {
    display: flex;
    color: var(--bricks-color-gray-200);
}

.lncu-lernstrasse-strahl-symbol .lncu-lernstrasse-icon {
    width: var(--lncu-lernstrasse-strahl-symbol);
    height: var(--lncu-lernstrasse-strahl-symbol);
    stroke-width: 2.2;
}

.lncu-lernstrasse-strahl-erledigt .lncu-lernstrasse-strahl-symbol {
    color: var(--bricks-color-gray-100);
}

.lncu-lernstrasse-strahl-nr {
    font-size: 1.2rem;
    line-height: 1.6rem;
}

.lncu-lernstrasse-strahl-vorschau-hier .lncu-lernstrasse-strahl-nr {
    font-size: 1.4rem;
    font-weight: 700;
}

/*Tür (verbindlich wie in der Skizze): Raum dahinter in der Farbe des nächsten Raums, Türblatt, fester Rahmen*/
.lncu-lernstrasse-tuer {
    --lncu-lernstrasse-tuer-linie: var(--bricks-color-gray-200);
    position: absolute;
    top: calc(var(--lncu-lernstrasse-strahl-hoehe) / 2 - var(--lncu-lernstrasse-strahl-tuer-hoehe) / 2); /*mittig auf der Leiste*/
    left: 50%;
    transform: translateX(-50%);
    width: 2.8rem;
    height: var(--lncu-lernstrasse-strahl-tuer-hoehe);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--lncu-lernstrasse-strahl-rand) solid transparent;
    border-radius: 0.6rem;
    background: var(--bricks-color-white);
}

.lncu-lernstrasse-tuer-bild {
    width: 2.2rem;
    height: 2.8rem;
}

/*hinten: der Raum hinter der Tür*/
.lncu-lernstrasse-tuer-raum {
    fill: var(--lncu-lernstrasse-strahl-farbe);
}

/*Mitte: Türblatt mit Klinke, klappt um seine eigene linke Kante auf*/
.lncu-lernstrasse-tuer-blatt {
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(1);
    transition: transform 0.6s ease;
}

.lncu-lernstrasse-tuer-blatt rect {
    fill: var(--bricks-color-white);
    stroke: var(--lncu-lernstrasse-tuer-linie);
    stroke-width: 2;
}

.lncu-lernstrasse-tuer-blatt circle {
    fill: var(--lncu-lernstrasse-tuer-linie);
}

/*vorn: fester Rahmen*/
.lncu-lernstrasse-tuer-rahmen {
    fill: none;
    stroke: var(--lncu-lernstrasse-tuer-linie);
    stroke-width: 2;
}

/*Ziel: Fahne im selben Kasten wie die Tür*/
.lncu-lernstrasse-ziel {
    color: var(--lncu-lernstrasse-tuer-linie);
}

.lncu-lernstrasse-ziel-bild {
    width: 2.2rem;
    height: 2.6rem;
}

/*erreicht: Linien dunkel*/
.lncu-lernstrasse-strahl-erreicht .lncu-lernstrasse-tuer {
    --lncu-lernstrasse-tuer-linie: var(--bricks-color-gray-100);
}

/*offen: Tür-Station erreicht und erledigt bzw. bei der automatischen Tür alles davor erledigt*/
.lncu-lernstrasse-strahl-offen .lncu-lernstrasse-tuer-blatt {
    transform: scaleX(0.3);
}

/*aktuell: dunkler Rahmen statt Kreis*/
.lncu-lernstrasse-strahl-vorschau-hier .lncu-lernstrasse-tuer {
    border-color: var(--bricks-color-gray-100);
}

/*Der Kreis; seine Lage setzt das Skript in --lncu-lernstrasse-strahl-knauf-x*/
.lncu-lernstrasse-strahl-knauf {
    position: absolute;
    z-index: 1;
    top: calc(var(--lncu-lernstrasse-strahl-hoehe) / 2);
    left: var(--lncu-lernstrasse-strahl-knauf-x, 50%);
    width: var(--lncu-lernstrasse-strahl-knauf);
    height: var(--lncu-lernstrasse-strahl-knauf);
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    border: var(--lncu-lernstrasse-strahl-rand) solid var(--bricks-color-gray-100);
    border-radius: 50%;
    background: var(--bricks-color-white);
    pointer-events: none; /*Zeigerereignisse gehen an die Bahn, die das Ziehen auswertet*/
}

/*Puls wie bei den Hotspots (Farbe akzent-100): der Kreis pulsiert rund, die Tür in der Form ihres Rahmens (Kreis ist dort verborgen)*/
.lncu-lernstrasse-strahl:not(.lncu-lernstrasse-strahl-zieht) .lncu-lernstrasse-strahl-knauf,
.lncu-lernstrasse-strahl:not(.lncu-lernstrasse-strahl-zieht) .lncu-lernstrasse-strahl-vorschau-hier .lncu-lernstrasse-tuer {
    animation: lncu-lernstrasse-puls 2s infinite 0.5s;
}

@keyframes lncu-lernstrasse-puls {
    0%   { box-shadow: 0 0 0 0 var(--bricks-color-akzent-100); }
    70%  { box-shadow: 0 0 0 1rem color-mix(in srgb, var(--bricks-color-akzent-100) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bricks-color-akzent-100) 0%, transparent); }
}

.lncu-lernstrasse-strahl-ohne-kreis .lncu-lernstrasse-strahl-knauf {
    visibility: hidden;
}
.lncu-lernstrasse-strahl-gleitet .lncu-lernstrasse-strahl-knauf {
    transition: left var(--lncu-lernstrasse-strahl-gleiten) ease-out;
}

.lncu-lernstrasse-strahl-zieht .lncu-lernstrasse-strahl-knauf {
    transform: translate(-50%, -50%) scale(1.15);
}

/*Der Regler: ein echtes input type="range" für Tastatur und Vorleseprogramme; unsichtbar, der Fokus erscheint am Kreis*/
.lncu-lernstrasse-strahl-regler {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.1rem;
    height: 0.1rem;
    margin: -0.1rem;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
}

.lncu-lernstrasse-strahl-regler:focus-visible ~ .lncu-lernstrasse-strahl-knauf {
    outline: 0.3rem solid var(--bricks-color-blue-200);
    outline-offset: 0.2rem;
}

/*Beschriftung über dem Kreis: in Ruhe der Titel des aktuellen Knotens, in der Vorschau kursiv;
  oberhalb der Tür, damit sie deren Rahmen nicht berührt*/
.lncu-lernstrasse-strahl-titel,
.lncu-lernstrasse-strahl-anzeige {
    position: absolute;
    z-index: 2;
    top: calc(var(--lncu-lernstrasse-strahl-hoehe) / 2 - var(--lncu-lernstrasse-strahl-tuer-hoehe) / 2 + 0.1rem);
    font-size: 1.4rem;
    line-height: 1.8rem;
    white-space: nowrap;
}

.lncu-lernstrasse-strahl-titel {
    left: 50%;
    transform: translate(-50%, -100%);
    font-style: italic;
    visibility: hidden;
}

.lncu-lernstrasse-strahl-text-links .lncu-lernstrasse-strahl-titel {
    left: 0;
    transform: translate(0, -100%);
}

.lncu-lernstrasse-strahl-text-rechts .lncu-lernstrasse-strahl-titel {
    left: auto;
    right: 0;
    transform: translate(0, -100%);
}

.lncu-lernstrasse-strahl-anzeige {
    left: var(--lncu-lernstrasse-strahl-anzeige-x, 0);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(-100%);
}

.lncu-lernstrasse-strahl-vorschau {
    font-style: italic;
}

.lncu-lernstrasse-strahl-gleitet .lncu-lernstrasse-strahl-anzeige {
    transition: left var(--lncu-lernstrasse-strahl-gleiten) ease-out;
}

/*Vorschau unter dem Mauszeiger – nur wo es einen gibt; Rückmeldung über filter: brightness()*/
@media (hover: hover) {
    .lncu-lernstrasse-strahl:not(.lncu-lernstrasse-strahl-zieht) .lncu-lernstrasse-strahl-station:not(.lncu-lernstrasse-strahl-vorschau-hier) > .lncu-lernstrasse-strahl-feld:hover .lncu-lernstrasse-strahl-titel {
        visibility: visible;
    }

    .lncu-lernstrasse-strahl:not(.lncu-lernstrasse-strahl-zieht) .lncu-lernstrasse-strahl-bahn:has(.lncu-lernstrasse-strahl-station:not(.lncu-lernstrasse-strahl-vorschau-hier) > .lncu-lernstrasse-strahl-feld:hover) .lncu-lernstrasse-strahl-anzeige {
        visibility: hidden;
    }

    .lncu-lernstrasse-strahl:not(.lncu-lernstrasse-strahl-zieht) .lncu-lernstrasse-strahl-erreicht > .lncu-lernstrasse-strahl-feld:hover::before {
        filter: brightness(0.85);
    }

    html[data-brx-theme="dark"] .lncu-lernstrasse-strahl:not(.lncu-lernstrasse-strahl-zieht) .lncu-lernstrasse-strahl-erreicht > .lncu-lernstrasse-strahl-feld:hover::before {
        filter: brightness(1.25);
    }
}

/*Ältere Browser ohne color-mix() (Safari vor 16.2): Blässe über die Deckkraft des Abschnitts*/
@supports not (color: color-mix(in srgb, currentColor 20%, transparent)) {
    .lncu-lernstrasse-strahl-abschnitt > .lncu-lernstrasse-strahl-feld::before {
        background-color: var(--lncu-lernstrasse-strahl-farbe);
        opacity: 0.2;
    }

    .lncu-lernstrasse-strahl-erreicht > .lncu-lernstrasse-strahl-feld::before {
        opacity: 1;
    }

    .lncu-lernstrasse-strahl-zusatz > .lncu-lernstrasse-strahl-feld::before {
        background-image: repeating-linear-gradient(45deg, var(--bricks-color-white) 0 0.1rem, transparent 0.1rem 0.5rem);
    }
}

/*Kontrastmodus: Systemfarben statt Palette*/
@media (forced-colors: active) {
    .lncu-lernstrasse-strahl-abschnitt > .lncu-lernstrasse-strahl-feld::before {
        background: Canvas;
        border: 0.1rem solid CanvasText;
    }

    .lncu-lernstrasse-strahl-erreicht > .lncu-lernstrasse-strahl-feld::before {
        background: Highlight;
    }

    .lncu-lernstrasse-strahl-knauf {
        background: Canvas;
        border-color: CanvasText;
    }
}

/*Beschriftung in fester Zeile unter der Leiste: nur auf dem Smartphone*/
.lncu-lernstrasse-leiste-zeile {
    display: none;
    margin: 0;
    text-align: center;
    font-size: 1.4rem;
}

/* ---------- Mitte: aktueller Knoten mit Band, daneben das Laborbuch ---------- */
.lncu-lernstrasse-mitte {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.lncu-lernstrasse-buehne {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--lncu-lernstrasse-rahmen) solid var(--lncu-lernstrasse-strahl-farbe, var(--bricks-color-blue-400));
    border-radius: var(--lncu-lernstrasse-radius);
}

.lncu-lernstrasse-band {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.2rem;
    padding: 1rem 2rem;
    background-color: var(--lncu-lernstrasse-band-flaeche, var(--bricks-color-blue-500));
    color: var(--lncu-lernstrasse-band-text, var(--bricks-color-blue-100));
}

/*Symbol des Knotens vor dem Titel, dasselbe wie in der Schrittleiste*/
.lncu-lernstrasse-band-symbol {
    display: flex;
    align-self: center;
}

.lncu-lernstrasse-band-symbol:empty {
    display: none;
}

.lncu-lernstrasse-band-raum {
    font-size: 1.4rem;
}

.lncu-lernstrasse-band-raum:empty {
    display: none;
}

.lncu-lernstrasse-band-titel {
    margin: 0;
    font-size: 2rem;
    line-height: 1.4;
    color: inherit;
}

/*Die Überschrift ist nur Ziel des Fokus nach einem Wechsel (für Vorleseprogramme), nicht bedienbar: kein Fokusrahmen*/
.lncu-lernstrasse-band-titel:focus,
.lncu-lernstrasse-band-titel:focus-visible {
    outline: none;
}

/*„Zusatz“ rechtsbündig im Band; Titel und Raum bleiben links*/
.lncu-lernstrasse-band-zusatz {
    margin-left: auto;
    padding: 0 0.8rem;
    border: 1px solid currentColor;
    border-radius: var(--lncu-lernstrasse-radius);
    font-size: 1.3rem;
}

.lncu-lernstrasse-kinder,
.lncu-lernstrasse-abschluss {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.6rem 2rem 2rem;
}

/*Frontend: nur der aktuelle Knoten ist sichtbar; ohne Skript stehen alle untereinander*/
.lncu-lernstrasse-block.is-ready .lncu-lernstrasse-kinder > :not(.is-current) {
    display: none !important;
}

.lncu-lernstrasse-block.is-ready .lncu-lernstrasse-kinder:not(:has(> .is-current, > .is-foreign)),
.lncu-lernstrasse-block:not(.is-builder) .lncu-lernstrasse-abschluss:not(.is-current),
.lncu-lernstrasse-block.is-builder.is-ready .lncu-lernstrasse-abschluss:not(.is-current) {
    display: none;
}

/*Ein Quiz als direktes Kind: Titel und Rahmen kommen vom Band der Lernstraße*/
.lncu-lernstrasse-kinder > .lncu-quiz-block {
    width: 100%;
    padding: 0;
    border: none;
}

/*Ein Quiz als Knoten braucht keinen eigenen Kopf: Titel und Symbol stehen im Band, Vollbild und Neu beginnen gibt die Lernstraße*/
.lncu-lernstrasse-kinder > .lncu-quiz-block > .lncu-quiz-header {
    display: none;
}

/*Quiz in einer Station: Vollbild und Neustart gibt die Lernstraße; wiederholen lässt sich das Quiz an seinem Ende*/
.lncu-lernstrasse-station-block .lncu-quiz-header .lncu-quiz-fullscreen,
.lncu-lernstrasse-station-block .lncu-quiz-header .lncu-quiz-restart {
    display: none;
}

/*Ohne Rahmen ringsum ist die Fortschrittsleiste rundum gerundet, wie im Inhalt-Element*/
.lncu-lernstrasse-kinder > .lncu-quiz-block > .lncu-quiz-progress-bar {
    border-radius: var(--lncu-quiz-radius);
}

/* ---------- Abschluss: Vergleich und Export ---------- */
.lncu-lernstrasse-abschluss-text {
    margin: 0;
}

.lncu-lernstrasse-aufdecken {
    align-self: flex-start;
}

.lncu-lernstrasse-vergleich {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.lncu-lernstrasse-vergleich-zeile {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-left: 1rem;
    border-left: 0.4rem solid var(--lncu-lernstrasse-strahl-farbe);
}

.lncu-lernstrasse-vergleich-titel {
    margin: 0;
    font-size: 1.6rem;
    color: inherit;
}

.lncu-lernstrasse-vergleich-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    gap: 1rem;
}

.lncu-lernstrasse-vergleich-spalte {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
    border-radius: var(--lncu-lernstrasse-radius);
    background-color: var(--bricks-color-blue-600);
}

.lncu-lernstrasse-vergleich-muster {
    background-color: var(--bricks-color-green-600);
}

.lncu-lernstrasse-vergleich-verdeckt,
.lncu-lernstrasse-vergleich-leer {
    margin: 0;
    font-style: italic;
}

.lncu-lernstrasse-export {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--bricks-color-blue-500);
}

.lncu-lernstrasse-feld {
    font-weight: 700;
}

.lncu-lernstrasse-name {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    border: var(--lncu-lernstrasse-rahmen) solid var(--bricks-color-blue-400);
    border-radius: var(--lncu-lernstrasse-radius);
    background-color: var(--bricks-color-white);
    color: var(--bricks-color-blue-100);
}

.lncu-lernstrasse-name:focus-visible {
    outline: 3px solid var(--bricks-color-blue-200);
    outline-offset: 1px;
}

/*Beide Knöpfe teilen sich die Breite; auf schmalen Bildschirmen stehen sie untereinander*/
.lncu-lernstrasse-export-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.lncu-lernstrasse-export-knoepfe > .lncu-lernstrasse-knopf {
    flex: 1 1 22rem;
}

.lncu-lernstrasse-export-status {
    margin: 0;
    font-size: 1.4rem;
}

/* ---------- Laborbuch: Spalte rechts (ab 1024px), sonst Fläche über dem Inhalt ---------- */
.lncu-lernstrasse-laborbuch {
    flex: 0 0 var(--lncu-lernstrasse-laborbuch-breite);
    box-sizing: border-box;
    max-height: max(var(--lncu-lernstrasse-laborbuch-hoehe), var(--lncu-lernstrasse-buehne-hoehe, 0px)); /*mindestens 60rem, neben einer längeren Station so hoch wie sie (Höhe misst das Skript)*/
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 0.4rem; /*Platz für Fokusrahmen, die overflow sonst abschneidet; ohne Trennlinie zur Mitte, den Abstand hält das gap der Mitte*/
}

.lncu-lernstrasse-laborbuch:focus {
    outline: none;
}

.lncu-lernstrasse-block.is-labbook-closed .lncu-lernstrasse-laborbuch {
    display: none;
}

.lncu-lernstrasse-laborbuch-kopf {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lncu-lernstrasse-laborbuch-titel {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    font-size: 1.8rem;
    color: inherit;
}

.lncu-lernstrasse-laborbuch-schliessen,
.lncu-lernstrasse-laborbuch-oeffnen {
    display: none;
}

.lncu-lernstrasse-laborbuch-leer {
    margin: 0;
    font-size: 1.4rem;
}

.lncu-lernstrasse-laborbuch-liste,
.lncu-lernstrasse-lb-liste {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*Karte je Station mit Farbstreifen des Raums*/
.lncu-lernstrasse-lb-karte {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.2rem 0 0.2rem 1rem;
    border-left: 0.4rem solid var(--lncu-lernstrasse-strahl-farbe);
    font-size: 1.4rem;
    line-height: 1.5;
}

.lncu-lernstrasse-lb-kopf {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 700;
    text-align: left;
    color: inherit;
}

/*Sprünge im Laborbuch: Kartentitel, „Vermutung“, „Kontrollfragen“; beim Überfahren eine helle Fläche in der Farbe des Raums.
  Mit button davor, damit .lncu-lernstrasse-lb-marke (margin: 0) den Ausgleich nicht überschreibt*/
button.lncu-lernstrasse-lb-kopf,
button.lncu-lernstrasse-lb-sprung {
    align-self: flex-start; /*nur so breit wie der Text*/
    margin: 0 -0.6rem; /*Text bündig mit den übrigen Zeilen, die Fläche ragt links und rechts heraus*/
    padding: 0.2rem 0.6rem;
    border: none;
    border-radius: 0.6rem;
    background: none;
    font: inherit;
    font-weight: 700;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

button.lncu-lernstrasse-lb-kopf:hover,
button.lncu-lernstrasse-lb-sprung:hover {
    background-color: var(--lncu-lernstrasse-flaeche-hell);
}

.lncu-lernstrasse-lb-zeile,
.lncu-lernstrasse-lb-auftrag,
.lncu-lernstrasse-lb-text,
.lncu-lernstrasse-lb-marke,
.lncu-lernstrasse-lb-vermerke {
    margin: 0;
}

.lncu-lernstrasse-lb-auftrag {
    font-style: italic;
}

.lncu-lernstrasse-lb-text {
    white-space: pre-wrap;
}

.lncu-lernstrasse-lb-marke {
    font-weight: 700;
}

.lncu-lernstrasse-lb-daten {
    margin: 0;
    padding-left: 1.8rem;
}

.lncu-lernstrasse-lb-bilder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.lncu-lernstrasse-lb-bild {
    margin: 0;
    max-width: 10rem;
    font-size: 1.2rem;
}

.lncu-lernstrasse-lb-bilddatei {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.6rem;
}

/*Bilder aus Apps (z. B. entwickelter Film): größer als die Abbildungen der Bildauswahl, höchstens so breit wie die Spalte*/
.lncu-lernstrasse-lb-appbild {
    width: 100%;
    max-width: 32rem;
    margin: 0;
}

.lncu-lernstrasse-lb-appbild figcaption {
    margin-top: 0.4rem;
    font-size: 1.2rem;
}

.lncu-lernstrasse-lb-vermerke {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

.lncu-lernstrasse-lb-vermerk {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.3rem;
    font-style: italic;
}

.lncu-lernstrasse-lb-vermerk .lncu-lernstrasse-icon {
    width: 1.4rem;
    height: 1.4rem;
}

/* ---------- Unten: Zurück, was noch fehlt, Zusatz, Weiter ---------- */
.lncu-lernstrasse-unten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--bricks-color-blue-500);
}

/*Knöpfe behalten ihre Breite; „Noch offen“ nimmt den Rest und bricht selbst um, reicht er nicht, rutscht „Weiter“ als Ganzes in die nächste Zeile*/
.lncu-lernstrasse-zurueck,
.lncu-lernstrasse-zusatz,
.lncu-lernstrasse-weiter {
    flex-shrink: 0;
}

.lncu-lernstrasse-offen {
    flex: 1 1 0;
    min-width: 12rem;
    margin: 0;
    text-align: center;
    font-size: 1.4rem;
}

/*Erledigt mit Haken: „Die Tür ist offen.“ bzw. „Station abgeschlossen.“*/
.lncu-lernstrasse-offen.is-done {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    color: var(--bricks-color-green-100);
}

.lncu-lernstrasse-offen.is-done .lncu-lernstrasse-icon {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
}

.lncu-lernstrasse-zusatz {
    outline: 2px dashed var(--bricks-color-blue-100);
    outline-offset: -2px;
}

.lncu-lernstrasse-weiter .lncu-lernstrasse-schloss {
    display: none;
}

.lncu-lernstrasse-weiter.is-locked .lncu-lernstrasse-schloss {
    display: block;
}

/* ---------- Quelle ---------- */
.lncu-lernstrasse-quelle {
    margin: 0;
    font-size: 1.2rem;
}

/* ---------- Vollbild: Kopf und unterer Bereich bleiben stehen, Inhalt und Laborbuch scrollen getrennt ---------- */
.lncu-lernstrasse-block.is-fullscreen {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
}

/*Ersatz ohne Fullscreen API (iPhone): fest über dem Fenster; die Seite dahinter scrollt nicht*/
.lncu-lernstrasse-block.is-fullscreen-fallback {
    position: fixed;
    inset: 0;
    z-index: 10000;
}

html.lncu-lernstrasse-ohne-scroll {
    overflow: hidden;
}

.lncu-lernstrasse-block.is-fullscreen .lncu-lernstrasse-kopf,
.lncu-lernstrasse-block.is-fullscreen .lncu-lernstrasse-unten {
    flex: 0 0 auto;
}

/*Die Mitte füllt den Rest der Höhe; Bühne und Laborbuch scrollen jedes für sich*/
.lncu-lernstrasse-block.is-fullscreen .lncu-lernstrasse-mitte {
    flex: 1 1 0;
    min-height: 0;
    align-items: stretch;
}

.lncu-lernstrasse-block.is-fullscreen .lncu-lernstrasse-buehne {
    overflow-y: auto;
}

/*Das Band bleibt oben stehen, während der Inhalt darunter scrollt*/
.lncu-lernstrasse-block.is-fullscreen .lncu-lernstrasse-band {
    position: sticky;
    top: 0;
    z-index: 1;
}

.lncu-lernstrasse-block.is-fullscreen .lncu-lernstrasse-laborbuch {
    max-height: none;
    overflow-y: auto;
}

/* ---------- Builder: wie im Frontend ein Knoten nach dem anderen; Zurück, Weiter und Leiste wechseln ohne Sperre ---------- */

/*Kopf-Knöpfe und Laborbuch ohne Bedienung; nur der Knopf, der die Laborbuch-Spalte zuklappt, bleibt bedienbar*/
.lncu-lernstrasse-block.is-builder .lncu-lernstrasse-kopfzeile .lncu-lernstrasse-knopf:not(.lncu-lernstrasse-laborbuch-umschalter),
.lncu-lernstrasse-block.is-builder .lncu-lernstrasse-laborbuch,
.lncu-lernstrasse-block.is-builder .lncu-lernstrasse-laborbuch-oeffnen {
    pointer-events: none;
}

/*Elemente, die nicht in die Lernstraße gehören, bleiben im Builder sichtbar (zulässige Kinder erklärt die Info in den Einstellungen); im Frontend sind sie ausgeblendet*/
.lncu-lernstrasse-block.is-builder.is-ready .lncu-lernstrasse-kinder > .is-foreign {
    display: block !important;
}

/*Placeholder im Stil von Bricks (nur im Builder vorhanden): ersetzen den Inhalt eines falsch platzierten Elements; im Frontend verschwindet es*/
.lncu-lernstrasse-block > .lncu-lernstrasse-platzhalter {
    display: none;
}

/*Lernstraße in einer Lernstraße*/
.lncu-lernstrasse-block .lncu-lernstrasse-block > :not(.lncu-lernstrasse-platzhalter) {
    display: none !important;
}

.lncu-lernstrasse-block .lncu-lernstrasse-block > .lncu-lernstrasse-platzhalter {
    display: block;
}

.lncu-lernstrasse-block .lncu-lernstrasse-block:not(:has(> .lncu-lernstrasse-platzhalter)) {
    display: none !important;
}

/*Was das Builder-Skript findet (Vermutung ohne Station danach, Kontrollfragen ohne Station davor, unbekannter Raum): Placeholder statt Inhalt*/
.lncu-lernstrasse-kinder > .is-replaced > :not(.lncu-lernstrasse-platzhalter.is-active) {
    display: none !important;
}

.lncu-lernstrasse-kinder > .is-replaced > .lncu-lernstrasse-platzhalter.is-active {
    display: block;
}

/*Direkt im Inhaltsbereich der Seite (#brx-content): eingerückt wie die Inhalte der Sektionen (Marker 4rem + Abstand 1rem), wie Hinweis und Tabs
  des Haupt-Plugins. Die Wurzel ist selbst die Box, deshalb margin statt padding; im Vollbild nicht*/
#brx-content > .lncu-lernstrasse-block:not(.is-fullscreen):not(.is-fullscreen-fallback) {
    align-self: flex-start;
    width: calc(1100px - 5rem);
    max-width: none;
    margin: 0 0 1rem calc((100% - 1100px) / 2 + 5rem);
}

@media (max-width: 1100px) {
    #brx-content > .lncu-lernstrasse-block:not(.is-fullscreen):not(.is-fullscreen-fallback) {
        width: calc(100% - 7rem);
        margin: 0 1rem 1rem 6rem;
    }
}

@media (max-width: 478px) {
    #brx-content > .lncu-lernstrasse-block:not(.is-fullscreen):not(.is-fullscreen-fallback) {
        width: calc(100% - 2rem);
        margin: 0 1rem 1rem;
    }
}

/*Blöcke von Bricks in der Lernstraße: 1rem Abstand zwischen Zeilen und Spalten; ein eigener Abstand am Block (ID-Selektor) geht vor*/
.lncu-lernstrasse .brxe-block {
    gap: 1rem;
}

/* ---------- Name der Lernenden im Laborbuch ---------- */
.lncu-lernstrasse-name-abfrage {
    display: flex;
    gap: 0.8rem;
    align-items: stretch;
}

.lncu-lernstrasse-name-abfrage[hidden] {
    display: none;
}

.lncu-lernstrasse-name-abfrage .lncu-lernstrasse-name {
    flex: 1 1 auto;
    min-width: 0;
}

.lncu-lernstrasse-name-knopf {
    flex: 0 0 auto;
    width: 4rem;
    padding: 0.8rem;
}

.lncu-lernstrasse-name-knopf svg {
    width: 1.8rem;
    height: 1.8rem;
}

.lncu-lernstrasse-name-fehler {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--bricks-color-red-100);
}

.lncu-lernstrasse-name-fehler:empty {
    display: none;
}

.lncu-lernstrasse-laborbuch-name {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.lncu-lernstrasse-laborbuch-name[hidden] {
    display: none;
}

/* ---------- Menü „Weitere Funktionen“ (Sicherung) ---------- */
.lncu-lernstrasse-menue {
    position: relative;
}

.lncu-lernstrasse-menue-liste {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 16rem;
    padding: 0.4rem;
    border-radius: var(--lncu-lernstrasse-radius);
    background-color: var(--bricks-color-white);
    box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.18);
}

.lncu-lernstrasse-menue-liste[hidden] {
    display: none;
}

.lncu-lernstrasse-menue-punkt {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1.2rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--bricks-color-blue-100);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lncu-lernstrasse-menue-punkt:hover,
.lncu-lernstrasse-menue-punkt:focus-visible {
    background-color: var(--bricks-color-blue-600);
}

.lncu-lernstrasse-menue-punkt:focus-visible {
    outline: 3px solid var(--bricks-color-blue-200);
    outline-offset: -2px;
}

.lncu-lernstrasse-menue-punkt svg {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
}

/*Neustarten und Vollbild im Menü nur auf dem Smartphone (Media Query unten); die Rückfrage „Wirklich?“ rot mit weißer Schrift wie am Kopf-Knopf, auch beim Überfahren*/
.lncu-lernstrasse-menue-neu,
.lncu-lernstrasse-menue-vollbild {
    display: none;
}

.lncu-lernstrasse-menue-punkt.lncu-lernstrasse-menue-neu.is-confirming {
    background-color: var(--bricks-color-red-100);
    color: var(--bricks-color-white);
}

/* ---------- Druck: eigener Druckbereich für das Laborbuch ---------- */
.lncu-lernstrasse-druckbereich {
    display: none;
}

/* ---------- Media Queries ---------- */

/*Schmaler als 1024px: Laborbuch als Fläche über dem Inhalt, geöffnet über das Symbol unten links*/
@media screen and (max-width: 1023px) {
    /*Ein langer Titel bricht selbst um, statt die Knöpfe einzeln in die nächste Zeile zu schieben*/
    .lncu-lernstrasse-titel {
        flex: 1 1 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .lncu-lernstrasse-laborbuch {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: none;
        max-height: none;
        padding: 1.6rem;
        border-left: none;
        border-top: 0.4rem solid var(--bricks-color-blue-200);
        background-color: var(--bricks-color-white);
    }

    .lncu-lernstrasse-block.is-labbook-open .lncu-lernstrasse-laborbuch,
    .lncu-lernstrasse-block.is-labbook-open.is-labbook-closed .lncu-lernstrasse-laborbuch {
        display: flex;
    }

    .lncu-lernstrasse-laborbuch-schliessen,
    .lncu-lernstrasse-laborbuch-oeffnen {
        display: inline-flex;
    }

    .lncu-lernstrasse-laborbuch-umschalter {
        display: none;
    }

    .lncu-lernstrasse-laborbuch-oeffnen {
        position: relative;
        flex: 0 0 auto;
    }

    .lncu-lernstrasse-laborbuch-oeffnen .lncu-lernstrasse-zahl {
        position: absolute;
        top: -0.8rem;
        right: -0.8rem;
    }
}

/*Smartphone (bis 767px): Leiste wischbar mit Mindestbreiten, Beschriftung in fester Zeile, unten zweizeilig*/
@media screen and (max-width: 767px) {
    .lncu-lernstrasse-block {
        padding: 1.2rem;
        gap: 1rem;
    }

    .lncu-lernstrasse-titel {
        font-size: 1.8rem;
    }

    /*Neu beginnen und Vollbild wandern ins Menü; im Kopf bleibt neben dem Titel nur der Menü-Knopf*/
    .lncu-lernstrasse-kopfzeile > .lncu-lernstrasse-neu,
    .lncu-lernstrasse-kopfzeile > .lncu-lernstrasse-vollbild {
        display: none;
    }

    .lncu-lernstrasse-menue-neu,
    .lncu-lernstrasse-menue-vollbild {
        display: flex;
    }

    .lncu-lernstrasse-leiste {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        --lncu-lernstrasse-strahl-symbol: 2rem;
    }

    .lncu-lernstrasse-strahl {
        padding-top: 1.6rem;
    }

    .lncu-lernstrasse-strahl-bahn {
        width: max-content;
        min-width: 100%;
        touch-action: pan-x pan-y; /*die Leiste lässt sich waagerecht wischen; Tippen wählt*/
    }

    .lncu-lernstrasse-strahl-abschnitt {
        flex: 1 0 5.6rem;
    }

    /*Beschriftung über der Leiste entfällt, auch beim Überfahren: Die wischbare Leiste schneidet sie ab, den Titel zeigt die feste Zeile*/
    .lncu-lernstrasse-strahl-anzeige,
    .lncu-lernstrasse-strahl-titel {
        display: none;
    }

    .lncu-lernstrasse-leiste-zeile {
        display: block;
    }

    .lncu-lernstrasse-band,
    .lncu-lernstrasse-kinder,
    .lncu-lernstrasse-abschluss {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .lncu-lernstrasse-band-raum {
        display: none;
    }

    .lncu-lernstrasse-unten {
        flex-wrap: wrap;
        gap: 0.8rem;
    }

    .lncu-lernstrasse-offen {
        flex: 1 0 100%;
        order: -1;
    }

    .lncu-lernstrasse-zusatz {
        flex: 1 0 100%;
        order: 0;
    }

    .lncu-lernstrasse-zurueck {
        flex: 1 1 0;
    }

    .lncu-lernstrasse-weiter {
        flex: 2 1 0;
    }

    .lncu-lernstrasse-weiter-text {
        display: none;
    }

    .lncu-lernstrasse-weiter::after {
        content: attr(data-kurz);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lncu-lernstrasse-block *,
    .lncu-lernstrasse-tuer-blatt {
        transition: none !important;
        animation: none !important;
    }
}

@media print {
    body.lncu-lernstrasse-druck > *:not(.lncu-lernstrasse-druckbereich) {
        display: none !important;
    }

    /*Aussehen der Karten im Druck: KARTEN_STIL in js/lernstrasse/laborbuch.js (derselbe Stil wie in der Sicherungsdatei)*/
    body.lncu-lernstrasse-druck > .lncu-lernstrasse-druckbereich {
        display: block;
    }

    /*Seitendruck wie am Bildschirm: Kopf, Schrittleiste und aktueller Knoten; ohne Bedienknöpfe und ohne Laborbuch-Spalte (das Laborbuch druckt der Abschluss)*/
    .lncu-lernstrasse-kopfzeile .lncu-lernstrasse-knopf,
    .lncu-lernstrasse-unten,
    .lncu-lernstrasse-laborbuch,
    .lncu-lernstrasse-laborbuch-oeffnen {
        display: none !important;
    }

    /*Die Leiste lebt von Flächenfarben; Browser lassen Hintergründe im Druck sonst weg*/
    .lncu-lernstrasse-strahl {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}