/* Kundenseite: Form, Navigation, neue Seiten (Plan docs/alpha/13, 15.09.2026).
   Geladen NACH laserdance-system.css, weil sie deren Radien auf den
   Kundenseiten bewusst neu belegt. Kundenseite heisst: jede Seite ohne
   den Mitarbeiter-Chip (.staffchip) in der Navigation.

   Paul, 15.09.2026, morgens: "mach die landing page nicht so eckig"; abends,
   nach der ersten Fassung mit Pillen und 16 px: "die rounded corners sind
   nicht so schoen". Deshalb ein ruhiges Mass: Chips 6, Bedienelemente 8,
   Karten 12, der Hero 16, keine Pillen. Das Werkzeug bleibt bei 4/6/8
   (docs/DESIGN.md, Abschnitt Radien). Die drei Token werden hier neu
   belegt, alle bestehenden Regeln (var(--r-card) usw.) folgen von selbst.
   Der eigentliche Umbau der Kundenseite kommt nicht aus der Form, sondern
   aus dem Kaufverhalten (Plan 13, Abschnitt 2f). Wer hier etwas aendert:
   docs/DESIGN.md lesen, danach python tools\css-referenz.py nachher. */

.ld .pg:not(:has(.staffchip)) {
    --r-ctl: 8px;         /* Felder, Stepper, Knoepfe */
    --r-card: 12px;       /* Karten, Bloecke, Panels */
    --r-chip: 6px;        /* Marken, Slot-Chips */
    --rk-gross: 16px;     /* Hero, grosse Flaechen */
}
.ld .pg:not(:has(.staffchip)) .head { border-radius: var(--rk-gross) }
.ld .pg:not(:has(.staffchip)) .liveslots.hat { border-radius: var(--r-card) }
.ld .pg:not(:has(.staffchip)) .liveslots .chip,
.ld .pg:not(:has(.staffchip)) .liveslots .morebtn,
.ld .pg:not(:has(.staffchip)) .cartbtn,
.ld .pg:not(:has(.staffchip)) .cta,
.ld .pg:not(:has(.staffchip)) .jgacta,
.ld .pg:not(:has(.staffchip)) .jlink,
.ld .pg:not(:has(.staffchip)) .know .maplink,
.ld .pg:not(:has(.staffchip)) .tab,
.ld .pg:not(:has(.staffchip)) .cartbtn .cnt,
.ld .ldsticky { border-radius: var(--r-ctl) }
.ld .pg:not(:has(.staffchip)) .block,
.ld .pg:not(:has(.staffchip)) .lcard,
.ld .pg:not(:has(.staffchip)) .jetzt,
.ld .pg:not(:has(.staffchip)) .know > div { border-radius: var(--r-card) }
.ld .pg:not(:has(.staffchip)) .lcard { overflow: hidden }
.ld .pg:not(:has(.staffchip)) .band .bbild { border-radius: var(--r-card) }
.ld .pg:not(:has(.staffchip)) .band .bknopf,
.ld .pg:not(:has(.staffchip)) .step2 .no,
.ld .pg:not(:has(.staffchip)) .faq details { border-radius: var(--r-ctl) }

/* ---- Navigation: "mehr" als aufklappbare Liste, ohne Skript ---- */
.ld .tabs .mehr { position: relative }
.ld .tabs .mehr summary {
    list-style: none; cursor: pointer; color: var(--muted); font: 700 var(--fs-14) var(--font);
    padding: 9px 14px; border: 1px solid transparent; border-radius: var(--r-ctl, 8px); white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px
}
.ld .tabs .mehr summary::-webkit-details-marker { display: none }
.ld .tabs .mehr summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px) }
.ld .tabs .mehr[open] summary::after { transform: rotate(225deg) translateY(-2px) }
.ld .tabs .mehr summary:hover, .ld .tabs .mehr[open] summary { color: var(--text) }
.ld .tabs .mehr .menue {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 220px;
    background: rgba(10, 10, 15, .97); border: 1px solid var(--line); border-radius: var(--r-card, 16px);
    padding: 8px; display: grid; gap: 2px; box-shadow: 0 14px 40px rgba(0, 0, 0, .5)
}
.ld .tabs .mehr .menue a {
    display: block; padding: 9px 12px; color: var(--text); text-decoration: none;
    font: 700 var(--fs-14) var(--font); border-radius: var(--r-ctl, 10px)
}
.ld .tabs .mehr .menue a:hover, .ld .tabs .mehr .menue a.on { background: rgba(200, 27, 255, .14); color: #fff }
.ld .tabs .mehr .menue small { display: block; font-size: var(--fs-12); font-weight: 500; color: var(--muted) }
@media (max-width: 700px) {
    .ld .tabs .mehr { flex: 1 }
    .ld .tabs .mehr summary { width: 100%; justify-content: center; padding: 9px 6px }
    .ld .tabs .mehr .menue { left: auto; right: 0 }
}

/* ---- Startseite: vier Attraktionen, die Anlaesse, der Fuss ---- */
.ld .lgrid.vier { grid-template-columns: repeat(3, 1fr) }
@media (max-width: 860px) { .ld .lgrid.vier { grid-template-columns: 1fr 1fr } }
.ld .lcard .vorort {
    display: inline-block; margin-top: 3px; font-size: var(--fs-12); font-weight: 700; color: var(--text);
    border: 1px solid rgba(255, 255, 255, .35); padding: 3px 10px; border-radius: var(--r-ctl, 8px)
}
.ld .anlaesse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px }
.ld .anlaesse a {
    display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; text-decoration: none; color: var(--text);
    background: var(--p1); border: 1px solid var(--line); border-radius: var(--r-card, 16px); min-height: 92px
}
.ld .anlaesse a:hover { border-color: var(--acc) }
.ld .anlaesse b { font-size: var(--fs-16); font-weight: 800 }
.ld .anlaesse span { font-size: var(--fs-13); color: var(--muted); line-height: 1.4 }
.ld .anlaesse i { font-style: normal; font-size: var(--fs-12); font-weight: 700; color: var(--cyan); margin-top: auto }
@media (max-width: 860px) { .ld .anlaesse { grid-template-columns: 1fr 1fr } }
@media (max-width: 480px) { .ld .anlaesse { grid-template-columns: 1fr } .ld .lgrid.vier { grid-template-columns: 1fr } }

.ld .fussgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; margin-bottom: 14px; color: var(--muted) }
.ld .fussgrid b { display: block; color: var(--text); font-size: var(--fs-13); margin-bottom: 6px }
.ld .fussgrid a { color: var(--muted); text-decoration: none }
.ld .fussgrid a:hover { color: var(--cyan) }
.ld .fussgrid .kontakt span { display: block; line-height: 1.6 }
.ld .fussgrid .social { display: flex; flex-wrap: wrap; gap: 8px }
.ld .fussgrid .social a {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line);
    border-radius: var(--r-ctl, 8px); font-size: var(--fs-12); font-weight: 700
}
.ld .fussgrid .social a:hover { border-color: var(--acc); color: var(--text) }
.ld .fussgrid .seiten { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: var(--fs-13) }
@media (max-width: 760px) { .ld .fussgrid { grid-template-columns: 1fr; gap: 16px } }

/* ---- Info-Seiten (Break Dance, Preise, Anfahrt, Firmen, Schulen) ---- */
.ld .hero-bg.hb-bd { background-position: 50% 60%;
    background-image: url('/images/laserdance/breakdance-anlage.jpg');
    background-image: image-set(url('/images/laserdance/breakdance-anlage.webp') type('image/webp'), url('/images/laserdance/breakdance-anlage.jpg') type('image/jpeg')) }
.ld .hero-bg.hb-firma { background-position: 50% 50%;
    background-image: url('/images/laserdance/lasertag-westen.jpg');
    background-image: image-set(url('/images/laserdance/lasertag-westen.webp') type('image/webp'), url('/images/laserdance/lasertag-westen.jpg') type('image/jpeg')) }
.ld .hero-bg.hb-schule { background-position: 50% 50%;
    background-image: url('/images/laserdance/lasertag-gang.jpg');
    background-image: image-set(url('/images/laserdance/lasertag-gang.webp') type('image/webp'), url('/images/laserdance/lasertag-gang.jpg') type('image/jpeg')) }
