/* Leisten: Kopfzeile, Tag- und Produktnavigation, Monatskalender, Konto
   Teil 1 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. */
.ld .tabs .tab.staff { color: var(--cyan) }

/* Zweite Navigationszeile einer Seite (Produkt- bzw. Bereichs-Reiter) */
.ld .subtabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 16px 0 0 }
.ld .subtabs .chip {
    border: 1px solid var(--line); background: transparent; color: var(--muted);
    font-family: var(--font); font-weight: 700; font-size: var(--fs-12); padding: 7px 14px;
    cursor: pointer; text-decoration: none
}
.ld .subtabs .chip:hover { border-color: var(--acc); color: var(--text) }
.ld .subtabs .chip.on { background: var(--acc); border-color: var(--acc); color: #fff }

/* ---- Aufbau wie Google Kalender: linke Seitenleiste + Plan rechts ---- */
/* Die Spalten als Variablen: Kalender links, Plan, dann was rechts dazukommt
   (Beachten aus betrieb-listen.css, die Spalte aus betrieb-spalte.css). Eine
   leere Variable ist "gibt es nicht" - so bleibt es EINE Rasterregel statt
   sechs :has()-Kombinationen, die sich gegenseitig ueberbieten (14.09.). */
.ld .opswrap {
    --railb: 248px; --beachtb: ; --spalteb: ;
    display: grid; grid-template-columns: var(--railb) 1fr var(--beachtb) var(--spalteb);
    gap: 16px; align-items: start; margin: 18px 0 0
}
.ld .opsmain { min-width: 0 }
/* Die Rail ist EIN Block und passt immer auf den Bildschirm: bleibt beim
   Scrollen ruhig stehen, mit eigenem Scroll nur als Notfallventil */
/* Die Rail soll NICHT scrollen: sie ist der feste Bezugspunkt, waehrend der
   Plan darunter durchlaeuft. Alles, was hier steht, muss auf einen Bildschirm
   passen - Datum und Tarif sind deshalb in die zweite Navigationszeile
   gewandert, "Zum naechsten Slot" ist ein Tastenkuerzel geworden. Nur wenn es
   doch einmal zu viel wird (viele Feiertage, lange Notizen), scrollt der
   Innenteil, nicht die ganze Leiste. */
.ld .opsside {
    position: sticky; top: calc(var(--kopf, 110px) + 10px);
    max-height: calc(100vh - var(--kopf, 110px) - 22px);
    display: flex; flex-direction: column
}
.ld .sideblock { background: var(--p1); border: 1px solid var(--line); padding: 13px 14px }
.ld .navbtn {
    border: 1px solid var(--line); background: var(--field); color: var(--text);
    font-family: var(--font); font-weight: 700; font-size: var(--fs-13); padding: 8px 12px; cursor: pointer
}
.ld .navbtn:hover { border-color: var(--acc) }

/* Tagesnavigation: Pfeile links/rechts, Heute in der Mitte */
.ld .railtag { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; margin-bottom: 10px }

/* Monat/Jahr anklickbar */
.ld .monatbtn {
    flex: 1; background: none; border: 0; color: var(--text); font-family: var(--font);
    font-weight: 800; font-size: var(--fs-13); cursor: pointer; padding: 4px
}
.ld .monatbtn:hover { color: var(--cyan) }
.ld .monatpanel .jahr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px }
.ld .monatpanel .jahr b { font-size: var(--fs-14) }
.ld .monatpanel .jahr .navbtn { padding: 3px 9px; font-size: var(--fs-12) }
.ld .monatpanel .monate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px }
.ld .monatpanel .monate button {
    background: transparent; border: 1px solid var(--line); color: var(--muted);
    font-family: var(--font); font-weight: 700; font-size: var(--fs-11); padding: 6px 2px; cursor: pointer
}
.ld .monatpanel .monate button:hover { border-color: var(--acc); color: var(--text) }
.ld .monatpanel .monate button.on { background: var(--acc); border-color: var(--acc); color: #fff }
.ld .raillink {
    display: block; margin-top: 10px; color: var(--muted); font-size: var(--fs-12);
    font-weight: 700; text-decoration: none
}
.ld .raillink:hover { color: var(--cyan) }

/* Monatskalender */
.ld .mcalhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 9px }
.ld .mcalhead b { font-size: var(--fs-13) }
.ld .mcalhead .navbtn { padding: 4px 9px; font-size: var(--fs-12) }
.ld .mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px }
.ld .mcal .wd { font-size: var(--fs-10); font-weight: 700; color: var(--muted); text-align: center; padding: 3px 0; letter-spacing: .04em }
.ld .mcal .d {
    border: 0; background: transparent; color: var(--text); font-family: var(--font);
    font-size: var(--fs-12); font-weight: 600; padding: 6px 0; text-align: center; cursor: pointer
}
.ld .mcal .d:hover { background: rgba(255, 255, 255, .08) }
.ld .mcal .d.other { color: var(--muted2); opacity: .55 }
.ld .mcal .d.today { box-shadow: inset 0 0 0 1px var(--cyan) }
.ld .mcal .d.sel { background: var(--acc); color: #fff }

@media (max-width: 860px) {
    .ld .opswrap { grid-template-columns: 1fr }
    .ld .opsside { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start }
    .ld .opsside .sideblock:first-child { grid-row: span 2 }

    /* Der Plan zuerst, die Seitenleiste danach.
       Am Schreibtisch steht die Leiste links neben dem Plan und stoert nicht.
       Untereinander gestapelt schiebt sie ihn aus dem Bild: Monatskalender und
       Tageszahlen brauchen zusammen rund 450 Pixel, sodass auf dem Telefon
       erst weit unterhalb der ersten Bildschirmhoehe ein Slot auftaucht. Zum
       Datumswechsel gibt es die Leiste im Kopf mit Vor, Zurueck und Heute;
       der Monatskalender ist der Zusatz und darf warten. */
    .ld .opswrap > .opsmain { order: 1 }
    .ld .opswrap > .opsside { order: 2 }
}
@media (max-width: 560px) {
    .ld .opsside { grid-template-columns: 1fr }
    .ld .opsside .sideblock:first-child { grid-row: auto }
}
.ld .mast2 .in {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    max-width: 1400px; margin: 0 auto; padding: 8px 20px
}
.ld .mast2 .ur {
    background: transparent; border: 1px solid transparent; color: var(--muted);
    font: 700 var(--fs-13) var(--font); padding: 7px 14px; cursor: pointer
}
.ld .mast2 .ur:hover { color: var(--text) }
.ld .mast2 .ur.on { background: rgba(200, 27, 255, .14); border-color: var(--acc); color: #fff }
.ld .mast2 .urtag { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-wrap: wrap }
.ld .mast2 .urtag b { font-size: var(--fs-14); font-weight: 800 }
@media (max-width: 860px) {
    .ld .mast2 .in { padding: 7px 12px }
    .ld .mast2 .urtag { margin-left: 0; width: 100%; padding-top: 4px }
    .ld .mast2 .ur { padding: 6px 10px; font-size: var(--fs-12) }
}

/* Kalender: Wochenendtarif und Feiertage sichtbar machen */
.ld .mcal .d.we { background: rgba(200, 27, 255, .14); color: var(--acc-hell) }
.ld .mcal .d.feier { box-shadow: inset 0 -3px 0 var(--cyan); color: var(--cyan); font-weight: 800 }
/* Feiertag noch nicht entschieden oder geschlossen: heller roter Hintergrund,
   damit auffaellt, dass der Tag noch geprueft/bestaetigt werden muss (Pauls Wunsch). */
.ld .mcal .d.rot { background: rgba(255, 0, 55, .16) }
.ld .mcal .d.rot:hover { background: rgba(255, 0, 55, .26) }
.ld .mcal .d.rot.sel { background: var(--acc); color: #fff }
.ld .calleg {
    display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px;
    font-size: var(--fs-10); color: var(--muted)
}
.ld .calleg span { display: inline-flex; align-items: center; gap: 5px }
.ld .calleg i { width: 11px; height: 11px; display: inline-block }
.ld .calleg i.we { background: rgba(200, 27, 255, .28); border: 1px solid rgba(200, 27, 255, .5) }
.ld .calleg i.feier { border-bottom: 2px solid var(--cyan); height: 9px }

/* ============================================================
   Übersicht als Vollbild: kein Rand, kein Scrollen nach unten
   ============================================================ */

/* Keine gerechnete Kopfhoehe: die Seite selbst ist der Flexbehaelter, die
   Achse nimmt den Rest. Sonst haengt die Hoehe an einer Zahl, die bei jeder
   Aenderung der Kopfleiste falsch wird. */
.ld .pg:has(.wrap.ovfull) {
    height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden
}
.ld .pg:has(.wrap.ovfull) .mastwrap { position: static }
.ld .wrap.ovfull {
    /* width ausdruecklich: als Flex-Kind schrumpfte die Vollbild-Ansicht bei
       kleinem Zoom auf die Inhaltsbreite (782px auf einem 1280er-Schirm) und
       die Zeitleiste hing vom Rand geloest in der Luft. */
    width: 100%;
    max-width: none; padding: 0; flex: 1; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden
}

/* ============================================================
   Navileiste: Tag links, Produkte rechts
   ============================================================ */

.ld .mast2 .in { flex-wrap: nowrap; gap: 10px }
.ld .mast2 .urtag { margin-left: 0; margin-right: auto; gap: 5px }
.ld .mast2 .urprod { display: flex; align-items: center; gap: 4px; flex: 0 0 auto }
.ld .mast2 .urbox {
    font: 600 var(--fs-11) var(--font); color: var(--muted);
    border: 1px solid var(--dim); padding: 4px 9px; white-space: nowrap
}
.ld .mast2 .urbox.tarif { color: var(--text) }
.ld .mast2 .urbox.feier { border-color: var(--cyan); color: var(--cyan) }
.ld .mast2 .urbox.warn { border-color: var(--ampel-gelb); color: var(--ampel-gelb) }
.ld .mast2 .urbox.zu { border-color: var(--red); color: var(--red); font-weight: 700 }

@media (max-width: 1100px) {
    .ld .mast2 .in { flex-wrap: wrap }
    .ld .mast2 .urbox { display: none }
    .ld .mast2 .urbox.tarif, .ld .mast2 .urbox.zu { display: inline-block }
    .ld .mast2 .urbox.vorschau { display: inline-flex }
}

/* Kalender: Nachbarmonate leer, geschlossene Tage deutlich zurückgenommen */
.ld .mcal .d.leerfeld { visibility: hidden }

.ld .mcal .d.zu {
    opacity: 1;
    color: #3A3D4C;
    background: repeating-linear-gradient(45deg,
        rgba(255, 255, 255, .04) 0 3px, transparent 3px 6px);
}
.ld .mcal .d.zu:hover { border-color: var(--dim); color: #4C5062 }

/* Pfeile als Sinnbild statt Textzeichen */
.ld .navbtn .pf, .ld #ldt-nav .pf .pf { display: inline-block }
.ld .icpf {
    width: 9px; height: 9px; display: inline-block; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor
}
.ld .icpf.links { transform: rotate(135deg); margin-left: 2px }
.ld .icpf.rechts { transform: rotate(-45deg); margin-right: 2px }
.ld .icpf.runter { transform: rotate(45deg); margin-bottom: 3px }

/* Offener Restbetrag: der wichtigste Hinweis auf der Karte, wenn Geld fehlt */
.ld .restbtr { display: inline-flex; flex-direction: column; line-height: 1.2 }
.ld .restbtr b { color: var(--ampel-gelb); font-size: var(--fs-13) }
.ld .restbtr small { color: var(--muted); font-size: var(--fs-10) }
.ld .prow.rest { background: rgba(255, 216, 74, .07); border-left: 3px solid var(--ampel-gelb); padding-left: 9px }
.ld .prow.rest b { color: var(--ampel-gelb); font-size: var(--fs-15) }
.ld .prow.rest small { display: block; color: var(--muted); font-size: var(--fs-11); font-weight: 400 }

/* Guthaben trägt bewusst eine andere Farbe als der offene Rest: Gelb heißt
   "hier fehlt uns Geld", Cyan heißt "das schulden wir dem Gast". Gleiche
   Farbe für beides hätte an der Kassa in die falsche Richtung geführt. */
.ld .restbtr.gut b,
.ld .prow.rest.gut b { color: var(--cyan) }
.ld .prow.rest.gut { background: rgba(34, 211, 238, .07); border-left-color: var(--cyan) }

/* Raum einer Party: Auswahl direkt auf der Karte, damit bei einem Ausfall
   nicht erst die Buchung geoeffnet werden muss. */
.ld .lounge { display: flex; align-items: center; gap: 7px; margin: 5px 0 2px }
.ld .lounge .lbl { font-size: var(--fs-10); color: var(--muted); text-transform: uppercase; letter-spacing: .5px }
/* nicht strecken: das Feld soll so breit sein wie der laengste Raumname,
   nicht wie die Karte. width muss explizit zurueckgesetzt werden - die
   Grundregel .ld select setzt width:100%, und die bleibt stehen, solange
   diese Regel die Eigenschaft nicht selbst nennt. */
/* Fassung wie jedes andere Feld des Hauses: --field/--line, scharfe Ecken
   (7px Radius war der einzige runde Rahmen der Seite), Textfarbe ueber das
   echte Token --text (--fg existiert nicht). */
.ld .lsel { flex: 0 0 auto; width: auto; background: var(--field); color: var(--text);
            border: 1px solid var(--line); border-radius: 0;
            padding: 3px 7px; font-size: var(--fs-12); font-family: inherit }
.ld .lsel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px }
.ld .lsel.leer { border-color: var(--ampel-gelb); color: var(--ampel-gelb) }

/* ---- Mitarbeiterkopf auf dem Handy ---- */@media (max-width: 700px) {
    /* Der Kopf brauchte sechs Zeilen und damit 300 der 844 Pixel, bevor der
       erste Slot auftauchte: Logo, "Zur Website" auf eigener Zeile, die
       Hauptnavigation, das Datum, der Tarif und die Unterreiter. Am Tresen
       zaehlt der Plan, nicht das Geruest darum. */

    /* Wer angemeldet ist, weiss, dass er Mitarbeiter ist. */
    .ld .mast .staffchip { display: none }

    /* Fuenf Reiter auf 390 Pixeln ergeben 78 Pixel je Eintrag, in denen
       "Altsystem" nicht steht. Lieber waagrecht schiebbar als abgeschnitten. */
    .ld .mast .tabs {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        -webkit-overflow-scrolling: touch
    }
    .ld .mast .tabs::-webkit-scrollbar { display: none }
    .ld .mast .tab { flex: 0 0 auto; white-space: nowrap; padding: 9px 11px }

    /* Datum und Tarif teilen sich eine Zeile statt zwei. */
    .ld .mast2 .in { row-gap: 6px }
    .ld .mast2 .urtag { margin-left: auto; flex-wrap: nowrap }
    .ld .mast2 .urtag b { font-size: var(--fs-13) }
}

/* ---- Fingerziele im Betrieb ---- */

/* Nach Eingabeart statt nach Breite: das iPad im Betrieb ist 820 Pixel breit
   und wird trotzdem mit dem Finger bedient. Eine Regel an max-width haette es
   ausgelassen, obwohl dort dieselben Ziele zu klein sind. pointer: coarse
   trifft Finger und Stift, nicht die Maus am Schreibtisch. */@media (pointer: coarse) {
    /* Zwischen Uebersicht, Lasertag, Pixel und Party wird staendig gewechselt.
       Unter 40 Pixeln Hoehe trifft man das im Stehen nicht zuverlaessig. */
    .ld .mast2 .ur { min-height: 40px; display: inline-flex; align-items: center }

    /* Kalendertage ebenso: sieben Spalten geben genug Breite, es fehlte die
       Hoehe. */
    .ld .mcal .d { min-height: 40px }
    .ld .navbtn { min-width: 40px; min-height: 40px }
}

/* ---- Paket A: Betriebs-Tickets vom 20.08. ---- */

/* "nicht heute" faellt auf, bevor der falsche Tag hergerichtet ist */
.ld .urbox.anderstag { border-color: var(--ampel-gelb); color: var(--ampel-gelb); font-weight: 800 }
.ld .urbox.anderstag.frueher { border-color: var(--red); color: var(--red) }


/* Seitenleiste rollt ohne sichtbare Leiste - das Rad funktioniert weiter */
.ld .opsside .sideblock {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.ld .opsside .sideblock::-webkit-scrollbar { display: none }

/* ---- Nachpruefung 21.08.: Kalender-Kennzeichnung ---- */

/* Der gewaehlte Tag gewinnt gegen ALLE Faerbungen. Vorher schlug die spaeter
   definierte Wochenend-Regel die Auswahl, und der angezeigte Tag war im
   Kalender schlicht nicht zu erkennen. */
.ld .mcal .d.sel,
.ld .mcal .d.sel.we,
.ld .mcal .d.sel.feier,
.ld .mcal .d.sel.zu {
    background: var(--acc); color: #fff; opacity: 1;
    box-shadow: 0 0 0 1px var(--acc), 0 0 10px rgba(200, 27, 255, .55)
}

/* Heute: weisser Rahmen mit Punkt. Tuerkis gehoert dem Feiertag - dieselbe
   Farbe fuer zwei Bedeutungen hatte Paul zurecht beanstandet. */
.ld .mcal .d.today { box-shadow: inset 0 0 0 2px #fff; position: relative; font-weight: 800 }
.ld .mcal .d.today::after {
    content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: #fff
}
.ld .mcal .d.sel.today { box-shadow: inset 0 0 0 2px #fff, 0 0 10px rgba(200, 27, 255, .55) }
/* !important: die Grundregel der Vollbild-Uebersicht setzt overflow:hidden
   auf pg und wuerde das Polster sonst wieder ueberdecken */
html.fussoffen .ld .pg:has(.wrap.ovfull) { padding-bottom: 48px !important }

/* Am Schreibtisch traegt der Baum, auf schmalen Schirmen die Chips.
   Das :has steht hier statt einer Seitenklasse, damit die Chips genau dort
   verschwinden, wo eine Baum-Leiste die Navigation uebernimmt - und nur dort.
   Bis 10.09.2026 galt die Regel fuer JEDE .subtabs-Zeile. Die Planungsseite
   fuehrt dieselbe Zeile, hat aber keinen Baum: ab 861 px stand sie damit ohne
   Navigation da, Einkauf und Woche waren nur noch ueber die Adresszeile
   erreichbar (gemessen am 10.09.2026: display none bei 1280 und 1920, flex
   erst bei 853). */
@media (min-width: 861px) {
    .ld .wrap:has(.cfgbaum) .subtabs { display: none }
}



/* ---- Paket N1 (Tickets 21.08. frueh) ---- */

/* Monatswahl: der Aussenklick-Faenger (z-index 30) lag ueber dem Panel und
   schluckte jeden Klick auf Jahr und Monat. */
.ld .monatpanel {
    border: 1px solid var(--line);
    background: var(--field);
    padding: 9px;
    margin-bottom: 9px;
    position: relative;
    z-index: 31;
}

/* Lounge-Auswahl: Systemliste bekam keine Farben und war dunkel auf dunkel */
.ld .lsel option { background: #14141C; color: var(--fg, #F3F4F8) }

/* Der gewaehlte Tag ueber dem Kalender */
.ld .mcaldatum {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 0 0 8px; border-bottom: 1px solid var(--dim); margin-bottom: 9px
}
.ld .mcaldatum b { font-size: var(--fs-14) }
.ld .mcaldatum span { font-size: var(--fs-11); color: var(--muted) }
.ld .mcaldatum span.zu { color: var(--red); font-weight: 700 }

/* ============================================================
   Nachtschicht 2: Mitarbeiter-Navigation + breite Bildschirme
   (Tickets "navigation bar schoener passender zum unternehmen"
   und "bei groesseren bildschirmen den space verwenden")
   ============================================================ */

/* Die Reiter waren rohe Hyperlinks mit Browser-Unterstreichung - als
   Navigation einer Marke sahen sie nach Textwueste aus. Jetzt: ruhige
   Flaechen, dieselbe Sprache wie die Unterreiter darunter. */
.ld .mast .tab, .ld .mast .cartbtn, .ld .mast .wm, .ld .mast2 .ur { text-decoration: none }
.ld .mast .tab { transition: color .12s ease, background .12s ease }
.ld .mast .tab:hover { background: rgba(255, 255, 255, .05); color: var(--text) }
.ld .mast .tab.on { box-shadow: inset 0 -2px 0 var(--acc) }

/* Die eine Marken-Note: eine feine Neon-Kante unter der Hauptzeile,
   Magenta nach Cyan - die Farben des Hauses, sonst nichts Lautes. */
.ld .mastwrap .mast { position: relative }
.ld .mastwrap .mast::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, var(--acc), var(--cyan)); opacity: .5;
    pointer-events: none
}

/* Breite Bildschirme: mehr INHALT statt Hochskalieren. Gilt nur fuer die
   Mitarbeiter-Seiten (erkennbar am Mitarbeiter-Chip in der Navigation) -
   die Kundenseiten bleiben bei ihrer Lesebreite. */@media (min-width: 1500px) {
    .ld .pg:has(.staffchip) .mast .in,
    .ld .pg:has(.staffchip) .mast2 .in,
    .ld .pg:has(.staffchip) .wrap:not(.ovfull) { max-width: min(1760px, 96vw) }
    /* Der Tagesplan bekommt die Breite im Plan, nicht im Kalender.
       NICHT in der Vollbild-Uebersicht (.ovfull): dort gibt es keine
       Seitenleiste, und diese spaeter definierte Regel schlug die
       1fr-Regel der Uebersicht - die ganze Zeitachse sass dann ab
       1500px Fensterbreite in der 264px-Spalte. */
    .ld .pg:has(.staffchip) .wrap:not(.ovfull) .opswrap { --railb: 264px }
}
/* Aktiver Reiter: gefuellte Pille mit Akzentkante statt nur Unterstrich */
.ld .pg:has(.staffchip) .mast .tab.on {
    color: #fff; background: rgba(200, 27, 255, .16);
    border: 1px solid rgba(200, 27, 255, .55);
    box-shadow: inset 0 -2px 0 var(--acc), 0 0 14px rgba(200, 27, 255, .25);
}
/* ---- Mitarbeiter-Navigation: klarer Unterschied zur Kundenseite ---- */

/* Mitarbeiter-Chip mit Puls-Punkt: "hier ist die interne Ansicht" */
.ld .staffchip {
    font-size: var(--fs-10);
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cyan);
    border: 1px solid rgba(2, 255, 255, .45);
    padding: 4px 9px;
    margin-left: 12px;
    white-space: nowrap;
    align-self: center;
    position: relative;
    padding-left: 20px;
}
.ld .staffchip::before {
    content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
    box-shadow: 0 0 6px var(--cyan);
}
@media (prefers-reduced-motion: no-preference) {
    .ld .staffchip::before { animation: ldStaffPuls 2.6s ease-in-out infinite }
    @keyframes ldStaffPuls { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
}
/* Wortmarke: dezenter Glow, wie auf der Kundenseite */
.ld .pg:has(.staffchip) .wm span { text-shadow: 0 0 14px rgba(200, 27, 255, .35) }
.ld .mast .kontochip b {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(200, 27, 255, .22); color: var(--acc-hell); font-size: var(--fs-12); font-weight: 800
}
.ld .mast .kontoovl { position: fixed; inset: 0; z-index: 69 }
.ld .mast .kontokopf b { display: block; font-size: var(--fs-14) }
.ld .mast .kontokopf small { color: var(--muted); font-size: var(--fs-11); word-break: break-all }
.ld .mast .kontomenue a:hover, .ld .mast .kontomenue button:hover { background: rgba(255, 255, 255, .06) }
.ld .mast .kontomenue form { margin: 0 }
@media (max-width: 900px) {
    .ld .mast .kontochip span { display: none }          /* iPad und Handy: nur die Initialen, damit alle Reiter Platz haben */
    .ld .mast .kontochip { padding-right: 9px }
}

/* --- Mitarbeiter-Navigation lebendiger (Ticket "plain und unlebendig") --- */
/* Feine Neon-Akzentlinie unter der Leiste: die Marke traegt die Navigation. */


/* =====================================================================
   Mitarbeiter-Leisten (02.09., zweiter Anlauf). Aus dem eigenen System:
   Hairlines, eckige Ecken (4/6/8), Hanken Grotesk, Neon nur als
   Markierung. Das eine Element, das man wiedererkennt: eine 2-px-Marke,
   die auf der Hairline unter der Leiste aufsetzt - der aktive Reiter
   in Magenta, das aktive Produkt in seiner Produktfarbe.
   ===================================================================== */

/* --- Kopfleiste: flach, Hairline, sonst nichts */
.ld .pg:has(.staffchip) .mast {
    
    background: rgba(10, 10, 15, .92);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    
}
.ld .pg:has(.staffchip) .mast .in { gap: 22px; min-height: 58px; padding-top: 0; padding-bottom: 0 }
.ld .pg:has(.staffchip) .mast .wm span { text-shadow: none; font-size: var(--fs-18) }

/* Reiter: Text auf der Hoehe der Leiste, aktiv mit Marke auf der Hairline */
.ld .pg:has(.staffchip) .mast .tabs { display: flex; align-items: stretch; gap: 2px; align-self: stretch; padding: 0; border: 0; background: none; position: relative; overflow: visible }
/* Hover: leichte Anhebung, Akzentfarbe kuendigt den Klick an */

.ld .pg:has(.staffchip) .mast .tab {
    border-radius: 2px;
    
    display: inline-flex;
    align-items: center;
    position: relative;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
    padding: 0 12px;
    color: var(--muted);
    font: 700 var(--fs-14) var(--font);
    letter-spacing: 0;
    transition: color .12s ease;
}

.ld .pg:has(.staffchip) .mast .tab:hover {
    color: var(--text);
    background: none;
    transform: none;
}
.ld .pg:has(.staffchip) .mast .tab.on { color: var(--text); background: none; border: 0; box-shadow: none }
.ld .pg:has(.staffchip) .mast .tab::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--acc);
    opacity: 0; transform: scaleX(.6); transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .2, 1)
}
.ld .pg:has(.staffchip) .mast .tab:hover::after { opacity: .45; transform: none }
.ld .pg:has(.staffchip) .mast .tab.on::after { opacity: 1; transform: none }


/* ---------- Konto-Chip in der Mitarbeiter-Leiste (02.09.) ----------
   Ersetzt die zwei gleich lauten Knoepfe "Zur Website" und "Wechseln".
   Ein ruhiger Chip mit Initialen und Name, dahinter ein kleines Menue. */


/* Konto: Name als Text, davor ein eckiges Kuerzel-Feld; Menue als Karte (8 px) */
.ld .mast .konto {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
}

.ld .mast .kontochip:hover, .ld .mast .kontochip.on {
    border-color: var(--line);
    background: var(--field);
}
.ld .mast .kontochip b {
    width: 26px; height: 26px; border-radius: var(--r-chip); font: 800 var(--fs-11) var(--font);
    background: var(--field); border: 1px solid var(--line); color: var(--text)
}
.ld .mast2 .in { min-height: 50px; padding-top: 6px; padding-bottom: 0 }

/* Das Datum ist der Bezugspunkt der ganzen Seite und bekommt eine Fassung */

.ld .mast2 .urdatum {
    margin-left: 4px;
    background: none;
    border: 0;
    padding: 0 8px 0 0;
    border-radius: 0;
    white-space: nowrap;
    font: 800 var(--fs-15) var(--font);
    color: var(--text);
    letter-spacing: 0;
}

.ld .mast2 .urdatum.ist {
    border-color: var(--cyan);
    color: var(--cyan);
}
.ld .mast2 .navbtn {
    width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center;
    border: 1px solid var(--line); border-radius: var(--r-ctl); background: none; color: var(--text)
}
.ld .mast2 .navbtn:hover { background: var(--field) }
.ld .mast2 .navbtn.heute, .ld .mast2 .navbtn.zujetzt { width: auto; padding: 0 12px; font: 700 var(--fs-13) var(--font) }
.ld .mast2 .navbtn.heute.ist { color: var(--cyan); border-color: rgba(2, 255, 255, .5); background: none }
.ld .mast2 .urbox {
    border-radius: var(--r-chip); padding: 4px 8px; border: 1px solid var(--dim); background: none;
    font: 700 var(--fs-11) var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted)
}
.ld .mast2 .urbox.tarif { color: var(--muted) }

.ld .mast2 .urbox.tarif.we {
    color: var(--acc-hell);
    border-color: rgba(200, 27, 255, .5);
}
.ld .mast2 .urbox.feier { color: var(--cyan); border-color: rgba(2, 255, 255, .5) }
.ld .mast2 .urbox.zu { color: var(--red); border-color: rgba(255, 0, 55, .5) }

/* Produktreiter: Text, aktiv mit Marke in Produktfarbe auf der Hairline */
.ld .mast2 .urschiene { display: flex; align-items: stretch; gap: 2px; align-self: stretch; padding: 0; border: 0; background: none; border-radius: 0; position: relative }
.ld .mast2 .ur {
    position: relative; border: 0; border-radius: 0; background: none; box-shadow: none;
    padding: 0 12px; height: 44px; color: var(--muted); font: 700 var(--fs-13) var(--font)
}
.ld .mast2 .ur::before { display: none }
.ld .mast2 .ur:hover { color: var(--text); background: none }
.ld .mast2 .ur.on { color: var(--text); background: none; box-shadow: none }
.ld .mast2 .ur::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--acc);
    opacity: 0; transform: scaleX(.6); transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .2, 1)
}
.ld .mast2 .ur:hover::after { opacity: .45; transform: none }
.ld .mast2 .ur.on::after { opacity: 1; transform: none }
.ld .mast2 .ur.lt::after { background: var(--lime) }
.ld .mast2 .ur.px::after { background: #B08CFF }
.ld .mast2 .ur.pa::after { background: var(--cyan) }

/* --- Am Handy rollen Reiter und Produktreiter, ohne die Seite zu verbreitern */
@media (max-width: 900px) { .ld .mast .kontochip span { display: none } .ld .mast .kontochip { padding-right: 6px } }
@media (max-width: 700px) {
    .ld .pg:has(.staffchip) .mast .tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none }
    .ld .pg:has(.staffchip) .mast .tabs::-webkit-scrollbar { display: none }
    .ld .pg:has(.staffchip) .mast .tab { padding: 0 10px; font-size: var(--fs-13) }
    .ld .mast2 .urprod { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none }
    .ld .mast2 .urprod::-webkit-scrollbar { display: none }
    .ld .mast2 .urschiene { flex: 0 0 auto }
    .ld .mast2 .urdatum { font-size: var(--fs-14) }
}

