/* ============================================================
   Die Bausteine (Paket 1, 28.09.2026)
   ------------------------------------------------------------
   docs/alpha/19-bauplan.md, Paket 1: "Farben und Masse als eine Quelle, dazu
   die Teile, aus denen alles besteht". Die Teile liegen unter
   Components/Laserdance/Bausteine/, ihr Aussehen hier.

   Drei Regeln fuer diese Datei:

   1. KEIN einziger Farbwert und keine Schriftgroesse steht hier als Zahl.
      Jede Farbe ist ein Token aus dem :root von laserdance-system.css, jede
      Schriftgroesse ein --fs-, jeder Abstand ein --s-. Wer das bricht, wird
      vom Pruefstand (tools/tokens-pruefen.py) gemeldet, nicht von einem
      Menschen beim Durchblaettern.
   2. Nur Klassen mit dem Vorsatz bs-. Der Vorsatz war am 28.09.2026 im ganzen
      Haus frei (geprueft ueber alle css und js). Damit kann keine Regel einer
      anderen Datei einen Baustein treffen und umgekehrt - die Lehre vom
      19.09.2026, als zwei Formen dieselbe Klasse .galerie trugen und
      /breakdance vier Tage unbenutzbar war.
   3. Alles unter .ld, wie im ganzen Haus, damit Bootstrap nichts uebernimmt.

   Wird als LETZTE Datei geladen (nach laserdance-kunde.css), damit ein
   Baustein sich auf sein Aussehen verlassen kann.

   ============================================================
   DER RHYTHMUS (Paul, 28.09.2026: "die Abstaende und der Rhythmus")
   ------------------------------------------------------------
   Pauls Befund war: "Sachen kleben aneinander oder schwimmen, jede Seite
   atmet anders". Er hatte recht - in der ersten Fassung stand mal --s3, mal
   --s4, mal --s5 vor demselben Fall. Ab jetzt gibt es nur noch VIER Abstaende,
   und jeder hat genau eine Bedeutung:

       --s2   8px   zwischen Zeilen, die zusammengehoeren (Zeit und Ende)
       --s3  12px   Innenabstand jeder Flaeche (Kachel, Karte, Meldung)
       --s5  24px   zwischen zwei Bausteinen im selben Abschnitt
       --s6  32px   zwischen zwei Abschnitten

   Nichts anderes. Kein --s1 als Abstand (nur noch innerhalb einer Zeile),
   kein --s4. Wer einen fuenften Abstand braucht, hat einen Fall uebersehen.

   Dazu eine feste Hoehe fuer alles zum Antippen (--ctl-h) und EINE Zeilenhoehe
   fuer Fliesstext. Deshalb stehen unten keine Margins mehr an einzelnen
   Bausteinen: den Abstand macht der Fluss (.bs-weg > * + *), nicht der
   Baustein selbst. So atmet jede Seite gleich, egal welche Teile darauf
   stehen.

   ============================================================
   RUHIGER UND TEURER (Paul, 28.09.2026)
   ------------------------------------------------------------
   Auf die Frage nach der Richtung: "ruhiger und teurer, weniger Neon, feinere
   Linien, mehr Luft, EIN Akzent". Das heisst hier konkret:

   - Magenta ist ab jetzt AUSSCHLIESSLICH die Farbe des einen Hauptknopfs und
     der Auswahl. Sonst nirgends.
   - Cyan ist nur noch der Tastaturfokus (Barrierefreiheit), kein Hover-Effekt,
     keine Preisfarbe.
   - Gruen und Lime sind ganz weg: der Haken im Fortschritt traegt die
     Textfarbe. Gelb und Rot bleiben, aber nur fuer Geld und Gefahr.
   - Ein Preis stech nicht mehr durch FARBE hervor, sondern durch Gewicht.
   - Linien sind duenn und leise (--dim), Flaechen unterscheiden sich durch
     ihren Grund, nicht durch kraeftige Raender.
   ============================================================ */

/* ------------------------------------------------------------ Meldung
   Der Ton liegt auf der ganzen Kante, nicht als dicker Balken an der linken
   Seite. Der Balken war hier zuerst drin und ist am 28.09.2026 wieder
   herausgeflogen: Paul hat genau diese Form am 23.09.2026 am Zeitraster
   beanstandet ("dieser Accent links bei Slots ist AI-Slop"), und der
   Design-Pruefstand des Impeccable-Werkzeugs hat sie an derselben Stelle
   unabhaengig davon gefunden. Zweimal dasselbe Urteil reicht.

   Die Farbe bleibt trotzdem lesbar, weil sie die ganze Umrandung traegt, und
   sie ist nie allein die Nachricht: der Ton steht auch im Text. */
