/* ============================================================
   skyfit WOMEN · Sommer-Kampagne (Sommer Sonne Strandfigur)
   Portiert aus Claude Design. Alles unter .sf-lp2 gescoped,
   damit Site-Header/-Footer (Theme/Elementor) unberührt bleiben.
   Inline-Styles im Template = Design-Source-of-Truth; hier nur,
   was inline nicht geht (Tokens, Keyframes, Responsive, Hover-Fallbacks).
   ============================================================ */

/* ---- Design-Tokens (global, kollisionsfrei via --sf-*) ---- */
:root{
  --sf-purple-vivid:#B32DBD; --sf-purple-magenta:#C1208A; --sf-magenta-hot:#D838C4;
  --sf-gold:#F9C22E; --sf-gold-bright:#FBD024; --sf-gold-soft:#FCD86A; --sf-gold-deep:#E5A810;
  --sf-sand:#F4E3C6; --sf-sand-deep:#E8CFA3; --sf-sky:#8FD0EA; --sf-sky-soft:#CDEBF6; --sf-cream:#FFF9EF;
  --sf-purple:#6B3FA0; --sf-purple-deep:#4E2C80; --sf-purple-soft:#8A5FC0; --sf-magenta-deep:#9B1E70;
  --sf-bg-deep:#1A1030; --sf-bg-deep-2:#2A1750; --sf-ink:#1F1233; --sf-ink-soft:#3A2160;
  --sf-white:#FFFFFF; --sf-text-muted:#6B6478; --sf-border:#ECE7F2; --sf-star:#FFB400;
  --grad-brand:linear-gradient(135deg,#6B3FA0 0%,#C1208A 60%,#D838C4 100%);
  --grad-price:linear-gradient(135deg,#D838C4 0%,#9B1E70 100%);
  --grad-sun:radial-gradient(circle at 50% 40%,#FCD86A 0%,#F9C22E 55%,#E5A810 100%);
  --grad-sky:linear-gradient(180deg,#CDEBF6 0%,#8FD0EA 100%);
  --grad-sand:linear-gradient(180deg,#FFF9EF 0%,#F4E3C6 100%);
  --grad-hero-veil:linear-gradient(180deg,rgba(26,16,48,0) 40%,rgba(26,16,48,.72) 100%);
  --fs-hero:clamp(2.4rem,6.6vw,4.9rem); --fs-h2:clamp(1.6rem,4.5vw,2.9rem);
  --fs-lead:clamp(1.05rem,2.2vw,1.35rem); --fs-body:clamp(1rem,1.6vw,1.125rem);
  --fs-price:clamp(3rem,12vw,6rem); --lh-tight:0.95; --lh-body:1.6;
}

/* ---- Basis (gescoped auf den LP-Wrapper) ---- */
.sf-lp2,.sf-lp2 *,.sf-lp2 *::before,.sf-lp2 *::after{box-sizing:border-box}
.sf-lp2{
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  color:var(--sf-ink);background:var(--sf-cream);
  -webkit-font-smoothing:antialiased;line-height:var(--lh-body);
  overflow-x:clip;max-width:100vw;
}
.sf-lp2 img{display:block;max-width:100%}
.sf-lp2 a{color:inherit}
.sf-lp2 ::selection{background:var(--sf-gold);color:var(--sf-ink-soft)}

/* ---- Buchungs-Widget-Mount (skyfit-trial bekommt eine Karte) ---- */
.sf-lp2 .sf-booking-mount{
  margin-top:8px;background:rgba(255,255,255,0.98);border-radius:24px;
  padding:clamp(16px,3vw,32px);box-shadow:0 24px 60px rgba(0,0,0,0.35);text-align:left;
}
.sf-lp2 .sf-booking-mount:empty{display:none}

/* ---- Kurse: Studio-Umschalter ---- */
.sf-lp2 .sf-kurs-btn{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.95rem;
  padding:12px 22px;border-radius:999px;cursor:pointer;
  background:#fff;color:var(--sf-ink);border:2px solid var(--sf-border);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.sf-lp2 .sf-kurs-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(107,63,160,.14)}
.sf-lp2 .sf-kurs-btn[data-active="true"]{
  background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:0 12px 28px rgba(193,32,138,.3);
}
/* Buttons in JEDEM State schön rund halten (Fix: wurde beim Klick/Fokus eckig) */
.sf-lp2 .sf-kurs-btn,
.sf-lp2 .sf-kurs-btn:hover,
.sf-lp2 .sf-kurs-btn:focus,
.sf-lp2 .sf-kurs-btn:focus-visible,
.sf-lp2 .sf-kurs-btn:active,
.sf-lp2 .sf-kurs-btn[data-active="true"]{border-radius:999px}
.sf-lp2 .sf-kurs-btn:focus-visible{outline:3px solid var(--sf-gold-bright);outline-offset:3px}

/* Kursplan-Embed: internen Studio-Wähler (inkl. Berlin Weißensee) oben wegschneiden */
.sf-lp2 .sf-kursplan-crop{overflow:hidden;border-radius:14px}
.sf-lp2 .sf-kursplan-crop iframe{display:block;width:100%;border:0;margin-top:-56px;min-height:820px}

/* ---- Keyframes ---- */
@keyframes sf-word-pop{0%{opacity:0;transform:translateY(26px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sf-spin{to{transform:rotate(360deg)}}
@keyframes sf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes sf-wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes sf-shimmer{0%{background-position:-150% 0}100%{background-position:250% 0}}
@keyframes sf-marquee-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sf-marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes sf-flyx{from{transform:translateX(-16vw) translateY(0)}to{transform:translateX(116vw) translateY(-14px)}}

/* ---- Responsive (was Inline-Styles nicht ausdrücken können) ---- */
@media (min-width:900px){ .sf-lp2 [data-hero-grid]{grid-template-columns:minmax(0,1.6fr) minmax(230px,.75fr) !important;align-items:start} }
@media (min-width:768px){ .sf-lp2 [data-split]{grid-template-columns:1fr 1fr !important} .sf-lp2 [data-split-imgright] [data-split-media]{order:2} }
@media (max-width:1023px){ .sf-lp2 [data-desktop-only]{display:none !important} }
@media (min-width:1024px){ .sf-lp2 [data-mobile-only]{display:none !important} }

/* ---- Fokus-States (Accessibility) ---- */
.sf-lp2 a:focus-visible,.sf-lp2 button:focus-visible,.sf-lp2 [tabindex]:focus-visible{outline:3px solid var(--sf-gold-bright);outline-offset:3px}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion:reduce){
  .sf-lp2 *,.sf-lp2 *::before,.sf-lp2 *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}