/* AUFTRAG-RESERVIERUNG-SERVICE-CC.md - globales Stylesheet (nicht Blazor-CSS-
   isoliert) fuer die Reservierungs-Timeline + Panels, weil mehrere getrennte
   Komponenten (ResTimeline, ReservationEditPanel, ReservationDetailPopover,
   ServiceAreas, ResActivity, ResMonth, GuestDetail) dieselben Klassen teilen -
   Blazor-CSS-Isolation (*.razor.css) skaliert das nicht ueber Komponenten
   hinweg. Nutzt dieselben --pos-*-Tokens wie pos-theme.css (Doc 20).
*/

.pos-btn {
    border: 1px solid var(--pos-hairline);
    background: var(--pos-surface);
    color: var(--pos-text);
    border-radius: var(--pos-radius-btn);
    padding: 8px 14px;
    font-size: 0.9rem;
    cursor: pointer;
}

.pos-btn-primary {
    background: var(--pos-accent);
    border-color: var(--pos-accent);
    color: #fff;
}

.pos-btn-danger {
    background: transparent;
    /* Paket 4: ueber den Token, damit die Farbe im Dunkelmodus die helle
       Rotstufe traegt statt eines Dunkelrots auf fast Schwarz. */
    border-color: var(--pos-danger);
    color: var(--pos-danger);
}

.pos-icon-btn {
    background: transparent;
    border: none;
    color: var(--pos-text);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--pos-radius-btn);
}

.pos-icon-btn:hover {
    background: var(--pos-mulde-bg);
}

.pos-icon-btn-active {
    color: var(--pos-accent);
}

/* ============================================================
   Timeline (Paket C)
   ============================================================ */
/* Bei der Verifikation von AUFTRAG-AKTE-MEGA-CC.md entdeckt (gleiches Muster
   wie .pos-kitchen-shell/.pce-shell): ohne width:100%+flex:1 1 auto ist die
   Shell nur ein gewoehnliches Flex-Item in <app> (ab 768px selbst ein Row-
   Flex-Container) und schrumpft auf ihren Inhalt statt die Zeile zu
   fuellen - unabhaengig von der Fensterbreite. */
.res-timeline-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    height: 100vh;
    overflow: hidden;
}

.res-timeline-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--pos-hairline);
    background: var(--pos-panel);
    flex-wrap: wrap;
}

.res-timeline-datenav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.res-timeline-date {
    background: transparent;
    border: none;
    color: var(--pos-text);
    font-weight: 600;
    cursor: pointer;
}

.res-timeline-search {
    background: var(--pos-surface);
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    color: var(--pos-text);
    padding: 6px 10px;
    min-width: 160px;
}

.res-timeline-stat {
    font-size: 0.85rem;
    color: var(--pos-muted);
    white-space: nowrap;
}

.res-timeline-hint {
    padding: 24px;
    color: var(--pos-muted);
}

/* Paket C.9: Konfliktliste - Reservierungen, deren Tisch es in der heute
   geltenden Bestuhlung nicht gibt. Bewusst als eigene, immer sichtbare
   Leiste statt eines still verschwundenen Balkens. */
.res-timeline-konflikte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px;
    /* Paket 4 (Hell/Dunkel): die Fallbacks sind raus - --pos-danger* gibt es
       jetzt wirklich, in beiden Themes (pos-theme.css). Vorher stand hier im
       Dunkelmodus ein hellrosa Balken samt dunkelroter Schrift. */
    background: var(--pos-danger-bg);
    border-bottom: 1px solid var(--pos-hairline);
}

.res-timeline-konflikte-titel {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pos-danger);
}

.res-timeline-konflikt-zeile {
    display: flex;
    gap: 12px;
    align-items: center;
    border: none;
    background: transparent;
    padding: 3px 4px;
    font-size: 0.82rem;
    color: var(--pos-text);
    cursor: pointer;
    text-align: left;
}

.res-timeline-konflikt-zeile:hover {
    /* Paket 4: die Mulde des Themes statt eines festen Schwarz-Hauchs - auf der
       dunklen Warnflaeche war rgba(0,0,0,.04) schlicht unsichtbar. */
    background: var(--pos-mulde-bg);
}

/* AUFTRAG-ZUTEILUNG-HERKUNFT-CC.md Paket B (E-189): die Mitteilung, wenn eine
   Empfehlung weichen musste. Bewusst NICHT die rote Konfliktleiste darueber -
   das hier ist kein Fehler, sondern ein Hinweis: Das Haus hat anders
   entschieden, und wer empfohlen hat, soll es erfahren. Honig statt Rot, und
   sie geht erst weg, wenn jemand sie gelesen hat. */
.res-timeline-hinweise {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px;
    background: var(--pos-warn-bg);
    border-bottom: 1px solid var(--pos-hairline);
}

.res-timeline-hinweis-titel {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pos-warn);
}

.res-timeline-hinweis-zeile {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 0.82rem;
    color: var(--pos-text);
}

.res-timeline-hinweis-grund {
    color: var(--pos-muted);
}

.res-timeline-hinweis-weg {
    align-self: flex-start;
    border: none;
    background: transparent;
    padding: 2px 4px;
    font-size: 0.78rem;
    color: var(--pos-warn);
    font-weight: 600;
    cursor: pointer;
}

/* AUFTRAG-BALKEN-ZIEHEN-CC.md Paket A: die Auskunft zur Zieh-Geste. Sie leiht
   sich die Hinweisleiste, steht aber EINZEILIG (Satz und Knopf nebeneinander) -
   sie ist eine Antwort auf die letzte Geste, keine Liste. */
.res-timeline-ziehhinweis {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    font-size: 0.82rem;
    color: var(--pos-text);
}

.res-timeline-scroll {
    flex: 1;
    overflow: auto;
}

.res-timeline-grid {
    position: relative;
}

/* ============================================================
   AUFTRAG-TIMELINE-WAAGERECHT-CC.md Paket A: DIE WAAGERECHTE REIHE.
   Ein Tag ist eine Reihe von Bloecken nebeneinander; jeder Block traegt
   links seine eigene Tischspalte und rechts sein eigenes Zeitraster.
   align-items:flex-start ist die ganze Miete der Forderung "oben buendig,
   nichts gestreckt": Bloecke sind verschieden hoch (11 gegen 16 Zeilen)
   und bleiben es.
   ============================================================ */
.res-timeline-blocks {
    display: flex;
    align-items: flex-start;
}

.res-timeline-block {
    flex: none;
    position: relative;
}

/* Der Bruch zwischen zwei Bloecken soll als KANTE sichtbar sein, nicht
   kaschiert - und zwar ueber die volle Hoehe des Blocks, nicht nur in
   seiner Kopfzeile. Nur ein Block, in dem eine ANDERE Bestuhlung beginnt,
   traegt sie (siehe BlockColumn.IstSchnitt).

   AUFTRAG-TIMELINE-NACHBESSERUNG-CC.md Paket 3 (Gruender-Feedback
   01.08.2026): vorher war das buchstaeblich dieselbe Anweisung wie bei der
   Jetzt-Linie - beide 2px in var(--pos-accent) -, und genau das hat
   durcheinandergebracht. DEN AKZENT BEHAELT DIE JETZT-LINIE: sie ist die eine
   Angabe, die sich bewegt und die jeder sofort finden muss. Die Kante bekommt
   ein eigenes Aussehen, das als TRENNUNG liest statt als ZEITPUNKT: eine
   ruhige DOPPELLINIE in --pos-muted, die typografische Form fuer einen Bruch
   (Bundsteg), nicht fuer einen Zeiger. Ein Zeiger ist eine einzelne, kraeftige
   Signallinie; eine Naht sind zwei duenne mit Luft dazwischen - auf einen
   Blick unterscheidbar, ohne eine zweite Signalfarbe einzufuehren.
   Beide Toene kommen aus den --pos-*-Tokens, Hell und Dunkel gehen damit
   automatisch mit (--pos-muted: #9C8D93 dunkel / #6E6259 hell). */
.res-timeline-block-schnitt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(90deg,
        var(--pos-muted) 0 1.5px,
        transparent 1.5px 4.5px,
        var(--pos-muted) 4.5px 6px);
    z-index: 21;
    pointer-events: none;
}

.res-timeline-axis-block {
    display: flex;
}

/* AUFTRAG-RES-TIMELINE-STACKING-CC.md: zweigeteilte z-index-Leiter -
   UNTEN alles horizontal Scrollende (1 hourline/gridline, 2 bar, 3 brace/
   drag-preview, 4 nowline, 5 occupancy-Zahlen), OBEN alle sticky Flaechen,
   die das Scrollende verdecken muessen (20 sticky Spalte/Kopfzeilen-Label-
   Spans, 22 sticky Achsen-/Kopf-Zeile, 24 Ecke oben-links). Overlays
   (Popover/Mini-Menue/Panel/Backdrop) bleiben strikt darueber (>24). Vorher
   war die Leiter inkonsistent gewachsen (Zahlen z:10 ueber allem, aber die
   sticky Spalte nur z:2) - dadurch zog Scrollendes vor die sticky Flaechen
   statt dahinter zu verschwinden.
   Nachbesserung (Gruender-Feedback 27.07.2026), zwei Funde: (1) die
   Kopfzeilen-Label-Spans (root/location/outlet/area) waren nur so breit wie
   ihr Text/Padding - schmaler als die 160px-Tischspaltenbreite, im Rest der
   Spaltenbreite blitzte die Jetzt-Linie (z:4) durch. Fix: min-width:160px
   (box-sizing:border-box) + eigener opaker Hintergrund auf den Spans, decken
   die Tischspalte damit luecken- und randlos wie .res-timeline-tablecol bei
   den Tisch-Zeilen.
   (2) Reichte allein nicht: die AEUSSERE Kopfzeilen-Zeile hatte selbst
   position:relative + z-index:2 (fuers Verdecken der Hourlines in der
   eigenen Zeile, siehe deren Kommentare unten) - das erzeugt einen EIGENEN
   Stacking-Context, der die z-index:20 der Kind-Spans DARIN einsperrt (nach
   aussen zaehlt dann nur noch der Elternwert 2). Die Spans gewannen also
   lokal gegen die eigene Kopfzeile, verloren aber weiterhin gegen die
   Jetzt-Linie, weil die auf Grid-Ebene nur den aeusseren Wert 2 sieht statt
   der inneren 20. Fix: die Kopfzeilen-Aussenflaeche traegt ihr eigenes z:2
   jetzt auf einem ::before-Pseudoelement (deckt weiterhin die Hourlines),
   waehrend die AEUSSERE Zeile selbst kein z-index mehr setzt (position:
   relative bleibt nur als Verankerung fuers ::before) - dadurch spannt sie
   KEINEN Stacking-Context mehr auf, und die Spans (z:20) vergleichen sich
   wieder direkt (undurchgereicht) mit der Jetzt-Linie (z:4) auf Grid-Ebene. */
/* AUFTRAG-RES-TIMELINE-WETTER-NACHBESSERUNG-CC.md Paket 1: EIN sticky
   Container fuer Achse + (bei genau einer Location) das Wetter-/Tageslicht-
   Band davor - dadurch ergibt sich deren gemeinsame Kopf-Hoehe automatisch
   aus dem tatsaechlich gerenderten Inhalt (Band da/weg je nach Koordinaten/
   Wetter-Schalter), statt zwei einzeln sticky positionierte Elemente mit
   einem hart verdrahteten zweiten Versatz synchron halten zu muessen. Die
   Stunden-/Rasterlinien starten entsprechend nicht mehr bei einem festen
   top:32px, sondern bei ResTimeline.HeaderHeightPx (inline gesetzt). */
/* AUFTRAG-TIMELINE-NACHBESSERUNG-CC.md Paket 1: der Kopf traegt jetzt drei
   Zeilen uebereinander - Fokus-Zeile, Wetterzeile, Zeitachse -, jede fuer
   sich und keine zwei, die sich eine Hoehe teilen. Weil alle drei in DIESEM
   einen sticky Container liegen, ergibt sich seine Hoehe weiterhin von selbst
   aus dem, was tatsaechlich gerendert wird (Wetter aus/ohne Koordinaten =
   Zeile faellt ersatzlos weg) - es gibt keine zweite, von Hand synchron
   gehaltene Zahl.
   Nebenwirkung, auf die sich Paket 4 stuetzt: der Kopf ist ueber seine volle
   Breite UNDURCHSICHTIG (Fokus-Zeile --pos-canvas, Wetterzeile --pos-panel,
   Achse --pos-canvas). Die durchgehende Jetzt-Linie (z:4) laeuft darum
   ununterbrochen unter ihm hindurch, ohne dort sichtbar zu sein - sichtbar
   setzt sie erst .res-timeline-axis-now fort. */
.res-timeline-sticky-head {
    position: sticky;
    top: 0;
    z-index: 22;
}