.ld .infoseite .block + .block { margin-top: 18px }
.ld .infoseite .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px }
.ld .infoseite .zwei > .block { margin-top: 0 }
@media (max-width: 760px) { .ld .infoseite .zwei { grid-template-columns: 1fr } }
.ld .infoseite .lauftext { max-width: 68ch; line-height: 1.6; color: var(--text); margin: 0 0 12px }
.ld .infoseite .lauftext.mut { color: var(--muted) }
.ld .infoseite ul.punkte { margin: 0; padding-left: 20px; line-height: 1.6; color: var(--text) }
.ld .infoseite ul.punkte li + li { margin-top: 4px }
.ld .infoseite .fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 6px }
.ld .infoseite .fakt { padding: 12px 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: var(--r-ctl, 10px) }
.ld .infoseite .fakt b { display: block; font-size: var(--fs-20); font-weight: 800; color: var(--acc-hell, #E78BFF) }
.ld .infoseite .fakt span { font-size: var(--fs-12); color: var(--muted) }
.ld .infoseite .bilderwand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px }
.ld .infoseite .bilderwand img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--r-card, 16px) }
.ld .infoseite .bilderwand .gross { grid-column: 1 / -1 }
.ld .infoseite .bilderwand .gross img { aspect-ratio: 21 / 9 }
@media (max-width: 700px) { .ld .infoseite .bilderwand { grid-template-columns: 1fr 1fr } }
.ld .infoseite .preistab { width: 100%; border-collapse: collapse; font-size: var(--fs-14) }
.ld .infoseite .preistab th { text-align: left; font-size: var(--fs-11); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); padding: 6px 10px; border-bottom: 1px solid var(--line) }
.ld .infoseite .preistab th.r, .ld .infoseite .preistab td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.ld .infoseite .preistab td { padding: 9px 10px; border-bottom: 1px solid var(--dim) }
.ld .infoseite .preistab tr:last-child td { border-bottom: 0 }
.ld .infoseite .preistab td b { color: var(--text) }
.ld .infoseite .preistab .mut { color: var(--muted); font-size: var(--fs-12) }
.ld .infoseite .hinweis { margin-top: 10px; font-size: var(--fs-12); color: var(--muted); line-height: 1.5 }
.ld .infoseite .hinweis a, .ld .infoseite .lauftext a, .ld .infoseite .punkte a { color: var(--cyan); text-decoration: none; font-weight: 700 }
.ld .infoseite .hinweis a:hover, .ld .infoseite .lauftext a:hover { text-decoration: underline }
.ld .infoseite .cta-zeile { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px }
.ld .infoseite .cta-zeile .jgacta { margin: 0 }
.ld .infoseite .jgacta.still { background: transparent; border: 1px solid var(--line); color: var(--text) }
.ld .infoseite .jgacta.still:hover { border-color: var(--acc); filter: none }
.ld .infoseite .adresse { font-size: var(--fs-16); line-height: 1.5 }
.ld .infoseite .adresse b { display: block; font-size: var(--fs-22); font-weight: 800 }
.ld .infoseite .ubahn { display: inline-block; padding: 2px 6px; font-size: var(--fs-11); font-weight: 800; color: #fff; border-radius: 4px; margin-right: 4px }
.ld .infoseite .ubahn.u1 { background: #e2001a } .ld .infoseite .ubahn.u2 { background: #a862a4 }

/* Info-Seiten: die Ueberschrift der Seite ist ein h1 im Stil der h2 (Suche und Vorlesen). */
.ld .lgridhead h1 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.01em; margin: 4px 0 0 }
/* Preistabellen am Telefon: kleiner, umbrechende Koepfe, im Notfall rollt die Tabelle in sich. */
.ld .infoseite .tabwrap { overflow-x: auto }
@media (max-width: 480px) {
    .ld .infoseite .preistab { font-size: var(--fs-12) }
    .ld .infoseite .preistab th, .ld .infoseite .preistab td { padding: 7px 6px }
    .ld .infoseite .preistab th.r { white-space: normal }
}
/* Die erste Ueberschrift einer Info-Seite ist ein h1 (Suche, Vorlesen), gesetzt wie die h2 der Bloecke. */
.ld .block > h1 { margin: 0 0 17px; font-size: var(--fs-16); font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 13px }
.ld .block > h1 .rule { flex: 1; height: 1px; background: var(--dim) }
.ld .block > h1 .rt { font-size: var(--fs-12); color: var(--muted2); font-weight: 500 }

/* ---------- Anfrageformular (docs/alpha/13, Phase 3) ----------
   Wenige Tastaturfelder, der Rest sind Antipp-Wahlen. Zwei Spalten ab
   Tablet, eine am Handy; die Wahlknoepfe brechen um und bleiben 44 px hoch. */
.ld .anfrage .anfform { display: grid; gap: 4px; max-width: 640px }
.ld .anfrage .anfform .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.ld .anfrage .anfform .lbl { margin-top: 8px }
.ld .anfrage .anfform input, .ld .anfrage .anfform textarea { width: 100%; box-sizing: border-box; min-height: 44px; padding: 9px 12px; font-size: var(--fs-15) }
.ld .anfrage .anfform textarea { min-height: 88px; resize: vertical; line-height: 1.45; font-family: inherit; background: var(--field); color: var(--text); border: 1px solid var(--dim) }
.ld .anfrage .anfform textarea:focus { outline: 2px solid var(--cyan); outline-offset: 0 }
.ld .anfrage .anfform input.bad { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset }
.ld .anfrage .anfform .feldfehler { margin: 2px 0 4px; font-size: var(--fs-12); color: var(--red); line-height: 1.35 }
.ld .anfrage .wahl { display: flex; flex-wrap: wrap; gap: 8px }
.ld .anfrage .wahl button {
    min-height: 44px; padding: 0 14px; font: inherit; font-size: var(--fs-13); font-weight: 700;
    color: var(--text); background: var(--field); border: 1px solid var(--dim); border-radius: var(--r-ctl); cursor: pointer
}
.ld .anfrage .wahl button:hover { border-color: var(--acc) }
.ld .anfrage .wahl button.an { border-color: var(--acc); background: rgba(200, 27, 255, .16); color: #fff }
.ld .anfrage .anfform .cta { margin-top: 14px }
.ld .anfrage .anfform .klein { margin: 8px 0 0; font-size: var(--fs-12); color: var(--muted) }
.ld .anfrage .anfform .klein a { color: var(--cyan); text-decoration: none }
/* Die Vorschau vom Beiblatt: Richtpreis fuer Paket, Dauer und Tarif */
.ld .anfrage .richtpreis {
    margin-top: 12px; padding: 12px 14px; display: grid; gap: 6px;
    border: 1px solid var(--dim); border-radius: var(--r-card); color: var(--muted); font-size: var(--fs-13); line-height: 1.4
}
.ld .anfrage .richtpreis.hat { border-color: var(--cyan) }
.ld .anfrage .richtpreis .rp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px }
.ld .anfrage .richtpreis .rp b { font-size: var(--fs-22); color: #fff; letter-spacing: -.01em }
.ld .anfrage .richtpreis .rp span { color: var(--text) }
.ld .anfrage .richtpreis > b { color: #fff }
.ld .anfrage .richtpreis small { font-size: var(--fs-12); color: var(--muted2) }
/* Honigtopf: aus dem Sichtfeld, nicht display:none, sonst lassen Skripte es aus */
.ld .anfrage .anfform .fax { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden }
@media (max-width: 560px) { .ld .anfrage .anfform .g2 { grid-template-columns: 1fr } }

/* ============================================================
   Startseite neu (docs/alpha/14, "Szenenfolge", Pauls Ja vom 15.09.2026).
   Drei Ebenen: Szene (Bild fuehrt), Ruhe (Text auf --bg, nur Haarlinien),
   Leiste (bedienen, auf --p1, Rahmen nur an Chips und Knoepfen). Kein
   Kasten als Ordnungsmittel; Abstand zwischen Abschnitten immer --abschnitt.
   Die Klassen gelten unter .pg.start und .pg.szenen (die umgebauten
   Buchungsseiten, seit 15.09.2026 Lasertag); was beide teilen, steht unter
   :is(.pg.start, .pg.szenen), was nur eine Seite braucht, unter ihrer Klasse.
   Die alten Bausteine (.head, .lcard, .liveslots) bleiben, bis PxPanel und
   PaPanel nachgezogen sind.
   ============================================================ */
.ld .pg.start, .ld .pg.szenen {
    --s7: 48px; --s8: 64px; --s9: 96px;           /* Leiter nach --s6, DESIGN.md Abstaende */
    --wrap-rand: clamp(14px, 3vw, 26px);         /* der Rand von .wrap, fuer den Anschnitt */
    --abschnitt: var(--s8);                       /* Abschnitt zu Abschnitt am Handy */
    --dauer-kurz: .12s; --dauer: .25s; --dauer-lang: .6s;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));   /* die Buchleiste ist 59 px hoch */
    /* Sicherung gegen Querrollen: das Erscheinen von der Seite (translateX 24px, ld-erscheinen.js) zaehlt sonst
       als Ueberlauf, die Seite war unter 700 px um 10 px breiter als der Schirm (gemessen 15.09.2026) */
    overflow-x: clip;
}
@media (min-width: 700px) { .ld .pg.start, .ld .pg.szenen { padding-bottom: 0 } }
@media (min-width: 940px) { .ld .pg.start, .ld .pg.szenen { --abschnitt: var(--s9) } }
.ld :is(.pg.start, .pg.szenen) .wrap { padding-top: 0; padding-bottom: 0 }
.ld :is(.pg.start, .pg.szenen) h1, .ld :is(.pg.start, .pg.szenen) h2, .ld :is(.pg.start, .pg.szenen) h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.1 }
.ld :is(.pg.start, .pg.szenen) p { margin: 0 }
.ld :is(.pg.start, .pg.szenen) .ruhe h2, .ld :is(.pg.start, .pg.szenen) .szene h2 { font-size: var(--fs-24); margin-bottom: var(--s4) }
@media (min-width: 940px) { .ld :is(.pg.start, .pg.szenen) .ruhe h2, .ld :is(.pg.start, .pg.szenen) .szene h2 { font-size: var(--fs-30) } }
.ld :is(.pg.start, .pg.szenen) .ruhe, .ld :is(.pg.start, .pg.szenen) .szene.geteilt { padding-top: var(--abschnitt) }
.ld :is(.pg.start, .pg.szenen) .lauf { color: var(--muted); max-width: 60ch; line-height: 1.55 }
.ld :is(.pg.start, .pg.szenen) .lauf b { color: var(--text); font-weight: 700 }

