/* Konfiguration (/konfiguration) mit Feldzeilen
   Teil 5 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. */
/* Legende */
/* ---- Konfiguration (/konfiguration) ---- */
.ld .cfghead { margin: 20px 0 6px }
.ld .cfghead h1 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.01em; margin: 0 }
.ld .cfgcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
@media (max-width: 860px) { .ld .cfgcols { grid-template-columns: 1fr } }
/* Eine Ebene statt zwei: bis 10.09.2026 hatte .cfgbox denselben Grund und
   denselben Rahmen wie der .block, in dem sie steckt - ein Kasten im
   gleichen Kasten, auf jeder Konfigurationsseite ein Dutzend Mal. Jetzt
   traegt der Block den Rahmen, die Box hebt sich nur durch die naechste
   Flaechenstufe ab (p1 -> p2). Das ergibt die Leiter Seite > Block > Box,
   statt zweimal derselben Linie. */
.ld .cfgbox {
    background: var(--p2); border: 0; border-radius: var(--r-ctl);
    padding: 14px 16px
}
.ld .cfgbox + .cfgbox { margin-top: 10px }
.ld .cfgboxtitel { font-size: var(--fs-12); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px }
.ld .cfgrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; flex-wrap: wrap }
.ld .cfgrow + .cfgrow { border-top: 1px solid var(--dim) }
.ld .cfgrow .k { flex: 1 1 150px; font-size: var(--fs-13); font-weight: 600 }
.ld .cfgrow .k small { display: block; color: var(--muted); font-weight: 500; font-size: var(--fs-11); margin-top: 1px }
.ld .cfgrow .k.tag { flex: 0 0 118px; font-weight: 800 }
.ld .cfgrow .bis, .ld .cfgrow i.bis { color: var(--muted); font-size: var(--fs-12); font-style: normal }
.ld .feld { display: inline-flex; align-items: center; gap: 7px }
.ld .feld input { padding: 8px 10px; font-size: var(--fs-14); max-width: 150px }
.ld .feld.schmal input { max-width: 92px; text-align: right }
.ld .feld.breit { flex: 1 1 180px }
.ld .feld.breit input { max-width: none; width: 100%; text-align: left }
.ld .feld.doppel input { max-width: 70px; text-align: right }
.ld .feld i { color: var(--muted); font-size: var(--fs-12); font-style: normal; white-space: nowrap }
.ld .cfgcheck { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-13); font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap }
/* Haken limegruen wie die Fassung der Kontrollkaestchen (laserdance.css):
   magenta Haken im gruen markierten Rahmen waren zwei Signale fuer eins */
.ld .cfgcheck input { width: 17px; height: 17px; accent-color: var(--lime) }
.ld .cfgaktion { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap }
.ld .vorschau { margin-top: 10px; padding: 8px 10px; border: 1px dashed rgba(2, 255, 255, .3); color: var(--muted); font-size: var(--fs-12) }
.ld .cfgmeld { margin-top: 9px; font-size: var(--fs-12); font-weight: 700; padding: 7px 10px; border: 1px solid currentColor }
.ld .cfgmeld.gut { color: var(--lime) }
.ld .cfgmeld.schlecht { color: var(--red) }
.ld .cfgrow.setting .k { flex-basis: 260px }
/* Leeres Pflichtfeld (Firmenbox fuer das Impressum): Rot heisst Gefahr, hier
   "die Seite ist unvollstaendig". Gleiche Fassung wie input.bad im Warenkorb. */
.ld .cfgbox input.bad { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset }

/* Sondertag als kleine Karte: eine Entscheidung je Zeile, nicht sechs
   Felder und zwei Checkboxen nebeneinander */
.ld .stkarte { border: 1px solid var(--line); background: var(--field); padding: 11px 12px; margin-bottom: 9px }
.ld .stkopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.ld .stkopf input[type=date] { max-width: 165px; padding: 8px 10px; font-size: var(--fs-14) }
.ld .stwahl { display: inline-flex; border: 1px solid var(--line) }
.ld .stwahl button {
    background: transparent; border: 0; color: var(--muted); cursor: pointer;
    font-family: var(--font); font-weight: 700; font-size: var(--fs-12); padding: 8px 14px
}
.ld .stwahl button + button { border-left: 1px solid var(--line) }
.ld .stwahl button:hover { color: var(--text) }
.ld .stwahl button.on { background: var(--lime); color: #10160a }
.ld .stwahl button.on.zu { background: var(--red); color: #fff }
.ld .stzeit { display: inline-flex; align-items: center; gap: 8px }
.ld .stzeit input { max-width: 108px; padding: 8px 10px; font-size: var(--fs-14) }
.ld .stzeit i { color: var(--muted); font-style: normal; font-size: var(--fs-12) }
.ld .stfuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dim) }
.ld .stfuss .stnotiz { flex: 1 1 200px; min-width: 160px; padding: 8px 10px; font-size: var(--fs-14) }

