/* ============================================================================
   Tischplan (Floorplan) — Stylesheet für beide Ebenen des Plans.

   Bewusst ein GLOBALES Stylesheet und keine FloorPlan3DView.razor.css: Blazors
   Scoped CSS hängt am Attribut b-xxxxx, das nur der Razor-Compiler auf die von
   IHM gerenderten Elemente stempelt. Die Regeln hier bedienen aber drei Quellen:
   FloorPlan3DView.razor, die Kachel-Komponente SimpleTableTile.razor (eigener
   Scope, also von hier nicht erreichbar) und das per JS erzeugte Overlay (bekommt
   gar kein Attribut). Als .razor.css liefe ein Gutteil davon still ins Leere.

   Eingebunden in wwwroot/index.html (MAUI) und Components/App.razor (Web).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Overlay über dem WebGL-Canvas (.fp3d-*)
   Erzeugt von wwwroot/js/floorplan3d.js — Tischnummer-Badge, Reservierungs-Panel,
   Drag-Ghost, Raum-HUD. Die zwölf Gruppenfarben (.fp3d-res.multi.g0 … .g11) fehlen
   hier absichtlich: sie stehen als GRP_RGB im JS, weil die Kontrastrechnung in
   applyTopContrast() dieselbe Liste braucht, und werden von dort erzeugt.
   ---------------------------------------------------------------------------- */
/* Reservierungs-Panel = Kind des Nummern-Badges, sitzt direkt darüber (zentriert). Nur das Badge wird
   projiziert; das Panel skaliert/bewegt sich als Kind automatisch mit. */