/* Paket 1: die Fokus-/Provider-Zeile ganz oben, ueber die volle Breite.
   Zweischichtiges sticky-Muster wie die uebrigen Kopfzeilen: die AEUSSERE
   Zeile ist die volle, opake Flaeche, der INNERE span klebt beim waagerechten
   Scrollen links (inline-block, damit er nur so breit wird wie noetig -
   genau der Unterschied zur alten .res-weather-row-label, die als
   display:flex ueber die volle Blockbreite lief und damit das Wetter
   darunter abschnitt). Ein z-index ist hier nicht noetig: in dieser Zeile
   laeuft kein Raster und keine Linie. */
.res-timeline-head-fokus {
    position: relative;
    background: var(--pos-canvas);
    border-bottom: 1px solid var(--pos-hairline);
}

.res-timeline-head-fokus > span {
    display: inline-block;
    position: sticky;
    left: 0;
    min-width: 160px;
    box-sizing: border-box;
    padding: 6px 10px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--pos-text);
    background: var(--pos-canvas);
    white-space: nowrap;
}

/* Paket A: die Greifflaeche fuer Pan/Zoom ist der ganze Achsen-Streifen -
   es gibt jetzt eine Achse JE BLOCK, und zwischen ihnen die wiederholten
   Ecken. */
.res-timeline-axis-row {
    background: var(--pos-canvas);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Paket A: die Ecke ist die Kopfzeile der Tischspalte DIESES Blocks (Breite
   kommt inline). position:sticky klemmt automatisch im eigenen Block: die
   Ecke laeuft mit, solange ihr Block sichtbar ist, und wird vom naechsten
   abgeloest - genau das gewuenschte Verhalten, ohne eine Zeile JavaScript. */
.res-timeline-corner {
    flex: none;
    position: sticky;
    left: 0;
    z-index: 24;
    background: var(--pos-canvas);
    border-bottom: 1px solid var(--pos-hairline);
}

.res-timeline-axis {
    position: relative;
    height: 32px;
    border-bottom: 1px solid var(--pos-hairline);
}

.res-timeline-tick {
    position: absolute;
    top: 0;
    font-size: 0.75rem;
    color: var(--pos-muted);
    border-left: 1px solid var(--pos-hairline);
    padding-left: 4px;
    height: 100%;
    white-space: nowrap;
}

/* Paket A: die ANFANGSZEIT des Blocks - sie ist die Aussage des Schnitts
   („die vorherige Timeline geht nur bis 11:30, ab dort beginnt eine neue")
   und darum betont statt gedimmt. */
.res-timeline-tick-block-start {
    color: var(--pos-text);
    font-weight: 700;
    border-left-color: var(--pos-text);
}

/* Nur der LETZTE Block bekommt eine Schlussmarke - bei allen anderen ist
   das Ende der Anfang des naechsten und steht dort. */
.res-timeline-tick-end {
    transform: translateX(-100%);
    border-left: none;
    border-right: 1px solid var(--pos-hairline);
    padding-left: 0;
    padding-right: 4px;
}

/* AUFTRAG-AKTE-MEGA-CC.md Paket E.1: die Zeitachse ist die einzige
   Greifflaeche zum Verschieben der Timeline (Greif-Haendchen-Cursor). */
.res-timeline-axis {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.res-timeline-axis-grabbing .res-timeline-axis {
    cursor: grabbing;
}

/* Paket E.4: Stundenlinien ueber die volle Hoehe, wie die Jetzt-Linie.
   AUFTRAG-RES-TIMELINE-GESAMT-CC.md Stufe A1 (Gruender-Korrektur 26.07.2026):
   die vorherige Fassung (Feinschliff Punkt 5) hatte es umgekehrt - die
   Zwischenlinien in voller Staerke, die Stundenlinien gedimmt. Jetzt richtig
   herum: die STUNDENLINIEN sind das kraeftigere Primaerraster (volle
   Hairline-Farbe, keine Opacity), die Zwischenlinien treten zurueck. Jetzt-
   Linie liegt ueber den Balken/der Klammer (z-index-Leiter siehe
   AUFTRAG-RES-TIMELINE-STACKING-CC.md bei .res-timeline-axis-row). */
/* Paket A: die Linien leben jetzt IM Block (top:0/bottom:0 ist dessen volle
   Hoehe) statt auf Grid-Ebene mit einem Start-Offset unter dem Kopf - sie
   enden mit ihrem Block, statt ueber die Tischspalte des naechsten
   hinwegzulaufen. */
.res-timeline-hourline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--pos-hairline);
    z-index: 1;
    pointer-events: none;
}

/* Punkt 4 (Feinschliff) + Stufe A1 (Gesamt-Auftrag): Zwischenraster
   (10/15 min), farblich das schwaechere der beiden Vertikalen-Paare - siehe
   Kommentar bei .res-timeline-hourline. */
.res-timeline-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--pos-hairline);
    opacity: .45;
    z-index: 1;
    pointer-events: none;
}

/* AUFTRAG-TIMELINE-NACHBESSERUNG-CC.md Paket 4: EIN Element ueber die volle
   Grid-Hoehe statt frueher eines je Block. Vorher begann die Linie erst
   unterhalb des Kopfes und wurde von jeder Kopfzeile (Root/Location/Outlet/
   Segment) zusaetzlich unterbrochen; die Kopfzeilen decken sie jetzt nicht
   mehr ab, weil deren opake ::before-Flaeche auf z:2 liegt - unter diesen 4.
   Ihr Platz in der z-index-Leiter ist UNVERAENDERT (siehe
   .res-timeline-axis-row): ueber Balken (2) und Klammer (3), unter der sticky
   Tischspalte (20) - beim waagerechten Scrollen verschwindet sie also hinter
   ihr, statt sie zu ueberkleben - und unter dem sticky Kopf (22), unter dem
   sie ununterbrochen weiterlaeuft, bis .res-timeline-axis-now sie in der
   Skala sichtbar fortsetzt. */
.res-timeline-nowline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--pos-accent);
    z-index: 4;
    pointer-events: none;
}

/* AUFTRAG-TIMELINE-FUEHRUNGSLINIEN-CC.md Paket A/B: Fuehrungslinie ueber die
   volle Rasterhoehe waehrend Kante oder Balken gezogen werden - dieselbe
   Vorlage wie .res-timeline-nowline (JS haengt sie als Kind an dieselbe
   .res-timeline-grid, deren position:relative den Bezugsrahmen aufspannt),
   bewusst ANDERS gezeichnet (1px gestrichelt statt 2px deckend), damit sie
   auf den ersten Blick nicht mit der Jetzt-Linie verwechselt wird. Gleiche
   Sprosse der z-index-Leiter wie die Jetzt-Linie: ueber Balken (2) und
   Klammer (3), unter der klebenden Tischspalte (20) und dem klebenden Kopf
   (22). */
.res-timeline-guideline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed var(--pos-accent);
    z-index: 4;
    pointer-events: none;
}

/* Paket 4: die Jetzt-Linie IN der Zeitachse - hier traegt sie ihre Uhrzeit,
   damit man die aktuelle Zeit direkt an der Skala ablesen kann. Sie lebt im
   sticky Kopf und braucht deshalb keinen eigenen z-index: der ganze Kopf
   liegt bereits auf 22. */
.res-timeline-axis-now {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--pos-accent);
    pointer-events: none;
}

.res-timeline-axis-now > span {
    position: absolute;
    top: 3px;
    left: 3px;
    padding: 1px 5px;
    border-radius: var(--pos-radius-btn);
    background: var(--pos-accent);
    /* Wie .res-weather-now-temp: die Tomate traegt in beiden Themes Weiss. */
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

/* Paket E.5: Zwischenminuten-Raster-Waehler (Zahnrad-Popover). */
.res-timeline-grid-setting {
    position: relative;
}

.res-timeline-grid-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--pos-panel);
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-sheet);
    box-shadow: var(--pos-shadow-rest);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 26;
}

.res-timeline-grid-menu button {
    background: transparent;
    border: none;
    color: var(--pos-text);
    padding: 8px 20px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.res-timeline-grid-menu button:hover {
    background: var(--pos-mulde-bg);
}

.res-timeline-grid-menu-active {
    color: var(--pos-accent) !important;
    font-weight: 600;
}

/* AUFTRAG-TIMELINE-WAAGERECHT-CC.md Paket D: Hier standen die Regeln des
   Kalender-Sprungs (.res-timeline-cal*). Sie sind am 04.08.2026 mit dem
   Kalender selbst nach Client/Shared/PosDayPicker.razor.css gewandert
   (AUFTRAG-KASSEN-BELEGE-CC.md Paket C.3) - die Belegliste an der Kasse
   braucht denselben Kalender, und zwei Kopien waren keine Option.
   Unveraendert im Aussehen, nur umbenannt (.pos-daypicker*) und gekapselt. */

/* AUFTRAG-RES-TIMELINE-WETTER-NACHBESSERUNG-CC.md Paket 2: das Zahnrad-
   Menue vom reinen Raster-Umschalter zum allgemeinen Anzeige-Menue
   ausgebaut (Platz fuer spaetere weitere Optionen) - etwas breiter/
   aufgeraeumter als vorher, gleicher POS-Look (.res-timeline-grid-menu
   liefert weiterhin die Panel-Flaeche/Buttons). */
.res-timeline-display-menu {
    min-width: 210px;
    padding: 6px 0;
}

.res-timeline-display-menu-label {
    padding: 6px 20px 2px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--pos-muted);
}

.res-timeline-display-menu-sep {
    height: 1px;
    margin: 6px 0;
    background: var(--pos-hairline);
}

.res-timeline-display-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 20px;
    cursor: pointer;
    color: var(--pos-text);
}

.res-timeline-display-menu-toggle:hover {
    background: var(--pos-mulde-bg);
}

.res-timeline-display-menu-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.res-timeline-toggle-switch {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: 10px;
    background: var(--pos-hairline);
    transition: background .15s;
}

.res-timeline-toggle-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--pos-panel);
    /* Paket 4: der Schatten des Themes - der feste Schwarz-Schatten war im
       Hellmodus zu hart fuer einen 16px-Knopf. */
    box-shadow: var(--pos-shadow-pressed);
    transition: transform .15s;
}

.res-timeline-display-menu-toggle input:checked + .res-timeline-toggle-switch {
    background: var(--pos-accent);
}

.res-timeline-display-menu-toggle input:checked + .res-timeline-toggle-switch::before {
    transform: translateX(14px);
}

/* Paket 2b (AUFTRAG-RES-TIMELINE-BELEGUNG-CC.md): Fokus-Wurzel-Kopfzeile -
   nur bei Mehr-Location-Fokus sichtbar (siehe ShowLocationHeader/RecomputeRows
   im Code-Behind), eine Stufe prominenter als Location darunter. Gleiches
   zweischichtiges sticky-Muster wie die anderen Kopfzeilen - siehe deren
   Kommentar. */
.res-timeline-root-label {
    border-bottom: 1px solid var(--pos-hairline);
    position: relative;
}

.res-timeline-root-label::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pos-canvas);
    z-index: 2;
    pointer-events: none;
}

.res-timeline-root-label > span:not(.res-timeline-occupancy) {
    display: inline-block;
    position: sticky;
    left: 0;
    min-width: 160px;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--pos-text);
    background: var(--pos-canvas);
    z-index: 20;
}

/* Stufe C5 (AUFTRAG-RES-TIMELINE-GESAMT-CC.md): Location-Kopfzeile - nur bei
   Provider-Fokus sichtbar (mehrere Locations gleichzeitig), eine Stufe
   prominenter als die Outlet-Kopfzeile darunter (ueber font-size/-weight,
   NICHT ueber die Trennlinie - Gruender-Feedback 26.07.2026: Akzentfarbe
   auf der Linie wirkte zu kraeftig, jetzt normale Hairline wie ueberall).
   Gleiches zweischichtiges sticky-Muster (aeussere Zeile voll/opak/nicht-
   sticky, innerer <span> sticky+schmal) wie Outlet-/Area-Label - siehe
   deren Kommentar.
   Paket 2b (AUFTRAG-RES-TIMELINE-BELEGUNG-CC.md): Baender deutlich
   schlanker (weniger Padding/Schrift) - die Zahlen-Regel (2a) macht die
   meisten dieser oberen, gleich-laufenden Ebenen ohnehin zu reinen
   Label-Zeilen, die nicht mehr Platz als eine Zeilenhoehe brauchen sollen. */
.res-timeline-location-label {
    border-bottom: 1px solid var(--pos-hairline);
    position: relative;
}

.res-timeline-location-label::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pos-canvas);
    z-index: 2;
    pointer-events: none;
}

.res-timeline-location-label > span:not(.res-timeline-occupancy) {
    display: inline-block;
    position: sticky;
    left: 0;
    min-width: 160px;
    box-sizing: border-box;
    padding: 6px 10px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--pos-text);
    background: var(--pos-canvas);
    cursor: pointer;
    z-index: 20;
}