/* Kein Hintergrund-Verlauf auf der neuen Startseite (Pauls Liste: generische Verlaeufe) */
.ld:has(> .pg.start), .ld:has(> .pg.szenen) { background-image: none }

/* ---- Knoepfe der neuen Seiten: ein Ton, kein Verlauf, kein Schatten ---- */
.ld .knopf {
    display: inline-flex; align-items: center; justify-content: center; height: var(--ctl-h); padding: 0 22px;
    border: 1px solid var(--acc); background: var(--acc); color: #fff; font: 800 var(--fs-15) var(--font); letter-spacing: .01em;
    border-radius: var(--r-ctl); text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background var(--dauer-kurz), border-color var(--dauer-kurz), color var(--dauer-kurz), transform var(--dauer-kurz)
}
@media (hover: hover) { .ld .knopf:hover { background: var(--cyan); border-color: var(--cyan); color: #000; transform: translateY(-1px) } }
.ld .textlink { color: var(--cyan); text-decoration: none; font-weight: 700; border-bottom: 1px solid rgba(2, 255, 255, .35) }

/* ---- Die eine Kopfzeile (KundenKopf): eine Zeile, am Handy nur Logo und Menue ---- */
.ld .mast.kundenkopf { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--dim) }
.ld .mast.kundenkopf .in { padding-top: 0; padding-bottom: 0; height: 52px; gap: var(--s4); flex-wrap: nowrap }
.ld .mast.kundenkopf .wm .mark { height: 28px; width: 28px; border-radius: 50% }
.ld .mast.kundenkopf .tabs { display: flex; align-items: center; gap: 2px; margin-left: auto; order: 0; width: auto; overflow: visible; justify-content: flex-end }
.ld .mast.kundenkopf .tabs .tab { display: none }
/* Unter 700 px haengt die Liste an der rechten Kante der Kopfzeile, nicht am Menue-Knopf: mit dem
   Warenkorb-Knopf daneben ragte sie sonst links aus dem Bild (Gegenprobe 15.09.2026, 391 px: -15 px) */
.ld .mast.kundenkopf .in { position: relative }
.ld .mast.kundenkopf .tabs .mehr { position: static; flex: 0 0 auto }
.ld .mast.kundenkopf .tabs .mehr summary { width: auto; height: 36px; padding: 0 12px; border: 1px solid var(--line); color: var(--text); border-radius: var(--r-ctl) }
.ld .mast.kundenkopf .tabs .mehr .menue { left: auto; right: var(--wrap-rand, 14px); min-width: 250px; background: var(--p2); box-shadow: none; border-radius: var(--r-card); top: calc(100% + 4px) }
.ld .mast.kundenkopf .tabs .mehr .menue .trenn { display: block; height: 1px; background: var(--dim); margin: 6px 8px }
.ld .mast.kundenkopf .kopfknopf { display: none }
@media (min-width: 700px) {
    .ld .mast.kundenkopf .in { height: 66px }
    .ld .mast.kundenkopf .tabs { margin-left: var(--s5); justify-content: flex-start; gap: 0; align-self: stretch }
    .ld .mast.kundenkopf .tabs .tab, .ld .mast.kundenkopf .tabs .mehr summary {
        display: inline-flex; align-items: center; height: 66px; min-height: 0; padding: 0 2px; margin: 0 var(--s4) 0 0;
        border: 0; border-radius: 0; background: none; color: var(--muted); font: 600 var(--fs-15) var(--font); letter-spacing: 0; position: relative
    }
    .ld .mast.kundenkopf .tabs .tab:hover, .ld .mast.kundenkopf .tabs .mehr summary:hover, .ld .mast.kundenkopf .tabs .mehr[open] summary { color: var(--text); background: none; border: 0 }
    /* box-shadow: betrieb-leisten.css legt dem aktiven Reiter der Betriebsseiten eine Magenta-Linie unter, hier nicht */
    .ld .mast.kundenkopf .tabs .tab.on { color: #fff; font-weight: 700; background: none; border: 0; box-shadow: none }
    .ld .mast.kundenkopf .tabs .tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #fff }
    .ld .mast.kundenkopf .tabs .mehr summary { padding-right: 14px }
    .ld .mast.kundenkopf .tabs .mehr summary::after { position: absolute; right: 0; top: 50%; margin-top: -5px }
    .ld .mast.kundenkopf .tabs .mehr { position: relative }
    .ld .mast.kundenkopf .tabs .mehr .menue { left: 0; right: auto; top: calc(100% + 8px) }
    .ld .mast.kundenkopf .tabs .mehr .menue .nurhandy { display: none }
    .ld .mast.kundenkopf .kopfknopf {
        display: inline-flex; margin-left: auto; opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
        transition: opacity var(--dauer), transform var(--dauer), visibility 0s linear var(--dauer)
    }
    html.ld-hero-weg .ld .mast.kundenkopf .kopfknopf { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s }
}

/* ---- Hero, Bauart A: das Video fuehrt, der Text steht daneben oder darunter ---- */
.ld .pg.start .hero { padding-bottom: var(--s4) }
/* Breite immer die ganze Spalte (aspect-ratio plus max-height liesse sonst die Breite schrumpfen, 375 px: 235 statt 347);
   die Hoehe kommt aus der Breite (4:5) und wird vom Schirm gekappt. Das Poster liegt als Hintergrund je Fassung darunter,
   so laedt nur das passende und ohne Skript steht trotzdem ein Bild. */
.ld .pg.start .hero .medienfeld {
    position: relative; width: 100%; height: min(calc((100vw - 2 * var(--wrap-rand)) * 1.25), 52svh); overflow: hidden;
    background: #000 url('/video/laserdance/lasertag-hoch.webp') center / cover no-repeat
}
/* Kurze Schirme (iPhone SE, 667 px): das Video etwas niedriger, damit die erste Zeitenzeile auf Bildschirm 1 bleibt */
@media (max-height: 700px) and (max-width: 699px) {
    .ld .pg.start .hero .medienfeld { height: min(calc((100vw - 2 * var(--wrap-rand)) * 1.25), 40svh) }
    .ld .pg.start .zeiten { padding-top: var(--s3) }
    .ld .pg.start .zeiten .kopfzeile { margin-bottom: var(--s2) }
}
.ld .pg.start .hero .medienfeld video, .ld .pg.start .hero .medienfeld img { width: 100%; height: 100%; object-fit: cover; display: block }
.ld .pg.start .hero .medienfeld::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18%; background: linear-gradient(to bottom, rgba(8, 8, 13, 0), var(--bg)) }
.ld .pg.start .hero .text { padding-top: var(--s4) }
.ld .pg.start .hero h1 { font-size: var(--fs-30); margin-bottom: var(--s3) }
.ld .pg.start .hero .satz { font-size: var(--fs-16); color: var(--muted); margin-bottom: var(--s4); max-width: 34ch; line-height: 1.5 }
.ld .pg.start .hero .satz b { color: var(--text) }
.ld .pg.start .hero .knoepfe { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap }
.ld .pg.start .hero .ort { margin-top: 10px; font-size: var(--fs-13); color: var(--muted2); line-height: 1.5; white-space: nowrap }
.ld .pg.start .hero .ort a { color: var(--muted); text-decoration: none; font-weight: 700 }
@media (min-width: 700px) {
    .ld .pg.start .hero .medienfeld { height: auto; aspect-ratio: 16 / 9; border-radius: var(--rk-gross); background-image: url('/video/laserdance/lasertag-breit.webp') }
    .ld .pg.start .hero .medienfeld::after { display: none }
    .ld .pg.start .hero .text { padding-top: var(--s5) }
}
@media (min-width: 940px) {
    .ld .pg.start .hero { padding-top: var(--s7); padding-bottom: var(--s7) }
    .ld .pg.start .hero .in { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s7); align-items: center }
    .ld .pg.start .hero .text { padding: 0; order: -1 }
    .ld .pg.start .hero h1 { font-size: var(--fs-38) }
    .ld .pg.start .hero .satz { font-size: var(--fs-18) }
}