.fp3d-panel{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:5px;font-family:Arial,sans-serif;
  background:rgba(255,255,255,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:2px;min-width:104px;max-width:145px;}
/* Hover: das ganze Panel nach vorne holen, damit angrenzende Panels es nicht überlagern (z-index wird
   sonst pro Frame inline gesetzt → !important nötig). */
.fp3d-panel:hover{z-index:1000000 !important;}
/* Griff-Fläche = Badge + Panel zusammen (der „Tisch"). Die einzelne Zeile ist KEIN eigener Griff mehr:
   Tippen öffnet das Popover, Ziehen zieht die laufende Res — wie in der Einfach-Ansicht. Beide liegen im
   Overlay, das pointerdown erreicht OrbitControls also nie (die blanke Platte bleibt fürs Schwenken). */
.fp3d-panel,.fp3d-num{pointer-events:auto;cursor:pointer;touch-action:none;}
.fp3d-res{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:0;font-size:13px;line-height:1.25;min-height:22px;
  /* Touch (v.a. iOS): Long-Press soll ziehen, nicht Text auswählen / Callout öffnen. */
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.fp3d-ghost{position:fixed;left:0;top:0;transform:translate(-50%,-130%);z-index:10000;pointer-events:none;
  font-family:Arial,sans-serif;font-size:12px;color:#292524;background:rgba(255,255,255,.96);
  border:2px solid var(--accent,#008e66);border-radius:10px;padding:5px 9px;box-shadow:0 6px 16px rgba(0,0,0,.28);
  white-space:nowrap;width:172px;box-sizing:border-box;}
.fp3d-ghost.swap{border-color:#f59e0b;}
.fp3d-ghost.alt{border-color:#7c6bb0;}
.fp3d-ghost.extend{border-color:#0284c7;}
.fp3d-ghost.remove{border-color:#dc2626;}
.fp3d-ghost .fg-name{display:flex;align-items:baseline;font-weight:700;line-height:1.3;min-width:0;}
.fp3d-ghost .fg-n1,.fp3d-ghost .fg-n2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto;}
.fp3d-ghost .fg-mid{flex:0 0 auto;white-space:pre;font-weight:600;color:#57534e;}
.fp3d-ghost .fg-target{display:flex;align-items:center;gap:8px;min-height:16px;margin-top:3px;font-weight:600;color:#57534e;}
.fp3d-ghost.no-target .fg-target{color:#a8a49c;font-weight:500;}
.fp3d-ghost .fg-tbl{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;}
.fp3d-ghost .fg-fit{display:flex;align-items:center;gap:5px;margin-left:auto;}
.fp3d-ghost .fg-bar{width:34px;height:6px;border-radius:3px;background:#e8e6e1;overflow:hidden;flex:0 0 auto;}
.fp3d-ghost .fg-bar>i{display:block;height:100%;width:0;background:#78746b;transition:width .08s;}
.fp3d-ghost .fg-bar.good>i{background:#2e7d32;}
.fp3d-ghost .fg-bar.low>i{background:#f59e0b;}
.fp3d-ghost .fg-bar.over>i{background:#dc2626;}
.fp3d-ghost .fg-txt{font-size:11px;color:#57534e;min-width:26px;text-align:right;}
/* Mehrtisch-Gruppen: gleiche Farbe auf allen beteiligten Tischen. Der Zeilen-Hintergrund ist der
   einzige freie Farbkanal — Status sitzt auf Platte/Badge, Gelb ist für Alternative/Überbelegung
   vergeben. Deshalb bewusst dezente Lasuren. MUSS VOR :hover und .armed stehen: gleiche Spezifität,
   sonst gewönne die Gruppenfarbe und der Hover wäre nicht mehr sichtbar. */
/* Nur die VARIABLE setzen, angewendet wird sie eine Zeile tiefer mit niedriger Spezifitaet.
   Vorher stand die Farbe direkt in .fp3d-res.multi.gN (3 Klassen) und schlug damit :hover und
   .armed (je 2) — die waren auf Gruppen-Zeilen unsichtbar. Jetzt gewinnen die Zustaende. */
.fp3d-res.multi{background:var(--grp);}
/* Hover auf einer Mehrtisch-Reservierung markiert IHRE Zeilen auf allen Tischen (siehe
   showResHover). Rahmen statt Hintergrund, damit die Gruppenfarbe darunter sichtbar bleibt. */
.fp3d-res.res-hi{outline:2px solid var(--accent,#008e66);outline-offset:-2px;}
/* Live-Suche: Tische ohne Treffer zurücknehmen, Treffer-ZEILEN hervorheben. Gedimmt wird das
   Nummern-Badge — das Panel hängt als Kind daran und wird dadurch mit zurückgenommen.
   Auf einem Treffer-Tisch bleiben die übrigen Zeilen gedämpft, damit der Treffer heraussticht. */
.fp3d-searching .fp3d-num{opacity:.3;}
.fp3d-searching .fp3d-num.has-hit{opacity:1;}
/* :not(.hit) ist PFLICHT: ohne das schlägt diese Regel (4 Klassen) die Treffer-Regel darunter
   (3 Klassen) und dimmt ausgerechnet den Treffer selbst auf .45. */
.fp3d-searching .fp3d-num.has-hit .fp3d-res:not(.hit){opacity:.4;}
.fp3d-searching .fp3d-res.hit{opacity:1;font-weight:700;
  outline:2px solid #008e66;outline-offset:-1px;background:rgba(0,142,102,.22);}
/* Schalter „Mehrtisch-Gruppen" im Design-Menü (setResGroups) → alles wieder neutral. */
.fp3d-nogroups .fp3d-res.multi{background:none;}
/* Hover bleibt an der ZEILE — sie zeigt weiter Tooltip + markiert die Tische dieser Reservierung
   (reine Information). Der „scharf"-Zustand sitzt dagegen am PANEL, denn gezogen wird der Tisch. */
.fp3d-res:hover{background:rgba(0,142,102,.12);}
.fp3d-panel.armed{background:rgba(0,142,102,.18);box-shadow:inset 0 0 0 2px var(--accent,#008e66);}
/* 2. Halte-Stufe: ⚡ = der Drag hängt den Zieltisch an. Blau wie der Extend-Ghost (.fp3d-ghost.extend). */
.fp3d-panel.armed.extend-armed{background:rgba(2,132,199,.16);box-shadow:inset 0 0 0 2px #0284c7;}
.fp3d-res.armed.extend-armed{background:rgba(2,132,199,.16);box-shadow:inset 0 0 0 2px #0284c7;}
/* Der Blitz muss INNERHALB der Box sitzen: das 2D-Panel hat overflow:hidden (Zeilen-Begrenzung),
   negative Offsets wurden dort komplett weggeschnitten — deshalb war er im Plan unsichtbar, im
   Reservierungs-Menü aber da. Gilt jetzt für BEIDE Cue-Ziele: zeilengenau (Maus) und ganzer Tisch.
   Größe in em, damit er zur jeweiligen Schriftgröße passt.
 */
.fp3d-res.extend-armed,.fp3d-panel.extend-armed{position:relative;}
.fp3d-res.extend-armed::after,.fp3d-panel.extend-armed::after{
  content:"\F0241";font-family:"Material Design Icons";font-weight:normal;position:absolute;
  right:1px;top:50%;transform:translateY(-50%);
  width:1.5em;height:1.5em;line-height:1.5em;border-radius:50%;background:#0284c7;color:#fff;
  font-size:1.05em;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.35);pointer-events:none;}
/* Am Panel (= ganzer Tisch) oben andocken; mittig läge er sonst quer über einer Zeile. */
.fp3d-panel.extend-armed::after{top:1px;transform:none;}
.fp3d-res.armed{background:rgba(0,142,102,.18);box-shadow:inset 0 0 0 2px var(--accent,#008e66);}
.fp3d-res+.fp3d-res{border-top:1px solid #efede9;}
.fp3d-res.cur:hover{background:rgba(0,142,102,.14);}
.fp3d-res.fp3d-preview{background:rgba(0,142,102,.10);outline:1px dashed var(--accent,#008e66);outline-offset:-2px;border-radius:6px;opacity:.85;}
.fp3d-res.alt .n{background:rgba(245,158,11,.9);color:#292524;padding:1px 5px;border-radius:2px;}
.fp3d-res.has-alt .n{background:#fff;color:#F6BE00;padding:1px 5px;border-radius:2px;}
.fp3d-res .t{color:#57534e;font-variant-numeric:tabular-nums;white-space:nowrap;}
/* text-align:left explizit: .fp3d-num zentriert (für die Tischnummer), das erbt sonst bis hierher und
   der Name „schwebt" mittig in seiner Flex-Spalte statt an der Zeit zu beginnen. */
/* Kein „…": das frisst rund zwei Zeichen Breite, ausgerechnet dort, wo der Platz knapp ist. Statt
   dessen hart abschneiden und die letzten ~0,9 em ausblenden — das zeigt ein bis zwei Buchstaben mehr
   und signalisiert trotzdem, dass der Name weitergeht. Die Blende sitzt am RECHTEN Rand der Spalte;
   kurze Namen reichen nicht dorthin und bleiben deshalb unangetastet. */
.fp3d-res .n{font-weight:600;color:#292524;flex:1;max-width:84px;text-align:left;overflow:hidden;
  text-overflow:clip;white-space:nowrap;}
.fp3d-res .p{color:#57534e;display:flex;align-items:center;gap:2px;white-space:nowrap;}
.fp3d-res .p.is-overcap{background:rgba(255,202,1,1);color:#292524;padding:0 4px;border-radius:4px;font-weight:600;}
.fp3d-prog{height:4px;background:#e8e6e1;border-radius:2px;margin:0px 8px 3px;overflow:hidden;}
.fp3d-prog>i{display:block;height:100%;background:var(--accent,#008e66);}
.fp3d-dragging .fp3d-panel{opacity:.82;pointer-events:auto;transition:opacity .12s;}
.fp3d-only-current .fp3d-res:not(.cur){display:none;}
.fp3d-only-current .fp3d-panel:not(.has-current){display:none;}
/* Auto-LOD: weit rausgezoomt → Nummern-Badges (und die als Kind angehängten Reservierungs-Panels) aus.
   Projiziert wird das Badge (.fp3d-num); .fp3d-panel hängt darunter. Raum-Labels bleiben sichtbar. */
.fp3d-lod-far .fp3d-num{display:none;}
/* Kompaktes Panel-Layout: gleiche Infos, nur engere Typo/Abstände → schmaleres Panel und damit
   weniger Überlappung zwischen dicht stehenden Tischen (v.a. auf kleinen Geräten).
   ZWEI Trigger-Klassen, damit User-Schalter (.fp3d-compact) und Auto-LOD (.fp3d-lod-compact)
   sich nicht gegenseitig überschreiben — wie bei den Stühlen (applyDetailVisibility).
   MUSS vor .fp3d-lod-nonames stehen: gleiche Spezifität, und wenn beide Stufen aktiv sind, soll
   dessen min-width:0 gewinnen (Panel darf noch schmaler werden als das Kompakt-Minimum). */
.fp3d-compact .fp3d-panel,
.fp3d-lod-compact .fp3d-panel{min-width:74px;max-width:100px;}
.fp3d-compact .fp3d-res,
.fp3d-lod-compact .fp3d-res{font-size:11px;gap:4px;padding:2px 5px;min-height:19px;}
.fp3d-compact .fp3d-res .n,
.fp3d-lod-compact .fp3d-res .n{max-width:56px;}
.fp3d-compact .fp3d-prog,
.fp3d-lod-compact .fp3d-prog{height:3px;margin:0 5px 2px;}
.fp3d-compact .fp3d-res.alt .n,.fp3d-lod-compact .fp3d-res.alt .n,
.fp3d-compact .fp3d-res.has-alt .n,.fp3d-lod-compact .fp3d-res.has-alt .n{padding:0 3px;}
.fp3d-compact .fp3d-res .p.is-overcap,
.fp3d-lod-compact .fp3d-res .p.is-overcap{padding:0 3px;}
/* Zwischenstufe: mittlerer Rauszoom → Gästenamen aus, Panels schrumpfen auf Zeit+Personen
   (nehmen sonst zu viel Platz, wenn viele Tische klein nebeneinander liegen). */
.fp3d-lod-nonames .fp3d-res .n{display:none;}
.fp3d-lod-nonames .fp3d-panel{min-width:0;}
/* ---- 2D-Draufsicht: Nummer an der Tisch-Oberkante, Reservierungen darunter AUF der Platte ----
   --tw (Tischbreite) und --ph (verfügbare Höhe) setzt projectPanels pro Frame in Layout-px.
   In 3D greift nichts davon — dort schwebt das Panel wie bisher über dem Badge. */
/* column-reverse dreht die Zeilen um: die Liste kommt aus C# absichtlich umgekehrt (spätere zuerst),
   weil das Panel in 3D nach OBEN wächst. In 2D wächst es nach UNTEN — ohne die Umkehr stünde die
   Liste rückwärts und beim Kürzen fielen die NÄCHSTEN Reservierungen weg statt der entferntesten.
   Kein eigener Hintergrund: der Block liegt auf der Tischplatte. */
.fp3d-2d .fp3d-panel{top:100%;bottom:auto;margin-bottom:0;margin-top:2px;
  width:var(--tw);min-width:0;max-width:none;max-height:var(--ph);overflow:hidden;
  display:flex;flex-direction:column-reverse;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
/* order:-1 = erstes Flex-Item → bei column-reverse ganz UNTEN. */
.fp3d-2d .fp3d-more{order:-1;}
/* Typografie MUSS mitskalieren: --tw/--th sind Layout-px und klein (ein 4er-Tisch landet je nach
   Plangröße bei ~50 px), eine feste 13-px-Schrift würde die Box sprengen.
   Bezug ist aber NICHT die Tischtiefe, sondern --pxm (Layout-px pro Meter, plan-weit konstant).
   Vorher hing die Schrift an --th — flache Tische (lange Tafeln) bekamen dadurch winzige und tiefe
   Tische große Beschriftung. Jetzt ist die Schrift überall gleich groß und nur die ZEILENZAHL
   richtet sich nach der Tiefe: auf flachen Tischen passen eben weniger Zeilen (+N weitere).
   Faktoren bezogen auf einen 1,17-m-Tisch, damit die bisherige Optik dort erhalten bleibt. */
.fp3d-2d .fp3d-num{font-size:calc(var(--pxm) * 0.17);letter-spacing:0;
  padding:calc(var(--pxm) * 0.0195) calc(var(--pxm) * 0.0595);border-radius:calc(var(--pxm) * 0.0195);}
/* Variante „Nummer über dem Tisch": das Badge hängt über der Oberkante (Anker translate(-50%,-100%)
   in projectPanels). Das größere padding-bottom macht den Abstand zur Kante — und schiebt das Panel
   wieder exakt auf die Oberkante, weil dessen top:100% an der Padding-Box des Badges hängt. */
.fp3d-2d.fp3d-numabove .fp3d-num{padding-bottom:calc(var(--pxm) * 0.05);}
/* Ganzzahlige Werte aus applyTypeScale() statt calc() — warum, steht dort. */
.fp3d-2d .fp3d-seats{gap:var(--seatgap, 2px);margin-top:calc(var(--pxm) * 0.0153);}
.fp3d-2d .fp3d-seat{width:var(--seatd, 5px);height:var(--seatd, 5px);border-width:1px;}
.fp3d-2d .fp3d-res{font-size:calc(var(--pxm) * 0.1394);min-height:0;line-height:1.25;
  padding:calc(var(--pxm) * 0.09) calc(var(--pxm) * 0.055);gap:calc(var(--pxm) * 0.045);}
.fp3d-2d .fp3d-res .n{max-width:none;}   /* feste 84px-Klemme würde die Box sprengen */
/* Trennlinien und Fortschritts-Spur waren auf den weißen Panel-Hintergrund abgestimmt (#efede9 /
   #e8e6e1). Der ist in 2D weg → auf der Tischplatte wirken sie wie Fremdkörper. Linie raus, und von
   der Fortschrittsanzeige bleibt nur der farbige Balken (die Spur wäre sonst ein weißer Streifen —
   durch column-reverse landet sie zudem ÜBER ihrer Zeile). */
.fp3d-2d .fp3d-res+.fp3d-res{border-top:none;}
/* Fortschritt der laufenden Reservierung: in 2D KEIN eigenes Element (das landet durch
   column-reverse ueber seiner Zeile), sondern eine Unterstreichung der Zeile selbst. --prog setzt
   buildResPanel. background-image statt shorthand, damit die Gruppenfarbe als background-color
   darunter erhalten bleibt. */
.fp3d-2d .fp3d-prog{display:none;}
.fp3d-2d .fp3d-res.has-prog{
  background-image:linear-gradient(to right,var(--accent,#008e66) var(--prog,0%),rgba(0,0,0,.10) 0);
  background-repeat:no-repeat;background-position:left bottom;
  background-size:100% calc(var(--pxm) * 0.022);}
/* Die Nummer sitzt auf der Tischplatte → eigener Hintergrund würde sie unnötig doppeln. */
.fp3d-2d .fp3d-num:not(.has-status){background:transparent;}
/* LESBARKEIT AUF DER PLATTE (nur 2D — in 3D liegt hinter Badge und Panel eine weisse Lasur).
   Zwei Stufen: (a) durchgehend das kraeftigere #292524 statt #57534e — das allein hebt den Kontrast
   auf mittleren Toenen von 2,2:1 auf 4,3:1; (b) auf dunklen Platten komplett auf Weiss. Welche Platte
   dunkel ist, entscheidet isDarkTop() per WCAG-Kontrast und setzt .on-dark auf Badge UND Panel.
   Ausgenommen bleiben Elemente mit eigenem Hintergrund (Status-Badge, Alternative, Ueberbelegung) —
   die bringen ihren Kontrast selbst mit und wuerden durch Weiss schlechter. */
.fp3d-2d .fp3d-num:not(.has-status){color:#292524;}
.fp3d-2d .fp3d-num:not(.has-status) .fp3d-seat{border-color:rgba(41,37,36,.7);}
.fp3d-2d .fp3d-num:not(.has-status) .fp3d-seat.taken{background:#292524;border-color:#292524;}
.fp3d-2d .fp3d-panel .fp3d-res .t,
.fp3d-2d .fp3d-panel .fp3d-res .p:not(.is-overcap),
.fp3d-2d .fp3d-more:not(:empty){color:#292524;}
.fp3d-2d .fp3d-num.on-dark:not(.has-status){color:#fff;}
.fp3d-2d .fp3d-num.on-dark:not(.has-status) .fp3d-seat{border-color:rgba(255,255,255,.8);}
.fp3d-2d .fp3d-num.on-dark:not(.has-status) .fp3d-seat.taken{background:#fff;border-color:#fff;}
/* Zeilen tragen .on-dark selbst (applyTopContrast) — die Gruppenfarbe liegt als Lasur ueber der
   Platte, der Untergrund kann also pro Zeile ein anderer sein als beim Rest des Tisches.
   4 Klassen, damit die Regel die dunkle Grundfarbe (3 Klassen) sicher schlaegt. */
.fp3d-2d .fp3d-panel .fp3d-res.on-dark .t,
.fp3d-2d .fp3d-panel .fp3d-res.on-dark .p:not(.is-overcap){color:rgba(255,255,255,.88);}
.fp3d-2d .fp3d-panel .fp3d-res.on-dark:not(.alt):not(.has-alt) .n{color:#fff;}
/* „+N weitere" hat keine Gruppenfarbe → bleibt an der Entscheidung des Tisches. */
.fp3d-2d .fp3d-panel.on-dark .fp3d-more:not(:empty){color:rgba(255,255,255,.88);}
/* UNSCHÄRFE nach dem Zoomen: will-change:transform UND backdrop-filter erzeugen je eine eigene
   Kompositions-Ebene. Die wird einmal gerastert und danach per scale() vergrößert — der Text bleibt
   in der alten Auflösung stehen, bis irgendetwas ein Neuzeichnen auslöst. In 2D ist der Zoom-Faktor
   nach oben offen, deshalb fällt es hier besonders auf. Beides abschalten → der Browser rastert bei
   jedem Paint in der aktuellen Größe. Kostet nur beim Bewegen, wo ohnehin neu gezeichnet wird.
   Der Status-Hintergrund ist deckend, der backdrop-filter bringt dort ohnehin nichts. */
.fp3d-2d .fp3d-num{will-change:auto;backdrop-filter:none;-webkit-backdrop-filter:none;}
.fp3d-2d .fp3d-res.is-over{display:none;}
.fp3d-more{display:none;}
/* Höhe kommt als --moreh aus projectPanels (dort wird sie auch vom Budget abgezogen) — so gibt es
   nur EINEN Wert statt einer JS-Konstante, die zur CSS-Höhe passen muss. */
.fp3d-2d .fp3d-more:not(:empty){display:block;height:var(--moreh);line-height:var(--moreh);
  box-sizing:border-box;font-size:calc(var(--pxm) * 0.11);color:#57534e;font-family:Arial,sans-serif;text-align:center;}
.fp3d-hide-time .fp3d-res .t{display:none;}
.fp3d-hide-people .fp3d-res .p{display:none;}
.fp3d-hide-num .fp3d-num-label{display:none;}
.fp3d-hide-seats .fp3d-seats{display:none;}
.fp3d-hide-tablini .fp3d-tablini-chip{display:none;}
.fp3d-num-head{display:flex;align-items:center;justify-content:center;gap:5px;}
.fp3d-tablini-chip{display:inline-flex;align-items:center;gap:1px;font-size:10px;font-weight:700;color:#78746b;line-height:1;}
.fp3d-tip{position:fixed;z-index:10001;pointer-events:none;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border-color,#d5d3cd);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.18);padding:7px 10px;
  font-family:Arial,sans-serif;font-size:12px;color:#292524;white-space:nowrap;display:none;}
.fp3d-tip-head{display:flex;align-items:center;gap:6px;font-weight:700;margin-bottom:3px;}
.fp3d-tip-head .mdi{font-size:15px;color:#57534e;}
.fp3d-tip-head .mdi.tl1{color:#f59e0b;}
.fp3d-tip-head .mdi.tl2{color:#dc2626;}
.fp3d-tip-line{color:#57534e;font-size:11px;line-height:1.5;}
.fp3d-tablini-chip .mdi{font-size:13px;line-height:1;}
.fp3d-tablini-chip.lvl1{color:#f59e0b;}
.fp3d-tablini-chip.lvl2{color:#dc2626;}
.fp3d-num.has-status .fp3d-tablini-chip{color:rgba(255,255,255,.92);}
.fp3d-num.has-status .fp3d-tablini-chip.lvl1{color:#ffe08a;}
.fp3d-num.has-status .fp3d-tablini-chip.lvl2{color:#ffc2c2;}
.fp3d-num{position:absolute;left:0;top:0;transform-origin:0 0;font-family:Arial,sans-serif;font-weight:700;font-size:12px;
  color:#57534e;white-space:nowrap;letter-spacing:.2px;will-change:transform;text-align:center;
  border-radius:2px;padding:2px 8px;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
/* Belegt: kräftige Status-Farbe als Hintergrund (flach → wirkt stärker als die 3D-Tischplatte). */
.fp3d-num.has-status{background:var(--accent);color:#fff;}
.fp3d-seats{display:flex;gap:2px;justify-content:center;margin-top:2px;}
/* flex:0 0 auto = niemals schrumpfen: sonst verteilt Flexbox einen Engpass in Bruchteilen auf die
   Punkte und macht sie unterschiedlich breit. */
.fp3d-seat{flex:0 0 auto;width:7px;height:7px;border-radius:50%;border:1.5px solid rgba(87,83,78,.65);background:transparent;box-sizing:border-box;}
.fp3d-seat.taken{background:#57534e;border-color:#57534e;}
.fp3d-num.has-status .fp3d-seat{border-color:rgba(255,255,255,.85);}
.fp3d-num.has-status .fp3d-seat.taken{background:#fff;border-color:#fff;}
/* Schwebendes Raum-Label (Mehrraum). Übersicht: Klick → reinzoomen. Fokus: wird zum HUD mit −/Räume-Icon. */
.fp3d-roomlabel{position:absolute;left:0;top:0;transform-origin:50% 50%;font-family:Arial,sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.3px;color:#57534e;white-space:nowrap;pointer-events:auto;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:2px;padding:3px 10px;border-radius:14px;background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 8px rgba(0,0,0,.12);transition:background .12s,color .12s;}
.fp3d-roomlabel:not(.is-focused):hover{background:var(--accent,#008e66);color:#fff;}
/* Klick-Zoom aus → Labels sind reine Beschriftung (nicht klickbar). */
.fp3d-noclickzoom .fp3d-roomlabel{cursor:default;}
.fp3d-noclickzoom .fp3d-roomlabel:not(.is-focused):hover{background:rgba(255,255,255,.82);color:#57534e;}
.fp3d-rl-name{padding:0 2px;}
.fp3d-rl-btn{display:none;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;
  cursor:pointer;line-height:1;padding:3px;border-radius:9px;}
.fp3d-rl-btn .mdi{font-size:16px;line-height:1;}
.fp3d-rl-btn:hover{background:rgba(0,0,0,.10);}
/* Im Fokus über die projizierten Tischnummern-Badges (z-index bis ~100000) heben — sonst liegt das
   HUD samt Räume-Dropdown (Kind des Labels) darunter. */
.fp3d-roomlabel.is-focused{cursor:pointer;z-index:1000001;}
.fp3d-roomlabel.is-focused .fp3d-rl-btn{display:inline-flex;}
/* Drag übers HUD: hervorheben → „loslassen/halten = rauszoomen". */
.fp3d-roomlabel.is-focused.drag-hot{background:var(--accent,#008e66);color:#fff;box-shadow:0 0 0 3px rgba(0,142,102,.35);}
/* Im Fokus: nur das fokussierte Label (als HUD) zeigen, die anderen aus. */
/* Raumnamen aus: In der Übersicht besteht das Label NUR aus dem Namen → ganz weg. In einen Raum
   kommt man weiterhin per Klick auf die Raumfläche. Das Fokus-HUD bleibt unangetastet: dort sind
   „−" und der Raumwechsel Navigation, und der Name sagt, wo man gerade ist.
   !important, weil projectRoomLabels display pro Frame inline setzt. */
.fp3d-noroomnames .fp3d-roomlabel:not(.is-focused){display:none !important;}
.fp3d-focused .fp3d-roomlabel{display:none !important;}
.fp3d-focused .fp3d-roomlabel.is-focused{display:flex !important;}
/* Räume-Dropdown unter dem HUD. */
.fp3d-roommenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;z-index:30;
  background:rgba(255,255,255,.97);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.22);padding:4px;
  display:flex;flex-direction:column;gap:2px;min-width:130px;max-height:240px;overflow:auto;}
.fp3d-roommenu-item{border:none;background:transparent;text-align:left;padding:6px 10px;border-radius:6px;cursor:pointer;
  font-family:Arial,sans-serif;font-size:13px;color:#292524;white-space:nowrap;}
.fp3d-roommenu-item:hover{background:var(--accent,#008e66);color:#fff;}
.fp3d-roommenu-item.active{font-weight:700;color:var(--accent,#008e66);}
.fp3d-roommenu-item.active:hover{color:#fff;}

/* Rückfrage beim Erweitern über die Innen/Außen-Grenze. Erscheint am Finger/Zeiger, z-index knapp
   über den projizierten Tischnummern (~100000) und gehoverten Panels (1000000). */
/* pointer-events MUSS gesetzt sein: das Overlay ist pointer-events:none (damit der Plan darunter
   erreichbar bleibt), Klicks gingen sonst durch das Popup hindurch — sichtbar, aber wirkungslos.
   Gleiches Muster wie bei .fp3d-panel/.fp3d-num und dem Raum-Label. */
.fp3d-altask{pointer-events:auto;position:fixed;z-index:1000005;transform:translate(-50%,10px);min-width:170px;
  background:var(--white,#fff);border:1px solid var(--border-color,#d5d3cd);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.26);padding:6px;font-family:Arial,sans-serif;}
.fp3d-altask-title{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted,#78746b);padding:6px 8px 8px;}
.fp3d-altask-btn{display:block;width:100%;text-align:left;border:0;background:none;border-radius:8px;
  padding:10px;cursor:pointer;color:var(--gray-800,#292524);font-size:.9rem;line-height:1.2;}
.fp3d-altask-btn:hover{background:var(--gray-100,#f3f2ef);}
.fp3d-altask-btn.is-primary{color:var(--primary,#008e66);font-weight:700;}
.fp3d-altask-btn.is-primary:hover{background:var(--primary-light,rgba(0,142,102,.1));}

/* ----------------------------------------------------------------------------
   2. Ansicht und Bedienung (.fp3dv-*)
   Gerendert von Components/Controls/FloorPlan3DView.razor (Leiste, Zeit-Slider,
   Design-Menü, Editor, Popover) und von SimpleTableTile.razor (Innenleben der
   Kacheln in der „Einfach"-Ansicht). Einzelne Klassen setzt das JS zur Laufzeit
   dazu (.fp3dv-armed, .drag-src, .drop-*) oder erzeugt sie ganz (.fp3dv-sghost).
   ---------------------------------------------------------------------------- */
.fp3dv { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.fp3dv-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; flex: 0 0 auto; }
.fp3dv-select { width: 100px; padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--white); color: var(--text-color); font-size: 0.85rem; cursor: pointer; }
.fp3dv-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.fp3dv-seg:first-of-type { margin-left: auto; }
.fp3dv-segbtn { border: 0; background: var(--white); color: var(--text-muted); padding: 5px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.fp3dv-segbtn.active { background: var(--primary); color: #fff; }
.fp3dv-segbtn + .fp3dv-segbtn { border-left: 1px solid var(--border-color); }
.fp3dv-toggle { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 8px; background: var(--white); color: var(--text-muted); padding: 5px 9px; font-size: 1rem; cursor: pointer; }
.fp3dv-toggle.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Tageszeit-Slider (untere Zeile) */
/* Trägt jetzt auch die Ansichts-Steuerung (Einfach/2D/3D + Schalter), die früher oben stand.
   wrap + min-width am Slider: auf schmalen Geräten rutschen die Schalter in eine zweite Zeile,
   statt dass der Slider auf nahezu null zusammengedrückt wird. */
.fp3dv-timeslider { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 6px 12px; border-top: 1px solid var(--border-color); }
/* Trefferfläche: das Padding ist Teil des Sliders (pointerdown hängt am äußeren Element), also macht es
   den Griff vertikal ~32 px hoch, ohne die schlanke Optik zu ändern. Seitlich 14 px, damit die Griffe an
   den Enden komplett im Element liegen — sonst endet der Fangradius aus fp3dRange am Elementrand. */
.fp3dv-rslider { flex: 1 1 160px; min-width: 140px; padding: 13px 14px; cursor: pointer; touch-action: none; }
.fp3dv-rtrack { position: relative; height: 6px; border-radius: 3px; background: var(--gray-200); }
.fp3dv-rblock { position: absolute; top: 0; height: 100%; background: var(--primary); border-radius: 3px; cursor: grab; }
.fp3dv-rhandle { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--white); border: 3px solid var(--primary); transform: translate(-50%, -50%); cursor: ew-resize; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
/* Nur für Cursor/Hover — wer greifen darf, entscheidet der Pixelabstand in fp3dRange (sonst käme bei
   schmalem Fenster immer der zuletzt gezeichnete Griff zum Zug, egal welchem man näher ist). */
.fp3dv-rhandle::before { content: ""; position: absolute; inset: -11px -14px; border-radius: 14px; }
.fp3dv-rhandle-l { left: 0; }
.fp3dv-rhandle-r { left: 100%; }
/* Touch: größere Griffe und mehr Höhe — dort gibt es keinen Cursor, der das Ziel vorab verrät. */
@media (pointer: coarse) {
    .fp3dv-rslider { padding: 16px 16px; }
    .fp3dv-rhandle { width: 22px; height: 22px; }
}
/* --- Vollbild: schwebende Steuerleiste ------------------------------------------------------
   Normalfall: der Dock ist display:contents — die Leiste bleibt exakt das Flex-Kind von .fp3dv,
   das sie vorher war, kein Layout-Unterschied. Im Vollbild wird er zum Overlay am unteren Rand.
   pointer-events nur auf Pille und Leiste, damit der Dock den Plan darunter nicht blockiert;
   :hover greift trotzdem, denn Hover schlägt auf die Vorfahren durch. */
.fp3dv-bardock { display: contents; }
.fp3dv-bardock.is-max { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1000004; pointer-events: none; }
.fp3dv-bardock.is-max .fp3dv-timeslider {
    pointer-events: auto; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -4px 18px rgba(0,0,0,.14);
    transform: translateY(100%); transition: transform .18s ease;
}
/* Ausgefahren nur per Klick auf die Lasche (Klasse open) — bewusst NICHT per Hover: die Leiste würde
   sonst beim bloßen Vorbeiziehen aufspringen, mitten in einem Drag über den unteren Planrand. */
.fp3dv-bardock.is-max.open .fp3dv-timeslider { transform: none; }
/* Lasche: einziger dauerhaft sichtbarer Anker im Vollbild — im Footer liegt auch der Ansichts-
   Umschalter, der Weg zurück führt also zwingend hier vorbei. Deshalb gefüllt in der Primärfarbe
   statt dezent weiß: sie muss auf jedem Boden- und Tischton sofort ins Auge fallen. */
.fp3dv-barpeek {
    pointer-events: auto; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 28px;
    border: none; border-radius: 12px 12px 0 0;
    background: var(--primary); color: #fff;
    cursor: pointer; padding: 0; line-height: 1;
    box-shadow: 0 -3px 12px rgba(0,0,0,.28); transition: bottom .18s ease, background .12s ease;
}
.fp3dv-barpeek .mdi { font-size: 1.35rem; }
.fp3dv-barpeek:hover { background: var(--primary-hover); }
/* Ausgefahren rutscht die Lasche über die Leiste (bottom:100% = Oberkante des Docks, und das ist
   genau so hoch wie die Leiste) — sie bleibt sichtbar und ist der Weg zurück. */
.fp3dv-bardock.is-max.open .fp3dv-barpeek { bottom: 100%; }
/* Das Design-Menü öffnet sich nur aus der Leiste heraus, die ist dann also draußen — darüber setzen. */
.fp3dv.is-max .fp3dv-design { bottom: 96px; }

.fp3dv-tnow { flex: 0 0 auto; min-width: 104px; text-align: center; white-space: nowrap; border: 1px solid var(--border-color); border-radius: 8px; background: var(--white); color: var(--text-muted); font-weight: 600; font-size: 0.85rem; padding: 5px 12px; cursor: pointer; }
.fp3dv-tnow.is-pinned { color: #fff; background: var(--danger); border-color: var(--danger); }
/* Unten rechts verankert, weil der Paletten-Knopf jetzt in der unteren Leiste sitzt (vorher oben).
   z-index über den projizierten Tischnummern (~100000) und dem Raum-HUD (1000001). */
.fp3dv-design { position: absolute; bottom: 52px; right: 10px; z-index: 1000002; background: var(--white); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; width: 250px; max-height: calc(100% - 96px); overflow-y: auto; }
.fp3dv-design-title { font-weight: 700; color: var(--text-color); font-size: 0.95rem; margin-bottom: 4px; }
.fp3dv-design-sec { font-size: 0.7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-top: 8px; padding-bottom: 3px; border-bottom: 1px solid var(--gray-200); }
.fp3dv-design-sec:first-of-type { margin-top: 2px; }
.fp3dv-design-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; font-size: 0.85rem; color: var(--text-color); }
.fp3dv-design-row > span:first-child { flex: 0 0 auto; }
.fp3dv-design-row input[type=color] { width: 38px; height: 26px; border: 1px solid var(--border-color); border-radius: 6px; background: none; cursor: pointer; padding: 0; }
.fp3dv-design-row .fp3dv-dsel { flex: 0 1 auto; min-width: 130px; }
.fp3dv-design-row .tx-option-group { margin-left: auto; }
.fp3dv-design-row .tx-switch { margin-left: auto; }
.fp3dv-swatches { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.fp3dv-swatch { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--border-color); cursor: pointer; padding: 0; transition: transform .1s; }
.fp3dv-swatch:hover { transform: scale(1.12); }
.fp3dv-swatch.active { box-shadow: 0 0 0 2px var(--primary); }
/* Objekt-Katalog (jetzt in der Editor-Sidebar) */
.fp3dv-objhint { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 4px; }
.fp3dv-objgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 2px; }
.fp3dv-objtile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--white); color: var(--text-color); cursor: pointer; transition: all .12s; }
.fp3dv-objtile:hover { border-color: var(--primary); background: var(--primary-light); }
.fp3dv-objtile i { font-size: 1.5rem; color: var(--text-muted); }
.fp3dv-objtile:hover i { color: var(--primary); }
.fp3dv-objtile span { font-size: 0.68rem; text-align: center; line-height: 1.1; }
.fp3dv-canvas { flex: 1 1 auto; min-height: 0; }
.fp3dv-canvas canvas { display: block; width: 100%; height: 100%; }
/* Flache „Einfach"-Ansicht: EIN gemeinsamer Plan - Räume + Tische an echter Position/Größe. */
.fp3dv-simple { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 12px; background: var(--gray-50); display: flex; flex-direction: column; }
/* Plan-Bereich füllt die Resthöhe; der Plan wird darin per Container-Query so skaliert, dass er IMMER
   komplett hineinpasst (contain) - dadurch responsiv für Tablet/Mobile ohne Scrollen. */
.fp3dv-splan-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; container-type: size; overflow: hidden; touch-action: none; }
.fp3dv-splan { position: relative; aspect-ratio: var(--ar); margin: auto; max-height: 100%;
               width: 100%; /* Fallback, falls Container-Queries fehlen */
               /* --planh: JS friert bei offener Tastatur die Höhe VOR der Tastatur ein, damit der Plan
                  nicht mit dem geschrumpften Viewport zusammengestaucht wird (sonst 100cqh = Fit-Höhe). */
               width: min(100%, 1600px, calc(var(--planh, 100cqh) * var(--ar))); }
.fp3dv-sroom { position: absolute; box-sizing: border-box; background: var(--gray-100); border: 1px solid var(--border-color); z-index: 0; }
.fp3dv-sroom.is-outside { background: rgba(46,125,50,.08); border-color: rgba(46,125,50,.22); }
.fp3dv-sroom-title { position: absolute; z-index: 1; transform: translateY(1px); padding: 8px 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); pointer-events: none; white-space: nowrap; }
.fp3dv-stable { position: absolute; z-index: 2; transform: translate(-50%, -50%); box-sizing: border-box; min-width: 30px; min-height: 30px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--white); color: var(--gray-800); cursor: pointer; padding: 2px 4px; line-height: 1.1; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .1s, transform .05s; }
.fp3dv-stable.is-round { border-radius: 50%; }
/* Such-Highlight: aktive Suche dimmt alle Tische; Treffer bleiben voll sichtbar + leuchten (Primary-Ring). */
.fp3dv-simple.searching .fp3dv-stable { opacity: .32; filter: grayscale(.4); }
.fp3dv-simple.searching .fp3dv-stable.is-hit { opacity: 1; filter: none; z-index: 6; box-shadow: 0 0 0 3px var(--primary), 0 4px 14px rgba(0,142,102,.35); }
.fp3dv-stable:hover { box-shadow: 0 1px 4px rgba(0,0,0,.16); z-index: 5; }
.fp3dv-stable:active { transform: translate(-50%, -50%) scale(.95); }
/* Kachel-Text über die Schriftgröße gegen den Zoom skalieren (--tz vom Zoom-Modul): wächst beim Reinzoomen
   nur ~√Zoom UND kürzt nicht mit „…", weil das kleinere Layout-Font mehr Zeichen fasst. */
.fp3dv-stable-n { font-weight: 700; font-size: calc(0.82rem * var(--tz, 1)); }
/* Gestapelte Reservierungszeilen im Tisch (Zeit + Name), laufende hervorgehoben, weitere als „+N". */
.fp3dv-stable-list { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 1px; overflow: hidden; }
.fp3dv-srow { display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; font-size: calc(0.6rem * var(--tz, 1)); line-height: 1.25; color: var(--text-muted); }
.fp3dv-srow-t { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.fp3dv-srow-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp3dv-srow-p { flex: 0 0 auto; font-weight: 600; color: var(--text-color); } /* Personenzahl der Res */
.fp3dv-srow.cur { color: var(--gray-800); font-weight: 600; }
.fp3dv-srow.cur .fp3dv-srow-p { color: var(--gray-800); }
.fp3dv-srow.more { color: var(--text-muted); font-weight: 700; }
/* Alt/Stamm-Kennzeichnung wie 2D/3D-Plan: Alt-Tisch → Name amber; Stamm-Res mit Alternative → Name gold. */
.fp3dv-srow.alt .fp3dv-srow-n { background: rgba(245,158,11,.9); color: #292524; padding: 0 4px; border-radius: 3px; }
.fp3dv-srow.has-alt .fp3dv-srow-n { background: #fff; color: #F6BE00; padding: 0 4px; border-radius: 3px; }
/* max. Personen des Tisches - dezent oben rechts, damit die Tischnummer ruhig bleibt. */
.fp3dv-stable-cap { position: absolute; top: 6px; right: 6px; font-size: calc(0.8rem * var(--tz, 1)); font-weight: 500; color: var(--text-muted); opacity: .5; line-height: 1; pointer-events: none; }
.fp3dv-stable.occupied .fp3dv-srow-p, .fp3dv-stable.occupied .fp3dv-stable-cap { color: rgba(255,255,255,.85); }
/* Reservierungs-Popover (bei mehreren Res am Tisch) - große, touch-taugliche Zeilen. */
/* Reiner Event-Delegations-Host für den Popover in der Canvas-Ansicht — soll das Layout nicht anfassen
   (die Kinder sind position:fixed, die DOM-Verschachtelung bleibt fürs Delegieren erhalten). */
.fp3dv-pophost { display: contents; }
/* Der Popover liegt jetzt auch über dem Canvas-Plan, und `.fp3dv` ist position:relative OHNE z-index
   (= kein eigener Stacking-Context) — die Plan-Elemente konkurrieren also global. Deren Oberkante:
   projizierte Tischnummern bis ~100000 (pro Frame inline gesetzt), `.fp3d-panel:hover` 1000000
   !important, fokussiertes Raum-Label 1000001. Deshalb knapp DARÜBER — und weiterhin klar unter
   Toasts (10010000) und Guided Tour, die alles überdecken dürfen. */
.fp3dv-pop-backdrop { position: fixed; inset: 0; z-index: 1000002; }
.fp3dv-pop { position: fixed; z-index: 1000003; transform: translate(-50%, 12px); min-width: 210px; max-width: 320px; max-height: 60vh; overflow-y: auto; background: var(--white); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.26); padding: 6px; }
.fp3dv-pop-head { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 6px 8px 8px; }
.fp3dv-pop-row { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; border-radius: 8px; padding: 11px 10px; cursor: pointer; touch-action: none; color: var(--gray-800); font-size: 0.9rem; line-height: 1.2; }
.fp3dv-pop-row.fp3dv-armed { box-shadow: inset 0 0 0 2px var(--primary); }
.fp3dv-pop-row + .fp3dv-pop-row { border-top: 1px solid var(--gray-100); }
.fp3dv-pop-row:hover { background: var(--gray-100); }
.fp3dv-pop-row.cur { background: var(--primary-light); }
.fp3dv-pop-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-color); flex: 0 0 auto; }
.fp3dv-pop-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp3dv-pop-pax { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); font-size: 0.82rem; }
.fp3dv-pop-pax i { font-size: 0.95rem; }
.fp3dv-pop-new { color: var(--primary); font-weight: 600; margin-top: 2px; border-top: 1px solid var(--gray-200); }
.fp3dv-pop-new .fp3dv-pop-time { color: var(--primary); }
.fp3dv-pop-ci { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: var(--primary); background: var(--primary-light); cursor: pointer; font-size: 1.15rem; }
.fp3dv-pop-ci:hover { background: var(--primary); color: #fff; }
.fp3dv-pop-co { color: var(--text-muted); background: var(--gray-100); }
.fp3dv-pop-co:hover { background: var(--gray-500); color: #fff; }
.fp3dv-stable.occupied .fp3dv-srow { color: rgba(255,255,255,.82); }
.fp3dv-stable.occupied .fp3dv-srow.cur { color: #fff; }
/* reserviert = farbiger Rand + gedämpfter Text; besetzt = gefüllt; erledigt = blass. Frei bleibt weiß. */
.fp3dv-stable.reserved { border-color: var(--stat); border-width: 2px; }
.fp3dv-stable.reserved .fp3dv-stable-n { color: var(--text-muted); }
.fp3dv-stable.reserved .fp3dv-stable-s { color: var(--text-muted); }
.fp3dv-stable.occupied { background: var(--stat); border-color: var(--stat); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.fp3dv-stable.occupied .fp3dv-stable-s { color: rgba(255,255,255,.85); }
.fp3dv-stable.done { background: var(--gray-200); border-color: var(--gray-300); color: var(--text-muted); }
.fp3dv-stable.done .fp3dv-stable-s { color: var(--text-muted); }
/* Drag&Drop: Tische mit Reservierung sind ziehbar; Ziel-Markierung grün(frei)/orange(belegt=Tausch)/blau(unter Zeiger). */
.fp3dv-stable[data-res-id] { touch-action: none; }
.fp3dv-stable.drag-src { opacity: .4; }
.fp3dv-stable.fp3dv-armed { box-shadow: 0 0 0 3px var(--primary); z-index: 4; } /* „Halten"-Cue: Res-Drag scharf */
/* 2. Halte-Stufe: ⚡ = der Drag hängt den Zieltisch an, statt zu verschieben. Blau wie der
   Extend-Ghost (.fp3dv-sghost.extend), damit Cue und Ghost dieselbe Sprache sprechen. */
.fp3dv-armed.fp3dv-extend-armed { box-shadow: 0 0 0 3px var(--info); z-index: 5; }
/* Popover-Zeilen liegen in einem scrollenden Container → Ring nach INNEN, sonst wird er beschnitten. */
.fp3dv-pop-row.fp3dv-extend-armed { box-shadow: inset 0 0 0 2px var(--info); }
.fp3dv-extend-armed::after {
    content: "\F0241"; /* mdi-flash */
    font-family: "Material Design Icons"; font-weight: normal; position: absolute; top: -7px; right: -7px; z-index: 6;
    width: 20px; height: 20px; border-radius: 50%; background: var(--info); color: var(--white);
    font-size: 14px; line-height: 20px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.35);
    pointer-events: none;
}
.fp3dv-stable.selected { box-shadow: 0 0 0 3px var(--primary); background: var(--primary-light); z-index: 3; } /* im Verschieben/Alternative-Modus gewählt */
.fp3dv-stable.drop-free { box-shadow: 0 0 0 2px var(--success); }
.fp3dv-stable.drop-occ { box-shadow: 0 0 0 2px var(--warning); }
.fp3dv-stable.drop-hover { box-shadow: 0 0 0 3px var(--primary); z-index: 4; }
/* Drag-Ghost wie im 2D/3D-Plan: Name · Personen + Ziel-Tisch mit Auslastungsbalken; Varianten swap/alt/extend. */
.fp3dv-sghost { position: fixed; left: 0; top: 0; transform: translate(-50%, -130%); z-index: 100000; pointer-events: none; font-family: Arial, sans-serif; font-size: 12px; color: #292524; background: rgba(255,255,255,.96); border: 2px solid var(--primary); border-radius: 10px; padding: 5px 9px; box-shadow: 0 6px 16px rgba(0,0,0,.28); white-space: nowrap; width: 172px; box-sizing: border-box; }
.fp3dv-sghost.swap { border-color: #f59e0b; }
.fp3dv-sghost.alt { border-color: #7c6bb0; }
.fp3dv-sghost.extend { border-color: #0284c7; }
.fp3dv-sghost.remove { border-color: #dc2626; }
.fp3dv-sghost.towl { border-color: #f59e0b; }
.fp3dv-sghost .fg-name { display: flex; align-items: baseline; font-weight: 700; line-height: 1.3; min-width: 0; }
.fp3dv-sghost .fg-n1, .fp3dv-sghost .fg-n2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.fp3dv-sghost .fg-mid { flex: 0 0 auto; white-space: pre; font-weight: 600; color: #57534e; }
.fp3dv-sghost .fg-target { display: flex; align-items: center; gap: 8px; min-height: 16px; margin-top: 3px; font-weight: 600; color: #57534e; }
.fp3dv-sghost.no-target .fg-target { color: #a8a49c; font-weight: 500; }
.fp3dv-sghost .fg-tbl { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.fp3dv-sghost .fg-fit { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.fp3dv-sghost .fg-bar { width: 34px; height: 6px; border-radius: 3px; background: #e8e6e1; overflow: hidden; flex: 0 0 auto; }
.fp3dv-sghost .fg-bar > i { display: block; height: 100%; width: 0; background: #78746b; transition: width .08s; }
.fp3dv-sghost .fg-bar.good > i { background: #2e7d32; }
.fp3dv-sghost .fg-bar.low > i { background: #f59e0b; }
.fp3dv-sghost .fg-bar.over > i { background: #dc2626; }
.fp3dv-sghost .fg-txt { font-size: 11px; color: #57534e; min-width: 26px; text-align: right; }
/* „Nicht platziert"-Leiste: feste untere Leiste (scrollt intern), Tische fließend; klick-/ziehbar + Drop-Ziel. */
.fp3dv-stray { flex: 0 0 auto; max-height: 34%; overflow-y: auto; margin-top: 12px; padding: 10px 12px; background: var(--gray-100); border: 1px solid var(--border-color); }
.fp3dv-stray-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.fp3dv-stray-items { display: flex; flex-wrap: wrap; gap: 10px; }
.fp3dv-stray-items .fp3dv-stable { position: static; transform: none; width: 74px; height: 74px; }
.fp3dv-stray-items .fp3dv-stable:active { transform: scale(.95); }
/* Warteliste-Leiste (unten): Chips ziehbar (→ Tisch = zuweisen); Leiste = Drop-Zone (Tisch-Res → Warteliste). */
.fp3dv-wl { flex: 0 0 auto; max-height: 30%; overflow-y: auto; margin-top: 8px; padding: 8px 10px; background: var(--gray-100); border: 1px solid var(--border-color); border-radius: 10px; }
/* Drop-Feedback: Die Einfach-Ansicht markiert Zonen mit .drop-target, der Canvas mit
   .res-timestrip-hot (zwei Module, zwei Konventionen) — beide müssen gleich aussehen. */
.fp3dv-wl.drop-target,
.fp3dv-wl.res-timestrip-hot { box-shadow: inset 0 0 0 2px var(--warning); background: rgba(245,158,11,.1); }
/* Wartelisten-Leiste unter dem 2D/3D-Plan. Leer → weg, damit sie keine Planfläche frisst und
   nicht als elementFromPoint-Treffer im Weg steht. */
.fp3dv-wlbar { flex: 0 0 auto; padding: 0 10px 8px; }
.fp3dv-wlbar:empty { display: none; }
.fp3dv-wlbar .fp3dv-wl { margin-top: 0; max-height: 22vh; }
@media (max-width: 768px) { .fp3dv-wlbar .fp3dv-wl { max-height: 30vh; } }
.fp3dv-wl-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.fp3dv-wl-items { display: flex; flex-wrap: wrap; gap: 6px; }
.fp3dv-wl-chip { display: inline-flex; align-items: baseline; gap: 5px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--white); color: var(--gray-800); cursor: pointer; padding: 4px 10px; font-size: 0.8rem; touch-action: none; }
.fp3dv-wl-chip:hover { border-color: var(--primary); background: var(--primary-light); }
.fp3dv-wl-chip.drag-src { opacity: .4; }
.fp3dv-wl-t { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.fp3dv-wl-n { font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp3dv-wl-p { color: var(--text-muted); font-size: 0.72rem; }
@media (max-width: 768px) {
    .fp3dv-simple { padding: 8px; }
    .fp3dv-sroom-title { font-size: 0.58rem; letter-spacing: 0.08em; padding: 4px 6px; }
    .fp3dv-stable-n { font-size: calc(0.72rem * var(--tz, 1)); }
    .fp3dv-srow { font-size: calc(0.5rem * var(--tz, 1)); }
    .fp3dv-stray-items .fp3dv-stable { width: 60px; height: 60px; }
}
.fp3dv-edit { flex: 1 1 auto; min-height: 0; min-width: 0; position: relative; }
/* Mini-Aktionen-Chip am selektierten Element (Editor) */
.fp3dv-chip { position: absolute; z-index: 25; display: flex; gap: 2px; background: var(--white); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,.18); padding: 2px; }
.fp3dv-chip button { border: 0; background: none; cursor: pointer; padding: 4px 6px; border-radius: 6px; color: var(--text-muted); font-size: 1rem; line-height: 1; display: inline-flex; }
.fp3dv-chip button:hover { background: var(--gray-100); color: var(--text-color); }
.fp3dv-chip button[data-act="delete"]:hover { background: rgba(220,38,38,.12); color: var(--danger); }
/* Editor: Canvas + rechte Eigenschaften-Sidebar */
.fp3dv-editmain { display: flex; flex: 1 1 auto; min-height: 0; }
.fp3dv-editpanel { order: -1; flex: 0 0 260px; border-right: 1px solid var(--border-color); background: var(--white); overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fp3dv-panel-title { font-weight: 700; color: var(--text-color); font-size: 0.95rem; margin-bottom: 2px; }
.fp3dv-prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.85rem; color: var(--text-color); min-height: 30px; }
.fp3dv-prow .fp3dv-select { width: auto; flex: 0 1 150px; }
.fp3dv-prow .fp3dv-psel { flex: 0 1 160px; min-width: 120px; }
.fp3dv-tools { display: inline-flex; align-items: center; gap: 6px; }
.fp3dv-tools .fp3dv-toolreset { margin-left: 4px; }
.fp3dv-btnrow { display: flex; flex-wrap: wrap; gap: 6px; }
.fp3dv-editpanel .btn { justify-content: flex-start; }
.fp3dv-pdel { color: var(--danger); }
.fp3dv-panel-empty { font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }
/* „Nicht platziert"-Tray (oben in der Editor-Sidebar) */
.fp3dv-tray { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--gray-200); max-height: 45%; overflow-y: auto; }
.fp3dv-tray-hint { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 2px; }
.fp3dv-tray-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 8px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--white); color: var(--text-color); cursor: pointer; font-size: 0.82rem; text-align: left; }
.fp3dv-tray-item:hover { border-color: var(--primary); background: var(--primary-light); }
.fp3dv-tray-item > span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp3dv-tray-item small { color: var(--text-muted); }
.fp3dv-tray-item > i:first-child { color: var(--text-muted); font-size: 1rem; }
.fp3dv-tray-item.is-room > i:first-child { color: var(--primary); }
.fp3dv-tray-add { color: var(--primary); margin-left: auto; }
.fp3dv-tray-auto { margin-top: 6px; justify-content: center !important; }
.fp3dv-editpanel .fp3dv-swatches { margin-left: 0; justify-content: flex-start; }
.fp3dv-editpanel .fp3dv-objgrid { grid-template-columns: repeat(2, 1fr); margin-top: 4px; }
@media (max-width: 768px) {
    .fp3dv-editmain { flex-direction: column; }
    .fp3dv-editpanel { flex: 0 0 auto; max-height: 42%; border-right: none; border-bottom: 1px solid var(--border-color); }
}
.fp3dv-editbar { gap: 12px; }
.fp3dv-edittitle { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-color); }
.fp3dv-areabtns { display: flex; align-items: center; gap: 6px; }
.fp3dv-edithint { font-size: 0.8rem; color: var(--text-muted); }
.fp3dv-floorcolor { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); cursor: pointer; }
.fp3dv-floorcolor input[type=color] { width: 28px; height: 24px; border: 1px solid var(--border-color); border-radius: 6px; background: none; cursor: pointer; padding: 0; }
.fp3dv-editactions { margin-left: auto; display: flex; gap: 8px; }
/* Verschieben/Alternative-Auswahlleiste (unten überlagert) */
.fp3dv-movebar { position: absolute; left: 12px; right: 12px; top: 52px; z-index: 1000001; display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--white); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.fp3dv-move-info { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.fp3dv-move-info > i { font-size: 1.3rem; color: var(--primary); }
.fp3dv-move-meta { display: flex; flex-direction: column; line-height: 1.15; }
.fp3dv-move-title { font-weight: 600; color: var(--text-color); font-size: 0.85rem; }
.fp3dv-move-type { font-size: 0.72rem; color: var(--text-muted); }
.fp3dv-move-chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fp3dv-move-hint { font-size: 0.8rem; color: var(--text-muted); }
.fp3dv-move-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid var(--primary); border-radius: 999px; background: var(--primary-light); color: var(--primary); font-size: 0.8rem; cursor: pointer; }
.fp3dv-move-chip i { font-size: 0.85rem; }
.fp3dv-move-chip:hover { background: var(--primary); color: #fff; }
.fp3dv-move-fit { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.fp3dv-move-bar { width: 40px; height: 6px; border-radius: 3px; background: var(--gray-200); overflow: hidden; }
.fp3dv-move-bar > i { display: block; height: 100%; width: 0; background: var(--gray-500); transition: width .1s; }
.fp3dv-move-bar.good > i { background: var(--success); }
.fp3dv-move-bar.low > i { background: var(--warning); }
.fp3dv-move-bar.over > i { background: var(--danger); }
.fp3dv-move-fittxt { font-size: 0.78rem; color: var(--text-muted); min-width: 30px; text-align: right; }
.fp3dv-move-actions { flex: 0 0 auto; display: flex; gap: 8px; }
/* Schwebende Bestätigen-Pille direkt am zuletzt getippten Tisch (rechts neben dem Tap/Finger):
   Auslastung (Balken + Personen/Plätze) + runder Bestätigen-Button - die wichtigsten Infos vor Ort. */
/* z-index über den projizierten Tischnummern-Badges (bis ~100000, floorplan3d.js) und gehoverten Panels (1000000). */
.fp3dv-move-confirm { position: fixed; z-index: 1000001; transform: translate(16px, -50%); }
.fp3dv-move-confirmbtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--primary); color: #fff; font-size: 1.2rem; cursor: pointer; flex: 0 0 auto; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.fp3dv-move-confirmbtn:hover { background: var(--primary-hover); }
@media (max-width: 768px) {
    .fp3dv-movebar { left: 6px; right: 6px; top: 46px; gap: 8px; padding: 6px 8px; }
}