/* Punkt 3: Outlet-Kopfzeile (Hierarchie Outlet -> Area -> Tisch), optisch wie
   das Area-Label, aber eine Stufe prominenter. Stufe C5: nur sichtbar, wenn
   der Fokus mehr als ein Outlet umfasst (sonst redundant zur globalen Fokus-
   Anzeige) - klickbar zum Ein-/Ausklappen.
   Punkt 1: die AEUSSERE Zeile ist bewusst NICHT sticky (siehe Kommentar im
   Markup/ResTimeline.razor) - sie liefert nur die volltonige, opake Flaeche
   ueber die volle Grid-Breite. Nachbesserung (Gruender-Feedback 26.07.2026):
   ohne eigene Positionierung+z-index waere die Flaeche zwar opak, aber als
   NICHT positioniertes Element gepainted unterhalb der Hourlines/Gridlines
   (z-index:1) - die Zeitstriche schlugen sichtbar durch (gleicher Mechanismus
   wie bei .res-timeline-bar unten). Nachbesserung (27.07.2026, siehe Kommentar
   bei .res-timeline-axis-row oben): die Positionierung+z-index sitzt jetzt auf
   einem ::before statt direkt auf dieser Zeile, sonst spannt DIESES Element
   einen Stacking-Context auf, der die z-index:20 des Kind-Spans einsperrt. */
.res-timeline-outlet-label {
    border-bottom: 1px solid var(--pos-hairline);
    position: relative;
}

.res-timeline-outlet-label::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pos-canvas);
    z-index: 2;
    pointer-events: none;
}

.res-timeline-outlet-label > span:not(.res-timeline-occupancy) {
    display: inline-block;
    position: sticky;
    left: 0;
    min-width: 160px;
    box-sizing: border-box;
    padding: 5px 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pos-text);
    background: var(--pos-canvas);
    cursor: pointer;
    z-index: 20;
}

/* Paket C.8: die geltende Bestuhlung neben dem Outlet-Namen - dezent im
   Normalfall, betont, sobald eine Veranstaltung statt der Standardbestuhlung
   gilt (Doc 25/AUFTRAG-BESTUHLUNG-IM-BETRIEB-CC.md). */
.res-timeline-bestuhlung {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--pos-muted);
    white-space: nowrap;
}

.res-timeline-bestuhlung-event {
    color: var(--pos-accent);
    font-weight: 700;
}

/* AUFTRAG-EVENT-EDITOR-UND-BELEGUNGSKONFLIKT-CC.md Paket E.1: der
   Belegungskonflikt darf nicht stillschweigend verschwinden - Muster der
   Konfliktleiste dieser Timeline. Der volle Klartext steht im title. */
.res-timeline-bestuhlung-konflikt {
    margin-left: 8px;
    padding: 0 6px;
    border-radius: var(--pos-radius-btn);
    background: var(--pos-accent);
    color: var(--pos-on-accent);
    font-weight: 700;
    cursor: help;
}

/* ============================================================
   AUFTRAG-TIMELINE-BESTUHLUNGSSCHNITT-CC.md Paket B: die Segment-Kopfzeile.
   Sie ist der SCHNITT - ab hier setzt die Timeline links neu an, mit dem
   Tischbestand dieser Bestuhlung. Deshalb bewusst kraeftiger als die Area-
   Zeile darunter: eine Oberkante, die den Block optisch abtrennt. Die
   ::before-Flaeche folgt dem Muster der uebrigen Kopfzeilen (opak ueber
   Stunden-/Zwischenraster, ohne einen Stacking-Context aufzuspannen, der den
   sticky Namen einsperrt - siehe Kommentar bei .res-timeline-outlet-label).
   ============================================================ */
.res-timeline-segment-label {
    position: relative;
}

.res-timeline-segment-label::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pos-canvas);
    z-index: 2;
    pointer-events: none;
}

/* Paket A (waagerecht): die Zaesur ist jetzt eine SENKRECHTE Kante am linken
   Rand des Blocks (.res-timeline-block-schnitt) statt einer waagerechten
   Linie ueber die Grid-Breite - der Wechsel geschieht ja nach rechts, nicht
   nach unten. Die Kopfzeile betont ihn nur noch in der Schrift. */
.res-timeline-segment-schnitt .res-timeline-segment-zeit {
    color: var(--pos-accent);
}

.res-timeline-segment-label > span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    position: sticky;
    left: 0;
    min-width: 160px;
    box-sizing: border-box;
    padding: 5px 10px;
    font-size: 0.78rem;
    background: var(--pos-canvas);
    white-space: nowrap;
    z-index: 20;
}

.res-timeline-segment-zeit {
    font-weight: 700;
    color: var(--pos-text);
}

/* In der Segment-Kopfzeile steht die Bestuhlung NEBEN der Uhrzeit, nicht wie
   frueher unter dem Outlet-Namen. */
.res-timeline-segment-label .res-timeline-bestuhlung {
    display: inline;
    font-size: 0.78rem;
}

/* AUFTRAG-RESERVIERUNG-KORREKTUREN-CC.md Paket A: kompakter Icon-Knopf in der
   sticky Segment-Kopfzeile - .pos-icon-btn ist dort mit seinem Standard-
   Padding zu gross, die Zeile ist bewusst schmal (min-width 160px). */
.res-timeline-tischplan-btn {
    background: transparent;
    border: none;
    color: var(--pos-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--pos-radius-btn);
    font-size: 0.85rem;
    line-height: 1;
}

.res-timeline-tischplan-btn:hover {
    background: var(--pos-mulde-bg);
    color: var(--pos-text);
}

.res-timeline-area-label {
    position: relative;
}

.res-timeline-area-label::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pos-canvas);
    z-index: 2;
    pointer-events: none;
}

.res-timeline-area-label > span:not(.res-timeline-occupancy) {
    display: inline-block;
    position: sticky;
    left: 0;
    min-width: 160px;
    box-sizing: border-box;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--pos-muted);
    background: var(--pos-canvas);
    z-index: 20;
}

/* Stufe C4 (AUFTRAG-RES-TIMELINE-GESAMT-CC.md): Belegungssumme (Summe
   anwesender Gaeste) im jeweiligen Zeitfenster einer Kopfzeile - NICHT
   sticky (im Gegensatz zum Namen), sitzt an der absoluten Zeit-Position wie
   die Hourlines/Gridlines darunter, wandert also mit beim Pan. Bewusst
   dezent (kein eigener Rahmen/Hintergrund), damit es den Namen nicht
   erschlaegt.
   Paket 2 (AUFTRAG-RES-TIMELINE-MEHRTISCH-CC.md) - Fund: die eigentliche
   Ursache des "spinnen herum"-Bugs war NICHT (nur) die Dichte, sondern eine
   CSS-Spezifitaets-Kollision - ".res-timeline-*-label > span" (Klasse+Typ,
   siehe oben) hat hoehere Spezifitaet als ".res-timeline-occupancy" (nur
   Klasse) und ueberschrieb position:absolute mit position:sticky; left:0,
   wodurch JEDE Belegungszahl an der linken Kante festklebte statt an ihrer
   Zeit-Position. Die drei ">span"-Regeln oben tragen jetzt
   ":not(.res-timeline-occupancy)", damit sie NUR den Namen treffen. */
.res-timeline-occupancy {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pos-muted);
    pointer-events: none;
    white-space: nowrap;
}

/* ============================================================
   AUFTRAG-RES-TIMELINE-WETTER-CC.md: das Himmelsband (WeatherBand.razor).
   Bewusst ANDERS als die reinen Kopfzeilen oben (Root/Location/Outlet/Area) -
   die wollen Stunden-/Zwischenraster UND Jetzt-Linie hinter ihrer opaken
   Beschriftung verstecken (::before-Trick), unser Band will sie laut
   Auftragstext ausdruecklich UNVERAENDERT DURCHLAUFEN lassen (wie bei den
   Tischzeilen) - daher kein ::before-Overlay, sondern dieselbe z-index-
   Leiter wie Balken/Klammer/Jetzt-Linie (siehe Kommentar bei
   .res-timeline-axis-row): Sky-Verlauf ohne eigenen z-index (unterste
   Scroll-Ebene, Stunden-/Rasterlinien schimmern absichtlich durch), Sonnen-
   Marken/Sparkline auf Balken-Ebene (2), Wetter-Marker auf Klammer-Ebene (3),
   das Jetzt-Wetter-Abzeichen ganz oben (5, wie die Belegungszahlen) - es
   SOLL auf der Jetzt-Linie sitzen und nicht von ihr zerschnitten wirken.

   AUFTRAG-TIMELINE-NACHBESSERUNG-CC.md Paket 1 - DIE ZEILE GEHOERT DEM
   WETTER ALLEIN:
   (1) Die frueher hier stehende sticky Beschriftungs-Spalte
       (.res-weather-row-label) ist ERSATZLOS entfallen. Sie war ein <span>
       mit display:flex, also ein Element auf Blockebene: min-width:160px
       begrenzte es nicht, es lief ueber die VOLLE Blockbreite, war opak
       (--pos-panel) und lag mit z-index:20 ueber allem. Gemessen am
       01.08.2026: 777/374/616 px breit bei 28/12/12 px Hoehe - es deckte die
       oberen 28 px der Wetterzeile im ersten Block zu und je 12 px in den
       beiden anderen. DAS war die dreimal gemeldete "das Wetter wird oben
       abgeschnitten"-Beobachtung, und weil die Hoehe am TEXT hing statt an
       der Zeile, waren es drei Bloecke mit drei verschiedenen Kanten. Der
       Name steht jetzt in .res-timeline-head-fokus darueber.
   (2) Die Hoehe kommt aus DER ZEILE, nicht aus ihrem Inhalt (die im Auftrag
       erlaubte zweite Richtung, und hier die richtige: die Marken haengen
       bewusst frei in der Flaeche, sie koennen sie nicht aufspannen).
       --res-weather-h ist die EINE Angabe; die obere Spur (Wettermarken) und
       die untere (Temperatur-Sparkline) RECHNEN daraus, statt eine zweite
       Zahl mitzupflegen. Zusammen mit (1) steht kein Element der Zeile mehr
       im normalen Fluss - ihre Hoehe kann sich strukturell nicht mehr je
       Block unterscheiden, und nichts kann ueber ihren Rand hinausragen. */
.res-weather-row {
    /* Die eine Hoehen-Angabe dieser Zeile. */
    --res-weather-h: 92px;
    --res-weather-pad: 6px;
    /* Obere Spur: die Wetter-Abzeichen. Untere Spur: die Sparkline und die
       beiden Sonnen-Uhrzeiten. Beides aus --res-weather-h gerechnet. */
    --res-weather-badge-h: calc(var(--res-weather-h) / 2 - var(--res-weather-pad));
    --res-weather-spark-h: calc(var(--res-weather-h) / 2 - 2 * var(--res-weather-pad));

    position: relative;
    height: var(--res-weather-h);
    background: var(--pos-panel);
    border-bottom: 1px solid var(--pos-hairline);
}

/* AUFTRAG-TIMELINE-WAAGERECHT-CC.md Paket A: das Band stueckelt blockweise.
   Verlauf und Sparkline bleiben in voller Tagesbreite und werden hier nur
   verschoben und BESCHNITTEN - so bleiben die Farbstuetzstellen exakt an
   ihrer Uhrzeit, statt am Blockrand neu interpoliert zu werden. Marker und
   Sonnenmarken liegen bewusst AUSSERHALB dieses Ausschnitts (ihre Tooltips
   duerfen nach oben/unten heraushaengen) und werden stattdessen in C# auf
   den Block gefiltert. */
