/* ============================================================
   CrossFit069 — Landingpage
   Referenz: "CrossFit069 Final.dc.html", Artboard 1 (1440px) + Artboard 2 (390px)
   Aufbau: 1 Tokens · 2 Basis · 3 Bausteine · 4 Sektionen · 5 Responsive
   ============================================================ */

/* ---------- 0 · FONTS (selbst gehostet, DSGVO) ------------
   Anton 400 · Archivo 400/500/600/700 · IBM Plex Mono 400/500
   Subsets latin + latin-ext (Umlaute, ß). Dateien: assets/fonts/ */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/anton-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/anton-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/archivo-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/archivo-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/archivo-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/archivo-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/archivo-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/archivo-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/archivo-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/archivo-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---------- 1 · TOKENS ------------------------------------ */
:root{
  /* Flächen */
  --bg:#0A0A0A;
  --bg-hero:#0C0C0C;
  --bg-hyrox:#0D0D0D;
  --bg-footer:#050505;
  --bg-card:#111111;
  --bg-photo:#141414;

  /* Schrift */
  --fg:#FFFFFF;
  --fg-body:rgba(255,255,255,.72);
  --fg-card:rgba(255,255,255,.68);
  --fg-hero-sub:rgba(255,255,255,.85);
  --fg-footer:rgba(255,255,255,.6);
  --fg-footer-link:rgba(255,255,255,.75);
  --fg-muted:rgba(255,255,255,.55);
  --fg-label:rgba(255,255,255,.4);
  --fg-note:rgba(255,255,255,.45);
  --fg-copy:rgba(255,255,255,.35);

  /* Akzent — einzige Buntfarbe */
  --accent:#2E6BFF;

  /* Linien */
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.16);
  --line-day:rgba(255,255,255,.2);

  /* Typo */
  --font-display:'Anton',Impact,'Arial Narrow',sans-serif;
  --font-text:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Maße (1440er-Layout) */
  --pad-x:64px;
  --pad-y:130px;
  --nav-h:84px;
  --hero-h:660px;

  /* Typo-Skala */
  --t-hero:122px;
  --t-section:58px;
  --t-hyrox:64px;
  --t-card:30px;
  --t-price:52px;
  --t-glyph:140px;

  --ease:150ms ease;
}

/* ---------- 2 · BASIS ------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 17px/1.7 var(--font-text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,p,figure,blockquote{margin:0;}
ul{margin:0;padding:0;list-style:none;}
img,video{display:block;max-width:100%;}
address{font-style:normal;}

a{color:inherit;text-decoration:none;transition:color var(--ease),background-color var(--ease),border-color var(--ease);}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:var(--fg);
  padding:14px 24px;font:600 13px var(--font-text);letter-spacing:.12em;text-transform:uppercase;
}
.skip-link:focus{left:0;}

/* ---------- 3 · BAUSTEINE --------------------------------- */

/* Kicker / Labels */
.kicker{
  font:500 13px var(--font-mono);
  color:var(--accent);
  letter-spacing:.18em;
  text-transform:uppercase;
}

.section-title{
  font:400 var(--t-section)/1 var(--font-display);
  color:var(--fg);
  letter-spacing:.01em;
  text-transform:uppercase;
}

.lead{
  font:400 17px/1.7 var(--font-text);
  color:var(--fg-body);
  max-width:540px;
}

.scrollhint{
  font:400 12px var(--font-mono);
  color:var(--fg-label);
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

.row-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.row-head__meta{
  font:400 11px var(--font-mono);
  color:var(--fg-label);
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:18px 36px;
  font:600 14px var(--font-text);
  letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid transparent;
  text-align:center;
}
.btn--primary{background:var(--accent);color:var(--fg);border-color:var(--accent);}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--fg);color:var(--bg);border-color:var(--fg);}

.btn--ghost{border-color:var(--fg);color:var(--fg);background:transparent;}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--accent);color:var(--accent);}

.btn--nav{padding:14px 28px;font-size:13px;}
.btn--cell{width:100%;padding:12px 0;font-size:12px;letter-spacing:.1em;}
.btn--ghost.btn--cell{padding:11px 0;}