/* =====================================================================
   Bewegung und Farbe (02.09.). Paul: "mehr Farben und Animationen, die
   kein Lag verursachen, aber die Seite fluessiger wirken lassen". Alles
   hier bewegt nur transform, opacity und Farben - nichts, was Layout
   rechnet. Wer Bewegung im System abgeschaltet hat, bekommt keine.
   ===================================================================== */

/* Die gleitende Marke: ld-leisten.js legt in jede Reiterschiene ein <i class="ld-marke">
   und schiebt es unter den aktiven Reiter. Die CSS-Marke des aktiven Reiters
   wird dann unsichtbar (sie ist der Fallback ohne Skript und misst die Farbe). */
.ld .ld-marke {
    position: absolute; left: 0; bottom: 0; height: 2px; width: 0; opacity: 0;
    background: var(--acc); pointer-events: none;
    transition: transform .32s cubic-bezier(.2, .7, .2, 1), width .32s cubic-bezier(.2, .7, .2, 1),
                background-color .32s ease, opacity .2s ease
}
.ld .ld-marke.sofort { transition: none }
.ld .pg:has(.staffchip) .mast .tabs.hatmarke .tab.on::after { opacity: 0 }
.ld .mast2 .urschiene.hatmarke .ur.on::after { opacity: 0 }
.ld .mast2:has(.ur.lt.on) { --prod: var(--lime) }
.ld .mast2:has(.ur.px.on) { --prod: #B08CFF }
.ld .mast2:has(.ur.pa.on) { --prod: var(--cyan) }


/* --- Zeile zwei: eine ruhige Werkzeugzeile, Datum als Text */


/* Zeile zwei nimmt die Farbe des gewaehlten Produkts an: die Hairline darunter
   und ein Hauch Farbe hinter den Produktreitern, der beim Wechsel ueberblendet. */

.ld .mast2 {
    background: var(--p1);
    border-bottom: 1px solid var(--dim);
    backdrop-filter: none;
    --prod: var(--acc);
    position: relative;
    isolation: isolate;
    transition: border-color .4s ease;
    border-bottom-color: color-mix(in srgb, var(--prod) 45%, var(--line));
}
.ld .mast2::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-color: color-mix(in srgb, var(--prod) 9%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000);
    transition: background-color .45s ease
}