/* ---- Leiste: Zeitenstreifen, zwei gleich lange Zeilen, Chips gleich breit ---- */
.ld .pg.start .zeiten { background: var(--p1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s4) 0; min-height: 244px }
.ld .pg.start .zeiten .kopfzeile { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--fs-14); margin-bottom: var(--s3) }
.ld .pg.start .zeiten .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: jatmen 2.4s ease-in-out infinite }
.ld .pg.start .zeiten .punkt.zu { background: var(--muted2); animation: none }
.ld .pg.start .zeiten .zzeile { margin-top: var(--s3) }
.ld .pg.start .zeiten .zzeile .zh { font-size: var(--fs-13); font-weight: 700; margin-bottom: var(--s2) }
.ld .pg.start .zeiten .zzeile.lt .zh { color: var(--lime) }
.ld .pg.start .zeiten .zzeile.px .zh { color: var(--violett) }
.ld .pg.start .zeiten .chips { display: flex; gap: var(--s2) }
.ld .pg.start .zeiten .chip {
    flex: 1 1 0; min-width: 0; display: grid; place-items: center; gap: 2px; padding: 7px 4px;
    border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--p2); text-decoration: none; text-align: center; color: var(--text);
    transition: border-color var(--dauer-kurz), background var(--dauer-kurz)
}
.ld .pg.start .zeiten .chip b { font-size: var(--fs-15); font-weight: 800; line-height: 1.15 }
.ld .pg.start .zeiten .chip i { font-style: normal; font-size: var(--fs-11); font-weight: 600; color: var(--muted); line-height: 1.1 }
.ld .pg.start .zeiten .zzeile.lt .chip.naechste { border-color: var(--lime) }
.ld .pg.start .zeiten .zzeile.px .chip.naechste { border-color: var(--violett) }
.ld .pg.start .zeiten .chip.pc { display: none }
.ld .pg.start .zeiten .leer { color: var(--muted); font-size: var(--fs-14); padding: 8px 0 }
.ld .pg.start .zeiten .leer a { color: var(--cyan); font-weight: 700; text-decoration: none }
@media (hover: hover) {
    .ld .pg.start .zeiten .chip { transition: border-color var(--dauer-kurz), background var(--dauer-kurz), transform var(--dauer-kurz) }
    .ld .pg.start .zeiten .chip:hover { background: rgba(255, 255, 255, .08); transform: translateY(-2px) }
    .ld .pg.start .zeiten .zzeile.lt .chip:hover { border-color: var(--lime) }
    .ld .pg.start .zeiten .zzeile.px .chip:hover { border-color: var(--violett) }
    .ld .pg.start .duo .marke img { transition: transform var(--dauer-lang) ease }
    .ld .pg.start .duo .dro:hover .marke img { transform: scale(1.05) }
    .ld .pg.start .duo .dro:hover h3 { color: var(--cyan) }
    .ld .textlink { background-image: linear-gradient(var(--cyan), var(--cyan)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dauer) ease }
    .ld .textlink:hover { background-size: 100% 1px }
}
.ld .pg.start .zeiten .zahlsatz { margin-top: var(--s3); font-size: var(--fs-13); color: var(--muted2) }
@media (min-width: 700px) {
    .ld .pg.start .zeiten { padding: var(--s5) 0; min-height: 0 }
    .ld .pg.start .zeiten .zzeile { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: var(--s3) }
    .ld .pg.start .zeiten .zzeile .zh { margin: 0; font-size: var(--fs-14) }
    .ld .pg.start .zeiten .chip { flex: 0 0 auto; min-width: 96px; display: inline-flex; gap: 8px; padding: 8px 12px }
}
@media (min-width: 940px) { .ld .pg.start .zeiten .chip.pc { display: inline-flex } }

/* ---- Szene, geteilt: Bild als Anschnitt an der Kante, ab 700 px Zweispalter ---- */
.ld :is(.pg.start, .pg.szenen) .szene.geteilt .bild { width: 100%; aspect-ratio: 4 / 5; max-height: 56svh; overflow: hidden; border-radius: var(--r-card) }
.ld :is(.pg.start, .pg.szenen) .szene.geteilt .bild img { width: 100%; height: 100%; object-fit: cover; display: block }
.ld :is(.pg.start, .pg.szenen) .szene.geteilt .text { padding-top: var(--s5) }
.ld :is(.pg.start, .pg.szenen) .programm { list-style: none; margin: var(--s5) 0 0; padding: 0 }
.ld :is(.pg.start, .pg.szenen) .programm li { padding: var(--s3) 0; border-top: 1px solid var(--dim); display: flex; gap: var(--s3); align-items: baseline; justify-content: space-between }
.ld :is(.pg.start, .pg.szenen) .programm li:last-child { border-bottom: 1px solid var(--dim) }
.ld :is(.pg.start, .pg.szenen) .programm li span { color: var(--muted) }
.ld :is(.pg.start, .pg.szenen) .programm li b { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right }
.ld :is(.pg.start, .pg.szenen) .szene.geteilt .text .textlink { display: inline-block; margin-top: var(--s4) }
@media (min-width: 700px) {
    .ld :is(.pg.start, .pg.szenen) .szene.geteilt .in { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s7); align-items: center }
    .ld :is(.pg.start, .pg.szenen) .szene.geteilt .bild { width: auto; margin: 0; border-radius: var(--r-card); max-height: none }
    .ld :is(.pg.start, .pg.szenen) .szene.geteilt .text { padding: 0 }
    .ld :is(.pg.start, .pg.szenen) .szene.geteilt.rechts .bild { order: 2 }
    .ld :is(.pg.start, .pg.szenen) .szene.geteilt.rechts .in { grid-template-columns: 7fr 5fr }
}

/* ---- Ruhe: Duo (Pixel Games, Party-Lounge) mit Bildmarken ---- */
.ld .pg.start .duo .dro { display: grid; grid-template-columns: 96px 1fr; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--dim); align-items: center }
.ld .pg.start .duo .dro:last-child { border-bottom: 1px solid var(--dim) }
.ld .pg.start .duo .marke { aspect-ratio: 3 / 4; border-radius: var(--r-chip); overflow: hidden }
.ld .pg.start .duo .marke img { width: 100%; height: 100%; object-fit: cover; display: block }
.ld .pg.start .duo h3 { font-size: var(--fs-18); margin-bottom: 4px }
.ld .pg.start .duo .dro p { color: var(--muted); font-size: var(--fs-15); line-height: 1.5 }
.ld .pg.start .duo .dro .textlink { display: inline-block; margin-top: 8px; font-size: var(--fs-14) }
@media (min-width: 700px) {
    .ld .pg.start .duo .reihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) }
    .ld .pg.start .duo .dro { grid-template-columns: 160px 1fr; border-bottom: 1px solid var(--dim) }
}

/* ---- Leiste: Anlaesse, die ganze Zeile ist der Link ---- */
.ld .pg.start .anlaesse2 { background: var(--p1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: var(--abschnitt); padding: var(--s6) 0 }
.ld .pg.start .anlaesse2 h2 { font-size: var(--fs-24); margin-bottom: var(--s3) }
.ld .pg.start .anlaesse2 a { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--dim); text-decoration: none; color: var(--text); transition: background var(--dauer-kurz) }
.ld .pg.start .anlaesse2 a:last-child { border-bottom: 1px solid var(--dim) }
.ld .pg.start .anlaesse2 a b { display: block; font-size: var(--fs-16) }
.ld .pg.start .anlaesse2 a span { display: block; color: var(--muted); font-size: var(--fs-14); line-height: 1.45 }
.ld .pg.start .anlaesse2 a i { font-style: normal; color: var(--muted2); font-size: var(--fs-13); font-weight: 700; white-space: nowrap }
@media (hover: hover) { .ld .pg.start .anlaesse2 a:hover { background: rgba(255, 255, 255, .03) } .ld .pg.start .anlaesse2 a:hover i { color: var(--cyan) } }
@media (min-width: 940px) { .ld .pg.start .anlaesse2 h2 { font-size: var(--fs-30) } .ld .pg.start .anlaesse2 a { padding: var(--s4) 0 } }

