/* Die Spalte: Rahmen des Bauteils Components/Laserdance/Spalte.razor.
   Schritt 2 des Umbaus, 14.09.2026 (docs/alpha/07 Abschnitt 7, docs/alpha/09).
   Teil 7 der Betriebsansicht, eingebunden nach betrieb-dialoge.css, weil
   sie die vier angedockten Panels von dort abloest (slotfenster, editor,
   tagesliste, moveinfo standen ab 1440 px als position:fixed-Kasten mit
   Schatten rechts ueber dem Plan).

   EINGEBAUT, NICHT AUFGESETZT. Ab 861 px ist die Spalte eine Rasterspalte
   von .opswrap: der Plan wird daneben schmaler, statt unter ihr zu liegen.
   Gleiche Flaeche wie die Seite (--p1), eine Kante zum Inhalt, kein
   Schatten, kein Rahmen, kein Abdunkeln. Kopf und Knopfleiste oben stehen,
   der Inhalt darunter rollt in sich.

   Welche Seite (Pauls Rueckmeldung vom 15.09.2026, nach der ersten Woche
   mit der Spalte): ab 1440 px rechts neben dem Plan, der Kalender bleibt
   links stehen. Darunter (Laptop 1280, 150 Prozent Zoom am 1920er Schirm)
   LINKS an der Stelle des Kalenders, der solange verschwindet: so bleibt
   der Plan mit seiner Zeitachse ganz sichtbar, und zum Datum gibt es die
   Leiste im Kopf (Vor, Zurueck, Heute). Bis 860 px (Telefon, iPad hoch)
   eine Schublade von links ueber allem.

   Am Bildrand, bei jedem Zoom: der Seitenrahmen (.wrap, sonst hoechstens
   1760 px und mittig) laeuft auf der Seite der Spalte bis zur Kante. Vorher
   stand sie je nach Zoom 60 bis 170 px vom Rand entfernt.

   Breite: waechst mit der Schrift. Die Schriftgroessen (--fs-12 usw.,
   laserdance-system.css) steigen zwischen 1360 und 1920 px um ein Sechstel;
   die Spalte tut dasselbe (540 bis 630 px), damit die Knopfleiste bei
   jeder Fensterbreite dieselben Knoepfe in EINER Zeile fasst. 540 px sind
   das Mass fuer die vollste Leiste der Buchung (Guthaben zurueck, vor Ort
   dazu, bearbeiten, verschieben, stornieren) mit 12 px Schrift und Luft,
   gemessen am 15.09.2026. Die Spalten des Rasters stehen als Variablen an
   .opswrap (betrieb-leisten.css): --railb Kalender, --beachtb Beachten,
   --spalteb diese Spalte. Leer heisst "gibt es nicht", so bleibt EINE
   Rasterregel. Wer hier etwas aendert: docs/DESIGN.md lesen, danach
   python tools\css-referenz.py nachher. */

.ld { --spalte-b: clamp(540px, calc(540px + (100vw - 1360px) * 0.161), 630px) }

/* ---- Das Bauteil selbst ---- */
/* Vier Zeilen mit FESTEM Platz: Kopf, Knopfleiste, Hinweise, Inhalt. Jede
   Zeile ist zugewiesen (grid-row), nicht der Reihe nach verteilt: als die
   Hinweise fehlten, rutschte die Knopfleiste in die Zeile des Inhalts und
   die Knoepfe standen mitten in der leeren Spalte (Paul, 15.09.2026: "nicht
   ganz unten oder random in der Mitte"). Die Knopfleiste steht darum direkt
   unter dem Kopf, immer an derselben Stelle, in einer Zeile; was drunter
   kommt, rollt. */
.ld .spalte {
    display: grid; grid-template-rows: auto auto auto minmax(0, 1fr);
    background: var(--p1); border-left: 1px solid var(--line);
    color: var(--text); font-family: var(--font); min-height: 0
}
.ld .spalte .spkopf {
    grid-row: 1; display: flex; align-items: center; gap: 8px; min-height: 48px;
    padding: 0 10px 0 14px; border-bottom: 1px solid var(--line); background: var(--p1)
}
.ld .spalte .sptitel { flex: 1 1 auto; min-width: 0; font-size: var(--fs-14); font-weight: 800; letter-spacing: .01em }
.ld .spalte .sptitel small { display: block; font-size: var(--fs-11); font-weight: 600; color: var(--muted2) }
.ld .spalte .spzurueck, .ld .spalte .spschliessen {
    flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
    background: none; border: 1px solid transparent; color: var(--muted); cursor: pointer;
    font-family: inherit; font-size: var(--fs-22); line-height: 1
}
.ld .spalte .spzurueck { font-size: var(--fs-24); color: var(--cyan) }
.ld .spalte .spzurueck:hover, .ld .spalte .spschliessen:hover { color: var(--text); border-color: var(--line) }
.ld .spalte .spknoepfe {
    grid-row: 2; display: flex; gap: 6px; align-items: center; height: 50px; box-sizing: border-box;
    padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--p1);
    /* Nie zwei Zeilen: die Knoepfe schrumpfen nicht und brechen nicht um.
       Passt es einmal doch nicht (drei lange Knoepfe bei 200 Prozent Zoom),
       rollt die Leiste waagrecht, ohne Balken, statt eine zweite Zeile zu
       oeffnen oder einen Knopf abzuschneiden. */
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none
}
.ld .spalte .spknoepfe::-webkit-scrollbar { display: none }
.ld .spalte .spknoepfe > * { flex: 0 0 auto; white-space: nowrap }
.ld .spalte .spknoepfe .spsatz { flex: 1 1 auto; min-width: 0; white-space: normal }
.ld .spalte .sphinweise { grid-row: 3; padding: 8px 14px; border-bottom: 1px solid var(--dim); display: grid; gap: 6px }
.ld .spalte .sphinweise:empty { display: none }
.ld .spalte .spinhalt {
    grid-row: 4; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 12px 14px 16px
}
.ld .spalte .spleer { display: none }

/* Der Griff, wenn die Spalte zu ist: eine schmale Lasche am Rand, immer
   sichtbar, nicht erst beim Zeigen. Auf der Seite, auf der die Spalte
   aufgeht: rechts ab 1440 px, sonst links (unten). */
