/* CMS Life – Bewegung und Leben für alle Seiten (Hub + Eventzentrale).
   Nur Zusatz-Effekte, keine Layout-Änderungen. Wird von cms_life.js ergänzt.
   Alles läuft nur bei prefers-reduced-motion: no-preference. */
:root{--life-copper:#e3a063;--life-bright:#ffbe91;--life-red:#b3201a;--life-ease:cubic-bezier(.2,.7,.2,1)}

/* weicher Seitenwechsel (Chrome/Edge: Cross-Document View Transitions) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s}

/* ---------- Zurück-Button (immer aktiv, unabhängig von Animationen) ---------- */
.cms-back{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;box-sizing:border-box;min-height:38px;padding:0 13px 0 9px;margin:0;border:1px solid rgba(227,160,99,.65);border-radius:10px;background:rgba(18,13,13,.94);color:#ffbe91;font:750 13px/1 system-ui,sans-serif;letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,color .15s,border-color .15s}
.cms-back-arrow{font-size:24px;line-height:1;margin-top:-3px;font-weight:400}
.cms-back-name{display:none;font-weight:600;color:#d8c9bd}
.cms-back-name::before{content:"\00b7\00a0"}
.cms-back:hover,.cms-back:focus-visible{background:#b3201a;border-color:#e3a063;color:#fff}
.cms-back:hover .cms-back-name,.cms-back:focus-visible .cms-back-name{color:#fff}
.cms-back:focus-visible{outline:2px solid #ffbe91;outline-offset:2px}
.cms-viewbar>.cms-back{margin-right:4px}
.cms-viewbar>.cms-back+.cms-viewbar-brand{margin-right:auto}
.cms-backbar{padding:0 0 8px}
@media (min-width:720px){.cms-back-name{display:inline}}
@media (max-width:420px){.cms-back{padding:0 10px 0 7px;gap:5px}}
@media (max-width:380px){.cms-viewbar>.cms-back~.cms-viewbar-brand{width:auto;min-width:0;flex:1 1 0;overflow:hidden}.cms-viewbar>.cms-back~.cms-viewbar-brand small{display:none}}
@media print{.cms-back,.cms-backbar{display:none}}

@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}

/* ---------- Einblendung beim Laden (reine CSS-Keyframes, kein Flackern) ---------- */
@keyframes cmsRise{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
@keyframes cmsPop{from{opacity:0;transform:translate3d(0,28px,0) scale(.93)}to{opacity:1;transform:none}}

.hero>*,.cms-portal-hero-copy>*,.cms-portal-art,.masthead{animation:cmsRise .85s var(--life-ease) backwards}
.hero>:nth-child(2),.cms-portal-hero-copy>:nth-child(2){animation-delay:.08s}
.hero>:nth-child(3),.cms-portal-hero-copy>:nth-child(3){animation-delay:.16s}
.hero>:nth-child(4),.cms-portal-hero-copy>:nth-child(4){animation-delay:.24s}
.hero>:nth-child(5),.cms-portal-hero-copy>:nth-child(5){animation-delay:.32s}
.hero>:nth-child(n+6),.cms-portal-hero-copy>:nth-child(n+6),.cms-portal-art{animation-delay:.4s}

.dashboard>:nth-child(-n+4){animation:cmsRise .8s var(--life-ease) backwards}
.dashboard>:nth-child(2){animation-delay:.1s}
.dashboard>:nth-child(3){animation-delay:.2s}
.dashboard>:nth-child(4){animation-delay:.3s}

:is(.cms-live-stat,.cms-quickstat,.rank-metric){animation:cmsRise .75s var(--life-ease) backwards}
:is(.cms-live-stat,.cms-quickstat,.rank-metric):nth-child(2){animation-delay:.08s}
:is(.cms-live-stat,.cms-quickstat,.rank-metric):nth-child(3){animation-delay:.16s}
:is(.cms-live-stat,.cms-quickstat,.rank-metric):nth-child(4){animation-delay:.24s}

.podium-person{animation:cmsPop .8s var(--life-ease) backwards}
.podium-person:nth-child(1){animation-delay:.15s}
.podium-person:nth-child(3){animation-delay:.3s}
.podium-person:nth-child(2){animation-delay:.5s}

:is(.event-card,.card,.cms-medal-card,.medal){animation:cmsRise .7s var(--life-ease) backwards}
:is(.event-card,.card,.cms-medal-card,.medal):nth-child(2){animation-delay:.06s}
:is(.event-card,.card,.cms-medal-card,.medal):nth-child(3){animation-delay:.12s}
:is(.event-card,.card,.cms-medal-card,.medal):nth-child(4){animation-delay:.18s}
:is(.event-card,.card,.cms-medal-card,.medal):nth-child(5){animation-delay:.24s}
:is(.event-card,.card,.cms-medal-card,.medal):nth-child(n+6){animation-delay:.3s}

/* ---------- Einblendung beim Scrollen (Klassen kommen aus cms_life.js) ---------- */
html.cms-life .cms-reveal{opacity:0;transform:translate3d(0,26px,0) scale(.985);transition:opacity .75s var(--life-ease),transform .75s var(--life-ease);transition-delay:var(--d,0ms);will-change:opacity,transform}
html.cms-life .cms-reveal.is-in{opacity:1;transform:none}

/* ---------- Lebendiger Hintergrund ---------- */
html.cms-life body::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 32% at 18% 12%,rgba(179,32,26,.20),transparent 70%),
             radial-gradient(34% 30% at 86% 28%,rgba(227,160,99,.14),transparent 72%),
             radial-gradient(40% 34% at 55% 92%,rgba(138,24,18,.16),transparent 70%);
  animation:cmsDrift 28s ease-in-out infinite alternate;will-change:transform}
@keyframes cmsDrift{0%{transform:translate3d(-2%,-1%,0) scale(1)}50%{transform:translate3d(3%,2%,0) scale(1.08)}100%{transform:translate3d(-1%,3%,0) scale(1.03)}}

.cms-embers{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:1;mix-blend-mode:screen}

.cms-progress{position:fixed;left:0;top:0;width:100%;height:3px;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--life-red),var(--life-copper),var(--life-bright));
  box-shadow:0 0 10px rgba(227,160,99,.65);z-index:2147483000;pointer-events:none}

/* ---------- Dauerhafte Akzente ---------- */
@keyframes cmsEdge{0%,100%{border-color:rgba(227,160,99,.28)}50%{border-color:rgba(255,190,145,.85)}}
@keyframes cmsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes cmsGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,190,145,0))}50%{filter:drop-shadow(0 0 9px rgba(255,190,145,.6))}}
@keyframes cmsPulse{0%,100%{box-shadow:0 0 0 0 rgba(227,160,99,0)}50%{box-shadow:0 0 24px 2px rgba(227,160,99,.32)}}