/* ---- Ruhe: Fragen, details mit Haarlinie, ohne Kasten ---- */
.ld :is(.pg.start, .pg.szenen) .fragen details { border-top: 1px solid var(--dim); border-radius: 0; background: none; padding: 0 }
.ld :is(.pg.start, .pg.szenen) .fragen details:last-of-type { border-bottom: 1px solid var(--dim) }
.ld :is(.pg.start, .pg.szenen) .fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s3) 0; font-weight: 700; font-size: var(--fs-16) }
.ld :is(.pg.start, .pg.szenen) .fragen summary::-webkit-details-marker { display: none }
.ld :is(.pg.start, .pg.szenen) .fragen summary::after { content: "+"; font-size: var(--fs-22); font-weight: 400; color: var(--muted); transition: transform .2s }
.ld :is(.pg.start, .pg.szenen) .fragen details[open] summary::after { transform: rotate(45deg) }
.ld :is(.pg.start, .pg.szenen) .fragen p { color: var(--muted); padding: 0 0 var(--s4); max-width: 60ch; line-height: 1.5 }
@media (min-width: 700px) { .ld :is(.pg.start, .pg.szenen) .fragen .in { max-width: 760px } }

/* ---- Szene, voll: Break Dance, randlos, eckig ---- */
.ld .pg.start .szene.voll { margin-top: var(--abschnitt) }
.ld .pg.start .szene.voll .bild { aspect-ratio: 3 / 2; overflow: hidden }
.ld .pg.start .szene.voll .bild img { width: 100%; height: 100%; object-fit: cover; display: block }
.ld .pg.start .szene.voll .text { padding-top: var(--s5) }
.ld .pg.start .szene.voll .text p { color: var(--muted); max-width: 60ch; margin-bottom: var(--s3); line-height: 1.5 }
@media (min-width: 940px) { .ld .pg.start .szene.voll .bild { aspect-ratio: 21 / 9 } }

/* ---- Szene, voll: das Labyrinth (ArenaLabyrinth) mit einer Zeile unten ---- */
.ld .pg.start .szene.labyrinth { position: relative; margin-top: var(--abschnitt); height: min(62svh, 520px); min-height: 320px; overflow: hidden }
.ld .pg.start .szene.labyrinth .zeile { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 48px 0 20px; background: linear-gradient(to top, rgba(8, 8, 13, .92), rgba(8, 8, 13, 0)) }
.ld .pg.start .szene.labyrinth .zeile .wrap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s4); flex-wrap: wrap; font-size: var(--fs-14); color: var(--muted) }
.ld .pg.start .szene.labyrinth .zeile span { display: inline-flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline }
.ld .pg.start .szene.labyrinth .zeile b { color: var(--text); font-size: var(--fs-18) }

/* ---- Ruhe: Gut zu wissen, drei Spalten ohne Rahmen ---- */
.ld .pg.start .wissen2 .spalten { display: grid; gap: var(--s6) }
.ld .pg.start .wissen2 h3 { font-size: var(--fs-16); margin-bottom: var(--s2) }
.ld .pg.start .wissen2 .oz { list-style: none; margin: 0; padding: 0 }
.ld .pg.start .wissen2 .oz li { display: flex; justify-content: space-between; gap: var(--s3); padding: 6px 0; border-top: 1px solid var(--dim); font-size: var(--fs-15); color: var(--muted) }
.ld .pg.start .wissen2 .oz li:last-child { border-bottom: 1px solid var(--dim) }
.ld .pg.start .wissen2 .oz li.heute { color: var(--text); font-weight: 700 }
.ld .pg.start .wissen2 .oz li b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); white-space: nowrap }
.ld .pg.start .wissen2 p { color: var(--muted); font-size: var(--fs-15); line-height: 1.5 }
.ld .pg.start .wissen2 .textlink { display: inline-block; margin-top: 8px }
.ld .pg.start .wissen2 .ubahn { display: inline-block; font-size: var(--fs-11); font-weight: 800; padding: 1px 6px; border-radius: var(--r-chip); color: #fff; margin-right: 4px }
.ld .pg.start .wissen2 .u1 { background: #e2001a } .ld .pg.start .wissen2 .u2 { background: #a862a4 }
@media (min-width: 700px) { .ld .pg.start .wissen2 .spalten { grid-template-columns: 1fr 1fr; max-width: 820px } }
/* Seitlich der Rand von .wrap, sonst klebt der Fuss am Handy an der Kante (gemessen 15.09.2026: links 0 px) */
.ld :is(.pg.start, .pg.szenen) .kundenfuss { margin-top: var(--abschnitt); padding: var(--s6) var(--wrap-rand); border-top: 1px solid var(--dim) }
.ld :is(.pg.start, .pg.szenen) .kundenfuss .fussgrid { padding-top: 0 }

/* ---- Buchleiste (unter 700 px): faehrt hoch, sobald der Hero-Knopf aus dem Bild ist ---- */
.ld .buchleiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--p1); border-top: 1px solid var(--line);
    min-height: 56px; padding: 8px var(--wrap-rand, clamp(14px, 3vw, 26px)) calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: var(--s3); transform: translateY(110%); transition: transform var(--dauer, .25s) ease
}
html.ld-hero-weg .ld .buchleiste { transform: none }
.ld .buchleiste .stand { flex: 1 1 auto; min-width: 0; font-size: var(--fs-13); line-height: 1.25 }
.ld .buchleiste .stand b { display: block; font-size: var(--fs-14) }
.ld .buchleiste .stand span { color: var(--muted) }
.ld .buchleiste .knopf { flex: 0 0 auto; padding: 0 18px }
/* Ab 700 px uebernimmt der Knopf in der Kopfzeile, sonst staenden zwei Hauptknoepfe im Bild */
@media (min-width: 700px) { .ld .buchleiste { display: none } }

/* ============================================================
   Buchungsseiten in der Szenenfolge (.pg.szenen.buchen, seit 15.09.2026 Lasertag,
   LtPanel.razor). Kette: Szene (Hero B), Leiste (die Buchung), Szene (Ablauf),
   Ruhe (Gut zu wissen). Zwei Kundentypen (docs/alpha/14-anhang-kundentypen):
   oben der schnelle Weg mit der Rechnung vor dem ersten Klick, unten die Tiefe
   in Zeilen und details, nie als Rohtext.
   ============================================================ */
/* Unter 940 px ist die Buchleiste immer da; der Fuss braucht Platz darunter */
@media (max-width: 939px) { .ld .pg.szenen.buchen { padding-bottom: calc(64px + env(safe-area-inset-bottom)) } }

