/* =========================================================
   1352 Athletics – Design-System
   Farben: Anthrazit + Orange (aus der alten Site übernommen)
   ========================================================= */
:root {
  --ink: #17181B;
  --anthracite: #2A2C30;
  --graphite: #3A3D43;
  --steel: #6B7078;
  --mist: #C9CCD1;
  --paper: #F3F3F1;
  --line: #E3E4E6;
  --white: #FFFFFF;
  --orange: #EE7F3C;
  --orange-deep: #EC7108;
  --orange-soft: #FDEBDD;

  --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 14px 40px rgba(23, 24, 27, .16);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --header-h: 76px;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p a, .prose li a, .checks a { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; }
p a:hover, .prose li a:hover, .checks a:hover { color: var(--ink); }
.section--dark p a, .section--dark .checks a { color: var(--orange); }
.section--dark p a:hover, .section--dark .checks a:hover { color: var(--white); }
ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--orange); color: var(--ink); padding: 10px 16px; font-weight: 600; border-radius: var(--radius); }
.skip-link:focus { top: 8px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: .005em;
  margin: 0 0 .45em;
  font-weight: 700;
}
h1 { font-size: clamp(3rem, 8vw, 6.4rem); font-weight: 800; line-height: .9; }
h2 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h4 { font-size: 1.35rem; }
p { margin: 0 0 1.1em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--steel); max-width: 62ch; }
.section--dark .lead { color: var(--mist); }
strong { font-weight: 600; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 860px; }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }
.section--paper { background: var(--paper); }
.section--dark { background: var(--anthracite); color: var(--white); }
.section--ink { background: var(--ink); color: var(--white); }
.grid { display: grid; gap: clamp(20px, 3vw, 36px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; column-gap: clamp(32px, 5.5vw, 80px); }
.grid--split.grid--rev > :first-child { order: 2; }
@media (max-width: 960px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split { grid-template-columns: 1fr; }
  .grid--split.grid--rev > :first-child { order: 0; }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Eyebrow mit schrägem Balken (Motiv aus dem kursiven Logo) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--orange-deep);
  margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 26px; height: 4px; background: var(--orange); transform: skewX(-24deg); }
.section--dark .eyebrow, .section--ink .eyebrow, .hero .eyebrow { color: var(--orange); }
.section__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 52px); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head--center .lead { margin-left: auto; margin-right: auto; }
.section__head--center .eyebrow { justify-content: center; }
.eyebrow--center { display: flex; justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; min-height: 52px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  transform: skewX(-8deg);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn > * { transform: skewX(8deg); }
.btn:hover { transform: skewX(-8deg) translateY(-2px); box-shadow: 0 10px 24px rgba(23,24,27,.18); }
.btn--orange { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.btn--orange:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.btn--dark { background: var(--anthracite); color: var(--white); border-color: var(--anthracite); }
.btn--dark:hover { background: var(--ink); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.8); }
.btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--ghost-dark { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost-dark:hover { background: var(--ink); color: var(--white); }
.btn--sm { padding: 11px 20px; min-height: 42px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.btn-row .btn { margin: 0 6px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--orange-deep); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.link-arrow::after { content: '→'; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(5px); }
.section--dark .link-arrow, .section--ink .link-arrow { color: var(--orange); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--anthracite); color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.nav ul { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 10px 12px;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mist);
  position: relative; white-space: nowrap; transition: color .2s var(--ease);
}
.nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-tools { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.lang { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: .08em; }
.lang a { padding: 6px 7px; color: var(--mist); border-radius: 6px; }
.lang a.is-active { color: var(--white); background: rgba(255,255,255,.1); }
.lang a:hover { color: var(--orange); }
.lang span { color: var(--steel); }
.nav-toggle { display: none; background: none; border: 0; color: var(--white); width: 48px; height: 48px; padding: 0; margin-right: -8px; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: currentColor; margin: 5px auto; transition: transform .3s var(--ease), opacity .3s var(--ease); }
/* Die Kopfzeile ist voll: Logo + 9 Menuepunkte + Sprachwahl + Knopf brauchen in voller Schriftgroesse
   rund 1630 px, der Inhaltsbereich ist aber auf 1200 px gedeckelt und laeuft rechts ueber. Gemessen am
   09.10.2026: auf 1440 px endete die Leiste bei 1626 px, auf 1600 px bei 1706 px - der orange Knopf war
   also abgeschnitten. Das war schon vor dem Drop-in-Punkt so (1533 bzw. 1613 px), der Punkt hat es nur
   verschlimmert. Darum gilt die kompakte Leiste jetzt bis 1900 px statt nur bis 1400 px.
   Nachgemessen mit dieser Regel: 1440 -> 1412 px, passt. */
@media (max-width: 1900px) {
  .site-header__inner { gap: 16px; }
  .nav a { padding: 10px 8px; font-size: .95rem; letter-spacing: .04em; }
}
@media (max-width: 1400px) {
  /* Seit 09.10.2026 steht «Drop-in» als neunter Menuepunkt in der Leiste (Wunsch Timo). Damit die
     Zeile auf einem 1280er-Laptop nicht ueber den rechten Rand laeuft, ruecken die Punkte enger
     zusammen und die drei Bloecke der Kopfzeile halten weniger Abstand. Gemessen: ohne diese
     Verengung braucht die Kopfzeile 1340 px und wird auf 1280 px rechts abgeschnitten. */
  .site-header__inner { gap: 12px; }
  .nav a { padding: 10px 5px; font-size: .95rem; letter-spacing: .04em; }
  .brand img { height: 38px; }
}
@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .header-tools .btn { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: var(--anthracite);
    flex-direction: column; align-items: stretch; margin: 0; padding: 12px var(--gutter) 40px;
    overflow-y: auto; transform: translateX(100%); transition: transform .35s var(--ease);
  }
  .nav.is-open { transform: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { font-size: 1.6rem; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--orange); }
  /* Die drei Knoepfe im offenen Menue sahen als gleich breite, schraeg gestellte Balken untereinander
     unruhig aus: die Schraege laeuft bei voller Breite bis in den Rand, alle drei wogen gleich schwer
     und die Umrandung der beiden hellen war auf Anthrazit fast nicht zu sehen. Jetzt liegt der orange
     Knopf allein in der ersten Zeile, Drop-in und WhatsApp teilen sich die zweite - ohne Schraege,
     weil die nur bei schmalen Knoepfen wirkt, und mit einem leichten Flaechenton statt nur Kontur. */
  .nav .nav__cta { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  /* display und Rahmen muessen hier mitgesetzt werden: «.nav a» ist spezifischer als «.btn» und machte
     aus den Knoepfen Bloecke mit linksbuendigem Text und der 1px-Trennlinie der Menuepunkte. */
  .nav .nav__cta .btn { display: inline-flex; align-items: center; justify-content: center;
    width: 100%; min-height: 56px; padding: 16px 18px; font-size: 1.05rem; letter-spacing: .05em;
    border-width: 2px; border-radius: var(--radius-sm); transform: none; }
  .nav .nav__cta .btn > * { transform: none; }
  .nav .nav__cta .btn:hover, .nav .nav__cta .btn:focus-visible { transform: none; box-shadow: none; }
  .nav .nav__cta .btn--orange { grid-column: 1 / -1; border-color: var(--orange); }
  .nav .nav__cta .btn--ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); }
  .nav .nav__cta .btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

}
@media (min-width: 1181px) { .nav .nav__cta { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  /* Genau ein Bildschirm abzueglich Kopfzeile. Mit den vorherigen 88vh ragte der orange
     Kennzahlen-Balken auf 1440x900 noch 31 px ins erste Bild und zog den Blick vom Hero weg
     (Rueckmeldung User 05.10.2026: «der orange balken muss weiter nach unten»). Jetzt beginnt
     er genau an der Bildschirmkante: 1366x768 bei 769, 1440x900 bei 901, 1920x1200 bei 1201.
     Bewusst ohne Obergrenze: eine Deckelung haette den Balken auf hohen Schirmen wieder
     hereingeholt. .hero--page hat weiter unten eine eigene Hoehe und bleibt unberuehrt. */
  min-height: calc(100vh - var(--header-h)); background: var(--ink); color: var(--white);
  overflow: hidden; isolation: isolate;
}
.hero--page { min-height: min(58vh, 560px); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__img--top { object-position: center 25%; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(23,24,27,.35) 0%, rgba(23,24,27,0) 30%, rgba(23,24,27,.55) 75%, rgba(23,24,27,.95) 100%),
    linear-gradient(90deg, rgba(23,24,27,.78) 0%, rgba(23,24,27,.45) 55%, rgba(23,24,27,.2) 100%);
}
.hero__content { position: relative; padding: clamp(72px, 12vw, 150px) 0 clamp(48px, 7vw, 88px); max-width: 820px; }
.hero--page .hero__content { padding: clamp(56px, 8vw, 100px) 0 clamp(40px, 5vw, 64px); }

/* ---------- Scroll-Hero (nur Startseite) ----------
   Zuerst steht das Foto pur da, beim Scrollen kommt der Text aus der Transparenz und das Bild
   wandert leicht mit (Vorbild: steinschlag.ch).
   --p = Fortschritt 0..1, --sy = Scrollposition in px. Beide setzt main.js.
   WICHTIG: --p steht hier auf 1. Laeuft kein JS (oder «Bewegung reduzieren» ist an), sieht der
   Hero genau aus wie vorher – der Text ist dann sofort da statt unsichtbar.
   BEWUSST OHNE position:sticky: Dafuer muesste body von overflow-x:hidden auf clip wechseln, sonst
   ist der Body Scroll-Container und sticky wirkt nicht. Dieser Wechsel aendert sticky aber auf der
   ganzen Seite (u. a. die Sprungleiste der Programme-Seite) – zu grosse Wirkung fuer diesen Effekt.
   Hier bleibt der Hero also normal im Fluss, Text und Bild reagieren trotzdem aufs Scrollen. */
.hero[data-scroll-hero] { --p: 1; --sy: 0; }
.hero[data-scroll-hero] .hero__content {
  opacity: var(--p);
  transform: translate3d(0, calc((1 - var(--p)) * 34px), 0);
}
/* Der dunkle Verlauf haelt sich am Anfang zurueck, damit das Foto wirklich pur wirkt; sobald der
   Text kommt, ist er voll da – sonst waere die Schrift auf dem hellen Bild nicht lesbar. */
.hero[data-scroll-hero]::before { opacity: calc(.45 + .55 * var(--p)); }
.hero[data-scroll-hero] .hero__img {
  /* Weniger Zoom als frueher (1.16): Seit dem 09.10.2026 steht oben das breite Hallenfoto, und das
     soll man auch sehen - Neon-Schrift links, offenes Tor rechts. Der Rest-Zoom von 6 % ist nur noch
     die Reserve, damit beim Parallax-Versatz keine Kante auftaucht; darum ist auch der Faktor von
     .07 auf .05 herunter. */
  transform: translate3d(0, calc(var(--sy) * .05px), 0) scale(1.06);
  will-change: transform;
}
.hero[data-scroll-hero] .hero__scroll { opacity: calc(1 - var(--p)); }
/* Auf schmalen Schirmen kein Parallax. Das Querformat-Foto ist im hochkanten Hero durch object-fit
   schon stark beschnitten; die 16 % Vergroesserung fuer die Verschiebung lassen es dann viel zu nah
   wirken (Rueckmeldung User 04.10.2026: «das bild auf der mobilen version ist zu gross»).
   Die Einblendung des Textes bleibt – nur das Bild steht still. */
@media (max-width: 900px) {
  .hero[data-scroll-hero] .hero__img { transform: none; }
}
/* Startbild auf dem Handy: das ganze Foto statt eines Ausschnitts.
   Vorher fuellte object-fit: cover das hochkante Feld. Vom 16:9-Foto blieben bei 375 px Breite
   und 527 px Hoehe noch 40 Prozent der Bildbreite uebrig, also nur der Coach in der Mitte. Die
   Zuhoerenden links und rechts waren weg (Rueckmeldung User 05.10.2026: «man sieht die
   teilnehmer der klasse nicht»). Mehr Breite gibt es bei cover nur ueber ein flacheres Feld,
   und flacher als der Text geht nicht, solange der Text im Bild liegt.
   Darum auf dem Handy: Foto oben in voller Breite (contain), Text darunter auf dunklem Grund.
   56.25vw ist die Hoehe eines 16:9-Fotos bei voller Breite, daran haengen Verlauf und Abstand.
   Der dunkle Verlauf beginnt erst unter dem Foto, sonst waere es wieder zu dunkel.
   Die Einblendung des Scroll-Heros entfaellt hier: das Foto steht ohnehin fuer sich, und ein
   leeres dunkles Feld unter dem Bild saehe beim Laden nach einem Fehler aus.
   Alles nur fuer die Startseite, die Unterseiten-Heros behalten ihre bisherige Hoehe. */
@media (max-width: 720px) {
  .hero--page { min-height: min(62vh, 520px); }
  .hero:not(.hero--page) { min-height: 0; }
  .hero:not(.hero--page) .hero__img { object-fit: contain; object-position: center top; }
  .hero:not(.hero--page)::before,
  .hero:not(.hero--page)[data-scroll-hero]::before { top: 56.25vw; opacity: 1; }
  .hero:not(.hero--page)[data-scroll-hero] .hero__content { opacity: 1; transform: none; }
  .hero:not(.hero--page) .hero__content { padding-top: calc(56.25vw + 26px); padding-bottom: 34px; }
}
.hero[data-scroll-hero].is-done .hero__scroll { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .hero[data-scroll-hero] .hero__content { opacity: 1; transform: none; }
  .hero[data-scroll-hero] .hero__img { transform: none; }
}
.hero h1 { margin-bottom: .25em; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero .lead { color: var(--mist); }
.hero .btn-row { margin-top: 26px; }
.hero__anim > * { opacity: 0; transform: translateY(22px); animation: rise .8s var(--ease) forwards; }
.hero__anim > :nth-child(2) { animation-delay: .12s; }
.hero__anim > :nth-child(3) { animation-delay: .24s; }
.hero__anim > :nth-child(4) { animation-delay: .36s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero__scroll { position: absolute; right: var(--gutter); bottom: 28px; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--mist); writing-mode: vertical-rl; }
@media (max-width: 720px) { .hero__scroll { display: none; } }

/* Stat-Leiste (Hero-Unterkante) */
.statbar { background: var(--orange); color: var(--ink); }
.statbar__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.statbar__item { padding: 22px 18px; text-align: center; border-left: 1px solid rgba(23,24,27,.15); transition: background .25s var(--ease); }
.statbar__item:first-child { border-left: 0; }
.statbar__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.5vw, 2.8rem); line-height: 1; display: inline-block; transition: transform .25s var(--ease); }
.statbar__label { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; margin-top: 4px; }
@media (max-width: 720px) {
  .statbar__grid { grid-template-columns: repeat(2, 1fr); }
  .statbar__item:nth-child(3) { border-left: 0; }
  .statbar__item:nth-child(n+3) { border-top: 1px solid rgba(23,24,27,.15); }
}

/* ---------- Karten ---------- */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
/* Karten mit Knopf: Text oben, Knopf unten buendig – sonst sitzt er je nach Textlaenge auf anderer Hoehe */
.card:has(> .btn) { display: flex; flex-direction: column; }
.card > .btn { margin-top: auto; align-self: flex-start; }
.card > p:last-of-type { margin-bottom: 24px; }
.card--dark { background: var(--graphite); border-color: rgba(255,255,255,.08); color: var(--white); }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card__icon { width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--orange-soft); color: var(--orange-deep); display: grid; place-items: center; margin-bottom: 18px; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; transform: skewX(-8deg); }
.card__icon > * { transform: skewX(8deg); }
.card--dark .card__icon { background: rgba(238,127,60,.16); color: var(--orange); }
.card--media { padding: 0; overflow: hidden; }
.card--media .tile { border-radius: 0; aspect-ratio: 4 / 3; }
.card--media .card__text { padding: 22px clamp(22px, 3vw, 30px) clamp(22px, 3vw, 30px); }
.card--media .card__text p:last-child { margin-bottom: 0; }