/* Einheitliche Knopfgroesse in den Konfigurations-Boxen */
.ld .cfgbox .minibtn, .ld .cfgbox .minibtn.go { font-size: var(--fs-12); padding: 7px 13px }
.ld .feierliste { display: flex; flex-direction: column; gap: 2px; margin-top: 8px }
.ld .feierliste button {
    background: none; border: 0; border-left: 2px solid var(--cyan); color: var(--text);
    font: 400 var(--fs-11) var(--font); text-align: left; padding: 3px 0 3px 8px; cursor: pointer
}
.ld .feierliste button:hover { background: rgba(2, 255, 255, .07) }
.ld .feierliste b { color: var(--cyan); font-weight: 800; margin-right: 4px }

/* Monatsauswahl schließt bei Klick daneben */
.ld .monatzu { position: fixed; inset: 0; z-index: 30 }

/* Filter als Auswahlfelder: eine Zeile statt drei Knopfreihen */
.ld .fsel {
    background: var(--field); border: 1px solid var(--line); color: var(--text);
    font: 700 var(--fs-12) var(--font); padding: 7px 9px; cursor: pointer
}
.ld .fsel:hover { border-color: var(--acc) }
.ld .fsel:focus { outline: 0; border-color: var(--cyan) }
.ld .fsel option { background: #14141C; color: var(--text) }
@media (max-width: 700px) {
    .ld .cfginhalt .btabwrap { overflow-x: auto }
}

/* ---- Konfiguration: Raeume und Puffer-Felder ---- */
.ld .feld.mini { width: 52px }
.ld .feld.mini input { width: 100%; text-align: center; padding: 8px 4px }
.ld .feld.raumname { flex: 0 1 220px; min-width: 130px }
.ld .feld.raumname input { width: 100% }
.ld .cfgsuche input {
    width: 100%; background: var(--field); border: 1px solid var(--line);
    color: var(--text); font: 500 var(--fs-13) var(--font); padding: 9px 13px
}
.ld .cfgsuche input:focus { outline: 0; border-color: var(--cyan) }
.ld .cfgtreffer {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
    background: var(--p2); border: 1px solid var(--acc);
    box-shadow: 0 16px 44px rgba(0,0,0,.55); max-height: 330px; overflow-y: auto
}
.ld .cfgtreffer a {
    display: flex; flex-direction: column; gap: 1px; padding: 9px 13px;
    color: var(--text); text-decoration: none; border-bottom: 1px solid var(--dim)
}
.ld .cfgtreffer a:hover { background: rgba(200,27,255,.12); box-shadow: inset 3px 0 0 var(--acc) }
.ld .cfgtreffer a b { font-size: var(--fs-13) }
.ld .cfgtreffer a small { color: var(--muted); font-size: var(--fs-11) }
.ld .cfgtreffer .leer { padding: 11px 13px; color: var(--muted); font-size: var(--fs-12) }

/* Rote Zeile unter Einstellungen, die sofort den Verkauf aendern */
.ld .cfglivewarnung {
    color: var(--red); font: 600 var(--fs-11) var(--font); padding: 2px 0 8px;
    border-bottom: 1px solid var(--dim); margin-bottom: 8px
}

/* Wochenend-Tage: sieben Haken als Marken */
.ld .feld.wtage { display: flex; gap: 5px; flex-wrap: wrap }

.ld .feld.urlfeld { flex: 1 1 260px; min-width: 180px }
.ld .feld.urlfeld input { width: 100% }

/* ---- Konfiguration: Baum-Leiste links ---- */
.ld .cfglayout { display: grid; grid-template-columns: 212px 1fr; gap: 20px; align-items: start }
/* Rasterspalten sind von Haus aus so breit wie ihr breitester Inhalt.
   Ein einziger langer Knopftext im Aenderungsprotokoll hat dadurch die
   ganze Seite ueber den Bildschirmrand geschoben. min-width:0 laesst die
   Spalte wieder auf die Bildschirmbreite schrumpfen. */
.ld .cfglayout > * { min-width: 0 }
.ld .cfgbaum {
    position: sticky; top: 76px; display: flex; flex-direction: column;
    background: var(--p1); border: 1px solid var(--line); padding: 8px 0
}
.ld .cfgbaum .ast {
    display: flex; align-items: center; gap: 7px; padding: 8px 14px;
    color: var(--text); text-decoration: none; font: 700 var(--fs-13) var(--font)
}
.ld .cfgbaum .ast i { font-style: normal; color: var(--muted); width: 10px }
.ld .cfgbaum .ast:hover { background: rgba(255, 255, 255, .05) }
.ld .cfgbaum .ast.on { color: var(--acc) }
.ld .cfgbaum .zweig {
    display: block; padding: 5px 14px 5px 31px; color: var(--muted);
    text-decoration: none; font: 500 var(--fs-12) var(--font);
    border-left: 2px solid transparent
}
.ld .cfgbaum .zweig:hover { color: var(--text); border-left-color: var(--acc); background: rgba(200, 27, 255, .07) }
@media (max-width: 860px) {
    .ld .cfglayout { grid-template-columns: 1fr }
    .ld .cfgbaum { display: none }
}

/* Rueckweg im Protokoll */
.ld .logundo { margin-left: 9px; padding: 2px 8px; font-size: var(--fs-10) }
/* Vorher und nachher ohne Textpfeil: der alte Wert steht durchgestrichen
   und blass davor, der neue in normaler Schrift dahinter. */
.ld .logwerte { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px }
.ld .logalt { text-decoration: line-through; color: var(--muted2); opacity: .75 }
.ld .logneu { color: var(--text) }

/* Suche in der linken Spalte, X zum Leeren, Markierung im Treffer */
.ld .cfgspalte { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 10px }
.ld .cfgspalte .cfgbaum { position: static }

/* ---- Konfiguration: Suche, Live-Warnung, Wochenend-Haken ---- */

.ld .cfgsuche {
    margin-top: 10px;
    max-width: 460px;
    position: relative;
}
.ld .cfgsuche .sx {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--muted); font-size: var(--fs-16); cursor: pointer
}
.ld .cfgsuche .sx:hover { color: var(--text) }
.ld .cfgtreffer a b mark { background: rgba(200, 27, 255, .35); color: #fff }

/* Auf schmalen Schirmen: Suche bleibt (oberhalb der Chips nutzbar), nur der
   Baum verschwindet - den ersetzen dort die Chips. */
@media (max-width: 860px) {
    .ld .cfgspalte { position: static }
}

/* Die Seitenleiste ist sticky und damit ein eigener Stapelkontext: ein
   z-index am Panel darin kann den Aussenklick-Faenger (30) nie ueberholen.
   Also steht die ganze Leiste darueber - der Faenger schliesst weiter bei
   jedem Klick ausserhalb der Leiste, und Esc tut es sowieso. */
.ld .opsside { z-index: 31 }

/* ---- Nachtschicht P4a: Konfiguration gruppiert, Vorlagen-Tabelle ---- */

/* Sichtbare Gruppen in einer Einstellungs-Box */
.ld .cfggruppe {
    margin: 16px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--dim);
    font-size: var(--fs-11); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--cyan)
}
.ld .cfgbox .cfggruppe:first-child { margin-top: 2px }