.ld .bs-meldung {
    display: flex; align-items: baseline; gap: var(--s3);
    padding: var(--s3); border: 1px solid var(--dim); background: var(--p1);
    border-radius: var(--r-ctl, 6px); font-size: var(--fs-14); line-height: 1.5
}
.ld .bs-meldung.geld { border-color: var(--ampel-gelb) }
.ld .bs-meldung.gefahr { border-color: var(--red) }
.ld .bs-mtext { flex: 1 1 auto; min-width: 0 }
.ld .bs-mausweg {
    flex: 0 0 auto; border: 1px solid var(--line); background: transparent;
    color: var(--text); font-family: inherit; font-weight: 700;
    font-size: var(--fs-13); padding: var(--s2) var(--s3);
    border-radius: var(--r-ctl, 6px); cursor: pointer
}
.ld .bs-mausweg:hover { border-color: var(--text) }

/* ------------------------------------------------------------ Fortschritt */
.ld .bs-fschritte {
    display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
    list-style: none; margin: 0; padding: 0
}
.ld .bs-fschritte li {
    display: flex; flex-direction: column; min-width: 0;
    font-size: var(--fs-13); line-height: 1.5; color: var(--muted2)
}
/* Der Haken steht VOR dem Wort, damit die Reihe auch in Graustufen lesbar ist.
   Er traegt seit 28.09.2026 keine eigene Farbe mehr (Paul: weniger Neon). */
.ld .bs-fschritte li.fertig { color: var(--muted) }
.ld .bs-fschritte li.dran { color: var(--text) }
.ld .bs-fschritte li.dran .bs-fname { font-weight: 800 }
.ld .bs-fwert { color: var(--muted2); font-size: var(--fs-12) }
.ld .bs-ffehlt { margin: var(--s2) 0 0; font-size: var(--fs-13); color: var(--muted) }

/* ------------------------------------------------------------ Zeitraster */
.ld .bs-zsatz { margin: 0 0 var(--s3); font-size: var(--fs-14); line-height: 1.5; color: var(--muted) }
/* Zwei Spalten, auf JEDER Breite (Paul, 28.09.2026). Vier Spalten am grossen
   Schirm hatten die Ordnung wieder zerschnitten: dann stand in einer Spalte
   nicht mehr ein Raum, sondern ein Rest. Eine Spalte ist ein Raum, und das
   muss auf jedem Geraet dasselbe heissen. */
/* Beide Spalten auf EINER Zeitachse: jede Startzeit ist eine Zeile, jeder Raum
   eine Spalte, und der Platz jeder Kachel steht als grid-row und grid-column
   am Element (Paul, 28.09.2026: "es soll auch die Zeit korrekt positioniert
   sein"). Quer gelesen ist es dieselbe Minute, nach unten geht die Zeit
   vorwaerts. Wo ein Raum nichts anbietet, bleibt das Feld leer. */
.ld .bs-zeitraster {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s3); align-items: stretch;
    /* EINE ZEILE SIND FUENF MINUTEN. Der Anfang einer Kachel steht an ihrer
       Startzeit, ihre Hoehe entspricht ihrer Dauer. Damit greifen die beiden
       Raeume genau so ineinander wie in Wirklichkeit: die Runde nebenan
       beginnt, waehrend diese noch laeuft.

       Der Massstab: fuenf Minuten sind --s2 (8px), eine halbe Stunde also
       48px. Vorher waren es 12px je fuenf Minuten, und der Tag wurde
       1.100px hoch, ohne mehr zu sagen. minmax laesst eine Zeile wachsen,
       wenn eine Kachel doch mehr Text traegt - dann verschiebt sich alles
       darunter gleich weit, die Achse bleibt also stimmig. */
    grid-auto-rows: minmax(var(--s2), auto)
}
/* Der Abstand zwischen zwei Kacheln ist keine Luecke im Raster, sondern liegt
   INNERHALB der Kachel - sonst waere die Hoehe nicht mehr die Dauer. */
.ld .bs-zeitraster > .bs-zeit { margin-bottom: var(--s2); min-height: 0 }
/* Nur ein Raum: dann steht die Spalte nicht halb so breit da */
.ld .bs-zeitraster:has(> .bs-zeit:only-child) { grid-template-columns: minmax(0, 1fr) }
/* Klein halten (Paul, 28.09.2026: "der Inhalt ist so gross"): in einer Kachel
   steht eine Uhrzeit und ein Nebensatz, mehr nicht. Sie braucht keine
   Knopfhoehe und keine Polsterung wie ein Formularfeld. Die Startzeit ist das
   Groesste darin, alles andere tritt zurueck. */
.ld .bs-zeit {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    padding: var(--s2) var(--s3);
    border: 1px solid var(--dim); border-radius: var(--r-ctl, 6px);
    background: var(--p1); color: var(--text);
    font-family: inherit; text-align: left; cursor: pointer; overflow: hidden
}
.ld .bs-zeit .bs-zvon { font-weight: 800; font-size: var(--fs-14); line-height: 1.25 }
.ld .bs-zeit .bs-zbis, .ld .bs-zeit .bs-zhinweis { font-size: var(--fs-11); line-height: 1.35; color: var(--muted) }
.ld .bs-zeit.frei:hover { border-color: var(--line); background: var(--p2) }
/* Gewaehlt ist eine KANTE, keine Flaeche: eine ganz magentafarbene Kachel
   sah aus wie ein zweiter Hauptknopf und schlug damit die Regel "genau ein
   Magentaknopf im Bild" (gesehen auf /bausteine am 28.09.2026). */