/* Bild-Karten (Programme, Kacheln) */
.tile {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 4 / 3; background: var(--anthracite); color: var(--white); isolation: isolate;
}
.tile--wide { aspect-ratio: 16 / 9; }
.tile--tall { aspect-ratio: 3 / 4; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,24,27,0) 35%, rgba(23,24,27,.55) 70%, rgba(23,24,27,.92) 100%); transition: opacity .4s var(--ease); }
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(18px, 2.5vw, 28px); }
.tile__bar { display: block; width: 34px; height: 4px; background: var(--orange); transform: skewX(-24deg); margin-bottom: 12px; transition: width .35s var(--ease); }
.tile h3 { margin: 0 0 4px; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.tile p { margin: 0; color: var(--mist); font-size: .95rem; line-height: 1.4; }
.tile__tag { position: absolute; top: 16px; left: 16px; z-index: 1; background: var(--orange); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: 8px; transform: skewX(-8deg); }
.tile__tag > span { display: inline-block; transform: skewX(8deg); }
.tile:hover img { transform: scale(1.06); }
.tile:hover .tile__bar { width: 64px; }

/* ---------- Schritte ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding: 28px 26px 28px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.section--dark .step { background: var(--graphite); border-color: rgba(255,255,255,.08); }
.step__num { font-family: var(--font-display); font-weight: 800; font-size: 3.6rem; line-height: 1; color: var(--orange); margin-bottom: 8px; display: block; transition: transform .3s var(--ease); transform-origin: left center; }
.step h3 { font-size: 1.6rem; }
.step p { color: var(--steel); margin-bottom: 0; }
/* Schritt mit Knopf: Knopf unten buendig, damit alle vier auf einer Linie stehen */
.step:has(> .btn) { display: flex; flex-direction: column; }
.step:has(> .btn) p { margin-bottom: 22px; }
.step > .btn { margin-top: auto; align-self: flex-start; }
.section--dark .step p { color: var(--mist); }

/* ---------- Programme (Detailliste) ---------- */
.program { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.program:first-of-type { border-top: 0; padding-top: 0; }
.program:nth-of-type(even) .program__media { order: 2; }
.program__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--anthracite); }
.program__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.program__body h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.program__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.program__meta li { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--orange-soft); color: var(--orange-deep); padding: 5px 12px; border-radius: 999px; }
.checks { list-style: none; padding: 0; margin: 0 0 1.2em; }
.checks li { position: relative; padding-left: 26px; margin-bottom: 6px; }
.checks li::before { content: ''; position: absolute; left: 0; top: .5em; width: 12px; height: 4px; background: var(--orange); transform: skewX(-24deg); transition: width .25s var(--ease); border-radius: 2px; }
@media (max-width: 860px) {
  .program { grid-template-columns: 1fr; }
  .program:nth-of-type(even) .program__media { order: 0; }
}