/* ---- Kopfzeile: der Warenkorb als Rahmenknopf mit Zaehler, Magenta erst mit Inhalt ---- */
.ld .mast.kundenkopf .korbknopf {
    display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 36px; padding: 0 12px; margin-left: 0;
    background: transparent; border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--text);
    font: 700 var(--fs-14) var(--font); cursor: pointer; transition: border-color var(--dauer-kurz, .12s), color var(--dauer-kurz, .12s)
}
.ld .mast.kundenkopf .korbknopf .cnt { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-chip); background: var(--p2); border: 1px solid var(--line); font-size: var(--fs-12); font-variant-numeric: tabular-nums }
.ld .mast.kundenkopf .korbknopf.voll { border-color: var(--acc) }
@media (max-width: 379px) { .ld .mast.kundenkopf .korbknopf .wort { display: none } .ld .mast.kundenkopf .korbknopf { padding: 0 8px } }
/* Der aktive Reiter: Text mit Unterstrich, kein Kasten (Regel oben in der Kopfzeile ab 700 px) */
.ld .mast.kundenkopf .korbknopf.voll .cnt { background: var(--acc); border-color: var(--acc); color: #fff }
@media (hover: hover) { .ld .mast.kundenkopf .korbknopf:hover { border-color: var(--cyan); color: var(--cyan) } }
@media (min-width: 700px) { .ld .mast.kundenkopf .korbknopf { margin-left: auto; height: 38px } }

/* ---- Hero, Bauart B: Text links 7/12, Foto 4:5 rechts 5/12, nie Text auf dem Bild; am Handy Foto oben, 40svh ---- */
.ld .pg.szenen .hero.b { padding-bottom: var(--s5) }
.ld .pg.szenen .hero.b .bild { width: 100%; aspect-ratio: 4 / 5; max-height: 36svh; overflow: hidden; border-radius: var(--r-card); background: #000 }
.ld .pg.szenen .hero.b .bild img { width: 100%; height: 100%; object-fit: cover; display: block }
.ld .pg.szenen .hero.b .text { padding-top: var(--s4) }
.ld .pg.szenen .hero.b h1 { font-size: var(--fs-30); margin-bottom: var(--s3) }
.ld .pg.szenen .hero.b .satz { font-size: var(--fs-16); color: var(--muted); max-width: 40ch; line-height: 1.5 }
.ld .pg.szenen .hero.b .satz b { color: var(--text); white-space: nowrap }
.ld .pg.szenen .hero.b .ort { margin-top: 10px; font-size: var(--fs-13); color: var(--muted2); line-height: 1.5 }
.ld .pg.szenen .hero.b .ort a { color: var(--muted); text-decoration: none; font-weight: 700 }
@media (min-width: 700px) {
    .ld .pg.szenen .hero.b { padding-top: var(--s6); padding-bottom: var(--s6) }
    .ld .pg.szenen .hero.b .in { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s7); align-items: center }
    .ld .pg.szenen .hero.b .bild { order: 2; max-height: 48svh }
    .ld .pg.szenen .hero.b .text { padding: 0 }
    .ld .pg.szenen .hero.b h1 { font-size: var(--fs-38) }
    .ld .pg.szenen .hero.b .satz { font-size: var(--fs-18) }
}

/* Die Tippzeile (ld-typer.js) im Produktton, der Cursor ohne Glimmen; feste Hoehe, damit nichts springt */
.ld .pg.szenen .hero.b .ueber { color: var(--prod); font-weight: 700; font-size: var(--fs-15); min-height: 1.5em; margin-bottom: var(--s2) }
.ld .pg.szenen .hero.b .ueber .caret { background: var(--prod); box-shadow: none; height: .95em }
/* Das Hero-Foto atmet: ein langsamer Zoom hin und zurueck, 26 Sekunden je Richtung */
.ld .pg.szenen .hero.b .bild img { animation: hero-atmen 26s ease-in-out infinite alternate; transform-origin: 50% 40% }
@keyframes hero-atmen { from { transform: scale(1) } to { transform: scale(1.07) } }

/* ---- Fotoband: zwoelf Fotos wandern langsam vorbei, jedes ein Knopf zur Galerie; Zeiger haelt an ---- */
.ld .pg.szenen .band { overflow: hidden; margin-top: var(--s4); padding: 2px 0 }
.ld .pg.szenen .band .lauf { display: flex; gap: 8px; width: max-content; animation: band-lauf 90s linear infinite }
.ld .pg.szenen .band .bf { flex: 0 0 auto; height: 132px; padding: 0; border: 0; background: #000; border-radius: var(--r-card); overflow: hidden; cursor: pointer; display: block; transition: outline-color var(--dauer-kurz); outline: 1px solid transparent; outline-offset: -1px }
.ld .pg.szenen .band .bf img { height: 100%; width: auto; display: block; transition: transform var(--dauer-lang) ease }
@media (hover: hover) {
    .ld .pg.szenen .band:hover .lauf { animation-play-state: paused }
    .ld .pg.szenen .band .bf:hover { outline-color: var(--cyan) }
    .ld .pg.szenen .band .bf:hover img { transform: scale(1.04) }
}
.ld .pg.szenen .band .bf:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px }
@keyframes band-lauf { from { transform: translate3d(0, 0, 0) } to { transform: translate3d(-50%, 0, 0) } }
@media (min-width: 700px) { .ld .pg.szenen .band { margin-top: 0; padding-bottom: var(--s6) } .ld .pg.szenen .band .bf { height: 190px } }

/* ---- Phaser-Schuesse (ld-laser.js): das Canvas liegt ueber dem Foto, das Foto bleibt antippbar ---- */
.ld .pg.szenen .szene .bild[data-laser] { position: relative }
.ld .pg.szenen .szene .bild canvas.laser { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block }

/* ---- Parallaxe beim Rollen (nur Browser mit Scroll-Zeitachse, sonst ruhig): das Szenenfoto gleitet leicht ---- */
@supports (animation-timeline: view()) {
    .ld :is(.pg.start, .pg.szenen) .szene.geteilt .bild img { scale: 1.12; animation: bild-gleiten linear both; animation-timeline: view(); animation-range: entry 0% exit 100% }
    @keyframes bild-gleiten { from { translate: 0 -5% } to { translate: 0 5% } }
}

/* ---- Leiste: die Buchung als ein Abschnitt, zwei Schritte mit Haarlinie, rechts ab 940 px der Pass ---- */
.ld .pg.szenen .buchung { background: var(--p1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s6) 0 }
.ld .pg.szenen .schritte { min-width: 0 }
.ld .pg.szenen .schritt + .schritt { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--dim); scroll-margin-top: 64px }
@media (min-width: 700px) { .ld .pg.szenen .schritt + .schritt { scroll-margin-top: 80px } }
.ld .pg.szenen .schritt h2 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: var(--fs-22); margin-bottom: var(--s4) }
.ld .pg.szenen .schritt h2 .nr { color: var(--prod); font-variant-numeric: tabular-nums }
.ld .pg.szenen .schritt h2 small { font-size: var(--fs-14); font-weight: 500; color: var(--muted); letter-spacing: 0; line-height: 1.3 }
.ld .pg.szenen .schritt .warn { margin-top: var(--s3) }

/* Tagesreihe: sieben Tage als Chips, geschlossene grau mit dem Wort; rollt am Handy seitlich in der ganzen Breite */
.ld .pg.szenen .tagesreihe { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--wrap-rand)) var(--s4); padding: 0 var(--wrap-rand) }
.ld .pg.szenen .tagesreihe::-webkit-scrollbar { display: none }
/* Der rechte Rand blendet aus: so sieht man, dass die Reihe weitergeht (nur solange sie breiter ist als der Schirm) */
@media (max-width: 699px) { .ld .pg.szenen .tagesreihe { mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent) } }
.ld .pg.szenen .tagchip {
    flex: 0 0 auto; min-width: 72px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px;
    background: var(--p2); border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--text); cursor: pointer; font-family: var(--font); text-align: left;
    transition: border-color var(--dauer-kurz), background var(--dauer-kurz)
}
.ld .pg.szenen .tagchip b { font-size: var(--fs-15); font-weight: 700; line-height: 1.2 }
.ld .pg.szenen .tagchip i { font-style: normal; font-size: var(--fs-12); color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.2 }
.ld .pg.szenen .tagchip.on { border-color: var(--prod); background: color-mix(in srgb, var(--prod) 14%, transparent) }
.ld .pg.szenen .tagchip.zu { background: transparent; border-color: var(--dim); color: var(--muted2); cursor: default }
.ld .pg.szenen .tagchip.zu b { color: var(--muted); font-weight: 600 }
@media (hover: hover) { .ld .pg.szenen .tagchip:not(.zu):not(.on):hover { border-color: var(--prod); background: rgba(255, 255, 255, .07) } }

/* Datum, Spieler und Runden auf einer Grundlinie; am Handy das Datum in voller Breite, die Stepper darunter nebeneinander */
.ld .pg.szenen .g2.grund { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: end }
.ld .pg.szenen .g2.grund > .datum { grid-column: 1 / -1 }
@media (min-width: 700px) {
    .ld .pg.szenen .g2.grund { grid-template-columns: minmax(240px, 1fr) auto auto; gap: var(--s5) }
    .ld .pg.szenen .g2.grund > .datum { grid-column: auto }
}

/* Die Rechnung: Zeilen mit Haarlinie, die Summe gross; die Linie darueber traegt den Produktton */
.ld .pg.szenen .rechnung { margin-top: var(--s5); border-top: 1px solid var(--prod); padding-top: var(--s2); max-width: 560px }
.ld .pg.szenen .rechnung .rz { display: grid; grid-template-columns: 1fr auto auto; gap: 0 var(--s3); align-items: baseline; padding: 8px 0; font-size: var(--fs-15); border-bottom: 1px solid var(--dim) }
.ld .pg.szenen .rechnung .rz .je { color: var(--muted); font-size: var(--fs-13); white-space: nowrap; font-variant-numeric: tabular-nums }
.ld .pg.szenen .rechnung .rz b { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 64px }
.ld .pg.szenen .rechnung .rz.summe { grid-template-columns: 1fr auto; border-bottom: 0; padding-top: 10px }
.ld .pg.szenen .rechnung .rz.summe > span:first-child { font-weight: 700 }
.ld .pg.szenen .rechnung .rz.summe .je { grid-row: 2; grid-column: 1; white-space: normal }
.ld .pg.szenen .rechnung .rz.summe b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: var(--fs-22); font-weight: 800 }
.ld .pg.szenen .rechnung .linkbtn { display: inline-block; margin-top: var(--s3); font-size: var(--fs-14); text-align: left; line-height: 1.4; text-decoration: none; border-bottom: 1px solid rgba(2, 255, 255, .35) }
.ld .pg.szenen .rechnung .linkbtn.an { color: var(--muted); border-bottom-color: var(--dim) }