.ld .bs-zeit.gewaehlt { background: var(--p2); border-color: var(--acc) }
.ld .bs-zeit.voll { background: transparent; border-style: dashed; color: var(--muted2); cursor: not-allowed }
.ld .bs-zleer { margin: 0; font-size: var(--fs-14); line-height: 1.5; color: var(--muted) }

/* ------------------------------------------------------------ Tageswahl
   Drei Angaben je Zeile: Tag links, Preis in der Mitte, Wort rechts. Die
   Spalten stehen untereinander, damit das Auge eine Woche von oben nach unten
   lesen kann, statt in jeder Zeile neu zu suchen.

   Die Liste wird nicht breiter als eine Spalte: ueber eine Armlaenge gezogen
   stehen Tag, Preis und Wort so weit auseinander, dass das Auge die Zeile
   verliert. */
.ld .bs-tagewahl { max-width: 34em }
.ld .bs-twoche {
    margin: var(--s5) 0 var(--s2); font-size: var(--fs-13);
    font-weight: 700; color: var(--muted)
}
.ld .bs-twoche:first-child { margin-top: 0 }
.ld .bs-tliste { display: grid; gap: var(--s2) }
.ld .bs-tzeile {
    display: grid; grid-template-columns: 7.5em 1fr auto; align-items: baseline;
    gap: var(--s3); width: 100%; min-height: var(--ctl-h);
    padding: var(--s3); border: 1px solid var(--dim);
    border-radius: var(--r-ctl, 6px); background: var(--p1); color: var(--text);
    font-family: inherit; text-align: left; cursor: pointer
}
.ld .bs-tzeile b { font-weight: 800; font-size: var(--fs-14) }
.ld .bs-tzeile em { font-style: normal; font-size: var(--fs-13); color: var(--muted) }
.ld .bs-tzeile span { font-size: var(--fs-13); color: var(--muted) }
.ld .bs-tzeile:hover { border-color: var(--line); background: var(--p2) }
.ld .bs-tzeile.an { background: var(--p2); border-color: var(--acc) }
.ld .bs-tzeile.zu { background: transparent; border-style: dashed; color: var(--muted2); cursor: not-allowed }
.ld .bs-tzeile.zu em, .ld .bs-tzeile.zu span { color: var(--muted2) }
/* Das Datumsfeld steht dort, wo im Entwurf der Knopf "Weitere Wochen" stand */
.ld .bs-tandere {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3);
    margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--dim)
}
.ld .bs-tandere label { flex: 0 0 auto; font-size: var(--fs-13); color: var(--muted) }
.ld .bs-tandere input {
    flex: 1 1 10em; min-width: 0; max-width: 16em;
    min-height: var(--ctl-h); padding: 0 var(--s3);
    border: 1px solid var(--line); border-radius: var(--r-ctl, 6px);
    background: var(--field); color: var(--text); font-family: inherit;
    /* Mindestens 16px: darunter zoomt iOS beim Antippen in das Feld hinein und
       der Gast steht schief in der Seite (Pruefstand, 29.09.2026). */
    font-size: var(--fs-16)
}
.ld .bs-tnachsatz { margin: var(--s2) 0 0; font-size: var(--fs-13); line-height: 1.5; color: var(--muted) }
@media (max-width: 480px) { .ld .bs-tzeile { grid-template-columns: 6.5em 1fr auto; gap: var(--s2) } }

/* ------------------------------------------------------------ Schnellstart
   Paul, 28.09.2026, auf die Frage, was beim Oeffnen die Hauptrolle spielt:
   "die naechste freie Startzeit". Deshalb steht sie ganz oben, vor der
   Tageswahl, als EINE Zeile mit einem Weg hinein. Sie ist kein Hauptknopf -
   der bleibt unten in der Buchleiste -, sondern ein Angebot: gross genug zum
   Lesen, leise genug, um niemanden zu draengen. */
.ld .bs-schnell {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--s3); padding: var(--s3);
    border: 1px solid var(--dim); border-radius: var(--r-card, 12px);
    background: var(--p1)
}
.ld .bs-schnellwas { min-width: 0 }
.ld .bs-schnellwas b { display: block; font-size: var(--fs-18); font-weight: 800; line-height: 1.2 }
.ld .bs-schnellwas span { font-size: var(--fs-13); color: var(--muted) }
.ld .bs-schnellknopf {
    flex: 0 0 auto; min-height: var(--ctl-h); padding: 0 var(--s5);
    border: 1px solid var(--line); border-radius: var(--r-ctl, 6px);
    background: transparent; color: var(--text);
    font-family: inherit; font-weight: 700; font-size: var(--fs-14); cursor: pointer
}
.ld .bs-schnellknopf:hover { border-color: var(--text) }