.res-weather-clip {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.res-weather-sky {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.res-weather-sun-mark {
    position: absolute;
    top: var(--res-weather-pad);
    bottom: var(--res-weather-pad);
    width: 1px;
    background: rgba(255, 255, 255, .55);
    z-index: 2;
    pointer-events: none;
}

/* AUFTRAG-TIMELINE-NACHBESSERUNG-CC.md Paket 5 (Bild 12:48): der Gruender
   konnte die Uhrzeit des Sonnenaufgangs nicht lesen. Sie lag oben unter der
   Beschriftungs-Flaeche (siehe Kommentar bei .res-weather-row) - und haette
   nach deren Wegfall genauso gut unter einem Wetter-Abzeichen liegen koennen,
   denn die stehen alle in der OBEREN Spur. Deshalb stehen jetzt BEIDE
   Sonnen-Uhrzeiten in der unteren Spur, wo sie kein Abzeichen kreuzen kann
   (dort liegt nur die Sparkline, ueber die der Untergang schon bisher gut
   lesbar stand). Der Aufgang beschriftet nach rechts, der Untergang nach
   links - beide zeigen damit in den Tag hinein. */
.res-weather-sun-mark span {
    position: absolute;
    bottom: -2px;
    left: 4px;
    white-space: nowrap;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.res-weather-sun-mark-set span {
    left: unset;
    right: 4px;
}

.res-weather-sparkline {
    position: absolute;
    bottom: var(--res-weather-pad);
    height: var(--res-weather-spark-h);
    z-index: 2;
    opacity: .8;
    pointer-events: none;
}

/* Wetter-Marker: schwebendes Abzeichen (frosted badge) - funktioniert
   unabhaengig davon, wo auf dem Sky-Verlauf (dunkle Nacht bis heller Tag)
   der Marker gerade sitzt, weil er seinen eigenen, immer gleich lesbaren
   Untergrund mitbringt statt sich auf Kontrast zum Hintergrund zu verlassen. */
.res-weather-marker {
    position: absolute;
    /* Paket 1: obere Spur, Hoehe aus der Zeile gerechnet - das Abzeichen kann
       sie damit weder aufspannen noch ueberragen. Das Icon behaelt seine
       natuerliche Groesse und wird darin zentriert. */
    top: var(--res-weather-pad);
    height: var(--res-weather-badge-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px 2px 3px;
    border-radius: 10px;
    background: rgba(15, 17, 23, .58);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    z-index: 3;
    white-space: nowrap;
}

.res-weather-marker-storm {
    background: rgba(228, 87, 46, .38);
    border-color: var(--pos-accent);
}

.res-weather-icon-svg {
    width: 28px;
    height: 30px;
    display: block;
}

.res-weather-marker-temp {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.res-weather-marker-rain,
.res-weather-marker-wind {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #eaf3fc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.res-weather-drop-svg {
    width: 9px;
    height: 10px;
    display: block;
}

/* Hover-Tooltip: reines CSS-Popover wie .res-timeline-bar-tag-popover
   (:hover + naechstes Element ginge hier nicht, da Kind statt Geschwister -
   overflow ist am Marker selbst nicht beschraenkt, also einfacher als
   verstecktes Kind mit :hover-Sichtbarkeit). */
.res-weather-marker-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 160px;
    padding: 6px 10px;
    border-radius: var(--pos-radius-sheet);
    background: var(--pos-panel);
    border: 1px solid var(--pos-hairline);
    box-shadow: var(--pos-shadow-rest);
    color: var(--pos-text);
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: nowrap;
    z-index: 27;
}

.res-weather-marker-tooltip-time {
    font-weight: 700;
    margin-bottom: 2px;
}

.res-weather-marker:hover .res-weather-marker-tooltip {
    display: block;
}

/* Jetzt-Wetter (Doc 24 §8: "auf einen Blick") - deutlich prominenter als
   die normalen Marker, sitzt bewusst auf der Jetzt-Linie statt von ihr
   verdeckt zu werden (z:5, wie die Belegungszahlen - die oberste Ebene der
   scrollenden Inhalte). */
.res-weather-now {
    position: absolute;
    /* Paket 1: wie die uebrigen Marken an die Zeilenhoehe gebunden - es kann
       sie nicht ueberragen. */
    top: var(--res-weather-pad);
    max-height: calc(var(--res-weather-h) - 2 * var(--res-weather-pad));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: 12px;
    background: var(--pos-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    z-index: 5;
    pointer-events: none;
}

.res-weather-now .res-weather-icon-svg {
    width: 28px;
    height: 30px;
}

.res-weather-now-temp {
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
}

/* AUFTRAG-AKTE-MEGA-NACHBESSERUNG-CC.md Punkt 1: die Zeilen (Tischspalte +
   Zeitstrahl-Spur) hatten keinen eigenen Untergrund und fielen auf
   --pos-canvas zurueck (im Dark Mode nahezu schwarz) - dadurch wirkte die
   ganze Timeline "stockduster" statt wie eine Flaeche im Kassen-Look
   (--pos-panel, wie .pos-kitchen-column). Jetzt hebt sich jede Zeile als
   eigene Flaeche vom Canvas-Grund ab, Hairlines trennen sie sichtbar. */
/* Nachbesserung (Gruender-Feedback 26.07.2026): Zeile deutlich kompakter
   (52px -> 32px min-height), damit mehr Tische auf einmal sichtbar sind -
   Zeilen mit Server-Chips (zweite Zeile im Tischspalten-Inhalt) wachsen
   automatisch ueber min-height hinaus, alle anderen bleiben knapp. */
.res-timeline-row {
    display: flex;
    background: var(--pos-panel);
    border-bottom: 1px solid var(--pos-hairline);
    min-height: 32px;
}

/* Punkt 6: Zebra - zweiter, leicht abgesetzter Ton (--pos-surface, heller als
   --pos-panel in beiden Themes). Tischspalte und Lane bekommen denselben Ton
   explizit mit (siehe deren Regeln unten), sonst reisst die Farbe an der
   sticky-Kante der Tischspalte. */
.res-timeline-row-alt {
    background: var(--pos-surface);
}

/* Punkt 8.1: Hover-Highlight ueber dem Zebra - box-shadow (nicht background)
   damit es sich als Tint UEBER die jeweilige Zebra-Grundfarbe legt statt sie
   zu ersetzen (funktioniert dadurch identisch auf beiden Zebra-Toenen und in
   Light/Dark, da --pos-mulde-bg selbst schon die noetige Transparenz hat). */
.res-timeline-row:hover,
.res-timeline-row:hover .res-timeline-tablecol,
.res-timeline-row:hover .res-timeline-lane {
    box-shadow: inset 0 0 0 999px var(--pos-mulde-bg);
}

/* Nachbesserung (Gruender-Feedback 26.07.2026): Name+Kapazitaet nebeneinander
   statt untereinander (row statt column), Padding reduziert. flex-wrap:wrap
   laesst die Server-Chips (falls vorhanden) automatisch in eine zweite Zeile
   umbrechen, statt dafuer extra Markup zu brauchen - dadurch bleiben Zeilen
   OHNE zugewiesene Server (der Regelfall) so kompakt wie moeglich, waehrend
   Zeilen MIT Chips automatisch etwas hoeher werden (min-height auf der Row
   ist nur die Untergrenze). align-content:center zentriert den (ein- oder
   zweizeiligen) Inhaltsblock vertikal in der von der Row gestreckten Hoehe. */
.res-timeline-tablecol {
    flex: none;
    position: sticky;
    left: 0;
    z-index: 20;
    background: var(--pos-panel);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 1px;
    padding: 3px 10px;
    border-right: 1px solid var(--pos-hairline);
}

.res-timeline-tablecol.res-timeline-row-alt {
    background: var(--pos-surface);
}

/* Punkt 2: warmer Akzentton statt der geerbten Standard-Textfarbe, die auf
   dem dunklen Zeilen-Panel kaum lesbar war - auf beiden Zebra-Toenen UND in
   Light/Dark ausreichend Kontrast (--pos-accent ist je Theme bereits darauf
   abgestimmt, vgl. .pos-btn-primary/.res-timeline-grid-menu-active). */
.res-timeline-tablename {
    font-weight: 700;
    color: var(--pos-accent);
}

.res-timeline-tableseats {
    font-size: 0.75rem;
    color: var(--pos-muted);
}

.res-timeline-server-chips {
    display: flex;
    gap: 4px;
}

.res-timeline-chip {
    font-size: 0.65rem;
    color: #fff;
    border-radius: 999px;
    padding: 1px 6px;
}

.res-timeline-lane {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
}

.res-timeline-lane.res-timeline-row-alt {
    background: var(--pos-surface);
}

/* Punkt 8 (Nachbesserung Gruender-Feedback 26.07.2026): der Tischname-Hinweis
   ist jetzt EIN geteiltes, dem Mauszeiger folgendes Badge statt einer
   sticky-Position pro Zeile - attachLaneHoverHint (res-timeline-gestures.js)
   haengt es per Pointermove ca. 20px versetzt an die Cursor-Position
   (position:fixed mit clientX/clientY-Koordinaten, dadurch unabhaengig vom
   Scroll-Zustand und garantiert im Blickfeld). Sichtbarkeit/Text steuert JS
   direkt ueber display/textContent - kein :hover-CSS mehr noetig, da es kein
   Element pro Zeile ist. */
.res-timeline-lane-hint {
    position: fixed;
    display: none;
    padding: 2px 8px;
    border-radius: var(--pos-radius-btn);
    background: var(--pos-panel);
    color: var(--pos-accent);
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: var(--pos-shadow-rest);
    pointer-events: none;
    white-space: nowrap;
    z-index: 40;
}

/* AUFTRAG-RES-SLOTEVENT-BUCHBARKEIT-CC.md Stufe E: Buchbarkeits-Fenster
   je Tisch-Lane (ueber dessen Outlet aufgeloest, ResTimeline.
   outletWindowLayouts). Dezent - z-index BEWUSST unter Hourlines/Gridlines
   (1) UND unter Balken (2) gehalten, nur die Lane-HINTERGRUNDFLAECHE wird
   gedaempft ("der Lane-Hintergrund wird ausserhalb der Fenster gedaempft",
   Auftragstext) - Zeitraster und Reservierungen bleiben unveraendert voll
   lesbar oben drauf. Kein explizites z-index (auto) reicht: als positioniertes
   Element malt es ohnehin ueber den normalen Zeilen-Hintergrund, aber unter
   allem mit explizitem z-index>=1. */
/* Gruender-Anordnung 01.08.2026 (Hell/Dunkel im Vergleich): "Bei Hell sind die
   nicht buchbaren Bereiche ohne Raster - uebertrag das auf Dunkel."
   Die Verdunkelung ist eine FLAECHE, kein Schleier: wo nichts stattfinden
   kann, gehoert auch keine Zeiteinteilung hin. Dafuer braucht es ZWEIERLEI,
   und der erste Anlauf hatte nur das eine:
   (1) z-index:1 - dieselbe Sprosse wie das Raster; sie gewinnt ueber die
       DOM-Reihenfolge (die Linien leben im Block, die Verdunkelung in der
       spaeteren Lane). Die Sprossen darueber bleiben unberuehrt: ein Balken (2)
       liegt weiterhin oben, eine Reservierung ausserhalb der Buchbarkeit
       verschwindet also NICHT.
   (2) DECKEND statt durchsichtig - siehe unten. Ohne das bleibt (1) wirkungslos,
       weil eine durchsichtige Flaeche nichts verdeckt. */
.res-timeline-lane-dim {
    position: absolute;
    top: 0;
    bottom: 0;
    /* DECKEND, nicht durchsichtig - das ist der Kern. Ein z-index allein
       genuegte nicht: eine durchsichtige Flaeche liegt zwar oben, das Raster
       scheint aber weiter hindurch (32% in Dunkel, 10% in Hell). Wie stark man
       die Linien dann sieht, haengt an Theme UND Zoomstufe - bei engem Fenster
       ruecken sie zusammen und lesen sich als Schraffur.
       Der Farbwert ist derselbe wie vorher, nur ausgerechnet statt gemischt:
       Panel + 32% Schwarz. Die Ansicht sieht also aus wie bisher, nur ohne
       das durchscheinende Raster. */
    background: color-mix(in srgb, #000 32%, var(--pos-panel));
    z-index: 1;
    pointer-events: none;
}

.pos-shell[data-theme="light"] .res-timeline-lane-dim {
    /* Ebenfalls deckend, derselbe Ton wie zuvor: Panel + 10% Aubergine. */
    background: color-mix(in srgb, #3B2C35 10%, var(--pos-panel));
}

/* Feine Unterteilung fuer die einzelnen Slots eines FixedSlotEvent -
   dezenter als die Fenster-Rahmen (Auftragstext: "Slot-Grenzen als dezente
   Unterteilungen andeuten"). Gleiche Ebene wie das Zwischenraster. */
.res-timeline-window-slot-tick {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--pos-hairline);
    opacity: .7;
    z-index: 1;
    pointer-events: none;
}

/* Anfangs-/Endstrich je Fenster, in dessen eigener Farbe (background statt
   border, damit ColorHex direkt als Flaechenfarbe wirkt). */
.res-timeline-window-border {
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 2px;
    z-index: 2;
    pointer-events: none;
}

/* AUFTRAG-DIALOG-FOLGT-DER-UHRZEIT-CC.md Paket 2: die Endmarke steht LINKS
   ihres Zeitpunkts, die Anfangsmarke rechts davon - beide liegen damit INNEN,
   in dem Abschnitt, den sie begrenzen. Ohne das ragte eine Endmarke auf der
   Blockgrenze mit ihren 2px in die Tischspalte des Folgeblocks (die Lane
   schneidet nicht ab) und behauptete dort etwas, das dort nicht gilt. */
.res-timeline-window-border-ende {
    transform: translateX(-100%);
}

/* Etikett am Anfangsstrich - nur auf der jeweils ERSTEN Tischzeile eines
   BLOCKS (ResTimeline.BuildColumns, ShowSlotNodeLabel), sonst zu unruhig.
   Einheit korrigiert in AUFTRAG-DIALOG-FOLGT-DER-UHRZEIT-CC.md Paket 3: vorher
   „je Outlet", wodurch nur der erste Block ein Etikett trug. */
.res-timeline-window-label {
    position: absolute;
    top: 2px;
    padding: 1px 6px;
    border-radius: 0 var(--pos-radius-btn) var(--pos-radius-btn) 0;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    z-index: 3;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

/* Nachbesserung (Gruender-Feedback 26.07.2026): z-index:2 ergaenzt - der
   Balken lag vorher auf derselben (nicht positionierten) Stacking-Ebene wie
   normaler Flow-Inhalt, waehrend Hourlines/Gridlines z-index:1 tragen und
   dadurch ueber ihn hinweg gemalt wurden (die Zeitstriche unterbrachen das
   Tomatenrot sichtbar). top/bottom von 6px auf 3px verkleinert, passend zur
   kompakteren Zeilenhoehe (32px statt 52px). */
.res-timeline-bar {
    position: absolute;
    top: 3px;
    bottom: 3px;
    z-index: 2;
    border-radius: var(--pos-radius-tile);
    color: #fff;
    padding: 4px 8px;
    font-size: 0.78rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: var(--pos-shadow-rest);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* AUFTRAG-TIMELINE-BESTUHLUNGSSCHNITT-CC.md Paket B: eine Reservierung, die
   ueber den Bestuhlungswechsel hinausreicht, steht in BEIDEN Bloecken und wird
   dort an der Segmentgrenze gekappt. Die gekappte Kante wird als solche
   gezeigt (gerade Kante statt Radius + heller Anriss), damit ein Balkenrest
   nicht wie ein kuerzerer Aufenthalt aussieht. Der Klartext steht im title. */
.res-timeline-bar-cut-start {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 3px dotted rgba(255, 255, 255, 0.85);
}

.res-timeline-bar-cut-end {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 3px dotted rgba(255, 255, 255, 0.85);
}

/* ============================================================
   AUFTRAG-BALKEN-ZIEHEN-CC.md Paket A und C: DIE GREIFZONEN.

   Der Gruender: „Ich platziere die Maus am Anfang oder am Ende der
   Reservierung, dann kommt ein Doppelpfeil, und dann kann ich es laenger oder
   kuerzer ziehen."

   Die Zone ist ein eigenes Element und keine Pixelrechnung in JS - dadurch
   liegt ihre Breite an EINER Stelle (hier), der Zeigerwechsel kommt vom
   Browser statt aus einem pointermove-Rueckruf, und die Verbreiterung fuer den
   Finger ist eine Media Query statt einer zweiten Schwelle im Code.

   max-width haelt die Mitte frei: Ein schmaler Balken (20px Mindestbreite,
   siehe BarGeometry) darf nicht vollstaendig aus Raendern bestehen, sonst
   liesse er sich nicht mehr verschieben und nicht mehr anklicken. Ein Drittel
   je Seite laesst immer ein Drittel Mitte uebrig.
   ============================================================ */
.res-timeline-bar-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    max-width: 33%;
    z-index: 3;
    cursor: ew-resize;
}

.res-timeline-bar-handle-start {
    left: 0;
}

.res-timeline-bar-handle-end {
    right: 0;
}

/* Gesperrte Sorte (feste Slots, ganze Veranstaltung): „Bei den gesperrten
   Sorten erscheint KEIN Doppelpfeil, und der Rand nimmt keinen Griff an." Die
   Zone bleibt trotzdem da - sie faengt den Versuch ab und beantwortet ihn
   (OnBarResizeBlocked), statt ihn ins Leere laufen zu lassen. */
.res-timeline-bar-handle-locked {
    cursor: pointer;
}

/* Paket C: DAS GRIFFZEICHEN. Am Tablet gibt es keinen Zeiger, der sich
   verwandelt - dort ist dieser Strich das einzige Angebot. Er erscheint, sobald
   der Balken ausgewaehlt ist (Detail-Fenster offen), am Zeigergeraet zusaetzlich
   beim Ueberfahren. Nicht dauerhaft sichtbar: Zwei Striche an jedem Balken
   waeren aus zwei Metern ein weiteres Zeichen im Bild, und das Vokabular der
   Balken ist mit Noppen, Schloss, Umrandung und Ampel besetzt. */
.res-timeline-bar-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 60%;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 2px rgba(59, 44, 53, 0.9);
    opacity: 0;
    transition: opacity 120ms ease;
}

.res-timeline-bar:hover > .res-timeline-bar-handle::after,
.res-timeline-bar-selected > .res-timeline-bar-handle::after {
    opacity: 1;
}

/* Was gesperrt ist, bietet auch kein Griffzeichen an - sonst verspraeche das
   Bild eine Geste, die es nicht gibt. */
.res-timeline-bar-handle-locked::after {
    display: none;
}

@media (pointer: coarse) {
    /* Fingerbreite statt Zeigerbreite. Gemessen 22 x 21 px, also rund
       6 x 5,5 mm - unter der 9-mm-Faustregel fuer freistehende Ziele, aber die
       Zone ist kein freistehendes Ziel: Sie sitzt am Rand eines Balkens, den
       der Finger ohnehin trifft, und darf die Mitte nicht auffressen. Hoeher
       geht nicht, ohne die Zeilenhoehe der Timeline anzufassen - und die
       gehoert dem Ueberblick, nicht der Geste. */
    .res-timeline-bar-handle {
        width: 22px;
        max-width: 40%;
    }

    .res-timeline-bar-selected > .res-timeline-bar-handle::after {
        width: 4px;
        height: 70%;
    }
}

/* Waehrend an der Kante gezogen wird - wie .res-timeline-bar-dragging, aber mit
   dem Doppelpfeil statt der geschlossenen Hand: Es wird gedehnt, nicht
   getragen. */
.res-timeline-bar-resizing {
    z-index: 3;
    cursor: ew-resize;
    box-shadow: var(--pos-shadow-lift);
    opacity: .9;
}

/* „Waehrend des Ziehens sichtbar: die neue Zeit." Sie haengt ueber der
   gezogenen Kante, nicht am Zeiger: Sie beschriftet die KANTE, und bei
   schnellem Ziehen laeuft der Zeiger ihr voraus. position:fixed, weil JS in
   Viewport-Koordinaten rechnet (unabhaengig vom Scroll-Zustand) - das Element
   muss trotzdem Nachfahre von .pos-shell bleiben, sonst loesen die
   --pos-*-Tokens ins Leere auf (dieselbe Falle wie beim Tischnamen-Hinweis). */
.res-timeline-resize-label {
    position: fixed;
    display: none;
    transform: translate(-50%, -115%);
    padding: 2px 8px;
    border-radius: var(--pos-radius-btn);
    background: var(--pos-panel);
    color: var(--pos-accent);
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: var(--pos-shadow-rest);
    pointer-events: none;
    white-space: nowrap;
    z-index: 45;
}

/* ============================================================
   AUFTRAG-TISCHZUTEILUNG-CC.md Paket D (E-90): VORSCHLAG GEGEN ZUSAGE.

   „Der Unterschied muss auf einen Blick erkennbar sein, aus zwei Metern
   Entfernung." Deshalb wirken hier DREI Merkmale zusammen statt eines: der
   gestrichelte Rahmen (die Form), die Schraffur (die Flaeche) und beim
   Fixierten das Schloss (das Zeichen). Ein einzelnes davon - etwa nur eine
   andere Deckkraft - waere aus zwei Metern eine Nuance, keine Aussage.

   Die Schraffur liegt in ::before, nicht im background: Die Statusfarbe des
   Balkens kommt als Inline-Stil vom Server (EffectiveColorHex) und wuerde
   jedes background-image aus dem Stylesheet ueberschreiben.
   ============================================================ */
.res-timeline-bar-proposed {
    /* border-box, sonst waechst der Balken um die Rahmenstaerke und stimmt
       nicht mehr mit der Zeit ueberein, die er darstellt. */
    box-sizing: border-box;
    border: 2px dashed rgba(255, 255, 255, 0.95);
    padding: 2px 6px;
}

.res-timeline-bar-proposed::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(135deg,
        rgba(255, 255, 255, 0.18) 0 6px,
        rgba(255, 255, 255, 0) 6px 12px);
}

/* ============================================================
   AUFTRAG-ZUTEILUNG-HERKUNFT-CC.md Paket C (E-189): DIE DRITTE DARSTELLUNG.

   Drei Zustaende, vom Gruender festgelegt (05.08.2026), und sie muessen sich
   AUS ZWEI METERN ohne Legende unterscheiden:

     Systemvorschlag  Noppen-Rand (gestrichelt + Schraffur), wie gebaut
     Empfehlung       durchgehend grau, glatte Kanten, KEIN Schloss
     Zusage           glatte Kanten MIT farbigem Schloss

   Die Ordnung dahinter ist absichtlich zweistufig: Noppen gegen glatt ist eine
   KANTENFORM (auf Entfernung als erstes erkennbar), glatt gegen Schloss ein
   ZUSAETZLICHES ZEICHEN. Wer den Plan ueberfliegt, sieht damit zuerst, was noch
   wandern kann - und erst beim zweiten Hinsehen, was davon fest ist.
   ============================================================ */
.res-timeline-bar-recommended {
    /* border-box aus demselben Grund wie oben: Der Balken darf um seinen
       Rahmen nicht wachsen, sonst stimmt er nicht mehr mit der Zeit ueberein. */
    box-sizing: border-box;
    /* Durchgehend grau: ruhig genug, um nicht mit der Statusfarbe zu streiten,
       und deutlich genug, um die glatte Kante als Aussage zu lesen. Grau ist
       hier bewusst KEINE CI-Farbe - die Empfehlung ist eine Zwischenstufe, kein
       Signal. */
    border: 2px solid rgba(120, 120, 120, 0.95);
    padding: 2px 6px;
    /* Und ausdruecklich KEINE Schraffur - die gehoert dem Systemvorschlag. */
}

/* Die Zusage bleibt durchgezogen (die Grundform des Balkens) und traegt das
   Schloss - klein, aber eindeutig; der volle Satz steht im title (Regel 5).

   E-189: Das Schloss war weiss und ging im Balken unter. Es ist das EINZIGE
   Zeichen dafuer, dass hier eine Zusage steht, die niemand mehr bewegt - also
   bekommt es Honig (#F2B33D, Doc 20 „Warnung, Hinweis"). Tomate waere die
   Leitfarbe des Hauses und damit ueberall; Honig ist im Arbeits-UI selten,
   traegt auf jeder Statusfarbe des Balkens und schreit trotzdem nicht. Der
   dunkle Schattenriss haelt es auch auf hellen Balken lesbar. */
.res-timeline-bar-fixed-icon {
    font-size: 0.7rem;
    color: var(--pos-warn-on-color, #F2B33D);
    text-shadow: 0 0 2px rgba(59, 44, 53, 0.9);
    opacity: 1;
    flex: none;
}

/* ============================================================
   AUFTRAG-ANKUNFT-UND-AMPEL-CC.md Paket B (E-191): DIE UMRANDUNG.

   Zwei Zeichen, zwei Aussagen, und sie ersetzen einander nie:
     Schloss    „So war es gewuenscht."  - jemand hat zugesagt (E-90)
     Umrandung  „So ist es jetzt."       - der Gast sitzt

   Deshalb bekommt die Ankunft ausdruecklich NICHT das Schloss: Ein zugesagter
   Tisch, an dem niemand sitzt, und ein spontan belegter Tisch sind zwei
   verschiedene Dinge, und beide kommen vor.

   Die Farbe ist MINZE (Doc 20 Kap. 4, „Funktional: Erfolg, Frische") - und
   zwar aus einem harten Grund: Im selben Balken kann die Ampel erscheinen, und
   die faengt bei Honig an und geht ins Rote. Eine Ankunftsfarbe aus derselben
   Familie waere im Halbdunkel eines Abendbetriebs von einer Warnung nicht zu
   unterscheiden. Minze ist die einzige CI-Farbe, die weder Ampel noch
   Leitfarbe belegt.

   Der Ring liegt in box-shadow, nicht in border: Den Rahmen belegen bereits
   die Kantenformen der Zuteilung (Noppen / glatt-grau), und die beiden
   Aussagen sollen NEBENEINANDER stehen, nicht uebereinander.
   ============================================================ */
.res-timeline-bar-arrived {
    box-shadow: 0 0 0 3px #17A398, var(--pos-shadow-rest);
}

/* Die VERMUTETE Ankunft: dieselbe Familie, erkennbar schwaecher - duenner und
   halb durchsichtig. Sie sagt „vermutlich", und genau so sieht sie aus. Ein
   eigener Farbton waere ein viertes Vokabel gewesen; eine schwaechere Fassung
   derselben Farbe liest man ohne Legende. */
.res-timeline-bar-arrived-presumed {
    box-shadow: 0 0 0 2px rgba(23, 163, 152, 0.5), var(--pos-shadow-rest);
}

/* ============================================================
   Paket C: DIE AMPEL IM BALKEN.

   „Die Dauer ablesbar - der Restaurantleiter will die Zahl", nicht nur einen
   Farbfleck. Farbe und Puls kommen aus der Stufe (Inline-Stil, weil sie je
   Erloeseinheit konfigurierbar sind); der TON bleibt an Kassen- und
   Kuechenschirm: Wer den Abend plant, soll sehen, dass etwas wartet, ohne dass
   ihm der Bildschirm zuschreit.
   ============================================================ */
.res-timeline-bar-ampel {
    flex: none;
    border-radius: 999px;
    padding: 0 5px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #241A20;
    white-space: nowrap;
}

.res-timeline-bar-ampel-puls {
    animation-name: res-ampel-puls;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes res-ampel-puls {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* ============================================================
   Paket D: DER PROGNOSE-UEBERHANG.

   Er haengt als eigenes Element hinter dem Balken - der Balken selbst zeigt
   weiter GENAU die gebuchte Zeit. Gestrichelt, weil das in dieser Timeline
   ohnehin schon „noch nicht fest" heisst: Er ist eine Erwartung, keine
   Buchung.
   ============================================================ */
.res-timeline-bar-prognose {
    position: absolute;
    top: 6px;
    bottom: 6px;
    box-sizing: border-box;
    border: 2px dashed var(--pos-faint);
    border-left: none;
    border-radius: 0 6px 6px 0;
    pointer-events: none;
    /* ÜBER den Balken, und das ist der ganze Punkt: Der Fall, auf den es
       ankommt, ist der, in dem die Prognose in die FOLGEBUCHUNG hineinreicht -
       und genau dort laege sie sonst unter deren Balken und waere unsichtbar.
       Sie ist nur ein gestrichelter Umriss ohne Fuellung; darunter bleibt
       lesbar, wem der Platz gehoert. pointer-events: none, damit sie den
       Nachbarbalken nicht anklickbar macht. */
    z-index: 3;
}

/* Reicht die Prognose in eine Folgebuchung DESSELBEN Tisches, ist das die
   wichtigste Information des Abends - dort steht in einer Stunde jemand vor
   einem besetzten Tisch. Sichtbar gemacht, nicht aufgeloest. */
.res-timeline-bar-prognose-konflikt {
    border-color: var(--pos-danger);
    background: var(--pos-danger-bg);
}

/* ============================================================
   Paket E: DIE LEGENDE.

   Bewusst KEIN eigenes Balken-Aussehen hier - der Musterbalken traegt
   dieselben Klassen wie der echte, aus derselben Datei. Was hier steht, ist
   nur die Buehne: Groesse, Lage, Abstand.
   ============================================================ */
.res-legende-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
}

.res-legende {
    background: var(--pos-panel);
    color: var(--pos-text);
    border-radius: var(--pos-radius-sheet);
    box-shadow: var(--pos-shadow-lift);
    width: min(600px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}

.res-legende-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--pos-hairline);
}

.res-legende-liste {
    overflow-y: auto;
    padding: 6px 14px;
}

.res-legende-zeile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--pos-hairline);
}

.res-legende-zeile:last-child {
    border-bottom: none;
}

/* Der Musterbalken braucht eine feste Buehne: In der Timeline liegt er
   absolut in seiner Tischzeile, hier gibt es keine. */
.res-legende-muster {
    position: relative;
    flex: none;
    width: 156px;
    height: 26px;
}

.res-legende-balken {
    position: absolute;
    left: 0;
    top: 0;
    width: 112px;
    height: 26px;
}

.res-legende-prognose {
    left: 112px;
    width: 38px;
    top: 3px;
    bottom: 3px;
}

.res-legende-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.82rem;
}

.res-legende-text span {
    color: var(--pos-muted);
}

.res-legende-fuss {
    padding: 10px 14px;
    border-top: 1px solid var(--pos-hairline);
    font-size: 0.78rem;
    color: var(--pos-muted);
}

/* Die Ankunfts-Auskunft im Detail-Fenster - dieselbe Form wie Zusage und
   Empfehlung darueber, damit die drei Zeilen als eine Familie lesbar sind. */
.res-detail-arrival {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--pos-go);
}

.res-detail-arrival-presumed {
    color: var(--pos-muted);
}

.res-detail-prognose-konflikt {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pos-danger);
}

/* „Wenn der Zuteiler umraeumt, sieht das Personal es - eine ruhige, kurze
   Hervorhebung, keine Meldungsflut." Zwei Pulse, dann ist Ruhe; die Klasse
   nimmt die Timeline nach acht Sekunden ohnehin wieder weg. */
.res-timeline-bar-moved {
    animation: res-bar-moved 1.6s ease-out 2;
}

@keyframes res-bar-moved {
    0%   { box-shadow: 0 0 0 0 var(--pos-accent); }
    60%  { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0); }
    100% { box-shadow: var(--pos-shadow-rest); }
}

