/* Dialoge und Panels: Schnellmenue, Editor, Dock, Vor-Ort-Buchung, Nebenknopf
   Teil 3 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. */
/* 320 statt 288 px: die Zeile traegt jetzt fuenf feste Spalten (Name, Status,
   Zahlung, Verschieben, Bearbeiten). Mit 288 blieben dem Namen 100 px und
   "Stripe Testzahlung" waere abgeschnitten worden. Wer die Breite aendert,
   aendert auch die Klemmung im style-Attribut in Betrieb.razor mit
   (calc(100vw - 332px)) - sonst haengt das Menue am rechten Rand hinaus. */
.ld .qmenu {
    position: fixed; z-index: 95; width: min(320px, calc(100vw - 16px));
    background: var(--p2, #14121d); border: 1px solid var(--acc);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .6); padding: 0 0 4px
}
.ld .qmenu .qk {
    font-size: var(--fs-12); font-weight: 800; padding: 9px 12px;
    border-bottom: 1px solid var(--dim); color: var(--muted)
}
.ld .qmenu .qleer { padding: 10px 12px; font-size: var(--fs-12); color: var(--muted) }
/* Festes Raster statt Flex: die Zeichen einer Zeile stehen ueber ALLE Zeilen
   an derselben Stelle, auch wenn eine Aktion fehlt. Bei Flex sass der Haken
   einer Party 37 px weiter rechts, weil das fehlende Verschieben-Zeichen
   seinen Platz an die Nachbarn weitergab (Pauls Ticket "jede spalte sollte
   fix sein und soll nicht verschoben werden"). Die leere Zelle bleibt leer. */
.ld .qmenu .qrow {
    display: grid; grid-template-columns: minmax(0, 1fr) 46px 30px 30px 30px;
    align-items: center; gap: 6px; padding: 7px 12px;
    border-bottom: 1px solid var(--dim); font-size: var(--fs-13)
}
.ld .qmenu .qrow:last-of-type { border-bottom: 0 }
.ld .qmenu .qname { grid-column: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ld .qmenu .qname small { color: var(--muted); font-weight: 500 }
.ld .qmenu .qflag {
    grid-column: 2; justify-self: center; text-align: center;
    font-size: var(--fs-10); font-weight: 700; padding: 2px 6px; border: 1px solid currentColor; white-space: nowrap
}
.ld .qmenu .qflag.paid { color: var(--lime) }
.ld .qmenu .qflag.open { color: var(--ampel-gelb) }
.ld .qmenu .qbtn.zahl { grid-column: 3 }
.ld .qmenu .qbtn.versch { grid-column: 4 }
.ld .qmenu .qbtn.bearb { grid-column: 5 }
.ld .qmenu .qbtn {
    width: 30px; height: 28px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--field); border: 1px solid var(--line); color: var(--text);
    font-size: var(--fs-14); cursor: pointer
}
.ld .qmenu .qbtn:hover { border-color: var(--acc); color: var(--acc) }
.ld .qmenu .qfuss {
    display: block; width: calc(100% - 16px); margin: 8px; padding: 8px;
    background: var(--field); border: 1px solid var(--line); color: var(--cyan);
    font-family: var(--font); font-size: var(--fs-12); font-weight: 700; cursor: pointer
}
.ld .qmenu .qfuss:hover { border-color: var(--cyan) }

/* Klickbare Buchungszeile im Slot-Fenster: die ganze Zeile oeffnet den Editor */
.ld :is(.panel, .spalte) .grow.klick { cursor: pointer }
.ld :is(.panel, .spalte) .grow.klick:hover { background: rgba(200, 27, 255, .09) }
/* letzte Rasterspalte statt margin-left:auto - siehe .grow weiter unten */
.ld :is(.panel, .spalte) .grow .pfeil { grid-column: 5; color: var(--cyan); font-size: var(--fs-12); font-weight: 700; white-space: nowrap }

/* Buchungs-Editor */
.ld .panel.editor { width: min(560px, calc(100vw - 24px)) }
.ld .edlbl { font-size: var(--fs-11); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--cyan); margin: 14px 0 7px }
.ld .edgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.ld .edgrid input { padding: 9px 11px; font-size: var(--fs-14) }
.ld .edtermin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-13); font-weight: 600 }
.ld .edtermin small { color: var(--muted); font-weight: 500 }
.ld .edfoot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--dim) }
.ld .edfoot .minibtn { font-size: var(--fs-12); padding: 9px 16px }
.ld .edfoot .minibtn.go { background: var(--acc); border-color: var(--acc); color: #fff }
.ld .edfoot .minibtn.go:hover { background: var(--cyan); border-color: var(--cyan); color: #000 }
.ld .edfoot .minibtn.danger { margin-left: auto }
.ld .edfoot .minibtn.danger + .minibtn { margin-left: 0 }
.ld :is(.panel.editor, .spalte) .step { display: inline-flex }
.ld :is(.panel.editor, .spalte) .step button { padding: 6px 13px }
.ld :is(.panel.editor, .spalte) .step .n { min-width: 40px; text-align: center; font-weight: 800 }

/* Was gerade passiert ist, unten links, mit dem Weg zurueck.
   Bewusst unten links: rechts sitzt der Ticket-Knopf, oben der Plan. */
.ld .undotoast {
    position: fixed; left: 16px; bottom: 16px; z-index: 98;
    display: flex; align-items: center; gap: 12px;
    max-width: min(520px, calc(100vw - 32px));
    background: #14141C; border: 1px solid var(--cyan);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .6);
    padding: 12px 12px 12px 16px; font-size: var(--fs-13); line-height: 1.35
}
.ld .undotoast .ut { flex: 1; font-weight: 600 }
.ld .undotoast .zu {
    background: none; border: 0; color: var(--muted); font-size: var(--fs-20);
    line-height: 1; padding: 0 4px; cursor: pointer
}
.ld .undotoast .zu:hover { color: #fff }
@media (max-width: 720px) {
    .ld .undotoast { left: 8px; right: 8px; bottom: 8px; max-width: none }
}

/* Verlauf im Bearbeiten-Fenster */
.ld .edlbl.aufklapp {
    display: flex; align-items: center; gap: 6px; width: 100%;
    background: none; border: 0; text-align: left; cursor: pointer; padding: 0
}
.ld .edlbl.aufklapp span { color: var(--muted) }
.ld .verlauf { display: flex; flex-direction: column; gap: 1px; background: var(--dim); margin-top: 6px }
.ld .verlauf .vz { background: #101017; padding: 8px 10px }
.ld .verlauf .vk { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-11) }
.ld .verlauf .vk b { font-size: var(--fs-12) }
.ld .verlauf .vk span { color: var(--muted) }
.ld .verlauf .vt { font-size: var(--fs-12); margin: 2px 0 0 }
.ld .verlauf .minibtn { margin-top: 6px }

/* Bestaetigung beim Verschieben: Vorher/Nachher */
.ld .panel.movedlg { width: min(460px, calc(100vw - 24px)) }
.ld .mvzeile { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--dim); font-size: var(--fs-13) }
.ld .mvzeile .k { flex: 0 0 60px; color: var(--muted); font-weight: 600 }
.ld .mvzeile .v { font-weight: 700 }
.ld .mvzeile.neu .v { color: var(--cyan) }
.ld .stfuss .minibtn.danger { margin-left: auto }
.ld .panel {
    position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: min(680px, calc(100vw - 24px)); max-height: 88vh; overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--p2); border: 1px solid var(--acc)
}
.ld .panel .ph {
    background: var(--acc); color: #fff; padding: 12px 17px;
    display: flex; align-items: center; justify-content: space-between
}
.ld .panel .ph b { font-size: var(--fs-15); letter-spacing: .02em }
/* Zweite Zeile im Fensterkopf (Datum) statt eines Mittelpunkts im Titel. */
.ld .panel .ph b small { display: block; font-size: var(--fs-11); font-weight: 600; opacity: .85; letter-spacing: 0 }
.ld .panel .ph button { background: none; border: 0; color: #fff; font-size: var(--fs-22); cursor: pointer; line-height: 1 }
.ld .panel .pc { padding: 15px 17px }

/* Dasselbe feste Raster wie im Schnellmenue: Name, Anzahl, Herkunft, Status,
   "bearbeiten" stehen in jeder Zeile an derselben Stelle. Vorher trugen
   Status UND "bearbeiten" je ein margin-left:auto; zwei automatische Raender
   teilen sich den freien Platz, und der ist je Zeile anders gross, sobald eine
   Marke ("Party", "vor Ort", "TEST") dazukommt oder fehlt. Genau daran ist der
   erste Anlauf gescheitert. */
.ld :is(.panel, .spalte) .grow {
    display: grid; grid-template-columns: 140px 150px minmax(0, 1fr) 78px auto;
    align-items: center; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--dim); font-size: var(--fs-13)
}
.ld :is(.panel, .spalte) .grow .who { grid-column: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ld :is(.panel, .spalte) .grow .srcs { grid-column: 3; display: flex; align-items: center; gap: 6px; min-width: 0 }
.ld :is(.panel, .spalte) .grow .step { display: inline-flex }
.ld :is(.panel, .spalte) .grow .step button { padding: 4px 11px }
.ld :is(.panel, .spalte) .grow .step .n { min-width: 34px; text-align: center; font-weight: 800 }
/* Detail als feste Spalte, Status rechtsbuendig - so beginnen die Spalten
   ueber alle Zeilen an derselben Stelle statt versetzt (Pauls Ticket). */

.ld :is(.panel, .spalte) .grow .det {
    grid-column: 2;
    color: var(--muted);
    font-size: var(--fs-12);
}
.ld :is(.panel, .spalte) .grow .tel { color: var(--cyan); font-size: var(--fs-12); text-decoration: none }

.ld :is(.panel, .spalte) .grow .flag {
    grid-column: 4;
    font-size: var(--fs-11);
    font-weight: 700;
    padding: 3px 9px;
    border: 1px solid currentColor;
    white-space: nowrap;
    /* Die Zelle ist 78 px breit, die Marke fuellt sie ganz aus: dann steht die
       Statusspalte in jeder Zeile an derselben Stelle. */
    box-sizing: border-box;
    text-align: center;
}
.ld :is(.panel, .spalte) .grow .flag.paid { color: var(--lime) }
.ld :is(.panel, .spalte) .grow .flag.open { color: var(--red) }
.ld :is(.panel, .spalte) .grow .src { font-size: var(--fs-11); color: var(--muted2); border: 1px solid var(--dim); padding: 3px 8px }

.ld .minibtn {
    border: 1px solid var(--line); background: var(--field); color: var(--muted);
    font-family: var(--font); font-weight: 700; font-size: var(--fs-11); padding: 5px 11px;
    cursor: pointer; white-space: nowrap
}
.ld .minibtn:hover { border-color: var(--acc); color: var(--text) }
.ld .minibtn.go { background: var(--acc); border-color: var(--acc); color: #fff; font-size: var(--fs-13); padding: 9px 16px }
.ld .minibtn.go:hover { background: var(--cyan); border-color: var(--cyan); color: #000 }
.ld .minibtn.danger { border-color: var(--red); color: var(--red) }
.ld .minibtn.danger:hover { background: var(--red); color: #fff }
.ld .minibtn[disabled] { opacity: .5; cursor: not-allowed }

.ld .wiform { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-top: 13px }
.ld .wiform .fld .lbl2 { display: block; font-size: var(--fs-12); color: var(--muted); font-weight: 600; margin-bottom: 5px }
.ld .wiform .step button { width: 36px; height: 38px; font-size: var(--fs-16) }
.ld .wiform .step .n { min-width: 42px; font-size: var(--fs-16) }
.ld .wiform input { padding: 9px 11px; font-size: var(--fs-14) }
.ld .wiform .wiprice { font-weight: 800; font-size: var(--fs-18); color: var(--acc); padding-bottom: 7px }
.ld .wierr { color: var(--red); font-size: var(--fs-12); font-weight: 600; padding-top: 8px }
.ld .rolehint { color: var(--muted2); font-size: var(--fs-12); padding-top: 10px }

/* Party-Liste */
.ld .nothing { padding: 26px 14px; text-align: center; color: var(--muted2); font-size: var(--fs-14) }
/* Telefon: 596 px Spaltenbreite gibt es nicht. Der Name nimmt die erste Zeile
   ganz, darunter stehen Anzahl, Status und "bearbeiten" in drei festen
   Spalten - dieselbe Regel wie am Schreibtisch, nur zweizeilig. Die
   Herkunfts-Marken bekommen eine eigene dritte Zeile und verschwinden ganz,
   wenn es keine gibt (sonst haette jede Zeile eine leere Zeile Abstand). */
@media (max-width: 700px) {
    .ld :is(.panel, .spalte) .grow {
        grid-template-columns: minmax(0, 1fr) 78px auto;
        row-gap: 4px
    }
    .ld :is(.panel, .spalte) .grow .who { grid-column: 1 / -1; grid-row: 1 }
    .ld :is(.panel, .spalte) .grow .det { grid-column: 1; grid-row: 2 }
    .ld :is(.panel, .spalte) .grow .flag { grid-column: 2; grid-row: 2 }
    .ld :is(.panel, .spalte) .grow .pfeil { grid-column: 3; grid-row: 2 }
    .ld :is(.panel, .spalte) .grow .srcs { grid-column: 1 / -1; grid-row: 3 }
    /* :has statt :empty - Blazor legt Kommentarknoten und Leerraum in die
       Zelle, damit ist sie fuer :empty nie leer. */
    .ld :is(.panel, .spalte) .grow .srcs:not(:has(.src)) { display: none }
}

/* iPad hochkant und Telefon: Vorbereiten wird schmaler, Pixel rückt zusammen */
@media (max-width: 1100px) {
    .ld .ovkopf,
    .ld .ovbody { grid-template-columns: 52px 150px minmax(120px, 1fr) 70px minmax(140px, 1fr) }
}

/* Zeitblock-Karte: ein Klick in die Übersicht zeigt den ganzen Zeitraum */
.ld .panel.zbk { width: min(480px, calc(100vw - 24px)) }
.ld .zbg { margin-bottom: 14px }
.ld .zbg:last-child { margin-bottom: 0 }
.ld .zbt {
    font-size: var(--fs-11); letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--dim); padding-bottom: 4px; margin-bottom: 6px
}
.ld .zbt span { float: right; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 700 }
.ld .zbz { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; font-size: var(--fs-13) }
.ld .zbz span:first-child { flex: 1; font-weight: 700 }
.ld .zbz .p { color: var(--muted); font-size: var(--fs-12) }
.ld .zbz .ok { color: var(--lime); font-size: var(--fs-11); font-weight: 700 }
.ld .zbz .offen { color: var(--ampel-gelb); font-size: var(--fs-11); font-weight: 700 }
.ld .zbx { font-size: var(--fs-12); color: var(--muted); padding: 2px 0 4px }
.ld .zbx.spez { color: var(--acc-hell); border-left: 2px solid var(--acc); padding-left: 8px; margin: 3px 0 }
.ld .zbg .minibtn { margin-top: 8px }

/* ============================================================
   Zweite Navigationszeile: Produkt und Tag immer im Blick
   ============================================================ */

.ld .mastwrap { position: sticky; top: 0; z-index: 25; background: var(--bg, #08070C) }
.ld .panel.notizdlg { width: min(440px, calc(100vw - 24px)) }
.ld .panel.notizdlg textarea.ntext {
    width: 100%; background: var(--field); border: 1px solid var(--line);
    color: var(--text); font: 400 var(--fs-13) var(--font); padding: 8px; resize: vertical
}

/* Die Storno-Rueckfrage (Pauls Ticket "mach ein pop up window mit der
   bestaetigung") ist seit Schritt 6 das Storno-Fenster mit online und vor
   Ort: .panel.geldfenster.stornodlg in betrieb-spalte.css. */

/* Abgelehnte Aktion: dieselbe Leiste wie der Hinweis, nur unmissverstaendlich rot. */
.ld .undotoast.schlecht { border-color: var(--red); background: rgba(239,68,68,.14) }
@media (pointer: coarse) {
    .ld .minibtn { min-height: 38px }
}

/* E-Mail auf der Bestaetigungsseite berichtigen */
.ld .mailedit {
    margin-left: 9px; background: none; border: 1px solid var(--line); color: var(--muted);
    font: 600 var(--fs-11) var(--font); padding: 2px 8px; cursor: pointer
}
.ld .mailedit:hover { border-color: var(--cyan); color: var(--cyan) }
.ld .mailform { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap }
.ld .mailform input { width: min(240px, 60vw); padding: 6px 9px; font-size: var(--fs-13) }
.ld .mailmeld { display: block; font-size: var(--fs-11); margin-top: 3px }
.ld .mailmeld.gut { color: var(--lime) }
.ld .mailmeld.schlecht { color: var(--red) }

/* Speichern-Knopf zeigt den Stand: scharf = es gibt etwas zu speichern */
.ld .minibtn.scharf { box-shadow: 0 0 0 1px var(--acc), 0 0 12px rgba(200, 27, 255, .45) }
.ld .minibtn:disabled { opacity: .45; cursor: default }

/* ---- Nachtschicht P3: Dock, Schnellbuchung, Party vor Ort ---- */

/* Dock links: schwebt wie eine Apple-Taskbar. Hover vergroessert weich,
   die Nachbarn ziehen leicht mit; der Name faehrt rechts heraus. */
.ld .dock {
    position: fixed; left: 8px; top: 50%; transform: translateY(-50%); z-index: 38;
    display: flex; flex-direction: column; gap: 4px; padding: 8px 5px;
    background: rgba(14, 14, 22, .82); border: 1px solid var(--line);
    border-radius: 14px; backdrop-filter: blur(10px)
}
.ld .dock .di {
    position: relative; width: 42px; height: 42px; display: grid; place-items: center;
    background: transparent; border: 0; border-radius: 10px; color: var(--muted);
    cursor: pointer; transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), color .15s ease
}
.ld .dock .di:hover { transform: scale(1.32); color: var(--text); z-index: 1 }
.ld .dock .di:hover + .di,
.ld .dock .di:has(+ .di:hover) { transform: scale(1.12) }
.ld .dock .di.on { color: var(--cyan) }
.ld .dock .di.on::after {
    content: ""; position: absolute; left: 1px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 16px; border-radius: 2px; background: var(--cyan)
}
.ld .dock .di.buchen { color: var(--acc) }
.ld .dock .di.buchen:hover { color: #e78bff }
.ld .dock .dsep { height: 1px; margin: 2px 6px; background: var(--line) }
.ld .dock .dn {
    position: absolute; left: calc(100% + 10px); top: 50%; translate: 0 -50%;
    white-space: nowrap; font-size: var(--fs-12); font-weight: 700; color: var(--text);
    background: rgba(14, 14, 22, .95); border: 1px solid var(--line);
    padding: 4px 10px; border-radius: 8px; pointer-events: none;
    opacity: 0; transform: translateX(-6px); transition: opacity .16s ease, transform .16s ease
}
.ld .dock .di:hover .dn { opacity: 1; transform: translateX(0) }
@media (max-width: 1100px), (pointer: coarse) { .ld .dock { display: none } }
@media (prefers-reduced-motion: reduce) {
    .ld .dock .di, .ld .dock .dn { transition: none }
    .ld .dock .di:hover { transform: none }
}

/* Kurzhinweis unten, solange das Schnellaktionen-Menue offen ist (Ticket) */
.ld .etipp {
    position: fixed; left: 50%; bottom: 54px; transform: translateX(-50%); z-index: 96;
    font: 600 var(--fs-11) var(--font); color: var(--muted);
    background: rgba(10, 10, 15, .95); border: 1px solid var(--line);
    padding: 5px 13px; pointer-events: none; white-space: nowrap;
}
.ld .etipp b { color: var(--cyan); font-weight: 800 }

/* ---------- Freigabe der Leitung (Freigabe.razor, LD-101) ----------
   Ein Storno mit Geld braucht die PIN eines Managers, der auf DIESEM Geraet
   hinterlegt ist. Das Fenster ist eine ganz normale .panel-Karte; Kacheln,
   Punkte und Ziffernblock kommen unveraendert von der Anmeldeseite
   (.anmkacheln, .anmkachel, .anmpunkte, .anmpad in laserdance-system.css) -
   das Team kennt sie schon, und es gibt keinen zweiten Ziffernblock im
   Projekt, der auseinanderlaufen koennte. */
.ld .panel.freigabe { width: min(420px, calc(100vw - 24px)) }
.ld .panel.freigabe:focus { outline: none }
.ld .panel.freigabe .fgtext {
    font-size: var(--fs-13); line-height: 1.5; padding-bottom: 11px;
    border-bottom: 1px solid var(--dim)
}
/* Der Rueckfall ohne Leitungskonto ist kein Fehler, sondern ein Hinweis -
   deshalb gelb wie "offene Zahlung" und nicht rot. */
.ld .panel.freigabe .fghinweis {
    margin: 12px 0 4px; padding: 10px 12px; border-radius: 6px; font-size: var(--fs-13); line-height: 1.5;
    background: rgba(255, 209, 102, .1); border: 1px solid rgba(255, 209, 102, .35); color: #FFD166
}
.ld .panel.freigabe .fgfoot { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 15px }
.ld .panel.freigabe .anmkacheln { margin-top: 4px }
.ld .panel.freigabe .anmpad { margin-top: 4px }

/* ---------- Offene Rueckerstattungen (/buchungen) ----------
   Die Liste steht ueber den Treffern, weil sie Geld ist, das der Gast noch
   bekommt: sie darf nicht erst nach dem Scrollen auffallen. */
.ld .erstliste { margin-bottom: 16px }
.ld .erstzeile {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 0; border-bottom: 1px solid var(--dim); font-size: var(--fs-13)
}
.ld .erstzeile .nr { font-family: var(--mono, monospace); color: var(--muted); flex: 0 0 52px }
.ld .erstzeile .gast { font-weight: 700; flex: 1 1 150px; min-width: 120px }
.ld .erstzeile .betrag { font-weight: 800; color: #FFD166; flex: 0 0 88px; text-align: right }
.ld .erstzeile .grund { color: var(--muted); font-size: var(--fs-12); flex: 2 1 220px }
.ld .erstzeile .seit { color: var(--muted2); font-size: var(--fs-12); flex: 0 0 auto }
.ld .erstzeile .tun { margin-left: auto; display: flex; gap: 8px }
@media (max-width: 700px) { .ld .erstzeile .nr { flex-basis: 100% } }

/* Offene Anfragen (docs/alpha/13): dieselbe Zeile, anklickbar, rot ueber der Frist */
.ld .anfliste .erstzeile { cursor: pointer }
.ld .anfliste .erstzeile:hover { background: rgba(255, 255, 255, .03) }
.ld .anfliste .erstzeile.gewaehlt { background: rgba(200, 27, 255, .08) }
.ld .anfliste .erstzeile.spaet .seit { color: var(--red); font-weight: 700 }


/* ============================================================
   Andockspalte (12.09.2026) -> die Spalte (14.09.2026)
   ============================================================
   Bis 12.09. lag jedes Fenster des Tagesplans als Modal ueber dem Plan,
   auch die zwei, in denen man ARBEITET (Slot-Fenster, Editor). Ab 12.09.
   dockten vier Panels ab 1440 px rechts an, als position:fixed-Kasten mit
   Schatten - Pauls "Swimmingpool im Wohnzimmer". Seit Schritt 2 des Umbaus
   ist das die eine, eingebaute Spalte: Components/Laserdance/Spalte.razor
   mit betrieb-spalte.css. Geld-Entscheidungen (Storno-Rueckfrage, Freigabe,
   Verschieben-Rueckfrage, Party anlegen, Schnellwahl) bleiben Modals in der
   Mitte: dort SOLL nichts anderes anklickbar sein.
   ============================================================ */

/* Die vier angedockten Panels (slotfenster, editor, tagesliste, moveinfo)
   und ihre Schublade sind seit Schritt 2 (14.09.2026) die EINE Spalte in
   betrieb-spalte.css. Hier bleibt nur das Zeilenraster der Gruppenzeile
   fuer die Spaltenbreite. */
.ld .spalte .grow {
    grid-template-columns: 118px 112px minmax(0, 1fr) 70px auto;
    gap: 8px;
}
@media (min-width: 1680px) {
    .ld .spalte .grow {
        grid-template-columns: 140px 130px minmax(0, 1fr) 78px auto;
        gap: 10px;
    }
}


}