/* skyfit CLUB · Gestaltungssystem „Best Life“ (01.10.2026)
   Abgeleitet aus der Live-Seite skyfit-club.de (Lila, Petrol, Gelb, schmale fette Versalien, runder Sticker)
   plus eigener Touch: Sprechblase aus dem Logo, versetzte Farbflächen hinter Fotos, Laufband.
   Verboten: Glas-/Milchglas-Karten, gesperrte Mini-Versalien mit Punkt, Pillen, Haarlinien-Rahmen um alles. */

@font-face{font-family:"Barlow Condensed";src:url("fonts/BarlowCondensed-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/BarlowCondensed-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/BarlowCondensed-600.woff2") format("woff2");font-weight:600;font-display:swap}
/* Markenschrift Fließtext/Buttons wie skyfit-club.de: Poppins (selbst gehostet) */
@font-face{font-family:"Poppins";src:url("fonts/Poppins-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --lila:#8B59BE; --lila-tief:#6E3FA0; --petrol:#0197A7; --petrol-tief:#017A88; --gelb:#FDC62E; --schwarz:#141414;
  --weiss:#FFFFFF; --grau:#F1F1F1; --text-2:#3F444B; --text-hell-2:#FFFFFF;
  --font-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --font-text:"Poppins",system-ui,-apple-system,sans-serif;
  --rand:3px solid var(--schwarz);
}

/* Schrift */
.bl-h{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.88;letter-spacing:0;text-wrap:balance}
.bl-h1{font-size:clamp(56px,11vw,124px)}
.bl-h2{font-size:clamp(44px,8vw,92px)}
.bl-h3{font-size:clamp(28px,4.4vw,44px)}
.bl-kontur{color:transparent;-webkit-text-stroke:2px currentColor;paint-order:stroke}
.bl-kontur-s{color:transparent;-webkit-text-stroke:2px var(--schwarz)}
.bl-kontur-w{color:transparent;-webkit-text-stroke:2px var(--weiss)}
.bl-akzent{color:var(--gelb)}
.bl-lead{font-family:var(--font-text);font-size:clamp(17px,2vw,20px);line-height:1.5}

/* Flächen */
.bl-lila{background:var(--lila);color:var(--weiss)}
.bl-petrol{background:var(--petrol);color:var(--weiss)}
.bl-gelb{background:var(--gelb);color:var(--schwarz)}
.bl-schwarz{background:var(--schwarz);color:var(--weiss)}
.bl-weiss{background:var(--weiss);color:var(--schwarz)}
.bl-grau{background:var(--grau);color:var(--schwarz)}

/* Knöpfe: rechteckig, flächig, schmale Versalien */
.bl-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 26px;border:0;border-radius:0;
  font-family:var(--font-text);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;text-decoration:none;
  background:var(--gelb);color:var(--schwarz);transition:transform .15s ease,box-shadow .15s ease}
@media (hover:hover) and (pointer:fine){.bl-btn:hover{transform:translate(-3px,-3px);box-shadow:3px 3px 0 var(--schwarz)}}
.bl-btn--schwarz{background:var(--schwarz);color:var(--gelb)}
@media (hover:hover) and (pointer:fine){.bl-btn--schwarz:hover{box-shadow:3px 3px 0 var(--gelb)}}
.bl-btn--weiss{background:var(--weiss);color:var(--schwarz)}
.bl-btn--lila{background:var(--lila);color:var(--weiss)}
.bl-link{font-family:var(--font-text);font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;color:inherit}

/* Sprechblase aus dem Logo (Spitze unten links) */
.bl-blase{position:relative;display:inline-block;border-radius:12px;padding:8px 16px 9px;font-family:var(--font-display);font-weight:800;text-transform:uppercase;line-height:.95;
  background:var(--gelb);color:var(--schwarz)}