@media (prefers-reduced-motion: reduce) {
    .res-timeline-bar-moved {
        animation: none;
        outline: 2px solid var(--pos-accent);
    }
}

/* ============================================================
   Die ANNAHMEZEILE (Paket D): der Ort, an dem eine Buchung entsteht, ohne
   dass jemand einen Tisch waehlt. Sie sieht bewusst NICHT wie eine
   Tischzeile aus - sie traegt keine Balken und soll auch nicht so wirken,
   als koennte sie welche tragen.
   ============================================================ */
.res-timeline-intake-row {
    min-height: 28px;
    background: var(--pos-canvas);
    border-bottom: 1px dashed var(--pos-hairline);
}

.res-timeline-intake-col {
    background: var(--pos-canvas);
    color: var(--pos-muted);
    gap: 6px;
}

.res-timeline-intake-icon {
    color: var(--pos-accent);
    font-size: 0.8rem;
}

.res-timeline-intake-name {
    font-weight: 700;
    color: var(--pos-accent);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.res-timeline-intake-lane {
    background: var(--pos-canvas);
    cursor: cell;
}

.res-timeline-intake-hint {
    position: sticky;
    left: 12px;
    font-size: 0.72rem;
    color: var(--pos-muted);
    font-style: italic;
    pointer-events: none;
}

/* Der Regelfall-Hinweis im Anlage-Dialog: „kein Tisch" ist eine Entscheidung,
   kein vergessener Schritt. */
.res-panel-intake-hint {
    margin: 6px 0 0;
    padding: 6px 10px;
    border-left: 3px solid var(--pos-accent);
    background: var(--pos-mulde-bg);
    border-radius: var(--pos-radius-tile);
    font-size: 0.8rem;
    color: var(--pos-muted);
}

/* Die Zusage-Auskunft im Detail-Fenster (Regel 5). */
.res-detail-promise {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.82rem;
}

.res-detail-proposal {
    font-size: 0.82rem;
    color: var(--pos-muted);
    font-style: italic;
}

/* E-189: die Empfehlungs-Auskunft - dieselbe Zeile wie die Zusage, nur mit dem
   schwaecheren Wort. Grau statt Honig: Sie ist eine Angabe, kein Signal. */
.res-detail-recommendation {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--pos-muted);
}