.ld .spgriff {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 58;
    width: 26px; padding: 14px 0; background: var(--p2); color: var(--muted);
    border: 1px solid var(--line); border-right: 0; cursor: pointer; font-family: var(--font)
}
.ld .spgriff span {
    display: block; writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: var(--fs-11); font-weight: 800; letter-spacing: .12em; text-transform: uppercase
}
.ld .spgriff:hover { color: var(--text); border-color: var(--acc) }

/* ---- Bis zur Kante: der Seitenrahmen weicht auf der Seite der Spalte ---- */
@media (min-width: 861px) {
    .ld .pg:has(.staffchip) .wrap:not(.ovfull):has(.spalte) { max-width: none }
}

/* ---- Ab 1440 px: Rasterspalte rechts, der Kalender bleibt ---- */
@media (min-width: 1440px) {
    .ld .pg:has(.staffchip) .wrap:not(.ovfull):has(.spalte) { padding-right: 0 }
    .ld .wrap:not(.ovfull) .opswrap:has(> .spalte) { --spalteb: var(--spalte-b) }
    /* /konfiguration (Schritt 7b): Baum, Inhalt, Spalte. Dasselbe Raster wie
       in betrieb-konfiguration.css, um die Spalte ergaenzt. */
    .ld .cfglayout:has(> .spalte) { grid-template-columns: 212px 1fr var(--spalte-b) }
    .ld :is(.opswrap, .cfglayout) > .spalte { grid-column: -2 / -1 }
    /* Vollbild-Uebersicht: dort traegt Flex die Hoehe (siehe .ovfull in
       betrieb-tagesplan.css und die Beachten-Spalte in betrieb-listen.css). */
    .ld .wrap.ovfull .opswrap:has(> .spalte) { display: flex; gap: 0 }
    .ld .wrap.ovfull .opswrap:has(> .spalte) > .opsmain { flex: 1 1 auto; min-width: 0 }
    .ld .wrap.ovfull .opswrap > .spalte { flex: 0 0 var(--spalte-b); order: 3 }
    /* Die Ticket-Marke (unten rechts, ld-ticket.js) hing in der Spalte. */
    body:has(.ld .spalte) #ldt-badge { right: calc(var(--spalte-b) + 16px) !important }
}
@media (min-width: 1500px) {
    /* Der breitere Baum ab 1500 px (betrieb-konfiguration.css), mit Spalte. */
    .ld .pg:has(.staffchip) .cfglayout:has(> .spalte) { grid-template-columns: 240px 1fr var(--spalte-b) }
}

/* ---- 861 bis 1439 px: Rasterspalte links, an der Stelle des Kalenders ---- */
@media (min-width: 861px) and (max-width: 1439px) {
    .ld .pg:has(.staffchip) .wrap:not(.ovfull):has(.spalte) { padding-left: 0 }
    .ld .wrap:not(.ovfull) .opswrap:has(> .spalte) {
        --spalteb: var(--spalte-b);
        grid-template-columns: var(--spalteb) 1fr var(--beachtb)
    }
    .ld .opswrap:has(> .spalte) > .opsside { display: none }
    .ld .opswrap:has(> .spalte) > .opsmain { grid-column: 2 }
    .ld :is(.opswrap, .cfglayout) > .spalte { grid-column: 1; border-left: 0; border-right: 1px solid var(--line) }
    .ld .wrap.ovfull .opswrap:has(> .spalte) { grid-template-columns: var(--spalte-b) 1fr }
    .ld .spgriff { right: auto; left: 0; border-right: 1px solid var(--line); border-left: 0 }
}
/* Das Dock (betrieb-dialoge.css) schwebt links in der Mitte, genau dort, wo
   in dieser Lage Griff und Spalte stehen. Solange es da ist (ab 1101 px), wechselt
   es auf die rechte Seite, der Name faehrt nach links heraus, und der Plan
   bekommt rechts den Streifen dafuer (wie in der Vollbild-Uebersicht links,
   betrieb-tagesplan.css). */
@media (min-width: 1101px) and (max-width: 1439px) {
    .ld .dock { left: auto; right: 8px }
    .ld .dock .dn { left: auto; right: calc(100% + 10px); transform: translateX(6px) }
    .ld .dock .di:hover .dn { transform: translateX(0) }
    .ld .dock .di.on::after { left: auto; right: 1px }
    .ld:has(> .dock) .wrap:not(.ovfull) { padding-right: 68px }
    .ld .wrap.ovfull .opsmain { padding-left: 14px; padding-right: 72px }
}

/* ---- Beide Rasterlagen: an der Leiste kleben, bis zur Fussleiste hoch ---- */
@media (min-width: 861px) {
    .ld :is(.opswrap, .cfglayout) > .spalte {
        grid-row: 1; align-self: start; min-width: 0;
        position: sticky; top: var(--kopf, 110px);
        height: calc(100vh - var(--kopf, 110px) - var(--fusshoehe, 46px));
        /* Buendig an die Tagesleiste: ueber dem Raster liegen 18 px Innenabstand
           von .wrap und 18 px Abstand von .opswrap. Beim Rollen klebt sie an
           derselben Kante (top: --kopf). */
        margin-top: -36px;
    }
    /* Seiten ohne Kalenderspalte (/buchungen, /manager) und /konfiguration:
       keine Tagesleiste, nur die 18 px Innenabstand von .wrap liegen ueber dem
       Raster. So beginnt die Spalte an der Unterkante der Navigation. */
    .ld .opswrap.ohnerail > .spalte, .ld .cfglayout > .spalte { margin-top: -18px }
    .ld .wrap.ovfull .opswrap > .spalte { position: static; height: auto; margin: 0; align-self: stretch }
    .ld .spovl { display: none }
}

/* ---- /konfiguration, 861 bis 1439 px: Schublade von links ueber Suche und Baum ----
   Kein Raster wie im Tagesplan: drei Spalten (Spalte, Baum, Inhalt) passten
   bis 1280 px, bei 1097 px lief der Inhalt ueber den Rand; Baum und Suche
   auszublenden nahm der Seite ihre Navigation und schob die Geraetetabelle
   aus dem Bild. So bleibt der Inhalt in voller Breite bedienbar, waehrend
   man Wirkung und letzte Aenderungen liest; wer zum Baum will, klappt sie
   mit dem x zu (der Griff bleibt links). */