/* ------------------------------------------------------------ Faktenzeile */
.ld .bs-fakten { margin: 0; display: grid; gap: 0 }
.ld .bs-fakt {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--dim)
}
.ld .bs-fakt:last-child { border-bottom: 0 }
.ld .bs-fakt dt { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--muted) }
.ld .bs-fakt dd { margin: 0; font-size: var(--fs-14); line-height: 1.5; font-weight: 700; text-align: right }
/* Hervorgehoben heisst SCHWERER, nicht bunter (Paul, 28.09.2026: ein Akzent) */
.ld .bs-fakt dd.hervor { font-size: var(--fs-16); font-weight: 800 }
/* Ein langer Wert (die Storno-Regel) wird am Handy rechtsbuendig zum
   Flatterrand und ist kaum lesbar. Dann steht die Beschriftung darueber und
   der Wert links, wie ein normaler Satz. */
@media (max-width: 560px) {
    .ld .bs-fakt { display: grid; gap: var(--s1); padding: var(--s3) 0 }
    .ld .bs-fakt dd { text-align: left }
}

/* ------------------------------------------------------------ Kachel */
.ld .bs-kachel {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
    padding: var(--s3); border: 1px solid var(--dim);
    border-radius: var(--r-card, 12px); background: var(--p1); color: var(--text);
    font-family: inherit; text-align: left; cursor: pointer; width: 100%
}
.ld .bs-kbild {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: var(--r-ctl, 6px)
}
.ld .bs-kname { font-weight: 800; font-size: var(--fs-15); line-height: 1.3 }
.ld .bs-ksatz { font-size: var(--fs-13); line-height: 1.5; color: var(--muted) }
.ld .bs-kpreis { font-size: var(--fs-13); font-weight: 700 }
.ld .bs-kachel.frei:hover { border-color: var(--line); background: var(--p2) }
.ld .bs-kachel.gewaehlt { border-color: var(--acc); background: var(--p2) }
.ld .bs-kachel.nichtmoeglich { border-style: dashed; color: var(--muted2); cursor: not-allowed }
.ld .bs-kachel.nichtmoeglich .bs-kpreis { color: var(--muted2) }

/* ------------------------------------------------------------ Buchleiste
   Die Leiste selbst steht in laserdance-kunde.css (.buchleiste) und bleibt
   unveraendert. Hier stehen nur die beiden Zusaetze des Bausteins: sie auf
   jeder Breite zeigen (bs-immer, noch nicht entschieden) und sie hochfahren,
   ohne auf die Hero-Beobachtung zu warten (bs-da). */
@media (min-width: 700px) { .ld .buchleiste.bs-immer { display: flex } }
.ld .buchleiste.bs-da { transform: none }

/* ------------------------------------------------------------ Ticketkarte */
.ld .bs-ticket {
    padding: var(--s3); border: 1px solid var(--dim);
    border-radius: var(--r-card, 12px); background: var(--p1)
}
.ld .bs-tkopf {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s3); margin-bottom: var(--s2)
}
.ld .bs-tprodukt { font-weight: 800; font-size: var(--fs-16) }
.ld .bs-tcode { font-size: var(--fs-13); font-weight: 700; color: var(--muted) }
.ld .bs-tzeit { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); font-size: var(--fs-14); line-height: 1.5 }
.ld .bs-tzeit span { color: var(--muted) }
.ld .bs-taendern {
    margin-top: var(--s2); border: 0; background: transparent; padding: 0;
    color: var(--muted); font-family: inherit; font-size: var(--fs-13);
    text-decoration: underline; cursor: pointer
}
.ld .bs-taendern:hover { color: var(--text) }

/* ------------------------------------------------------------ Regelsatz */
.ld .bs-regelsatz h2 { font-size: var(--fs-18); margin: 0 0 var(--s3) }
.ld .bs-rnachsatz { margin: var(--s2) 0 0; font-size: var(--fs-13); line-height: 1.5; color: var(--muted) }

/* ------------------------------------------------------------ Kaufweg
   Die Spalte, in der der Kaufweg steht (BuchenLasertag.razor). Eine Frage je
   Bildschirm heisst: eine schmale Spalte, in der nichts nebeneinander steht,
   und unten die Buchleiste mit dem einen Knopf. Die Breite ist dieselbe wie
   die der Tageswahl, damit die Schritte nicht springen. */
.ld .bs-weg {
    max-width: 34em; margin: 0 auto;
    padding: var(--s6) var(--wrap-rand, var(--s3)) calc(var(--s6) + 64px)
}
.ld .bs-weg h1 { font-size: var(--fs-24); line-height: 1.2; margin: 0 }
.ld .bs-wahlzeile {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3)
}
.ld .bs-wahlzeile label { font-size: var(--fs-15); font-weight: 700 }
/* Der Nachsatz gehoert zur Zeile darueber, deshalb steht er naeher an ihr als
   am naechsten Baustein - das ist der ganze Trick am Rhythmus. */
