/* Hero in Bewegung (assets/motion/hero.js): Auftakt der Aussage und die App, die im Fenster arbeitet.
   Im App-Fenster nur Tinte, Kalk und Statusfarben; Radien aus tokens.css, Maße wie in site.css.
   Ohne Skript und bei reduzierter Bewegung bleibt der statische Zustand aus index.html. */

/* ---------- Auftakt ---------- */
/* Bis hero.js übernimmt, bleiben Aussage, Lead und Fenster unsichtbar (kein Aufblitzen vor dem Auftakt).
   Läuft kein Skript, erscheinen sie nach 2,4 s von selbst. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero:not(.hz-on) .display,
  .js .hero:not(.hz-on) .lead,
  .js .hero:not(.hz-on) .hero-visual .app { animation: hz-failsafe 1ms 2.4s both; }
}
@keyframes hz-failsafe { from { opacity: 0; } to { opacity: 1; } }

/* Aussage: Wörter steigen ruhig auf (ZM.words), etwas langsamer gestaffelt als der Standard */
.hero .display.zm-words .w { transition-delay: calc(var(--n) * 70ms + 60ms); }
/* Lead: wie gestreamt, Token für Token, ohne Bewegung; --d setzt hero.js mit leichtem Takt-Zittern */
.hero .lead.hz-stream .w { transform: none; transition: opacity 420ms var(--ease); transition-delay: var(--d, 0ms); }

/* ---------- Liste ---------- */
/* Zeilen gleiten per FLIP; hero.js hält die Höhe während der Bewegung fest. Die Zeilen liegen vorab auf eigenen
   Ebenen, damit die GPU sie beim Start der Bewegung nicht erst anlegen und zeichnen muss (sonst hakt das erste Bild). */
.hero-visual .rows { position: relative; }
/* Jede Zeile behält ihre volle Höhe, auch während hero.js die Listenhöhe festhält. Sonst staucht das Grid die neue Zeile
   (overflow: hidden erlaubt Höhe 0) auf den Restplatz, die Zeilen gleiten nur einen Teil des Wegs und springen am Ende. */
.hero-visual .rows { grid-auto-rows: max-content; }
@media (prefers-reduced-motion: no-preference) { .js .hero-visual .rows > .row { will-change: transform; } }
/* Auf dem Handy sind ab Zeile 4 alle Zeilen ausgeblendet; beim Ein- und Ausgleiten bleiben sie kurz sichtbar */
.hero-visual .rows > .row.hz-keep { display: grid; }

/* Neue Zeile: Licht liest sie (Kalk, kein Glühen), solange der Entwurf offen ist, ist sie ausgewählt */
.hz-row { position: relative; isolation: isolate; overflow: hidden; transition: background-color 600ms var(--ease); }
.hz-row.hz-sel { background: color-mix(in srgb, var(--kalk) 60%, var(--paper)); }
.hz-sweep { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--kalk) 70%, transparent) 22%, var(--kalk-deep) 50%, color-mix(in srgb, var(--kalk) 70%, transparent) 78%, transparent); }

/* Texte, die wechseln: alle Fassungen im selben Rasterfeld, damit nichts springt */
.hz-swap, .hz-stack, .row > div > .sub.hz-stack { display: grid; }
.hz-swap > *, .hz-stack > * { grid-area: 1 / 1; min-width: 0; }
.hz-swap > :last-child { opacity: 0; }
.hz-ghost { visibility: hidden; }
.hz-caret-space { display: inline-block; width: 3px; }

/* Status-Pille: Breite und Farbe gleiten beim Wechsel */
.hz-chip { overflow: hidden; transition: background-color 450ms var(--ease), color 450ms var(--ease); }

/* Zählwerk für Kennzahlen und Zähler in der Seitenleiste */
.hz-roll { position: relative; overflow: hidden; }
.hero-visual .hz-roll > span { display: block; font: inherit; color: inherit; }
.hero-visual .hz-roll > .hz-roll-in { position: absolute; inset: 0; }
.hero-visual .app-side .count.hz-roll > span { display: grid; place-items: center; }

/* ---------- Seitenpanel: Antwortentwurf ---------- */
.hz-drawer { position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; width: min(360px, 52%); pointer-events: none; }
/* Unsichtbarer Messpunkt: dort, wo das Panel offen steht; die Szene wartet, bis er im Bild ist */
.hz-peek { position: absolute; left: 0; right: 0; top: 0; height: 160px; }
.hz-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 20px;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -28px 0 56px -36px rgb(8 8 20 / 0.32);
  visibility: hidden;
}
.hz-drawer.is-open .hz-sheet { visibility: visible; }
.hz-grip { display: none; }
.hz-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hz-dhead .sub { display: block; margin-top: 2px; }
.hz-dhead .mono { margin-top: 5px; color: var(--subtle); }
.hz-mail { border: 1px solid var(--line); border-radius: var(--r-ui); padding: 14px 16px; line-height: 1.5; white-space: pre-line; box-shadow: 0 2px 2px rgb(0 0 0 / 0.04); }
.hz-file { display: flex; align-items: center; gap: 10px; opacity: 0; }
.hz-file-ico { width: 32px; height: 32px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--kalk); }
.hz-file-ico .icon { width: 16px; height: 16px; }
.hz-file b { display: block; font-weight: 500; }
.hz-file .sub { display: block; }
.hz-actions { display: grid; justify-items: end; }
.hz-actions > * { grid-area: 1 / 1; }
.hz-btns { display: flex; gap: 8px; }
/* Freigeben ist erst bereit, wenn der Entwurf fertig ist */
.hz-approve { opacity: 0.4; transition: background-color 220ms var(--ease), border-color 220ms var(--ease), transform 160ms var(--ease); }
.hz-approve.hz-hover { background: color-mix(in srgb, var(--night) 88%, var(--paper)); border-color: color-mix(in srgb, var(--night) 88%, var(--paper)); }
.hz-approve.hz-press { transform: scale(0.95); }
.hz-done { display: inline-flex; align-items: center; gap: 6px; height: 30px; font-size: 13px; font-weight: 500; color: var(--ok-text); opacity: 0; }
.hz-done .icon { width: 17px; height: 17px; }
.hz-done .hz-tick { stroke-dasharray: 10; }
.hz-done .hz-who { color: var(--muted); font-weight: 400; }

/* ---------- Zeiger der Person, die freigibt ---------- */
/* Schlichter macOS-Pfeil: Tinte mit Papierkante und leisem Schatten, ohne Namensschild */
.hz-cursor { position: absolute; z-index: 4; left: 0; top: 0; pointer-events: none; opacity: 0; }
.hz-cursor svg { display: block; width: 18px; height: 18px; margin: -2px 0 0 -3px; overflow: visible; filter: drop-shadow(0 1px 1px rgb(8 8 20 / 0.22)); transform-origin: 3px 2px; }
.hz-cursor path { fill: var(--ink); stroke: var(--paper); stroke-width: 1.3; stroke-linejoin: round; }

/* ---------- Handy: Panel als Bottom-Sheet im Fenster ---------- */
@media (max-width: 640px) {
  .hz-drawer { top: auto; left: 0; width: auto; }
  .hz-peek { top: 0; height: 75%; }
  .hz-sheet { position: relative; inset: auto; gap: 12px; padding: 8px 16px 20px; border-left: 0; border-top: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: 0 -24px 48px -30px rgb(8 8 20 / 0.34); }
  .hz-grip { display: block; width: 36px; height: 4px; margin: 0 auto 2px; border-radius: var(--r-pill); background: var(--line-strong); }
  .hz-mail { padding: 12px 14px; }
}