/* Sprungleiste Programme (sticky unter dem Header) */
.jumpbar { background: var(--paper); border-bottom: 1px solid var(--line); padding: 14px 0; }
@media (min-width: 961px) { .jumpbar { position: sticky; top: var(--header-h); z-index: 50; } }
.jump { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.jump__label { flex-basis: 100%; text-align: center; font-weight: 600; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--steel); margin-bottom: -2px; }
.jump__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.jump__list a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--anthracite); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1; white-space: nowrap; transform: skewX(-8deg); transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.jump__list a > span { display: inline-block; transform: skewX(8deg); }
.jump__list a::after { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: skewX(8deg) rotate(45deg); margin: -3px 0 0 -2px; transition: transform .2s var(--ease), border-color .2s var(--ease); }
.jump__list a:hover { background: var(--orange); color: var(--ink); transform: skewX(-8deg) translateY(-2px); box-shadow: 0 8px 18px rgba(23,24,27,.18); }
.jump__list a:hover::after, .jump__list a.is-active::after { border-color: var(--ink); transform: skewX(8deg) rotate(45deg) translate(2px, 2px); }
.jump__list a.is-active { background: var(--orange); color: var(--ink); }
@media (max-width: 600px) { .jump__label { display: none; } .jump__list a { font-size: .85rem; padding: 8px 11px; } }

/* ---------- Preise ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px 28px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan--featured { border: 2px solid var(--orange); box-shadow: var(--shadow); }
.plan__badge { position: absolute; top: -14px; left: 24px; background: var(--orange); color: var(--ink); font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; padding: 5px 12px; border-radius: 8px; transform: skewX(-8deg); }
.plan__badge > span { display: inline-block; transform: skewX(8deg); }
.plan__name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; margin: 0 0 6px; }
.plan__desc { color: var(--steel); font-size: .95rem; margin-bottom: 18px; min-height: 2.6em; }
.plan__price { font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 1; margin-bottom: 4px; }
.plan__price small { font-size: 1.1rem; font-weight: 600; color: var(--steel); letter-spacing: .04em; }
.plan__price .cur { font-size: 1.3rem; font-weight: 600; vertical-align: top; margin-right: 4px; color: var(--steel); }
/* «ab» vor dem Preis: gehoert zur Zahl, darf sie aber nicht ueberstimmen */
.plan__price .pre { font-size: 1.1rem; font-weight: 600; vertical-align: top; margin-right: 7px; color: var(--steel); text-transform: lowercase; }
.plan__hint { font-size: .85rem; color: var(--steel); margin-bottom: 18px; }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.plan li { position: relative; padding-left: 24px; margin-bottom: 8px; font-size: .97rem; }
.plan li::before { content: ''; position: absolute; left: 0; top: .55em; width: 12px; height: 4px; background: var(--orange); transform: skewX(-24deg); }
.plan .btn { align-self: stretch; }
.plan--dark { background: var(--graphite); border-color: rgba(255,255,255,.08); color: var(--white); }
.plan--dark .plan__desc, .plan--dark .plan__hint, .plan--dark .plan__price small, .plan--dark .plan__price .cur, .plan--dark .plan__price .pre { color: var(--mist); }
.plan__price--text { font-size: 2rem; padding: 10px 0; }
.btn-row--center { justify-content: center; }
.lead--center { margin-left: auto; margin-right: auto; }

/* Preisliste kompakt */
.pricelist { display: grid; gap: 14px; }
.pricelist__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.section--dark .pricelist__row { background: var(--graphite); border-color: rgba(255,255,255,.08); }
.pricelist__row strong { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; }
.pricelist__row span { color: var(--steel); font-size: .92rem; display: block; }
.section--dark .pricelist__row span { color: var(--mist); }
.pricelist__price { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; white-space: nowrap; transition: color .25s var(--ease); }
/* Zeile als Direktlink in den Wodify-Shop: Pfeil rechts, Preis wird orange */
a.pricelist__row { color: inherit; text-decoration: none; }
a.pricelist__row .pricelist__price::after { content: '›'; display: inline-block; margin-left: 10px; color: var(--orange); font-weight: 600; transition: transform .25s var(--ease); }
a.pricelist__row:hover .pricelist__price { color: var(--orange-deep); }
a.pricelist__row:hover .pricelist__price::after { transform: translateX(4px); }
.pricelist__hint { margin-top: 10px; font-size: .85rem; color: var(--steel); }