.ld .bs-weg .bs-wnachsatz { margin-top: var(--s2); font-size: var(--fs-13); line-height: 1.5; color: var(--muted) }
/* Zurueck ist ein Weg, kein Angebot: es steht da, wo man es sucht, und ist
   leise. Der eine kraeftige Knopf bleibt der in der Buchleiste. */
.ld .bs-zurueck {
    border: 0; background: transparent; padding: var(--s2) 0;
    color: var(--muted); font-family: inherit; font-size: var(--fs-13);
    text-decoration: underline; cursor: pointer
}
.ld .bs-zurueck:hover { color: var(--text) }

/* ------------------------------------------------------------ Musterseite
   Nur fuer /bausteine, die Schau der Teile. Kein Gast sieht das. */
.ld .bs-muster { max-width: 1160px; margin: 0 auto; padding: var(--s6) var(--wrap-rand, var(--s3)) var(--s6) }
.ld .bs-muster h1 { font-size: var(--fs-28); line-height: 1.2; margin: 0 0 var(--s3) }
.ld .bs-muster > p { max-width: 68ch; color: var(--muted); font-size: var(--fs-14); line-height: 1.6 }
.ld .bs-stueck { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--dim) }
.ld .bs-stueck > h2 { font-size: var(--fs-20); line-height: 1.2; margin: 0 }
.ld .bs-stueck > .bs-wozu { font-size: var(--fs-13); line-height: 1.6; color: var(--muted); max-width: 68ch }
.ld .bs-stueck > .bs-wozu code { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-12) }
.ld .bs-zwei { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.ld .bs-frage {
    padding: var(--s3); border: 1px solid var(--ampel-gelb);
    border-radius: var(--r-ctl, 6px); font-size: var(--fs-13); line-height: 1.6; max-width: 68ch
}
.ld .bs-frage b { display: block; margin-bottom: var(--s2) }

/* ------------------------------------------------------------ Der Fluss
   Der Abstand zwischen zwei Bausteinen steht EINMAL hier und nicht in jedem
   Baustein. Ein Abschnitt (section) bekommt den groesseren Abstand.

   Warum ganz unten: die Regel gilt fuer JEDES Kind des Kaufwegs, also auch
   fuer die Ueberschrift. Stand sie oben, gewann die spaetere Regel
   ".bs-weg h1 { margin: 0 }" bei gleicher Spezifitaet, und die Ueberschrift
   klebte am Baustein darueber (gesehen am 28.09.2026 auf dem Handy). */
.ld .bs-weg > * + *,
.ld .bs-muster .bs-stueck > * + * { margin-top: var(--s5) }
/* Vor einer Ueberschrift mehr Luft als danach - sie gehoert zu dem, was unter
   ihr steht. Die Regel zielte zuerst auf h1; seit der Kopf die eine
   Ueberschrift der Seite traegt, ist die Frage ein h2, und der Abstand fiel
   weg (gesehen am 28.09.2026: die Frage klebte am Kasten darueber). */
.ld .bs-weg > section + section,
.ld .bs-weg > * + .bs-schrittfrage { margin-top: var(--s6) }
.ld .bs-weg > :first-child { margin-top: 0 }

/* ============================================================
   DER KOPF, DIE FLAECHEN, DIE STIMME (28.09.2026)
   ------------------------------------------------------------
   Paul: "es sieht einfach aus wie ein dunkles Word-Dokument, manchmal eine
   Seite mit Text". Er hatte recht, und der Grund war benennbar: die neue Seite
   hat alle starken Mittel weggelassen, die das Haus schon besitzt. Kein Foto
   aus der Halle, keine Ueberschrift, die lauter ist als der Text, keine
   Flaeche, die sich vom Grund abhebt. Uebrig blieb eine Spalte Text auf
   Schwarz.

   Was sich jetzt aendert, in der Sprache, die das Haus schon spricht:

   1. EIN BILD. Der Kopf traegt ein Foto aus der Arena, mit einem Verlauf
      darueber, damit die Schrift darauf sicher lesbar bleibt. Dasselbe Mittel
      wie auf den bestehenden Produktseiten (.head mit .hero-bg und .hero-ov),
      nur ruhiger geschnitten.
   2. EINE STIMME. Die Ueberschrift ist jetzt --fs-gross (30 bis 52 px) statt
      24, die Frage eines Schritts --fs-frage (22 bis 32). Eine Seite braucht
      einen Sprung zwischen Ueberschrift und Text, nicht eine Stufe.
   3. FLAECHEN MIT TIEFE. Eine Karte ist nicht mehr nur eine 1px-Linie auf
      fast demselben Schwarz, sondern eine eigene Flaeche: heller Grund, eine
      feine Lichtkante oben, ein weicher Schatten darunter. Das ist der
      Unterschied zwischen "Rahmen gezeichnet" und "Ding liegt da".
   4. DIE TEILE, DIE NIEMANDEM GEHOEREN. Textmarkierung, Schreibmarke,
      Bildlaufleiste, Fokusring und die Ziffern in Zahlenspalten kommen sonst
      vom Browser und passen zu keinem Entwurf. Sie stehen jetzt hier.

   Was NICHT dazugekommen ist: Bewegung. Die Hausregel verbietet sie im
   Kaufweg, und sie gilt weiter, auch wenn ein Werkzeug sie vorschlaegt.
   ============================================================ */

/* ------------------------------------------------------------ Der Kopf */
.ld .bs-kopf {
    position: relative; isolation: isolate;
    padding: var(--s6) var(--wrap-rand, var(--s3));
    min-height: clamp(220px, 26vw, 320px);
    display: flex; align-items: flex-end;
    border-bottom: 1px solid var(--dim); overflow: hidden
}
.ld .bs-kopfbild {
    position: absolute; inset: 0; z-index: -2;
    background-image: url("/images/laserdance/lasertag-nebelgang.jpg");
    background-image: image-set(url("/images/laserdance/lasertag-nebelgang.webp") type("image/webp"),
                                url("/images/laserdance/lasertag-nebelgang.jpg") type("image/jpeg"));
    background-size: cover; background-position: 50% 42%
}
/* Der Verlauf ist kein Schleier ueber allem: er ist unten dicht, damit die
   Schrift traegt, und oben duenn, damit das Foto noch Foto ist. */
.ld .bs-kopf::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, var(--bg) 4%, rgba(8, 8, 13, .82) 38%, rgba(8, 8, 13, .35) 100%)
}
.ld .bs-kopftext { width: 100%; max-width: 34em; margin: 0 auto }
.ld .bs-kopftext h1 {
    margin: 0; font-size: var(--fs-gross); line-height: 1.02;
    letter-spacing: -.03em; font-weight: 800; text-wrap: balance
}
.ld .bs-kopftext > p {
    margin: var(--s2) 0 0; max-width: 40ch;
    font-size: var(--fs-16); line-height: 1.5; color: var(--muted)
}
/* Die drei Zahlen, die ein Gast zuerst sucht. Beschriftung klein darueber,
   Wert darunter: so liest man sie in einer Reihe, ohne zu springen. */