@media (min-width: 861px) and (max-width: 1439px) {
    .ld .cfglayout > .spalte {
        position: fixed; top: var(--kopf, 110px); left: 0; bottom: var(--fusshoehe, 46px);
        width: var(--spalte-b); height: auto; margin: 0; z-index: 60; grid-column: auto;
        /* align-self gilt auch fuer fest positionierte Kinder eines Rasters:
           mit "start" (Regel oben) waere sie nur so hoch wie ihr Inhalt. */
        align-self: stretch
    }
    .ld .cfglayout:has(> .spalte) { grid-template-columns: 212px 1fr }
    .ld .pg:has(.staffchip) .cfglayout:has(> .spalte) { grid-template-columns: 240px 1fr }
}

/* ---- Schublade bis 860 px: von links, ueber allem ---- */
@media (max-width: 860px) {
    .ld .spalte {
        position: fixed; top: var(--kopf, 110px); left: 0; bottom: var(--fusshoehe, 46px);
        width: min(var(--spalte-b), 100vw); z-index: 60;
        border-left: 0; border-right: 1px solid var(--line);
        animation: spSchub .16s ease-out
    }
    .ld .spovl { position: fixed; inset: 0; z-index: 59; background: transparent }
    @keyframes spSchub { from { transform: translateX(-24px); opacity: .6 } to { transform: none; opacity: 1 } }
    .ld .spgriff { right: auto; left: 0; border-right: 1px solid var(--line); border-left: 0 }
}
@media (prefers-reduced-motion: reduce) { .ld .spalte { animation: none } }

/* ==================================================================
   INHALT DER SPALTE, Schritt 3 (14.09.2026, Plan 07 Abschnitte 8a, 9, 12d, 12e).
   Drei Ebenen, ueberall dieselbe Gruppenzeile (.pr), dieselben Knoepfe.
   Farbe tragen nur: das offene Geld (gelb), die vier Knoepfe unten und
   die Produkt-Ueberschriften in der Buchungsansicht. Sonst Struktur:
   Boxen mit Rand, Zeilen abwechselnd dunkel und hell, feste Spalten.
   ================================================================== */

/* Kopf: der Name einer Buchung groesser, alles andere 14 px. */
.ld .spalte .sptitel .name { font-size: var(--fs-16) }
/* Seiten ohne Kalenderspalte (/buchungen, Schritt 7): nur Inhalt und Spalte.
   --spalteb ist leer, solange die Spalte zu ist; unter 1440 px setzt die
   Lage links oben ein eigenes Raster. */
.ld .opswrap.ohnerail { grid-template-columns: 1fr var(--spalteb); margin-top: 0 }
/* Ein Link als Knopf ("im Tagesplan"): sieht aus wie die Knoepfe daneben. */
.ld .spalte .spknoepfe a.minibtn { text-decoration: none; display: inline-flex; align-items: center }
/* Eine Gruppenzeile als Link (Planung, Schritt 7c): fuehrt zur Buchung. */
.ld .spalte a.pr { text-decoration: none }
.ld .spalte .pr .tm.warn { color: var(--ampel-gelb) }

/* Hinweise: Zeichen, ein Satz. */
.ld .spalte .hz {
    display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: baseline;
    font-size: var(--fs-12); color: var(--text); line-height: 1.4
}
.ld .spalte .hz b { color: var(--muted2); font-weight: 800; text-align: center }
.ld .spalte .hz.warn b { color: var(--red) }
/* Wirkung in der Konfiguration: gilt (gruen), gilt nicht rueckwirkend (rot). */
.ld .spalte .hz.ja b { color: var(--lime) }
.ld .spalte .hz.nein b { color: var(--red) }
.ld .spalte .hz + .hz { margin-top: 6px }
/* Letzte Aenderungen in der Konfiguration: alt durchgestrichen, neu normal. */
.ld .f4 .vlauf .lv { display: block; font-size: var(--fs-11); color: var(--muted2); margin-top: 1px }
.ld .f4 .vlauf .lv .logalt { margin-right: 6px }

/* Knoepfe nach Bedeutung: kassieren gruen, verschieben tuerkis,
   stornieren und abbrechen rot, Vor Ort buchen als Hauptaktion. */
