@layer motion{
/* ═══ esszehNET Motion · Rolle 1: SEITENNAVIGATION ═══
   Vor = alte Seite nach links, neue von rechts. Back = gespiegelt.
   Card-Unterseiten und komplette Router-Screens teilen exakt diese Keyframes. */
.pf-page.rein-vor,.sh-seite.rein-vor{animation:pfReinVor var(--motion-page-in) var(--ease-page-in) both}
.au-page.rein-vor,.ms-page.rein-vor{animation:pfReinVor var(--motion-page-in) var(--ease-page-in) both}
.pf-page.rein-back,.sh-seite.rein-back{animation:pfReinBack var(--motion-page-in) var(--ease-page-in) both}
.au-page.rein-back,.ms-page.rein-back{animation:pfReinBack var(--motion-page-in) var(--ease-page-in) both}
.pf-page.weg-vor,.sh-ueber-inhalt.weg-vor{animation:pfWegVor var(--motion-page-out) var(--ease-page-out) both}
.ez-motion-begleiter.weg-vor{animation:pfWegVor var(--motion-page-out) var(--ease-page-out) both}
.au-page.weg-vor,.ms-page.weg-vor{animation:pfWegVor var(--motion-page-out) var(--ease-page-out) both}
.pf-page.weg-back,.sh-ueber-inhalt.weg-back{animation:pfWegBack var(--motion-page-out) var(--ease-page-out) both}
.ez-motion-begleiter.weg-back{animation:pfWegBack var(--motion-page-out) var(--ease-page-out) both}
.au-page.weg-back,.ms-page.weg-back{animation:pfWegBack var(--motion-page-out) var(--ease-page-out) both}
@keyframes pfReinVor{from{opacity:0;transform:translateX(var(--motion-page-in-x))}to{opacity:1;transform:none}}
@keyframes pfReinBack{from{opacity:0;transform:translateX(calc(-1 * var(--motion-page-in-x)))}to{opacity:1;transform:none}}
@keyframes pfWegVor{from{opacity:1;transform:none}to{opacity:0;transform:translateX(calc(-1 * var(--motion-page-out-x)))}}
@keyframes pfWegBack{from{opacity:1;transform:none}to{opacity:0;transform:translateX(var(--motion-page-out-x))}}

/* ═══ esszehNET Motion · Rolle 2: HAUPTREITER + INHALTSWECHSEL ═══
   Hauptreiter (v3627) und Filter-/Umschalterwechsel (EZ.inhaltswechsel, MOT-01) teilen
   dieselben vier gespiegelten Keyframes: 8px Micro-Slide + Crossfade ueber den zentralen
   Content-Motion-Token. Vor = nach links raus / von rechts rein; Back exakt gespiegelt.
   JS setzt .sh-tab-alt + weg-<ric> bzw. .sh-tab-neu + rein-<ric> und wartet auf animationend. */
.sh-tab-alt.weg-vor{animation:shTabAltVor var(--motion-content) var(--ease-standard) both}
.sh-tab-alt.weg-back{animation:shTabAltBack var(--motion-content) var(--ease-standard) both}
.sh-tab-neu.rein-vor{animation:shTabNeuVor var(--motion-content) var(--ease-standard) both}
.sh-tab-neu.rein-back{animation:shTabNeuBack var(--motion-content) var(--ease-standard) both}
@keyframes shTabAltVor{from{opacity:1;transform:none}to{opacity:0;transform:translateX(calc(-1 * var(--sp-3)))}}
@keyframes shTabAltBack{from{opacity:1;transform:none}to{opacity:0;transform:translateX(var(--sp-3))}}
@keyframes shTabNeuVor{from{opacity:0;transform:translateX(var(--sp-3))}to{opacity:1;transform:none}}
@keyframes shTabNeuBack{from{opacity:0;transform:translateX(calc(-1 * var(--sp-3)))}to{opacity:1;transform:none}}

/* ═══ esszehNET Motion · Rolle 4b: DYNAMISCHE HOEHENBEREICHE ═══
   Gemeinsamer Wrapper fuer Inhalte, die mit EZ.hoehenwechsel weich auf- und zuklappen.
   JS wartet auf das echte transitionend; Dauer und Easing stammen ausschliesslich aus Tokens. */
.tm-plan-fold{transition:grid-template-rows var(--motion-expand) var(--ease-standard)}
.tm-plan-toggle>.mb-chev{transition:transform var(--motion-expand) var(--ease-standard)}
.bt-hoehenbox{overflow:hidden;transition:height var(--motion-expand) var(--ease-standard)}
/* Mehrfachauswahl: nur das schwebende Menu bewegt sich per Transform/Opacity
   mit Expand-/Easing-Tokens; Card und Eingabe behalten ihre Layoutgeometrie. */
.bt-mehrfach summary svg{transition:transform var(--motion-expand) var(--ease-standard)}
.bt-mehrfach summary[aria-expanded="false"] svg{transform:rotate(0deg)}
/* Ablage-Suchtreffer: die Hoehe bleibt Rolle 4b; der innere Inhalt blendet parallel
   ueber die gemeinsame Content-Motion ein/aus. Keine eigene Dauer, kein JS-Timer. */
.ab-treffer-in{opacity:1;transform:none;
  transition:opacity var(--motion-content) var(--ease-standard),transform var(--motion-content) var(--ease-standard)}
.ab-treffer-in.ab-treffer-ein,.ab-treffer-in.ab-treffer-aus{
  opacity:0;transform:translateY(calc(-1 * var(--sp-2)))}

/* ═══ esszehNET Motion · Rolle 5: EINZELNES ELEMENT ENTFERNEN ═══
   Eine sichtbare Zeile verschwindet nie hart: Deckkraft + Hoehe laufen gemeinsam aus.
   --bt-item-gap wird vom Aufrufer mit dem echten Listengap belegt, damit auch der
   ueberzaehlige Zwischenraum weich verschwindet und beim anschliessenden Render nichts springt. */
.bt-item-weg{overflow:hidden;animation:btItemWeg var(--motion-item-out) var(--ease-standard) both}
.bt-item-folge{animation:btItemFolge var(--motion-item-out) var(--ease-standard) both}
.bt-item-weg.bt-item-letztes{animation-name:btItemWegLetztes}
@keyframes btItemWeg{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateX(calc(-1 * var(--sp-2)));height:0;padding-top:0;padding-bottom:0}
}
@keyframes btItemFolge{
  from{margin-top:0}
  to{margin-top:calc(-1 * var(--bt-item-gap, 0px))}
}
@keyframes btItemWegLetztes{
  from{opacity:1;transform:none;margin-top:0}
  to{opacity:0;transform:translateX(calc(-1 * var(--sp-2)));height:0;padding-top:0;padding-bottom:0;margin-top:calc(-1 * var(--bt-item-gap, 0px))}
}
/* Vollbild-Router: waehrend der Einblendung nur den sichtbaren Viewport bewegen.
   Lange Screens (HOME/Mitglieder) bleiben inhaltlich voll vorhanden, aber der
   Compositor muss fuer pfRein* nicht mehrere Tausend Pixel Scrollhoehe rasterisieren.
   Nach animationend entfernt app.js .sh-seite und damit diese Begrenzung automatisch. */
