/*
 * Cadasports Original – Ergänzungen 3.10.0
 * 1. Übungsfigur im Kopfbereich der Unterseiten
 * 2. Animierte Leistungsgrafik auf der Studio-Seite
 * Wird zusätzlich geladen; bestehende Stile bleiben unverändert.
 */

/* ===================== 1. Übungsfigur ===================== */
.subpage-hero.cso-has-athlete{position:relative;isolation:isolate}
.cso-athlete-in-text > .container{position:relative}

.cso-hero-athlete{
  --size:clamp(150px,15vw,230px);
  position:absolute;z-index:2;top:50%;
  right:max(var(--pad,24px),calc((100vw - var(--max,1440px)) / 2 + var(--pad,24px)));
  width:var(--size);margin:0;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  pointer-events:none;
  animation:cso-athlete-in .9s cubic-bezier(.22,.8,.26,1) .25s both;
}
/* Über uns: Figur auf der Textseite, nicht über dem Foto */
.cso-athlete-in-text .cso-hero-athlete{right:0}

.cso-hero-athlete__stage{
  position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#fff 0%,#f3f5ee 58%,#e8ecdf 100%);
  box-shadow:0 18px 40px rgba(43,54,29,.10),inset 0 0 0 1px rgba(98,120,66,.14);
}
.cso-hero-athlete__stage::before{
  /* feiner, langsam drehender Ring – dezent, nicht ablenkend */
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:1.5px dashed rgba(98,120,66,.28);
  animation:cso-athlete-ring 40s linear infinite;
}
.cso-ath-svg{position:absolute;inset:9% 10% 8%;width:80%;height:83%;overflow:visible}
.cso-ath-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cso-ath-body{stroke:var(--green,#627842);stroke-width:13}
.cso-ath-torso{stroke:var(--green,#627842);stroke-width:24}
.cso-ath-frau .cso-ath-torso{stroke-width:20}
.cso-ath-far{stroke:#b4c19f;stroke-width:12}
.cso-ath-fill{fill:var(--green,#627842)}
.cso-ath-shadow{fill:rgba(67,85,47,.14)}

.cso-hero-athlete__label{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  background:#fff;border:1px solid rgba(98,120,66,.2);box-shadow:0 4px 12px rgba(20,26,14,.05);
  color:var(--green-dark,#43552f);font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;text-wrap:nowrap;
}
.cso-hero-athlete .cso-hero-athlete__label{white-space:nowrap;text-wrap:nowrap;width:max-content;max-width:none}
.cso-hero-athlete__label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green,#627842);animation:cso-athlete-pulse 1.8s ease-in-out infinite}

/* Platz für die Figur, damit lange Titel sie nicht berühren */
@media(min-width:721px){
  .subpage-hero.cso-has-athlete:not(.cso-athlete-in-text) .container{padding-right:calc(clamp(150px,15vw,230px) + 32px)}
  .cso-athlete-in-text .container{padding-right:calc(clamp(150px,15vw,230px) + 24px)}
}
@media(min-width:721px) and (max-width:1050px){
  .cso-hero-athlete{--size:150px}
  .subpage-hero.cso-has-athlete .container{padding-right:180px}
}
@media(max-width:720px){
  .cso-hero-athlete{--size:96px;right:16px;gap:0}
  .cso-athlete-in-text .cso-hero-athlete{right:16px}
  .cso-hero-athlete__label{display:none}
  .cso-hero-athlete__stage::before{inset:-5px}
  /* Text weicht der Figur aus */
  body .subpage-hero.cso-has-athlete .container{padding-right:118px!important}
  body .subpage-hero.cso-has-athlete h1{font-size:clamp(1.9rem,8.6vw,2.8rem)!important;max-width:none!important;overflow-wrap:normal}
}

@keyframes cso-athlete-in{from{opacity:0;transform:translateY(calc(-50% + 18px)) scale(.94)}to{opacity:1;transform:translateY(-50%)}}
@keyframes cso-athlete-ring{to{transform:rotate(360deg)}}
@keyframes cso-athlete-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ===================== 2. Leistungsgrafik Studio ===================== */
.cso-perf{
  width:min(var(--max,1440px),100%);margin:0 auto clamp(40px,6vw,90px);
  padding:clamp(28px,4vw,56px);border-radius:24px;
  background:linear-gradient(160deg,#fff 0%,#f6f8f1 100%);
  border:1px solid rgba(98,120,66,.16);box-shadow:0 18px 44px rgba(20,26,14,.06);
}
.cso-perf__head{max-width:760px;margin-bottom:clamp(24px,3.5vw,40px)}
.cso-perf__head h2{margin:0 0 14px;font-size:clamp(1.9rem,3.6vw,3.3rem);line-height:1.04;letter-spacing:-.04em}
.cso-perf__head p:last-child{margin:0;color:#4a4e44;line-height:1.7;max-width:62ch}

.cso-perf__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(16px,2.4vw,28px);align-items:stretch}
.cso-perf .cso-perf__card{margin:0!important}
.cso-perf__card{
  position:relative;margin:0;padding:clamp(20px,2.6vw,30px);border-radius:18px;background:#fff;
  border:1px solid rgba(98,120,66,.14);box-shadow:0 6px 18px rgba(20,26,14,.04);
}
.cso-perf__card-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:16px}
.cso-perf__card-head strong{font-size:1.02rem;letter-spacing:-.01em;color:var(--ink,#0b0b0b)}
.cso-perf__card-head > span{font-size:.8rem;color:#5d6156}

.cso-perf__plot{position:relative}
.cso-perf__svg{display:block;width:100%;height:auto;overflow:visible}
.cso-perf__grid-lines line{stroke:#e6e8e1;stroke-width:1}
.cso-perf__weeks text,.cso-perf__axis-label{fill:#6a6e63;font-size:13px;font-weight:600}
.cso-perf__line{fill:none;stroke:var(--green-dark,#43552f);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cso-perf__dot{fill:var(--green-dark,#43552f);stroke:#fff;stroke-width:2.5;transition:r .18s ease}
.cso-perf__hit{fill:transparent;cursor:pointer}
.cso-perf__point{outline:none}
.cso-perf__point:is(:hover,:focus-visible) .cso-perf__dot{r:8}
.cso-perf__point:focus-visible .cso-perf__dot{stroke:var(--green,#627842);stroke-width:4}
.cso-perf__end-label rect{fill:var(--green-dark,#43552f)}
.cso-perf__end-label text{fill:#fff;font-size:12px;font-weight:800;letter-spacing:.02em}

.cso-perf__bars{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:18px}
.cso-perf__bar{display:grid;gap:8px;padding:4px 0;border-radius:8px;outline:none;cursor:default}
.cso-perf__bar:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(98,120,66,.6)}
.cso-perf__bar-label{font-size:.88rem;font-weight:700;color:var(--ink,#0b0b0b)}
.cso-perf__track{position:relative;display:block;height:14px;border-radius:7px;background:#eef0ea;overflow:hidden}
.cso-perf__fill{position:absolute;top:0;bottom:0;left:0;border-radius:7px;transform-origin:left center}
.cso-perf__fill--end{width:var(--end);background:var(--green-dark,#4f6436)}
.cso-perf__fill--start{
  width:var(--start);border-right:2px solid #fff;
  background:repeating-linear-gradient(45deg,#9aa887 0 4px,#b6c1a5 4px 8px);
}
.cso-perf__bar:is(:hover,:focus-visible) .cso-perf__fill--end{background:var(--green,#627842)}

.cso-perf__legend{display:inline-flex;gap:14px;font-size:.78rem;color:#4a4e44}
.cso-perf__legend-item{display:inline-flex;align-items:center;gap:6px}
.cso-perf__key{display:inline-block;width:16px;height:10px;border-radius:3px}
.cso-perf__key--start{background:repeating-linear-gradient(45deg,#9aa887 0 3px,#b6c1a5 3px 6px)}
.cso-perf__key--end{background:var(--green-dark,#4f6436)}

.cso-perf__tip{
  position:absolute;z-index:5;max-width:240px;padding:9px 12px;border-radius:10px;
  background:var(--ink,#0b0b0b);color:#fff;font-size:.8rem;line-height:1.4;
  box-shadow:0 10px 24px rgba(0,0,0,.18);pointer-events:none;transform:translate(-50%,calc(-100% - 12px));
}
.cso-perf__tip strong{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#cfdcbc;margin-bottom:2px}

.cso-perf__note{margin:18px 0 0;font-size:.78rem;line-height:1.6;color:#5e6259}

@media(max-width:900px){
  .cso-perf__grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .cso-perf{padding:22px 16px;border-radius:18px}
  .cso-perf__card{padding:18px 14px}
  .cso-perf__weeks text{font-size:24px}
  .cso-perf__end-label{display:none}
  .cso-perf__line{stroke-width:4.5}
}

/* --- Animation: nur wenn JavaScript läuft und Bewegung erwünscht ist --- */
@media(prefers-reduced-motion:no-preference){
  .cso-perf.is-armed .cso-perf__line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.45,0,.2,1) .2s}
  .cso-perf.is-armed .cso-perf__area{opacity:0;transition:opacity 1.2s ease .9s}
  .cso-perf.is-armed .cso-perf__dot{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.6,.5,1),r .18s ease;transition-delay:calc(.25s + var(--i) * .24s)}
  .cso-perf.is-armed .cso-perf__end-label{opacity:0;transform:translateY(8px);transition:opacity .5s ease 1.9s,transform .5s ease 1.9s}
  .cso-perf.is-armed .cso-perf__fill{transform:scaleX(0);transition:transform 1.3s cubic-bezier(.22,.8,.26,1)}
  .cso-perf.is-armed .cso-perf__fill--start{transition-delay:calc(.3s + var(--i) * .15s)}
  .cso-perf.is-armed .cso-perf__fill--end{transition-delay:calc(.9s + var(--i) * .15s)}

  .cso-perf.is-armed.is-in .cso-perf__line{stroke-dashoffset:0}
  .cso-perf.is-armed.is-in .cso-perf__area{opacity:1}
  .cso-perf.is-armed.is-in .cso-perf__dot{opacity:1;transform:none}
  .cso-perf.is-armed.is-in .cso-perf__end-label{opacity:1;transform:none}
  .cso-perf.is-armed.is-in .cso-perf__fill{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .cso-hero-athlete,.cso-hero-athlete__stage::before,.cso-hero-athlete .cso-hero-athlete__label{white-space:nowrap;text-wrap:nowrap;width:max-content;max-width:none}
.cso-hero-athlete__label::before{animation:none!important}
}
@media print{.cso-hero-athlete{display:none}}