.ld .bs-kopffakten {
    display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
    margin: var(--s5) 0 0
}
.ld .bs-kopffakten div { min-width: 0 }
.ld .bs-kopffakten dt {
    margin: 0; font-size: var(--fs-12); line-height: 1.4; color: var(--muted2)
}
.ld .bs-kopffakten dd {
    margin: 0; font-size: var(--fs-15); line-height: 1.4;
    font-weight: 700; font-variant-numeric: tabular-nums
}

/* ------------------------------------------------------------ Die Frage
   Sie hiess zuerst .bs-frage - und so heisst schon der gelbe Kasten mit einer
   Entscheidung fuer Paul auf der Musterseite. Die Frage stand danach in einem
   gelben Rahmen (gesehen am 28.09.2026). Das ist derselbe Fehler wie am
   19.09.2026 mit .galerie: zwei Formen, ein Name. Jede Form hat genau einen
   Klassennamen, jeder Klassenname genau eine Form. */
.ld .bs-weg .bs-schrittfrage {
    /* Ueber einer Ueberschrift mehr Luft als darunter: sie gehoert zu dem, was
       unter ihr steht. Die Werte stehen hier und nicht in der Flussregel, weil
       diese Datei zuletzt geladen wird und eine Margin-Angabe hier jede
       frueher gesetzte schlaegt - gemessen am 28.09.2026, als die Frage trotz
       Flussregel mit margin-top 0 dastand. */
    margin: var(--s6) 0 0; font-size: var(--fs-frage); line-height: 1.1;
    letter-spacing: -.02em; font-weight: 800; text-wrap: balance
}
.ld .bs-weg > .bs-schrittfrage + * { margin-top: var(--s3) }

/* ------------------------------------------------------------ Tiefe
   Eine Flaeche liegt auf dem Grund, sie ist nicht in ihn hineingezeichnet:
   eigener Grund, feine Lichtkante oben, weicher Schatten mit Versatz. */
.ld .bs-schnell,
.ld .bs-ticket,
.ld .bs-kachel,
.ld .bs-tzeile,
.ld .bs-zeit,
.ld .bs-meldung {
    box-shadow: inset 0 1px 0 var(--kante-licht), var(--schatten-1)
}
.ld .bs-schnell, .ld .bs-ticket { box-shadow: inset 0 1px 0 var(--kante-licht-2), var(--schatten-2) }
.ld .bs-tzeile.zu, .ld .bs-zeit.voll, .ld .bs-kachel.nichtmoeglich { box-shadow: none }
/* Gewaehlt bekommt zusaetzlich einen Ring in der Markenfarbe, nicht mehr Flaeche */
.ld .bs-tzeile.an, .ld .bs-zeit.gewaehlt, .ld .bs-kachel.gewaehlt {
    box-shadow: inset 0 1px 0 var(--kante-licht-2), 0 0 0 1px var(--acc), var(--schatten-1)
}