/* Stufe A2: visuelles Feedback waehrend ein Balken per Ziehen verschoben wird
   (attachLaneDrag, res-timeline-gestures.js setzt/entfernt die Klasse waehrend
   pointermove/-up/-cancel). z-index ueber den anderen Balken der Zeile,
   grabbing-Cursor statt des Standard-pointer. */
.res-timeline-bar-dragging {
    z-index: 3;
    cursor: grabbing;
    /* Paket 4: eigener Token fuer "in der Hand" - siehe pos-theme.css. */
    box-shadow: var(--pos-shadow-lift);
    opacity: .9;
}

.res-bar-announced {
    opacity: 0.65;
}

.res-bar-seated {
    opacity: 1;
}

.res-bar-waiting {
    animation: res-pulse 1.6s ease-in-out infinite;
}

.res-bar-cancelled {
    opacity: 0.35;
    text-decoration: line-through;
}

/* Paket 4: der Pulsring trug die Tomate als Hexwert - im Hellmodus laeuft der
   Akzent aber auf die abgedunkelte Stufe (#C4451F). Ueber color-mix aus dem
   Token gemischt (Hausmuster, s. ci-bridge.css) geht er jetzt mit. */
@keyframes res-pulse {
    0%, 100% { box-shadow: var(--pos-shadow-rest); }
    50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos-accent) 35%, transparent); }
}

.res-timeline-bar-party {
    font-weight: 700;
}

/* Paket 3d (AUFTRAG-RES-TIMELINE-MEHRTISCH-CC.md): gepinnte Personenzahl
   (ReservationXPosTable.Seats gesetzt) optisch von automatisch verteilten
   Werten absetzen - kleiner Punkt vorneweg statt eines Icon-Fonts. Konflikt
   (Σ Tische != Party, z. B. Ueberpinnen) signalisiert rot, sowohl an der
   Zahl als auch als dezenter Rand am ganzen Balken. */
.res-timeline-bar-party-pinned::before {
    content: "•";
    margin-right: 2px;
}

/* Paket 4: beide sitzen AUF dem Balken, also auf der Farbe des Gastes - dort
   entscheidet nicht das Theme, sondern der bunte Untergrund. Deshalb der
   konstante --pos-danger-on-color und nicht --pos-danger. */
.res-timeline-bar-party-conflict {
    color: var(--pos-danger-on-color);
}

.res-timeline-bar-conflict {
    outline: 2px solid var(--pos-danger-on-color);
    outline-offset: -2px;
}

/* Stufe B5 (AUFTRAG-RES-TIMELINE-GESAMT-CC.md): faerbige Kreise statt des
   frueheren einzelnen Chips - ~3/4 der (kompakten, 26px) Balkenhoehe, erst
   Kunden- dann Anlass-Tags (Reihenfolge kommt bereits so aus AllTags()).
   Rand statt Deckkraft-Aenderung, damit auch sehr helle Tag-Farben auf
   hellen Balken-Hintergruenden (Status-Farbe) klar umrissen bleiben. */
.res-timeline-bar-tags {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}

.res-timeline-bar-tag-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .6);
    flex: none;
}

.res-timeline-bar-tag-more {
    font-size: 0.65rem;
    /* Bleibt fest: sitzt auf der Farbe des Gastes (Balken), nicht auf einer
       Themenflaeche - ein abdunkelnder Hauch ist dort in beiden Modi richtig. */
    background: rgba(0,0,0,.25);
    border-radius: 999px;
    padding: 0 5px;
    flex: none;
}

/* Stufe B6: reines CSS-Popover, kein JS-Interop - direktes Geschwister-
   Element des Balkens (nicht Kind, wegen .res-timeline-bar { overflow:hidden }
   fuers Text-Ellipsis), :hover + Adjacent-Sibling-Selektor blendet es ein.
   Zusaetzlich zum bestehenden Klick (Detail/Verschieben, Stufe A2). */
.res-timeline-bar-tag-popover {
    position: absolute;
    top: calc(100% + 2px);
    background: var(--pos-panel);
    color: var(--pos-text);
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-sheet);
    box-shadow: var(--pos-shadow-rest);
    padding: 6px 10px;
    min-width: 140px;
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
    white-space: nowrap;
}

.res-timeline-bar:hover + .res-timeline-bar-tag-popover {
    opacity: 1;
}

.res-timeline-bar-tag-popover-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 0.75rem;
}

.res-timeline-bar-tag-popover-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.res-timeline-bar-tag-popover-sep {
    border-top: 1px solid var(--pos-hairline);
    margin: 4px 0;
}

.res-timeline-bar-wait {
    font-size: 0.7rem;
}

/* Paket 3c (AUFTRAG-RES-TIMELINE-MEHRTISCH-CC.md): Verbindungs-Klammer fuer
   Mehrtisch-Reservierungen (attachReservationBrackets, res-timeline-gestures.js
   zeichnet die Pfade rein per JS - Geometrie haengt an den tatsaechlich
   gerenderten Balken, siehe Kommentar dort). VORNE (hoeherer z-index als
   .res-timeline-bar z-index:2), aber pointer-events:none, damit Klick/Drag
   auf den Balken unveraendert funktioniert. */
.res-timeline-bracket-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}

.res-timeline-bracket-path {
    fill: none;
    stroke-width: 2px;
    stroke-opacity: 0.55;
}

/* Punkt 7: Live-Fuehrung waehrend des Aufziehens (attachLaneDrag in
   res-timeline-gestures.js haengt/aktualisiert dieses Element rein per JS,
   kein Blazor-Render pro Pixel). Gleiche Geometrie wie .res-timeline-bar
   (top/bottom 3px, an die kompaktere Zeilenhoehe angepasst), kraeftige
   Akzentflaeche mit Transparenz statt Volltondeckung, damit sie eindeutig
   als "entsteht gerade" statt als fertige Reservierung lesbar ist. */
.res-timeline-drag-preview {
    position: absolute;
    top: 3px;
    bottom: 3px;
    border-radius: var(--pos-radius-tile);
    background: var(--pos-accent);
    opacity: .55;
    border: 1px dashed var(--pos-accent);
    pointer-events: none;
    z-index: 3;
}

/* Das Mini-Menue (Walk-in | Reservierung) ist am 01.08.2026 auf
   Gruender-Anordnung ENTFALLEN - ein Klick auf die Zeitachse fuehrt direkt in
   den Anlage-Dialog, Laufkundschaft ist dort unten ein eigener Knopf
   (.res-panel-walkin). Seine Regeln sind mitentfernt statt als toter Ballast
   stehenzubleiben; z-index 27 der Leiter ist damit wieder frei. */

