/* Trainer's Gym Brick — style.css
   Mobile-first. Tokens up top; tweak here, not inline. */

:root {
  --bg: #0a0a0b;
  --bg-2: #131316;
  --bg-3: #16161a;
  --fg: #f2f2f0;
  --fg-2: #c9c9cf;
  --mute: #9a9aa3;
  --mute-2: #8a8a93;
  --dim: #5a5a63;
  --line: #24242a;
  --line-2: #3d3d46;

  --display: 'Unbounded', 'Arial Black', Impact, sans-serif;
  --body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  --gutter: 20px;
  --radius: 20px;
  --card-w: 300px;
  --max: 720px; /* content width on larger screens */
  --runner-gap: 40px; /* the runner sits inside the hero rhythm: same air above and below it */
  --gap: 96px;        /* one rhythm: the air between every section, top and bottom */
}

* { box-sizing: border-box; }
/* No sideways drag on iOS: clip on both html and body (Safari ignores it on body alone). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.display { font-family: var(--display); letter-spacing: -0.03em; }
.h2 { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; margin: 0; }
.lede { color: var(--mute); font-size: 14px; line-height: 1.5; margin: 0; }

.chrome-text {
  background: linear-gradient(180deg, #ffffff 0%, #d9d9de 38%, #7c7c86 50%, #e6e6ea 62%, #9a9aa3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
/* Mirror-facet text: chrome base with two bands of glints drifting across at different
   angles, plus one slow light pass. All background layers, clipped to the glyphs. */
.disco-text {
  background:
    /* facet glints: two diagonal bands at different periods so tiles don't all match */
    repeating-linear-gradient(48deg,  rgba(255,255,255,0.6) 0 2px, rgba(255,255,255,0) 2px 26px),
    repeating-linear-gradient(-32deg, rgba(255,255,255,0.4) 0 3px, rgba(255,255,255,0) 3px 38px),
    /* one soft light pass */
    linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.75) 50%, transparent 65%),
    /* chrome base */
    linear-gradient(180deg, #ffffff 0%, #d9d9de 38%, #7c7c86 50%, #e6e6ea 62%, #9a9aa3 100%);
  background-size: auto, auto, 300% 100%, auto;
  background-position: 0 0, 0 0, 120% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: facets 14s linear infinite;
}
/* Live mode (main.js puts .is-live on <html>): the light follows the phone's tilt or the mouse
   instead of the timer. --lx/--ly are glint offsets in px, --lp is the light pass position (-1 … 1),
   --la is where the highlight sits on the CTA ring, in degrees clockwise from the top. */
.is-live .disco-text {
  animation: none;
  background-position: calc(var(--lx, 0) * 1px) 0, 0 calc(var(--ly, 0) * -1px), calc(50% - var(--lp, 0) * 70%) 0, 0 0;
}
.is-live .btn::before { animation: none; --ring-a: calc(var(--la, 45) * 1deg); }
/* Glint shifts are whole periods (26px / sin 48° × 2, 38px / cos 32° × 2) so the loop has no seam. */
@keyframes facets {
  to { background-position: 69.97px 0, 0 -89.6px, -20% 0, 0 0; }
}
}
.hair { height: 1px; background: linear-gradient(90deg, transparent, var(--mute-2) 30%, #fff 50%, var(--mute-2) 70%, transparent); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 22px; border-radius: 999px;
  color: var(--fg);
  font-size: 15px; font-weight: 600; white-space: nowrap;
}
.btn:hover { color: #fff; }
.btn.-block { width: 100%; }
/* Chrome outline: a 1.5 px ring with one soft highlight. Its position (--ring-a, clockwise from top)
   follows the tilt/mouse in live mode; on the timer it drifts slowly round. */
@property --ring-a { syntax: "<angle>"; inherits: true; initial-value: 45deg; }
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from calc(var(--ring-a) - 90deg),
    rgba(255,255,255,0.16) 0deg, rgba(255,255,255,0.16) 30deg, rgba(255,255,255,0.98) 90deg,
    rgba(255,255,255,0.16) 150deg, rgba(255,255,255,0.16) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ring-drift 16s linear infinite;
}
@keyframes ring-drift { from { --ring-a: 45deg; } to { --ring-a: 405deg; } }
.btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -2;
  background:
    radial-gradient(70% 140% at calc(50% + sin(var(--ring-a)) * 50%) calc(50% - cos(var(--ring-a)) * 50%), rgba(255,255,255,0.07), transparent 70%),
    #141417;
}
.btn svg { width: 18px; height: 18px; }

.link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.link svg { width: 14px; height: 14px; }
.link.-ul { border-bottom: 1px solid var(--mute-2); padding-bottom: 4px; }