/* ------------------------------------------------------------ Der Haken */
.ld .bs-haken { vertical-align: -.12em; margin-right: .35em; color: var(--acc-hell) }
.ld .bs-fschritte .bs-haken { color: var(--muted) }

/* ------------------------------------------------------------ Zahlen
   Uhrzeiten und Betraege stehen untereinander, also brauchen sie Ziffern in
   gleicher Breite. Sonst wandert die Spalte von Zeile zu Zeile. */
.ld .bs-zvon, .ld .bs-zbis, .ld .bs-tzeile b, .ld .bs-tzeile em,
.ld .bs-fakt dd, .ld .bs-tzeit, .ld .bs-schnellwas b {
    font-variant-numeric: tabular-nums
}

/* ------------------------------------------------------------ Die Teile, die
   niemandem gehoeren: Markierung, Schreibmarke, Bildlaufleiste, Fokus. */
.ld ::selection { background: var(--acc); color: var(--auf-weiss) }
.ld input, .ld textarea { caret-color: var(--acc) }
.ld :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--r-ctl, 6px) }
.ld * { scrollbar-width: thin; scrollbar-color: var(--line) transparent }
.ld ::-webkit-scrollbar { width: 10px; height: 10px }
.ld ::-webkit-scrollbar-track { background: transparent }
.ld ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid var(--bg) }
.ld ::-webkit-scrollbar-thumb:hover { background: var(--muted2) }

/* Am Handy hat der Kopf weniger Hoehe, aber dieselbe Aufgabe */
@media (max-width: 600px) {
    .ld .bs-kopf { min-height: 200px; padding-top: var(--s5) }
    .ld .bs-kopffakten { gap: var(--s3) var(--s5) }
}

/* ------------------------------------------------------------ Der Hauptknopf
   beim Ueberfahren. Im Haus wird jeder Knopf beim Hover cyan
   (laserdance-kunde.css:243 und :626). Auf der Hauptaktion ist das ein
   Farbwechsel mitten im Kauf: der Knopf, der eben noch die Marke trug, wird
   tuerkis. Auf der neuen Seite bleibt er Magenta und wird nur heller.

   Bewusst NUR hier (.bs-seite): die bestehenden Seiten behalten ihren Hover,
   bis Paul sagt, dass er ueberall weichen soll. */
@media (hover: hover) {
    .ld .bs-seite .buchleiste .cta.haupt:hover:not(:disabled),
    .ld .bs-seite .knopf:hover:not(:disabled) {
        background: var(--acc); border-color: var(--acc); color: var(--auf-weiss);
        filter: brightness(1.12); transform: none
    }
}

/* ------------------------------------------------------------ Der Korb
   Die Felder fuer Name, Mail und Telefon, der Weg zurueck in den Kaufweg und
   die Zeile mit dem Haekchen. Beschriftung ueber dem Feld, nicht daneben: am
   Handy bleibt sonst fuer das Feld zu wenig uebrig, und ein Feld, das man
   erst suchen muss, ist der haeufigste Abbruch im Warenkorb. */
.ld .bs-feld { display: grid; gap: var(--s2) }
.ld .bs-feld label { font-size: var(--fs-13); color: var(--muted) }
.ld .bs-feld input {
    min-height: var(--ctl-h); padding: 0 var(--s3);
    border: 1px solid var(--line); border-radius: var(--r-ctl, 6px);
    background: var(--field); color: var(--text);
    font-family: inherit; font-size: var(--fs-15); width: 100%
}
.ld .bs-haken-zeile {
    display: flex; align-items: flex-start; gap: var(--s3);
    font-size: var(--fs-13); line-height: 1.5; color: var(--muted)
}
.ld .bs-haken-zeile a { color: var(--text) }
.ld .bs-dazu { font-size: var(--fs-14) }
.ld .bs-dazu a { color: var(--text) }

/* ------------------------------------------------------------ Wissen
   Ablauf, Regeln und Fragen unter dem ersten Schritt. Sie tragen dieselbe
   Schrift wie der Kaufweg und keine eigene Welt: es ist eine Seite. */
.ld .bs-wissen h2 { font-size: var(--fs-18); line-height: 1.2; margin: 0 0 var(--s3) }
.ld .bs-ablauf {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--s3); counter-reset: schritt
}
.ld .bs-ablauf li {
    display: grid; gap: var(--s1); padding-left: var(--s5); position: relative;
    font-size: var(--fs-14); line-height: 1.5
}
/* Die Nummer traegt hier Information (die Reihenfolge des Abends), deshalb
   steht sie da - und nur deshalb. */