.ld .spalte .spknoepfe .minibtn { font-size: var(--fs-12); font-weight: 700; padding: 8px 10px }
.ld .spalte .spknoepfe .minibtn.stark { border-color: var(--acc); background: rgba(200, 27, 255, .16); color: #fff }
.ld .spalte .minibtn.gruen { border-color: var(--lime); color: var(--lime); background: rgba(199, 251, 77, .12) }
.ld .spalte .minibtn.tuerkis { border-color: var(--cyan); color: var(--cyan); background: rgba(2, 255, 255, .1) }
.ld .spalte .minibtn.rot { border-color: var(--red); color: var(--red); background: rgba(255, 0, 55, .12) }
.ld .spalte .minibtn.gruen:hover { background: rgba(199, 251, 77, .24) }
.ld .spalte .minibtn.tuerkis:hover { background: rgba(2, 255, 255, .2) }
.ld .spalte .minibtn.rot:hover { background: rgba(255, 0, 55, .24) }
.ld .spalte .minibtn.klein { font-size: var(--fs-11); padding: 5px 10px }
.ld .spalte .spknoepfe .minibtn.rot { margin-left: auto }
.ld .spalte .spsatz { font-size: var(--fs-11); color: var(--muted2); padding: 5px 0; line-height: 1.4 }
.ld .spalte .warn { margin-top: 10px }
.ld .spalte .mvi-wer { font-size: var(--fs-15); font-weight: 800 }
.ld .spalte .mvi-tipp { margin-top: 10px; color: var(--muted); line-height: 1.45 }
@media (min-width: 1440px) {
    .ld:has(.spalte.verschieben) .movebar { display: none }
}

/* ---- Die Gruppenzeile: Name, Marke, Personen, Stand; feste Spalten ---- */
.ld .spalte .pr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 84px 96px; gap: 6px; align-items: center;
    padding: 6px 12px; margin: 0 -12px; font-family: var(--font); color: var(--text); text-align: left;
    background: none; border: 0; width: calc(100% + 24px); box-sizing: border-box
}
.ld .spalte .pr.klick { cursor: pointer }
.ld .spalte .pr.klick:hover { background: rgba(200, 27, 255, .1) !important }
.ld .spalte .pr:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px }
.ld .spalte .pr .nm { font-weight: 800; font-size: var(--fs-13); color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ld .spalte .pr .pmz { display: flex; gap: 4px; align-items: center; min-width: 0 }
.ld .spalte .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; border-radius: var(--r-chip)
}
.ld .spalte .pr .tm {
    font-style: normal; font-size: var(--fs-10); font-weight: 800; letter-spacing: .04em; color: var(--cyan);
    border: 1px solid currentColor; padding: 0 3px; line-height: 14px; border-radius: var(--r-chip)
}
.ld .spalte .pr .px { font-weight: 800; font-size: var(--fs-12); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.ld .spalte .pr .st { font-size: var(--fs-11); color: var(--muted2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ld .spalte .pr .st.off { color: var(--ampel-gelb); font-weight: 800 }
.ld .spalte .pr .st.gut { color: var(--lime); font-weight: 700 }
.ld .spalte .pr .st.weg { color: var(--red); font-weight: 700 }
.ld .spalte .pr.noshow .nm { text-decoration: line-through; color: var(--muted2) }
/* Der Haken "nicht erschienen" in der Buchungsansicht (Plan 11, B1). */
.ld .f4 .noshow { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--muted) }
.ld .f4 .noshow input { width: 16px; height: 16px; margin: 0 }
.ld .f4 .noshow.an { color: var(--red); font-weight: 700 }
/* Zeilen wechseln dunkel und hell statt Trennlinien; die erste Zeile nach
   einer Ueberschrift ist hell (DESIGN.md). */
.ld .spalte .gt2 + .pr, .ld .spalte .lk + .pr { background: rgba(255, 255, 255, .045) }
.ld .spalte .pr + .pr { background: none }
.ld .spalte .pr + .pr + .pr { background: rgba(255, 255, 255, .045) }
.ld .spalte .pr + .pr + .pr + .pr { background: none }
.ld .spalte .pr + .pr + .pr + .pr + .pr { background: rgba(255, 255, 255, .045) }
.ld .spalte .pr + .pr + .pr + .pr + .pr + .pr { background: none }
.ld .spalte .pr + .pr + .pr + .pr + .pr + .pr + .pr { background: rgba(255, 255, 255, .045) }
.ld .spalte .pr + .pr + .pr + .pr + .pr + .pr + .pr + .pr { background: none }

/* ---- Ebene Slot: zwei Kennzahlen, dann Online und Vor Ort ---- */
.ld .spalte .kz { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px }
.ld .spalte .kz > div { border: 1px solid var(--line); padding: 8px 10px; display: grid; gap: 1px; border-radius: var(--r-ctl) }
.ld .spalte .kz > div.offen { border-color: rgba(255, 216, 74, .55) }
.ld .spalte .kz .n { font-size: var(--fs-24); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums }
.ld .spalte .kz .n i { font-style: normal; font-size: var(--fs-12); font-weight: 700; color: var(--muted2); margin-left: 3px }
.ld .spalte .kz > div.offen .n { color: var(--ampel-gelb) }
.ld .spalte .kz > div.ruhig .n { color: var(--muted2) }
.ld .spalte .kz .t { font-size: var(--fs-11); color: var(--muted) }
.ld .spalte .gl { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0 }
.ld .spalte .gl > * { min-width: 0 }
.ld .spalte .gt2 {
    display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; margin-top: 10px;
    font-size: var(--fs-10); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2)
}
.ld .spalte .gt2::after { content: ""; height: 1px; background: var(--line) }
.ld .spalte .gt2:first-child { margin-top: 2px }
.ld .spalte .gl .hint { padding: 8px 0; color: var(--muted2) }
.ld .spalte .wiform { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--dim) }

/* ---- Tagesliste: je Slot eine Box, Kopf wie im Plan ---- */
.ld .spalte .lbox { border: 1px solid rgba(255, 255, 255, .14); padding: 0 12px 4px; margin: 8px 0 0; overflow: hidden; border-radius: var(--r-ctl) }
.ld .spalte .lbox:first-of-type { margin-top: 0 }
.ld .spalte .lbox.vorbei { border-color: rgba(255, 255, 255, .07); color: var(--muted2) }
.ld .spalte .lbox.vorbei .pr .nm, .ld .spalte .lbox.vorbei .lk .zt, .ld .spalte .lbox.vorbei .lk .bel { color: var(--muted2); font-weight: 700 }
.ld .spalte .lk {
    display: grid; grid-template-columns: 38px 92px minmax(0, 1fr) auto; gap: 8px; align-items: center;
    width: 100%; padding: 8px 0 6px; margin: 0; background: none; border: 0; text-align: left;
    font-family: var(--font); font-size: var(--fs-12); color: var(--muted)
}
.ld .spalte button.lk { cursor: pointer }
.ld .spalte button.lk:hover .zt { color: var(--acc-hell) }
.ld .spalte .lk .snr {
    font-weight: 800; font-size: var(--fs-11); color: var(--text); background: rgba(255, 255, 255, .09);
    padding: 0 5px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; border-radius: var(--r-chip)
}
.ld .spalte .lk .zt { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap }
.ld .spalte .lk .tag { font-size: var(--fs-10); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan) }
.ld .spalte .lk .prod { font-size: var(--fs-10); font-weight: 800; letter-spacing: .1em; text-transform: uppercase }
.ld .spalte .lk .prod.lt { color: var(--cyan) }
.ld .spalte .lk .prod.px { color: var(--violett) }
.ld .spalte .lk .prod.pa { color: var(--acc-hell) }
.ld .spalte .lk .bel { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap }
.ld .spalte .lk .bel i { font-style: normal; font-size: var(--fs-11); font-weight: 700; color: var(--muted2) }