.bl-blase::after{content:"";position:absolute;left:16px;bottom:-13px;border-right:17px solid transparent;border-top:15px solid var(--bl-blase-bg,var(--gelb))}
.bl-blase--petrol{background:var(--petrol);color:var(--weiss);--bl-blase-bg:var(--petrol)}
.bl-blase--lila{background:var(--lila);color:var(--weiss);--bl-blase-bg:var(--lila)}
.bl-blase--schwarz{background:var(--schwarz);color:var(--gelb);--bl-blase-bg:var(--schwarz)}
.bl-blase--weiss{background:var(--weiss);color:var(--schwarz);--bl-blase-bg:var(--weiss)}

/* Foto mit versetzter Farbfläche */
.bl-rahmen{position:relative;isolation:isolate}
.bl-rahmen::before{content:"";position:absolute;inset:0;transform:translate(14px,14px);background:var(--f,var(--gelb));z-index:-1}
.bl-rahmen img,.bl-rahmen video{display:block;width:100%;height:100%;object-fit:cover}

/* Sticker */
.bl-sticker{width:clamp(120px,14vw,170px);aspect-ratio:1;border-radius:50%;background:var(--gelb);color:var(--schwarz);display:grid;place-items:center;text-align:center;
  transform:rotate(-12deg);box-shadow:0 0 0 6px var(--weiss);font-family:var(--font-display);font-weight:800;text-transform:uppercase;line-height:.9;font-size:clamp(22px,2.6vw,30px)}
.bl-sticker small{display:block;font-size:max(.62em,14px)}

/* Laufband */
.bl-lauf{overflow:hidden;white-space:nowrap;background:var(--weiss);border-top:var(--rand);border-bottom:var(--rand);padding:14px 0}
.bl-lauf-spur{display:inline-flex;gap:40px;animation:bl-lauf 38s linear infinite}
.bl-lauf span{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,5vw,56px);line-height:1;color:var(--schwarz)}
.bl-lauf span:nth-child(odd){color:transparent;-webkit-text-stroke:2px var(--schwarz)}
@keyframes bl-lauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bl-lauf-spur{animation:none}}

/* Kursplan-Leiste */
.bl-plan{display:grid;grid-template-columns:minmax(180px,260px) repeat(auto-fit,minmax(150px,1fr));align-items:center;background:var(--petrol);color:var(--schwarz)}
.bl-plan > *{padding:20px 24px}
.bl-plan b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4vw,46px);line-height:1}
.bl-plan small{font-family:var(--font-text);font-weight:700;font-size:15px}

/* Google-Stimme als Sprechblase */
.bl-stimme{position:relative;background:var(--weiss);color:var(--schwarz);border-radius:16px;padding:24px 24px 20px;font-family:var(--font-text);font-size:17px;line-height:1.5}
.bl-stimme::after{content:"";position:absolute;left:28px;bottom:-20px;border-right:26px solid transparent;border-top:22px solid var(--weiss)}
.bl-stimme cite{display:block;margin-top:12px;font-family:var(--font-display);font-weight:800;font-size:20px;text-transform:uppercase;font-style:normal;color:var(--lila)}

/* Pflicht-Kennzeichnung KI: kleines, flaches Schild, kein Glas */
.bl-ki{position:absolute;right:0;bottom:0;z-index:3;background:var(--schwarz);color:var(--weiss);font:700 12px/1 var(--font-text);padding:7px 9px;pointer-events:none}
.bl-ki:empty{display:none}

/* Kurslogo direkt auf dem Kursfoto (Call 02.10.: keine Plaketten hinter den Logos) */
img.bl-kurslogo,.kurs-bild img.bl-kurslogo,.k-foto img.bl-kurslogo{position:absolute;inset:auto auto 14px 16px;z-index:2;display:block;height:48px;width:auto;max-width:calc(100% - 32px);object-fit:contain;object-position:left bottom;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.7)) drop-shadow(0 4px 14px rgba(0,0,0,.5));pointer-events:none}
.logo-band img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

