/* ============================================================
   Die Kamerafahrt der QR-Karten-Seite (Praefix lpm-reise)

   Eine Karte auf ihrem Weg: im Editor gestaltet, gedruckt, auf den
   Tisch gelegt, gescannt — und am Ende steht die Galerie. Fuenf
   Stationen auf einer klebenden Buehne.

   ZWEI FASSUNGEN, EINE DATEI.

   Ohne die Klasse .is-aktiv ist der Abschnitt eine gewoehnliche
   nummerierte Liste — das ist die Fassung fuer alle ohne JavaScript
   und fuer alle, die prefers-reduced-motion gesetzt haben. Erst das
   Skript schaltet die Buehne ein. Deshalb steht die ruhende Fassung
   hier zuerst und ohne Bedingung: sie ist der Normalfall, nicht der
   Notfall.

   Die Zahlen kommen aus lp-reise.js als eigene Eigenschaften
   (--r, --r-editor, --r-karte-x ...). Hier steht nur, was damit
   geschieht. Wer die Choreographie aendern will, aendert das Skript;
   wer das Aussehen aendern will, aendert diese Datei.
   ============================================================ */

/* ── RUHENDE FASSUNG ──────────────────────────────────────── */

.lpm-reise { padding: clamp(2.2rem, 4.2vw, 3.4rem) 0; }
.lpm-reise__buehne { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }

/*
 * Buehnenbilder sind reine Zier — ohne Buehne haben sie nichts zu
 * suchen.
 *
 * Ausgeblendet wird ueber :not(.is-aktiv), nicht ueber ein spaeteres
 * display: block. Der Umweg hatte mich schon erwischt: die
 * Fortschrittsleiste braucht display: flex, bekam aber vom
 * Wiedereinblenden ein block verpasst — spezifischer und damit
 * staerker als ihre eigene Regel. Die fuenf Stationen standen
 * uebereinander statt nebeneinander. So herum behaelt jedes Element
 * seine eigene Anzeigeart.
 */
.lpm-reise:not(.is-aktiv) .lpm-reise__grund,
.lpm-reise:not(.is-aktiv) .lpm-reise__leiste,
.lpm-reise:not(.is-aktiv) .lpm-reise__editor,
.lpm-reise:not(.is-aktiv) .lpm-reise__drucker,
.lpm-reise:not(.is-aktiv) .lpm-reise__tisch,
.lpm-reise:not(.is-aktiv) .lpm-reise__karte,
.lpm-reise:not(.is-aktiv) .lpm-reise__telefon { display: none; }

