/*
 * Cadasports Original – Inhaltsbausteine 3.13.0
 * Bildkreise, nummerierte Kästen, Überschrift, Bild + Text, Button,
 * Hervorhebung „Training in privater Atmosphäre“, Einleitung Unterseiten.
 */

/* ===================== Bildkreise (2 × 4 Bilder) ===================== */
.cso-pies{
  padding:clamp(56px,7vw,104px) var(--pad,24px);
  background:linear-gradient(180deg,#fff 0%,#f7f8f4 100%);
  overflow:hidden;
}
.cso-pies__head{max-width:760px;margin:0 auto clamp(34px,5vw,60px);text-align:center}
.cso-pies__head .eyebrow{margin-bottom:12px}
.cso-pies__head h2{margin:0;font-size:clamp(2rem,3.8vw,3.6rem);line-height:1.02;letter-spacing:-.045em}

.cso-pies__row{
  --pie:clamp(240px,32vw,460px);--pie-gap:clamp(28px,8vw,140px);
  display:grid;grid-template-columns:repeat(2,minmax(0,var(--pie)));justify-content:center;align-items:center;
  gap:var(--pie-gap);width:min(var(--max,1440px),100%);margin:0 auto;
}
.cso-pies__row:has(> .cso-pie:only-child){grid-template-columns:minmax(0,var(--pie))}
.cso-pie{margin:0;min-width:0;width:100%}
.cso-pie__disc{
  position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:7px;
  aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:#fff;isolation:isolate;
  box-shadow:0 0 0 10px #fff,0 0 0 11px rgba(98,120,66,.24),0 26px 60px rgba(20,26,14,.14);
}
/* ein, zwei oder drei Bilder füllen den Kreis ebenfalls vollständig */
.cso-pie__disc[data-count="1"] .cso-pie__slice{grid-column:1/-1;grid-row:1/-1}
.cso-pie__disc[data-count="2"] .cso-pie__slice{grid-row:1/-1}
.cso-pie__disc[data-count="3"] .cso-pie__slice--1{grid-row:1/-1}

.cso-pie__slice{
  position:relative;display:block;width:100%;height:100%;min-height:0;padding:0;margin:0;border:0;
  background:#e9ece3;overflow:hidden;cursor:zoom-in;border-radius:0;
}
.cso-pie__slice img{
  display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;border-radius:0!important;
  transition:transform .9s cubic-bezier(.22,.8,.26,1),filter .5s ease;
}
.cso-pie__slice::after{
  content:"";position:absolute;inset:0;background:rgba(43,54,29,.0);transition:background-color .4s ease;pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .cso-pie__slice:hover img{transform:scale(1.08)}
  .cso-pie__slice:hover::after{background:rgba(43,54,29,.12)}
}
.cso-pie__slice:focus-visible{outline:none;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px rgba(98,120,66,.85);z-index:2}

/* Mitte: weißer Kreis mit Bezeichnung – wirkt wie ein Diagramm */
.cso-pie__center{
  position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;
  width:34%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:#fff;box-shadow:0 0 0 7px rgba(255,255,255,.55),0 10px 26px rgba(20,26,14,.18);
  pointer-events:none;
}
.cso-pie__center span{
  padding:0 8px;text-align:center;font-size:clamp(.82rem,1.25vw,1.15rem);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green-dark,#43552f);line-height:1.15;overflow-wrap:anywhere;
}

@media(max-width:720px){
  .cso-pies{padding:52px 18px 60px}
  .cso-pies__row{grid-template-columns:minmax(0,min(84vw,340px));gap:44px}
  .cso-pie__disc{gap:5px;box-shadow:0 0 0 7px #fff,0 0 0 8px rgba(98,120,66,.24),0 18px 40px rgba(20,26,14,.14)}
  .cso-pie__center span{font-size:.86rem}
}
@media(min-width:721px) and (max-width:900px){
  .cso-pies__row{--pie:330px;--pie-gap:32px}
}

/* Animation: Kreis dreht sich beim Hineinscrollen ein, Bilder folgen nacheinander */
@media(prefers-reduced-motion:no-preference){
  .cso-pies.is-armed .cso-pie__disc{opacity:0;transform:rotate(-40deg) scale(.86);transition:opacity .8s ease,transform 1.2s cubic-bezier(.22,.8,.26,1)}
  .cso-pies.is-armed .cso-pie--right .cso-pie__disc{transform:rotate(40deg) scale(.86);transition-delay:.15s}
  .cso-pies.is-armed .cso-pie__slice{opacity:0;transform:scale(.7);transition:opacity .6s ease,transform .9s cubic-bezier(.22,.8,.26,1);transition-delay:calc(.25s + var(--i) * .12s)}
  .cso-pies.is-armed .cso-pie__center{opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .5s ease .9s,transform .6s cubic-bezier(.3,1.5,.5,1) .9s}
  .cso-pies.is-armed.is-in .cso-pie__disc{opacity:1;transform:none}
  .cso-pies.is-armed.is-in .cso-pie__slice{opacity:1;transform:none}
  .cso-pies.is-armed.is-in .cso-pie__center{opacity:1;transform:translate(-50%,-50%)}
}

/* ===================== Überschrift-Baustein ===================== */
.cso-block-heading{margin:0 0 clamp(24px,3vw,40px);max-width:820px}
.cso-block-heading--center{margin-inline:auto;text-align:center}
.cso-block-heading .eyebrow{margin-bottom:12px}
.cso-block-heading h2{margin:0;font-size:clamp(1.9rem,3.6vw,3.4rem);line-height:1.03;letter-spacing:-.045em}
.cso-block-heading--large h2{font-size:clamp(2.4rem,5.2vw,4.8rem)}
.cso-block-heading--large h2::after{content:"";display:block;width:64px;height:4px;margin-top:20px;border-radius:4px;background:var(--green,#627842)}
.cso-block-heading--center.cso-block-heading--large h2::after{margin-inline:auto}
.cso-block-heading__text{margin:16px 0 0;color:#4a4e44;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.7}

/* ===================== Nummerierte Kästen ===================== */
.cso-boxes{margin:0 0 clamp(30px,4vw,56px)}
.cso-boxes__head{margin-bottom:clamp(24px,3vw,40px)}
.cso-boxes__head .eyebrow{margin-bottom:12px}
.cso-boxes__title{margin:0;font-size:clamp(2.4rem,5.2vw,4.8rem);line-height:1.02;letter-spacing:-.045em}
.cso-boxes__title::after{content:"";display:block;width:64px;height:4px;margin-top:20px;border-radius:4px;background:var(--green,#627842)}
.cso-boxes__list{
  list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.6vw,22px);
  grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
}
.cso-box{
  position:relative;display:flex;flex-direction:column;gap:10px;margin:0;
  padding:clamp(24px,2.6vw,36px);border-radius:20px;background:#fff;
  border:1px solid rgba(98,120,66,.16);box-shadow:0 12px 30px rgba(20,26,14,.06);
  transition:transform .35s cubic-bezier(.22,.8,.26,1),box-shadow .35s ease,border-color .35s ease;
}
.cso-boxes .cso-boxes__list{padding:0!important;margin:0!important;list-style:none!important}
.cso-boxes .cso-boxes__list > .cso-box{margin:0!important;padding:clamp(22px,2.6vw,36px)!important}
.cso-boxes .cso-boxes__list > .cso-box::marker{content:none}
.cso-box__number{
  display:block;font-size:clamp(2.8rem,4.6vw,4.2rem);font-weight:800;line-height:.9;letter-spacing:-.05em;
  color:var(--green,#627842);font-variant-numeric:tabular-nums;
}
.cso-box__title{margin:6px 0 0;font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.25;letter-spacing:-.01em}
.cso-box__text{margin:0;color:#4a4e44;line-height:1.65}
@media(hover:hover) and (pointer:fine){
  .cso-box:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(20,26,14,.1);border-color:rgba(98,120,66,.4)}
}
@media(max-width:1050px){.cso-boxes__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .cso-boxes__list{grid-template-columns:1fr}
  .cso-box{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:16px}
  .cso-box__number{font-size:3rem}
  .cso-box__title{flex:1 1 0;min-width:0}
  .cso-box__text{flex:1 1 100%}
}

/* ===================== Bild + Text ===================== */
.cso-media-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;margin:0 0 clamp(30px,4vw,56px)}
.cso-media-text--right .cso-media-text__media{order:2}
.cso-media-text__media{margin:0;overflow:hidden;border-radius:20px;box-shadow:0 16px 40px rgba(20,26,14,.1)}
.cso-media-text__media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0}
.cso-media-text__body .eyebrow{margin-bottom:12px}
.cso-media-text__body h2{margin:0 0 16px;font-size:clamp(1.8rem,3.2vw,3rem);line-height:1.04;letter-spacing:-.04em}
.cso-media-text__body p{line-height:1.75;color:#3f433a}
@media(max-width:820px){
  .cso-media-text{grid-template-columns:1fr}
  .cso-media-text--right .cso-media-text__media{order:0}
}

/* ===================== Button-Baustein ===================== */
.cso-block-button{margin:clamp(14px,2vw,24px) 0}
.cso-block-button--center{text-align:center}

/* ===================== Hervorhebung „Training in privater Atmosphäre“ =====================
   Wird per JavaScript an der passenden Überschrift und den Zahlen 01–04 gesetzt –
   unabhängig davon, ob der Bereich im Theme oder mit WPBakery angelegt wurde. */
.cso-emph-heading{
  font-size:clamp(2.4rem,5.2vw,4.8rem)!important;font-weight:800!important;line-height:1.02!important;
  letter-spacing:-.045em!important;color:var(--ink,#0b0b0b)!important;text-transform:none;
  text-wrap:balance;margin-bottom:clamp(26px,3.2vw,44px)!important;
}
.cso-emph-heading::after{content:"";display:block;width:64px;height:4px;margin-top:20px;border-radius:4px;background:var(--green,#627842)}
.cso-emph-heading.cso-emph-center::after{margin-inline:auto}
.cso-emph-number{
  display:inline-block!important;font-size:clamp(2.8rem,4.6vw,4.2rem)!important;font-weight:800!important;
  line-height:.95!important;letter-spacing:-.05em!important;color:var(--green,#627842)!important;
  font-variant-numeric:tabular-nums;opacity:1!important;margin-bottom:.15em;
}

/* ===================== Unterseiten: Einleitungstext im Kopfbereich ===================== */
.subpage-hero-intro{
  max-width:60ch;margin:clamp(12px,1.6vw,20px) 0 0;font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.65;color:#3f433a;
}

/* ===================== Vergrößerung (Lightbox) ===================== */
.cso-lightbox[open]{animation:cso-blocks-lightbox .35s cubic-bezier(.22,.8,.26,1) both}
@keyframes cso-blocks-lightbox{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .cso-pie__slice img,.cso-box{transition:none}
  .cso-lightbox[open]{animation:none}
}

/* =====================================================================
   3.14.0 – Bilder in Bewegung (4 Bilder, schräge Trennlinien)
   ===================================================================== */
.cso-motion{padding:clamp(64px,8vw,124px) var(--pad,24px);background:#fff;overflow:hidden}
.cso-motion__head{max-width:760px;margin:0 auto clamp(30px,4vw,56px);text-align:center}
.cso-motion__head .eyebrow{margin-bottom:12px}
.cso-motion__head h2{margin:0;font-size:clamp(2rem,3.8vw,3.6rem);line-height:1.02;letter-spacing:-.045em}

.cso-motion__strip{
  --slant:clamp(26px,4.2vw,70px);--gap:10px;--h:clamp(340px,40vw,620px);--move:clamp(18px,3.2vw,46px);
  display:flex;width:min(var(--max,1440px),100%);height:var(--h);margin:0 auto;
}
.cso-motion__panel{
  position:relative;flex:1 1 0;min-width:0;height:100%;padding:0;border:0;background:#e9ece3;cursor:zoom-in;
  margin-left:calc(var(--slant) * -1 + var(--gap));
  clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%);
  translate:0 calc(var(--p,0) * var(--move));
  transition:filter .4s ease;
}
.cso-motion__panel--up{translate:0 calc(var(--p,0) * var(--move) * -1)}
.cso-motion__panel:first-child{margin-left:0;clip-path:polygon(0 0,100% 0,calc(100% - var(--slant)) 100%,0 100%)}
.cso-motion__panel:last-child{clip-path:polygon(var(--slant) 0,100% 0,100% 100%,0 100%)}
.cso-motion__panel:only-child{clip-path:none}
.cso-motion__panel .cso-motion__frame{position:absolute;inset:-16px 0;overflow:hidden}
.cso-motion__frame img{
  display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;border-radius:0!important;
  transform:scale(1.12);transition:transform 1s cubic-bezier(.22,.8,.26,1);
}
@media(hover:hover) and (pointer:fine){
  .cso-motion__panel:hover .cso-motion__frame img{transform:scale(1.2)}
  .cso-motion__strip:hover .cso-motion__panel:not(:hover){filter:saturate(.75) brightness(.92)}
}
.cso-motion__panel:focus-visible{outline:none;filter:brightness(1.05)}
.cso-motion__panel:focus-visible .cso-motion__frame{box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 7px rgba(98,120,66,.9)}

@media(max-width:720px){
  .cso-motion{padding:56px 0 64px}
  .cso-motion__head{padding-inline:18px}
  .cso-motion__strip{--slant:20px;--gap:6px;--h:min(108vw,440px);--move:16px}
}

/* Bewegung: Einblenden von oben/unten + sanftes Auf und Ab (abwechselnd) */
@media(prefers-reduced-motion:no-preference){
  .cso-motion.is-armed .cso-motion__panel{opacity:0;transition:opacity .9s ease,transform 1.1s cubic-bezier(.22,.8,.26,1),filter .4s ease;transition-delay:calc(var(--i) * .12s)}
  .cso-motion.is-armed .cso-motion__panel--down{transform:translateY(-70px)}
  .cso-motion.is-armed .cso-motion__panel--up{transform:translateY(70px)}
  .cso-motion.is-armed.is-in .cso-motion__panel{opacity:1;transform:none}
  .cso-motion.is-in.is-floating .cso-motion__panel--down .cso-motion__frame{animation:cso-float-down 6s ease-in-out infinite alternate}
  .cso-motion.is-in.is-floating .cso-motion__panel--up .cso-motion__frame{animation:cso-float-up 6s ease-in-out infinite alternate}
  .cso-motion.is-paused .cso-motion__frame{animation-play-state:paused!important}
}
@keyframes cso-float-down{from{transform:translateY(-10px)}to{transform:translateY(10px)}}
@keyframes cso-float-up{from{transform:translateY(10px)}to{transform:translateY(-10px)}}

/* =====================================================================
   3.14.0 – Vier farbige Kästen
   ===================================================================== */
.cso-pboxes{padding:clamp(64px,8vw,124px) var(--pad,24px);background:linear-gradient(180deg,#f7f8f4 0%,#fff 100%)}
.cso-pboxes__inner{width:min(var(--max,1440px),100%);margin:0 auto}
.cso-pboxes__head{max-width:820px;margin:0 auto clamp(34px,4.5vw,60px);text-align:center}
.cso-pboxes__head .eyebrow{margin-bottom:12px}
.cso-pboxes__head h2{margin:0;font-size:clamp(2.2rem,4.6vw,4.4rem);line-height:1.02;letter-spacing:-.045em}
.cso-pboxes__head h2::after{content:"";display:block;width:64px;height:4px;margin:20px auto 0;border-radius:4px;background:var(--green,#627842)}

.cso-pboxes__list{list-style:none!important;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.cso-pbox{
  --c:#4f7a35;--c2:#3c5f27;
  position:relative;isolation:isolate;overflow:hidden;margin:0!important;
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  min-height:clamp(250px,22vw,330px);padding:clamp(26px,2.4vw,36px)!important;border-radius:24px;
  background:linear-gradient(150deg,var(--c) 0%,var(--c2) 100%);color:#fff;
  box-shadow:0 18px 40px color-mix(in srgb,var(--c) 28%,transparent),0 2px 6px rgba(0,0,0,.06);
  transition:transform .4s cubic-bezier(.22,.8,.26,1),box-shadow .4s ease;
}
.cso-pbox::after{
  content:"";position:absolute;z-index:-1;right:-30%;bottom:-38%;width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 68%);
}
.cso-pbox--green{--c:#4f7a35;--c2:#3b5e27}
.cso-pbox--blue{--c:#2f6fb5;--c2:#22558f}
.cso-pbox--red{--c:#c0392b;--c2:#982a1f}
.cso-pbox--orange{--c:#a85a12;--c2:#87470c}

.cso-pbox__badge{display:grid;place-items:center;width:clamp(64px,5.4vw,80px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.14)}
.cso-pbox__icon{width:56%;height:56%;fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cso-pbox__slash{stroke-width:2.2}
.cso-pbox__number{position:absolute;top:clamp(18px,2vw,28px);right:clamp(20px,2.2vw,30px);font-size:clamp(2.6rem,3.6vw,3.6rem);font-weight:800;line-height:1;letter-spacing:-.05em;color:rgba(255,255,255,.3)}
.cso-pbox__text{
  margin:0!important;color:#fff!important;font-size:clamp(1.4rem,1.85vw,2rem)!important;font-weight:800;line-height:1.16;letter-spacing:-.02em;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;text-wrap:balance;
}
@media(hover:hover) and (pointer:fine){
  .cso-pbox:hover{transform:translateY(-6px);box-shadow:0 26px 54px color-mix(in srgb,var(--c) 36%,transparent),0 2px 6px rgba(0,0,0,.06)}
}
@media(max-width:1100px){.cso-pboxes__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .cso-pboxes{padding:54px 16px 60px}
  .cso-pboxes__list{grid-template-columns:1fr;gap:12px}
  .cso-pbox{min-height:0;flex-direction:row;align-items:center;gap:18px;padding:22px 20px!important;border-radius:20px}
  .cso-pbox__badge{flex:0 0 60px;width:60px}
  .cso-pbox__number{top:auto;bottom:10px;right:16px;font-size:2.2rem}
  .cso-pbox__text{font-size:1.28rem!important;padding-right:30px}
}
@media(prefers-reduced-motion:no-preference){
  .cso-pboxes.is-armed .cso-pbox{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,.8,.26,1),box-shadow .4s ease;transition-delay:calc(var(--i) * .1s)}
  .cso-pboxes.is-armed.is-in .cso-pbox{opacity:1;transform:none}
  .cso-pboxes.is-armed.is-in .cso-pbox:hover{transform:translateY(-6px);transition-delay:0s}
}