.sh-seite.rein-vor,.sh-seite.rein-back{height:100vh;overflow:hidden;box-sizing:border-box}
.sh-seite.wartet{opacity:0}
.au-page.wartet,.ms-page.wartet{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .pf-page.rein-vor,.pf-page.rein-back,.pf-page.weg-vor,.pf-page.weg-back,
  .sh-seite.rein-vor,.sh-seite.rein-back,.sh-ueber-inhalt.weg-vor,.sh-ueber-inhalt.weg-back,
  .ez-motion-begleiter.weg-vor,.ez-motion-begleiter.weg-back,
  .sh-tab-alt.weg-vor,.sh-tab-alt.weg-back,.sh-tab-neu.rein-vor,.sh-tab-neu.rein-back{animation:none!important}
  .au-page.rein-vor,.au-page.rein-back,.au-page.weg-vor,.au-page.weg-back,
  .ms-page.rein-vor,.ms-page.rein-back,.ms-page.weg-vor,.ms-page.weg-back{animation:none!important}
  .sh-seite.wartet{opacity:1}
  *,*::before,*::after{
    animation-duration:var(--motion-reduced)!important;
    animation-iteration-count:1!important;
    transition-duration:var(--motion-reduced)!important;
    scroll-behavior:auto!important
  }
}
}