.lpm-reise__schritte {
    display: grid; gap: clamp(.55rem, 1.2vw, .9rem);
    margin: 0; padding: 0; list-style: none;
}
@media (min-width: 48rem) {
    .lpm-reise__schritte { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
.lpm-reise__schritt {
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--neutral-border, #E7E2D8);
    border-radius: 14px;
}
.lpm-reise__nummer {
    font-size: .72rem; font-weight: 800; letter-spacing: .14em;
    color: var(--brand-primary, #226CEA);
}
.lpm-reise__phase {
    margin-left: .6ch; font-size: .66rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--neutral-text-muted, #586678);
}
.lpm-reise__schritt h3 { margin: .5rem 0 .35rem; font-size: 1.1rem; font-weight: 750; }
.lpm-reise__schritt p {
    margin: 0; font-size: .9rem; line-height: 1.6;
    color: var(--neutral-text-muted, #586678);
}
.lpm-reise__schluss { margin: 1.6rem 0 0; text-align: center; }
/*
 * Beide Zeilen bekommen eine eigene Klasse statt einer gemeinsamen
 * p-Regel plus Ausnahme. Genau daran war ich schon einmal haengen
 * geblieben: die Ausnahme war weniger spezifisch als die Regel, und
 * die Schlusszeile stand in Versalien und Kleinschrift da.
 */
.lpm-reise__schlussauftakt {
    margin: 0; font-size: .78rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--neutral-text-muted, #586678);
}
.lpm-reise__schlusszeile {
    margin: .4rem 0 0; font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
    text-wrap: balance;
}

/* ── AKTIVE FASSUNG: die Buehne ───────────────────────────── */

/*
 * Die Hoehe des Abschnitts IST die Laenge der Fahrt.
 *
 * Sechs Bildschirme Scrollweg fuer fuenf Stationen — die Buehne klebt
 * so lange oben und der Fortschritt laeuft von 0 bis 1. Die Hoehe
 * steht bewusst nur hier: ohne Skript waeren es sechs leere Schirme.
 */
.lpm-reise.is-aktiv { height: 580vh; padding: 0; }

/*
 * Der Seitenkopf klebt selbst oben. Die Buehne beginnt darunter,
 * sonst laege ihre Fortschrittsleiste hinter dem Logo. --header-h
 * setzt main.js aus der gemessenen Hoehe.
 */
.lpm-reise.is-aktiv .lpm-reise__buehne {
    position: sticky; top: var(--header-h, 62px);
    height: calc(100svh - var(--header-h, 62px));
    max-width: none; margin: 0; padding: 0;
    overflow: hidden; isolation: isolate;
    /*
     * Dunkel von der ersten Sekunde an — anders als in der Vorlage,
     * die hier mit Creme beginnt. Auf Creme war die weisse
     * Stationsschrift der ersten Station nicht zu lesen. Ein Kapitel,
     * das als Kapitel beginnt, ist ohnehin ehrlicher als eines, das
     * sich erst nach dem zweiten Bildschirm dazu entschliesst.
     */
    background: radial-gradient(circle at 50% 40%, #172845, #07101E 72%);
}
.lpm-reise__grund { position: absolute; inset: 0; pointer-events: none; }
.lpm-reise__grund--blau {
    z-index: -2; opacity: var(--r-blau, 0);
    background: linear-gradient(145deg, #125EE7 0%, #226CEA 46%, #0C3F9C 100%);
}
.lpm-reise__grund--raster {
    z-index: -1; opacity: var(--r-raster, 0);
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle, #000 15%, transparent 68%);
}

/* ── Fortschrittsleiste ───────────────────────────────────── */

.lpm-reise__leiste {
    position: absolute; z-index: 30; top: 1.5rem; left: 50%;
    transform: translateX(-50%); width: min(43rem, 82vw);
    display: flex; justify-content: space-between;
    color: rgba(255, 255, 255, .42);
}
.lpm-reise__leiste::before {
    content: ""; position: absolute; left: 0; right: 0; top: 15px;
    height: 1px; background: rgba(255, 255, 255, .16);
}
.lpm-reise__balken {
    position: absolute; left: 0; top: 15px; height: 1px;
    background: #fff; width: var(--r-band, 0%);
}
.lpm-reise__marke {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    font-size: .58rem; letter-spacing: .13em; text-transform: uppercase;
    transition: color .3s ease;
}
.lpm-reise__marke i {
    display: grid; place-items: center; width: 31px; height: 31px;
    border-radius: 50%; background: #15223A;
    border: 1px solid rgba(255, 255, 255, .14);
    font-style: normal; font-weight: 800; font-size: .62rem;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.lpm-reise__marke.is-hier { color: #fff; }
.lpm-reise__marke.is-hier i { color: #0B1424; background: #fff; border-color: #fff; }

/* ── Fortschrittsbalken am unteren Rand ───────────────────── */

/*
 * Derselbe Balken wie in der Himmels-Fahrt und aus denselben Gruenden:
 * sechs Pixel statt zwei, Kontrast aus der Helligkeit.
 *
 * Hier kommt ein zweiter Grund dazu: DIESE Fahrt endet auf
 * Markenblau. Ein Verlauf, der beim Markenblau anfaengt, waere dort
 * am Schluss unsichtbar — Blau auf Blau. Gold und Champagner lesen
 * sich auf beiden Gruenden.
 */
.lpm-reise__fortschritt {
    position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    z-index: 41; background: rgba(255, 255, 255, .1);
}
.lpm-reise__fortschritt span {
    display: block; height: 100%; width: 100%; transform-origin: left;
    transform: scaleX(var(--r, 0));
    /*
     * Heller als in der Himmels-Fahrt, und das ist gerechnet, nicht
     * gefuehlt: dort steht der Balken immer auf Nachtblau, hier am
     * Ende auf Markenblau. Gegen Markenblau bringt gedecktes Gold
     * (#A9803A) nur 1,3:1 — unsichtbar. #E8C766 bringt 2,9:1, die
     * helle Spitze 4,3:1. Der Schein darunter hilft zusaetzlich.
     */
    background: linear-gradient(90deg, #E8C766 0%, #FFF6E2 100%);
    box-shadow: 0 0 12px rgba(232, 199, 102, .6);
}
.lpm-reise:not(.is-aktiv) .lpm-reise__fortschritt { display: none; }

/* ── Der Text auf der Buehne ──────────────────────────────── */

/*
 * Dieselbe Liste wie in der ruhenden Fassung, nur uebereinander
 * gelegt statt nebeneinander. Der Wechsel laeuft ueber eine Klasse,
 * nicht ueber eine Zahl: Text neu auszuzeichnen kostet mehr als eine
 * Deckkraft zu aendern, und er wechselt nur fuenfmal.
 */
.lpm-reise.is-aktiv .lpm-reise__schritte {
    position: absolute; z-index: 28; display: block;
    left: clamp(1.3rem, 5vw, 4.5rem);
    bottom: clamp(1.6rem, 7vh, 3.6rem);
    width: min(25rem, calc(100% - 2.6rem));
    /*
     * Zum Schluss mit ausblenden. Das Schlussbild liegt darueber, ist
     * aber halbdurchsichtig — die letzte Station schien sonst als
     * blasser Schatten hindurch und sah aus wie ein Fehler.
     */
    opacity: calc(1 - var(--r-schluss, 0));
}
.lpm-reise.is-aktiv .lpm-reise__schritt {
    position: absolute; left: 0; bottom: 0; width: 100%;
    padding: 0; background: none; border: 0; color: #fff;
    opacity: 0; transform: translateY(.8rem); pointer-events: none;
    transition: opacity .42s ease, transform .42s ease;
}
.lpm-reise.is-aktiv .lpm-reise__schritt.is-hier { opacity: 1; transform: none; }
.lpm-reise.is-aktiv .lpm-reise__nummer { color: #8FB7FF; }
.lpm-reise.is-aktiv .lpm-reise__phase { color: rgba(255, 255, 255, .55); }
.lpm-reise.is-aktiv .lpm-reise__schritt h3 {
    margin: .6rem 0 .5rem; font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1.05; letter-spacing: -.03em; font-weight: 800;
}
.lpm-reise.is-aktiv .lpm-reise__schritt p {
    font-size: .88rem; color: rgba(255, 255, 255, .7);
}

.lpm-reise.is-aktiv .lpm-reise__schluss {
    position: absolute; z-index: 40; inset: 0; margin: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #fff; background: rgba(9, 49, 132, .5);
    backdrop-filter: blur(5px);
    opacity: var(--r-schluss, 0); pointer-events: none;
}
.lpm-reise.is-aktiv .lpm-reise__schlussauftakt { color: rgba(255, 255, 255, .72); }
.lpm-reise.is-aktiv .lpm-reise__schlusszeile {
    margin-top: .6rem;
    max-width: 20ch; font-size: clamp(2.2rem, 6vw, 4.4rem);
    line-height: .98; letter-spacing: -.045em;
}

/* ── Station 1: der Editor ────────────────────────────────── */

.lpm-reise__editor {
    position: absolute; z-index: 4; top: 49%; left: 50%;
    width: min(58rem, 80vw); height: min(36rem, 64%);
    transform: translate(-50%, -50%) scale(calc(.98 - var(--r, 0) * .12));
    opacity: var(--r-editor, 1);
    overflow: hidden; background: #F3F6FB;
    border: 1px solid rgba(15, 23, 42, .12); border-radius: 1.3rem;
    box-shadow: 0 2.6rem 6rem rgba(5, 13, 28, .5);
}
.lpm-reise__editorbar {
    height: 3rem; padding: 0 1rem;
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border-bottom: 1px solid #E4E8EF;
    color: #728097; font-size: .68rem;
}
.lpm-reise__ampel { display: flex; gap: .35rem; }
.lpm-reise__ampel i { width: .5rem; height: .5rem; border-radius: 50%; background: #D9E0E9; }
.lpm-reise__editorknopf {
    padding: .4rem .7rem; border-radius: 8px;
    background: var(--brand-primary, #226CEA); color: #fff;
    font-size: .58rem; font-weight: 700;
}
.lpm-reise__editorkoerper { display: grid; grid-template-columns: 32% 68%; height: calc(100% - 3rem); }
.lpm-reise__editorspalte { padding: 1.3rem; background: #fff; border-right: 1px solid #E3E8EF; }
.lpm-reise__editorspalte strong { display: block; font-size: .85rem; margin-bottom: 1.4rem; }
.lpm-reise__feldname {
    display: block; margin: 1rem 0 .4rem;
    color: #7B8698; font-size: .58rem; font-weight: 700;
}
.lpm-reise__feld {
    min-height: 2.3rem; display: flex; align-items: center; padding: 0 .6rem;
    border: 1px solid #DFE5ED; border-radius: 8px; font-size: .7rem; color: #33415A;
}
.lpm-reise__farben { display: flex; gap: .5rem; }
.lpm-reise__farben i {
    width: 1.7rem; height: 1.7rem; border-radius: 8px; background: #0B1424;
    border: 2px solid #fff; box-shadow: 0 0 0 1px #DCE2EA;
}
.lpm-reise__farben i:nth-child(2) { background: #226CEA; }
.lpm-reise__farben i:nth-child(3) { background: #B0863A; }
.lpm-reise__farben i:nth-child(4) { background: #8EA795; }
.lpm-reise__leinwand {
    position: relative; display: grid; place-items: center;
    background: radial-gradient(circle, #fff, #E9EEF5);
}
.lpm-reise__leinwand span {
    position: absolute; top: .9rem; color: #96A0B0;
    font-size: .52rem; letter-spacing: .2em;
}

/* ── Station 2: der Drucker ───────────────────────────────── */

.lpm-reise__drucker {
    position: absolute; inset: 0; z-index: 5;
    display: grid; place-items: center; opacity: var(--r-drucker, 0);
}
.lpm-reise__druckerlicht {
    position: absolute; width: 46vw; height: 46vw; border-radius: 50%;
    background: rgba(34, 108, 234, .18); filter: blur(60px);
}
.lpm-reise__druckerkasten {
    position: relative; width: min(31rem, 57vw); height: min(16rem, 30%);
    margin-top: 17vh; background: linear-gradient(#F7F9FB, #DFE5EC);
    border-radius: 34px 34px 24px 24px; border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 45px 80px rgba(0, 0, 0, .38), inset 0 1px #fff;
}
.lpm-reise__druckerschlitz {
    position: absolute; left: 12%; right: 12%; top: 4.6rem; height: 1.1rem;
    padding: 4px 9%; background: #111C2D; border-radius: 10px;
    box-shadow: inset 0 3px 5px #000;
}
.lpm-reise__druckerschlitz i {
    display: block; height: 2px; background: #5594FF; box-shadow: 0 0 9px #4A8CFF;
}
.lpm-reise__druckerschild {
    position: absolute; left: 2rem; top: 1.8rem;
    color: #516077; font-size: .55rem; font-weight: 800; letter-spacing: .14em;
}
.lpm-reise__druckerlampen {
    position: absolute; right: 2rem; top: 1.7rem; width: 5.6rem; height: 2.3rem;
    padding: .5rem; display: flex; gap: .3rem; align-items: center;
    background: #13243D; border-radius: 7px;
}
.lpm-reise__druckerlampen i { width: .45rem; height: .45rem; background: #62A0FF; border-radius: 50%; }
.lpm-reise__druckerlampen i:nth-child(2) { opacity: .5; }
.lpm-reise__druckerlampen i:nth-child(3) { opacity: .2; }
.lpm-reise__druckerfach {
    position: absolute; left: 17%; right: 17%; bottom: -2.3rem; height: 3.2rem;
    background: #CBD3DD; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}

/* ── Station 3: der Tisch ─────────────────────────────────── */

.lpm-reise__tisch {
    position: absolute; inset: 0; z-index: 3; opacity: var(--r-tisch, 0);
    background:
        radial-gradient(circle at 38% 38%, rgba(255, 255, 255, .19), transparent 20%),
        linear-gradient(115deg, #806A50, #473728 72%);
}
.lpm-reise__tisch::before {
    content: ""; position: absolute; inset: 0; opacity: .24;
    background-image: repeating-linear-gradient(92deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 42px);
}
.lpm-reise__kerzenlicht {
    position: absolute; width: 42vw; height: 42vw; left: 9vw; top: 6vh;
    border-radius: 50%; background: rgba(255, 224, 166, .14); filter: blur(55px);
}
.lpm-reise__gedeck {
    position: absolute; right: 8vw; top: 17vh; width: 31vw; aspect-ratio: 1.35;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, .32);
    box-shadow: 0 0 0 22px rgba(255, 255, 255, .045), inset 0 0 0 30px rgba(255, 255, 255, .035);
}
.lpm-reise__gedeck i { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); }
.lpm-reise__gedeck i:nth-child(1) { width: 45%; height: 60%; top: 20%; left: 28%; }
.lpm-reise__gedeck i:nth-child(2) { width: 12%; height: 16%; right: 4%; top: -17%; }
.lpm-reise__gedeck i:nth-child(3) {
    width: 2px; height: 65%; left: -13%; top: 17%;
    border-radius: 2px; background: rgba(255, 255, 255, .32);
}

/* ── Die reisende Karte ───────────────────────────────────── */

/*
 * Ein echter Editor-Export, kein Nachbau: dieselbe Datei, die auch im
 * Karussell weiter unten liegt. Eine gezeichnete Karte haette an
 * dieser Stelle behauptet, was die echte belegt.
 */
.lpm-reise__karte {
    position: absolute; z-index: 12; top: 50%; left: 50%;
    transform-origin: center; will-change: transform, opacity;
    opacity: var(--r-karte-deck, 1);
    transform:
        translate(calc(-50% + var(--r-karte-x, 0) * 1vw), calc(-50% + var(--r-karte-y, 0) * 1vh))
        scale(var(--r-karte-gross, 1))
        rotate(calc(var(--r-karte-dreh, 0) * 1deg));
}
.lpm-reise__karte img {
    display: block; width: min(24rem, 38vw); height: auto;
    border-radius: .9rem; box-shadow: 0 2.4rem 4rem rgba(5, 13, 28, .45);
}

/* ── Station 4 und 5: das Telefon ─────────────────────────── */

.lpm-reise__telefon {
    position: absolute; z-index: 20; top: 49%; left: 50%;
    transform-origin: center; will-change: transform, opacity;
    opacity: var(--r-telefon, 0);
    transform:
        translate(calc(-50% + var(--r-tel-x, 0) * 1vw), calc(-50% + var(--r-tel-y, 0) * 1vh))
        scale(var(--r-tel-gross, .82));
}
/*
 * Rahmen, Rand und Schatten haengen an derselben Zahl: am Ende der
 * Fahrt loest sich das Geraet auf und uebrig bleibt der Bildschirm.
 * Aus "jemand haelt ein Telefon" wird "ihr seht die Galerie".
 */
.lpm-reise__geraet {
    position: relative; width: 260px; height: 535px; padding: 11px;
    background: rgba(8, 12, 20, var(--r-rahmen, 1));
    border: 1px solid rgba(255, 255, 255, calc(var(--r-rahmen, 1) * .4));
    border-radius: 42px;
    box-shadow: 0 45px 100px rgba(0, 0, 0, calc(var(--r-rahmen, 1) * .48));
}
.lpm-reise__hoerer {
    position: absolute; z-index: 5; top: 18px; left: 50%; transform: translateX(-50%);
    width: 72px; height: 18px; border-radius: 12px;
    background: rgba(5, 8, 14, var(--r-rahmen, 1));
}
.lpm-reise__schirm {
    position: relative; width: 100%; height: 100%;
    overflow: hidden; background: #F4F6FA; border-radius: 33px;
}
.lpm-reise__kamera {
    position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
    background: radial-gradient(circle at 35% 25%, #BDA081, #544333 70%);
}
.lpm-reise__kamera::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, .16), transparent 35%);
}
.lpm-reise__kamera img {
    display: block; width: 10.5rem; height: auto; border-radius: .4rem;
    transform: rotate(-7deg) scale(.93);
    box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .35);
}
.lpm-reise__sucher { position: absolute; width: 182px; height: 182px; top: 145px; left: 28px; overflow: hidden; }
.lpm-reise__sucher i {
    position: absolute; width: 35px; height: 35px;
    border-color: #fff; border-style: solid;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}
.lpm-reise__sucher i:nth-child(1) { left: 0; top: 0; border-width: 3px 0 0 3px; border-radius: 10px 0 0 0; }
.lpm-reise__sucher i:nth-child(2) { right: 0; top: 0; border-width: 3px 3px 0 0; border-radius: 0 10px 0 0; }
.lpm-reise__sucher i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 3px 3px; border-radius: 0 0 0 10px; }
.lpm-reise__sucher i:nth-child(4) { right: 0; bottom: 0; border-width: 0 3px 3px 0; border-radius: 0 0 10px 0; }
.lpm-reise__suchlauf {
    position: absolute; left: 4px; right: 4px; top: 10px; height: 1px;
    background: #7BA8FF; box-shadow: 0 0 10px 3px rgba(90, 145, 255, .65);
    transform: translateY(calc(var(--r-suchlauf, 0) * 150px));
}
.lpm-reise__erkannt {
    position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%);
    width: max-content; display: flex; align-items: center; gap: .4rem;
    padding: .55rem .75rem; color: #14325D; background: #fff; border-radius: 999px;
    font-size: .55rem; font-weight: 700; box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
    opacity: var(--r-erkannt, 0);
}
/*
 * Zwei deckende Screenshots uebereinander, jeder blendet zu seiner
 * Zeit ein. Die Statuszeile und die Safari-Leiste sind Teil der
 * Aufnahme — genau deshalb sieht der Bildschirm aus wie ein
 * Bildschirm und nicht wie eine Zeichnung davon.
 */
.lpm-reise__gaesteseite,
.lpm-reise__galerie {
    position: absolute; inset: 0; display: block;
    width: 100%; height: 100%; object-fit: cover; object-position: top;
    background: #FAF8F3;
}
.lpm-reise__gaesteseite { opacity: var(--r-gaesteseite, 0); }
.lpm-reise__galerie { opacity: var(--r-galerie, 0); }

/* ── Handy ────────────────────────────────────────────────── */

@media (max-width: 760px) {
    .lpm-reise.is-aktiv { height: 500vh; }
    .lpm-reise__leiste { top: 1rem; width: 88vw; }
    .lpm-reise__marke span { display: none; }
    .lpm-reise__marke i { width: 27px; height: 27px; }

    /*
     * Auf dem Handy fuellt das Telefon am Ende die ganze Breite, und
     * die letzte Station stand als weisse Schrift mitten im hellen
     * Galeriefoto. Ein Verlauf von unten legt sich darunter — nur
     * hier: auf dem Desktop steht der Text neben dem Telefon und
     * braucht ihn nicht.
     */
    .lpm-reise.is-aktiv .lpm-reise__buehne::after {
        content: ""; position: absolute; z-index: 27;
        left: 0; right: 0; bottom: 0; height: 42%;
        background: linear-gradient(to top, rgba(4, 10, 22, .82), rgba(4, 10, 22, 0));
        pointer-events: none;
    }
    .lpm-reise.is-aktiv .lpm-reise__schritte { left: 1.2rem; right: 1.2rem; width: auto; bottom: 1.5rem; }
    .lpm-reise.is-aktiv .lpm-reise__schritt h3 { font-size: 1.55rem; }
    .lpm-reise.is-aktiv .lpm-reise__schritt p { font-size: .82rem; max-width: 22rem; }

    /* Ohne Seitenspalte: auf dem Handy ist die Leinwand der Editor. */
    .lpm-reise__editor { width: 92vw; height: 58%; top: 48%; }
    .lpm-reise__editorkoerper { grid-template-columns: 1fr; }
    .lpm-reise__editorspalte { display: none; }
    .lpm-reise__editorbar span { display: none; }

    .lpm-reise__karte img { width: 72vw; }
    .lpm-reise__druckerkasten { width: 82vw; height: 24%; margin-top: 12vh; }
    .lpm-reise__druckerlicht { width: 90vw; height: 90vw; }
    .lpm-reise__druckerschild { left: 1.2rem; }
    .lpm-reise__druckerlampen { right: 1.2rem; }
    .lpm-reise__gedeck { width: 58vw; right: -8vw; top: 18vh; }

    .lpm-reise__geraet { width: 214px; height: 440px; border-radius: 35px; }
    .lpm-reise__schirm { border-radius: 27px; }
    .lpm-reise__kamera img { width: 8.4rem; }
    .lpm-reise__sucher { width: 150px; height: 150px; left: 21px; top: 118px; }
}