/* Kurzbeschreibung (für Laien): Aussehen des Live-Workspace (site/assets/js/workspace-live.js, Ralph 25.10.2026):
   - Bento mit Neuem oder heute Fälligem: dezentes rotes Licht, das langsam um den Rand läuft (Ralph: „umlaufendes,
     dezentes rotes Licht"), dünner roter Grundrahmen; bei Neuem zusätzlich eine kleine rote Glocke unten rechts.
     Ohne Bewegung (prefers-reduced-motion): nur der dünne rote Rahmen.
   - Kleiner roter Punkt an einem Reiter oben, wenn dort ein Bento markiert ist.
   - Leiste „Neue Version verfügbar" (Form a4h-toast aus brand.css, unten rechts).
   Farben nur aus marke/marke.css (--marke-gefahr). Der Effekt verschiebt nichts und fängt keine Klicks ab. */

@property --wl-winkel { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.wb-k > .wl-licht {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  padding: 2px; box-sizing: border-box;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marke-gefahr) 55%, transparent);
  background: conic-gradient(from var(--wl-winkel), transparent 0deg, transparent 250deg,
    color-mix(in srgb, var(--marke-gefahr) 35%, transparent) 300deg, var(--marke-gefahr) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .8;
  animation: wlLauf 5s linear infinite;
}
@keyframes wlLauf { to { --wl-winkel: 360deg; } }

/* Auf farbigen Bentos: heller Saum innen, damit das Rot sichtbar bleibt */
.wb-k[data-flaeche="farbig"] > .wl-licht { box-shadow: inset 0 0 0 1px var(--marke-gefahr), inset 0 0 0 3px rgba(255, 255, 255, .7); opacity: 1; }

/* Beim Bearbeiten (Griff/Größe ändern) tritt das Licht zurück */
.wb-k.gehoben > .wl-licht, .wb-k.ziehend > .wl-licht { opacity: .3; }

.wb-k > .wl-glocke {
  position: absolute; right: 10px; bottom: 10px; z-index: 3; pointer-events: none;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--marke-r-pill);
  color: var(--marke-gefahr); background: var(--marke-flaeche, #fff); box-shadow: var(--marke-schatten-leise);
  animation: wlRein .35s ease-out;
}
.wb-k[data-flaeche="farbig"] > .wl-glocke { background: #fff; }
.wb-k.gehoben > .wl-glocke, .wb-k.griff > .wl-glocke { display: none; }   /* Ecke gehört dann dem Größe-Griff */
@keyframes wlRein { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* Reiter oben: Punkt, wenn in einem anderen Reiter etwas Neues ist */
.wb-ab.wl-punkt { position: relative; }
.wb-ab.wl-punkt::after {
  content: ''; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px;
  border-radius: var(--marke-r-pill); background: var(--marke-gefahr); pointer-events: none;
}

/* Leiste „Neue Version verfügbar" */
.wl-version {
  position: fixed; right: 16px; bottom: 16px; z-index: 120; display: flex; align-items: center; gap: 12px;
  max-width: min(380px, calc(100vw - 32px));
}

@media (prefers-reduced-motion: reduce) {
  .wb-k > .wl-licht { animation: none; background: none; box-shadow: inset 0 0 0 2px var(--marke-gefahr); opacity: 1; }
  .wb-k > .wl-glocke { animation: none; }
}

/* Knopf „Neue Version" oben links neben dem Logo (Ralph 25.10.2026) + Hinweis, was neu ist.
   Befund 28.10.2026: bei wenig Platz (≤ 1599 px) nur das Symbol, damit das Suchfeld seinen Platz behält und die Reiter nicht springen. */
.wl-update {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; margin-right: 10px;
  border: 0; border-radius: var(--marke-r-pill); background: var(--marke-nav-blau); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  box-shadow: var(--marke-schatten-leise); transition: transform 0.15s ease, filter 0.15s ease;
}
@media (max-width: 1599px) {
  .wl-update { width: 30px; padding: 0; justify-content: center; margin-right: 6px; flex: none; }
  .wl-update span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.wl-update:hover, .wl-update:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
.wl-update svg { flex: none; }
.wl-update-hinweis {
  position: fixed; z-index: 130; width: min(340px, calc(100vw - 16px)); display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border-radius: var(--marke-r-l); background: var(--marke-flaeche); color: var(--marke-text);
  box-shadow: var(--marke-schatten); font-size: 13px;
}
.wl-update-hinweis > b { font-size: 14px; }
.wl-update-liste { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; color: var(--marke-text-2); }
.wl-update-punkt { display: flex; flex-direction: column; gap: 2px; }
.wl-update-punkt b { color: var(--marke-text); font-weight: 600; }
.wl-update-hinweis .a4h-btn { align-self: flex-start; }
.wl-update-sperre { font-size: 12px; color: var(--marke-text-2); }
@media (max-width: 640px) { .wl-update span { display: none; } .wl-update { padding: 0 9px; } }