html:root .featured{animation:cmsRise .8s var(--life-ease) .1s backwards,cmsEdge 4.8s ease-in-out .9s infinite}
.podium-person:nth-child(2){animation:cmsPop .8s var(--life-ease) .5s backwards,cmsEdge 4.8s ease-in-out 1.4s infinite}
.podium-avatar{animation:cmsFloat 3.8s ease-in-out infinite}
.podium-person:nth-child(2) .podium-avatar{animation-duration:3s}
:is(.medal-symbol,.cms-medal-symbol){animation:cmsGlow 4.6s ease-in-out infinite}
:is(.medal,.cms-medal-card):nth-child(2n) :is(.medal-symbol,.cms-medal-symbol){animation-delay:.7s}
:is(.medal,.cms-medal-card):nth-child(3n) :is(.medal-symbol,.cms-medal-symbol){animation-delay:1.5s}
:is(.medal,.cms-medal-card):nth-child(5n) :is(.medal-symbol,.cms-medal-symbol){animation-delay:2.3s}
:is(.gold-button,.cms-primary-cta,.hero .button:not(.secondary)){animation:cmsPulse 3.8s ease-in-out infinite}
:is(.cms-logo-mark,.masthead .wings){animation:cmsGlow 5s ease-in-out infinite}

/* ---------- Hover (nur Maus) ---------- */
@media (hover:hover) and (pointer:fine){
  html.cms-life :is(.event-card,.card,.cms-live-stat,.cms-quickstat,.rank-metric,.portal-help,.cms-medal-card,.medal,.podium-person):not(.cms-reveal){
    transition:transform .28s var(--life-ease),box-shadow .28s var(--life-ease),border-color .28s}
  html.cms-life :is(.event-card,.card,.cms-live-stat,.cms-quickstat,.rank-metric,.portal-help):not(.cms-reveal):hover{
    transform:translateY(-4px);border-color:rgba(227,160,99,.6);
    box-shadow:0 14px 32px rgba(0,0,0,.5),0 0 0 1px rgba(227,160,99,.16),0 0 28px rgba(227,160,99,.14)}
  html.cms-life :is(.cms-medal-card,.medal,.podium-person):not(.cms-reveal):hover{
    transform:perspective(620px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px);
    border-color:rgba(227,160,99,.65);box-shadow:0 16px 34px rgba(0,0,0,.55),0 0 30px rgba(227,160,99,.2)}
  html.cms-life :is(.panel,.rank-section):hover{border-color:rgba(227,160,99,.32)}
  html.cms-life :is(.panel,.rank-section){transition:border-color .35s}

  /* Spotlight, der dem Mauszeiger folgt */
  html.cms-life .cms-spot{position:relative}
  html.cms-life .cms-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,190,145,.13),transparent 65%);z-index:0}
  html.cms-life .cms-spot:hover::before{opacity:1}

  /* Buttons: Lift + Glanzstreifen */
  html.cms-life :is(.button,.gold-button,.outline-button,.cms-primary-cta,.cms-outline-cta,button.secondary){
    position:relative;overflow:hidden;transition:transform .2s var(--life-ease),box-shadow .25s,filter .25s}
  html.cms-life :is(.button,.gold-button,.outline-button,.cms-primary-cta,.cms-outline-cta,button.secondary)::after{
    content:"";position:absolute;top:0;left:-80%;width:45%;height:100%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-20deg);transition:left .65s var(--life-ease)}
  html.cms-life :is(.button,.gold-button,.outline-button,.cms-primary-cta,.cms-outline-cta,button.secondary):hover{
    transform:translateY(-2px);box-shadow:0 8px 24px rgba(179,32,26,.45),0 0 20px rgba(227,160,99,.22);animation:none}
  html.cms-life :is(.button,.gold-button,.outline-button,.cms-primary-cta,.cms-outline-cta,button.secondary):hover::after{left:135%}
  html.cms-life :is(.button,.gold-button,.outline-button,.cms-primary-cta,.cms-outline-cta,button.secondary):active{transform:translateY(0) scale(.97)}

  /* Navigation */
  html.cms-life nav a{transition:color .2s,background-color .2s,transform .2s var(--life-ease),text-shadow .2s}
  html.cms-life nav a:hover{transform:translateY(-1px);text-shadow:0 0 12px rgba(227,160,99,.5)}

  /* Tabellen */
  html.cms-life :is(.rank-table,.leaderboard table) tbody tr{transition:background-color .2s,box-shadow .2s}
  html.cms-life :is(.rank-table,.leaderboard table) tbody tr:hover{background:rgba(227,160,99,.1);box-shadow:inset 3px 0 0 var(--life-copper)}

  /* Bilder in Eventkarten */
  html.cms-life .event-card img{transition:transform .9s var(--life-ease)}
  html.cms-life .event-card:hover img{transform:scale(1.06)}
}

/* Top-3 in Tabellen leuchten leicht */
html.cms-life :is(.rank-table,.leaderboard table) tbody tr:nth-child(-n+3) td:first-child{color:var(--life-bright);font-weight:800}
}

/* Handy: weniger Effekte, mehr Ruhe */
@media (max-width:700px){
  html.cms-life body::before{animation:none}
}