/* ---- Ebene Buchung: Fassung 4 ---- */
.ld .f4 { font-size: var(--fs-12); display: grid; gap: 10px }
.ld .f4 .teil { display: grid; gap: 4px; min-width: 0 }
.ld .f4 .teil.box { border: 1px solid var(--rand, var(--line)); padding: 9px 11px 10px; position: relative; border-radius: var(--r-ctl) }
.ld .f4 .teil.box.party { --rand: var(--acc) }
.ld .f4 .teil.box.lt { --rand: var(--cyan) }
.ld .f4 .teil.box.px { --rand: var(--violett) }
.ld .f4 .teil.rest { padding: 2px 0 0; gap: 6px }
.ld .f4 .infoi {
    position: absolute; top: 7px; right: 9px; width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--muted2); color: var(--muted2); background: none; padding: 0; cursor: pointer;
    font-family: var(--font); font-size: var(--fs-10); font-weight: 800; display: grid; place-items: center
}
.ld .f4 .infoi.offen, .ld .f4 .infoi:hover { color: var(--text); border-color: var(--text) }
.ld .f4 .infotip {
    position: absolute; top: 30px; right: 9px; z-index: 3; width: min(260px, 80%);
    background: var(--p2); border: 1px solid var(--line); padding: 8px 10px; border-radius: var(--r-ctl);
    font-size: var(--fs-11); line-height: 1.45; color: var(--muted); box-shadow: 0 10px 30px rgba(0, 0, 0, .5)
}
.ld .f4 .ue { font-size: var(--fs-10); font-weight: 800; letter-spacing: .12em; color: var(--muted2); text-transform: uppercase }
.ld .f4 .ue.party { color: var(--acc-hell) }
.ld .f4 .ue.lt { color: var(--cyan) }
.ld .f4 .ue.px { color: var(--violett) }
.ld .f4 .ue.extras { color: var(--acc-hell); opacity: .85; margin-top: 6px }
.ld .f4 .pkopf { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; margin: 4px 0 4px }
.ld .f4 .pkopf .lbl { font-size: var(--fs-11); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.ld .f4 .pkopf .lbl small { display: block; font-size: var(--fs-11); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted2) }
.ld .f4 .pkopf .info { grid-column: 1 / -1; font-weight: 700; font-size: var(--fs-12) }
.ld .f4 .pkopf .n {
    width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .28); display: grid; place-items: center;
    font-size: var(--fs-18); font-weight: 800; font-variant-numeric: tabular-nums; border-radius: var(--r-ctl)
}
.ld .f4 .pkopf .n.geaendert { border-color: var(--lime) }
.ld .f4 .pkopf .step { display: inline-flex }
.ld .f4 .pkopf .step button { padding: 4px 11px }
.ld .f4 .pkopf .step .n { width: 44px; height: auto; min-width: 44px; text-align: center; font-weight: 800; border-radius: 0 }
.ld .f4 .ast { border-left: 1px solid rgba(255, 255, 255, .16); margin: 4px 0 0 4px; display: grid }
.ld .f4 .ast > .z { padding: 3px 6px 3px 10px }
.ld .f4 .ast > .z:first-child, .ld .f4 .ast > .ue + .z { background: rgba(255, 255, 255, .045) }
.ld .f4 .ast > .z + .z { background: none }
.ld .f4 .ast > .z + .z + .z { background: rgba(255, 255, 255, .045) }
.ld .f4 .ast > .z + .z + .z + .z { background: none }
.ld .f4 .ast > .ue { padding-left: 10px }
.ld .f4 .z { display: grid; grid-template-columns: 34px 44px 1fr; gap: 8px; font-variant-numeric: tabular-nums; align-items: baseline }
.ld .f4 .z i { font-style: normal; font-weight: 800 }
.ld .f4 .z em { font-style: normal; font-weight: 700 }
.ld .f4 .z span { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ld .f4 .z .menge {
    display: inline-block; min-width: 30px; text-align: center; font-weight: 800; font-size: var(--fs-11);
    border: 1px solid rgba(255, 255, 255, .25); padding: 1px 4px; color: var(--text); border-radius: var(--r-chip)
}
.ld .f4 .z.ex { grid-template-columns: 34px 1fr auto; gap: 10px }
/* Geld */
.ld .f4 .geldbox {
    border: 1px solid rgba(255, 216, 74, .55); padding: 10px 12px; display: grid; grid-template-columns: 1fr auto;
    gap: 2px 12px; align-items: baseline; border-radius: var(--r-ctl)
}
.ld .f4 .geldbox.gut { border-color: rgba(199, 251, 77, .55) }
.ld .f4 .geldbox .was { font-size: var(--fs-10); font-weight: 800; letter-spacing: .1em; color: var(--ampel-gelb); text-transform: uppercase }
.ld .f4 .geldbox.gut .was, .ld .f4 .geldbox.gut .gross { color: var(--lime) }
.ld .f4 .geldbox .gross { font-size: var(--fs-24); font-weight: 800; color: var(--ampel-gelb); font-variant-numeric: tabular-nums; line-height: 1.1 }
.ld .f4 .geldbox .rg { grid-column: 1 / -1; margin-top: 4px }
.ld .f4 .geldbox .rg .k { border-bottom-color: rgba(255, 216, 74, .25) }
.ld .f4 .geldbox .fuss { grid-column: 1 / -1; font-size: var(--fs-11); color: var(--muted2); margin-top: 4px }
.ld .f4 .geldruhig { display: grid; grid-template-columns: 1fr auto; gap: 8px; color: var(--muted); font-variant-numeric: tabular-nums; align-items: baseline }
.ld .f4 .geldruhig small { display: block; color: var(--muted2); font-size: var(--fs-11); font-weight: 400; margin-top: 1px }
.ld .f4 .geldruhig b { color: var(--text) }
/* Die Rechnungstabelle: Posten, Anzahl, je, Summe. Keine Formeln. */
.ld .rg { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content max-content; font-size: var(--fs-12); font-variant-numeric: tabular-nums; align-items: stretch }
.ld .rg > span { padding: 3px 5px; display: flex; align-items: flex-start; min-width: 0 }
.ld .rg > span.r, .ld .rg > span.m, .ld .rg > span.s { justify-content: flex-end }
.ld .rg > .p { display: block; padding-left: 6px; color: var(--text); font-weight: 600; overflow-wrap: anywhere }
.ld .rg > span:first-child { padding-left: 6px }
.ld .rg > span:nth-child(8n+5), .ld .rg > span:nth-child(8n+6), .ld .rg > span:nth-child(8n+7), .ld .rg > span:nth-child(8n+8) { background: rgba(255, 255, 255, .045) }
.ld .rg > .sum, .ld .rg > .sum + .s { background: none !important }
.ld .rg .m, .ld .rg .s, .ld .rg .k.r { white-space: nowrap }
.ld .rg .m { min-width: 2.2em; color: var(--muted); text-align: right }
.ld .rg .s { min-width: 4.4em; text-align: right; font-weight: 700; color: var(--text) }
.ld .rg .s.minus { color: var(--muted) }
.ld .rg .s.gut { color: var(--lime) }
.ld .rg .k { font-size: var(--fs-10); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, .1) }
.ld .rg .sum { grid-column: 1 / 4; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 6px; margin-top: 2px; font-weight: 800; color: var(--text) }
.ld .rg .sum + .s { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 6px; margin-top: 2px; font-weight: 800 }
/* Notiz, Kontakt, Verlauf ohne Rahmen */
.ld .f4 .reihe { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: baseline }
.ld .f4 .reihe > * { min-width: 0 }
.ld .f4 .reihe .kl { color: var(--muted) }
.ld .f4 .reihe a { color: var(--cyan); text-decoration: none; font-weight: 700 }
.ld .f4 .link, .ld .spalte .f4 button.link { background: none; border: 0; box-shadow: none; padding: 0; font-family: var(--font); font-size: inherit; color: var(--cyan); font-weight: 700; cursor: pointer; text-align: left }
.ld .f4 .link.mehr { font-size: var(--fs-11); margin-top: 3px }
.ld .f4 .vlauf { display: grid; gap: 3px }
.ld .f4 .vlauf .ve { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; color: var(--muted) }
.ld .f4 .vlauf .vw { font-variant-numeric: tabular-nums; color: var(--muted2); white-space: nowrap }
.ld .f4 .vlauf .vt { color: var(--text); overflow-wrap: anywhere }
.ld .f4 .vlauf .minibtn { grid-column: 2; justify-self: start }
.ld .f4 .herkunft { margin-top: 4px; font-size: var(--fs-11) }
.ld .f4 .kfelder { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.ld .f4 .feld, .ld .f4 .kfelder input { width: 100%; box-sizing: border-box; min-width: 0; padding: 7px 9px; font-size: var(--fs-12) }

/* ---- Verschieben aus der Spalte (Schritt 4, Plan 07 Abschnitt 12a) ---- */
.ld .spalte .spkopf.verschieben { border-bottom-color: var(--cyan) }
.ld .spalte .vwahl { display: grid; gap: 4px; margin-bottom: 12px; padding: 9px 11px; border: 1px solid var(--cyan); border-radius: var(--r-ctl) }
.ld .spalte .vwahl .ue { font-size: var(--fs-10); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 2px }
.ld .spalte .vwahl .vz {
    display: grid; grid-template-columns: 34px 44px minmax(0, 1fr) auto; gap: 8px; align-items: center;
    width: 100%; padding: 5px 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--dim);
    border-radius: var(--r-chip); font-family: var(--font); font-size: var(--fs-12); color: var(--text); cursor: pointer; text-align: left
}
.ld .spalte .vwahl .vz:hover { border-color: var(--cyan) }
.ld .spalte .vwahl .vz i { font-style: normal; font-weight: 800 }
.ld .spalte .vwahl .vz em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums }
.ld .spalte .vwahl .vz span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ld .spalte .vwahl .vz b { color: var(--cyan); font-weight: 800; white-space: nowrap }
.ld .spalte .vwahl .vz.alle { border-style: dashed }
.ld .spalte .vwahl .minibtn { justify-self: start; margin-top: 4px }
.ld .spalte .ganz { display: grid; gap: 10px; font-size: var(--fs-12) }
.ld .spalte .ganz .gzeile { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: center }
.ld .spalte .ganz .gzeile .ue { font-size: var(--fs-10); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2) }
.ld .spalte .ganz .feld, .ld .spalte .ganz select { width: 100%; box-sizing: border-box; padding: 7px 9px; font-size: var(--fs-12); background: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-ctl); font-family: var(--font) }
.ld .spalte .ganz .kl { color: var(--muted) }
.ld .spalte .ganz .wahl { display: block; margin-top: 4px; color: var(--text); cursor: pointer }
.ld .spalte .ganz .ast { border-left: 1px solid var(--cyan); margin: 0 0 0 4px; display: grid }
.ld .spalte .ganz .ast .z { display: grid; grid-template-columns: 34px 44px 1fr; gap: 8px; padding: 3px 6px 3px 10px; font-variant-numeric: tabular-nums }
.ld .spalte .ganz .ast .z:nth-child(odd) { background: rgba(2, 255, 255, .06) }
.ld .spalte .ganz .ast .z i { font-style: normal; font-weight: 800 }
.ld .spalte .ganz .ast .z em { font-style: normal; font-weight: 700 }
.ld .spalte .ganz .ast .z span { color: var(--muted) }