/* Druck-Rueckmeldung und weiche Farbwechsel auf allen Bedienelementen der Leisten */
.ld .mast2 .navbtn, .ld .mast2 .ur, .ld .mast .kontochip, .ld .fussleiste .fl-links a,
.ld .fussleiste .fl-keys, .ld .fussleiste .fl-ovwerk .stdsprung button, .ld .fl-keypanel button {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease
}
.ld .mast2 .navbtn:active, .ld .mast2 .ur:active, .ld .mast .kontochip:active, .ld .fussleiste .fl-links a:active,
.ld .fussleiste .fl-keys:active, .ld .fussleiste .fl-ovwerk .stdsprung button:active { transform: scale(.96) }@media (prefers-reduced-motion: no-preference) {
    @keyframes ld-ein { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
    @keyframes ld-auf { from { opacity: 0; transform: translateY(-6px) scale(.98) } to { opacity: 1; transform: none } }
    /* Der Inhalt unter der Leiste blendet beim Produkt- oder Tageswechsel ein */
    /* "backwards", nicht "both": eine gehaltene End-Transformation (Identitaetsmatrix)
       zaehlt als Transformation und wuerde die fixierten Hover-Fenster (.tbpop) an
       den Block statt ans Fenster binden - sie standen dann 120 px daneben. */
    .ld .opsmain > * { animation: ld-ein .28s cubic-bezier(.2, .7, .2, 1) backwards }
    /* Das Datum wird bei jedem Wechsel neu gesetzt (@key) und rueckt kurz nach */
    .ld .mast2 .urdatum { animation: ld-ein .22s cubic-bezier(.2, .7, .2, 1) both }
}
@media (prefers-reduced-motion: reduce) {
    .ld .ld-marke, .ld .mast2, .ld .mast2::before, .ld .pg:has(.staffchip) .mast .tab::after, .ld .mast2 .ur::after { transition: none }
}



/* =====================================================================
   Konto-Menue (02.09., "mach das Konto-Menue schoener"). Karte mit 8 px,
   Hairlines, Kuerzel-Kachel wie im Chip, Rolle als Etikett, zwei Gruppen
   mit Mikro-Ueberschrift, Symbole in Strichstaerke 1.5, beim Ueberfahren
   die 2-px-Marke am linken Rand - dieselbe Sprache wie die Reiter.
   ===================================================================== */
.ld .mast .kontomenue {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 70;
    border: 1px solid var(--acc);
    display: grid;
    border-radius: var(--r-card);
    border: 1px solid var(--line);
    background: var(--p1);
    backdrop-filter: none;
    min-width: 272px;
    padding: 6px;
    gap: 0;
    border-color: var(--line);
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .4);
}