@layer motion{
/* Anstoss-Siegel: endliche Einblendung, keine dauernd drehende Ladeanzeige. */
.ez-kickoff::before{transform:rotate(-100deg);transition:transform var(--motion-emblem) var(--ease-emblem)}
.ez-kickoff.ez-revealed::before{transform:rotate(-35deg)}
@media(hover:hover){.ez-kickoff.ez-revealed:hover::before{transform:rotate(55deg)}}
@media(prefers-reduced-motion:reduce){.ez-kickoff::before,.ez-kickoff.ez-revealed::before,.ez-kickoff.ez-revealed:hover::before{transform:rotate(-35deg);transition:none}}
}

/* Homepage-inspirierte Scrollbewegung: stabile Anker, nur opacity/transform.
   Datum und Zeile teilen denselben Zustand. Keine Layout- oder Scrollanimation. */
@layer motion {
  [data-scroll-reveal="group"] > * {
    transition:opacity var(--motion-scroll-fade) ease, transform var(--motion-scroll-rise) var(--ease-scroll);
  }
  [data-scroll-reveal="fade"] {
    transition:opacity var(--motion-scroll-fade) ease;
  }
  [data-scroll-reveal="group"][data-scroll-visible="false"] > * {
    opacity:0;
    transform:translate3d(0,var(--scroll-reveal-distance),0);
  }
  [data-scroll-reveal="fade"][data-scroll-visible="false"] { opacity:0; }
  [data-scroll-reveal][data-scroll-visible="false"] { pointer-events:none; }
  [data-scroll-reveal="group"][data-scroll-visible="true"] > * { opacity:1;transform:none; }
  [data-scroll-reveal="fade"][data-scroll-visible="true"] { opacity:1; }
  [data-scroll-reveal="group"]:focus-within > *,
  [data-scroll-reveal="fade"]:focus-within { opacity:1;transform:none;transition:none; }
  /* Die erste Card-Einfahrt besitzt die Bewegung; Scroll-Fades erst nach Scrollen. */
  [data-scroll-initial][data-scroll-reveal="fade"],
  [data-scroll-initial][data-scroll-reveal="group"] > * { transition:none; }
  @media (prefers-reduced-motion:reduce) {
    [data-scroll-reveal="group"] > *, [data-scroll-reveal="fade"] { opacity:1;transform:none;transition:none; }
    [data-scroll-reveal] { pointer-events:auto; }
  }
}

@layer motion{
@keyframes ezKickoffOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.ez-match-hero .ez-kickoff::before{animation:ezKickoffOrbit var(--motion-kickoff-orbit) linear infinite;animation-play-state:paused;transition:none}
.ez-match-hero .ez-kickoff.ez-revealed::before{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.ez-match-hero .ez-kickoff::before{animation:none;transition:none}}
}