/* Schritt 2: der Satz unter der Ueberschrift, dann die Kacheln (Zustaende aus laserdance-shop.css), nur Beginn und ein Wort */
.ld .pg.szenen .satzzeile { color: var(--muted); font-size: var(--fs-14); margin: calc(-1 * var(--s2)) 0 var(--s4); max-width: 60ch; line-height: 1.5 }
.ld .pg.szenen .schritt > .linkbtn { display: inline-block; margin-bottom: var(--s4); font-size: var(--fs-14); text-decoration: none; border-bottom: 1px solid rgba(2, 255, 255, .35) }
.ld .pg.szenen .zeitchips { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 0 }
.ld .pg.szenen .zeitchips .zc { min-height: 60px; padding: 8px 10px; gap: 2px; border-radius: var(--r-ctl); font-family: var(--font); justify-content: center }
.ld .pg.szenen .zeitchips .zc b { font-size: var(--fs-18) }
.ld .pg.szenen .zeitchips .zc .zcfrei { margin-top: 0; font-size: var(--fs-12); line-height: 1.2 }
.ld .pg.szenen .zeitchips .zc .zcfrei:empty { display: none }
.ld .pg.szenen .zeitchips .zc.on { box-shadow: none }
.ld .pg.szenen .zeitchips .zc.on .zcfrei { font-weight: 700 }
/* Rot ist Gefahr: der Grund an einer vollen Kachel ist Information, kein Alarm */
.ld .pg.szenen .zeitchips .zc.voll .zcfrei, .ld .pg.szenen .zeitchips .zc.limit .zcfrei { color: var(--muted) }
/* Hover auf Pfeilen, Stepper und Textknoepfen in Cyan, nicht Magenta (Magenta nur am Kaufknopf) */
@media (hover: hover) {
    .ld .pg.szenen .tagpf:hover { color: var(--cyan); border-color: var(--cyan) }
    .ld .pg.szenen .step button:hover { background: rgba(2, 255, 255, .14); color: var(--cyan) }
    .ld .pg.szenen .linkbtn:hover { color: var(--cyan); border-bottom-color: var(--cyan) }
}
.ld .pg.szenen .folge .linkbtn { margin-left: auto; font-size: var(--fs-13); text-decoration: none; border-bottom: 1px solid rgba(2, 255, 255, .35) }
@media (min-width: 700px) { .ld .pg.szenen .zeitchips { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) } }

/* Die Folge: Beginn je Runde und das Ende in einer Zeile, ohne Kasten */
.ld .pg.szenen .folge { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: var(--s4) 0 0; padding: var(--s3) 0 0; background: none; border-left: 0; border-top: 1px solid var(--dim) }
.ld .pg.szenen .folge .fl { text-transform: none; letter-spacing: 0; font-size: var(--fs-14); font-weight: 600; color: var(--muted); margin: 0 }
.ld .pg.szenen .folge .fz { display: inline-flex; gap: 4px; padding: 0; border-top: 0; font-size: var(--fs-14) }
.ld .pg.szenen .folge .fz b { margin: 0 }

/* Der Pass: ab 940 px rechts, sticky; darunter uebernimmt die Buchleiste */
.ld .pg.szenen .pass-wrap { display: none }
@media (min-width: 940px) {
    .ld .pg.szenen .buchung .in { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s7); align-items: start }
    .ld .pg.szenen .pass-wrap { display: block; position: sticky; top: calc(66px + var(--s4)) }
}
.ld .pg.szenen .pass { background: var(--p2); border: 1px solid color-mix(in srgb, var(--prod) 45%, transparent); border-radius: var(--r-card) }
.ld .pg.szenen .pass::before, .ld .pg.szenen .pass::after { display: none }
.ld .pg.szenen .pass .top { background: none; color: var(--text); padding: 14px 17px 12px; border-bottom: 1px solid var(--dim) }
.ld .pg.szenen .pass .top .t { font-size: var(--fs-16); letter-spacing: 0 }
.ld .pg.szenen .pass .amt { font-size: var(--fs-24); line-height: 1.1; color: var(--prod); text-shadow: none; font-weight: 800; font-variant-numeric: tabular-nums }
/* Der eine Knopf, flach wie .knopf: kein Verlauf, kein Schatten (laserdance-system.css gibt .cta beides); gesperrt als Rahmen mit dem Hinweis */
.ld .pg.szenen .cta.haupt, .ld .buchleiste .cta.haupt {
    background: var(--acc); border: 1px solid var(--acc); color: #fff; box-shadow: none; filter: none; border-radius: var(--r-ctl);
    font-size: var(--fs-15); font-weight: 800; letter-spacing: .01em; transition: background var(--dauer-kurz), border-color var(--dauer-kurz), color var(--dauer-kurz), transform var(--dauer-kurz)
}
.ld .pg.szenen .pass .cta.haupt { padding: 0 22px; height: var(--ctl-h) }
@media (hover: hover) {
    .ld .pg.szenen .cta.haupt:hover:not(:disabled), .ld .buchleiste .cta.haupt:hover:not(:disabled) { background: var(--cyan); border-color: var(--cyan); color: #000; box-shadow: none; filter: none; transform: translateY(-1px) }
}
.ld .pg.szenen .cta.haupt:disabled { background: transparent; border-color: var(--line); color: var(--muted); opacity: 1; box-shadow: none; cursor: default }
/* Ohne Wahl ist der Knopf ein Rahmenknopf, der zu Schritt 2 rollt: kein toter Knopf, aber auch kein Magenta ohne Kauf */
.ld .pg.szenen .cta.haupt.still, .ld .buchleiste .cta.haupt.still { background: transparent; border-color: var(--line); color: var(--text) }
.ld a.knopf { touch-action: manipulation }
.ld .pg.szenen .pass .klein { margin-top: 10px; font-size: var(--fs-12); color: var(--muted2); line-height: 1.45 }

/* Buchleiste auf Buchungsseiten: von Anfang an da (kein Hero-Knopf), bis 939 px, dann der Pass */
.ld .buchleiste.immer { transform: none }
.ld .buchleiste .knopf { width: auto; margin-top: 0; height: var(--ctl-h); padding: 0 18px; letter-spacing: .01em }
@media (min-width: 700px) and (max-width: 939px) { .ld .buchleiste.immer { display: flex } }

/* ---- Szene, geteilt: So laeuft eure Runde, vier Schritte mit Nummer im Produktton ---- */
.ld .pg.szenen .ablaufliste { list-style: none; margin: var(--s5) 0 0; padding: 0; counter-reset: schritt }
.ld .pg.szenen .ablaufliste li { counter-increment: schritt; display: grid; grid-template-columns: 28px 1fr; gap: 2px var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--dim) }
.ld .pg.szenen .ablaufliste li:last-child { border-bottom: 1px solid var(--dim) }
.ld .pg.szenen .ablaufliste li::before { content: counter(schritt); grid-row: 1 / span 2; color: var(--prod); font-weight: 800; font-size: var(--fs-18); font-variant-numeric: tabular-nums; line-height: 1.25 }
.ld .pg.szenen .ablaufliste li b { font-size: var(--fs-16) }
.ld .pg.szenen .ablaufliste li span { color: var(--muted); font-size: var(--fs-15); line-height: 1.45 }

/* ---- Ruhe: Gut zu wissen, Regeln als Zeilen, Preise und Ausruestung als details, Fragen ---- */
.ld .pg.szenen .wissen3 .regeln, .ld .pg.szenen .wissen3 .mehr { max-width: 760px }
.ld .pg.szenen .wissen3 .rr { display: grid; grid-template-columns: 88px 1fr; gap: var(--s3); padding: 10px 0; border-top: 1px solid var(--dim); font-size: var(--fs-15); align-items: baseline }
.ld .pg.szenen .wissen3 .rr:last-child { border-bottom: 1px solid var(--dim) }
.ld .pg.szenen .wissen3 .rr span { color: var(--muted) }
.ld .pg.szenen .wissen3 .rr b { font-weight: 600; color: var(--text) }
.ld .pg.szenen .wissen3 .mehr { margin-top: var(--s5) }
.ld .pg.szenen .wissen3 .tabwrap { overflow-x: auto; padding-bottom: var(--s3) }
.ld .pg.szenen .wissen3 .preistab { width: 100%; border-collapse: collapse; font-size: var(--fs-14) }
.ld .pg.szenen .wissen3 .preistab th { text-align: left; font-size: var(--fs-12); font-weight: 600; color: var(--muted); padding: 4px 8px 6px 0; border-bottom: 1px solid var(--line) }
.ld .pg.szenen .wissen3 .preistab th.r, .ld .pg.szenen .wissen3 .preistab td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.ld .pg.szenen .wissen3 .preistab td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--dim); color: var(--muted) }
.ld .pg.szenen .wissen3 .preistab td b { color: var(--text) }
.ld .pg.szenen .wissen3 .preistab tr:last-child td { border-bottom: 0 }
.ld .pg.szenen .wissen3 .mehr .klein { font-size: var(--fs-13) }
.ld .pg.szenen .wissen3 .ausr { display: grid; gap: var(--s3); padding-bottom: var(--s4) }
.ld .pg.szenen .wissen3 .ausr div { display: grid; gap: 2px }
.ld .pg.szenen .wissen3 .ausr b { font-size: var(--fs-15) }
.ld .pg.szenen .wissen3 .ausr span { color: var(--muted); font-size: var(--fs-15); line-height: 1.45 }
@media (min-width: 700px) { .ld .pg.szenen .wissen3 .ausr { grid-template-columns: 1fr 1fr; gap: var(--s5) } }

