/* Warnat Bewegung — Scroll-Choreografie (Jarvis, 03.09.2026)
   Gehoert zu assets/warnat-motion.js. Regel fuer alles hier:

   • Startzustaende stehen AUSSCHLIESSLICH unter html.wm-an. Die Klasse setzt das Skript
     erst, wenn es wirklich laeuft — ohne JS, bei "Bewegung reduzieren" oder nach einem
     Fehler steht die Seite vollstaendig da. Nichts wird versteckt, was nicht sicher
     wieder eingeblendet wird.
   • Bewegt werden nur transform und opacity. Kein filter, kein box-shadow im Scroll,
     nichts, was ein neues Layout erzwingt.
   • --p (0..1) kommt aus dem Skript und liegt auf dem Block; die Kinder rechnen daraus
     ihre Bewegung. Das haelt die Choreografie im CSS lesbar. */

/* ── 1) Auftauchen ───────────────────────────────────────────────────────────── */
html.wm-an [data-wm]{opacity:0}
html.wm-an [data-wm="auf"]     {transform:translate3d(0,26px,0)}
html.wm-an [data-wm="links"]   {transform:translate3d(-52px,12px,0) rotate(-2.5deg)}
html.wm-an [data-wm="rechts"]  {transform:translate3d(52px,12px,0) rotate(2.5deg)}
html.wm-an [data-wm="zoom"]    {transform:scale(.94)}
html.wm-an [data-wm].wm-da{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.75,.2,1) calc(var(--wm-i,0)*75ms),
             transform .85s cubic-bezier(.22,.75,.2,1) calc(var(--wm-i,0)*75ms);
}

/* ── 2) Ueberschrift: Woerter steigen aus der Zeile auf ──────────────────────── */
html.wm-an .wm-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
html.wm-an .wm-w>span{display:inline-block;transform:translateY(115%)}
html.wm-an [data-wm-woerter].wm-da .wm-w>span{
  transform:none;
  transition:transform 1s cubic-bezier(.19,.86,.24,1) calc(120ms + var(--wm-i,0)*55ms);
}
/* Alles, was nach der Ueberschrift kommt, folgt ihr mit einem Atemzug Abstand. */
html.wm-an [data-wm="nach"]{opacity:0;transform:translate3d(0,16px,0)}
html.wm-an [data-wm="nach"].wm-da{
  opacity:1;transform:none;
  transition:opacity .8s ease calc(.45s + var(--wm-i,0)*120ms),
             transform .8s cubic-bezier(.22,.75,.2,1) calc(.45s + var(--wm-i,0)*120ms);
}

/* ── 3) Geraete-Nachbauten in leichter 3D-Neigung ────────────────────────────
   EINE ruhige Neigung, die sich aufrichtet — kein Hin und Her mehr.
   Bis 17.09.2026 stand hier rotateY((.5 - p) * 26deg) plus rotateX 8deg plus 14 px Hub.
   Weil p beim Durchscrollen von 0 auf 1 laeuft, drehte das Geraet von +13 Grad ueber 0
   auf -13 Grad: es kam aufgedreht herein, stand kurz gerade und kippte zur anderen Seite
   wieder weg. Genau dieses zweimalige Umschlagen hat Jamie am 17.09. beanstandet
   („bewegt sich mehrfach hin und her"), verstaerkt durch die zweite Achse.
   Jetzt: eine einzige Achse, eine einzige Richtung. Das Geraet kommt um 4 Grad gedreht
   herein und richtet sich waehrend des Durchziehens auf 0 auf — es kippt nie zurueck.
   Gesamtweg 4 statt 26 Grad; man spuert die Neigung eher, als dass man sie sieht. */
