/* Tagesplan: Spuren, Bloecke, Zeitachse, Uebersicht, Legende
Teil 2 von 6 der Betriebsansicht. Bis zum
06.09.2026 stand das alles in laserdance-betrieb.css (2.519
Zeilen). Der Schnitt hat KEINE Regel geaendert: die Bloecke
stehen in derselben Folge wie vorher, und die sechs Dateien
werden in der Reihenfolge geladen, in der ihre Regeln vorher
in der einen Datei standen (laserdance-betrieb.css).
Wer hier etwas aendert: docs/DESIGN.md lesen, danach
python tools\css-referenz.py nachher.
14.09.2026, Schritt 1 des Umbaus (docs/alpha/07): der Slotblock ist
neu, siehe den Abschnitt SLOTBLOCK weiter unten. */
/* ---- Tagesansicht: Zeitleiste + Raumspalten in einem Kasten ---- */
.ld .tl { background: var(--p1); border: 1px solid var(--line); overflow: hidden }
.ld .tlmeta {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 8px 12px; border-bottom: 1px solid var(--dim);
font-size: var(--fs-11); color: var(--muted)
}
.ld .tlmeta .lgd { display: inline-flex; align-items: center; gap: 5px; font-weight: 600 }
/* Die Legende zeigt die Flaeche, wie sie am Block ist: flach, ohne Kante
(Schritt 1 des Umbaus, 14.09.2026). Die Toene stehen bei .slotblk. */
.ld .tlmeta .lgd i { width: 12px; height: 12px; display: inline-block; border: 1px solid var(--line); background: var(--slotgrund) }
.ld .tlmeta .lgd .lg0 { background: var(--slotgrund-frei) }
.ld .tlmeta .lgd .lg1 { background: var(--slot-gebucht) }
.ld .tlmeta .lgd .lg2 { border-left: 3px solid var(--ampel-gelb) }
.ld .tlmeta .lgd .lg3 { background: var(--slot-fastvoll) }
.ld .tlmeta .lgd .lg4 { background: var(--slot-voll) }
.ld .tlmeta .lgd .lgfrei { background: var(--slotgrund-frei); border-style: dashed }
.ld .tlmeta .lgd .lgbelegt { background: var(--slot-belegt) }
.ld .tlmeta .lgd .lgvorbei { background: var(--bg) var(--schraffur); border-color: rgba(255,255,255,.12) }
.ld .tlmeta .lgz { font-style: normal; font-size: var(--fs-12); line-height: 1; width: 12px; text-align: center }
.ld .tlmeta .lgz.muenze { color: var(--ampel-gelb) }
.ld .tlmeta .lgz.sanduhr { color: var(--muted2) }
.ld .tlmeta .lgz.stern { color: var(--lime) }
.ld .tlmeta .lgd .lgpxa { border-left-color: var(--acc); background: rgba(200,27,255,.2) }
.ld .tlmeta .lgd .lgpxb { border-left-color: var(--cyan); background: rgba(2,255,255,.2) }
.ld .tlmeta .lgdhint { margin-left: auto; color: var(--muted2) }
.ld .tlhead { display: grid; border-bottom: 1px solid var(--line) }
.ld .tlhead .gut { border-right: 1px solid var(--dim) }
.ld .tlhead .col {
padding: 12px 10px; text-align: center; font-weight: 800; font-size: var(--fs-15); letter-spacing: .01em
}
.ld .tlhead .col + .col { border-left: 1px solid var(--dim) }
.ld .tlhead .col small { display: block; font-weight: 500; font-size: var(--fs-11); color: var(--muted2) }
.ld .tlbody { position: relative }
/* Stundenlinien ueber die ganze Breite, Beschriftung in der Randspalte */
.ld .hline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--dim); pointer-events: none }
.ld .hline.half { border-top-style: dashed; opacity: .5 }
/* Quick-Action-Menue: Einfachklick auf einen Slot */
.ld .qovl { position: fixed; inset: 0; z-index: 94; background: transparent }
/* Ziehen und Ablegen (js/ld-plandrag.js) */
.ld .slotblk .gk.ziehbar { cursor: grab }
body.zieht { cursor: grabbing; user-select: none }
body.zieht .slotblk { cursor: grabbing }
.dragghost {
position: fixed; z-index: 99999; pointer-events: none; transform: translate(10px, 10px);
background: var(--acc); color: #fff; font: 700 var(--fs-12) 'Hanken Grotesk', sans-serif;
padding: 5px 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); max-width: 220px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
/* ---- EIN Markierungssystem (Schritt 4, Plan 07 Abschnitt 12): tuerkis,
drei Staerken. Kraeftig gefuellt: was ich in der Hand habe und wo es
landet (Quelle, Ziel unter dem Zeiger, die Folge-Slots im Formular).
Rahmen: gehoert dazu, wird aber nicht bewegt (andere Spiele derselben
Buchung, moegliche Ziele, der in der Spalte gewaehlte Slot). Gedaempft
mit Grund: kein Ziel, der Grund steht im Kopf des Blocks. Gruen war
vorher das Ziel und Magenta die Auswahl: zwei Sprachen fuer eine Sache. */
.ld .slotblk.ziel { border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(2, 255, 255, .7); cursor: copy }
.ld .slotblk.ziel.zielaktiv, .ld .slotblk.zielaktiv {
border-color: var(--cyan); box-shadow: inset 0 0 0 2px var(--cyan); background: rgba(2, 255, 255, .16)
}
.ld .slotblk.gesperrt { opacity: .45 }
.ld .slotblk.gesperrt .sgrund { font-size: var(--fs-10); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted) }
.ld .slotblk .gk.gleich, .ld .gk.gk-gleich {
box-shadow: inset 0 0 0 1px var(--cyan); background: rgba(2, 255, 255, .09); border-radius: var(--r-chip)
}
.ld .slotblk .gk.quelle { box-shadow: inset 0 0 0 2px var(--cyan); background: rgba(2, 255, 255, .2); border-radius: var(--r-chip); color: #fff }
/* Treffer der Suche: vorgezogen und hervorgehoben, im Plan und im Band der Uebersicht */
.ld .slotblk .gk.treffer { background: rgba(2, 255, 255, .14); box-shadow: inset 0 0 0 1px var(--cyan); border-radius: var(--r-chip) }
.ld .slotblk .gk.treffer .sgn { color: var(--cyan) }
.ld .spur .tb.treffer { box-shadow: inset 0 0 0 2px var(--cyan) }
/* Schwebt unten, statt sich in den Plan zu draengen: sonst verschiebt sie
alle Bloecke nach unten, und der naechste Griff landet daneben. */
.ld .movebar {
position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 60;
display: flex; align-items: center; gap: 10px; white-space: nowrap;
background: #14141C; border: 1px solid var(--lime);
box-shadow: 0 8px 30px rgba(0, 0, 0, .6); padding: 7px 12px; font-size: var(--fs-12)
}
.ld .movebar .mvtipp { color: var(--muted); font-size: var(--fs-11) }
.ld .movebar .fehl { color: var(--red); font-weight: 700; font-size: var(--fs-11) }
/* Konflikt: Buchung passt nicht mehr ins Raster. NICHT rot (das heißt "voll"),
sondern violett gestrichelt mit eigener Marke - sonst liest man es als ausgebucht. */
.ld .slotblk.konflikt { border: 1px dashed var(--acc); z-index: 2 }
.ld .slotblk .kmark {
display: inline-block; font-size: var(--fs-10); font-weight: 800; letter-spacing: .05em;
text-transform: uppercase; background: var(--acc); color: #fff; padding: 1px 5px; line-height: 14px
}
/* Jetzt-Linie: aktuelle Uhrzeit im Tagesplan, liegt ueber den Slotbloecken */
.ld .nowline { position: absolute; left: 0; right: 0; z-index: 4; border-top: 2px solid var(--cyan); box-shadow: 0 0 9px rgba(2, 255, 255, .55); pointer-events: none }
.ld .nowline span { position: absolute; left: 4px; top: -10px; font-size: var(--fs-10); font-weight: 800; letter-spacing: .03em; color: #04141a; background: var(--cyan); padding: 1px 7px }
.ld .hline span {
position: absolute; top: -8px; left: 0; width: 56px; text-align: right; padding-right: 10px;
font-size: var(--fs-11); color: var(--muted2); background: var(--p1)
}
/* Raumspalten als Gitter ueber den Linien */
.ld .tlgrid { position: absolute; inset: 0; display: grid }
.ld .tlgrid .gutcol { }
.ld .tlgrid .rescol { position: relative; border-left: 1px solid var(--dim) }
/* ==================================================================
SLOTBLOCK, Schritt 1 des Umbaus (14.09.2026, Plan docs/alpha/07,
Abschnitte 3 bis 6). Markup: Components/Laserdance/Betrieb/SlotBlock.razor.
Was weg ist und warum:
- die Kante links (4 px in der Ampelfarbe): Paul am 13.09., "ich mag die
slots design nicht, sieht aus wie AI-Slop mit dem Farbrand links".
- der Verlauf als Fuellstand (--fp): "ich will keine Farbverlaeufe".
- die Kacheln mit Restzeile "+3 Gruppen": alle Personen sind sichtbar,
der Zeitmassstab waechst mit dem vollsten Slot (Betrieb.razor.Plan.cs,
Massstab).
- gelb fuer "Zahlung offen": gelb heisst jetzt "gebucht". Offenes Geld
ist die Muenze in der Gruppenzeile und der rote Punkt am Block.
Was gilt: die FLAECHE traegt den Zustand, flach, ein Ton je Zustand
(Tabelle in Plan 07, Abschnitt 6). Den Raum traegt die Spalte
(.rescol.b, leicht heller). Vier feste Spalten je Gruppenzeile, in jeder
Zeile an derselben Stelle: Name, Marke, Personen, Zeichen. Partys eine
ganze Zeile ganz oben, die anderen zu zweit mit fester Mittelkante.
================================================================== */
.ld .tlgrid .rescol.b { background: rgba(255, 255, 255, .035) }
.ld .tlhead .col.b { background: rgba(255, 255, 255, .035) }
.ld {
--slotgrund: #23212F;
--slotgrund-frei: #1A1925;
--slot-gebucht: #534935; /* gelb ueber dem Slotgrund, flach */
--slot-fastvoll: #5C3C29; /* orange */
--slot-voll: #611831; /* rot: voll oder exklusiv */
--slot-belegt: #463C63; /* violett: Pixel, eigener Ton */
--schraffur: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 255, 255, .045) 5px 6px);
}
.ld .slotblk {
position: absolute; left: 5px; right: 5px; box-sizing: border-box;
overflow: hidden; cursor: pointer;
border: 1px solid var(--line);
padding: 5px 8px 6px;
display: grid; gap: 4px; align-content: start;
text-align: left; font-family: var(--font); color: var(--text);
background: var(--slotgrund)
}
.ld .slotblk.frei { background: var(--slotgrund-frei); border-style: dashed; border-color: rgba(255, 255, 255, .16) }
.ld .slotblk.gebucht { background: var(--slot-gebucht) }
.ld .slotblk.fastvoll { background: var(--slot-fastvoll) }
.ld .slotblk.voll { background: var(--slot-voll) }
.ld .slotblk.belegt { background: var(--slot-belegt) }
.ld .slotblk.laeuft { box-shadow: inset 0 0 0 1px rgba(2, 255, 255, .45) }
.ld .slotblk:hover { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) }
.ld .slotblk:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px }
/* Abgelaufen: kein Zustandston, Rueckzug. Schraffur, Text auf muted2,
Namen ohne Fettung, kein Plus, kein Ziehen hinein (Plan 07, Abschnitt 5). */
.ld .slotblk.vorbei {
background: var(--bg) var(--schraffur);
border-color: rgba(255, 255, 255, .09); color: var(--muted2)
}
.ld .slotblk.vorbei .snr, .ld .slotblk.vorbei .szeit, .ld .slotblk.vorbei .sbel,
.ld .slotblk.vorbei .sg .sgn, .ld .slotblk.vorbei .sg .sgp { color: var(--muted2); font-weight: 600 }
.ld .slotblk.vorbei .snr { background: rgba(255, 255, 255, .05) }
.ld .slotblk.vorbei .gk.ziehbar { cursor: pointer }
/* Kopfzeile: Nummer und Zeit links, Belegung rechts, dazwischen die Marke
fuer Konflikte. Beim leeren Slot steht dort "frei" und rechts das Plus. */
.ld .slotblk .skopf {
display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px;
align-items: center; height: 20px; font-size: var(--fs-12); color: var(--muted)
}
.ld .slotblk .snr {
font-weight: 800; color: var(--text); background: rgba(255, 255, 255, .09);
padding: 0 5px; line-height: 18px; font-variant-numeric: tabular-nums
}
.ld .slotblk .szeit { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap }
.ld .slotblk .smitte { min-width: 0; overflow: hidden; white-space: nowrap }
.ld .slotblk .sbel { font-weight: 800; font-size: var(--fs-16); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1 }
.ld .slotblk .sbel i { font-style: normal; font-size: var(--fs-11); font-weight: 700; color: var(--muted2) }
.ld .slotblk .sleer .lt { color: var(--muted2); font-size: var(--fs-11); font-weight: 600 }
.ld .slotblk .sbuchen {
justify-self: end; font-family: inherit; font-size: var(--fs-15); font-weight: 800; line-height: 1;
color: var(--text); background: rgba(255, 255, 255, .08); border: 1px solid var(--line);
padding: 3px 9px; cursor: pointer
}
.ld .slotblk .sbuchen:hover { border-color: var(--acc); color: var(--acc-hell) }
/* Gruppenzeilen: vier feste Spalten, in jeder Zeile dieselben (Regel 2 des
Rezepts: "die zweite Spalte soll nicht dort beginnen, wo der erste Name
aufhoert, schoen untereinander wie eine Tabelle"). */
.ld .slotblk .sgruppen { display: grid; gap: 3px; align-content: start; min-width: 0 }
.ld .slotblk .sg {
display: grid; grid-template-columns: minmax(0, 1fr) auto 34px 14px; gap: 4px; align-items: center;
font-size: var(--fs-12); line-height: 18px; min-width: 0; height: 18px
}
/* Feste Zeilenhoehe, egal wie die Schrift rundet: der Massstab in
Betrieb.razor.Plan.cs rechnet mit 18 px je Zeile, und was hier waechst,
laeuft unten aus dem Block. */
.ld .slotblk .sg > span { display: block; height: 18px; line-height: 18px; overflow: hidden }
.ld .slotblk .sg .sgn { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ld .slotblk .sg .sgm { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap }
.ld .slotblk .sg .sgm em {
font-style: normal; padding: 0 3px; border: 1px solid currentColor; color: var(--cyan);
font-size: var(--fs-10); font-weight: 800; letter-spacing: .04em; line-height: 14px
}
.ld .slotblk .sg .pm {
font-size: var(--fs-10); font-weight: 800; letter-spacing: .07em; color: var(--acc-hell);
border: 1px solid var(--acc); padding: 0 4px; line-height: 14px; white-space: nowrap
}
.ld .slotblk .sg .sgp { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap }
.ld .slotblk .sg .sgp i { font-style: normal; font-weight: 600; font-size: var(--fs-10); color: var(--muted); margin-left: 2px }
.ld .slotblk .sg .sgz { font-size: var(--fs-11); text-align: center; line-height: 1 }
.ld .slotblk .sg .sgz.muenze { color: var(--ampel-gelb) }
.ld .slotblk .sg .sgz.sanduhr { color: var(--muted2) }
.ld .slotblk .sg .sgz.stern { color: var(--lime); font-weight: 800 }
/* Nicht erschienen (Plan 11, B1): Name durchgestrichen und blass, Zeichen rot. */
.ld .slotblk .sg.noshow .sgn { text-decoration: line-through; color: var(--muted2) }
.ld .slotblk .sg.noshow .sgp { color: var(--muted2) }
.ld .slotblk .sg .sgz.weg { color: var(--red); font-weight: 800 }
.ld .slotblk .pstand.weg { color: var(--red) }
.ld .slotblk .sgpaar { display: grid; grid-template-columns: 1fr 1fr; min-width: 0 }
.ld .slotblk .sgpaar > .sg:nth-child(1) { padding-right: 8px }
.ld .slotblk .sgpaar > .sg:nth-child(2) { border-left: 1px solid rgba(255, 255, 255, .09); padding-left: 8px }
/* Ungerade Anzahl: die rechte Haelfte bleibt leer und zeigt keine Kante. */
.ld .slotblk .sgpaar > .sg:empty { border-left-color: transparent }
.ld .slotblk .sgtrenn { height: 1px; background: rgba(255, 255, 255, .09); margin: 1px 0 }
.ld .slotblk .gk.ziehbar:hover { background: rgba(255, 255, 255, .08) }
/* Der rote Punkt oben rechts: offenes Geld faellt auch beim Ueberfliegen auf. */
.ld .slotblk .spunkt {
position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
background: var(--red); box-shadow: 0 0 7px rgba(255, 0, 55, .75)
}
.ld .slotblk.hatoffen .skopf { padding-right: 8px }
.ld .legend { display: flex; gap: 18px; flex-wrap: wrap; margin: -6px 0 12px; font-size: var(--fs-12); color: var(--muted) }
/* in der Seitenleiste: zwei je Zeile, ohne Aussenabstand */
.ld .opsside .legend { margin: 0; gap: 7px 16px }
.ld .legend span { display: inline-flex; align-items: center; gap: 7px }
.ld .legend .lg0 { background: var(--slotgrund-frei) }
.ld .legend .lg1 { background: var(--slot-gebucht) }
.ld .legend .lg2 { border-left: 3px solid var(--ampel-gelb) }
.ld .legend .lg3 { background: var(--slot-fastvoll) }
.ld .legend .lg4 { background: var(--slot-voll) }
/* Detailfenster zu einem Slot */
.ld .ovl { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 90 }@media (max-width: 700px) {
.ld .tlhead .col { font-size: var(--fs-13); padding: 9px 4px }
.ld .slotblk { padding: 3px 5px 4px }
.ld .hline span { width: 44px; font-size: var(--fs-10) }
}
/* Die Achse selbst */
.ld .tlh { display: grid; grid-template-columns: 132px 1fr; background: var(--p1); border: 1px solid var(--line) }
.ld .tlkopf { height: 30px; border-bottom: 1px solid var(--dim); position: relative }
.ld .tlname {
height: 54px; display: flex; align-items: center; padding: 0 11px;
font: 700 var(--fs-11) var(--font); color: var(--muted); border-bottom: 1px solid var(--dim)
}
.ld .tlname.last { height: 40px }
.ld .tlroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain }
.ld .spur { position: relative; height: 54px; border-bottom: 1px solid var(--dim) }
.ld .spur.last { height: 40px; background: #0C0B12 }
/* Vorbereiten */
/* Ohne overflow dehnen die Pillen am rechten Rand die ganze Achse, und die
Uebersicht muesste gerollt werden, obwohl der Tag hineinpasst. */
.ld .spur.vor { height: 62px; overflow: hidden }
/* Rechte Pillen wuerden aus der Achse laufen: ab der Tagesmitte wachsen sie
nach links statt nach rechts. */
.ld .spur.vor .vp {
position: absolute; top: 5px; white-space: nowrap; max-width: 230px; overflow: hidden;
text-overflow: ellipsis; font: 600 var(--fs-11)/1.3 var(--font); padding: 3px 7px;
border-left: 3px solid var(--muted); background: #14141C
}
.ld .spur.vor .vp b { font-weight: 800; margin-right: 3px }
.ld .spur.vor .vp.party { border-left-color: var(--cyan); color: var(--cyan) }
.ld .spur.vor .vp.arena { border-left-color: var(--ampel-orange); color: var(--ampel-orange) }
.ld .spur.vor .vp.spezial { border-left-color: var(--acc); color: var(--acc-hell) }
.ld .spur.vor .vp.zahlung { border-left-color: var(--ampel-gelb); color: var(--ampel-gelb) }
/* Die Pillen ueberlappen sich sonst; jede zweite rutscht nach unten */
.ld .spur.vor .vp:nth-child(even) { top: 31px }
/* "Dehnen": feste Achsenbreite, waagrecht rollen */
/* Der Balken der Zeitachse folgt dem gemeinsamen Aussehen (siehe
laserdance-system.css) - er ist nur etwas hoeher, weil man ihn hier
oft anfasst statt zu wischen. */
.ld .tlroll::-webkit-scrollbar { height: 14px }
@media (max-width: 900px) {
.ld .tlh { grid-template-columns: 96px 1fr }
.ld .tlname { font-size: var(--fs-10); padding: 0 7px }
.ld .spur.vor .vp { max-width: 150px; font-size: var(--fs-10) }
}
/* ============================================================
Zeitachse in voller Auflösung: jeder Slot mit Namen
============================================================ */
/* Karte über dem Ganzen: der Tag in voller Breite, Klick springt hin */
.ld .zoomz { font: 700 var(--fs-11) var(--font); color: var(--muted); align-self: center; padding: 0 4px }
/* Spurbeschriftung links: das Produkt als klare Mini-Marke, damit man
sofort sieht, dass eine Zeile Lasertag ist (Pauls Ticket). */
.ld .tlname small {
display: inline-block; font: 800 var(--fs-10) var(--font); letter-spacing: .06em;
text-transform: uppercase; margin-top: 2px; padding: 1px 6px;
border: 1px solid currentColor; border-radius: 2px; opacity: .9
}
.ld .tlgitter .tlname.lt small { color: var(--lime) }
.ld .tlgitter .tlname.pxa small, .ld .tlgitter .tlname.pxb small { color: var(--cyan) }
.ld .tlgitter .tlname.pa small { color: var(--cyan) }
.ld .tlgitter .tlname.vorn small { color: var(--ampel-gelb) }
.ld .tlname { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px }
.ld .tlname.vorn { color: var(--acc) }
/* Ein Block je Slot, mit Zeit und Namen darin */
.ld .spur.lt, .ld .spur.px, .ld .spur.pa { height: 62px }
/* Kein overflow am Block: das macht ihn zum eigenen Scroll-Kontext, und der
klebende Text (siehe unten) haette daran statt an der Zeitachse gehangen.
Begrenzt wird stattdessen jedes Textkind einzeln. */
.ld .tb {
position: absolute; top: 4px; bottom: 4px; cursor: pointer;
border: 1px solid var(--dim); border-left-width: 3px;
background: linear-gradient(to right, rgba(199,251,77,.16) var(--fp), transparent var(--fp));
padding: 3px 5px; display: flex; flex-direction: column; gap: 1px; line-height: 1.15
}
.ld .tb:hover { border-color: var(--acc); z-index: 3 }
.ld .tb .tz { font: 700 var(--fs-10) var(--font); color: var(--muted); display: flex; gap: 5px }
.ld .tb .tz em { font-style: normal; font-weight: 800; color: var(--text); margin-left: auto }
.ld .tb .tg {
font: 700 var(--fs-11) var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.ld .tb .tg i { font-style: normal; color: var(--muted); font-weight: 600; margin-left: 4px }
.ld .tb .tg.offen { color: var(--ampel-gelb) }
.ld .tb .tx { font: 400 var(--fs-10) var(--font); color: var(--muted); white-space: nowrap; overflow: hidden }
/* Lasertag: Farbe nach Auslastung wie im Tagesplan */
.ld .spur.lt .tb.f0 { border-left-color: var(--dim); opacity: .5 }
.ld .spur.lt .tb.f1 { border-left-color: var(--lime) }
.ld .spur.lt .tb.f3 { border-left-color: var(--ampel-orange) }
.ld .spur.lt .tb.f4 { border-left-color: var(--red) }
.ld .spur.lt .tb.konflikt { border-style: dashed; border-color: var(--acc) }
/* Pixel: frei ist zart, gebucht trägt die Flächenfarbe */
.ld .spur.px .tb.frei { opacity: .38; background: none; border-left-color: var(--dim) }
.ld .spur.px .tb.fa { background: rgba(200,27,255,.14); border-left-color: var(--acc) }
.ld .spur.px .tb.fb { background: rgba(2,255,255,.12); border-left-color: var(--cyan) }
/* Party */
.ld .spur.pa .tb.prieg { background: rgba(2,255,255,.1); border-color: var(--cyan); border-left-width: 3px }
.ld .spur.pa .tb.prieg.offen { border-top: 3px solid var(--ampel-gelb) }
.ld .wrap.ovfull .opswrap, .ld .wrap.ovfull .opsmain, .ld .wrap.ovfull .tlh { width: 100% }
/* align-items:start aus der Grundregel wuerde die Spalte nur so hoch machen
wie ihr Inhalt - dann bleibt die Achse ein Streifen statt den Schirm zu
fuellen. */
.ld .wrap.ovfull .opswrap {
grid-template-columns: 1fr; margin: 0; gap: 0; flex: 1; min-height: 0;
align-items: stretch
}
.ld .wrap.ovfull .opsmain { display: flex; flex-direction: column; min-height: 0; padding: 10px 14px 0 }
.ld .wrap.ovfull .tlh { flex: 1; min-height: 0; border-bottom: 0 }
/* Gleiche Basis wie die Namen links: mit unterschiedlichen Ausgangshoehen
liefen Beschriftung und Spur auseinander, je weiter man nach unten kam. */
/* Die Notizen bleiben erreichbar, nehmen aber nur eine Zeile ein */
.ld .wrap.ovfull .notizliste {
flex: 0 0 auto; max-height: 76px; overflow-y: auto; margin: 0;
border-top: 1px solid var(--dim); padding: 6px 0 8px
}
/* Stundensprung in der Kopfzeile statt eines eigenen Bandes */
.ld .stdsprung { display: flex; gap: 3px; margin-right: 8px }
.ld .stdsprung button {
min-width: 34px; height: 30px; padding: 0 8px; background: var(--field);
border: 1px solid var(--line); border-bottom-width: 3px; border-bottom-color: var(--dim);
color: var(--muted); font: 800 var(--fs-12) var(--font); font-variant-numeric: tabular-nums;
cursor: pointer; position: relative;
display: inline-flex; align-items: center; justify-content: center;
transition: border-color .12s ease, color .12s ease, background .12s ease
}
.ld .stdsprung button:hover { border-color: var(--acc); border-bottom-color: var(--acc); color: #fff; background: #1b1b26 }
/* Auslastung als farbige Unterkante - ruhiger als eine flaechige Toenung */
.ld .stdsprung button.b1 { color: var(--lime); border-bottom-color: var(--lime) }
.ld .stdsprung button.b2 { color: #FFB870; border-bottom-color: var(--ampel-orange) }
.ld .stdsprung button.b3 { color: #FF6B8A; border-bottom-color: var(--red) }
.ld .stdsprung button.pty::after {
content: ""; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px;
border-radius: 50%; background: var(--cyan)
}
/* Lasertag: Füllung nach Auslastung, von leer bis randvoll */
.ld .spur.lt .tb {
background: linear-gradient(to right,
var(--lt-farbe, rgba(199,251,77,.34)) var(--fp), rgba(255,255,255,.03) var(--fp));
border-color: rgba(255,255,255,.1)
}
.ld .spur.lt .tb.f0 { --lt-farbe: transparent; opacity: .42; border-left-color: var(--dim) }
.ld .spur.lt .tb.f1 { --lt-farbe: rgba(199,251,77,.38); border-left-color: var(--lime) }
.ld .spur.lt .tb.f3 { --lt-farbe: rgba(255,138,42,.45); border-left-color: var(--ampel-orange) }
.ld .spur.lt .tb.f4 { --lt-farbe: rgba(255,0,55,.45); border-left-color: var(--red) }
.ld .spur.lt .tb.konflikt {
--lt-farbe: rgba(200,27,255,.35); border: 1px dashed var(--acc); border-left-width: 4px
}
/* Offene Zahlung: gelbe Oberkante, die Auslastungsfarbe bleibt unberührt */
.ld .spur .tb:has(.tg.offen) { border-top: 3px solid var(--ampel-gelb) }
/* Pixel: die Fläche trägt ihre eigene Farbe, satt statt angedeutet */
.ld .spur.px .tb.frei { background: rgba(255,255,255,.03); opacity: .5; border-left-color: var(--dim) }
.ld .spur.px .tb.fa { background: rgba(200,27,255,.4); border-left-color: var(--acc); border-color: rgba(200,27,255,.5) }
.ld .spur.px .tb.fb { background: rgba(2,255,255,.32); border-left-color: var(--cyan); border-color: rgba(2,255,255,.45) }
/* Party: kräftiger Riegel, damit er die Spur trägt */
.ld .spur.pa .tb.prieg {
background: linear-gradient(135deg, rgba(2,255,255,.34), rgba(2,255,255,.18));
border: 1px solid var(--cyan); border-left-width: 4px
}
.ld .spur.pa .tb.prieg .tz { color: #BFFFFF }
/* Arena */
/* Pixel */
/* Party */
.ld .spur.pa .pvor {
position: absolute;
top: 8px;
bottom: 8px;
background: repeating-linear-gradient(45deg,
rgba(2,255,255,.3) 0 6px, rgba(2,255,255,.06) 6px 12px);
border-left: 3px solid var(--cyan);
}
.ld .spur .tb .tg i { color: rgba(255,255,255,.6) }
.ld .spur .tb .tg.offen { color: #FFE68A }
/* Die Spuren voneinander absetzen, damit man die Zeile nicht verliert */
.ld .spur.lt { background: rgba(199,251,77,.035) }
.ld .spur.px { background: rgba(200,27,255,.035) }
.ld .spur.pa { background: rgba(2,255,255,.035) }
.ld .spur.vor { background: rgba(255,255,255,.02) }
/* Stundenraster kräftiger, sonst verliert man die Zeit im Farbfeld */
/* Der Text eines langen Blocks klebt am linken Rand: eine Party läuft über
Stunden, ihr Name stand sonst weit links außerhalb des Bildes. */
.ld .spur .tb > span {
position: sticky; left: 8px; align-self: flex-start;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.ld .spur.pa .tb.prieg { padding-right: 12px }
/* Freie Slots ganz zurücknehmen, damit das Belegte trägt */
.ld .spur.lt .tb.f0 .tz em { color: rgba(255,255,255,.35) }
/* Ohne Blockclipping muss der überfahrene Block nach vorn, sonst schiebt sich
ein Nachbarname darüber. */
.ld .spur .tb:hover { z-index: 4 }
/* Beim Ziehen darf sich nichts markieren */
.ld .slotblk .gk.ziehbar, .ld .slotblk .gk { user-select: none; -webkit-user-select: none }
.ld .mvhinweis { font-size: var(--fs-12); color: var(--muted); margin-top: 8px; line-height: 1.4 }
/* Zu schmal für Namen: Sinnbilder statt Text */
.ld .spur .tb .tk {
display: flex; align-items: center; gap: 3px;
font: 800 var(--fs-11) var(--font); color: #fff
}
.ld .spur .tb .tk .ic {
width: 11px; height: 11px; display: inline-block; opacity: .8;
background: currentColor; margin-right: 1px
}
/* Gruppe: drei Köpfe. Person: ein Kopf. Als Maske, damit sie die Textfarbe erben. */
.ld .ic.gruppe {
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat
}
.ld .ic.person {
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat
}
.ld .spur .tb.eng { padding: 3px 4px }
.ld .spur .tb.eng .tz { font-size: var(--fs-10) }
.ld .spur .tb.eng .tz em { display: none }
/* Leere Slots sichtbar lassen, statt sie fast auszublenden */
.ld .spur.lt .tb.f0, .ld .spur.px .tb.frei {
opacity: 1; background: rgba(255, 255, 255, .035);
border: 1px dashed rgba(255, 255, 255, .14); border-left-width: 3px
}
.ld .spur.lt .tb.f0 .tz, .ld .spur.px .tb.frei .tz { color: rgba(255, 255, 255, .45) }
/* Notiz-Pille anklickbar */
.ld .spur.vor .vp.notiz {
border-left-color: var(--lime);
color: var(--lime);
cursor: pointer;
}
.ld .spur.vor .vp.notiz:hover { background: rgba(199, 251, 77, .18) }
@media (max-width: 700px) {
/* Namen im Slot lesbar halten. Zwei Gruppen standen im Slot nebeneinander,
auf 390 Pixeln blieb davon "Jon... Pau..." uebrig - am Tresen sagt das
nicht, wer gleich vor der Tuer steht. Untereinander hat jeder Name die
volle Breite der Raumspalte. */
/* Am Handy stehen die Paare untereinander, damit die Namen lesbar
bleiben. Der Massstab ist aber fuer zwei Spalten gerechnet (er kommt
vom Server, der die Bildbreite nicht kennt): ein voller Slot rollt
dann in sich, statt Zeilen zu verschlucken. Handy und iPad sind laut
Paul (13.09.) nicht die Geraete, an denen gemessen wird. */
.ld .slotblk { overflow-y: auto; scrollbar-width: none }
.ld .slotblk .sgpaar { grid-template-columns: 1fr }
.ld .slotblk .sgpaar > .sg:nth-child(1) { padding-right: 0 }
.ld .slotblk .sgpaar > .sg:nth-child(2) { border-left: 0; padding-left: 0 }
.ld .slotblk .sgpaar > .sg:empty { display: none }
}
/* ---- Uebersicht: Bedienelemente auf dem Handy ---- */@media (max-width: 700px) {
/* Stundensprung, Zoomregler und "Notiz anheften" standen in einer Reihe
ohne Umbruch und rechts vom Bildrand: der Regler war um 93 Pixel
abgeschnitten, der Notizknopf gar nicht erreichbar. Die Zeitleiste
selbst schiebt sich waagrecht, das ist gewollt - ihre Bedienung darf
das nicht auch tun. */
.ld .ovkopf2 .k2 { flex-wrap: wrap; margin-left: 0; width: 100%; gap: 8px }
.ld .ovkopf2 .k2 .stdsprung {
flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; white-space: nowrap
}
.ld .ovkopf2 .k2 .stdsprung::-webkit-scrollbar { display: none }
}
/* Freie Slots ohne den grauen Strich am linken Rand - Farbe am Rand heisst
ab jetzt immer: hier ist etwas gebucht */
.ld .spur.lt .tb.f0 { border-left-color: transparent }
.ld .slotblk.blockgriff { cursor: grab }
.ld body.zieht .slotblk.blockgriff { cursor: grabbing }
/* ---- Nachpruefung 21.08.: Zeitleiste haelt die volle Breite ---- */
/* Bei kleinem Zoom war der Tag schmaler als das Fenster: die Leiste hing in
der Luft, und das Zoomen ruckte unterm stehenden Zeiger. Innenflaeche und
Spuren strecken sich jetzt mindestens auf die volle Rollbreite. */
/* ---- Nachpruefung 21.08.: Zeilen und Beschriftungen laufen synchron ---- */
/* Rechts wachsen die Spuren mit flex auf die Bildschirmhoehe - links standen
die Namen auf festen 54px. Zwei Hoehenformeln fuer dieselben Zeilen laufen
immer auseinander (Pauls Ticket, zum zweiten Mal gemeldet). Jetzt verteilen
beide Seiten mit demselben flex: gleicher Kopf (30px), gleiche Zeilenzahl,
gleiche Verteilung = gleiche Kanten. */
.ld .wrap.ovfull .tlspalte .tlname {
flex: 1 1 0; height: auto; min-height: 0;
overflow: hidden
}
/* Suchtreffer blitzt an, damit das Auge die Stelle findet */
/* Innerer Ring (inset box-shadow) statt Outline: die Outline wurde an der
unteren Kante abgeschnitten (Pauls "untere kante noch immer nicht"). Ein
inset-Schatten liegt INNERHALB des Elements und ist auf allen vier Seiten
sichtbar, egal ob ein Vorfahr scrollt/clippt. scroll-margin haelt beim
Hinspringen oben/unten Luft. */
.ld section.zielblitz { animation: ldZielblitz 2.4s ease; scroll-margin: 80px }
@keyframes ldZielblitz {
0%, 55% { box-shadow: inset 0 0 0 3px var(--acc) }
100% { box-shadow: inset 0 0 0 3px transparent }
}
/* Zeilen links/rechts buendig trotz Scrollleiste: die Leiste (10px) machte
die rechten Zeilen kuerzer als die Namen links. Platz wird jetzt IMMER
reserviert, links wie rechts. */
.ld .wrap.ovfull .tlroll {
height: 100%;
scrollbar-gutter: stable;
}
/* "Zahlung offen" in der Legende sieht aus wie am Block: obere Kante */
.ld .tlmeta .lgd i.oben { border-left: 0; border-top: 3px solid var(--ampel-gelb) }
/* Gruppen im Slot: zwei Spalten nur, wenn beide lesbar bleiben */
/* Landing: Karten-Icon, "weitere Zeiten" buendig rechts */
.ld .picon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px }
.ld .lsrow .morebtn { margin-left: auto }
/* ---- Uebersicht: EIN Gitter fuer Beschriftungen und Spuren ----
Viermal gemeldet ("die zeilen passen nicht mit den beschriftungen links"),
dreimal am Symptom geflickt (Hoehen, Scrollleiste, Gutter). Die Ursache
war die Architektur: zwei getrennte Stapel mit unabhaengiger Hoehen-
rechnung (54 vs 62px Grundhoehe, Scrollleiste nur rechts). Jetzt sind
Beschriftung und Spur Zellen DERSELBEN Gitterzeile. */
.ld .tlh { display: block; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain }
.ld .tlgitter {
display: grid; grid-template-columns: 140px var(--tlw) minmax(0, 1fr);
grid-template-rows: 30px; grid-auto-rows: minmax(46px, 1fr);
position: relative; min-width: 100%; height: 100%; min-height: 0
}
.ld .tlgitter .tllinien {
position: absolute; top: 0; bottom: 0; left: 140px; width: var(--tlw);
pointer-events: none; z-index: 0
}
.ld .tlgitter .jetzt { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--cyan); z-index: 5 }
.ld .tlgitter .tlname {
/* Am linken Rand fest: position:sticky wird bei einem Grid-Item in
Chromium auf seine schmale Zelle beschraenkt und scrollt dann doch
weg. Stattdessen schiebt ein Scroll-Handler die Spalte per --tlx
(= scrollLeft) mit - visuell gepinnt, die Zeilen-Ausrichtung des
Gitters bleibt exakt erhalten. */
/* translate3d + will-change: eigene GPU-Ebene, damit die Spalte beim
Rollen nicht mehr eine Bild zu spaet nachspringt (Pauls "zuckt"). */
grid-column: 1; z-index: 6; transform: translate3d(var(--tlx, 0px), 0, 0);
will-change: transform; backface-visibility: hidden;
background: var(--p2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--dim);
display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
padding: 0 11px; height: auto; min-height: 0;
font: 700 var(--fs-11) var(--font); color: var(--muted)
}
.ld .tlgitter .tlname.lt { border-left: 3px solid var(--lime) }
.ld .tlgitter .tlname.pxa { border-left: 3px solid var(--acc) }
.ld .tlgitter .tlname.pxb { border-left: 3px solid var(--cyan) }
.ld .tlgitter .tlname.pa { border-left: 3px solid var(--cyan) }
.ld .tlgitter .tlname.vorn { border-left: 3px solid var(--ampel-gelb); color: var(--acc) }
.ld .tlgitter .tlzelle { grid-column: 2 / -1; position: relative; min-width: 0; z-index: 1 }
.ld .tlgitter .tlzelle .tlkopf { height: 100%; position: relative; border-bottom: 1px solid var(--dim) }
.ld .tlgitter .tlzelle .spur { height: 100%; min-height: 0; width: 100%; border-bottom: 1px solid var(--dim) }
@media (max-width: 900px) {
.ld .tlgitter { grid-template-columns: 96px var(--tlw) minmax(0, 1fr) }
.ld .tlgitter .tllinien { left: 96px }
.ld .tlgitter .tlname { font-size: var(--fs-10); padding: 0 7px }
}
/* Die Stundenachse im Kopf: jede Marke traegt ihre Position als inline
"left", das wirkt aber nur auf einem positionierten Element. Ohne diese
Regel war .std ein statischer Block ohne Groesse, und alle neun
Stundenbeschriftungen landeten uebereinander am linken Rand (gemessen
10.09.2026: 12:00 bis 20:00 alle auf x=217, waehrend die Achse 4340 px
breit ist). Die Stundenlinien im Kopf fehlten damit ganz. */
.ld .tlkopf .std {
position: absolute; top: 0; bottom: 0; width: 0;
border-left: 1px solid transparent; pointer-events: none
}
.ld .tlgitter .tlkopf .std.voll { border-left-color: var(--dim) }
.ld .tlgitter .tlkopf .std span {
position: absolute; left: 5px; top: 8px; font: 700 var(--fs-11) var(--font); color: var(--muted);
letter-spacing: .01em; white-space: nowrap
}
/* Jetzt-Marke im Kopf sichtbar beschriftet wie vorher */
.ld .tlgitter .jetzt i {
position: absolute;
font: 800 var(--fs-10) var(--font);
font-style: normal;
text-transform: uppercase;
background: var(--cyan);
color: #04141a;
padding: 1px 5px;
top: 4px;
left: 0;
letter-spacing: 0;
}
/* In der Vollbild-Uebersicht beginnt die Beschriftungsspalte am linken
Rand - dort braucht das Dock reservierten Platz, sonst verdeckt es die
Raumnamen. Auf den Produkt-Reitern sitzt es im freien Randstreifen. */
@media (min-width: 1101px) {
.ld .wrap.ovfull .opsmain { padding-left: 72px }
}
/* ---- Notiz-Dialog aufgeraeumt (Beanstandung "nicht schoen") ---- */
.ld .notizdlg { width: min(430px, 94vw) }
.ld .notizdlg .ntext {
width: 100%; background: var(--field); border: 1px solid var(--dim); color: var(--text);
font: 400 var(--fs-13)/1.45 var(--font); padding: 9px 11px; resize: vertical; min-height: 74px
}
.ld .notizdlg .ntext:focus { outline: 0; border-color: var(--cyan) }
.ld .notizdlg .ntext::placeholder { color: var(--muted); opacity: .7 }
.ld .notizdlg .nzeile { display: flex; align-items: center; gap: 12px; margin-top: 10px }
.ld .notizdlg .nzeit { display: inline-flex; align-items: center; gap: 8px }
.ld .notizdlg .nzeit span { font: 700 var(--fs-11) var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: .06em }
/* 92px schnitten "12:00" an der Uhr-Ikone des Browsers an */
.ld .notizdlg .nzeit input { width: 118px }
.ld .notizdlg .hint { margin-top: 9px; font-size: var(--fs-11); color: var(--muted) }
/* Audit #13: beide Legenden-Bauarten zeichnen gleich (10px Kaestchen,
3px Kante) - gleiche Bedeutung, gleiches Bild */
.ld .legend i {
border: 1px solid var(--line);
border-left: 4px solid;
display: inline-block;
width: 10px;
height: 10px;
border-left-width: 3px;
}
/* ---- Uebersichts-Block: Hover-Panel mit allen Gruppen ----
Inline nur wenige Namen (sonst zerquetscht); beim Hover ein schwebendes
Panel mit allen. position:fixed (Koordinaten setzt JS), damit die
overflow-Grenze der Zeitleiste es nicht abschneidet. */
.ld .tb .tg.mehr { opacity: .8; font-style: normal }
.ld .tb .tbpop {
position: fixed; z-index: 200; display: none; min-width: 150px; max-width: 260px;
background: #0c0b14; border: 1px solid var(--acc);
backdrop-filter: blur(3px);
box-shadow: 0 12px 34px rgba(0, 0, 0, .7); padding: 8px 10px
}
.ld .tb .tbpop.auf { display: block }
.ld .tb .tbpop .pk { font: 700 var(--fs-11) var(--font); color: var(--muted); margin-bottom: 5px }
.ld .tb .tbpop .zeile {
display: flex; justify-content: space-between; gap: 12px;
font-size: var(--fs-12); color: var(--text); padding: 2px 0
}
.ld .tb .tbpop .zeile.offen { color: var(--ampel-gelb) }
.ld .tb .tbpop .zeile b { font-weight: 800 }
/* ---- Feiertage bestaetigen (Konfiguration/Allgemein) ---- */
.ld .ftzeile {
display: flex; align-items: center; gap: 12px; padding: 8px 0;
border-bottom: 1px solid var(--dim);
/* Am Handy passen Name und die drei Knoepfe nicht in eine Zeile. */
flex-wrap: wrap
}
.ld .ftzeile:last-of-type { border-bottom: 0 }
.ld .ftzeile .ftname { flex: 1; min-width: 0; font-weight: 700 }
.ld .ftzeile .ftname small { display: block; color: var(--muted); font-size: var(--fs-11); font-weight: 400 }
.ld .ftzeile .ftstatus { color: var(--muted); font-size: var(--fs-12) }
.ld .ftzeile.offen { background: rgba(2, 255, 255, .04) }
.ld .ftzeile.dringend .ftname small { color: var(--ampel-gelb) }
.ld .ftzeile.dringend { box-shadow: inset 3px 0 0 var(--ampel-gelb); padding-left: 8px }
/* Inline-Zeiteditor je Feiertag (Ticket 2026-08-23) */
.ld .ftzeile .ftedit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.ld .ftzeile .ftedit .ck { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); margin: 0 }
.ld .ftzeile .ftedit input[type=time] { width: 108px }
.ld .ftzeile .ftedit .bis { color: var(--muted); font-size: var(--fs-12) }
/* Gleiche Person beim Zeigen: alle Spiele derselben Buchung tragen den
Rahmen (oben bei .gk.gleich, dieselbe Staerke wie in der Spalte). */
/* --- Party-Sub-Spuren: gleichzeitige Partys stapeln statt ueberlappen (Ticket 2026-08-23) --- */
/* --palanes steht auf der Spur, --lane auf jedem Riegel/Vorlauf. Bei genau
einer Spur ergibt sich fast dieselbe Lage wie zuvor (top 2px, fast volle Hoehe). */
.ld .spur.pa { height: calc(62px * var(--palanes, 1)); }
.ld .spur.pa .tb.prieg,
.ld .spur.pa .pvor {
top: calc(var(--lane, 0) * (100% / var(--palanes, 1)) + 2px);
height: calc(100% / var(--palanes, 1) - 4px);
bottom: auto;
}
/* ============================================================
Uebersicht-Slots kraeftiger und lesbarer (Ticket 2026-08-23)
============================================================ */
/* Gesamtzahl der Gruppen/Partys fett am linken Rand jeder Spur */
.ld .tlname { position: relative }
.ld .tlname .lanetot {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex;
align-items: center; justify-content: center; font: 800 var(--fs-13) var(--font);
color: var(--text); background: rgba(255, 255, 255, .08);
border: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.ld .tlgitter .tlname.lt .lanetot { color: var(--lime); border-color: rgba(199, 251, 77, .4) }
.ld .tlgitter .tlname.pxa .lanetot, .ld .tlgitter .tlname.pxb .lanetot,
.ld .tlgitter .tlname.pa .lanetot { color: var(--cyan); border-color: rgba(2, 255, 255, .4) }
/* Die Spur bekommt einen leichten, vertieften Hintergrund - so treten die
farbigen Bloecke nach vorn. */
.ld .spur.lt, .ld .spur.px, .ld .spur.pa {
background: rgba(255, 255, 255, .022);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .25);
}
/* ============================================================
Kräftige Farben in der Zeitachse: eine Spur, eine Handschrift
============================================================ */
/* Der Block trägt die Farbe flächig, nicht als dünner Rand. Aus drei Metern
sieht man dann die Farbe, aus einem Meter die Namen. */
/* Bloecke heben sich mit einem feinen Schatten vom Untergrund ab */
.ld .spur .tb {
border: 1px solid transparent;
border-left-width: 4px;
background: #16161E;
padding: 4px 7px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
/* Kraeftigere Fuellfarben nach Auslastung */
.ld .spur.lt .tb.f1 { --lt-farbe: rgba(199, 251, 77, .52) }
.ld .spur.lt .tb.f3 { --lt-farbe: rgba(255, 138, 42, .62) }
.ld .spur.lt .tb.f4 { --lt-farbe: rgba(255, 0, 55, .66) }
.ld .spur.px .tb.fa { background: rgba(200, 27, 255, .52); border-color: rgba(200, 27, 255, .6) }
.ld .spur.px .tb.fb { background: rgba(2, 255, 255, .44); border-color: rgba(2, 255, 255, .55) }
.ld .spur.pa .tb.prieg {
background: linear-gradient(135deg, rgba(2, 255, 255, .46), rgba(2, 255, 255, .26));
}
/* Text im Block: heller, damit er auf der Farbe steht */
/* Text im Block klarer: Zeit als kompakte Kopfzeile, Namen deutlich */
.ld .spur .tb .tz {
display: flex;
gap: 6px;
color: rgba(255, 255, 255, .92);
font-weight: 800;
}
.ld .spur .tb .tz em { color: #fff }
.ld .spur .tb .tg {
font-size: var(--fs-12);
color: #fff;
font-weight: 700;
}
/* ============================================================
Party-Reiter als Kalender (Ticket 2026-08-23, zweiter Anlauf)
Paul: "ich wollte ja wie ein calender haben also eh wie pixel
oder lasertag ... aber die slots sollen wie jetzt bei den
partys so sein mit den ganzen buttons und so".
Geruest, Stundenlinien und Jetzt-Linie kommen unveraendert von
Lasertag und Pixel; nur der Block ist ein anderer, weil er
Raumwahl, Geld und drei Knoepfe traegt.
============================================================ */
.ld .tlmeta .lgd .lgpa { border-left-color: var(--cyan); background: rgba(2, 255, 255, .16) }
/* Schmale Schirme: die Lounge-Spalten behalten eine Mindestbreite und die
Achse rollt waagrecht in sich selbst. Eine Party-Karte in 100 px waere
nicht bedienbar. Die SEITE bekommt dadurch kein Querscrollen, nur dieser
eine Behaelter - wie in der Uebersicht. */
.ld .tl.pa { overflow-x: auto; overscroll-behavior-x: contain }
.ld .tl.pa .tlhead,
.ld .tl.pa .tlbody { min-width: calc(64px + var(--pacols, 1) * 210px) }
/* Party-Block im Party-Reiter (Schritt 3a): derselbe Slotblock wie bei
Lasertag, eine Party je Block, Spiele und Extras als Zeilen darunter. */
.ld .slotblk.party .sgruppen { gap: 2px }
.ld .slotblk.party .sbel i { margin-left: 3px }
.ld .slotblk .pz {
display: grid; grid-template-columns: 34px 44px minmax(0, 1fr); gap: 8px; align-items: center;
height: 18px; line-height: 18px; font-size: var(--fs-12); color: var(--muted)
}
.ld .slotblk .pz .snr { font-size: var(--fs-11); line-height: 16px; text-align: center }
.ld .slotblk .pz .snr.leer { background: none }
.ld .slotblk .pz .t { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums }
.ld .slotblk .pz .r { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ld .slotblk .pstand { font-size: var(--fs-12); font-weight: 700; color: var(--muted2); line-height: 18px }
.ld .slotblk .pstand.off { color: var(--ampel-gelb); font-weight: 800 }
.ld .slotblk .pstand.wartet { color: var(--muted) }
.ld .slotblk.gewaehlt { box-shadow: inset 0 0 0 2px var(--cyan) }
.ld .pablk .pageld .off { color: var(--red) }
/* Die Aktionszeile sitzt am unteren Rand des Blocks, damit sie in jeder
Party an derselben Stelle steht - auch wenn die eine Extras hat und die
andere nicht. */
.ld .pablk .paakt {
display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;
padding-top: 8px; border-top: 1px solid var(--dim);
}