/* Aingel Variante 13 – Hero „Live-Bearbeitung“ (Agenten), wörtlich übernommen von Variante 2 „Multiplayer“
   (Owner 14.10.: „mache zudem bei agenten einen ganz anderen hero, übernehme den hero von V2“): vier farbige
   Glas-Cursor bearbeiten die Überschrift, der orange Cursor - ihr - gibt frei. Ohne JavaScript steht der
   Endzustand (alle Marken gesetzt, „Freigegeben“).
   Token-Brücke zu den Namen aus Variante 2 (die Werte sind in beiden Varianten identisch, nur anders benannt) -
   so bleibt die Datei sonst unverändert und folgt bei einer Markenänderung automatisch den echten Tokens. */
[data-live] {
  --c-code: var(--rolle-code); --c-text: var(--rolle-text); --c-gestaltung: var(--rolle-gestaltung);
  --c-pruefung: var(--rolle-pruefung); --c-mensch: var(--rolle-du); --glas-mensch: var(--glas-du);
}

.live__titel {
  position: relative; margin-top: 4px;
  font-size: clamp(2.25rem, 7.2vw, 6.25rem); line-height: .98; letter-spacing: -0.04em; font-weight: 600;
  text-wrap: nowrap;
}
.live__titel .zeile { position: relative; display: block; width: fit-content; padding: .03em 0; }
.live__titel .wort { position: relative; display: inline-block; isolation: isolate; }

/* Marken – Fortschritt 0..1 über Variablen am Hero (--p-…), ohne JavaScript 1 */
.m { position: absolute; pointer-events: none; opacity: var(--p-aus, 1); }
.m-linie {
  left: 0; right: .08em; bottom: -.02em; height: max(3px, .035em); border-radius: 2px;
  background: var(--c-code); transform-origin: left center; transform: scaleX(var(--p-linie, 1));
}
.m-auswahl {
  inset: .1em -.06em .02em; z-index: -1; border-radius: 3px;
  background: color-mix(in srgb, var(--glas-text) 34%, transparent);
  transform-origin: left center; transform: scaleX(var(--p-auswahl, 1));
}
:root[data-modus='hell'] .m-auswahl { background: color-mix(in srgb, var(--glas-text) 42%, transparent); }
.m-rahmen {
  inset: -.06em -.16em -.12em -.14em; border: 1.5px solid var(--c-gestaltung); border-radius: 2px;
  opacity: calc(var(--p-rahmen, 1) * var(--p-aus, 1));
  transform: scale(calc(.97 + .03 * var(--p-rahmen, 1)));
}
.m-rahmen i {
  position: absolute; width: 9px; height: 9px; border: 1.5px solid var(--c-gestaltung); background: var(--grund); border-radius: 1px;
}
.m-rahmen i:nth-child(1) { left: -5px; top: -5px; }
.m-rahmen i:nth-child(2) { right: -5px; top: -5px; }
.m-rahmen i:nth-child(3) { left: -5px; bottom: -5px; }
.m-rahmen i:nth-child(4) { right: -5px; bottom: -5px; }
.m-geprueft {
  position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--glas-pruefung); color: #07080B;
  font: 500 13px/1.2 var(--mono); letter-spacing: .02em; white-space: nowrap;
  transform: translate(28%, -62%) scale(var(--p-geprueft, 1)); transform-origin: left bottom;
  opacity: var(--p-geprueft, 1);
}
.m-geprueft svg { width: 15px; height: 15px; }
.m-unterstrich {
  left: 0; right: 0; bottom: -.03em; height: max(4px, .055em); border-radius: 3px;
  background: var(--glas-mensch); transform-origin: left center; transform: scaleX(var(--p-unterstrich, 1));
}

/* Leiste unter der Überschrift: Status · Freigeben · Pause */
.live__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; min-height: 40px; }
.live__status {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 14px;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche);
  font: 400 14px/1 var(--mono); color: var(--text); letter-spacing: .01em;
}
.live__statuspunkt { width: 8px; height: 8px; border-radius: 50%; background: var(--status-farbe, var(--glas-mensch)); transition: background-color .3s var(--kurve); }
.live__freigeben {
  height: 40px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--glas-mensch); background: transparent; color: var(--c-mensch);
  font: 500 14px/1 var(--mono); letter-spacing: .02em;
  transition: background-color .25s var(--kurve), color .25s var(--kurve), transform .15s var(--kurve);
}
.live__freigeben:hover { background: color-mix(in srgb, var(--glas-mensch) 14%, transparent); }
.live__freigeben.ist-gedrueckt { transform: scale(.94); }
.live__freigeben.ist-frei { background: var(--glas-mensch); color: #07080B; }
.live__pause {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--linie); background: transparent; color: var(--text-leise);
}
.live__pause:hover { color: var(--text); border-color: var(--c-code); }
.live__pause svg { width: 18px; height: 18px; }
.live__pause .i-play, .live__pause[aria-pressed='true'] .i-pause { display: none; }
.live__pause[aria-pressed='true'] .i-play { display: block; }
.live__freigeben[hidden], .live__pause[hidden] { display: none; }

/* Bühne (Three.js) und Ebene mit Schildern bzw. Ersatz-Cursorn */
.live__buehne { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.live__ebene { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; }
.js-live .live__ebene { display: block; }
.live__cursor, .live__schild { position: absolute; left: 0; top: 0; will-change: transform; }
.live__cursor { width: var(--gr, 56px); height: var(--gr, 56px); }
.live__cursor svg { width: 100%; height: 100%; fill: color-mix(in srgb, var(--r) 70%, transparent); stroke: var(--r); stroke-width: 1.2px; filter: drop-shadow(0 6px 14px rgb(0 0 0 / .25)); }
.mit-3d .live__cursor { display: none; }
.live__schild {
  padding: 4px 10px; border-radius: 999px; background: var(--r); color: #07080B;
  font: 500 12px/1.3 var(--mono); letter-spacing: .02em; white-space: nowrap;
  transition: opacity .3s var(--kurve);
}
.live__schild.ist-leise { opacity: 0; }

@media (max-width: 640px) {
  .hero { padding-top: 156px; }
  .live__titel { letter-spacing: -0.035em; }
  .m-geprueft { font-size: 12px; padding: 4px 10px 4px 7px; transform: translate(8%, -70%) scale(var(--p-geprueft, 1)); }
  .m-rahmen i { width: 7px; height: 7px; }
  .m-rahmen i:nth-child(odd) { left: -4px; } .m-rahmen i:nth-child(even) { right: -4px; }
  .m-rahmen i:nth-child(-n+2) { top: -4px; } .m-rahmen i:nth-child(n+3) { bottom: -4px; }
  .live__schild { font-size: 11px; padding: 3px 8px; }
}