/* Einheitlicher Footer aller Club-Seiten (Call 02.10.). Kündigungslink klein in der Rechtszeile (§ 312k BGB) */
.bl-fuss{color:#D8D8D8;padding:clamp(44px,6vw,80px) clamp(20px,5vw,72px) clamp(28px,3vw,36px)}
.bl-fuss-grid{max-width:1320px;margin:0 auto;display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.bl-fuss-sp{display:grid;gap:10px;align-content:start;font-family:var(--font-text);font-size:16px;line-height:1.5}
.bl-fuss-marke{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1;color:#fff}
.bl-fuss-marke span{background:var(--gelb);color:var(--schwarz);padding:3px 9px 4px;border-radius:12px 12px 12px 3px;font-size:18px}
.bl-fuss-titel{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1;color:#fff}
.bl-fuss a{color:#D8D8D8;text-decoration:none}
@media (hover:hover) and (pointer:fine){.bl-fuss a:hover{color:var(--gelb)}}
.bl-fuss-tel{justify-self:start;display:inline-flex;align-items:center;min-height:48px;color:var(--gelb)!important;font-weight:700;font-size:18px}
.bl-fuss-links{gap:0}
.bl-fuss-links .bl-fuss-titel{margin-bottom:6px}
.bl-fuss-links a{min-height:44px;display:flex;align-items:center}
.bl-fuss-sozial{display:flex;gap:10px}
.bl-fuss-sozial a{width:48px;height:48px;background:#2A2A2A;color:#fff;display:inline-flex;align-items:center;justify-content:center}
@media (hover:hover) and (pointer:fine){.bl-fuss-sozial a:hover{background:var(--gelb);color:var(--schwarz)}}
.bl-fuss-sozial span{display:block;width:22px;height:22px;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.bl-fuss-recht{max-width:1320px;margin:clamp(30px,4vw,48px) auto 0;padding-top:18px;border-top:1px solid #2E2E2E;display:flex;flex-wrap:wrap;gap:4px 8px;font-family:var(--font-text);font-size:14px;line-height:1.5;color:#9A9A9A}
.bl-fuss-recht a{color:#9A9A9A;min-height:32px;display:inline-flex;align-items:center}
.bl-fuss-recht span{min-height:32px;display:inline-flex;align-items:center}
@media (max-width:767px){.bl-fuss{padding-bottom:110px}}
/* runde/quadratische Kurslogos (Yoga) größer, damit sie neben den Wortmarken gleich stark wirken */
img.bl-kurslogo[src*="yoga"]{height:86px!important}

/* Prüfung 05.10.: Kopfknopf auf dem Handy nur „Probetraining“, damit nichts abgeschnitten wird */
@media (max-width:480px){.kopf-cta-lang{display:none}a[data-track="cta_header"]{flex-shrink:0;white-space:nowrap}}/* Prüfung 05.10.: Burger zeigt geöffnet ein Schließen-Symbol (×) */
[data-nav-burger]>span{position:relative;transition:transform .2s ease}
[data-nav-burger][aria-expanded="true"]>span{box-shadow:none!important;transform:rotate(45deg)}
[data-nav-burger][aria-expanded="true"]>span::after{content:"";position:absolute;inset:0;background:inherit;transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){[data-nav-burger]>span{transition:none}}
/* Prüfung 05.10.: Rechtslinks im Footer mit mindestens 44 px Tippfläche */
.bl-fuss-recht a{min-height:44px}

/* Prüfung 05.10.: Kontrast. Auf Petrol (#0197A7) dunkler Text, große Akzentwörter weiß; auf Lila reines Weiß */
.bl-petrol{color:var(--schwarz)}
.bl-petrol .bl-akzent{color:var(--weiss)}
.bl-blase--petrol{color:var(--schwarz)}
.bl-lila .bl-link,.bl-lila a.bl-link{color:var(--weiss)}


/* Handy-Prüfung 06.10.: Anker liegen nicht unter dem festen Kopf; Rechtslinks mit Tippbreite; Telefonnummern bleiben einzeilig */
[id]{scroll-margin-top:84px}
.bl-fuss-recht a{padding-inline:10px;margin-inline:-10px}
.bl-fuss-recht span{padding-inline:2px}
.tel-nr,.bl-fuss-tel,.pg-mobil-tel{white-space:nowrap}
/* Weiches Trennzeichen statt Trennung mitten im Wort */
.bl-h{hyphens:manual;-webkit-hyphens:manual}
/* Querformat Handy: feste untere Leisten ausblenden (nehmen sonst den halben Bildschirm) */
@media (max-height:480px) and (orientation:landscape){[data-sticky-cta],div:has(> a[data-track="cta_sticky_mobil"]){display:none!important}.bl-fuss{padding-bottom:clamp(28px,3vw,36px)}}
/* Ganz schmale Handys (320 px) */
@media (max-width:339px){.bl-h1{font-size:clamp(46px,16vw,56px)}.bl-h2{font-size:clamp(38px,12.5vw,44px)}}
/* feste untere Leiste unter 360 px: kürzerer Text, einzeilig, flacher */
@media (max-width:359px){
  .st-k{display:none}
  [data-sticky-cta],div:has(> a[data-track="cta_sticky_mobil"]){padding-top:8px!important}
  a[data-track="cta_sticky_mobil"],a[data-track^="tel_sticky"],a[data-track^="route_sticky"]{white-space:nowrap;font-size:17px!important;min-height:48px!important;padding-left:12px!important;padding-right:12px!important}
}
/* Tippziele mindestens 44 px: eigenständige Links als Flex-Zeile, Links im Fließtext über Innenabstand (Zeilenhöhe bleibt) */
.bl-link{display:inline-flex;align-items:center;min-height:44px}
p .bl-link,li .bl-link[data-inline],dd .bl-link{display:inline;min-height:0;padding-block:13px;margin-block:-13px}
#dc-root p a:not([class]),#dc-root li a:not([class]),#dc-root dd a:not([class]){padding-block:13px;margin-block:-13px}
label[for]{display:flex;align-items:center;min-height:44px}
a.k-name{display:inline-flex;align-items:center;min-height:44px}

/* Review 06.10.: Ankündigungsleiste ganz oben (scrollt weg, Kopf bleibt sticky). Laufband von links nach rechts, nahtlos, pausiert bei Maus/Fokus. */
.bl-ankuend{position:relative;z-index:61;display:block;height:40px;overflow:hidden;background:var(--schwarz);color:var(--weiss);text-decoration:none}
.bl-ankuend-spur{display:flex;align-items:center;width:max-content;height:100%;transform:translateX(-50%);animation:bl-ankuend 40s linear infinite}
.bl-ankuend-satz{display:flex;align-items:center;flex:0 0 auto}
.bl-ankuend-text{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--weiss)}
.bl-ankuend-text::after{content:"";flex:0 0 auto;width:8px;height:8px;margin:0 30px;background:var(--gelb)}
.bl-ankuend-text:last-child{color:var(--gelb)}
@keyframes bl-ankuend{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.bl-ankuend:hover .bl-ankuend-spur,.bl-ankuend:focus-visible .bl-ankuend-spur{animation-play-state:paused}
.bl-ankuend:focus-visible{outline:3px solid var(--gelb);outline-offset:-3px}
@media (prefers-reduced-motion:reduce){
  .bl-ankuend-spur{animation:none;transform:none;width:100%;justify-content:center}
  .bl-ankuend-satz:not(:first-child){display:none}
  .bl-ankuend-text:not(:first-child):not(:last-child){display:none}
  .bl-ankuend-text:last-child::after{display:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:759px){.bl-ankuend-text:first-child:not(:last-child){display:none}}
@media (max-width:480px){.bl-ankuend{height:38px}.bl-ankuend-text{font-size:16px}.bl-ankuend-text::after{margin:0 22px}}