@layer motion{
.ez-kickoff-orbits circle{animation:ezKickoffOrbit var(--motion-kickoff-orbit) linear infinite;animation-play-state:paused}
.ez-kickoff-orbits .ez-orbit-home{animation-direction:reverse}
.ez-kickoff-orbits .ez-orbit-away{animation-duration:var(--motion-kickoff-orbit-inner);animation-delay:calc(var(--motion-kickoff-orbit-inner) / -2)}
.ez-kickoff.ez-revealed .ez-kickoff-orbits circle{animation-play-state:running}
/* Resting arcs occupy the upper semicircle, centered at 260° / 280°. Followed fixtures: only LIVE loops; other rings make one short reveal movement.
   Removing ez-revealed on exit arms the same movement for the next scroll entry. */
@keyframes ezOrbitPeekHome{from{transform:rotate(-120deg)}to{transform:rotate(-185deg)}}
@keyframes ezOrbitPeekAway{from{transform:rotate(119deg)}to{transform:rotate(195deg)}}
.ez-kickoff[data-match-live="0"] .ez-kickoff-orbits circle{animation:none}
.ez-kickoff[data-match-live="0"] .ez-orbit-home{transform:rotate(-185deg)}
.ez-kickoff[data-match-live="0"] .ez-orbit-away{transform:rotate(195deg)}
.ez-kickoff[data-match-live="0"].ez-revealed .ez-orbit-home{animation:ezOrbitPeekHome var(--motion-emblem) var(--ease-emblem) both}
.ez-kickoff[data-match-live="0"].ez-revealed .ez-orbit-away{animation:ezOrbitPeekAway var(--motion-emblem) var(--ease-emblem) both}
/* Small match cards and followed heroes keep turning while visible, with the same two orbit speeds.
   The existing visibility observer pauses them outside the viewport. */
:is(.hm-row.spiel,.hm-hero.spiel.follow) .ez-kickoff .ez-kickoff-orbits circle{animation:ezKickoffOrbit var(--motion-kickoff-orbit) linear infinite;animation-play-state:paused}
:is(.hm-row.spiel,.hm-hero.spiel.follow) .ez-kickoff .ez-kickoff-orbits .ez-orbit-home{animation-direction:reverse}
:is(.hm-row.spiel,.hm-hero.spiel.follow) .ez-kickoff .ez-kickoff-orbits .ez-orbit-away{animation-duration:var(--motion-kickoff-orbit-inner);animation-delay:calc(var(--motion-kickoff-orbit-inner) / -2)}
:is(.hm-row.spiel,.hm-hero.spiel.follow) .ez-kickoff.ez-revealed .ez-kickoff-orbits circle{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.ez-kickoff[data-match-live] .ez-kickoff-orbits circle{animation:none!important}}
@media(prefers-reduced-motion:reduce){.ez-kickoff-orbits circle{animation:none}.ez-kickoff-orbits .ez-orbit-home{transform:rotate(-185deg)}.ez-kickoff-orbits .ez-orbit-away{transform:rotate(195deg)}}
}

/* PDF-Innenrahmen bleibt auf seiner Achse: nur Überblendung, kein Einrutschen. */
@layer motion{
.pf-page.pdf-buehne.rein-vor,.pf-page.pdf-buehne.rein-back{animation-name:pdfSeiteEin}
.pf-page.pdf-buehne.weg-vor,.pf-page.pdf-buehne.weg-back{animation-name:pdfSeiteAus}
@keyframes pdfSeiteEin{from{opacity:0}to{opacity:1}}
@keyframes pdfSeiteAus{from{opacity:1}to{opacity:0}}
}

@layer zustaende{
.tm-toast-soft{opacity:0;transition:opacity var(--motion-content) var(--ease-standard)}
.tm-toast-soft.sichtbar{opacity:1}
@media(prefers-reduced-motion:reduce){.tm-toast-soft{transition:none}}
}

@layer motion{
.tm-attendance-slot>.tm-attendance-detail{opacity:0;transition:opacity var(--motion-state) var(--ease-state)}
.tm-attendance-slot>.tm-attendance-detail.sichtbar{opacity:1}
@media(prefers-reduced-motion:reduce){.tm-attendance-slot>.tm-attendance-detail{transition:none}}
}


@layer motion{
/* Gemeinsamer Ladescreen: Variante C, nur der Konturring dreht sich. */
.au-splash-orbit::after{animation:auSplashOrbit var(--motion-kickoff-orbit-inner) linear infinite}
@keyframes auSplashOrbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.au-splash-orbit::after{animation:none}}
}

@layer motion{
.ms-family-fold{transition:grid-template-rows var(--motion-expand) var(--ease-standard),opacity var(--motion-expand) var(--ease-standard)}
@media(prefers-reduced-motion:reduce){.ms-family-fold{transition:none}}
}