html.wm-an .wm-szene{perspective:1500px;perspective-origin:50% 45%}
html.wm-an .wm-szene .phone,
html.wm-an .wm-szene .shot{
  transform:
    rotateY(calc((1 - var(--p,1)) * 4deg))
    translate3d(0,calc((1 - var(--p,1)) * 6px),0);
  transform-style:preserve-3d;
}
/* Die Karten auf dem Bildschirm bekommen Tiefe, damit die Neigung etwas zu zeigen hat. */
html.wm-an .wm-szene .clk-ticket{transform:translateZ(26px)}
html.wm-an .wm-szene .clk-karte:first-of-type{transform:translateZ(16px)}

/* Hier standen bis 17.09.2026 die schwebenden Merkzettel am Geraet (.wm-schwebe, .wm-ikon,
   .wm-s1 bis .wm-s3, sichtbar erst ab 1040 px). Jamie hat sie ersatzlos gestrichen, das
   Markup in clocki-teil-1.njk ist mit weg. Sie trugen sonst nichts — geprueft: die Klassen
   kamen nur dort und hier vor —, deshalb sind auch die Regeln raus statt als Leichen
   stehenzubleiben. Das Geraet und seine ruhige Neigung (Abschnitt 3) bleiben unberuehrt. */

/* ── 4) Der Zettel wird zum Schichtplan ──────────────────────────────────────
   Beide Ebenen liegen uebereinander. Der Zettel dreht sich weg und verblasst,
   waehrend der digitale Plan aus der Tiefe kommt. Die Hoehe bleibt konstant,
   weil die zweite Ebene absolut liegt — es springt nichts. */
html.wm-an .wm-morph{position:relative}
html.wm-an .wm-morph .zettel{
  transform:rotate(calc(var(--p,0) * -7deg)) scale(calc(1 - var(--p,0) * .10)) translate3d(0,calc(var(--p,0) * -22px),0);
  /* Das Papier bleibt voll da, bis der Block wirklich steht; erst dann uebergibt es. */
  opacity:calc(1.55 - var(--p,0) * 2.1);
  transform-origin:50% 60%;
}
.wm-digital{display:none}
html.wm-an .wm-digital{
  display:block;position:absolute;left:0;right:0;top:50%;
  opacity:calc((var(--p,0) - .5) * 3);
  transform:translate3d(0,-50%,0) scale(calc(.92 + var(--p,0) * .08));
  pointer-events:none;
}
.wm-dash{width:min(100%,420px);margin:0 auto;background:#fff;border:1px solid #E2E8F3;
  border-radius:14px;box-shadow:0 22px 50px rgba(15,23,42,.16);overflow:hidden;text-align:left}