/* Laufzeiten-Tabelle (Unlimited / Open Gym) */
.terms__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.terms__box { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 28px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.terms__box:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--orange); }
.terms__box h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; margin: 0 0 12px; }
.terms__table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.terms__table th { text-align: left; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); padding: 0 0 8px; border-bottom: 2px solid var(--anthracite); }
.terms__table td { padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; transition: background .2s var(--ease); }
.terms__table th:not(:first-child), .terms__table td:not(:first-child) { text-align: right; white-space: nowrap; padding-left: 12px; }
.terms__table td:nth-child(2) { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.terms__table td small { display: block; color: var(--steel); font-size: .8rem; white-space: normal; }
.terms__table td:nth-child(2) small { display: inline; font-family: var(--font-body); font-weight: 400; font-size: .8rem; }
.terms__table tr.is-best td { color: var(--orange-deep); }
.terms__table tr.is-best td:nth-child(2) { color: var(--orange-deep); }
.terms__table tbody tr:hover td { background: var(--paper); }

/* ---------- Stundenplan ---------- */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.day { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 10px 14px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.day h3 { font-size: 1.2rem; letter-spacing: .06em; padding-bottom: 8px; border-bottom: 2px solid var(--ink); margin-bottom: 10px; }
.day.is-today { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange) inset; }
.day.is-today h3 { border-bottom-color: var(--orange); color: var(--orange-deep); }
.day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.slot { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: baseline; padding: 6px 8px; border-left: 4px solid var(--orange); background: var(--paper); border-radius: 8px; font-size: .82rem; line-height: 1.25; transition: transform .2s var(--ease), background .2s var(--ease); }
.slot b { font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.slot--hyrox { border-color: var(--ink); }
.slot--pl { border-color: var(--graphite); background: #E9EAEC; }
.slot--mami { border-color: #C58AA5; }
.slot--kids { border-color: var(--orange-deep); background: var(--orange-soft); }
.slot--team { border-color: var(--steel); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: .85rem; color: var(--steel); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 14px; height: 14px; border-left: 4px solid var(--orange); background: var(--paper); display: inline-block; border-radius: 4px; }
@media (max-width: 1100px) { .week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .week { grid-template-columns: 1fr; } }

/* Oeffnungszeiten: immer 6 Kacheln (Mo & Do zusammen, Sa und So einzeln). Feste Spaltenzahl statt
   auto-fit, weil 6 nur durch 6, 3 und 2 teilbar ist, mit auto-fit kaeme je nach Breite eine krumme
   Reihe heraus (z. B. 4 + 2). Mobile first, nur min-width, Stufen 2 -> 3 -> 6. minmax(0, 1fr) statt
   1fr, damit eine Spalte schmaler werden darf als ihr Inhalt und der Block nie aus dem Container
   laeuft. Die --3-Regeln stehen bewusst nach der 1081px-Regel, sonst gewinnt dort die 6er-Teilung. */
.hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 561px)  { .hours { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1081px) { .hours { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* In der schmalen Spalte der Startseite ist fuer 6 nebeneinander kein Platz -> 3 + 3 */
.hours--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 561px) { .hours.hours--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hours.hours--3 div { padding: 10px 8px; }
.hours.hours--3 span { font-size: .84rem; }

/* Absicherung, falls einmal 5 Kacheln gebraucht werden. Heute nirgends im Einsatz. */
@media (min-width: 1081px) { .hours--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.hours div { background: var(--graphite); border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; transition: transform .25s var(--ease), background .25s var(--ease); }
.hours b { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 1.1rem; margin-bottom: 4px; color: var(--orange); }
.hours span { display: block; font-size: .88rem; color: var(--mist); white-space: nowrap; line-height: 1.45; }

/* Embed (Wodify / Karte) mit Klick-zum-Laden */
.embed { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--paper); border: 1px solid var(--line); min-height: 420px; }
.embed iframe { width: 100%; height: 100%; min-height: 720px; border: 0; display: block; }
.embed--map iframe { min-height: 420px; }
.embed__gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 30px; background: var(--paper); }
.embed__gate p { max-width: 46ch; color: var(--steel); margin: 0; font-size: .95rem; }
.embed.is-loaded .embed__gate { display: none; }

/* ---------- Statistik ---------- */
.stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.stat { padding: 20px 10px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); text-align: center; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.section--dark .stat { background: var(--graphite); border-color: rgba(255,255,255,.08); }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1; color: var(--orange); display: inline-block; transition: transform .25s var(--ease); }
.stat__label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; color: var(--steel); line-height: 1.3; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.section--dark .stat__label { color: var(--mist); }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.coach { position: relative; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.coach__body { position: relative; z-index: 1; }
/* Foto erscheint beim Mouseover hinter dem Text (Dateien in img/coaches/; fehlt das Foto, bleibt die Karte wie bisher) */
.coach__photo { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
.coach__photo.is-missing { display: none; }
.coach__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; transform: scale(1.06); transition: transform .8s var(--ease); }
.coach__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,24,27,0) 0%, rgba(23,24,27,0) 45%, rgba(23,24,27,.55) 68%, rgba(23,24,27,.94) 100%); }
/* Body ist eine Flex-Spalte mit fester Mindesthoehe: der Abstandhalter nimmt beim Mouseover den freien Platz ein
   (flex-grow 0 -> 1), damit der Text nach unten rutscht, ohne dass die Karte hoeher wird */
.coach__body { display: flex; flex-direction: column; min-height: 300px; }
.coach__spacer { flex: 0 0 auto; flex-grow: 0; transition: flex-grow .45s var(--ease); }
.coach:has(.coach__photo:not(.is-missing)):hover .coach__spacer, .coach.is-open .coach__spacer { flex-grow: 1; }
.coach:has(.coach__photo:not(.is-missing)):hover .coach__photo, .coach.is-open .coach__photo { opacity: 1; }
.coach:has(.coach__photo:not(.is-missing)):hover .coach__photo img, .coach.is-open .coach__photo img { transform: scale(1); }
.coach:has(.coach__photo:not(.is-missing)):hover, .coach.is-open { color: var(--white); border-color: transparent; }
.coach:has(.coach__photo:not(.is-missing)):hover .coach__avatar, .coach.is-open .coach__avatar { opacity: 0; transform: scale(.6); }
.coach:has(.coach__photo:not(.is-missing)):hover .coach__role, .coach.is-open .coach__role { color: var(--orange); }
.coach:has(.coach__photo:not(.is-missing)):hover ul, .coach.is-open ul { color: var(--mist); }
/* Mouseover/Tap: Karte hebt sich mit deutlichem Schatten ab */
.coach:hover, .coach.is-open { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(23, 24, 27, .38), 0 8px 18px rgba(23, 24, 27, .22); }
.coach__avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--anthracite); color: var(--orange); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: .04em; margin-bottom: 16px; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease); }
.coach h3 { font-size: 1.5rem; margin-bottom: 2px; }
.coach__role { color: var(--orange-deep); font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.coach ul { list-style: none; padding: 0; margin: 0; font-size: .92rem; color: var(--steel); }
.coach li { padding-left: 18px; position: relative; }
.coach li::before { content: ''; position: absolute; left: 0; top: .6em; width: 9px; height: 3px; background: var(--orange); transform: skewX(-24deg); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 22px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.section--dark .faq details { background: var(--graphite); border-color: rgba(255,255,255,.08); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; transition: color .2s var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.6rem; color: var(--orange); transition: transform .3s var(--ease); flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 20px; color: var(--steel); }
.section--dark .faq details > div { color: var(--mist); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Shop ---------- */
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.product { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product__img { aspect-ratio: 1; background: var(--paper); display: grid; place-items: center; overflow: hidden; }
.product__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.product__img--contain img { object-fit: contain; padding: 12%; }
.product:hover .product__img img { transform: scale(1.05); }
.product__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product h3 { font-size: 1.35rem; margin: 0; }
.product__price { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }
.product__desc { color: var(--steel); font-size: .92rem; flex: 1; margin: 0 0 10px; }

/* ---------- Partner / Logos ----------
   Logowand: gleich grosse Kacheln. Die Logos selbst sind voellig verschieden (hohes Wappen, breiter
   Schriftzug, farbiger Kasten, JPG mit weissem Grund) – erst die Kachel macht daraus eine ruhige Reihe.
   Die Hoehen sind optisch ausgeglichen, nicht mathematisch: ein breiter Schriftzug darf flacher sein
   als ein rundes Siegel, sonst wirkt er riesig. 4 Kacheln pro Reihe, 7 Logos = 4 + 3 (zweite Reihe
   zentriert). Die weissen Raender der Bilder sind mit _work/trim-logos.ps1 weggeschnitten, sonst
   sitzt jedes Logo anders tief in seiner Kachel. */
.partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.partners > * { flex: 0 1 calc(25% - 11px); max-width: 100%; display: grid; place-items: center; min-height: 124px;
  padding: 20px 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.partners a:hover { border-color: var(--mist); box-shadow: 0 12px 30px rgba(23, 24, 27, .10); transform: translateY(-3px); }
.partners img { display: block; width: auto; height: auto; max-width: 100%; max-height: 52px; }
.partners img.is-tall { max-height: 82px; }
/* Health & Performance ist ein sehr helles Graugruen und verschwindet sonst auf Weiss */
.partners img.is-soft { filter: saturate(1.2) contrast(1.28); }
/* (Fruehere Sonderhoehe .is-fine fuer The Scratch entfaellt: seit 02.10.2026 liegt die kraeftigere
   Stickerei-Fassung des Logos vor, die bei normaler Hoehe gut lesbar ist.) */
@media (max-width: 1000px) { .partners > * { min-height: 112px; padding: 16px 18px; } }
@media (max-width: 760px) {
  .partners > * { flex-basis: calc(50% - 7px); min-height: 104px; padding: 16px 18px; }
  .partners img { max-height: 44px; }
  .partners img.is-tall { max-height: 66px; }
}

/* ---------- CTA-Band ---------- */
.cta-band { position: relative; color: var(--white); background: var(--ink); overflow: hidden; isolation: isolate; text-align: center; }
.cta-band img { position: absolute; inset: -14% 0 auto 0; width: 100%; height: 128%; object-fit: cover; object-position: center 50%; z-index: -2; will-change: transform; }
.cta-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(23,24,27,.9), rgba(23,24,27,.7)); }
.cta-band .container { padding-top: clamp(92px, 12vw, 158px); padding-bottom: clamp(92px, 12vw, 158px); }
@media (prefers-reduced-motion: reduce) { .cta-band img { inset: 0; height: 100%; transform: none !important; } }
.cta-band h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.cta-band .lead { margin: 0 auto 28px; color: var(--mist); }
.cta-band .btn-row { justify-content: center; }

/* ---------- Kontakt-Liste ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.contact-list i { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--orange-soft); color: var(--orange-deep); display: grid; place-items: center; font-style: normal; font-family: var(--font-display); font-weight: 800; transform: skewX(-8deg); }
.contact-list i > span { transform: skewX(8deg); display: inline-block; }
.contact-list b { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; }
.contact-list a { text-decoration: none; color: var(--ink); }
.contact-list a:hover { color: var(--orange-deep); }

/* ---------- Prose (Impressum / Datenschutz) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.9rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.35rem; margin-top: 1.3em; }
.prose p, .prose li { color: #3A3D43; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--mist); font-size: .95rem; }
.site-footer a { color: var(--mist); transition: color .2s var(--ease), transform .2s var(--ease); }
.site-footer a:hover { color: var(--orange); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: clamp(48px, 7vw, 80px) 0 40px; }
.footer__brand img { height: 96px; width: auto; margin-bottom: 24px; }
.footer__brand p { margin-bottom: 8px; }
.footer__col h4 { color: var(--white); font-size: 1.15rem; letter-spacing: .1em; margin-bottom: 14px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.social { display: flex; gap: 12px; margin-top: 18px; }
.social a { width: 42px; height: 42px; border-radius: var(--radius-sm); background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background .25s var(--ease), transform .25s var(--ease); }
.social a:hover { background: var(--orange); color: var(--ink); transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.footer__partners { border-top: 1px solid rgba(255,255,255,.08); padding: 28px 0; }
/* Im Footer dieselben Kacheln, nur kleiner: so stehen die 6 Logos in einer Reihe. Weisse Kacheln, weil
   die halbe Liste dunkle Schriftzuege auf transparentem Grund sind (und das H&P-JPG ohnehin Weiss hat). */
/* Feste Spaltenzahl statt fester Breite: mit flex-basis blieb bei mittleren Fenstern eine einzelne
   Kachel allein in der zweiten Reihe (5 + 1). Seit dem 8. Logo (09.10.2026) sind es vier pro Reihe,
   das ergibt 4 + 4 statt der unruhigen 6 + 2. */
.footer__partners .partners > * { flex-basis: calc(25% - 11px); min-height: 96px; padding: 14px 18px; border-color: rgba(255,255,255,.14); }
.footer__partners .partners img { max-height: 40px; }
.footer__partners .partners img.is-tall { max-height: 58px; }
.footer__partners .partners img.is-fine { max-height: 48px; }
/* 6 Logos: unten 3 + 3 bzw. 2 + 2 + 2 – so bleibt nie eine einzelne Kachel uebrig */
@media (max-width: 1000px) { .footer__partners .partners > * { flex-basis: calc(33.333% - 10px); } }
@media (max-width: 560px) { .footer__partners .partners > * { flex-basis: calc(50% - 7px); } }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: .85rem; }
.footer__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; gap: 30px; } }

/* Nach-oben + WhatsApp */
.to-top { position: fixed; right: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--anthracite); color: var(--white); border: 1px solid rgba(255,255,255,.15); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); z-index: 90; transform: translateY(10px); }
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--orange); color: var(--ink); }
.wa-float { position: fixed; left: 18px; bottom: 18px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: #fff; padding: 10px 16px 10px 12px; border-radius: 999px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .25s var(--ease); }
.wa-float:hover { transform: translateY(-2px); }
.wa-float svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-width: 600px) { .wa-float span { display: none; } .wa-float { padding: 12px; } }

/* ---------- Scroll-Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > :nth-child(2) { transition-delay: .08s; }
.reveal-stagger.is-in > :nth-child(3) { transition-delay: .16s; }
.reveal-stagger.is-in > :nth-child(4) { transition-delay: .24s; }
.reveal-stagger.is-in > :nth-child(5) { transition-delay: .32s; }
.reveal-stagger.is-in > :nth-child(6) { transition-delay: .4s; }
.reveal-stagger.is-in > :nth-child(n+7) { transition-delay: .48s; }
html.no-anim .reveal, html.no-anim .reveal-stagger > *, html.no-anim .hero__anim > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
  .hero__anim > * { opacity: 1; transform: none; }
}

/* ---------- Kleinkram ---------- */
.notice { border-left: 4px solid var(--orange); background: var(--orange-soft); padding: 14px 18px; border-radius: var(--radius-sm); font-size: .95rem; }
.section--dark .notice { background: rgba(238,127,60,.12); }
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: 20px; } .mt-3 { margin-top: 32px; } .mt-4 { margin-top: 48px; }
.text-center { text-align: center; }
.muted { color: var(--steel); }
.section--dark .muted { color: var(--mist); }
.img-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.img-stack { position: relative; }
.img-stack .img-frame + .img-frame { position: absolute; width: 46%; left: -12%; bottom: -20%; border: 6px solid var(--white); }
/* Auf der Startseite sitzt das kleine Bild tiefer: mit -20% verdeckte es 61 Prozent der Hoehe
   des grossen Bildes, jetzt sind es 43 Prozent, und es beginnt erst auf 57 Prozent der Hoehe
   (Rueckmeldung User 05.10.2026: «noch ein wenig weiter nach unten», «verdeckt zu viel vom
   oberen bild»). Nur hier, nicht bei .img-stack--right auf /location/: dort ist das grosse
   Bild flacher, derselbe Wert liesse die Ueberlappung auf 9 Prozent schrumpfen und das kleine
   Bild 23 px in den naechsten Abschnitt ragen. Unter 961px ist das kleine Bild ohnehin aus. */