/* Textlinks mit Pfeil */
.link-arrow{
  font:600 13px var(--font-text);
  color:var(--accent);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.link-arrow:hover,.link-arrow:focus-visible{color:var(--fg);}
.link-arrow--white{color:var(--fg);}
.link-arrow--white:hover,.link-arrow--white:focus-visible{color:var(--accent);}

/* Horizontale Scroll-Reihen */
.scroller{
  display:flex;
  overflow-x:auto;
  padding-bottom:14px;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
.scroller > *{scroll-snap-align:start;}
.scroller::-webkit-scrollbar{height:6px;}
.scroller::-webkit-scrollbar-track{background:transparent;}
.scroller::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);}
.scroller::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);}

.scroller--klassen{gap:24px;}
.scroller--preise{gap:24px;}
.scroller--community{gap:16px;}

/* Logo */
.logo{
  font:400 26px var(--font-display);
  color:var(--fg);
  letter-spacing:.02em;
}
.logo span{color:var(--accent);}
.logo--footer{font-size:22px;}

/* ---------- 4 · SEKTIONEN --------------------------------- */

/* 1 · Navigation
   Artboard 1: Nav sitzt ÜBER dem Hero auf --bg (kein Overlay).
   Artboard 2 (mobil): Nav liegt auf dem Video — siehe Media Query unten. */
.nav{
  position:relative;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--nav-h);
  padding:0 var(--pad-x);
  background:var(--bg);
}
.nav__menu{
  display:flex;
  align-items:center;
  gap:36px;
}
.nav__menu > a:not(.btn){
  font:500 13px var(--font-text);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nav__menu > a:not(.btn):hover,
.nav__menu > a:not(.btn):focus-visible{color:var(--accent);}

/* Sprachumschalter DE | EN */
.nav__langs{display:inline-flex;align-items:center;gap:10px;font:500 13px var(--font-text);letter-spacing:.14em;text-transform:uppercase;}
.nav__langs::before{content:"";width:1px;height:14px;background:var(--line-strong);margin-right:2px;}
.nav__lang{color:var(--fg-muted);}
.nav__lang:hover,.nav__lang:focus-visible{color:var(--accent);}
.nav__lang.is-active{color:var(--fg);}
.nav__langs--mobile{margin-top:28px;font-size:14px;}
.nav__langs--mobile::before{display:none;}

.nav__burger{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:6px 0;
}
.nav__burger span{
  display:block;width:26px;height:2px;background:var(--fg);
  transition:transform var(--ease);
}
/* Burger wird zum Schließen-Kreuz, solange das Menü offen ist */
body.is-menu-open .nav__burger span:first-child{transform:translateY(3.5px) rotate(45deg);}
body.is-menu-open .nav__burger span:last-child{transform:translateY(-3.5px) rotate(-45deg);}

.mobile-menu{
  position:fixed;
  inset:0;
  z-index:30;
  background:var(--bg-footer);
  padding:96px 24px 24px;
}
.mobile-menu[hidden]{display:none;}
.mobile-menu nav{display:flex;flex-direction:column;gap:8px;}
.mobile-menu a:not(.btn){
  font:500 20px var(--font-text);
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.mobile-menu .btn{margin-top:24px;width:100%;}
body.is-menu-open{overflow:hidden;}

/* 2 · Hero */
.hero{
  position:relative;
  height:var(--hero-h);
  background:var(--bg-hero);
  overflow:hidden;
  isolation:isolate;
}

/* Grafische Basis (LED-Linien + nummerierter Floor) */
.hero__grid{position:absolute;inset:0;z-index:0;}
.hero__leds{
  position:absolute;top:0;left:0;right:0;height:42%;
  background-image:repeating-linear-gradient(90deg,transparent 0 170px,rgba(255,255,255,.16) 170px 174px);
}
.hero__horizon{
  position:absolute;top:42%;left:0;right:0;height:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.05));
}
.hero__floor{
  position:absolute;left:0;right:0;bottom:0;height:64px;
  display:flex;
}
.hero__floor span{
  flex:1;
  border-left:1px solid rgba(255,255,255,.14);
  padding:14px 0 0 14px;
  font:400 12px var(--font-mono);
  color:rgba(255,255,255,.35);
}

