/* =============================================================================
 * FENSTER LÄDT: der Neu-laden-Knopf wird zum Spinner, die leere Fläche zum Skeleton
 * (Vorgabe Betreiber, 2026-10-14: „bei langsamem Internet bleibt das Fenster grau — den
 * Refresh-Icon animieren, ein animierter Spinner, und Skeleton-Loader als Regel für alles").
 *
 * WER WAS TUT:
 *   · der Kernel (assets/kernel.js, Block „Fenster lädt") weiss, ob ein Fenster lädt — das
 *     Dokument seines iframes ist noch nicht geparst, oder die App hat über das SDK eine
 *     Anfrage laufen (`vilo:laedt`) — und setzt GENAU zwei Anker:
 *       `data-vilo-laedt` am Neu-laden-Knopf (`.window-btn[aria-label="Aktualisieren"]`),
 *       `.vilo-fl-skelett` in die Inhaltsfläche, solange das DOKUMENT noch nicht steht;
 *   · DIESE Datei malt beides. Kein Bundle-Eingriff: der Knopf und sein SVG sind die des
 *     eingefrorenen Bundles, verändert wird nur ihre Darstellung.
 *
 * DER SPINNER IST DAS ICON, NICHT EIN ZWEITES. Der Bogen des Neu-laden-Pfeils zieht sich auf
 * ein Viertel zusammen (`stroke-dasharray`), die Pfeilspitze blendet aus, das Ganze dreht —
 * dieselbe Form, die der Mensch eben gedrückt hat, sagt jetzt „läuft". Danach kehrt sie
 * zurück. Marken-Violett (#8b5cf6) wie der Ring des Anmeldeschirms; eine Grafik ohne Text,
 * 3:1 genügt (gemessen 3.6:1 auf der dunklen, 3.9:1 auf der hellen Titelleiste).
 *
 * DAS SKELETON STEHT NUR, SOLANGE DAS DOKUMENT LÄDT — danach zeigt die App ihre EIGENEN
 * Platzhalter (`_pattern.css` §9b, `ViloSkeleton`), in ihrer echten Geometrie. Die Fläche
 * hier ist die grobe Form einer VILO-Seite (Seitenleiste · Kopf · Karte mit Zeilen), weil
 * die Shell die Geometrie der App nicht kennen kann. Sie erscheint erst nach 150 ms — ein
 * Dokument, das schneller steht, zeigt nie einen Platzhalter, nur sich selbst.
 *
 * Keine Schatten, keine Verläufe: der Puls ist derselbe wie in `_pattern.css` (zwei solide
 * Töne), die Töne sind dieselben (`--sk-1`/`--sk-2` dunkel #2e2e2e/#3a3a3a, hell
 * #e8e8ed/#d8d8df). Ohne Bewegung bleibt der Platzhalter SICHTBAR, der Spinner pulsiert
 * statt zu drehen. Gepinnt durch `mockups/tests/fenster-laden.test.js`.
 * ==========================================================================*/

/* ── 1 · Der Neu-laden-Knopf wird zum Spinner ─────────────────────────────────────────── */
.window-shadow .window-btn[aria-label="Aktualisieren"] svg {
  transform-origin: 50% 50%;
}
.window-shadow .window-btn[aria-label="Aktualisieren"] svg path {
  /* Ruhezustand: der Strich ist länger als der Pfad (≈ 52), das Icon ist unverändert. */
  stroke-dasharray: 64 64;
  transition: stroke-dasharray .24s ease, opacity .18s ease;
}
/* (0,5,3): über den Ruhe-Tönen aus fenster-hell.css samt deren :hover (0,5,1) — ein Spinner,
   der beim Überfahren grau wird, hätte aufgehört zu sagen, dass etwas läuft. */
html body .window-shadow button.window-btn[aria-label="Aktualisieren"][data-vilo-laedt][aria-busy] {
  color: #8b5cf6;
}
.window-shadow .window-btn[aria-label="Aktualisieren"][data-vilo-laedt] svg {
  animation: vilo-fl-drehen .8s linear infinite;
}
.window-shadow .window-btn[aria-label="Aktualisieren"][data-vilo-laedt] svg path:first-child {
  stroke-dasharray: 20 64;
}
.window-shadow .window-btn[aria-label="Aktualisieren"][data-vilo-laedt] svg path:nth-child(2) {
  opacity: 0;
}
@keyframes vilo-fl-drehen { to { transform: rotate(360deg); } }