.ld .mast .kontokopf {
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 12px;
    margin: 0 0 6px;
    border-bottom: 1px solid var(--line);
}
.ld .mast .kontokopf .kwer { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 2px }
.ld .mast .kontokopf .kwer > b { font: 800 var(--fs-15) var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ld .mast .kontokopf .krolle {
    justify-self: start; padding: 2px 6px; border-radius: var(--r-chip); border: 1px solid var(--line);
    font: 700 var(--fs-10) var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted)
}
.ld .mast .kontokopf .krolle.leitung { color: var(--acc-hell); border-color: rgba(200, 27, 255, .5) }
.ld .mast .kontokopf .kwer > small { grid-column: 1 / -1; color: var(--muted2); font-size: var(--fs-11); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal }

.ld .mast .kgruppe { display: grid; gap: 1px; padding: 4px 0 }
.ld .mast .kgruppe + .kgruppe { border-top: 1px solid var(--dim); margin-top: 2px }
.ld .mast .ktitel { padding: 4px 10px 6px; font: 800 var(--fs-10) var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted2) }


.ld .mast .kontomenue a, .ld .mast .kontomenue button {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font: 600 var(--fs-13) var(--font);
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 40px;
    padding: 7px 10px 7px 12px;
    border-radius: var(--r-chip);
    font: 600 var(--fs-13) var(--font);
    color: var(--text);
    transition: background-color .15s ease, color .15s ease;
}
.ld .mast .kontomenue a::before, .ld .mast .kontomenue button::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 1px;
    background: var(--acc); opacity: 0; transform: scaleY(.5); transition: opacity .15s ease, transform .18s cubic-bezier(.2, .7, .2, 1)
}
.ld .mast .kontomenue a:hover, .ld .mast .kontomenue button:hover,
.ld .mast .kontomenue a:focus-visible, .ld .mast .kontomenue button:focus-visible { background: var(--field); outline: none }
.ld .mast .kontomenue a:hover::before, .ld .mast .kontomenue button:hover::before,
.ld .mast .kontomenue a:focus-visible::before, .ld .mast .kontomenue button:focus-visible::before { opacity: 1; transform: none }
.ld .mast .kontomenue svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.ld .mast .kontomenue a:hover svg, .ld .mast .kontomenue button:hover svg { stroke: var(--text) }
.ld .mast .kontomenue a > span, .ld .mast .kontomenue button > span { display: grid; gap: 1px; min-width: 0; line-height: 1.2 }
.ld .mast .kontomenue a > span small, .ld .mast .kontomenue button > span small { font: 500 var(--fs-11) var(--font); color: var(--muted2) }