/* ---- Suche im Spaltenkopf (Schritt 4a, Plan 07 Abschnitt 14a) ---- */
.ld .spalte .splupe {
    flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; background: none;
    border: 1px solid transparent; color: var(--muted); cursor: pointer; font-size: var(--fs-20); line-height: 1; font-family: inherit
}
.ld .spalte .splupe:hover { color: var(--text); border-color: var(--line) }
.ld .spalte .spkopf.suche { border-bottom-color: var(--acc) }
.ld .spalte .spsuche {
    width: 100%; box-sizing: border-box; font-family: var(--font); font-size: var(--fs-13); font-weight: 700;
    color: var(--text); background: var(--field); border: 1px solid var(--acc); border-radius: var(--r-ctl); padding: 7px 10px
}
.ld .spalte .spsuche:focus { outline: 2px solid var(--cyan); outline-offset: 1px }
.ld .spalte .such { display: grid; gap: 4px }
.ld .spalte .such .ue { font-size: var(--fs-10); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2); margin-bottom: 2px }
.ld .spalte .such .kl { color: var(--muted); line-height: 1.45; padding: 4px 0 }
.ld .spalte .such .tz {
    display: grid; grid-template-columns: 34px 44px minmax(0, 1fr) auto; gap: 8px; align-items: center;
    width: 100%; padding: 6px 8px; background: rgba(2, 255, 255, .06); border: 1px solid rgba(2, 255, 255, .35);
    border-radius: var(--r-chip); font-family: var(--font); font-size: var(--fs-12); color: var(--text); cursor: pointer; text-align: left
}
.ld .spalte .such .tz:hover { border-color: var(--cyan) }
.ld .spalte .such .tz i { font-style: normal; font-weight: 800 }
.ld .spalte .such .tz em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums }
.ld .spalte .such .tz span { font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ld .spalte .such .tz b { color: var(--muted); font-weight: 700; white-space: nowrap }
.ld .spalte .such .minibtn { justify-self: start }

/* ---- Auch an diesem Tag (Schritt 5, Plan 08 Abschnitt 2) ---- */
.ld .f4 .teil.box.weitere { --rand: rgba(255, 255, 255, .28); border-style: dashed }
.ld .f4 .ue.weitere { color: var(--muted) }
.ld .f4 .weitere .kl { font-size: var(--fs-11); color: var(--muted2); margin: 2px 0 6px }
.ld .f4 .wliste { display: grid; gap: 3px }
.ld .f4 .wz {
    display: grid; grid-template-columns: 62px 44px minmax(0, 1fr) auto; gap: 8px; align-items: center;
    width: 100%; padding: 5px 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--dim);
    border-radius: var(--r-chip); font-family: var(--font); font-size: var(--fs-12); color: var(--text); cursor: pointer; text-align: left
}
.ld .f4 .wz:hover { border-color: var(--acc) }
.ld .f4 .wz .wp { font-size: var(--fs-10); font-weight: 800; letter-spacing: .1em; text-transform: uppercase }
.ld .f4 .wz .wp.party { color: var(--acc-hell) }
.ld .f4 .wz .wp.lt { color: var(--cyan) }
.ld .f4 .wz .wp.px { color: var(--violett) }
.ld .f4 .wz em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums }
.ld .f4 .wz .wn { color: var(--muted); font-weight: 700; white-space: nowrap }
.ld .f4 .wz b { font-size: var(--fs-11); color: var(--muted2); font-weight: 700; white-space: nowrap }
.ld .f4 .wz b.off { color: var(--ampel-gelb); font-weight: 800 }