.img-stack:not(.img-stack--right) .img-frame + .img-frame { bottom: -38%; }
.img-stack--right .img-frame + .img-frame { left: auto; right: -12%; }
/* Der Ueberstand nach rechts braucht Platz neben dem Container. Erst ab 1251px ist der Seitenrand
   breit genug, darunter entstand auf /location/ ein waagrechter Scrollbalken (bis 22px). */
@media (max-width: 1250px) { .img-stack--right .img-frame + .img-frame { right: 0; } }
.section--paper .img-stack .img-frame + .img-frame { border-color: var(--paper); }
@media (max-width: 960px) { .img-stack .img-frame + .img-frame { display: none; } }
.pill { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-deep); }
.section--dark .pill { background: rgba(238,127,60,.16); color: var(--orange); }

/* ---------- Checkout ---------- */
/* Seiten /checkout/ und /checkout/done/ (assets/js/checkout.js). Erste Formulare im Design-System:
   Inputs 48 px, 1 px Linie, Radius --radius-sm, Fokus orange; Fehlertexte orange-deep. */
.checkout-head { padding-bottom: 0; }
.checkout-head h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
.checkout-head .lead { margin-bottom: 0; }
/* minmax(0, 1fr) statt des stillen «auto»: Ohne das waechst die einspaltige Handy-Ansicht auf die
   BREITESTE Zeile im Formular. Die seitlich scrollende Tagesauswahl der Drop-in-Klassenwahl (.tdays)
   meldet eine Inhaltsbreite von rund 500 px, und das Raster hat sie uebernommen - gemessen am
   09.10.2026 auf 375 px: Seitenbreite 562 statt 375, alles rechts abgeschnitten. Die Breitseite-
   Ansicht hat die Begrenzung laengst (Zeile mit 1fr 360px), der Handy-Ansicht fehlte sie. */
.checkout .checkout__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.checkout [hidden], .done [hidden] { display: none !important; }
.checkout__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 36px); }
.cfields { border: 0; margin: 0; padding: 0; min-width: 0; }
.cstep, .cfield, .checkout__actions .notice { scroll-margin-top: calc(var(--header-h) + 20px); } /* Scroll-Ziele bleiben unter dem sticky Header sichtbar */
.cstep + .cstep, .checkout__actions, .cstep--pay { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 28px; }
.cstep__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cstep__head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0; }
.cstep__num { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-sm, 10px); background: var(--anthracite); color: var(--orange); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1; transform: skewX(-8deg); transition: background .25s var(--ease), color .25s var(--ease); }
.cstep__num > span { display: inline-block; transform: skewX(8deg); }
.cstep__note { color: var(--steel); font-size: .95rem; margin-bottom: 18px; }
/* Gesperrt (Stripe-Checkout ist eingebettet): Schritte 1+2 eingeklappt, nur eine Zeile mit den Angaben bleibt sichtbar */
.cstep__done { display: none; font-size: .95rem; color: var(--steel); margin: -6px 0 0 54px; }
.cstep__done a, .checkout__back a { color: var(--orange-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cstep__done a:hover, .checkout__back a:hover { color: var(--ink); }
.checkout.is-locked .cstep--plan .cstep__body, .checkout.is-locked .cstep--details .cstep__body,
.checkout.is-locked .checkout__pay, .checkout.is-locked .checkout__trust, .checkout.is-locked .csum__change { display: none; }
.checkout.is-locked .cstep__done { display: block; }
.checkout.is-locked .cstep--plan .cstep__num, .checkout.is-locked .cstep--details .cstep__num { background: var(--orange); color: var(--ink); }
.checkout.is-locked .checkout__actions { border-top: 0; margin-top: 0; padding-top: 0; }

/* Schritt 1: Gruppen-Pillen (wie .jump__list a, aber als Buttons) + Laufzeiten als Radio-Karten */
.cpills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.cpill { display: inline-flex; align-items: center; padding: 9px 12px; border: 0; border-radius: var(--radius-sm, 10px); background: var(--anthracite); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1; white-space: nowrap; transform: skewX(-8deg); transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.cpill > span { display: inline-block; transform: skewX(8deg); }
.cpill:hover { background: var(--orange); color: var(--ink); transform: skewX(-8deg) translateY(-2px); box-shadow: 0 8px 18px rgba(23,24,27,.18); }
.cpill.is-active { background: var(--orange); color: var(--ink); }
.cvariants { display: grid; gap: 10px; }
.cvariant { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); background: var(--white); cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.cvariant input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.cvariant:hover { border-color: var(--orange); transform: translateX(3px); }
.cvariant.is-checked { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset; background: #FFF8F2; }
.cvariant:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }
@supports not selector(:has(input)) { /* Fokusring ohne :has (ältere Firefox/Safari): Ring um Punkt bzw. Beschriftung */
  .cvariant input:focus-visible + .cvariant__dot { outline: 3px solid var(--orange); outline-offset: 3px; }
  .cseg__opt input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 6px; }
}
.cvariant__dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--mist); background: var(--white); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.cvariant.is-checked .cvariant__dot { border-color: var(--orange); box-shadow: inset 0 0 0 4px var(--orange); }
.cvariant__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; }
.cvariant__note { display: block; font-size: .85rem; color: var(--steel); margin-top: 3px; line-height: 1.35; }
.cvariant__price { text-align: right; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1; white-space: nowrap; }
.cvariant__price small { display: block; margin-top: 4px; font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--steel); letter-spacing: 0; }
.cvariant.is-checked .cvariant__price { color: var(--orange-deep); }
@media (max-width: 480px) {
  .cvariant { grid-template-columns: 20px minmax(0, 1fr); }
  .cvariant__price { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .cvariant__price small { margin: 0; }
}

/* Schritt 2: Formular */
.cform { display: grid; gap: 18px; }
.cform__row { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cform__row--zip { grid-template-columns: 130px minmax(0, 1fr); }
@media (max-width: 600px) { .cform__row { grid-template-columns: 1fr; } .cform__row--zip { grid-template-columns: 110px minmax(0, 1fr); } }
.cfield > label, .cfield__label { display: block; font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--anthracite); margin-bottom: 6px; }
.cfield input[type="text"], .cfield input[type="email"], .cfield input[type="tel"], .cfield input[type="date"] {
  display: block; width: 100%; height: 48px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); background: var(--white);
  font: inherit; color: var(--ink); line-height: normal; -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cfield input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(238,127,60,.22); }
.cfield input::placeholder { color: var(--mist); }
.cfield.is-invalid input[type="text"], .cfield.is-invalid input[type="email"], .cfield.is-invalid input[type="tel"], .cfield.is-invalid input[type="date"] { border-color: var(--orange-deep); }
/* Fehlertexte sind Live-Regionen: immer im DOM (leer = keine Höhe), nur der Text wird gesetzt */
.cfield__error { display: block; margin: 0; font-size: .85rem; font-weight: 500; color: var(--orange-deep); }
.cfield__error:not(:empty) { margin-top: 6px; }
.cfield__error--solo:not(:empty) { margin-top: 12px; }
.cform .notice { margin: 0; } /* Hinweis (Kids-Abo) als Grid-Kind ohne Absatzabstand */
/* Kids-Abo: Block mit Hinweis + Kind-Feldern, unten durch Linie von den Eltern-Angaben getrennt */
#details-kids { display: grid; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
#details-kids[hidden] { display: none; }
#details-kids .cfield__hint--row { margin: 0; font-weight: 600; color: var(--anthracite); }
.cfield__hint { margin: 6px 0 0; font-size: .82rem; color: var(--steel); line-height: 1.4; }
.cfield__hint--row { margin-top: -8px; }
/* Geschlecht: Radio-Pillen mit orangem Rand, wenn gewählt */
.cseg { display: flex; gap: 8px; }
.cseg__opt { position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); background: var(--white); cursor: pointer; font-weight: 600; font-size: .95rem; text-align: center; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.cseg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.cseg__opt:hover { border-color: var(--orange); }
.cseg__opt.is-checked { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset; background: var(--orange-soft); color: var(--orange-deep); }
.cseg__opt:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }
.cfield.is-invalid .cseg__opt { border-color: var(--orange-deep); }
/* AGB-Checkbox */
.ccheck { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: .95rem; line-height: 1.5; }
.ccheck input { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--orange); }
.ccheck a { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; }
.ccheck a:hover { color: var(--ink); }
.cfield > label.ccheck { display: flex; font-weight: 400; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; }
.checkout__pay { margin-top: 4px; }
.checkout__trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: .82rem; color: var(--steel); text-align: center; }
.checkout__trust svg { flex-shrink: 0; color: var(--orange-deep); }
.notice--error { border-left-color: var(--orange-deep); margin-bottom: 18px; }

/* Schritt 3: Stripe-Checkout (iframe) */
.checkout__status { display: flex; align-items: center; gap: 12px; color: var(--steel); font-size: .95rem; margin: 0 0 18px; }
.spinner { width: 22px; height: 22px; flex-shrink: 0; border: 3px solid var(--line); border-top-color: var(--orange); border-radius: 50%; animation: cspin .8s linear infinite; }
.spinner--lg { display: block; width: 48px; height: 48px; border-width: 4px; margin: 0 auto 22px; }
@keyframes cspin { to { transform: rotate(360deg); } }
.checkout__mount { min-height: 20px; }
.checkout__back { margin: 18px 0 0; font-size: .9rem; }

