/* SBM-Landing V5 in Umbraco – neue Szenen in „Funktionen im Detail“ (#galerie, Owner 23.10.2026: weitere Kernfunktionen
   „görsellerle anlatarak“). Aufbau wie die V5-Filme: freigestellte 3D-Objekte (img.film__l) + Glas-Karten, alle Maße in cqw
   (Breite der Szene) → gleiche Komposition auf jeder Breite. Markup: .claude/dev-scripts/sbm-v5-export/galerie_plan.py.
   Ablauf: vor dem Sichtkontakt und bei reduzierter Bewegung zeigt jede Szene ihr Schlussbild (V5-Regel in premium.css);
   sobald sichtbar (.is-in), bauen sich die Teile mit --d (Sekunden) nacheinander auf – einmal, dann bleibt das Schlussbild. */
.gx{--T:9s}
.gx .gx-card{position:absolute;box-sizing:border-box;padding:2.6cqw;display:flex;flex-direction:column;gap:1.5cqw;border-radius:2.8cqw;
  background:linear-gradient(160deg,#fff,rgba(255,255,255,.94));
  box-shadow:inset 0 0 0 .12cqw rgba(255,255,255,.95),0 2.6cqw 4.4cqw -1.6cqw rgba(23,26,51,.22),0 .2cqw .5cqw rgba(23,26,51,.06)}
.gx .gx-hd{display:flex;align-items:center;gap:1.4cqw;height:5cqw;padding:0 .3cqw}
.gx .gx-hd .sbm-mark{flex:none;width:3.6cqw;height:3.6cqw;border-radius:1cqw}
.gx .gx-hd b{min-width:0;font:600 max(12px,2.1cqw)/1.1 var(--font-ui);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx .gx-row{display:flex;align-items:center;gap:1.4cqw;height:7.2cqw;padding:0 1.8cqw;border-radius:1.8cqw;background:#fff;
  box-shadow:0 .15cqw .4cqw rgba(23,26,51,.07),0 0 0 .1cqw rgba(23,26,51,.06)}
.gx .gx-card--sm .gx-row{height:6.6cqw}
.gx .gx-tx{flex:0 1 auto;min-width:0;font:600 max(11px,1.95cqw)/1.2 var(--font-ui);letter-spacing:-.005em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx .gx-row .film-ok{margin-left:auto;width:3.2cqw;height:3.2cqw}
.gx .gx-row .gx-pill + .film-ok{margin-left:0}
.gx .gx-row .film-ok svg{width:1.9cqw;height:1.9cqw}
.gx .gx-pill{flex:none;margin-left:auto;display:inline-flex;align-items:center;height:max(18px,3.2cqw);padding:0 max(7px,1.3cqw);border-radius:99px;
  font:600 max(10px,1.65cqw)/1 var(--font-ui);white-space:nowrap;background:var(--bg-soft);color:var(--ink-2);box-shadow:inset 0 0 0 .1cqw var(--line)}
.gx .gx-pill--blue{background:var(--c-blue-bg);color:var(--blue);box-shadow:inset 0 0 0 .1cqw var(--c-blue-soft)}
.gx .gx-pill--mint{background:var(--c-mint-bg);color:var(--c-mint);box-shadow:inset 0 0 0 .1cqw var(--c-mint-soft)}
.gx .gx-pill--warn{background:var(--warn-bg);color:var(--warn);box-shadow:inset 0 0 0 .1cqw rgba(226,149,31,.25)}
.gx .gx-dot{flex:none;width:1.7cqw;height:1.7cqw;border-radius:50%}
.gx .gx-dot--b{background:radial-gradient(circle at 35% 30%,#6f9cf0,var(--blue) 70%);box-shadow:0 0 0 .4cqw rgba(7,78,185,.12)}
.gx .gx-dot--m{background:radial-gradient(circle at 35% 30%,#5fd3a8,var(--c-mint) 70%);box-shadow:0 0 0 .4cqw rgba(15,122,87,.12)}
.gx .gx-dot--y{background:radial-gradient(circle at 35% 30%,#f7c768,#e2951f 70%);box-shadow:0 0 0 .4cqw rgba(226,149,31,.16)}
/* freie Etiketten in der Szene */
.gx .gx-tag{position:absolute;z-index:2;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:1cqw;height:max(20px,3.8cqw);padding:0 max(9px,1.6cqw);border-radius:99px;
  background:#fff;box-shadow:0 .6cqw 1.6cqw -.6cqw rgba(23,26,51,.3),0 0 0 .1cqw rgba(23,26,51,.07);font:600 max(10.5px,1.75cqw)/1 var(--font-ui);color:var(--ink);white-space:nowrap}
.gx .gx-tag--blue{color:var(--blue)}
.gx .gx-tag--mint,.gx .gx-tag--ok{color:var(--c-mint)}
.gx .gx-tag .film-ok{width:2.6cqw;height:2.6cqw}
.gx .gx-tag .film-ok svg{width:1.6cqw;height:1.6cqw}
/* Verbindungen, Lichtpunkt, Häkchen */
.gx .gx-line{position:absolute;height:.3cqw;border-radius:.2cqw;background:linear-gradient(90deg,rgba(143,179,242,.15),var(--blue-300),rgba(143,179,242,.15))}
.gx .gx-line--v{width:.3cqw;background:linear-gradient(180deg,rgba(143,179,242,.15),var(--blue-300),rgba(143,179,242,.15))}
.gx .gx-ok{position:absolute;z-index:3;width:4.4cqw;height:4.4cqw;transform:translate(-50%,-50%)}
.gx .gx-ok svg{width:2.6cqw;height:2.6cqw}
/* Platzhalter auf der Vorlage */
.gx .gx-ph{position:absolute;z-index:2;transform:translate(-50%,-50%);padding:.8cqw 1.3cqw;border-radius:.9cqw;background:var(--c-blue-bg);color:var(--blue);
  box-shadow:inset 0 0 0 .1cqw var(--c-blue-soft),0 .6cqw 1.2cqw -.6cqw rgba(7,78,185,.35);font:600 max(10px,1.7cqw)/1 var(--font-ui);white-space:nowrap}
/* Schichtplan */
.gx .gx-grid{display:grid;grid-template-columns:4.4cqw repeat(7,minmax(0,1fr));gap:1cqw;align-items:center}
.gx .gx-dh{font:600 max(10px,1.6cqw)/1 var(--font-ui);color:var(--mut);text-align:center}
.gx .gx-av{width:4.2cqw;height:4.2cqw;border-radius:50%;background:var(--c-blue-bg);box-shadow:inset 0 0 0 1cqw #fff,0 0 0 .12cqw var(--c-blue-soft)}
.gx .gx-sh{display:grid;place-items:center;height:5.8cqw;border-radius:1.2cqw;font:700 max(10px,1.7cqw)/1 var(--font-ui)}
.gx .gx-sh--f{background:var(--c-blue-bg);color:var(--blue);box-shadow:inset 0 0 0 .1cqw var(--c-blue-soft)}
.gx .gx-sh--s{background:var(--c-indigo-bg);color:var(--c-indigo);box-shadow:inset 0 0 0 .1cqw var(--c-indigo-soft)}
.gx .gx-sh--n{background:var(--navy-900);color:#fff}
.gx .gx-sh--free{box-shadow:inset 0 0 0 .14cqw rgba(47,111,224,.22)}
/* Fortschrittsbalken (Update) */
.gx .gx-prog{height:2cqw;margin:.6cqw .3cqw .4cqw;border-radius:99px;background:var(--bg-soft);overflow:hidden;box-shadow:inset 0 0 0 .1cqw var(--line)}
.gx .gx-prog i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue-500),var(--blue))}

/* ---------- Ablauf (einmal, wenn sichtbar) ---------- */
.js .film.is-in.gx .gx-a{animation:gx-up .7s var(--ease) both;animation-delay:calc(var(--d,0) * 1s)}
.js .film.is-in.gx .gx-spark{animation:gx-spark 1.5s ease-in-out .5s both}
.js .film.is-in.gx .gx-prog i{animation:gx-prog 1.3s var(--ease) .7s both}
.js .film.is-in.gx .gx-shackle{animation:gx-shackle .6s var(--ease) 1.5s both}
.js .film.is-in.gx .gx-ok{animation:gx-pop .5s var(--ease) 2.2s both}
@keyframes gx-up{from{opacity:0;translate:0 1.8cqw}to{opacity:1;translate:0 0}}
@keyframes gx-spark{0%{opacity:0;translate:-6cqw 0}25%{opacity:1}100%{opacity:0;translate:6cqw 0}}
@keyframes gx-prog{from{width:0}to{width:100%}}
@keyframes gx-shackle{from{translate:0 -3.4cqw}to{translate:0 0}}
@keyframes gx-pop{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
.gx .gx-spark{opacity:0}

/* Dashboard (Owner 23.10.2026): Chips „Rot: unter 1 Monat“ / „Gelb: unter 2 Monaten“ in den Farben des Diagramms */
#galerie .gal__facts .ui-chip:has(.ui-dot--bad){background:var(--bad-bg);color:var(--bad);box-shadow:inset 0 0 0 1px rgba(184,53,50,.22)}
#galerie .gal__facts .ui-chip:has(.ui-dot--warn){background:var(--warn-bg);color:var(--c-sand);box-shadow:inset 0 0 0 1px rgba(185,116,9,.26)}
#galerie .gal__facts .ui-dot--bad{background:radial-gradient(circle at 35% 30%,#f2726b,#d23a33 70%)}
#galerie .gal__facts .ui-dot--warn{background:radial-gradient(circle at 35% 30%,#f7c768,#e2951f 70%)}