/* Slot-Vorlagen als Tabelle: Kopf und Zeilen teilen dieselben Spalten */
.ld .tpltab { overflow-x: auto }
.ld .tplkopf, .ld .tplzeile {
    display: grid; align-items: center; gap: 8px;
    grid-template-columns: minmax(96px, 130px) 108px 82px 82px 58px 58px 58px 72px minmax(120px, 1fr);
    min-width: 760px
}
.ld .tplkopf {
    padding: 2px 0 6px; font-size: var(--fs-11); font-weight: 700; color: var(--muted);
    letter-spacing: .03em
}
.ld .tplkopf .pk { color: var(--gold, #ffd600); cursor: help }
.ld .tplzeile { padding: 5px 0; border-top: 1px solid var(--dim) }
.ld .tplzeile .tplrest { font-size: var(--fs-11); color: var(--muted); white-space: nowrap }
.ld .tplzeile.eng .tplrest { color: var(--red); font-weight: 700 }
.ld .tplzeile.eng input { border-color: var(--red) }

/* ---- Nachtschicht P4c: Zeitraum als EIN Eintrag ---- */
.ld .stgruppe { border: 1px solid var(--acc); background: var(--p1); margin-bottom: 10px }
.ld .stgkopf {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 13px
}
.ld .stgkopf b { font-size: var(--fs-14) }
.ld .stgnotiz { color: var(--cyan); font-weight: 700; font-size: var(--fs-12) }
.ld .stginfo { color: var(--muted); font-size: var(--fs-12); margin-right: auto }
.ld .stgtage { padding: 2px 10px 8px; border-top: 1px solid var(--dim) }
.ld .stgtage .stkarte { margin: 8px 0 0 }
@media (min-width: 1500px) {
    /* Konfiguration: Baum etwas breiter, Inhalt nutzt den Rest */
    .ld .pg:has(.staffchip) .cfglayout { grid-template-columns: 240px 1fr }
}
.ld .zrwtage .cfgcheck { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13) }
.ld .zrwtage .cfgcheck.an { color: var(--cyan) }


/* ---- Produkte und Extras fuer Manager ohne Web-Routine (09.09.2026) ----
   Grundsatz: jede Box beginnt mit einer Erklaerung in zwei Saetzen, jedes
   Feld traegt seinen Namen sichtbar, seltene Aktionen sind eingeklappt. */
.ld .erkl { margin: 0 0 12px; font-size: var(--fs-13); line-height: 1.55; color: var(--muted); max-width: 72ch }
.ld .cfgdetails { margin-top: 14px; border-top: 1px solid var(--dim); padding-top: 4px }
.ld .cfgdetails summary {
    list-style: none; cursor: pointer; padding: 8px 0; font-size: var(--fs-13); font-weight: 700; color: var(--cyan)
}
.ld .cfgdetails summary::-webkit-details-marker { display: none }
.ld .cfgdetails summary::before { content: "+"; display: inline-block; width: 18px; font-size: var(--fs-16); font-weight: 400 }
.ld .cfgdetails[open] summary::before { content: "\2013" }
.ld .cfgform { padding: 4px 0 2px }

/* Extras als Tabelle: Kopfzeile am Laptop, am Telefon steht die
   Beschriftung ueber jedem Feld (data-l). */
.ld .extratab { display: grid; gap: 0 }
.ld .extratab .exkopf, .ld .extratab .exzeile {
    display: grid; grid-template-columns: 1.7fr 96px 1fr 88px 1.6fr auto auto;
    gap: 8px 10px; align-items: center
}
.ld .extratab .exkopf {
    font-size: var(--fs-11); font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted2); padding: 2px 0 6px; border-bottom: 1px solid var(--line)
}
.ld .extratab .exzeile { padding: 8px 0; border-bottom: 1px solid var(--dim) }
.ld .extratab .exzeile.aus input:not([type=checkbox]) { opacity: .6 }
.ld .extratab .feld { min-width: 0 }
.ld .extratab .feld input:not([type=checkbox]) { width: 100%; max-width: none; text-align: left }
.ld .extratab .feld.schmal input { text-align: right }
.ld .extratab .exakt { justify-self: end }
/* Eventpakete: Paket, drei Preise, Schalter, Knopf */
.ld .eventtab .exkopf, .ld .eventtab .exzeile { grid-template-columns: 1.6fr 110px 110px 110px auto auto }
.ld .eventtab .k { display: grid; gap: 1px; min-width: 0 }
.ld .eventtab .k small { color: var(--muted2); font-size: var(--fs-11) }
@media (max-width: 900px) {
    .ld .extratab .exkopf { display: none }
    .ld .extratab .exzeile { grid-template-columns: 1fr 1fr; padding: 12px 0 }
    .ld .extratab .exzeile > * { display: flex; flex-direction: column; align-items: stretch; gap: 3px }
    .ld .extratab .exzeile > [data-l]::before {
        content: attr(data-l); font-size: var(--fs-11); font-weight: 800; letter-spacing: .06em;
        text-transform: uppercase; color: var(--muted2)
    }
    .ld .extratab .feld i { align-self: flex-end }
    .ld .extratab .feld.breit, .ld .extratab .exakt { grid-column: 1 / -1 }
    .ld .extratab .exakt { justify-self: stretch }
    .ld .extratab .cfgcheck { flex-direction: row; align-items: center }
    .ld .extratab .cfgcheck::before { display: none }
}