/* Zusammenfassung: rechts sticky (≥ 961 px), auf dem Handy als kompakte Leiste oben */
.csum { background: var(--anthracite); color: var(--white); border-radius: var(--radius); padding: 24px 26px; }
.csum .eyebrow { color: var(--orange); margin-bottom: 10px; }
.csum__name { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; text-transform: uppercase; margin: 0 0 6px; }
.csum__term { color: var(--mist); font-size: .95rem; margin: 0 0 12px; }
.csum__note { color: var(--mist); font-size: .88rem; line-height: 1.4; margin: 0 0 16px; padding-left: 12px; border-left: 3px solid var(--orange); }
.csum__price { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; }
.csum__price small { font-family: var(--font-body); font-weight: 400; font-size: .85rem; color: var(--mist); }
.csum__vat { margin: 8px 0 0; font-size: .78rem; color: var(--mist); opacity: .8; }
.csum__change { display: inline-block; margin-top: 14px; color: var(--orange); font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; transition: color .2s var(--ease); }
.csum__change:hover { color: var(--white); }
@media (min-width: 961px) {
  .checkout .checkout__layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: clamp(24px, 4vw, 48px); }
  .csum { order: 2; position: sticky; top: calc(var(--header-h) + 20px); }
}
@media (max-width: 960px) {
  .csum { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 14px 18px; border-radius: var(--radius-sm, 10px); }
  .csum .eyebrow, .csum__note, .csum__vat, .csum__change { display: none; }
  .csum__name { font-size: 1.25rem; margin: 0; }
  .csum__term { margin: 0; font-size: .85rem; }
  .csum__price { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 2px; padding: 0; border: 0; font-size: 1.6rem; }
}

/* Laufzeiten-Tabelle (memberships): Laufzeit und Preis sind Links in den Checkout */
.terms__table td a { color: inherit; text-decoration: none; display: block; transition: color .2s var(--ease); }
.terms__table td:nth-child(2) a::after { content: '›'; display: inline-block; margin-left: 8px; color: var(--orange); font-weight: 600; transition: transform .25s var(--ease); }
.terms__table tbody tr:hover td a { color: var(--orange-deep); }
.terms__table tbody tr:hover td:nth-child(2) a::after { transform: translateX(3px); }

/* Bestätigungsseite /checkout/done/ */
.done__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px); text-align: center; }
.done h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); }
.done .lead { margin-left: auto; margin-right: auto; }
.done .btn-row { justify-content: center; margin-top: 8px; }
.done__icon { width: 76px; height: 76px; border-radius: 50%; background: var(--orange); color: var(--ink); display: grid; place-items: center; margin: 0 auto 22px; font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; }
.done__product { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.3rem; color: var(--orange-deep); margin: 0 0 16px; }
.done__product:empty { display: none; }
.done__notice { text-align: left; margin-top: 18px; }
.done__steps { list-style: none; counter-reset: dstep; margin: 26px auto 30px; padding: 0; text-align: left; max-width: 540px; display: grid; gap: 12px; }
.done__steps li { counter-increment: dstep; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.done__steps li:hover { border-color: var(--orange); transform: translateX(3px); }
.done__steps li::before { content: counter(dstep); grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: var(--radius-sm, 10px); background: var(--anthracite); color: var(--orange); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1; transform: skewX(-8deg); }
.done__steps b { grid-column: 2; display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; margin-bottom: 2px; }
.done__steps span { grid-column: 2; display: block; color: var(--steel); font-size: .92rem; line-height: 1.45; }
.done__steps a { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Probetraining ---------- */
/* Seite /free-trial/ (assets/js/trial.js). Baut auf dem Checkout-Block auf: .cstep, .cfield, .cform,
   .csum, .cpill und .cvariant werden wiederverwendet. Neu sind nur die Tages-Pillen, die Klassen-Karten
   mit Platz-Badge, der Ladezustand und die Bestätigung, die das Formular ersetzt. */
.trial.is-done .csum, .trial.is-unavailable .csum { display: none; }
.trial.is-done .checkout__layout, .trial.is-unavailable .checkout__layout { grid-template-columns: minmax(0, 1fr); }
.tlabel { margin: 0 0 10px; font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--anthracite); }
/* In der Kasse bricht die Tagesauswahl um, statt seitlich zu scrollen (Wunsch Timo, 09.10.2026:
   «ist natuerlicher»). Beim Drop-in sind es hoechstens acht Tage, das ergibt zwei bis drei Reihen -
   und kein Tag versteckt sich mehr hinter dem rechten Rand. Auf der Probetrainings-Seite bleibt das
   Scrollen: dort stehen bis zu 14 Tage, umgebrochen waere das ein Block ueber den halben Bildschirm. */
.checkout .tdays { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; padding-bottom: 4px; }
.checkout .tdays::-webkit-scrollbar { height: 0; }

.tdays + .tlabel { margin-top: 22px; }

/* Schritt 1a: Tage als Pillen – auf dem Handy waagrecht scrollbar, Tage ohne Plätze gedämpft */
/* Innenabstand min. 6px: sonst schneidet der Scroll-Container den Fokus-Ring der ersten/letzten Pille ab */
.tdays { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 8px 8px 12px; margin: 0; scrollbar-width: thin; }
.tdays::-webkit-scrollbar { height: 6px; }
.tdays::-webkit-scrollbar-thumb { background: var(--mist); border-radius: 999px; }
.tday { flex: 0 0 auto; scroll-snap-align: start; padding: 8px 14px; }
.tday > span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tday__wd { line-height: 1; }
.tday__d { font-family: var(--font-body); font-weight: 500; font-size: .72rem; letter-spacing: .02em; text-transform: none; line-height: 1; opacity: .75; }
.tday.is-empty { background: var(--paper); color: var(--steel); }
.tday.is-empty:hover { background: var(--mist); color: var(--ink); }
.tday.is-active.is-empty { background: var(--orange); color: var(--ink); }
.tday:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 3px; }

/* Ladezustand: Platzhalter-Balken, damit das Layout nicht springt */
.tloading { margin: 0 0 12px; font-size: .9rem; color: var(--steel); }
/* Hinweis unter der Klassenliste (MamiFit ist kostenpflichtig) */
.tnote { margin: 18px 0 0; font-size: .9rem; color: var(--steel); line-height: 1.5; }
.tnote a { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; }
.tskel { display: grid; gap: 10px; }
.tskel span { display: block; height: 64px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--paper) 0%, #E7E7E4 50%, var(--paper) 100%); background-size: 220% 100%; animation: tshimmer 1.4s linear infinite; }
@keyframes tshimmer { from { background-position: 220% 0; } to { background-position: -220% 0; } }
html.no-anim .tskel span { animation: none; }

/* Schritt 1b: Klassen als Radio-Karten (.cvariant) – statt des Preises ein Badge mit den freien Plätzen */
.cvariant--class .cvariant__name { font-size: 1.25rem; }
.tslots { justify-self: end; padding: 6px 11px; border-radius: 999px; background: var(--paper); color: var(--steel); font-size: .78rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap; }
.tslots--low { background: var(--orange-soft); color: var(--orange-deep); }
@media (max-width: 480px) { .cvariant--class .tslots { grid-column: 2; justify-self: start; margin-top: 8px; } }
.tempty { margin: 14px 0 0; padding: 14px 18px; border-left: 4px solid var(--orange); background: var(--orange-soft); border-radius: var(--radius-sm); font-size: .95rem; }
/* Fehlermeldung der API: steht ausserhalb des Formulars (bleibt sichtbar, wenn der Fallback das Formular ersetzt) */
.tnotice { margin: 22px 0 0; scroll-margin-top: calc(var(--header-h) + 20px); }
.trial .checkout__pay .spinner { width: 18px; height: 18px; border-width: 3px; border-color: rgba(23,24,27,.28); border-top-color: var(--ink); }

/* Wodify nicht erreichbar oder keine Plätze: Kontaktweg statt Formular */
.tfallback h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.tfallback .btn-row { margin-top: 22px; }
.tfallback__hint { margin: 18px 0 0; font-size: .9rem; }
.tfallback__hint a { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; }
.tfallback__hint a:hover { color: var(--ink); }