/* Videoband */
.hero__video{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero__overlay{
  position:absolute;inset:0;z-index:2;
  background:rgba(5,5,5,.46);
}

/* Vordergrund-Ebene: Video-Indiz (oben rechts) + Textblock (unten links) */
.hero__fg{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  grid-template-rows:1fr;
  padding:28px var(--pad-x) 110px;
}


/* Textblock */
.hero__content{
  align-self:end;
  max-width:980px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.hero__headline{
  font:400 var(--t-hero)/0.95 var(--font-display);
  color:var(--fg);
  letter-spacing:.01em;
  text-transform:uppercase;
}
.hero__sub{
  font:400 19px var(--font-text);
  color:var(--fg-hero-sub);
}
.hero__actions{
  display:flex;
  gap:16px;
  margin-top:6px;
  flex-wrap:wrap;
}

/* 3 · Konzept */
.konzept{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:88px;
  padding:var(--pad-y) var(--pad-x);
  align-items:center;
}
.konzept__text{display:flex;flex-direction:column;gap:24px;}
.konzept__photo{
  height:440px;
  background:var(--bg-photo);
  overflow:hidden;
}
.konzept__photo img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.82);
}

/* 3b · Coaches */
.coaches{
  padding:0 var(--pad-x) var(--pad-y);
  display:flex;
  flex-direction:column;
  gap:48px;
}
.scroller--coaches{gap:16px;}
.coach{
  flex:0 0 300px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.coach img{
  width:100%;height:380px;
  object-fit:cover;object-position:center top;
  background:var(--bg-photo);
  filter:grayscale(1) contrast(1.08) brightness(.82);
  transition:filter var(--ease);
}
.coach:hover img,.coach:focus-within img{filter:grayscale(0) contrast(1) brightness(1);}
.coach__name{
  font:400 var(--t-card) var(--font-display);
  color:var(--fg);
  text-transform:uppercase;
  letter-spacing:.01em;
}

/* 4 · Klassen */
.klassen{
  padding:0 var(--pad-x) var(--pad-y);
  display:flex;
  flex-direction:column;
  gap:48px;
}
.class-card{
  flex:0 0 340px;
  background:var(--bg-card);
  padding:44px 40px;
  display:flex;
  flex-direction:column;
  gap:18px;
  border-top:2px solid var(--line);
  transition:border-color var(--ease);
}
.class-card:hover,
.class-card:focus-within{border-top-color:var(--accent);}
.class-card__img{
  width:calc(100% + 80px);
  height:260px;
  margin:-44px -40px 6px;
  object-fit:cover;
  background:var(--bg-photo);
  filter:grayscale(1) contrast(1.08) brightness(.82);
  transition:filter var(--ease);
}
.class-card:hover .class-card__img,
.class-card:focus-within .class-card__img{filter:grayscale(0) contrast(1) brightness(1);}
.class-card h3{
  font:400 var(--t-card) var(--font-display);
  color:var(--fg);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.class-card p{
  font:400 15px/1.65 var(--font-text);
  color:var(--fg-card);
  flex:1;
}

/* 5 · HYROX */
.hyrox{
  position:relative;
  overflow:hidden;
  padding:150px var(--pad-x);
  background:var(--bg-hyrox);
}
.hyrox__glyph{
  position:absolute;
  right:-140px;
  top:50%;
  transform:translateY(-50%);
  font:400 460px/1 var(--font-display);
  color:rgba(255,255,255,.045);
  pointer-events:none;
  user-select:none;
}
.hyrox__content{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:26px;
  max-width:760px;
}
.hyrox__title{
  font:400 var(--t-hyrox)/1 var(--font-display);
  color:var(--fg);
  letter-spacing:.01em;
  text-transform:uppercase;
}
.hyrox .lead{max-width:600px;}
.hyrox__actions{
  display:flex;
  gap:16px;
  align-items:center;
  margin-top:8px;
  flex-wrap:wrap;
}

/* 6 · Preise */
.preise{
  padding:var(--pad-y) var(--pad-x);
  display:flex;
  flex-direction:column;
  gap:48px;
}
.price-card{
  flex:0 0 380px;
  border:1px solid var(--line-strong);
  padding:44px 40px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color var(--ease);
}
.price-card--featured{border-color:var(--accent);}
.price-card--featured .price-card__label{color:var(--accent);}
.price-card__label{
  font:500 12px var(--font-mono);
  color:rgba(255,255,255,.5);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.price-card__amount{
  font:400 var(--t-price) var(--font-display);
  color:var(--fg);
  letter-spacing:.01em;
  text-transform:uppercase;
}
.price-card__amount span{
  font-size:22px;
  color:var(--fg-footer);
}
.price-card > p:not([class]){
  font:400 15px/1.6 var(--font-text);
  color:var(--fg-card);
  flex:1;
}
.preise__note{
  font:400 13px var(--font-text);
  color:var(--fg-note);
}

/* 7 · Kursplan */
.kursplan{
  padding:0 var(--pad-x) var(--pad-y);
  display:flex;
  flex-direction:column;
  gap:44px;
}
#bsport-timetable{display:flex;flex-direction:column;gap:44px;}

.daybar{display:flex;gap:10px;flex-wrap:wrap;}
.daybar__day{
  border:1px solid var(--line-day);
  color:var(--fg-footer-link);
  padding:12px 20px;
  font:500 13px var(--font-text);
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background-color var(--ease),color var(--ease),border-color var(--ease);
}
.daybar__day:hover{border-color:var(--accent);color:var(--accent);}
.daybar__day.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--fg);
  font-weight:600;
}

.timetable{
  display:flex;
  flex-direction:column;
  border-bottom:1px solid var(--line);
}
.timetable__row{
  display:grid;
  grid-template-columns:110px 1fr 220px 180px 150px;
  align-items:center;
  padding:22px 0;
  border-top:1px solid var(--line);
}
.timetable__time{font:400 15px var(--font-mono);color:var(--fg-footer);}
.timetable__class{
  font:400 24px var(--font-display);
  color:var(--fg);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.timetable__coach{font:400 14px var(--font-text);color:var(--fg-muted);}
.timetable__slots{
  font:400 13px var(--font-mono);
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
}
.timetable__slots--low{color:var(--accent);}

/* bsport-Widget: Mount-Fläche. Das Widget bringt eigenes Styling mit;
   hier nur Mindesthöhe (kein Layout-Sprung) und der Ladehinweis. */
.bsport-mount{min-height:520px;}
.bsport-loading{
  font:400 13px var(--font-mono);
  color:var(--fg-label);
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:24px 0;
}

/* bsport-Widget: Dark Theme über die Design-Tokens des Widgets.
   Das Widget rendert direkt ins DOM (kein iframe) und liest seine Farben aus
   CSS-Variablen auf .bs-setup-variable. Wir überschreiben nur diese Basis-
   Palette — keine Komponentenklassen — damit Widget-Updates nicht brechen.
   Selektor bewusst spezifischer als das Widget (.bs-setup-variable). */
#bsport-widget-621729 .bs-setup-variable{
  /* Schrift */
  --fontFamily:var(--font-text);
  --bs-font-family:var(--font-text);

  /* Graustufen invertiert: 0 = Kartenfläche, 1000 = Text */
  --bs-grey-0:#111111;
  --bs-grey-50:#0A0A0A;
  --bs-grey-100:#181818;
  --bs-grey-300:#2A2A2A;
  --bs-grey-400:#4A4A4A;
  --bs-grey-500:#8A8A8A;
  --bs-grey-600:#A6A6A6;
  --bs-grey-700:#BFBFBF;
  --bs-grey-800:#D9D9D9;
  --bs-grey-850:#E8E8E8;
  --bs-grey-900:#F2F2F2;
  --bs-grey-1000:#FFFFFF;
  --bs-grey-alpha-100a:rgba(255,255,255,.08);
  --bs-grey-alpha-300a:rgba(255,255,255,.16);
  --bs-grey-alpha-400a:rgba(255,255,255,.3);
  --bs-grey-alpha-500a:rgba(255,255,255,.45);
  --bs-grey-alpha-800a:rgba(255,255,255,.8);

  --color-grey-50:#0A0A0A;
  --color-grey-100:#181818;
  --color-grey-200:#202020;
  --color-grey-300:#2A2A2A;
  --color-grey-400:#4A4A4A;
  --color-grey-500:#8A8A8A;
  --color-grey-600:#A6A6A6;
  --color-grey-700:#BFBFBF;
  --color-grey-800:#D9D9D9;
  --color-grey-900:#F2F2F2;
  --color-grey-A100:#333333;
  --color-grey-A200:#555555;
  --color-grey-A400:#CFCFCF;
  --color-grey-A700:#BFBFBF;
  --color-grey-dark:#FFFFFF;
  --color-grey-main:rgba(255,255,255,.6);
  --color-grey-light:rgba(255,255,255,.14);

  /* Markenfarbe = Akzentblau der Seite */
  --bs-brand-main:#2E6BFF;
  --bs-brand-main-strong:#1F55D9;
  --bs-brand-main-stronger:#1743B3;
  --bs-brand-main-strongest:#12368F;
  --bs-brand-main-weak:#5A8AFF;
  --bs-brand-main-weaker:rgba(46,107,255,.2);
  --bs-brand-main-weakest:rgba(46,107,255,.1);
  --bs-brand-secondary:#9E9E9E;
  --bs-brand-secondary-strong:#BFBFBF;
  --bs-brand-secondary-stronger:#E8E8E8;
  --bs-brand-secondary-strongest:#FFFFFF;
  --bs-brand-secondary-weak:#7A7A7A;
  --bs-brand-secondary-weaker:rgba(255,255,255,.2);
  --bs-brand-secondary-weakest:rgba(255,255,255,.1);
  --bs-blue-100:rgba(46,107,255,.12);
  --bs-blue-300:#5A8AFF;
  --bs-blue-500:#2E6BFF;
  --bs-blue-600:#1F55D9;
  --bs-blue-650:#1A4CC7;
  --bs-blue-800:#1743B3;
  --color-primary-main:#2E6BFF;
  --color-primary-dark:#1743B3;
  --color-primary-light:#5A8AFF;
  --color-primary-main-background:rgba(46,107,255,.1);
  --color-info-main:#2E6BFF;
  --color-info-dark:#1743B3;
  --color-info-light:#5A8AFF;
  --color-info-background:rgba(46,107,255,.1);

  /* Flächen, Text, Linien */
  --color-background-paper:#111111;
  --color-secondary-background-paper:#161616;
  --color-secondary-background-paper-transparent:rgba(22,22,22,.1);
  --color-text-primary:rgba(255,255,255,.92);
  --color-text-secondary:rgba(255,255,255,.6);
  --color-text-disabled:rgba(255,255,255,.38);
  --color-text-hint:rgba(255,255,255,.38);
  --color-divider:rgba(255,255,255,.12);
  --color-active:rgba(255,255,255,.54);
  --color-hover:rgba(255,255,255,.06);
  --color-selected:rgba(255,255,255,.1);
  --color-focus:rgba(255,255,255,.14);
  --color-disabled:rgba(255,255,255,.26);
  --color-disabledBackground:rgba(255,255,255,.12);
  --border-color:rgba(255,255,255,.14);
  --color-scrollbar-track:#1A1A1A;
  --color-scrollbar-thumb:#444444;
  --bs-scrollbar-background:#1A1A1A;

  /* Designregeln der Seite: keine Radien, keine Schatten */
  --border-radius-1:0px;
  --bs-border-radius-xs:0;
  --bs-border-radius-sm:0;
  --bs-border-radius-md:0;
  --bs-border-radius-lg:0;
  --bs-border-radius-button-lg:0;
  --bs-border-radius-pill:0;
  --bs-shadow-xs:none;
  --bs-shadow-s:none;
  --bs-shadow-m:none;
  --bs-shadow-l:none;
  --bs-shadow-xl:none;
  --bs-footer-shadow:none;
}
/* Hartkodierte Weißflächen der Kalender-Kacheln, die nicht über Tokens laufen */
#bsport-widget-621729 .bs-marketplace-date-picker,
#bsport-widget-621729 .bs-marketplace-filter,
#bsport-widget-621729 button.bs-card-offer{
  background:var(--bg-card);
  border-color:var(--line-strong);
  border-radius:0;
  color:var(--fg);
}
#bsport-widget-621729 button.bs-card-offer:hover{border-color:var(--accent);}
/* Abgeleitete Radien (calc(4px*n)) und Hartkodiertes, das das Widget mit !important setzt */
#bsport-widget-621729 #bs-setup-derived-variable{
  --border-radius-2:0;--border-radius-3:0;--border-radius-4:0;--border-radius-5:0;
  --border-radius-6:0;--border-radius-7:0;--border-radius-8:0;--border-radius-9:0;--border-radius-10:0;
}
#bsport-widget-621729 .cleanslate .bs-marketplace-date-picker,
#bsport-widget-621729 .cleanslate .bs-marketplace-filter,
#bsport-widget-621729 .cleanslate .bs-marketplace-filter::before,
#bsport-widget-621729 .cleanslate .bs-card-offer{border-radius:0 !important;}
#bsport-widget-621729 .cleanslate .bs-calendar-search__input{
  background:transparent !important;color:var(--fg) !important;
}
#bsport-widget-621729 .cleanslate .bs-week__header__date--is-disabled,
#bsport-widget-621729 .cleanslate .bs-week__header__date--is-disabled svg{
  color:rgba(255,255,255,.35) !important;
}
#bsport-widget-621729 .cleanslate .bs-card-offer > svg{fill:rgba(255,255,255,.6) !important;}