/* ---- Die Geldfenster: Kassieren und Stornieren (Schritt 6, Muster 3b, 3d) ----
   Fenster in der Mitte, weil dort nichts anderes anklickbar sein soll.
   Dieselbe Rechnungstabelle wie in der Spalte; je Geldquelle ein Kasten
   im Storno-Fenster: online grau ("passiert von selbst"), vor Ort gelb
   ("du zahlst aus"). Abbrechen rot, die Handlung in ihrer Farbe. */
.ld .panel.geldfenster { width: min(420px, calc(100vw - 24px)); border-color: var(--line); font-size: var(--fs-12) }
.ld .panel.geldfenster .fk { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap }
.ld .panel.geldfenster .fk b { font-size: var(--fs-14); font-weight: 800 }
.ld .panel.geldfenster .fk span { color: var(--muted); font-size: var(--fs-12) }
.ld .panel.geldfenster .fi { padding: 12px 14px; display: grid; gap: 10px }
.ld .panel.geldfenster .ff { padding: 10px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end }
.ld .panel.geldfenster .ff .minibtn { font-size: var(--fs-12); font-weight: 700; padding: 9px 14px }
.ld .panel.geldfenster .minibtn.gruen { border-color: var(--lime); color: var(--lime); background: rgba(199, 251, 77, .12) }
.ld .panel.geldfenster .minibtn.rot { border-color: var(--red); color: var(--red); background: rgba(255, 0, 55, .12); margin-right: auto }
.ld .panel.geldfenster .minibtn.stark { border-color: var(--acc); background: rgba(200, 27, 255, .16); color: #fff }
.ld .panel.geldfenster .fregel { font-size: var(--fs-12); color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px }
.ld .rg .s.summe.gelb { color: var(--ampel-gelb); font-size: var(--fs-16) }
.ld .rg .s.summe.null { color: var(--muted2) }
.ld .panel.geldfenster.kassa .rg .s.summe { font-size: var(--fs-16) }
.ld .panel.geldfenster .quelle { border: 1px solid var(--line); padding: 8px 10px; display: grid; gap: 4px; border-radius: var(--r-ctl) }
.ld .panel.geldfenster .quelle.bar { border-color: rgba(255, 216, 74, .65); background: rgba(255, 216, 74, .05) }
.ld .panel.geldfenster .quelle .qk { font-size: var(--fs-10); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2) }
.ld .panel.geldfenster .quelle.bar .qk { color: var(--ampel-gelb) }
.ld .panel.geldfenster .quelle .wie { font-size: var(--fs-11); color: var(--muted) }
.ld .panel.geldfenster .frist { font-size: var(--fs-12); padding: 6px 8px; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; border-radius: var(--r-chip) }
.ld .panel.geldfenster .frist.ja { color: var(--lime); background: rgba(199, 251, 77, .08) }
.ld .panel.geldfenster .frist.nein { color: var(--red); background: rgba(255, 0, 55, .08) }
.ld .panel.geldfenster .frist span { color: var(--muted) }
.ld .panel.geldfenster .kulanz { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; font-size: var(--fs-12); color: var(--muted); border: 1px dashed rgba(255, 255, 255, .25); padding: 6px 8px; border-radius: var(--r-chip); cursor: pointer }
/* Vor-Ort-Formular auf Ebene Slot: die Rechnung und zwei Knoepfe */
.ld .spalte .wigeld { display: grid; gap: 8px; margin-top: 10px }
.ld .spalte .wigeld .geldruhig { display: grid; grid-template-columns: 1fr auto; color: var(--muted) }
.ld .spalte .wigeld .geldruhig b { color: var(--ampel-gelb); font-size: var(--fs-16) }
.ld .spalte .wiknoepfe { display: flex; gap: 8px; margin-top: 4px }
.ld .spalte .wiknoepfe .minibtn { font-size: var(--fs-12); font-weight: 700; padding: 9px 14px }