/* ---- Erscheinen beim Rollen: nur Deko, nie Bedienung; Versatz in Gruppen ---- */
html.ld-erscheinen .ld :is(.pg.start, .pg.szenen) [data-erscheint="seite"] { transform: translateX(24px) }
html.ld-erscheinen .ld :is(.pg.start, .pg.szenen) [data-erscheint].da { transform: none }
.ld :is(.pg.start, .pg.szenen) .versatz > *:nth-child(2) { transition-delay: 90ms }
.ld :is(.pg.start, .pg.szenen) .versatz > *:nth-child(3) { transition-delay: 180ms }
@media (prefers-reduced-motion: reduce) {
    .ld .pg.szenen .hero.b .bild img { animation: none }
    .ld .pg.szenen .cta.haupt:hover, .ld .buchleiste .cta.haupt:hover, .ld .knopf:hover { transform: none }
    .ld :is(.pg.start, .pg.szenen) .fragen summary::after { transition: none }
    .ld .textlink { transition: none }
    .ld .pg.szenen .band { overflow-x: auto; scrollbar-width: none } .ld .pg.szenen .band .lauf { animation: none }
    .ld :is(.pg.start, .pg.szenen) .szene.geteilt .bild img { animation: none; scale: none; translate: none }
    html.ld-erscheinen .ld :is(.pg.start, .pg.szenen) [data-erscheint], html.ld-erscheinen .ld :is(.pg.start, .pg.szenen) [data-erscheint="seite"] { opacity: 1; transform: none; transition: none }
    .ld .buchleiste, .ld .mast.kundenkopf .kopfknopf, .ld .knopf { transition: none }
    .ld .pg.start .zeiten .punkt { animation: none }
}

/* ============================================================
   Das Labyrinth (ArenaLabyrinth.razor, ld-arena.js): die endlose Fahrt durch
   die Arena als CSS-3D-Raum, die Kamera fliegt per Skript (eine Transform je
   Bild auf .welt und .kamera). Nur transform und opacity. Ruht ausserhalb des
   Bildes (.ruht), bei verstecktem Tab (.versteckt), bei offener Galerie
   (.pause), bei reduced-motion (Standbild), und ohne Grafikbeschleunigung
   (.langsam: Raum weg, ruhiger Grund). Die Fotos an den Waenden sind Knoepfe
   und die einzigen Stellen im Raum, die auf den Zeiger reagieren.
   ============================================================ */
.ld .arena { position: absolute; inset: 0; overflow: hidden; background: var(--bg); isolation: isolate; pointer-events: none }
.ld .arena .raum { position: absolute; inset: 0; perspective: 700px; perspective-origin: 50% 50% }
.ld .arena .kamera { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform }
.ld .arena .welt { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; will-change: transform }
.ld .arena .f { position: absolute; left: 0; top: 0; transform-origin: 0 0; background-repeat: repeat; backface-visibility: hidden }
/* Das Foto als gerahmtes Bild an der Wand: dunkler Rahmen, feine Kante, kein Leuchten am Bild selbst */
.ld .arena .f.foto {
    pointer-events: auto; cursor: pointer; padding: 0; background-color: #000; background-size: cover; background-position: center; background-clip: padding-box;
    border: 7px solid #0d0c14; outline: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 8px 30px rgba(0, 0, 0, .6); transition: outline-color var(--dauer-kurz, .12s)
}
@media (hover: hover) { .ld .arena .f.foto:hover { outline-color: rgba(2, 255, 255, .8) } }
/* Der Lichtfleck auf dem Boden vor jedem Bild, als laege ein Spot darauf */
.ld .arena .f.licht { background: radial-gradient(closest-side, rgba(150, 180, 255, .16), rgba(150, 180, 255, 0)); backface-visibility: visible }
.ld .arena .dunst { position: absolute; inset: 0; background: radial-gradient(42% 48% at 50% 50%, rgba(12, 10, 24, .62) 0%, rgba(12, 10, 24, .3) 40%, rgba(12, 10, 24, 0) 72%), radial-gradient(95% 95% at 50% 50%, rgba(8, 8, 13, 0) 62%, rgba(8, 8, 13, .8) 100%) }
.ld .arena .schwade { position: absolute; width: 60%; height: 60%; left: 20%; top: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 27, 255, .16), rgba(200, 27, 255, 0)); animation: arena-treiben 22s ease-in-out infinite alternate }
.ld .arena .schwade.zwei { background: radial-gradient(closest-side, rgba(2, 255, 255, .10), rgba(2, 255, 255, 0)); animation-duration: 31s; animation-direction: alternate-reverse; left: 30%; top: 10% }
@keyframes arena-treiben { from { transform: translate3d(-8%, -4%, 0) scale(1) } to { transform: translate3d(8%, 5%, 0) scale(1.15) } }
.ld .arena.ruht .schwade, .ld .arena.versteckt .schwade, .ld .arena.pause .schwade { animation-play-state: paused }
@media (prefers-reduced-motion: reduce) { .ld .arena .schwade { animation: none } }
.ld .arena.langsam .raum, .ld .arena.langsam .schwade { display: none }
.ld .arena.langsam { background: radial-gradient(80% 60% at 50% 60%, #1a1030, var(--bg) 70%) }

/* ---- Die Galerie (ld-galerie.js): ein Foto gross, Pfeile, Schliessen, Zaehler; liegt direkt im body ---- */
.galerie { position: fixed; inset: 0; z-index: 90; background: rgba(8, 8, 13, .96); display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; grid-template-rows: minmax(0, 1fr) auto; align-items: center; padding: 64px 16px 16px; font-family: var(--font) }
.galerie[hidden] { display: none }
.galerie figure { grid-column: 2; grid-row: 1; margin: 0; display: grid; justify-items: center; align-content: center; gap: 12px; min-width: 0; min-height: 0; height: 100% }
.galerie img { max-width: 100%; max-height: min(76vh, 100%); width: auto; height: auto; border-radius: var(--r-card, 8px); display: block; background: #000 }
.galerie figcaption { color: var(--muted); font-size: var(--fs-14); text-align: center; max-width: 60ch; line-height: 1.4 }
.galerie button { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: var(--r-ctl, 6px); width: 44px; height: 44px; padding: 0; font: 400 var(--fs-24) var(--font); line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .12s, color .12s }
.galerie button:hover, .galerie button:focus-visible { border-color: var(--cyan); color: var(--cyan); outline: none }
.galerie .gz { position: absolute; top: 12px; right: 12px }
.galerie .gv { grid-column: 1; grid-row: 1; justify-self: start } .galerie .gn { grid-column: 3; grid-row: 1; justify-self: end }
.galerie .gzahl { grid-column: 2; grid-row: 2; text-align: center; color: var(--muted2); font-size: var(--fs-13); font-variant-numeric: tabular-nums; padding-top: 8px }
@media (max-width: 699px) {
    .galerie { grid-template-columns: minmax(0, 1fr); padding: 60px 14px 72px }
    .galerie figure { grid-column: 1 } .galerie .gzahl { grid-column: 1 }
    .galerie img { max-height: min(70vh, 100%) }
    .galerie .gv, .galerie .gn { position: absolute; bottom: 14px } .galerie .gv { left: 14px } .galerie .gn { right: 14px }
}
/* Ein Textlink als Knopf (Galerie oeffnen): sieht aus wie der Link, ist aber ein button */
.ld button.textlink { background: none; border: 0; border-bottom: 1px solid rgba(2, 255, 255, .35); padding: 0; font: inherit; font-weight: 700; color: var(--cyan); cursor: pointer; border-radius: 0 }