.wm-dash-kopf{display:flex;align-items:center;gap:7px;padding:10px 13px;border-bottom:1px solid #EEF2F8;
  font-size:10.5px;color:#64748B}
.wm-dash-kopf i{width:8px;height:8px;border-radius:50%;background:#E2E8F3;display:inline-block}
.wm-dash-kopf span{margin-left:4px}
.wm-dash-plan{display:grid;grid-template-columns:52px repeat(5,1fr);gap:5px;padding:12px 13px}
.wm-dash-plan small{font-size:9px;letter-spacing:.1em;color:#94A3B8;text-align:center;text-transform:uppercase}
.wm-dash-plan b{font-size:11.5px;color:#0F172A;font-weight:600;align-self:center}
.wm-dash-plan span{font-size:9.5px;font-weight:600;text-align:center;padding:6px 0;border-radius:7px;
  background:#EEF3FF;color:#1D4ED8;border:1px solid #DCE5FF}
.wm-dash-plan span.frei{background:#F6F7FB;color:#AAB2C5;border-color:#EDF0F6;font-weight:500}
.wm-dash-fuss{display:flex;gap:14px;flex-wrap:wrap;padding:0 13px 13px;font-size:10px;color:#64748B}
.wm-dash-fuss b{color:#0F172A}

/* ── 5) Pruefungen fliegen ein ───────────────────────────────────────────────
   Die Kaskade hat schon ihre eigene Dauerschleife (Datenpunkt, Haken). Hier kommt
   nur der Auftritt dazu; danach uebernimmt wieder die vorhandene Animation. */
html.wm-an .kask-ziele>[data-wm]{opacity:0;transform:translate3d(34px,0,0)}
html.wm-an .kask-ziele>[data-wm].wm-da{
  opacity:1;transform:none;
  transition:opacity .55s ease calc(var(--wm-i,0)*80ms),transform .6s cubic-bezier(.22,.75,.2,1) calc(var(--wm-i,0)*80ms);
}

/* ── 6) Chat: Nachrichten kommen nacheinander ────────────────────────────────
   Die Zeilen behalten ihren Platz im Raster (nur opacity/transform), deshalb
   bleibt das Fenster ruhig. Die Tipp-Punkte liegen absolut ueber der naechsten Zeile. */
html.wm-an [data-wm-chat] .wm-zeile{opacity:0;transform:translate3d(0,10px,0) scale(.97)}
html.wm-an [data-wm-chat] .wm-zeile.wm-da{
  opacity:1;transform:none;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.9,.25,1.1);
}
.wm-tippt{display:none}
html.wm-an .wm-tippt{
  display:inline-flex;gap:4px;position:absolute;left:12px;
  padding:11px 13px;border-radius:16px;background:linear-gradient(180deg,#fff,#faf8fb);
  border:1px solid rgba(15,23,42,.07);opacity:0;transition:opacity .25s ease;pointer-events:none;
}
html.wm-an .wm-tippt.wm-da{opacity:1}
html.wm-an .wm-tippt i{width:5px;height:5px;border-radius:50%;background:#94A3B8;animation:wm-punkt 1.1s infinite}
html.wm-an .wm-tippt i:nth-child(2){animation-delay:.16s}
html.wm-an .wm-tippt i:nth-child(3){animation-delay:.32s}
@keyframes wm-punkt{50%{opacity:.35;transform:translateY(-3px)}}

/* ── 7) Schmale Schirme: weniger Weg, keine 3D-Drehung ───────────────────────
   Auf dem Handy stehen die Bloecke untereinander und ziehen schneller durchs Bild.
   Grosse Wege und Perspektive wirken dort nervoes statt ruhig. */
@media(max-width:940px){
  html.wm-an [data-wm="links"],
  html.wm-an [data-wm="rechts"]{transform:translate3d(0,22px,0)}
  html.wm-an .wm-szene{perspective:none}
  html.wm-an .wm-szene .phone,
html.wm-an .wm-szene .shot{transform:none}
  html.wm-an .wm-szene .clk-ticket,
  html.wm-an .wm-szene .clk-karte:first-of-type{transform:none}
}

/* Letzte Sicherung: wenn das Skript aussteigt, gilt ueberall der Endzustand. */
html.wm-aus [data-wm],
html.wm-aus [data-wm-chat] .wm-zeile{opacity:1!important;transform:none!important}
html.wm-aus .wm-digital,html.wm-aus .wm-tippt{display:none!important}
@media(prefers-reduced-motion:reduce){
  html [data-wm],html [data-wm-chat] .wm-zeile{opacity:1!important;transform:none!important}
  .wm-digital,.wm-tippt{display:none!important}
}

/* Bildunterschrift wechselt mit dem Bild (Zettel -> Schichtplan). Ohne Bewegung
   steht nur die erste da, die zweite ist gar nicht erst im Layout. */
.wm-tausch .wm-t2{display:none}
html.wm-an .wm-tausch{position:relative}
html.wm-an .wm-tausch .wm-t1{display:inline-block;opacity:calc(1.55 - var(--p,0) * 2.1)}
html.wm-an .wm-tausch .wm-t2{
  display:inline-block;position:absolute;left:0;right:0;top:0;
  opacity:calc((var(--p,0) - .55) * 3);
}