.ld .bs-ablauf li::before {
    counter-increment: schritt; content: counter(schritt);
    position: absolute; left: 0; top: 1px;
    font-size: var(--fs-12); font-weight: 800; color: var(--muted2);
    font-variant-numeric: tabular-nums
}
.ld .bs-ablauf b { font-weight: 800 }
.ld .bs-ablauf span { color: var(--muted) }
.ld .bs-frageblock { border-bottom: 1px solid var(--dim) }
.ld .bs-frageblock summary {
    padding: var(--s3) 0; cursor: pointer; font-size: var(--fs-14); font-weight: 700;
    list-style: none
}
.ld .bs-frageblock summary::-webkit-details-marker { display: none }
.ld .bs-frageblock summary::after { content: "+"; float: right; color: var(--muted) }
.ld .bs-frageblock[open] summary::after { content: "–" }
.ld .bs-frageblock p {
    margin: 0 0 var(--s3); font-size: var(--fs-14); line-height: 1.6; color: var(--muted)
}

/* ============================================================
   EXTRAS (Extraliste.razor, Paket 5)
   ------------------------------------------------------------
   Die Form ist Tabelle, nicht Kachel: links was es ist, rechts was es
   kostet und wie viele. Eine Zeile liest sich in einer Bewegung von links
   nach rechts, und untereinander stehen die Preise in einer Flucht - das
   geht mit Kacheln nicht, und genau deshalb sind es keine.

   Gewaehlt sieht aus wie ueberall sonst: Magentakante, etwas hellere
   Flaeche, Haken. Nichts Eigenes, der Gast hat es im Zeitraster schon
   gelernt. */
.ld .bs-extras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2) }
.ld .bs-extra {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center;
    gap: var(--s3); padding: var(--s3);
    border: 1px solid var(--dim); border-radius: var(--r-card, 12px);
    background: var(--p1)
}
.ld .bs-extra.an { border-color: var(--acc); background: var(--p2) }
.ld .bs-exwas { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.ld .bs-exwas b { font-weight: 700; font-size: var(--fs-14) }
.ld .bs-exsatz { font-size: var(--fs-12); line-height: 1.5; color: var(--muted) }
/* Preise untereinander in einer Flucht: gleiche Ziffernbreite, rechts
   ausgerichtet. Sonst tanzt die Spalte, sobald ein Preis zweistellig wird. */
.ld .bs-expreis {
    font-size: var(--fs-13); font-weight: 700; white-space: nowrap;
    font-variant-numeric: tabular-nums; text-align: right
}

/* Zaehler: minus, Zahl, plus. Die Zahl steht fest in der Mitte, damit die
   Knoepfe beim Zaehlen nicht unter dem Finger wegwandern. */
.ld .bs-exmenge { display: inline-flex; align-items: center; gap: var(--s1) }
.ld .bs-exmenge button {
    width: 32px; height: 32px; flex: 0 0 auto;
    border: 1px solid var(--line); border-radius: var(--r-ctl, 6px);
    background: var(--p2); color: var(--text);
    font: inherit; font-size: var(--fs-15); line-height: 1; cursor: pointer
}
.ld .bs-exmenge button:hover:not(:disabled) { border-color: var(--acc) }
.ld .bs-exmenge button:disabled { opacity: .35; cursor: not-allowed }
.ld .bs-exmenge b {
    min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums;
    font-size: var(--fs-14)
}

/* Pauschale: ein Wort statt eines Zaehlers. "dazu" ist eine Aufforderung,
   "dabei" eine Feststellung - so steht im Knopf immer, was gilt, und nie,
   was passieren wuerde. */
.ld .bs-exschalter {
    display: inline-flex; align-items: center; gap: var(--s1);
    padding: var(--s2) var(--s3); white-space: nowrap;
    border: 1px solid var(--line); border-radius: var(--r-ctl, 6px);
    background: var(--p2); color: var(--text);
    font: inherit; font-size: var(--fs-13); font-weight: 700; cursor: pointer
}
.ld .bs-exschalter:hover { border-color: var(--acc) }
.ld .bs-exschalter.an { border-color: var(--acc); color: var(--text) }

/* Am Handy bricht die Zeile: oben was es ist, darunter Preis und Menge.
   Drei Spalten auf 391px waeren drei Stummel. */
@media (max-width: 520px) {
    .ld .bs-extra { grid-template-columns: 1fr auto; row-gap: var(--s2) }
    .ld .bs-exwas { grid-column: 1 / -1 }
}

/* Der Zaehler an seiner Grenze: gesperrt sieht gesperrt aus. Die Regel steht
   hier und nicht in laserdance-shop.css, weil diese Datei zuletzt laedt und
   der Zustand ueberall gelten soll, wo der Zaehler steht (01.10.2026). */
.ld .step button:disabled { opacity: .35; cursor: not-allowed }