/* Auf dem Glas bleibt der Knopf weiss (fenster-glas.css §3) — Violett auf einem Grund, der
   mit dem Bild wechselt, hätte keinen verlässlichen Kontrast. */
html[data-vilo-class="wide"]:not([data-vilo-appshell]) .window-shadow[data-vilo-glas] .window-btn[aria-label="Aktualisieren"][data-vilo-laedt] {
  color: #fff;
}

/* ── 2 · Das Skeleton auf der Inhaltsfläche ───────────────────────────────────────────── */
.window-shadow [data-vilo-fl-flaeche] {
  position: relative;
}
.vilo-fl-skelett {
  --fl-grund: #1a1a1a;
  --fl-karte: #222222;
  --fl-kante: rgba(255, 255, 255, .08);
  --fl-sk-1: #2e2e2e;
  --fl-sk-2: #3a3a3a;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  overflow: hidden;
  background: var(--fl-grund);
  cursor: progress;
  -webkit-user-select: none;
  user-select: none;
  animation: vilo-fl-ein .2s ease .15s both;
  transition: opacity .16s ease;
}
.vilo-fl-skelett.vilo-fl-skelett--weg { opacity: 0; }
@keyframes vilo-fl-ein { from { opacity: 0; } to { opacity: 1; } }

html[data-vilo-erscheinung="hell"] .vilo-fl-skelett {
  --fl-grund: #f5f5f7;
  --fl-karte: #ffffff;
  --fl-kante: rgba(0, 0, 0, .08);
  --fl-sk-1: #e8e8ed;
  --fl-sk-2: #d8d8df;
}
/* Glas (Desktop schmal wie Telefon): die App steht ohne eigenen Grund auf dem Glas — der
   Platzhalter auch. Weisse Blöcke mit wenig Deckung, wie die Milchglaskarten der App. */
.window-shadow[data-vilo-glas] .vilo-fl-skelett {
  --fl-grund: transparent;
  --fl-karte: rgba(255, 255, 255, .14);
  --fl-kante: rgba(255, 255, 255, .16);
  --fl-sk-1: rgba(255, 255, 255, .22);
  --fl-sk-2: rgba(255, 255, 255, .34);
}

.vilo-fl-sk {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--fl-sk-1);
  animation: vilo-fl-puls 1.4s ease-in-out infinite;
}
@keyframes vilo-fl-puls {
  0%, 100% { background-color: var(--fl-sk-1); }
  50%      { background-color: var(--fl-sk-2); }
}

.vilo-fl-leiste {
  flex: 0 0 220px;
  padding: 28px 18px;
  border-right: 1px solid var(--fl-kante);
}
.vilo-fl-leiste .vilo-fl-sk { height: 14px; margin: 0 0 22px; }
.vilo-fl-leiste .vilo-fl-sk--rubrik { height: 10px; width: 38%; margin-top: 30px; }

.vilo-fl-inhalt {
  flex: 1 1 auto;
  min-width: 0;
  padding: 28px 28px 0;
}
.vilo-fl-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.vilo-fl-kopf__text { flex: 1 1 auto; min-width: 0; }
.vilo-fl-sk--titel { height: 22px; width: 46%; max-width: 320px; margin-bottom: 12px; }
.vilo-fl-sk--unter { height: 12px; width: 30%; max-width: 220px; }
.vilo-fl-sk--knopf { flex: 0 0 112px; height: 34px; border-radius: 8px; }

.vilo-fl-karte {
  border: 1px solid var(--fl-kante);
  border-radius: 12px;
  background: var(--fl-karte);
  padding: 4px 18px;
}
.vilo-fl-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--fl-kante);
}
.vilo-fl-zeile:first-child { border-top: 0; }
.vilo-fl-zeile__text { flex: 1 1 auto; min-width: 0; }
.vilo-fl-zeile__text .vilo-fl-sk + .vilo-fl-sk { margin-top: 8px; }
.vilo-fl-sk--kreis { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; }
.vilo-fl-sk--wert { flex: 0 0 64px; }

/* Ohne Bewegung: der Platzhalter bleibt stehen (er IST die Fläche), der Spinner dreht nicht,
   sondern atmet — er muss weiter sagen, dass etwas läuft. */
@media (prefers-reduced-motion: reduce) {
  .vilo-fl-sk { animation: none; }
  .vilo-fl-skelett { animation: none; }
  .window-shadow .window-btn[aria-label="Aktualisieren"][data-vilo-laedt] svg {
    animation: vilo-fl-atmen 1.6s ease-in-out infinite;
  }
  @keyframes vilo-fl-atmen { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
}