/* ============================================================
   Panel (Paket D) + Detail-Popover (Paket C/H)
   ============================================================ */
.res-panel-backdrop {
    position: fixed;
    inset: 0;
    /* Bleibt fest: ein Schleier verdunkelt, was hinter ihm liegt - das ist in
       Hell wie in Dunkel dieselbe Aussage (Paket 4 geprueft, nicht vergessen). */
    background: rgba(0,0,0,.4);
    z-index: 30;
    display: flex;
    justify-content: flex-end;
}

.res-panel {
    width: min(420px, 100vw);
    background: var(--pos-panel);
    color: var(--pos-text);
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--pos-shadow-rest);
}

.res-detail {
    width: min(380px, 100vw);
    margin: auto;
    background: var(--pos-panel);
    color: var(--pos-text);
    border-radius: var(--pos-radius-sheet);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* AUFTRAG-RESERVIERUNG-KORREKTUREN-CC.md Paket A: Tischplan-Ueberlagerung -
   der Plan wird angezeigt und angeklickt, nicht bearbeitet (Wiederverwendung
   von PosTischplanAnsicht, kein zweiter Planeditor). Zentriert wie
   .res-detail, aber deutlich groesser - eine Zeichnung braucht Flaeche. */
.res-tischplan-overlay {
    width: min(900px, 94vw);
    height: min(720px, 88vh);
    margin: auto;
    background: var(--pos-panel);
    color: var(--pos-text);
    border-radius: var(--pos-radius-sheet);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.res-tischplan-overlay .pos-tischplan-ansicht {
    flex: 1 1 auto;
    min-height: 0;
}

.res-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pos-hairline);
    font-weight: 700;
}

.res-panel-body, .res-detail-body {
    padding: 14px 16px;
    overflow-y: auto;
    flex: 1;
}

.res-panel-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: var(--pos-muted);
}

.res-panel-field input, .res-panel-field textarea, .res-panel-field select {
    background: var(--pos-surface);
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    color: var(--pos-text);
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

.res-panel-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.res-panel-row .res-panel-field input {
    max-width: 100%;
}

.res-panel-row .res-panel-field {
    flex: 1;
}

.res-panel-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.res-panel-table-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.res-panel-table-tile {
    border: 1px solid var(--pos-hairline);
    background: var(--pos-surface);
    color: var(--pos-text);
    border-radius: var(--pos-radius-btn);
    padding: 6px 10px;
    cursor: pointer;
}

.res-panel-table-selected {
    background: var(--pos-accent);
    border-color: var(--pos-accent);
    color: #fff;
}

/* AUFTRAG-EVENT-EDITOR-UND-BELEGUNGSKONFLIKT-CC.md Paket D (F-54): welche
   Bestuhlung am Betriebstag dieser Reservierung gilt - ruhige Zeile ueber dem
   Kachel-Raster, dieselbe Aussage wie in der Timeline-Kopfzeile. */
.res-panel-bestuhlung {
    margin-bottom: 8px;
    font-size: .9rem;
}

.res-panel-bestuhlung-tag {
    margin-left: 6px;
    opacity: .7;
}

/* AUFTRAG-DIALOG-FOLGT-DER-UHRZEIT-CC.md Paket 1: die Reservierung laeuft in
   eine andere Bestuhlung hinein. Bewusst LEISER als .res-panel-verwaist (kein
   Akzentrahmen, nur eine Kante links): das ist kein Fehler des Nutzers und
   nichts, was er aufloesen muesste - es ist eine Tatsache ueber seinen Gast,
   die er kennen soll. Die Kante in --pos-muted geht mit Hell/Dunkel mit. */
.res-panel-bestuhlungswechsel {
    margin-bottom: 12px;
    padding: 6px 10px;
    border-left: 3px solid var(--pos-muted);
    background: var(--pos-mulde-bg);
    border-radius: 0 var(--pos-radius-btn) var(--pos-radius-btn) 0;
    font-size: .85rem;
    color: var(--pos-text);
}

/* Paket D: gewaehlte Tische, die es im geltenden Plan nicht gibt - sichtbar
   gemeldet statt still entfernt (die Entscheidung gehoert dem Nutzer). */
.res-panel-verwaist {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid var(--pos-accent);
    border-radius: var(--pos-radius-btn);
    font-size: .9rem;
}

.res-panel-verwaist-btn {
    flex: none;
    padding: 4px 10px;
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    background: var(--pos-surface);
    color: var(--pos-text);
    cursor: pointer;
}

/* Paket 3e (AUFTRAG-RES-TIMELINE-MEHRTISCH-CC.md): Personenverteilung je
   Tisch, nur bei >1 gewaehltem Tisch sichtbar (siehe Markup). */
.res-panel-seats-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
}

.res-panel-seats-sum {
    font-weight: 700;
}

.res-panel-seats-sum-conflict {
    /* Paket 4: steht im Panel auf --pos-panel, geht also mit dem Theme mit -
       #ff5252 auf Weiss war zu blass. */
    color: var(--pos-danger);
}

.res-panel-seats-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.res-panel-seats-row input {
    max-width: 70px;
}

.res-panel-guest-results {
    background: var(--pos-surface);
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    margin-bottom: 10px;
}

.res-panel-guest-result {
    padding: 8px;
    cursor: pointer;
}

.res-panel-guest-result:hover {
    background: var(--pos-mulde-bg);
}

.res-panel-selected-guest {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--pos-mulde-bg);
    border-radius: var(--pos-radius-btn);
    padding: 6px 10px;
}

.res-panel-footer, .res-detail-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--pos-hairline);
    flex-wrap: wrap;
}

/* Gruender-Anordnung 01.08.2026: der Fuss traegt jetzt ZWEI Handlungen -
   oben Abbrechen/Speichern, darunter die Laufkundschaft. */
.res-panel-footer-row {
    display: flex;
    gap: 8px;
    flex: 1 1 100%;
    justify-content: flex-end;
}

/* "getrennt durch eine deutliche horizontale Linie": die Trennung ist der
   ganze Punkt - Laufkundschaft ist keine Variante des Speicherns, sondern
   eine andere Handlung (der Gast sitzt sofort, ohne Name und ohne Zeiten).
   Deshalb eine echte Linie und Luft darum, nicht nur ein weiterer Knopf in
   derselben Reihe. */
.res-panel-walkin {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex: 1 1 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid var(--pos-hairline);
}

.res-panel-walkin-count {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .85rem;
    color: var(--pos-muted);
}

.res-panel-walkin-count input {
    width: 90px;
}

.res-panel-walkin-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* AUFTRAG-RESERVIERUNG-KORREKTUREN-CC.md Paket C: ein `title` auf einem
   disabled-Button bleibt in den gaengigen Browsern unsichtbar - der Grund
   steht deshalb jetzt als sichtbarer Text neben dem Knopf. */
.res-panel-walkin-action {
    display: flex;
    align-items: center;
    gap: 8px;
}

.res-panel-walkin-hint {
    font-size: .8rem;
    color: var(--pos-muted);
}

/* Eigene Fehlerzeile des Walk-in-Bereichs (Paket C) - .res-panel-save-error
   liefert Farbe/Gewicht, hier nur der Abstand zur Zeile darueber. */
.res-panel-walkin-error {
    margin-top: 8px;
}

/* ------------------------------------------------------------------
   Annahme-Regel (AUFTRAG-ANNAHME-REGELN-CC.md, E-187/E-188)
   ------------------------------------------------------------------ */

/* Kein Walk-in vorgesehen: GRAU, aber anfassbar (Gruender 05.08.2026 -
   kein heimliches Ausblenden, und die Begruendung kommt beim KLICK, weil
   die Kassen Touch-Geraete sind). Deshalb bewusst nicht :disabled - der
   Klick muss ankommen. */
.res-panel-walkin-btn-blocked {
    opacity: .5;
    filter: grayscale(1);
}

/* Die Luecke einer EMPFOHLENEN Angabe: sichtbar, aber ruhig - sie
   blockiert nichts und darf deshalb auch nicht wie ein Fehler aussehen
   (E-187). */
.res-panel-intake-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
    font-size: .8rem;
    color: var(--pos-muted);
}

.res-panel-intake-badge {
    border: 1px solid var(--pos-muted);
    border-radius: 999px;
    padding: 1px 8px;
}

/* Dem gewaehlten Bestandsprofil fehlt eine PFLICHT-Angabe - das ist keine
   Warnung an den Bediener, sondern eine Aufgabe am Profil. */
.res-panel-intake-gap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
    font-size: .85rem;
    color: var(--pos-accent);
}

/* AUFTRAG-RES-SLOTEVENT-BUCHBARKEIT-CC.md Stufe C: Gating-Ablehnung beim
   Speichern - ruhige Meldung statt Blazor-Crash-Banner (gleiches Muster wie
   .service-area-delete-error), eigene Zeile ueber den Buttons. */
.res-panel-save-error {
    flex: 1 1 100%;
    color: var(--pos-accent);
    font-weight: 600;
    font-size: 0.85rem;
}

.res-detail-tags {
    display: flex;
    gap: 6px;
    margin: 6px 0;
}

.res-tag-pill {
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.75rem;
}

/* Stufe B4 (AUFTRAG-RES-TIMELINE-GESAMT-CC.md): Tag-Picker-Modal - gleiches
   Grundgeruest wie .res-panel (Backdrop + Header/Footer), aber breiter fuer
   die zwei Spalten. */
.res-tag-picker {
    width: min(640px, 100vw);
    max-height: 80vh;
    margin: auto;
    background: var(--pos-panel);
    color: var(--pos-text);
    border-radius: var(--pos-radius-sheet);
    box-shadow: var(--pos-shadow-rest);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.res-tag-picker-search {
    padding: 10px 16px 0;
}

.res-tag-picker-search input {
    width: 100%;
    background: var(--pos-surface);
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    color: var(--pos-text);
    padding: 8px 10px;
}

.res-tag-picker-columns {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
}

.res-tag-picker-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.res-tag-picker-column h4 {
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--pos-muted);
}

.res-tag-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 8px;
    border-radius: var(--pos-radius-btn);
    cursor: pointer;
    border: 1px solid transparent;
}

.res-tag-picker-row:hover {
    background: var(--pos-mulde-bg);
}

.res-tag-picker-row-active {
    border-color: var(--pos-accent);
}

.res-tag-picker-new {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}

.res-tag-picker-new input[type="text"],
.res-tag-picker-new input:not([type]) {
    flex: 1;
    min-width: 0;
    background: var(--pos-surface);
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    color: var(--pos-text);
    padding: 6px 8px;
}

.res-tag-picker-new input[type="color"] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    background: none;
}

.res-detail-waiting {
    color: var(--pos-accent);
    font-weight: 600;
}

.res-detail-note {
    background: var(--pos-mulde-bg);
    border-radius: var(--pos-radius-btn);
    padding: 8px;
}

.res-detail-log-toggle {
    background: transparent;
    border: none;
    color: var(--pos-accent);
    cursor: pointer;
    padding: 6px 0;
}

.res-detail-log {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--pos-muted);
}

.res-detail-log-entry {
    display: flex;
    gap: 8px;
}

/* ============================================================
   Warteliste-Leiste (Paket F)
   ============================================================ */
.res-waitlist-bar {
    border-top: 1px solid var(--pos-hairline);
    background: var(--pos-panel);
    padding: 8px 16px;
}

.res-waitlist-toggle {
    background: transparent;
    border: none;
    color: var(--pos-text);
    cursor: pointer;
    font-weight: 600;
}

.res-waitlist-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.res-waitlist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    background: var(--pos-surface);
    border-radius: var(--pos-radius-btn);
    padding: 6px 10px;
}

/* ============================================================
   ServiceAreas (Paket G)
   ============================================================ */
.service-areas-shell {
    padding: 20px;
}

.service-area-card {
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-tile);
    padding: 12px;
    margin-bottom: 12px;
    background: var(--pos-panel);
}

.service-area-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 6px;
}

/* AUFTRAG-AKTE-MEGA-NACHBESSERUNG-CC.md Punkt 3: ruhige Fehlermeldung statt
   Blazor-Crash-Banner, falls das Loeschen serverseitig doch mal abgelehnt wird. */
.service-area-delete-error {
    color: var(--pos-accent);
    font-weight: 600;
}

/* Punkt 5.2: Klarstellungs-Hinweis Service-Bereiche vs. Tischplan-Bereiche. */
.service-areas-hint,
.tischplan-areas-hint {
    color: var(--pos-muted);
    font-size: 0.85rem;
    margin: -4px 0 12px;
    max-width: 60ch;
}

/* AUFTRAG-OEFFENTLICHE-VERANSTALTUNGEN-CC.md Stufe C/D: Verwaltung
   Oeffentlicher Veranstaltungen (EventPlan) + ihrer Knoten (SlotNode) -
   gleiche Karten-/Feld-Bausteine wie die Servicebereiche oben
   (.service-area-card/-swatch/-delete-error werden direkt mitgenutzt).
   Ersetzt die Klassen der abgeloesten SlotEvents.razor (slot-event-* ->
   slot-node-*, ein Feld weniger noetig da Wochentage jetzt im
   TimeCondition-Baum leben statt als eigener Flags-Picker). */