/* bsport: Tagesansicht. Das Widget schaltet unterhalb von ~1280 px Containerbreite
   von der Wochen-Kartenansicht auf die Listenansicht (ein Tag, Tages-Tabs oben).
   Die Breite wird deshalb gedeckelt; der Coach-Avatar hat in diesem Modus keine
   Groessenbegrenzung und wird hier auf 44 px gesetzt. */
#bsport-widget-621729{max-width:1200px;}
#bsport-widget-621729 .bs-offer-list-item .bs-card-offer__content__coach__avatar,
#bsport-widget-621729 .bs-offer-list-item .bs-card-offer__content__coach__avatar img{
  width:44px !important;height:44px !important;min-height:0 !important;max-height:44px !important;
}
/* Zeile statt Stapel: Titel / Zeit / Plaetze / Studio / Coach nebeneinander */
#bsport-widget-621729 .bs-offer-list-item__content__offer__left{
  display:flex !important;flex-direction:row !important;flex-wrap:wrap;align-items:center;
  gap:8px 28px;width:auto !important;flex:1 1 auto;
}
#bsport-widget-621729 .bs-offer-list-item__content__offer__left > *{margin:0 !important;}
#bsport-widget-621729 .bs-offer-list-item__content__offer__left__title{font-family:var(--font-display) !important;font-size:22px !important;text-transform:uppercase;letter-spacing:.01em;order:2;}
#bsport-widget-621729 .bs-offer-list-item__content__offer__left__time--without-date{font-family:var(--font-mono) !important;order:1;min-width:110px;}
#bsport-widget-621729 .bs-offer-list-item__content__offer__left__extra{font-family:var(--font-mono) !important;order:3;}
#bsport-widget-621729 .bs-offer-list-item__content__offer__left__establishment{display:none !important;}
#bsport-widget-621729 .bs-offer-list-item__content__offer__left__coach{order:4;}
#bsport-widget-621729 .bs-offer-list-item__content__offer{align-items:center !important;}