/* Produkte als Karten: Punkt (gruen im Shop, grau pausiert), Name mit
   einem Satz dazu, Zustand in Worten, zwei Knoepfe. */
.ld .prodliste { display: flex; flex-direction: column; gap: 8px }
.ld .prodkarte {
    display: grid; grid-template-columns: 12px 1fr auto auto; gap: 6px 12px; align-items: center;
    padding: 10px 12px; background: var(--p2); border: 1px solid var(--dim); border-radius: var(--r-ctl, 6px)
}
.ld .prodkarte .pdot { width: 10px; height: 10px; border-radius: 999px; background: var(--lime) }
.ld .prodkarte.pausiert .pdot { background: var(--muted2) }
.ld .prodkarte .pname { font-size: var(--fs-14); font-weight: 700; min-width: 0 }
.ld .prodkarte .pname small { display: block; font-size: var(--fs-12); font-weight: 500; color: var(--muted); margin-top: 1px }
.ld .prodkarte .pzustand { font-size: var(--fs-12); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lime); white-space: nowrap }
.ld .prodkarte.pausiert .pzustand { color: var(--muted2) }
.ld .prodkarte .pakt { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
.ld .prodkarte .cfgmeld { grid-column: 1 / -1; margin-top: 4px }
@media (max-width: 700px) {
    .ld .prodkarte { grid-template-columns: 12px 1fr auto }
    .ld .prodkarte .pakt { grid-column: 1 / -1; justify-content: flex-start }
}