/* Bestätigung auf derselben Seite */
.tdone { scroll-margin-top: calc(var(--header-h) + 20px); }
.tdone .done__icon { margin: 0 0 22px; }
.tdone .eyebrow { margin-bottom: 10px; }
.tdone h2 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 0 0 6px; outline: none; }
.tdone__class { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.25rem; color: var(--orange-deep); margin: 0 0 16px; }
.tdone__class:empty { display: none; }
.tdone .btn-row { margin-top: 26px; }
.tfacts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.tfacts li { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.tfacts li:hover { border-color: var(--orange); transform: translateX(3px); }
.tfacts b { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; letter-spacing: .02em; margin-bottom: 2px; }
.tfacts span { display: block; color: var(--steel); font-size: .92rem; line-height: 1.45; }

/* ---------- Hover-Animationen (Wunsch: alles reagiert auf Mouseover) ---------- */
.img-frame:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(23,24,27,.24); }
.img-frame:hover img { transform: scale(1.05); }
.program__media:hover img { transform: scale(1.05); }
.stat:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: var(--shadow); }
.stat:hover .stat__num { transform: scale(1.08); }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--orange); }
.step:hover .step__num { transform: scale(1.08); }
.day:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--orange); }
.slot:hover { transform: translateX(4px); background: var(--orange-soft); }
.hours div:hover { transform: translateY(-3px); background: #4A4E55; }
.pricelist__row:hover { transform: translateX(4px); border-color: var(--orange); box-shadow: var(--shadow); }
.faq details:hover { border-color: var(--orange); }
.faq summary:hover { color: var(--orange-deep); }
.section--dark .faq summary:hover { color: var(--orange); }
.checks li:hover::before { width: 22px; }
.statbar__item:hover { background: rgba(23,24,27,.08); }
.statbar__item:hover .statbar__num { transform: scale(1.08); }
.coach:hover .coach__avatar { background: var(--orange); color: var(--ink); transform: rotate(-6deg) scale(1.06); }
.coach:hover { border-color: var(--orange); }
.card:hover { border-color: var(--orange); }
.card:hover .card__icon { background: var(--orange); color: var(--ink); }
.plan:hover { border-color: var(--orange); }
.product:hover { border-color: var(--orange); }
.contact-list li { transition: transform .2s var(--ease); }
.contact-list li:hover { transform: translateX(4px); }
.contact-list li:hover i { background: var(--orange); color: var(--ink); }
.contact-list i { transition: background .2s var(--ease), color .2s var(--ease); }
.partners a:hover { transform: translateY(-3px) scale(1.06); }
.footer__col a:hover, .footer__bottom a:hover { transform: translateX(3px); display: inline-block; }
.footer__col a, .footer__bottom a { display: inline-block; }
.social a:hover { transform: translateY(-3px) rotate(-6deg); }
.brand img { transition: transform .3s var(--ease); }
.brand:hover img { transform: scale(1.04); }
.embed { transition: box-shadow .3s var(--ease); }
.embed:hover { box-shadow: var(--shadow); }
.wa-float:hover { transform: translateY(-3px) scale(1.04); }
.to-top:hover { transform: translateY(-3px); }
.tile:hover { box-shadow: var(--shadow); }
.tile { transition: box-shadow .35s var(--ease); }
.hero .btn--orange:hover, .cta-band .btn--orange:hover { box-shadow: 0 12px 30px rgba(238,127,60,.45); }
/* ---------- Intro: Neon-Leuchtreklame → Logo fliegt in den Header ---------- */
.intro { position: fixed; inset: 0; z-index: 300; background: radial-gradient(ellipse at 50% 42%, #3A3D43 0%, var(--anthracite) 40%, #1A1B1E 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; transition: opacity .7s var(--ease); }
.intro::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px); pointer-events: none; }
.intro.is-done { opacity: 0; pointer-events: none; }
.intro__neon { position: relative; text-align: center; line-height: .98; user-select: none; padding: 0 20px; }
.intro__neon.is-on { animation: neon-hold 1.3s steps(1, end) 4.1s infinite; }
.intro__neon.is-off { animation: neon-off .45s steps(1, end) forwards; }
.intro__line { display: block; }
.intro__part { display: inline-block; opacity: 0; }
.intro__neon.is-on .intro__part { animation: neon-glitch-on 1.2s steps(1, end) var(--d, 0s) forwards; }
.intro__tear { position: absolute; left: 0; right: 0; height: 14vh; background: linear-gradient(180deg, transparent, rgba(255,255,255,.06) 40%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 60%, transparent); mix-blend-mode: screen; pointer-events: none; animation: tear 2.2s linear .4s infinite; }
.intro__its { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(2rem, 6vw, 4.2rem); color: #FFC08A; text-shadow: 0 0 3px #fff, 0 0 8px #FFA45C, 0 0 22px #EE7F3C, 0 0 48px #EC7108, 0 0 90px #EC7108; }
.intro__gym { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: clamp(3.6rem, 12vw, 9rem); color: #fff; text-shadow: 0 0 3px #fff, 0 0 10px rgba(255,255,255,.95), 0 0 26px rgba(255,255,255,.65), 0 0 60px rgba(255,255,255,.35); margin: .08em 0; }
.intro__bracket { font-weight: 600; margin: 0 .04em; }
.intro__last { display: flex; align-items: baseline; justify-content: center; gap: .25em; }
.intro__life { font-family: 'Kaushan Script', 'Brush Script MT', cursive; font-size: clamp(3.4rem, 11vw, 8rem); color: #FFC08A; text-shadow: 0 0 3px #fff, 0 0 8px #FFA45C, 0 0 22px #EE7F3C, 0 0 48px #EC7108, 0 0 90px #EC7108; transform: rotate(-4deg); display: inline-block; padding-right: .15em; }
.intro__logo { position: fixed; left: 50%; top: 50%; width: min(64vw, 520px); height: auto; opacity: 0; transform-origin: center center; transform: translate(-50%, -50%) scale(.55); will-change: transform; filter: drop-shadow(0 0 14px rgba(238,127,60,.9)) drop-shadow(0 0 40px rgba(238,127,60,.55)); transition: transform .95s cubic-bezier(.7, 0, .3, 1), opacity .45s var(--ease), filter .9s var(--ease); pointer-events: none; }
.intro__logo.is-in { opacity: 1; animation: logo-glitch-in .7s steps(1, end); }
.intro__logo.is-fly { filter: none; }
.intro__skip { position: absolute; right: 22px; bottom: 20px; font-family: var(--font-display); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; color: var(--mist); opacity: .7; }
html { scrollbar-gutter: stable; }
html.intro-running .brand img { visibility: hidden; }
html.intro-running .hero__anim > * { animation-play-state: paused; }
/* Einblenden wie bei gestoertem Funkkontakt: Aussetzer, Ruckeln, Zeilen-Risse, kurzer Farbstich */
@keyframes neon-glitch-on {
  0%   { opacity: 0; transform: none; clip-path: none; filter: none; }
  3%   { opacity: 1; transform: translateX(-7px) skewX(-8deg); clip-path: inset(0 0 58% 0); }
  5%   { opacity: .15; transform: translateX(6px); clip-path: inset(42% 0 0 0); }
  8%   { opacity: 1; transform: translateX(-3px) skewX(5deg); clip-path: inset(0 0 30% 0); filter: hue-rotate(150deg) saturate(1.6); }
  10%  { opacity: 0; }
  12%  { opacity: 1; transform: translateX(4px); clip-path: inset(25% 0 45% 0); filter: none; }
  15%  { opacity: .4; transform: translateX(-5px) skewX(-4deg); clip-path: none; }
  18%  { opacity: 1; transform: translateX(2px); }
  21%  { opacity: 0; }
  23%  { opacity: 1; transform: translateX(-2px); clip-path: inset(60% 0 0 0); }
  26%  { opacity: 1; transform: none; clip-path: none; }
  34%  { opacity: 1; }
  36%  { opacity: .3; transform: translateX(5px) skewX(-6deg); filter: hue-rotate(150deg) saturate(1.6); }
  38%  { opacity: 1; transform: translateX(-3px); clip-path: inset(10% 0 70% 0); filter: none; }
  41%  { opacity: 1; transform: none; clip-path: none; }
  55%  { opacity: 1; }
  57%  { opacity: .6; transform: translateX(-2px); }
  59%  { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; clip-path: none; filter: none; }
}
/* Leuchtreklame steht, aber der Kontakt bleibt wackelig */
@keyframes neon-hold {
  0%, 100% { transform: none; opacity: 1; }
  7%  { transform: translateX(2px); opacity: .85; }
  9%  { transform: none; opacity: 1; }
  41% { transform: translateX(-3px) skewX(-2deg); opacity: .6; }
  43% { transform: none; opacity: 1; }
  44% { opacity: .9; }
  46% { opacity: 1; }
  78% { transform: translateX(1px); opacity: .75; }
  80% { transform: none; opacity: 1; }
}
/* Signal weg: Bild reisst und klappt zusammen wie ein alter Bildschirm */
@keyframes neon-off {
  0%   { opacity: 1; transform: none; }
  20%  { opacity: .9; transform: translateX(9px) skewX(-12deg); clip-path: inset(30% 0 0 0); }
  35%  { opacity: .7; transform: translateX(-6px); clip-path: none; filter: hue-rotate(150deg); }
  55%  { opacity: 1; transform: scaleY(.12); filter: brightness(2); }
  100% { opacity: 0; transform: scaleY(0); }
}
@keyframes logo-glitch-in {
  0%  { opacity: 0; } 12% { opacity: 1; } 18% { opacity: .2; } 26% { opacity: 1; } 34% { opacity: .5; filter: hue-rotate(150deg) brightness(1.4); }
  42% { opacity: 1; } 60% { opacity: .8; } 66% { opacity: 1; } 100% { opacity: 1; }
}
@keyframes tear { 0% { top: -16vh; opacity: 0; } 8% { opacity: 1; } 70% { opacity: .6; } 100% { top: 104vh; opacity: 0; } }

/* ---------- Live-Kalender auf /schedule/ ----------
   Setzt auf dem bestehenden Wochenraster auf: .week, .day, .slot und alle .slot--Varianten
   bleiben unverändert, auch die Umbrüche bei 1100, 720 und 460 Pixeln (Z. 393-395).
   Neu sind nur die Wochenleiste, die zweite Zeile mit den freien Plätzen und vier Zustände.
   Keine neuen Farben, keine neuen Abstandsgrössen.

   Wichtig: .checkout [hidden] in Z. 626 gilt nur innerhalb von .checkout und .done. Auf
   /schedule/ gibt es keinen solchen Vorfahren, und .week trägt display: grid, .cpill trägt
   display: inline-flex. Ohne die Regel direkt darunter blieben Skelett, leeres Raster und
   die Blätterknöpfe trotz hidden sichtbar. */
.livecal { position: relative; }
.livecal [hidden] { display: none !important; }

/* Wochenleiste: Blätterknöpfe als .cpill wie auf /free-trial/ (Z. 647-651), Zeitraum in der
   Auszeichnungsschrift wie die Tagesüberschriften */
.livecal__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 16px; }
.livecal__range { flex: 1 1 14ch; margin: 0; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; }
/* Rand des verfügbaren Zeitraums: erkennbar tot, aber lesbar */
.livecal .cpill[disabled] { background: var(--mist); color: var(--graphite); cursor: default; box-shadow: none; }
.livecal .cpill[disabled]:hover { background: var(--mist); color: var(--graphite); transform: none; box-shadow: none; }
.livecal .cpill:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 3px; }

/* Tageskarte: wie im statischen Plan, zusätzlich das Datum unter dem Wochentag */
.week--live .day h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.day__date { font-family: var(--font-body); font-weight: 500; font-size: .72rem; letter-spacing: .02em; text-transform: none; color: var(--steel); }
/* Orange auf Weiss ergibt bei 11.5 Pixeln nur 3.0:1. Den heutigen Tag markieren ohnehin schon der
   orange Innenring und die orange Tagesüberschrift, die Datumszeile darf darum dunkel bleiben. */
.day.is-today .day__date { color: var(--ink); font-weight: 600; }
/* Ohne diese Zeile löscht der Hover-Schatten (Z. 846) den orangen Innenring von .day.is-today (Z. 380) */
.day.is-today:hover { box-shadow: 0 0 0 2px var(--orange) inset, var(--shadow); }
/* Tag ohne Klassen: gedämpft, kein Heben beim Mouseover, es gibt nichts zu sehen */
.day.is-empty { background: var(--paper); }
.day.is-empty:hover { transform: none; box-shadow: none; border-color: var(--line); }
/* Heute UND leer: beide Hover-Regeln sind gleich spezifisch, ohne diese Zeile gewinnt die leere
   und der heutige Tag verliert beim Mouseover seine Markierung. */
.day.is-today.is-empty:hover { box-shadow: 0 0 0 2px var(--orange) inset; border-color: var(--orange); }
.day__none { margin: 0; padding: 6px 2px 2px; font-size: .8rem; line-height: 1.35; color: var(--steel); }

/* Farben der Klassen. Seit der statische Plan weg ist, trägt die Farbe die ganze Unterscheidung,
   darum ein breiterer Balken und eine eigene, deutlich getrennte Tönung je Programm statt dreier
   kaum unterscheidbarer Grautöne. WOD bleibt bewusst ungetönt: es ist rund zwei Drittel aller
   Klassen, eine Tönung darauf würde den Plan zukleistern.
   Die Tönung steckt in --slot-bg, damit der Hover sie nicht wegwischt: .slot:hover (Z. 847)
   setzt sonst überall var(--orange-soft) und die Farbcodierung wäre beim Mouseover weg. */
.week--live .slot { --slot-bg: var(--paper); background: var(--slot-bg); border-left-width: 5px; }
.week--live .slot:hover { background: var(--slot-bg); }
/* HYROX ist schwarz-gelb, darum schwarzer Balken auf gelber Fläche. Ein gelber Balken käme
   dem Orange der WODs zu nahe. */
.week--live .slot--hyrox { border-color: #17181B; --slot-bg: #FAEFC2; }
.week--live .slot--pl    { border-color: #1F6B8F; --slot-bg: #E4EFF4; }
.week--live .slot--mami  { border-color: #C0527F; --slot-bg: #FAEAF1; }
.week--live .slot--kids  { border-color: #2E7D52; --slot-bg: #E6F2EA; }
.week--live .slot--team  { border-color: #6B4E9B; --slot-bg: #EEE9F6; }
/* Zustände setzen die Tönung bewusst zurück, sonst konkurrieren Farbe und Zustand */
.week--live .slot.is-full, .week--live .slot.is-past { --slot-bg: var(--white); }

/* Legende: dieselben Klassen wie die Kacheln, damit Legende und Plan nie auseinanderlaufen.
   .legend i hat nur einen linken Rand, border-color aus den Klassen trifft darum genau ihn. */
.legend i.slot--hyrox { border-color: #17181B; background: #FAEFC2; }
.legend i.slot--pl    { border-color: #1F6B8F; background: #E4EFF4; }
.legend i.slot--mami  { border-color: #C0527F; background: #FAEAF1; }
.legend i.slot--kids  { border-color: #2E7D52; background: #E6F2EA; }
.legend i.slot--team  { border-color: #6B4E9B; background: #EEE9F6; }

/* Freie Plätze als zweite Zeile in der Kachel. .slot ist auto/1fr (Z. 383), die Zeile spannt
   darum über beide Spalten, damit das bestehende Raster unverändert bleibt. */
/* minmax(0, 1fr) statt 1fr: sonst darf die Namensspalte nicht schmaler werden als ihr längstes
   Wort und ein Name wie «MamiFit® Rückbildungstraining» läuft aus der Kachel. */
.week--live .slot { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; }
.week--live .slot > span { overflow-wrap: anywhere; }
/* var(--steel) käme auf den Programmtönungen nur auf rund 4.2:1, bei 11.5 Pixeln sind 4.5:1 nötig.
   var(--graphite) liegt auf allen Tönungen über 8:1. */
.slot__free { grid-column: 1 / -1; font-weight: 600; font-size: .72rem; line-height: 1.25; letter-spacing: .02em; color: var(--graphite); }
/* Fast voll: der schräge Balken betont die Zahl. Orange als Schriftfarbe wäre hier zu schwach,
   var(--orange-deep) auf var(--paper) ergibt nur rund 2.7:1. */
.slot.is-low .slot__free { color: var(--ink); }
.slot.is-low .slot__free::before { content: ''; display: inline-block; width: 12px; height: 4px; margin-right: 6px; vertical-align: .18em; border-radius: 2px; background: var(--orange-deep); transform: skewX(-24deg); }
/* Ausgebucht: hohle Kachel mit Haarlinie, der farbige Balken bleibt, das Programm bleibt erkennbar */
.slot.is-full { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--steel); }
.slot.is-full b { color: var(--steel); }
/* Vorbei: hohle Kachel, Balken grau. Steht nach .is-full, damit bei beidem vorbei gewinnt. */
.slot.is-past { background: var(--white); border-left-color: var(--mist); color: var(--steel); }
.slot.is-past b, .slot.is-past .slot__free { color: var(--steel); }
.slot.is-past .slot__free::before { display: none; }
/* Ohne diese Zeile färbt .slot:hover (Z. 847) die Kachel orange und löscht den Zustand */
.week--live .slot.is-full:hover, .week--live .slot.is-past:hover { background: var(--white); transform: none; }

/* Ladezustand: dieselben Platzhalter wie auf /free-trial/ (.tskel, Z. 802-805), sieben Karten,
   damit beim Eintreffen der Daten nichts springt */
.livecal .tskel { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.livecal .tskel span { height: 180px; border-radius: var(--radius); }
@media (max-width: 1100px) { .livecal .tskel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .livecal .tskel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .livecal .tskel { grid-template-columns: 1fr; } }

.livecal__msg { margin: 0 0 16px; color: var(--steel); font-size: .9rem; }
.livecal__stamp { margin: 14px 0 0; font-size: .8rem; color: var(--steel); }

/* Bewegungsarm: der globale Block kürzt die Dauern, hier fällt jede Verschiebung ganz weg.
   Farbwechsel beim Mouseover bleiben. */
@media (prefers-reduced-motion: reduce) {
  .livecal .tskel span { animation: none; background: var(--paper); }
  .livecal .day, .livecal .slot, .livecal .cpill { transition: none; }
  .livecal .day:hover, .livecal .slot:hover, .livecal .cpill:hover { transform: none; }
}

/* ---------- Einwilligung fuer externe Inhalte (consent.js) ----------
   Achtung: [hidden] muss hier hart gesetzt werden. .consent__cats hat display:grid
   und .btn hat display:inline-flex, beides schlaegt das Standardverhalten von
   [hidden] sonst, und die Kategorien waeren immer sichtbar. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 250; background: var(--ink); color: var(--white); border-top: 3px solid var(--orange); box-shadow: 0 -14px 40px rgba(23,24,27,.4); }
.consent [hidden] { display: none !important; }
.consent__inner { max-width: var(--max); margin: 0 auto; padding: 20px var(--gutter) 22px; display: grid; gap: 16px; }
.consent__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1.3rem; margin: 0 0 6px; }
.consent__text { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--mist); max-width: 82ch; }
.consent__text + .consent__text { margin-top: 6px; }
.consent__text a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.consent__text a:hover { color: var(--white); }
.consent__cats { display: grid; gap: 10px; max-width: 820px; }
.consent__cat { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--graphite); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .2s var(--ease); }
.consent__cat:hover { border-color: var(--steel); }
.consent__cat input { flex: none; margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--orange); cursor: pointer; }
.consent__cat b { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; }
.consent__cat em { display: block; font-style: normal; font-size: .88rem; color: var(--mist); }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.consent__more { background: none; border: 0; padding: 6px 2px; color: var(--mist); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.consent__more:hover { color: var(--white); }
.consent__reopen { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.consent__reopen:hover { color: var(--orange); }
@media (max-width: 620px) {
  .consent__inner { padding-bottom: 18px; }
  .consent__actions .btn { flex: 1 1 100%; }
  .consent__more { width: 100%; text-align: center; }
}

/* Die Leiste klebt unten, daraus folgen drei Dinge:
   - Bei geoeffnetem Mobilmenue weicht sie. .site-header ist position:sticky mit z-index 100
     und sperrt .nav in einen eigenen Stapelkontext; das Menue kann die 250 der Leiste also
     nie uebertreffen und laege sonst darunter.
   - WhatsApp-Knopf und Nach-oben-Knopf (beide z-index 90, bottom 18px) ruecken um die
     gemessene Hoehe der Leiste nach oben. consent.js meldet sie als --consent-h.
   - Mit geoeffneten Einstellungen darf die Leiste auf kleinen Schirmen nicht ueber den
     oberen Bildschirmrand hinauswachsen, sonst sind Titel und Text nicht mehr erreichbar. */
body.nav-open .consent { display: none !important; }
.consent { max-height: max(85vh, 180px); overflow-y: auto; overscroll-behavior: contain; }
.consent-offen .to-top, .consent-offen .wa-float { bottom: calc(18px + var(--consent-h, 0px)); }