/* 8 · Community */
.community{
  padding:0 var(--pad-x) var(--pad-y);
  display:flex;
  flex-direction:column;
  gap:48px;
}
.photo{
  flex:0 0 340px;
  height:280px;
  background:var(--bg-photo);
  overflow:hidden;
}
.photo img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.82);
}
.scroller--quotes{gap:24px;}
.quote{
  flex:0 0 620px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
  padding:40px 40px 36px;
  border-top:2px solid var(--line);
  background:var(--bg-card);
  transition:border-color var(--ease);
}
.quote:hover,.quote:focus-within{border-top-color:var(--accent);}
.quote blockquote{
  font:400 26px/1.35 var(--font-display);
  color:var(--fg);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.quote figcaption{
  font:400 14px var(--font-mono);
  color:var(--accent);
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* 9 · Partner */
.partner{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:48px var(--pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.partner__mark{
  font-family:var(--font-text);
  font-size:24px;
  color:var(--fg-hero-sub);
  white-space:nowrap;
}
.partner__mark{display:inline-flex;align-items:center;color:var(--fg-hero-sub);}
.partner__logo{display:block;height:26px;width:auto;fill:currentColor;}
.partner__logo--concept2{height:22px;}
.partner__logo--eleiko{height:20px;}
.partner__logo--nocco{height:30px;}
.partner__logo--dryll{height:22px;}

/* 10 · Footer */
.footer{
  background:var(--bg-footer);
  padding:96px var(--pad-x) 48px;
  display:flex;
  flex-direction:column;
  gap:72px;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:48px;
}
.footer__col{display:flex;flex-direction:column;gap:14px;}
.footer__label{
  font:500 12px var(--font-mono);
  color:var(--fg-label);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.footer__text,
.footer address{
  font:400 14px/1.7 var(--font-text);
  color:var(--fg-footer);
}
.footer__col a{font:400 14px var(--font-text);color:var(--fg-footer-link);}
.footer__col a:hover,.footer__col a:focus-visible{color:var(--accent);}

.footer__base{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.footer__copy{
  font:400 12px var(--font-mono);
  color:var(--fg-copy);
  text-transform:uppercase;
}
.footer__made{text-transform:none;letter-spacing:.08em;}
.footer__glyph{
  font:400 var(--t-glyph)/0.8 var(--font-display);
  color:var(--accent);
  user-select:none;
}


/* 11 · Rechtsseiten (impressum / datenschutz / agb) */
.nav--static{position:relative;}
.nav__back{display:none;font:500 13px var(--font-text);letter-spacing:.14em;text-transform:uppercase;}
.nav__back:hover,.nav__back:focus-visible{color:var(--accent);}
.legal{
  max-width:820px;
  padding:var(--pad-y) var(--pad-x);
  display:flex;flex-direction:column;gap:40px;
}
.legal .section-title{margin-top:-24px;}
.legal .lead{max-width:none;}
.legal__block{display:flex;flex-direction:column;gap:12px;}
.legal__block h2{
  font:400 24px/1.1 var(--font-display);
  color:var(--fg);letter-spacing:.01em;text-transform:uppercase;
}
.legal__block p,.legal > p{font:400 16px/1.7 var(--font-text);color:var(--fg-body);}
.legal a{color:var(--accent);}
.legal a:hover,.legal a:focus-visible{color:var(--fg);}
.legal__note{font-size:14px;color:var(--fg-muted);}
/* Platzhalter sichtbar markieren, bis der Rechtstext steht */
.todo{color:var(--accent);}
.footer--slim .footer__grid{grid-template-columns:1.2fr 1fr 1fr;}
@media (max-width:980px){
  .nav--static .nav__menu{display:none;}
  .nav--static .nav__back{display:block;}
  .footer--slim .footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .nav--static{position:relative;background:var(--bg);padding:0 var(--pad-x);height:var(--nav-h);}
  .legal .section-title{margin-top:0;}
  .footer--slim .footer__grid{grid-template-columns:1fr;}
}

/* ---------- 5 · RESPONSIVE -------------------------------- */

/* Zwischen 1440 und 1100: Typo & Abstände eine Stufe kleiner */
@media (max-width:1200px){
  :root{
    --pad-x:48px;
    --pad-y:104px;
    --t-hero:92px;
    --t-section:48px;
    --t-hyrox:52px;
    --t-glyph:110px;
  }
  .hyrox{padding:120px var(--pad-x);}
  .hyrox__glyph{font-size:360px;right:-110px;}
  .konzept{gap:56px;}
  .timetable__row{grid-template-columns:96px 1fr 180px 150px 140px;}
}

/* Tablet */
@media (max-width:980px){
  :root{
    --pad-y:88px;
    --t-hero:72px;
    --hero-h:600px;
  }
  .nav__menu{gap:24px;}
  .nav__menu > a:not(.btn){display:none;}
  .nav__menu > .nav__langs{display:none;}
  .nav__burger{display:flex;}
  .nav__menu .btn--nav{display:none;}

  .konzept{grid-template-columns:1fr;gap:40px;}
  .konzept__photo{height:340px;}

  /* Kursplan-Zeile bricht auf 2 Zeilen */
  .timetable__row{
    grid-template-columns:110px 1fr;
    grid-template-areas:
      "time  class"
      "coach slots"
      "cta   cta";
    row-gap:12px;
  }
  .timetable__time{grid-area:time;}
  .timetable__class{grid-area:class;}
  .timetable__coach{grid-area:coach;}
  .timetable__slots{grid-area:slots;}
  .timetable__row .btn--cell{grid-area:cta;}

  .partner{gap:24px;justify-content:flex-start;}
  .footer__grid{grid-template-columns:1fr 1fr;gap:40px;}
}

/* Mobil — Referenz: Artboard 2 (390px) */
@media (max-width:700px){
  :root{
    --pad-x:24px;
    --pad-y:72px;
    --t-hero:58px;
    --t-section:40px;
    --t-hyrox:40px;
    --t-card:26px;
    --t-price:44px;
    --t-glyph:80px;
    --nav-h:64px;
  }

  body{font-size:16px;}

  /* Nav liegt auf dem Video (Artboard 2).
     Fixiert, damit Menü und Buchung von jedem Punkt aus erreichbar bleiben;
     Hintergrund erscheint erst nach dem Hero. */
  .nav{
    position:fixed;
    top:0;left:0;right:0;
    background:transparent;
    padding:20px var(--pad-x);
    height:auto;
    transition:background-color var(--ease);
  }
  .nav.is-scrolled{
    background:rgba(10,10,10,.92);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .logo{font-size:19px;}

  /* Hero füllt den Viewport: Headline, Subline und CTA ohne Scrollen sichtbar */
  .hero{height:100svh;min-height:600px;}
  .hero__leds{
    height:36%;
    background-image:repeating-linear-gradient(90deg,transparent 0 70px,rgba(255,255,255,.14) 70px 73px);
  }
  .hero__horizon{display:none;}
  .hero__floor{height:44px;}
  .hero__floor span:nth-child(n+5){display:none;}
  .hero__floor span{padding:10px 0 0 10px;font-size:10px;}
  .hero__overlay{background:rgba(5,5,5,.5);}

  .hero__fg{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
    gap:20px;
    padding:0 var(--pad-x) 96px;
  }

  .hero__content{
    align-self:stretch;
    max-width:none;
    gap:20px;
  }
  .hero .kicker{display:none;}
  .hero__sub{font-size:15px;line-height:1.5;}
  .hero__actions{flex-direction:column;gap:12px;margin-top:4px;}
  .hero__actions .btn{width:100%;padding:17px 0;}
  .hero__actions .btn--ghost{padding:16px 0;}

  .konzept__photo{height:260px;}

  .row-head{flex-direction:column;align-items:flex-start;gap:12px;}

  .class-card{flex-basis:300px;padding:32px 28px;}
  .class-card__img{width:calc(100% + 56px);height:220px;margin:-32px -28px 4px;}
  .partner__logo{height:20px;}
  .partner__logo--eleiko{height:16px;}
  .partner__logo--nocco{height:24px;}
  .price-card{flex-basis:300px;padding:32px 28px;}
  .photo{flex-basis:280px;height:230px;}
  .coach{flex-basis:240px;}
  .coach img{height:300px;}

  .hyrox{padding:88px var(--pad-x);}
  .hyrox__glyph{font-size:220px;right:-60px;}

  .quote{flex-basis:300px;padding:28px 24px 24px;}
  .quote blockquote{font-size:20px;}

  .timetable__row{grid-template-columns:88px 1fr;}

  .partner{padding:32px var(--pad-x);gap:20px 28px;}
  .partner__mark{font-size:18px;}

  .footer{padding:64px var(--pad-x) 40px;gap:48px;}
  .footer__grid{grid-template-columns:1fr;gap:36px;}
  .footer__base{align-items:flex-end;}
}

/* Reduzierte Bewegung: Standbild statt Video */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
  .scroller{scroll-snap-type:none;}
}