/* ---------- Layout ---------- */
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--gap); }
.ticker + .hair + .section { padding-top: var(--runner-gap); }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 14px; left: 14px; right: 14px; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px 8px 14px; border-radius: 999px;
  background: rgba(20,20,23,0.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { width: 16px; height: 20px; color: var(--fg); }
.brand span { font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.brand em { font-style: normal; color: var(--mute); }
.lang { display: flex; align-items: center; padding-right: 6px; }
.lang a, .lang span { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; padding: 8px 6px; color: #6f6f78; }
.lang [aria-current] { color: var(--fg); }
.lang i { width: 1px; height: 12px; background: #4a4a52; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; min-height: 660px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: var(--runner-gap); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,19,22,0.35) 0%, rgba(17,19,22,0.05) 25%, rgba(17,19,22,0.45) 55%, rgba(17,19,22,0.92) 78%, var(--bg) 100%);
}
.hero__copy { position: relative; display: flex; flex-direction: column; gap: 14px; }
.hero h1 { max-width: 100%; font-family: var(--display); font-size: 38px; line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.hero .brandline { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 12px; }
.hero p { color: var(--fg-2); max-width: 320px; margin: 0; }
.hero .btn { margin-top: 6px; }

/* ---------- Ticker ---------- */
.ticker { overflow: hidden; white-space: nowrap; padding: 12px 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.ticker__track { display: inline-block; animation: tick 28s linear infinite; }
.ticker__track span { padding: 0 14px; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Horizontal carousels ---------- */
.rail {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--gutter); scroll-padding: 0 var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 auto; scroll-snap-align: start; }

/* Room cards */
.room { width: var(--card-w); display: flex; flex-direction: column; gap: 12px; }
.room__img { position: relative; height: 340px; border-radius: var(--radius); overflow: hidden; display: flex; align-items: flex-end; padding: 18px; background: var(--bg-2); }
.room__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,19,22,0) 45%, rgba(17,19,22,0.85) 100%); }
.room__img h3 { position: relative; z-index: 1; font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; margin: 0; }
.room__cap { display: flex; padding: 0 4px; font-size: 13px; line-height: 1.5; color: var(--mute); }
.room__cap p { margin: 0; }

/* ---------- Statement slider (text-only break between the rails) ---------- */
.statement { margin-top: var(--gap); padding: 0 var(--gutter); display: grid; grid-template-rows: auto 1fr; }
/* Slide indicator: three small hairline dashes directly above the headline. The active one fills over 7 s. */
.statement__dots { grid-row: 1; display: flex; gap: 5px; margin-bottom: 14px; }
.statement__dots button { position: relative; width: 14px; height: 10px; padding: 0; overflow: hidden; }
.statement__dots button::before, .statement__dots button::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; border-radius: 1px; }
.statement__dots button::before { background: var(--line-2); }
.statement__dots button::after { background: var(--fg); transform-origin: left; transform: scaleX(0); }
.statement__dots button[aria-selected="true"]::after { animation: dash-fill 7s linear forwards; }
.statement.is-paused .statement__dots button[aria-selected="true"]::after { animation-play-state: paused; }
@keyframes dash-fill { to { transform: scaleX(1); } }
.statement__slide {
  grid-area: 2 / 1; display: flex; flex-direction: column; gap: 18px;
  opacity: 0; transition: opacity 0.9s ease; pointer-events: none;
}
.statement__slide[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.statement h2 { max-width: 100%; overflow-wrap: break-word; font-family: var(--display); font-size: clamp(36px, 11.5vw, 88px); line-height: 0.95; font-weight: 800; letter-spacing: -0.04em; margin: 0; }
.statement p { color: var(--mute); font-size: 14px; line-height: 1.5; max-width: 300px; margin: 0; }
.statement .link { margin-top: 4px; align-self: flex-start; }

/* ---------- Pricing ---------- */
.price {
  width: 200px; height: 240px; padding: 20px; border-radius: var(--radius);
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, var(--bg-3) 0%, #101013 45%, rgba(17,19,22,0) 78%) padding-box,
    linear-gradient(180deg, #3a3a44 0%, var(--line) 35%, rgba(36,36,42,0) 68%) border-box;
}
.price.-wide { width: 220px; }
.price__head { display: flex; justify-content: space-between; align-items: center; }
.price__name { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-2); }
.price__tag { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--mute-2); color: var(--fg); }
.price__tag.-fill { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.price__num { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.price__unit { font-size: 12px; color: var(--mute-2); margin-top: 6px; }
.price__unit s { text-decoration: line-through; }
.price__note { font-size: 12px; color: var(--fg-2); margin-top: 10px; line-height: 1.45; }
.price.-hot {
  width: 240px; position: relative; isolation: isolate; border: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.10), transparent 70%), linear-gradient(180deg, #1a1a1f 0%, #111114 45%, rgba(17,19,22,0) 80%);
}
.price.-hot .price__name { color: var(--fg); }
.price.-hot .price__num { font-size: 40px; }
.price.-hot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: linear-gradient(175deg, #fff 0%, #9a9aa3 22%, #e6e6ea 38%, #6f6f78 52%, rgba(111,111,120,0) 68%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.price.-more .price__more { font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.price.-more p { font-size: 13px; color: var(--fg-2); margin: 12px 0; line-height: 1.45; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details {
  overflow: hidden; border-radius: 18px; border: 1px solid transparent;
  background:
    linear-gradient(180deg, var(--bg-3) 0%, #101013 45%, rgba(17,19,22,0) 78%) padding-box,
    linear-gradient(180deg, #3a3a44 0%, var(--line) 35%, rgba(36,36,42,0) 68%) border-box;
}
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-size: 15px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 18px; height: 18px; transition: transform 0.25s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .a { padding: 0 20px 20px; font-size: 14px; line-height: 1.55; color: var(--mute); margin: 0; }

/* ---------- Closing ---------- */
.closing { margin-top: var(--gap); position: relative; padding: 0 var(--gutter); text-align: center; }
.closing::before { content: ""; position: absolute; inset: -56px 0; background: radial-gradient(ellipse 55% 45% at 50% 62%, rgba(255,255,255,0.06), transparent 100%); pointer-events: none; }
.closing > * { position: relative; }
.closing h2 { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 14px; }
.closing p { color: var(--mute); font-size: 14px; max-width: 280px; margin: 0 auto 14px; }

/* ---------- Kurse (course plan frame) ---------- */
.schedule { border-radius: 16px; overflow: visible; background: #fff; color: #111; } /* Sep 17: overflow visible so the noexcuse widget's booking modal is not clipped */
.schedule iframe { display: block; width: 100%; min-height: 520px; border: 0; } /* the widget sets its own height via postMessage */
/* placeholder rows until the live widget goes in */
.schedule__days { display: flex; padding: 14px 12px 0; border-bottom: 1px solid #e5e5e5; }
.schedule__days span { flex: 1; text-align: center; font-size: 12px; color: #888; padding: 8px 0 10px; }
.schedule__days span[aria-current] { color: #111; font-weight: 600; border-bottom: 2px solid #111; }
.schedule__row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #eee; }
.schedule__row:last-child { border-bottom: 0; }
.schedule__time { font-size: 13px; font-weight: 600; width: 44px; }
.schedule__what { flex: 1; }
.schedule__what b { display: block; font-size: 14px; font-weight: 600; }
.schedule__what small { font-size: 12px; color: #777; }
.schedule__cta { font-size: 12px; padding: 6px 10px; border: 1px solid #111; border-radius: 4px; }
.schedule__cta.-off { border-color: #ccc; color: #999; }

/* ---------- Contact / footer ---------- */
.contact { margin: 0; padding: 56px var(--gutter) 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.contact dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 4px; }
.contact dd { margin: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.contact a { color: var(--fg); display: inline-flex; align-items: center; gap: 6px; }
.contact dd > a:first-child:not([href^="https://wa"]):not([href^="mailto"]):not([href*="instagram"]) { display: block; line-height: 1.5; }
.contact a.-ul { border-bottom: 1px solid var(--line-2); }
.contact svg { width: 14px; height: 14px; }
.footer { padding: 20px var(--gutter) 36px; display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--dim); }
.footer nav { display: flex; gap: 12px; }


/* =====================================================================
   VERSION 2 — bold / clean / image-led.
   Condensed uppercase display (Anton) + Barlow Condensed body. Full-screen
   photo panels carry the story; the rails, prices, FAQ and schedule are V1's
   components re-dressed: square corners, hairlines, no shimmer, no glow.
   ===================================================================== */
:root {
  /* slate black: a touch cooler and lighter than V1's #0a0a0b */
  --bg: #111316; --bg-2: #181a1e; --bg-3: #1d1f24; --line: #272a30; --line-2: #3f434b;
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --body: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --radius: 0px;
  --gap: 0px;
}
body { font-size: 18px; line-height: 1.35; }
.h2, .room__img h3, .closing h2, .price__num, .price.-more .price__more, .statement h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em;
}
.h2 { font-size: 44px; line-height: 0.95; }
.lede { font-size: 18px; color: var(--fg-2); }

/* Top bar: transparent, wordmark centred */
.bar { position: fixed; position: -webkit-sticky; position: sticky; top: 0; left: 0; right: 0; z-index: 50; height: 64px; margin-bottom: -64px; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--gutter);
  transform: translateZ(0);
  background: linear-gradient(180deg, rgba(17,19,22,0.7), rgba(17,19,22,0)); }
.bar .brand, .bar .lang { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
.bar .brand { display: flex; align-items: center; gap: 10px; }
.bar .brand svg { width: 16px; height: 20px; }
.bar .brand span { font-family: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.bar .brand em { font-style: normal; color: var(--mute); }
.bar .lang { padding-right: 0; }
.lang a, .lang span { font-family: var(--body); font-size: 15px; font-weight: 600; letter-spacing: 0.1em; }

/* Full-screen photo panels */
.panel { position: relative; min-height: 48svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 80px var(--gutter) 48px; overflow: hidden; isolation: isolate; }
.panel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%); }
.panel.-hero .panel__img { -webkit-mask-image: radial-gradient(ellipse 56% 50% at 50% 40%, #000 45%, transparent 90%); mask-image: radial-gradient(ellipse 56% 50% at 50% 40%, #000 45%, transparent 90%); }
.panel__img.-bw { filter: grayscale(0.55) contrast(1.05) brightness(0.7); object-position: 50% 15%; }
#closing { margin-top: 88px; }
#closing::before { background: linear-gradient(180deg, rgba(17,19,22,0.2) 0%, rgba(17,19,22,0.35) 45%, rgba(17,19,22,0.8) 100%); }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17,19,22,0.25) 0%, rgba(17,19,22,0.15) 40%, rgba(17,19,22,0.85) 100%); }
.panel__copy { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 520px; }
.panel h1, .panel h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 44px; line-height: 0.92; letter-spacing: 0.01em; margin: 0; text-wrap: balance; }
.panel h1 { font-size: 62px; }
.panel p { margin: 0; font-size: 17px; line-height: 1.35; color: var(--fg); max-width: 380px; }
.panel__eyebrow { font-size: 14px !important; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-2) !important; }
.panel .link { font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid var(--fg); padding-bottom: 4px; margin-top: 6px; }
.panel .btn { margin-top: 8px; }
.panel.-hero { min-height: 62svh; justify-content: flex-end; padding-bottom: 44px; }
.panel.-hero .panel__copy { gap: 20px; }
.panel.-hero .panel__img { width: 80%; height: auto; left: 10%; top: 6px; inset: auto; object-fit: contain; }
/* Type-only panel: black, and the headline is an outline — white stroke, empty inside */
.panel.-type { min-height: 0; padding: 112px var(--gutter) 0; }
.panel.-type::before { display: none; }
.outline { color: transparent; -webkit-text-stroke: 1.5px var(--fg); letter-spacing: 0.02em; text-shadow: none; }
#hyrox .outline { font-size: 96px !important; }
.panel.-type p { color: var(--fg-2); }
.panel.-hero::before { background: linear-gradient(180deg, rgba(17,19,22,0) 0%, rgba(17,19,22,0) 38%, rgba(17,19,22,0.6) 58%, var(--bg) 80%); }
.panel.-hero h1 { text-shadow: 0 2px 24px rgba(17,19,22,0.8); }
.panel__more { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 28px; height: 28px; color: var(--fg); opacity: 0.8; }

/* Bar (phone): mark only on the left, the two locations on the right; wordmark and CTA come in at 720px */
.bar .brand span { display: none; }
.lang a, .lang span { white-space: nowrap; text-transform: uppercase; }
.lang [aria-current] { color: var(--fg); }
/* Bar extras (phone: both off). The CTA and the Hyrox lane photo only exist from 720px up. */
.bar .btn.-bar { display: none; }
#hyrox .panel__img.-lane { display: none; }

/* Buttons: white outline rectangle, uppercase. No ring animation, no sheen. */
.btn { height: 52px; padding: 0 30px; border-radius: 0; border: 1px solid var(--fg); background: transparent; color: var(--fg);
  font-family: var(--body); font-size: 17px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; width: auto; }
.btn::before, .btn::after { display: none; }
.btn:hover { background: var(--fg); color: var(--bg); }

/* Runner */
.ticker { padding: 14px 0; font-size: 14px; letter-spacing: 0.2em; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--fg-2); }

/* Section heads follow the Hyrox panel: eyebrow → one big centred word → one muted line */
.sec-head { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; padding-bottom: 28px; }
.sec-head .h2 { font-size: 44px; line-height: 0.92; }
.sec-head .lede { font-size: 17px; color: var(--fg-2); max-width: 360px; margin: 0; }
.sec-head .panel__eyebrow { margin: 0; }
#kurse .sec-head { padding-bottom: 8px; }

/* Sections that keep V1's components */
.section { padding-top: 64px; }
.room { width: calc(100vw - var(--gutter) - 44px); max-width: 560px; gap: 12px; }
.room__img { border-radius: 0; height: 380px; padding: 18px; }
/* rail photos: take the edge off so they sit with the muted hero/closing panels */
.room__img img { filter: saturate(0.86) contrast(0.97) brightness(0.93); }
.room__img h3 { font-size: 34px; line-height: 1.1; } /* Sep 16: Anton umlauts (Küche) touched the line above at line-height 1 (Carl) */
.room__cap { font-size: 16px; line-height: 1.4; color: var(--fg-2); }
.rail { gap: 12px; }
.price, .price.-hot, .faq details { border-radius: 0; }
.price { border: 1px solid var(--line-2); background: transparent; }
.price.-hot { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.08), transparent 70%), var(--bg-2); }
.price.-hot::before { background: var(--fg); }
.price__name { font-size: 14px; letter-spacing: 0.16em; }
.price__num { font-size: 40px; }
.price.-hot .price__num { font-size: 52px; }
.price__unit, .price__note { font-size: 15px; }
.price__tag { border-radius: 0; font-size: 12px; }
.faq details { border-radius: 0; border: 1px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(180deg, var(--line-2) 0%, var(--line) 45%, rgba(36,36,42,0) 80%) border-box; }
.faq summary { font-size: 19px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.faq .a { font-size: 17px; color: var(--fg-2); }
.faq .a a { color: var(--fg); border-bottom: 1px solid var(--line-2); } /* Sep 17: inline links in FAQ answers (Parken, PT) */
#preise, #fragen, #kurse { padding-top: 64px; padding-bottom: 0; }
#preise { padding-top: 120px; }
#fragen { padding-top: 112px; }
#fragen { padding-bottom: 0; }
#fragen + #kurse { padding-top: 96px; }
.schedule { border-radius: 0; }
.contact { padding-top: 80px; font-size: 16px; }
.contact dt { font-size: 13px; letter-spacing: 0.18em; }
.footer { font-size: 13px; flex-wrap: wrap; align-items: center; row-gap: 12px; }
/* myClubs partner link: sits between the copyright and the legal links; wordmark slot for the official logo */
.footer .partner { order: -1; width: 100%; margin-bottom: 8px; display: inline-flex; align-items: baseline; gap: 6px; color: var(--fg-2); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; font-size: 13px; line-height: 1; }
.footer .partner b { font-weight: 600; color: var(--fg); text-transform: none; letter-spacing: 0; font-size: 15px; line-height: 1; }
.footer .partner svg { width: 12px; height: 12px; opacity: 0.7; align-self: center; }
.footer .partner__logo { height: 16px; width: auto; display: block; align-self: center; }

@media (min-width: 720px) {
  .bar { height: 76px; padding: 0 28px; }
  .wrap, .contact, .footer { width: 100%; max-width: var(--max); margin-left: auto; margin-right: auto; }
  .rail { padding-left: max(var(--gutter), calc((100% - var(--max)) / 2)); scroll-padding-left: max(var(--gutter), calc((100% - var(--max)) / 2)); }
  .panel { min-height: 440px; }
  .panel.-hero { min-height: 640px; }
  .panel.-hero .panel__img { width: 460px; left: 50%; transform: translateX(-50%); top: 0; }
  .panel.-type { min-height: 0; }
  .outline { -webkit-text-stroke-width: 2px; }
  #hyrox .outline { font-size: 180px !important; }
  .panel h1 { font-size: 104px; }
  .panel h2 { font-size: 68px; }
  .panel p { font-size: 22px; max-width: 520px; }
  .h2 { font-size: 56px; }
  .sec-head .h2 { font-size: 64px; }
}

/* ---- V2 hero: logo lockup on a dark loft photo (replaces the ball hero rules above) ---- */
.panel.-hero { min-height: 76svh; justify-content: flex-end; padding: 72px var(--gutter) 32px; }
.panel.-hero .panel__img { position: absolute; inset: 0; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: 50% 100%; transform: none; height: 112%; top: auto; bottom: 0;
  filter: grayscale(0.55) brightness(0.82) contrast(1.05);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); }
.panel.-hero::before { background: linear-gradient(180deg, rgba(17,19,22,0.55) 0%, rgba(17,19,22,0) 26%, rgba(17,19,22,0.35) 70%, var(--bg) 100%); }
.panel.-hero .panel__copy { align-items: center; gap: 28px; }
.lockup { width: 62%; max-width: 300px; height: auto; display: block; }
.panel.-hero .btn { margin: 0; align-self: center; }
.hero__addr { margin: -16px 0 0 !important; font-size: 11px !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2) !important; }
.hero__addr a { color: inherit; }

/* ---- Zahlen: the facts as hollow numerals ---- */
#zahlen { padding-top: 12px; }
#zahlen + #gym { padding-top: 96px; }
#zahlen .sec-head { padding-bottom: 8px; }
.stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.stats li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 8px 0 6px; }
.stats b { font-family: var(--display); font-weight: 400; font-size: 64px; line-height: 0.9; white-space: nowrap; }
.stats b sup { font-size: 0.42em; line-height: 0; vertical-align: baseline; position: relative; top: -1.05em; letter-spacing: 0; }
.stats span { font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
@media (min-width: 720px) {
  .lockup { max-width: 380px; }
  .stats b { font-size: 96px; }
  .stats li { padding: 12px 0 10px; }
}

/* ---- 79,90: still chrome until the card is swiped into view, then a slow light pass — one band crossing in ~2.4 s, then rest, every 8 s (main.js: .roll). ---- */
.roll { position: relative; display: inline-block; }
.roll__top { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.roll.is-on .roll__top { opacity: 1; }
.roll__sweep {
  background:
    linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.95) 50%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #d9d9de 38%, #7c7c86 50%, #e6e6ea 62%, #9a9aa3 100%);
  background-size: 220% 100%, auto; background-position: 140% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.roll.is-on .roll__sweep { animation: roll-sweep 8s ease-in-out infinite; }
/* the pass is at the start of the cycle so landing = first pass */
@keyframes roll-sweep { 0% { background-position: 140% 0, 0 0; } 30%, 100% { background-position: -40% 0, 0 0; } }
/* no JS: static chrome, no motion */
html.no-js .roll__top { opacity: 1; }

/* ---- closing: type only, the words land one after another (main.js adds .is-on once the panel is in view) ----
   data-fx on #closing picks the move: rise (slide up out of a clip), pop (hard cut, typewriter cadence), fill (outline → solid). */
#closing { margin-top: 104px; min-height: 0; padding: 0 var(--gutter); }
#closing::before { display: none; }
#closing .panel__copy { gap: 36px; max-width: none; }
#closing h2 { font-size: 58px; line-height: 0.9; text-wrap: initial; }
/* words fade up softly (no clip line — Carl saw letter bases through the hard clip) */
.reveal .w { display: inline-block; vertical-align: bottom; }
.reveal b { display: inline-block; font-weight: inherit; }
.reveal:not(.is-on) b { opacity: 0; }
#closing:not(.is-on) .btn { opacity: 0; }
#closing.is-on .btn { animation: btn-in 0.6s ease both; animation-delay: calc(5 * var(--step, 0.22s) + 0.5s); }
@keyframes btn-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* rise */
[data-fx="rise"].is-on .reveal b { animation: word-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i) * var(--step, 0.22s)); }
@keyframes word-rise { 0% { opacity: 0; transform: translateY(45%); } 100% { opacity: 1; transform: none; } }
/* pop */
[data-fx="pop"] { --step: 0.3s; }
[data-fx="pop"].is-on .reveal b { animation: word-pop 0.01s linear both; animation-delay: calc(var(--i) * var(--step, 0.3s) + 0.2s); }
@keyframes word-pop { to { opacity: 1; } }
/* fill */
[data-fx="fill"] { --step: 0.34s; }
[data-fx="fill"].is-on .reveal b { -webkit-text-stroke: 1.5px var(--fg); animation: word-fill 0.5s ease both; animation-delay: calc(var(--i) * var(--step, 0.34s)); }
@keyframes word-fill { from { opacity: 1; color: transparent; } 60% { opacity: 1; color: transparent; } to { opacity: 1; color: var(--fg); } }
@media (prefers-reduced-motion: reduce) { .reveal b, #closing .btn { opacity: 1 !important; animation: none !important; } }
html.no-js .reveal b, html.no-js #closing .btn { opacity: 1; }

/* ---- rail pair: one card, two half-height photos; top title bottom-left, bottom title bottom-right ---- */
.room.-pair .room__img { height: 184px; }
.room.-pair .room__img + .room__img { margin-top: 12px; }
.room.-pair .room__img.-right { justify-content: flex-end; text-align: right; }
.room.-pair .room__img h3 { font-size: 30px; }
.room.-pair .room__img.-brand img { object-position: 50% 100%; }

/* =====================================================================
   V2 — iPad + desktop. Everything below sits in min-width queries so the
   phone layout (≤719px) is untouched. Three steps:
     720   iPad mini / iPad portrait (834)   — wider column, 2-up grids
     1024  iPad Pro portrait / small laptop  — 3-up grids, split heads
     1280  desktop (1440 reference)          — full 1200px measure
   ===================================================================== */
@media (min-width: 720px) {
  :root { --gutter: 32px; --max: 760px; }
  /* .wrap = measure + gutters, so section heads sit flush with the grids below them */
  .wrap, .contact, .footer { max-width: calc(var(--max) + 2 * var(--gutter)); }
  .only-touch { display: none; }
  .bar { height: 76px; margin-bottom: -76px; padding: 0 32px; }
  .bar .brand span { display: inline; }
  /* bar CTA: centred, fades in once the hero has scrolled past (main.js sets .is-past) */
  .bar .btn.-bar { display: inline-flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 6px)); height: 40px; padding: 0 18px; font-size: 14px; letter-spacing: 0.14em;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
  .bar.is-past .btn.-bar { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
  .bar { transition: background 0.3s ease; }
  .bar.is-past { background: linear-gradient(180deg, rgba(17,19,22,0.92), rgba(17,19,22,0.72)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  /* Hyrox: the numbered running lane, near-black, behind the outline word */
  #hyrox { padding-top: 224px; padding-bottom: 144px; margin-top: 32px; margin-bottom: 0; }
  #hyrox .panel__img.-lane { display: block; object-position: 50% 60%; filter: grayscale(1) brightness(0.55) contrast(1.1); opacity: 0.55;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 16%, #000 42%, #000 66%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, transparent 16%, #000 42%, #000 66%, transparent 100%); }
  #hyrox::before { display: block; background: linear-gradient(180deg, var(--bg) 0%, rgba(17,19,22,0) 30%, rgba(17,19,22,0) 70%, var(--bg) 100%); }
  .bar .brand svg { width: 18px; height: 23px; }
  .bar .brand span { font-size: 13px; }

  /* Hero fills the viewport; photo covers it edge to edge */
  .panel.-hero { min-height: 100svh; min-height: 100vh; justify-content: center; padding: 96px var(--gutter) 64px; }
  .panel.-hero .panel__img { height: 100%; top: 0; bottom: auto; object-fit: cover; object-position: 50% 40%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); }
  .panel.-hero::before { background: linear-gradient(180deg, rgba(17,19,22,0.25) 0%, rgba(17,19,22,0.05) 35%, rgba(17,19,22,0.35) 70%, var(--bg) 100%); }
  .panel.-hero .panel__copy { gap: 32px; max-width: none; }
  .lockup { width: 44vw; max-width: 420px; }
  .hero__addr { margin-top: -18px !important; font-size: 12px !important; }

  /* Zahlen: a row of four, hairline above each */
  #zahlen { padding-top: 48px; }
  #zahlen .sec-head { padding-bottom: 20px; }
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; }
  .stats li { min-width: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; padding: 18px 0 14px; }
  .stats b { font-size: min(96px, 10.5vw); }
  .stats span { font-size: 14px; }
  #zahlen + #gym { padding-top: 152px; }

  /* Rooms: the rail becomes a grid, two across; pair cards keep their two stacked photos */
  #gym .rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; scroll-snap-type: none;
    padding-left: var(--gutter); padding-right: var(--gutter); width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
  #gym .rail > * { flex: none; width: auto; max-width: none; }
  /* grid order: the two pair cards sit at positions 3 and 7 (row 1 right, row 3 left) instead of stacking in one column */
  #gym .rail > :nth-child(1) { order: 1; } #gym .rail > :nth-child(2) { order: 2; } #gym .rail > :nth-child(4) { order: 3; }
  #gym .rail > :nth-child(3) { order: 4; } #gym .rail > :nth-child(5) { order: 5; } #gym .rail > :nth-child(6) { order: 6; }
  #gym .rail > :nth-child(7) { order: 7; } #gym .rail > :nth-child(8) { order: 8; } #gym .rail > :nth-child(9) { order: 9; }
  .room__img { height: 320px; padding: 18px; }
  .room__img h3 { font-size: 30px; }
  .room.-pair .room__img { height: 154px; }
  .room.-pair .room__img h3 { font-size: 26px; }
  .room__cap { font-size: 15px; }

  /* Hyrox: the one shouted word — as wide as the screen allows */
  .panel.-type { padding-top: 128px; }
  #hyrox .outline { font-size: clamp(180px, 22vw, 260px) !important; line-height: 0.9; }
  .panel.-type .panel__copy { max-width: none; }
  .panel.-type p { max-width: 460px; }

  /* Prices: grid, three across, "Und mehr" spans the last row */
  #preise { padding-top: 168px; }
  #preise .rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; scroll-snap-type: none;
    padding-left: var(--gutter); padding-right: var(--gutter); width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
  #preise .rail > * { flex: none; width: auto; }
  .price, .price.-wide, .price.-hot { width: auto; height: 270px; padding: 24px; }
  .price__head { flex-wrap: wrap; gap: 8px; }
  .price__name { white-space: nowrap; }
  .price.-more { grid-column: span 2; }
  .price.-more > div { max-width: 460px; }

  /* Closing: big type, lots of air */
  #closing { margin-top: 192px; padding: 0 var(--gutter); }
  #closing h2 { font-size: min(104px, 12vw); }
  #closing .panel__copy { gap: 44px; }

  /* FAQ + Kurse: head on the left, content on the right */
  #fragen { padding-top: 176px; }
  #fragen + #kurse { padding-top: 152px; }
  .section.wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  #fragen .sec-head .h2, #kurse .sec-head .h2 { font-size: 52px; }
  .section.wrap > .sec-head { grid-column: 1; position: sticky; top: 96px; }
  .section.wrap > .faq, .section.wrap > .schedule { grid-column: 2; }
  #zahlen.wrap, #kurse.stack { display: grid; }
  #zahlen.wrap { grid-template-columns: minmax(0, 1fr); }
  #zahlen.wrap > .sec-head { position: static; }
  #kurse.stack { gap: 0; }
  .faq summary { padding: 20px 22px; font-size: 20px; }
  .faq .a { padding: 0 22px 22px; }
  .schedule__row { padding: 16px 20px; }

  .contact { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 136px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 48px; --max: 928px; }
  .bar { padding: 0 32px; }
  .lockup { max-width: 480px; }
  .stats { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 24px; }
  .stats li { min-width: 160px; }
  .stats li { padding-bottom: 0; }
  .stats b { font-size: min(112px, 7.8vw); }
  .stats span { font-size: 15px; }
  .h2, .sec-head .h2 { font-size: 72px; }
  .sec-head .lede { font-size: 19px; max-width: 420px; }
  /* section heads that sit above a grid: headline left, lede right on the same line */
  #gym .sec-head, #preise .sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 10px 40px; flex-wrap: wrap; }
  #preise .sec-head { align-items: flex-end; }
  #preise .sec-head .panel__eyebrow { width: 100%; }
  #gym .sec-head .lede, #preise .sec-head .lede { padding-bottom: 6px; text-align: right; }
  #gym .rail { gap: 24px; }
  .room__img { height: 420px; padding: 22px; }
  .room__img h3 { font-size: 38px; }
  .room.-pair .room__img { height: 198px; }
  .room.-pair .room__img h3 { font-size: 32px; }
  .room__cap { font-size: 17px; }
  #preise .rail { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .price.-more { grid-column: auto; }
  .price, .price.-wide, .price.-hot { height: 290px; padding: 22px 20px; }
  .price__num { font-size: 40px; }
  .price.-hot .price__num { font-size: 52px; }
  .price.-more .price__more { font-size: 22px; }
  .panel h2 { font-size: 84px; }
  #closing h2 { font-size: min(128px, 10.5vw); }
  .section.wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; }
  #fragen .sec-head .h2, #kurse .sec-head .h2 { font-size: 64px; }
}

@media (min-width: 1280px) {
  :root { --max: 1200px; }
  .bar { height: 84px; margin-bottom: -84px; padding: 0 40px; } /* Sep 13: mark and switch sit in the corners, not on the content measure (Carl) */
  .lockup { max-width: 520px; }
  .panel.-hero .panel__copy { gap: 36px; }
  .stats b { font-size: min(136px, 7.8vw); }
  #zahlen + #gym { padding-top: 192px; }
  #hyrox { padding-top: 256px; padding-bottom: 176px; margin-top: 48px; }
  #preise { padding-top: 208px; }
  .room__img { height: 460px; padding: 26px; }
  .room__img h3 { font-size: 42px; }
  .room.-pair .room__img { height: 224px; }
  .room.-pair .room__img h3 { font-size: 34px; }
  #hyrox .outline { font-size: clamp(220px, 19vw, 300px) !important; }
  #preise .rail { gap: 16px; }
  .price, .price.-wide, .price.-hot { height: 300px; padding: 26px 24px; }
  .price.-hot .price__num { font-size: 60px; }
  .price__num { font-size: 44px; }
  .panel h2 { font-size: 96px; }
  .panel p { font-size: 22px; }
  #closing { margin-top: 240px; }
  #closing h2 { font-size: min(150px, 9.6vw); }
  #closing .panel__copy { gap: 52px; }
  #fragen { padding-top: 224px; }
  #fragen + #kurse { padding-top: 192px; }
  .section.wrap { column-gap: 96px; }
  #fragen .sec-head .h2, #kurse .sec-head .h2 { font-size: 72px; }
  .contact { padding-top: 168px; }
  .footer { padding-bottom: 48px; }
}

/* Pointer devices only: quiet hover states (no effect on touch) */
@media (min-width: 720px) and (hover: hover) {
  .room__img img { transition: filter 0.4s ease, transform 0.6s ease; }
  .room:hover .room__img img { filter: saturate(1) contrast(1) brightness(1); transform: scale(1.02); }
  .price { transition: border-color 0.25s ease; }
  .price:hover { border-color: var(--fg); }
  .faq summary { transition: color 0.2s ease; }
  .faq summary:hover { color: #fff; }
  .contact a:hover, .footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* =====================================================================
   Vertical rhythm — one value per breakpoint, applied to the top of every
   section (overrides the per-section numbers above). Order on the page:
   hero → Zahlen → Gym → Closing → Preise → Hyrox → Fragen → Kurse → Kontakt.
   ===================================================================== */
:root { --sec: 112px; }
#zahlen + #gym, #preise, #fragen, #kurse, .contact { padding-top: var(--sec); }
#closing { margin-top: var(--sec); }
#hyrox { margin-top: 0; margin-bottom: 0; padding-top: var(--sec); padding-bottom: 0; }
@media (min-width: 720px) {
  :root { --sec: 152px; }
  /* Hyrox carries the lane photo: extra head room so the photo starts below the price cards, and it hands part of the gap to Fragen */
  #hyrox { padding-top: calc(var(--sec) + 48px); padding-bottom: 96px; }
  #hyrox + #fragen { padding-top: calc(var(--sec) - 48px); }
}
@media (min-width: 1024px) { :root { --sec: 176px; } }
@media (min-width: 1280px) { :root { --sec: 208px; } }

/* footer from 720: partner link centred between copyright and legal links (own row on phones only) */
@media (min-width: 720px) {
  .footer .partner { order: 0; width: auto; margin-bottom: 0; }
}
/* FAQ + Kurse split: questions take ~2/3 of the measure */
@media (min-width: 720px) {
  .section.wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 32px; }
}
@media (min-width: 1024px) {
  .section.wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: 40px; }
}
@media (min-width: 1280px) {
  .section.wrap { grid-template-columns: minmax(0, 3.5fr) minmax(0, 6.5fr); column-gap: 48px; }
}

/* Kurse (Sep 17, Carl): the live course plan needs the whole measure, so from 720 the head stacks
   above it (like Gym/Preise) instead of the head-left / content-right split the FAQ uses. */
@media (min-width: 720px) {
  #kurse.section.wrap { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  #kurse > .sec-head, #kurse > .schedule { grid-column: 1; }
  #kurse > .sec-head { position: static; padding-bottom: 28px; }
}
@media (min-width: 1024px) {
  #kurse .sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 10px 40px; flex-wrap: wrap; }
  #kurse .sec-head .panel__eyebrow { width: 100%; }
  #kurse .sec-head .lede { padding-bottom: 6px; text-align: right; }
}