.ld .mast .kontomenue form button {
    color: var(--text);
}
.ld .mast .kontomenue form button.kaus { color: var(--muted) }
.ld .mast .kontomenue form button.kaus:hover { color: #FF9CB0 }
.ld .mast .kontomenue form button.kaus:hover svg { stroke: #FF9CB0 }
.ld .mast .kontomenue form button.kaus:hover::before { background: var(--red) }



/* =====================================================================
   Konto-Knopf (02.09., "den Button auch selbst"). Ein richtiger Knopf mit
   Hairline-Rahmen: links die Kuerzel-Kachel in Markenfarbe, daneben Name
   und Rolle in zwei Zeilen, rechts der Pfeil, der sich beim Oeffnen dreht.
   Offen leuchtet die Kachel voll magenta - dieselbe Farbe wie die Marke.
   ===================================================================== */
.ld .mast .kontochip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    cursor: pointer;
    touch-action: manipulation;
    border-radius: var(--r-ctl);
    border: 1px solid transparent;
    font: 700 var(--fs-13) var(--font);
    height: 38px;
    padding: 0 10px 0 4px;
    gap: 9px;
    border-radius: var(--r-ctl);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .02);
    color: var(--text);
    transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}
.ld .mast .kontochip:hover { border-color: rgba(255, 255, 255, .24); background: var(--field) }
.ld .mast .kontochip.on { border-color: rgba(200, 27, 255, .6); background: var(--field) }
.ld .mast .kontochip:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px }
.ld .mast .kontochip > b {
    width: 28px; height: 28px; border-radius: var(--r-chip); font: 800 var(--fs-11) var(--font); letter-spacing: .03em;
    background: rgba(200, 27, 255, .16); border: 1px solid rgba(200, 27, 255, .45); color: #F0C4FF;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease
}
.ld .mast .kontochip.on > b { background: var(--acc); border-color: var(--acc); color: #fff }
.ld .mast .kontochip .kname { display: grid; gap: 1px; text-align: left; line-height: 1.05 }
.ld .mast .kontochip .kname b { font: 700 var(--fs-13) var(--font); color: var(--text); white-space: nowrap }
.ld .mast .kontochip .kname small { font: 700 var(--fs-10) var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted2) }
.ld .mast .kontochip.on .kname small { color: var(--acc-hell) }