.public-events-shell {
    padding: 20px;
}

.public-events-hint {
    color: var(--pos-muted);
    font-size: 0.85rem;
    margin: -4px 0 12px;
    max-width: 70ch;
}

.public-events-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.public-event-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-sheet);
    background: var(--pos-panel);
}

.public-event-row-name {
    font-weight: 700;
    cursor: pointer;
}

.public-event-row-count {
    color: var(--pos-muted);
    font-size: 0.85rem;
}

.public-event-row-spacer {
    flex: 1;
}

.slot-node-card {
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-sheet);
    padding: 14px;
    margin-bottom: 12px;
    background: var(--pos-panel);
}

.slot-node-badge {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--pos-mulde-bg);
    color: var(--pos-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
}

.slot-node-badge-inactive {
    color: var(--pos-accent);
}

.slot-node-mode-switch {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.slot-node-mode-switch button {
    border: 1px solid var(--pos-hairline);
    background: var(--pos-surface);
    color: var(--pos-text);
    border-radius: var(--pos-radius-btn);
    padding: 6px 14px;
    cursor: pointer;
}

.slot-node-fixed-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.slot-node-fixed-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.slot-node-fixed-row input[type="time"] {
    width: auto;
}

.slot-node-fixed-row input:not([type="time"]) {
    flex: 1;
    min-width: 0;
}

.slot-node-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Stufe D "Herzstueck": der TimeCondition-Baum-Editor - Kind = UND
   (eingerueckt darunter), Geschwister = ODER (durch die "oder"-Trenner
   zwischen den Wurzeln/Geschwistern kenntlich, gleiche Einrueckungsebene). */
.time-condition-tree {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 12px;
}

.time-condition-or-sep {
    color: var(--pos-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-left: 4px;
}

.time-condition-node {
    border-left: 2px solid var(--pos-hairline);
    padding-left: 10px;
    margin-top: 4px;
}

.time-condition-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.time-condition-row select,
.time-condition-row input {
    width: auto;
}

.time-condition-children {
    margin-left: 6px;
}

.time-condition-and-label {
    color: var(--pos-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.service-assignment-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--pos-hairline);
}

/* ============================================================
   Protokoll (Paket H) + Monatsuebersicht (Paket I)
   ============================================================ */
/* AUFTRAG-AKTE-MEGA-NACHBESSERUNG-CC.md Punkt 2: dieselbe fehlende
   width:100%/flex:1 1 auto wie bei .pos-kitchen-shell/.res-timeline-shell -
   ohne das bleiben beide Seiten gewoehnliche Flex-Items in <app> (ab 768px
   selbst ein Row-Flex-Container) und schrumpfen auf ihren Inhalt statt die
   Zeile zu fuellen, unabhaengig von der Fensterbreite. */
.res-activity-shell, .res-month-shell {
    width: 100%;
    flex: 1 1 auto;
    padding: 20px;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* AUFTRAG-RES-TIMELINE-STACKING-CC.md Paket 3 (Gruender-Feedback
       27.07.2026): .pos-shell setzt nur den Hintergrund, keine eigene
       Textfarbe - unklassifizierte Elemente (h3/p/bare span, z. B. Titel,
       Datum, "keine Eintraege") fielen auf die feste Bootstrap-Reboot-Farbe
       zurueck statt auf die Theme-Tokens, auf dunklem Grund praktisch
       unlesbar. */
    color: var(--pos-text);
}

/* AUFTRAG-UI-KORREKTUREN-CC.md Paket C: einheitliche Kopfzeile mit
   Theme-Umschalter fuer die beiden schlichteren Vollbild-Seiten (Monat/
   Aktivitaeten) - Timeline/Kueche haben ihre eigene, reichere Kopfzeile. */
.res-shell-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.res-shell-topbar-spacer {
    flex: 1 1 auto;
}

/* AUFTRAG-RES-TIMELINE-STACKING-CC.md Paket 3 (Gruender-Feedback
   27.07.2026): die Zeilen-Spans hatten keine eigene Textfarbe und fielen auf
   die feste Bootstrap-Reboot-Farbe (dunkles Grau) zurueck statt auf die
   Theme-Tokens - auf dem dunklen Panel-Grund praktisch unlesbar. Letzter
   Span (Rohdetails/JSON) bewusst gedaempft (--pos-muted), der Rest in der
   vollen Textfarbe. */
.res-activity-row {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--pos-hairline);
    font-size: 0.85rem;
    color: var(--pos-text);
}

.res-activity-row span:last-child {
    color: var(--pos-muted);
}

/* AUFTRAG-UI-KORREKTUREN-CC.md Paket D Punkt 10: "Monatsansicht deutlich
   groesser - keine kuenstliche Kompaktheit" - Grid waechst jetzt mit dem
   verfuegbaren Platz statt einer festen kleinen Zellenhoehe. */
/* AUFTRAG-TIMELINE-FUEHRUNGSLINIEN-CC.md Paket C: Wochentagskopf - dieselbe
   Spaltenaufteilung wie .res-month-grid, damit die Kuerzel exakt ueber ihrer
   Spalte stehen. */
.res-month-weekday-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}

.res-month-weekday {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pos-muted);
    text-transform: uppercase;
}

.res-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    gap: 8px;
    flex: 1 1 auto;
}

.res-month-day {
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    padding: 12px;
    min-height: 130px;
    background: var(--pos-panel);
    cursor: pointer;
    font-size: 1.05rem;
}

/* Paket C: das heutige Datum - deutlich kraeftigerer Rand plus getoente
   Flaeche, damit die Markierung auch aus zwei Metern traegt und sich nicht
   mit dem duennen Auslastungsbalken (.res-month-day-bar, 4px) verwechseln
   laesst. Muss NACH .res-month-day stehen: gleiche Selektor-Spezifitaet,
   sonst gewinnt die spaeter im Stylesheet stehende Regel den Rand-Streit
   (gemessen, nicht angenommen - stand zunaechst davor und wurde von
   .res-month-day ueberschrieben). */
.res-month-day-today {
    border: 2px solid var(--pos-accent);
    background: color-mix(in srgb, var(--pos-accent) 12%, var(--pos-panel));
}

.res-month-day-empty {
    background: transparent;
    border: none;
    cursor: default;
}

.res-month-day-num {
    font-weight: 700;
}

.res-month-day-guests {
    font-size: 0.75rem;
    color: var(--pos-muted);
}

.res-month-day-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--pos-accent);
    margin-top: 4px;
}

.res-month-day-closed {
    font-size: 0.65rem;
    color: var(--pos-accent);
    font-weight: 700;
}

/* Guest detail (Paket E) */
.res-guest-detail-shell {
    padding: 20px;
    max-width: 480px;
}

.res-guest-visit-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 4px 0;
    border-bottom: 1px solid var(--pos-hairline);
}

/* ============================================================
   Tischplan-Stammdaten (AUFTRAG-UI-KORREKTUREN-CC.md Paket G)
   ============================================================ */
.tischplan-shell {
    padding: 20px;
}

.tischplan-section {
    margin-bottom: 24px;
}

.tischplan-area-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.tischplan-area-name {
    min-width: 160px;
    font-weight: 700;
}

.tischplan-table-card {
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-tile);
    padding: 12px;
    margin-bottom: 10px;
    background: var(--pos-panel);
}

.tischplan-table-inactive {
    opacity: 0.55;
}

.tischplan-table-header {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.tischplan-table-area {
    color: var(--pos-muted);
    font-size: 0.85rem;
}

.tischplan-table-inactive-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--pos-accent);
    font-weight: 700;
}

.tischplan-table-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--pos-hairline);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}

.tischplan-seats-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tischplan-seat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--pos-radius-btn);
    background: var(--pos-mulde-bg);
    font-size: 0.85rem;
}

.tischplan-seats-generate {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* AUFTRAG-ASSISTENT-FASSADE-CC.md Paket E (E-112): Assistenten-Einstieg in
   der Reservierungs-Timeline. Bewusst schlicht - keine Design-Runde. Er sitzt
   unten rechts ueber der Timeline, damit er nichts verdeckt, was man beim
   Reservieren braucht, und ist zugeklappt nur ein Griff.
   position: fixed und nicht absolute - .res-timeline-shell hat bewusst keinen
   Positionierungskontext, und einen einzufuehren wuerde jedes andere absolut
   gesetzte Kind der Timeline verschieben. */
.res-assistent {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    color: var(--pos-text);
}

.res-assistent-griff {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--pos-hairline);
    border-radius: 999px;
    background: var(--pos-surface);
    color: var(--pos-text);
    box-shadow: var(--pos-shadow-rest);
    cursor: pointer;
    font-size: .9rem;
}

.res-assistent-korpus {
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 32px));
    max-height: min(440px, 60vh);
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-sheet);
    background: var(--pos-surface);
    box-shadow: var(--pos-shadow-rest);
    overflow: hidden;
}

.res-assistent-verlauf {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.res-assistent-leer {
    margin: 0;
    color: var(--pos-muted);
    font-style: italic;
}

.res-assistent-zeile {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--pos-radius-btn);
    white-space: pre-wrap;
    line-height: 1.35;
}

.res-assistent-zeile--nutzer {
    align-self: flex-end;
    background: var(--pos-accent);
    color: var(--pos-on-go);
}

.res-assistent-zeile--assistent {
    align-self: flex-start;
    background: var(--pos-panel);
}

.res-assistent-laeuft {
    color: var(--pos-muted);
    font-style: italic;
}

/* Kein Fehler-Ton im POS-Thema hinterlegt - deshalb hier ein eigener, der in
   beiden Themen lesbar ist, statt eine Variable zu erfinden, die es nicht gibt. */
.res-assistent-fehler {
    margin: 0;
    color: #e06c5a;
}

.res-assistent-eingabe {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--pos-hairline);
}

.res-assistent-eingabe input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    background: var(--pos-panel);
    color: var(--pos-text);
}

.res-assistent-eingabe button {
    padding: 7px 14px;
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    background: var(--pos-accent);
    color: var(--pos-on-go);
    cursor: pointer;
}

.res-assistent-eingabe button:disabled {
    opacity: .5;
    cursor: default;
}

/* Paket C - die Vorschau. Sie hebt sich absichtlich deutlich vom Gespraech ab:
   Was hier steht, ist noch nicht geschehen, und diese Unterscheidung darf nicht
   an einer Nuance haengen. Der Rahmen ist der Akzentton, nicht die Fehlerfarbe -
   es ist kein Problem, sondern eine Frage. */
.res-assistent-vorschau {
    align-self: stretch;
    margin: 4px 0;
    padding: 10px 12px;
    border: 1px solid var(--pos-accent);
    border-radius: var(--pos-radius-btn);
    background: var(--pos-panel);
}

.res-assistent-vorschau-kopf {
    margin: 0 0 8px;
    font-weight: 600;
}

/* AUFTRAG-ASSISTENT-VORSCHAU-CC.md Paket B: Der Titel der Faehigkeit gehoert
   IN die Vorschau. Sie darf nicht davon abhaengen, ob das Modell einen Satz
   dazu formuliert - auf gpt-4o-mini tut es das nicht. */
.res-assistent-vorschau-titel {
    margin: 0 0 8px;
    font-style: italic;
    color: var(--pos-text);
}

.res-assistent-vorschau-felder {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
    margin: 0 0 10px;
}

/* Paket A: die Kennung (und der technische Feldname) treten zurueck - klein
   und gedaempft daneben, fuer den Zweifelsfall. Sie verschwinden nicht: Wer
   wissen will, worauf genau er zeichnet, findet es hier. */
.res-assistent-vorschau-technisch {
    display: block;
    font-size: 0.72rem;
    color: var(--pos-faint);
    overflow-wrap: anywhere;
}

.res-assistent-vorschau-felder dt {
    color: var(--pos-muted);
}

.res-assistent-vorschau-felder dd {
    margin: 0;
    /* Lange Kennungen und Notizen duerfen die Spalte sprengen, nicht das Panel. */
    overflow-wrap: anywhere;
}

.res-assistent-vorschau-knoepfe {
    display: flex;
    gap: 8px;
}

.res-assistent-vorschau-knoepfe button {
    padding: 7px 14px;
    border: 1px solid var(--pos-hairline);
    border-radius: var(--pos-radius-btn);
    cursor: pointer;
}

.res-assistent-zeichnen {
    background: var(--pos-accent);
    color: var(--pos-on-go);
}

/* Ablehnen ist der stille Knopf: gleich gross und gleich erreichbar, aber
   nicht eingefaerbt - er soll leicht zu treffen, nicht leicht zu uebersehen
   und trotzdem nicht der Vorschlag sein. */
.res-assistent-ablehnen {
    background: transparent;
    color: var(--pos-text);
}

.res-assistent-vorschau-knoepfe button:disabled {
    opacity: .5;
    cursor: default;
}