/* ---- Vor Ort dazu: die Zusatzbuchung (Schritt 6, Muster 3a2 und 3a3) ---- */
.ld .f4 .teil.box.zusatz { border-style: dashed }
.ld .f4 .zgeld { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--fs-12); color: var(--muted) }
.ld .f4 .zgeld b { color: var(--ampel-gelb); margin-left: 4px }
.ld .f4.dazu .pkopf + .pkopf { margin-top: 0 }
.ld .f4.dazu .tipp { font-size: var(--fs-11); color: var(--cyan); margin-top: 6px }
.ld .f4.dazu .geldruhig { display: grid; grid-template-columns: 1fr auto; color: var(--muted) }
.ld .f4.dazu .geldruhig b.gelb { color: var(--ampel-gelb); font-size: var(--fs-18) }
.ld .f4 .rg .p small { display: block; color: var(--muted2); font-size: var(--fs-11); font-weight: 400 }

/* ---- Nachricht vom Gast, Team-Notiz, Extras dazu (Schritt 6a) ---- */
.ld .f4 .reihe .gast { color: var(--text); border-left: 2px solid var(--acc); padding-left: 8px; line-height: 1.4 }
.ld .f4 .z.ex.neu { grid-template-columns: 34px 1fr auto auto; background: rgba(2, 255, 255, .07); border-radius: var(--r-chip) }
.ld .f4 .z.ex.neu .st { font-size: var(--fs-11); font-weight: 700; color: var(--cyan); white-space: nowrap }
.ld .f4 .wegbtn {
    width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, .18); color: var(--muted); background: rgba(255, 255, 255, .04);
    font-family: inherit; font-size: var(--fs-13); line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0; border-radius: var(--r-chip)
}
.ld .f4 .wegbtn:hover { border-color: var(--red); color: var(--red) }
.ld .f4 .z.ex.dazu { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 4px }
.ld .f4 .z.ex.dazu select { width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: var(--fs-12); background: var(--field); color: var(--text); border: 1px dashed rgba(255, 255, 255, .28); border-radius: var(--r-chip); font-family: var(--font) }

/* ---- Ebene Buchen (Taste B, Dock): Produkt, dann Slots oder Fenster, dann
   kassieren. Bis 15.09.2026 zwei Fenster in der Mitte mit Neon-Kacheln;
   jetzt dieselbe Bauart wie der Rest der Spalte: Zeilen mit Rand, die
   Rechnung, die Knopfleiste oben. ---- */
.ld .spalte .buchen .wahl { display: grid; gap: 8px }
.ld .spalte .buchen .wahl button {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 14px;
    background: var(--field); border: 1px solid var(--line); border-left-width: 3px; color: var(--text);
    font-family: var(--font); text-align: left; cursor: pointer; border-radius: var(--r-ctl)
}
.ld .spalte .buchen .wahl button:hover { border-color: var(--acc) }
.ld .spalte .buchen .wahl button.lt { border-left-color: var(--cyan) }
.ld .spalte .buchen .wahl button.px { border-left-color: var(--violett) }
.ld .spalte .buchen .wahl button.pa { border-left-color: var(--acc) }
.ld .spalte .buchen .wahl b { font-size: var(--fs-15); font-weight: 800 }
.ld .spalte .buchen .wahl small { font-size: var(--fs-12); color: var(--muted) }
/* Slots als Chips, drei je Zeile: Nummer und Zeit wie im Plan, Raum, freie Plaetze. */
.ld .spalte .qbslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px }
.ld .spalte .qbslot {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 44px;
    background: var(--field); border: 1px solid var(--line); color: var(--text);
    padding: 7px 9px; cursor: pointer; text-align: left; font-family: var(--font)
}
.ld .spalte .qbslot b { font-size: var(--fs-13); font-variant-numeric: tabular-nums }
.ld .spalte .qbslot span { font-size: var(--fs-10); color: var(--muted) }
.ld .spalte .qbslot small { font-size: var(--fs-10); color: var(--muted2) }
.ld .spalte .qbslot:hover:not(:disabled) { border-color: var(--acc) }
.ld .spalte .qbslot:disabled { opacity: .35; cursor: default }
.ld .spalte .qbslot.an { background: rgba(200, 27, 255, .28); border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc) }
.ld .spalte .qbslot.an span, .ld .spalte .qbslot.an small { color: var(--text) }
/* Party-Fenster als Zeilen. */
.ld .spalte .pafen { display: grid; gap: 6px; margin-top: 6px }
.ld .spalte .pfw {
    display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: baseline; text-align: left;
    padding: 9px 12px; background: var(--field); border: 1px solid var(--line); color: var(--text);
    font-family: var(--font); cursor: pointer
}
.ld .spalte .pfw:hover:not(:disabled) { border-color: var(--acc) }
.ld .spalte .pfw[aria-pressed="true"] { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset }
.ld .spalte .pfw:disabled { opacity: .45; cursor: default }
.ld .spalte .pfw b { font-size: var(--fs-14) }
.ld .spalte .pfw span { font-size: var(--fs-12); color: var(--muted) }
.ld .spalte .pfw i { font-style: normal; font-size: var(--fs-11); color: var(--ampel-gelb) }
.ld .spalte .buchen .ast { margin-top: 10px }
.ld .spalte .buchen .wiform { margin-top: 10px }
.ld .spalte .buchen .wiform.oben { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 6px }

/* ---------- Ebene Anfrage (/buchungen, docs/alpha/13) ----------
   Oben die Frist als Kasten, darunter die Angaben des Gasts wie in der
   Buchungsansicht, unten die Team-Notiz. Ueber der Frist wird der Kasten rot. */
.ld .spalte.anfrage .f4 .teil.box { --rand: var(--cyan) }
.ld .spalte.anfrage .f4 .teil.box.spaet { --rand: var(--red) }
.ld .spalte.anfrage .frist { display: grid; gap: 1px }
.ld .spalte.anfrage .frist b { font-size: var(--fs-16) }
.ld .spalte.anfrage .frist small { font-size: var(--fs-11); color: var(--muted2) }
.ld .spalte.anfrage .f4 .reihe { align-items: start }
.ld .spalte.anfrage .f4 .reihe .gast { white-space: pre-line }
.ld .spalte.anfrage .f4 textarea.feld { resize: vertical; line-height: 1.4; font-family: inherit; background: var(--field); color: var(--text); border: 1px solid var(--dim) }