.ld .mast .kontochip .pfeil {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg) translateY(-2px);
    margin-left: 2px;
    border-color: var(--muted);
    transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}
.ld .mast .kontochip.on .pfeil { transform: rotate(-135deg) translateY(2px) }

/* Menue-Kachel in derselben Markenfarbe wie die Knopf-Kachel */
.ld .mast .kontokopf .kkachel {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--r-ctl);
    border: 1px solid var(--line);
    font: 800 var(--fs-14) var(--font);
    letter-spacing: .02em;
    background: rgba(200, 27, 255, .16);
    border-color: rgba(200, 27, 255, .45);
    color: #F0C4FF;
}
@media (max-width: 900px) { .ld .mast .kontochip { padding-right: 8px } }
@media (max-width: 900px) { .ld .mast .kontochip .kname { display: none } }
/* Der Name im Knopf ist ein <b> und erbte die Kachel-Regeln (Kaestchen, Rahmen) - zuruecknehmen */
.ld .mast .kontochip .kname b {
    display: block; width: auto; height: auto; background: none; border: 0; border-radius: 0;
    font: 700 var(--fs-13) var(--font); color: var(--text); letter-spacing: 0
}

/* ---- Aus laserdance-system.css hierher geholt (06.09.2026) ----
   .ld .mast2 .ur hatte SECHS Definitionen ueber zwei Dateien und rund
   1.800 Zeilen (Befund G3-b, schwerste Kette im Projekt). Die beiden
   Fassungen aus system.css standen dort nur, weil system.css zuletzt
   geladen wird - gebraucht werden sie hier, bei dem Baustein, den sie
   beschreiben. Sie stehen am Dateiende und gewinnen damit weiter gegen
   alles darueber, genau wie vorher.
   Radius: die drei Marken stehen in docs/DESIGN.md.
   Hoehe: 38 ist die Reiterhoehe, 40 die Fingerhoehe. */
.ld .mast2 .ur { border-radius: var(--r-ctl) }
.ld .mast2 .ur { min-height: 38px; display: inline-flex; align-items: center }
@media (pointer: coarse) { .ld .mast2 .ur { min-height: 40px } }